@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* 바탕: 흰 종이 한 장과 옅은 회색 왼쪽 목록 (Things 3처럼). 상자 대신 여백과 가는 선으로 묶어요 */
  --bg: #FFFFFF;
  --side: #F5F6F8;
  --card: #FFFFFF;
  --sunk: #F5F6F8;
  --foot: #F7F8FA;
  --line: #DADDE2;
  --line2: #E6E8EC;
  --rule: #ECEEF1;
  --border: #D5D9DE;
  /* 글자: 순검정 없이 회색 사다리. --mute2는 꺼진 것·자리표시·글 옆 표시에만 (읽을 글에는 --mute) */
  --ink: #15181C;
  --ink2: #3A3E44;
  --mute: #676C74;
  --mute2: #9AA0A7;
  /* 진한 단추는 화면마다 하나 (초안 쓰기, 저장) */
  --dark: #1F2328;
  --on-dark: #FFFFFF;
  --dark-hover: #33383F;
  --dark-line: #454A52;
  /* 고른 것은 검정 칠 대신 옅은 회색 (왼쪽 목록, 칩, 메뉴) */
  --sel: #DDE0E6;
  --row-sel: #EBEDF1;       /* 회색 글자(--mute)가 이 위에서도 4.5:1 */
  --hover: #F5F6F8;
  --hover-side: #EAECEF;
  --hover-strong: rgba(16, 24, 40, .07);
  --press: rgba(16, 24, 40, .10);         /* 누르는 동안 */
  --hi: #D5DAE1;
  --mid: #EEF0F3;
  --icon: #5D636B;
  --icon-nav: #676C74;
  --focus: #1F2328;
  --focus-halo: rgba(16, 24, 40, .14);
  --pie-idle: #868C94;      /* 영역 색이 없는 진행 원 */
  --rule-strong: #DADDE2;   /* 표의 다섯 줄마다 조금 진한 선 */
  /* 초록은 확정에만 */
  --done: #1E8340;
  --on-done: #FFFFFF;
  --done-glyph: #228F41;    /* 고른 줄(--sel, --row-sel) 위에서도 3:1 */
  --done-hover: #186E35;
  --done-press: #155F2E;
  /* 승인 필요는 주황 ?, 확인 필요는 빨강 ! */
  --ask: #A86C00;           /* 고른 줄(--sel) 위에서도 3:1 */
  --ask-badge: #F2B544;
  --on-ask-badge: #3A2700;
  --attn: #C8243A;
  --attn-badge: #C8243A;
  --on-attn-badge: #FFFFFF;
  /* 영역 색: 담임 파랑, 미술 보라. 영역 아이콘, 진행 원, 영역 이름 글자에만 써요 */
  --home: #2F6BE0;
  --art: #A13DC2;
  --toast: #24282E;
  --on-toast: #FFFFFF;
  --toast-attn: #FF7B72;    /* 알림 띠 위의 빨강 ! */
  --shadow: rgba(16, 24, 40, .12);
  --shadow-card: 0 0 0 1px rgba(16, 24, 40, .08), 0 8px 24px rgba(16, 24, 40, .10);
  --shadow-pop: 0 0 0 1px rgba(16, 24, 40, .08), 0 12px 32px rgba(16, 24, 40, .16);
  --shadow-thumb: 0 1px 2px rgba(16, 24, 40, .12), 0 0 0 1px rgba(16, 24, 40, .04);
  --thumb: #FFFFFF;
  --backdrop: rgba(15, 18, 22, .32);
  --backdrop-photo: rgba(0, 0, 0, .55);
  --glass: rgba(255, 255, 255, .94);
  --ph: #676C74;            /* 입력 칸 안내 글 */
  --sunk-in: #F5F6F8;       /* 떠 있는 판(학생 글, 대화 상자) 안의 회색 판 */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 글자 단계: 크기, 줄 높이, 자간 */
  --fs-meta: 12px;
  --fs-sub: 13px;
  --fs-body: 14px;
  --fs-row: 14px;
  --fs-read: 15px;
  --fs-h3: 15px;
  --fs-h2: 17px;
  --fs-h1: 20px;
  --fs-title: 26px;
  --fs-display: 32px;
  --lh-title: 1.25;
  --lh-head: 1.35;
  --lh-ui: 1.55;
  --lh-read: 1.7;
  --ls-display: -0.03em;
  --ls-title: -0.022em;
  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-h3: -0.01em;
  --ls-row: -0.01em;
  --ls-body: -0.005em;
  --ls-meta: 0;
  --ls-label: 0.02em;
  /* 높이와 간격: 단추 32·28, 입력 칸 32, 아이콘 칸 20 + 10 (왼쪽 목록과 같은 글자 시작선) */
  --ctl: 32px;
  --ctl-sm: 28px;
  --ctl-field: 32px;
  --ic-slot: 20px;
  --ic-gap: 10px;
  --head-gap: 24px;
  --section: 40px;
  --panel-pad: 12px 16px;
  /* 움직임 */
  --dur-1: .12s;
  --dur-2: .18s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r: 12px;
  --r-xl: 16px;
  --detail-w: 460px;
  --side-w: 224px;
  /* 상태 표시 (Fluent 16): 글 상태, 알림, 펼침 */
  --g-queued: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Zm6-7a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 3.5a.5.5 0 0 0-1 0v4c0 .28.22.5.5.5h3a.5.5 0 0 0 0-1H8V4.5Z'/%3E%3C/svg%3E");
  --g-writing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Zm0 1a5 5 0 1 1 0 10A5 5 0 0 1 8 3ZM7 8H5.5a.5.5 0 0 0-.5.41V10a.5.5 0 0 0 1 .1V9.75a2.67 2.67 0 0 0 3.92.09.5.5 0 0 0-.72-.7A1.66 1.66 0 0 1 6.67 9H7a.5.5 0 0 0 .09-1h-.1Zm1-2.67c-.74 0-1.43.3-1.93.83a.5.5 0 1 0 .73.69A1.66 1.66 0 0 1 9.33 7H9a.5.5 0 0 0-.09 1h1.59a.5.5 0 0 0 .5-.41V6a.5.5 0 0 0-1-.09v.33c-.5-.56-1.21-.9-2-.9Z'/%3E%3C/svg%3E");
  --g-draft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Zm0-1A5 5 0 1 1 8 3a5 5 0 0 1 0 10Z'/%3E%3C/svg%3E");
  --g-edited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0ZM3 8h10A5 5 0 0 0 3 8Z'/%3E%3C/svg%3E");
  --g-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 8.5A.75.75 0 1 0 8 12a.75.75 0 0 0 0-1.5Zm0-6a2 2 0 0 0-2 2 .5.5 0 0 0 1 0 1 1 0 0 1 2 0c0 .37-.08.58-.37.9l-.11.12-.27.27c-.54.57-.75.98-.75 1.71a.5.5 0 0 0 1 0c0-.37.08-.58.37-.9l.11-.12.27-.27c.54-.57.75-.98.75-1.71a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E");
  --g-attn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 8a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0-5.5a.5.5 0 0 0-.5.41V8.59a.5.5 0 0 0 1 0V4.91A.5.5 0 0 0 8 4.5Z'/%3E%3C/svg%3E");
  --g-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm9.85-1.15a.5.5 0 0 0-.7-.7l-2.9 2.9-1.4-1.4a.5.5 0 1 0-.7.7L6.9 10.1c.2.2.5.2.7 0l3.25-3.25Z'/%3E%3C/svg%3E");
  --g-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 7.5a.5.5 0 1 0-1 0v3a.5.5 0 0 0 1 0v-3Zm.25-2a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1ZM2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8Z'/%3E%3C/svg%3E");
  --g-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.65 3.15a.5.5 0 0 0 0 .7L9.79 8l-4.14 4.15a.5.5 0 0 0 .7.7l4.5-4.5a.5.5 0 0 0 0-.7l-4.5-4.5a.5.5 0 0 0-.7 0Z'/%3E%3C/svg%3E");
  --g-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z'/%3E%3C/svg%3E");
  --g-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.6.6 0 0 1-.84-.02L2.4 9.1a.5.5 0 0 1 .72-.7l2.4 2.44 7.65-7.2a.5.5 0 0 1 .7.02Z'/%3E%3C/svg%3E");
  --g-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.25 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM6 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8 9a.75.75 0 1 0 0-1.5A.75.75 0 0 0 8 9Zm.75 1.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm2-1.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM14 4.5A2.5 2.5 0 0 0 11.5 2h-7A2.5 2.5 0 0 0 2 4.5v7A2.5 2.5 0 0 0 4.5 14h7a2.5 2.5 0 0 0 2.5-2.5v-7ZM3 6h10v5.5c0 .83-.67 1.5-1.5 1.5h-7A1.5 1.5 0 0 1 3 11.5V6Zm1.5-3h7c.83 0 1.5.67 1.5 1.5V5H3v-.5C3 3.67 3.67 3 4.5 3Z'/%3E%3C/svg%3E");
  /* 고르기 상자의 펼침 표시: 가면이 아니라 배경 그림이라 색을 넣어 두고, 다크에서 바꿔요 */
  --g-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23676C74' d='M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z'/%3E%3C/svg%3E");
}

/* 다크 모드: 설정에서 고르거나(이 기기에만 저장), '기기 설정'이면 컴퓨터·휴대폰의 밝기 모드를 따라감 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #23262B;
  --side: #1C1F24;
  --card: #2C3035;
  --sunk: #2A2D32;
  --foot: #282B30;
  --line: #474B52;
  --line2: #393D43;
  --rule: #33363C;
  --border: #50555D;
  --ink: #F2F4F7;
  --ink2: #CDD0D5;
  --mute: #A3A8AF;
  --mute2: #6E737B;
  --dark: #DCDFE4;
  --on-dark: #15181C;
  --dark-hover: #F2F4F7;
  --dark-line: #C9CDD3;
  --sel: #3B3F45;
  --row-sel: #34383E;
  --hover: #2A2D32;
  --hover-side: #26292E;
  --hover-strong: rgba(255, 255, 255, .08);
  --press: rgba(255, 255, 255, .12);
  --hi: #4D525A;
  --mid: #363A40;
  --icon: #B0B5BC;
  --icon-nav: #A3A8AF;
  --focus: #F2F4F7;
  --focus-halo: rgba(255, 255, 255, .16);
  --pie-idle: #6E737B;
  --rule-strong: #3E4248;
  --done: #45B862;
  --on-done: #0E1A12;
  --done-glyph: #4CC46A;
  --done-hover: #55C771;
  --done-press: #63CF7E;
  --ask: #F0B54A;
  --ask-badge: #F0B54A;
  --on-ask-badge: #2A1C00;
  --attn: #FF7B72;
  --attn-badge: #D1383F;
  --on-attn-badge: #FFFFFF;
  --home: #7AA3FF;
  --art: #D58CEC;
  --toast: #3D4249;
  --on-toast: #F2F4F7;
  --toast-attn: #FF8A82;  /* 어두운 알림 띠(#3D4249) 위에서 4.4:1 */
  --shadow: rgba(0, 0, 0, .45);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 40px rgba(0, 0, 0, .55);
  --shadow-thumb: 0 0 0 1px rgba(255, 255, 255, .06);
  --thumb: #4A4F57;
  --backdrop: rgba(0, 0, 0, .55);
  --backdrop-photo: rgba(0, 0, 0, .55);
  --glass: rgba(35, 38, 43, .94);
  --ph: #959AA1;
  --sunk-in: #1E2126;
  --g-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A3A8AF' d='M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #23262B;
    --side: #1C1F24;
    --card: #2C3035;
    --sunk: #2A2D32;
    --foot: #282B30;
    --line: #474B52;
    --line2: #393D43;
    --rule: #33363C;
    --border: #50555D;
    --ink: #F2F4F7;
    --ink2: #CDD0D5;
    --mute: #A3A8AF;
    --mute2: #6E737B;
    --dark: #DCDFE4;
    --on-dark: #15181C;
    --dark-hover: #F2F4F7;
    --dark-line: #C9CDD3;
    --sel: #3B3F45;
    --row-sel: #34383E;
    --hover: #2A2D32;
    --hover-side: #26292E;
    --hover-strong: rgba(255, 255, 255, .08);
    --press: rgba(255, 255, 255, .12);
    --hi: #4D525A;
    --mid: #363A40;
    --icon: #B0B5BC;
    --icon-nav: #A3A8AF;
    --focus: #F2F4F7;
    --focus-halo: rgba(255, 255, 255, .16);
    --pie-idle: #6E737B;
    --rule-strong: #3E4248;
    --done: #45B862;
    --on-done: #0E1A12;
    --done-glyph: #4CC46A;
    --done-hover: #55C771;
    --done-press: #63CF7E;
    --ask: #F0B54A;
    --ask-badge: #F0B54A;
    --on-ask-badge: #2A1C00;
    --attn: #FF7B72;
    --attn-badge: #D1383F;
    --on-attn-badge: #FFFFFF;
    --home: #7AA3FF;
    --art: #D58CEC;
    --toast: #3D4249;
    --on-toast: #F2F4F7;
    --toast-attn: #FF8A82;  /* 어두운 알림 띠(#3D4249) 위에서 4.4:1 */
    --shadow: rgba(0, 0, 0, .45);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .09), 0 16px 40px rgba(0, 0, 0, .55);
    --shadow-thumb: 0 0 0 1px rgba(255, 255, 255, .06);
    --thumb: #4A4F57;
    --backdrop: rgba(0, 0, 0, .55);
    --backdrop-photo: rgba(0, 0, 0, .55);
    --glass: rgba(35, 38, 43, .94);
    --ph: #959AA1;
    --sunk-in: #1E2126;
    --g-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23A3A8AF' d='M3.15 5.65c.2-.2.5-.2.7 0L8 9.79l4.15-4.14a.5.5 0 0 1 .7.7l-4.5 4.5a.5.5 0 0 1-.7 0l-4.5-4.5a.5.5 0 0 1 0-.7Z'/%3E%3C/svg%3E");
}
}
/* 좁은 화면은 제목과 묶음 사이를 조금 좁게, 손가락으로 쓰는 휴대폰은 단추 40·36, 입력 칸 44, 줄 제목 16 */
@media (max-width: 820px) { :root { --fs-title: 24px; --head-gap: 16px; --section: 32px; } }
@media (max-width: 900px) and (pointer: coarse) { :root { --ctl: 40px; --ctl-sm: 36px; --ctl-field: 44px; --fs-row: 16px; } }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }  /* 아이폰을 눕혀도 글자를 키우지 않게 */  /* 휴대폰에서 누를 때 브라우저의 회색 네모 대신 단추마다의 누름 색 */
body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.55 var(--font);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  /* 한글은 낱말 중간에서 줄을 바꾸지 않게 (아주 긴 주소 같은 것만 잘라서) */
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 작은 글은 어디서나 12px (브라우저 기본 'smaller'는 12px 글 안에서 10px까지 줄어요) */
small { font-size: var(--fs-meta); }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 스크롤 판 가장자리에 붙은 줄은 안쪽 테두리로 (바깥 테두리가 잘리지 않게) */
.rrow-head:focus-visible, .nav-item:focus-visible, .nav-more > summary:focus-visible, .nav-more-btn:focus-visible, .act-head:focus-visible, .att:focus-visible, .person:focus-visible { outline-offset: -2px; }
/* 알약·세그먼트 칸은 고리를 테두리에 붙여요 (옆 칸과 겹치지 않게) */
:is(.seg button, .cls-tab, .pop-opts .lv, .area-switch, .filter, .tab):focus-visible { outline-offset: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; line-height: var(--lh-head); }
/* 숫자는 글자 폭 그대로(8.17.–11.1.이 벌어지지 않게), 세로로 맞춰 읽는 번호·개수만 같은 폭 */
.grid .c-no, .person .no, .block-foot .count, .draft-meta, .note-head time, .m-date, .act-head small, .badge, .nav-item .meta, #badge-settings,
.exp-head .no, .steps li::before, .frac, .cnt { font-variant-numeric: tabular-nums; }
/* 자간: 칸 머리·이름표는 조금 넓게(12/500 회색), 작은 글은 0, 줄 제목은 조금 좁게 */
.grid th, .roles-grid th, .exp-head, .label { letter-spacing: var(--ls-label); font-weight: 500; color: var(--mute); }
.field > span, .hints legend { letter-spacing: var(--ls-label); font-weight: 500; color: var(--ink2); }
small, .hint, time, .grid-foot, .side-foot, .pill, .bytes, .nr-bytes { letter-spacing: var(--ls-meta); }
.person .nm, .rrow-head .nm { letter-spacing: var(--ls-row); }
/* 이름 뒤의 기간(전반기, 2학기): 회색 보통 굵기 */
:is(.title, .now-name, .todo-name, .task-chip .nm, .nav-item .nm) small { font-weight: 400; color: var(--mute); letter-spacing: 0; }
/* 글자 단계 (Things처럼 크기 차이를 크게, 굵기는 400·500·600·700만):
   페이지 제목 26/700 · 묶음 제목 15/700 + 아래 가는 선 · 카드 제목 17/700 · 본문 14 · 보조 13 · 작은 글 12 */
.sec-head h2, .brief-head h2, .set-head h3, .review-group-head h2, .roles-duties h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.section h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.spacer { flex: 1; }
.mute { color: var(--mute); }
p, .board-note, .issues li, .notice { text-wrap: pretty; }

/* 아이콘 (Fluent, 칠한 모양) */
.ic { flex: none; fill: currentColor; display: block; }
.ic.f { display: none; }
[aria-current=true] > .nav-ic > .ic.r, [aria-current=true] > .ic.r, [aria-expanded=true] > .ic.r { display: none; }
[aria-current=true] > .nav-ic > .ic.f, [aria-current=true] > .ic.f, [aria-expanded=true] > .ic.f { display: block; }

/* 진행 원: 고리 + 틈 + 12시부터 차는 조각. 모두 확정이면 초록 체크 원 */
.pie { display: block; flex: none; color: var(--pie-idle); }  /* 영역 색을 따로 주지 않은 원은 회색 */
.pie-ring { fill: none; stroke: currentColor; }
.pie-wedge { fill: currentColor; }
.pie-disc { fill: var(--done-glyph); }
.pie-check { fill: none; stroke: var(--on-done); stroke-linecap: round; stroke-linejoin: round; }

