/* ── 기본 ────────────────────────────────────────────────────────────────── */
/* ⚠️ 색은 전부 tokens.css 의 변수로만 쓴다(라이트/다크 전환이 그 파일 한 곳에서 일어난다). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  background: var(--surface); color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
code { font-size: .9em; background: var(--surface-high); padding: 1px 6px; border-radius: 6px; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.gap { gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.muted { color: var(--on-surface-variant); }
.small { font-size: 13px; }
.pre { white-space: pre-line; }
.show-m { display: none; }
.divider { border: 0; border-top: 1px solid var(--outline-variant); margin: 0; }
.section-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--primary); margin-bottom: -6px; }

.ms {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  flex: none; user-select: none;
}
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

.display { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--title); }
.headline { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--title); }
.headline-sm { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.title { font-size: 16px; font-weight: 700; }
.label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--on-surface-variant); }

/* ── 화면 ────────────────────────────────────────────────────────────────── */
.screen-center { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--primary-container); border-top-color: var(--primary);
  animation: spin .9s linear infinite;
}
.spinner.sm { width: 18px; height: 18px; border-width: 3px; display: inline-block; vertical-align: -4px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.card {
  background: var(--surface-lowest); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); border: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
}

/* ClassSpace. 워드마크 — 원본 SVG(검정) 그대로. 글자 재입력·색 바꾸기·필터 금지(ClassSpace 규칙).
   다크에서는 토큰(--wordmark-bg)으로 밝은 바탕 위에 올린다. */
/* 로고 + 서비스 이름 한 줄 — ClassSpace 총괄 관리자 사이트(.entry-header-brand)와 같은 값:
   로고 132px · 간격 12px · 글자 14px/650/#786c7d (휴대폰 110px · 12px). 줄바꿈하지 않는다. */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; flex-wrap: nowrap; }
.brand img {
  display: block; width: 132px; height: auto; flex: none; box-sizing: content-box;
  background: var(--wordmark-bg); padding: var(--wordmark-pad); border-radius: 10px;
}
.brand span { font-size: 14px; font-weight: 650; white-space: nowrap; color: var(--brand-sub); letter-spacing: 0; line-height: 1.2; }
.onboard-head .brand { margin-bottom: 14px; }

