/* 플랫폼 허브. 토큰 값은 PROJECT_KNOWLEDGE 8.2 와 동일하게 유지한다.
   허브는 얇은 독립 페이지라 회계 앱의 styles.css 를 끌어오지 않고, 색과 모서리 두 종류의
   8.2 토큰만 로컬 변수로 다시 선언한다. */
:root {
  /* 색·모서리의 원본은 이제 tokens.css 다(UR-133) — 허브 이름은 그대로 두고 값만 공용
     토큰에서 받아온다. 이렇게 해야 다음 모듈이 같은 옷을 입는다. */
  --hub-bg: var(--c-sunken);
  --hub-panel: var(--c-ground);
  --hub-line: var(--c-line);
  --hub-ink: var(--c-ink);
  --hub-text: var(--c-ink);
  --hub-muted: var(--c-muted);
  --hub-primary: var(--c-navy);
  --hub-success: var(--c-income);
  --hub-warn: #9a6700;
  --hub-radius-sm: 8px;
  --hub-radius-md: var(--r-card);
  --hub-radius-lg: 16px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--hub-bg);
  color: var(--hub-text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
}

a {
  color: inherit;
}

/* 포커스: 8.3 이 정한 주 색상 2px 외곽선 + 보조 링. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hub-primary);
  outline-offset: 2px;
  border-radius: var(--hub-radius-sm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hub-primary) 15%, transparent);
}

/* index.html·signup.html 과 같은 skip-link 패턴. 허브는 그 CSS 를 끌어오지 않으므로 여기서
   허브 로컬 토큰으로 다시 선언한다. */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  translate: 0 -160%;
  border-radius: var(--hub-radius-sm);
  background: var(--hub-ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
}

.skip-link:focus {
  translate: 0;
}

/* ---------- 헤더 ---------- */

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 32px;
  background: var(--hub-panel);
  border-bottom: 1px solid var(--hub-line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.hub-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.hub-brand strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--hub-ink);
}

.hub-brand-sub {
  display: block;
  font-size: 12px;
  color: var(--hub-muted);
}

/* 프로필 앞 헤더 텍스트 링크 — 항목이 하나뿐이라 별도 그룹으로 묶지 않고
   margin-left: auto 로 오른쪽에 붙인다(숨김 시 space-between 만으로 profile 이 오른쪽에 붙는다). */
.hub-hero-status {
  display: none;
}

.hub-admin-link {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: var(--hub-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--hub-primary);
  text-decoration: none;
}

.hub-admin-link:hover {
  background: color-mix(in srgb, var(--hub-primary) 8%, transparent);
}

/* 링크가 둘일 때(이용 가이드 + 플랫폼 관리) auto 마진은 첫 링크만 갖는다 —
   둘 다 가지면 남는 공간이 나뉘어 가이드 링크가 가운데로 떠 버린다. */
.hub-admin-link + .hub-admin-link {
  margin-left: 0;
}

.hub-profile {
  position: relative;
}

#profile-button {
  display: grid;
  grid-template-columns: 32px 1fr 10px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  font: inherit;
  color: var(--hub-ink);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

#profile-button:hover {
  /* 팔레트 제약: color-mix 는 토큰 하나 + transparent/panel 조합만 쓴다(라인 토큰과 섞지 않는다). */
  border-color: color-mix(in srgb, var(--hub-primary) 40%, transparent);
  background: color-mix(in srgb, var(--hub-primary) 4%, var(--hub-panel));
}

/* 아바타 자리표시자 — 서버가 이름 이니셜을 주지 않으므로 텍스트 없이 색 원으로만 표시한다. */
#profile-button::before {
  content: "";
  grid-row: 1 / 3;
  grid-column: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 팔레트 제약: 두 토큰을 직접 잇는 그라데이션도 그 사이 색을 만들어낸다 — 한 토큰을
     transparent 로 옅어지게만 한다. */
  background: linear-gradient(135deg, var(--hub-primary), color-mix(in srgb, var(--hub-primary) 55%, transparent));
}

#profile-button::after {
  content: "";
  grid-row: 1 / 3;
  grid-column: 3;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--hub-muted);
  border-bottom: 2px solid var(--hub-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

#profile-button[aria-expanded="true"]::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

#profile-name {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hub-profile-role {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  color: var(--hub-muted);
  white-space: nowrap;
}

.hub-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius-md);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--hub-ink) 12%, transparent);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

/* 위의 display:flex 가 hidden 속성의 UA display:none 보다 이기므로, 접힘은 이 규칙이 보증한다. */
.hub-profile-menu[hidden] {
  display: none;
}