/* 공통 요소 ------------------------------------------------------- */
.label { font-size: 12px; }
/* 단추: 8px 둥근 네모 (칩·숫자 배지만 알약 모양) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl); padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--card); color: var(--ink2);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn .ic { color: var(--icon); }
/* 마우스를 올리면 한 단계 진한 회색 (어두운 화면에서 판 색보다 어두운 --hover는 단추 위에서 안 보여요) */
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--mid); color: var(--ink); } }
.btn.sm { height: var(--ctl-sm); padding: 0 10px; font-size: 13px; gap: 5px; border-radius: var(--r-sm); }
a.btn { text-decoration: none; }
.btn.icon { width: var(--ctl); padding: 0; }
.btn.sm.icon { width: var(--ctl-sm); }
.btn.primary { background: var(--dark); color: var(--on-dark); border-color: var(--dark); font-weight: 600; }
.btn.primary .ic { color: inherit; }
@media (hover: hover) { .btn.primary:hover:not(:disabled) { background: var(--dark-hover); border-color: var(--dark-hover); color: var(--on-dark); } }
/* 확정: 앱에서 하나뿐인 초록 단추 (체크 + 확정) */
.btn.accent { background: var(--done); color: var(--on-done); border-color: var(--done); font-weight: 600; padding: 0 16px 0 12px; }
.btn.accent .ic { color: inherit; }
@media (hover: hover) { .btn.accent:hover:not(:disabled) { background: var(--done-hover); border-color: var(--done-hover); color: var(--on-done); } }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink2); }
@media (hover: hover) { .btn.ghost:hover:not(:disabled) { background: var(--hover-strong); } }
.btn.danger { color: var(--attn); }
/* 줄마다 붙는 지우기·끊기는 평소엔 흐리게, 손을 올리면 빨강 (빨강은 정말 확인할 것에만) */
.btn.ghost.danger { color: var(--mute); }
@media (hover: hover) { .btn.ghost.danger:hover:not(:disabled) { color: var(--attn); background: var(--hover-strong); } }
/* 꺼진 단추: 흐린 판 대신 옅은 테두리와 회색 글자 (진한 단추·확정은 회색 판, 연한 민트가 되지 않게) */
.btn:disabled { cursor: default; background: var(--card); border-color: var(--line2); color: var(--mute2); }
.btn:disabled .ic { color: var(--mute2); }
.btn.ghost:disabled { background: transparent; border-color: transparent; color: var(--mute2); }
.btn:is(.primary, .accent):disabled { background: var(--mid); border-color: var(--mid); color: var(--mute2); }

.split { display: inline-flex; }
.split .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); padding-right: 12px; }
.split .btn.more { border-radius: 0 var(--r-md) var(--r-md) 0; width: 30px; padding: 0; border-left: 1px solid var(--dark-line); }
.split .btn.more:not(.primary) { border-left: 0; width: 30px; }
.split .btn:not(.primary):first-child { padding-right: 10px; }
/* 진한 단추 안의 초점 고리는 안쪽 흰 선, 보통 단추는 안쪽 2px (둘이 붙어 있어 바깥 고리는 옆 단추에 잘려요) */
.split .btn.primary:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -4px; }
.split .btn:not(.primary):focus-visible { outline-offset: -2px; }
.split .btn.more.primary[aria-expanded=true] { background: var(--dark-hover); border-color: var(--dark-hover); }
/* 활동 카드·문체 예시·나이스 입력 탭, 학생 글을 연 동안에는 그쪽 단추가 주인공: 위의 초안 쓰기는 보통 단추로 (한 화면에 검정 단추 하나) */
#view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.primary { background: var(--card); color: var(--ink2); border-color: var(--border); font-weight: 500; }
#view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.more.primary { border-left: 0; }
@media (hover: hover) { #view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.primary:hover:not(:disabled) { background: var(--mid); color: var(--ink); border-color: var(--border); } }
#view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.primary:focus-visible { outline-color: var(--focus); outline-offset: -2px; }
#view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.more.primary[aria-expanded=true] { background: var(--mid); }
/* 누르는 동안: 단추는 한 단계 진하게, 테두리 없는 것은 지금 색 위에 옅은 회색을 한 겹(고른 알약·상 칸도 더 진하게), 줄·목록은 고른 것의 회색.
   바로 바뀌고 뗄 때만 천천히 */
.btn:not(.ghost, .icon-more):active:not(:disabled) { background: var(--hi); transition-duration: 0s; }
.btn.primary:active:not(:disabled) { background: var(--dark-hover); border-color: var(--dark-hover); }
.btn.accent:active:not(:disabled) { background: var(--done-press); border-color: var(--done-press); }
#view-board:is(:has(#task-page:not([hidden])), :has(.main.has-detail)) .split .btn.primary:active:not(:disabled) { background: var(--hi); border-color: var(--border); }
:is(.btn.ghost, .icon-more, .filter, .tab, .cls-tab, .area-switch, .lv, .draft-cell, .act-head, .seg button, .memo-btn, button.pill, .text-btn):active:not(:disabled) { background-image: linear-gradient(var(--press), var(--press)); transition-duration: 0s; }
:is(.nav-item, .person, .rrow-head, a.brief-line, .now-row:has(.now-name:active), .task-chip, .nr-chip, .cls-progress, .menu button, .menu a):active { background: var(--sel); transition-duration: 0s; }
/* 기다리는 동안(확정, 다시 쓰기, 초안 쓰기): 다시 누를 수 없고, 0.15초 넘게 걸리면 글자 뒤에 도는 표시 */
.btn[aria-busy=true] { pointer-events: none; cursor: progress; }
.btn[aria-busy=true]::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: 2px; background: currentColor;
  -webkit-mask: var(--g-writing) center / 16px no-repeat; mask: var(--g-writing) center / 16px no-repeat;
  animation: fade-in var(--dur-1) ease-out .15s both, spin 1.2s linear infinite;
}

textarea, input[type=text], input[type=password], input[type=url] {
  width: 100%; border: 1px solid var(--border); background: var(--card);
  border-radius: var(--r-md); padding: 7px 11px; font-size: 14px; line-height: 1.6;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
textarea { resize: vertical; min-height: 40px; }
textarea:focus, input:focus { outline: none; border-color: var(--ink2); box-shadow: 0 0 0 3px var(--focus-halo); }
textarea:disabled { background: var(--sunk); color: var(--mute); }
::placeholder { color: var(--ph); }
/* 떠 있는 판 안의 회색 판은 어두운 화면에서 한 단계 더 어둡게 (판과 같은 밝기가 되어 사라지지 않게),
   마우스를 올린 줄은 판보다 한 단계 밝게. 휴대폰의 학생 글은 바탕 그대로라 바탕의 색을 따라요 */
:is(dialog, .pop, .menu) { --sunk: var(--sunk-in); --hover: var(--hover-strong); }
@media (min-width: 901px) { .detail { --sunk: var(--sunk-in); --hover: var(--hover-strong); } }
@media (min-width: 821px) { .people .detail { --sunk: var(--sunk-in); --hover: var(--hover-strong); } }  /* 학생별 보기의 판은 821px까지 떠 있어요 */

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mute2); flex: none; }
.dot.on { background: var(--mute); }  /* 연결됨: 초록은 확정에만 써요 */
.dot.off { background: var(--attn); }

kbd {
  font: 500 12px/1 var(--font); padding: 2px 5px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--card); color: var(--ink2);
}

/* 세그먼트 (상 중 하, 씀·안 씀, 반 고르기): 회색 홈에 흰 손잡이 */
.seg { display: inline-flex; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line2); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: transparent; border-radius: var(--r-sm); height: 26px; min-width: 40px; padding: 0 12px;
  font-size: 13px; font-weight: 500; color: var(--mute);
}
@media (hover: hover) { .seg button:hover { color: var(--ink); } }
.seg button[aria-pressed=true] { background: var(--thumb); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-thumb); }
.seg.sm button { height: 24px; min-width: 32px; padding: 0 9px; font-size: 12px; }
.seg button[data-v="불참"][aria-pressed=true] { color: var(--ink2); }

/* 로그인 ---------------------------------------------------------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login form { width: 100%; max-width: 340px; display: grid; gap: 14px; }
.login h1 { margin: 14px 0 2px; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.login p { margin: 0; color: var(--mute); font-size: 13px; }
.login .login-sub { margin-bottom: 18px; font-size: 15px; color: var(--ink2); }
.login-mark { display: block; fill: currentColor; }  /* 로고는 글자색을 따라 밝은·어두운 화면에 맞춰요 */
.login .err { color: var(--attn); min-height: 20px; font-size: 13px; }
.login :is(input, .btn) { height: 40px; }

/* 왼쪽 목록 (Things의 옆 목록: 옅은 회색 판, 고른 줄은 회색 둥근 칸) ---------------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.content { min-width: 0; }
.side {
  position: sticky; top: 0; height: 100vh; z-index: 6; display: flex; flex-direction: column;
  background: var(--side); border-right: 1px solid var(--line2);
}
.side-head { display: flex; align-items: center; gap: 8px; padding: 16px 10px 12px 16px; }
/* 새김 글자는 목록 글자와 같은 x=46에서 시작 (16 + 표시 22 + 8) */
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; fill: currentColor; }
/* + 메모: 검정 알약 대신 조용한 글자 단추 */
.memo-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink2); font-size: 13px; font-weight: 500;
  transition: background-color var(--dur-1) var(--ease);
}
.memo-btn .ic { color: var(--icon); }
@media (hover: hover) { .memo-btn:hover { background: var(--hover-side); color: var(--ink); } }
.nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 14px; display: grid; gap: 16px; align-content: start; }
.nav-group { display: grid; gap: 1px; }
.nav-areas { display: grid; gap: 16px; }
.nav-areas:empty { display: none; }
.nav-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--icon-nav); }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px;
  padding: 0 8px; border-radius: var(--r-sm); font-size: 14px; font-weight: 400; color: var(--ink2); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) { .nav-item:hover { background: var(--hover-side); color: var(--ink); } }
.nav-item[aria-current=true] { background: var(--sel); color: var(--ink); font-weight: 600; }
.nav-item[aria-current=true] .nav-ic { color: var(--ink); }
/* 고른 줄의 작은 글(전반기, 개수)은 회색 바닥 위에서도 읽히게 한 단계 진하게 */
.nav-item[aria-current=true] :is(.nm small, .meta), .nav-item[aria-current=true] #badge-settings { color: var(--ink2); }
.nav-item .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nm small { margin-left: 6px; }
.nav-item .meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--mute); }
.nav-item .badge { margin-left: auto; }
/* 담임·미술 묶음: 영역 색 아이콘 + 굵은 이름 (Things의 영역 머리), 그 아래 업무는 같은 칸에 진행 원 */
.nav-area { position: relative; }
.nav-area-head { display: flex; align-items: center; gap: 10px; padding: 0 8px; min-height: 32px; }
.nav-area-head b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.nav-area-head em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--mute); }
.nav-item.task[aria-current=true] .pie { color: var(--a); }
.nav-item.past { color: var(--mute); }
.nav-item.past[aria-current=true] { color: var(--ink); }
/* 업무 줄 오른쪽 표시: 승인 필요는 주황 ?, 확인 필요는 빨강 ! (색만으로 나누지 않게 모양도 달라요) */
.ndot { display: block; width: 16px; height: 16px; background: var(--attn); -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat; }
.ndot.ask { background: var(--ask); -webkit-mask-image: var(--g-ask); mask-image: var(--g-ask); }
.nav-more > summary, .nav-more-btn {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 8px;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--mute);
}
.nav-more > summary::-webkit-details-marker { display: none; }
:is(.nav-more > summary, .nav-more-btn) .ic { color: var(--icon-nav); transition: transform var(--dur-2) var(--ease); }
.nav-more[open] > summary .ic { transform: rotate(90deg); }
@media (hover: hover) { :is(.nav-more > summary, .nav-more-btn):hover { color: var(--ink); background: var(--hover-side); } }
/* 낮은 PC 창: 다른 기간은 옆에 뜨는 메뉴로 (펼치지 않아 목록이 넘치지 않아요). 연 동안, 지금 업무가 그 안에 있을 때는 회색 칠 */
.nav-more-btn { width: 100%; border: 0; background: transparent; text-align: left; }
.nav-more-btn[aria-expanded=true] { background: var(--hover-side); color: var(--ink); }
.nav-more-btn.has-current { background: var(--sel); color: var(--ink); font-weight: 600; }
.nav-more-btn.has-current .ic { color: var(--ink); }
.menu-task b small { margin-left: 6px; font-weight: 400; }
.menu-task[aria-current=true] b { font-weight: 700; }
/* 작은 펼침 글: 앞에 꺾쇠, 펼치면 아래로 */
.act-more > summary, .acts-help > summary, .brief-rest > summary, .set-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.act-more > summary::-webkit-details-marker, .acts-help > summary::-webkit-details-marker,
.brief-rest > summary::-webkit-details-marker, .set-more > summary::-webkit-details-marker { display: none; }
.act-more > summary::before, .acts-help > summary::before, .brief-rest > summary::before, .set-more > summary::before,
.all-tasks > summary::before, .issues li details > summary::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--g-chev) center / 16px no-repeat; mask: var(--g-chev) center / 16px no-repeat; transition: transform var(--dur-2) var(--ease);
}
.act-more[open] > summary::before, .acts-help[open] > summary::before,
.brief-rest[open] > summary::before, .set-more[open] > summary::before, .issues li details[open] > summary::before { transform: rotate(90deg); }
.nav-more .nav-item.task { margin-left: 0; }
/* 안에서 스크롤되는 판은 얇은 스크롤 막대 (Windows 기본 막대는 17px로 굵어요) */
.nav, .grid-scroll, .detail, .people-list, .gcal-list, .events-body, .attend-grid, dialog, textarea { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.side-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 14px; border-top: 1px solid var(--line2); }
.side-foot #btn-logout { display: none; }
.bottom-bar { display: none; }
/* 영역 색 이어받기 */
.area-home { --a: var(--home); }
.area-art { --a: var(--art); }
#view-board[data-area=home] { --a: var(--home); }
#view-board[data-area=art] { --a: var(--art); }
.area-ic { color: var(--a); }
.area-tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--a); font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
}
.area-tag.sm { font-size: 12px; gap: 4px; }
.area-head { display: flex; align-items: center; gap: var(--ic-gap); min-height: 28px; }
.area-head h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.area-head small { font-size: var(--fs-meta); font-weight: 400; color: var(--mute); }
/* 숫자 배지: 글 검토는 주황 알약(승인 필요 수), 관찰 메모는 빨강 알약(확인할 메모). 둘뿐이에요 */
.badge {
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--attn-badge); color: var(--on-attn-badge);
  font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; letter-spacing: 0; line-height: 1;
}
.badge.ask { background: var(--ask-badge); color: var(--on-ask-badge); }
#badge-settings { background: transparent; color: var(--mute); font-weight: 600; padding: 0 2px; }
/* 옮겨 다니는 것(업무 거르기, 설정 바로가기, 상태 칩, 반, 영역)은 모두 회색 알약: 고른 것만 회색 칠 + 진한 글자.
   흰 손잡이 세그먼트(.seg)는 값을 고를 때만 (상·중·하, 화면 밝기) */
