/* ---------- inside the app: frame (시안-1) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 20px; height: 20px; flex: 0 0 auto; }

#app { display: block; }
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100dvh; }

.side {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  background: var(--navy); color: var(--navy-ink);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  /* 잔일③: a thin bar that shows on the navy column in light and dark alike */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
/*
 * 잔일③: the whole column scrolls as one. Nothing in it may shrink: the seat list used to be
 * flex 1 1 auto with min-height 0, so on a short screen it shrank below its own rows and the
 * rows spilled over the name card. The card now follows the list and only sits at the bottom
 * when there is room left (margin-top: auto), never on top of anything.
 */
.side > * { flex-shrink: 0; }
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-track { background: transparent; }
.side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 8px; }
.side::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.55); }
.side-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.side-names { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-school { font-family: var(--serif); font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.side-app { font-size: 13px; color: var(--navy-muted); }
.brand-home.side-logo, .brand-home.top-logo { margin: 0; padding: 4px; min-width: 44px; justify-content: center; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.menu-btn {
  width: 100%; min-height: 46px; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 15px; font-weight: 700; text-align: left;
  color: var(--navy-muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--navy-ink); }
.menu-btn[aria-current='page'] { background: rgba(255, 255, 255, 0.14); color: var(--navy-ink); }

.side-seats { flex: 0 0 auto; }
.side-heading { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--navy-muted); margin: 0 0 6px; padding: 0 12px; }
.side-seat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-empty { font-size: 13px; color: var(--navy-muted); padding: 4px 12px; }
.side-seat {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 14px; color: var(--navy-ink); background: transparent;
  border: 0; border-radius: 10px; cursor: pointer; text-align: left;
}
.side-seat:hover { background: rgba(255, 255, 255, 0.07); }
.side-seat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-seat-count { font-size: 12px; color: var(--navy-muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, #2E7DCD); flex: 0 0 auto; display: inline-block; }

.me-card { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.me-name { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.me-seats { margin: 0; font-size: 13px; color: var(--navy-muted); overflow-wrap: anywhere; }
.me-version { margin: 0; font-size: 12px; color: var(--navy-muted); }
.side .ghost { background: transparent; color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.3); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 18px 24px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5;
}
.topbar .top-logo { display: none; }
.topbar-text { flex: 1 1 auto; min-width: 0; }
.crumb { margin: 0; font-size: 13px; color: var(--muted); }
.page-title { margin: 0; font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.lock-btn { display: inline-flex; align-items: center; gap: 6px; }

.view { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; outline: none; }
/* 화면 하나의 칸(main.js go): 자리를 차지하지 않고 아이들이 .view의 줄 · 간격을 그대로 쓴다 */
.view-page { display: contents; }

/* S-07: the reset notice band, between the top bar and the screen. Hard to miss, easy to dismiss. */
.reset-notice { margin: 16px 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.reset-notice p { flex: 1 1 260px; margin: 0; }
.reset-notice button { flex: 0 0 auto; min-height: 44px; }
.reset-log { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.tabs { display: none; }

/* ---------- common pieces ---------- */
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ghost.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.icon-only { padding: 10px; min-width: 46px; }
.label { display: inline; }
.small-btn { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.link-btn { text-decoration: none; min-height: 44px; }
.seat-foot { display: flex; justify-content: flex-end; margin: 0; }
.text-btn { min-height: 44px; padding: 6px 8px; font-size: 14px; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; }
.text-btn:hover { color: var(--ink); }

.panel-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; }
/* 자리 색 (주인 10-19 "아카이브나 학교 등 여러 곳에도"): 화면마다 제 색 -- 카드 머리 아이콘과 메뉴 표시가 같은 색 */
.view-page { --place: var(--accent); }
.view-page[data-view='home'] { --place: var(--p-home); }
.view-page[data-view='archive'] { --place: var(--p-archive); }
.view-page[data-view='seat'] { --place: var(--p-seat); }
.view-page[data-view='school'] { --place: var(--p-school); }
.view-page[data-view='room-school'], .view-page[data-view='room-region'], .view-page[data-view='room-nation'] { --place: var(--p-rooms); }
.view-page[data-view='cal-region'], .view-page[data-view='cal-nation'] { --place: var(--p-cals); }
.view-page[data-view='tools'], .view-page[data-view='tv-setup'], .view-page[data-view='edutech'],
.view-page[data-view='timetable'], .view-page[data-view='pay'], .view-page[data-view='stats'] { --place: var(--p-tools); }
.view-page[data-view='op'] { --place: var(--p-op); }
.view-page .card-head .card-title > .icon { color: var(--place); }
/* 메뉴 · 아래 탭: 지금 있는 곳이 그 자리 색으로 */
.menu-btn, .tab-btn { --mi: var(--navy-ink); }
.menu-btn[data-view='home'], .tab-btn[data-view='home'] { --mi: var(--p-home); }
.menu-btn[data-view='archive'], .tab-btn[data-view='archive'] { --mi: var(--p-archive); }
.menu-btn[data-view='seat'], .tab-btn[data-view='seat'] { --mi: var(--p-seat); }
.menu-btn[data-view='school'], .tab-btn[data-view='school'] { --mi: var(--p-school); }
.menu-btn[data-view='rooms'], .tab-btn[data-view='rooms'] { --mi: var(--p-rooms); }
.menu-btn[data-view='cals'], .tab-btn[data-view='cals'] { --mi: var(--p-cals); }
.menu-btn[data-view='tools'], .tab-btn[data-view='tools'] { --mi: var(--p-tools); }
.menu-btn[aria-current='page'] { box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--mi) 60%, white); }
.menu-btn[aria-current='page'] .icon, .tab-btn[aria-current='page'] .icon { color: color-mix(in srgb, var(--mi) 55%, white); }
.card-note { font-size: 12px; color: var(--muted); }
.sub-title { font-family: var(--serif); font-size: 16px; margin: 12px 0 8px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.messages:empty { display: none; }
.messages { display: flex; flex-direction: column; gap: 8px; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0; }
.empty-text { color: var(--muted); margin: 0; }
.big-empty { align-items: center; text-align: center; padding: 32px 16px; }
.empty-title { font-family: var(--serif); font-size: 18px; font-weight: 700; margin: 0; }
.hint.ok { color: var(--ok); }
.hint.warn { color: var(--warn); }
.only-narrow { display: none; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input.small { width: auto; min-width: 120px; flex: 0 0 auto; }
.save-status { font-size: 13px; color: var(--muted); min-height: 1em; }
.progress { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); font-size: 14px; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; cursor: pointer; }
.check-row input { width: 22px; height: 22px; font-size: 16px; accent-color: var(--accent); }

.badge { display: inline-block; font-size: 12px; line-height: 1.4; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); }
.badge-new { color: var(--ok); border-color: var(--ok); }
.badge-like { color: #A33D66; border-color: #E8B7CB; }
.badge-share { color: var(--accent); border-color: var(--accent); }
.badge-pii { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.badge-src { color: var(--ink); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg-btn, .chip-btn, .toggle, .month, .seat-tab, .seat-option, .pill {
  min-height: 44px; padding: 8px 14px; font-size: 14px; font-weight: 700;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg-btn[aria-pressed='true'], .seg-btn[role='radio'][aria-checked='true'], .seg-btn[role='tab'][aria-selected='true'], .chip-btn[aria-pressed='true'], .toggle[aria-pressed='true'],
.month[aria-pressed='true'], .seat-tab[aria-selected='true'], .seat-option[aria-pressed='true'] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.chip-count { font-size: 12px; font-weight: 400; opacity: 0.8; font-family: var(--mono); }

/* ---------- home ---------- */
.hello {
  background: var(--navy); color: var(--navy-ink); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.hello-school {
  margin: 0 0 -6px; color: var(--navy-muted); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
}
.hello-title { margin: 0; font-size: 24px; line-height: 1.35; }
.hello-sub { margin: 0; color: var(--navy-muted); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pill { background: rgba(255, 255, 255, 0.1); color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.25); }
.hello-btn {
  align-self: flex-start; min-height: 46px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; font-size: 15px; font-weight: 700; color: var(--navy); background: #FFFFFF;
  border: 0; border-radius: 10px; cursor: pointer;
}
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.mini-row:first-child { border-top: 0; }
.mini-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px;
  padding: 6px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.mini-link:hover .mini-title { color: var(--accent); }
.mini-title { font-weight: 700; overflow-wrap: anywhere; }
.mini-meta { font-size: 13px; color: var(--muted); margin: 0; }
.task-block + .task-block { margin-top: 12px; }
.task-seat { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 4px; }
.task-list { margin: 0; padding-left: 20px; }
.task { padding: 3px 0; }
.me-home .me-name { color: var(--ink); }

/* ---------- 3월 세팅 ---------- */
.march { display: flex; flex-direction: column; gap: 14px; }
.march-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.march-step { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.march-step.on { color: var(--ink); font-weight: 700; }
.march-step.done .step-no { background: var(--ok); }
.march .with-button { flex-wrap: wrap; }
.march .with-button .input { width: auto; flex: 1 1 140px; min-width: 120px; }
.toggle-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chosen-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: 14px;
}
.chosen .chosen-chip:only-child:not(:has(button)) { padding-right: 12px; }
.chip-x { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.review-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.review-row.new { border-style: dashed; }
.review-name { font-family: var(--serif); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.badge-line { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.history { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.history-item { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.history-item.now { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.march-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; width: 100%; }

/* ---------- dialogs ---------- */
.dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  border: 1px solid var(--line); border-radius: 18px; padding: 0; color: var(--ink); background: var(--card);
  box-shadow: 0 20px 60px rgba(19, 37, 74, 0.25);
}
.dialog.wide { width: min(760px, calc(100vw - 24px)); }
.dialog::backdrop { background: rgba(12, 18, 32, 0.45); }
.dialog[open] { display: flex; flex-direction: column; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.dialog-title { margin: 0; font-size: 20px; }
.dialog-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.dialog-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dialog.drawer {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(480px, 100vw);
  border-radius: 18px 0 0 18px;
}
.drawer-body { display: flex; flex-direction: column; gap: 14px; }

/* ---------- HTML 수업 자료: 수업 화면 (views/lesson.js) — the lesson runs in a sandboxed frame ---------- */
.dialog.lesson-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
.lesson-dialog .dialog-body { flex: 1 1 auto; padding: 10px 12px 12px; overflow: hidden; }
.lesson-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.lesson-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lesson-note { margin: 0; flex: 1 1 260px; }
.lesson-status { margin: 0; }
.lesson-stage { flex: 1 1 auto; min-height: 240px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.lesson-stage:fullscreen { border: 0; border-radius: 0; }
.lesson-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- 내 아카이브 (시안-3) ---------- */
.catcher { display: flex; flex-direction: column; gap: 6px; }
.catcher-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.catcher-icon { color: var(--muted); display: inline-flex; }
.catcher-row .primary, .catcher-row .ghost { flex: 0 0 auto; white-space: nowrap; }
.search-input { border: 0; min-height: 46px; padding: 8px 4px; flex: 1 1 auto; min-width: 0; background: transparent; }
.search-input:focus { outline: none; }
.catcher-row:focus-within { outline: 3px solid var(--accent); outline-offset: 1px; }
.catcher-hint { margin: 0 4px; }
/* [원본 그대로]: the box itself carries 16px type, so the screen check is happy on a phone */
.orig-check {
  display: inline-flex; align-items: center; gap: 8px; margin: 2px 4px 0;
  min-height: 44px; font-size: 15px; cursor: pointer;
}
.orig-check input { width: 22px; height: 22px; font-size: 16px; accent-color: var(--accent); flex: 0 0 auto; }
.orig-hint { margin: -4px 4px 0; }
.preview-slot:empty { display: none; }
.preview-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--card); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip-tag { color: var(--accent); }

.selbar {
  position: sticky; top: 74px; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--navy); color: var(--navy-ink); border-radius: var(--radius);
}
.selbar .ghost { background: rgba(255, 255, 255, 0.08); color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.28); }
.selbar .ghost.danger { color: #FFB4A9; border-color: #FFB4A9; }
.sel-count { margin-right: 4px; }

.masonry { column-count: 4; column-gap: 12px; }
.card-item {
  position: relative; break-inside: avoid; display: block; margin: 0 0 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.card-item.chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.card-main {
  display: flex; flex-direction: column; gap: 8px; width: 100%; min-height: 64px; padding: 0 0 12px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card-main > .card-title, .card-main > .card-note, .card-main > .card-tags, .card-main > .badges { padding: 0 12px; }
.card-main > :first-child:not(.band):not(.tiles):not(.file-face) { margin-top: 12px; }
.card-main > .card-title:first-child { padding-right: 56px; }
.card-title { font-weight: 700; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; padding-right: 48px; }
.card-note { font-size: 14px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.card-note.short { -webkit-line-clamp: 3; }
.card-tags { font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.card-pick {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: transparent; border: 2px solid var(--line);
}
.card-pick .icon { width: 22px; height: 22px; }
.card-pick:hover { color: var(--muted); }
.card-pick[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.band {
  display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 64px;
  /* 품질 점검: the palette colour, 30% darker, so white text is 4.5:1 or more on every colour */
  background: color-mix(in srgb, var(--band, #2E7DCD) 70%, #000000); color: #FFFFFF;
}
.band-letter { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.22); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 20px; flex: 0 0 auto; }
.band-site { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; padding-right: 44px; }
.band-scrap { background: var(--soft); color: var(--ink); border-bottom: 1px solid var(--line); min-height: 56px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.tiles-1 { grid-template-columns: 1fr; }
.tile { position: relative; aspect-ratio: 1 / 1; background: var(--soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tiles-1 .tile { aspect-ratio: 4 / 3; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.has-img .tile-ext { display: none; }
.tile-ext { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tile-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(12, 18, 32, 0.55); color: #FFFFFF; font-size: 20px; font-weight: 700; }
.file-face { display: flex; align-items: center; gap: 10px; padding: 16px 12px; background: var(--soft); border-bottom: 1px solid var(--line); }
.file-ext { font-family: var(--mono); font-weight: 700; font-size: 16px; padding: 6px 10px; border-radius: 8px; background: var(--navy); color: #FFFFFF; }
.file-size { font-size: 13px; color: var(--muted); }
.file-face.big { border: 1px solid var(--line); border-radius: var(--radius); }
.drop-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(35, 82, 209, 0.14); border: 4px dashed var(--accent); pointer-events: none;
}
.drop-overlay p { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-radius: 14px; background: var(--card); font-size: 18px; font-weight: 700; }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gallery-item { display: flex; flex-direction: column; gap: 4px; }
.gallery-btn { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gallery-btn img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item.picked .gallery-btn { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.gallery-first { position: absolute; left: 6px; top: 6px; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--navy); color: #FFFFFF; }
.source-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; }
.source-line { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.tag-edit { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ext-link { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.share-result:empty { display: none; }
.share-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.share-row .mini-meta { flex: 1 1 100%; order: 3; }
.share-row .mini-title { flex: 1 1 auto; }
.seat-options { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 내 자리 ---------- */
.seat-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
/* 자리 정해 주기 (주인 10-18): 구성원 목록에서 관리자가 자리를 앉히는 창 */
.assign-seat { display: flex; flex-direction: column; gap: 8px; }
.assign-seat .field-head { font-size: 14px; color: var(--muted); font-weight: 600; margin: 8px 0 0; }
.assign-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assign-pick select { min-height: 44px; }
.assign-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.assign-row .assign-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.assign-empty .seat-option { min-height: 44px; }

/* 시작하기 (주인 10-18): 처음 온 선생님의 다음 할 일 카드 */
.start-card .start-lead { margin: 0 0 8px; }
.start-steps { display: flex; flex-direction: column; }
.start-step { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 2px; }
.start-step + .start-step { border-top: 1px solid var(--line); }
.start-mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--soft); border: 1px solid var(--line); color: var(--muted);
}
.start-step.done .start-mark { background: var(--soft); border-color: var(--ok); color: var(--ok); }
.start-mark .icon { width: 16px; height: 16px; }
.start-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.start-text { font-weight: 600; font-size: 14px; }
.start-step.done .start-text { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.start-hint { font-size: 12px; color: var(--muted); }
.start-go { flex: 0 0 auto; }

.seat-head { display: flex; flex-direction: column; gap: 6px; }
.seat-kind { margin: 0; font-size: 13px; color: var(--muted); }
.seat-name { margin: 0; font-size: 24px; }
.seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* 동학년 (주인 10-18): 같은 학년 반 줄 -- 누르면 그 자리로 */
.mates-list { display: flex; flex-direction: column; }
.mate-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 8px;
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink);
  text-align: left; border-radius: 10px; cursor: pointer;
}
.mate-row:hover { background: var(--soft); }
.mate-row[aria-current='true'] { cursor: default; background: var(--soft); }
.mate-class { font-family: var(--mono); font-size: 13px; color: var(--muted); min-width: 2.8em; }
.mate-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mate-empty { color: var(--muted); }
.mate-chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.mate-chip.me { border-color: var(--accent); color: var(--accent); }
.mates-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.mates-actions .hint { margin: 0; flex-basis: 100%; }
/* 자료 칸 (주인 10-19): 동학년의 교과 자료 · 업무함의 업무 자료 -- 층 단추 줄 + 다섯 줄 + [자료실에서 더 보기] */
.peek-slot:empty { display: none; }
.peek-card .peek-scopes { margin: 2px 0 8px; }
.peek-card .peek-scopes .seg-btn { gap: 4px; }
.peek-card .peek-scopes .icon { width: 14px; height: 14px; }
.peek-note { margin: 4px 0; }
.peek-note:empty { display: none; }
.peek-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.peek-open {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 8px;
  border: 0; background: none; font: inherit; color: var(--ink); text-align: left; border-radius: 10px; cursor: pointer;
}
.peek-open:hover { background: var(--soft); }
.peek-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-meta { display: inline-flex; gap: 8px; flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.peek-foot { margin-top: 6px; }
/* 동학년 학년 고르기 (담임이 아닌 분) */
.grade-pick { margin-top: 8px; }
.grade-body { display: flex; flex-direction: column; gap: 16px; }
/* 우리 학교 › 업무함: 내 업무 큰 단추 + 업무 분장 줄 */
.work-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 16px; }
.work-mine .hint, .work-mine .row-actions { grid-column: 1 / -1; margin: 0; }
.work-mine-btn {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); font: inherit; color: var(--ink);
  text-align: left; cursor: pointer;
}
.work-mine-btn:hover { border-color: var(--accent); }
.work-mine-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.work-mine-n { font-size: 12px; color: var(--muted); white-space: nowrap; }
.work-roster-head { margin-top: 4px; }
.work-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.work-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 2px 8px;
  border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; border-radius: 10px; cursor: pointer;
}
.work-row:hover { background: var(--soft); }
.work-row-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.work-row-who { flex: 0 1 auto; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.work-row-who.empty { font-style: normal; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.month { border-radius: 10px; justify-content: center; padding: 6px 4px; position: relative; }
.month.this-month { border-color: var(--accent); border-width: 2px; }
.month-count { font-size: 12px; font-family: var(--mono); opacity: 0.8; }
.seat-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seat-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.seat-item:first-child { border-top: 0; }
.row-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
a.row-title { display: flex; align-items: center; min-height: 44px; }
.row-note { font-size: 14px; color: var(--muted); white-space: pre-wrap; margin: 2px 0 0; overflow-wrap: anywhere; }
.like-names { font-size: 13px; color: #C24D7C; margin: 0; }
.like-btn[aria-pressed='true'] { color: #C24D7C; border-color: #C24D7C; }
.scrap-btn[disabled] { opacity: 0.7; cursor: default; }
.pii-note { margin: 0 0 8px; }
.past-notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.past-note { padding: 10px 12px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.past-body { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; overflow-y: auto; }
.pick-row { width: 100%; min-height: 48px; display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.pick-row .icon { color: transparent; border: 2px solid var(--line); border-radius: 6px; }
.pick-row[aria-pressed='true'] { border-color: var(--accent); }
.pick-row[aria-pressed='true'] .icon { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }
.pick-row .mini-meta { grid-column: 2; }
.panel-card.soon { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ---------- lock ---------- */
.lock-screen {
  position: fixed; inset: 0; z-index: 100; background: var(--navy); color: var(--navy-ink);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.lock-card { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lock-card .lead { color: var(--navy-muted); margin: 0; }
.lock-logo .logo { width: 48px; height: 48px; }
.pin-dots { display: flex; gap: 12px; margin: 8px 0; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--navy-muted); }
.pin-dot.on { background: var(--navy-ink); border-color: var(--navy-ink); }
.pin-status { min-height: 1.6em; margin: 0; color: #FFD2CB; font-size: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.key {
  min-height: 60px; font-size: 22px; font-family: var(--mono); font-weight: 400; color: var(--navy-ink);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 14px; cursor: pointer;
}
.key-fn { font-family: var(--sans); font-size: 15px; font-weight: 700; }
.lock-card .ghost { color: var(--navy-ink); background: transparent; border-color: rgba(255, 255, 255, 0.3); }
.lock-screen.shake .lock-card { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .lock-screen.shake .lock-card { animation: none; } }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100vw - 24px)); }
.toast { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--ink); color: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.toast-error { background: var(--danger); color: #FFFFFF; }
.toast-text { flex: 1 1 auto; margin: 0; font-size: 14px; }
.toast-action { min-height: 44px; padding: 8px 12px; font-weight: 700; color: inherit; background: rgba(255, 255, 255, 0.16); border: 0; border-radius: 10px; cursor: pointer; font-size: 14px; }
.toast-close { min-width: 44px; min-height: 44px; color: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- share page ---------- */
.share-page { min-height: 100dvh; }
.share-top { background: var(--navy); color: var(--navy-ink); padding: 24px 20px; }
.share-brand { margin: 0 0 4px; color: var(--navy-muted); font-size: 14px; }
.share-title { margin: 0; font-size: 26px; line-height: 1.35; overflow-wrap: anywhere; }
.share-meta { margin: 6px 0 0; color: var(--navy-muted); font-size: 14px; }
.share-main { padding: 20px; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.share-card { padding-bottom: 12px; }
.share-card > .card-title, .share-card > .card-note, .share-card > .row-actions, .share-card > .hint { padding: 0 12px; margin: 12px 0 0; }
.share-card .card-title { font-family: var(--sans); padding-right: 12px; }
.share-card a.tile { display: flex; }
.share-foot { text-align: center; }

/* ---------- narrower screens ---------- */
@media (max-width: 1279.98px) {
  .masonry { column-count: 3; }
}

@media (max-width: 1099.98px) {
  /* 아래 메뉴는 화면 아래에 늘 붙어 있다(주인 10-14 "아래 메뉴 못 보면 어떻게해"). sticky는 body의 overflow-x 때문에
     움직이지 않아 페이지 끝에서만 보였다 → fixed + 그만큼 아래 여백. */
  :root { --tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: var(--tabbar-h); }
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .shell:has(> .tabs) { padding-bottom: var(--tabbar-h); }
  .side { display: none; }
  .topbar { background: var(--navy); color: var(--navy-ink); border-bottom: 0; padding: 8px 12px; }
  .topbar .top-logo { display: inline-flex; }
  .topbar .crumb { color: var(--navy-muted); font-size: 12px; }
  .topbar .page-title { font-size: 20px; }
  .topbar .lock-btn { background: transparent; color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.3); }
  .view { padding: 16px 16px 24px; }
  .only-narrow { display: flex; flex-direction: column; gap: 8px; }
  .selbar { top: 70px; }

  .tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--navy);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); gap: 2px;
  }
  .tab-btn {
    flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 4px 2px; font-size: 12px; font-weight: 700; color: var(--navy-muted); background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  }
  .tab-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-btn[aria-current='page'] { background: rgba(255, 255, 255, 0.14); color: var(--navy-ink); }
  .toasts { bottom: 90px; }
}

@media (max-width: 859.98px) {
  .masonry { column-count: 2; column-gap: 10px; }
  .home-grid, .seat-grid { grid-template-columns: minmax(0, 1fr); }
  .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hello-title { font-size: 21px; }
  .dialog.drawer { width: 100vw; border-radius: 0; }
  .catcher-row { flex-wrap: wrap; padding: 6px; }
  .catcher-row .search-input { flex: 1 1 100%; order: -1; padding-left: 8px; }
  .catcher-icon { display: none; }
  .catcher-row .primary, .catcher-row .ghost { flex: 1 1 0; }
}

@media (max-width: 599.98px) {
  .dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  /* 넓은 창(.wide)도 휴대폰에서는 화면 폭 그대로 -- 오른쪽에 빈 띠가 남지 않게 */
  .dialog.wide { width: 100vw; }
  .lock-btn .label, .lock-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lock-btn { min-width: 46px; padding: 10px; }
  .card-title { font-size: 14px; }
  .reset-notice { margin: 12px 16px 0; }
  .reset-notice button { flex: 1 1 100%; }
  .selbar .ghost { padding: 8px 10px; font-size: 14px; }
  .share-title { font-size: 22px; }
}

@media (max-width: 359.98px) {
  .masonry { column-count: 1; }
}

/* ---------- 우리 학교 ---------- */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: #E0613F; color: #FFFFFF; font-size: 12px; font-weight: 700; font-family: var(--mono); line-height: 1;
}
.menu-btn .count-badge { margin-left: auto; }
.tab-btn { position: relative; }
.tab-btn .count-badge { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 20px; height: 20px; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: #E0613F; display: inline-block; flex: 0 0 auto; margin-right: 6px; }
.school-card { background: var(--navy); color: var(--navy-ink); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.school-name { margin: 0; font-size: 24px; }
.school-where, .school-count { margin: 0; color: var(--navy-muted); font-size: 14px; }
.school-panel { display: flex; flex-direction: column; gap: 12px; }
.notice-list, .member-list, .invite-list, .event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notice { border-top: 1px solid var(--line); }
.notice:first-child { border-top: 0; }
.notice-head {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0; align-items: center;
  padding: 10px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.notice-head .unread-dot { grid-row: span 2; }
.notice-head .mini-meta { grid-column: 2; }
.notice-title { font-weight: 700; overflow-wrap: anywhere; grid-column: 2; }
.notice.unread .notice-title { color: var(--ink); }
.notice.open { background: var(--soft); border-radius: 10px; }
.notice-body { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.notice-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.notice-link { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.member:first-child { border-top: 0; }
.pending-member { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pending-member:first-child { border-top: 0; }
.member-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.member-actions { flex: 0 1 auto; }
.primary.danger-fill { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.temp-value { font-size: 30px; font-weight: 400; letter-spacing: 0.08em; margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--soft); border: 2px dashed var(--accent); text-align: center; overflow-wrap: anywhere; }
.invite-made { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--card); }
.invite-made-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.letter { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
.invite-qr .qr { width: 160px; height: 160px; image-rendering: pixelated; border-radius: 8px; }
.qr-big { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.qr-big .qr { width: min(70dvh, 100%); height: auto; aspect-ratio: 1 / 1; image-rendering: pixelated; }
.qr-url { font-size: 18px; overflow-wrap: anywhere; margin: 0; }
.invite-row, .event-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.invite-row:first-child, .event-row:first-child { border-top: 0; }
.invite-code-line, .event-main { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.invite-code { font-size: 15px; font-weight: 400; letter-spacing: 0.04em; }
.badge.invite-live { color: var(--ok); border-color: var(--ok); }
.badge.invite-revoked, .badge.invite-expired, .badge.invite-full { color: var(--muted); }
.event-name { font-weight: 700; }
.event-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.demo-link .hint { display: block; }

/* ---------- 도구함 ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tool-head { display: flex; gap: 12px; align-items: center; }
.tool-mark { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; background: var(--navy); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 22px; }
.tool-name { margin: 0; font-size: 20px; }
.tool-summary { margin: 0; color: var(--muted); font-size: 14px; }
.tool-can { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.tool-open { align-self: flex-start; min-width: 120px; }
.tool-open[disabled] { opacity: 0.7; cursor: not-allowed; }
.tools-lead { margin: 0; }

/* ---------- 체험 모드 ---------- */
.demo-bar {
  position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  padding: 6px 12px; background: #FDF6E6; color: #6B4304; border-bottom: 1px solid #E8C77A;
}
.demo-text { margin: 0; font-size: 14px; font-weight: 700; text-align: center; flex: 0 1 auto; }
.demo-restart { min-height: 44px; padding: 6px 14px; font-size: 14px; font-weight: 700; color: #6B4304; background: #FFFFFF; border: 1px solid #E8C77A; border-radius: 10px; cursor: pointer; }
.demo-page .topbar { position: static; }
.demo-page .selbar { top: 64px; }
.demo-page .side { top: 0; }

@media (max-width: 859.98px) {
  .invite-made { grid-template-columns: minmax(0, 1fr); }
  .invite-qr { justify-self: center; }
}
@media (max-width: 599.98px) {
  .temp-value { font-size: 24px; }
  .demo-text { font-size: 13px; }
}

/* buttons next to an input keep their words on one line */
.with-button > .primary, .with-button > .ghost { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 599.98px) {
  .demo-bar { flex-wrap: nowrap; justify-content: space-between; padding: 4px 8px 4px 12px; }
  .demo-text { text-align: left; line-height: 1.4; font-size: 12px; }
  .demo-restart { flex: 0 0 auto; padding: 6px 10px; }
}

/* ---------- 2차-①: 할 일 편집 · 작년 이맘때 · 넘기기 미리 보기 · 일정 ---------- */
.task-list.editable { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
.task-row .task-title { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.task-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.task-tools .ghost { min-height: 44px; padding: 6px 10px; font-size: 14px; }
.task-move { font-size: 18px; }
.move-mark { font-size: 18px; line-height: 1; }
.task-row.moving { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.task-row.drop-target { padding: 0; border-style: dashed; border-color: var(--accent); }
.task-drop { width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; border-radius: 10px; }
.task-row.editing { padding: 6px; }
.task-row.editing .with-button { width: 100%; flex-wrap: wrap; }
.task-add { margin-top: 6px; }
.task-add .with-button .input { min-width: 0; }
.task-status-row { min-height: 1em; }
.move-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.last-year { display: flex; flex-direction: column; gap: 10px; }
.last-year-empty { padding: 4px 0; }
.handover-preview { display: flex; flex-direction: column; gap: 14px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.preview-part { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.preview-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.preview-month { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; font-size: 14px; }
.preview-month-name { font-weight: 700; font-family: var(--mono); }
.preview-month-tasks { color: var(--ink); overflow-wrap: anywhere; }
.pii-stay { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); padding: 12px; }
.pii-stay .label { color: var(--warn); }
.event-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.event-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.event-item:first-child { border-top: 0; }
.event-date { display: flex; flex-direction: column; min-width: 92px; }
.event-day { font-weight: 700; font-family: var(--mono); font-size: 14px; }
.event-title-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.event-title { font-weight: 700; overflow-wrap: anywhere; }
.event-items.compact .event-item { padding: 8px 0; }
.badge.dday { font-family: var(--mono); font-weight: 700; }
.badge.dday-near { background: #B5401F; border-color: #B5401F; color: #FFFFFF; }
.badge.dday-past { text-decoration: line-through; }
.event-when { flex-wrap: wrap; }
.event-when .field { flex: 1 1 160px; min-width: 0; }
.scope { border: 0; padding: 0; margin: 0; }

/* no grey flash where a finger tapped */
button, a, label, summary { -webkit-tap-highlight-color: transparent; }

/* ---------- 잔일: chips on one scrolling line when narrow, trash note ---------- */
.trash-note { margin: 0; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.trash-note > .hint { margin: 0; flex: 1 1 260px; min-width: 0; }
.trash-note > button[hidden] { display: none; }
@media (max-width: 859.98px) {
  .filters { flex-direction: column; align-items: stretch; }
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px;
  }
  .chip-row > * { flex: 0 0 auto; }
}

/* ---------- 2차-②: 구글 캘린더 구독 주소 ---------- */
/* the row above the schedule area, and the pair of small buttons on the 이번 주 card */
.cal-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
/* 방학까지 · 개학까지 (주인 10-12): 달력 맨 위 · 홈 이번 주의 한 줄. 휴대폰에서는 단추 아래로 내려 한 줄 다 쓴다 */
.cal-break { flex: 1 1 260px; min-width: 0; }
.break-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0;
  padding: 6px 12px; text-align: left; font-size: 15px; color: var(--ink);
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
}
button.break-btn { cursor: pointer; }
button.break-btn:hover { border-color: var(--accent); }
.break-btn > .icon { flex: 0 0 auto; color: var(--accent); }
.cal-break[data-kind="start"] .break-btn > .icon { color: var(--ok); }
.break-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.break-main { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.break-sub { font-variant-numeric: tabular-nums; }
.break-note { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.home-break { margin-bottom: 10px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cal-dialog { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* four switches side by side while there is room, stacked on a phone */
.cal-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; }
.cal-address { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* the address, shortened in the middle so it fits without a sideways scroll */
.cal-url-short { margin: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.cal-address .with-button { flex-wrap: wrap; }
.cal-address .with-button .input { flex: 1 1 200px; min-width: 0; }
.cal-open-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-open-row .hint { flex: 1 1 200px; margin: 0; }
.cal-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; }
.cal-steps li { overflow-wrap: anywhere; }
.cal-reset { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.cal-reset .hint { margin: 0; }

/* ---------- 2차-③: 일정 달력 (시안-5) ---------- */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.cal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cal-title { margin: 0; font-size: 20px; font-weight: 700; min-width: 7em; text-align: center; }
/* the next arrow is the back arrow turned round */
#cal-next .icon { transform: scaleX(-1); }
.cal-neis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-neis:empty { display: none; }

/* the six switches: a colour dot, a word, this month's count */
.cal-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer;
}
.cal-chip.on { color: var(--ink); border-color: var(--chip); background: var(--card); font-weight: 700; }
.cal-chip .cal-dot { background: var(--chip); }
.cal-chip:not(.on) .cal-dot { background: var(--line); }
.cal-chip-n { font-family: var(--mono); font-size: 13px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); }
.cal-dot.layer-school { background: #2E7DCD; }
.cal-dot.layer-mine { background: #2E9C6C; }
.cal-dot.layer-due { background: #E0613F; }
.cal-dot.layer-tasks { background: #7A5BC7; }
.cal-dot.layer-neis { background: #1B8C9A; }
.cal-dot.layer-holiday { background: #C24D7C; }

.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cal-body { min-width: 0; border-radius: var(--radius); }
.cal-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cal-week-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 4px; }
.cal-wd { text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-wd.sun { color: #C0392B; }
.cal-wd.sat { color: #2E7DCD; }
.cal-grid { display: flex; flex-direction: column; gap: 2px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; position: relative; }
.cal-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
  min-height: 84px; padding: 4px; text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; cursor: pointer;
}
.cal-cell.outside { background: var(--soft); color: var(--muted); }
.cal-cell.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-num { font-family: var(--mono); font-size: 14px; font-weight: 700; align-self: flex-start; padding: 2px 4px; line-height: 20px; }
.cal-cell.kind-sun .cal-num, .cal-cell.kind-holiday .cal-num { color: #C0392B; }
.cal-cell.kind-sat .cal-num { color: #2E7DCD; }
.cal-cell.today .cal-num { background: var(--navy); color: #FFFFFF; border-radius: 999px; min-width: 26px; text-align: center; }
.cal-num.cal-num-month { font-family: var(--sans); font-size: 13px; }
.cal-off { font-size: 12px; color: #C0392B; overflow-wrap: anywhere; }
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-ev {
  font-size: 12px; line-height: 1.4; padding: 1px 4px; border-radius: 4px; background: var(--soft);
  border-left: 3px solid var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev.layer-school { border-left-color: #2E7DCD; }
.cal-ev.layer-mine { border-left-color: #2E9C6C; }
.cal-ev.layer-due { border-left-color: #E0613F; }
.cal-ev.layer-tasks { border-left-color: #7A5BC7; }
.cal-ev.layer-neis { border-left-color: #1B8C9A; }
.cal-ev.layer-holiday { border-left-color: #C24D7C; }
.cal-more { font-size: 12px; color: var(--muted); padding: 0 4px; }
.cal-dots { display: none; gap: 3px; flex-wrap: wrap; padding: 0 4px; }
.cal-grid-week .cal-cell { min-height: 160px; }
/* 여러 날 일정 = 이어진 막대(주인 10-11). 칸 위에 겹쳐 그리고(누르면 그 칸), 칸에는 막대 줄만큼 빈자리.
   위치: 칸 테두리 1 + 안쪽 4 + 날짜 24 + 사이 2 = 31px 아래부터, 한 줄 20px + 사이 2px */
.cal-lanes { display: block; flex: none; height: calc(var(--lanes, 1) * 22px - 2px); }
.cal-spans {
  position: absolute; left: 0; right: 0; top: 31px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 20px; column-gap: 2px; row-gap: 2px; pointer-events: none;
}
.cal-span {
  --bar: var(--muted);
  grid-column: var(--col); grid-row: var(--lane); display: flex; align-items: center; min-width: 0;
  margin: 0 3px; padding: 0 6px; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 20px; color: var(--ink);
  background: color-mix(in srgb, var(--bar) 26%, var(--card)); box-shadow: inset 3px 0 0 var(--bar); overflow: hidden;
}
.cal-span.cut-head { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.cal-span.cut-tail { margin-right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-span-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-span.layer-school { --bar: #2E7DCD; }
.cal-span.layer-mine { --bar: #2E9C6C; }
.cal-span.layer-due { --bar: #E0613F; }
.cal-span.layer-tasks { --bar: #7A5BC7; }
.cal-span.layer-neis { --bar: #1B8C9A; }
.cal-span.layer-holiday { --bar: #C24D7C; }
.cal-span.cal-ev-grade { --bar: var(--chip); }
.cal-span.cal-ev-ghost { opacity: 0.5; }
/* 일정 ②(주인 10-11): 마감 · 이달 할 일은 동그라미, 끝내면 ✓ 회색. 일정은 왼쪽 색 줄 그대로 */
.cal-ev.cal-ev-ring { border-left: 0; padding-left: 4px; }
.cal-ev.cal-ev-ring::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid var(--ring, #E0613F); box-sizing: border-box;
}
.cal-ev.cal-ev-ring.layer-tasks { --ring: #7A5BC7; }
.cal-ev.is-done { background: var(--soft); color: var(--muted); border-left-color: var(--line); }
.cal-ev.cal-ev-ring.is-done::before {
  content: '\2713'; border: 0; background: var(--muted); color: var(--card);
  font-size: 8px; font-weight: 800; line-height: 10px; text-align: center;
}
.cal-dot.is-done { background: var(--line); }
.cal-span.is-done { --bar: var(--muted); color: var(--muted); }
.cal-done-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: -6px 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.cal-done-btn:hover { background: var(--soft); }
.cal-done-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.cal-done-ring {
  width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ring, #E0613F); box-sizing: border-box;
  display: grid; place-items: center; color: var(--card); font-size: 13px; font-weight: 800; line-height: 1;
}
.cal-done-ring.layer-tasks { --ring: #7A5BC7; }
.cal-done-btn[aria-pressed='true'] .cal-done-ring { background: var(--muted); border-color: var(--muted); }
.cal-done-btn[aria-pressed='true'] .cal-done-ring::after { content: '\2713'; }
.event-item.is-done .event-title { color: var(--muted); }
.event-item.is-done .badge.dday { display: none; }
/* 일정 ⑥(주인 10-11): 달력 모양 — 이 기기에만. 기본은 지금 모습(기기 밝기를 따름).
   모양은 .cal-wrap 안의 색 토큰만 바꾼다(칸 · 칩 · 막대 · 그날 칸이 같은 토큰을 쓴다). */
.cal-wrap:not([data-look="basic"]) { padding: 12px; border-radius: 16px; color: var(--ink); }
.cal-wrap[data-look="dark"] {
  --bg: #0C1220; --card: #141C2B; --line: #26314A; --ink: #E6EAF2; --muted: #9AA6BE; --soft: #101828;
  --accent: #7D9CFF; --accent-ink: #0C1220; --navy: #2A3A5E; background: var(--bg); color-scheme: dark;
}
.cal-wrap[data-look="sky"], .cal-wrap[data-look="forest"], .cal-wrap[data-look="dusk"], .cal-wrap[data-look="photo"] {
  --card: rgba(14, 18, 28, 0.74); --soft: rgba(255, 255, 255, 0.1); --line: rgba(255, 255, 255, 0.18);
  --ink: #F3F6FB; --muted: #C9D0DD; --accent: #A9BFFF; --accent-ink: #0C1220; --navy: #FFFFFF;
  background: var(--look-bg) center / cover no-repeat; color-scheme: dark;
}
.cal-wrap[data-look="sky"] { --look-bg: linear-gradient(180deg, #8FB6DE 0%, #C7DCEB 38%, #9DBBD6 100%); }
.cal-wrap[data-look="forest"] { --look-bg: linear-gradient(180deg, #A9C9A4 0%, #5F8F62 45%, #2E5136 100%); }
.cal-wrap[data-look="dusk"] { --look-bg: linear-gradient(180deg, #F2B880 0%, #D9788A 45%, #4B3B6E 100%); }
.cal-wrap[data-look="photo"] { --look-bg: var(--photo, linear-gradient(180deg, #557F5A, #2F5236)); }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-cell { backdrop-filter: blur(10px); }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-cell.today .cal-num { color: #162034; }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-day { background: var(--card); border-radius: 12px; padding: 12px; }
.cal-wrap:not([data-look="basic"]) .cal-wd.sun, .cal-wrap:not([data-look="basic"]) .cal-off,
.cal-wrap:not([data-look="basic"]) .cal-cell.kind-sun .cal-num, .cal-wrap:not([data-look="basic"]) .cal-cell.kind-holiday .cal-num,
.cal-wrap:not([data-look="basic"]) .cal-day-off { color: #FF8F80; }
.cal-wrap:not([data-look="basic"]) .cal-wd.sat, .cal-wrap:not([data-look="basic"]) .cal-cell.kind-sat:not(.today) .cal-num { color: #8EC3FA; }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-week-head { background: var(--card); border-radius: 10px; }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-wd { color: var(--ink); }
.cal-wrap:is([data-look="sky"], [data-look="forest"], [data-look="dusk"], [data-look="photo"]) .cal-cell.outside { background: rgba(14, 18, 28, 0.5); color: var(--muted); }
.cal-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cal-look-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 44px; padding: 6px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cal-look-opt[aria-checked='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-look-opt:disabled { opacity: 0.5; cursor: default; }
.cal-look-swatch { height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.cal-look-swatch[data-look="dark"] { background: #141C2B; }
.cal-look-swatch[data-look="sky"] { background: linear-gradient(180deg, #8FB6DE, #C7DCEB 50%, #9DBBD6); }
.cal-look-swatch[data-look="forest"] { background: linear-gradient(180deg, #A9C9A4, #5F8F62 50%, #2E5136); }
.cal-look-swatch[data-look="dusk"] { background: linear-gradient(180deg, #F2B880, #D9788A 50%, #4B3B6E); }
.cal-look-swatch[data-look="photo"] { background: var(--photo, repeating-linear-gradient(45deg, var(--soft) 0 6px, var(--line) 6px 12px)) center / cover; }
/* 일정 ④(주인 10-11): 마감 네 칸 — 그날 칸 아래(넓으면 오른쪽 칸 안) */
.cal-due { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.cal-due-title { margin: 0; font-size: 15px; font-weight: 700; }
.cal-due-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.cal-due-box { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cal-due-head { display: flex; align-items: center; gap: 6px; padding: 0 2px 2px; }
.cal-due-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.due-late .cal-due-name { color: var(--danger); }
.due-next .cal-due-name { color: var(--warn); }
.cal-due-n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #FFFFFF; background: #C24E2F; }
.due-late .cal-due-n { background: #B3261E; }
.due-next .cal-due-n { background: #8A5300; }
.due-later .cal-due-n { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cal-due-n.zero { background: var(--line); color: var(--muted); }
.cal-due-row {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 4px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.cal-due-row:hover { background: var(--soft); }
.cal-due-ring { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #E0613F; box-sizing: border-box; }
.cal-due-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-due-when { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.due-late .cal-due-when, .due-this .cal-due-when { color: var(--danger); font-weight: 600; }
.cal-due-row.is-done { color: var(--muted); }
.cal-due-row.is-done .cal-due-ring { border: 0; background: var(--muted); }
.cal-due-row.is-done .cal-due-when { color: var(--muted); font-weight: 400; }
.cal-due-more { margin: 0; padding: 0 4px; font-size: 12px; color: var(--muted); }
/* 일정 ⑤(주인 10-11): 하루 한 장 — 위 그 주 띠, 아래 왼쪽 '때' 칸 일정 */
.cal-view-day { display: flex; flex-direction: column; gap: 10px; }
.cal-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-strip-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 2px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.cal-strip-wd { font-size: 12px; color: var(--muted); }
.cal-strip-num { font-family: var(--mono); font-size: 16px; font-weight: 700; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; }
.cal-strip-day.kind-sun .cal-strip-num, .cal-strip-day.kind-holiday .cal-strip-num { color: #C0392B; }
.cal-strip-day.kind-sat .cal-strip-num { color: #2E7DCD; }
.cal-strip-day.today .cal-strip-num { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-strip-day.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-strip-day.picked .cal-strip-num { background: var(--navy); color: #FFFFFF; box-shadow: none; }
.cal-strip-dots { display: flex; gap: 3px; min-height: 8px; flex-wrap: wrap; justify-content: center; }
.cal-sheet { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.cal-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal-ag-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--line); }
.cal-ag-row:first-child { border-top: 0; }
.cal-ag-time { flex: none; width: 52px; text-align: right; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-ag-bar { flex: none; width: 4px; height: 28px; margin: 0 20px; border-radius: 2px; background: var(--muted); }
.cal-ag-bar.layer-school { background: #2E7DCD; }
.cal-ag-bar.layer-mine { background: #2E9C6C; }
.cal-ag-bar.layer-tasks { background: #7A5BC7; }
.cal-ag-bar.layer-neis { background: #1B8C9A; }
.cal-ag-bar.layer-holiday { background: #C24D7C; }
.cal-ag-bar.cal-ev-grade { background: var(--chip); }
.cal-ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-ag-title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.cal-ag-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cal-ag-row.is-done .cal-ag-title { color: var(--muted); }
.cal-ag-edit { flex: none; }
.cal-wrap:not([data-look="basic"]) .cal-strip-day.kind-sun .cal-strip-num, .cal-wrap:not([data-look="basic"]) .cal-strip-day.kind-holiday .cal-strip-num { color: #FF8F80; }
.cal-wrap:not([data-look="basic"]) .cal-strip-day.kind-sat:not(.picked) .cal-strip-num { color: #8EC3FA; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-strip-day.kind-sun .cal-strip-num,
  :root:not([data-theme="light"]) .cal-strip-day.kind-holiday .cal-strip-num { color: #FF7B6B; }
  :root:not([data-theme="light"]) .cal-strip-day.kind-sat:not(.picked) .cal-strip-num { color: #7DB8F5; }
  :root:not([data-theme="light"]) .cal-off { color: #FF8F80; }
}
:root[data-theme="dark"] .cal-off { color: #FF8F80; }
/* 막대로 그린 일정의 칩은 휴대폰 주 보기(세로 목록)에서만 */
.cal-ev.cal-ev-span { display: none; }

/* the day pane, the list view */
.cal-day { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.cal-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cal-day-title { margin: 0; font-size: 17px; font-weight: 700; }
.cal-day-off { margin: 0; color: #C0392B; font-weight: 700; }
.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cal-list-day { display: flex; flex-direction: column; gap: 4px; }
.cal-list-date {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px; padding: 6px 8px; background: var(--soft); border: 0;
  border-radius: 8px; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-align: left;
}
.cal-list-date.today { background: var(--navy); color: #FFFFFF; }
.cal-list-date.today .mini-meta { color: var(--navy-muted); }
.badge-layer { white-space: nowrap; }

/* 홈 "이번 주" 한 줄 달력 */
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 10px; }
.week-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 60px;
  padding: 4px 2px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font: inherit; cursor: pointer;
}
.week-wd { font-size: 12px; color: var(--muted); }
.week-num { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.week-day.kind-sun .week-num, .week-day.kind-holiday .week-num { color: #C0392B; }
.week-day.kind-sat .week-num { color: #2E7DCD; }
.week-day.today { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.week-day.today .week-wd, .week-day.today .week-num { color: #FFFFFF; }
.week-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; min-height: 8px; }

/* the day pane moves to the right when there is room (시안-5: 1240px 이상) */
@media (min-width: 1240px) {
  .cal-wrap { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .cal-day { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 16px; }
}
/* a phone shows colour dots only, no words in the cells */
@media (max-width: 759.98px) {
  .cal-cell { min-height: 56px; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; }
  .cal-off { display: none; }
  .cal-title { font-size: 17px; min-width: 6em; }
  .cal-grid-week .cal-cell { min-height: 56px; }
  /* 주 보기는 휴대폰에서 날짜별 세로 목록으로 */
  .cal-grid-week { display: flex; flex-direction: column; }
  .cal-grid-week .cal-row { grid-template-columns: minmax(0, 1fr); }
  .cal-grid-week .cal-cell { min-height: 44px; flex-direction: row; align-items: center; gap: 8px; }
  .cal-grid-week .cal-chips { display: flex; flex-direction: row; flex-wrap: wrap; }
  .cal-grid-week .cal-dots { display: none; }
  /* 휴대폰 달 보기: 막대는 글자 없는 가는 줄(4px), 주 보기 목록에서는 막대 대신 칩 */
  .cal-lanes { height: calc(var(--lanes, 1) * 6px - 2px); }
  .cal-spans { grid-auto-rows: 4px; }
  .cal-span { margin: 0 2px; padding: 0; border-radius: 2px; background: var(--bar); box-shadow: none; }
  .cal-span-t { display: none; }
  .cal-grid-week .cal-spans, .cal-grid-week .cal-lanes { display: none; }
  .cal-grid-week .cal-ev.cal-ev-span { display: block; }
  /* a vertical list needs no row of weekday names */
  .cal-view-week .cal-week-head { display: none; }
}

/* ---------- 주간 교시표 (기능 키 weekly · SQL 025) ---------- */
/* 주 보기가 교시표면 그날 칸은 아래로 (교시표가 폭을 다 쓴다), 휴대폰은 하루씩 보기가 그날 칸을 대신한다 */
.cal-wrap.is-board { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1240px) {
  .cal-wrap.is-board .cal-day { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
}
.wk { min-width: 0; }
.wk-grid { display: grid; grid-template-columns: 64px repeat(var(--days, 5), minmax(0, 1fr)); gap: 3px; min-width: 0; }
.wk-corner { grid-row: 1; grid-column: 1; }
.wk-head {
  grid-row: 1; grid-column: var(--col); display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 48px; padding: 4px 2px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font: inherit; line-height: 1.3; cursor: pointer;
}
.wk-wd { font-size: 12px; font-weight: 700; color: var(--muted); }
.wk-num { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.wk-off { font-size: 12px; color: #C0392B; text-align: center; overflow-wrap: anywhere; }
.wk-head.kind-sun .wk-num, .wk-head.kind-holiday .wk-num { color: #C0392B; }
.wk-head.kind-sat .wk-num { color: #2E7DCD; }
.wk-head.today { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.wk-head.today .wk-wd, .wk-head.today .wk-num, .wk-head.today .wk-off { color: #FFFFFF; }
.wk-head.picked { box-shadow: inset 0 -3px 0 var(--accent); }
/* 어두운 화면은 남색이 바탕과 비슷해 오늘을 테두리로도 보인다 */
@media (prefers-color-scheme: dark) { .wk-head.today, .wk-tab.today { border-color: var(--accent); } }
.wk-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-label {
  grid-row: var(--row); grid-column: 1; display: flex; flex-direction: column; justify-content: center;
  min-height: 48px; padding: 2px 6px; background: var(--soft); border-radius: 8px; line-height: 1.3;
}
.wk-label-name { font-size: 13px; font-weight: 700; }
.wk-label-time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wk-cell {
  grid-row: var(--row) / span var(--span, 1); grid-column: var(--col); display: flex; flex-direction: column; gap: 3px;
  min-width: 0; min-height: 48px; padding: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.wk-cell.kind-all, .wk-cell.kind-morning, .wk-cell.kind-lunch, .wk-cell.kind-break, .wk-cell.kind-after { background: var(--soft); }
.wk-cell.picked { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.wk-cell.picked.kind-all, .wk-cell.picked.kind-morning, .wk-cell.picked.kind-lunch, .wk-cell.picked.kind-break, .wk-cell.picked.kind-after {
  background: color-mix(in srgb, var(--accent) 7%, var(--soft));
}
/* 종일 줄: 여러 날 일정은 이어진 막대 (lane마다 한 줄) */
.wk-allday {
  grid-row: var(--row); grid-column: 2 / -1; display: grid; min-width: 0; min-height: 48px; padding: 2px;
  grid-template-columns: repeat(var(--days, 5), minmax(0, 1fr)); grid-auto-rows: minmax(44px, auto); gap: 3px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
}
.wk-allday > .wk-bar { grid-column: var(--c0) / span var(--n); grid-row: var(--lane); }
.wk-allday > .wk-add { grid-column: var(--c0) / span 1; grid-row: 1 / span var(--lanes, 1); }
.wk-span .wk-chip { flex: 1 1 auto; justify-content: flex-start; }
.wk-chip {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; min-height: 44px;
  padding: 3px 6px 4px; text-align: left; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--c, var(--muted)); border-radius: 6px;
  font: inherit; line-height: 1.35; cursor: pointer;
}
.wk-chip:hover { border-color: var(--c, var(--line)); }
.wk-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-chip.is-neis { border-style: dashed; border-left-style: solid; }
.wk-chip.is-ghost { opacity: 0.55; }
.wk-who { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.wk-who-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.wk-dday { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.wk-title {
  font-size: 13px; font-weight: 500; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-meta { font-size: 12px; color: var(--muted); }
.wk-add {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px;
  padding: 0; background: transparent; border: 1px dashed transparent; border-radius: 6px; color: var(--muted);
  font: inherit; cursor: pointer;
}
.wk-add .icon { width: 18px; height: 18px; opacity: 0; transition: opacity 0.12s; }
.wk-add:hover, .wk-add:focus-visible { background: var(--card); border-color: var(--line); }
.wk-add:hover .icon, .wk-add:focus-visible .icon { opacity: 1; }
.wk-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 손가락 화면(태블릿)은 마우스를 올릴 수 없으니 + 를 늘 흐리게 보인다 */
@media (hover: none) { .wk-add .icon { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .wk-add .icon { transition: none; } }

/* 휴대폰: 요일 탭 + 그날의 줄 목록 */
.wk-days { display: none; }
.wk-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.wk-tab {
  display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 58px; padding: 4px 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; line-height: 1.25; cursor: pointer;
}
.wk-tab-wd { font-size: 12px; font-weight: 700; color: var(--muted); }
.wk-tab-num { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.wk-tab-n { min-height: 15px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); }
.wk-tab.kind-sun .wk-tab-num, .wk-tab.kind-holiday .wk-tab-num { color: #C0392B; }
.wk-tab.kind-sat .wk-tab-num { color: #2E7DCD; }
.wk-tab.today { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.wk-tab.today .wk-tab-wd, .wk-tab.today .wk-tab-n { color: var(--navy-muted); }
.wk-tab.today .wk-tab-num { color: #FFFFFF; }
.wk-tab.on { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.wk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wk-day-title { margin: 0; font-size: 17px; font-weight: 700; }
.wk-day-off { font-size: 14px; font-weight: 700; color: #C0392B; }
.wk-day-nav { display: flex; gap: 4px; margin-left: auto; }
.wk-next .icon { transform: scaleX(-1); }
.wk-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-line { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 6px; }
.wk-line-label {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 2px 8px;
  background: var(--soft); border-radius: 8px; line-height: 1.3;
}
.wk-line-label b { font-size: 14px; }
.wk-line-label small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.wk-line-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-add.wk-add-wide { justify-content: flex-start; padding: 0 12px; border-color: var(--line); font-size: 14px; }
.wk-add.wk-add-wide .icon { opacity: 0.7; }
.wk-cont { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); }
.wk-tt-short { display: none; }
@media (max-width: 759.98px) {
  .wk-tt-long { display: none; }
  .wk-tt-short { display: inline; }
  .wk-grid { display: none; }
  .wk-days { display: flex; flex-direction: column; gap: 10px; }
  .cal-wrap.is-board .cal-day { display: none; }
}

/* 바뀐 일정: 지난번에 본 뒤로 다른 선생님이 더하거나 고친 학교 일정 ('새' · '바뀜') */
.wk-fresh {
  flex: 0 0 auto; margin-left: auto; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px;
  white-space: nowrap; background: var(--accent); color: var(--accent-ink);
}
.wk-dday + .wk-fresh { margin-left: 4px; }
.wk-fresh.wk-fresh-changed { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wk-chip.is-fresh { border-color: var(--accent); border-left-color: var(--c, var(--accent)); }
.wk-tab.has-fresh { position: relative; }
.wk-tab.has-fresh::after {
  content: ''; position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--card);
}
.wk-fresh-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 100%; min-width: 0;
  padding: 6px 10px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; font-size: 14px;
}
.wk-fresh-line .wk-fresh { margin-left: 0; }
.wk-fresh-text { flex: 1 1 12em; min-width: 0; }
.wk-dept-title .wk-fresh, .event-title-line .wk-fresh { margin-left: 6px; vertical-align: 1px; }

/* 편의 ③ 옮기기: 넓은 화면은 칩을 끌어서(마우스 · 펜), 어디서나 자세히 창의 [옮기기] */
@media (pointer: fine) {
  .wk-grid .wk-chip.is-movable { cursor: grab; -webkit-user-select: none; user-select: none; }
}
.wk-chip.is-dragging { opacity: 0.45; }
body.wk-dragging, body.wk-dragging .wk-chip { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.wk-drop {
  position: fixed; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: 40; pointer-events: none;
  border: 2px dashed var(--accent); border-radius: 8px; background: rgba(35, 82, 209, 0.08);
}
.wk-drop[hidden] { display: none; }
.wk-drop-text {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 700; background: var(--accent); color: var(--accent-ink);
}
.wk-move { display: flex; flex-direction: column; gap: 10px; }
.wk-move > .label { margin: 0; }
.wk-move-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.wk-move-preview { margin: 0; }
#event-repeat-box .input { max-width: 220px; }
.wk-repeat-row .icon { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }

/* 홈 '오늘 교시표' (주간 교시표가 켜진 학교) */
.today-date { margin: 0 0 8px; font-size: 15px; }
.today-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.today-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.today-line:first-child { border-top: 0; padding-top: 0; }
.today-when { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; line-height: 1.3; }
.today-when small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.today-now { margin-top: 2px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px; background: var(--accent); color: var(--accent-ink); }
.today-line.is-now .today-when b { color: var(--accent); }
.today-items { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.today-ev {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 6px 10px;
  text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--accent));
  border-radius: 10px; font: inherit; line-height: 1.35; cursor: pointer;
}
.today-ev:hover { border-color: var(--c, var(--accent)); }
.today-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.today-ev.is-fresh { border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); }
.today-ev-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.today-ev-title .wk-fresh { margin-left: 0; }
.today-ev-meta { font-size: 12px; color: var(--muted); }
.today-fresh, .today-seat { margin: 8px 0 0; }

/* 교시표 도구 막대: [교시표] [부서별] + 지난주 가져오기 · 내보내기 · 종 시간 */
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.wk-tools-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
@media (max-width: 759.98px) {
  /* 휴대폰: 세 단추를 한 줄에 -- 그림 위, 이름 아래 */
  .wk-tools-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-left: 0; }
  .wk-tools-btns > button { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px; font-size: 13px; line-height: 1.25; text-align: center; }
}

/* 빠른 입력 (넓은 화면) · 휴대폰 [+] 단추 */
.wk-quick-row { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.input.wk-quick { width: 100%; min-height: 44px; }
.wk-quick-hint { margin: 0; }
.wk-seat-note { margin: 6px 0 0; }
.wk-fab { display: none; }
@media (max-width: 759.98px) {
  .wk-quick-row { display: none; }
  .wk-fab:not([hidden]) {
    position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 5;
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
    background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 50%;
    box-shadow: 0 8px 20px rgba(19, 37, 74, 0.28); cursor: pointer;
  }
  .wk-fab .icon { width: 26px; height: 26px; }
  .wk-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  /* 떠 있는 단추가 하루 목록의 마지막 줄을 가리지 않게 */
  .cal-wrap.is-board { padding-bottom: 72px; }
}

/* 부서별 보기 */
.wk-depts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wk-dept-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wk-dept-count { margin: 0; font-size: 15px; }
.wk-dept-count b { font-family: var(--mono); }
.wk-dept-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; }
.wk-dept {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); border-radius: 10px;
}
.wk-dept.is-empty { background: var(--soft); border-left-color: var(--line); }
.wk-dept-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wk-dept-name strong { font-size: 15px; overflow-wrap: anywhere; }
.wk-dept-n { min-width: 24px; padding: 0 6px; border-radius: 999px; background: var(--soft); font-family: var(--mono); font-size: 13px; text-align: center; }
.wk-dept-add { margin-left: auto; }
.wk-dept-none { margin: 0; font-size: 14px; color: var(--muted); }
.wk-dept-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-dept-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'when by' 'title title';
  gap: 0 8px; width: 100%; min-height: 44px; padding: 4px 8px; text-align: left; background: var(--soft);
  border: 1px solid transparent; border-radius: 8px; color: var(--ink); font: inherit; line-height: 1.4; cursor: pointer;
}
.wk-dept-item:hover { border-color: var(--line); }
.wk-dept-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wk-dept-when { grid-area: when; font-size: 13px; font-weight: 700; color: var(--muted); }
.wk-dept-by { grid-area: by; font-size: 12px; color: var(--muted); white-space: nowrap; }
.wk-dept-title { grid-area: title; font-size: 14px; overflow-wrap: anywhere; }
.wk-dept-note { margin: 0; }

/* [내보내기] 창: 다섯 가지를 큰 줄로 (휴대폰은 아래에서 올라오는 판) */
.wk-x-box { display: flex; flex-direction: column; gap: 10px; }
.wk-x-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-x {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; text-align: left;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font: inherit; cursor: pointer;
}
.wk-x:hover { border-color: var(--accent); }
.wk-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-x .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); }
.wk-x-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.wk-x-label { font-size: 15px; font-weight: 700; }
.wk-x-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
/* 표로 복사가 막힌 브라우저: 화면 밖에 잠깐 두고 골라서 복사 */
.wk-clip { position: fixed; left: -10000px; top: 0; width: 900px; background: #FFFFFF; color: #000000; }

/* 메신저용 복사 · 지난주에서 가져오기 */
.wk-msg-text { font-family: var(--mono); line-height: 1.55; min-height: 240px; }
.wk-last-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wk-last-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'box when tag' 'box title title'; gap: 0 10px; align-items: center; }
.wk-last-row input { grid-area: box; }
.wk-last-when { grid-area: when; font-size: 13px; font-weight: 700; color: var(--muted); }
.wk-last-title { grid-area: title; overflow-wrap: anywhere; }
.wk-last-tag { grid-area: tag; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* 인쇄: A4 가로 한 장 -- 인쇄할 때만 화면 밖 #wk-print 하나를 보인다 */
.wk-print { display: none; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body.wk-printing { background: #FFFFFF; }
  body.wk-printing > *:not(#wk-print) { display: none !important; }
  body.wk-printing #wk-print {
    display: block; color: #000000; background: #FFFFFF;
    --card: #FFFFFF; --soft: #F3F4F6; --line: #B9BEC8; --ink: #000000; --muted: #3A4252; --navy: #13254A; --accent: #2352D1;
  }
  .wk-print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .wk-print-title { margin: 0; font-size: 15pt; }
  .wk-print-meta { margin: 0; font-size: 8pt; color: #3A4252; }
  .wk-print .wk-grid { gap: 2px; grid-template-columns: 54px repeat(var(--days, 5), minmax(0, 1fr)); }
  .wk-print .wk-head, .wk-print .wk-label, .wk-print .wk-cell, .wk-print .wk-allday { min-height: 0; break-inside: avoid; }
  .wk-print .wk-head { padding: 2px; }
  .wk-print .wk-head.today { background: #FFFFFF; color: #000000; border-color: #000000; }
  .wk-print .wk-head.today .wk-wd, .wk-print .wk-head.today .wk-num { color: #000000; }
  .wk-print .wk-chip { min-height: 0; padding: 1px 4px; background: #FFFFFF; break-inside: avoid; }
  .wk-print .wk-title { font-size: 8.5pt; -webkit-line-clamp: unset; line-clamp: unset; display: block; }
  .wk-print .wk-who, .wk-print .wk-meta, .wk-print .wk-label-time, .wk-print .wk-wd, .wk-print .wk-off { font-size: 7pt; }
  .wk-print .wk-num, .wk-print .wk-label-name { font-size: 9pt; }
  .wk-print .wk-allday { grid-auto-rows: auto; }
  .wk-print .wk-add { display: none; }
}

/* [종 시간] 창 */
.bell { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bell-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bell-tab {
  min-height: 44px; padding: 0 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.bell-tab[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.bell-tab:focus-visible, .bell-grade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bell-grades { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--soft); border-radius: 10px; }
.bell-grades-hint { margin: 0; font-size: 14px; color: var(--muted); }
.bell-grade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bell-grade {
  min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
}
.bell-grade[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.bell-grade:disabled { opacity: 0.45; cursor: not-allowed; }
.bell-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .bell-cols { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; } }
.bell-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bell-quick { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.bell-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bell-q { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.bell-q-name { font-weight: 700; }
.bell-q-unit { color: var(--muted); }
.bell-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.input.bell-num { width: 5.2em; min-height: 44px; padding: 6px 8px; }
.input.bell-time { width: 9em; min-height: 44px; padding: 6px 8px; font-family: var(--mono); }
.bell-qgroup { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.bell-table { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bell-row { display: grid; grid-template-columns: 7em 9em 9em minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.bell-row.head { font-size: 13px; font-weight: 700; color: var(--muted); }
.bell-row.kind-morning .bell-name, .bell-row.kind-break .bell-name, .bell-row.kind-lunch .bell-name, .bell-row.kind-after .bell-name { color: var(--muted); }
.bell-row.kind-lunch .bell-name { color: var(--ink); font-weight: 700; }
.bell-name { font-size: 14px; }
.bell-none { color: var(--muted); padding-left: 8px; }
.bell-err { font-size: 13px; color: var(--danger); overflow-wrap: anywhere; }
.bell-row.is-bad .input { border-color: var(--danger); }
.bell-table-tools { justify-content: flex-start; }
.bell-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--soft); border-radius: 10px; min-width: 0; }
.bell-preview-title { margin: 0; font-weight: 700; font-size: 14px; }
.bell-preview-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.bell-preview-list li { display: flex; justify-content: space-between; gap: 8px; }
.bell-preview-list li.kind-morning, .bell-preview-list li.kind-lunch, .bell-preview-list li.kind-after { color: var(--muted); }
.bell-preview-list small { font-family: var(--mono); font-size: 13px; }
.bell-problem:empty { display: none; }
.bell-problem { margin: 0; }
.bell-foot { justify-content: flex-end; }
.bell-line { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--soft); border-radius: 10px; }
.bell-line-label { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.bell-line-text { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
  .bell-row { grid-template-columns: minmax(0, 1fr) 8.6em 8.6em; }
  .bell-row .bell-err { grid-column: 1 / -1; }
  .bell-row .bell-err:empty { display: none; }
  .input.bell-time { width: 100%; }
  .bell-qgroup { flex-wrap: wrap; }
}

/* 일정 자세히 창 */
.wk-sheet { display: flex; flex-direction: column; gap: 12px; }
.wk-sheet-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wk-sheet-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.wk-sheet-row dt { font-size: 14px; font-weight: 700; color: var(--muted); }
.wk-sheet-row dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.wk-sheet-actions { justify-content: flex-end; flex-wrap: wrap; }
/* 휴대폰: 자세히 창은 아래에서 올라오는 짧은 판 (화면을 다 덮지 않는다) */
@media (max-width: 599.98px) {
  .dialog.wk-sheet-dialog {
    inset: auto 0 0 0; height: auto; max-height: 85dvh; margin: 0; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 더하기 창: 교시 칩 · 꼬리표 */
.wk-pick-box { display: flex; flex-direction: column; gap: 6px; }
.wk-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-pchip {
  min-width: 44px; min-height: 44px; padding: 0 12px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.wk-pchip.num { padding: 0 10px; font-family: var(--mono); }
.wk-pchip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wk-pchip:focus-visible, .wk-seat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wk-pick-preview, .wk-pick-hint { margin: 0; }
.wk-seat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wk-seat-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
}
.wk-seat-chip span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-seat-chip[aria-pressed='true'] { border-color: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); font-weight: 700; }
.wk-seat-more { margin-top: 6px; }

/* ---------- 운영 ---------- */
.op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.op-row { padding: 10px 0; border-top: 1px solid var(--line); }
.op-row:first-child { border-top: 0; }
.op-main { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-name { font-weight: 700; overflow-wrap: anywhere; }

/* ---------- 개인정보 지키기 ---------- */
/* 내 정보: in the side card on wide screens, in the top bar below 1100px; the lock moves into
   내 정보 on a phone, where the top bar has room for one button only */
.top-me { display: none; align-items: center; gap: 6px; }
.side .side-me { margin-top: 2px; }
@media (max-width: 1099.98px) {
  .top-me { display: inline-flex; min-height: 44px; }
  .topbar .top-me { background: transparent; color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.3); }
}
@media (max-width: 599.98px) {
  /* 교실 PC 지키기: [자리 비움] · [다 썼어요] stay on a phone too, as an icon (aria-label says the word) */
  .topbar .lock-btn { display: inline-flex; min-width: 46px; padding: 10px; justify-content: center; }
  .topbar .lock-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .top-me span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .top-me { min-width: 46px; padding: 10px; justify-content: center; }
}

/* 1분 뒤 잠겨요: on top of everything, never covering the button that answers it */
.idle-warn {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 95;
  width: min(560px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--ink);
  border: 1px solid var(--warn); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.idle-warn p { flex: 1 1 240px; margin: 0; font-weight: 700; }
.idle-warn button { flex: 0 0 auto; min-height: 44px; }

.box-info { background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.consent-notice { margin: 16px 24px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.consent-notice p { flex: 1 1 260px; margin: 0; }
.consent-notice .link-btn, .consent-notice button { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 599.98px) {
  .consent-notice { margin: 12px 16px 0; }
  .consent-notice .link-btn, .consent-notice button { flex: 1 1 40%; justify-content: center; }
}

.me-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.me-section .hint, .me-line { margin: 0; }
.me-line { font-size: 15px; }
.me-danger { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ok-text { color: var(--ok); font-weight: 700; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; }

.delete-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.delete-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.delete-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.delete-col-title { margin: 0 0 8px; font-size: 15px; font-family: var(--sans); }
.delete-col.gone .delete-col-title { color: var(--danger); }
.delete-col.kept .delete-col-title { color: var(--ok); }
@media (max-width: 599.98px) { .delete-table { grid-template-columns: minmax(0, 1fr); } }

.export-title { margin: 16px 0 4px; font-size: 16px; font-family: var(--sans); }
.export-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.export-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 4px; overflow-wrap: anywhere; }

.photo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.photo-line .hint { flex: 1 1 220px; margin: 0; }
.photo-line [aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tool-msg:empty { display: none; }
.tool-msg { margin-top: 10px; }
.tool-again { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.cal-mask { margin: 4px 0 12px; }
.cal-mask .hint { margin: 4px 0 0; }

/* the entrance: 로그인 유지 and the consent box on the join screen */
.keep-field .hint { margin-top: 2px; }
.consent-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--soft); }
.consent-title { margin: 0 0 6px; font-weight: 700; }
.consent-lines { margin: 0 0 6px; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.consent-more { margin: 0 0 4px; }
.consent-more a, .privacy-link { display: inline-flex; align-items: center; min-height: 44px; }
.need { color: var(--danger); font-size: 14px; }

/* ---------- 학습자료 내 책장 (SQL 012) ---------- */
.archive-tabs { margin-bottom: 12px; }
.archive-tab { display: inline-flex; align-items: center; gap: 6px; }
.new-dot { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; line-height: 1.5; }
.shelf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.shelf-top .shelf-search { flex: 1 1 220px; min-width: 0; }
.shelf-chip[aria-pressed='true'] { background: var(--subject, var(--accent)); border-color: var(--subject, var(--accent)); color: #FFFFFF; }
.shelf-grades { margin: 6px 0 12px; }
.shelf-suggest:empty { display: none; }
.shelf-suggest { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; background: var(--soft); }
.shelf-suggest-title { margin: 0 0 6px; font-size: 15px; font-family: var(--sans); }
.shelf-suggest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shelf-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.shelf-suggest-names { flex: 1 1 200px; min-width: 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.shelves { display: flex; flex-direction: column; gap: 18px; }
.shelf-subject-title { margin: 0 0 6px; font-size: 18px; font-family: var(--sans); color: var(--subject); }
.shelf-row { margin-bottom: 14px; min-width: 0; }
.shelf-unit { margin: 0 0 6px; font-size: 14px; font-family: var(--sans); color: var(--muted); }
/* the one place a sideways scroll is allowed: along a shelf */
.shelf-track { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; }
.shelf-base { height: 6px; border-radius: 3px; background: var(--subject); opacity: .55; }
.book { position: relative; flex: 0 0 168px; min-height: 150px; scroll-snap-align: start; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--subject, var(--accent)); border-radius: 10px; }
.book.chosen { outline: 3px solid var(--accent); outline-offset: 1px; }
.book.fresh { animation: book-fresh 2.2s ease-out; }
@keyframes book-fresh { 0% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .book.fresh { animation: none; box-shadow: 0 0 0 3px var(--accent); } }
.book-main { width: 100%; height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 10px; }
.book-kind { font-size: 12px; font-weight: 700; color: var(--subject, var(--muted)); padding-right: 44px; }
.book-title { font-weight: 700; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.book-meta { font-size: 13px; color: var(--muted); }
.book-pick { position: absolute; top: 6px; right: 6px; }
.book-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-style: dashed; border-left-width: 1px; color: var(--muted); font-weight: 700; cursor: pointer; min-height: 150px; padding: 10px; }
.book-add:hover { color: var(--accent); border-color: var(--accent); }
.place-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shelf-origin { border: 0; padding: 0; margin: 0; }
.shelf-part { display: flex; flex-direction: column; gap: 8px; }
.drawer-shelf { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 599.98px) {
  .place-row { grid-template-columns: minmax(0, 1fr); }
  .book { flex-basis: 148px; }
}

/* ---------- 업무-①: 공문 기록 · 업무분장표 ---------- */
.seat-views { margin-bottom: 12px; }
.seat-views .seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.doc-quick { margin: 4px 0 8px; }
.doc-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-quick-row #doc-quick { flex: 1 1 260px; min-width: 0; }
.doc-quick-row #doc-due { flex: 0 1 170px; min-width: 140px; }
.doc-notice { margin: 4px 0 10px; }
.doc-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-filter-row #doc-search { flex: 1 1 200px; min-width: 0; }
.small-select { min-height: 44px; max-width: 100%; }
.doc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.doc-body:has(.doc-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 4px 8px 4px 4px; }
.doc-card.chosen { outline: 3px solid var(--accent); outline-offset: 1px; }
.doc-card.active { border-color: var(--accent); }
.doc-card:focus-visible { outline: 3px solid var(--accent); }
.doc-main-btn { flex: 1 1 auto; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.doc-title { font-weight: 700; overflow-wrap: anywhere; }
.doc-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.doc-due { font-size: 13px; font-weight: 700; color: var(--accent); }
.doc-due.late { color: var(--danger); }
.doc-warn { font-size: 13px; color: var(--warn); }
.doc-done { flex: 0 0 auto; }
.doc-detail { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.doc-more { margin-top: 12px; }
.doc-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.doc-tip p { flex: 1 1 240px; margin: 0; }
.key-help { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; }
.key-help dd { margin: 0; }
.key-help kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; background: var(--soft); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.paste-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.paste-table th, .paste-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: middle; }
.paste-table th { background: var(--soft); font-weight: 700; }
.paste-table .input { min-width: 90px; }
.roster-linked td:last-child { color: var(--ok); }
.roster-pending td:last-child { color: var(--accent); }
.roster-ambiguous td:last-child, .roster-duplicate td:last-child { color: var(--warn); }
.roster-error { background: var(--danger-bg); }
.roster-error td:last-child { color: var(--danger); }
.roster-mapping { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.roster-col { margin: 0; }
.roster-sum { font-weight: 700; margin: 6px 0; }
.claims:empty { display: none; }
.claim-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.claim-band p { flex: 1 1 240px; margin: 0; }
.last-year-docs:empty { display: none; }
.last-year-docs { margin-top: 10px; }
@media (max-width: 859.98px) {
  .doc-body:has(.doc-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .doc-detail { position: static; }
}
.paste-table .input { font-size: 16px; }
.roster-help summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.paste-table input[type=checkbox] { font-size: 16px; width: 22px; height: 22px; accent-color: var(--accent); }

/* ---------------------------------------------------------------- 운영 총괄 */
.num { font-variant-numeric: tabular-nums; }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.op-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); position: sticky; top: 0; z-index: 5; }
.op-band.editing { border-color: var(--warn); background: var(--warn-bg); }
.op-band-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.op-band-reason { color: var(--muted); }
.op-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin: 0 0 8px; scrollbar-width: thin; }
.op-tab { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.op-tab[aria-selected='true'] { background: var(--ink); color: var(--card); border-color: var(--ink); font-weight: 700; }
.op-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 운영 5칸 (주인 10-13): 넓은 화면은 다섯 칸 한 줄, 좁으면 가로로 밀어 보는 알약 */
.op-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.op-group { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; min-height: 62px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.op-group[aria-selected='true'] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.op-group:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.op-group-name { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.op-group-sub { font-size: 12px; opacity: 0.75; overflow-wrap: anywhere; }
.op-group-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--danger); background: var(--danger-bg); color: var(--danger); font-size: 12px; font-weight: 700; }
.op-subtabs { margin-top: -2px; }
@media (max-width: 760px) {
  .op-groups { display: flex; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
  .op-group { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 999px; }
  .op-group-sub { display: none; }
  .op-todo { align-items: flex-start; }
}
.op-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.op-todo-text { flex: 1 1 220px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.op-todo-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--warn-bg); color: var(--warn); }
.op-todo-pill.danger { background: var(--danger-bg); color: var(--danger); }
.op-check.op-todo .op-todo-text { color: var(--ink); }
.op-calm { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.op-calm-row { overflow-wrap: anywhere; }
.op-reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.op-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.op-panel:focus { outline: none; }
.op-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.op-num { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.op-num-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.op-num-label { font-size: 13px; color: var(--muted); }
.op-check.warn p, .op-check.danger p { color: var(--warn); }
.op-check.ok p { color: var(--ok); }
.op-body { margin: 6px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.op-secret { padding: 8px 10px; border-radius: 8px; background: var(--soft); font-size: 16px; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.op-num-input { max-width: 120px; }
.op-ns-pick.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.op-ns-pick:disabled { opacity: 1; color: var(--muted); cursor: not-allowed; }
.op-ns-why { font-size: 13px; color: var(--muted); }
.op-joins-box summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.row-actions.wrap { flex-wrap: wrap; }
.empty-note { margin: 8px 0; color: var(--muted); }
.plain-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.steps-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

.op-gauge { height: 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; margin: 6px 0; }
.op-gauge-fill { display: block; height: 100%; width: var(--fill, 0%); background: var(--accent); }
.op-gauge.warn .op-gauge-fill { background: var(--warn); }

/* 2단계 인증 */
.mfa-box { display: flex; flex-direction: column; gap: 8px; }
.mfa-list { list-style: none; margin: 0; padding: 0; }
.mfa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.mfa-row:first-child { border-top: 0; }
.mfa-name { font-weight: 700; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mfa-qr { width: 200px; height: 200px; max-width: 100%; align-self: center; background: #FFFFFF; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.mfa-secret { padding: 8px 10px; border-radius: 8px; background: var(--soft); font-size: 16px; overflow-wrap: anywhere; user-select: all; }
.code-input { font-size: 22px; letter-spacing: 0.3em; max-width: 220px; }

/* 안내 띠 */
.status-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.status-band-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 업무-② */
/* 전체 찾기: a box in the top bar; on a phone a magnifier that opens the whole screen */
.find { position: relative; flex: 0 1 340px; min-width: 0; }
.find-bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.find-bar > .icon { flex: 0 0 auto; color: var(--muted); }
.find-input { min-width: 0; flex: 1 1 auto; }
.find-close { display: none; }
.find-btn { display: none; min-width: 46px; min-height: 44px; padding: 10px; justify-content: center; }
.find-panel {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(560px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(19, 37, 74, 0.18);
  padding: 8px; z-index: 30; display: flex; flex-direction: column; gap: 6px;
}
.find-panel[hidden] { display: none; }
.find-group { display: flex; flex-direction: column; gap: 2px; }
.find-group + .find-group { border-top: 1px solid var(--line); padding-top: 6px; }
.find-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; }
.find-group-title { font-size: 13px; font-weight: 700; color: var(--muted); }
.find-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.find-row {
  width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 8px 10px; background: transparent; border: 0; border-radius: 8px; color: inherit; font: inherit; cursor: pointer;
}
.find-row.find-recent { flex-direction: row; align-items: center; gap: 8px; }
.find-row:hover, .find-row.on, .find-row:focus-visible { background: var(--soft); outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.find-title { font-weight: 700; overflow-wrap: anywhere; }
.find-second { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.find-row mark { background: var(--warn-bg); color: inherit; border-bottom: 2px solid var(--warn); border-radius: 2px; padding: 0 1px; }
.find-more { align-self: flex-start; margin: 2px 8px; }
.find-empty, .find-hint { margin: 8px; }
@media (max-width: 1099.98px) {
  .find-bar > .icon { color: var(--navy-muted); }
}
@media (max-width: 759.98px) {
  .find { display: none; }
  .find-btn { display: inline-flex; }
  .topbar .find-btn { background: transparent; color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.3); }
  .find.open {
    display: flex; flex-direction: column; gap: 8px; position: fixed; inset: 0; z-index: 60;
    background: var(--bg); color: var(--ink); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .find.open .find-bar > .icon { color: var(--muted); }
  .find.open .find-close { display: inline-flex; min-height: 44px; }
  .find.open .find-panel { position: static; width: auto; max-height: none; flex: 1 1 auto; border: 0; box-shadow: none; padding: 0; background: transparent; }
}
body.find-full { overflow: hidden; }

/* 마감 배지: its own button next to 내 자리 (wide), a badge on the tab (phone) */
.menu-row { display: flex; align-items: center; gap: 2px; }
.menu-row .menu-btn { flex: 1 1 auto; }
.deadline-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.deadline-btn:hover { background: rgba(255, 255, 255, 0.07); }
.deadline-btn { gap: 4px; padding: 0 6px; }
.deadline-word { font-size: 12px; color: #FFFFFF; opacity: 0.85; }
.deadline-btn[hidden], .deadline-badge[hidden] { display: none; }
.tab-btn .deadline-badge { cursor: pointer; }
.home-week-filter { margin-bottom: 8px; }
.due-warn { margin: 2px 0 0; font-size: 13px; }

/* 전임자가 남긴 것 · 넘기기 주간 */
.pred-card { border-color: var(--accent); }
.pred-counts { margin: 4px 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pred-steps .ghost { flex: 1 1 180px; }
.handover-week { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.handover-week p { margin: 0; flex: 1 1 260px; }
.handover-ready > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.ready-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }
.ready-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.seat-item.flash { animation: flash 2s ease-out 1; box-shadow: 0 0 0 3px var(--accent); border-radius: 10px; }
@keyframes flash { from { background: var(--warn-bg); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .seat-item.flash { animation: none; } }

/* 사진 원본 · 크기 한도 */
.upload-rule { margin: 2px 0; font-size: 13px; }
.my-storage { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.my-storage-line { margin: 0; font-weight: 700; }
.op-gauge.small { height: 10px; margin: 2px 0; }
/* 운영진 (SQL 025): 묶음 · 스위치 · 지금 상태 */
.op-role { vertical-align: middle; }
.op-perm-editor { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.op-perm-editor[hidden] { display: none; }
.op-presets { margin: 0 0 4px; }
.op-perm-editor > .label { margin: 6px 0 0; }
.op-perm-more { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); min-width: 0; }
.op-perm-more > summary { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; font-weight: 700; }
.op-perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px 16px; padding: 4px 0 12px; }
.op-perm-area { margin: 0; padding: 6px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.op-perm-area-name { padding: 0; font-weight: 700; font-size: 14px; color: var(--muted); }
.op-perm { align-items: flex-start; padding: 6px 0; }
.op-perm input { flex: 0 0 auto; margin-top: 2px; }
.op-perm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.op-staff-dialog { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.op-staff-perms { color: var(--muted); }
/* 슈퍼 계정 스위치 (SQL 029): 켜짐은 초록 테두리 */
.op-change.op-super-on { color: var(--ok); border-color: var(--ok); }
.op-dash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; }
.op-dash-row > p { grid-column: 1; }
.op-dash-row > .row-actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.too-big-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.too-big-line p { margin: 0; flex: 1 1 200px; }

/* ---------- 내 아카이브 폴더 (SQL 014) ---------- */
/* a row above the cards; on a wide screen a column on the left */
.archive-all.with-folders { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.archive-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.folder-bar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.folder-list { display: flex; gap: 6px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
.folder-list > * { flex: 0 0 auto; }
.folder-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 2px; }
.folder-btn { max-width: 16em; }
.folder-btn .folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.folder-btn .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.folder-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.folder-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.25); }
.folder-yellow { background: #f2c230; }
.folder-green { background: #3fa34d; }
.folder-blue { background: #3b7dd8; }
.folder-pink { background: #e46aa6; }
.folder-orange { background: #ee7d2b; }
.folder-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.folder-form-row { display: flex; gap: 8px; min-width: 0; }
.folder-form-row .input { flex: 1 1 auto; min-width: 0; }
.folder-color { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.folder-problem:empty { display: none; }
.folder-problem { margin: 0; }
.folder-organize { display: flex; flex-direction: column; gap: 6px; }
.folder-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.folder-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); }
.folder-row-name { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.folder-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.folder-delete { list-style: none; }
.folder-delete p { margin: 0 0 8px; }
.folder-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.place-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.place-line .place-text { margin: 0; }
.drawer-folder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-folder .folder-where { margin: 0; }
.move-slot { flex: 1 1 100%; min-width: 0; }
.move-slot:empty { display: none; }
.move-slot .hint { margin: 0; }
.card-item.dragging { opacity: 0.5; }

/* ---------- 내 아카이브 [폴더별] (주인 10-13 "B"): 폴더마다 한 줄, 앞표지가 보이게. 색은 [모양]에서 ---------- */
:root { --cover-paper: #FBFAF6; --cover-ink: #2A2416; --cover-muted: #5E5647; --cover-edge: #D6CFC2; --cover-board: #DCD6CB; --cover-board-edge: #B8AF9F; --cover-gold: #E8C877; }
@media (prefers-color-scheme: dark) {
  :root { --cover-paper: #1E2533; --cover-ink: #E6EAF2; --cover-muted: #AEB7C8; --cover-edge: #2E3646; --cover-board: #2A2F3A; --cover-board-edge: #3D4452; }
}
.archive-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.archive-viewbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* 보기 바꾸기: 붙은 두 칸 스위치 (고른 칸만 떠 있는 모양) -- 거르기 칩(파란 알약)과 다른 층위 */
.seg-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.seg-switch .seg-btn { min-width: 84px; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: var(--muted); }
.seg-switch .seg-btn[aria-pressed='true'] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 37, 74, 0.18), inset 0 0 0 1px var(--accent); }
.seg-switch .seg-btn .icon { width: 18px; height: 18px; }
/* 순서: 고르는 칸 */
.archive-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.archive-sort-select { width: auto; min-width: 104px; min-height: 44px; padding: 0 34px 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
.archive-sort::after { content: ''; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.covers { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cover-shelf { display: flex; flex-direction: column; min-width: 0; }
.cover-shelf-head { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; }
.cover-shelf-name { margin: 0; font-size: 17px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.cover-shelf-count { flex: 0 0 auto; font-size: 14px; color: var(--muted); }
.cover-shelf-open { margin-left: auto; flex: 0 0 auto; color: var(--accent); font-weight: 700; text-decoration: none; }
.folder-dot.folder-none { background: var(--line); }
.cover-row { display: flex; align-items: flex-end; gap: 14px; padding: 10px 10px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.cover-row.wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); overflow-x: visible; row-gap: 20px; }
.cover-row.wrap .cover { width: auto; }
.size-large .cover-row.wrap { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.cover { position: relative; flex: 0 0 auto; width: 128px; height: 176px; }
.size-large .cover { width: 156px; height: 212px; }
.cover-main {
  display: flex; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 3px 7px 7px 3px; overflow: hidden;
  background: var(--cover-paper); color: var(--cover-ink); text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 1px 0 var(--cover-edge), 0 6px 14px rgba(42, 36, 22, 0.10); transition: transform 0.15s ease;
}
.cover-main:hover { transform: translateY(-4px); }
.cover-main:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cover.chosen .cover-main { box-shadow: 0 0 0 3px var(--accent); transform: translateY(-6px); }
.cover-spine { flex: 0 0 7px; background: var(--cover-spine); }
.cover-face { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.cover.kind-images .cover-title { -webkit-line-clamp: 2; line-clamp: 2; }
.cover-band {
  display: block; flex: 0 0 auto; height: 30px; line-height: 30px; padding: 0 34px 0 9px; background: var(--cover-bg); color: var(--cover-fg);
  font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cover-photo {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 58px; margin: 8px 9px 0;
  border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--cover-bg) 18%, transparent); color: var(--cover-bg);
}
.size-large .cover-photo { height: 74px; }
.cover-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-title {
  flex: 0 0 auto; margin: 8px 9px 0; font-family: var(--serif); font-size: 15px; line-height: 1.38; font-weight: 700; overflow-wrap: anywhere;
  /* 줄 가운데서 잘리지 않게: 세 줄까지, 넘치면 … */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; align-self: stretch;
}
.size-large .cover-title { font-size: 17px; }
.cover-note { flex: 0 0 auto; margin: 2px 9px 0; font-size: 12px; line-height: 1.45; color: var(--cover-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cover-foot { flex: 0 0 auto; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 6px 9px 9px; font-size: 12px; color: var(--cover-muted); }
.cover-foot-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-mark { flex: 0 1 auto; min-width: 0; padding: 0 6px; border-radius: 999px; background: var(--cover-gold); color: #2A2416; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-mark.urgent { background: var(--danger-bg); color: var(--danger); }
.cover .cover-pick {
  top: 0; right: 0; width: 44px; height: 44px; padding: 4px; border: 0; border-radius: 0 7px 0 0;
  align-items: flex-start; justify-content: flex-end; background: transparent; color: transparent;
}
.cover .cover-pick .icon {
  width: 24px; height: 24px; padding: 3px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1.5px rgba(42, 36, 22, 0.45);
}
.cover .cover-pick:hover .icon, .cover .cover-pick:focus-visible .icon { color: #56627A; }
.cover .cover-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.cover .cover-pick[aria-pressed='true'] { background: transparent; color: #FFFFFF; }
.cover .cover-pick[aria-pressed='true'] .icon { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.cover-board { height: 10px; margin: 2px 4px 0; border-radius: 2px; background: var(--cover-board); border-bottom: 4px solid var(--cover-board-edge); }
.board-off .cover-board { height: 1px; margin-top: 10px; background: var(--line); border: 0; }
.cover.dragging { opacity: 0.5; }
/* 책등(A, 주인 10-15 "선반이나 표지 둘 다"): 같은 표지를 좁게 세우고 제목을 세로로. 색은 표지에 둔 --cover-bg */
.style-spine .cover-row { gap: 6px; }
.style-spine .cover { width: 46px; height: 176px; }
.style-spine .cover.kind-link, .style-spine .room-cover:nth-child(3n + 2) { height: 164px; }
.style-spine .cover.kind-memo, .style-spine .room-cover:nth-child(3n) { height: 150px; }
.style-spine .cover.kind-images { height: 170px; }
.style-spine.size-large .cover { width: 54px; height: 212px; }
.style-spine .cover-main {
  border-radius: 4px 4px 2px 2px; background: var(--cover-bg); color: var(--cover-fg);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.14), inset -3px 0 0 rgba(0, 0, 0, 0.16), 0 4px 10px rgba(42, 36, 22, 0.12);
}
.style-spine .cover.chosen .cover-main { box-shadow: 0 0 0 3px var(--accent); }
.style-spine .cover-spine, .style-spine .cover-band, .style-spine .cover-photo, .style-spine .cover-note, .style-spine .cover-foot { display: none; }
.style-spine .cover-face { align-items: center; padding: 10px 0; }
.style-spine .cover:not(.no-pick) .cover-face { padding-top: 36px; }
.style-spine .cover-title {
  display: block; flex: 1 1 auto; min-height: 0; margin: 0; writing-mode: vertical-rl; text-orientation: upright; color: var(--cover-fg);
  font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: none;
}
.style-spine.size-large .cover-title { font-size: 16px; }
/* 개인정보로 보이는 자료는 책등 아래에 빨간 띠 */
.style-spine .cover:has(.cover-mark.urgent) .cover-main { box-shadow: inset 0 -6px 0 var(--danger), inset 3px 0 0 rgba(255, 255, 255, 0.14); }
.style-spine .cover .cover-pick { width: 46px; height: 44px; padding: 4px 0 0; justify-content: center; border-radius: 4px 4px 0 0; }
.style-spine .cover-row.wrap { display: flex; flex-wrap: wrap; row-gap: 18px; }
.style-spine .cover-row.wrap .cover { width: 46px; }
.style-spine .cover-rest, .style-spine .cover-row.wrap .cover-rest { width: 92px; }
.cover-more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%;
  border: 2px dashed var(--line); border-radius: 3px 7px 7px 3px; background: transparent; color: var(--accent);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cover-more-n { font-size: 20px; }
.cover-more:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.archive-more { align-self: center; }
@media (max-width: 759.98px) {
  .cover-row { margin: 0 -16px; padding: 10px 16px 0; scroll-padding-left: 16px; gap: 12px; }
  .cover-row.wrap { margin: 0; padding: 10px 0 0; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .size-large .cover-row.wrap { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .cover { width: 116px; height: 162px; }
  .cover-title { font-size: 14px; }
  .cover-photo { height: 48px; }
  .size-large .cover { width: 140px; height: 194px; }
}
@media (prefers-reduced-motion: reduce) { .cover-main { transition: none; } }
/* [모양] 판: 넓은 화면은 오른쪽 좁은 판(표지가 옆에 보이게), 휴대폰은 아래에서 올라오는 짧은 판 */
.dialog.drawer.look-dialog { width: min(380px, 100vw); }
.look-dialog::backdrop { background: rgba(12, 18, 32, 0.18); }
.look-sheet-body { display: flex; flex-direction: column; gap: 14px; }
.look-row { display: flex; flex-direction: column; gap: 6px; }
.look-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.look-palettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.look-palette {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 64px; padding: 8px 10px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.look-palette[aria-pressed='true'] { border-color: var(--accent); }
.look-palette-name { font-size: 14px; font-weight: 700; }
.look-minis { display: flex; gap: 3px; }
.look-mini { width: 14px; height: 20px; border-radius: 2px 3px 3px 2px; background: var(--cover-paper); box-shadow: inset 0 6px 0 var(--cover-bg), 0 0 0 1px var(--cover-edge); }
.look-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.look-seg-btn {
  flex: 1 1 0; min-width: max-content; min-height: 44px; padding: 0 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.look-seg-btn[aria-pressed='true'] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 37, 74, 0.18), inset 0 0 0 1px var(--accent); }
.look-seg-btn:focus-visible, .look-palette:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.look-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.look-foot .hint { margin: 0; flex: 1 1 200px; }
@media (max-width: 599.98px) {
  .dialog.drawer.look-dialog {
    inset: auto 0 0 0; width: 100vw; height: auto; max-height: 72dvh; margin: 0; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
.folder-bar.drop-ready .folder-btn[data-folder]:not([data-folder='all']) { outline: 2px dashed var(--accent); outline-offset: 1px; }
.folder-btn.drop-here { background: var(--accent); color: var(--accent-ink); }
@media (min-width: 1100px) {
  .archive-all.with-folders { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
  .with-folders .folder-bar { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .with-folders .folder-list { flex-direction: column; overflow-x: visible; }
  .with-folders .folder-btn { max-width: none; width: 100%; justify-content: flex-start; }
  .with-folders .folder-btn .chip-count { margin-left: auto; }
  .with-folders .folder-sep { width: auto; height: 1px; margin: 2px 0; }
  .with-folders .folder-tools .ghost { flex: 1 1 auto; }
}
@media (max-width: 859.98px) {
  .folder-list { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}

/* ---------- 스쿨 설치 (이어서①-1) ---------- */
.install-box { display: flex; flex-direction: column; gap: 8px; }
.install-box p { margin: 0; }
.tools-install { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tools-shortcut { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
.tools-shortcut .icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* ---------- 내 자료 통째로 받기 (이어서①-2) ---------- */
.zip-dialog { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zip-dialog p { margin: 0; }
.zip-parts { flex-wrap: wrap; }
.zip-progress { font-family: var(--mono); overflow-wrap: anywhere; }
.zip-progress:empty { display: none; }
.zip-failed { margin: 0; padding-left: 18px; max-height: 200px; overflow-y: auto; overflow-wrap: anywhere; }

/* ---------- 공유 링크 지키기 (SQL 015): the page the link opens ---------- */
.share-say:empty { display: none; }
.share-say { margin: 0; }
.share-photos .tile { display: flex; align-items: center; justify-content: center; }
.share-photos button.tile { padding: 0; border: 0; cursor: zoom-in; min-height: 44px; }
.share-invite { font-size: 12px; }
.share-large { max-width: min(96vw, 1100px); }
.share-large-img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto 12px; }

/* ---------- 공유 링크 지키기 (SQL 015): my links, this month ---------- */
.share-purpose { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.share-purpose p { margin: 0; }
.share-purpose-line { font-weight: 700; }
.share-usage { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.share-usage p { margin: 0; }
.share-bar { position: relative; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.share-bar.small { height: 6px; }
.share-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: var(--accent); border-radius: inherit; }
.share-bar.warn .share-bar-fill { background: var(--warn); }
.share-bar.full .share-bar-fill { background: var(--danger); }
.share-rows { display: flex; flex-direction: column; gap: 8px; }
.share-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.share-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.share-chip.chip-paused, .share-chip.chip-op, .share-chip.chip-passclosed { background: var(--danger-bg); color: var(--danger); }
/* 받는 사람 확인 (SQL 034): who may open the link -- one column of big choices, thumb-sized on a phone */
.share-access { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.share-access legend { padding: 0; margin: 0 0 4px; }
.share-access-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.share-access-opt input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.share-access-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.share-access-opt:has(input:disabled) { cursor: default; opacity: 0.8; }
.share-access-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-access-text strong { font-size: 16px; }
.share-access-text .hint { margin: 0; }
.share-pass-field .hint { margin: 0; }
.share-pass-field .hint:empty { display: none; }
.share-chip.chip-access { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
/* the reader's side: the password box on the share page */
.share-gate { display: flex; flex-direction: column; gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.share-gate p { margin: 0; }
.share-gate .with-button { display: flex; gap: 8px; }
.share-gate .with-button .input { flex: 1 1 auto; min-width: 0; }
.share-gate .hint:empty { display: none; }
.share-chip.chip-ended, .share-chip.chip-revoked { opacity: 0.75; }
.share-reopen-ask p { margin: 0 0 8px; }
.archive-share-panel { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }

/* ---------- 품질 점검 2026-10-01: contrast (axe-core, WCAG AA 4.5:1) ---------- */
/* a button's own text never takes the form-label colour (button() names its span "label") */
button .label { color: inherit; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-like { color: #EC8DB4; }
  :root:not([data-theme="light"]) .week-day.kind-sun .week-num,
  :root:not([data-theme="light"]) .week-day.kind-holiday .week-num,
  :root:not([data-theme="light"]) .cal-cell.kind-sun .cal-num,
  :root:not([data-theme="light"]) .cal-cell.kind-holiday .cal-num { color: #FF7B6B; }
  :root:not([data-theme="light"]) .week-day.kind-sat:not(.today) .week-num,
  :root:not([data-theme="light"]) .cal-cell.kind-sat:not(.today) .cal-num { color: #7DB8F5; }
}
:root[data-theme="dark"] .badge-like { color: #EC8DB4; }
:root[data-theme="dark"] .week-day.kind-sun .week-num, :root[data-theme="dark"] .week-day.kind-holiday .week-num,
:root[data-theme="dark"] .cal-cell.kind-sun .cal-num, :root[data-theme="dark"] .cal-cell.kind-holiday .cal-num { color: #FF7B6B; }
/* Saturday blue: #2E7DCD was 4.4:1 on white (2026-10-04 axe), #1F6BB8 is 5.6:1; dark #7DB8F5 */
.week-day.kind-sat:not(.today) .week-num, .cal-cell.kind-sat:not(.today) .cal-num { color: #1F6BB8; }
:root[data-theme="dark"] .week-day.kind-sat:not(.today) .week-num, :root[data-theme="dark"] .cal-cell.kind-sat:not(.today) .cal-num { color: #7DB8F5; }

/* ---------- 교실 PC 지키기 1단계 ---------- */
.away-check { display: flex; flex-direction: column; gap: 10px; }
.away-checks { display: flex; flex-direction: column; gap: 4px; }
.away-check .hint { margin: 0; }
.device-ask { display: flex; flex-direction: column; gap: 8px; margin: 8px 16px 0; }
.device-ask p { margin: 0; }
.device-ask-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.device-ask-row .input { flex: 1 1 200px; min-width: 0; }
.unlock-fail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 16px 0; }
.unlock-fail p { margin: 0; flex: 1 1 240px; }
.lock-away .lock-card { gap: 16px; }
.lock-teacher { font-size: 14px; }
.done-screen { position: fixed; inset: auto 16px 16px 16px; max-width: 560px; margin: 0 auto; max-height: 70vh; overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.done-screen .title { font-size: 20px; margin: 0; }
.done-screen .lead { margin: 0; }
.done-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.done-list li { display: flex; gap: 8px; justify-content: space-between; }
.done-time { color: var(--muted); flex: 0 0 auto; }

/* ---------- 폴더째 올리기 (A-5) · 같은 이름 (A-4) · 빈 아카이브 (A-6) ---------- */
.catcher-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* 주인 10-19 "너무 구석": 단추들을 체크칸 바로 옆에(넓은 화면에서 오른쪽 끝으로 밀리지 않게) */
.catcher-more .orig-check { margin-right: 4px; }
/* 크롬 확장: 찾기 줄에서 눈에 띄게 -- 강조색 테두리 · 글자 */
.catcher-row .ext-hot { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.empty-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; width: 100%; max-width: 760px; text-align: left; }
.empty-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 14px; min-width: 0; }
.empty-panel-title { margin: 0 0 4px; font-size: 16px; }
.empty-panel-text { margin: 0; font-size: 14px; color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.fu-body p, .fu-reason, .same-name-rest { word-break: keep-all; }
.empty-limit { font-size: 13px; margin: 0; }
.empty-actions { justify-content: center; }
.fu-body { gap: 10px; }
.fu-lead { margin: 0; overflow-wrap: anywhere; }
.fu-where, .fu-left, .fu-limit, .fu-exam { display: flex; flex-direction: column; gap: 6px; }
.fu-where .box, .fu-left .box, .fu-limit .box, .fu-exam .box { margin: 0; }
.fu-where .box p, .fu-left .box p { margin: 0 0 6px; overflow-wrap: anywhere; }
.fu-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.fu-chosen { margin: 0; }
.fu-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px 6px; background: var(--card); }
.fu-group-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; margin: 10px 0 2px; overflow-wrap: anywhere; }
.fu-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 4px; border-radius: 8px; cursor: pointer; }
.fu-row:focus-within { outline: 3px solid var(--accent); outline-offset: -1px; }
.fu-row input { width: 22px; height: 22px; font-size: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.fu-row-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.fu-name { font-size: 15px; overflow-wrap: anywhere; }
.fu-size { font-size: 13px; color: var(--muted); }
.fu-reason { font-size: 13px; color: var(--warn); }
.fu-foot { justify-content: flex-end; margin-top: 12px; }
.fu-gauge { height: 16px; }
.fu-current { overflow-wrap: anywhere; min-height: 1.4em; }
.fu-done { margin: 0; overflow-wrap: anywhere; }
.fu-delete-title { font-size: 15px; margin: 6px 0 0; }
.fu-delete-list { max-height: 30vh; overflow: auto; margin: 0; padding: 8px 10px 8px 28px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; overflow-wrap: anywhere; background: var(--card); }
.same-name-list { margin: 0; padding-left: 22px; overflow-wrap: anywhere; }

/* ---------- 교실 PC 지키기 2단계: 빌려주는 시간 · 열린 기록 · 5분 전 띠 ---------- */
.away-times { display: flex; flex-direction: column; gap: 10px; }
.away-grid-wrap { max-width: 100%; }
.away-grid { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.away-head { text-align: center; font-weight: 600; font-size: 14px; }
.away-row-head { display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 1.2; }
.away-row-head small { color: var(--muted); font-size: 12px; }
.away-cell { min-height: 44px; min-width: 0; padding: 2px; border: 1px dashed var(--line); border-radius: 8px; background: transparent;
  color: var(--ink); font-size: 13px; line-height: 1.2; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.away-cell.away-jd { border-style: solid; border-color: var(--accent, #2f6feb); background: color-mix(in srgb, var(--accent, #2f6feb) 14%, transparent); }
.away-cell.away-ex { border-style: solid; border-color: var(--warn, #b26a00); background: color-mix(in srgb, var(--warn, #b26a00) 14%, transparent); }
.away-cell:focus-visible { outline: 3px solid var(--focus, #2f6feb); outline-offset: 2px; }
.away-label-slot { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.away-time-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.away-time-row { display: flex; align-items: center; gap: 8px; }
.away-time-row span { flex: 0 0 auto; }
.away-time-row .input { min-width: 0; }
.away-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 16px 0; }
.away-soon p { margin: 0; flex: 1 1 260px; }
.records-body { display: flex; flex-direction: column; gap: 10px; }
.records-day { margin: 8px 0 2px; font-size: 15px; }
.records-ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.records-row.warn { color: var(--danger, #b42318); font-weight: 600; }
.pw-change { display: flex; flex-direction: column; gap: 6px; }

/* ---------- 교실 PC 지키기 B-2: 작업하러 받기 · 새 판 · 판 ---------- */
.badge-work { color: var(--accent); border-color: var(--accent); background: var(--card); font-weight: 600; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.drawer-work { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.drawer-work .hint { margin: 0; }
.working-line { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--accent); overflow-wrap: anywhere; }
.working-line .icon { flex: 0 0 auto; }
.drawer-versions { display: flex; flex-direction: column; gap: 6px; }
.drawer-versions .hint { margin: 0; }
.version-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.version-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.version-row:first-child { border-top: 0; }
.version-line { font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
.version-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.card-item.replace-ready { outline: 4px solid var(--accent); outline-offset: 2px; position: relative; z-index: 51; }
.drop-overlay.on-card { background: transparent; }
@media (max-width: 480px) {
  .version-actions { width: 100%; }
  .version-actions button { flex: 1 1 140px; }
}

/* ---------- 교실 PC 지키기 B-1: 잠근 폴더 ---------- */
.lock-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border: 2px solid var(--warn); border-radius: var(--radius); background: var(--warn-bg); color: var(--ink, inherit); min-width: 0; }
.lock-banner[hidden] { display: none; }
.lock-text { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.lock-text .icon { flex: 0 0 auto; color: var(--warn); }
.lock-time { font-variant-numeric: tabular-nums; font-size: 18px; }
.lock-actions { flex-wrap: wrap; gap: 6px; }
.lock-actions [hidden] { display: none; }
.folder-lock { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--warn); }
.folder-lock .icon { width: 14px; height: 14px; }
.folder-btn.folder-locked { border-style: dashed; }
.folder-lock-actions { flex: 1 1 100%; justify-content: flex-end; }
.folder-hide[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.folder-unlock { color: var(--warn); }
.folder-lock-ask { list-style: none; }
.folder-lock-ask p { margin: 0 0 8px; }
.lock-form { display: flex; flex-direction: column; gap: 6px; }
.lock-form .lead { margin: 0 0 6px; }
.lock-code-slot { display: flex; flex-direction: column; gap: 6px; }
.lock-code-slot:empty { display: none; }
.fu-exam-pick { margin: 6px 0; }
@media (max-width: 480px) {
  .lock-actions { width: 100%; }
  .lock-actions button { flex: 1 1 140px; }
}

/* ---------- 뼈대 2-1: 업무 묶음 줄 · 서랍 · 옮기기 · 주인 없는 묶음 ---------- */
.bundle-line { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 8px; }
.bundle-chip {
  min-height: 52px; max-width: 100%; padding: 6px 14px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px;
  font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.bundle-chip:hover { border-color: var(--accent); }
.bundle-chip-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.bundle-chip-duty { font-size: 12px; color: var(--muted); }
.bundle-chip-n { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.bundle-suggests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.bundle-suggest-head { font-size: 13px; color: var(--muted); width: 100%; }
.bundle-suggest {
  min-height: 44px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 4px;
  background: transparent; color: var(--muted); border: 1px dashed var(--line); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
}
.bundle-suggest:hover, .bundle-suggest:focus-visible { color: var(--accent); border-color: var(--accent); }
.bundle-suggest:disabled { opacity: 0.5; cursor: wait; }
.bundle-dict { display: flex; flex-direction: column; gap: 6px; max-height: 45dvh; overflow-y: auto; }
.bundle-dict-dept { font-size: 14px; color: var(--muted); margin: 8px 0 2px; }
.bundle-dict-rows { display: flex; flex-direction: column; gap: 6px; }
.bundle-dict-row {
  min-height: 48px; width: 100%; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font: inherit; text-align: left; cursor: pointer;
}
.bundle-dict-row:hover { border-color: var(--accent); }
.bundle-dict-row:disabled { opacity: 0.55; cursor: default; }
.bundle-dict-name { font-weight: 700; }
.bundle-dict-alias { font-size: 13px; color: var(--muted); }
.bundle-own { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bundle-drawer { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bundle-drawer-counts { font-weight: 700; margin: 0; }
.bundle-drawer-head { font-size: 15px; margin: 6px 0 0; }
.bundle-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bundle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 4px 10px; border-left: 3px solid var(--line); min-width: 0; }
.bundle-row-title { overflow-wrap: anywhere; min-width: 0; }
.bundle-suggest-box { border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bundle-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bundle-pick {
  width: 100%; min-height: 48px; display: grid; grid-template-columns: 24px 1fr auto; column-gap: 10px; align-items: center;
  text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.bundle-pick .icon { color: transparent; border: 2px solid var(--line); border-radius: 6px; }
.bundle-pick[aria-pressed='true'] { border-color: var(--accent); }
.bundle-pick[aria-pressed='true'] .icon { color: #FFFFFF; background: var(--accent); border-color: var(--accent); }
.bundle-pick-title { overflow-wrap: anywhere; min-width: 0; }
.bundle-pick-kind { font-size: 12px; color: var(--muted); }
.bundle-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 700; }
.bundle-rename-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bundle-rename-row .input { flex: 1 1 180px; min-width: 0; }
.bundle-actions { flex-wrap: wrap; }
.move-seats { display: flex; flex-wrap: wrap; gap: 8px; }
.move-sentence { margin: 0; }
.unowned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.unowned-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; min-width: 0; }
.unowned-row .row-main { min-width: 0; flex: 1 1 220px; }
.unowned-targets { flex-wrap: wrap; }
/* ---------------------------------------------------------------- 뼈대 3-1: 일정 층 */
.cal-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.cal-tab { min-height: 44px; padding: 0 16px; }
.cal-host { display: block; min-width: 0; }

.cal-grade-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.cal-grade-chips[hidden] { display: none; }
.cal-grade-chips .mini-meta { font-size: 13px; }
.badge-grade { color: var(--chip, var(--accent)); border-color: var(--chip, var(--accent)); background: var(--card); font-weight: 600; white-space: nowrap; }

/* 나 탭: 학교 · 학년 일정은 흐리게 깐다 (눌러 볼 수는 있다) */
.event-item.event-ghost { opacity: 0.55; }
.cal-ev.cal-ev-ghost { opacity: 0.5; }
/* 학년 색이 학교 색(파랑)을 이기게: 층 규칙과 같은 자세함이고 뒤에 있어서 이긴다 */
.cal-ev.cal-ev-grade { border-left-color: var(--chip); }

/* 이맘때 띠 */
.cal-season {
  display: block; width: 100%; text-align: left; min-height: 44px;
  margin: 0 0 10px; padding: 10px 14px; font-size: 14px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink);
}
.cal-season[hidden] { display: none; }
.cal-season:hover { border-color: var(--accent); }
.cal-season-text { overflow-wrap: anywhere; }

.cal-duty-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.cal-region-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.cal-region-head .cal-nav { margin-right: auto; }
.cal-region-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cal-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cal-group-name { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 16px; }
.cal-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.cal-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.cal-card.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--soft); }
.cal-card-top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.cal-card-title { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.cal-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.cal-card-meta button { min-height: 44px; }
.cal-card-no { font-family: var(--mono); overflow-wrap: anywhere; }
.cal-card-todo { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.cal-card-counts, .cal-card-who { margin: 0; }
.cal-card-diff { margin: 0; }
.cal-card-final { margin: 0; font-size: 12px; }
.cal-card-acts { flex-wrap: wrap; gap: 6px; }
.cal-card-acts button { min-height: 44px; }
.cal-card-acts button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; background: var(--soft); }
.cal-card-acts button.danger { color: var(--danger); }

.rule-line.danger { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--danger); font-weight: 600; overflow-wrap: anywhere; }
.me-grade-boxes { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.me-grade-boxes .check-row { margin: 0; }

@media (max-width: 760px) {
  .cal-tabs { width: 100%; }
  .cal-tab { flex: 1 1 auto; }
  .cal-card-acts button { flex: 1 1 140px; }
}

/* ---------------------------------------------------------------- 내 바로가기 (SQL 022) */
/* 내 아카이브 맨 위: small tiles in a row that slides sideways when it runs out of room */
.links-row { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.links-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.links-title { margin: 0; font-size: 16px; }
.links-note { font-size: 12px; color: var(--muted); flex: 1 1 auto; min-width: 0; }
.links-edit { flex: 0 0 auto; }
.links-edit[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.links-strip {
  list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; min-width: 0; -webkit-overflow-scrolling: touch;
}
.links-strip > li { flex: 0 0 auto; scroll-snap-align: start; }
.link-cell { list-style: none; }
.link-tile {
  width: 84px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); color: var(--ink);
  text-decoration: none; font: inherit; cursor: pointer;
}
.link-tile:hover { border-color: var(--accent); }
.link-tile:focus-visible, .links-pop a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.link-letter {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 19px; line-height: 1; color: #FFFFFF; flex: 0 0 auto;
}
.link-letter .icon { width: 20px; height: 20px; }
.link-name { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-yellow { background: #F2C230; color: #3A2C00; }
.link-green { background: #2E7D3A; }
.link-blue { background: #2F6CC4; }
.link-pink { background: #C4467F; }
.link-orange { background: #C25A12; }
.link-plus { background: transparent; color: var(--accent); border: 2px dashed var(--accent); }
.link-add { background: transparent; border-style: dashed; }
.link-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.links-empty { margin: 0; }
.links-problem:empty { display: none; }
.links-problem { margin: 0; }
/* 편집: the same row, each tile a little card with its own buttons */
.links-row.is-editing .links-strip { align-items: stretch; }
.link-editing {
  width: 168px; min-height: 0; align-items: stretch; justify-content: flex-start; cursor: grab; background: var(--card);
}
.link-editing.dragging { opacity: 0.5; }
.link-editing.drop-here { box-shadow: inset 0 0 0 2px var(--accent); }
.link-editing.link-hidden .link-face { opacity: 0.55; }
.link-face { display: flex; align-items: center; gap: 8px; min-width: 0; }
.link-face .link-name { flex: 1 1 auto; text-align: left; font-size: 13px; }
.link-hidden-tag { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.link-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.link-tools .link-move { min-width: 44px; min-height: 44px; padding: 0; flex: 0 0 auto; }
.link-tools .small-btn { flex: 1 1 auto; padding: 6px 8px; }
.links-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.links-foot .hint { flex: 1 1 220px; margin: 0; }
.links-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.links-form-title { margin: 0; font-weight: 700; }
.links-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--muted); }
.links-field .input { font-size: 16px; min-width: 0; }
.links-field .input[readonly] { color: var(--muted); }
.links-form-row { display: flex; flex-wrap: wrap; gap: 8px; }
.links-form-row > button { min-height: 44px; }
.link-color { display: inline-flex; align-items: center; gap: 6px; }
.links-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: var(--warn-bg); color: var(--ink); }
.links-ask[hidden] { display: none; }
.links-form .hint { margin: 0; }
/* 위 막대 [바로가기]: nine dots; below 600px the word goes to the screen reader only */
.links-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.links-btn[hidden] { display: none; }
.links-pop {
  position: fixed; top: 72px; right: 16px; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(19, 37, 74, 0.22);
  padding: 12px; z-index: 40; display: flex; flex-direction: column; gap: 10px;
}
.links-pop-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.links-pop-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.links-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.links-grid .link-big { width: 100%; position: relative; min-height: 84px; }
.link-num {
  position: absolute; top: 4px; left: 6px; font-size: 12px; font-weight: 700; color: var(--muted); font-family: var(--mono);
}
@media (max-width: 1099.98px) {
  .topbar .links-btn { background: transparent; color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.3); }
  .links-pop { top: 64px; }
}
/* 휴대폰: 위 막대에서 빼고(제목이 한 줄로 남게) 도구함 맨 위 한 줄로 */
.links-menu-line { display: none; }
@media (max-width: 599.98px) {
  .topbar .links-btn, .topbar .links-btn[hidden] { display: none; }
  .links-menu-line { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 12px; }
  .links-menu-text { font-weight: 700; }
  .links-menu-note { margin-left: auto; font-size: 13px; color: var(--muted); }
  .topbar .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .links-pop { right: 16px; left: 16px; width: auto; }
  .links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 운영 전용 계정 (SQL 025): 학교 없는 운영 계정 -- 운영 · 내 보안 두 칸만 */
.op-only { min-height: 100vh; background: var(--bg); }
.op-only-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--navy); color: var(--navy-ink); }
.op-only-top .ghost { color: var(--navy-ink); border-color: rgba(255, 255, 255, 0.35); background: transparent; }
.op-only-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-only-name { font-weight: 800; font-size: 18px; }
.op-only-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; max-width: 1180px; margin: 0 auto; }
.op-only-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.op-only-tab[aria-current='page'] { background: var(--ink); color: var(--card); border-color: var(--ink); font-weight: 700; }
.op-only-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 슈퍼 계정 (SQL 029): 운영 전용 계정의 [도구] — 휴대폰은 한 줄에 하나, 단추는 글 아래로 */
.op-only-tools { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.op-only-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.op-only-tool-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.op-only-tool-name { font-weight: 700; overflow-wrap: anywhere; }
.op-only-tool .messages { flex-basis: 100%; }
.op-only-main { max-width: 1180px; margin: 0 auto; padding: 8px 16px 32px; min-width: 0; }
.op-only-title { font-size: 22px; margin: 8px 0 12px; }
.op-only-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 구글 잇기 (기능 키 google): 종류 칩 · 자세히 창 칸 · 담기 안내 · 묶음 창. 색은 종류마다 --gk(띠는 --band) */
.g-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--gk, #4F5D75) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--gk, #4F5D75) 40%, transparent); white-space: nowrap; max-width: 100%; }
.g-chip .icon { width: 24px; height: 24px; padding: 4px; border-radius: 7px; background: var(--gk, #4F5D75); color: #FFFFFF; flex: 0 0 auto; }
.g-chip.small { font-size: 12px; }
.g-chip.small .icon { width: 20px; height: 20px; padding: 3px; }
.g-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); min-width: 0; }
.g-box .hint { margin: 0; }
.g-head { margin: 0; display: flex; }
.g-acts { gap: 6px; }
.g-act .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.g-add { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-add .hint { margin: 0; }
.g-found { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.g-guide { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--soft); }
.g-guide > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 14px; }
.g-guide[open] { padding-bottom: 10px; }
.g-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.g-ask { display: flex; flex-direction: column; gap: 8px; flex-basis: 100%; }
.g-ask p { margin: 0; }
.g-cal-wrap { display: contents; }
.wk-sheet-google { margin-top: 10px; }
.today-keep { margin-top: 8px; }
a.wk-x { text-decoration: none; }
.band-google .band-letter .icon { width: 24px; height: 24px; }
.g-bundle { gap: 12px; }
.g-bundle-group { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 8px; margin: 0; display: flex; flex-direction: column; min-width: 0; }
.g-bundle-group legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.g-bundle-row { min-width: 0; }
.g-bundle-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.g-bundle-name small { color: var(--muted); font-size: 12px; }
.g-bundle-row .badge { margin-left: auto; }

/* 올릴 곳: ☑ 나만 (내 아카이브) · ☐ 우리 학교 · ☐ 지역 · ☐ 전국 (views/share-layer.js whereToggles).
   The 올리기 window shows the big tiles; 내 아카이브's catcher the small row. 나만 is always ticked. */
.where-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.where-tile {
  display: flex; align-items: flex-start; gap: 10px; min-height: 56px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; word-break: keep-all; overflow-wrap: anywhere;
}
.where-tile:hover:not([aria-disabled='true']) { border-color: var(--accent); }
.where-tile[aria-checked='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.where-tile[data-scope='me'] { background: var(--soft); cursor: default; }
.where-tile.where-shut { opacity: 0.6; cursor: not-allowed; }
.where-box {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--muted); border-radius: 6px;
  background: var(--card); color: transparent;
}
.where-box .icon { width: 16px; height: 16px; stroke-width: 3; }
.where-tile[aria-checked='true'] .where-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.where-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.where-name { font-weight: 700; font-size: 16px; }
.where-rule { font-size: 13px; color: var(--muted); }
.where-tile.where-done .where-rule { color: var(--ok); font-weight: 600; }
.where-compact { display: flex; flex-wrap: wrap; gap: 6px; }
.where-compact .where-tile { min-height: 44px; padding: 0 14px 0 10px; align-items: center; gap: 8px; border-radius: 999px; }
.where-compact .where-name { font-size: 14px; font-weight: 600; }
.where-compact .where-box { width: 18px; height: 18px; margin: 0; border-radius: 5px; }
.where-compact .where-box .icon { width: 13px; height: 13px; }
.catcher-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.catcher-where-label { font-size: 14px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) {
  .where-compact { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .where-compact .where-tile { border-radius: 12px; }
}
/* 일정 하나 (주인 10-12): 지역 일정 · 전국 일정을 화면 안에서 고른다 */
.cal-scope { margin: 0 0 12px; }

/* ---------- 학교 현황 (우리 학교 › 현황, SQL 035 · 기능 stats, 주인 10-15) ---------- */
.stats { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; min-width: 0; }
.stats-layers { margin-top: 4px; }
.stats-crumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -6px; font-size: 14px; color: var(--muted); }
.stats-crumb { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stats-here { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--ink); font-weight: 700; }
.stats-sep { padding: 0 2px; }
.stats-title { margin: -8px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.stats-districts { align-items: center; }
.stats-chip-label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.stats-later { margin: 0; }
.stats-metrics { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stats-metric { background: var(--card); padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; }
.stats-metric dt { font-size: 12px; color: var(--muted); }
.stats-metric dd { margin: 0; display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.stats-metric-value { font-size: 20px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stats-metric-unit { font-size: 12px; color: var(--muted); }
.stats-metric .stats-metric-sub { display: block; font-size: 12px; color: var(--muted); }
.stats-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stats-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.stats-block-head h4 { margin: 0; font-size: 16px; }
.stats-regions, .stats-schools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.stats-region {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 24px minmax(64px, 120px) minmax(0, 1fr) auto;
  grid-template-areas: "rank name bar value" ". sub sub sub"; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.stats-region:hover, .stats-region.here { background: var(--soft); }
.stats-region.here { font-weight: 700; cursor: default; }
.stats-rank { grid-area: rank; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats-region-name { grid-area: name; font-size: 15px; overflow-wrap: anywhere; }
.stats-bar { grid-area: bar; display: block; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.stats-bar > span { display: block; width: var(--w, 0%); height: 100%; border-radius: 999px; background: var(--accent); }
.stats-region.here .stats-bar > span { background: var(--ink); }
.stats-region-value { grid-area: value; font-size: 15px; font-weight: 700; text-align: right; white-space: nowrap; }
.stats-region-sub { grid-area: sub; font-size: 12px; color: var(--muted); }
.stats-more { align-self: flex-start; }
.stats-more-box { display: flex; justify-content: center; }
/* 학교 목록: 좁으면 두 줄(이름 · 고른 숫자 / 나머지), 넓으면 표 칸 */
.stats-row {
  width: 100%; min-height: 60px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas: "rank name main" "rank line line"; column-gap: 8px; row-gap: 2px; align-items: baseline;
  padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.stats-row:hover, .stats-row.mine { background: var(--soft); }
.stats-row-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.stats-row-title { font-weight: 700; overflow-wrap: anywhere; }
.stats-row-main { grid-area: main; font-weight: 700; text-align: right; white-space: nowrap; }
.stats-row-line { grid-area: line; font-size: 13px; color: var(--muted); }
.stats-cell, .stats-row-head { display: none; }
@media (min-width: 1100px) {
  .stats-row-head, .stats-row {
    display: grid; grid-template-columns: 44px minmax(150px, 1.6fr) minmax(90px, 1fr) repeat(6, minmax(64px, 0.6fr));
    grid-template-areas: none; align-items: center; column-gap: 0;
  }
  .stats-row-head { padding: 0 6px; min-height: 40px; font-size: 13px; color: var(--muted); background: var(--soft); border-bottom: 1px solid var(--line); }
  .stats-row-head span:nth-child(n+4), .stats-cell.num { text-align: right; padding-right: 10px; }
  .stats-row .stats-rank, .stats-row-name { grid-area: auto; }
  .stats-row-main, .stats-row-line { display: none; }
  .stats-cell { display: block; }
  .stats-cell-where { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
  .stats-cell.on { font-weight: 700; }
}
@media (max-width: 599px) {
  .stats-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-metric { padding: 8px; }
  .stats-metric-value { font-size: 17px; }
  .stats-region { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank name value" ". bar bar" ". sub sub"; }
}
/* 학교 하나 (우리 학교 · 자세히 창) */
.stats-school { display: flex; flex-direction: column; gap: 12px; }
.stats-school-where { margin: 0; font-size: 14px; color: var(--muted); }
.stats-grades { display: flex; gap: 8px; align-items: flex-end; }
.stats-grade { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.stats-grade-n { font-weight: 700; font-size: 13px; }
.stats-grade-bar { width: 100%; max-width: 56px; height: 72px; display: flex; align-items: flex-end; background: var(--line); border-radius: 8px; overflow: hidden; }
.stats-grade-bar > span { display: block; width: 100%; height: var(--h, 0%); background: var(--accent); }
.stats-grade-cls { color: var(--muted); }
/* 학사 비교 (주인 10-19): 담은 학교들의 방학 · 재량휴업 표 */
.stats-breaks { display: flex; flex-direction: column; gap: 10px; }
.stats-breaks-pick { display: flex; flex-direction: column; gap: 6px; }
.stats-breaks-pick .input { max-width: 28em; font-size: 16px; }
.stats-breaks-found { display: flex; flex-wrap: wrap; gap: 6px; }
/* 학교 찾기 (주인 10-19 "검색하기 기능도"): 학교 현황 맨 위 -- 찾기 칸 · 결과 줄 · 고른 학교 카드 */
.stats-find { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.stats-find-bar { display: flex; align-items: center; gap: 8px; max-width: 32em; }
.stats-find-bar .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); }
.stats-find-bar .input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.stats-find-list { display: flex; flex-direction: column; max-width: 32em; }
.stats-find-list .hint { margin: 2px 0; }
.stats-find-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 10px;
  border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.stats-find-row:hover { background: var(--soft); }
.stats-find-row-name { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.stats-find-row-where { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; }
.stats-find-card:empty { display: none; }
.stats-find-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.stats-find-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stats-find-name { margin: 0; font-size: 18px; }
.stats-breaks-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stats-breaks-row { display: grid; grid-template-columns: minmax(10em, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 8px 10px; }
.stats-breaks-row + .stats-breaks-row { border-top: 1px solid var(--line); }
.stats-breaks-row.head { background: var(--soft); font-weight: 700; font-size: 13px; color: var(--muted); }
.stats-breaks-row.mine { background: color-mix(in srgb, var(--place, var(--accent)) 6%, var(--card)); }
.stats-breaks-cell { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.stats-breaks-cell.name { display: flex; align-items: center; gap: 6px; }
.stats-breaks-name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.stats-breaks-common { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: var(--soft); }
.stats-breaks-common-head { margin: 0 0 4px; font-weight: 700; font-size: 13px; }
@media (max-width: 700px) {
  .stats-breaks-row { grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); padding: 8px 6px; }
  .stats-breaks-cell { font-size: 12px; }
}
/* 학년별 학급당 (주인 10-19): 반 수 아래 "19.3명", 28명부터 과밀 표시 */
.stats-grade-cpc { font-size: 12px; color: var(--ink); }
.stats-grade-cpc.full { color: var(--danger); font-weight: 700; }
.stats-full-hint { margin: 4px 0 0; }
.stats-trend { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; }
.stats-trend-label { font-weight: 700; }
.badge.stats-down { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.stats-compare { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 14px; }
/* 더 보기 공시 (주인 10-19 B): 전·출입 · 입학생 · 급식 · 방과후 -- 받은 학교만 */
.stats-more { display: flex; flex-direction: column; gap: 4px; }
.stats-more-row { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.stats-more-label { flex: 0 0 88px; font-weight: 700; color: var(--muted); }
.stats-more-value { min-width: 0; overflow-wrap: anywhere; }
.stats-school-address { margin: -8px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.stats-lead { margin: 4px 0 8px; }

/* ---------- 우리 학교 › 학교 정보 (주인 10-18 "우리학교 누르면 학교 정보 다 나오게"): 학교 카드 바로 아래 ---------- */
.school-info { display: flex; flex-direction: column; gap: 10px; }
.school-info > .card-head { margin-bottom: 0; flex-wrap: nowrap; }
.school-info > .card-head .card-title { padding-right: 0; }
.school-info-fold { flex: 0 0 auto; min-height: 44px; }
.school-info-short { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.school-info-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* 다음 급식 (10-18 "기본 급식이든"): 접어도 늘 보인다 */
.school-info-meal { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.school-info-meal-day { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.school-info-meal-dishes { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.school-info-meal.none .school-info-meal-dishes { font-size: 14px; color: var(--muted); }
.school-info-numbers { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.school-info-body .stats-source { margin: 0; }
/* "다른 학교가 궁금하면 [다른 학교 보기]" (10-18): 학교 현황으로 */
.school-info-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.school-info-other { margin: 0; font-size: 14px; color: var(--muted); }
.school-info-explore { justify-content: center; }
/* 학교 하나의 다섯 칸: 3 + 2 */
.stats-metrics.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats-metrics.five > .stats-metric { grid-column: span 2; }
.stats-metrics.five > .stats-metric:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 599px) {
  .school-info { padding: 14px; }
  .school-info .stats-grade-bar { height: 56px; }
}
/* 넓은 화면: 숫자 · 흐름 · 몇 번째는 왼쪽, 학년별 막대는 오른쪽 (공지 탭이 너무 밀리지 않게) */
@media (min-width: 900px) {
  .school-info .stats-school {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 28px; row-gap: 0; align-items: start;
    grid-template-areas: "where where" "addr addr" "later later" "metrics grades" "trend grades" "more grades" "compare grades";
  }
  .school-info .stats-more { grid-area: more; }
  .school-info .stats-school > * { margin-bottom: 12px; }
  .school-info .stats-school-where { grid-area: where; }
  .school-info .stats-school-address { grid-area: addr; margin-top: -8px; }
  .school-info #stats-school-later { grid-area: later; }
  .school-info .stats-metrics { grid-area: metrics; }
  .school-info .stats-grades { grid-area: grades; }
  .school-info .stats-trend { grid-area: trend; }
  .school-info .stats-compare { grid-area: compare; }
  .school-info-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .school-info-other { flex: 1 1 auto; min-width: 0; }
  .school-info-explore { flex: 0 0 auto; }
}
/* 홈 "오늘" 바깥 활동 (기능 today): 남색 띠 안의 한 줄. 점 색은 꾸밈(뜻은 글자가 말한다) */
.hello-air { margin: -4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; }
.hello-air[hidden] { display: none; }
.hello-air-main { font-weight: 700; }
.hello-air-meta { font-size: 12px; color: var(--navy-muted); }
.air-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; background: var(--navy-muted); }
.air-dot.air-g1 { background: #5AA9FF; }
.air-dot.air-g2 { background: #4CC38A; }
.air-dot.air-g3 { background: #F2A541; }
.air-dot.air-g4 { background: #FF6B6B; }
/* 링크 한꺼번에 담기 (내 아카이브, 주인 10-15) */
.lh { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lh-how { margin: 0; padding-left: 22px; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.lh-paste { width: 100%; min-height: 96px; font-size: 16px; resize: vertical; }
.lh-where { display: flex; align-items: center; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.lh-count { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.lh-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-sites { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-site { max-width: 100%; }
.lh-site > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.lh-list { list-style: none; margin: 0; padding: 0 8px; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.lh-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lh-list li:last-child .lh-row { border-bottom: 0; }
.lh-row:focus-within { outline: 3px solid var(--accent); outline-offset: -1px; }
.lh-row input { width: 22px; height: 22px; font-size: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.lh-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.lh-url { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.lh-row .badge { align-self: flex-start; }
.lh-foot { justify-content: flex-end; }
/* 크롬 확장 [Xschool 담기] 안내 · 받기 창 (주인 10-15) */
.lh-ext { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; background: var(--soft); }
.lh-ext summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.lh-ext .lh-how { margin: 4px 0 8px; }
.lh-ext a:not(.link-btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
/* 크롬 확장 받기 (주인 10-15 "zip이 없다니까"): 받는 단추가 맨 앞 */
.ext-download { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 4px 0 8px; text-decoration: none; }
.ext-guide { display: flex; flex-direction: column; gap: 8px; }
.ext-guide > p { margin: 0; }
/* 확장은 PC 크롬에만 깔린다 -- 손가락 기기(휴대폰 · 태블릿)에서는 단추를 숨김 */
@media (hover: none) and (pointer: coarse) {
  #archive-ext-btn { display: none; }
}
.catch { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.catch-from { display: flex; align-items: center; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.catch-note { width: 100%; min-height: 120px; font-size: 16px; resize: vertical; }
.catch-files-title { margin: 6px 0 0; font-weight: 700; }
.catch-files { list-style: none; margin: 0; padding: 0 8px; max-height: 36vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.catch-file { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.catch-files li:last-child .catch-file { border-bottom: 0; }
.catch-file.off { cursor: default; color: var(--muted); }
.catch-file input { width: 22px; height: 22px; font-size: 16px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.catch-file-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catch-file-name { font-weight: 700; overflow-wrap: anywhere; }
.catch-file-size { font-size: 13px; color: var(--muted); }
.catch-file-why { font-size: 13px; color: var(--warn); }
.catch-foot { justify-content: flex-end; }
/* 담을 곳 (주인 10-15 "업무인지 교과인지 또는 새 폴더로"): 붙은 세 칸 스위치 + 그 칸의 고르기 */
.catch-to-field { display: flex; flex-direction: column; gap: 8px; }
.catch-to { align-self: flex-start; }
.catch-to .seg-btn { min-width: 0; padding: 0 14px; }
.catch-to-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.catch-to-panel .hint { margin: 0; }
.catch-to-panel .place-picker .field { margin: 0; }
@media (max-width: 599.98px) {
  .catch-to { align-self: stretch; }
  .catch-to .seg-btn { flex: 1 1 0; padding: 0 6px; }
}
/* 금고 (주인 10-15 파일 2중 잠금): 잠긴 카드 얼굴 · 자세히의 금고 칸 · 올릴 때 금고 켜기 */
.file-face.vault-face { gap: 8px; background: color-mix(in srgb, var(--accent) 10%, var(--soft)); }
.file-face.vault-face .icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.vault-box { display: flex; flex-direction: column; gap: 10px; }
.vault-box .hint, .vault-put .hint { margin: 0; }
.vault-put { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.vault-put .sub-title { display: flex; align-items: center; gap: 6px; margin: 0; }
.vault-put .sub-title .icon { width: 18px; height: 18px; color: var(--accent); }
.vault-check { display: inline-flex; align-items: center; gap: 6px; }
.vault-check .icon { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.vault-check input { width: 22px; height: 22px; font-size: 16px; accent-color: var(--accent); }
.vault-warn p { margin: 0; }
.vault-form .check-row input { width: 22px; height: 22px; font-size: 16px; }
.vault-ask p { margin: 0 0 8px; }

/* 올리기 진행 (주인 10-16 "퍼센테이지"): progress.js progressView -- 글 한 줄 아래 막대 */
.progress-gauge { display: block; margin-top: 6px; }
.progress-gauge[hidden] { display: none; }
.progress-words { font-variant-numeric: tabular-nums; }

/* ---------- 받기 링크 (SQL 038, 기능 키 collect): 내 아카이브 [받기 링크] 창 · 받은 카드 표 ---------- */
.badge-collect { color: var(--accent); border-color: var(--accent); background: var(--card); }
.badge-collect.badge-soon { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.collect-part { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.collect-part .lead { margin: 0; }
.collect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.collect-row {
  width: 100%; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); font-family: var(--sans); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.collect-row:hover { border-color: var(--accent); }
.collect-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.collect-row-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.collect-row-meta { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.collect-state { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.collect-state.on { color: var(--ok); border-color: var(--ok); }
.collect-form .field { gap: 8px; }
.collect-sub { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--soft); }
.collect-count-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collect-count { width: 96px; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }
.collect-count-row[hidden], .collect-sub[hidden] { display: none; }
.collect-seg { min-width: 0; }
.collect-limits { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.collect-meta { margin: 0; color: var(--muted); font-size: 14px; }
.collect-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.collect-h { margin: 0; font-size: 15px; }
.collect-url-row .input { font-size: 16px; }
.collect-url-row .primary { flex: 0 0 auto; }
.collect-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.collect-code { font-weight: 700; font-size: 18px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--navy); }
@media (prefers-color-scheme: dark) { .collect-code { color: var(--accent); } }
.collect-count-line { margin: 0; font-size: 15px; }
.collect-count-line strong { font-size: 22px; }
.collect-bar { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.collect-bar > span { display: block; height: 100%; width: 0; background: var(--accent); }
.collect-missing { display: flex; flex-direction: column; gap: 6px; }
.collect-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.collect-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 14px; font-weight: 600; }
.collect-table > summary { list-style: none; }
.collect-codes { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; }
.collect-code-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--soft); min-width: 0; }
.collect-code-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collect-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.collect-file { min-width: 0; }
.collect-file-open {
  width: 100%; min-height: 48px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: var(--soft); color: var(--ink); font-family: var(--sans); text-align: left; min-width: 0;
}
button.collect-file-open { cursor: pointer; }
button.collect-file-open:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.collect-file.gone .collect-file-open { opacity: 0.7; }
.collect-file-name { display: flex; align-items: baseline; gap: 8px; font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.collect-file-who { flex: 0 0 auto; font-weight: 700; color: var(--navy); }
@media (prefers-color-scheme: dark) { .collect-file-who { color: var(--accent); } }
.collect-file-meta { font-size: 13px; color: var(--muted); }

/* 만들 때 첫 질문 "누구에게서 받나요?" (주인 10-16): 휴대폰은 위아래로, 넓으면 셋이 한 줄 */
.collect-presets { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) { .collect-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.collect-preset {
  min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink);
  font-family: var(--sans); text-align: left; cursor: pointer; min-width: 0;
}
.collect-preset:hover { border-color: var(--accent); }
.collect-preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--soft); }
.collect-preset-name { font-size: 16px; font-weight: 700; }
.collect-preset-line { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.collect-rest { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.collect-rest[hidden] { display: none; }
.collect-more { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; min-width: 0; }
.collect-more > summary { min-height: 48px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; padding: 6px 0; }
.collect-more[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.collect-more[open] { padding-bottom: 12px; }
.collect-more > .field + .field, .collect-more > .collect-limits { margin-top: 14px; }
.collect-more-head { font-weight: 700; }
.collect-more-sum { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }

/* 내 아카이브 쪽 고리: 폴더 머리 "받는 중" 줄 · 받은 카드 자세히 */
.collect-strip { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.collect-strip[hidden] { display: none; }
.collect-strip-line {
  margin: 0; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px;
  border: 1px solid var(--accent); background: var(--card); min-width: 0;
}
.collect-strip-text { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.collect-strip-line .small-btn { flex: 0 0 auto; }
.drawer-came { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: var(--soft); }
.drawer-came .hint { margin: 0; flex: 1 1 200px; min-width: 0; color: var(--ink); }

/* 학교 휴지통 (SQL 039): 우리 학교 > [자료실 휴지통] -- 학교 관리자만 */
.school-bin-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.school-bin-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.school-bin-text { flex: 1 1 240px; min-width: 0; }
.school-bin-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.school-bin-text .mini-meta { margin: 4px 0 0; overflow-wrap: anywhere; }
.school-bin-actions { flex: 0 0 auto; }
.school-bin-empty { list-style: none; }

/* 같은 파일 정리 (주인 10-19): 묶음마다 카드 하나, 줄마다 [남길 것] 고르기 -- 휴대폰에서는 줄이 두 줄로 */
.dupes { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dupes-summary { margin: 0; font-weight: 700; }
.dupes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dupes-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card); min-width: 0; }
.dupes-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; min-width: 0; }
.dupes-title { font-weight: 700; overflow-wrap: anywhere; min-width: 0; flex: 1 1 12em; }
.dupes-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dupes-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.dupes-row input { width: 20px; height: 20px; margin: 0; }
.dupes-row.is-kept { background: var(--soft); }
.dupes-row:not(.is-kept) .dupes-where { text-decoration: line-through; color: var(--muted); }
.dupes-where { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 600px) {
  .dupes-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .dupes-row .mini-meta { grid-column: 2 / 3; grid-row: 2; }
}

/* 운영 › 기능 (주인 10-19 "인터페이스 편하게 · 칸마다 색깔 · 설명 · 미리보기"): 색은 그 기능이 나타나는 자리를 따른다 */
.op-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.op-tool-row {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.op-tool-row .op-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--t, var(--line)); }
.op-tool-row .op-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.op-tool-row .op-change { flex: none; }
.op-feature-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
/* 카드 판(기능 · 도구)은 안쪽 스크롤 없이 쭉 -- 페이지 스크롤 하나만 (주인 10-19 "2중으로 내리기가 있으니까 불편해") */
.op-list.op-feature-list, .op-list.op-tool-grid { max-height: none; overflow: visible; }
.op-feature {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 12px 12px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--f, var(--line)); border-radius: 14px; background: var(--card);
}
.op-feature.mode-off { background: var(--soft); }
.op-feature.mode-off .op-feature-ico { opacity: 0.55; }
.op-feature-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.op-feature-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--f, var(--accent)) 13%, var(--card)); color: var(--f, var(--accent));
}
.op-feature-ico .icon { width: 17px; height: 17px; }
.op-feature-head .op-name { font-weight: 700; overflow-wrap: anywhere; }
.op-feature-head .mono { margin-left: auto; }
.op-feature-desc { margin: 0; font-size: 13px; color: var(--muted); }
.op-feature-where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.op-place-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--f, var(--accent)) 11%, var(--card));
  color: color-mix(in srgb, var(--f, var(--accent)) 82%, var(--ink)); font-weight: 600;
}
.op-feature-where .op-peek-btn { margin-left: auto; border: 0; background: transparent; color: var(--muted); }
.op-feature-where .op-peek-btn:hover { background: var(--soft); }
.op-feature-where .op-peek-btn[aria-expanded='true'] { color: var(--ink); }
/* 미리 보기: 선생님 화면에 생기는 카드 흉내 */
.op-peek { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: var(--soft); border: 1px dashed var(--line); }
.op-peek-where { margin: 0; }
.op-peek-card {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 4px solid var(--f, var(--accent)); border-radius: 10px;
  background: var(--card); box-shadow: 0 1px 3px rgba(19, 37, 74, 0.08);
}
.op-peek-card > .icon { flex: none; width: 18px; height: 18px; color: var(--f, var(--accent)); }
.op-peek-title { font-weight: 700; white-space: nowrap; }
.op-peek-sample { font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-peek-lines { margin: 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink); }
.op-peek-lines b { color: var(--f, var(--accent)); font-weight: 700; margin-right: 2px; }
.op-feature-modes { display: flex; width: 100%; }
.op-feature-modes .seg-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.op-feature-pilots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.op-feature-pick { flex: 1 1 180px; min-width: 0; max-width: 100%; font-size: 16px; }
/* 글이 곧 뜻이라 아이콘은 뺀다 -- 범위 단추 · 열기 · 닫기 (주인 10-19 "세련되게") */
.op-feature-modes .seg-btn svg, .op-tool-row .op-change svg { display: none; }
.op-tool-row .op-change { border-color: transparent; background: transparent; font-weight: 600; }
.op-tool-row .op-change:hover:not(:disabled) { background: var(--soft); }
/* 시험 학교 칩: 이름 + ×만 (빼기 글자는 읽어 주는 기계에만) */
.op-pilot-chip {
  display: inline-flex; align-items: center; gap: 0; padding: 0 0 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); min-height: 44px;
}
.op-pilot-chip .op-change { border: 0; background: transparent; color: var(--muted); min-width: 44px; justify-content: center; }
.op-pilot-chip .op-change svg { display: inline-block; width: 15px; height: 15px; }
.op-pilot-chip .op-change span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.op-pilot-chip .op-change:hover:not(:disabled) { color: var(--danger); background: transparent; }
@media (max-width: 420px) {
  .op-feature-list, .op-tool-grid { grid-template-columns: minmax(0, 1fr); }
  .op-feature-modes .seg-btn { padding-left: 6px; padding-right: 6px; }
}
.march p.march-group { font-size: 13px; font-weight: 700; color: var(--muted); margin: 10px 0 4px; }
.march .duty-group + .duty-group { margin-top: 8px; }
.march .march-check { margin-right: 4px; font-weight: 900; }
.march .march-subject-box { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--soft, rgba(37, 99, 235, 0.06)); }
.march .march-subject-row + .march-subject-row { margin-top: 4px; }
.march .march-found { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.op-mail-row .input { flex: 1 1 240px; min-width: 0; font-size: 16px; }
/* 자동 로그아웃 (주인 10-19): 홈 맨 위 오른쪽 단추 · 창 */
.hello-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hello-top .hello-school { margin: 0; }
.hello-out {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 14px; font-weight: 700; color: var(--navy-ink); background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px; cursor: pointer;
}
.hello-out.on { color: var(--navy); background: #FFFFFF; border-color: #FFFFFF; }
.hello-out .autoout-left { font-size: 16px; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.autoout-body { display: flex; flex-direction: column; gap: 8px; }
.autoout-body .autoout-label { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.autoout-body .autoout-check { margin-right: 4px; font-weight: 900; }
.autoout-body #autoout-others { align-self: flex-start; }
.autoout-body #autoout-others { color: var(--danger); }