/* ── 버튼 ────────────────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 20px; border-radius: var(--r-full); border: 0;
  font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .1s;
  isolation: isolate;
}
.btn::after, .icon-btn::after, .chip::after, .segmented button::after, .bottom-nav button .nav-ind::after {
  content: ''; position: absolute; inset: 0; background: currentColor; opacity: 0;
  transition: opacity .15s; pointer-events: none; z-index: -1; border-radius: inherit;
}
@media (hover: hover) {
  .btn:hover::after, .icon-btn:hover::after, .chip:hover::after, .segmented button:hover::after, .bottom-nav button:hover .nav-ind::after { opacity: .08; }
}
.btn:active::after, .icon-btn:active::after, .chip:active::after, .bottom-nav button:active .nav-ind::after { opacity: .14; }
.btn:disabled { opacity: .38; cursor: default; pointer-events: none; }
.btn .ms { font-size: 18px; }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; font-size: 16px; padding: 0 28px; }
.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-outlined { background: transparent; color: var(--primary); border: 1px solid var(--outline); }
.btn-text { background: transparent; color: var(--primary); padding: 0 12px; }
.btn-present { background: var(--present-solid); color: var(--on-solid); }
.btn-absent { background: var(--absent-solid); color: var(--on-solid); }
.btn-google {
  height: 52px; padding: 0 24px; font-size: 15px; width: 100%;
  background: var(--surface-lowest); color: var(--on-surface); border: 1px solid var(--outline-variant); box-shadow: var(--shadow-1);
}
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; flex: none;
  display: inline-grid; place-items: center; background: transparent; color: var(--on-surface-variant); isolation: isolate;
}
.icon-btn .ms { font-size: 22px; }
.icon-btn:disabled { opacity: .3; }

/* ── 칩 · 세그먼트 ────────────────────────────────────────────────────────── */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid var(--outline-variant); background: transparent;
  font-size: 13px; font-weight: 650; color: var(--on-surface-variant); isolation: isolate; white-space: nowrap;
}
.chip .ms { font-size: 18px; }
.chip.is-active, .chip[aria-pressed="true"] {
  background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-x { border: 0; background: none; padding: 0; margin-right: -4px; display: inline-grid; color: inherit; }

.segmented {
  display: inline-flex; border: 1px solid var(--outline); border-radius: var(--r-full); overflow: hidden;
  max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  position: relative; border: 0; background: transparent; height: 40px; padding: 0 16px;
  font-size: 14px; font-weight: 650; color: var(--on-surface); white-space: nowrap; isolation: isolate;
}
.segmented button + button { border-left: 1px solid var(--outline); }
.segmented button.is-active { background: var(--secondary-container); color: var(--on-secondary-container); }
.segmented button.is-active::before { content: 'check'; font-family: 'Material Symbols Rounded'; font-size: 18px; margin-right: 4px; vertical-align: -4px; }
.segmented-full { display: flex; width: 100%; }
.segmented-full button { flex: 1; padding: 0 8px; }

/* ── 입력 ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--on-surface-variant); }
input[type="text"], input[type="email"], input[type="date"], select {
  height: 48px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--outline);
  background: transparent; outline: none; min-width: 0; font-size: 16px;   /* 16px 미만이면 iOS가 확대한다 */
}
input:focus, select:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* ── 로그인 ─────────────────────────────────────────────────────────────── */
/* 가운데 정렬 카드 — 모든 줄을 가운데에 두고, 줄바꿈 위치를 고르게(balance) 해 좌우가 맞게 한다. */
.login-card {
  width: min(400px, 100%); padding: 44px 28px 32px; border-radius: var(--r-xl);
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.login-card > * { max-width: 100%; }
.login-card h1, .login-card p { text-wrap: balance; }
/* 로그인 로고: 등록용 쌓인 로고(brand/morning-study-logo.svg) 원본 그대로. 다크에서는 밝은 바탕 위에. */
.login-logo { margin: 4px 0 18px; line-height: 0; }
.login-logo img {
  display: block; width: 208px; height: auto; box-sizing: content-box;
  background: var(--wordmark-bg); padding: var(--logo-pad); border-radius: 16px;
}
.login-card .btn-google { margin-top: 12px; }
/* 한 줄 고정 — 아주 좁은 화면에서는 줄을 바꾸지 않고 글자를 조금 줄인다 */
.login-note { font-size: clamp(11px, 3.7vw, 13px); color: var(--on-surface-variant); line-height: 1.4; white-space: nowrap; }
.error-box { width: 100%; background: var(--absent-bg); color: var(--absent-fg); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; text-align: center; white-space: pre-line; text-wrap: balance; }
.demo-box { width: 100%; background: var(--surface-container); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; text-align: center; }
.hint { font-size: 13px; color: var(--on-surface-variant); text-align: left; }
.hint .ms { font-size: 18px; vertical-align: -4px; margin-right: 2px; }

/* ── 명단 등록 ───────────────────────────────────────────────────────────── */
.onboard { width: min(760px, 100%); margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.onboard-head { display: flex; gap: 14px; align-items: flex-end; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.step { display: flex; gap: 16px; align-items: center; padding: 18px 20px; flex-wrap: wrap; }
.step-upload { align-items: flex-start; }
.step-num {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--primary-container); color: var(--on-primary-container); font-weight: 800;
}
.dropzone {
  margin-top: 12px; display: flex; align-items: center; gap: 14px; padding: 22px; cursor: pointer;
  border: 2px dashed var(--outline-variant); border-radius: var(--r-lg); background: var(--surface-low);
  transition: border-color .2s, background-color .2s;
}
.dropzone .ms { font-size: 36px; color: var(--primary); }
.dropzone small { color: var(--on-surface-variant); }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-visible { border-color: var(--primary); background: var(--surface-container); outline: none; }
.preview { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.preview-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.warn-list { margin: 0; padding: 12px 16px 12px 34px; background: var(--absent-bg); color: var(--absent-fg); border-radius: var(--r-md); font-size: 13px; }
.onboard-foot { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; }

/* ── 상단 바: 브랜드 · 테마 · 프로필 ─────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 6px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.badge { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: var(--r-full); background: var(--on-primary-container); color: var(--primary-container); margin: 0 4px 0 6px; letter-spacing: 0; }
.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; overflow: hidden; flex: none; margin-left: 4px;
  background: var(--primary); color: var(--on-primary); font-weight: 800; display: grid; place-items: center;
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; max-width: calc(100vw - 24px); padding: 8px 0; z-index: 40;
  background: var(--surface-container); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  animation: pop .16s var(--ease);
}
.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 18px; border: 0;
  background: none; text-align: left; font-size: 14px; font-weight: 550;
}
.menu button:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.menu button.is-current { color: var(--primary); font-weight: 750; }
.menu .ms { color: var(--on-surface-variant); }
.menu button.is-current .ms { color: var(--primary); }
.menu hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 8px 0; }
.menu-user { padding: 8px 18px; display: flex; flex-direction: column; }
.menu-user small { color: var(--on-surface-variant); }
.menu-label { padding: 4px 18px 2px; font-size: 12px; font-weight: 700; color: var(--on-surface-variant); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ── 하단 바: 학급 관리 기능 ─────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(520px, calc(100vw - 24px)); height: 72px; padding: 0 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--surface-container); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
}
.bottom-nav button {
  border: 0; background: none; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 650; color: var(--on-surface-variant); padding: 0;
}
.nav-ind { position: relative; width: 56px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; isolation: isolate; transition: background-color .2s var(--ease); }
.nav-ind .ms { font-size: 22px; }
.bottom-nav button.is-active { color: var(--on-surface); font-weight: 800; }
.bottom-nav button.is-active .nav-ind { background: var(--secondary-container); color: var(--on-secondary-container); }
.bottom-nav button.is-active .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ── 본문 ────────────────────────────────────────────────────────────────── */
.main { width: min(1180px, 100%); margin: 0 auto; padding: 8px 16px calc(120px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }

.today-card {
  display: flex; align-items: center; gap: 20px; padding: 20px 24px; width: 100%; border: 0; text-align: left;
  background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; border-radius: var(--r-xl);
}
.today-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.today-left .label { color: inherit; opacity: .85; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.today-left .label > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.today-left .muted { color: inherit; opacity: .8; }
.today-date { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.today-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 140px; }
.today-count { white-space: nowrap; }
.today-count b { font-size: 36px; font-weight: 850; line-height: 1; letter-spacing: -.02em; }
.today-count span { font-weight: 700; margin-left: 4px; }
.progress { width: 100%; height: 8px; border-radius: var(--r-full); background: color-mix(in srgb, var(--on-primary-container) 15%, transparent); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--progress); transition: width .4s var(--ease); }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav-title { border: 0; background: none; font-weight: 750; font-size: 15px; padding: 0 6px; min-width: 96px; text-align: center; height: 40px; border-radius: var(--r-full); white-space: nowrap; }
#btn-today { margin-left: 6px; }
#btn-select[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.select-tools {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 14px;
  background: var(--surface-container); border-radius: var(--r-lg);
}
.pick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-hint:empty { display: none; }
/* 가로로 넘칠 때 줄을 바꾸지 않고 옆으로 밀어 보는 줄(스크롤바는 숨긴다) */
.pick-row, .board-meta { scrollbar-width: none; }
.pick-row::-webkit-scrollbar, .board-meta::-webkit-scrollbar { display: none; }

/* ── 표(엑셀) ────────────────────────────────────────────────────────────── */
.board-note { padding: 32px 16px; text-align: center; color: var(--on-surface-variant); background: var(--surface-low); border-radius: var(--r-lg); line-height: 1.8; }
.board-note .btn { margin-top: 8px; }
.board-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.stat-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: var(--r-full); font-size: 13px; font-weight: 700; background: var(--surface-container); }
.stat-pill.present { background: var(--present-bg); color: var(--present-fg); }
.stat-pill.absent { background: var(--absent-bg); color: var(--absent-fg); }
.board-foot:empty { display: none; }

/* ⚠️ overflow: clip — 둥근 모서리는 자르되 스크롤 상자는 만들지 않는다. 그래서 일간·학생별·전체 표의
   머리 행이 페이지를 내려도 상단 바 아래에 붙어 있다(엑셀의 틀 고정). 가로로 긴 월간 표만 안에서 스크롤한다. */
.sheet {
  background: var(--surface-lowest); border-radius: var(--r-lg); overflow: clip;
  border: 1px solid var(--sheet-line); box-shadow: var(--shadow-1);
}
.sheet-scroll-x, .sheet-scroll-y { overflow: auto; overscroll-behavior: contain; }
.sheet-scroll-x { max-height: calc(100dvh - var(--topbar-h) - 120px); }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th {
  position: sticky; top: var(--topbar-h); z-index: 2; background: var(--sheet-head); color: var(--on-sheet-head);
  font-weight: 750; height: 44px; padding: 0 12px; white-space: nowrap; text-align: center;
  border-right: 1px solid color-mix(in srgb, var(--on-sheet-head) 18%, transparent);
}
.sheet-scroll-x .tbl th, .sheet-scroll-y .tbl th { top: 0; }
.tbl th:last-child, .tbl td:last-child { border-right: 0; }
.tbl td {
  height: 52px; padding: 4px 12px; text-align: center; white-space: nowrap;
  border-top: 1px solid var(--sheet-line); border-right: 1px solid var(--sheet-line);
}
.tbl tbody tr { transition: background-color .12s; }
@media (hover: hover) { .tbl tbody tr:hover { background: var(--surface-low); } }
.tbl tbody tr.is-selected { background: color-mix(in srgb, var(--primary-container) 70%, transparent); }
.tbl tfoot td { background: var(--surface-container); font-weight: 750; font-size: 13px; position: sticky; bottom: 0; z-index: 1; }
.c-num { color: var(--on-surface-variant); width: 56px; }
.c-id { font-variant-numeric: tabular-nums; width: 90px; }
.c-date { font-variant-numeric: tabular-nums; }
.c-name { font-weight: 650; }
.c-name button { border: 0; background: none; font-weight: 700; padding: 6px 8px; border-radius: var(--r-xs); text-decoration: underline; text-decoration-color: var(--outline-variant); text-underline-offset: 4px; }
.c-name button:hover { background: var(--surface-container); text-decoration-color: var(--primary); }
.c-time { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; width: 80px; }
.t-sub { display: block; font-size: 11px; font-weight: 600; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; line-height: 1.1; }
.c-abs.has { background: var(--absent-bg); color: var(--absent-fg); font-weight: 750; }
.c-rate { font-variant-numeric: tabular-nums; }
.sheet-compact .tbl td { height: 40px; }

/* 체크칸 — 끌어서 선택(touch-action: none 이라 이 열에서는 스크롤 대신 선택이 된다) */
.c-check { width: 52px; padding: 0 !important; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.c-check .ms { font-size: 24px; color: var(--outline); vertical-align: middle; }
tr.is-selected .c-check .ms { color: var(--primary); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.is-select tbody tr { cursor: pointer; }
.is-select tbody tr td { user-select: none; -webkit-user-select: none; }
tr.is-range-start > td:first-child { box-shadow: inset 4px 0 0 var(--primary); }

/* 출석/결석 두 칸 버튼(일간·학생별) */
.mark { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-full); background: var(--surface-container); }
.mark button {
  border: 0; height: 36px; min-width: 66px; padding: 0 12px; border-radius: var(--r-full); background: transparent;
  font-weight: 700; font-size: 13px; color: var(--on-surface-variant); display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background-color .15s, color .15s;
}
.mark button .ms { font-size: 16px; }
@media (hover: hover) { .mark button:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); } }
.mark button.on-present { background: var(--present-solid); color: var(--on-solid); }
.mark button.on-absent { background: var(--absent-solid); color: var(--on-solid); }
.mark button.soft-absent { background: transparent; color: var(--absent-fg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--absent-fg) 45%, transparent); }
.is-select .mark { pointer-events: none; opacity: .55; }

