/* ═══════════════════════════════════════════════
   style.css — 채점 시스템 공용 스타일

   [색] 2.0 부터 Notion 풍의 중성 회색을 바탕으로 하고, 강조색은 파랑 하나만 쓴다.
        판정 색(AC/오답)만 의미가 달라 예외로 둔다.
        선 색은 흐리게 두지 않는다 (가독성 우선).

   [글꼴] --sans 한 줄만 바꾸면 전체가 바뀐다.
          한글 글꼴을 서버에 올린다면 여기 맨 앞에 이름을 넣으면 된다.
   ═══════════════════════════════════════════════ */

/* ═══ 글꼴 ═══════════════════════════════════════
   Pretendard (SIL Open Font License 1.1) — 서버에 직접 올려 쓴다.
   학교망에서 외부 CDN 이 막힐 수 있고, 한 번 받으면 브라우저가 캐시한다.
   한글 2,780자를 담은 서브셋이라 굵기 하나에 260KB 안팎이다.
   글꼴을 바꾸려면 아래 @font-face 와 --sans 만 손보면 된다. */
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Pretendard-Medium.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face{
  font-family:'Pretendard'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Pretendard-Bold.subset.woff2') format('woff2');
}

:root{
  /* ── 중성 램프 (2.0, Notion 풍) ──
     예전 파랑 램프(hue 220)의 이름을 그대로 쓰되 값은 따뜻한 회색으로 바꾸었다.
     --b600 만 강조색(파랑)이다. 선 색은 흐리면 읽기 어려우므로 대비를 충분히 둔다. */
  --b25:#FBFBFA;
  --b50:#F5F5F3;
  --b100:#EDEDEB;
  --b200:#DCDBD7;
  --b300:#C2C1BC;
  --b400:#9B9A96;
  --b500:#6B6A66;
  --b600:#2383E2;   /* 강조색 */
  --b700:#37352F;
  --b800:#2C2B27;
  --b900:#1F1E1B;

  /* ── 텍스트·선 ── */
  --ink:#37352F;
  --ink-2:#5C5B57;
  --ink-3:#85847F;
  --line:#DCDBD7;     /* 입력 칸 · 카드 테두리 */
  --line-2:#E6E5E2;   /* 표의 줄 구분 */
  --fill:var(--b25);

  --accent:var(--b600);
  --accent-2:#0B6BCB; /* 강조색 눌림 · 마우스 올림 */
  --accent-soft:#E7F1FC;

  --top-h:56px;       /* 위쪽 메뉴 높이 (고정 메뉴 아래로 내용이 가려지지 않게) */
  --ctl-h:34px;       /* 입력 칸 · 선택 상자 · 단추의 공통 높이 (2.0) */
  --ctl-h-sm:28px;    /* 작은 단추 · 작은 선택 상자 */

  /* ── 판정 ── */
  --ok:#0A7A45;      --ok-soft:#DFF3E8;
  --bad:#C0322F;     --bad-soft:#FBE9E8;
  --warn:#8A5A00;    --warn-soft:#FBF0DC;

  --sans:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",
         "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* 코드는 고정폭으로. 한글 주석은 고정폭 글꼴에 없으므로 Pretendard 로 떨어진다. */
  --mono:"D2Coding","Cascadia Mono",Consolas,"DejaVu Sans Mono",Pretendard,monospace;

  --w:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font:15px/1.68 var(--sans); letter-spacing:0;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--b500); outline-offset:2px}

/* ── 상단바 ─────────────────────────────────
   위쪽 메뉴는 늘 화면 맨 위에 고정한다 (2.0).
   position:sticky 라서 문서 흐름 안에 자리를 차지하므로 내용이 메뉴 밑으로 숨지 않는다. */
.top{position:sticky; top:0; z-index:100;
     background:rgba(255,255,255,.96); border-bottom:1px solid var(--line);
     -webkit-backdrop-filter:saturate(180%) blur(8px); backdrop-filter:saturate(180%) blur(8px)}
.top-in{max-width:var(--w); margin:0 auto; padding:0 20px;
        display:flex; align-items:center; gap:18px; min-height:var(--top-h); flex-wrap:wrap}
.brand{font-weight:700; font-size:16.5px; color:var(--ink); letter-spacing:-.02em}
.brand:hover{text-decoration:none; color:var(--ink)}
/* 로고를 올리면 이미지로 바뀐다. 높이로 맞추고 가로는 비율대로 —
   가로 상한을 두지 않으면 가로로 긴 로고가 메뉴를 밀어낸다. */
.brand.haslogo{display:inline-flex; align-items:center; line-height:0}
.brand.haslogo img{height:26px; width:auto; max-width:190px; object-fit:contain; display:block}
.mainnav{display:flex; gap:2px; flex:1; flex-wrap:wrap}
.mainnav a{padding:6px 11px; border-radius:6px; color:var(--ink-2); font-size:14.5px; font-weight:500}
.mainnav a:hover{background:var(--b100); text-decoration:none; color:var(--ink)}
.mainnav a.on{background:var(--b100); color:var(--ink); font-weight:700;
              box-shadow:inset 0 0 0 1px var(--b200)}