:is(.tab, .filter) {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--mute); white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (hover: hover) { :is(.tab, .filter):hover { background: var(--hover-strong); color: var(--ink); } }
:is(.tab, .filter):is([aria-pressed=true], [aria-current=true]) { background: var(--sel); color: var(--ink); font-weight: 600; }
.conn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px;
  border: 0; background: transparent; font-size: 12px; font-weight: 500; color: var(--mute); max-width: 260px;
}
.pill .txt { overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { button.pill:hover { background: var(--hover-side); color: var(--ink); } }
.pill.busy { color: var(--ink); }
.pill.busy .dot { background: var(--ink2); animation: pulse 2s ease-in-out infinite; }  /* 깜빡이지 않고 천천히 숨 쉬듯 */
@keyframes pulse { 50% { opacity: .4; } }

/* 업무 머리 (Things의 프로젝트 머리): 진행 원 · 이름 · •••, 아래 영역과 기간·마감 한 줄, 화면 탭, 반 · 상태 칩 ------------- */
.bar { display: grid; gap: 12px; padding: 24px 32px 12px; }
.bar-top { display: flex; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
.bar-titles { display: grid; gap: 4px; min-width: 0; flex: 1 1 340px; justify-items: start; }
.title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.title-ic { flex: none; width: 28px; display: grid; place-items: center; color: var(--ink2); }
.title-pie { color: var(--a, var(--mute)); }
.title-pie .pie { color: var(--a, var(--mute)); }
.title-pie:empty { display: none; }
/* Every item carries its "·" in front; the first 16px of the line box is clipped,
   so a dot that lands at the start of a wrapped line disappears. */
.bar-sub { margin: 0 0 0 -16px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 13px; color: var(--mute); clip-path: inset(0 0 0 16px); }
.bar-sub > *::before { content: "·"; display: inline-block; width: 16px; text-align: center; color: var(--mute2); font-weight: 400; }
.bar-sub .area-name { color: var(--a); font-weight: 600; }
.bar-sub .due { color: var(--ink2); }
.bar-sub .due.hot { color: var(--attn); font-weight: 600; }
.bar-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.bar .views { margin-top: 2px; }
.views .rtab { cursor: pointer; }
.icon-more { width: 32px; padding: 0; border-color: transparent; background: transparent; }
.icon-more .ic { color: var(--icon-nav); }
@media (hover: hover) { .icon-more:hover:not(:disabled) { background: var(--hover-strong); } }
/* 업무 이름 바로 뒤의 •••: 가끔 하는 일(학생 추가, 임원, SEAC)은 제목에 붙여 두고, 오른쪽에는 초안 쓰기만 */
.title-row .icon-more { width: 28px; height: 28px; margin-left: 2px; flex: none; }
/* 메뉴를 연 동안에는 연 단추에 회색 바닥 */
.icon-more[aria-expanded=true], .btn.ghost[aria-expanded=true] { background: var(--hover-strong); }
.icon-more[aria-expanded=true] .ic { color: var(--ink); }
/* 상태 칩 (Things의 태그 줄): 알약 모양, 앞에 상태 표시, 고르면 옅은 회색 */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.filter b { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.filter[aria-pressed=true] b { color: var(--ink); }
.filter.zero { color: var(--mute); }
.filter.zero b { color: var(--mute); font-weight: 500; }
.filter:not(.f-all):not(.f-none)::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: -2px; background: var(--g-c, var(--mute));
  -webkit-mask: var(--g) center / 16px no-repeat; mask: var(--g) center / 16px no-repeat;
}
.filter.zero::before { opacity: .45; }
.f-approve { --g: var(--g-ask); --g-c: var(--ask); }
.f-check { --g: var(--g-attn); --g-c: var(--attn); }
.f-busy { --g: var(--g-writing); }
.f-draft { --g: var(--g-draft); }
.f-edited { --g: var(--g-edited); --g-c: var(--ink2); }
.f-confirmed { --g: var(--g-done); --g-c: var(--done-glyph); }
.filters small { flex: none; white-space: nowrap; font-size: 12px; margin-left: 6px; }
.title { font-size: var(--fs-title); font-weight: 700; letter-spacing: var(--ls-title); line-height: var(--lh-title); }
.title small { margin-left: 8px; font-size: var(--fs-h1); }
/* 반 고르기 · 담임·미술 고르기: 상태 칩과 같은 회색 알약 (홈과 흰 손잡이 없이) */
.classes, .roles-switch { flex: none; display: inline-flex; gap: 2px; padding: 0; background: transparent; box-shadow: none; }
.classes:empty { display: none; }
.cls-tab, .area-switch {
  display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  font-size: var(--fs-sub); font-weight: 500; color: var(--mute); text-decoration: none; white-space: nowrap; box-shadow: none;
}
.cls-tab { font-variant-numeric: tabular-nums; }
@media (hover: hover) { :is(.cls-tab, .area-switch):not([aria-current=true]):hover { background: var(--hover-strong); color: var(--ink); } }
.cls-tab[aria-current=true], .area-switch[aria-current=true] { background: var(--sel); color: var(--ink); font-weight: 600; box-shadow: none; }
/* 반과 상태 칩 사이는 세로 선 하나로 나눠요 */
.bar-row .classes:not(:empty) + .filters { margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line2); }
a.warn { color: var(--mute); text-decoration: none; }
@media (hover: hover) { a.warn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* 본문: 표 + 상세 -------------------------------------------------- */
.main {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  padding: 0 32px 24px; align-items: start;
}
.main.has-detail { grid-template-columns: minmax(0, 1fr) var(--detail-w); }
.main:not(.has-detail) .detail { display: none; }
/* 상자는 쓰지 않아요: 흰 바탕 위에 여백과 가는 선으로만 묶고, 떠 있는 것은 학생 창·메뉴뿐 */
.card { background: transparent; border: 0; border-radius: 0; }

.grid-card { overflow: hidden; border-top: 0; }
.grid-scroll { overflow: auto; max-height: calc(100vh - 150px); scroll-padding-left: 150px; scroll-padding-top: 56px; }  /* 번호·이름 칸과 머리줄에 가리지 않게 (JS가 실제 폭으로 다시 맞춤) */
.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.grid th {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  height: 48px; padding: 0 6px; font-size: 12px;
  border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap;
}
.grid th small { display: block; font-size: 12px; color: var(--mute); font-weight: 400; margin-top: 1px; }
.grid td { height: 38px; padding: 0 4px; border-bottom: 1px solid var(--rule); text-align: center; background: var(--bg); }
/* 다섯 줄마다 조금 진한 선: 25명을 가로로 훑어도 줄을 잃지 않게 (줄무늬 대신) */
.grid tbody tr:nth-child(5n) td { border-bottom-color: var(--rule-strong); }
.grid tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { .grid tbody tr:hover td { background: var(--hover); } }
/* 손가락으로 누르는 동안만 줄 전체를 옅게 (마우스로 수준을 누를 때마다 줄이 깜빡이지 않게). 고정 칸이 비치지 않게 바탕 위에 겹쳐요 */
@media (hover: none) { .grid tbody tr:active td { background: linear-gradient(var(--press), var(--press)) var(--bg); } }
/* 열어 둔 학생 줄: 옆 막대 없이 회색 둥근 띠 하나 (위아래 선도 지워 한 덩어리로) */
.grid tbody tr[aria-current=true] td { background: var(--row-sel); border-bottom-color: transparent; }
.grid tbody tr:has(+ tr[aria-current=true]) td { border-bottom-color: transparent; }
.grid tbody tr[aria-current=true] td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.grid tbody tr[aria-current=true] td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grid tbody tr[aria-current=true] .name { font-weight: 600; }

.grid .c-no { width: 44px; color: var(--mute); font-size: 12px; position: sticky; left: 0; z-index: 1; }
/* 번호 칸이 좁아지면 고정된 이름 칸이 옆 칸(전체 수준)을 가려요. 칸 안에 받침을 둬서 48px(받침 36px + 머리칸 여백 12px)로 고정 */
.grid .c-no::before { content: ""; display: block; width: 36px; height: 0; }
/* left는 번호 칸 폭과 같게: 다르면 표를 밀 때 이름 칸이 움찔해요 */
.grid .c-name { position: sticky; left: 48px; z-index: 1; text-align: left; min-width: 92px; }
/* 오른쪽 칸이 열려 좁을 때는 이름 칸을 조금 줄여서 활동 칸이 초안 칸 밑으로 덜 숨게 */
.main.has-detail .grid .c-name { min-width: 80px; }
/* 표를 옆으로 밀었을 때만 이름 칸 오른쪽에 경계선 */
.grid-scroll.more-left .grid .c-name { box-shadow: inset -1px 0 0 var(--line), 8px 0 8px -8px var(--shadow); }
.grid th.c-no, .grid th.c-name { z-index: 3; }
.grid th.c-name { text-align: left; padding-left: 10px; }
/* 칸 묶음은 세로선 대신 여백으로 나눠요 */
.grid .c-lv { width: 64px; padding-right: 14px; }
.grid .c-act { min-width: 100px; }
.grid .c-works { width: 54px; padding-left: 14px; color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 글 첫머리: 남는 폭을 모두 쓰고 한 줄로 자름. 오른쪽 칸이 열리거나 좁은 화면에서는 숨김 */
.grid .c-preview { width: 100%; max-width: 0; text-align: left; padding: 0 12px; }
.grid .c-preview span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mute); }
.grid th.c-preview { padding-left: 12px; }
.main.has-detail .grid .c-preview { display: none; }
@media (max-width: 1100px) { .grid .c-preview { display: none; } }
.grid .c-draft { width: 156px; min-width: 156px; white-space: nowrap; text-align: left; padding-left: 12px; }
.grid th.c-draft { text-align: left; padding-left: 18px; }
/* 휴대폰에서만: 초안만 / 수준 칸까지 */
.grid-mode { display: none; }
@media (max-width: 600px) {
  .grid-mode { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0; }
  .grid-mode small { color: var(--mute); font-size: 12px; }
  .grid:not(.wide) thead { display: none; }  /* 번호·이름·초안뿐이라 머리줄 없이 */
  .grid:not(.wide) .c-no::before { width: 40px; }  /* 머리칸이 없으니 받침으로 48px(40 + 칸 여백 8): 고정한 이름 칸(left 48)과 이어지게 */
  .grid:not(.wide) th { height: 36px; }
  .grid:not(.wide) :is(.c-lv, .c-hope, .c-target, .c-role, .c-act, .c-works) { display: none; }
  .grid:not(.wide) .c-name { min-width: 0; width: 38%; }
  .grid:not(.wide) .c-draft { width: auto; }
  .grid-card:has(.grid:not(.wide)) .grid-foot .legend { display: none; }
}
/* 활동이 많아 옆으로 밀어도 초안 상태는 늘 오른쪽 끝에 */
@media (min-width: 821px) {
  .grid .c-draft { position: sticky; right: 0; z-index: 1; }
  .grid th.c-draft { z-index: 3; }
  .grid-scroll { scroll-padding-right: 160px; }
  /* 초안 칸 밑에 가려진 칸이 있을 때만 경계선과 그림자 */
  .grid-scroll.more-right .grid .c-draft { box-shadow: inset 1px 0 0 var(--line), -8px 0 8px -8px var(--shadow); }
}

.name {
  border: 0; background: none; padding: 0 6px; height: 32px; display: flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 14px; letter-spacing: -0.01em; border-radius: var(--r-sm); white-space: nowrap; color: var(--ink);
}
@media (hover: hover) { .name:hover { text-decoration: none; } }  /* 줄 전체가 회색으로 바뀌니 밑줄은 없이 */

.act-head {
  border: 0; background: none; border-radius: var(--r-sm); padding: 5px 8px; width: 100%; max-width: 128px; margin: 0 auto;
  display: grid; gap: 1px; justify-items: center; color: var(--ink2); font-size: 12px; font-weight: 600; letter-spacing: -0.005em;
}
@media (hover: hover) { .act-head:hover { background: var(--hover-strong); color: var(--ink); } }
.act-head .act-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.act-head small { font-size: 12px; font-weight: 400; color: var(--mute); }
.act-head.add { color: var(--ink2); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border); padding: 7px 12px; }
.grid .c-act.empty { min-width: 140px; }
.grid .c-role { min-width: 96px; padding-right: 14px; }
a.act-head { text-decoration: none; color: inherit; }

/* 수준 칸: 상은 회색 칠, 중은 글자만, 하는 테두리. 따라가는(직접 정하지 않은) 값은 흐린 글자 */
.lv {
  position: relative; width: 40px; height: 28px; border-radius: var(--r-sm); border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--mute2); transition: background-color var(--dur-1) var(--ease);
}
@media (hover: hover) { .lv:hover { background: var(--hover-strong); } }
.lv[data-v="상"] { background: var(--hi); color: var(--ink); font-weight: 600; }
.lv[data-v="중"] { color: var(--ink); font-weight: 600; }
.lv[data-v="하"] { box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); font-weight: 600; }
.lv[data-v="불참"] { color: var(--mute); font-weight: 500; font-size: 12px; }
.lv[data-v="맡음"] { background: var(--hi); color: var(--ink); font-weight: 600; font-size: 12px; }
.lv.inherit { background: transparent; box-shadow: none; color: var(--mute); font-weight: 400; }
@media (hover: hover) { .lv.inherit:hover { background: var(--hover-strong); color: var(--ink); } }
.lv.off { color: var(--mute2); font-weight: 400; }
.lv.pin::before {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -4px; height: 2px; border-radius: 2px; background: var(--ink2);
}
.role-cell {
  display: inline-block; vertical-align: middle; max-width: 112px; height: 28px; line-height: 28px; padding: 0 9px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (hover: hover) { .role-cell:hover { background: var(--hover-strong); } }
.lv.memo::after {
  content: ""; position: absolute; top: 5px; right: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mute);  /* 메모 있음: 글자 바로 옆 작은 회색 점 (확정과 헷갈리지 않게 무채색) */
}
.lv:focus-visible { outline-offset: 1px; }
.lv[aria-expanded=true] { outline: 2px solid var(--mute2); outline-offset: 1px; }  /* 수준 고르기를 연 칸 */
.lv[aria-expanded=true]:focus-visible { outline-color: var(--focus); }  /* 키보드로 연 칸은 초점 고리 그대로 */
.grid .c-target { width: 52px; padding-right: 10px; }
.lv.target { font-size: 12px; font-weight: 600; background: var(--hi); color: var(--ink); }
.lv.target.inherit { background: transparent; box-shadow: none; color: var(--mute); font-weight: 500; }
.lv.target.off { background: transparent; color: var(--mute2); }
@media (hover: hover) { .lv.target.off:hover { background: var(--hover-strong); } }
/* 대상이 아닌 학생: 흐리게 하지 않고 회색 글자로 (값은 그대로 읽히게) */
.grid tr.off-target :is(.lv, .status, .preview) { color: var(--mute); font-weight: 400; background: transparent; box-shadow: none; }
.grid tr.off-target .status::before { opacity: .5; }
.grid tr.off-target td.c-name .name span { color: var(--mute); }

.filled { border: 0; background: transparent; border-radius: var(--r-sm); height: 28px; padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--ink2); white-space: nowrap; }
@media (hover: hover) { .filled:hover { background: var(--hover-strong); color: var(--ink); } }
.filled.none { color: var(--mute); background: transparent; }

.draft-cell { border: 0; background: none; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px; border-radius: var(--r-sm); width: 100%; }
@media (hover: hover) { .draft-cell:hover { background: var(--hover-strong); } }
.draft-cell small { color: var(--mute); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
.draft-cell small.over { color: var(--attn); font-weight: 500; }

/* 글 상태: 앞에 동그라미 모양 표시 + 글자. 대기 시계, 쓰는 중 도는 화살표, 초안 빈 원, 고침 반 칠한 원,
   확인 필요 빨강 !, 확정 초록 체크. 표, 학생 화면, 관찰 메모가 같은 모양을 써요 */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: nowrap; color: var(--mute); }
.status::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--g-c, currentColor);
  -webkit-mask: var(--g, none) center / 16px no-repeat; mask: var(--g, none) center / 16px no-repeat;
}
.status.none::before { background: transparent; }
.status.queued, .status.note-queued { --g: var(--g-queued); --g-c: var(--mute); }
.status.writing, .status.note-writing { --g: var(--g-writing); --g-c: var(--mute); color: var(--ink2); }
.status.draft { --g: var(--g-draft); --g-c: var(--mute); color: var(--ink2); }
.status.note-done { --g: var(--g-check); --g-c: var(--mute); color: var(--ink2); }
.status.edited { --g: var(--g-edited); --g-c: var(--ink2); color: var(--ink); }
.status.warning, .status.error, .status.note-review, .status.note-error { --g: var(--g-attn); --g-c: var(--attn); color: var(--ink2); }
/* 빨간 글자는 열어 둔 학생의 상태 하나만 (목록의 상태 글자는 회색, 색은 앞의 ! 표시에만) */
.who .status:is(.warning, .error) { color: var(--attn); }
.status.confirmed { --g: var(--g-done); --g-c: var(--done-glyph); color: var(--ink); }
.who .status.writing::before, .rrow .status.writing::before { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 짧은 표시: 확인할 것은 빨강 ! + 회색 글자, 승인 필요는 주황 ? + 회색 글자, 그냥 분류는 회색 네모 칩 */
.flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sub); font-weight: 500; color: var(--ink2); white-space: nowrap; }
.flag::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--attn);
  -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat;
}
.flag.ask { color: var(--ink2); text-decoration: none; }
.flag.ask::before { background: var(--ask); -webkit-mask-image: var(--g-ask); mask-image: var(--g-ask); }
.flag.ink { color: var(--ink2); font-weight: 500; background: var(--mid); border-radius: var(--r-xs); padding: 0 7px; height: 20px; }
.flag.ink::before { display: none; }
.grid tbody tr[aria-current=true] .flag.ink { background: var(--sel); }  /* 고른 줄 칠(--row-sel) 위에서도 칩이 보이게 */

/* 표 위 알림: 상자 없이 i 표시와 회색 글 한 줄씩 */
.board-notes { display: grid; gap: 0; padding: 6px 0 8px; }
.board-note { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 0 4px calc(var(--ic-slot) + var(--ic-gap)); font-size: 13px; line-height: 1.55; color: var(--mute); max-width: 900px; }
.board-note::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 16px; height: 16px; background: var(--mute);
  -webkit-mask: var(--g-info) center / 16px no-repeat; mask: var(--g-info) center / 16px no-repeat;
}
.board-note b { font-weight: 600; color: var(--ink2); }
.board-note .grow { flex: 1 1 320px; }
.board-note .btn { flex: none; }
.board-note .text-btn { flex: none; color: var(--ink2); }  /* 회색 글 한 줄 안의 거르기 (수준을 고르지 않은 학생만 보기) */
.grid-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 2px; border-top: 1px solid var(--line2);
  font-size: 12px; color: var(--mute);
}
.grid-foot > .keys, .grid-foot > .legend, .grid-foot > .pick-ctl { flex-shrink: 0; }
.grid-foot .keys { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.grid-foot .legend { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lv-key {
  display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: var(--r-xs);
  font: normal 600 12px/1 var(--font); background: transparent; color: var(--ink);
}
.lv-key[data-v="상"] { background: var(--hi); }
.lv-key[data-v="하"] { box-shadow: inset 0 0 0 1px var(--border); }
.lv-key.auto { color: var(--mute); font-weight: 400; margin-left: 8px; }
.pick-ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); white-space: nowrap; }
.pick-ctl select { height: 28px; padding: 0 30px 0 10px; font-size: 12px; width: auto; }
.pick-ctl + .keys { padding-left: 12px; border-left: 1px solid var(--line2); }
/* 학생 창이 열려 표가 좁으면 고르기는 한 줄을 다 쓰고, 키 안내는 구분선 없이 그 아래 */
.main.has-detail .grid-foot > .pick-ctl { flex-basis: 100%; }
.main.has-detail .pick-ctl + .keys { border-left: 0; padding-left: 0; }
.main.has-detail .grid-foot .legend { display: none; }
.grid-empty { padding: 0 !important; height: auto !important; }

/* 수준 고르기 팝오버, 메뉴: 밝은 떠 있는 판 (어두운 판은 쓰지 않아요) */
.pop, .menu {
  position: absolute; z-index: 30; background: var(--card); border: 0; border-radius: var(--r);
  box-shadow: var(--shadow-pop);
}
.pop { padding: 10px; width: 264px; display: grid; gap: 8px; }
.pop-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; min-width: 0; }
.pop-head span { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-head .follow { flex: none; margin-left: -4px; }
.pop-note { margin: -4px 0 0; font-size: 12px; color: var(--mute); }  /* 고르지 않아 '중'으로 쓰는 칸: 머리줄 아래 한 줄 */
.row-line .follow { font-size: 12px; color: var(--mute); }
.pop-opts { display: flex; gap: 2px; padding: 2px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line2); border-radius: var(--r-md); }
/* 표와 달리 고른 값 하나만 흰 손잡이로 (.seg와 같은 모양) */
.pop-opts .lv { flex: 1; width: auto; height: 26px; background: transparent; color: var(--mute); box-shadow: none; font-weight: 500; }
@media (hover: hover) { .pop-opts .lv:hover { background: transparent; color: var(--ink); } }
.pop-opts .lv[data-v=""] { color: var(--mute); font-weight: 500; font-size: 12px; }
.pop-opts .lv[aria-pressed=true] { background: var(--thumb); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-thumb); }
.pop-opts .lv[data-v="불참"][aria-pressed=true] { color: var(--ink2); }
.pop-memo { display: grid; gap: 3px; }
.pop-memo input { font-size: 13px; padding: 6px 9px; }
.pop-memo small { color: var(--mute); font-size: 12px; }
.pop-pick { display: grid; gap: 5px; font-size: 12px; color: var(--mute); padding-top: 2px; }
.pop-pick .seg { justify-self: start; }
.pop > .btn { justify-self: start; }

