/* ═══════════════════════════════════════════════════════════════
   css/b/components.css — 부품
   소유: 설계서 §3.1(카드·패널·구역 머리·목록 줄·탭·주 버튼)과 §3.2(버튼·입력·체크·토글·세그먼트·칩·태그·
        아바타·빈 상태·목록 상자·⋮ 팝업·글자 단계 type-*·폴더·파일 머리·주 이동 띠·지표·사실 묶음·진행 막대).
   값은 docs/draft-b/reference.html 그대로이고, B에 없는 부품은 B에 이미 있는 값의 조합으로만 만든다.
   ⚠️ 화면 고유 배치는 screens.css, 셸은 shell.css, 떠 있는 것은 overlays.css 가 맡는다(같은 선택자를 두 파일이 정의하지 않는다).
   ⚠️ 미디어 블록은 **파일 맨 끝**, B 순서 그대로다(≥700 → 가로 ≥760 → 가로 ≥1180 → ≤460). 기본 규칙을 그 아래에 두지 말 것.
   ⚠️ Tailwind CDN 은 유틸리티를 나중에 주입한다 — 마크업에 Tailwind 모양 유틸이 같이 붙은 부품은 선택자를 두 번 적어
      (`.popup-menu.popup-menu`) 명시도로 이긴다. `list-item` 은 Tailwind 가 `display:list-item` 으로 아는 이름이라 늘 두 번 적는다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 글자 단계(설계서 §2.2) — 옛 type-* 클래스(마크업 60여 곳)를 B 단계로 다시 정의한다 ── */
.type-display    { font-size: 34px; line-height: 1.2; font-weight: 650; letter-spacing: -.045em; }
.type-heading-lg { font-size: 28px; line-height: 1.25; font-weight: 650; }
.type-heading    { font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.03em; }
.type-title-lg   { font-size: 18px; line-height: 1.35; font-weight: 650; }
.type-title      { font-size: 16px; line-height: 1.4; font-weight: 680; }
.type-title-sm   { font-size: 14px; line-height: 1.4; font-weight: 680; }
.type-body       { font-size: 14px; line-height: 1.65; font-weight: 400; }
.type-body-sm    { font-size: 12px; line-height: 1.6; font-weight: 400; }
.type-label-lg   { font-size: 13px; line-height: 1.4; font-weight: 650; }
.type-label      { font-size: 12px; line-height: 1.4; font-weight: 650; }
.type-label-sm   { font-size: 11px; line-height: 1.45; font-weight: 560; }
.type-select     { font-size: 12px; font-weight: 560; }
/* 글자용 포인트 — Tailwind `text-ui-accent`(JS 템플릿)는 채움색(3.0)이 아니라 진한 초록으로 보낸다.
   ⚠️ 선택자의 :root 를 빼지 말 것(0-1-1) — Tailwind 가 나중에 주입하는 0-1-0 을 이겨야 한다. */
:root .text-ui-accent { color: var(--green-deep); }

/* ── 카드 — B .card ── */
.card {
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: var(--shadow); overflow: hidden;
}
/* ⚠️ 팝업(⋮)을 품는 카드는 잘리지 않게 넘침을 연다(팝업을 품는 목록에 overflow:hidden 금지). */
.card.list, .card.composer, .card.attend-board-card, .card.cal-card, .card.week-table { overflow: visible; }
.card-pad, .card.pad { padding: 20px; }
.card.soft { background: var(--paper-2); }
/* 버튼이 여러 개 섞인 카드(알림 줄·#dev) — 떠오르지 않고 테두리만 진해진다. 마크업의 Tailwind 모서리를 이기려 두 번 적는다. */
.card-lift.card-lift { border: 1px solid var(--line); border-radius: var(--r-item); background: var(--paper); transition: border-color var(--move), background-color var(--move); }
.card-lift.card-lift:hover { border-color: var(--line-strong); }
.card-tap { transition: border-color var(--move); }
a.card { color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--line-strong); }