/* 주간·월간 행렬 — 고정 열: [체크] 학번 이름 */
.tbl-matrix { --l-check: 0px; --l-id: 0px; --l-name: 90px; }
.tbl-matrix.has-check { --l-check: 0px; --l-id: 52px; --l-name: 142px; }
.tbl-matrix th, .tbl-matrix td { padding: 0 6px; }
.tbl-matrix .sticky-0, .tbl-matrix .sticky-1, .tbl-matrix .sticky-2 { position: sticky; z-index: 1; background: var(--surface-lowest); }
.tbl-matrix .sticky-0 { left: var(--l-check); min-width: 52px; max-width: 52px; }
.tbl-matrix .sticky-1 { left: var(--l-id); min-width: 90px; max-width: 90px; }
.tbl-matrix .sticky-2 { left: var(--l-name); min-width: 92px; box-shadow: 1px 0 0 var(--sheet-line), 6px 0 8px -6px rgba(0, 0, 0, .18); }
.tbl-matrix th.sticky-0, .tbl-matrix th.sticky-1, .tbl-matrix th.sticky-2 { z-index: 3; background: var(--sheet-head); }
.tbl-matrix tfoot td.sticky-0, .tbl-matrix tfoot td.sticky-1, .tbl-matrix tfoot td.sticky-2 { background: var(--surface-container); z-index: 2; }
@media (hover: hover) { .tbl-matrix tbody tr:hover td.sticky-0, .tbl-matrix tbody tr:hover td.sticky-1, .tbl-matrix tbody tr:hover td.sticky-2 { background: var(--surface-low); } }
.tbl-matrix tbody tr.is-selected td.sticky-0, .tbl-matrix tbody tr.is-selected td.sticky-1, .tbl-matrix tbody tr.is-selected td.sticky-2 { background: var(--primary-container); }
.tbl-matrix th.c-day { min-width: 46px; line-height: 1.15; font-size: 13px; }
.tbl-matrix th.c-day small { display: block; font-weight: 600; opacity: .8; font-size: 11px; }
.tbl-matrix th.c-day.is-today { box-shadow: inset 0 -3px 0 var(--on-sheet-head); }
.cell {
  width: 34px; height: 32px; border-radius: 10px; border: 0; font-weight: 800; font-size: 13px;
  display: inline-grid; place-items: center; transition: transform .1s;
}
.cell:active { transform: scale(.9); }
.cell.p { background: var(--present-bg); color: var(--present-fg); }
.cell.a { background: var(--absent-bg); color: var(--absent-fg); }
.cell.u { background: transparent; color: color-mix(in srgb, var(--absent-fg) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--absent-fg) 30%, transparent); }
.is-select .cell { pointer-events: none; }