.menu { padding: 4px; width: 250px; display: grid; }
.menu button, .menu a {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-md); display: grid; gap: 1px;
  color: var(--ink2); text-decoration: none;
}
.menu :is(button, a):focus-visible { background: var(--sel); color: var(--ink); outline: none; }
@media (hover: hover) { .menu :is(button, a):hover { background: var(--sel); color: var(--ink); } }
.menu b { font-weight: 500; font-size: 14px; color: var(--ink); }
.menu small { color: var(--mute); font-size: 12px; }
.menu :is(button, a):focus-visible small { color: var(--ink2); }
@media (hover: hover) { .menu :is(button, a):hover small { color: var(--ink2); } }

/* 상세 ----------------------------------------------------------- */
.detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: 72px;
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-card); }  /* 아래 고정한 복사·확정 줄 뒤로 글이 숨지 않게 */
/* 넓은 화면: 학생 표 화면을 창 높이에 맞춰요. 페이지는 그대로 두고 표와 오른쪽 칸만 따로 내려가게 (활동 카드·문체 예시·나이스 화면은 그대로) */
@media (min-width: 1201px) and (min-height: 560px) {
  #view-board:has(> .main:not([hidden])) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  #view-board > .bar { flex: none; }
  #view-board > .main { flex: 1 1 auto; min-height: 0; padding-bottom: 16px; grid-template-rows: minmax(0, 1fr); }
  #view-board .grid-card { display: flex; flex-direction: column; max-height: 100%; }
  #view-board .grid-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
  #view-board .detail { position: static; max-height: 100%; }
}
.detail { --pad: 20px; }
.detail .pbody { padding: 20px var(--pad) var(--pad); }
/* 기다리는 동안: 업무를 바꾸면 앞 업무의 표와 상태 칩은 감추고(0.12초 안에 오면 그대로), 학생을 바꾸면 앞 학생 글은 흐리게. 오면 부드럽게 */
#view-board :is(#main, #task-page, #counts), .detail .pbody { transition: opacity var(--dur-2) var(--ease); }
#view-board[aria-busy=true] :is(#main, #task-page, #counts) { opacity: 0; pointer-events: none; transition: opacity 0s linear .12s; }
.detail[aria-busy=true] .pbody { opacity: .35; transition: opacity var(--dur-1) ease-out .15s; }
.style-card-view { padding: var(--panel-pad); border-radius: var(--r-md); background: var(--sunk); font-size: 14px; line-height: 1.7; white-space: normal; color: var(--ink2); }
.style-card-view p { margin: 0; }
.style-card-view p.li { position: relative; padding-left: 14px; }  /* '- ' 줄은 내어쓰기 */
.style-card-view p.li::before { content: "·"; position: absolute; left: 2px; color: var(--mute); }
.style-items { display: flex; flex-wrap: wrap; gap: 6px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; padding: 12px 0; border-top: 1px solid var(--line2); font-size: 13px; color: var(--ink2); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); grid-row: span 2; color: var(--mute); font-weight: 600; font-size: 12px; padding-top: 1px; }
.steps b { font-weight: 600; color: var(--ink); }

/* 업무의 활동 카드 · 문체 예시 화면 (학생 표 대신 보이는 갈래) */
.task-page { padding: 8px 32px 40px; }
.tp { display: grid; gap: 16px; max-width: none; }  /* 글 줄 길이는 .tp-head p 64ch가 잡아요 */
.tp-head { display: flex; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; }
.tp-head > div:first-child { flex: 1 1 360px; min-width: 0; }
.tp-head > div:first-child:not(:has(p)) { align-self: center; }  /* 한 줄 표시(내용 빈 칸)는 오른쪽 단추와 가운데를 맞춰요 */
.tp-head p { margin: 6px 0 0; font-size: var(--fs-sub); line-height: 1.6; color: var(--mute); max-width: 64ch; }
.tp-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-note { margin: -6px 0 0; font-size: 13px; color: var(--mute); }
.tp > .tp-note:first-child { margin-top: 0; }
.tp-note a { color: var(--ink2); text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) { .tp-note a:hover { color: var(--ink); } }
.tp-card { padding: 8px 0 0; display: grid; gap: 12px; border-top: 0; }
.tp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tp-card-head h3 { flex: none; white-space: nowrap; }  /* 긴 안내가 붙어도 제목은 한 줄로, 안내가 아래로 내려가요 */
.tp-card h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tp-card-head small { font-size: 13px; color: var(--mute); }
.tp-sub { margin-top: 6px; }
.tp .placeholder { justify-items: center; }
/* 기본 예시가 아래에 있으면 빈 화면이 아니니 회색 판 없이 같은 왼쪽 선에 안내 한 줄과 단추 */
.tp:has(.tp-defaults) .placeholder { background: none; padding: 0; border-radius: 0; text-align: left; justify-items: start; }
.tp:has(.tp-defaults) .placeholder p { margin: 0; max-width: 64ch; line-height: 1.6; }
/* 기본 예시: 예시가 없는 업무에서 조용히 (수준 글자 + 글) */
.tp-defaults { display: grid; gap: 12px; padding-top: 8px; }
.tp-defaults h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.def-ex { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; }
.def-ex.one { grid-template-columns: minmax(0, 1fr); }
.def-lv { font-size: var(--fs-sub); font-weight: 600; color: var(--mute); line-height: 1.7; }
.def-ex p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink2); max-width: 64ch; }

/* 나이스 입력: 다음 학생 막대(떠 있는 판) + 번호 순서 목록 */
.neis-next { position: sticky; top: 8px; z-index: 2; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 16px 12px;
  background: var(--sunk); border-radius: var(--r-md); }  /* 바탕 위 회색 판 (떠 있는 카드는 학생 글 판뿐) */
.nn-who { display: grid; gap: 2px; }
.nn-who small { font-size: 12px; color: var(--mute); }
.nn-who b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: var(--lh-head); }
.nn-count { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.nn-count b { color: var(--ink); font-weight: 600; }
.neis-list { list-style: none; margin: 0; padding: 0; overflow: hidden; border-top: 1px solid var(--line2); }
.neis-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 12px; border-bottom: 1px solid var(--rule); }
.neis-row.next, .neis-row:has(+ .next) { border-bottom-color: transparent; }
.neis-row.next { background: var(--row-sel); border-radius: var(--r-md); }
.neis-row.done .nr-no, .neis-row.done .nr-head b, .neis-row.done .nr-text { color: var(--mute); }
.nr-no { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; }
.nr-body { display: grid; gap: 4px; min-width: 0; }
.nr-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nr-head b { font-size: 14px; font-weight: 500; }
.nr-bytes { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.nr-bytes.over { color: var(--attn); font-weight: 500; }
.nr-extra { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--sunk); font-size: 13px; color: var(--ink); cursor: pointer; }
.nr-extra small { font-size: 12px; color: var(--mute); }
@media (hover: hover) { .nr-extra:hover { background: var(--sel); } }
.nr-text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.nr-text.open { display: block; white-space: pre-line; }
.neis-row .btn { white-space: nowrap; }
.nr-done { color: var(--mute); }
.nr-done .ic { color: var(--mute); }  /* 복사함: 회색 체크 (초록은 확정에만) */
.neis-rest { display: grid; gap: 10px; }
.neis-rest h3 { font-size: 15px; font-weight: 700; }
.neis-rest h3 b { font-weight: 600; color: var(--mute); }
/* 확정 전 학생: 줄과 칸을 맞춘 목록 (이름 바로 뒤에 그 학생의 상태) */
.neis-rest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 0 8px; margin-inline: -8px; }
.nr-chip { display: grid; grid-template-columns: 5.8em auto; justify-content: start; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: transparent; font-size: 13px; color: var(--ink); text-decoration: none; }
.nr-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-chip .status.none::before { display: none; }
.nr-chip small { font-size: 12px; color: var(--mute); }
@media (hover: hover) { .nr-chip:hover { background: var(--hover); } }
.act-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.act { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--sunk); border-radius: var(--r); }
.act.editing { background: var(--card); box-shadow: var(--shadow-card); grid-column: 1 / -1; }
.act-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.act-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.act-date { color: var(--mute); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.act-tag { font-size: 12px; color: var(--ink2); background: var(--hi); border-radius: var(--r-xs); padding: 0 7px; white-space: nowrap; }
.act.unused .act-name { color: var(--mute); }
.act-meta { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; margin-top: -4px; }
.act-more-note { justify-self: start; color: var(--mute); }
.acts-off { display: grid; gap: 8px; margin-top: 8px; }
.acts-off h3 { font-size: 14px; font-weight: 700; color: var(--ink2); }
.acts-off p { margin: 0; }
.act-gone { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line2); }
.act-gone li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 13px; color: var(--mute); }
.act-gone li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-top .btn { flex: none; color: var(--mute); }
@media (hover: hover) {
  .act-top .btn:hover { color: var(--ink); }
  /* 카드마다 있는 고치기는 카드에 마우스를 올리거나 초점이 들어올 때만 */
  .act-top .btn { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
  .act:is(:hover, :focus-within) .act-top .btn { opacity: 1; }
}
.act-content {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-align: left; border: 0; background: none; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.7; color: var(--ink2); white-space: pre-line;
}
@media (hover: hover) { .act-content:hover { background: var(--hover-strong); } }
.act-blank {
  text-align: left; border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 13px; color: var(--mute); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (hover: hover) { .act-blank:hover { border-color: var(--ink2); color: var(--ink); } }
.act.editing textarea { min-height: 84px; font-size: 13px; line-height: 1.6; resize: none; overflow: hidden; }
.act-foot { display: flex; align-items: center; gap: 6px; }
.act-foot small { font-size: 12px; }
.act-add-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.act-add-row .act-add { flex: 0 1 620px; }
.act-add-row > b { font-size: 14px; font-weight: 600; }
/* 모델이 읽는 정리본 (활동 설명을 나눈 것) */
.act-brief[open] { display: grid; gap: 4px; }
/* 진로 체험 카드: 학생별 체험한 직업, 보고서 우수 수 */
.act-exp { border-top: 1px solid var(--rule); padding-top: 8px; }
.act-exp .act-meta { margin-top: 0; }
.act-brief-lines { margin: 4px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.act-brief.editing textarea { min-height: 72px; font-size: 12px; line-height: 1.6; resize: none; overflow: hidden; }
.act-add { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 6px; align-items: center; }
.acts-help { max-width: 640px; }
.acts-help summary { font-size: 13px; color: var(--mute); cursor: pointer; }
.acts-help .steps { margin-top: 6px; }

.who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.who h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.who .meta { color: var(--mute); font-size: 13px; white-space: nowrap; }
.who h2 { white-space: nowrap; }
.back { display: none; }
.step-nav { display: inline-flex; gap: 2px; }
.step-nav .ic { width: 16px; height: 16px; }
/* 학생 글이 표 자리를 차지하는 너비(목록 단추가 보이는 곳): iOS의 밀어 넣은 화면처럼 맨 위에 '< 업무 이름'과 앞뒤 학생, 그 아래 큰 이름 */
@media (max-width: 1200px) {
  .who { flex-wrap: wrap; gap: 2px 8px; }
  .detail .who .back { order: -2; flex: 1 1 calc(100% - 96px); justify-content: flex-start; margin-left: -10px; padding-inline: 4px 8px; height: var(--ctl); font-size: 15px; font-weight: 500; color: var(--ink2); min-width: 0; }
  .who:not(:has(.step-nav)) .back { flex-basis: 100%; }
  .who .back::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--g-chev) center / 16px no-repeat; mask: var(--g-chev) center / 16px no-repeat; transform: rotate(180deg); }
  .who .step-nav { order: -1; margin-right: -10px; }
  .who h2 { font-size: var(--fs-title); letter-spacing: var(--ls-title); }
  .who .status { margin-left: auto; }
}
/* 휴대폰: 학번은 아랫줄로, 돌아가기 줄은 손가락 높이 */
@media (max-width: 600px) {
  .who .meta { order: 10; flex-basis: 100%; }
  .detail .who .back { height: 44px; }
}

.row-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 16px; border-bottom: 1px solid var(--line2); }
.row-line .hint { font-size: 12px; color: var(--mute); }

.section { padding: 16px 0 2px; display: grid; gap: 10px; }
.section + .section { border-top: 1px solid var(--line2); margin-top: 16px; }
.section-head { display: flex; align-items: center; gap: 10px; }
.section-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.saved { font-size: 12px; color: var(--mute); }

.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mark { display: grid; gap: 6px; }
.mark-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mark-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mark-name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-head small { color: var(--mute); font-size: 12px; white-space: nowrap; }
.mark .seg { flex: none; }
.mark .tag { font-size: 12px; color: var(--mute); background: var(--mid); border-radius: var(--r-xs); padding: 0 7px; white-space: nowrap; }
.mark .tag.ink { color: var(--ink); background: var(--hi); }
.mark.off .mark-name { color: var(--mute); }
.pick-btn { flex: none; }
.mark-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 진로 체험: 이름 줄 오른쪽 보고서 우수, 수준 아래 체험한 직업 */
.best-chk { flex: none; font-size: 12px; white-space: nowrap; }
.mark-choice { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px; }
.mark-choice[hidden] { display: none; }
.mark-choice > span { font-size: 12px; color: var(--mute); white-space: nowrap; }
.mark.stacked .mark-head { min-height: 28px; }
.mark.stacked .mark-title { flex-wrap: wrap; row-gap: 2px; }
.mark.stacked .mark-name { white-space: normal; }
.picks-out .marks { padding-top: 4px; }
.seg button { white-space: nowrap; }
.memo-add { color: var(--mute); }
.memo-input { font-size: 13px !important; padding: 6px 10px !important; background: var(--sunk) !important; border-color: transparent !important; }
.memo-input:focus { background: var(--card) !important; border-color: var(--ink2) !important; }

.field { display: grid; gap: 5px; align-content: start; }
.field > span { font-size: 12px; }
.field em { font-style: normal; color: var(--mute); font-weight: 400; margin-left: 6px; }