/* ── 패널 — B .panel ── */
.panel, .list-panel {
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow); padding: 20px;
}
/* 패널 안에 JS 가 그린 카드·작성 폼·상세는 평평하게(면·테두리·그림자·모서리·바깥 여백 0). */
.list-panel :is(.card, .composer, .detail-screen) { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }

/* ── 구역 머리 — B .section-head / .section-title / .more ── */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head > div:first-child { min-width: 0; }
.section-head > .chip-row { min-width: 0; flex: 1; }
.section-title, .section-head h2, .card h2.section-title, .card h3.section-title { margin: 0; font-size: 16px; font-weight: 680; line-height: 1.35; color: var(--ink); }
.section-head p { margin: 4px 0 0; color: var(--t-page-sub); font-size: 12px; line-height: 1.5; }
.more {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  color: var(--t-more); font-size: 11px; text-decoration: none; background: none; border: 0;
  transition: color var(--move);
}
.more:hover { color: var(--green-deep); }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--green-deep); font-size: 13px; font-weight: 560; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── 격자 도우미 ── 열은 minmax(0,1fr)로 못 박는다(줄바꿈 없는 글이 카드 밖으로 튀어나가지 않게). */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.stack > *, .grid-2 > * { min-width: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ── 목록 — B .list / .list-row / .highlight ── */
.list { display: grid; }
.list-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 42px; border-top: 1px solid var(--rule-2); font-size: 13px; color: inherit; text-decoration: none;
}
.list-row:first-child { border-top: 0; }
.list-row .meta { font-size: 11px; color: var(--t-clock); font-variant-numeric: tabular-nums; }
.list-row .name { font-weight: 560; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .tag { font-size: 10px; color: var(--t-tag); background: none; padding: 0; }
.highlight { background: var(--highlight); border-radius: var(--r-cell); padding: 2px 8px; margin: 2px -8px; }
a.list-row:hover { background: var(--highlight); border-radius: var(--r-cell); }

/* 목록 상자(설정·명부·파일·학사일정·공지 줄) — 혼자 쓰이는 .card.list 는 B .panel 모양 */
.card.list { background: var(--panel-bg); border-color: var(--line); border-radius: var(--r-panel); padding: 4px 20px; }
.list-panel .card.list { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
/* B .notice-row 결 — 머리(기호·태그·아바타·파일 머리) · .list-copy · .meta · ⋮
   ⚠️ 두 번 적는다 — Tailwind CDN 의 `list-item` 유틸리티(display:list-item)가 나중에 주입돼 flex 를 덮는다. */
.list-item.list-item {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--rule-3); background: transparent; color: inherit; text-align: left;
  text-decoration: none; font-size: 13px;
}
.list-item.list-item:last-child { border-bottom: 0; }
button.list-item.list-item, a.list-item.list-item {
  position: relative; width: calc(100% + 16px); margin: 0 -8px; padding-left: 8px; padding-right: 8px;
  border-bottom: 0; border-radius: var(--r-cell); transition: background-color var(--move);
}
/* 누르는 줄은 hover 면이 둥글어서(B .highlight 결) 구분선을 테두리 대신 선 하나로 긋는다 — 테두리면 모서리를 따라 휘어 줄마다 카드처럼 보였다. */
button.list-item.list-item:not(:last-child)::after, a.list-item.list-item:not(:last-child)::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: var(--rule-3); pointer-events: none;
}
button.list-item.list-item:hover, a.list-item.list-item:hover, .list-item.list-item.is-open { background: var(--highlight); }
.list-copy { min-width: 0; flex: 1; }
.list-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 560; line-height: 1.45; color: var(--ink); }
.list-copy strong.wrap { white-space: normal; line-height: 1.5; }
.list-copy p { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; line-height: 1.45; }
.meta { flex: 0 0 auto; color: var(--t-date-2); font-size: 11px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-chevron { flex: none; color: var(--muted); font-size: 16px; }
.list-row-open { flex: 1; min-width: 0; min-height: 44px; align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; text-align: left; color: inherit; }
.list .list-item > .tag:first-child { min-width: 52px; justify-content: center; }
.pin-mark { width: 4px; height: 24px; flex: none; border-radius: var(--r-bar); background: var(--green); }
.list .list-item > .pin-mark:first-child { margin-right: 48px; }
.list-detail { padding: 6px 0 16px; border-bottom: 1px solid var(--rule-3); font-size: 14px; line-height: 1.65; }
.list-detail:last-child { border-bottom: 0; }
.notice-icon { width: 24px; height: 24px; flex: none; border-radius: var(--r-tag); background: var(--icon-bg); display: grid; place-items: center; color: var(--t-icon); font-size: 12px; line-height: 1; }
.notice-date { font-size: 11px; color: var(--t-date-2); }
/* B .board-row — 건의함·설정·명부 줄 */
.board-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--rule-3); }
.board-row:last-child { border-bottom: 0; }
.board-title { font-size: 13px; font-weight: 560; }
.board-date { font-size: 11px; color: var(--t-date-2); }

