html:has(body.role-cockpit-active),
body.role-cockpit-active {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
}

body.role-cockpit-active #happy24App.role-cockpit-host {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f4f8f5;
}

/* Round8-A조: 근태 띠(#curatorAttendanceStrip)는 큐레이터에게만 항상
   떠 있는 3번째 형제다(header + 근태 띠 + 지금할일/한화면업무판 중 하나).
   이 그리드는 "보이는 자식이 정확히 2개(header + 콘텐츠 하나)"일 때만
   맞는 2행 그리드라(scripts/verify_layout_gaps.py 주석 참고) 그대로
   두면 3번째 자식(근태 띠)이 암묵적 3번째 행으로 밀려나면서
   grid-template-rows의 auto/1fr 배정이 어긋나 지금할일 화면과 겹친다
   (실측: Playwright로 퇴근 버튼 클릭 시 #happy24CuratorNextTask가
   클릭을 가로챔). curator-attendance-strip.js가 마운트될 때만
   #happy24App에 이 클래스를 붙여 3행 그리드로 바꾼다 -- 다른
   역할(전체관리자·중간관리자)은 이 클래스가 없어 기존 2행 그리드
   그대로다. */
body.role-cockpit-active #happy24App.role-cockpit-host.role-cockpit-host-has-attendance-strip {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* round10 C조: 안부 알림(#curatorWellbeingCheckin)도 같은 이유로 자기
   행이 필요하다 -- 이 위젯은 항상 #happy24CuratorNextTask 바로 뒤에
   꽂히므로(curator-wellbeing-checkin.js가 그 호스트 기준으로
   insertAdjacentElement("afterend", ...)) 항상 문서상 마지막 자식이다.
   그래서 "마지막에 auto 행 하나 추가"만으로 근태 띠 유무와 무관하게
   맞는다(근태 띠가 있든 없든 이 위젯 앞의 마지막 콘텐츠가 항상 1fr
   행을 차지하는 순서는 그대로이므로). 위젯이 있을 때만 이 클래스를
   붙인다(#happy24App.role-cockpit-host-has-wellbeing-checkin, 안부 대상이
   0건이면 위젯 자체를 숨기고 이 클래스도 뗀다 -- 빈 자리를 만들지
   않기 위해). */
/* round10 C조: #happy24CuratorNextTask 자신의 CSS(curator-next-task.css)가
   min-height:calc(100dvh - 82px)를 걸어 둬서 카드 내용이 짧아도 항상
   뷰포트를 거의 다 채운다(가로 넓은 화면에서 카드 내용은 짧게 끝나고
   빈 여백만 상자 안에 남는 디자인 -- 모바일 우선 화면이라 원래는 문제가
   안 됐다). 그 뒤에 이 위젯을 붙이면 "카드 안 여백"이 "카드 내용 ~
   위젯 사이 빈 구간"으로 드러나 scripts/verify_layout_gaps.py가 잡는다
   (실측: 1440x900에서 286px). 이 위젯이 있을 때만 min-height를 풀어
   카드가 실제 내용만큼만 차지하게 하고, 이 위젯을 바로 그 다음 auto
   행(자기 내용 크기만큼만)에 붙인다 -- 뷰포트 바닥까지 강제로 밀지
   않으므로 카드 내용 바로 아래 붙어 빈 구간이 생기지 않는다(화면
   아래쪽에 약간의 여유 공간이 남을 수 있으나, 이 게이트는 "내용과
   내용 사이"만 재고 "마지막 내용 다음"은 재지 않는다 -- 파일 상단
   MIN_GAP_PX 설명 참고). */
body.role-cockpit-active #happy24App.role-cockpit-host.role-cockpit-host-has-wellbeing-checkin {
  grid-template-rows: auto auto auto;
}
body.role-cockpit-active #happy24App.role-cockpit-host.role-cockpit-host-has-attendance-strip.role-cockpit-host-has-wellbeing-checkin {
  grid-template-rows: auto auto auto auto;
}
#happy24App.role-cockpit-host-has-wellbeing-checkin #happy24CuratorNextTask {
  min-height: 0 !important;
}