/* 학생별 */
.student-pick { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.student-pick select { flex: 1; max-width: 360px; height: 44px; border-radius: var(--r-full); font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--stat-bg); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat span { font-size: 12px; font-weight: 700; color: var(--on-surface-variant); }
.stat b { font-size: 28px; font-weight: 850; color: var(--stat-fg); letter-spacing: -.02em; line-height: 1.1; }

/* ── 일괄 처리 막대(하단 바 자리) ────────────────────────────────────────── */
.bulk-bar {
  position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 10px 0 22px;
  width: max-content; max-width: calc(100vw - 24px);
  background: var(--inverse-surface); color: var(--inverse-on-surface); border-radius: var(--r-xl); box-shadow: var(--shadow-3);
  animation: rise .22s var(--ease);
}
.bulk-bar .icon-btn { color: var(--inverse-on-surface); }
.bulk-count { font-weight: 800; white-space: nowrap; }
.bulk-date {
  height: 44px; border-radius: var(--r-full); border-color: color-mix(in srgb, var(--inverse-on-surface) 40%, transparent);
  color: var(--inverse-on-surface); background: transparent; padding: 0 12px; max-width: 150px; font-size: 14px;
}
.bulk-date option { color: #231918; background: #fff; }
.bulk-bar .btn { height: 44px; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ── 대화상자(넓은 화면) · 바텀시트(휴대폰) ─────────────────────────────── */
.dialog {
  border: 0; padding: 0; border-radius: var(--r-xl); background: var(--surface-high); color: var(--on-surface);
  width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--shadow-3);
}
.dialog[open] { display: flex; flex-direction: column; animation: dlg .22s var(--ease); }
.dialog::backdrop { background: var(--scrim); }
.dialog-wide { width: min(680px, calc(100vw - 32px)); }
.dialog-sm { width: min(360px, calc(100vw - 32px)); }
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 20px 16px 8px 24px; }
.dialog-body { padding: 12px 24px 20px; overflow: auto; overscroll-behavior: contain; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 20px 20px; }
.dialog-sm .dialog-body { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.dialog .sheet { box-shadow: none; }
@keyframes dlg { from { opacity: 0; transform: scale(.96); } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4; } }

.roster-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.member-list { display: flex; flex-direction: column; gap: 6px; }
.member { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-radius: var(--r-md); background: var(--surface-lowest); }
.member .avatar-btn { width: 32px; height: 32px; font-size: 13px; margin: 0; }
.member .grow > div { overflow: hidden; text-overflow: ellipsis; }
.member small { color: var(--on-surface-variant); }

.diff { border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-lowest); display: flex; flex-direction: column; gap: 10px; }
.diff ul { margin: 0; padding-left: 18px; font-size: 13px; max-height: 120px; overflow: auto; }