/* ── 탭 — B .tabs / .tab (공지 분류·건의함 보기·자료실 종류·접수함·시간표 반·학사일정 달) ── */
.chip-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row[role="tablist"] { gap: 16px; padding: 0; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.chip-row[role="tablist"] > .chip {
  height: auto; min-height: 0; padding: 0 2px 10px; border: 0; border-radius: 0; background: none;
  color: var(--t-tab); font-size: 12px; font-weight: 400; position: relative; box-shadow: none;
}
.chip-row[role="tablist"] > .chip:hover { color: var(--green-deep); background: none; }
.chip-row[role="tablist"] > .chip:is(.is-active, [aria-selected="true"]) { color: var(--t-tab-active); font-weight: 650; background: none; }
.chip-row[role="tablist"] > .chip:is(.is-active, [aria-selected="true"])::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--r-tab); background: var(--green);
}
/* 탭의 누르는 영역은 ::before(밑줄이 ::after 다) */
.chip-row[role="tablist"] > .chip::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
}
.chip-count { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--r-tag); background: var(--icon-bg); color: var(--t-icon); font-size: 10px; font-weight: 650; }

/* ── 필터 알약(여러 개 켜고 끄는 것) ── */
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--paper);
  color: var(--t-nav); font-size: 12px; font-weight: 560; white-space: nowrap;
  transition: background-color var(--move), color var(--move), border-color var(--move), opacity var(--move);
}
.chip:hover { background: var(--nav-hover); color: var(--green-deep); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green-soft); color: var(--t-nav-active); font-weight: 650; }
.chip .ui-icon { font-size: 14px; }
/* 꺼진 일정 종류는 흐리게 — 이 칩의 유일한 피드백이다(calendar.js 가 aria-pressed 를 바꾼다). */
.cal-filter-chip[aria-pressed="false"] { opacity: .55; }
.subject-chips { flex-wrap: wrap; overflow: visible; padding: 0; }