/* 2026-08-17 지시서 단계3: 큐레이터 "다음 한 가지" 화면
   (#happy24CuratorNextTask, frontend/curator-next-task.js)도 이 규칙이
   숨기지 않도록 예외에 추가한다 -- role-cockpit이 항상
   body.role-cockpit-active를 켜두므로, 이 예외가 없으면 새 화면이
   보이지 않는다.
   Round8-A조: 근태 띠(#curatorAttendanceStrip, frontend/curator-attendance-strip.js)도
   같은 이유로 예외에 추가한다 -- "지금 할 일"/"한 화면 업무판" 중
   무엇이 보이든 근태 띠는 항상 남아 있어야 한다(지시서 1-(1)).
   round10 C조: 안부 알림(#curatorWellbeingCheckin, frontend/curator-
   wellbeing-checkin.js)도 같은 이유로 예외에 추가한다. 이 그리드에는
   명시적 행이 최대 3개(auto/auto/1fr)뿐이라 이 위젯은 암묵적(implicit)
   4번째 행으로 자연스럽게 이어진다 -- #happy24CuratorNextTask처럼
   1fr(마지막 명시 행)을 두고 다투지 않으므로(항상 그 뒤에 옴) 겹침이
   생기지 않는다(scripts/verify_overlay_collision.py로 재확인). */
body.role-cockpit-active #happy24App > :not(.app-header):not(#happy24RoleCockpit):not(dialog):not(.role-cockpit-detail-target):not(#happy24CuratorNextTask):not(#curatorAttendanceStrip):not(#curatorWellbeingCheckin) {
  display: none !important;
}

body.role-cockpit-active #happy24App > .role-cockpit-detail-target {
  display: block !important;
}

body.role-cockpit-active .app-header {
  position: relative;
  z-index: 510;
  min-height: 64px;
  padding: 8px clamp(12px, 2vw, 28px) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border-bottom: 1px solid #dce7df;
  box-shadow: 0 4px 18px rgba(26, 74, 46, 0.08);
}

body.role-cockpit-active .app-header .app-home-link {
  flex: 0 1 auto;
  min-width: 0;
}

body.role-cockpit-active .app-header .app-home-link > img {
  width: clamp(142px, 18vw, 220px) !important;
  height: auto !important;
  max-height: 48px;
  object-fit: contain;
}

body.role-cockpit-active .app-session {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: nowrap;
}