/* ── 스낵바(하단 바 위) ──────────────────────────────────────────────────── */
.snackbar {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 60;
  width: max-content; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: var(--r-md);
  background: var(--inverse-surface); color: var(--inverse-on-surface); box-shadow: var(--shadow-3);
  font-size: 14px; font-weight: 550; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
  text-align: center; text-wrap: balance;
}
.snackbar.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 휴대폰 ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  body { font-size: 15px; }
  .hide-m { display: none !important; }
  .show-m { display: initial; }
  small.show-m, .t-sub.show-m { display: block; }

  .topbar { gap: 2px; padding-left: 14px; padding-right: 10px; }
  .brand img { width: 110px; }
  .brand span { font-size: 12px; }
  .login-logo img { width: 176px; }

  .main { padding: 4px 12px calc(110px + env(safe-area-inset-bottom)); gap: 12px; }
  .today-card { padding: 16px 18px; gap: 12px; border-radius: var(--r-lg); }
  .today-date { font-size: 19px; }
  .today-count b { font-size: 30px; }
  .today-right { min-width: 104px; }

  .toolbar { gap: 10px; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding: 0 4px; font-size: 13px; }
  .segmented button.is-active::before { display: none; }
  .toolbar-right { width: 100%; justify-content: space-between; flex-wrap: nowrap; }
  #btn-today { display: none; }   /* 가운데 날짜를 누르면 오늘로 간다 */
  .nav-title { min-width: 0; font-size: 15px; }
  /* 빠른 선택 칩 6개는 한 줄로 — 아이콘·제목을 빼고 폭을 나눠 쓴다. 아주 좁으면 옆으로 민다. */
  .select-tools { padding: 8px; gap: 6px; border-radius: var(--r-md); }
  .pick-label { display: none; }
  .pick-row { flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  .pick-row .chip { flex: 1 0 auto; justify-content: center; padding: 0 10px; height: 36px; }
  .pick-row .chip .ms { display: none; }
  .range-hint { padding: 0 4px; }
  .board-meta { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .board-meta .chip { padding: 0 10px; }
  .meta-note { white-space: nowrap; }

  .tbl { font-size: 14px; }
  .tbl td { padding: 4px 8px; height: 56px; }
  .tbl th { padding: 0 8px; height: 40px; font-size: 13px; }
  .c-num { display: none; }
  .c-id { width: auto; font-size: 13px; color: var(--on-surface-variant); }
  .c-name { text-align: left; }
  .c-name button { padding: 6px 4px; }
  .c-name .t-sub { padding-left: 4px; }
  .c-mark { width: 1%; }
  .mark button { min-width: 54px; height: 40px; padding: 0 12px; font-size: 14px; }
  .mark button .ms { display: none; }
  .c-check { width: 44px; }

  /* 월간 표: 학번 열을 감추고 이름만 고정한다 */
  .tbl-matrix { --l-name: 0px; }
  .tbl-matrix.has-check { --l-name: 44px; }
  .tbl-matrix .sticky-0 { min-width: 44px; max-width: 44px; }
  .tbl-matrix .sticky-1 { display: none; }
  .tbl-matrix .sticky-2 { min-width: 70px; max-width: 84px; }
  .tbl-matrix th.c-day { min-width: 40px; font-size: 12px; }
  .cell { width: 32px; height: 34px; }
  .sheet-scroll-x { max-height: calc(100dvh - var(--topbar-h) - 200px); }

  .stats { gap: 8px; }
  .stat { padding: 12px; border-radius: var(--r-md); }
  .stat b { font-size: 22px; }

  /* 하단 바: 화면 폭 가득 */
  .bottom-nav { width: calc(100vw - 16px); bottom: calc(8px + env(safe-area-inset-bottom)); height: 68px; padding: 0 2px; border-radius: var(--r-lg); }
  .nav-ind { width: 52px; }
  .bulk-bar { width: calc(100vw - 16px); bottom: calc(8px + env(safe-area-inset-bottom)); height: 68px; padding: 0 6px 0 16px; gap: 6px; border-radius: var(--r-lg); }
  .bulk-bar .btn { padding: 0 12px; }
  .bulk-bar .btn .ms { display: none; }
  .bulk-date { max-width: none; flex: 1; min-width: 0; padding: 0 8px; font-size: 14px; }
  .snackbar { bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* 대화상자 → 아래에서 올라오는 바텀시트 */
  .dialog, .dialog-wide, .dialog-sm {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom);
  }
  .dialog[open] { animation: sheet-up .26s var(--ease); }
  .dialog::before { content: ''; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--outline); opacity: .5; margin: 10px auto 0; flex: none; }
  .dialog-head { padding: 10px 12px 4px 20px; }
  .dialog-body { padding: 8px 18px 18px; }
  .dialog-foot { padding: 4px 16px 16px; }
  .dialog-foot .btn { flex: 1; height: 48px; }

  /* 명단 창 버튼 셋: 같은 폭 세 칸 한 줄(짧은 이름 · 아이콘 없이) */
  .roster-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .roster-actions .btn { padding: 0 8px; }
  .roster-actions .btn .ms { display: none; }
}
/* 아주 좁은 휴대폰(≤360px): 날짜 줄이 한 줄에 들어가도록 선택 버튼 아이콘을 뺀다 */
@media (max-width: 360px) {
  #btn-select .ms { display: none; }
  #btn-select { padding: 0 12px; }
}
@media (max-width: 640px) {
  .step { padding: 16px; }
  .onboard { padding-top: 24px; }
  .login-card { padding: 36px 22px 26px; }
}