/* ── 세그먼트(단일 선택) — B 사이드바 활성 모양 ── */
.segment { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.segment > button, .attend-pick > button {
  padding: 7px 12px; border-radius: var(--r-btn); background: transparent; color: var(--t-nav);
  font-size: 12px; font-weight: 500; white-space: nowrap; transition: background-color var(--move), color var(--move);
}
.segment > button:hover, .attend-pick > button:hover { background: var(--nav-hover); color: var(--green-deep); }
.segment > button:is(.is-active, .is-on, [aria-pressed="true"], [aria-selected="true"]),
.attend-pick > button:is(.is-active, .is-on, [aria-pressed="true"]) { background: var(--green-soft); color: var(--t-nav-active); font-weight: 650; }
.attend-pick { display: inline-flex; gap: 4px; flex: none; }

/* ── 버튼 ── 주 버튼 = B .pill-btn · 보조 = 같은 치수 + paper 면 + 진한 초록 글자 */
.btn, .pill-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--paper); color: var(--green-deep);
  font-size: 12px; font-weight: 650; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--move), color var(--move), border-color var(--move), transform var(--move);
}
.btn:hover { background: var(--nav-hover); }
.btn:active, .pill-btn:active, .b-btn:active { transform: translateY(1px); }
.btn .ui-icon, .pill-btn .ui-icon { font-size: 16px; }
.btn.primary, .pill-btn { background: var(--action); border-color: var(--action); color: #fff; box-shadow: var(--action-shadow); }
.btn.primary:hover, .pill-btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn.small { padding: 7px 12px; border-radius: var(--r-cell); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--t-nav); box-shadow: none; }
.btn.ghost:hover { background: var(--nav-hover); color: var(--green-deep); }
.btn.danger { border-color: var(--danger-line); color: var(--danger); background: var(--paper); box-shadow: none; }
.btn.danger:hover { background: var(--danger-soft); }
/* 되돌릴 수 없는 확정(영구 삭제·강제 탈퇴) — 채움. 확인 대화상자는 그대로 거친다. */
.btn.danger.fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.fill:hover { filter: brightness(.94); }
.btn.small.is-active { background: var(--green-soft); border-color: var(--green-soft); color: var(--t-nav-active); }
.btn:disabled, .pill-btn:disabled, .b-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }
/* 잠긴 자리 섞기 — 눌리긴 하지만(비밀번호 창) 꺼진 것처럼 보인다 */
.btn.primary.is-locked { opacity: .55; box-shadow: none; }
/* 큰 버튼(모달 저장/취소·로그인·시작 가이드) */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
  border-radius: var(--r-item); border: 1px solid var(--line-strong); background: var(--paper); color: var(--green-deep);
  font-size: 14px; font-weight: 650; line-height: 1.2; transition: background-color var(--move), border-color var(--move), transform var(--move);
}
.b-btn--primary { background: var(--action); border-color: var(--action); color: #fff; box-shadow: var(--action-shadow); }
.b-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.b-btn--secondary:hover { background: var(--nav-hover); }
.b-btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
/* 아이콘 버튼 — 36px, 면·테두리 없음(누르는 영역은 base.css 의 ::after 44) */
.icon-btn, .icon-button {
  width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; padding: 0;
  border: 0; border-radius: var(--r-btn); background: transparent; color: var(--t-nav);
  transition: background-color var(--move), color var(--move);
}
.icon-btn:hover, .icon-btn.is-open, .icon-btn[aria-expanded="true"], .icon-button:hover { background: var(--nav-hover); color: var(--green-deep); }
.icon-btn .ui-icon, .icon-button .ui-icon { font-size: 19px; }
.icon-btn:disabled { opacity: .45; cursor: default; }

/* ── 입력 — 높이 46 · 모서리 13 · 면 --field-bg · 테두리 --field-line · 글자 16(iOS) ── */
.field-input,
:where(#app-shell, .modal-overlay, .sys-dialog, #onboarding-view, #modal-cal-day, #login-page) :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]) {
  width: 100%; min-width: 0; height: 46px; padding: 0 14px; margin: 0;
  border: 1px solid var(--field-line); border-radius: var(--r-item); background-color: var(--field-bg);
  color: var(--ink); outline: none; box-shadow: none;
  transition: border-color var(--move), box-shadow var(--move), background-color var(--move);
}
textarea.field-input,
:where(#app-shell, .modal-overlay, .sys-dialog, #onboarding-view, #modal-cal-day) textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
select.field-input,
:where(#app-shell, .modal-overlay, .sys-dialog, #onboarding-view, #modal-cal-day) select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8a80' stroke-width='1.65'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field-input:focus,
:where(#app-shell, .modal-overlay, .sys-dialog, #onboarding-view, #modal-cal-day, #login-page) :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]):focus {
  border-color: var(--green); box-shadow: var(--field-ring); background-color: var(--paper);
}
.field-input[aria-invalid="true"], :where(#app-shell, .modal-overlay, #onboarding-view) :is(input, textarea)[aria-invalid="true"] { border-color: var(--danger); }
.field-input:disabled, :where(#app-shell, .modal-overlay, #onboarding-view) :is(input, select, textarea):disabled { opacity: .55; }
/* 감싼 상자(.search-box · .inline-form)는 **상자가** 면·테두리·높이를 갖고 안의 입력은 테두리 없이 채운다. */
.search-box, .inline-form {
  display: flex; align-items: center; gap: 8px; height: 46px; min-width: 0;
  border: 1px solid var(--field-line); border-radius: var(--r-item); background: var(--field-bg);
  transition: border-color var(--move), box-shadow var(--move), background-color var(--move);
}
.search-box { padding: 0 14px; }
.inline-form { padding: 0 5px 0 14px; }
.search-box .ui-icon { font-size: 17px; color: var(--muted); }
:is(.search-box, .inline-form) :is(input, input.field-input):not([type="checkbox"], [type="radio"]) {
  flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
:is(.search-box, .inline-form) input:focus { box-shadow: none; background: transparent; }
.search-box:focus-within, .inline-form:focus-within { border-color: var(--green); box-shadow: var(--field-ring); background: var(--paper); }
.inline-form .btn { flex: none; }
.inline-form + .inline-form, .form-field .inline-form { margin-top: 0; }
.file-input {
  width: 100%; padding: 8px; border: 1px solid var(--field-line); border-radius: var(--r-item); background: var(--field-bg);
  color: var(--text-2); font-size: 13px;
}
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-cell);
  background: var(--paper); color: var(--green-deep); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--nav-hover); }
.form-field { display: grid; gap: 6px; margin-bottom: 14px; }
.form-label, .form-field > label, .form-field > span { display: block; margin: 0 2px; color: var(--text-2); font-size: 12px; font-weight: 560; }
.form-label { margin-bottom: 6px; }
.form-hint { margin: 2px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.form-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--ink); cursor: pointer; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── 체크박스 · 토글 ── */
.check-input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0; cursor: pointer;
  border: 1.5px solid var(--field-line); border-radius: 6px; background: var(--paper);
  display: inline-grid; place-content: center; transition: background-color var(--move), border-color var(--move);
}
.check-input::before {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--move);
}
.check-input:checked { background: var(--action); border-color: var(--action); }
.check-input:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle-switch {
  appearance: none; -webkit-appearance: none; position: relative; width: 44px; height: 26px; flex: none; margin: 0; padding: 0;
  border: 0; border-radius: 13px; background: var(--line-strong); cursor: pointer; transition: background-color var(--move);
}
.toggle-switch::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(31, 44, 36, .18); transition: transform var(--move);
}
.toggle-switch:checked { background: var(--green); }
.toggle-switch:checked::before { transform: translateX(18px); }
.toggle-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── 태그 · 상태 · 아바타 · 점 ── */
.tag, .status {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-tag);
  background: var(--icon-bg); color: var(--t-icon); font-size: 10px; font-weight: 560; line-height: 1.5; white-space: nowrap;
}
.tag.accent, .status { background: var(--green-soft); color: var(--t-nav-active); }
.tag.red, .status.warn { background: var(--cream); color: var(--warn); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag-x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--danger); background: transparent; }
.tag-x .ui-icon { font-size: 13px; }
.avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-soft) center / cover no-repeat; color: var(--t-nav-active); font-size: 13px; font-weight: 650; padding: 0;
}
button.avatar { cursor: pointer; }
.profile-copy { min-width: 0; flex: 1; text-align: left; }
.profile-copy strong, .profile-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { font-size: 14px; font-weight: 650; color: var(--ink); }
.profile-copy span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notif-unread-count { position: absolute; top: 0; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--green-soft); color: var(--green-deep); font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--paper); }
.board-tabs { margin-bottom: 20px; }
.board-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.board-tabs [role="tab"] { min-height: 44px; }
#section-board [role="tabpanel"] { outline: none; }
/* 설정·계정 줄 머리 아이콘 — B .notice-icon 확대판 */
.essential-icon, .account-action-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-cell); background: var(--icon-bg); color: var(--t-icon); }
.essential-icon .ui-icon, .account-action-icon .ui-icon { font-size: 17px; }
.account-danger .account-action-icon { background: var(--danger-soft); color: var(--danger); }
.text-ui-danger { color: var(--danger); }