/* 이용 가이드·플랫폼 관리는 폰에서만 이 메뉴에 산다 — 넓은 화면에서는 머리말에 그대로 있다. */
.hub-menu-narrow {
  display: none;
}

.hub-profile-menu a,
.hub-profile-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--hub-radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--hub-text);
  text-decoration: none;
  cursor: pointer;
}

.hub-profile-menu a:hover,
.hub-profile-menu button:hover {
  background: var(--hub-bg);
  color: var(--hub-ink);
}

.hub-profile-menu button {
  border-top: 1px solid var(--hub-line);
  margin-top: 2px;
  padding-top: 10px;
}

/* ---------- 본문 레이아웃 ---------- */

.hub-main {
  max-width: 1180px;
  margin: 0 auto;
  /* 히어로+카드 첫 줄이 노트북 한 화면에 들어오도록 세로 여백을 아낀다. */
  padding: 24px 32px 48px;
}

/* ---------- 히어로 ---------- */

.hub-hero {
  display: flex;
  align-items: stretch;
  gap: 32px;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius-lg);
  padding: 24px 28px;
}

.hub-hero-copy {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hub-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--hub-primary);
  background: color-mix(in srgb, var(--hub-primary) 10%, var(--hub-panel));
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0;
}

.hub-hero-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hub-primary);
}

.hub-hero h1 {
  color: var(--hub-ink);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 14px 0 0;
}

.hub-hero-sub {
  color: var(--hub-muted);
  font-size: 15px;
  max-width: 44ch;
  margin: 12px 0 0;
}

.hub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--hub-line);
}

.hub-stats > div {
  padding: 0 24px;
}

.hub-stats > div:first-child {
  padding-left: 0;
}

.hub-stats > div:not(:first-child) {
  border-left: 1px solid var(--hub-line);
}

.hub-stats dt {
  font-size: 12px;
  color: var(--hub-muted);
  margin: 0 0 6px;
  font-weight: 500;
}

.hub-stats dd {
  font-size: 22px;
  font-weight: 700;
  color: var(--hub-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* 지도풍 장식 — 외부 이미지 없이 그라데이션·반복 그라데이션 레이어만으로 구역 지도의
   인상을 만든다(격자 도로망 + 대각 도로 + 구역 거점 점). */
.hub-hero-art {
  flex: 1 1 320px;
  min-width: 260px;
  min-height: 170px;
  border-radius: var(--hub-radius-md);
  border: 1px solid var(--hub-line);
  background-image:
    radial-gradient(circle 5px at 24% 32%, var(--hub-primary) 97%, transparent 100%),
    radial-gradient(circle 5px at 66% 20%, var(--hub-success) 97%, transparent 100%),
    radial-gradient(circle 5px at 80% 64%, var(--hub-warn) 97%, transparent 100%),
    radial-gradient(circle 5px at 38% 76%, var(--hub-primary) 97%, transparent 100%),
    linear-gradient(120deg, transparent 44%, color-mix(in srgb, var(--hub-panel) 85%, transparent) 49% 55%, transparent 60%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--hub-line) 65%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--hub-line) 65%, transparent) 0 1px, transparent 1px 56px),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--hub-primary) 20%, transparent), transparent 45%),
    radial-gradient(circle at 12% 84%, color-mix(in srgb, var(--hub-success) 16%, transparent), transparent 42%),
    linear-gradient(155deg, color-mix(in srgb, var(--hub-primary) 8%, transparent), var(--hub-bg) 65%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---------- 서비스 카드 ---------- */

.hub-todo {
  margin-top: 24px;
}

.hub-todo h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--hub-ink);
  margin: 0 0 12px;
}

.hub-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.hub-todo-item {
  display: grid;
  gap: 2px;
  padding: 12px 16px 12px 20px;
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius-md);
  background: var(--hub-panel);
  color: var(--hub-text);
  text-decoration: none;
  position: relative;
}

.hub-todo-item:hover,
.hub-todo-item:focus-visible {
  border-color: var(--hub-primary);
}

/* 급한 것(결재 차례 · 보완요청 · 법정 기한 초과)은 왼쪽 띠로 가른다. 색만으로 말하지 않게 글에도 이유가 있다. */
.hub-todo-item.is-urgent::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 8px;
  width: 4px;
  border-radius: 2px;
  background: var(--c-seal);
}

.hub-todo-item strong {
  font-size: 15px;
  word-break: keep-all;
}

.hub-todo-item span,
.hub-todo-empty {
  font-size: 13px;
  color: var(--hub-muted);
  word-break: keep-all;
}

.hub-todo-empty {
  padding: 12px 16px;
  border: 1px dashed var(--hub-line);
  border-radius: var(--hub-radius-md);
}

.hub-services {
  margin-top: 24px;
}