body.role-cockpit-active #happy24UserName {
  max-width: clamp(92px, 14vw, 190px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  color: var(--h24-accent-green, #173b28);
}

body.role-cockpit-active .app-session > button {
  min-height: 42px !important;
  height: 42px;
  padding: 7px 11px !important;
  border-radius: 12px !important;
  white-space: nowrap;
  font-size: 0.9rem !important;
  line-height: 1;
}

.role-header-action {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.role-notification-button {
  padding-right: 14px !important;
}

.role-notification-badge {
  position: absolute;
  top: -7px;
  right: -6px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d93636;
  color: #fff;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(130, 21, 21, 0.3);
}

.role-notification-badge[hidden] {
  display: none !important;
}

.role-cockpit {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: clamp(10px, 1.5vw, 22px) clamp(10px, 2vw, 30px) max(10px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.2vh, 14px);
  background:
    radial-gradient(circle at 88% 7%, rgba(86, 175, 116, 0.13), transparent 28%),
    linear-gradient(150deg, #f9fcfa 0%, #eef6f0 100%);
}

.role-cockpit[hidden] {
  display: none !important;
}

.role-cockpit-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.role-cockpit-heading > div:first-child {
  min-width: 0;
}

.role-cockpit-heading p {
  margin: 0 0 2px;
  color: #40805a;
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.role-cockpit-heading h1 {
  margin: 0;
  color: var(--h24-accent-green, #173b28);
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  line-height: 1.1;
}

.role-cockpit-heading span {
  display: block;
  margin-top: 4px;
  color: #63766a;
  font-size: clamp(0.7rem, 1vw, 0.93rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-cockpit-heading-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-cockpit-clock {
  color: #51695a !important;
  font-weight: 800;
}

#roleCockpitRefresh {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
}

.role-cockpit-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  /* Round8-A조: 큐레이터 카드가 7개라 3x2(6칸)에서 하나가 암묵적
     3번째 행으로 밀려나 화면이 세로로 길어졌다(지시서 3-(1)).
     4x2(8칸)로 바꿔 central_admin(4장)·team_lead(6장)·curator(7장)
     모두 실제 화면 높이 안에 들어가게 한다. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}

/* round9 B조 1)(2): team_lead가 4장으로 줄면서 위 4x2 틀의 2번째
   행이 통째로 비어, "빈 공간" 규칙(scripts/verify_layout_gaps.py,
   기준 200px)을 넘는 여백이 카드 밑에 남았다(실측 360px). 카드
   4장 이하인 역할은 4열 대신 2열로 접어(2x2) 두 행을 그대로
   채운다 -- 빈 행 자체를 안 만드니 grid-auto-rows/align-content
   같은 자동 계산에 기대지 않고, central_admin(5장)·curator(7장)의
   기존 4x2 틀은 그대로 둔다(role-cockpit.js/sample-role-
   experience.js가 카드 4장 이하일 때만 이 클래스를 붙인다). */
.role-cockpit-grid.role-cockpit-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.role-cockpit-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(10px, 1.5vw, 20px);
  border: 1px solid #d8e6dc;
  border-radius: clamp(15px, 2vw, 24px);
  background: rgba(255, 255, 255, 0.96);
  color: var(--h24-accent-green, #173b28);
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  box-shadow: 0 10px 28px rgba(29, 81, 49, 0.09);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.role-cockpit-card:hover,
.role-cockpit-card:focus-visible {
  transform: translateY(-2px);
  border-color: #7ab48d;
  box-shadow: 0 14px 32px rgba(29, 81, 49, 0.15);
  outline: none;
}

.role-cockpit-icon {
  width: clamp(34px, 4vw, 52px);
  height: clamp(34px, 4vw, 52px);
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f4eb;
  color: #246a3f;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 900;
}

.role-cockpit-copy {
  min-width: 0;
  align-self: center;
}

.role-cockpit-copy strong,
.role-cockpit-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-cockpit-copy strong {
  font-size: clamp(0.93rem, 1.6vw, 1.25rem);
}

.role-cockpit-copy small {
  margin-top: 4px;
  color: #6b7c71;
  font-size: clamp(0.65rem, 1vw, 0.86rem);
}

/* round8 C조 지시서 1)(3): 카드 숫자가 0일 때 이유를 설명한다 -- 숫자만
   덩그러니 0으로 두지 않는다(공통 UI 규칙 4, design-tokens.css 토큰만). */
.role-cockpit-empty-hint {
  margin-top: 2px;
  color: var(--h24-ink-muted, #6b7c71);
  font-style: italic;
  white-space: normal !important;
}

.role-cockpit-empty-hint[hidden] {
  display: none;
}

.role-cockpit-count {
  min-width: clamp(38px, 4.4vw, 58px);
  height: clamp(38px, 4.4vw, 58px);
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #edf3ef;
  color: #607067;
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  font-weight: 900;
}

.role-cockpit-count[data-active="true"] {
  background: #d93636;
  color: #fff;
  box-shadow: 0 6px 16px rgba(154, 34, 34, 0.24);
}

/* 지시서 round9-A조 2번, 공통 UI 규칙 4: "0건은 흐리게 하거나 숨긴다".
   카드 자체(배지가 아니라)를 흐리게 해 "지금 볼 필요 없음"이 한눈에
   보이게 한다. */
.role-cockpit-card:has(.role-cockpit-count[data-active="false"]) {
  opacity: 0.6;
}

.role-cockpit-open {
  grid-column: 2 / 4;
  align-self: end;
  color: #2b7045;
  font-size: clamp(0.67rem, 1vw, 0.85rem);
  font-weight: 900;
  text-align: right;
}

.role-card-corrections,
.role-card-quality {
  border-color: #efd6d1;
}

.role-card-visits,
.role-card-registry {
  border-color: #cddfed;
}

.role-cockpit-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #607067;
  font-size: clamp(0.66rem, 1vw, 0.84rem);
}

.role-cockpit-footer span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.role-cockpit-detail-target {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: clamp(56px, 7vh, 76px) clamp(12px, 2vw, 28px) 22px !important;
  z-index: 900 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: #f5f8f6 !important;
}

.role-cockpit-detail-close {
  /* 2026-08-20 지시서(큐레이터 클릭막힘 1순위): style.css의
     "@media (max-width: 900px) { button { width: 100%; } }" 규칙이
     이 클래스보다 낮은 우선순위(태그 셀렉터)인데도, 이 규칙이 width를
     지정하지 않아 그 규칙의 width:100%가 그대로 새어 들어왔다 --
     실측(Playwright, 390x844): 히트박스가 x:-12~378(390px, 뷰포트
     전체 폭) y:10~56 밴드 전체를 덮어, 그 아래 있는 패널의 "←
     오늘 할 일로" 되돌아가기 버튼을 포함해 같은 자리의 다른 무엇도
     못 눌렀다(document.elementFromPoint로 밴드 전체가 이 버튼으로
     찍힘). frontend/outreach-plan.css의 .outreach-page-prev /
     .outreach-popup-close가 이미 같은 규칙을 피하려 width:auto를
     쓰고 있다 -- 이 버튼만 그 처리가 빠져 있었다. 버튼 자체는
     그대로 두고(되돌아가기는 필요) 히트박스만 보이는 크기로 줄인다. */
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 980;
  width: auto;
  min-height: 46px;
  padding: 9px 15px;
  border: 1px solid #bdd5c5;
  border-radius: 14px;
  background: #fff;
  color: #245d39;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(25, 67, 42, 0.18);
}

.role-cockpit-detail-close[hidden] {
  display: none !important;
}

.role-side-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 990;
  border: 0;
  background: rgba(12, 36, 23, 0.42);
  backdrop-filter: blur(2px);
}

.role-side-panel-backdrop[hidden] {
  display: none !important;
}

.role-side-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: min(430px, 92vw);
  height: 100dvh;
  padding: max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #f9fcfa;
  border-left: 1px solid #d7e4da;
  box-shadow: -14px 0 40px rgba(18, 55, 34, 0.18);
}

.role-side-panel[hidden] {
  display: none !important;
}

.role-side-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #dce7df;
}

.role-side-panel-bar h2 {
  margin: 0;
  color: var(--h24-accent-green, #173b28);
  font-size: 1.35rem;
}

.role-side-panel-body {
  min-height: 0;
  overflow: auto;
  padding: 16px 2px 4px;
}

.role-panel-summary,
.role-profile-card,
.role-panel-note,
.role-panel-empty {
  border: 1px solid #dce7df;
  border-radius: 17px;
  background: #fff;
}

.role-panel-summary {
  padding: 16px;
  margin-bottom: 12px;
}

.role-panel-summary strong,
.role-panel-summary span {
  display: block;
}

.role-panel-summary strong {
  color: #214d32;
  font-size: 1.05rem;
}

.role-panel-summary span {
  margin-top: 5px;
  color: #687a6e;
  font-size: 0.86rem;
}

.role-notification-list {
  display: grid;
  gap: 9px;
  margin-bottom: 13px;
}

.role-notification-item {
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #d8e6dc;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.role-notification-item span {
  min-width: 0;
}

.role-notification-item strong,
.role-notification-item small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.role-notification-item strong {
  color: var(--h24-accent-green, #173b28);
}

.role-notification-item small {
  margin-top: 4px;
  color: #6d7d72;
}

.role-notification-item b {
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d93636;
  color: #fff;
}

/* round9 지시서 B조 1)(2): [가구 관리]/[큐레이터 관리] 폴더 카드의
   하위 목록 버튼. .role-notification-item과 같은 레이아웃을 쓰되
   빨간 배지(b) 대신 "열기 →" 화살표라 별도 색 규칙만 얹는다. */
.role-folder-menu-open {
  color: var(--h24-accent-green, #173b28);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.role-profile-card {
  overflow: hidden;
}

.role-profile-card > div {
  min-height: 52px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #edf2ee;
}

.role-profile-card > div:last-child {
  border-bottom: 0;
}

.role-profile-card span {
  color: #6b7b70;
  font-size: 0.86rem;
}

.role-profile-card strong {
  min-width: 0;
  color: #183c29;
  overflow-wrap: anywhere;
}

.role-panel-note,
.role-panel-empty {
  margin: 12px 0;
  padding: 14px;
  color: #5f7265;
  line-height: 1.55;
}

.role-panel-action {
  width: 100%;
  min-height: 50px;
  margin-top: 9px;
  border: 0;
  border-radius: 15px;
  background: #2d7247;
  color: #fff;
  font-weight: 900;
}

body.role-cockpit-active .beta-demo-launcher,
body.role-cockpit-active #betaDemoLauncher {
  display: none !important;
}

@media (max-width: 820px) {
  body.role-cockpit-active .app-header {
    min-height: 58px;
    padding: 6px 9px !important;
  }

  body.role-cockpit-active .app-header .app-home-link > img {
    width: clamp(112px, 30vw, 156px) !important;
    max-height: 42px;
  }

  body.role-cockpit-active #happy24UserName {
    display: none;
  }

  body.role-cockpit-active .app-session {
    gap: 5px;
  }

  body.role-cockpit-active .app-session > button {
    min-height: 40px !important;
    height: 40px;
    padding: 6px 9px !important;
    font-size: 0.78rem !important;
  }

  .role-header-label {
    display: none;
  }

  .role-cockpit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  /* round9 B조 1)(2): 모바일은 이미 2열이라 카드 4장이면 2x2로 꼭
     맞는다 -- 4행 틀(최대 8장용) 중 아래 2행이 비는 것만 접는다. */
  .role-cockpit-grid.role-cockpit-grid-compact {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .role-cockpit-heading span {
    max-width: 58vw;
  }

  .role-cockpit-clock {
    display: none !important;
  }
}

@media (max-width: 520px) {
  body.role-cockpit-active .app-header .app-home-link > img {
    width: 98px !important;
  }

  /* round9-A조: 좁은 폰(≤520px)에서는 헤더에 마이페이지·알림·로그아웃
     외 버튼(정책 열람 등)을 숨기던 기존 규칙에 "내 담당"만 예외로
     추가한다 -- [내 담당]은 이 규칙에 걸려 좁은 폰에서 아예 열 방법이
     없어지는 것을 실측으로 확인했다(getComputedStyle로 display:none
     확인). 큐레이터가 실제로 쓰는 회사 지급 폰이 이 폭 대역이라
     (Blueprint 기준 390px), 숨기면 지시서 5번 "폴더 셋" 중 하나가
     통째로 막힌다. */
  body.role-cockpit-active .app-session > button:not(#happy24MyPageButton):not(#happy24NotificationButton):not(#happy24LogoutButton):not(#happy24MyCaseloadButton) {
    display: none !important;
  }

  body.role-cockpit-active #happy24MyPageButton {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .role-cockpit {
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    gap: 7px;
  }

  .role-cockpit-heading {
    gap: 7px;
  }

  .role-cockpit-heading h1 {
    font-size: clamp(1rem, 5vw, 1.25rem);
  }

  .role-cockpit-heading span {
    margin-top: 2px;
    max-width: 63vw;
    font-size: 0.66rem;
  }

  #roleCockpitRefresh {
    min-height: 38px;
    padding: 5px 8px;
    font-size: 0.72rem;
  }

  .role-cockpit-grid {
    gap: 7px;
  }

  .role-cockpit-card {
    padding: 8px;
    border-radius: 15px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 3px 6px;
  }

  .role-cockpit-icon {
    width: 31px;
    height: 31px;
    border-radius: 11px;
    font-size: 0.88rem;
  }

  .role-cockpit-copy strong {
    font-size: 0.84rem;
  }

  .role-cockpit-copy small {
    margin-top: 2px;
    font-size: 0.59rem;
  }

  .role-cockpit-count {
    min-width: 31px;
    height: 31px;
    padding: 0 5px;
    font-size: 0.74rem;
  }

  .role-cockpit-open {
    font-size: 0.59rem;
  }

  .role-cockpit-footer {
    gap: 5px;
    font-size: 0.6rem;
  }

  .role-cockpit-footer span:last-child {
    flex: 0 0 auto;
  }
}

@media (max-height: 660px) {
  .role-cockpit-heading span,
  .role-cockpit-footer span:first-child,
  .role-cockpit-open {
    display: none;
  }

  .role-cockpit-card {
    grid-template-rows: 1fr;
  }

  .role-cockpit-heading h1 {
    font-size: 1rem;
  }
}

/* =====================================================================
   2026-08-31 지시서(B조): 데스크톱(1024px 이상) 시범 적용.
   전체관리자 한 화면 관제 / 큐레이터 한 화면 업무판이 이 파일 하나를
   같이 쓴다(role-cockpit.js:14,43 -- 카드 내용만 역할별로 다르다).
   구조(grid-template-columns/areas, DOM)는 손대지 않는다 -- 색·글자·
   간격만 design-tokens.css 변수로 옮긴다. 900px/820px/520px 이하 모바일
   규칙은 위에 그대로 있고 이 블록은 1024px 이상에서만 적용되므로
   휴대폰 레이아웃(390×844)에는 영향이 없다. 큐레이터 화면 등급
   (18px 이상 본문 · 48px 이상 버튼, DESIGN_RULES 0장/design-tokens.css
   .h24-tier-curator)을 전체관리자 화면에도 그대로 쓴다 -- 두 화면이
   같은 DOM/클래스를 공유해 화면별로 등급을 나눌 hook이 없고(role
   attribute가 body/cockpit에 없음), 더 큰 쪽(큐레이터 등급)을 공용으로
   써도 어느 쪽 규칙도 어기지 않는다. ===================================================================== */
@media (min-width: 1024px) {
  .role-cockpit-heading p {
    color: var(--h24-accent-green, #173b28);
  }

  .role-cockpit-heading h1 {
    color: var(--h24-ink-strong, #17202a);
  }

  .role-cockpit-heading span {
    color: var(--h24-ink-muted, #55625b);
  }

  .role-cockpit-card {
    border-radius: var(--h24-radius-lg, 20px);
    box-shadow: var(--h24-shadow-sm, 0 2px 7px rgba(23, 43, 33, 0.07));
    color: var(--h24-ink-strong, #17202a);
  }

  .role-cockpit-icon {
    color: var(--h24-accent-green-action, #2d7247);
  }

  .role-cockpit-copy strong {
    font-size: var(--h24-t-sub, 18px);
  }

  .role-cockpit-copy small {
    color: var(--h24-ink-muted, #55625b);
    font-size: var(--h24-t-small, 14px);
  }

  /* 감사에서 지적된 "운영현황실시간 KPI·전체 진행0열기 →"처럼 붙어
     보이는 문제 -- "열기 →"를 위 내용과 구획을 나눠 분리한다. */
  .role-cockpit-open {
    margin-top: var(--h24-gap-8, 8px);
    padding-top: var(--h24-gap-8, 8px);
    border-top: 1px solid var(--h24-border, #dce3ed);
    color: var(--h24-accent-green-action, #2d7247);
    font-size: var(--h24-t-small, 14px);
  }

  .role-cockpit-footer {
    color: var(--h24-ink-muted, #55625b);
  }

  #roleCockpitRefresh,
  .role-header-action {
    min-height: var(--h24-btn-h, 48px);
  }

  .role-panel-action {
    min-height: var(--h24-btn-h, 48px);
    background: var(--h24-accent-green-action, #2d7247);
  }

  .role-panel-summary,
  .role-profile-card,
  .role-panel-note,
  .role-panel-empty,
  .role-notification-item {
    border-radius: var(--h24-radius-md, 14px);
    border-color: var(--h24-border, #dce3ed);
  }
}