/* ── 빈 상태 · 불러오는 중 — 위에 흐린 leaf-mini(부록 A 원문) ── */
.empty-note, .agenda-empty, .roster-empty {
  margin: 0; padding: 28px 12px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6;
}
.empty-note::before, .agenda-empty::before, .roster-empty::before {
  content: ''; display: block; width: 32px; height: 32px; margin: 0 auto 8px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Cpath d='M15 51C30 37 41 25 50 9' stroke='%2388a78f' stroke-width='2'/%3E%3Cpath d='M28 39C16 39 10 29 12 20c10 1 18 8 16 19Z' fill='%23d8e7d6' stroke='%2391ad97'/%3E%3Cpath d='M38 29c-5-10 0-19 9-24 6 9 4 18-9 24Z' fill='%23e6efdf' stroke='%239eb7a2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-loading { animation: breathe 1.4s ease-in-out infinite; }
.folder-empty, .gallery-empty, .roster-empty { grid-column: 1 / -1; }

/* ── ⋮ 팝업 · 컨텍스트 메뉴 — 닫힘은 opacity·pointer-events(전환이 걸려야 한다. display 로 숨기지 않는다) ──
   두 번 적는 이유: 마크업의 Tailwind 모양 유틸(bg-*·rounded-2xl·shadow-lg·p-*)을 이겨야 한다. */
.popup-menu.popup-menu {
  min-width: 168px; max-width: calc(100vw - 2rem); padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-item); box-shadow: var(--shadow-pop);
}
.popup-menu {
  transform-origin: top right; opacity: 0; pointer-events: none; transform: translateY(-3px);
  transition: opacity var(--move), transform var(--move);
}
.popup-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.popup-menu.popup-menu-context { transform-origin: top left; }
.row-menu { position: relative; flex: none; }
.row-menu .popup-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 168px; z-index: 30; }
.popup-row, .popup-menu > button, .popup-menu > a, .seat-dl-item {
  width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  border-radius: var(--r-cell); background: transparent; text-align: left; color: var(--ink);
  font-size: 13px; font-weight: 500; text-decoration: none; transition: background-color var(--move);
}
.popup-row:hover, .popup-menu > button:hover:not(:disabled), .popup-menu > a:hover, .seat-dl-item:hover:not(:disabled) { background: var(--nav-hover); }
.popup-row .ui-icon, .popup-menu > button .ui-icon, .seat-dl-item .ui-icon { font-size: 17px; flex: none; }
.popup-row.is-danger { color: var(--danger); }
.popup-row.is-danger:hover { background: var(--danger-soft); }
.seat-dl-item:disabled { opacity: .45; cursor: default; }