.hub-services h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--hub-ink);
  margin: 0 0 16px;
}

.hub-services-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--hub-muted);
}

.hub-cards {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(2, 1fr);
  /* 대형 카드가 여러 줄을 관통하면 전체가 한 화면을 넘는다 — 2줄 평탄 배치로 세로를 아낀다. */
  grid-template-areas:
    "primary c2 c3"
    "c4 c5 c6";
  gap: 16px;
}

/* 자리는 hub.js 가 카드에 찍어 준 이름으로 잡는다 — 폰에서 묶음 제목('바로 시작'·'준비 중')이
   카드 사이에 끼기 때문에 DOM 순서(nth-child)로는 한 칸씩 밀린다. */
.hub-cards > [data-slot="primary"] { grid-area: primary; }
.hub-cards > [data-slot="c2"] { grid-area: c2; }
.hub-cards > [data-slot="c3"] { grid-area: c3; }
.hub-cards > [data-slot="c4"] { grid-area: c4; }
.hub-cards > [data-slot="c5"] { grid-area: c5; }
.hub-cards > [data-slot="c6"] { grid-area: c6; }

/* 묶음 제목과 카드 앞 네모는 폰에서만 쓴다. */
.hub-group-label,
.hub-card-mark {
  display: none;
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hub-panel);
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius-md);
  padding: 20px;
  color: inherit;
  text-decoration: none;
}

.hub-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--hub-ink);
  margin: 0 0 8px;
}

.hub-card p {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--hub-text);
  margin: 0 0 16px;
}

/* 준비 중 카드는 <article> 이라 상호작용이 없다 — 커서·호버로 클릭 가능성을 암시하지 않는다. */
article.hub-card {
  cursor: default;
}

a.hub-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--hub-ink) 10%, transparent);
  /* 팔레트 제약: color-mix 는 토큰 하나 + transparent/panel 조합만 쓴다(라인 토큰과 섞지 않는다). */
  border-color: color-mix(in srgb, var(--hub-primary) 45%, transparent);
}

.hub-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.hub-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hub-badge-available {
  color: var(--hub-success);
  background: color-mix(in srgb, var(--hub-success) 12%, var(--hub-panel));
}

.hub-badge-preparing {
  color: var(--hub-muted);
  background: color-mix(in srgb, var(--hub-muted) 10%, var(--hub-panel));
}

.hub-badge-denied {
  color: var(--hub-muted);
  background: color-mix(in srgb, var(--hub-muted) 10%, var(--hub-panel));
}


/* ---------- 반응형 ---------- */

@media (max-width: 980px) {
  .hub-main {
    padding: 20px 20px 40px;
  }

  .hub-hero {
    flex-direction: column;
    padding: 24px;
  }

  /* 세로로 세우면 flex-basis 420px 가 폭이 아니라 '높이'로 읽혀 글 아래에 빈 420px 가 생긴다. */
  .hub-hero-copy {
    flex: 0 0 auto;
  }

  .hub-hero-art {
    flex: 0 0 auto;
    min-height: 180px;
  }

  .hub-cards {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "primary primary"
      "c2 c3"
      "c4 c5"
      "c6 c6";
  }
}

/* ---------- 폰(≤640) — 시안 A(2026-09-17 사용자 결정) ----------
   넓은 화면 배치를 눌러 놓는 대신 폰의 배치를 따로 짠다. 머리말은 한 줄, 첫 줄은 지금 상태,
   서비스는 '바로 시작' 둘과 '준비 중' 넷으로 갈라 놓는다(준비 중도 접지 않고 편 채로 둔다). */