details.section summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
details.section summary::-webkit-details-marker { display: none; }
details.section summary::after {
  content: ""; margin-left: auto; flex: none; width: 16px; height: 16px; background: var(--mute);
  -webkit-mask: var(--g-chev-down) center / 16px no-repeat; mask: var(--g-chev-down) center / 16px no-repeat; transition: transform var(--dur-2) var(--ease);
}
details.section[open] summary::after { transform: rotate(180deg); }
/* 앞 학기 글: 첫 줄은 제목과 펼치기, 바이트 안내는 그 아래 한 줄로 (좁은 패널에서 세 칸으로 찌그러지지 않게) */
details.prior > summary { flex-wrap: wrap; row-gap: 2px; }
details.prior > summary > .mute { order: 1; flex-basis: 100%; font-size: 12px; }
.works ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.works li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.works li:last-child { border-bottom: 0; }
.works .wt { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.works .wt small, .works .wt .score { white-space: nowrap; }
.works .wt b { font-weight: 500; }
.works .wt small { color: var(--mute); font-size: 12px; }
.works p { margin: 4px 0 0; color: var(--ink2); }
.works .tc { color: var(--mute); }
.works .look small { font-size: 12px; }
.works li.personal .wt b, .works li.personal p { color: var(--mute); }
.works .w-act { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.works .w-act small { font-size: 12px; }
.works .w-act .why { color: var(--ink2); }
.works .score { font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: var(--r-xs); background: var(--mid); color: var(--ink2); font-variant-numeric: tabular-nums; }
.given pre { margin: 8px 0 0; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: var(--sunk);
  font: 12px/1.65 var(--font); color: var(--ink2); white-space: pre-wrap; word-break: keep-all; max-height: 320px; overflow: auto; }
.given-block + .given-block { margin-top: 10px; }
.given-block > b { font-size: 12px; font-weight: 500; }

.draft-meta { display: flex; gap: 12px; font-size: 12px; color: var(--mute); }
.draft-meta .over { color: var(--attn); font-weight: 600; }
.progress { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink2); }
.progress .bar { display: block; flex: 1; height: 3px; padding: 0; border-radius: 3px; background: var(--line2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--mute); transition: width .25s ease-out; }
.blocks { display: grid; gap: 10px; }
/* 편지의 첫인사·끝인사: 본문 앞뒤에 붙는 고정 인사 (설정에서 바꿈) */
.letter-frame { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 0 2px; }
.letter-frame small { font-size: 12px; color: var(--mute); white-space: nowrap; }
.letter-frame p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.letter-frame .text-btn { font-size: 12px; white-space: nowrap; }
.block { border: 0; border-top: 1px solid var(--rule); padding: 10px 0 4px; display: grid; gap: 6px; }
.blocks > .block:first-child { border-top: 0; padding-top: 2px; }
.block.edited { background: transparent; }
.block.empty { background: var(--sunk); border-radius: var(--r-md); padding: var(--panel-pad); border-top: 0; }
.block.empty p { margin: 0; font-size: 12px; }
.block.gone { opacity: .55; }
.block-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.block-no { font-size: 12px; font-weight: 600; color: var(--mute); }
.block-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-head small { color: var(--mute); font-size: 12px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 8; }  /* 좁으면 이름보다 먼저 줄어요 */
.block-text { border: 0 !important; padding: 0 !important; resize: none; font-size: 15px !important; line-height: var(--lh-read) !important; background: transparent !important; overflow: hidden; color: var(--ink); }
.block-text:focus { box-shadow: 0 0 0 3px var(--focus-halo) !important; border-radius: var(--r-xs); }
p.block-text { margin: 0; }
.block-foot { display: flex; align-items: flex-end; gap: 8px; }
/* 나눠 쓴 글을 이어 붙인 모습: 나이스 한 칸에 들어갈 글 그대로, 읽기만 */
.neis-one { display: grid; gap: 6px; margin-top: 14px; padding: var(--panel-pad); background: var(--sunk); border-radius: var(--r-md); }
.neis-one small { font-size: 12px; color: var(--mute); }
.neis-one p { margin: 0; font-size: 14px; line-height: var(--lh-read); color: var(--ink2); overflow-wrap: anywhere; }
.block-foot .issues { flex: 1; }
.block-foot .count { color: var(--mute); font-size: 12px; margin-left: auto; white-space: nowrap; }
/* 학생 창은 좁아서 검수 알림은 한 줄을 다 쓰고, 자 수는 그 아래 오른쪽에 따로 */
.detail .block-foot { flex-direction: column; align-items: stretch; gap: 4px; }
.detail .block-foot > span:empty { display: none; }
.detail .block-foot .count { align-self: flex-end; }
/* 검수에 걸린 것: 상자 없이 빨강 ! 표시 + 이름표(빨강) + 설명(진한 회색) */
.issues { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.issues li { position: relative; font-size: 13px; color: var(--ink2); padding: 1px 0 1px 22px; line-height: 1.55; display: flex; flex-wrap: wrap; gap: 0 6px; }
.issues li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; background: var(--attn);
  -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat;
}
.issues li > b { color: var(--ink); }
.issues li b { font-weight: 600; }
.issues li q { flex-basis: 100%; color: var(--ink2); quotes: "“" "”"; }
.issues li b { flex: none; }
.issues li > span { flex: 1 1 0; min-width: 0; }  /* 긴 문구도 이름표 옆에서 줄바꿈 */
.issues li details { flex-basis: 100%; }
.issues li details > summary { cursor: pointer; width: fit-content; font-weight: 500; color: var(--mute); list-style: none; display: inline-flex; align-items: center; gap: 2px; }
.issues li details > summary::-webkit-details-marker { display: none; }
.issues li details q { display: block; margin-top: 2px; }
.notice { position: relative; display: block; font-size: 13px; line-height: 1.55; color: var(--ink2); padding: 0 0 0 22px; margin: 0; }
.notice::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--attn);
  -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat;
}
.note-line { font-size: 12px; color: var(--mute); margin: 0; letter-spacing: -0.005em; }
.grid .c-hope { width: 150px; max-width: 150px; text-align: left; padding-right: 14px; }
.hope { border: 0; background: none; padding: 0 8px; height: 30px; width: 100%; text-align: left; font-size: 12px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: var(--r-sm); }
@media (hover: hover) { .hope:hover { background: var(--hover-strong); } }
.hope.none { color: var(--mute); }
.book-list { list-style: none; margin: 4px 0 10px; padding: 0; }
.book-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; min-width: 0; }
.book-list li b { font-weight: 500; }
.book-list li > span:not(.spacer) { color: var(--mute); font-size: 12px; }
.book-list li small { color: var(--mute); font-variant-numeric: tabular-nums; }
.book-list li small.warn { color: var(--ink2); }
.book-list .spacer { flex: 1; }
.book-list li small.checked { color: var(--ink2); background: var(--mid); border-radius: var(--r-xs); padding: 0 6px; font-size: 12px; font-weight: 500; }
.check-fix { display: inline-flex; align-items: center; gap: 4px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: var(--r-sm); }
.dot-neg { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; background: var(--attn); -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat; }
.book-form { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 6px; align-items: center; }
.book-form input { min-width: 0; }
.map-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 4px; font-size: 13px; }
.map-line small { color: var(--mute); font-size: 12px; }
.mute.small { font-size: 12px; margin: 0 0 6px; }
/* 지난 업무: 흐리게(opacity) 대신 회색 글자, 진행 원만 옅게 (눌러 여는 글자가 읽히게) */
.todo-row.past :is(.todo-name, .cls, .frac, .frac b) { color: var(--mute); }
.todo-row.past .pie { opacity: .55; }
.prior-text { margin: 8px 0 4px; font-size: 14px; line-height: 1.7; color: var(--ink2); white-space: pre-wrap; }
.paste-items li.miss .pi-head b { color: var(--mute); font-weight: 500; }
.pi-head .spacer { flex: 1; }
.draft-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.draft-actions .btn.accent { padding: 0 18px 0 14px; }
.draft-actions .next-btn .ic { margin-right: -4px; }
/* 학생 창 아래 줄은 어느 너비에서나 한 줄에: 단추는 글자만(확정의 초록 체크만 남겨요), 단추 사이는 4px, 확정·다음 학생만 오른쪽 끝 */
.detail .draft-actions { gap: 4px; }
.detail .draft-actions .btn.ghost { padding: 0 8px; }
.detail .draft-actions .btn:not(.accent) .ic { display: none; }
.detail .draft-actions .btn.copied { padding-inline: 0; overflow: hidden; }  /* 전체 복사 → 복사했어요: 폭은 그대로 묶고 글자만 (옆 단추가 밀리지 않게) */
.detail .draft-actions .spacer { display: none; }
.detail .draft-actions .btn { height: var(--ctl); }  /* 전체 복사·다시 쓰기·확정이 같은 높이로 (휴대폰 40) */
.detail .draft-actions .btn.accent { padding: 0 14px 0 10px; font-size: 13px; }
/* 글이 길어도 복사·확정 줄은 학생 창 아래에 붙어 있게 (Things의 열린 할 일 아래 줄처럼 옅은 회색 바닥) */
.detail .draft-actions { position: sticky; bottom: 0; z-index: 2; background: var(--foot); margin: 12px calc(-1 * var(--pad, 20px)) 0; padding: 12px var(--pad, 20px); box-shadow: 0 -1px 0 var(--line2); }
.detail .pbody > .section.draft:last-child .draft-actions { margin-bottom: calc(-1 * var(--pad, 20px)); }
/* 초안 아래에 다른 칸이 이어지면 회색 바닥 대신 판과 같은 색 + 위 선 (판 가운데 회색 띠가 생기지 않게) */
@media (min-width: 901px) { .detail .pbody > .section.draft:not(:last-child) .draft-actions { background: var(--card); } }
/* 두 줄이 되어도 확정·다음 학생은 늘 오른쪽 끝 */
.detail .draft-actions > :last-child { margin-left: auto; }
/* 창이 스크롤되는 너비(학생 창이 따로 스크롤되지 않을 때)도 같은 여유 */
html:has(#view-board:not([hidden]) .main.has-detail:not([hidden])) { scroll-padding-bottom: 72px; }
.placeholder { background: var(--sunk); border-radius: var(--r-md); padding: 24px 16px; text-align: center; color: var(--mute); font-size: 13px; display: grid; gap: 12px; justify-items: center; }
/* 비어 있는 목록: 판 없이 가운데 회색 한 줄 (검토 탭, 관찰 메모, 학생 목록, 거른 표). 판 안에서 기다리는 칸은 .placeholder */
.empty-state { margin: 0; padding: 40px 16px; text-align: center; font-size: var(--fs-sub); color: var(--mute); display: grid; justify-items: center; gap: 10px; }
.empty-state > p { margin: 0; }
/* 불러오는 중: 금방 끝나면 보이지 않게 0.3초 뒤에 나타나요 */
.loading { animation: fade-in .2s ease-out .3s both; }
@keyframes fade-in { from { opacity: 0; } }

details.history summary { font-size: 12px; color: var(--mute); }
details.history ol { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
details.history li { font-size: 13px; color: var(--ink2); border-left: 0; padding: 8px 0 0; white-space: pre-line; }
details.history li + li { border-top: 1px solid var(--rule); }
details.history li small { display: block; color: var(--mute); font-size: 12px; }

/* 공통 페이지 ------------------------------------------------------- */
.page { max-width: 1168px; margin: 0; padding: 24px 32px 48px; display: grid; gap: var(--head-gap); }
.page.narrow { max-width: 868px; }
/* 오늘: 제목 아래 24, 묶음 사이 40 (휴대폰 16·32) */
.page.today > :is(.now-tasks, .all-tasks) { margin-top: calc(var(--section) - var(--head-gap)); }
.page.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-titles { display: grid; gap: 4px; min-width: 0; }
.page-head .sub { margin: 0; color: var(--mute); font-size: 13px; max-width: 72ch; }
.page-head .title-ic + .title { margin: 0; }
.page-head .title-row + .sub { margin-left: 0; text-wrap: balance; }
/* 고르기 상자: 브라우저 모양 대신 Fluent 펼침 표시 하나 (Windows·맥·아이폰에서 같게) */
select {
  appearance: none; -webkit-appearance: none; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 30px 0 10px; font-size: 13px;
  background: var(--card) var(--g-select) no-repeat right 8px center / 16px 16px;
}
input[type=date] {
  border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); padding: 0 8px; font-size: 13px;
  font-variant-numeric: tabular-nums; min-width: 0;
}
/* 한 줄 입력 칸과 고르기 상자는 모두 같은 높이 (PC 32, 휴대폰 44) */
input:is([type=text], [type=password], [type=url], [type=date], [type=search]), select { height: var(--ctl-field); padding-block: 0; line-height: normal; }
/* 입력 칸과 단추가 한 줄로 늘어선 곳은 단추도 칸 높이에 맞춰 위아래 끝을 같게 */
:is(.material-add, .act-add, .inline-form, .book-form, .attend-head, .cands) > :is(input, select, .btn) { height: var(--ctl-field); }
:is(.material-add, .act-add, .inline-form, .book-form) :is(input, select) { padding-inline: 10px; font-size: 13px; }
:is(.material-add, .act-add, .inline-form, .book-form) select { padding-right: 30px; }  /* 펼침 표시 자리 */
select:focus, input[type=date]:focus { outline: none; border-color: var(--ink2); box-shadow: 0 0 0 3px var(--focus-halo); }
/* 체크 상자: 16px 둥근 네모, 고르면 검정 칠에 흰 체크 */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--card); display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
input[type=checkbox]::before {
  content: ""; width: 16px; height: 16px; margin: -1px; background: var(--on-dark);
  -webkit-mask: var(--g-check) center / 16px no-repeat; mask: var(--g-check) center / 16px no-repeat;
  transform: scale(0); transition: transform var(--dur-1) var(--ease);
}
input[type=checkbox]:checked { background: var(--dark); border-color: var(--dark); }
input[type=checkbox]:checked::before { transform: scale(1); }
@media (hover: hover) { input[type=checkbox]:hover:not(:checked):not(:disabled) { border-color: var(--mute2); } }
/* 꺼진 상자는 회색 바닥 (이미 있는 일정 등), 키보드 초점은 다른 칸과 같은 2px 고리 */
input[type=checkbox]:disabled { cursor: default; background: var(--sunk); border-color: var(--line2); }
input[type=checkbox]:disabled:checked { background: var(--mute2); border-color: var(--mute2); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
/* 메타 칩 (Things의 날짜 칩): 옅은 회색 칠, 4px 둥근 네모 */
.chip.ok, .ok { font-size: 12px; color: var(--ink2); background: var(--mid); border-radius: var(--r-xs); padding: 0 7px; font-weight: 500; }

/* SEAC 작품 사진 */
.w-files { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.w-photo { padding: 0; border: 1px solid var(--line2); border-radius: var(--r-md); background: var(--sunk); overflow: hidden; cursor: zoom-in; width: 88px; height: 88px; }
.w-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) { .w-photo:hover { border-color: var(--mute2); } }
.w-file { font-size: 12px; color: var(--ink2); align-self: center; text-decoration: underline; text-underline-offset: 3px; }
.photo-dlg { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--r); background: var(--card); }
.photo-dlg::backdrop { background: var(--backdrop-photo); }
.photo-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.photo-body { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--sunk); }
.photo-body img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; display: block; min-width: 0; }
.photo-nav { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--icon); cursor: pointer; }
@media (hover: hover) { .photo-nav:hover { background: var(--hover-strong); color: var(--ink); } }