/* ── 폴더·앨범 카드 · 파일 머리 ── */
.folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.folder {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 14px 8px 14px 14px;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-phone); box-shadow: var(--shadow);
  color: inherit; text-align: left; -webkit-touch-callout: none; user-select: none;
}
.folder:hover { border-color: var(--line-strong); }
.folder-open { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 11px; padding: 0; background: transparent; text-align: left; color: inherit; }
.folder-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-cell); background: var(--icon-bg); color: var(--t-icon); }
.folder-icon img { width: 100%; height: 100%; object-fit: cover; }
.folder-copy { min-width: 0; flex: 1; }
.folder strong, .folder-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 560; line-height: 1.4; color: var(--ink); }
.folder-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.folder-more.icon-btn { width: 32px; height: 32px; color: var(--muted); }
.file-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-cell); background: var(--icon-bg); color: var(--t-icon); font-size: 9px; font-weight: 700; letter-spacing: .02em; }
.archive-file-card { -webkit-touch-callout: none; user-select: none; }

/* ── 주 이동 띠(급식·휴대폰 시간표·넓은 화면 시간표) ── */
.wk-strip { display: flex; align-items: center; gap: 6px; max-width: 420px; margin: 0 auto 14px; }
.wk-arrow { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-btn); color: var(--t-nav); transition: background-color var(--move), color var(--move); }
.wk-arrow:hover { background: var(--nav-hover); color: var(--green-deep); }
.wk-arrow .ui-icon { font-size: 19px; }
.wk-days { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.wk-day {
  position: relative; min-height: 48px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px 0;
  border-radius: var(--r-item); color: var(--ink); transition: background-color var(--move), color var(--move);
}
.wk-day strong { font-size: 11px; font-weight: 500; color: var(--t-tab); }
.wk-day span { font-size: 13px; font-weight: 610; }
.wk-day:hover { background: var(--nav-hover); }
.wk-day.is-on { background: var(--green-soft); color: var(--t-nav-active); }
.wk-day.is-on strong { color: var(--t-nav-active); font-weight: 650; }
.wk-day.is-on span { font-weight: 650; }
.wk-day.is-today::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 2px; margin-left: -9px; border-radius: var(--r-bar); background: var(--green); }
.wk-range { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-back { display: block; margin: -6px auto 14px; padding: 4px 8px; color: var(--t-more); font-size: 11px; background: none; }
.wk-back:hover { color: var(--green-deep); }

/* ── 지표 카드 — D-day 결 ── */
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric { padding: 16px; background: var(--dday-grad); border-color: var(--dday-line); }
.metric span { color: var(--t-dday-label); font-size: 13px; }
.metric strong { display: block; margin-top: 8px; font-size: 30px; font-weight: 520; letter-spacing: .03em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── 명부 상세의 사실 묶음(프로필 미리보기는 profile-a.css가 소유) ── */
.roster-facts { background: var(--paper-2); border-radius: var(--r-item); padding: 2px 14px; }

/* ── 진행 막대(업로드) ── */
.progress-track { height: 4px; border-radius: var(--r-bar); background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--green); }

/* 모든 브랜드 표시는 CSA 원본 SVG 한 벌. 크기만 조정하며 모양·색·비율은 바꾸지 않는다. */
.cs-logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.b-entry-brand { display: block; text-align: left; }
.brand-wordmark { display: block; width: 132px; max-width: 100%; height: auto; object-fit: contain; filter: none; opacity: 1; }
.brand-wordmark-small { display: inline-block; width: 84px; vertical-align: middle; }
.b-entry-brand .brand-sub { font-size: 11px; font-weight: 400; margin-top: 8px; }
.cs-logo-lg .brand-wordmark { width: 200px; }
.cs-logo-lg { justify-content: center; }

/* ══ 반응형(B 순서) ══════════════════════════════════════════════════ */
@media (min-width: 700px) {
  .grid-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (min-width: 1180px) {
  .card-pad, .card.pad { padding: 22px; }
  .folder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .card { border-radius: var(--r-phone); box-shadow: var(--shadow-phone); }
  .card-pad, .card.pad { padding: 15px; }
  .panel, .list-panel { padding: 14px; border-radius: var(--r-phone); }
  .card.list { padding: 2px 14px; border-radius: var(--r-phone); }
  .list-panel .card.list { padding: 0; border-radius: 0; }
  .section-head { margin-bottom: 12px; }
  .section-title, .section-head h2 { font-size: 14px; }
  .list-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; font-size: 11px; min-height: 38px; }
  /* 휴대폰은 긴 제목·설명을 한 줄로 버리지 않고 두 줄까지 보인다. */
  .list-item.list-item .list-copy strong, .list-item.list-item .list-copy p {
    display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .metric { padding: 13px 11px; }
  .metric strong { font-size: 24px; }
  .header-actions { justify-content: flex-start; }
}

/* ── 탈퇴한 사용자 — js/withdrawn.js 가 붙인다. 서버가 저장된 이름을 '탈퇴한 사용자'로 바꾸고, 화면은 색·아바타만 바꾼다. ── */
.cs-withdrawn { color: var(--withdrawn-ink); font-style: normal; }
.cs-withdrawn-tag {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-tag);
  background: var(--withdrawn-bg); border: 1px solid var(--withdrawn-line); color: var(--withdrawn-ink);
  font-size: 11px; font-weight: 650; line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.avatar.is-withdrawn, .is-withdrawn-avatar { background: var(--withdrawn-bg) !important; background-image: none !important; color: var(--withdrawn-ink) !important; }
.is-withdrawn-avatar .ui-icon, .avatar.is-withdrawn .ui-icon { width: 58%; height: 58%; }