/* ── 데스크톱: 사이드바 ──────────────────────────────────────────────────── */
/* 넓은 화면에서는 상단 바·하단 바 대신 왼쪽 사이드바 하나에 브랜드 · 메뉴 · 테마 · 프로필을 모은다. */
.sidebar { display: none; }
@media (min-width: 1024px) {
  :root { --topbar-h: 0px; --side-w: 264px; }
  #screen-app { padding-left: var(--side-w); }
  .topbar, .bottom-nav { display: none !important; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30;
    display: flex; flex-direction: column; gap: 6px; padding: 26px 14px 16px;
    background: var(--surface-low); border-right: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
  }
  .sidebar-brand { padding: 0 12px 22px; }
  .sidebar-brand img { width: 118px; }
  .sidebar-brand span { font-size: 13px; }

  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav button, .side-theme {
    position: relative; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 18px; width: 100%;
    border: 0; border-radius: var(--r-full); background: transparent; color: var(--on-surface-variant);
    font-size: 14px; font-weight: 650; text-align: left; transition: background-color .15s;
  }
  .side-nav button .ms, .side-theme .ms { font-size: 22px; }
  .side-nav button:hover, .side-theme:hover { background: color-mix(in srgb, var(--on-surface) 7%, transparent); }
  .side-nav button.is-active { background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 800; }
  .side-nav button.is-active .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

  .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
  .side-profile {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; text-align: left;
    border-radius: var(--r-lg); background: var(--surface-container); color: var(--on-surface);
  }
  .side-profile:hover { background: var(--surface-high); }
  .side-profile .avatar-btn { margin: 0; width: 36px; height: 36px; }
  .side-profile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .side-profile-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-profile-text small { font-size: 12px; color: var(--on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-profile > .ms { color: var(--on-surface-variant); }
  .menu-up .menu { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; }

  .main { padding: 28px 32px calc(120px + env(safe-area-inset-bottom)); }
  /* 일괄 처리 막대·스낵바는 사이드바를 뺀 본문의 가운데에 */
  .bulk-bar { left: calc(50% + var(--side-w) / 2); }
  .snackbar { left: calc(50% + var(--side-w) / 2); bottom: 32px; }
}