/* 검토: 상태별로 모아 보기 */
/* 화면 탭(학생 / 활동 카드 / 문체 예시 / 나이스 입력)과 검토 상태 탭: 글자 탭 + 고른 것만 진하게 + 2px 밑줄 */
.review-tabs { display: flex; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line2); }
.rtab {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 0 9px; margin-bottom: -1px;
  font-size: 14px; font-weight: 500; color: var(--mute); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--dur-1) var(--ease);
}
.rtab b { font-size: 13px; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .rtab:hover { color: var(--ink2); } }
.rtab[aria-current=true] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.rtab[aria-current=true] b { color: var(--ink2); }
.rtab:focus-visible { border-radius: var(--r-xs); outline-offset: 3px; }
.rtab:active { opacity: .5; transition-duration: 0s; }  /* 누르는 동안 흐리게 (아래 탭 막대와 같은 모양) */
.rtab.zero { color: var(--mute); }
.rtab.zero b { color: var(--mute); font-weight: 500; }
.review-hint { margin: -12px 0 0; font-size: 13px; color: var(--mute); }
.review-filter { display: grid; justify-items: start; gap: 4px; margin-top: -8px; }
/* PC: '모든 업무'와 영역 줄을 한 줄로 이어 쓰고, 넘치면 다음 줄 왼쪽 선에서 (휴대폰은 영역마다 밀어 보는 줄) */
@media (min-width: 821px) { .review-filter { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 4px; } }
/* 영역마다 한 줄: 영역 이름 한 번 + 업무 이름만 */
.review-filter-area { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.review-filter-area > .area-tag { margin-right: 8px; }
.review-filter small { color: var(--mute); font-weight: 600; font-size: 12px; margin-left: 2px; }
.review-filter .tab[aria-current=true] small { color: var(--ink2); }
.review-list { display: grid; gap: 40px; }
.review-group { overflow: visible; }
.review-group-head { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; border-bottom: 1px solid var(--line2); }
.review-group-head small { font-size: 12px; }
.rrow { border-bottom: 1px solid var(--rule); }
.rrow:last-child { border-bottom: 0; }
/* 줄은 양옆으로 8px 내밀어 반 글자가 묶음 제목과 같은 선에서 시작하고, 가는 선은 그 안쪽에만 */
.review-group .rrow { margin-inline: -8px; border-bottom: 0; position: relative; }
.review-group .rrow + .rrow::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: var(--rule); }
.review-group .rrow.open::before, .review-group .rrow.open + .rrow::before { display: none; }
.rrow-head {
  display: grid; grid-template-columns: 28px 28px 76px 168px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  width: 100%; padding: 8px 8px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink2);
  text-decoration: none; cursor: pointer; border-radius: var(--r-sm);
}
@media (hover: hover) { .rrow-head:hover { background: var(--hover); } }
.rrow.open { background: var(--sunk); border-radius: var(--r-md); border-bottom-color: transparent; }
.rrow.open .rrow-head { background: transparent; }
.rrow.open .rrow-head .nm { font-weight: 600; }
.rrow-head .cls { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rrow-head .no { font-size: 12px; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.rrow-head .nm { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow-head .why {
  font-size: 12px; line-height: 1.35; color: var(--ink2); white-space: normal; word-break: keep-all; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
/* 확인 필요 까닭: 빨강 ! 하나 + 읽기 쉬운 글자 (28줄이 모두 빨간 글이면 경보판처럼 보여요) */
.rrow-head .why.warn { position: relative; padding-left: 22px; }
.rrow-head .why.warn::before {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: var(--attn);
  -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat;
}
.rrow-head .preview { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* 펼치면 아래에 글 전체가 보이니 첫머리는 숨겨요 (칸은 남겨 바이트가 오른쪽에 그대로) */
.rrow.open .rrow-head .preview { visibility: hidden; }
.rrow-head .bytes { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rrow-head .bytes.warn { color: var(--attn); }
/* 까닭이 없는 탭(초안·고친 글·확정·아직 없음)은 까닭 칸을 빼고, 승인 필요는 짧은 칸 하나 */
.review-list:not([data-bucket=check]):not([data-bucket=busy]):not([data-bucket=approve]) .rrow-head .why { display: none; }
@media (min-width: 721px) {
  .review-list:not([data-bucket=check]):not([data-bucket=busy]):not([data-bucket=approve]) .rrow-head { grid-template-columns: 28px 28px 76px minmax(0, 1fr) auto; }
  .review-list[data-bucket=approve] .rrow-head { grid-template-columns: 28px 28px 76px 76px minmax(0, 1fr) auto; }
}
.rrow-body { display: grid; gap: 10px; padding: 4px 16px 14px 88px; }  /* 8 + 28 + 12 + 28 + 12: 글이 이름 아래에서 시작 */
.rrow-body .row { display: flex; align-items: center; gap: 8px; }
.rrow-body .rtext { margin: 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink); white-space: pre-line; max-width: 820px; }
.rrow-body .issues { max-width: 820px; }
/* 휴대폰: Things처럼 이름(제목) 한 줄, 그 아래 회색으로 반 · 번호 · 까닭, 그 아래 첫머리 */
@media (max-width: 720px) {
  .rrow-head { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 2px; }
  .rrow-head .nm { grid-column: 1 / 4; grid-row: 1; }
  .rrow-head .bytes { grid-column: 4; grid-row: 1; }
  .rrow-head .cls { grid-column: 1; grid-row: 2; }
  .rrow-head .no { grid-column: 2; grid-row: 2; text-align: left; }
  .rrow-head .no::after { content: "번"; }
  .rrow-head .why { grid-column: 3 / -1; grid-row: 2; }
  .rrow-head .preview { grid-column: 1 / -1; grid-row: 3; }
  .rrow.open .rrow-head .preview { display: none; }
  .rrow-body { padding: 4px 8px 14px; }
}

/* 지금 할 업무 (홈): Things의 프로젝트 줄처럼 진행 원 + 이름, 아래 마감 한 줄. 상자 없이 가는 선으로 */
.now-tasks { display: grid; gap: 16px; }
.now-area { display: grid; gap: 4px; }
.now-area + .now-area { margin-top: 24px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.sec-head small { font-size: 12px; }
.now-list { display: grid; }
.now-row {
  display: grid; grid-template-columns: var(--ic-slot) minmax(0, 1fr) auto;
  row-gap: 4px; column-gap: var(--ic-gap); align-items: center; padding: 8px 8px; margin: 0 -8px; border-radius: var(--r-sm); position: relative;
}
.now-pie { display: grid; place-items: center; align-self: start; padding-top: 3px; color: var(--a); }
.now-pie .pie { color: var(--a); }
.now-title { display: grid; gap: 1px; min-width: 0; }
.now-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.now-name small { margin-left: 6px; }
/* 줄 전체가 업무 바로가기 (반 바로가기만 그 위에 따로) */
.now-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
.now-cls a { position: relative; z-index: 1; }
@media (hover: hover) { .now-row:has(.now-name:hover) { background: var(--hover); } .now-name:hover { text-decoration: none; } }
.now-title small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.now-title .dd { font: inherit; color: inherit; background: none; padding: 0; }
.now-title .dd.hot { color: var(--attn); font-weight: 600; }
.now-row .nums { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: var(--fs-sub); color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-row .nums b { color: var(--ink); font-weight: 600; }
.now-row .nums small { color: var(--mute); font-size: 12px; }
/* 확인 필요·승인 필요 수: 글자는 회색, 색은 앞의 16px 표시에만 (빨강 !, 주황 ?) */
.cnt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 500; color: var(--mute); }
.cnt::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--attn); -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat; }
.cnt.ask::before { background: var(--ask); -webkit-mask-image: var(--g-ask); mask-image: var(--g-ask); }
.frac b { font-weight: 600; color: var(--ink); }
.nums small.pick { color: var(--ink2); }
.now-cls { display: flex; gap: 2px 10px; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.now-cls:empty { display: none; }
/* 넓은 화면: 숫자는 첫 줄 오른쪽, 반 바로가기는 그 아래 (마감 줄과 나란히) → 오른쪽 끝이 늘 맞아요 */
@media (min-width: 821px) {
  .now-pie, .now-title { grid-row: span 2; }
  .now-row .nums { grid-column: 3; grid-row: 1; align-self: end; text-align: right; }
  .now-row .now-cls { grid-column: 3; grid-row: 2; align-self: start; }
  .now-row:has(.now-cls:empty) .nums { grid-row: 1 / span 2; align-self: center; }
}
.now-cls a { white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--mute); text-decoration: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .now-cls a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.all-tasks > summary { display: flex; align-items: center; gap: 8px; padding: 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--ink2); width: fit-content; }
.all-tasks > summary::-webkit-details-marker { display: none; }
.all-tasks[open] > summary::before { transform: rotate(90deg); }
@media (hover: hover) { .all-tasks > summary:hover { color: var(--ink); } }
.all-tasks > summary small { font-size: 12px; font-weight: 400; }
.all-tasks[open] > summary { margin-bottom: 16px; }
.todo-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.todo-group { display: grid; gap: 4px; }
.todo-group > .area-head { padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
.todo-list { display: grid; }
.todo-row { padding: 10px 0; display: grid; gap: 8px; border-bottom: 0; }
.todo-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.todo-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .todo-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
.todo-main small { color: var(--mute); font-size: 12px; }
.todo-progress { display: grid; gap: 0; }
.cls-progress {
  display: grid; grid-template-columns: 40px 16px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--a);
  text-decoration: none; font-size: 12px; padding: 4px 6px; margin: 0 -6px; border-radius: var(--r-sm);
}
@media (hover: hover) { .cls-progress:hover { background: var(--hover); } }
.cls-progress .cls { font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.cls-progress .pie { color: var(--a); }
.cls-progress .nums { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cls-progress .nums b { color: var(--ink); font-weight: 600; }
.cls-progress small { color: var(--mute); font-size: 12px; }

/* 학생 */
.people { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.people .detail { position: sticky; padding: 20px var(--pad) 24px; }
.people:not(.has-detail) .detail { box-shadow: none; background: transparent; padding: 8px 0; }  /* 학생을 고르기 전엔 떠 있는 판 없이 한 줄 */
.people .detail .section:first-of-type { padding-top: 6px; }
.people-list { padding: 0; display: grid; gap: 1px; max-height: calc(100vh - 170px); overflow-y: auto; position: sticky; top: 72px; }
.person {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink2);
  font-size: 14px;
}
@media (hover: hover) { .person:hover { background: var(--hover); color: var(--ink); } }
.person[aria-current=true] { background: var(--sel); color: var(--ink); }
.person[aria-current=true] .nm { font-weight: 600; }
.person[aria-current=true] .no { color: var(--ink2); }
.person .no { width: 22px; color: var(--mute); font-size: 12px; text-align: right; }
.person .nm { font-weight: 500; }
.person.out .nm { text-decoration: line-through; color: var(--mute); }
.task-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 2px 6px; margin-inline: -10px; }
.task-chip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--r-sm); position: relative; text-decoration: none; color: var(--ink);
}
@media (hover: hover) { .task-chip:hover { background: var(--hover); } }
.task-chip .nm { font-size: 14px; font-weight: 500; flex-basis: 100%; letter-spacing: -0.01em; word-break: keep-all; }
.task-chip .nm small { margin-left: 5px; white-space: nowrap; }
.chip-area { display: grid; gap: 8px; justify-items: start; }
.chip-area > .task-chips { width: 100%; }
.chip-area + .chip-area { margin-top: 6px; }
.notice-row { display: flex; align-items: center; gap: 10px; padding: var(--panel-pad); background: var(--sunk); color: var(--ink2); border-radius: var(--r-md); font-size: 13px; margin-bottom: 4px; }
.notice-row::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--attn); -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat; }
.materials { list-style: none; margin: 0; padding: 0; display: grid; }
.materials li { padding: 10px 0; border-top: 1px solid var(--rule); display: grid; gap: 4px; }
.m-head { display: flex; align-items: center; gap: 8px; }
.m-date { font-size: 12px; font-weight: 600; color: var(--ink2); width: 42px; }
.m-text { margin: 0; font-size: 14px; line-height: 1.7; }
.m-quote { margin: 0; font-size: 12px; color: var(--mute); }
.material-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.material-add input[type=text] { flex: 1; min-width: 180px; }

/* 관찰 메모: 적는 칸은 입력 상자, 적은 메모는 상자 없이 가는 선으로 나눈 줄 */
.composer { padding: 12px 14px 10px; display: grid; gap: 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); }
.composer:focus-within { border-color: var(--ink2); box-shadow: 0 0 0 3px var(--focus-halo); }
.note-input { border: 0 !important; padding: 0 !important; font-size: 15px; line-height: 1.6; min-height: 72px; resize: none; box-shadow: none !important; }
.composer-foot { display: flex; align-items: center; gap: 10px; }
.hint { font-size: 12px; color: var(--mute); }
.note-tools:empty { display: none; }
.note-list { display: grid; gap: 0; border-top: 1px solid var(--line2); }
.note { padding: 16px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--rule); }
/* 메모마다 있는 다시 정리·지우기·고치기는 그 메모에 마우스를 올리거나 초점이 들어올 때만 */
@media (hover: hover) {
  .note .note-head .btn, .note-items .btn { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
  .note:is(:hover, :focus-within) .btn { opacity: 1; }
}
.note-head { display: flex; align-items: center; gap: 8px; }
.note-head time { font-size: 12px; color: var(--mute); }
.note-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.note-items { list-style: none; margin: 0; padding: 4px 0 0 16px; display: grid; gap: 6px; }
.note-items li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 8px; font-size: 13px; }
/* 줄 끝의 테두리 없는 단추는 글자가 줄 오른쪽 선에 */
:is(.note-head, .note-items li, .act-top) > .btn.ghost:last-child { margin-right: -10px; }
.note-items .m-text { font-size: 13px; color: var(--ink2); }
.note-items .chip { justify-self: start; }
.who-link { font-weight: 600; font-size: 13px; color: var(--ink); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { a.who-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.pending { padding: 4px 0 0 16px; display: grid; gap: 6px; }
.pending-q { display: flex; align-items: center; gap: 8px; font-size: 13px; }
/* 오늘 챙길 것 (할 일 줄) + 다가오는 일 (Things의 캘린더 일정처럼 옅은 회색 판 하나) */
.brief { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--section); align-items: start; }
.brief-main { display: grid; gap: 4px; align-content: start; }
.brief-main > .brief-head { padding-bottom: 6px; border-bottom: 1px solid var(--line2); margin-bottom: 2px; }
.brief-side { padding: var(--panel-pad); background: var(--sunk); border-radius: var(--r-md); display: grid; gap: 0; align-content: start; }
.brief-side > p.small { margin: 0; }  /* 캘린더를 아직 잇지 않았거나 일정이 없을 때의 한 줄 */
.brief-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brief-head small { font-size: 12px; }
.brief-lines { display: grid; gap: 0; }
/* 한 줄: 회색 표시 + 짧은 제목과 회색 한 줄 + 마감이면 오른쪽에 남은 날 (Things의 할 일 줄처럼, 줄 사이 선 없이) */
.brief-line {
  display: grid; grid-template-columns: var(--ic-slot) minmax(0, 1fr) auto; column-gap: var(--ic-gap); align-items: start;
  padding: 8px; margin: 0 -8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; position: relative;
}
.brief-ic { width: 16px; height: 16px; margin-top: 3px; justify-self: center; background: var(--icon-nav); -webkit-mask: var(--g-info) center / 16px no-repeat; mask: var(--g-info) center / 16px no-repeat; }
.brief-ic:is(.k-event, .k-due, .k-task) { -webkit-mask-image: var(--g-cal); mask-image: var(--g-cal); }
.brief-ic.k-ask { background: var(--ask); -webkit-mask-image: var(--g-ask); mask-image: var(--g-ask); }
.brief-line .tx { display: grid; gap: 1px; min-width: 0; }
.brief-line .tx b { font-size: var(--fs-row); font-weight: 500; letter-spacing: var(--ls-row); }
.brief-line .tx small { font-size: var(--fs-meta); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief-line > .dd { align-self: center; }

@media (hover: hover) { a.brief-line:hover { background: var(--hover); } }
/* 남은 날 칩 (Things의 날짜 칩): 옅은 회색 네모, 사흘 안이나 지난 것은 빨강 글자 */
.dd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--mid);
  font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: start; }
.dd.hot { color: var(--attn); }
.brief-rest summary { font-size: 13px; color: var(--mute); cursor: pointer; padding: 6px 0 0; }
@media (hover: hover) { .brief-rest summary:hover { color: var(--ink); } }
.small { font-size: 12px; }
.upcoming, .event-list { list-style: none; margin: 0; padding: 0; display: grid; }
.upcoming li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 0; font-size: 13px; }
.upcoming .when, .event-list .when { color: var(--ink2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.upcoming .when { font-weight: 500; color: var(--mute); }
.upcoming .what, .event-list .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.upcoming .dd { font-weight: 500; color: var(--mute); background: none; padding: 0; height: auto; }
.upcoming li.k-due .what { font-weight: 600; color: var(--ink); }
.upcoming .dd.hot { color: var(--attn); font-weight: 600; }  /* 마감 사흘 안쪽만 빨강 */

/* 구글 연결 */
.g-rows { display: grid; }
.g-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.g-row:first-child { border-top: 0; padding-top: 2px; }
.g-name { display: grid; gap: 2px; }
.g-name b { font-size: 14px; font-weight: 500; }
.g-name small { font-size: 12px; }
.g-name .ok { justify-self: start; }
.g-body { display: grid; gap: 6px; min-width: 0; }
.g-body p { margin: 0; font-size: 13px; }
.g-body code { font-family: var(--mono); font-size: 12px; background: var(--sunk); border-radius: var(--r-sm); padding: 2px 6px; word-break: break-all; }
.g-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.inline-form { display: flex; gap: 6px; }
.field em.src { color: var(--mute); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field em.src.manual { color: var(--ink2); }
.sub-label { margin: 4px 0 -4px; font-size: 12px; }
.date-grid.due { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.events-body { max-height: 360px; overflow: auto; }
.event-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.event-list li select { height: 28px; font-size: 12px; }
.event-list.pick li { grid-template-columns: minmax(0, 1fr) auto; }
.event-list.pick label { display: grid; grid-template-columns: auto 120px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.event-list.pick li.exists { opacity: 0.55; }
.gcal-list { max-height: 52vh; overflow: auto; border: 1px solid var(--line2); border-radius: var(--r-md); padding: 4px 12px; }
/* 달마다 묶은 일정 */
.gcal-list { padding: 0 12px; position: relative; }
/* 고를 일정이 없으면 빈 글 상자 대신 옅은 회색 판 한 줄 */
.gcal-list:has(> .placeholder:only-child) { border: 0; padding: 0; }
.gcal-list > .placeholder { margin: 0; }
.month-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; background: var(--card); border-bottom: 1px solid var(--line2); }
.month-head b { font-size: 13px; font-weight: 600; }
.month-head small { font-size: 12px; }
.month .event-list li:first-child { border-top: 0; }
.month.before .month-head b { color: var(--mute); }
.event-list li.past .what, .event-list li.past .when { color: var(--mute); }
.events-body .month-head { background: var(--card); }
.year-list { max-height: 60vh; }
.text-btn { border: 0; background: none; padding: 0; border-radius: var(--r-xs); font-size: 13px; font-weight: 500; color: var(--mute); text-decoration: none; }
@media (hover: hover) { .text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.pending-q b { color: var(--ink); font-weight: 600; }
.cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cands input { width: 180px; padding: 4px 10px; font-size: 12px; }

/* 설정 */
/* 설정: 상자 없이 묶음 제목 + 가는 선, 항목 사이는 옅은 선 */
.set-card { padding: 16px 0; display: grid; gap: 12px; border-top: 1px solid var(--rule); }
.set-group-head + .set-card { border-top: 0; padding-top: 12px; }
.set-jump { position: sticky; top: 0; z-index: 4; display: flex; gap: 2px; flex-wrap: wrap; padding: 8px 0; margin: -8px 0 0; background: var(--bg); }
/* 바로가기: 글자만, 지금 보고 있는 묶음은 회색 칠 + 진한 글자 */
.set-jump .tab { background: transparent; }
@media (hover: hover) { .set-jump .tab:hover { background: var(--hover-strong); color: var(--ink); } }
.set-jump .tab[aria-current=true] { background: var(--sel); color: var(--ink); }
.set-group { display: grid; gap: 0; scroll-margin-top: 56px; }
.set-card[id] { scroll-margin-top: 56px; }
.set-group + .set-group { margin-top: 28px; }
.set-group-head { display: grid; gap: 2px; padding: 0 0 8px; border-bottom: 1px solid var(--line2); }
.set-group-head h2 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--ls-h1); line-height: var(--lh-head); }
.set-card > p { margin: 0; font-size: 13px; }
.set-card > p.mute.small { font-size: 13px; }
.set-head { display: flex; align-items: center; gap: 10px; }
.date-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.date-grid .field em { display: block; margin: 2px 0 0; font-size: 12px; }
.set-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.preview { margin: 0; font-size: 12px; }
.set-list { list-style: none; margin: 0; padding: 0; display: grid; }
.letter-fields { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; }
.letter-fields .field:not(:first-child) { grid-column: 1 / -1; }
/* 편지마다 첫인사·끝인사 한 벌 (담임 가정통신문 전반기·후반기) */
.letter-set { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.letter-set.one { padding-top: 0; border-top: 0; }
.letter-set textarea { min-height: 40px; resize: none; overflow: hidden; }
.letter-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.letter-head b { font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--ls-row); }
.letter-head small { color: var(--mute); }
.set-list li { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.set-list .g-act { flex: none; }
/* 줄 끝의 테두리 없는 단추는 글자가 줄 오른쪽 선에 */
.set-list li > .g-act, .set-list li > .btn.ghost.sm:last-child { margin-right: -10px; }
.set-more summary { font-size: 12px; color: var(--mute); cursor: pointer; }
.set-more[open] summary { margin-bottom: 6px; }
.key-box { background: var(--sunk); border-radius: var(--r-md); padding: var(--panel-pad); display: grid; gap: 8px; font-size: 13px; }
.key-box p { margin: 0; color: var(--ink2); }
.key-box code, .howto code { font-family: var(--mono); font-size: 12px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-sm); padding: 2px 6px; word-break: break-all; }
.key-box code { display: block; padding: 8px 10px; font-size: 13px; }
.key-box .row { display: flex; gap: 6px; }
.howto { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--ink2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.key-grid input { font-family: var(--mono); font-size: 12px; }
.stack-sm { display: grid; gap: 10px; }
/* 로그인 비밀번호: 칸 아래 안내와 알림은 붙여서, 알림이 없을 때는 자리도 없이 */
.pw-grid + p.mute.small { margin: -4px 0 0; }
.pw-err { margin: 0; font-size: 13px; color: var(--attn); }
.pw-err:empty { display: none; }
.pw-done { margin: 0; font-size: 13px; color: var(--ink2); }
.link-opts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.link-opts select { height: 28px; padding: 0 30px 0 10px; font-size: 12px; }
.chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ink2); }
dialog .quote { margin: 0; font-size: 12px; }

/* 대화상자, 알림 ---------------------------------------------------- */
dialog {
  border: 0; border-radius: var(--r-xl); padding: 24px; width: min(560px, calc(100vw - 32px));
  background: var(--card); color: var(--ink); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); box-shadow: var(--shadow-pop);
}
dialog.wide { width: min(1080px, calc(100vw - 32px)); }
dialog.mid { width: min(760px, calc(100vw - 32px)); }
dialog::backdrop { background: var(--backdrop); }
dialog:focus { outline: none; }  /* 휴대폰에서 상자 자체에 초점을 둘 때 (칸에 저절로 초점이 가지 않게) */
dialog h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
dialog p { margin: 0 0 14px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
dialog textarea { display: block; min-height: 160px; }
dialog .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 16px; }  /* 단추는 늘 오른쪽 끝, 위 내용과 16 */
dialog .row-actions > .btn.ghost:first-child { margin-left: -14px; }  /* 테두리 없는 첫 단추는 글자가 내용 왼쪽 선에 */
dialog .hint { font-size: 12px; color: var(--mute); }

.activity-form { display: grid; gap: 12px; }
.activity-form h3 { margin: 0; }
.activity-form > .row-actions { margin-top: 4px; }  /* 칸 사이 12 + 4 = 16 */
.activity-form .seg { justify-self: start; }
.activity-form textarea { min-height: 70px; }
.hints { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.hints legend { font-size: 12px; margin-bottom: 5px; padding: 0; }
.hints legend em { font-style: normal; color: var(--mute); font-weight: 400; margin-left: 6px; }
.hints label { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 6px; }
.hints b { font-size: 12px; font-weight: 600; text-align: center; }
.hints input { padding: 6px 10px; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.fill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); border-top: 1px solid var(--rule); padding-top: 12px; }
.fill span { margin-right: 4px; }
.act-more { border-top: 1px solid var(--line2); padding-top: 10px; }
.act-more summary { font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.act-more summary em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--mute); margin-left: 6px; }
.act-more[open] summary em { display: none; }
.act-more-body { display: grid; gap: 12px; padding-top: 12px; }
/* 함께 쓰는 카드, 캘린더 일정에서 만든 카드, 생활기록부에 쓰지 않는 이름: 조용한 한 줄 */
.activity-form .act-share { margin: -6px 0 0; font-size: 13px; color: var(--mute); }
.field-note { font-size: 12px; line-height: 1.5; color: var(--mute); }
.field-note + .field-note { margin-top: -2px; }