/* KAIT-PLAY (코딩 게임) — 새 탭으로 열리는 바깥 링크. 다른 메뉴와 구분되게 보라 글자 + 바깥 링크 표시 */
.mainnav a.navplay{display:inline-flex; align-items:center; gap:4px; font-weight:700; color:#6940A5}
.mainnav a.navplay svg{opacity:.7}
.who{font-size:13.5px; color:var(--ink-2); white-space:nowrap}
.who b{color:var(--ink); font-weight:700}
.who .rolebadge{margin-left:6px}
.top .util{display:flex; gap:13px; align-items:center}
.top .util a{font-size:13.5px; color:var(--ink-2)}
.top .util a:hover{color:var(--ink)}

/* 관리자 · 교사 화면 — 바탕을 Notion 사이드바 색으로 바꾸고 맨 위에 색 띠를 둔다 */
.top.is-staff{background:rgba(247,246,243,.97); box-shadow:inset 0 3px 0 var(--role-c, #E9A23B)}
.top.is-admin{--role-c:#E9A23B}
.top.is-teacher{--role-c:#2E9E6A}

/* 역할 배지 */
.rolebadge{display:inline-block; font-size:11.5px; font-weight:700; line-height:1.5;
           padding:1px 7px; border-radius:4px; white-space:nowrap; vertical-align:1px}
.rolebadge.r-admin{background:#FBEBD3; color:#8A5300}
.rolebadge.r-teacher{background:#DDF1E6; color:#1D6B47}
.rolebadge.r-student{background:var(--b100); color:var(--ink-2)}

/* 화면 전환 토글 (관리자 · 교사 ↔ 학생) */
.viewtoggle{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
            color:var(--ink-2); white-space:nowrap; padding:4px 8px 4px 4px; border-radius:20px;
            border:1px solid var(--line); background:#fff}
.viewtoggle:hover{text-decoration:none; border-color:var(--b300); color:var(--ink)}
.viewtoggle .sw{position:relative; width:30px; height:18px; border-radius:9px; background:var(--b300);
                transition:background .15s; flex:0 0 auto}
.viewtoggle .sw::after{content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
                       border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25);
                       transition:transform .15s}
.viewtoggle.on .sw{background:var(--role-c, var(--b600))}
.viewtoggle.on .sw::after{transform:translateX(12px)}
.viewtoggle.r-admin{--role-c:#E9A23B}
.viewtoggle.r-teacher{--role-c:#2E9E6A}

/* 꼬리말을 창 맨 아래에 붙인다 (2.0).
   내용이 짧은 화면에서 꼬리말이 중간까지 올라오지 않게 몸통을 세로 flex 로 두고 본문이 남는 높이를 채운다. */
body{display:flex; flex-direction:column; min-height:100vh}
.site-main{flex:1 0 auto; width:100%}
html{scroll-padding-top:calc(var(--top-h) + 12px)}

/* ── 레이아웃 ───────────────────────────────── */
.wrap{max-width:var(--w); margin:0 auto; padding:30px 20px 80px}
.wrap.narrow{max-width:820px}

.phead{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.phead h1{margin:0; font-size:23px; font-weight:700; letter-spacing:-.025em; color:var(--b900)}
.phead .sub{color:var(--ink-3); font-size:14px; font-weight:500}
.phead .grow{flex:1}

/* 문제 번호 — 이 시스템의 고유 식별자라 항상 고정폭으로 */
.pno{font-family:var(--mono); color:var(--b400); font-size:.92em; letter-spacing:-.02em}

/* ── 표 ─────────────────────────────────────── */
table.list{width:100%; border-collapse:collapse}
table.list th{
  text-align:left; font-size:12.5px; font-weight:700; color:var(--b500);
  padding:0 12px 9px; border-bottom:1.5px solid var(--b200);
}
table.list td{padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.list tr:hover td{background:var(--b25)}
table.list td.num{font-family:var(--mono); font-size:13px; color:var(--b500);
                  font-weight:600; white-space:nowrap}
table.list td.right,table.list th.right{text-align:right}
table.list td.center,table.list th.center{text-align:center}
table.list .title{font-weight:500}
table.list .title a{color:var(--b700)}
.empty{padding:56px 20px; text-align:center; color:var(--ink-3); font-size:14.5px;
       background:var(--b25); border-radius:10px}

/* ── 태그 ───────────────────────────────────── */
.tag{
  display:inline-block; font-size:12px; font-weight:500; padding:2px 9px; margin:0 4px 3px 0;
  background:var(--b50); border:1px solid var(--b200); border-radius:20px; color:var(--b600);
}
a.tag:hover{background:var(--b600); border-color:var(--b600); color:#fff; text-decoration:none}

/* 제목 앞 이모지 */
.emo{margin-right:.35em; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-weight:400}

/* ── 판정 배지 ──────────────────────────────── */
.v{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:4px; letter-spacing:-.02em; white-space:nowrap;
}
.v-AC{background:var(--ok); color:#fff}
.v-WA{background:var(--bad-soft); color:var(--bad)}
/* 결과마다 색을 나눈다 (1.6.1) — 예전에는 WA · RE · TLE · MLE 가 모두 같은 빨강이었다 */
.v-RE{background:#F0E8FB; color:#6A3DB8}                 /* 실행 중 오류: 보라 */
.v-TLE,.v-MLE{background:#FDE9DA; color:#B04A0A}          /* 시간 · 메모리 초과: 주황 */
.v-CE,.v-IE{background:var(--warn-soft); color:var(--warn)}
.v-wait{background:var(--b100); color:var(--b500)}
.v-open{background:var(--b600); color:#fff}   /* 묶음 '진행중' — 초록(완료·정답)과 구분 */

/* ── 폼 ─────────────────────────────────────── */
.field{margin-bottom:18px}
.field > label{display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--b800)}
.field .hint{font-size:12.5px; color:var(--ink-3); font-weight:400; margin-left:6px}
input[type=text],input[type=number],input[type=password],input[type=search],
input[type=date],input[type=time],input[type=datetime-local],
input[type=file],select,textarea{
  width:100%; font:14.5px/1.6 var(--sans); color:var(--ink);
  padding:8px 11px; border:1px solid var(--line); border-radius:7px; background:#fff;
}

/* 날짜·시간 칸은 브라우저가 그리는 부분이 많아 그대로 두면 겉돈다.
   바꿀 수 있는 것(틀·글꼴·높이·달력 단추 색)만 나머지와 맞춘다. */
input[type=datetime-local],input[type=date],input[type=time]{
  font-family:var(--mono); font-size:13.5px; min-height:39px;
  appearance:none; -webkit-appearance:none;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer; opacity:.55; padding:2px; border-radius:4px;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover{
  opacity:1; background:var(--b100);
}
input[type=datetime-local]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit{color:var(--ink)}
input[type=datetime-local]:invalid::-webkit-datetime-edit,
input[type=date]:invalid::-webkit-datetime-edit{color:var(--b300)}
/* 파일 고르기 단추도 우리 단추와 비슷하게 */
input[type=file]{font-size:13.5px; padding:6px 10px}
input[type=file]::file-selector-button{
  font:13px/1 var(--sans); font-weight:600; color:var(--b700);
  background:#fff; border:1px solid var(--b200); border-radius:6px;
  padding:7px 12px; margin-right:10px; cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--b50); border-color:var(--b300)}
textarea{resize:vertical}
textarea.code,input.code{font-family:var(--mono); font-size:13px}
input:focus,select:focus,textarea:focus{border-color:var(--b500); outline:none;
  box-shadow:0 0 0 3px rgba(35,131,226,.18)}
::placeholder{color:var(--b300)}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row > .field{flex:1; min-width:150px}

/* ── 버튼 ───────────────────────────────────── */
.btn{
  display:inline-block; font:14px/1 var(--sans); font-weight:600;
  padding:9px 16px; border-radius:7px; border:1px solid var(--b200);
  background:#fff; color:var(--b700); cursor:pointer;
}
.btn:not(:disabled):hover{background:var(--b50); border-color:var(--b300); text-decoration:none}
.btn.primary{background:var(--b600); border-color:var(--b600); color:#fff}
.btn.primary:not(:disabled):hover{background:var(--b700); border-color:var(--b700)}
.btn.danger{color:var(--bad); border-color:#F0D3D2}
.btn.danger:not(:disabled):hover{background:var(--bad-soft); border-color:#E4B5B3}
.btn.sm{font-size:13px; padding:6px 11px}
.btn:disabled{opacity:.5; cursor:default}
.actions{display:flex; gap:10px; align-items:center; margin-top:26px;
         padding-top:20px; border-top:1.5px solid var(--b100)}
.actions .grow{flex:1}

/* ── 알림 ───────────────────────────────────── */
.note{padding:11px 15px; border-radius:7px; font-size:14.5px; margin-bottom:18px; font-weight:500}
.note.ok{background:var(--ok-soft); color:var(--ok)}
.note.err{background:var(--bad-soft); color:var(--bad)}
.note.info{background:var(--b50); color:var(--b700)}

/* ── 섹션 ───────────────────────────────────── */
.sec{margin-top:36px}
.sec > h2{font-size:17px; font-weight:700; margin:0 0 5px; letter-spacing:-.02em; color:var(--b800)}
.sec > .desc{font-size:13.5px; color:var(--ink-3); margin:0 0 15px}

/* ── 마크다운 편집(입력 | 미리보기) ─────────── */
.mdedit{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mdedit textarea{min-height:300px; font-family:var(--mono); font-size:13px; line-height:1.65}
.mdprev{
  border:1px solid var(--b100); border-radius:7px; padding:13px 17px;
  background:var(--b25); overflow:auto; min-height:300px;
}
.mdedit .cap{font-size:12px; color:var(--b500); font-weight:600; margin-bottom:5px}
@media (max-width:599px) and (pointer:coarse){ .mdedit{grid-template-columns:1fr} }

.mdtools{display:flex; gap:9px; align-items:center; margin-bottom:9px}
.mdtools .status{font-size:12.5px; color:var(--b500)}

/* 렌더된 마크다운 본문 */
.md{font-size:15px; line-height:1.78}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md h1,.md h2,.md h3{line-height:1.4; margin:1.4em 0 .5em; letter-spacing:-.02em; color:var(--b900)}
.md h1{font-size:1.35em} .md h2{font-size:1.18em} .md h3{font-size:1.05em}
.md p{margin:.7em 0}
.md ul,.md ol{padding-left:1.4em; margin:.7em 0}
.md li{margin:.25em 0}
.md code{font-family:var(--mono); font-size:.88em; background:var(--b100);
         color:var(--b800); padding:1px 6px; border-radius:4px}
.md pre{background:#fff; border:1px solid var(--b200); border-radius:7px;
        padding:12px 14px; overflow-x:auto; margin:.9em 0}
.md pre code{background:none; padding:0; font-size:13px; line-height:1.6; color:var(--ink)}
.md img{max-width:100%; height:auto; border-radius:5px}
.md table{border-collapse:collapse; margin:.9em 0; font-size:14px}
.md th,.md td{border:1px solid var(--b200); padding:6px 11px}
.md th{background:var(--b50); color:var(--b700); font-weight:700}
.md blockquote{margin:.9em 0; padding:2px 15px; border-left:3px solid var(--b300); color:var(--ink-2)}

/* ── 테스트케이스 ───────────────────────────── */
.tc{border:1px solid var(--line); border-radius:9px; margin-bottom:12px; background:#fff;
    overflow:hidden}
.tc-head{
  display:flex; align-items:center; gap:12px; padding:8px 13px;
  border-bottom:1px solid var(--line-2); background:var(--b25); font-size:13.5px;
}
.tc-head .n{font-family:var(--mono); font-weight:700; color:var(--b500)}
.tc-head .grow{flex:1}
.tc-head label{display:flex; align-items:center; gap:6px; color:var(--ink-2); cursor:pointer}
.tc-body{display:grid; grid-template-columns:1fr 1fr; gap:0}
.tc-body > div{padding:11px 13px}
.tc-body > div:first-child{border-right:1px solid var(--line-2)}
.tc-body .cap{font-size:12px; color:var(--b500); font-weight:600; margin-bottom:5px}
.tc-body textarea{font-family:var(--mono); font-size:13px; min-height:90px;
                  border-color:var(--line-2)}
@media (max-width:599px) and (pointer:coarse){
  .tc-body{grid-template-columns:1fr}
  .tc-body > div:first-child{border-right:0; border-bottom:1px solid var(--line-2)}
}
.tc.sample{border-color:var(--b300)}
.tc.sample .tc-head{background:var(--b100)}
.tc.sample .tc-head .n{color:var(--b700)}

/* ── 기타 ───────────────────────────────────── */
.muted{color:var(--ink-2)}
.small{font-size:13.5px}
.mono{font-family:var(--mono)}
.nowrap{white-space:nowrap}
.searchbar{display:flex; gap:9px; margin-bottom:18px; flex-wrap:wrap}
.searchbar input[type=text]{max-width:280px}
.searchbar select{max-width:190px}

/* ═══ 학생 화면 ═══════════════════════════════ */

/* 문제 상단 제한 정보 */
.limits{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
        font-size:12.5px; color:var(--ink-3); margin:-8px 0 20px}
.limits b{color:var(--ink-2); font-weight:600}
.limits .tag{font-size:11.5px; padding:1px 8px}

/* 문제 | 제출 두 칸 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
@media (max-width:599px) and (pointer:coarse){ .split{grid-template-columns:1fr} }
.pane{min-width:0}
h2.ph{font-size:15px; font-weight:700; color:var(--b800); margin:28px 0 8px;
      padding-bottom:6px; border-bottom:1.5px solid var(--b100)}

/* 예시 입출력 — 입력과 출력을 위아래로 놓는다 */
.sample{display:flex; flex-direction:column; gap:12px; margin-bottom:18px}
.sample .cap{display:flex; align-items:center; gap:8px;
             font-size:12px; font-weight:600; color:var(--b500); margin-bottom:5px}
.sample pre{margin:0; background:var(--b25); border:1px solid var(--b100); border-radius:7px;
            padding:10px 12px; font-family:var(--mono); font-size:13px; line-height:1.55;
            overflow-x:auto; white-space:pre-wrap; word-break:break-all}

/* 제출 영역 */
.subhead{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.subhead label{font-size:13.5px; font-weight:700; color:var(--b800)}
.subhead .grow{flex:1}
textarea.editor{
  width:100%; min-height:340px; font-family:var(--mono); font-size:13.5px; line-height:1.6;
  padding:12px 14px; border:1px solid var(--line); border-radius:8px;
  tab-size:4; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}

/* 채점 결과 상자 */
.rbox{margin-top:16px; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.rbox.ok{border-color:#A9DCC1} .rbox.bad{border-color:#EFC3C1}
.rbox .rhead{display:flex; align-items:center; gap:10px; padding:11px 15px; font-size:14.5px}
.rbox.ok  .rhead{background:var(--ok-soft);  color:var(--ok)}
.rbox.bad .rhead{background:var(--bad-soft); color:var(--bad)}
.rbox.wait .rhead{background:var(--b50); color:var(--b600)}
.rbox .rmeta{padding:9px 15px; font-size:13.5px; color:var(--ink-2);
             font-family:var(--mono); border-top:1px solid var(--line-2)}
.rbox .rmsg{margin:0; padding:11px 15px; background:#fff; border-top:1px solid var(--line-2);
            font-family:var(--mono); font-size:12.5px; line-height:1.55;
            white-space:pre-wrap; word-break:break-all; max-height:260px; overflow:auto}

/* 좁은 표 (내 제출) */
table.list.compact td{padding:7px 10px; font-size:13px}

/* 채점 결과 화면 */
table.list tr.me td{background:var(--b50)}
table.list tr.me:hover td{background:var(--b100)}
.chk{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--ink-2);
     white-space:nowrap}
.detail{border:1px solid var(--b200); border-radius:9px; margin-bottom:22px; overflow:hidden}
.detail > .dhead{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
               padding:11px 15px; background:var(--b25); border-bottom:1px solid var(--b100)}
.detail > .dhead .grow{flex:1}
.detail .cap{font-size:12px; font-weight:600; color:var(--b500); padding:10px 16px 0}
pre.codeview{margin:0; padding:14px 16px; font-family:var(--mono); font-size:13px;
             line-height:1.6; overflow-x:auto; background:#fff; white-space:pre}
pre.codeview.msg{background:var(--b25); border-top:1px solid var(--line-2); white-space:pre-wrap}

/* 코드를 볼 수 있다는 표시 */
a.codelink{text-decoration:underline; text-underline-offset:2px;
           text-decoration-color:var(--b300)}
a.codelink:hover{text-decoration-color:var(--b600)}

/* ═══ 수업 · 평가 ═════════════════════════════ */

/* 종류 전환 탭 */
.tabbar{display:flex; gap:4px; margin-bottom:18px; border-bottom:1.5px solid var(--b100)}
.tabbar a{padding:8px 16px; font-size:14.5px; font-weight:600; color:var(--ink-2);
          border-bottom:2.5px solid transparent; margin-bottom:-1.5px}
.tabbar a:hover{color:var(--b600); text-decoration:none}
.tabbar a.on{color:var(--b700); border-bottom-color:var(--b600)}

/* 반 고르기 */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:flex; align-items:center; gap:7px; padding:6px 12px; cursor:pointer;
      border:1px solid var(--line); border-radius:20px; font-size:13.5px; background:#fff}
.chip:hover{border-color:var(--b300); background:var(--b25)}
.chip:has(input:checked){background:var(--b100); border-color:var(--b400); color:var(--b800);
                         font-weight:600}

/* 학생: 수업·평가 목록 */
.setlist{display:flex; flex-direction:column; gap:10px}
.setrow{display:flex; align-items:center; gap:14px; padding:14px 17px;
        border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.setrow:hover{border-color:var(--b400); background:var(--b25); text-decoration:none}
.setrow.off{background:var(--fill); color:var(--ink-2)}
.setrow .sinfo{flex:1; min-width:0}
.setrow .stitle{font-size:15.5px; font-weight:700; color:var(--b800); letter-spacing:-.015em}
.setrow.off .stitle{color:var(--ink-2)}
.setrow .smeta{margin-top:5px; font-size:12.5px; color:var(--ink-3); font-family:var(--mono)}
.setrow .sbadges{display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end}

.donebox{margin-top:20px}
.donebox > summary{cursor:pointer; font-size:13.5px; color:var(--ink-2); padding:6px 2px;
                   list-style:none}
.donebox > summary::-webkit-details-marker{display:none}
.donebox > summary::before{content:'▸ '; color:var(--b400)}
.donebox[open] > summary::before{content:'▾ '}
.donebox > summary:hover{color:var(--b600)}
.donebox .setlist{margin-top:10px}

/* 관리자 목록의 줄 단위 버튼 */
table.list.sets td.rowbtns{white-space:nowrap; text-align:right}
table.list.sets td.rowbtns form{display:inline}
table.list.sets td.rowbtns > *{margin-left:4px}
table.list tr.dim td{background:var(--fill); color:var(--ink-2)}
table.list tr.dim .title a{color:var(--ink-2)}
.lockmark{margin-left:6px; font-size:12px}

/* 진행률 막대 */
.prog{display:flex; align-items:center; gap:9px}
.prog .bar{flex:1; height:7px; background:var(--b100); border-radius:4px; overflow:hidden}
.prog .bar span{display:block; height:100%; background:var(--b500); border-radius:4px}

/* 현황표 */
.scrollx{overflow-x:auto; border:1px solid var(--line-2); border-radius:9px}
table.list.grid{min-width:600px}
table.list.grid th,table.list.grid td{white-space:nowrap}
table.list.grid th.center,table.list.grid td.center{text-align:center; padding-left:6px; padding-right:6px}
table.list.grid th .need{font-size:11px; color:var(--ink-3); font-weight:500}
table.list.grid th a.plink{color:inherit; text-decoration:underline; text-decoration-color:var(--line, #ccd); text-underline-offset:3px}
table.list.grid th a.plink:hover{color:var(--b700)}
table.list.grid td sup{font-size:9px; color:var(--ok)}
td.c-done{background:var(--ok-soft); color:var(--ok); font-weight:700}
td.c-part{background:var(--warn-soft); color:var(--warn); font-weight:700}
td.c-try{color:var(--ink-3)}
table.list.grid tr:hover td.c-done{background:#CFEBDC}

/* 붙여넣기 차단 안내 */
.warnmsg{min-height:20px; color:var(--bad); font-weight:600}

/* 평가: 통과 뒤 다음 회차 안내 */
.rbox .rnext{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
             padding:12px 15px; background:#fff; border-top:1px solid var(--line-2)}
.rbox .rnext b{color:var(--b800); font-size:14px}
.rbox .rnext .btn{margin-left:auto}

/* 제출 버튼 줄 */
.btnrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.btnrow #afterBtns{display:flex; align-items:center; gap:10px}

/* 복사 버튼 — 라벨 바로 옆 */
.copybtn{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
         border:1px solid var(--b200); border-radius:5px; background:#fff;
         color:var(--b500); cursor:pointer; padding:0; vertical-align:middle}
.copybtn:hover{background:var(--b100); color:var(--b700); border-color:var(--b400)}
.copybtn.done{background:var(--ok); border-color:var(--ok); color:#fff}
.copybtn.done svg{display:none}
.copybtn.done::after{content:'✓'; font-size:12px; font-weight:700}

/* 관리자 수업·평가 표 — 머리글이 세로로 접히지 않게 */
table.list.sets th{white-space:nowrap}
table.list.sets td{white-space:nowrap}
table.list.sets td.title{white-space:normal}

/* 테스트케이스 ZIP 올리기 */
.tcupload{margin-top:18px; padding:14px 16px; border:1px dashed var(--b300);
          border-radius:9px; background:var(--b25)}
.tcupload .cap{font-size:13px; font-weight:700; color:var(--b700); margin-bottom:4px}
.tcupload p{margin:4px 0 10px}
.tcupload code{font-family:var(--mono); font-size:12px; background:#fff;
               border:1px solid var(--b200); border-radius:4px; padding:1px 5px}
.tcupload-row{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.tcupload-row input[type=file]{width:auto; max-width:340px; background:#fff}

/* ═══ 접었다 펴는 판 ═════════════════════════ */
.panel{border:1px solid var(--line); border-radius:9px; margin-bottom:12px; background:#fff}
.panel > summary{cursor:pointer; padding:11px 16px; font-size:14px; font-weight:600;
                 color:var(--b800); list-style:none; display:flex; align-items:center; gap:8px}
.panel > summary::-webkit-details-marker{display:none}
.panel > summary::before{content:'▸'; color:var(--b400); font-size:11px}
.panel[open] > summary::before{content:'▾'}
.panel > summary:hover{background:var(--b25); border-radius:9px}
.panel[open] > summary{border-bottom:1px solid var(--line-2); border-radius:9px 9px 0 0}
.panel-b{padding:15px 16px 17px}
.panel-b .field:last-child{margin-bottom:0}

/* 문제 번호 일괄 수정 */
.renum-errs{margin:8px 0 0; padding-left:20px; font-weight:400}
.renum-scroll{max-height:340px; overflow:auto; margin-bottom:10px}
.renum-preview h2{font-size:16px}
.inline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* 반 목록 */
.grouplist{display:flex; flex-direction:column; gap:7px; margin-top:14px}
.grouprow{display:flex; align-items:center; gap:10px; padding:8px 12px;
          border:1px solid var(--line-2); border-radius:7px; background:var(--b25)}
.grouprow .gname{font-weight:600; color:var(--b700)}

/* 선택 후 일괄 처리 줄 */
.bulkbar{display:flex; align-items:center; gap:11px; flex-wrap:wrap;
         padding:9px 14px; margin-bottom:12px;
         background:var(--b50); border:1px solid var(--b100); border-radius:8px}
.bulkbar .grow{flex:1}

/* 회원 표 */
table.list.users td{white-space:nowrap}
table.list.users td.rowbtns{text-align:right}
table.list.users td.rowbtns > *{margin-left:4px}
table.list tr.isadmin td{background:var(--b25)}

.ok-text{color:var(--ok); font-weight:600}
.bad-text{color:var(--bad); font-weight:600}

/* ═══ 바닥글 ═════════════════════════════════ */
/* 첫 화면은 1920×1080 화면(브라우저 안쪽 높이 약 900px)에서 스크롤 없이 보이게
   위아래 여백을 줄인다. 다른 화면은 그대로. */
.foot{flex-shrink:0; margin-top:60px; border-top:1px solid var(--line); background:var(--b25)}
.wrap.home{padding-top:20px; padding-bottom:24px}
.site-main:has(.wrap.home) + .foot{margin-top:24px}
.foot-in{max-width:var(--w); margin:0 auto; padding:22px 20px 30px;
         display:flex; flex-direction:column; gap:8px;
         font-size:13px; color:var(--ink-3)}
/* 관리자가 넣는 안내 — 마크다운이라 문단·목록·링크가 올 수 있다 */
.foot-extra{color:var(--ink-2); margin-bottom:4px}
.foot-extra p{margin:0 0 4px}
.foot-extra p:last-child{margin-bottom:0}
.foot-lic{color:var(--ink-3)}
.foot-in b{color:var(--b700)}
.foot-in a{color:var(--ink-2)}
.foot-in a:hover{color:var(--b600)}
.foot .sep{margin:0 7px; color:var(--b300)}

/* ═══ 로그인 ═════════════════════════════════ */
.loginwrap{max-width:420px; padding-top:60px}
.logincard{border:1px solid var(--line); border-radius:12px; padding:28px 28px 30px; background:#fff}
.logincard h1{margin:0 0 22px; font-size:20px; font-weight:700; color:var(--b900);
              letter-spacing:-.02em; text-align:center}
.btn.big{font-size:15px; padding:12px 22px; width:100%; text-align:center}

/* 문제 화면의 로그인 안내 */
.loginbox{border:1px dashed var(--b300); border-radius:10px; padding:20px 22px;
          background:var(--b25); text-align:center}
.loginbox b{display:block; font-size:15px; color:var(--b800); margin-bottom:6px}
.loginbox p{margin:0 0 14px}
.loginbox .btn{width:auto}

/* ═══ 첫 화면 ═══════════════════════════════ */
.hero{text-align:center; padding:22px 20px 24px}
.hero h1{margin:0; font-size:64px; font-weight:800; letter-spacing:-.04em; color:var(--b700);
         line-height:1}
.hero p{margin:14px 0 0; font-size:17px; color:var(--b500)}
.hero p b{color:var(--b700); font-weight:700}
.hero.small{padding:26px 20px 22px}
.hero.small h1{font-size:34px}
.hero.small p{font-size:14.5px; margin-top:8px}
.herobtns{display:flex; gap:10px; justify-content:center; margin-top:24px; flex-wrap:wrap}
.herobtns .btn{width:auto; min-width:150px}

.homecols{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px}
@media (max-width:599px) and (pointer:coarse){ .homecols{grid-template-columns:1fr} }
.homecol{border:1px solid var(--line); border-radius:11px; overflow:hidden; background:#fff}
.homecol > h2{margin:0; padding:12px 17px; font-size:14.5px; font-weight:700; color:var(--b800);
              background:var(--b25); border-bottom:1px solid var(--line-2)}
.homebody{padding:14px 17px; min-height:120px}
.homebody > p{margin:0}
.homeitem{display:flex; align-items:center; gap:10px; padding:8px 0;
          border-bottom:1px solid var(--line-2); color:var(--ink)}
.homeitem:last-child{border-bottom:0}
.homeitem:hover{text-decoration:none; color:var(--b600)}
.homeitem .t{flex:1; font-size:14px; font-weight:500;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 페이지 링크 */
.pager{display:flex; justify-content:center; align-items:center; gap:5px;
       margin-top:22px; flex-wrap:wrap}
.pager .btn.on{background:var(--b600); border-color:var(--b600); color:#fff; cursor:default}
.pager .btn[aria-disabled]{opacity:.4; cursor:default}
.pager .gap{color:var(--ink-3); padding:0 2px}
.sepline{width:1px; height:20px; background:var(--b200); margin:0 4px}

/* ═══ 공지사항 ═══════════════════════════════ */
.notice{border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:8px}
.notice > header{padding-bottom:14px; border-bottom:1px solid var(--line-2); margin-bottom:22px}
.notice h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--b900);
           line-height:1.4}
.notice .nmeta{margin-top:9px; font-size:13px; color:var(--ink-3); font-family:var(--mono)}
.notice .nmeta .sep{margin:0 7px; color:var(--b300)}
.notice .nbody{min-height:120px}

.nnav{display:flex; justify-content:space-between; gap:16px; margin-top:18px; font-size:13.5px}
.nnav a{color:var(--ink-2); max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nnav a:hover{color:var(--b600)}

/* 첫 화면 칼럼 머리의 더보기 */
.homecol > h2 .more{float:right; font-size:12.5px; font-weight:500; color:var(--ink-3)}
.homecol > h2 .more:hover{color:var(--b600); text-decoration:none}

/* 스크롤바가 생기고 사라지면서 화면이 좌우로 흔들리지 않게 */
html{scrollbar-gutter:stable}

/* 스크롤바 — 사이트 색조에 맞춘 얇은 둥근 막대 (화살표 단추 없음)
   크롬·엣지·사파리는 ::-webkit-scrollbar, 파이어폭스는 scrollbar-color 를 쓴다.
   크롬은 scrollbar-color 가 지정되면 ::-webkit-scrollbar 를 무시하므로 파이어폭스에만 적용한다. */
body ::-webkit-scrollbar{width:12px; height:12px}
body ::-webkit-scrollbar-track{background:transparent}
body ::-webkit-scrollbar-thumb{background:var(--b200); border-radius:999px;
  border:3px solid transparent; background-clip:padding-box}
body ::-webkit-scrollbar-thumb:hover{background:var(--b400); background-clip:padding-box}
body ::-webkit-scrollbar-thumb:active{background:var(--b500); background-clip:padding-box}
body ::-webkit-scrollbar-button{display:none; width:0; height:0}
body ::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
  body *{scrollbar-width:thin; scrollbar-color:var(--b200) transparent}
}

/* 운영 화면 */
.subhead2{margin:0; font-size:17px; font-weight:700; color:var(--b800); letter-spacing:-.02em}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px}
@media (max-width:599px) and (pointer:coarse){ .statgrid{grid-template-columns:repeat(2,1fr)} }
.stat{border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#fff}
.stat .k{font-size:12.5px; color:var(--ink-3); font-weight:600}
.stat .v{font-size:26px; font-weight:700; color:var(--b800); font-family:var(--mono);
         letter-spacing:-.03em; margin:4px 0 2px}
.stat .v.ok{color:var(--ok)} .stat .v.bad{color:var(--bad)} .stat .v.warn{color:var(--warn)}
.stat .s{font-size:12px; color:var(--ink-3)}

/* 살펴볼 만한 제출 */
table.list tr.flagged td{background:#FEF6F5}
table.list tr.flagged:hover td{background:#FCEBE9}
table.list.grid td a{color:inherit}
table.list.grid td.c-done a,table.list.grid td.c-part a{color:inherit; font-weight:700}

/* ═══ 직접 실행 ═════════════════════════════ */
.runbox{margin-top:14px; padding:14px 16px; border:1px dashed var(--b300);
        border-radius:9px; background:var(--b25)}
.runbox > .cap{font-size:12px; font-weight:600; color:var(--b500); margin-bottom:5px}
.runbox textarea{font-family:var(--mono); font-size:13px; background:#fff}
#runToggle.on{background:var(--b600); border-color:var(--b600); color:#fff}
.rbox .rlab{font-size:12px; font-weight:600; color:var(--b500);
            padding:10px 15px 0; background:#fff}
.rbox .rhead .small{margin-left:auto; font-family:var(--mono)}
.rbox pre.rmsg.empty{color:var(--ink-3)}

/* 수업·평가의 문제 목록 */
table.list.setitems td.ordbtns > button{padding:2px 7px; font-size:11px; line-height:1.4}
table.list.setitems td.ordbtns > button:disabled{opacity:.3}
/* 빼기로 표시하면 저장했을 때 어떻게 되는지 미리 보인다 */
table.list.setitems tr:has(.delmark input:checked) td{background:var(--bad-soft)}
table.list.setitems tr:has(.delmark input:checked) .title a{text-decoration:line-through; color:var(--bad)}
table.list.setitems tr:has(.delmark input:checked) .num{text-decoration:line-through; color:var(--bad)}
.delmark input:checked + *{color:var(--bad)}

/* ═══ 틀렸을 때 보여주는 차이 ═══════════════ */
.diffbox{border-top:1px solid var(--line-2); background:#fff}
.diffbox .dhead{padding:11px 15px 0; font-size:13px; font-weight:700; color:var(--b800)}
.diffbox .dsec{padding:10px 15px 12px; min-width:0}
.diffbox .dcap{font-size:12px; font-weight:600; color:var(--b500); margin-bottom:5px}
.diffbox .dcols{display:grid; grid-template-columns:1fr 1fr; gap:0}
.diffbox .dcols .dsec:first-child{border-right:1px solid var(--line-2)}
@media (max-width:599px) and (pointer:coarse){
  .diffbox .dcols{grid-template-columns:1fr}
  .diffbox .dcols .dsec:first-child{border-right:0; border-bottom:1px solid var(--line-2)}
}
.diffbox .dpre{margin:0; padding:8px 10px; background:var(--b25); border:1px solid var(--b100);
               border-radius:6px; font-family:var(--mono); font-size:12.5px; line-height:1.55;
               white-space:pre-wrap; word-break:break-all; max-height:160px; overflow:auto}
.dlines{border:1px solid var(--b100); border-radius:6px; overflow:auto; max-height:260px;
        background:var(--b25)}
.dline{display:flex; font-family:var(--mono); font-size:12.5px; line-height:1.65}
.dline .dn{flex:0 0 34px; text-align:right; padding-right:8px; color:var(--b300);
           user-select:none; background:#fff; border-right:1px solid var(--b100)}
.dline .dt{padding:0 10px; white-space:pre-wrap; word-break:break-all; min-width:0}
.dline.on{background:var(--bad-soft)}
.dline.on .dt{color:var(--bad); font-weight:600}
.dline i{color:var(--ink-3); font-style:italic}
.dmore{padding:2px 10px; color:var(--b300); font-family:var(--mono); font-size:12px}
.diffbox .dnote{margin:0; padding:0 15px 12px; font-size:12.5px; color:var(--ink-3)}
.diffbox .dnote.only{padding-top:12px}   /* 비교 없이 안내만 있을 때 (1.6.1) */

/* 표 안의 버튼은 줄바꿈되지 않게 */
table.list td .btn, table.list th.nowrap, table.list td.nowrap{white-space:nowrap}

/* ═══ 학생 활동 ═══════════════════════════════ */
a.who:hover{text-decoration:none}
a.who:hover b{color:var(--b600)}

/* 분류별 성취 */
.tagbars{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px 18px}
.tagbar{display:flex; align-items:center; gap:10px; padding:7px 2px; color:var(--ink)}
.tagbar:hover{text-decoration:none}
.tagbar:hover .tb-name{color:var(--b600)}
.tagbar .tb-name{flex:0 0 34%; font-size:13.5px; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap}
.tagbar .bar{flex:1; height:7px; background:var(--b100); border-radius:4px; overflow:hidden}
.tagbar .bar span{display:block; height:100%; background:var(--ok); border-radius:4px}
.tagbar .tb-num{flex:0 0 58px; text-align:right; color:var(--ink-3)}

/* 푼 문제 번호 모음 */
.solvedlist{display:flex; flex-wrap:wrap; gap:6px}
a.solved{display:inline-block; min-width:52px; text-align:center; padding:5px 8px;
         font-family:var(--mono); font-size:12.5px; font-weight:600;
         background:var(--ok-soft); color:var(--ok); border:1px solid #BFE6D0;
         border-radius:6px}
a.solved:hover{background:var(--ok); color:#fff; border-color:var(--ok); text-decoration:none}
a.solved.locked{border-style:dashed}   /* 잠긴 문제 (본인 · 선생님에게만 보임, 1.6.2) */


/* ═══ 첫 화면 코드 연출 ═══════════════════════ */
.codeplay{display:flex; flex-direction:column; align-items:center; gap:10px}

/* 작은 편집기 창 */
.cpwin{width:min(420px,92vw); text-align:left; background:#fff;
       border:1px solid var(--b200); border-radius:10px; overflow:hidden;
       box-shadow:0 1px 3px rgba(15,15,15,.05)}
.cpbar{display:flex; align-items:center; gap:5px; padding:7px 11px;
       background:var(--b25); border-bottom:1px solid var(--b100)}
.cpbar i{width:8px; height:8px; border-radius:50%; background:var(--b200)}
.cpbar b{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--b500);
         font-family:var(--mono)}
/* 높이는 hero.js 가 후보 코드 중 가장 높은 것에 맞춰 고정한다. 긴 줄은 가로 스크롤 대신 접는다
   (가로 스크롤 막대가 생겼다 사라지면 높이가 흔들린다). */
.cpcode{margin:0; padding:12px 14px; min-height:88px; box-sizing:border-box; overflow:hidden;
        font-family:var(--mono); font-size:13px; line-height:1.6; color:var(--ink);
        white-space:pre-wrap; word-break:break-all; text-align:left}
.cpcode code{font:inherit}
.cpcaret{display:inline-block; width:2px; height:1.05em; vertical-align:-2px;
         background:var(--b600); animation:cpblink 1s steps(1) infinite}
@keyframes cpblink{50%{opacity:0}}

/* 문법 색은 편집기와 같은 계열 */
.cpcode .t-k{color:#8B3FA8}
.cpcode .t-s{color:#1A7F4B}
.cpcode .t-f{color:#2B6CB0}
.cpcode .t-n{color:#B4531F}
.cpcode .t-c{color:#7C89A3; font-style:italic}

/* 실행 화살표 */
.cparrow{font-size:11.5px; font-weight:600; color:var(--b300); letter-spacing:.04em;
         opacity:0; transform:translateY(-4px); transition:opacity .25s, transform .25s}
.cparrow::before{content:'↓ '}
.codeplay.ran .cparrow{opacity:1; transform:none; color:var(--b500)}

/* 출력 — 이것이 곧 제목이다 */
.hero .codeplay h1{margin:2px 0 0}
.hero .codeplay h1 span{display:inline-block; opacity:1}
/* 자바스크립트가 준비되면 숨겼다가 한 글자씩 나타낸다 */
.codeplay.ready h1 span{opacity:0; transform:translateY(10px) scale(.9)}
.codeplay.ready h1 span.on{opacity:1; transform:none;
  transition:opacity .18s ease-out, transform .34s cubic-bezier(.2,1.5,.4,1)}
.codeplay h1.done span{animation:cppop .5s ease-out}
@keyframes cppop{0%{text-shadow:0 0 0 rgba(35,131,226,0)}
                 40%{text-shadow:0 6px 22px rgba(35,131,226,.28)}
                 100%{text-shadow:0 0 0 rgba(35,131,226,0)}}

/* 로그인한 뒤에는 자리를 덜 차지하게 */
.hero.small .cpwin{width:min(340px,92vw)}
.hero.small .cpcode{min-height:62px; font-size:12px; padding:9px 12px}
.hero.small .cparrow{font-size:10.5px}

@media(prefers-reduced-motion: reduce){
  .cpcaret{animation:none}
  .codeplay.ready h1 span{opacity:1; transform:none}
}

/* 체험 서버 안내 띠 (config.php 의 demo) */
.demobar{background:#FFF4C2; color:#6B4E00; border-bottom:1px solid #F1D98A; text-align:center;
  font-size:13px; font-weight:600; padding:7px 16px; line-height:1.5}

/* 채점 결과: 수업 · 평가에서 낸 제출 표시 (1.5.0) */
.setmark{display:inline-block; vertical-align:middle; margin:-2px 0 0 7px; padding:0 7px; border-radius:5px;
         font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap;
         max-width:190px; overflow:hidden; text-overflow:ellipsis}
.setmark.is-lesson{background:#fff; color:var(--b600); border:1px solid var(--b200)}
.setmark.is-assess{background:#fff; color:var(--warn); border:1px solid #E8C989}
.setmark.is-lock{background:#fff; color:var(--ink-3); border:1px dashed var(--b200)}
a.setmark:hover{text-decoration:underline}

/* 관리자가 학생에게는 닫힌 수업 · 평가를 볼 때 (1.5.0) */
.note.admin-preview{background:var(--warn-soft); color:var(--warn); border:1px dashed #E2B65C}

/* ═══ 2.0 — Notion 풍 정리 ═══════════════════════
   위쪽 규칙은 색 이름(--b*)만 바뀌어도 대부분 그대로 어울린다.
   여기서는 강조색이 바뀌면서 어색해진 곳과 새로 생긴 부품만 다룬다. */

/* 제목 */
.phead h1{color:var(--ink); font-weight:700}
.sec > h2,.subhead2,h2.ph,.homecol > h2{color:var(--ink)}

/* 버튼 — 흰 바탕에 또렷한 테두리, 주 버튼만 파랑 */
.btn{border-radius:6px; border-color:var(--line); color:var(--ink); font-weight:600}
.btn:not(:disabled):hover{background:var(--b50); border-color:var(--b300)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:not(:disabled):hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.danger{color:#C4362F; border-color:#EBC9C6}
.btn.danger:not(:disabled):hover{background:#FBEDEC; border-color:#DFA9A5}
.pager .btn.on{background:var(--ink); border-color:var(--ink)}

/* 입력 칸 */
input[type=text],input[type=number],input[type=password],input[type=search],input[type=email],
input[type=date],input[type=time],input[type=datetime-local],
input[type=file],select,textarea{border-color:var(--line); border-radius:6px}
input[type=email]{width:100%; font:14.5px/1.6 var(--sans); color:var(--ink); padding:8px 11px;
  border:1px solid var(--line); background:#fff}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--b300)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
::placeholder{color:var(--b400)}

/* 표 */
table.list th{color:var(--ink-3); font-weight:600; border-bottom:1px solid var(--b200)}
table.list td{border-bottom:1px solid var(--line-2)}
table.list tr:hover td{background:var(--b25)}
table.list td.num{color:var(--ink-2)}
table.list .title a{color:var(--ink)}
table.list .title a:hover{color:var(--accent)}
.pno{color:var(--ink-3)}

/* 태그 — 회색 알약 */
.tag{background:var(--b100); border:1px solid var(--b200); color:var(--ink-2); border-radius:4px}
a.tag:hover{background:var(--ink); border-color:var(--ink); color:#fff}

/* 탭 */
.tabbar{border-bottom:1px solid var(--b200)}
.tabbar a{border-bottom-width:2px; margin-bottom:-1px}
.tabbar a:hover{color:var(--ink)}
.tabbar a.on{color:var(--ink); border-bottom-color:var(--ink)}

/* 카드 · 판 */
.card{border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:#fff}
.card > h3{font-size:15px; font-weight:700; color:var(--ink)}
.homecol,.panel,.stat,.setrow,.tc,.detail,.rbox,.logincard{border-color:var(--line); border-radius:8px}
.homecol > h2{background:var(--b25)}
.empty{background:var(--b25); border:1px dashed var(--b200); border-radius:8px}
.bulkbar{background:var(--b25); border-color:var(--line)}
.note.info{background:var(--accent-soft); color:#1B5FA8}
.prog .bar span{background:var(--accent)}
.setrow:hover{border-color:var(--b300)}
.setrow .stitle{color:var(--ink)}
.chip:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:#1B5FA8}
.md h1,.md h2,.md h3{color:var(--ink)}
.md code{background:#EFEEEC; color:#C4362F}
.md th{background:var(--b50); color:var(--ink)}
.v-wait{background:var(--b100); color:var(--ink-2)}
.v-open{background:var(--accent); color:#fff}
.hero h1{color:var(--ink)}
.hero p{color:var(--ink-2)}
.hero p b{color:var(--ink)}

/* 찾기 줄 — 칸이 줄 전체로 늘어나지 않게 */
.searchbar{align-items:center}
.searchbar input[type=search]{max-width:280px}
.searchbar > *{flex:0 0 auto}

/* ═══ 태그 다중 선택 (문제 모음 · 문제 관리) ═══ */
.tagpick{position:relative}
.tagpick > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  min-width:200px; max-width:340px; padding:8px 11px; border:1px solid var(--line); border-radius:6px;
  background:#fff; font-size:14.5px; line-height:1.6; color:var(--ink); white-space:nowrap}
.tagpick > summary::-webkit-details-marker{display:none}
.tagpick > summary:hover{border-color:var(--b300)}
.tagpick > summary .lab{flex:1; overflow:hidden; text-overflow:ellipsis}
.tagpick > summary .lab.none{color:var(--ink-3)}
.tagpick > summary::after{content:''; width:7px; height:7px; margin:-3px 2px 0 6px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg)}
.tagpick[open] > summary{border-color:var(--accent); box-shadow:0 0 0 3px rgba(35,131,226,.18)}
.tagpick .cnt{background:var(--ink); color:#fff; border-radius:9px; font-size:11.5px; font-weight:700;
  padding:0 7px; line-height:18px}
.tagpick-pop{position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:320px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:0 10px 30px rgba(15,15,15,.12), 0 2px 6px rgba(15,15,15,.06); padding:8px}
.tagpick-pop .tp-find{width:100%; margin-bottom:6px; font-size:13.5px; padding:6px 9px}
.tagpick-pop .tp-list{max-height:280px; overflow:auto; display:flex; flex-direction:column}
.tagpick-pop label{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:5px;
  font-size:13.5px; cursor:pointer; color:var(--ink)}
.tagpick-pop label:hover{background:var(--b50)}
.tagpick-pop label .n{margin-left:auto; color:var(--ink-3); font-size:12px; font-family:var(--mono)}
.tagpick-pop label.hide{display:none}
.tagpick-pop .tp-mode{display:flex; gap:12px; padding:8px 8px 4px; margin-top:6px;
  border-top:1px solid var(--line-2); font-size:12.5px; color:var(--ink-2)}
.tagpick-pop .tp-mode label{padding:0; font-size:12.5px; color:var(--ink-2)}
.tagpick-pop .tp-mode label:hover{background:none}
.tagpick-pop .tp-foot{display:flex; gap:6px; justify-content:flex-end; padding:8px 4px 2px}
.tagpick-pop .tp-empty{padding:10px 8px; color:var(--ink-3); font-size:13px}

/* 선택한 태그 표시 줄 */
.tagsel{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-8px 0 16px; font-size:13px;
        color:var(--ink-3)}
.tagsel .tag{margin:0}
.tagsel .tag .x{margin-left:5px; color:var(--ink-3)}
.tagsel a.tag:hover .x{color:#fff}

/* ═══ 툴바 (문제 관리 상단) ═══ */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.toolbar .grow{flex:1}
.btngroup{display:inline-flex}
.btngroup > .btn{border-radius:0; margin-left:-1px}
.btngroup > .btn:first-child{border-radius:6px 0 0 6px; margin-left:0}
.btngroup > .btn:last-child{border-radius:0 6px 6px 0}
.btngroup > .btn:only-child{border-radius:6px}
.btngroup > .btn:hover{position:relative; z-index:1}
.bulkbar .lbl{font-size:12px; font-weight:600; color:var(--ink-3); margin-right:-4px}

/* 더 보기 메뉴 */
.menu{position:relative}
.menu > summary{list-style:none}
.menu > summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px;
  box-shadow:0 10px 30px rgba(15,15,15,.12), 0 2px 6px rgba(15,15,15,.06)}
.menu-pop a,.menu-pop button{display:block; width:100%; text-align:left; padding:7px 10px; border-radius:5px;
  color:var(--ink); font:14px/1.4 var(--sans); background:none; border:0; cursor:pointer}
.menu-pop a:hover,.menu-pop button:hover{background:var(--b50); text-decoration:none}
.menu-pop .sub{display:block; font-size:12px; color:var(--ink-3)}
.menu-pop hr{border:0; border-top:1px solid var(--line-2); margin:5px 0}

/* ═══ 모달 ═══ */
dialog.modal{border:1px solid var(--line); border-radius:10px; padding:0; width:min(560px,94vw);
  color:var(--ink); box-shadow:0 24px 60px rgba(15,15,15,.22)}
dialog.modal.wide{width:min(760px,94vw)}
dialog.modal::backdrop{background:rgba(15,15,15,.38)}
.modal-h{display:flex; align-items:center; gap:10px; padding:16px 20px 12px}
.modal-h h3{margin:0; font-size:17px; font-weight:700; flex:1}
.modal-h .x{border:0; background:none; font-size:20px; line-height:1; color:var(--ink-3); cursor:pointer;
  padding:4px 6px; border-radius:5px}
.modal-h .x:hover{background:var(--b100); color:var(--ink)}
.modal-b{padding:4px 20px 8px}
.modal-b .tabbar{margin-bottom:16px}
.modal-b .tabbar a{cursor:pointer}
.modal-f{display:flex; align-items:center; gap:8px; justify-content:flex-end; padding:14px 20px 18px;
  border-top:1px solid var(--line-2); margin-top:10px}
.modal-f .msg{margin-right:auto}
.field .help{font-size:12.5px; color:var(--ink-3); margin-top:5px}
.req{color:#C4362F; margin-left:2px}

/* ═══ 회원 관리 ═══ */
.ustat{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px}
.ustat a{display:flex; align-items:baseline; gap:8px; padding:9px 14px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink-2); font-size:13.5px; min-width:120px}
.ustat a b{font-size:20px; color:var(--ink); font-family:var(--mono); letter-spacing:-.03em}
.ustat a:hover{border-color:var(--b300); text-decoration:none}
.ustat a.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
table.list.users td .muted{color:var(--ink-3)}
table.list.users select.rolesel{width:auto; padding:3px 26px 3px 8px; font-size:13px}
.pendingcard{border-color:#EBCB95; background:#FFFBF3}
.pendingcard h3{display:flex; align-items:center; gap:8px}

/* ═══ 교사 화면 안내 ═══ */
.staffnote{font-size:13px; color:var(--ink-3); margin:-14px 0 18px}
.note.bad{background:var(--bad-soft); color:var(--bad)}

/* 찾기 줄의 칸 · 단추 높이를 맞춘다 */


/* 좁은 화면: 메뉴를 한 줄로 두고 가로로 넘긴다 (고정 메뉴가 화면을 많이 차지하지 않게) */
@media (max-width:599px) and (pointer:coarse){

  .top .util{margin-left:auto; gap:10px}

  .mainnav a{white-space:nowrap}
  .viewtoggle{font-size:12px}
}


/* ═══ 2.0 — 입력 칸 · 선택 상자 · 단추 높이 통일 ═══════════
   한 줄에 놓이는 칸과 단추의 높이가 어긋나지 않게 높이를 직접 정한다 (패딩으로 맞추지 않는다).
   · 기본 38px (--ctl-h), 작은 것 30px (--ctl-h-sm)
   · 선택 상자는 브라우저(특히 사파리)가 높이를 무시하지 않도록 기본 모양을 끄고 화살표를 직접 그린다 */
input[type=text],input[type=number],input[type=password],input[type=search],input[type=email],
input[type=url],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],select{
  height:var(--ctl-h); min-height:0; padding-top:0; padding-bottom:0; line-height:normal;
  font-size:14.5px; vertical-align:middle}
input[type=date],input[type=time],input[type=datetime-local]{font-size:13.5px}
select{appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2385847F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center}
select[multiple],select[size]:not([size="1"]){height:auto; padding:6px; background-image:none}
input[type=file]{height:var(--ctl-h); padding:0 6px 0 4px; line-height:calc(var(--ctl-h) - 2px)}
input[type=file]::file-selector-button{height:calc(var(--ctl-h) - 10px); padding:0 12px; margin:4px 10px 4px 0}

.btn{height:var(--ctl-h); padding:0 16px; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; line-height:1; vertical-align:middle; white-space:nowrap; box-sizing:border-box}
.btn.sm{height:var(--ctl-h-sm); padding:0 11px; font-size:13px}
.btn.big{height:42px; padding:0 22px; font-size:15px}
.menu > summary.btn{display:inline-flex}

/* 작은 칸 — 작은 단추와 같은 줄에 놓을 때 */
input.sm,select.sm{height:var(--ctl-h-sm); font-size:13px; padding-left:9px}
select.sm{padding-right:28px; background-position:right 8px center}
table.list.users select.rolesel{height:var(--ctl-h-sm); padding:0 28px 0 9px; background-position:right 8px center}

/* 태그 선택 상자의 머리도 같은 높이 */
.tagpick > summary{height:var(--ctl-h); padding-top:0; padding-bottom:0; box-sizing:border-box}
.tagpick-pop .tp-find{height:var(--ctl-h-sm)}

/* 한 줄 묶음은 가운데 정렬 */
.searchbar,.inline,.bulkbar,.btnrow,.subhead,.toolbar{align-items:center}
.row{align-items:flex-end}

/* 제목 줄 — 제목 · 배지 · 단추를 세로 가운데로 맞춘다 */
.phead{align-items:center; min-height:var(--ctl-h)}
.phead h1{line-height:1.3}
.phead .v,.phead .rolebadge{align-self:center}

/* ═══ 2.0 — 문제 풀이 화면 (편집기형) ═══════════════════
   제목 줄 아래를 왼쪽 문제 · 오른쪽 코드 두 영역으로 나눈다.
   두 영역은 창 높이에 맞춰 높이가 고정되고 각자 스크롤된다. */
.wrap.ide-wrap{max-width:1480px; padding-top:14px; padding-bottom:18px}
.ide-head{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; min-height:var(--ctl-h);
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line)}
.ide-head .pno{font-size:18px; font-weight:600; line-height:1}
.ide-head h1{margin:0; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--ink)}
.ide-head .v{align-self:center}
.ide-head .grow,.ide-bar .grow,.ide-foot .grow,.runpane-h .grow,.modal-f .grow{flex:1}
.ide-limits{display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; margin-left:6px;
  font-size:12.5px; color:var(--ink-3)}
.ide-limits b{color:var(--ink-2); font-weight:600}
.ide-limits .tag{margin:0; font-size:11.5px; padding:1px 8px}
.ide-head .cnt{display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:var(--b100);
  color:var(--ink-2); font-size:11.5px; font-weight:700; line-height:18px; text-align:center}

.ide{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:14px;
  height:calc(100vh - var(--top-h) - 152px); min-height:480px}
.ide-pane{min-width:0; min-height:0; border:1px solid var(--line); border-radius:10px; background:#fff}
.ide-prob{overflow-y:auto; padding:4px 22px 22px; overscroll-behavior:contain}
.ide-prob > h2.ph:first-of-type{margin-top:16px}
.ide-code{display:flex; flex-direction:column; overflow:hidden; background:var(--b25)}
.ide-code > .note{margin:10px 12px 0; padding:8px 12px; font-size:13.5px}
.ide-empty{flex:1; display:flex; align-items:center; justify-content:center; padding:24px}
.ide-empty .loginbox{max-width:420px; background:#fff}

.ide-box{flex:1; min-height:0; display:flex; flex-direction:column}
.ide-bar{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line)}
.ide-bar .lbl{font-size:13px; font-weight:600; color:var(--ink-2)}
.ide-bar .warnmsg{min-height:0; font-size:12.5px}
.ide-bar .fsbtns{gap:4px}
.ide-bar .fsbtns .btn{width:var(--ctl-h-sm); padding:0}
.ide-editor{flex:1; min-height:120px; position:relative; background:#fff}
.ide-editor textarea.editor{position:absolute; inset:0; height:100%; min-height:0; border:0; border-radius:0; resize:none}
.ide-editor .CodeMirror{position:absolute; inset:0; height:100%; min-height:0; border:0; border-radius:0;
  box-shadow:none; padding:6px 0}
.ide-editor .CodeMirror-focused{box-shadow:none}
/* 포커스 테두리는 편집기 위에 겹쳐 그린다 — 행 번호 칸이 테두리를 덮지 않게 (2.0) */
.ide-editor:focus-within::after{content:''; position:absolute; inset:0; z-index:20; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(35,131,226,.35)}

/* 아래 줄: [실행] … [요약] [제출] */
.ide-foot{display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line);
  background:#fff; min-height:calc(var(--ctl-h) + 21px)}
.ide-foot .btn{min-width:84px}
#runBtn.on{background:var(--b100); border-color:var(--b300)}
.resline{display:flex; align-items:center; gap:8px; min-width:0; font-size:13.5px}
.resline .reslabel{font-weight:600; color:var(--ink); white-space:nowrap}
.resline .resmeta{color:var(--ink-3); font-family:var(--mono); font-size:12.5px; white-space:nowrap}
.resline .resmsg{font-weight:600}
.resline .btn.hl{border-color:#E4B5B3; color:var(--bad)}
.afterbtns{display:inline-flex; gap:6px}
.afterbtns:empty{display:none}

/* 실행 창 — 편집기 아래에서 펼쳐진다 */
.runpane{flex:0 0 42%; min-height:170px; display:flex; flex-direction:column; border-top:1px solid var(--line); background:#fff}
.runpane[hidden]{display:none}
.runpane-h{display:flex; align-items:center; gap:8px; padding:6px 8px 6px 12px; border-bottom:1px solid var(--line-2);
  background:var(--b25)}
.runpane-h b{font-size:13px}
.runpane-h .x{border:0; background:none; font-size:18px; line-height:1; color:var(--ink-3); cursor:pointer;
  width:var(--ctl-h-sm); height:var(--ctl-h-sm); border-radius:5px}
.runpane-h .x:hover{background:var(--b100); color:var(--ink)}
.runpane-b{flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr}
.runcol{min-width:0; min-height:0; display:flex; flex-direction:column; padding:8px 12px 10px}
.runcol + .runcol{border-left:1px solid var(--line-2)}
.runcol .cap{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; font-weight:600; color:var(--ink-3); margin-bottom:5px; min-height:20px}
.runcol textarea{flex:1; min-height:0; resize:none; font-family:var(--mono); font-size:13px; line-height:1.55;
  padding:8px 10px}
.runout{flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--b25)}
.runout pre{margin:0; font-family:var(--mono); font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-all}
.runout pre.empty{color:var(--ink-3)}
.runout pre.err{color:var(--bad)}
.runout .rlab{font-size:11.5px; font-weight:600; color:var(--ink-3); margin:8px 0 3px}
.runmeta{font-weight:500; font-family:var(--mono); color:var(--ink-3)}
.samplecmp{margin-left:6px; padding:0 7px; border-radius:4px; font-family:var(--sans); font-size:11.5px; font-weight:700; line-height:18px}
.samplecmp.is-ok{background:var(--ok-soft); color:var(--ok)}
.samplecmp.is-bad{background:var(--bad-soft); color:var(--bad)}

/* 예시 옆 '이 입력으로 실행' */
.linkbtn{border:0; background:none; padding:0 2px; margin-left:auto; font:600 12px/1.4 var(--sans);
  color:var(--accent); cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.sample .cap{min-height:22px}

/* 좁은 화면에서는 위아래로 쌓고 높이를 풀어 준다 */
@media (max-width:599px) and (pointer:coarse){
  .ide{grid-template-columns:1fr; height:auto}
  .ide-prob{max-height:none; overflow:visible}
  .ide-code{height:80vh}
  .runpane-b{grid-template-columns:1fr}
  .runcol + .runcol{border-left:0; border-top:1px solid var(--line-2)}
}
.chip{min-height:var(--ctl-h); padding-top:0; padding-bottom:0; box-sizing:border-box}

/* ═══════════════════════════════════════════════════════════
   2.0 — Notion 테마 (최종 덮어쓰기)
   Notion 의 화면 규칙을 그대로 따른다.
   · 흰 바탕, 글자 #37352F, 보조 글자 #787774 / #9B9A97
   · 마우스를 올리면 옅은 회색 rgba(55,53,47,.08), 모서리 4px
   · 단추 · 칸은 굵은 테두리 대신 얇은 그림자 테두리, 입력 칸은 옅은 회색 바탕
   · 상자(카드)는 최소한으로, 표는 Notion 데이터베이스처럼 가는 가로 · 세로 선
   · 태그 · 상태는 옅은 색 바탕 + 진한 같은 색 글자
   선은 가독성을 위해 Notion 기본보다 한 단계 진하게 둔다.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#37352F; --ink-2:#787774; --ink-3:#9B9A97;
  --line:#E3E2E0;          /* 표 · 구분선 */
  --line-2:#EDECE9;        /* 표 안 줄 */
  --nb:rgba(15,15,15,.14); /* 단추 · 칸 테두리(그림자) */
  --hov:rgba(55,53,47,.08);
  --hov-2:rgba(55,53,47,.04);
  --fill-in:#F7F7F5;       /* 입력 칸 바탕 */
  --accent:#2383E2; --accent-2:#0B6BCB; --accent-soft:#E7F3F8;
  --pop:0 0 0 1px rgba(15,15,15,.05), 0 3px 6px rgba(15,15,15,.1), 0 9px 24px rgba(15,15,15,.2);
  --top-h:48px;
  --ctl-h:32px; --ctl-h-sm:28px;
  --rad:4px;
}
body{background:#fff; color:var(--ink)}
a{color:var(--ink); text-decoration:underline; text-decoration-color:rgba(55,53,47,.3); text-underline-offset:2px}
a:hover{text-decoration-color:var(--ink)}
.btn,.tag,.mainnav a,.tabbar a,.brand,.who,.top .util a,.homeitem,.setrow,.menu-pop a,.ustat a,.pager a,
.viewtoggle,.tagsel a,.ide-head a,a.solved,.setmark,a.codelink,.nnav a,.grouprow a,.more{text-decoration:none}
::selection{background:rgba(35,131,226,.28)}

/* ── 위쪽 메뉴 ── */
.top,.top.is-staff{background:rgba(255,255,255,.97); box-shadow:none; border-bottom:1px solid var(--line)}
.top-in{min-height:var(--top-h); gap:14px}
.brand{font-size:15px; font-weight:700; color:var(--ink); padding:3px 6px; margin-left:-6px; border-radius:var(--rad)}
.brand:hover{background:var(--hov)}
.mainnav{gap:1px}
.mainnav a{padding:4px 9px; border-radius:var(--rad); font-size:14px; font-weight:500; color:var(--ink-2)}
.mainnav a:hover{background:var(--hov); color:var(--ink)}
.mainnav a.on{background:rgba(55,53,47,.06); color:var(--ink); font-weight:600; box-shadow:none}
.mainnav a.navplay{color:#9065B0}
.top .util{gap:4px}
.top .util a,.who{font-size:14px; color:var(--ink-2); padding:4px 8px; border-radius:var(--rad)}
.top .util a:hover,.who:hover{background:var(--hov); color:var(--ink)}
.who b{color:var(--ink); font-weight:600}
.viewtoggle{border:0; background:none; padding:4px 8px; border-radius:var(--rad); gap:7px; font-weight:500; font-size:14px}
.viewtoggle:hover{background:var(--hov)}
.viewtoggle .sw{width:28px; height:16px; background:rgba(135,131,120,.3)}
.viewtoggle .sw::after{width:12px; height:12px}
.viewtoggle.on .sw,.viewtoggle.r-admin.on .sw,.viewtoggle.r-teacher.on .sw{background:var(--accent)}
.rolebadge{border-radius:3px; font-weight:500; padding:0 6px; font-size:12px}
.rolebadge.r-admin{background:#FADEC9; color:#49290E}
.rolebadge.r-teacher{background:#DBEDDB; color:#1C3829}
.rolebadge.r-student{background:#E3E2E0; color:#32302C}

/* ── 본문 ── */
.wrap{padding-top:32px}
.phead{margin-bottom:16px}
.phead h1{font-size:26px; font-weight:700; letter-spacing:-.02em}
.phead .sub{font-size:14px; color:var(--ink-3); font-weight:400}
.sec > h2,.subhead2{font-size:18px; font-weight:600}
h2.ph{font-size:17px; font-weight:600; border-bottom:0; padding-bottom:0; margin:26px 0 6px}

/* ── 단추 ── */
.btn{border:0; border-radius:var(--rad); background:#fff; color:var(--ink); font-weight:500; font-size:14px;
     box-shadow:inset 0 0 0 1px var(--nb); padding:0 12px; transition:background .1s}
.btn:not(:disabled):hover{background:var(--hov); border:0}
.btn.primary{background:var(--accent); color:#fff; box-shadow:inset 0 -1px 0 rgba(15,15,15,.1)}
.btn.primary:not(:disabled):hover{background:var(--accent-2)}
.btn.danger{color:#E03E3E; box-shadow:inset 0 0 0 1px rgba(224,62,62,.35)}
.btn.danger:not(:disabled):hover{background:rgba(224,62,62,.08)}
.btn.sm{font-size:13px; padding:0 9px}
.btn.big{height:40px; font-size:15px}
.btn:disabled{opacity:.4}
.pager .btn.on{background:var(--ink); color:#fff; box-shadow:none}
.btngroup > .btn{margin-left:0; border-radius:0; box-shadow:inset 0 0 0 1px var(--nb), inset -1px 0 0 var(--nb)}
.btngroup > .btn + .btn{box-shadow:inset 0 1px 0 var(--nb), inset 0 -1px 0 var(--nb), inset -1px 0 0 var(--nb)}
.btngroup > .btn:first-child{border-radius:var(--rad) 0 0 var(--rad)}
.btngroup > .btn:last-child{border-radius:0 var(--rad) var(--rad) 0}
#runBtn.on{background:rgba(55,53,47,.06)}

/* ── 입력 칸 ── */
input[type=text],input[type=number],input[type=password],input[type=search],input[type=email],
input[type=url],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],
input[type=file],select,textarea{
  border:0; border-radius:var(--rad); background-color:var(--fill-in); box-shadow:inset 0 0 0 1px var(--nb);
  font-size:14px; color:var(--ink)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border:0; box-shadow:inset 0 0 0 1px rgba(15,15,15,.24)}
input:focus,select:focus,textarea:focus{background-color:#fff; box-shadow:inset 0 0 0 1px rgba(35,131,226,.6), 0 0 0 3px rgba(35,131,226,.18)}
select{background-color:var(--fill-in)}
::placeholder{color:rgba(55,53,47,.4)}
.field > label{font-size:13px; font-weight:500; color:var(--ink-2)}
.tagpick > summary{border:0; border-radius:var(--rad); background:var(--fill-in); box-shadow:inset 0 0 0 1px var(--nb); font-size:14px}
.tagpick[open] > summary{box-shadow:inset 0 0 0 1px rgba(35,131,226,.6), 0 0 0 3px rgba(35,131,226,.18)}
.tagpick .cnt{background:var(--accent)}
.tagpick-pop,.menu-pop{border:0; border-radius:6px; box-shadow:var(--pop)}
.tagpick-pop label:hover,.menu-pop a:hover,.menu-pop button:hover{background:var(--hov)}

/* ── 표 (Notion 데이터베이스) ── */
table.list{border-top:1px solid var(--line)}
table.list th{font-size:13px; font-weight:500; color:var(--ink-3); padding:7px 10px; border-bottom:1px solid var(--line);
  background:#fff}
table.list td{padding:8px 10px; border-bottom:1px solid var(--line-2)}
table.list th + th,table.list td + td{border-left:1px solid var(--line-2)}
table.list tr:hover td{background:var(--hov-2)}
table.list td.num{color:var(--ink-2); font-weight:500}
table.list .title a{color:var(--ink); font-weight:500; text-decoration:none}
table.list .title a:hover{text-decoration:underline; text-decoration-color:rgba(55,53,47,.4); color:var(--ink)}
table.list tr.isadmin td{background:var(--hov-2)}
table.list.compact td{padding:6px 10px}
.scrollx{border:1px solid var(--line); border-radius:var(--rad)}
.scrollx table.list{border-top:0}

/* ── 태그 (Notion 색) ── */
.tag{border:0; border-radius:3px; padding:1px 7px; font-size:12.5px; font-weight:400; line-height:1.55; margin:0 4px 3px 0}
.tag.tc0,a.tag.tc0:hover{background:#E3E2E0; color:#32302C}
.tag.tc1,a.tag.tc1:hover{background:#EEE0DA; color:#442A1E}
.tag.tc2,a.tag.tc2:hover{background:#FADEC9; color:#49290E}
.tag.tc3,a.tag.tc3:hover{background:#FDECC8; color:#402C1B}
.tag.tc4,a.tag.tc4:hover{background:#DBEDDB; color:#1C3829}
.tag.tc5,a.tag.tc5:hover{background:#D3E5EF; color:#183347}
.tag.tc6,a.tag.tc6:hover{background:#E8DEEE; color:#412454}
.tag.tc7,a.tag.tc7:hover{background:#F5E0E9; color:#4C2337}
.tag.tc8,a.tag.tc8:hover{background:#FFE2DD; color:#5D1715}
a.tag:hover{filter:brightness(.93)}
.tagsel a.tag:hover .x{color:inherit}
.tagpick-pop label > span.tag{margin:0}

/* ── 상태 · 판정 배지 (Notion 상태 속성) ── */
.v{font-family:var(--sans); font-weight:500; font-size:12.5px; border-radius:3px; padding:1px 7px; letter-spacing:0}
.v-AC{background:#DBEDDB; color:#1C3829}
.v-WA{background:#FFE2DD; color:#5D1715}
.v-RE{background:#E8DEEE; color:#412454}
.v-TLE,.v-MLE{background:#FADEC9; color:#49290E}
.v-CE,.v-IE{background:#FDECC8; color:#402C1B}
.v-wait{background:#E3E2E0; color:#32302C}
.v-open{background:#D3E5EF; color:#183347}

/* ── 알림 (Notion 콜아웃) ── */
.note{border-radius:var(--rad); font-weight:400; padding:12px 14px; border:0}
.note.info{background:#E7F3F8; color:#183347}
.note.ok{background:#EDF3EC; color:#1C3829}
.note.err,.note.bad{background:#FDEBEC; color:#5D1715}
.note.admin-preview{background:#FBF3DB; color:#402C1B; border:0}

/* ── 상자 ── */
.card,.homecol,.panel,.stat,.tc,.detail,.rbox,.logincard,.ustat a,.setrow,.ide-pane{
  border:1px solid var(--line); border-radius:6px; box-shadow:none}
.homecol > h2{background:#fff; border-bottom:1px solid var(--line-2); font-size:14px; font-weight:600; padding:11px 16px}
.homebody{padding:6px 8px}
.homeitem{padding:6px 8px; border-radius:var(--rad); border-bottom:0}
.homeitem:hover{background:var(--hov); color:var(--ink)}
.empty{background:none; border:0; color:var(--ink-3); padding:48px 20px}
.bulkbar{background:var(--hov-2); border:1px solid var(--line); border-radius:6px; padding:6px 10px}
.panel > summary:hover{background:var(--hov-2)}
.setrow:hover{background:var(--hov-2); border-color:var(--line)}
.ustat a{min-width:104px; padding:8px 12px}
.ustat a:hover{background:var(--hov-2); border-color:var(--line)}
.ustat a.on{box-shadow:inset 0 0 0 1px var(--ink); border-color:var(--ink)}
.pendingcard{background:#FBF3DB; border-color:#F2DFAF}
.grouprow{background:#fff; border-color:var(--line); border-radius:var(--rad)}
.chip{border:0; box-shadow:inset 0 0 0 1px var(--nb); border-radius:var(--rad); background:#fff; font-size:14px}
.chip:hover{background:var(--hov); border:0}
.chip:has(input:checked){background:#E7F3F8; box-shadow:inset 0 0 0 1px rgba(35,131,226,.45); color:#183347; font-weight:500}
.md code{background:rgba(135,131,120,.15); color:#EB5757; border-radius:3px}
.md pre,.sample pre,.runout,.diffbox .dpre,.dlines{background:#F7F6F3; border:0; border-radius:var(--rad)}
.md blockquote{border-left:3px solid currentColor}
.loginbox{border:0; background:#F7F6F3; border-radius:6px}

/* ── 탭 ── */
.tabbar{border-bottom:1px solid var(--line); gap:2px}
.tabbar a{font-size:14px; font-weight:500; color:var(--ink-3); padding:6px 10px; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabbar a:hover{color:var(--ink); background:var(--hov); border-radius:var(--rad) var(--rad) 0 0}
.tabbar a.on{color:var(--ink); border-bottom-color:var(--ink)}

/* ── 팝업 ── */
dialog.modal{border:0; border-radius:8px; box-shadow:var(--pop)}
dialog.modal::backdrop{background:rgba(15,15,15,.6)}
.modal-h h3{font-size:16px; font-weight:600}
.modal-f{border-top:1px solid var(--line-2)}

/* ── 꼬리말 ── */
.foot{background:#fff; border-top:1px solid var(--line)}
.foot-in{font-size:12.5px; color:var(--ink-3)}
.foot-in a{color:var(--ink-2); text-decoration:none}
.foot-in a:hover{text-decoration:underline}

/* ── 문제 풀이 화면 ── */
.ide-head{border-bottom:1px solid var(--line)}
.ide-head h1{font-size:20px}
.ide-head .pno{color:var(--ink-3)}
.ide-code{background:#fff}
.ide-bar,.ide-foot,.runpane-h{background:#fff}
.ide-bar{border-bottom:1px solid var(--line)}
.ide-foot{border-top:1px solid var(--line)}
.runpane{border-top:1px solid var(--line)}
.ide-editor .CodeMirror,.CodeMirror{background:#fff}
.CodeMirror-gutters{background:#fff; border-right:1px solid var(--line-2)}
.CodeMirror-activeline-background{background:rgba(55,53,47,.035)}
.copybtn{border:0; box-shadow:inset 0 0 0 1px var(--nb); border-radius:var(--rad); color:var(--ink-2)}
.copybtn:hover{background:var(--hov); color:var(--ink)}
.linkbtn{color:var(--ink-2)}
.linkbtn:hover{color:var(--ink)}
.ide-head .cnt{background:rgba(55,53,47,.08)}

/* ── 첫 화면 ── */
.cpwin{border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 2px rgba(15,15,15,.04)}
.cpbar{background:#F7F6F3; border-bottom:1px solid var(--line)}
.cparrow,.codeplay.ran .cparrow{color:var(--ink-3)}
.cpcaret{background:var(--ink)}

/* ═══ 2.0 — 브라우저 스크롤 없음 (앱 화면 구조) ═══════════════
   화면 전체는 창 높이에 딱 맞추고 브라우저 스크롤바를 쓰지 않는다.
     위쪽 메뉴 (고정) / 본문 (이 안에서만 스크롤) / 꼬리말 (늘 창 맨 아래)
   스크롤은 본문 · 문제 영역 · 실행 창 같은 사이트 안의 영역에서만 생기고,
   모두 같은 얇은 둥근 스크롤바를 쓴다. */
html,body{height:100%; overflow:hidden}
html{scrollbar-gutter:auto}
body{height:100vh; height:100dvh; min-height:0; display:flex; flex-direction:column}
.demobar,.top,.foot{flex:none}
.top{position:relative}
.site-main{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-gutter:stable}
.foot{margin-top:0 !important}
.foot-in{padding:10px 20px 12px; gap:3px; font-size:12px}
.foot-extra{margin-bottom:2px}
.wrap{padding-bottom:48px}

/* 스크롤바 — 얇고 둥근 Notion 풍 (사이트 안의 모든 스크롤 영역) */
body ::-webkit-scrollbar{width:10px; height:10px}
body ::-webkit-scrollbar-track{background:transparent}
body ::-webkit-scrollbar-thumb{background:rgba(55,53,47,.18); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box; min-height:40px}
body ::-webkit-scrollbar-thumb:hover{background:rgba(55,53,47,.34); background-clip:padding-box}
body ::-webkit-scrollbar-thumb:active{background:rgba(55,53,47,.5); background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  body *{scrollbar-width:thin; scrollbar-color:rgba(55,53,47,.25) transparent}
}

/* 문제 풀이 화면: 본문은 스크롤하지 않고 두 영역이 남은 높이를 정확히 채운다 */
.site-main:has(.ide-wrap){overflow:hidden; display:flex; flex-direction:column}
.wrap.ide-wrap{flex:1 1 auto; min-height:0; width:100%; display:flex; flex-direction:column; padding-bottom:14px}
.ide-head{flex:none}
.ide{flex:1 1 auto; height:auto; min-height:0}

/* 좁은 화면(휴대전화)에서는 본문 안에서 위아래로 쌓아 스크롤한다 */
@media (max-width:599px) and (pointer:coarse){
  .site-main:has(.ide-wrap){overflow-y:auto; display:block}
  .wrap.ide-wrap{display:block}
  .ide{height:auto}
}
/* 본문은 스크롤바 자리(10px)를 늘 비워 두므로, 위쪽 메뉴 · 꼬리말도 같은 만큼 비워 가운데 선을 맞춘다 */
.top,.foot{padding-right:10px}

/* ═══════════════════════════════════════════════════════════
   2.0 — 최종 테마 (CUTE 관리 화면 풍)
   · 위쪽 메뉴: 흰 띠, 아이콘 + 글자 탭이 띠 높이를 꽉 채우고, 선택한 탭은 옅은 파랑 바탕 + 파랑 글자
   · 단추: 흰 바탕 + 옅은 회색 테두리 / 주 단추는 먹색(#292824)
   · 입력 칸: 흰 바탕 + 또렷한 회색 테두리(#8993A0)
   · 표: 둥근 테두리 상자 안, 머리 줄은 옅은 회색 바탕, 가운데 정렬
   · 걸러 보기: 숫자가 붙은 알약 단추, 선택한 것은 옅은 파랑
   · 팝업: 머리 · 본문 흰색, 아래 단추 줄은 옅은 회색 띠
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink:#292824; --ink-2:#40464F; --ink-3:#5E646E; --ink-4:#8A8F98;
  --line:#BCC2CA;        /* 상자 · 위쪽 메뉴 테두리 */
  --line-2:#EEEEEC;      /* 표 안 줄 */
  --line-3:#DEDEDB;      /* 단추 테두리 */
  --in-bd:#8993A0;       /* 입력 칸 테두리 */
  --soft:#F3F3F1;        /* 표 머리 · 배지 바탕 */
  --soft-2:#F7F7F5;
  --blue:#1D4ED8; --blue-2:#2563EB; --blue-soft:#EFF4FF;
  --accent:var(--blue-2); --accent-2:var(--blue); --accent-soft:var(--blue-soft);
  --hov:#F3F3F1; --hov-2:#FAFAF9;
  --top-h:56px; --ctl-h:34px; --ctl-h-sm:30px; --rad:6px;
}
body{color:var(--ink-2); background:#fff}
a{color:var(--blue-2); text-decoration:none}
a:hover{text-decoration:underline; text-decoration-color:currentColor}

/* ── 위쪽 메뉴 ── */
.top,.top.is-staff{background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); box-shadow:none; padding-right:0}
.top-in{max-width:none; padding:0 20px 0 22px; min-height:var(--top-h); gap:0; align-items:stretch; flex-wrap:nowrap}
.brand{display:inline-flex; align-items:center; gap:9px; margin:0 18px 0 0; padding:0; font-size:15.5px; font-weight:800;
  color:var(--ink); letter-spacing:-.01em; border-radius:0}
.brand:hover{background:none; color:var(--ink); text-decoration:none}
.brandmark{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,#3B82F6,#6366F1); box-shadow:0 1px 2px rgba(37,99,235,.35)}
.mainnav{gap:0; align-items:stretch; flex:1; flex-wrap:nowrap}
.mainnav a{display:inline-flex; align-items:center; gap:6px; padding:0 13px; border-radius:0; font-size:14px; font-weight:550;
  color:var(--ink-3); box-shadow:none; white-space:nowrap}
.mainnav a .ico{flex:none; opacity:.9}
.mainnav a:hover{background:var(--soft-2); color:var(--ink); text-decoration:none}
.mainnav a.on{background:var(--blue-soft); color:var(--blue); font-weight:650; box-shadow:inset 0 -2px 0 var(--blue)}
.mainnav a.navplay{color:#7C3AED}
.top .util{gap:2px; align-items:center}
.top .util a,.who{font-size:13px; font-weight:500; color:var(--ink-3); padding:6px 8px; border-radius:var(--rad)}
.top .util a:hover,.who:hover{background:var(--soft); color:var(--ink); text-decoration:none}
.top .util a[href$="logout.php"]{color:#C53B32}
.who b{color:var(--ink); font-weight:650}
.viewtoggle{font-size:13px; color:var(--ink-3); padding:6px 8px; border-radius:var(--rad)}
.viewtoggle:hover{background:var(--soft); text-decoration:none}
.viewtoggle.on .sw,.viewtoggle.r-admin.on .sw,.viewtoggle.r-teacher.on .sw{background:var(--blue-2)}
.top > .top-in > .btn{align-self:center}

/* ── 본문 ── */
.wrap{max-width:1360px; padding:22px 40px 40px}
.wrap.narrow{max-width:900px}
.phead{margin-bottom:16px}
.phead h1{font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.phead .sub{font-size:14px; color:var(--ink-2)}
.sec > h2,.subhead2,.card > h3,h2.ph,.homecol > h2{color:var(--ink)}
.field > label{font-size:13.5px; font-weight:600; color:var(--ink)}
.muted{color:var(--ink-3)}

/* ── 단추 ── */
.btn{border:1px solid var(--line-3); box-shadow:none; background:#fff; color:#4D4B45; font-size:14px; font-weight:500;
  border-radius:var(--rad); padding:0 12px}
.btn:not(:disabled):hover{background:var(--soft-2); border:1px solid #C9C9C5}
.btn.primary{background:var(--ink); border-color:var(--ink); color:#fff; font-weight:600; box-shadow:none}
.btn.primary:not(:disabled):hover{background:#3D3C37; border-color:#3D3C37}
.btn.danger{color:#C53B32; border-color:#EBC5C1; box-shadow:none}
.btn.danger:not(:disabled):hover{background:#FDF2F1; border-color:#E2A9A3}
.btn.sm{font-size:13px; padding:0 9px}
.btn.big{height:42px}
.pager .btn.on{background:var(--ink); border-color:var(--ink); color:#fff}
.btngroup > .btn,.btngroup > .btn + .btn{box-shadow:none; border:1px solid var(--line-3)}
.btngroup > .btn + .btn{margin-left:-1px}
#runBtn.on{background:var(--blue-soft); border-color:#BFD0F5; color:var(--blue)}
.resline .btn.hl{color:#C53B32; border-color:#EBC5C1}

/* ── 입력 칸 ── */
input[type=text],input[type=number],input[type=password],input[type=search],input[type=email],
input[type=url],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],
input[type=file],select,textarea{
  background-color:#fff; border:1px solid var(--in-bd); box-shadow:none; border-radius:var(--rad); color:var(--ink); font-size:14px}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border:1px solid #6B7380; box-shadow:none}
input:focus,select:focus,textarea:focus{background-color:#fff; border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(37,99,235,.16)}
select{background-color:#fff}
::placeholder{color:#9AA0A8}
.tagpick > summary{background:#fff; border:1px solid var(--in-bd); box-shadow:none; border-radius:var(--rad)}
.tagpick[open] > summary{border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.tagpick .cnt{background:var(--blue-2)}
.tagpick-pop,.menu-pop{border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(15,23,42,.14)}
.tagpick-pop label:hover,.menu-pop a:hover,.menu-pop button:hover{background:var(--soft)}
.ide-editor textarea.editor{border:0}

/* ── 표: 둥근 상자 + 회색 머리 줄 ── */
table.list{border:1px solid var(--line); border-radius:9px; border-collapse:separate; border-spacing:0;
  overflow:hidden; background:#fff}
table.list th{background:var(--soft); color:#53514C; font-size:13.5px; font-weight:650; padding:11px 12px;
  border-bottom:1px solid #D5D8DB; border-left:0}
table.list td{padding:11px 12px; border-bottom:1px solid var(--line-2); border-left:0; color:var(--ink-2)}
table.list th + th,table.list td + td{border-left:0}
table.list tbody tr:last-child td{border-bottom:0}
table.list tr:hover td{background:var(--hov-2)}
table.list td.num{color:var(--ink-2); font-weight:500}
table.list .title a{color:var(--ink); font-weight:600}
table.list .title a:hover{color:var(--blue-2); text-decoration:none}
table.list td a{text-decoration:none}
table.list tr.isadmin td{background:#FBFBFA}
.scrollx{border:0}
.scrollx table.list{border:1px solid var(--line)}
.modal-b table.list,.card table.list{border-radius:7px}

/* ── 배지 · 태그 ── */
.v{border-radius:5px; font-size:12px; font-weight:600; padding:2px 8px}
.tag{border-radius:5px; font-size:12px; padding:2px 8px}
.rolebadge{border-radius:5px; font-size:12px; padding:1px 7px}
.ide-head .cnt,.tagsel .x{color:var(--ink-3)}

/* ── 걸러 보기 알약 (역할 · 상태) ── */
.ustat{gap:4px; padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid #E8E8E6}
.ustat a{min-width:0; height:32px; padding:0 11px; display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:var(--rad); background:none; color:var(--ink-3); font-size:14px; font-weight:500}
.ustat a b{font-size:13px; font-family:var(--sans); font-weight:600; color:inherit; letter-spacing:0}
.ustat a:hover{background:var(--soft); border:0; text-decoration:none}
.ustat a.on{background:var(--blue-soft); color:var(--blue); box-shadow:none; border:0; font-weight:650}

/* ── 탭 (운영 갈래) — 알약 모양 ── */
.tabbar{border-bottom:1px solid #E8E8E6; gap:4px; padding-bottom:10px; margin-bottom:18px}
.tabbar a{height:32px; display:inline-flex; align-items:center; padding:0 12px; border:0; margin:0; border-radius:var(--rad);
  font-size:14px; font-weight:500; color:var(--ink-3)}
.tabbar a:hover{background:var(--soft); color:var(--ink); border-radius:var(--rad); text-decoration:none}
.tabbar a.on{background:var(--blue-soft); color:var(--blue); font-weight:650; border:0}

/* ── 상자 · 알림 ── */
.card,.homecol,.panel,.stat,.tc,.detail,.rbox,.logincard,.setrow,.ide-pane{border:1px solid var(--line); border-radius:9px}
.homecol > h2{background:var(--soft); border-bottom:1px solid #D5D8DB; font-size:14px; font-weight:650; color:#53514C}
.bulkbar{background:var(--soft-2); border:1px solid #E3E3E0; border-radius:8px}
.chip{border:1px solid var(--line-3); box-shadow:none; border-radius:var(--rad); background:#fff}
.chip:hover{background:var(--soft-2); border:1px solid #C9C9C5}
.chip:has(input:checked){background:var(--blue-soft); border:1px solid #BFD0F5; color:var(--blue); box-shadow:none; font-weight:600}
.note{border-radius:8px}
.note.info{background:var(--blue-soft); color:#1E3A8A}
.grouprow{border:1px solid #E3E3E0; border-radius:var(--rad)}
.empty{color:var(--ink-3)}

/* ── 팝업 ── */
dialog.modal{border:1px solid var(--line); border-radius:10px; box-shadow:0 24px 60px rgba(15,23,42,.25); overflow:hidden}
dialog.modal::backdrop{background:rgba(17,24,39,.42); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.modal-h{padding:18px 22px 12px; border-bottom:1px solid var(--line-2)}
.modal-h h3{font-size:18px; font-weight:650; color:var(--ink)}
.modal-b{padding:16px 22px 10px}
.modal-f{background:var(--soft-2); border-top:1px solid var(--line-2); margin-top:12px; padding:12px 22px}

/* ── 꼬리말 ── */
.foot{background:#fff; border-top:1px solid #E8E8E6; padding-right:0}
.foot-in{max-width:none; padding:8px 22px 9px; flex-direction:row; flex-wrap:wrap; gap:2px 16px; font-size:12px; color:var(--ink-4)}
.foot-in a{color:var(--ink-3)}

/* ── 문제 풀이 화면 ── */
.wrap.ide-wrap{max-width:none; padding:16px 22px 16px}
.ide-head h1{color:var(--ink); font-weight:650}
.ide-pane{border-radius:9px}
.ide-bar,.runpane-h{background:var(--soft-2)}
.ide-bar{border-bottom:1px solid #E3E3E0}
.ide-foot{border-top:1px solid #E3E3E0}
.runpane{border-top:1px solid #E3E3E0}
.runcol textarea{border:1px solid var(--in-bd)}
.runout{background:var(--soft-2); border:1px solid #E3E3E0}
.md pre,.sample pre,.diffbox .dpre,.dlines{background:var(--soft-2); border:1px solid #E3E3E0}
.copybtn{border:1px solid var(--line-3); box-shadow:none; border-radius:5px}
.linkbtn{color:var(--blue-2)}

/* 좁은 화면 */
@media (max-width:599px) and (pointer:coarse){
  .wrap{padding:18px 16px 32px}
}

/* ═══ 2.0 — 입력 화면 부품 ═══════════════════════════════ */
/* 구역 상자 */
.fform{max-width:980px}
.fcard{border:1px solid var(--line); border-radius:10px; background:#fff; padding:22px 26px 8px; margin-bottom:16px}
.fcard-t{margin:0 0 16px; font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.fcard-d{margin:-10px 0 16px; font-size:13.5px; color:var(--ink-3)}
.fcard .sec{margin-top:0}
.frow{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.fgrid2{display:grid; grid-template-columns:1fr 1fr; gap:6px 28px}
@media (max-width:599px) and (pointer:coarse){ .fgrid2{grid-template-columns:1fr} }
.fform .actions{max-width:980px; border-top:0; margin-top:6px; padding-top:4px}
.field .help{margin-top:6px}

/* 알약 고르기 (세그먼트) */
.seg{display:inline-flex; gap:2px; padding:3px; border-radius:8px; background:#EBEBE9; vertical-align:middle}
.seg label{position:relative; cursor:pointer; margin:0}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:inline-flex; align-items:center; height:calc(var(--ctl-h) - 6px); padding:0 14px; border-radius:6px;
  font-size:14px; font-weight:500; color:var(--ink-3); white-space:nowrap; transition:background .12s, color .12s}
.seg label:hover span{color:var(--ink)}
.seg input:checked + span{background:#fff; color:var(--ink); font-weight:650; box-shadow:0 1px 2px rgba(15,23,42,.12)}
.seg input:focus-visible + span{outline:2px solid var(--blue-2); outline-offset:1px}
.field > .seg + .dtp{margin-top:10px}

/* 켜고 끄는 줄 — 왼쪽 설명, 오른쪽 스위치 */
.tgrow{display:flex; align-items:center; gap:20px; padding:16px 0; border-top:1px solid #E8E8E6}
.tgrow .tg-txt{flex:1; min-width:0}
.tgrow .tg-txt > b{display:block; font-size:14.5px; font-weight:650; color:var(--ink)}
.tgrow .tg-txt > span{display:block; margin-top:2px; font-size:13.5px; color:var(--ink-3)}
.switch{position:relative; flex:none; width:44px; height:24px; cursor:pointer}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1}
.switch i{position:absolute; inset:0; border-radius:12px; background:#C9CDD3; transition:background .15s}
.switch i::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.switch input:checked + i{background:var(--blue-2)}
.switch input:checked + i::after{transform:translateX(20px)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + i{opacity:.55}
.switch input:focus-visible + i{outline:2px solid var(--blue-2); outline-offset:2px}

/* 날짜 · 시간 선택기 */
.dtp{display:flex; gap:10px; flex-wrap:wrap}
.dtp button{height:var(--ctl-h); min-width:170px; display:inline-flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 12px; border:1px solid var(--in-bd); border-radius:var(--rad); background:#fff; color:var(--ink);
  font:500 14px/1 var(--sans); cursor:pointer; flex:1 1 170px; max-width:230px}
.dtp button:hover:not(:disabled){border-color:#6B7380}
.dtp button.empty .v{color:#9AA0A8; font-weight:400}
.dtp button svg{color:var(--ink-3); flex:none}
.dtp.off button{background:var(--soft-2); border-color:#DCDCD9; color:#B4B8BE; cursor:not-allowed}
.dtp.off button svg{color:#C8CBD0}
.dtp-pop{position:fixed; z-index:500; background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.16); padding:12px; font-family:var(--sans)}
.dtp-pop.cal{width:284px}
.cal-h{display:flex; align-items:center; gap:4px; margin:0 2px 8px}
.cal-h b{flex:1; font-size:15px; font-weight:700; color:var(--ink)}
.cal-h .nav{width:28px; height:28px; border:0; border-radius:6px; background:none; font-size:18px; line-height:1;
  color:var(--ink-3); cursor:pointer}
.cal-h .nav:hover{background:var(--soft)}
.cal-g{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-g .wd{font-size:12px; font-weight:600; color:var(--ink-3); text-align:center; padding:4px 0 6px}
.cal-g .wd.sun,.cal-g .day.sun{color:#DC2626}
.cal-g .wd.sat,.cal-g .day.sat{color:#2563EB}
.cal-g .day{height:34px; border:0; border-radius:8px; background:none; font:500 14px/1 var(--sans); color:var(--ink); cursor:pointer}
.cal-g .day:hover{background:var(--soft)}
.cal-g .day.today{box-shadow:inset 0 0 0 1.5px var(--blue-2)}
.cal-g .day.on{background:var(--ink); color:#fff; box-shadow:none}
.cal-f{display:flex; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-2)}
.cal-f .lnk{border:0; background:none; padding:4px 6px; border-radius:5px; font:600 13px/1 var(--sans); color:var(--blue-2); cursor:pointer}
.cal-f .lnk:hover{background:var(--blue-soft)}
.cal-f .lnk[data-clear]{color:var(--ink-3)}
.dtp-pop.tim{width:196px; padding:8px}
.tim-cols{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tim-cols .col{height:216px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding-right:2px}
.tim-cols .col button{flex:none; height:30px; border:0; border-radius:6px; background:none; font:500 14px/1 var(--mono); color:var(--ink); cursor:pointer}
.tim-cols .col button:hover{background:var(--soft)}
.tim-cols .col button.on{background:var(--ink); color:#fff}
.tim-f{display:flex; align-items:center; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-2)}
.tim-f .small{flex:none; font-size:12px}
.tim-f .tim-in{height:var(--ctl-h-sm); width:64px; padding:0 6px; font:500 13px var(--mono); text-align:center}
.tim-f .tim-in.bad{border-color:#DC2626}
.tim-f .btn{margin-left:auto}

/* ═══ 관리자 전용 단추 — 앰버 → 레드 그라데이션 ═══
   관리자 · 교사라서 보이는 단추에만 쓴다 (만들기 · 관리 · 재채점 등). */
.btn.admin{border:0; color:#fff; font-weight:650;
  background:linear-gradient(135deg,#F59E0B 0%,#EF4444 100%);
  box-shadow:0 1px 2px rgba(239,68,68,.25), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.08)}
.btn.admin:not(:disabled):hover{border:0; background:linear-gradient(135deg,#F59E0B 0%,#DC2626 100%);
  box-shadow:0 3px 10px rgba(239,68,68,.3), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.admin:active{filter:brightness(.95)}

/* ═══ 2.0 — 꼬리말은 본문 맨 끝 ═══
   본문 영역(.site-main) 안의 맨 끝에 둔다. 내용이 짧으면(첫 화면 등) 창 맨 아래에 붙고,
   내용이 길면 본문을 끝까지 내려야 보인다. 문제 풀이 화면은 두 영역이 창을 채우므로 꼬리말을 두지 않는다. */
.site-main{display:flex; flex-direction:column}
.site-main > *:not(.foot){flex:0 0 auto}
.site-main > .wrap{flex:1 0 auto; width:100%}
.site-main > .foot{margin-top:auto !important}
.site-main:has(.ide-wrap) > .foot{display:none}
.site-main > .wrap.ide-wrap{flex:1 1 auto}

/* ═══ 2.0 — 안내 알림(토스트) ═══ 잠깐 나타났다 사라진다 (r19 부터 화면 아래쪽 가운데) */
.toasts{position:fixed; top:calc(var(--top-h) + 12px); left:50%; transform:translateX(-50%); z-index:900;
  display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{pointer-events:auto; display:flex; align-items:center; gap:10px; min-width:240px; max-width:min(560px,92vw);
  padding:11px 16px; border-radius:10px; background:#292824; color:#fff; font-size:14px; font-weight:500;
  box-shadow:0 10px 30px rgba(15,23,42,.25); animation:toastIn .22s ease-out}
.toast::before{content:''; flex:none; width:18px; height:18px; border-radius:50%; background:#22C55E
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.toast.err::before{background:#EF4444 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/12px no-repeat}
.toast.out{animation:toastOut .25s ease-in forwards}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px)}}

/* ═══ 2.0 — 세부 정리 ═══ */
/* 파랑 단추 (포인트 색) — 문제 제출 */
.btn.blue{background:var(--blue-2); border-color:var(--blue-2); color:#fff; font-weight:650}
.btn.blue:not(:disabled):hover{background:var(--blue); border-color:var(--blue)}
.btn.blue:disabled,.btn.blue.busy{opacity:1; background:#93B4F5; border-color:#93B4F5; color:#fff; cursor:progress}
#runBtn.on{background:var(--ink); border-color:var(--ink); color:#fff}
#runBtn:disabled{opacity:.6}

/* 표 안 링크는 검정 (아이디 · 언어 · 테스트 수 등). 마우스를 올리면 파랑 */
table.list td a:not(.tag):not(.setmark):not(.btn){color:var(--ink)}
table.list td a:not(.tag):not(.setmark):not(.btn):hover{color:var(--blue-2)}
a.codelink{text-decoration:underline; text-decoration-color:#C5C9CF}

/* 카드로 이미 나뉜 곳의 중복 구분선 제거 */
.ide-head{border-bottom:0; padding-bottom:4px}
.tabbar{border-bottom:0; padding-bottom:0}
.ustat{border-bottom:0; padding-bottom:0}
.actions{border-top:0; padding-top:0}

/* 선택 작업 줄 — 선택했을 때만 화면 아래에 떠서 나타난다 (표가 밀리지 않게) */
.bulkbar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:300; margin:0;
  width:max-content; max-width:calc(100vw - 32px); padding:8px 10px 8px 16px; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 36px rgba(15,23,42,.18); animation:barIn .18s ease-out}
.bulkbar[hidden]{display:none}
.bulkbar .grow{display:none}
.bulkbar #pickCount{color:var(--ink); white-space:nowrap}
@keyframes barIn{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}
.lnkbtn{border:0; background:none; padding:2px 4px; font:500 13px var(--sans); color:var(--ink-3); cursor:pointer; text-decoration:underline}
.lnkbtn:hover{color:var(--ink)}
table.list th input[type=checkbox]{vertical-align:middle}

/* ═══ 2.0 — 수업 · 평가 등록 화면: 가운데 정렬 + 두 칸 배치 ═══ */
.wrap.formwrap{max-width:1180px}
.wrap.formwrap .fform{max-width:none}
.wrap.formwrap .fform .actions{max-width:none; justify-content:flex-end; margin-top:4px}
.fcols{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.fcol > .fcard{margin-bottom:16px}
.fcol > .fcard:last-child{margin-bottom:0}
.fcols + .fcard{margin-top:16px}
.fcol .fgrid2{grid-template-columns:1fr; gap:0}
.fcol .fgrid2 > .field{display:grid; grid-template-columns:64px auto 1fr; align-items:center; gap:8px 12px; margin-bottom:14px}
.fcol .fgrid2 > .field > label{margin:0}
.fcol .fgrid2 > .field > .seg{justify-self:start}
.fcol .fgrid2 > .field > .dtp{grid-column:1 / -1; margin-top:0}
.fcol .dtp button{max-width:none}
@media (max-width:599px) and (pointer:coarse){ .fcols{grid-template-columns:1fr} }

/* ═══ 2.0 — 촘촘한 설정 상자 (수업 · 평가 등록) ═══ */
[hidden]{display:none !important}
.wrap.formwrap{max-width:1080px}
.fset{padding:6px 24px}
.frow2{display:grid; grid-template-columns:120px 1fr; align-items:center; gap:14px; padding:11px 0; border-top:1px solid #EFEFED}
.frow2:first-child{border-top:0}
.frow2 > .fl{font-size:14px; font-weight:650; color:var(--ink); margin:0}
.frow2 > .fc{min-width:0}
.fc-inline{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap}
.fc .help{margin-top:6px}
.fset .dtp{flex:1; flex-wrap:nowrap; min-width:300px}
.fset .dtp button{min-width:0; flex:1 1 0; max-width:220px}
.fset .chips{gap:6px}
.fset .switch{margin-right:2px}
.fset + .fcard{margin-top:16px}
@media (max-width:599px) and (pointer:coarse){ .frow2{grid-template-columns:1fr; gap:6px} }

/* 체크 상자 · 라디오 — 잘 보이도록 직접 그린다 */
input[type=checkbox],input[type=radio]{appearance:none; -webkit-appearance:none; flex:none; width:17px; height:17px; margin:0;
  border:1.5px solid #8993A0; background:#fff; cursor:pointer; vertical-align:middle; display:inline-grid; place-content:center;
  transition:background .12s, border-color .12s}
input[type=checkbox]{border-radius:4px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--blue-2)}
input[type=checkbox]:checked,input[type=checkbox]:indeterminate{background:var(--blue-2); border-color:var(--blue-2)}
input[type=checkbox]:checked::before{content:''; width:10px; height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
input[type=checkbox]:indeterminate::before{content:''; width:8px; height:2px; background:#fff; border-radius:1px}
input[type=radio]:checked{border-color:var(--blue-2); border-width:5px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5; cursor:not-allowed}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid rgba(37,99,235,.4); outline-offset:2px}
.switch input,.seg input{appearance:auto; -webkit-appearance:auto}
.lockicon{width:44px; height:44px; margin:0 auto 12px; border-radius:50%; background:var(--blue-soft); color:var(--blue-2);
  display:flex; align-items:center; justify-content:center}
.switch input[type=checkbox]{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; margin:0}
.seg input[type=radio]{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}

/* ═══ 2.0 — 운영: 왼쪽 메뉴 | 오른쪽 내용 ═══ */
.wrap:has(> .ops-nav){display:grid; grid-template-columns:176px minmax(0,1fr); column-gap:28px; align-items:start; max-width:1440px}
.wrap:has(> .ops-nav) > *{grid-column:2; min-width:0}
.wrap:has(> .ops-nav) > .ops-nav{grid-column:1; grid-row:1 / span 60; position:sticky; top:0}
.ops-nav{display:flex; flex-direction:column; gap:2px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--soft-2)}
.ops-cap{font-size:12px; font-weight:700; color:var(--ink-4); letter-spacing:.04em; padding:8px 10px 6px}
.ops-nav a{display:flex; align-items:center; gap:9px; height:36px; padding:0 10px; border-radius:7px; font-size:14px; font-weight:550;
  color:var(--ink-3); text-decoration:none}
.ops-nav a svg{flex:none; opacity:.85}
.ops-nav a:hover{background:#fff; color:var(--ink); text-decoration:none}
.ops-nav a.on{background:#fff; color:var(--blue); font-weight:700; box-shadow:0 1px 2px rgba(15,23,42,.08), inset 3px 0 0 var(--blue-2)}
@media (max-width:599px) and (pointer:coarse){
  .wrap:has(> .ops-nav){grid-template-columns:1fr}
  .wrap:has(> .ops-nav) > .ops-nav{grid-column:1; grid-row:auto; position:static; flex-direction:row; overflow-x:auto}
  .wrap:has(> .ops-nav) > *{grid-column:1}
  .ops-cap{display:none}
}

/* 한 줄 도구 막대 */
.searchbar.toolbar1{flex-wrap:wrap; gap:8px; margin-bottom:14px}
.searchbar.toolbar1 > .grow{flex:1}
.searchbar.toolbar1 > .sub{color:var(--ink-3); font-size:13.5px; white-space:nowrap}
.searchbar.toolbar1 .ustat{padding:0; border:0}
.vsep{width:1px; height:20px; background:#DCDCD9; margin:0 4px}
.searchbar > input[type=search]{max-width:240px}

/* ═══ 2.0 — 표 열 너비: 제목만 남는 폭을 쓰고 나머지 열은 내용만큼만 ═══
   화면마다 열에 고정 폭(style="width:…")을 주었더니 넓은 화면에서 빈 칸이 커졌다.
   폭을 준 열은 내용 폭으로 줄이고, 제목 열(폭 지정 없음)이 나머지를 채운다. */
table.list th[style*="width"]{width:1% !important; white-space:nowrap}
table.list td{white-space:nowrap}
table.list td.title,table.list td.wrap{white-space:normal}
table.list th,table.list td{padding-left:14px; padding-right:14px}

/* ═══ 2.0 — 좁은 창의 위쪽 메뉴: [로고 · 단추] / [탭] 두 줄 ═══ (판단은 ui.js 가 한다) */
.top.compact .top-in{flex-wrap:wrap; padding-top:0; padding-bottom:0}
.top.compact .brand{order:1; height:48px}
.top.compact .util{order:2; margin-left:auto; height:48px}
.top.compact .mainnav{order:3; flex:0 0 100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  border-top:1px solid #EFEFED; margin:0 -22px 0 -22px; padding:0 14px}
.top.compact .mainnav::-webkit-scrollbar{display:none}
.top.compact .mainnav a{height:44px; flex:none}
.top.compact .mainnav.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent)}
.top.compact .mainnav.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 72px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 72px),transparent)}
.top.compact .mainnav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 72px,#000 calc(100% - 72px),transparent); mask-image:linear-gradient(to right,transparent,#000 72px,#000 calc(100% - 72px),transparent)}
.wrap.loginwrap{max-width:440px; padding-top:56px}
.wrap.narrow{max-width:900px}

/* ═══ 2.0 — 표: 머리 줄만 회색, 나머지는 투명 · 위아래 선만 ═══ */
table.list{border-radius:0; border-left-color:transparent; border-right-color:transparent; background:transparent}
.scrollx table.list,.modal-b table.list,.card table.list{border-radius:0}
table.list tr:hover td,table.list tr.isadmin td,table.list tr.dim td,table.list tr.me td,table.list tr.flagged td{background:transparent}
table.list tr.dim td{color:var(--ink-3)}
table.list td{background:transparent}

/* ═══ 선택 작업 줄 — 위쪽 메뉴 바로 아래, 진한 띠로 눈에 띄게 ═══ */
.bulkbar{top:calc(var(--top-h) + 12px); bottom:auto; padding:8px 8px 8px 18px; gap:0; border:0; border-radius:12px;
  background:#292824; color:#fff; box-shadow:0 18px 48px rgba(15,23,42,.38), 0 3px 10px rgba(15,23,42,.25);
  animation:barDrop .2s ease-out}
.top.compact ~ .site-main .bulkbar, body:has(.top.compact) .bulkbar{top:calc(var(--top-h) + 56px)}
@keyframes barDrop{from{opacity:0; transform:translate(-50%,-10px)} to{opacity:1; transform:translate(-50%,0)}}
.bulkbar .bgrp{display:flex; align-items:center; gap:8px; padding:0 14px; border-left:1px solid rgba(255,255,255,.16)}
.bulkbar .bgrp:first-child{border-left:0; padding-left:0}
.bulkbar .bgrp:last-child{padding-right:4px}
.bulkbar .bcount b{font-size:14.5px; color:#fff; white-space:nowrap}
.bulkbar .lnkbtn{color:#C9CCD1}
.bulkbar .lnkbtn:hover{color:#fff}
.bulkbar .lbl{font-size:12px; font-weight:600; color:#A8ADB5; margin:0; white-space:nowrap}
.bulkbar .btn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff}
.bulkbar .btn:not(:disabled):hover{background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3)}
.bulkbar .btngroup > .btn + .btn{margin-left:-1px}
.bulkbar .btn.danger{background:rgba(239,68,68,.16); border-color:rgba(248,113,113,.5); color:#FCA5A5}
.bulkbar .btn.danger:not(:disabled):hover{background:#DC2626; border-color:#DC2626; color:#fff}
.bulkbar select.sm{background-color:#fff}

/* ═══ 그룹 관리 목록 — 이름(연필) | 인원 | 휴지통 칸 고정 ═══ */
.grouplist{gap:0; border-top:1px solid var(--line-2); margin-top:14px}
.grouprow{display:grid; grid-template-columns:minmax(0,1fr) 64px 32px; align-items:center; gap:8px;
  padding:8px 4px 8px 10px; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent}
.grouprow .gname-cell{display:flex; align-items:center; gap:6px; min-width:0}
.grouprow .gname{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none}
.grouprow .gcnt{text-align:right; font-size:13px; color:var(--ink-3)}
.iconbtn{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; flex:none;
  border:0; border-radius:6px; background:none; color:var(--ink-3); cursor:pointer}
.iconbtn:hover{background:var(--soft); color:var(--ink)}
.iconbtn.danger{color:#B4524B}
.iconbtn.danger:hover{background:#FDECEC; color:#DC2626}
.bulkbar #pickCount{color:#fff}
.bulkbar .btngroup > .btn,.bulkbar .btngroup > .btn + .btn{box-shadow:none; border:1px solid rgba(255,255,255,.18)}
.bulkbar .btngroup > .btn + .btn{border-left-color:rgba(255,255,255,.08)}

/* ═══ 2.0 — [선택 항목 ▾] 메뉴 ═══ 선택이 없으면 흐리게, 있으면 파랑 */
.selmenu.is-off > summary{color:#A6ABB2; border-color:#E6E6E3; cursor:default; background:#fff}
.selmenu.is-off > summary:hover{background:#fff; border-color:#E6E6E3}
.selmenu:not(.is-off) > summary{background:var(--blue-soft); border-color:#BFD0F5; color:var(--blue); font-weight:650}
.selmenu .menu-pop{left:0; right:auto; min-width:220px}
.menu-pop .mh{font-size:12px; font-weight:600; color:var(--ink-3); padding:6px 10px 4px}
.menu-pop button.r{color:#C53B32}
.menu-pop button.r:hover{background:#FDECEC}
.menu-pop button.sub2{color:var(--ink-3); font-size:13px}
.menu-pop .mrow{display:flex; gap:6px; padding:4px 6px}
.menu-pop .mrow select{flex:1; min-width:0}
.menu-pop .mrow .btn{width:auto; display:inline-flex; padding:0 10px; border:1px solid var(--line-3)}
/* 고르게 나눈 표 — 한 열만 넓어지지 않게 남는 폭을 모든 열에 나눈다 (회원 목록 등) */
table.list.even th[style*="width"]{width:auto !important}
/* 꼬리말은 가운데 정렬 */
.foot-in{justify-content:center; text-align:center}
.foot-in > div{width:100%}

/* ═══ 2.0 — 문제 등록 · 수정 ═══ */
.wrap.formwrap.wide{max-width:1280px}
.unit{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); margin:0}
.unit input{width:96px}
.unit em{font-style:normal; color:var(--ink-3)}
.mdcard{padding:16px 22px 20px}
.mdcard-h{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.mdcard-h .fcard-t{margin:0}
.mdedit2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mdedit2 .pane{display:flex; flex-direction:column; min-width:0}
.mdedit2 .cap{font-size:12.5px; font-weight:600; color:var(--ink-3); margin-bottom:6px}
.mdedit2 textarea{height:380px; resize:vertical; font-family:var(--mono); font-size:13.5px; line-height:1.65}
.mdedit2 .mdprev{height:380px; overflow:auto; border:1px solid #E3E3E0; border-radius:var(--rad); background:var(--soft-2); padding:12px 16px; min-height:0}
@media (max-width:599px) and (pointer:coarse){ .mdedit2{grid-template-columns:1fr} }
.io2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.io2 .field{margin-bottom:14px}
@media (max-width:599px) and (pointer:coarse){ .io2{grid-template-columns:1fr} }
.fcard:not(.fset){padding-bottom:6px}
/* 입력 비밀번호처럼 켜면 칸이 생기는 줄도 높이가 변하지 않게 */
.frow2{min-height:57px}
.frow2 > .fc{min-height:var(--ctl-h); display:flex; flex-direction:column; justify-content:center}
.frow2 > .fc.fc-inline{flex-direction:row; align-items:center; justify-content:flex-start}

/* ═══ 2.0 r12 ═══════════════════════════════════════════════ */

/* 관리자 전용 단추 — 인디고 → 퍼플 → 핑크 (후보 A) */
.btn.admin{background:linear-gradient(135deg,#6366F1 0%,#8B5CF6 50%,#D946EF 100%);
  box-shadow:0 1px 2px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.admin:not(:disabled):hover{background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#C026D3 100%);
  box-shadow:0 3px 10px rgba(139,92,246,.32), inset 0 1px 0 rgba(255,255,255,.22)}

/* 출처 · 분류 태그 — 색을 하나로 통일 (차분한 회색) */
.tag.tc0,.tag.tc1,.tag.tc2,.tag.tc3,.tag.tc4,.tag.tc5,.tag.tc6,.tag.tc7,.tag.tc8,
a.tag.tc0:hover,a.tag.tc1:hover,a.tag.tc2:hover,a.tag.tc3:hover,a.tag.tc4:hover,
a.tag.tc5:hover,a.tag.tc6:hover,a.tag.tc7:hover,a.tag.tc8:hover{background:#F1F1EF; color:#4D4B45; box-shadow:inset 0 0 0 1px #E3E3E0}
a.tag:hover{filter:none; background:#E7E7E4 !important}

/* 표를 감싸는 상자 — 다른 표와 같게 테두리 · 둥근 모서리 없이 */
.scrollx{border:0 !important; border-radius:0 !important}
.scrollx table.list{border-top:1px solid var(--line)}

/* ── 수업 · 평가 탭: 좌우 두 칸, 칸마다 따로 스크롤 ── */
.site-main > .wrap.split{flex:1 1 0; min-height:520px; display:flex; flex-direction:column; padding-bottom:20px}
.wrap.split > .panes{flex:1 1 0; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.spane{display:flex; flex-direction:column; min-height:0; min-width:0; background:#fff;
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
.pane-h{display:flex; align-items:center; gap:8px; padding:10px 14px 10px 16px; border-bottom:1px solid var(--line); flex:none}
.pane-h h2{display:flex; align-items:center; gap:7px; margin:0; font-size:15px; font-weight:700; color:var(--ink)}
.pane-h h2 .ico{color:var(--ink-3)}
.pane-h .cnt{font-size:12.5px; font-weight:600; color:#1D4ED8; background:#EFF4FF; border-radius:999px; padding:0 8px; line-height:20px}
.pane-b{flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain}
.pane-b.pad{padding:14px}
.pane-b .empty{margin:14px}
.pane-b.pad .empty{margin:0}
.pane-b table.list{border-top:0; border-bottom:0; margin:0}
.pane-b table.list thead th{position:sticky; top:0; z-index:2}
.pane-b table.list td.title .smeta{font-size:12px; color:var(--ink-3); font-family:var(--mono); margin-top:2px}
.pane-b table.list td.tgt{white-space:normal; max-width:120px}
table.list.sets td.rowbtns{white-space:nowrap; text-align:right}
table.list.sets td.rowbtns > *{margin-left:4px; vertical-align:middle}
.rowmenu{display:inline-block; position:relative}
.rowmenu > summary.iconbtn{width:28px; padding:0; justify-content:center; font-weight:700; letter-spacing:1px}
.rowmenu .menu-pop{min-width:150px}
details.menu.up .menu-pop{top:auto; bottom:calc(100% + 6px)}
.menu-pop .danger-text{color:#C53B32}
table.list.sets tr.emptyrow td{color:var(--ink-3); text-align:center; padding:18px}
table.list.sets tbody.donerows{display:none}
table.list.sets.show-done tbody.donerows{display:table-row-group}
table.list.sets tr.donetoggle td{text-align:center; padding:8px; background:#FAFAF9}
.linkbtn{border:0; background:none; color:var(--ink-2); font:inherit; font-size:13px; cursor:pointer}
.linkbtn:hover{color:var(--blue-2); text-decoration:underline}
table.list.sets .when-open{display:none}
table.list.sets.show-done .when-open{display:inline}
table.list.sets.show-done .when-closed{display:none}
.spane .setlist{gap:8px}
.spane .donebox{margin-top:14px}
/* 창이 좁으면 위아래로 — 칸 높이를 정해 두고 각각 스크롤 */
@media (max-width:599px) and (pointer:coarse){
  .site-main > .wrap.split{flex:1 0 auto; min-height:0}
  .wrap.split > .panes{grid-template-columns:1fr; flex:none}
  .spane{height:min(560px, 72dvh)}
}
.pane-b table.list{overflow:visible}
.pane-h .grow{flex:1}
.wrap.split{padding-top:16px; margin-top:0}
.wrap.split > form{margin:0}
.pane-b table.list td.tgt{white-space:nowrap}
.pane-b table.list td{padding-top:8px; padding-bottom:8px}
.wrap.split > #actform{display:none}
.wrap.split > .panes{margin-top:0}
.wrap.split{align-items:stretch}
.wrap.split > .panes{width:100%}
/* 위쪽 메뉴의 글자는 줄바꿈하지 않는다 — 넘치면 두 줄 배치로 바뀐다 */
.top .brand,.top .util a,.top .util .viewtoggle,.mainnav a{white-space:nowrap}
.spane .setrow{padding:11px 15px}

/* ═══ 2.0 r13 ═══════════════════════════════════════════════ */

/* 운영 하위 메뉴 — 상자 없이 얇은 세로 탭. 선택한 항목은 위쪽 탭과 같은 옅은 파랑 */
.wrap:has(> .ops-nav){grid-template-columns:104px minmax(0,1fr); column-gap:24px}
.ops-nav{gap:2px; padding:0; border:0; border-radius:0; background:transparent}
.ops-nav a{height:34px; padding:0 10px; border-radius:6px; font-weight:500; color:var(--ink-2)}
.ops-nav a:hover{background:#F3F3F1; color:var(--ink)}
.ops-nav a.on{background:#EFF4FF; color:#1D4ED8; font-weight:650; box-shadow:none}
.ops-nav a.on svg{opacity:1}
@media (max-width:599px) and (pointer:coarse){ .ops-nav{border-bottom:1px solid var(--line); padding-bottom:6px} }

/* 표 아래 줄: 가운데 쪽 번호, 오른쪽 끝 개수 */
.listfoot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:14px; min-height:30px}
.listfoot .pager{margin:0}
.listfoot .lf-r{justify-self:end; font-size:13px; color:var(--ink-3); white-space:nowrap}
.listfoot .lf-r .sep{margin:0 7px; color:#C9C9C6}

/* 선택 항목 메뉴는 표에서 고른 것이 있을 때만 나타난다 */
.selmenu.is-off{display:none}
.toolmenu > summary.iconbtn{width:var(--ctl-h); padding:0; justify-content:center}
.toolmenu .menu-pop{min-width:240px}

/* 문제 모음: 학생 · 관리 화면에서 찾기 줄과 표 머리 줄의 높이 · 위치를 똑같이 */
.wrap > .searchbar{margin:0 0 12px; min-height:var(--ctl-h); flex-wrap:nowrap}
table.list thead th{height:44px; padding-top:0; padding-bottom:0; vertical-align:middle; box-sizing:border-box}

/* 수업 · 평가 칸 — 둥근 모서리 · 좌우 테두리 없이 */
.spane{border-radius:0; border-left:0; border-right:0; border-color:var(--line)}
.pane-h{padding-left:4px; padding-right:4px}
.pane-b table.list th:first-child,.pane-b table.list td:first-child{padding-left:6px}
.pane-b table.list th:last-child,.pane-b table.list td:last-child{padding-right:6px}
.rowbtns .iconbtn{width:28px; padding:0; justify-content:center}

/* 등록 화면의 종류 토글이 줄 전체로 늘어나지 않게 */
.frow2 > .fc > .seg{align-self:flex-start}
.toolmenu > summary.iconbtn{border:1px solid #DEDEDB; background:#fff; color:var(--ink-2)}
.toolmenu > summary.iconbtn:hover{background:#F3F3F1}

/* ═══ 2.0 r14 ═══════════════════════════════════════════════ */

/* 공개 여부 — 눈 아이콘 */
.eye{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; vertical-align:middle}
.eye.on{color:#2563EB; background:#EFF4FF}
.eye.off{color:#9AA0A8}

/* 표 정렬 통일 — 머리 · 내용 모두 왼쪽. 선택 상자 · 아이콘 열만 가운데, 단추 열은 오른쪽 */
table.list th,table.list td{text-align:left !important}
table.list th.ic,table.list td.ic{text-align:center !important; padding-left:6px; padding-right:6px}
table.list td.rowbtns{text-align:right !important}
/* 표 줄 높이 통일 */
table.list tbody td{height:50px; padding-top:6px !important; padding-bottom:6px !important; box-sizing:border-box}
table.list thead th{height:44px}
/* 표: 각진 모서리, 좌우 테두리 투명 */
table.list{border-radius:0 !important; border-left-color:transparent !important; border-right-color:transparent !important}

/* 그룹 이름 — 마우스를 올리면 연필, 누르면 그 자리에서 수정 */
.grouprow .gname-cell{cursor:text; border-radius:6px; padding:2px 6px; margin-left:-6px}
.grouprow .gname-cell:hover{background:#F3F3F1}
.grouprow .gpen{color:var(--ink-3); opacity:0; transition:opacity .12s; flex:none}
.grouprow .gname-cell:hover .gpen{opacity:1}
.grouprow .gname-cell.editing{background:transparent; padding:0; margin-left:0}
.grouprow .gname-cell.editing .gname,.grouprow .gname-cell.editing .gpen{display:none}
.grouprow .gname-in{height:30px; width:100%}
.grouprow a.gcnt:hover{color:var(--blue-2); text-decoration:underline}

/* 운영 화면 카드 */
.opsform .fcard{margin-bottom:16px}
.fcard-hd{display:flex; align-items:center; gap:8px; margin:0 0 6px}
.fcard-hd .fcard-t{margin:0; flex:1}
.fcard-desc{margin:-8px 0 8px; font-size:13px; color:var(--ink-3)}
.fset .fcard-t{margin-bottom:8px}
.fileline{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.fileline .thumb{border:1px solid #EEE; border-radius:4px; padding:2px; background:#fff}
.fileline input[type=file]{font-size:13px; max-width:320px}
.frow2 .help{margin-top:4px; font-size:12.5px; color:var(--ink-3)}
.warn-text{color:#B45309}
.fcard table.list{margin:4px 0 10px}

/* 페이지 안 확인 창 */
dialog.uiconfirm{width:min(440px,92vw)}
.uiconfirm .uc-msg{white-space:pre-line; margin:0; color:var(--ink); line-height:1.6}
.uiconfirm .uc-word{display:block; margin-top:14px; font-size:13px; color:var(--ink-3)}
.uiconfirm .uc-word input{margin-top:6px; width:100%}
.btn.danger-solid{background:#DC2626; border-color:#DC2626; color:#fff; font-weight:600}
.btn.danger-solid:disabled{opacity:.45; cursor:not-allowed}
.toast.info::before{background:#2563EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E") center/12px no-repeat}
.opsform{max-width:none}
.opsform .actions{margin:0 0 20px}

/* 수업 · 평가 칸 — 위쪽 구분선도 없앤다 */
.spane{border-top:0 !important; border-bottom:0 !important}
.pinmark{color:#2563EB; vertical-align:-2px; margin-right:6px}

/* ═══ r17 ═══ */
/* 수업 · 평가 칸 머리 아래 선 제거 (표 머리 줄이 구분선 역할) */
.pane-h{border-bottom:0 !important}
/* 공개 여부 — 문제 화면 오른쪽 위에 떠 있는 표시 (관리자 화면) */
.ide-prob .pubfloat{position:sticky; top:0; float:right; z-index:3; display:inline-flex; align-items:center; gap:4px;
  margin:0 0 6px 10px; padding:2px 10px 2px 3px; border-radius:999px; font-size:12.5px; font-weight:650;
  background:#fff; border:1px solid var(--line); box-shadow:0 2px 8px rgba(15,23,42,.08)}
.ide-prob .pubfloat.on{color:#1D4ED8}
.ide-prob .pubfloat.off{color:#6B7280}
.ide-prob .pubfloat .eye{width:22px; height:22px; background:transparent}
/* 운영 카드 위아래 여백 */
.opsform .fcard{padding-top:24px; padding-bottom:18px}
.opsform .fcard-t{margin-bottom:10px}
.actions.incard{margin:14px 0 2px}
/* 문제 편집: 설명 줄 */
.frow2.ftop{align-items:start}
.frow2.ftop > .fl{padding-top:8px}
.mdbar{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.mdbar .seg{flex:none}
textarea.mdta{min-height:320px; width:100%; resize:vertical}
div.mdta{min-height:320px; overflow:auto; border:1px solid var(--line); border-radius:6px; padding:12px 14px; background:#FAFAF9}
/* 테스트케이스 팝업 */
dialog.tcdlg{width:min(1100px,94vw); height:min(820px,90vh); padding:0; display:none; flex-direction:column}
dialog.tcdlg[open]{display:flex}
dialog.tcdlg iframe{flex:1; width:100%; border:0; background:#fff}
body.embed .top,body.embed .foot,body.embed .demobar{display:none !important}
body.embed{--top-h:0px}
body.embed .wrap{padding-top:16px}
/* 통과율 · 설명 풍선 */
.prate{white-space:nowrap}
.prate em{font-style:normal; color:var(--ink-3); font-size:12px; margin-left:4px}
[data-tip]{cursor:help}
th[data-tip]{text-decoration:underline dotted #B0B4BA; text-underline-offset:4px}
.tipbox{position:fixed; z-index:1000; max-width:min(280px, calc(100vw - 16px)); padding:6px 10px; border-radius:6px;
  background:#292824; color:#fff; font-size:12.5px; line-height:1.5; box-shadow:0 6px 18px rgba(0,0,0,.18); pointer-events:none}
table.list{overflow:visible !important}
/* 문제 모음 [⋮] — [+ 문제]와 같은 높이 · 관리자 색 */
.toolmenu > summary.btn.admin.iconbtn{width:var(--ctl-h); height:var(--ctl-h); padding:0; border:0; color:#fff;
  background:linear-gradient(135deg,#6366F1 0%,#8B5CF6 50%,#D946EF 100%)}
.toolmenu > summary.btn.admin.iconbtn:hover{background:linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#C026D3 100%)}
.toolmenu[open] > summary.btn.admin.iconbtn{box-shadow:0 0 0 3px rgba(139,92,246,.25)}
/* 안내 알림 — 화면 아래쪽 가운데 (2.0 r19) */
.toasts{top:auto !important; bottom:28px}
@keyframes toastIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(12px)}}

/* ═══ 2.0 r20 — 짙은 상단바 (후보 C) ═══ */
.top,.top.is-staff{background:#1F2233 !important; border-bottom:0 !important; box-shadow:0 1px 0 rgba(0,0,0,.25) !important}
.top .brand,.top .brand:hover{color:#fff}
.top .brandmark{background:linear-gradient(135deg,#60A5FA,#A78BFA); box-shadow:none}
.top .mainnav a{color:#B7BCCB}
.top .mainnav a:hover{background:rgba(255,255,255,.06); color:#fff}
.top .mainnav a.on{background:rgba(96,165,250,.16); color:#fff; box-shadow:inset 0 -2px 0 #60A5FA}
.top .mainnav a.navplay{color:#C4B5FD}
.top .mainnav a.navplay:hover{color:#DDD6FE}
.top .util a,.top .who,.top .viewtoggle{color:#B7BCCB}
.top .util a:hover,.top .who:hover,.top .viewtoggle:hover{background:rgba(255,255,255,.08); color:#fff}
.top .util a[href$="logout.php"]{color:#FCA5A5}
.top .viewtoggle .sw{background:rgba(255,255,255,.22)}
.top .viewtoggle.on .sw,.top .viewtoggle.r-admin.on .sw,.top .viewtoggle.r-teacher.on .sw{background:#60A5FA}
.top .btn.primary{background:#60A5FA; border-color:#60A5FA; color:#0B1220}
.top.compact .mainnav{border-top:1px solid rgba(255,255,255,.08)}

/* 분류 태그 — 회색 테두리 없이 */
.tag.tc0,.tag.tc1,.tag.tc2,.tag.tc3,.tag.tc4,.tag.tc5,.tag.tc6,.tag.tc7,.tag.tc8,
a.tag.tc0:hover,a.tag.tc1:hover,a.tag.tc2:hover,a.tag.tc3:hover,a.tag.tc4:hover,
a.tag.tc5:hover,a.tag.tc6:hover,a.tag.tc7:hover,a.tag.tc8:hover{box-shadow:none}

/* 통과율 — 막대 + 통과/제출 (후보 D) */
.prate{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.prate .pbar{width:64px; height:6px; border-radius:3px; background:#EEF0F3; overflow:hidden; flex:none}
.prate .pbar i{display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#3B82F6,#8B5CF6)}
/* 표 머리 줄 — 옅은 남색 (후보 C) */
table.list th,table.list thead th{background:#F2F4F8 !important; color:#3F4656}
table.list{border-top-color:#C9CFDB !important}
table.list thead th{border-bottom-color:#DDE2EA !important}
.prate b{font-weight:600; color:var(--ink); min-width:36px; text-align:right; font-family:var(--sans); font-size:13px}
/* 수업 · 평가 칸의 표 윗선 — 머리 줄에 붙여 스크롤해도 유지 */
.pane-b table.list thead th{box-shadow:inset 0 1px 0 #C9CFDB}
/* 수업 · 평가 칸 머리 높이 고정 — 관리자 화면([+ 수업] 단추)과 학생 화면이 같게 */
.pane-h{height:50px; min-height:50px; box-sizing:border-box; padding-top:0; padding-bottom:0}
/* 상단 고정 공지 — 노란 별, 제목과 여백 */
.pinstar{display:inline-flex; align-items:center; color:#F59E0B; margin-right:10px; vertical-align:-2px}
.top .who,.top .util .who{color:#E5E7EB !important}
.top .who:hover{color:#fff !important}
.top .who b{color:#fff !important}
/* 펼침 메뉴 단추의 화살표 — 글자(▾) 대신 그림으로, 어느 기기에서나 같은 크기 */
.selmenu > summary.btn::after{content:""; width:14px; height:14px; margin-left:-2px; flex:none;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .15s}
.selmenu[open] > summary.btn::after{transform:rotate(180deg)}
.btn .bi{flex:none; margin-right:5px; margin-left:-2px}
.btn.sm .bi{width:14px; height:14px; margin-right:4px}
.btn .bi,.btn.sm .bi{margin-right:-1px}
/* 수업 · 평가 '종료 포함' 스위치 (후보 C) — 켜면 종료 항목이 표 아래에 흐리게 붙는다 */
.doneswitch{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#5E646E; cursor:pointer; user-select:none; flex:none}
.doneswitch input{position:absolute; opacity:0; width:1px; height:1px}
.doneswitch i{position:relative; width:30px; height:18px; border-radius:9px; background:#D1D5DB; transition:background .15s; flex:none}
.doneswitch i::after{content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s}
.doneswitch input:checked + i{background:#2563EB}
.doneswitch input:checked + i::after{transform:translateX(12px)}
.doneswitch input:focus-visible + i{outline:2px solid #93B4F5; outline-offset:2px}
.doneswitch b{font-weight:600; font-size:11.5px; color:#8A8F98; background:#EEF0F3; border-radius:999px; padding:0 7px; line-height:18px}
.spane .pane-h .doneswitch + .btn{margin-left:10px}
/* 종료 항목은 감출 때도 자리 계산에는 넣는다(visibility:collapse) — 켜고 끌 때 칸 폭이 바뀌지 않게 (2.1) */
.spane table.list tbody.donerows{display:table-row-group; visibility:collapse}
.spane.show-done table.list tbody.donerows{visibility:visible}
.spane tbody.donerows tr td{opacity:.62}
.spane tbody.donerows tr.emptyrow td{opacity:1}
.endmark{margin-left:6px; font-family:var(--sans)}
/* 회원 표 — 별명 · 그룹 바로 고치기 */
.ied{display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 6px; margin-left:-6px; border-radius:6px; cursor:text}
.ied:hover{background:#F3F3F1}
.ied .ipen{color:var(--ink-3); opacity:0; flex:none; transition:opacity .12s}
.ied:hover .ipen{opacity:1}
.ied.editing{padding:0; margin-left:0; background:none}
.ied.editing .iv,.ied.editing .ipen{display:none}
.ied .ied-in{height:30px; min-width:140px}
/* 상단 고정 공지 — 목록에서 제목을 진한 주황색으로 */
td.title.pinned a,.pinned-title{color:#C2410C !important}
td.title.pinned a:hover{color:#9A3412 !important}
.listfoot .lf-r .btn{font-size:13.5px}
/* 문제 선택 상자 (수업 · 평가 등록) */
.ppick{position:relative}
.ppick-box{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:var(--ctl-h); padding:4px 8px; border:1px solid var(--in-bd, #8993A0);
  border-radius:6px; background:#fff; cursor:text}
.ppick-box:focus-within{border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.ppick-chips{display:contents}
.ppick-box input{flex:1; min-width:220px; border:0 !important; box-shadow:none !important; height:26px; padding:0 2px; outline:0; background:transparent}
.pchip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 4px 0 8px; border-radius:6px; background:#EFF4FF; color:#1E3A8A; font-size:13px; max-width:280px}
.pchip b{font-family:var(--mono); font-weight:600; font-size:12.5px}
.pchip button{border:0; background:none; width:20px; height:20px; border-radius:4px; color:#3B5BDB; font-size:15px; line-height:1; cursor:pointer}
.pchip button:hover{background:#DBE6FF}
.ppick-pop{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; max-height:300px; overflow:auto; background:#fff;
  border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(15,23,42,.16); padding:4px}
.popt{display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:6px; cursor:pointer; font-size:13.5px}
.popt:hover,.popt.cur{background:#F3F6FC}
.popt .pn{font-family:var(--mono); font-size:12.5px; color:var(--ink-3); width:44px; flex:none}
.popt .pt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.popt .pm{font-size:11.5px; color:#6B7280; background:#F1F1EF; border-radius:4px; padding:0 6px}
.popt .pm.bad{color:#B91C1C; background:#FEE2E2}
.popt .ps{font-size:12px; color:#2563EB; font-weight:600; width:64px; text-align:right; flex:none}
.popt.on{background:#EFF4FF}
.popt.in{opacity:.5; cursor:default}
.popt.in .ps{color:var(--ink-3)}
.pempty{padding:12px; color:var(--ink-3); font-size:13px}
table.list th.thr{text-align:right !important}
/* 수업 · 평가 표 — 제목 열 앞 여백 */
.pane-b table.list th:first-child:not(.ic),.pane-b table.list td:first-child:not(.ic){padding-left:14px}
/* 학생 문제 모음 — 해결한 문항 수 */
.solvedcnt{font-size:13.5px; color:var(--ink-3); white-space:nowrap}
.solvedcnt b{color:#1D4ED8; font-size:15px; font-weight:700; margin:0 2px}
/* 상단 고정 공지 — 별과 같은 주황 */
.pinstar{color:#F08C00}
td.title.pinned a,.pinned-title{color:#E07B00 !important}
td.title.pinned a:hover{color:#C26A00 !important}
.searchbar .solvedcnt{margin-left:auto}

/* ═══ 찾기 줄 · 표 머리 줄 고정 (r28) ═══ */
.site-main .wrap > .searchbar{position:sticky; top:0; z-index:30; background:#fff; padding-top:10px; padding-bottom:12px; margin-top:-10px; margin-bottom:0}
.site-main table.list thead th{position:sticky; top:var(--stick-top, 0px); z-index:20;
  box-shadow:inset 0 1px 0 #C9CFDB, inset 0 -1px 0 #DDE2EA}
.site-main .scrollx.fits{overflow:visible}
.site-main .scrollx.wide{overflow:auto; max-height:calc(100dvh - var(--top-h) - 180px)}
.site-main .wrap > .searchbar .tagpick-pop,.site-main .wrap > .searchbar .menu-pop{z-index:60}
/* 표 테두리 통일 (r29) — 머리 줄 위아래 선은 머리 칸의 그림자 한 겹으로만 그린다.
   (표 윗선 + 그림자가 겹쳐 두껍게 보이던 문제, 수업 · 평가 표와 모양이 달랐던 문제) */
table.list{border-top:0 !important; border-bottom:1px solid #C9CFDB !important}
table.list thead th{border-bottom:0 !important; box-shadow:inset 0 1px 0 #C9CFDB, inset 0 -1px 0 #C9CFDB !important}
.pane-b table.list{border-bottom:1px solid #C9CFDB !important}
table.list tbody tr:last-child td{border-bottom:0}
/* ═══ r30 — 회원 추가 창 · 역할 ═══ */
dialog.addlg{width:min(560px,94vw)}
dialog.addlg .modal-h{display:flex; align-items:center; gap:12px}
dialog.addlg .modal-h h3{flex:1}
.mseg{display:inline-flex; background:#EEF0F3; border-radius:8px; padding:3px; gap:2px}
.mseg button{height:28px; padding:0 12px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:13px; color:#5E646E; cursor:pointer}
.mseg button.on{background:#fff; color:#292824; font-weight:650; box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mrows .frow2{grid-template-columns:92px 1fr; padding:8px 0; min-height:0}
.mrows .frow2:first-child{padding-top:2px}
.mrows .frow2 > .fc{min-height:0}
.mrows textarea{min-height:150px}
.rolebadge.r-author{background:#EDE9FE; color:#5B21B6}
.viewtoggle.r-author{--role-c:#7C3AED}
/* 회원 표 — 열 너비 고정 (바로 고치기로 입력란이 열려도 너비가 바뀌지 않게) */
table.list.users{table-layout:fixed; width:100%}
table.list.users th:nth-child(1){width:44px !important}
/* 아이디 · 별명 · 그룹은 같은 너비로, 창 폭에 맞춰 늘고 준다 */
table.list.users th:nth-child(2),table.list.users th:nth-child(3),table.list.users th:nth-child(4){width:auto !important}
table.list.users th:nth-child(5){width:130px !important}
table.list.users th:nth-child(6){width:104px !important}
table.list.users th:nth-child(7){width:96px !important}
table.list.users th:nth-child(8){width:132px !important}
table.list.users td{overflow:hidden; text-overflow:ellipsis}
table.list.users .ied{max-width:100%}
table.list.users .ied .iv{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.list.users .ied.editing{display:flex; width:100%}
table.list.users .ied .ied-in{width:100%; min-width:0; height:30px}
/* 회원 추가 창 — 등록 중 */
dialog.addlg{position:relative}
dialog .mbusy{display:none}
dialog.busy .mbusy{display:flex; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; gap:10px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); font-weight:650; color:#292824; font-size:15px; border-radius:inherit}
dialog .mbusy .spin{width:20px; height:20px; border-radius:50%; border:2.5px solid #C7D2FE; border-top-color:#2563EB; animation:kcspin .8s linear infinite}
@keyframes kcspin{to{transform:rotate(360deg)}}
.bulkopts input[type=text]{flex:1; min-width:0}
.bulkopts .fl2{font-size:13.5px; font-weight:650; color:var(--ink); margin:0 0 0 6px; white-space:nowrap}
.bulkopts select{width:auto; flex:none}
/* 수업 · 평가 문제 순서 끌기 */
td.dragh{cursor:grab; color:var(--ink-3)}
td.dragh:hover{color:var(--ink)}
#spBody tr.dragging td{background:#EFF4FF; opacity:.85}
.pchip{cursor:grab}
.pchip.dragging{opacity:.5}
td.dragh{touch-action:none; user-select:none}
.pchip{touch-action:none; user-select:none}
.pchip.dragging{opacity:.55; outline:2px dashed #93B4F5}

/* 회원 > 등록자 열 (2.0) */
td.regcell{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
td.regcell .rolebadge{margin-right:4px}
table.list.users th:nth-child(6){width:170px !important}

/* 공개 대상 칩 — 관리 그룹 · 지도 그룹 머리 (2.0) */
.chips .chiphd{flex-basis:100%; font-size:12px; font-weight:650; color:var(--ink-3); margin:4px 0 -2px}
.chips .chiphd:first-child{margin-top:0}

/* 그룹 관리 창 — 관리 그룹 · 지도 그룹 (2.0) */
dialog.gdlg{width:min(640px, calc(100vw - 32px))}
.gdlg .gsec + .gsec{margin-top:22px; padding-top:18px; border-top:1px solid var(--line, #E3E3E0)}
.gdlg .gsec-h{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.gdlg .gsec-h b{font-size:14.5px; color:var(--ink)}
.gdlg .grouprow .gowner{white-space:nowrap}
.gdlg .grouprow select.gparent{width:auto; max-width:170px}
.gdlg .grouprow.gr-cls{grid-template-columns:minmax(0,1fr) auto 170px 52px 32px}
.gdlg .grouprow select.gparent{width:170px; max-width:none; height:30px}

/* 회원 표 — 관리 열의 말줄임(..) 제거, 역할 설명 아이콘 (2.0) */
table.list.users th:nth-child(8){width:150px !important}
table.list.users td.rowbtns{overflow:visible; text-overflow:clip}
.infoi{display:inline-flex; align-items:center; vertical-align:-2px; margin-left:3px; color:var(--ink-3); cursor:help; border-radius:50%}
.infoi:hover,.infoi:focus-visible{color:var(--blue-2, #2563EB); outline:none}
.tipbox{white-space:pre-line}
/* 그룹 관리 창 — 목록 마지막 줄과 구역 경계선이 겹쳐 보이지 않게 */
.gdlg .gsec + .gsec{margin-top:26px; padding-top:0; border-top:0}

/* ── 선택 상자 펼침 목록 (2.0) — 운영체제 기본 목록 대신 쓰는 목록 ── */
select:hover:not(:disabled){border-color:#9AA3B2}
select.csel-open{border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.csel-pop{position:fixed; z-index:2000; box-sizing:border-box; max-width:min(420px, calc(100vw - 16px));
  overflow-y:auto; overscroll-behavior:contain; padding:5px; background:#fff;
  border:1px solid #DDE2EA; border-radius:10px; box-shadow:0 12px 32px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
  font-size:14px; color:var(--ink, #292824); animation:cselIn .1s ease-out}
.csel-pop.up{animation-name:cselUp}
@keyframes cselIn{from{opacity:0; transform:translateY(-3px)}}
@keyframes cselUp{from{opacity:0; transform:translateY(3px)}}
.csel-pop .csel-opt{display:flex; align-items:center; gap:8px; min-height:34px; padding:0 12px 0 8px;
  border-radius:6px; cursor:pointer; white-space:nowrap; user-select:none}
.csel-pop .csel-opt .ck{flex:none; color:#2563EB; visibility:hidden}
.csel-pop .csel-opt.on .ck{visibility:visible}
.csel-pop .csel-opt.on{font-weight:650; color:#1D4ED8}
.csel-pop .csel-opt.act{background:#EFF4FF}
.csel-pop .csel-opt.dis{color:#B0B5BD; cursor:default}
.csel-pop .csel-opt span{overflow:hidden; text-overflow:ellipsis}
.csel-pop .csel-grp{padding:9px 10px 4px; font-size:11.5px; font-weight:700; color:#8A8F98; letter-spacing:.02em}
.csel-pop .csel-grp:not(:first-child){margin-top:4px; border-top:1px solid #EEF0F3}

/* 그룹 관리 창 — 표 형태 (2.0). 머리 띠 + 줄 사이 옅은 선 하나만 */
.gdlg .gsec + .gsec{margin-top:28px; padding-top:0; border-top:0}
.gdlg .gtable{width:100%; border-collapse:collapse; table-layout:fixed; margin-top:12px; font-size:14px}
.gdlg .gtable th{height:34px; padding:0 10px; text-align:left; font-size:12.5px; font-weight:650; color:#3F4656; background:#F2F4F8; border:0}
.gdlg .gtable td{height:44px; padding:0 10px; border:0; border-bottom:1px solid #EEF0F3; vertical-align:middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gdlg .gtable tbody tr:last-child td{border-bottom:0}
.gdlg .gtable tbody tr:hover td{background:#FAFBFC}
.gdlg .gtable td.num{font-size:13px; color:var(--ink-3)}
.gdlg .gtable td.ic{padding:0 4px; text-align:center}
.gdlg .gtable select.gparent{width:100%}
.gdlg .gtable .gname-cell{display:inline-flex; align-items:center; gap:6px; max-width:100%; cursor:text; border-radius:6px; padding:2px 6px; margin-left:-6px}
.gdlg .gtable .gname-cell:hover{background:#F3F3F1}
.gdlg .gtable .gname{font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gdlg .gtable .gpen{color:var(--ink-3); opacity:0; transition:opacity .12s; flex:none}
.gdlg .gtable .gname-cell:hover .gpen{opacity:1}
.gdlg .gtable .gname-cell.editing{background:transparent; padding:0; margin-left:0; width:100%}
.gdlg .gtable .gname-cell.editing .gname,.gdlg .gtable .gname-cell.editing .gpen{display:none}
.gdlg .gtable .gname-in{height:30px; width:100%}
.gdlg .gtable a.gcnt{color:var(--ink-3); text-decoration:none}
.gdlg .gtable a.gcnt:hover{color:var(--blue-2, #2563EB); text-decoration:underline}
.gdlg .gsec .inline{margin-top:2px}

/* ── 운영 > 챗봇 (2.0) ── */
.sec-t{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 10px}
.keyfield{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.keyfield .keymask{font-size:11px; letter-spacing:2px; color:#292824; padding:0 12px; height:var(--ctl-h); display:inline-flex; align-items:center;
  border:1px solid #E3E3E0; border-radius:var(--rad, 6px); background:#F7F7F5; user-select:none}
.keyfield input{flex:1; min-width:220px}
input.mono-in{padding-left:11px; font-family:ui-monospace, Menlo, Consolas, monospace; font-size:13px}
.promptview{white-space:pre-wrap; margin:0; padding:12px 14px; background:#F7F7F5; border:1px solid #EEEEEC; border-radius:8px;
  font:13px/1.6 ui-monospace, Menlo, Consolas, monospace; max-height:360px; overflow:auto}
.note.chatpol{margin-bottom:14px}

/* ── 문제 화면 챗봇 (2.0) — 왼쪽 아래 아이콘 + 대화 창 ── */
.chatfab{position:fixed; left:20px; bottom:20px; z-index:900; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, #6366F1, #8B5CF6 55%, #D946EF); box-shadow:0 8px 22px rgba(99,102,241,.38); transition:transform .15s}
.chatfab:hover{transform:translateY(-2px) scale(1.04)}
.chatfab.on{transform:scale(.92)}
.chatwin{position:fixed; left:20px; bottom:84px; z-index:901; width:min(400px, calc(100vw - 32px)); height:min(580px, calc(100vh - 120px));
  display:flex; flex-direction:column; background:#fff; border:1px solid #DDE2EA; border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.22); overflow:hidden; animation:chatIn .16s ease-out}
.chatwin[hidden]{display:none}
@keyframes chatIn{from{opacity:0; transform:translateY(8px) scale(.98)}}
.chat-h{display:flex; align-items:center; gap:8px; height:52px; padding:0 10px 0 14px; border-bottom:1px solid #EEF0F3; flex:none}
.chat-h .grow{flex:1}
.chat-av{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex:none;
  background:linear-gradient(135deg, #6366F1, #D946EF)}
.chat-name{font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-h select{max-width:200px}
.chat-ib{width:32px; height:32px; border:0; background:none; border-radius:8px; color:#6B7280; cursor:pointer; display:flex; align-items:center; justify-content:center}
.chat-ib:hover{background:#F3F4F6; color:#111827}
.chat-body{flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; background:#F8F9FB}
.chat-empty{margin:auto; text-align:center; color:#6B7280; font-size:13.5px; line-height:1.7}
.chat-empty b{color:#374151; font-size:14.5px}
.chat-msg{display:flex}
.chat-msg.me{justify-content:flex-end}
.chat-bub{max-width:84%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.6; word-break:break-word; white-space:normal}
.chat-msg.me .chat-bub{background:#2563EB; color:#fff; border-bottom-right-radius:5px; white-space:pre-wrap}
.chat-msg.ai .chat-bub{background:#fff; color:#1F2937; border:1px solid #E5E7EB; border-bottom-left-radius:5px}
.chat-msg.err .chat-bub{background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; font-size:13px}
.chat-bub pre{margin:6px 0; padding:9px 11px; background:#0F172A; color:#E2E8F0; border-radius:8px; overflow-x:auto; font-size:12.5px; line-height:1.5; white-space:pre}
.chat-bub code{font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px}
.chat-bub :not(pre) > code{background:#F1F5F9; padding:1px 5px; border-radius:4px}
.chat-bub.typing{display:flex; gap:4px; padding:13px 14px}
.chat-bub.typing i{width:7px; height:7px; border-radius:50%; background:#9CA3AF; animation:chatDot 1.2s infinite ease-in-out}
.chat-bub.typing i:nth-child(2){animation-delay:.15s}
.chat-bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%, 60%, 100%{opacity:.35; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
.chat-in{display:flex; align-items:flex-end; gap:8px; padding:10px 12px; border-top:1px solid #EEF0F3; background:#fff; flex:none}
.chat-in textarea{flex:1; resize:none; min-height:40px; max-height:120px; padding:9px 12px; border:1px solid #D5D9E0; border-radius:12px;
  font:14px/1.5 inherit; outline:none}
.chat-in textarea:focus{border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.chat-send{width:40px; height:40px; flex:none; border:0; border-radius:12px; background:#2563EB; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .12s}
.chat-send:hover:not(:disabled){background:#1D4ED8}
.chat-send:disabled{background:#CBD5E1; cursor:not-allowed}
.chat-foot{font-size:11.5px; color:#9CA3AF; text-align:center; padding:0 12px 8px; background:#fff; flex:none}
/* API 키 칸 — 글자 칸이지만 화면에는 점으로 표시 (브라우저 비밀번호 자동 채우기 방지) */
input.keyin{-webkit-text-security:disc; text-security:disc; font-family:ui-monospace, Menlo, monospace; letter-spacing:1px}
input.keyin::placeholder{letter-spacing:0; font-family:inherit}
table.poltable{table-layout:fixed}
table.poltable select{width:100%; max-width:none}
table.list.poltable th.c-t{width:200px !important}
table.list.poltable th.c-r{width:110px !important}
table.list.poltable th.c-n{width:70px !important}
table.list.poltable td{overflow:hidden; text-overflow:ellipsis}
/* 확인 단추 — 초록 (2.0) */
.btn.green{background:#16A34A; border-color:#16A34A; color:#fff}
.btn.green:hover:not(:disabled){background:#15803D; border-color:#15803D}
.ustat.subtabs{margin:0 0 16px; padding:0; border:0}

/* 챗봇 아이콘 — 흰 테두리 + 옅은 보라 선, 그림자 진하게 (2.0) */
.chatfab{border:3px solid #fff; box-shadow:0 0 0 1.5px rgba(99,102,241,.45), 0 12px 28px rgba(79,70,229,.48), 0 3px 8px rgba(15,23,42,.18)}
/* 챗봇 창 크기 조절 — 오른쪽 위 모서리를 끌어 너비는 넓히고 높이는 줄인다 */
.chatwin{min-width:min(400px, calc(100vw - 32px))}
.chat-rz{position:absolute; top:0; right:0; width:14px; height:14px; z-index:2; cursor:nesw-resize; touch-action:none}
.chat-rz::before{content:''; position:absolute; top:3px; right:3px; width:8px; height:8px;
  border-top:2px solid #C3C8D2; border-right:2px solid #C3C8D2; border-top-right-radius:3px}
.chat-rz:hover::before{border-color:#6366F1}
body.chat-resizing, body.chat-resizing *{cursor:nesw-resize !important; user-select:none !important}

/* ── 창 최소 너비 (2.0) ──
   (예전에는 창 너비 700~1000px 에서 칸을 한 줄로 접었으나, 이제 마우스를 쓰는 컴퓨터에서는 창을 아무리 좁혀도
    데스크톱 배치를 유지하고 최소 너비를 둔다. 한 줄로 접는 배치는 터치 기기의 좁은 화면(휴대폰)에서만 쓴다.)
   창을 너무 좁히면 표 · 검색줄이 무너진다. 그보다 좁으면 가로 스크롤로 보여 준다.
   휴대폰(터치 기기)은 기존 모바일 화면을 그대로 쓴다. 팝업 안 화면(embed)은 제외. */
@media (pointer:fine){
  html{overflow-x:auto; overflow-y:hidden}
  body:not(.embed){min-width:960px}
  body.adminpage:not(.embed){min-width:1120px}
}

/* ── 표 열 너비 조절 (2.0) — 머리 칸 오른쪽 경계를 끌어서 조절, 두 번 누르면 처음대로 ── */
/* 머리 칸이 sticky 가 아니면 JS 가 position:relative 를 준다 */
table.list thead th .colrz{position:absolute; top:0; right:-4px; width:8px; height:100%; z-index:3; cursor:col-resize; touch-action:none}
table.list thead th .colrz::after{content:''; position:absolute; top:25%; bottom:25%; left:3px; width:2px; border-radius:1px; background:transparent; transition:background .12s}
table.list thead th:hover .colrz::after{background:#C9CFDB}
table.list thead th .colrz:hover::after,table.list thead th .colrz.on::after{background:#6366F1; top:0; bottom:0}
body.col-resizing, body.col-resizing *{cursor:col-resize !important; user-select:none !important}
table.list.rz-fixed{table-layout:fixed}
table.list.rz-fixed td,table.list.rz-fixed th{overflow:hidden; text-overflow:ellipsis}

/* 회원 활동 화면 — 별칭 · 아이디 · 그룹을 그 자리에서 고친다 (2.0) */
.phead .pied{display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:6px; padding:1px 6px; margin-left:-6px}
.phead .pied:hover{background:#F3F3F1}
.phead .pied .ipen{color:var(--ink-3); opacity:0; transition:opacity .12s; flex:none}
.phead .pied:hover .ipen{opacity:1}
.phead .pied.editing{background:transparent; padding:0; margin-left:0}
.phead .pied.editing .iv,.phead .pied.editing .ipen{display:none}
.phead h1 .pied .ied-in{font-size:20px; font-weight:700; height:40px; width:240px}
.phead .sub .pied .ied-in{height:32px; width:200px; font-size:14px}

/* ── 표 머리 줄 (2.0 r51) — 머리 칸 사이 구분선을 늘 보이게 하고, 머리 글자는 가운데 정렬 ── */
table.list thead th{text-align:center !important}
table.list thead th .colrz::after{background:#D5DAE3; top:28%; bottom:28%}
table.list thead th:hover .colrz::after{background:#D5DAE3}
table.list thead th .colrz:hover::after,table.list thead th .colrz.on::after{background:#6366F1; top:0; bottom:0}
/* 크기 조절 손잡이가 없는 칸(마지막 칸 제외)에도 같은 구분선 */
table.list thead th:not(:last-child)::after{content:''; position:absolute; right:0; top:28%; bottom:28%; width:1px; background:#D5DAE3; pointer-events:none}
table.list thead th:not(:last-child):has(.colrz)::after{display:none}
/* 회원 표: 비밀번호 재설정 단추를 등록일 바로 오른쪽에 둔다 */
table.list.users td.rowbtns{text-align:left !important}
table.list.users td.rowbtns > :first-child{margin-left:0}

/* ── 회원 목록 묶어 보기 (2.0) ── */
/* 평소에는 옆의 [그룹 관리] 단추와 같은 모양, 묶음 보기 중에는 주황색 */
.btn.viewtog{width:var(--ctl-h); padding:0}
.btn.viewtog .i-tree{display:none}
.btn.viewtog[aria-pressed="true"]{background:#FFF4E5; border-color:#F5B25B; color:#C2610C}
.btn.viewtog[aria-pressed="true"]:not(:disabled):hover{background:#FFEAD0; border-color:#EE9A35}
.btn.viewtog[aria-pressed="true"] .i-flat{display:none}
.btn.viewtog[aria-pressed="true"] .i-tree{display:block}

/* 첫 칸(펼침 단추 + 선택 상자)을 넓혀 단계별로 들여 쓴다 */
table.list.users.grouped th:nth-child(1){width:118px !important}
table.list.users.grouped td.ic{text-align:left !important; white-space:nowrap; padding-right:6px !important}
table.list.users.grouped tr.g1 td.ic{padding-left:8px !important}
table.list.users.grouped tr.g2 td.ic{padding-left:30px !important}
table.list.users.grouped tr.gm2 td.ic{padding-left:86px !important}
table.list.users.grouped tr.gm1 td.ic{padding-left:64px !important}
/* 전체 선택 상자는 학교 선택 상자와 같은 세로줄에 */
table.list.users.grouped th.ic{text-align:left !important; padding-left:36px !important}
table.list.users.grouped td.ic input{vertical-align:middle}

/* 펼침 단추 */
table.list.users .gcaretb{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  margin-right:6px; padding:0; border:0; border-radius:5px; background:none; color:var(--b500); cursor:pointer; vertical-align:middle}
table.list.users .gcaretb svg{transition:transform .15s}
table.list.users .gtog[aria-expanded="false"] svg{transform:rotate(-90deg)}
table.list.users .gname2[aria-expanded="false"] svg.gico{transform:none}

/* 머리 줄 공통 */
table.list.users tr.ghead td{height:auto !important; padding-top:0 !important; padding-bottom:0 !important}
table.list.users tr.ghead:hover td{background:inherit}
table.list.users .gname2{display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:0;
  border:0; background:none; font:inherit; text-align:left; cursor:pointer; color:inherit}
table.list.users .gcnt{margin-left:6px; font-size:12.5px; font-weight:600; color:var(--b500)}

/* 학교 — 진한 띠와 왼쪽 막대로 다른 단계와 확실히 구분 */
table.list.users tr.g1 td{background:var(--b100); border-top:2px solid var(--b300); border-bottom:1px solid var(--b200)}
table.list.users tr.g1 .gname2{font-size:15px; color:var(--b800); min-height:44px}
table.list.users tr.g1 .gico{color:var(--b600)}

/* 지도교사 — 옅은 띠. 교사 본인 줄이 머리 줄일 때도 같은 색 */
table.list.users tr.g2 td{background:var(--b50)}
/* 묶음 줄은 마우스를 올려도 색이 바뀌지 않는다 */
table.list.users tr.g1:hover td{background:var(--b100)}
table.list.users tr.g2:hover td{background:var(--b50)}
table.list.users tr.ghead.g2 .gname2{font-size:13.5px; color:var(--ink)}
table.list.users tr.gteach td:nth-child(2) a{font-weight:700}

/* ── 공개 대상 그룹 선택 상자 (2.1) — 태그 선택 상자(.tagpick) 모양을 그대로 쓴다 ── */
.grppick{min-width:260px; max-width:520px; flex:1}
.grppick > summary{background:#fff}
.grppick .tagpick-pop{width:min(440px, 92vw)}
.grppick .tp-list{max-height:320px}
.grppick .tp-hd{position:sticky; top:0; z-index:1; background:#fff; padding:8px 8px 4px; font-size:12px; font-weight:700; color:var(--ink-3)}
.grppick .tp-hd:not(:first-child){margin-top:4px; border-top:1px solid var(--line-2)}
.grppick label.lv2{padding-left:30px}
.grppick label.lv2::before{content:''; width:8px; height:8px; margin:-6px 0 0 -16px; border-left:1.5px solid var(--b200); border-bottom:1.5px solid var(--b200)}
.grppick label .gn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grppick label .gw{font-size:12px; color:var(--b600); background:var(--b50); padding:1px 7px; border-radius:4px; white-space:nowrap}
.grppick .tp-foot{align-items:center; border-top:1px solid var(--line-2); margin-top:6px}
.grppick .tp-sum{margin-right:auto; font-size:12.5px; color:var(--b600); font-weight:600}

/* ── 후기 설정 (2.1) — 스위치를 켜면 펼쳐지는 하위 설정 ── */
.revopts{border-top:1px solid #EFEFED; background:var(--b25); border-radius:8px; margin:2px 0 4px; padding:0 14px}
.revopts .frow2{border-top:1px dashed var(--line)}
.revopts .frow2:first-child{border-top:0}
.revopts .frow2 > .fl{font-weight:600; color:var(--ink-2); font-size:13.5px}
.revlen input[type=number]{width:96px}

/* ── 학생 화면 후기 영역 (2.1) ── */
.revcard{margin-top:26px}
.revbox{border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden}
.revbox > summary{list-style:none; display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer; flex-wrap:wrap}
.revbox > summary::-webkit-details-marker{display:none}
.revbox > summary:hover{background:var(--b25)}
.revbox[open] > summary{border-bottom:1px solid var(--line-2)}
.revbox .revico{color:var(--b600); flex:none}
.revbox .revt{font-size:16px; font-weight:700; color:var(--b800)}
.revbox .revmeta{font-size:13px; color:var(--ink-3)}
.revbox .revcaret{margin-left:auto; color:var(--b500); transition:transform .15s; transform:rotate(-90deg)}
.revbox[open] .revcaret{transform:none}
.revin{padding:16px 18px 18px}
.revq{margin:0 0 12px; padding:10px 14px; border-left:3px solid var(--b400); background:var(--b25); color:var(--ink); font-size:14.5px; border-radius:0 6px 6px 0}
.revform textarea{width:100%; min-height:150px; resize:vertical; font:inherit; font-size:15px; line-height:1.65; box-sizing:border-box}
.revfoot{display:flex; align-items:center; gap:12px; margin-top:10px}
.revfoot .grow{flex:1}
.revcnt{font-size:13px; font-family:var(--mono); color:var(--ink-3)}
.revcnt.bad{color:var(--bad)}
.revcnt.ok{color:var(--ok)}
.revread{white-space:normal; padding:12px 14px; background:var(--fill); border-radius:8px; line-height:1.65; font-size:15px}
.revwhy{margin:10px 0 0}

/* ── 제출 현황 후기 목록 (2.1) ── */
table.list.revlist td.revtext{white-space:normal; line-height:1.6; padding-top:10px !important; padding-bottom:10px !important; height:auto}

/* ── 수업 · 평가 목록 (2.1) — 눈 아이콘 단추, 만든 교사 ── */
.eyebtn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0;
  border:0; border-radius:6px; background:none; cursor:pointer}
.eyebtn:hover{background:var(--b50)}
.ownertag{display:inline-block; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;
  margin-right:8px; padding:2px 8px; border-radius:5px; background:var(--b50); color:var(--b600); font-size:12px; font-weight:600}

/* ── 운영 화면 표 열 정렬 (2.1) ── */
table.list th.sortable{cursor:pointer; user-select:none}
table.list th.sort-asc, table.list th.sort-desc{color:var(--b600)}   /* 정렬 중인 칸만 파랑 */
table.list th .sortmk{display:inline-block; width:10px; margin-left:4px; font-size:10px; color:var(--b300); vertical-align:1px}
table.list th.sortable:not(.sort-asc):not(.sort-desc):hover .sortmk::after{content:'↕'}
table.list th.sort-asc .sortmk::after{content:'▲'; color:var(--b600)}
table.list th.sort-desc .sortmk::after{content:'▼'; color:var(--b600)}
.modal-f .grow{flex:1}

.gtable td.gowner{color:var(--ink-2); font-weight:600; white-space:nowrap}

/* 공개 대상 머리 요약 — 고른 그룹을 작은 알약으로, 지도 그룹은 교사 태그를 앞에 (2.1) */
.grppick > summary .gsels{display:flex; gap:5px; overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,#000 88%,transparent)}
.gsel{display:inline-flex; align-items:center; gap:5px; flex:none; padding:2px 8px 2px 3px; border-radius:5px; background:var(--b50); font-size:13px; color:var(--ink)}
.gsel:not(:has(i)){padding-left:8px}
.gsel i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--b600); background:#fff; border-radius:4px; padding:1px 6px}

/* 제출 현황 — 문항별 결과 ↔ 후기 전환 (2.1) */
.viewseg{margin-left:12px}
.viewseg button b{margin-left:3px; font-weight:700; color:var(--b600)}
.revsum{margin:0 0 10px}

/* 테스트 결과 (2.1) — 예시마다 일치 · 불일치 */
.runout .tcase{border:1px solid var(--line-2); border-radius:7px; margin:0 0 8px; overflow:hidden}
.runout .tc-h{padding:6px 10px; font-size:13px; background:var(--fill)}
.runout .tcase.is-ok .tc-h{color:var(--ok); background:var(--ok-soft)}
.runout .tcase.is-bad .tc-h{color:var(--bad); background:var(--bad-soft)}
.runout .tc-b{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 10px}
.runout .tc-b pre{margin:4px 0 0}
.runout .tcase > pre.err{margin:0 10px 8px}

/* 회원 활동 화면 머리 — 이름 · 아이디 · 그룹이 한 줄에 (2.1)
   max-width:100% 인 inline-flex 가 폭을 모르는 칸 안에서 최소 폭으로 줄어 글자가 꺾이던 문제 */
.phead > h1, .phead > .sub{white-space:nowrap; flex-shrink:0}
.phead .pied{max-width:none}

/* AI 화면 — 학생용 챗봇 | 교사용 요약봇 전환 (2.1) */
.aiseg{margin:0 0 16px; width:max-content; justify-self:start; align-self:start}
.mseg a{display:inline-flex; align-items:center; height:30px; padding:0 14px; border-radius:6px; font-size:13.5px; color:#5E646E; text-decoration:none}
.mseg a:hover{text-decoration:none; color:var(--ink)}
.mseg a.on{background:#fff; color:#292824; font-weight:650; box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ── 운영 > 기록 (2.1) ── */
.reccard{margin-top:16px}
.rec-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rec-h .grow{flex:1}
.rec-h .fcard-t{display:flex; align-items:center; gap:7px; margin:0}
.rec-h .fcard-t svg{color:var(--b600)}
.recsum{margin-top:12px; padding:14px 16px; background:var(--b25); border-radius:8px; line-height:1.7}
.recsum > :first-child{margin-top:0} .recsum > :last-child{margin-bottom:0}
.recold, .recbasis{margin-top:12px}
.recold > summary, .recbasis > summary{cursor:pointer; font-size:13px; color:var(--b600); font-weight:600}
.recold-it{margin-top:10px; padding:10px 14px; border-left:3px solid var(--line); font-size:14px}
.recgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px}
@media (max-width:860px){ .recgrid{grid-template-columns:1fr} }
.recgrid .rlab{font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.recgrid table.list td{white-space:normal}
.revitem{border-top:1px solid var(--line-2); padding:12px 0}
.revitem:first-of-type{margin-top:8px}
.revitem-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.revitem-h .grow{flex:1}
.revitem-h a{font-weight:600}
.revitem-b{margin-top:8px; line-height:1.7; font-size:14.5px; color:var(--ink)}
.rec-h .spin, #sumBtn .spin{display:inline-block; width:13px; height:13px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:kcspin .8s linear infinite; vertical-align:-2px}
table.list.revall td.revtext .clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer}
table.list.revall td.revtext .clamp.open{display:block}

/* ── 기록 상세 2단 배치 (2.1) — 왼쪽(AI 요약 · 후기)은 한 흐름으로 스크롤, 오른쪽(특기사항)은 화면에 붙어 따라온다 ── */
.recwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,400px); gap:16px; align-items:start; margin-top:16px}
@media (max-width:980px){ .recwrap{grid-template-columns:1fr} }
.recmain .reccard:first-child, .recside .reccard{margin-top:0}
.recside{position:sticky; top:16px}
.reccard{border-radius:12px; padding:18px 20px}
.infobtn{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--ink-3); cursor:pointer}
.infobtn:hover{background:var(--b50); color:var(--b600)}
.revitem:first-child{border-top:0; padding-top:0; margin-top:0}
.revitem:last-child{padding-bottom:0}
.revno{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:var(--b600); color:#fff; font-size:12px; font-weight:700; font-family:var(--mono)}
.notecard textarea{width:100%; min-height:340px; margin-top:12px; resize:vertical; font:inherit; font-size:14.5px; line-height:1.7; box-sizing:border-box}
.notefoot{display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap}
.notefoot .grow{flex:1}
.notecnt{font-size:12.5px; color:var(--ink-3); font-family:var(--mono)}
.notecnt.dirty{color:var(--warn)}
.sublink{display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--b600); white-space:nowrap; padding:3px 8px; border-radius:6px}
.sublink:hover{background:var(--b50); text-decoration:none}
pre.basistext{max-height:260px; overflow:auto; white-space:pre-wrap; font-size:12.5px; background:var(--fill); padding:12px; border-radius:8px; margin:6px 0 0}

/* 기록 목록 — 글 칸(AI 요약 · 특기사항)은 두 줄까지 */
table.list.recstu td.rectext{white-space:normal; min-width:220px}
table.list.recstu .clamp2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.55; color:var(--ink-2)}
table.list.recstu td, table.list.recstu th{white-space:nowrap}

/* ── 운영 화면 표 가로 스크롤 (2.1) — 화면이 좁으면 표 아래에 얇은 둥근 스크롤 막대 ── */
.hsx{overflow-x:auto; overflow-y:visible; padding-bottom:4px; scrollbar-width:thin; scrollbar-color:var(--b200) transparent}
.hsx::-webkit-scrollbar{height:10px}
.hsx::-webkit-scrollbar-track{background:var(--b25); border-radius:999px; margin:0 4px}
.hsx::-webkit-scrollbar-thumb{background:var(--b200); border-radius:999px; border:2px solid var(--b25); background-clip:padding-box}
.hsx::-webkit-scrollbar-thumb:hover{background:var(--b400); background-clip:padding-box}

/* ── 학생 기록 창 (2.1) — 왼쪽 상세 페이지 | 오른쪽 AI 요약 · 후기 + 특기사항. 양쪽 따로 스크롤 ── */
dialog.recdlg{width:min(1500px, 96vw); height:min(940px, 92vh); max-width:none; max-height:none; padding:0; display:none; flex-direction:column}
dialog.recdlg[open]{display:flex}
dialog.recdlg .modal-h{display:flex; align-items:center; gap:10px; flex:none}
dialog.recdlg .modal-h .x{margin-left:auto}
.recdlg-b{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; border-top:1px solid var(--line-2)}
.recdlg-b iframe{width:100%; height:100%; border:0; background:#fff}
.recdlg-b iframe + iframe{border-left:1px solid var(--line); background:var(--fill)}
@media (max-width:980px){ .recdlg-b{grid-template-columns:1fr; grid-template-rows:1fr 1fr} .recdlg-b iframe + iframe{border-left:0; border-top:1px solid var(--line)} }

/* 창 안의 오른쪽 — 위(AI 요약 · 후기)는 스크롤, 아래(특기사항)는 고정 */
body.embed .wrap.recembed{padding:12px; max-width:none; width:100%; box-sizing:border-box; margin:0}

/* 표 머리의 이동 · 창 아이콘 */
th .thico{margin-right:5px; vertical-align:-2px; color:var(--b500)}

/* 통계 표 머리의 정렬 링크 — 평소에는 다른 머리 글자와 같은 색, 정렬 중인 칸만 파랑 (2.1) */
table.list th a.sorta{color:inherit; text-decoration:none}
table.list th a.sorta:hover{text-decoration:none}
table.list th a.sorta.on{color:var(--b600)}

/* 회원 목록 보기 전환 — 전체 | 묶음 (2.1) */
.mseg.vseg{align-self:center}
.mseg.vseg button{display:inline-flex; align-items:center; gap:5px; height:30px}
.mseg.vseg button svg{opacity:.75}
.mseg.vseg button.on svg{opacity:1; color:var(--b600)}
.mseg.vseg button:disabled{cursor:default; opacity:.5}

/* 학생 기록 창 — 화면의 95% (2.1) */
dialog.recdlg{width:95vw; height:95vh}
.recdlg-b{display:block}
.recdlg-b iframe{display:block}

/* 학생 상세 페이지 — 4분할, 경계선을 끌어 조정 (2.1) */
.quad{--cl:55%; --rl:66.7%; --rr:66.7%; display:flex; height:100vh; background:var(--fill, #F6F7F9)}
.qcol{display:flex; flex-direction:column; min-width:0; min-height:0}
#qL{flex:0 0 var(--cl)} #qR{flex:1 1 0}
#qL > .qtop{flex:0 0 var(--rl)} #qR > .qtop{flex:0 0 var(--rr)}
.qpane{min-height:0; min-width:0; overflow:auto; padding:12px; box-sizing:border-box}
.qbot{flex:1 1 0}
.qpane.qframe{padding:0; overflow:hidden; background:#fff}
.qpane.qframe iframe{display:block; width:100%; height:100%; border:0}
.qpane > .reccard{margin:0; min-height:100%; box-sizing:border-box}
.qgut{flex:none; background:transparent; position:relative; z-index:2; touch-action:none}
.qgut::before{content:''; position:absolute; background:var(--line, #E3E5E8); transition:background .12s}
.qgut.v::before{left:50%; top:0; bottom:0; width:1px}
.qgut.h::before{top:50%; left:0; right:0; height:1px}
.qgut.v{width:8px; margin:0 -4px; cursor:col-resize}
.qgut.h{height:8px; margin:-4px 0; cursor:row-resize}
.qgut:hover::before,.qgut.act::before{background:var(--b500, #3B82F6)}
.qgut.v:hover::before,.qgut.v.act::before{width:3px; margin-left:-1px}
.qgut.h:hover::before,.qgut.h.act::before{height:3px; margin-top:-1px}
body.qdrag{user-select:none}
body.qdrag iframe{pointer-events:none}
.quad .qpane .notecard{display:flex; flex-direction:column; height:100%; min-height:0}
.quad .qpane .notecard textarea{flex:1 1 0; min-height:60px; height:auto; resize:none}
body.embed .wrap.recembed{padding:0}
.wrap.recfull{max-width:none}
.wrap.recfull .quad{height:calc(100vh - var(--top-h, 56px) - 110px); min-height:520px; border:1px solid var(--line, #E3E5E8); border-radius:12px; overflow:hidden; margin-top:12px}
@media (max-width:760px){
  .quad{flex-direction:column; height:auto} .wrap.recfull .quad{height:auto}
  #qL,#qR{flex:none} .qgut{display:none} .qtop.qframe{height:70vh} #qL > .qtop,#qR > .qtop{flex:none}
}

/* 표 안의 이동 링크(아이디 · 문제 · 세트 등) — 마우스를 올리면 오른쪽에 이동 아이콘이 나타난다 (2.1)
   아이콘은 글자 폭에 포함하지 않아(margin-right 음수) 표의 배치가 흔들리지 않는다 */
:where(table.list tbody td a[href]:not(.btn, .iconbtn, .v, [href^="#"], [href^="javascript"], :has(svg)), a.idgo)::after{content:''; display:inline-block; width:13px; height:13px; margin:0 -17px 0 4px; vertical-align:-2px; background:currentColor; opacity:0; transform:translateX(-3px); transition:opacity .12s, transform .12s; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
:where(table.list tbody td a[href], a.idgo):is(:hover, :focus-visible)::after{opacity:1; transform:none}

/* 학생 기록 창 머리 — 이름 · 아이디 · 그룹, 오른쪽에 레이아웃 초기화 (2.1) */
dialog.recdlg .modal-h .recgrp{font-size:13px; color:var(--ink-3, #6B7280); padding:2px 8px; border-radius:6px; background:var(--b25, #F3F6FB)}
dialog.recdlg .modal-h .recreset{margin-left:auto}
dialog.recdlg .modal-h .recreset + .x{margin-left:4px}
dialog.recdlg .modal-h h3{flex:none}
/* 4분할 안에서는 카드 테두리 없이 경계선만으로 구역을 나눈다 (2.1) */
.quad{background:#fff}
.quad .qpane{padding:18px 22px}
.quad .qpane.qframe{padding:0}
.quad .qpane > .reccard{border:0; border-radius:0; box-shadow:none; background:none; padding:0; min-height:0}
.quad .qpane .notecard{height:100%}

/* 표의 문항 번호 — 제목과 같은 문항으로 이동한다. 평소에는 번호 색 그대로, 올리면 파랑 (2.1) */
table.list td a.pnoa{color:inherit; text-decoration:none}
table.list td a.pnoa:hover{color:var(--b600); text-decoration:none}

/* 문제 화면 머리의 공개 여부 단추 (2.1) */
.btn.pubtog{display:inline-flex; align-items:center; gap:4px; padding-left:8px}
.btn.pubtog .eye{width:20px; height:20px; background:transparent}
.btn.pubtog.on{color:#1D4ED8}
.btn.pubtog.off{color:#6B7280}