@media (max-width: 640px) {
  /* 머리말: 브랜드 + 프로필 한 줄. 링크 둘은 프로필 메뉴로 내린다 — 넷이 한 줄에 못 들어가
     접히면서 세로 두 줄을 먹고 한글이 글자 단위로 쪼개졌다(UR-133 에서 줄바꿈으로 막았던 자리). */
  .hub-header {
    gap: 10px;
    padding: 10px 16px;
  }

  .hub-brand-sub,
  .hub-admin-link {
    display: none;
  }

  .hub-brand strong,
  .hub-profile button {
    white-space: nowrap;
  }

  .hub-menu-narrow {
    display: block;
  }

  .hub-profile {
    margin-left: auto;
  }

  /* 이름 아래 권한을 함께 둔다 — 폰에서는 이름만 보여서 지금 어떤 권한으로 들어와 있는지
     알 수 없었다(9월 22일 피드백 6항). 메뉴를 열어야 아는 값이면 없는 값과 같다. */
  #profile-button {
    grid-template-columns: 26px auto 10px;
    column-gap: 8px;
    padding: 4px 12px 4px 4px;
  }

  #profile-button::before {
    grid-row: 1 / span 2;
    width: 26px;
    height: 26px;
  }

  #profile-button::after {
    grid-row: 1 / span 2;
  }

  #profile-name {
    font-size: 12px;
  }

  .hub-profile-role {
    font-size: 10px;
  }

  .hub-main {
    padding: 14px 16px 32px;
  }

  /* 머리 문단: 장식 그림과 안내 문구를 걷고 상태 한 줄만 남긴다 — 폰 첫 화면에 누를 것이 없었다. */
  .hub-hero {
    /* flex 세로 배치에서는 .hub-hero-copy 의 flex-basis 420px 가 높이로 읽혀 빈 상자가 생긴다. */
    display: grid;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .hub-hero-copy {
    display: grid;
    gap: 12px;
    /* 넓은 화면에서 세로 가운데를 맞추던 justify-content 가 그리드에서는 열을 가로로 모은다. */
    justify-content: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .hub-hero-art,
  .hub-hero-eyebrow,
  .hub-hero-sub {
    display: none;
  }

  .hub-hero h1 {
    font-size: 21px;
    line-height: 1.3;
  }

  .hub-hero.is-ready .hub-hero-line {
    display: none;
  }

  .hub-hero.is-ready .hub-hero-status {
    display: block;
  }

  /* 폰에서는 첫 줄이 이미 '지금 할 일 N가지'라고 말한다 — 바로 아래 목록 제목이 같은 말을 되풀이했다. */
  .hub-hero.is-ready ~ .hub-todo h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* 숫자 셋: 칸 나눔이 45% 라 2 + 1 로 접혔다. 세 칸을 같은 폭 타일로 한 줄에 놓는다. */
  .hub-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  .hub-stats > div {
    padding: 10px 12px;
    border: 0;
    border-radius: var(--hub-radius-md);
    background: var(--hub-panel);
    box-shadow: var(--shadow-card);
  }

  /* 넓은 화면의 '.hub-stats > div:first-child { padding-left: 0 }' 이 특이도로 위 규칙을 이겨
     첫 타일만 글자가 왼쪽 끝에 붙었다(2026-09-17). 타일이 된 폰에서는 세 칸이 같은 안쪽 여백을 쓴다. */
  .hub-stats > div:first-child {
    padding-left: 12px;
  }

  .hub-stats > div:not(:first-child) {
    border-left: 0;
  }

  .hub-stats dd {
    font-size: 19px;
  }

  /* 서비스: 한 줄씩 늘어선 큰 카드 여섯 대신, 쓸 수 있는 둘과 준비 중 넷을 갈라 놓는다. */
  .hub-services > h2 {
    display: none;
  }

  .hub-cards {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 8px;
  }

  .hub-cards > [data-slot] {
    grid-area: auto;
  }

  .hub-group-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 10px 2px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-faint);
  }

  .hub-group-label:first-child {
    margin-top: 0;
  }

  .hub-group-label small {
    font-weight: 400;
  }

  /* 바로 시작 — 이름 두 글자 네모 · 제목 · 한 줄 설명 · 화살표. */
  .hub-card-available {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 12px;
    padding: 14px;
  }

  .hub-card-available .hub-card-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--c-navy-soft);
    color: var(--hub-primary);
    font-size: 13px;
    font-weight: 700;
  }

  .hub-card-available h3 {
    grid-column: 2;
    margin: 0;
    font-size: 15px;
  }

  .hub-card-available p {
    grid-column: 2;
    margin: 2px 0 0;
    font-size: 12px;
  }

  .hub-card-available::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / 3;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--c-faint);
    border-right: 2px solid var(--c-faint);
    transform: rotate(45deg);
  }

  /* 사용 가능은 카드 자체가 곧 '누를 수 있음'이라 배지를 겹쳐 적지 않는다. */
  .hub-card-available .hub-badge {
    display: none;
  }

  /* 준비 중 — 펼친 채로 두되(2026-09-17 결정) 한 줄 높이로 눌러, 쓸 수 있는 둘과 무게를 가른다. */
  .hub-card-preparing,
  .hub-card-denied {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: none;
    box-shadow: none;
    border: 1px solid var(--hub-line);
  }

  .hub-card-preparing::before,
  .hub-card-denied::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hub-line);
  }

  .hub-card-preparing h3,
  .hub-card-denied h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hub-muted);
  }

  .hub-card-preparing p,
  .hub-card-denied p {
    grid-column: 2;
    margin: 1px 0 0;
    font-size: 11.5px;
  }

  .hub-card-preparing .hub-badge,
  .hub-card-denied .hub-badge {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}