.style-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.style-cols textarea { min-height: min(380px, calc(100vh - 330px)); font-size: 13px; }
#style-raw { font-size: 12px; line-height: 1.6; white-space: pre; tab-size: 6; }
.style-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-size: 12px; color: var(--ink2); background: var(--mid); border-radius: var(--r-xs); padding: 0 7px; display: inline-flex; gap: 5px; white-space: nowrap; }
.chip b { color: var(--mute); font-weight: 500; }

/* 출결 */
.attend-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.attend-head h3 { margin: 0 10px 0 0; }
.attend-head select { flex: 1; min-width: 0; font-weight: 500; }
.attend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; max-height: 54vh; overflow: auto; padding: 2px; }
.att {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line2);
  border-radius: var(--r-md); background: var(--card); text-align: left; font-size: 14px; color: var(--ink);
}
@media (hover: hover) { .att:hover { border-color: var(--border); background: var(--hover); } }
.att .no { color: var(--mute); font-size: 12px; min-width: 18px; font-variant-numeric: tabular-nums; }
.att .nm { font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att small { display: none; font-size: 12px; color: var(--ink2); font-weight: 600; }
.att[aria-pressed=true] { background: var(--mid); border-color: var(--line2); }
.att[aria-pressed=true] .nm { color: var(--mute); }
.att[aria-pressed=true] small { display: inline; }

/* 학생별 체험: 번호, 이름, 체험한 직업, 보고서 우수 */
.exp-list { list-style: none; margin: 0; padding: 0 2px 2px; scroll-padding-top: 36px; display: grid; max-height: 54vh; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.exp-row { display: grid; grid-template-columns: 24px minmax(0, 104px) minmax(0, 1fr) 72px; align-items: center; gap: 10px; padding: 4px 2px; border-top: 1px solid var(--rule); }
.exp-row:first-child { border-top: 0; }
.exp-head { position: sticky; top: 0; z-index: 1; background: var(--card); padding-block: 0 6px; font-size: 12px; border-bottom: 1px solid var(--line2); }
.exp-head .no { font-size: 12px; }
.exp-head span:last-child { text-align: center; }
.exp-head span:nth-child(3) { padding-left: 11px; }
.exp-head + .exp-row { border-top: 0; }
.exp-best { justify-content: center; }
.exp-best span { display: none; }
.exp-row .no { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.exp-row .nm { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; }
.exp-row .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-row .nm small { flex: none; font-size: 12px; font-weight: 400; color: var(--mute); }
.exp-row.absent .nm span { color: var(--mute); }
.exp-row .chk { font-size: 12px; white-space: nowrap; }

/* 활동 목록 붙여 넣기 */
#paste-text { font-size: 12px; line-height: 1.6; white-space: pre; tab-size: 8; min-height: 380px; }
.paste-preview { border: 1px solid var(--line2); border-radius: var(--r-md); height: 380px; overflow: auto; padding: 4px 14px; }
.paste-preview > p { margin: 12px 0; font-size: 13px; }
.paste-items { margin: 0; padding: 0; list-style: none; }
.paste-items li { padding: 9px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.pi-head { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pi-head b { font-weight: 600; font-size: 13px; }
.pi-head small { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pi-head small.warn { color: var(--ink2); }
.pi-head small.why { white-space: normal; min-width: 0; }  /* 못 찾은 까닭은 길 수 있어 줄을 바꿔요 */
.paste-items p { margin: 0; font-size: 12px; color: var(--ink2); }
.paste-skipped { margin: 10px 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; }
.paste-skipped li { display: flex; gap: 8px; color: var(--mute); min-width: 0; }
.paste-skipped span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-skipped small { color: var(--ink2); white-space: nowrap; }
.pi-head small.tag { color: var(--ink2); background: var(--mid); border-radius: var(--r-xs); padding: 0 7px; }
.paste-notes { margin: 12px 0 4px; font-size: 12px; }
.paste-notes b { font-weight: 600; font-size: 12px; }
.paste-notes ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.paste-notes li { display: flex; gap: 8px; min-width: 0; color: var(--ink2); }
.paste-notes li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paste-notes li small { color: var(--ink2); white-space: nowrap; }

/* 임원 화면 */
.roles-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.roles-nav .classes { margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line2); }  /* 영역과 반 사이는 업무 머리처럼 세로 선 하나 */
/* 담임·미술 고르기: 반 고르기와 같은 회색 알약, 앞에 16px 영역 색 아이콘 */
.area-switch { gap: 6px; }
.roles-nav > .area-switch:first-child { margin-left: 0; }
.area-switch:not([aria-current=true]) .area-ic { opacity: .7; }
.roles-feeds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.roles-feeds .label { margin-right: 2px; }
.roles-feeds .feed {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 0; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 500; color: var(--ink2); text-decoration: none; background: var(--mid); white-space: nowrap;
}
@media (hover: hover) { .roles-feeds .feed:hover { color: var(--ink); background: var(--hover); } }
.roles-feeds .hint { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--mute); }
.roles-card { overflow-x: auto; }
.roles-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.roles-grid th {
  text-align: left; font-size: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.roles-grid td { padding: 6px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
.roles-grid tbody tr:nth-child(5n + 1):not(:first-child) td { border-top-color: var(--rule-strong); }
.roles-grid tbody tr:first-child td { border-top: 0; }
.roles-grid .c-no { width: 44px; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roles-grid .c-name { width: 96px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.roles-grid .c-term { min-width: 150px; }
.role-term { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 30px; }
.role-term .person-chip { white-space: nowrap; }
select.role-add {
  width: auto; height: 26px; padding: 0 8px; font-size: 12px; color: var(--mute); border: 1px solid transparent;
  background: none; border-radius: var(--r-sm); appearance: none; cursor: pointer;
}
select.role-add:focus-visible { border-color: var(--border); color: var(--ink); background: var(--card); }
@media (hover: hover) {
  select.role-add:hover { border-color: var(--border); color: var(--ink); background: var(--card); }
  .roles-grid select.role-add { color: var(--mute); }
  .roles-grid tr:hover select.role-add, .roles-grid select.role-add:focus-visible { color: var(--ink2); }
  .roles-grid select.role-add:hover { color: var(--ink); }
}
/* 줄마다 되풀이되는 '+ 정하기'와 ×는 그 줄에 마우스를 올리거나 초점이 들어올 때만 (터치·휴대폰은 늘 보여요) */
@media (hover: hover) and (min-width: 821px) {
  .roles-grid select.role-add, .role-term .person-chip button { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
  .roles-grid tr:is(:hover, :focus-within) :is(select.role-add, .person-chip button) { opacity: 1; }
  /* 아무도 정하지 않은 표는 첫 줄의 '+ 정하기'만 늘 보여 고칠 수 있는 표인 줄 알게 */
  .roles-grid.blank tbody tr:first-child select.role-add { opacity: 1; }
  /* × 자리는 비워 둔 채(줄이 흔들리지 않게) 회색 알약만 이름 둘레로: 2 + 22 + 4 - 10 = 18 */
  .role-term .person-chip { position: relative; isolation: isolate; background: transparent; }
  .role-term .person-chip::before { content: ""; position: absolute; inset: 0 18px 0 0; z-index: -1; border-radius: 999px; background: var(--mid); transition: right var(--dur-1) var(--ease); }
  .roles-grid tr:is(:hover, :focus-within) .role-term .person-chip::before { right: 0; }
}
@media (min-width: 821px) { .role-term > select.role-add:first-child { margin-left: -8px; } }  /* 빈 칸의 '+ 정하기' 글자가 칸 머리와 같은 선에 */
input.role-input { width: 120px; height: 26px; padding: 0 8px; font-size: 12px; }  /* 표 칸 안이라 입력 칸 높이(32)보다 낮게 */
.roles-duties { padding: 16px 0 0; display: grid; gap: 4px; border-top: 0; }
.roles-duties .section-head { margin-bottom: 6px; }
.duty-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rule); }
.duty-name { display: grid; gap: 1px; padding-top: 6px; }
.duty-name b { font-size: 13px; font-weight: 600; }
.duty-name small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.duty-row textarea { font-size: 13px; min-height: 34px; resize: none; }
/* 맡은 일은 글처럼: 마우스를 쓰는 화면에서는 테두리 없이, 올리면 옅은 바닥, 누르면 입력 칸 (손가락 기기는 테두리 그대로) */
@media (hover: hover) {
  .duty-row textarea { border-color: transparent; background: transparent; }
  .duty-row textarea:hover { background: var(--hover); }
  .duty-row textarea:focus { border-color: var(--ink2); background: var(--card); }
}
.person-chip {
  display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px;
  background: var(--mid); color: var(--ink); font-size: 13px; font-weight: 500;
}
.person-chip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
@media (hover: hover) { .person-chip button:hover { background: var(--hover-strong); } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  display: flex; align-items: center; gap: 8px;
  background: var(--toast); color: var(--on-toast); padding: 10px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); z-index: 40;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 안 된 일도 같은 어두운 띠에 빨강 ! 하나만 (빨간 판은 쓰지 않아요) */
.toast.err { background: var(--toast); color: var(--on-toast); }
.toast.err::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--toast-attn);
  -webkit-mask: var(--g-attn) center / 16px no-repeat; mask: var(--g-attn) center / 16px no-repeat;
}
/* PC에서는 왼쪽 목록을 뺀 본문 가운데에. 대화 상자 안에 띄운 알림(toast())은 상자 가운데 그대로 */
@media (min-width: 901px) { #app:not([hidden]) ~ .toast { left: calc(var(--side-w) + (100vw - var(--side-w)) / 2); } }

/* 좁은 화면 -------------------------------------------------------- */
@media (max-width: 1400px) {
  :root { --detail-w: 430px; }
  /* 학교 PC(1366)에서 복사·다시 쓰기·확정 취소·다음 학생이 한 줄에 들어가게 (학생별 보기 판도 같은 안쪽 여백) */
  .detail { --pad: 16px; }
}
@media (max-width: 1200px) {
  .people { grid-template-columns: 1fr; }
  .people.has-detail .people-list { display: none; }
  .people:not(.has-detail) .detail { display: none; }
  .people-list { position: static; max-height: none; }
  .todo-groups { grid-template-columns: 1fr; }
  .main, .main.has-detail { grid-template-columns: minmax(0, 1fr); }
  .main.has-detail .grid-card { display: none; }
  /* 학생 글이 표 자리를 차지할 때는 업무 머리를 접어 글이 바로 보이게 (업무 이름은 맨 위 '<' 단추에). 학생별 보기도 같은 모양 */
  #view-board:has(.main.has-detail:not([hidden])) .bar { display: none; }
  #view-board:has(.main.has-detail:not([hidden])) .main { padding-top: 24px; }
  #view-students:has(.people.has-detail) .page-head { display: none; }
  /* 페이지가 내려가니 칸 안 스크롤은 끄고, 복사·확정 줄이 화면 아래에 붙게 */
  .detail { position: static; max-height: none; overflow: visible; --pad: 16px; }
  .back { display: inline-flex; }
  .close { display: none; }
}
@media (max-width: 820px) {
  .block-head { flex-wrap: wrap; row-gap: 2px; }
  .block-name { white-space: normal; }
  .block-head > .btn:last-child { margin-left: auto; }
  .page { padding: 16px 16px 40px; }
  .date-grid, .date-grid.due { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .review-hint { margin-top: -4px; }
  .review-filter { margin-top: -2px; }
  .g-row { grid-template-columns: 1fr; gap: 8px; }
  .key-grid { grid-template-columns: 1fr; }
  .g-act { justify-content: flex-start; }
  /* 명단 확인의 그대로·전입·전출은 이름 아래 줄로, 첫 단추 글자가 이름과 같은 왼쪽 선에 */
  .set-list li > .g-act { flex-basis: 100%; margin-left: -10px; margin-right: 0; }
  /* 밀어 넣은 학생 화면: '< 업무 이름' 줄은 위쪽 막대 바로 아래에 (업무에서 열어도, 학생별 보기에서 열어도 같은 자리) */
  .main.has-detail .detail .pbody { padding-top: 4px; }
  #view-students:has(.people.has-detail) .page { padding-top: 4px; }
  #view-students .people.has-detail .detail { padding-top: 0; }
  /* 일정 한 줄: 왼쪽에 날짜와 이름 두 줄, 오른쪽에 종류 고르기 (세 줄로 쌓지 않게) */
  .event-list li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .event-list li > .when { grid-column: 1; }
  .event-list li > small:empty { display: none; }
  .event-list li > select { grid-column: 2; grid-row: 1 / span 2; width: auto; min-width: 96px; }
  .event-list.pick label { grid-template-columns: auto minmax(0, 1fr); }
  .event-list.pick label .when { grid-column: 2; }
  .brief-line .tx small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* 휴대폰도 PC처럼 이름과 마감 한 줄씩, 개수는 첫 줄 오른쪽에. 반 바로가기만 그 아래 */
  .now-row { grid-template-columns: var(--ic-slot) minmax(0, 1fr) auto; gap: 2px var(--ic-gap); padding: 10px 8px; }
  .now-pie { grid-row: span 2; }
  .now-row .nums { grid-column: 3; grid-row: 1; white-space: nowrap; justify-content: flex-end; }
  .now-row .now-cls { grid-column: 2 / span 2; justify-content: flex-start; }
  .note-items li { grid-template-columns: auto 1fr auto; }
  .note-items li .m-text { grid-column: 1 / -1; grid-row: 2; }
  .two { grid-template-columns: 1fr; }
  .composer-foot .keys { display: none; }
  .m-head { flex-wrap: wrap; }
  .mark-head { flex-wrap: wrap; row-gap: 6px; }
  .mark-title { flex-basis: 100%; }
  .mark.stacked .mark-head { flex-wrap: nowrap; }
  .mark.stacked .mark-title { flex: 1 1 auto; flex-basis: auto; min-width: 0; }
  .conn .pill { max-width: 170px; }
  .bar { padding: 16px 16px 10px; gap: 12px; }
  .bar-titles { flex-basis: 100%; gap: 4px; }
  .title small { font-size: var(--fs-h2); margin-left: 6px; }
  .bar-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .bar-row::-webkit-scrollbar { display: none; }
  .filters { flex-wrap: nowrap; }
  .filter { flex: none; }
  .main { padding: 0 16px 24px; }
  .task-page { padding: 4px 16px 24px; }
  .act-list { grid-template-columns: minmax(0, 1fr); }
  .act-add-row .act-add { flex: 1 1 100%; }
  .views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .views::-webkit-scrollbar { display: none; }
  .views { gap: 16px; }
  .views .rtab[data-view=style] b { display: none; }
  /* 검토: 상태 탭과 업무 거르기는 한 줄로 밀어 보기 */
  .page > .review-tabs, .review-filter-area { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .page > .review-tabs::-webkit-scrollbar, .review-filter-area::-webkit-scrollbar { display: none; }
  .page > .review-tabs { gap: 16px; }
  .review-filter-area { justify-self: stretch; }
  .review-filter-area > * { flex: none; }
  .grid-scroll { max-height: none; }
  .grid .c-draft { width: 120px; min-width: 120px; }
  .people .detail { padding: 16px 0; box-shadow: none; border-radius: 0; background: transparent; }
  .style-cols { grid-template-columns: 1fr; }
  .grid .c-hope { width: 110px; max-width: 110px; }
  .style-cols textarea { min-height: 200px; }
  .grid-foot .keys { display: none; }
  .duty-row { grid-template-columns: 1fr; gap: 4px; }
  .roles-grid th, .roles-grid td { padding: 6px 4px; }
  .roles-grid th:first-child, .roles-grid td:first-child { padding-left: 10px; }
  .roles-grid .c-no { width: 28px; }
  .roles-grid .c-name { width: 52px; }
  .roles-grid .c-term { min-width: 0; }
  .role-term .person-chip { padding-left: 8px; letter-spacing: -0.02em; }
  .role-term .person-chip button { width: 18px; }
  .role-term .person-chip { padding-left: 8px; }
  /* 칩이 있는 칸의 '+'는 칸 빈 곳을 덮는 보이지 않는 단추로: 줄이 두 줄로 늘지 않게 */
  .role-term:has(.person-chip) { position: relative; }
  /* 칸 어디를 눌러도 한 사람 더 고르기, × 만 빼기 */
  .role-term:has(.person-chip) .person-chip { position: static; z-index: auto; }
  .role-term:has(.person-chip) select.role-add { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; }
  .role-term:has(.person-chip) .person-chip button { position: relative; z-index: 2; }
  .role-term:has(.person-chip):has(> select.role-add:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-sm); }
  /* 빈 칸: 고르기 상자는 칸을 덮는 투명 단추로, '+ 정하기'는 작은 회색 글자로 (표가 카드보다 넓어지지 않게) */
  .roles-grid .c-no { display: none; }
  .role-term:not(:has(.person-chip)):not(:has(input)) { position: relative; }
  .role-term:not(:has(.person-chip)):not(:has(input))::before { content: "+ 정하기"; font-size: 12px; color: var(--mute); padding: 0 6px; white-space: nowrap; }
  .role-term:not(:has(.person-chip)):not(:has(input)) select.role-add { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .role-term:not(:has(.person-chip)):has(> select.role-add:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-sm); }
  .roles-nav .classes { margin-left: 0; padding-left: 0; border-left: 0; }
  .attend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 60vh; }
  #paste-text, .paste-preview { min-height: 180px; height: 220px; }
  .attend-head h3 { margin-right: 4px; }
  .act-add { grid-template-columns: minmax(0, 1fr) auto; }
  .act-add input:first-child { grid-column: 1 / -1; }
}

/* 높이가 낮은 학교 컴퓨터 화면(1366×768 등): 왼쪽 목록을 촘촘하게 해서 설정까지 한눈에 */
@media (max-height: 860px) and (min-width: 901px) {
  /* 학교 PC(1366×768, 창 안 높이 약 657)에서 왼쪽 목록이 스크롤 없이 다 들어가게 */
  .side-head { padding: 10px 10px 6px 16px; }
  .nav { gap: 12px; padding-bottom: 4px; }  /* 묶음 사이 12: 1366×657에서 마지막 줄 아래 약 20px이 남아요 (바쁜 학기에 넘치면 10) */
  .nav-areas { gap: 12px; }
  .nav-item, .nav-area-head { min-height: 28px; }
  :is(.nav-more > summary, .nav-more-btn) { min-height: 24px; }
  .side-foot { padding: 6px 12px 8px; }
  /* 업무 머리도 줄여서 표가 더 위에서 시작하게 */
  .bar { gap: 8px; padding: 16px 32px 10px; }
  .bar-titles { gap: 2px; }
  .bar .views { margin-top: 0; }
  /* 다른 화면 제목도 같은 높이(y=16)에서 시작해 화면을 옮겨도 제목이 뛰지 않게 */
  .page { padding-top: 16px; }
  .page-titles { gap: 2px; }
}

/* 휴대폰: 왼쪽 목록은 위쪽 막대(이름과 메모 버튼)로 줄이고, 아래 탭의 '메뉴'를 누르면 목록 전체를 한 판으로 펼쳐요 (Things의 목록 첫 화면처럼) */
@media (max-width: 900px) {
  /* 아이폰의 노치·홈 막대 자리(viewport-fit=cover)는 막대 안쪽 여백으로 비워요 */
  .shell { display: block; padding-bottom: calc(52px + env(safe-area-inset-bottom)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .side { position: sticky; top: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--line2); background: var(--bg); padding-top: env(safe-area-inset-top); }
  .side-head { padding: 6px 12px 6px 16px; }
  .neis-next { top: calc(57px + env(safe-area-inset-top)); box-shadow: 0 -12px 0 0 var(--bg); }  /* 위쪽 막대에 바로 붙고, 판 위 둥근 모서리 틈으로 뒤 글이 비치지 않게 */
  /* 설정 바로가기 줄은 위쪽 막대(높이 57) 바로 아래에 붙고, 묶음 제목은 두 막대 아래로 */
  .set-jump { top: calc(57px + env(safe-area-inset-top)); }
  .set-group, .set-card[id] { scroll-margin-top: calc(130px + env(safe-area-inset-top)); }
  .brand { font-size: 17px; }
  /* 메모 단추는 글자 그대로, 누르는 높이만 44 (글자 끝이 화면 오른쪽 16px 선에) */
  .memo-btn { height: 44px; padding: 0 12px 0 8px; margin-right: -8px; font-size: 14px; }
  .shell:has(#view-notes:not([hidden])) .memo-btn { visibility: hidden; }  /* 관찰 메모 화면에는 쓰는 칸이 바로 있어요 */
  .side .nav, .side .side-foot { display: none; }
  /* 메뉴 판: 위·아래 막대와 같은 바탕색 한 장 (밝은 화면은 흰색) */
  .side.open { position: fixed; inset: 0 0 calc(52px + env(safe-area-inset-bottom)) 0; z-index: 8; background: var(--bg); border-bottom: 1px solid var(--line2); }
  .bottom-bar, .side.open { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #app:has(.side.open) .bottom-bar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .side.open .nav { display: grid; padding: 4px 8px 28px; gap: 12px; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
  .side.open .side-foot { display: flex; border-top: 0; }
  /* 메뉴 판: 오늘·검토·관찰 메모는 아래 탭에 있으니 빼고, 학생별 보기·임원·설정을 맨 위에 (PC 옆 목록처럼 줄, 개수는 오른쪽 끝) */
  .side.open .nav > .nav-group:first-child { display: none; }
  .side.open .nav > .nav-group:last-child { order: -1; }
  .side.open .nav > .nav-group:last-child a[data-view=notes] { display: none; }
  .side.open .nav-item, .side.open .nav-area-head { min-height: 44px; font-size: 16px; gap: 12px; padding: 0 10px; }
  .side.open .nav-item.task { font-size: 16px; }
  .side.open .nav-area-head b { font-size: 16px; }
  .side.open .nav-more > summary { min-height: 40px; padding: 0 10px; font-size: 14px; gap: 12px; }
  .detail { top: 64px; max-height: none; }
  /* 휴대폰에서 학생 글은 화면 전체: 떠 있는 판 대신 바탕 그대로 */
  .main .detail { box-shadow: none; border-radius: 0; background: transparent; }
  .main .detail .pbody { padding-inline: 0; --pad: 16px; }
  /* 복사·확정 줄은 화면 맨 아래에 붙어요 (아래 탭은 접혀요). 두 줄이 되면 확정·다음 학생은 오른쪽 끝에, 글을 고치는 동안에는 제자리로 */
  .detail .draft-actions { margin-inline: -16px; padding-inline: 16px; box-shadow: 0 -1px 0 var(--line2); }
  .main .detail .draft-actions { background: var(--bg); }  /* 바탕과 같은 색 + 위 선 (가운데 다른 색 띠가 생기지 않게) */
  html:has(#view-board:not([hidden]) .main.has-detail:not([hidden])) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .detail:has(textarea:focus) .draft-actions { position: static; }
  /* 학생 글을 열면 iOS의 밀어 넣은 화면처럼 도구 막대는 하나: 아래 탭은 접고 복사·확정 줄이 맨 아래에 (돌아가기는 맨 위 '<') */
  .shell:has(#view-board:not([hidden]) .main.has-detail:not([hidden])) .bottom-bar { display: none; }
  .shell:has(#view-board:not([hidden]) .main.has-detail:not([hidden])) { padding-bottom: env(safe-area-inset-bottom); }
  .shell:has(#view-board:not([hidden]) .main.has-detail:not([hidden])) .detail .draft-actions { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  #view-board:has(.main.has-detail:not([hidden])) .main { padding-top: 0; }  /* 바탕 그대로인 학생 글은 제 안쪽 여백으로 */
  .bottom-bar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    background: var(--bg); border-top: 1px solid var(--line2); padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-bar a, .bottom-bar button {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: 52px; border: 0; background: none;
    text-decoration: none; font-size: 12px; font-weight: 500; color: var(--icon-nav);
  }
  .bottom-bar :is(a, button):active { opacity: .5; }  /* 아래 탭은 판 없이 누르는 동안만 흐리게 (iOS 탭 막대처럼) */
  .bottom-bar [aria-current=true], .bottom-bar [aria-expanded=true] { color: var(--ink); font-weight: 600; }
  /* 메뉴를 펼친 동안에는 메뉴만 진하게 */
  .bottom-bar:has([aria-expanded=true]) a[aria-current=true] { color: var(--icon-nav); font-weight: 500; }
  .bottom-bar:has([aria-expanded=true]) a[aria-current=true] > .ic.r { display: block; }
  .bottom-bar:has([aria-expanded=true]) a[aria-current=true] > .ic.f { display: none; }
  .bottom-bar .badge { position: absolute; top: 2px; left: calc(50% + 7px); box-shadow: 0 0 0 2px var(--bg); }
  .toast { bottom: calc(64px + env(safe-area-inset-bottom)); }  /* 학생 글을 열면 toast()가 복사·확정 줄 바로 위로 올려요 */
}
/* 아이폰처럼 손가락으로 쓰는 기기에만 비치는 막대 (좁은 PC 창에는 쓰지 않아요) */
@media (max-width: 900px) and (hover: none) and (pointer: coarse) {
  .side:not(.open), .bottom-bar { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .bottom-bar .badge { box-shadow: 0 0 0 2px var(--glass); }
}

/* 손가락으로 쓰는 기기에는 키보드 안내를 숨겨요 */
@media (pointer: coarse) { .keys { display: none !important; } }

/* 휴대폰: 자주 누르는 단추는 40px 이상, 입력칸은 16px (아이폰이 확대하지 않게) */
@media (max-width: 900px) and (pointer: coarse) {
  .detail .draft-actions { row-gap: 8px; }
  .rrow-body .btn, .set-list .g-act .btn, .pop-opts .lv { height: 40px; }
  .detail .draft-actions .btn, .rrow-body .btn { padding-inline: 16px; }
  .btn.accent { min-width: 88px; }  /* 40px 높이에서도 '확정' 단추가 넉넉하게 */
  .grid .lv { width: 44px; height: 36px; }
  .btn.sm.icon, .icon-more, .title-row .icon-more { width: 40px; height: 40px; }
  :is(.filter, .tab, .cls-tab, .area-switch) { height: 36px; }
  .cands input { flex: 1 1 180px; min-width: 0; width: auto; }
  .login :is(input, .btn) { height: 44px; }
  input[type=checkbox] { width: 20px; height: 20px; }
  .book-list .btn.icon { width: 40px; height: 40px; }
  .role-term .person-chip button { width: 36px; height: 36px; margin: -5px -6px -5px 0; }
  input.role-input { height: var(--ctl-field); width: 100%; min-width: 96px; }
  .side-foot button.pill { height: var(--ctl-sm); }  /* SEAC 다시 읽기 */
  .check { min-height: var(--ctl-sm); }
  .act-content { padding-block: 7px; }  /* 한 줄 카드 내용도 36px */
  textarea, textarea.block-text, select,
  input:not([type=checkbox]):not([type=radio]) { font-size: 16px !important; }
  /* 손가락으로 누르는 곳은 44px 안팎 (애플 기준): 표 줄, 이름, 초안 칸, 단추, 대화 상자 단추 */
  .grid td { height: 48px; }
  .grid .name, .draft-cell { height: 44px; }
  .grid .name { width: 100%; }  /* 이름 칸 어디를 눌러도 열려요 */
  .event-list li select, .pick-ctl select, .link-opts select { height: var(--ctl-field); }  /* 작은 고르기 상자도 44 */
  .exp-row .chk, .best-chk { min-height: 40px; }
  .person { min-height: 44px; }
  .roles-feeds .feed { height: 32px; }
  .split .btn.more { width: 44px; }
  .seg button, .seg.sm button { height: 36px; }
  .detail .seg button, .detail .seg.sm button { height: 40px; min-width: 44px; }  /* 위 줄보다 뒤에 (학생 창의 수준 고르기는 40) */
  dialog .row-actions .btn { height: 44px; padding-inline: 18px; }
  dialog .row-actions > .btn.ghost:first-child { margin-left: -18px; }
  .text-btn { padding: 10px 4px; margin: -10px -4px; }
  /* 작은 글 단추(펼치기, 메모의 학생 이름, 반 바로가기)는 보이는 자리 그대로 누르는 곳만 위아래로 넓게. 겹쳐 쌓인 반 진행 줄은 제 높이를 늘려요 */
  :is(.act-more, .acts-help, .set-more, .all-tasks, .issues li details, details.section) > summary, a.who-link, .now-cls a { padding-block: 10px; margin-block: -10px; }
  .brief-rest > summary { padding-block: 16px 10px; margin-block: -10px; }  /* 원래 위 여백 6은 그대로 */
  .all-tasks[open] > summary { margin-bottom: 6px; }  /* 펼친 목록과 사이 16도 그대로 */
  .set-more[open] > summary { margin-bottom: -4px; }
  .cls-progress { padding-block: 8px; }
  .note-head .btn + .btn { margin-left: 8px; }
  /* 줄 제목은 16 (보조 13, 작은 글 12는 그대로) */
  .grid .name, .person, .now-name, .todo-name, .rrow-head .nm, .nr-head b, .task-chip .nm, .exp-row .nm, .brief-line .tx b { font-size: var(--fs-row); }
}

/* 좁은 휴대폰: 초안 아래 알림은 한 줄을 다 쓰고 글자 수는 그 아래 오른쪽, 나이스 줄은 번호 칸을 줄여 글을 넓게 */
@media (max-width: 600px) {
  .page-head > .spacer { display: none; }
  .page-head > .classes { margin-left: 0; flex-basis: 100%; }  /* 학생별 보기의 반 바꾸기는 제목 아래 왼쪽에 */
  .page.today .page-head > .text-btn { margin-left: auto; }  /* 1년 일정 보기는 날짜 줄 오른쪽 끝에 (PC처럼) */
  /* 학생 창 아래 줄은 한 줄에: 다음 학생 이름과 '1학기 글과'는 빼요 (이름은 위 머리에, 뜻은 단추 title에) */
  .detail .draft-actions :is(.next-name, .wide-only) { display: none; }
  /* 앞뒤 학생은 iOS 메일처럼 위·아래 꺾쇠로 (돌아가기 '<'와 헷갈리지 않게) */
  .who .step-nav .ic { transform: rotate(90deg); }
  .neis-row { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 12px 8px 12px 10px; }
  .nr-no { text-align: left; }
  .nr-chip { min-height: 40px; }
  /* 검수 알림: 이름표 뒤에 설명이 이어지고, 줄이 바뀌면 같은 들여쓰기로 */
  .issues li { display: block; }
  .issues li > b { margin-right: 6px; }
  .issues li q, .issues li details { display: block; }
  /* 학생별 체험: 번호·이름·보고서 우수 한 줄, 그 아래 체험한 직업 */
  .exp-list { max-height: 60vh; }
  .exp-row { grid-template-columns: 22px minmax(0, 1fr) 72px; gap: 4px 8px; padding: 8px 2px; }
  .exp-row .memo-input { grid-column: 2 / -1; grid-row: 2; }
  .exp-head span:nth-child(3) { display: none; }
  .exp-head span:last-child { grid-column: 3; }
  .letter-fields { grid-template-columns: minmax(0, 1fr); }
  .letter-frame { grid-template-columns: minmax(0, 1fr) auto; }
  .letter-frame p { grid-column: 1 / -1; grid-row: 2; }
  /* 대화 상자: 화면 폭 가득. 글 칸이 있으면 위쪽에 붙여 키보드가 올라와도 저장 단추가 보이게 (확인만 묻는 상자는 가운데 그대로) */
  dialog, dialog:is(.wide, .mid) { width: calc(100vw - 24px); max-width: none; padding: 20px; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  dialog:has(textarea, input:not([type=checkbox])) { margin: calc(12px + env(safe-area-inset-top)) auto auto; }
  dialog .row-actions { flex-wrap: wrap; row-gap: 8px; }
  dialog .row-actions > .hint:first-child { flex-basis: 100%; }
}

/* 움직임: 떠 있는 것은 짧게 나타나고(메뉴 0.12초, 대화 상자 0.18초) 닫힐 때는 바로. 수준 고르기 판(#pop)은 자주 여니 바로.
   휴대폰에서는 아래에서 살짝 올라와요. 색 바뀜은 모두 0.12초, 표와 목록의 줄은 바로 */
:is(.cls-tab, .pill, .draft-cell, .act-head, .filled, .hope, .role-cell, .seg button, .area-switch, .text-btn, .menu button, .menu a, .person-chip button) {
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.menu:not([hidden]) { animation: ov-in var(--dur-1) var(--ease); }  /* 펼치는 쪽(transform-origin)은 placeMenu가 정해요 */
dialog[open] { animation: ov-in var(--dur-2) var(--ease); }
dialog[open]::backdrop { animation: fade-in var(--dur-2) ease-out; }
@keyframes ov-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (max-width: 900px) {
  .side.open { animation: sheet-in .2s var(--ease); }
  dialog[open] { animation-name: sheet-in; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
/* 움직임 줄이기: 움직임은 0초로 (도는 표시는 한 번만, 멈춘 채로 보여요) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
.grade-list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.grade-list em { font-style: normal; font-size: 12px; color: var(--mute); margin-left: 4px; }
.events-filter { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; }
.event-list li.off .what { color: var(--mute); }
.tag-jayul { font-style: normal; margin-left: 6px; }
/* 승인할 새 글: 주황 ? 표시 아래 두 글을 나란히 (상자는 옅은 회색 판 하나) */
.proposal { border: 0; border-radius: var(--r-md); padding: var(--panel-pad); display: grid; gap: 10px; background: var(--sunk); }
.proposal-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proposal-head::before {
  content: ""; flex: none; align-self: center; width: 16px; height: 16px; background: var(--ask);
  -webkit-mask: var(--g-ask) center / 16px no-repeat; mask: var(--g-ask) center / 16px no-repeat;
}
.proposal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.proposal-pair p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink2); white-space: pre-line; }
.proposal-pair p.new { color: var(--ink); }
@media (max-width: 720px) { .proposal-pair { grid-template-columns: 1fr; } }

/* 작은 표시는 모두 같은 크기: 높이 20, 글자 12. 분류는 회색 네모 칩(Things의 날짜 칩), 확인할 것은 표시 + 글자 */
.chip, .chip.ok, .ok, .act-tag, .mark .tag, .pi-head small.tag, .name small, .tag-jayul, .book-list li small.checked, .flag.ink {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: var(--mid); color: var(--ink2);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; letter-spacing: 0; box-shadow: none; border: 0;
}
.name small { color: var(--mute); }
.flag { height: 20px; line-height: 1; vertical-align: middle; letter-spacing: 0; }
/* 분류 태그(메모 분류, 예시 관점, 임원 바로가기 …)는 Things의 태그처럼 회색 테두리 알약. 남은 날·상태 칩(.dd, .chip.ok, .flag.ink)은 회색 칠 그대로 */
.chip:not(.ok), .act-tag, .mark .tag:not(.ink), .pi-head small.tag, .tag-jayul, .roles-feeds .feed {
  background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; padding: 0 8px; color: var(--mute); font-weight: 500;
}