/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* @import는 모든 규칙보다 앞에 위치해야 한다 (postcss-import 요구사항).
   styles/shared/ 는 참조 프론트(fastapi/frontend)에서 sync-shared-ui 로 미러링(robocopy /MIR) 되는
   구역 — 직접 수정 금지. styles/admin|site/ 는 raingift 소유 레시피 층. */
/* 아래 8개는 원래 styles/shared/ 에 있었지만 **참조 프론트에서 이미 사라진 고아 미러**였다
   (참조 styles/ 에는 responsive.css·utilities.css 만 남았고, 범용 클래스는 @ops/ui/styles.css 로
   이관됐다). 미러 구역에 두면 다음 sync 때 robocopy /MIR 이 통째로 지워 globals.css 가 깨진다.
   raingift 는 @ops/ui/styles.css 를 의도적으로 미도입(styles/shared 와 이중 정의)하므로 이 사본이
   정본이다 — .card 는 벤더링된 components/ui/layout/card-container 가, tbl-*·btn-*·input-field 는
   나머지 components/ui/** 가 쓴다. 이제 raingift 소유이므로 여기서 고쳐도 된다. */
/* ⚠ 이 파일은 참조 프론트에서 더 이상 배포되지 않는다(고아 미러) — raingift 가 사실상 소유.
   자세한 경위는 docs/superpowers/plans/2026-09/theme-scope-and-palette-hierarchy.md §중복 토큰. */
/* 벤더 @ops/ui 섹션 헤더·페이지네이션 바 (raingift 소유). 색은 시맨틱 토큰. */
/* 벤더 @ops/ui 레이아웃 유틸 (raingift 소유). 색·라운드는 시맨틱 토큰. */
/* 벤더 @ops/ui 컨트롤 + 관리자 화면이 쓰는 버튼 레시피 (raingift 소유 — 참조에서 사라진 고아 사본).
 * 색·라운드는 시맨틱 토큰으로 쓴다. 관리자는 globals.css 의 `body:has([data-admin-root])` 가
 * 토큰을 라이트/인디고로 고정하므로 화면은 하드코딩하던 때와 같다. */
/* 벤더 @ops/ui 컨트롤 + 관리자 화면이 쓰는 폼 레시피 (raingift 소유). 색·라운드는 시맨틱 토큰. */
/* 벤더 @ops/ui 테이블 + 관리자 화면 테이블 레시피 (raingift 소유). 색은 시맨틱 토큰.
 * gray/slate 두 계열로 나뉘어 있던 변형(-gray / -slate 접미)은 토큰화하면 같은 값이 되지만,
 * 호출부가 클래스명으로 구분해 쓰고 있어 이름은 유지한다 — 이름만 남은 별칭이다. */
/* 벤더 @ops/ui 팝오버·통계 카드 레시피 (raingift 소유). 색·라운드는 시맨틱 토큰. */
/* react-day-picker 변수 override — .rdp-root 스코프에서 덮어써야 cascade 적용.
   rdp 는 자체 CSS 변수만 받고 tailwind 유틸을 못 받는다 → 토큰을 rgb() 로 풀어 넣는다. */
.rdp-picker .rdp-root {
  --rdp-accent-color:            rgb(var(--color-brand));
  --rdp-accent-background-color: rgb(var(--color-brand-light));
  --rdp-day-height:              36px;
  --rdp-day-width:               36px;
  --rdp-day_button-height:       34px;
  --rdp-day_button-width:        34px;
  --rdp-nav_button-height:       2rem;
  --rdp-nav_button-width:        2rem;
}
.rdp-picker [data-outside] .rdp-day_button {
  background-color: rgb(var(--color-line-strong) / 0.96);
}
.rdp-picker [data-outside]:hover .rdp-day_button {
  background-color: rgb(var(--color-line-strong) / 0.75);
}
/* 관리자 설명(가이드) 탭 본문 레시피 (raingift 소유). 색은 시맨틱 토큰. */
/* 반응형 오버라이드는 위 레시피들을 덮어야 하므로 **마지막** (미러 구역 잔류 파일) */
/* 반응형 오버라이드 — 현재 서비스는 데스크톱 전용
 * 모바일·태블릿 대응이 필요할 때 @media 규칙을 여기에 추가한다 */
/* 관리자 콘솔 레시피(adm-*)는 styles/admin/index.css — admin 레이아웃 전용 import
   (전 라우트 공통 페이로드에서 분리, web-optimization-refactor §4.3) */
/* raingift 회원 화면 레시피 (site) — 레이아웃 축별 변주 포함 */
/* 구성 축 cardVariant 레시피 (theme-axis-system 축 7).
 *
 * 스코프는 <html data-card="…"> — 테마 이름이 아니라 **옵션 값**이 셀렉터다.
 * `[data-layout="<이름>"]` 분기를 새로 만들지 않는다는 계약을 지키면서, 카드 표면 처리만
 * 선언형으로 바꾼다. 값은 관리자 오버라이드(layout.override.cardVariant)로도 바뀐다.
 *
 * 대상은 .theme-card 를 붙인 코어 상품 카드. 테마가 ProductCard 슬롯을 오버라이드하면
 * 자기 표면 처리를 소유하므로 이 레시피 대상이 아니다(클래스를 붙이지 않으면 그만).
 * plain(기본)은 규칙 없음 — 현행 화면 그대로.
 */
/* 이미지 축 media-fit — tailwind objectFit 은 theme 확장 대상이 아니라 클래스로 낸다.
 * 레터박스가 필요한 테마(SVG 기프트카드 등)가 --media-fit: contain 으로 바꾼다. */
.object-media {
  -o-object-fit: var(--media-fit, cover);
     object-fit: var(--media-fit, cover);
}
[data-card="framed"] .theme-card {
  border-width: var(--border-width, 1px);
  border-style: solid;
  border-color: rgb(var(--color-line));
}
[data-card="tile"] .theme-card {
  background-color: rgb(var(--color-bg));
}
/* 타일은 면 분리로 읽히므로 그림자를 얹지 않는다 (이중 강조 방지) */
[data-card="tile"] .theme-card {
  box-shadow: none;
}
/* 테마 canvas 축(축 8) — 폴백·스크림 레시피.
 *
 * 색은 전부 토큰이다. 여기에 색 리터럴을 쓰면 테마를 갈아도 배경이 안 바뀐다.
 * 폴백은 "canvas 가 없을 때 대신 보이는 그림"이자 canvas 아래 기본 레이어다 —
 * 정지 조건(모바일·저사양)에서 화면이 비지 않게 한다.
 */
/* 마이페이지 레시피 (mp-*) — 회원 화면, raingift 소유 (styles/site/).
   팔레트·radius·font 토큰은 공통 자동 반영 — 여기는 레이아웃 축([data-layout])별
   구조·질감 차별화만 담는다 (mypage-uiux-improvement 계획서 Phase 1b). */
/* 솔루션 소개 페이지(/solution) 전용 레시피.
   Tailwind 로 표현이 어려운 것만 둔다 — 좌측 원장 레일, 대조 행 등장 순서.
   색은 전부 시맨틱 토큰 경유 (테마 교체에 따라감). */
/* 섹션 앵커 레일 — 데스크톱에서만 본문 왼쪽에 붙어 따라온다 */
.sol-band {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 2.5rem;
  padding: 4.5rem 0;
  border-bottom: 1px solid rgb(var(--color-line));
}
.sol-rail {
  position: sticky;
  top: 2rem;
  align-self: start;
  border-top: 2px solid rgb(var(--color-brand));
  padding-top: 0.6rem;
}
@media (max-width: 860px) {
  .sol-band {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 0;
  }

  .sol-rail {
    position: static;
  }
}
/* 대조 행 — 왼쪽(사고)이 먼저 읽히고 오른쪽(응답)이 따라 채워진다 */
@media (prefers-reduced-motion: no-preference) {
  .sol-reveal .sol-guard {
    opacity: 0;
    transform: translateY(6px);
  }

  .sol-reveal[data-in="1"] .sol-guard {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .sol-reveal[data-in="1"] .sol-row:nth-child(2) .sol-guard { transition-delay: 0.08s; }
  .sol-reveal[data-in="1"] .sol-row:nth-child(3) .sol-guard { transition-delay: 0.16s; }
  .sol-reveal[data-in="1"] .sol-row:nth-child(4) .sol-guard { transition-delay: 0.24s; }
  .sol-reveal[data-in="1"] .sol-row:nth-child(5) .sol-guard { transition-delay: 0.32s; }
}
/* 본문 강조 — 브랜드색 하이라이터 (밑줄보다 조용하다) */
.sol-key {
  font-style: normal;
  font-weight: 700;
  color: rgb(var(--color-text));
  box-shadow: inset 0 -0.42em 0 rgb(var(--color-brand) / 0.18);
}
/* 테마 팩 토큰 — 전부 themes/<id>/definition.ts 에서 생성된 파일이다(npm run gen:theme-css).
   활성값은 <html data-layout / data-palette> 2축 셀렉터로 결정 (§4.11).
   폴백 테마(gift24)만 :root 를 함께 내 — data-* 가 없는 문서가 상속할 기본값.
   신규 팩은 여기 @import 한 줄 + scripts/gen-theme-css.mjs THEMES 에 추가. */
/* 자동 생성 — 편집 금지. 정본: themes/gift24/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
:root,
[data-palette="gift24"] {
  color-scheme: light;
  --color-brand: 79 70 229;
  --color-brand-dark: 67 56 202;
  --color-brand-light: 238 242 255;
  --color-brand-wash: 234 234 246;
  --color-brand-text: 79 70 229;
  --color-brand-on: 255 255 255;
  --color-accent: 244 63 94;
  --color-accent-on: 255 255 255;
  --color-bg: 249 250 251;
  --color-surface: 255 255 255;
  --color-surface-2: 248 250 252;
  --color-surface-3: 241 245 249;
  --color-text: 17 24 39;
  --color-text-2: 71 85 105;
  --color-muted: 107 114 128;
  --color-muted-2: 107 114 128;
  --color-line: 229 231 235;
  --color-line-soft: 248 250 252;
  --color-line-strong: 229 231 235;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
:root,
[data-layout="gift24"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 1rem);
  --gap-section: calc(var(--space-unit) * 3rem);
  --pad-card: calc(var(--space-unit) * 0.875rem);
  --pad-card-top: calc(var(--space-unit) * 0.75rem);
  --pad-card-bottom: calc(var(--space-unit) * 1rem);
  --pad-gutter: calc(var(--space-unit) * 1rem);
  --pad-block: calc(var(--space-unit) * 2rem);
  --row-height: calc(var(--space-unit) * 2.75rem);
  --radius-card: 0.75rem;
  --radius-control: 0.5rem;
  --radius-chip: 9999px;
  --radius-image: 0.75rem;
  --radius-avatar: 9999px;
  --border-width: 1px;
  --font-display: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.125;
  --size-title: 1.25rem;
  --leading-title: 1.75rem;
  --size-price: 1.125rem;
  --leading-price: 1.75rem;
  --size-name: 0.875rem;
  --leading-name: 1.25rem;
  --weight-price: 700;
  --tracking-title: -0.025em;
  --media-ratio-card: 4 / 3;
  --media-ratio-hero: 16 / 9;
  --media-fit: cover;
  --shadow-card: none;
  --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --hover-lift: 0.25rem;
  --transition-speed: 300ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/mono/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="mono"] {
  color-scheme: light;
  --color-brand: 23 23 23;
  --color-brand-dark: 0 0 0;
  --color-brand-light: 245 245 245;
  --color-brand-wash: 240 240 240;
  --color-brand-text: 23 23 23;
  --color-brand-on: 255 255 255;
  --color-accent: 217 119 6;
  --color-accent-on: 255 255 255;
  --color-bg: 252 252 250;
  --color-surface: 255 255 255;
  --color-surface-2: 250 250 250;
  --color-surface-3: 244 244 245;
  --color-text: 23 23 23;
  --color-text-2: 64 64 64;
  --color-muted: 115 115 115;
  --color-muted-2: 82 82 82;
  --color-line: 23 23 23;
  --color-line-soft: 229 229 229;
  --color-line-strong: 23 23 23;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
[data-layout="mono"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 1.75rem);
  --gap-section: calc(var(--space-unit) * 5rem);
  --pad-card: calc(var(--space-unit) * 1.125rem);
  --pad-card-top: calc(var(--space-unit) * 1rem);
  --pad-card-bottom: calc(var(--space-unit) * 1.25rem);
  --pad-gutter: calc(var(--space-unit) * 1.5rem);
  --pad-block: calc(var(--space-unit) * 3.5rem);
  --row-height: calc(var(--space-unit) * 3rem);
  --radius-card: 0.125rem;
  --radius-control: 0.125rem;
  --radius-chip: 0.125rem;
  --radius-image: 0.125rem;
  --radius-avatar: 0.125rem;
  --border-width: 2px;
  --font-display: Georgia, "Nanum Myeongjo", "Noto Serif KR", serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.25;
  --size-title: 1.75rem;
  --leading-title: 2.25rem;
  --size-price: 0.875rem;
  --leading-price: 1.25rem;
  --size-name: 1rem;
  --leading-name: 1.5rem;
  --weight-price: 600;
  --tracking-title: 0.05em;
  --media-ratio-card: 3 / 4;
  --media-ratio-hero: 3 / 2;
  --media-fit: cover;
  --shadow-card: none;
  --shadow-hover: none;
  --hover-lift: 0rem;
  --transition-speed: 200ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/noir/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="noir"] {
  color-scheme: dark;
  --color-brand: 212 175 55;
  --color-brand-dark: 184 148 31;
  --color-brand-light: 41 37 36;
  --color-brand-wash: 46 41 25;
  --color-brand-text: 212 175 55;
  --color-brand-on: 17 24 39;
  --color-accent: 251 191 36;
  --color-accent-on: 17 24 39;
  --color-bg: 12 10 9;
  --color-surface: 28 25 23;
  --color-surface-2: 41 37 36;
  --color-surface-3: 68 64 60;
  --color-text: 245 245 244;
  --color-text-2: 214 211 209;
  --color-muted: 168 162 158;
  --color-muted-2: 168 162 158;
  --color-line: 68 64 60;
  --color-line-soft: 41 37 36;
  --color-line-strong: 87 83 78;
  --color-alert-bg: 69 10 10;
  --color-alert-bg-hover: 87 13 13;
  --color-alert-text: 248 113 113;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 127 29 29;
  --color-ok-text: 52 211 153;
  --color-ok-bg: 6 78 59;
  --color-warn-text: 252 211 77;
  --color-warn-bg: 69 46 5;
  --color-info-text: 125 211 252;
  --color-info-bg: 12 42 66;
}
[data-layout="noir"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 2rem);
  --gap-section: calc(var(--space-unit) * 6rem);
  --pad-card: calc(var(--space-unit) * 1.25rem);
  --pad-card-top: calc(var(--space-unit) * 1.125rem);
  --pad-card-bottom: calc(var(--space-unit) * 1.5rem);
  --pad-gutter: calc(var(--space-unit) * 2rem);
  --pad-block: calc(var(--space-unit) * 4rem);
  --row-height: calc(var(--space-unit) * 3.25rem);
  --radius-card: 1rem;
  --radius-control: 0.5rem;
  --radius-chip: 9999px;
  --radius-image: 1rem;
  --radius-avatar: 9999px;
  --border-width: 1px;
  --font-display: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.2;
  --size-title: 1.375rem;
  --leading-title: 1.875rem;
  --size-price: 1.25rem;
  --leading-price: 1.75rem;
  --size-name: 0.9375rem;
  --leading-name: 1.375rem;
  --weight-price: 500;
  --tracking-title: 0.08em;
  --media-ratio-card: 4 / 5;
  --media-ratio-hero: 21 / 9;
  --media-fit: cover;
  --shadow-card: none;
  --shadow-hover: 0 8px 30px -12px rgb(212 175 55 / 0.35);
  --hover-lift: 0.125rem;
  --transition-speed: 500ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/aurora/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="aurora"] {
  color-scheme: light;
  --color-brand: 178 35 199;
  --color-brand-dark: 139 28 156;
  --color-brand-light: 253 236 255;
  --color-brand-wash: 244 234 246;
  --color-brand-text: 136 44 150;
  --color-brand-on: 255 255 255;
  --color-accent: 251 113 133;
  --color-accent-on: 17 24 39;
  --color-bg: 253 250 255;
  --color-surface: 255 255 255;
  --color-surface-2: 250 245 255;
  --color-surface-3: 243 232 255;
  --color-text: 35 22 45;
  --color-text-2: 82 60 96;
  --color-muted: 128 106 143;
  --color-muted-2: 112 92 126;
  --color-line: 236 226 243;
  --color-line-soft: 248 243 252;
  --color-line-strong: 224 209 235;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
[data-layout="aurora"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 1.25rem);
  --gap-section: calc(var(--space-unit) * 3.5rem);
  --pad-card: calc(var(--space-unit) * 1rem);
  --pad-card-top: calc(var(--space-unit) * 0.875rem);
  --pad-card-bottom: calc(var(--space-unit) * 1.125rem);
  --pad-gutter: calc(var(--space-unit) * 1.25rem);
  --pad-block: calc(var(--space-unit) * 2.5rem);
  --row-height: calc(var(--space-unit) * 3rem);
  --radius-card: 1.25rem;
  --radius-control: 9999px;
  --radius-chip: 9999px;
  --radius-image: 1.25rem;
  --radius-avatar: 9999px;
  --border-width: 1px;
  --font-display: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.15;
  --size-title: 1.375rem;
  --leading-title: 1.875rem;
  --size-price: 1.0625rem;
  --leading-price: 1.5rem;
  --size-name: 0.875rem;
  --leading-name: 1.25rem;
  --weight-price: 700;
  --tracking-title: -0.02em;
  --media-ratio-card: 5 / 6;
  --media-ratio-hero: 16 / 9;
  --media-fit: cover;
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-hover: 0 18px 30px -18px rgb(178 35 199 / 0.5);
  --hover-lift: 0.375rem;
  --transition-speed: 300ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/bento/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="bento"] {
  color-scheme: light;
  --color-brand: 16 190 89;
  --color-brand-dark: 5 150 70;
  --color-brand-light: 209 250 224;
  --color-brand-wash: 234 246 239;
  --color-brand-text: 10 122 57;
  --color-brand-on: 17 24 39;
  --color-accent: 245 158 11;
  --color-accent-on: 17 24 39;
  --color-bg: 243 244 246;
  --color-surface: 255 255 255;
  --color-surface-2: 249 250 251;
  --color-surface-3: 243 244 246;
  --color-text: 17 24 39;
  --color-text-2: 55 65 81;
  --color-muted: 104 108 114;
  --color-muted-2: 75 85 99;
  --color-line: 229 231 235;
  --color-line-soft: 243 244 246;
  --color-line-strong: 209 213 219;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
[data-layout="bento"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 0.5rem);
  --gap-section: calc(var(--space-unit) * 2rem);
  --pad-card: calc(var(--space-unit) * 0.625rem);
  --pad-card-top: calc(var(--space-unit) * 0.5rem);
  --pad-card-bottom: calc(var(--space-unit) * 0.75rem);
  --pad-gutter: calc(var(--space-unit) * 0.75rem);
  --pad-block: calc(var(--space-unit) * 1.5rem);
  --row-height: calc(var(--space-unit) * 2.5rem);
  --radius-card: 1.5rem;
  --radius-control: 0.75rem;
  --radius-chip: 0.75rem;
  --radius-image: 1.5rem;
  --radius-avatar: 1rem;
  --border-width: 1px;
  --font-display: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.1;
  --size-title: 1.125rem;
  --leading-title: 1.625rem;
  --size-price: 0.9375rem;
  --leading-price: 1.375rem;
  --size-name: 0.8125rem;
  --leading-name: 1.125rem;
  --weight-price: 800;
  --tracking-title: -0.03em;
  --media-ratio-card: 3 / 2;
  --media-ratio-hero: 2 / 1;
  --media-fit: cover;
  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-hover: none;
  --hover-lift: 0rem;
  --transition-speed: 200ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/market/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="market"] {
  color-scheme: light;
  --color-brand: 255 108 8;
  --color-brand-dark: 196 76 0;
  --color-brand-light: 255 237 224;
  --color-brand-wash: 246 239 234;
  --color-brand-text: 179 72 0;
  --color-brand-on: 17 24 39;
  --color-accent: 20 184 166;
  --color-accent-on: 17 24 39;
  --color-bg: 255 252 248;
  --color-surface: 255 255 255;
  --color-surface-2: 250 250 250;
  --color-surface-3: 245 245 245;
  --color-text: 33 33 33;
  --color-text-2: 66 66 66;
  --color-muted: 112 112 112;
  --color-muted-2: 97 97 97;
  --color-line: 235 235 235;
  --color-line-soft: 247 247 247;
  --color-line-strong: 219 219 219;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
[data-layout="market"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 0.625rem);
  --gap-section: calc(var(--space-unit) * 2.25rem);
  --pad-card: calc(var(--space-unit) * 0.5rem);
  --pad-card-top: calc(var(--space-unit) * 0.5rem);
  --pad-card-bottom: calc(var(--space-unit) * 0.625rem);
  --pad-gutter: calc(var(--space-unit) * 0.75rem);
  --pad-block: calc(var(--space-unit) * 1.75rem);
  --row-height: calc(var(--space-unit) * 2.5rem);
  --radius-card: 0.5rem;
  --radius-control: 0.5rem;
  --radius-chip: 9999px;
  --radius-image: 0.5rem;
  --radius-avatar: 9999px;
  --border-width: 1px;
  --font-display: system-ui, "Pretendard Variable", Pretendard, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.12;
  --size-title: 1.1875rem;
  --leading-title: 1.625rem;
  --size-price: 1rem;
  --leading-price: 1.375rem;
  --size-name: 0.8125rem;
  --leading-name: 1.125rem;
  --weight-price: 700;
  --tracking-title: -0.01em;
  --media-ratio-card: 5 / 4;
  --media-ratio-hero: 16 / 9;
  --media-fit: cover;
  --shadow-card: none;
  --shadow-hover: 0 4px 10px -4px rgb(0 0 0 / 0.15);
  --hover-lift: 0.125rem;
  --transition-speed: 250ms;
}
/* 자동 생성 — 편집 금지. 정본: themes/bazaar/definition.ts
 * 재생성: npm run gen:theme-css / 검사: npm run lint:theme */
[data-palette="bazaar"] {
  color-scheme: light;
  --color-brand: 8 141 224;
  --color-brand-dark: 0 110 184;
  --color-brand-light: 224 241 255;
  --color-brand-wash: 234 241 246;
  --color-brand-text: 6 108 172;
  --color-brand-on: 255 255 255;
  --color-accent: 220 38 38;
  --color-accent-on: 255 255 255;
  --color-bg: 247 248 250;
  --color-surface: 255 255 255;
  --color-surface-2: 245 246 248;
  --color-surface-3: 238 240 244;
  --color-text: 17 24 39;
  --color-text-2: 55 65 81;
  --color-muted: 104 108 114;
  --color-muted-2: 75 85 99;
  --color-line: 223 226 231;
  --color-line-soft: 241 243 245;
  --color-line-strong: 203 208 214;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
}
[data-layout="bazaar"] {
  --space-unit: 1;
  --gap-grid: calc(var(--space-unit) * 0.375rem);
  --gap-section: calc(var(--space-unit) * 1.25rem);
  --pad-card: calc(var(--space-unit) * 0.375rem);
  --pad-card-top: calc(var(--space-unit) * 0.375rem);
  --pad-card-bottom: calc(var(--space-unit) * 0.5rem);
  --pad-gutter: calc(var(--space-unit) * 0.5rem);
  --pad-block: calc(var(--space-unit) * 1rem);
  --row-height: calc(var(--space-unit) * 2.25rem);
  --radius-card: 0.375rem;
  --radius-control: 0.25rem;
  --radius-chip: 0.25rem;
  --radius-image: 0.25rem;
  --radius-avatar: 0.25rem;
  --border-width: 1px;
  --font-display: system-ui, "Pretendard Variable", Pretendard, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --scale-ratio: 1.05;
  --size-title: 1.0625rem;
  --leading-title: 1.5rem;
  --size-price: 1.375rem;
  --leading-price: 1.75rem;
  --size-name: 0.75rem;
  --leading-name: 1.0625rem;
  --weight-price: 800;
  --tracking-title: -0.03em;
  --media-ratio-card: 1 / 1;
  --media-ratio-hero: 3 / 1;
  --media-fit: cover;
  --shadow-card: none;
  --shadow-hover: 0 2px 8px -2px rgb(0 0 0 / 0.18);
  --hover-lift: 0rem;
  --transition-speed: 150ms;
}
/* @ops/ui 는 market·bazaar 의 **컴포넌트**(셸·카드)만 제공한다 — 테마 토큰 CSS 는 미도입.
   7팩 정리(theme-consolidation-7)에서 토큰 값 정본을 definition.ts 로 일원화했다.
   ⚠ @ops/ui/styles.css(전역 .card/.btn-*)도 여전히 미도입 — styles/shared 와 이중 정의가 된다. */
/* @ops/ui 차트 보조 레시피(chart-legend·share-gauge 등) — styles/shared 미러에 없는 charts 전용 클래스.
   tbl-*·caption-xs 는 styles/shared 가 이미 제공 — ops_ui table/layout.css 는 중복이라 미도입. */
/* 차트 보조 요소 — 범례·구성비·히트맵 (charts/*) */
*, ::before, ::after {
  --tw-border-spacing-x:            0;
  --tw-border-spacing-y:            0;
  --tw-translate-x:            0;
  --tw-translate-y:            0;
  --tw-rotate:            0;
  --tw-skew-x:            0;
  --tw-skew-y:            0;
  --tw-scale-x:            1;
  --tw-scale-y:            1;
  --tw-pan-x:             ;
  --tw-pan-y:             ;
  --tw-pinch-zoom:             ;
  --tw-scroll-snap-strictness:            proximity;
  --tw-gradient-from-position:             ;
  --tw-gradient-via-position:             ;
  --tw-gradient-to-position:             ;
  --tw-ordinal:             ;
  --tw-slashed-zero:             ;
  --tw-numeric-figure:             ;
  --tw-numeric-spacing:             ;
  --tw-numeric-fraction:             ;
  --tw-ring-inset:             ;
  --tw-ring-offset-width:            0px;
  --tw-ring-offset-color:            #fff;
  --tw-ring-color:            rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:            0 0 #0000;
  --tw-ring-shadow:            0 0 #0000;
  --tw-shadow:            0 0 #0000;
  --tw-shadow-colored:            0 0 #0000;
  --tw-blur:             ;
  --tw-brightness:             ;
  --tw-contrast:             ;
  --tw-grayscale:             ;
  --tw-hue-rotate:             ;
  --tw-invert:             ;
  --tw-saturate:             ;
  --tw-sepia:             ;
  --tw-drop-shadow:             ;
  --tw-backdrop-blur:             ;
  --tw-backdrop-brightness:             ;
  --tw-backdrop-contrast:             ;
  --tw-backdrop-grayscale:             ;
  --tw-backdrop-hue-rotate:             ;
  --tw-backdrop-invert:             ;
  --tw-backdrop-opacity:             ;
  --tw-backdrop-saturate:             ;
  --tw-backdrop-sepia:             ;
  --tw-contain-size:             ;
  --tw-contain-layout:             ;
  --tw-contain-paint:             ;
  --tw-contain-style:             ;
}
::backdrop {
  --tw-border-spacing-x:            0;
  --tw-border-spacing-y:            0;
  --tw-translate-x:            0;
  --tw-translate-y:            0;
  --tw-rotate:            0;
  --tw-skew-x:            0;
  --tw-skew-y:            0;
  --tw-scale-x:            1;
  --tw-scale-y:            1;
  --tw-pan-x:             ;
  --tw-pan-y:             ;
  --tw-pinch-zoom:             ;
  --tw-scroll-snap-strictness:            proximity;
  --tw-gradient-from-position:             ;
  --tw-gradient-via-position:             ;
  --tw-gradient-to-position:             ;
  --tw-ordinal:             ;
  --tw-slashed-zero:             ;
  --tw-numeric-figure:             ;
  --tw-numeric-spacing:             ;
  --tw-numeric-fraction:             ;
  --tw-ring-inset:             ;
  --tw-ring-offset-width:            0px;
  --tw-ring-offset-color:            #fff;
  --tw-ring-color:            rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:            0 0 #0000;
  --tw-ring-shadow:            0 0 #0000;
  --tw-shadow:            0 0 #0000;
  --tw-shadow-colored:            0 0 #0000;
  --tw-blur:             ;
  --tw-brightness:             ;
  --tw-contrast:             ;
  --tw-grayscale:             ;
  --tw-hue-rotate:             ;
  --tw-invert:             ;
  --tw-saturate:             ;
  --tw-sepia:             ;
  --tw-drop-shadow:             ;
  --tw-backdrop-blur:             ;
  --tw-backdrop-brightness:             ;
  --tw-backdrop-contrast:             ;
  --tw-backdrop-grayscale:             ;
  --tw-backdrop-hue-rotate:             ;
  --tw-backdrop-invert:             ;
  --tw-backdrop-opacity:             ;
  --tw-backdrop-saturate:             ;
  --tw-backdrop-sepia:             ;
  --tw-contain-size:             ;
  --tw-contain-layout:             ;
  --tw-contain-paint:             ;
  --tw-contain-style:             ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
html {
    /* 타입 축 토큰 — 폴백은 토큰화 이전 스택 */
    font-family: var(--font-body, "Pretendard Variable", Pretendard, system-ui, -apple-system,
        "Segoe UI", "Malgun Gothic", sans-serif);
  }
body {
    /* 색 축 토큰 — gray-50/900 하드코딩은 다크 팔레트에서 라이트 배경이 남는 원인이었다 */
    --tw-bg-opacity:            1;
    background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
    --tw-text-opacity:            1;
    color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
    -webkit-font-smoothing:            antialiased;
    -moz-osx-font-smoothing:            grayscale;
  }
.\!container {
  width:            100% !important;
}
.container {
  width:            100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width:            640px !important;
  }
  .container {
    max-width:            640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width:            768px !important;
  }
  .container {
    max-width:            768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width:            1024px !important;
  }
  .container {
    max-width:            1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width:            1280px !important;
  }
  .container {
    max-width:            1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width:            1536px !important;
  }
  .container {
    max-width:            1536px;
  }
}
.section-header {
  display:            flex;
  align-items:            center;
  justify-content:            space-between;
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  padding-left:            1.25rem;
  padding-right:            1.25rem;
  padding-top:            0.75rem;
  padding-bottom:            0.75rem;
}
.pagination-bar {
  display:            flex;
  align-items:            center;
  justify-content:            space-between;
  border-top-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  padding-left:            1.25rem;
  padding-right:            1.25rem;
  padding-top:            0.75rem;
  padding-bottom:            0.75rem;
}
.caption-xs {
  font-size:            11px;
  font-weight:            500;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
/* 카드 컨테이너 */
.card {
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow:            0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:            0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* 수평 정렬 기본 */
/* 수평 양끝 정렬 */
/* 보조 텍스트 */
.caption {
  font-size:            0.75rem;
  line-height:            1rem;
  font-weight:            500;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
/* 통계 섹션 2단 그리드 — xl 미만 1단 폴백, 높이 다른 섹션 상단 정렬 */
/* 뱃지 기본 구조 (색상은 BADGE_VARIANT 상수로 지정) */
.badge {
  display:            inline-flex;
  align-items:            center;
  gap:            0.25rem;
  border-radius:            var(--radius-chip, 9999px);
  padding-left:            0.625rem;
  padding-right:            0.625rem;
  padding-top:            0.25rem;
  padding-bottom:            0.25rem;
  font-size:            0.75rem;
  line-height:            1rem;
  font-weight:            600;
}
.badge-sm {
  display:            inline-flex;
  align-items:            center;
  gap:            0.25rem;
  border-radius:            var(--radius-chip, 9999px);
  padding-left:            0.5rem;
  padding-right:            0.5rem;
  padding-top:            0.125rem;
  padding-bottom:            0.125rem;
  font-size:            10px;
  font-weight:            700;
}
.btn-sm {
  display:            flex;
  align-items:            center;
  gap:            0.375rem;
  border-radius:            var(--radius-control, 0.5rem);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text-2) / var(--tw-text-opacity, 1));
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.btn-sm:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
.btn-sm:disabled {
  opacity:            0.5;
}
.btn-sm-indigo {
  display:            flex;
  align-items:            center;
  gap:            0.375rem;
  border-radius:            var(--radius-control, 0.5rem);
  border-width:            1px;
  border-color:            rgb(var(--color-brand) / 0.3);
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-text, var(--color-brand)) / var(--tw-text-opacity, 1));
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.btn-sm-indigo:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-light) / var(--tw-bg-opacity, 1));
}
.btn-sm-indigo:disabled {
  opacity:            0.5;
}
/* 인라인 폼 저장 버튼 — filled primary */
.btn-sm-primary {
  display:            flex;
  align-items:            center;
  gap:            0.375rem;
  border-radius:            var(--radius-control, 0.5rem);
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-on, 255 255 255) / var(--tw-text-opacity, 1));
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.btn-sm-primary:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-dark) / var(--tw-bg-opacity, 1));
}
.btn-sm-primary:disabled {
  opacity:            0.5;
}
/* 필터 초기화 버튼 (FilterBar 우측, self-end 정렬) */
.btn-page {
  border-radius:            0.25rem;
  padding-left:            0.5rem;
  padding-right:            0.5rem;
  padding-top:            0.25rem;
  padding-bottom:            0.25rem;
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.btn-page:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-3) / var(--tw-bg-opacity, 1));
}
.btn-page:disabled {
  cursor:            not-allowed;
  opacity:            0.3;
}
.btn-page-icon {
  border-radius:            0.25rem;
  padding:            0.25rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.btn-page-icon:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-3) / var(--tw-bg-opacity, 1));
}
.btn-page-icon:disabled {
  cursor:            not-allowed;
  opacity:            0.3;
}
.input-field {
  border-radius:            var(--radius-control, 0.5rem);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  font-size:            0.875rem;
  line-height:            1.25rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text-2) / var(--tw-text-opacity, 1));
}
.input-field:focus {
  outline:            2px solid transparent;
  outline-offset:            2px;
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color:            rgb(var(--color-brand) / 0.4);
}
/* 검색 아이콘 포함 인풋 — 아이콘 공간(pl-7) 포함 */
.select-field {
  border-radius:            var(--radius-control, 0.5rem);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  font-size:            0.875rem;
  line-height:            1.25rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text-2) / var(--tw-text-opacity, 1));
}
.select-field:focus {
  outline:            2px solid transparent;
  outline-offset:            2px;
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color:            rgb(var(--color-brand) / 0.4);
}
.select-field {
  height:            2.25rem;
  padding-left:            0.625rem;
  padding-right:            0.625rem;
}
.filter-label {
  font-size:            11px;
  font-weight:            500;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.filter-group-flex {
  display:            flex;
  flex-direction:            column;
  gap:            0.25rem;
  min-width:            140px;
  flex:            1 1 0%;
}
.tbl-thead-border {
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  background-color:            rgb(var(--color-bg) / 0.8);
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.tbl-th-left {
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  text-align:            left;
  font-weight:            500;
}
.tbl-th-right {
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  text-align:            right;
  font-weight:            500;
}
.tbl-th-center {
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  text-align:            center;
  font-weight:            500;
}
.tbl-tr {
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.tbl-tr:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.tbl-tr-hover {
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.tbl-tr-hover:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.tbl-tr-gray {
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.tbl-tr-gray:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
/* 제브라 스트라이프 + hover — 가로 스캔 열이 많은(5컬럼 이상) 테이블 전용 */
.tbl-tr-zebra {
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.tbl-tr-zebra:last-child {
  border-width:            0px;
}
.tbl-tr-zebra:nth-child(even) {
  background-color:            rgb(var(--color-surface-2) / 0.6);
}
.tbl-tr-zebra:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-3) / var(--tw-bg-opacity, 1));
}
.tbl-td {
  padding-top:            0.625rem;
  padding-bottom:            0.625rem;
  padding-left:            0.75rem;
  padding-right:            0.75rem;
}
.tbl-td-center {
  white-space:            nowrap;
  padding-left:            0.75rem;
  padding-right:            0.75rem;
  padding-top:            0.75rem;
  padding-bottom:            0.75rem;
  text-align:            center;
}
/* 고밀도 리포트 테이블 (points-compare · sales monthly) — 우정렬 축소 셀 */
.tbl-th-dense {
  white-space:            nowrap;
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
  padding-left:            0.5rem;
  padding-right:            0.5rem;
  text-align:            right;
  font-size:            11px;
  font-weight:            500;
}
@media (min-width: 640px) {
  .tbl-th-dense {
    padding-left:            0.75rem;
    padding-right:            0.75rem;
    font-size:            0.75rem;
    line-height:            1rem;
  }
}
.tbl-td-dense {
  white-space:            nowrap;
  padding-top:            0.375rem;
  padding-bottom:            0.375rem;
  padding-left:            0.5rem;
  padding-right:            0.5rem;
  text-align:            right;
  font-size:            11px;
}
@media (min-width: 640px) {
  .tbl-td-dense {
    padding-left:            0.75rem;
    padding-right:            0.75rem;
    font-size:            0.75rem;
    line-height:            1rem;
  }
}
.popover-container {
  overflow:            hidden;
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow:            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.popover-shortcuts {
  display:            flex;
  flex-wrap:            wrap;
  gap:            0.375rem;
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
  background-color:            rgb(var(--color-surface-2) / 0.6);
  padding-left:            1rem;
  padding-right:            1rem;
  padding-top:            0.75rem;
  padding-bottom:            0.625rem;
}
/* 설명(가이드) 탭 — 문서 본문 전용 */
.guide-toc-link {
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-text, var(--color-brand)) / var(--tw-text-opacity, 1));
}
.guide-toc-link:hover {
  text-decoration-line:            underline;
}
/* 화면 요소명(탭·버튼·열 이름)만 볼드 */
/* 캔버스 호스트 — 위치·크기는 부르는 쪽이 정하고, 여기서는 채우기만 한다 */
.canvas-host {
  pointer-events:            none;
  position:            absolute;
  left:            0px;
  right:            0px;
  top:            0px;
  overflow:            hidden;
}
/* CSS 폴백 — canvas 와 같은 인상(브랜드 톤이 위에서 옅게 번지고 아래로 사라짐)을
     그라데이션 두 겹으로만 만든다. 애니메이션 없음. */
.canvas-fallback {
    /* 첫 페인트 구간에는 투명 — 장식이 LCP 요소와 페인트를 다투지 않게 한다.
       엔진이 초기화를 마치면(idle 이후) 호스트에 data-canvas-ready 가 붙어 서서히 올라온다.
       JS 가 없으면 끝까지 투명하다 — 순수 장식이므로 정보 손실이 없다. */
    /* css-allow-raw — duration-500 은 첫 페인트 보호용 페이드인이지 테마 호버 타이밍이 아니다.
       --transition-speed(150~300ms)를 쓰면 LCP 직후 배경이 튀듯 올라온다. */
    position:            absolute;
    inset:            0px;
    opacity:            0;
    transition-property:            opacity;
    transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration:            500ms;
    background:
      radial-gradient(60% 70% at 18% 20%, rgb(var(--color-brand) / 0.14), transparent 70%),
      radial-gradient(55% 65% at 82% 12%, rgb(var(--color-accent) / 0.1), transparent 70%),
      linear-gradient(to bottom, rgb(var(--color-bg) / 0), rgb(var(--color-bg)) 92%);
  }
/* 준비 신호는 엔진이 canvas 의 부모에 붙인다 — 호스트가 .canvas-host(히어로)든
     .canvas-band(띠)든 .canvas-empty-art(빈 상태)든 같은 규칙이 걸리게 클래스에 매지 않는다. */
[data-canvas-ready] > .canvas-fallback {
  opacity:            1;
}
/* ── 면 슬롯 (theme-canvas-surfaces-and-regions) ──────────────────────────
     글자가 앉지 않는 자리라 히어로 앰비언트를 묶는 대비 천장이 없다. 스크림도 두지 않는다. */
/* sectionBand — 섹션 사이 장식 띠. 높이는 부르는 쪽이 인라인으로 준다. */
.canvas-band {
  position:            relative;
  width:            100%;
  overflow:            hidden;
}
/* emptyState — 빈 상태. 안내 문구는 canvas 위가 아니라 surface 칩 안에 앉는다. */
.canvas-empty {
  position:            relative;
  display:            grid;
  min-height:            13rem;
  place-items:            center;
  overflow:            hidden;
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
.canvas-empty-art {
  pointer-events:            none;
  position:            absolute;
  inset:            0px;
}
.canvas-empty-chip {
  position:            relative;
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left:            1.25rem;
  padding-right:            1.25rem;
  padding-top:            0.75rem;
  padding-bottom:            0.75rem;
  font-size:            0.875rem;
  line-height:            1.25rem;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
  --tw-shadow:            var(--shadow-card, none);
  --tw-shadow-colored:            var(--shadow-card, none);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* 스크림 — canvas 위에 텍스트가 올라갈 때 사이에 두는 층.
   *
   * ⚠ 가시성과 대비는 **같은 손잡이**다. 앰비언트가 배경을 얼마나 어둡게/밝게 흔드느냐가
   *   곧 눈에 보이는 정도이자 그 위 글자의 대비 손실이다. 둘을 동시에 최대화할 수 없다.
   *
   * 이전 값(0.9 → 0.96 → 1.0 불투명)은 대비를 지키려다 앰비언트를 사실상 지웠다 —
   * 비용만 내고 효과가 없는 상태였다. 지금은 **상단을 열고 하단만 닫는다**:
   *   - 위쪽(0.35): 앰비언트가 실제로 보이는 구간. 여기 올라가는 글자는 본문색(text)뿐이어야 한다.
   *   - 아래쪽(1.0): 콘텐츠가 시작되는 구간. 배경이 --color-bg 로 완전히 수렴한다.
   *
   * 지킬 선(실측 — npm run lint:contrast:canvas):
   *   - 본문색(text)은 앰비언트 최악 픽셀 위에서 4.5:1 이상 — 검사가 이걸 강제한다.
   *   - **캡션색(muted)은 앰비언트 구간에 두지 말 것.** muted 는 원래 bg 위에서 4.5~5:1 로
   *     여유가 없어, 앰비언트가 조금만 흔들어도 미달한다. 검사는 이 값을 참고로만 출력한다. */
.canvas-scrim {
  pointer-events:            none;
  position:            absolute;
  inset:            0px;
    background: linear-gradient(
      to bottom,
      rgb(var(--color-bg) / 0.35),
      rgb(var(--color-bg) / 0.7) 55%,
      rgb(var(--color-bg)) 100%
    );
}
/* ── 지점 효과 (canvas 대신 CSS) ─────────────────────────────────────────
     카드·배지마다 <canvas> 를 두면 한 화면에 수십 개가 생겨 성능 예산이 무너진다.
     선/광택 한 줄짜리 효과는 CSS 가 더 싸고 정확하다. 테마는 **클래스로 옵트인**한다 —
     [data-layout="…"] 분기를 만들지 않는다는 테마 계약을 지키기 위함. */
/* noir — "카드 테두리를 따라 금빛이 한 번 지나간다" (0.6초 1회, hover) */
.card-sheen {
    position: relative;
  }
.card-sheen::after {
    content: "";
    pointer-events:            none;
    position:            absolute;
    inset:            0px;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgb(var(--color-brand) / 0.35) 50%,
      transparent 60%
    );
    background-size: 250% 100%;
    background-position: 150% 0;
    opacity: 0;
  }
.card-sheen:hover::after {
    animation: card-sheen-pass 0.6s ease-out 1;
  }
@keyframes card-sheen-pass {
    from {
      opacity: 1;
      background-position: 150% 0;
    }
    to {
      opacity: 0;
      background-position: -50% 0;
    }
  }
/* mono — "얇은 잉크 밑줄" (hover 시 좌→우로 그어진다) */
.card-ink-rule {
    position: relative;
  }
.card-ink-rule::after {
    content: "";
    pointer-events:            none;
    position:            absolute;
    bottom:            0px;
    left:            0px;
    height:            1px;
    width:            100%;
    transform-origin:            left;
    background: rgb(var(--color-text));
    transform: scaleX(0);
    transition: transform 220ms ease-out;
  }
.card-ink-rule:hover::after {
    transform: scaleX(1);
  }
/* 움직임 최소화 설정에서는 지점 효과도 멈춘다 — 엔진의 정지 조건과 같은 원칙 */
@media (prefers-reduced-motion: reduce) {
    .card-sheen:hover::after {
      animation: none;
    }
    .card-ink-rule::after {
      transition: none;
    }
  }
/* 회원 요약 카드 */
.mp-summary {
  display:            flex;
  align-items:            center;
  justify-content:            space-between;
  border-radius:            var(--radius-card);
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-light) / var(--tw-bg-opacity, 1));
  padding-left:            1rem;
  padding-right:            1rem;
  padding-top:            0.875rem;
  padding-bottom:            0.875rem;
}
/* 서브 카드 — 계좌인증 등 */
.mp-card {
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left:            1rem;
  padding-right:            1rem;
  padding-top:            0.875rem;
  padding-bottom:            0.875rem;
}
/* 섹션 제목 */
.mp-title {
  margin-bottom:            0.5rem;
  font-size:            0.875rem;
  line-height:            1.25rem;
  font-weight:            600;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
}
/* 주문 테이블 프레임 */
.mp-table {
  overflow:            hidden;
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
/* 보조 버튼 — 로그아웃·계좌인증 */
.mp-btn {
  border-radius:            var(--radius-card);
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  font-weight:            500;
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
}
.mp-btn:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
/* mono — 매거진: 각진 프레임(라운드 토큰) + 진한 보더 + 세리프 제목 */
[data-layout="mono"] .mp-summary {
  border-width:            2px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
[data-layout="mono"] .mp-card,
  [data-layout="mono"] .mp-table,
  [data-layout="mono"] .mp-btn {
  border-width:            2px;
}
[data-layout="mono"] .mp-title {
  border-bottom-width:            2px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-bottom:            0.375rem;
  font-family:            var(--font-display);
  font-size:            1rem;
  line-height:            1.5rem;
}
/* bento — 타일: 보더 없는 bg-page 타일 + 큰 라운드(라운드 토큰) */
[data-layout="bento"] .mp-summary {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
[data-layout="bento"] .mp-card,
  [data-layout="bento"] .mp-table,
  [data-layout="bento"] .mp-btn {
  border-color:            transparent;
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
/* aurora — 감성: 요약 카드 브랜드→액센트 소프트 그라데이션 + 브랜드 제목 */
[data-layout="aurora"] .mp-summary {
    background-image: linear-gradient(135deg, rgb(var(--color-brand-light)), rgb(var(--color-accent) / 0.1));
  }
[data-layout="aurora"] .mp-title {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}
/* noir — 프리미엄: 요약 카드 브랜드(골드) 라인 */
[data-layout="noir"] .mp-summary {
  border-width:            1px;
  border-color:            rgb(var(--color-brand) / 0.3);
}
/* ─── 벤치마크 테마 2종 (7팩 정리 — trust·pebble·cupertino·fintech 레시피는 병합 시 제거) ─── */
/* market — 피드: 구분선 리듬, 면 없음 */
[data-layout="market"] .mp-card,
  [data-layout="market"] .mp-table {
  border-left-width:            0px;
  border-right-width:            0px;
  border-top-width:            0px;
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
[data-layout="market"] .mp-title {
  border-bottom-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-bottom:            0.375rem;
}
/* bazaar — 밀도: 얇은 보더 + 진한 제목 밑줄 */
[data-layout="bazaar"] .mp-summary,
  [data-layout="bazaar"] .mp-card,
  [data-layout="bazaar"] .mp-table {
  border-width:            1px;
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
[data-layout="bazaar"] .mp-title {
  border-bottom-width:            2px;
  border-color:            rgb(var(--color-text) / 0.8);
  padding-bottom:            0.375rem;
  font-size:            0.875rem;
  line-height:            1.25rem;
}
.chart-legend {
  margin-top:            0.25rem;
  display:            flex;
  flex-wrap:            wrap;
  align-items:            center;
  gap:            0.75rem;
}
.chart-legend-item {
  display:            flex;
  align-items:            center;
  gap:            0.25rem;
  font-size:            10px;
  --tw-text-opacity:            1;
  color:            rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.chart-legend-item-btn {
  cursor:            pointer;
}
.chart-legend-item-btn:hover {
  --tw-text-opacity:            1;
  color:            rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.chart-legend-item-hidden {
  text-decoration-line:            line-through;
  opacity:            0.4;
}
.chart-legend-swatch {
  height:            0.625rem;
  width:            0.625rem;
  flex-shrink:            0;
  border-radius:            0.125rem;
}
.share-bar {
  display:            flex;
  width:            100%;
  overflow:            hidden;
  border-radius:            0.25rem;
  --tw-bg-opacity:            1;
  background-color:            rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.share-bar-xs {
  height:            0.375rem;
}
.share-bar-sm {
  height:            0.75rem;
}
.share-gauge {
  display:            flex;
  align-items:            center;
  gap:            0.5rem;
}
.share-gauge-track {
  height:            0.375rem;
  flex:            1 1 0%;
  overflow:            hidden;
  border-radius:            0.25rem;
  --tw-bg-opacity:            1;
  background-color:            rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.share-gauge-pct {
  width:            2.75rem;
  text-align:            right;
  font-size:            0.75rem;
  line-height:            1rem;
  --tw-numeric-spacing:            tabular-nums;
  font-variant-numeric:            var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity:            1;
  color:            rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.heatmap {
  display:            grid;
  gap:            1px;
  font-size:            10px;
  --tw-text-opacity:            1;
  color:            rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.heatmap-col {
  text-align:            center;
}
.heatmap-row {
  padding-right:            0.5rem;
  text-align:            right;
}
.heatmap-cell {
  border-radius:            0.125rem;
}
.pointer-events-none {
  pointer-events:            none;
}
.\!visible {
  visibility:            visible !important;
}
.visible {
  visibility:            visible;
}
.invisible {
  visibility:            hidden;
}
.static {
  position:            static;
}
.fixed {
  position:            fixed;
}
.absolute {
  position:            absolute;
}
.relative {
  position:            relative;
}
.sticky {
  position:            sticky;
}
.inset-0 {
  inset:            0px;
}
.inset-x-0 {
  left:            0px;
  right:            0px;
}
.inset-y-0 {
  top:            0px;
  bottom:            0px;
}
.bottom-0 {
  bottom:            0px;
}
.bottom-2 {
  bottom:            0.5rem;
}
.bottom-3 {
  bottom:            0.75rem;
}
.bottom-4 {
  bottom:            1rem;
}
.bottom-\[max\(1\.25rem\2c env\(safe-area-inset-bottom\)\)\] {
  bottom:            max(1.25rem, env(safe-area-inset-bottom));
}
.bottom-full {
  bottom:            100%;
}
.left-0 {
  left:            0px;
}
.left-0\.5 {
  left:            0.125rem;
}
.left-1\/2 {
  left:            50%;
}
.left-2 {
  left:            0.5rem;
}
.left-2\.5 {
  left:            0.625rem;
}
.left-3 {
  left:            0.75rem;
}
.left-\[1\.375rem\] {
  left:            1.375rem;
}
.right-0 {
  right:            0px;
}
.right-1\.5 {
  right:            0.375rem;
}
.right-2 {
  right:            0.5rem;
}
.right-3 {
  right:            0.75rem;
}
.right-4 {
  right:            1rem;
}
.top-0 {
  top:            0px;
}
.top-0\.5 {
  top:            0.125rem;
}
.top-1 {
  top:            0.25rem;
}
.top-1\/2 {
  top:            50%;
}
.top-2 {
  top:            0.5rem;
}
.top-2\.5 {
  top:            0.625rem;
}
.top-3 {
  top:            0.75rem;
}
.top-4 {
  top:            1rem;
}
.top-full {
  top:            100%;
}
.-z-10 {
  z-index:            -10;
}
.z-10 {
  z-index:            10;
}
.z-20 {
  z-index:            20;
}
.z-30 {
  z-index:            30;
}
.z-40 {
  z-index:            40;
}
.z-50 {
  z-index:            50;
}
.z-\[100\] {
  z-index:            100;
}
.z-\[60\] {
  z-index:            60;
}
.z-\[9999\] {
  z-index:            9999;
}
.col-span-2 {
  grid-column:            span 2 / span 2;
}
.row-span-2 {
  grid-row:            span 2 / span 2;
}
.-m-1 {
  margin:            -0.25rem;
}
.-my-2 {
  margin-top:            -0.5rem;
  margin-bottom:            -0.5rem;
}
.mx-1 {
  margin-left:            0.25rem;
  margin-right:            0.25rem;
}
.mx-2 {
  margin-left:            0.5rem;
  margin-right:            0.5rem;
}
.mx-4 {
  margin-left:            1rem;
  margin-right:            1rem;
}
.mx-auto {
  margin-left:            auto;
  margin-right:            auto;
}
.my-1 {
  margin-top:            0.25rem;
  margin-bottom:            0.25rem;
}
.-mb-px {
  margin-bottom:            -1px;
}
.-mr-0\.5 {
  margin-right:            -0.125rem;
}
.mb-0 {
  margin-bottom:            0px;
}
.mb-1 {
  margin-bottom:            0.25rem;
}
.mb-1\.5 {
  margin-bottom:            0.375rem;
}
.mb-10 {
  margin-bottom:            2.5rem;
}
.mb-14 {
  margin-bottom:            3.5rem;
}
.mb-16 {
  margin-bottom:            4rem;
}
.mb-2 {
  margin-bottom:            0.5rem;
}
.mb-3 {
  margin-bottom:            0.75rem;
}
.mb-4 {
  margin-bottom:            1rem;
}
.mb-5 {
  margin-bottom:            1.25rem;
}
.mb-6 {
  margin-bottom:            1.5rem;
}
.mb-8 {
  margin-bottom:            2rem;
}
.mb-section {
  margin-bottom:            var(--gap-section, 2.5rem);
}
.ml-0\.5 {
  margin-left:            0.125rem;
}
.ml-1 {
  margin-left:            0.25rem;
}
.ml-1\.5 {
  margin-left:            0.375rem;
}
.ml-2 {
  margin-left:            0.5rem;
}
.ml-auto {
  margin-left:            auto;
}
.ml-px {
  margin-left:            1px;
}
.mr-1 {
  margin-right:            0.25rem;
}
.mr-1\.5 {
  margin-right:            0.375rem;
}
.mr-2 {
  margin-right:            0.5rem;
}
.mr-auto {
  margin-right:            auto;
}
.mt-0\.5 {
  margin-top:            0.125rem;
}
.mt-1 {
  margin-top:            0.25rem;
}
.mt-1\.5 {
  margin-top:            0.375rem;
}
.mt-10 {
  margin-top:            2.5rem;
}
.mt-12 {
  margin-top:            3rem;
}
.mt-14 {
  margin-top:            3.5rem;
}
.mt-16 {
  margin-top:            4rem;
}
.mt-2 {
  margin-top:            0.5rem;
}
.mt-2\.5 {
  margin-top:            0.625rem;
}
.mt-20 {
  margin-top:            5rem;
}
.mt-3 {
  margin-top:            0.75rem;
}
.mt-4 {
  margin-top:            1rem;
}
.mt-5 {
  margin-top:            1.25rem;
}
.mt-6 {
  margin-top:            1.5rem;
}
.mt-7 {
  margin-top:            1.75rem;
}
.mt-8 {
  margin-top:            2rem;
}
.mt-auto {
  margin-top:            auto;
}
.line-clamp-1 {
  overflow:            hidden;
  display:            -webkit-box;
  -webkit-box-orient:            vertical;
  -webkit-line-clamp:            1;
}
.line-clamp-2 {
  overflow:            hidden;
  display:            -webkit-box;
  -webkit-box-orient:            vertical;
  -webkit-line-clamp:            2;
}
.block {
  display:            block;
}
.inline-block {
  display:            inline-block;
}
.inline {
  display:            inline;
}
.flex {
  display:            flex;
}
.inline-flex {
  display:            inline-flex;
}
.table {
  display:            table;
}
.grid {
  display:            grid;
}
.hidden {
  display:            none;
}
.aspect-\[3\/4\] {
  aspect-ratio:            3/4;
}
.aspect-\[4\/3\] {
  aspect-ratio:            4/3;
}
.aspect-card {
  aspect-ratio:            var(--media-ratio-card, 4 / 3);
}
.aspect-square {
  aspect-ratio:            1 / 1;
}
.aspect-video {
  aspect-ratio:            16 / 9;
}
.size-1\.5 {
  width:            0.375rem;
  height:            0.375rem;
}
.size-10 {
  width:            2.5rem;
  height:            2.5rem;
}
.size-7 {
  width:            1.75rem;
  height:            1.75rem;
}
.size-8 {
  width:            2rem;
  height:            2rem;
}
.size-9 {
  width:            2.25rem;
  height:            2.25rem;
}
.h-1 {
  height:            0.25rem;
}
.h-10 {
  height:            2.5rem;
}
.h-12 {
  height:            3rem;
}
.h-14 {
  height:            3.5rem;
}
.h-16 {
  height:            4rem;
}
.h-2 {
  height:            0.5rem;
}
.h-20 {
  height:            5rem;
}
.h-24 {
  height:            6rem;
}
.h-28 {
  height:            7rem;
}
.h-3 {
  height:            0.75rem;
}
.h-3\.5 {
  height:            0.875rem;
}
.h-4 {
  height:            1rem;
}
.h-40 {
  height:            10rem;
}
.h-5 {
  height:            1.25rem;
}
.h-56 {
  height:            14rem;
}
.h-6 {
  height:            1.5rem;
}
.h-64 {
  height:            16rem;
}
.h-7 {
  height:            1.75rem;
}
.h-72 {
  height:            18rem;
}
.h-8 {
  height:            2rem;
}
.h-9 {
  height:            2.25rem;
}
.h-96 {
  height:            24rem;
}
.h-\[70vh\] {
  height:            70vh;
}
.h-\[85vh\] {
  height:            85vh;
}
.h-\[calc\(100vh-4rem\)\] {
  height:            calc(100vh - 4rem);
}
.h-auto {
  height:            auto;
}
.h-full {
  height:            100%;
}
.h-px {
  height:            1px;
}
.h-screen {
  height:            100vh;
}
.h-\[640px\] {
  height:            640px;
}
.max-h-40 {
  max-height:            10rem;
}
.max-h-60 {
  max-height:            15rem;
}
.max-h-64 {
  max-height:            16rem;
}
.max-h-72 {
  max-height:            18rem;
}
.max-h-80 {
  max-height:            20rem;
}
.max-h-96 {
  max-height:            24rem;
}
.max-h-\[240px\] {
  max-height:            240px;
}
.max-h-\[45vh\] {
  max-height:            45vh;
}
.max-h-\[55vh\] {
  max-height:            55vh;
}
.max-h-\[70vh\] {
  max-height:            70vh;
}
.max-h-\[80vh\] {
  max-height:            80vh;
}
.max-h-\[85vh\] {
  max-height:            85vh;
}
.max-h-\[90vh\] {
  max-height:            90vh;
}
.min-h-0 {
  min-height:            0px;
}
.min-h-11 {
  min-height:            2.75rem;
}
.min-h-8 {
  min-height:            2rem;
}
.min-h-\[220px\] {
  min-height:            220px;
}
.min-h-\[28px\] {
  min-height:            28px;
}
.min-h-screen {
  min-height:            100vh;
}
.w-0\.5 {
  width:            0.125rem;
}
.w-1\/2 {
  width:            50%;
}
.w-10 {
  width:            2.5rem;
}
.w-11 {
  width:            2.75rem;
}
.w-12 {
  width:            3rem;
}
.w-14 {
  width:            3.5rem;
}
.w-16 {
  width:            4rem;
}
.w-2 {
  width:            0.5rem;
}
.w-2\/5 {
  width:            40%;
}
.w-20 {
  width:            5rem;
}
.w-24 {
  width:            6rem;
}
.w-28 {
  width:            7rem;
}
.w-3 {
  width:            0.75rem;
}
.w-3\.5 {
  width:            0.875rem;
}
.w-3\/4 {
  width:            75%;
}
.w-32 {
  width:            8rem;
}
.w-36 {
  width:            9rem;
}
.w-4 {
  width:            1rem;
}
.w-40 {
  width:            10rem;
}
.w-44 {
  width:            11rem;
}
.w-48 {
  width:            12rem;
}
.w-5 {
  width:            1.25rem;
}
.w-52 {
  width:            13rem;
}
.w-56 {
  width:            14rem;
}
.w-6 {
  width:            1.5rem;
}
.w-64 {
  width:            16rem;
}
.w-7 {
  width:            1.75rem;
}
.w-72 {
  width:            18rem;
}
.w-8 {
  width:            2rem;
}
.w-80 {
  width:            20rem;
}
.w-9 {
  width:            2.25rem;
}
.w-\[300px\] {
  width:            300px;
}
.w-\[340px\] {
  width:            340px;
}
.w-\[375px\] {
  width:            375px;
}
.w-\[4\.5rem\] {
  width:            4.5rem;
}
.w-\[5\.5rem\] {
  width:            5.5rem;
}
.w-auto {
  width:            auto;
}
.w-fit {
  width:            -moz-fit-content;
  width:            fit-content;
}
.w-full {
  width:            100%;
}
.w-max {
  width:            -moz-max-content;
  width:            max-content;
}
.w-px {
  width:            1px;
}
.min-w-0 {
  min-width:            0px;
}
.min-w-44 {
  min-width:            11rem;
}
.min-w-\[180px\] {
  min-width:            180px;
}
.min-w-\[200px\] {
  min-width:            200px;
}
.min-w-\[800px\] {
  min-width:            800px;
}
.min-w-full {
  min-width:            100%;
}
.max-w-2xl {
  max-width:            42rem;
}
.max-w-32 {
  max-width:            8rem;
}
.max-w-3xl {
  max-width:            48rem;
}
.max-w-40 {
  max-width:            10rem;
}
.max-w-4xl {
  max-width:            56rem;
}
.max-w-52 {
  max-width:            13rem;
}
.max-w-56 {
  max-width:            14rem;
}
.max-w-5xl {
  max-width:            64rem;
}
.max-w-6xl {
  max-width:            72rem;
}
.max-w-7xl {
  max-width:            80rem;
}
.max-w-80 {
  max-width:            20rem;
}
.max-w-\[10rem\] {
  max-width:            10rem;
}
.max-w-\[120px\] {
  max-width:            120px;
}
.max-w-\[160px\] {
  max-width:            160px;
}
.max-w-\[16rem\] {
  max-width:            16rem;
}
.max-w-\[17ch\] {
  max-width:            17ch;
}
.max-w-\[180px\] {
  max-width:            180px;
}
.max-w-\[220px\] {
  max-width:            220px;
}
.max-w-\[260px\] {
  max-width:            260px;
}
.max-w-\[26ch\] {
  max-width:            26ch;
}
.max-w-\[280px\] {
  max-width:            280px;
}
.max-w-\[46ch\] {
  max-width:            46ch;
}
.max-w-\[7rem\] {
  max-width:            7rem;
}
.max-w-\[8rem\] {
  max-width:            8rem;
}
.max-w-\[calc\(100vw-2rem\)\] {
  max-width:            calc(100vw - 2rem);
}
.max-w-full {
  max-width:            100%;
}
.max-w-lg {
  max-width:            32rem;
}
.max-w-md {
  max-width:            28rem;
}
.max-w-none {
  max-width:            none;
}
.max-w-screen-2xl {
  max-width:            1536px;
}
.max-w-screen-lg {
  max-width:            1024px;
}
.max-w-screen-md {
  max-width:            768px;
}
.max-w-screen-sm {
  max-width:            640px;
}
.max-w-screen-xl {
  max-width:            1280px;
}
.max-w-sm {
  max-width:            24rem;
}
.max-w-xl {
  max-width:            36rem;
}
.max-w-xs {
  max-width:            20rem;
}
.flex-1 {
  flex:            1 1 0%;
}
.flex-shrink-0 {
  flex-shrink:            0;
}
.shrink-0 {
  flex-shrink:            0;
}
.grow {
  flex-grow:            1;
}
.-translate-x-1\/2 {
  --tw-translate-x:            -50%;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y:            -50%;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x:            0.25rem;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x:            1.25rem;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0\.5 {
  --tw-translate-y:            0.125rem;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate:            180deg;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity:            .5;
  }
}
.animate-pulse {
  animation:            pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform:            rotate(360deg);
  }
}
.animate-spin {
  animation:            spin 1s linear infinite;
}
.cursor-grab {
  cursor:            grab;
}
.cursor-help {
  cursor:            help;
}
.cursor-not-allowed {
  cursor:            not-allowed;
}
.cursor-pointer {
  cursor:            pointer;
}
.cursor-zoom-in {
  cursor:            zoom-in;
}
.touch-none {
  touch-action:            none;
}
.select-none {
  -webkit-user-select:            none;
     -moz-user-select:            none;
          user-select:            none;
}
.select-all {
  -webkit-user-select:            all;
     -moz-user-select:            all;
          user-select:            all;
}
.resize {
  resize:            both;
}
.snap-x {
  scroll-snap-type:            x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness:            mandatory;
}
.snap-center {
  scroll-snap-align:            center;
}
.list-disc {
  list-style-type:            disc;
}
.list-none {
  list-style-type:            none;
}
.auto-rows-\[9rem\] {
  grid-auto-rows:            9rem;
}
.grid-cols-1 {
  grid-template-columns:            repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns:            repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns:            repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns:            repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns:            repeat(5, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns:            repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1\.1rem_1fr\] {
  grid-template-columns:            1.1rem 1fr;
}
.grid-cols-\[1\.2rem_1fr_auto\] {
  grid-template-columns:            1.2rem 1fr auto;
}
.grid-cols-\[2\.4rem_1\.1rem_1fr_auto_auto\] {
  grid-template-columns:            2.4rem 1.1rem 1fr auto auto;
}
.flex-col {
  flex-direction:            column;
}
.flex-wrap {
  flex-wrap:            wrap;
}
.items-start {
  align-items:            flex-start;
}
.items-end {
  align-items:            flex-end;
}
.items-center {
  align-items:            center;
}
.items-baseline {
  align-items:            baseline;
}
.justify-end {
  justify-content:            flex-end;
}
.justify-center {
  justify-content:            center;
}
.justify-between {
  justify-content:            space-between;
}
.gap-0\.5 {
  gap:            0.125rem;
}
.gap-1 {
  gap:            0.25rem;
}
.gap-1\.5 {
  gap:            0.375rem;
}
.gap-10 {
  gap:            2.5rem;
}
.gap-2 {
  gap:            0.5rem;
}
.gap-2\.5 {
  gap:            0.625rem;
}
.gap-3 {
  gap:            0.75rem;
}
.gap-3\.5 {
  gap:            0.875rem;
}
.gap-4 {
  gap:            1rem;
}
.gap-5 {
  gap:            1.25rem;
}
.gap-6 {
  gap:            1.5rem;
}
.gap-7 {
  gap:            1.75rem;
}
.gap-8 {
  gap:            2rem;
}
.gap-grid {
  gap:            var(--gap-grid, 0.75rem);
}
.gap-px {
  gap:            1px;
}
.gap-section {
  gap:            var(--gap-section, 2.5rem);
}
.gap-x-2 {
  -moz-column-gap:            0.5rem;
       column-gap:            0.5rem;
}
.gap-x-3 {
  -moz-column-gap:            0.75rem;
       column-gap:            0.75rem;
}
.gap-x-4 {
  -moz-column-gap:            1rem;
       column-gap:            1rem;
}
.gap-x-5 {
  -moz-column-gap:            1.25rem;
       column-gap:            1.25rem;
}
.gap-x-6 {
  -moz-column-gap:            1.5rem;
       column-gap:            1.5rem;
}
.gap-x-8 {
  -moz-column-gap:            2rem;
       column-gap:            2rem;
}
.gap-y-0\.5 {
  row-gap:            0.125rem;
}
.gap-y-1 {
  row-gap:            0.25rem;
}
.gap-y-1\.5 {
  row-gap:            0.375rem;
}
.gap-y-2 {
  row-gap:            0.5rem;
}
.gap-y-3 {
  row-gap:            0.75rem;
}
.gap-y-4 {
  row-gap:            1rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse:            0;
  margin-top:            calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:            calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse:            0;
  border-top-width:            calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:            calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity:            1;
  border-color:            rgb(243 244 246 / var(--tw-divide-opacity, 1));
}
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity:            1;
  border-color:            rgb(249 250 251 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self:            flex-start;
}
.self-center {
  align-self:            center;
}
.overflow-auto {
  overflow:            auto;
}
.overflow-hidden {
  overflow:            hidden;
}
.overflow-x-auto {
  overflow-x:            auto;
}
.overflow-y-auto {
  overflow-y:            auto;
}
.scroll-smooth {
  scroll-behavior:            smooth;
}
.truncate {
  overflow:            hidden;
  text-overflow:            ellipsis;
  white-space:            nowrap;
}
.whitespace-nowrap {
  white-space:            nowrap;
}
.whitespace-pre-line {
  white-space:            pre-line;
}
.whitespace-pre-wrap {
  white-space:            pre-wrap;
}
.text-balance {
  text-wrap:            balance;
}
.break-words {
  overflow-wrap:            break-word;
}
.break-all {
  word-break:            break-all;
}
.rounded {
  border-radius:            0.25rem;
}
.rounded-2xl {
  border-radius:            1rem;
}
.rounded-\[24\%\] {
  border-radius:            24%;
}
.rounded-avatar {
  border-radius:            var(--radius-avatar, 9999px);
}
.rounded-card {
  border-radius:            var(--radius-card);
}
.rounded-chip {
  border-radius:            var(--radius-chip, 9999px);
}
.rounded-control {
  border-radius:            var(--radius-control, 0.5rem);
}
.rounded-full {
  border-radius:            9999px;
}
.rounded-image {
  border-radius:            var(--radius-image, var(--radius-card));
}
.rounded-lg {
  border-radius:            0.5rem;
}
.rounded-md {
  border-radius:            0.375rem;
}
.rounded-none {
  border-radius:            0px;
}
.rounded-sm {
  border-radius:            0.125rem;
}
.rounded-xl {
  border-radius:            0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius:            1rem;
  border-bottom-left-radius:            1rem;
}
.rounded-b-card {
  border-bottom-right-radius:            var(--radius-card);
  border-bottom-left-radius:            var(--radius-card);
}
.rounded-l-lg {
  border-top-left-radius:            0.5rem;
  border-bottom-left-radius:            0.5rem;
}
.rounded-r-lg {
  border-top-right-radius:            0.5rem;
  border-bottom-right-radius:            0.5rem;
}
.rounded-t-lg {
  border-top-left-radius:            0.5rem;
  border-top-right-radius:            0.5rem;
}
.border {
  border-width:            1px;
}
.border-0 {
  border-width:            0px;
}
.border-2 {
  border-width:            2px;
}
.border-theme {
  border-width:            var(--border-width, 1px);
}
.border-x-0 {
  border-left-width:            0px;
  border-right-width:            0px;
}
.border-b {
  border-bottom-width:            1px;
}
.border-b-0 {
  border-bottom-width:            0px;
}
.border-b-2 {
  border-bottom-width:            2px;
}
.border-l {
  border-left-width:            1px;
}
.border-l-4 {
  border-left-width:            4px;
}
.border-r {
  border-right-width:            1px;
}
.border-t {
  border-top-width:            1px;
}
.border-t-2 {
  border-top-width:            2px;
}
.border-dashed {
  border-style:            dashed;
}
.border-dotted {
  border-style:            dotted;
}
.border-alert-line {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-alert-line) / var(--tw-border-opacity, 1));
}
.border-amber-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity:            1;
  border-color:            rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity:            1;
  border-color:            rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-black\/10 {
  border-color:            rgb(0 0 0 / 0.1);
}
.border-body\/80 {
  border-color:            rgb(var(--color-text) / 0.8);
}
.border-brand {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}
.border-brand\/30 {
  border-color:            rgb(var(--color-brand) / 0.3);
}
.border-brand\/40 {
  border-color:            rgb(var(--color-brand) / 0.4);
}
.border-current {
  border-color:            currentColor;
}
.border-emerald-100 {
  --tw-border-opacity:            1;
  border-color:            rgb(209 250 229 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity:            1;
  border-color:            rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity:            1;
  border-color:            rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity:            1;
  border-color:            rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-50 {
  --tw-border-opacity:            1;
  border-color:            rgb(249 250 251 / var(--tw-border-opacity, 1));
}
.border-indigo-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-400 {
  --tw-border-opacity:            1;
  border-color:            rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.border-indigo-600 {
  --tw-border-opacity:            1;
  border-color:            rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-line {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
.border-line-soft {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-soft) / var(--tw-border-opacity, 1));
}
.border-line-strong {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line-strong) / var(--tw-border-opacity, 1));
}
.border-line\/50 {
  border-color:            rgb(var(--color-line) / 0.5);
}
.border-line\/60 {
  border-color:            rgb(var(--color-line) / 0.6);
}
.border-line\/70 {
  border-color:            rgb(var(--color-line) / 0.7);
}
.border-red-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity:            1;
  border-color:            rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-sky-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity:            1;
  border-color:            rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity:            1;
  border-color:            rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-800 {
  --tw-border-opacity:            1;
  border-color:            rgb(30 41 59 / var(--tw-border-opacity, 1));
}
.border-surface {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-surface) / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color:            transparent;
}
.border-b-white {
  --tw-border-opacity:            1;
  border-bottom-color:            rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color:            transparent;
}
.bg-\[\#FEE500\] {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 229 0 / var(--tw-bg-opacity, 1));
}
.bg-accent {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-accent) / var(--tw-bg-opacity, 1));
}
.bg-alert {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-alert-bg) / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity:            1;
  background-color:            rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/40 {
  background-color:            rgb(255 251 235 / 0.4);
}
.bg-amber-50\/50 {
  background-color:            rgb(255 251 235 / 0.5);
}
.bg-amber-500 {
  --tw-bg-opacity:            1;
  background-color:            rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-black\/30 {
  background-color:            rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color:            rgb(0 0 0 / 0.4);
}
.bg-black\/45 {
  background-color:            rgb(0 0 0 / 0.45);
}
.bg-black\/50 {
  background-color:            rgb(0 0 0 / 0.5);
}
.bg-black\/85 {
  background-color:            rgb(0 0 0 / 0.85);
}
.bg-blue-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity:            1;
  background-color:            rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-brand {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
}
.bg-brand-light {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-light) / var(--tw-bg-opacity, 1));
}
.bg-brand-light\/40 {
  background-color:            rgb(var(--color-brand-light) / 0.4);
}
.bg-brand-wash {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-wash, var(--color-brand-light)) / var(--tw-bg-opacity, 1));
}
.bg-brand\/10 {
  background-color:            rgb(var(--color-brand) / 0.1);
}
.bg-brand\/5 {
  background-color:            rgb(var(--color-brand) / 0.05);
}
.bg-current {
  background-color:            currentColor;
}
.bg-emerald-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/40 {
  background-color:            rgb(236 253 245 / 0.4);
}
.bg-emerald-500 {
  --tw-bg-opacity:            1;
  background-color:            rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity:            1;
  background-color:            rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400 {
  --tw-bg-opacity:            1;
  background-color:            rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-50\/50 {
  background-color:            rgb(249 250 251 / 0.5);
}
.bg-gray-800 {
  --tw-bg-opacity:            1;
  background-color:            rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity:            1;
  background-color:            rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-gray-900\/90 {
  background-color:            rgb(17 24 39 / 0.9);
}
.bg-green-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-400 {
  --tw-bg-opacity:            1;
  background-color:            rgb(129 140 248 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-500 {
  --tw-bg-opacity:            1;
  background-color:            rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity:            1;
  background-color:            rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-line {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-line) / var(--tw-bg-opacity, 1));
}
.bg-line\/25 {
  background-color:            rgb(var(--color-line) / 0.25);
}
.bg-line\/60 {
  background-color:            rgb(var(--color-line) / 0.6);
}
.bg-ok-bg {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-ok-bg, 236 253 245) / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-page {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
.bg-page\/95 {
  background-color:            rgb(var(--color-bg) / 0.95);
}
.bg-pink-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(252 231 243 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-50\/40 {
  background-color:            rgb(254 242 242 / 0.4);
}
.bg-red-50\/50 {
  background-color:            rgb(254 242 242 / 0.5);
}
.bg-red-500 {
  --tw-bg-opacity:            1;
  background-color:            rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity:            1;
  background-color:            rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-sky-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-sky-500 {
  --tw-bg-opacity:            1;
  background-color:            rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
  --tw-bg-opacity:            1;
  background-color:            rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-surface {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}
.bg-surface\/70 {
  background-color:            rgb(var(--color-surface) / 0.7);
}
.bg-surface\/90 {
  background-color:            rgb(var(--color-surface) / 0.9);
}
.bg-surface2 {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color:            transparent;
}
.bg-violet-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity:            1;
  background-color:            rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity:            1;
  background-color:            rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color:            rgb(255 255 255 / 0.1);
}
.bg-white\/20 {
  background-color:            rgb(255 255 255 / 0.2);
}
.bg-white\/50 {
  background-color:            rgb(255 255 255 / 0.5);
}
.bg-yellow-100 {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
  background-image:            linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image:            linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image:            linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image:            linear-gradient(to top, var(--tw-gradient-stops));
}
.from-amber-400 {
  --tw-gradient-from:            #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/70 {
  --tw-gradient-from:            rgb(0 0 0 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand {
  --tw-gradient-from:            rgb(var(--color-brand) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(var(--color-brand) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-brand-light {
  --tw-gradient-from:            rgb(var(--color-brand-light) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(var(--color-brand-light) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
  --tw-gradient-from:            #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-gray-100 {
  --tw-gradient-from:            #f3f4f6 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(243 244 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-orange-500 {
  --tw-gradient-from:            #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-rose-500 {
  --tw-gradient-from:            #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500 {
  --tw-gradient-from:            #0ea5e9 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from:            transparent var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-violet-500 {
  --tw-gradient-from:            #8b5cf6 var(--tw-gradient-from-position);
  --tw-gradient-to:            rgb(139 92 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand {
  --tw-gradient-to:            rgb(var(--color-brand) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), rgb(var(--color-brand) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-gray-100\/80 {
  --tw-gradient-to:            rgb(243 244 246 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), rgb(243 244 246 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-surface {
  --tw-gradient-to:            rgb(var(--color-surface) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops:            var(--tw-gradient-from), rgb(var(--color-surface) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-accent {
  --tw-gradient-to:            rgb(var(--color-accent) / 1) var(--tw-gradient-to-position);
}
.to-accent\/10 {
  --tw-gradient-to:            rgb(var(--color-accent) / 0.1) var(--tw-gradient-to-position);
}
.to-accent\/15 {
  --tw-gradient-to:            rgb(var(--color-accent) / 0.15) var(--tw-gradient-to-position);
}
.to-blue-500 {
  --tw-gradient-to:            #3b82f6 var(--tw-gradient-to-position);
}
.to-brand\/30 {
  --tw-gradient-to:            rgb(var(--color-brand) / 0.3) var(--tw-gradient-to-position);
}
.to-orange-500 {
  --tw-gradient-to:            #f97316 var(--tw-gradient-to-position);
}
.to-purple-500 {
  --tw-gradient-to:            #a855f7 var(--tw-gradient-to-position);
}
.to-red-500 {
  --tw-gradient-to:            #ef4444 var(--tw-gradient-to-position);
}
.to-teal-500 {
  --tw-gradient-to:            #14b8a6 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to:            transparent var(--tw-gradient-to-position);
}
.fill-current {
  fill:            currentColor;
}
.object-contain {
  -o-object-fit:            contain;
     object-fit:            contain;
}
.object-cover {
  -o-object-fit:            cover;
     object-fit:            cover;
}
.p-0 {
  padding:            0px;
}
.p-0\.5 {
  padding:            0.125rem;
}
.p-1 {
  padding:            0.25rem;
}
.p-1\.5 {
  padding:            0.375rem;
}
.p-10 {
  padding:            2.5rem;
}
.p-12 {
  padding:            3rem;
}
.p-2 {
  padding:            0.5rem;
}
.p-2\.5 {
  padding:            0.625rem;
}
.p-3 {
  padding:            0.75rem;
}
.p-4 {
  padding:            1rem;
}
.p-5 {
  padding:            1.25rem;
}
.p-6 {
  padding:            1.5rem;
}
.p-8 {
  padding:            2rem;
}
.p-\[2px\] {
  padding:            2px;
}
.px-0 {
  padding-left:            0px;
  padding-right:            0px;
}
.px-0\.5 {
  padding-left:            0.125rem;
  padding-right:            0.125rem;
}
.px-1 {
  padding-left:            0.25rem;
  padding-right:            0.25rem;
}
.px-1\.5 {
  padding-left:            0.375rem;
  padding-right:            0.375rem;
}
.px-10 {
  padding-left:            2.5rem;
  padding-right:            2.5rem;
}
.px-2 {
  padding-left:            0.5rem;
  padding-right:            0.5rem;
}
.px-2\.5 {
  padding-left:            0.625rem;
  padding-right:            0.625rem;
}
.px-3 {
  padding-left:            0.75rem;
  padding-right:            0.75rem;
}
.px-3\.5 {
  padding-left:            0.875rem;
  padding-right:            0.875rem;
}
.px-4 {
  padding-left:            1rem;
  padding-right:            1rem;
}
.px-5 {
  padding-left:            1.25rem;
  padding-right:            1.25rem;
}
.px-6 {
  padding-left:            1.5rem;
  padding-right:            1.5rem;
}
.px-8 {
  padding-left:            2rem;
  padding-right:            2rem;
}
.px-card {
  padding-left:            var(--pad-card, 0.75rem);
  padding-right:            var(--pad-card, 0.75rem);
}
.px-gutter {
  padding-left:            var(--pad-gutter, 1rem);
  padding-right:            var(--pad-gutter, 1rem);
}
.py-0\.5 {
  padding-top:            0.125rem;
  padding-bottom:            0.125rem;
}
.py-1 {
  padding-top:            0.25rem;
  padding-bottom:            0.25rem;
}
.py-1\.5 {
  padding-top:            0.375rem;
  padding-bottom:            0.375rem;
}
.py-10 {
  padding-top:            2.5rem;
  padding-bottom:            2.5rem;
}
.py-12 {
  padding-top:            3rem;
  padding-bottom:            3rem;
}
.py-14 {
  padding-top:            3.5rem;
  padding-bottom:            3.5rem;
}
.py-16 {
  padding-top:            4rem;
  padding-bottom:            4rem;
}
.py-2 {
  padding-top:            0.5rem;
  padding-bottom:            0.5rem;
}
.py-2\.5 {
  padding-top:            0.625rem;
  padding-bottom:            0.625rem;
}
.py-20 {
  padding-top:            5rem;
  padding-bottom:            5rem;
}
.py-3 {
  padding-top:            0.75rem;
  padding-bottom:            0.75rem;
}
.py-3\.5 {
  padding-top:            0.875rem;
  padding-bottom:            0.875rem;
}
.py-4 {
  padding-top:            1rem;
  padding-bottom:            1rem;
}
.py-5 {
  padding-top:            1.25rem;
  padding-bottom:            1.25rem;
}
.py-6 {
  padding-top:            1.5rem;
  padding-bottom:            1.5rem;
}
.py-8 {
  padding-top:            2rem;
  padding-bottom:            2rem;
}
.py-block {
  padding-top:            var(--pad-block, 2rem);
  padding-bottom:            var(--pad-block, 2rem);
}
.py-card-top {
  padding-top:            var(--pad-card-top, 0.625rem);
  padding-bottom:            var(--pad-card-top, 0.625rem);
}
.py-px {
  padding-top:            1px;
  padding-bottom:            1px;
}
.pb-1 {
  padding-bottom:            0.25rem;
}
.pb-12 {
  padding-bottom:            3rem;
}
.pb-14 {
  padding-bottom:            3.5rem;
}
.pb-16 {
  padding-bottom:            4rem;
}
.pb-2 {
  padding-bottom:            0.5rem;
}
.pb-2\.5 {
  padding-bottom:            0.625rem;
}
.pb-20 {
  padding-bottom:            5rem;
}
.pb-3 {
  padding-bottom:            0.75rem;
}
.pb-4 {
  padding-bottom:            1rem;
}
.pb-5 {
  padding-bottom:            1.25rem;
}
.pb-8 {
  padding-bottom:            2rem;
}
.pb-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom:            max(1rem, env(safe-area-inset-bottom));
}
.pb-card-bottom {
  padding-bottom:            var(--pad-card-bottom, 0.875rem);
}
.pl-1 {
  padding-left:            0.25rem;
}
.pl-3 {
  padding-left:            0.75rem;
}
.pl-4 {
  padding-left:            1rem;
}
.pl-5 {
  padding-left:            1.25rem;
}
.pl-6 {
  padding-left:            1.5rem;
}
.pl-8 {
  padding-left:            2rem;
}
.pr-1 {
  padding-right:            0.25rem;
}
.pr-16 {
  padding-right:            4rem;
}
.pr-2 {
  padding-right:            0.5rem;
}
.pr-3 {
  padding-right:            0.75rem;
}
.pr-3\.5 {
  padding-right:            0.875rem;
}
.pr-6 {
  padding-right:            1.5rem;
}
.pr-7 {
  padding-right:            1.75rem;
}
.pt-1 {
  padding-top:            0.25rem;
}
.pt-2 {
  padding-top:            0.5rem;
}
.pt-3 {
  padding-top:            0.75rem;
}
.pt-4 {
  padding-top:            1rem;
}
.pt-5 {
  padding-top:            1.25rem;
}
.pt-6 {
  padding-top:            1.5rem;
}
.pt-8 {
  padding-top:            2rem;
}
.pt-\[177\.78\%\] {
  padding-top:            177.78%;
}
.pt-\[56\.25\%\] {
  padding-top:            56.25%;
}
.pt-\[75\%\] {
  padding-top:            75%;
}
.pt-card-top {
  padding-top:            var(--pad-card-top, 0.625rem);
}
.text-left {
  text-align:            left;
}
.text-center {
  text-align:            center;
}
.text-right {
  text-align:            right;
}
.align-top {
  vertical-align:            top;
}
.align-middle {
  vertical-align:            middle;
}
.font-display {
  font-family:            var(--font-display);
}
.font-mono {
  font-family:            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family:            ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
  font-size:            1.5rem;
  line-height:            2rem;
}
.text-2xs {
  font-size:            0.625rem;
  line-height:            0.875rem;
}
.text-3xl {
  font-size:            1.875rem;
  line-height:            2.25rem;
}
.text-4xl {
  font-size:            2.25rem;
  line-height:            2.5rem;
}
.text-\[10px\] {
  font-size:            10px;
}
.text-\[11px\] {
  font-size:            11px;
}
.text-\[13px\] {
  font-size:            13px;
}
.text-\[15px\] {
  font-size:            15px;
}
.text-\[17px\] {
  font-size:            17px;
}
.text-\[9px\] {
  font-size:            9px;
}
.text-base {
  font-size:            1rem;
  line-height:            1.5rem;
}
.text-lg {
  font-size:            1.125rem;
  line-height:            1.75rem;
}
.text-name {
  font-size:            var(--size-name, 0.875rem);
  line-height:            var(--leading-name, 1.25rem);
}
.text-price {
  font-size:            var(--size-price, 1.125rem);
  line-height:            var(--leading-price, 1.75rem);
}
.text-sm {
  font-size:            0.875rem;
  line-height:            1.25rem;
}
.text-title {
  font-size:            var(--size-title, 1.25rem);
  line-height:            var(--leading-title, 1.75rem);
}
.text-xl {
  font-size:            1.25rem;
  line-height:            1.75rem;
}
.text-xs {
  font-size:            0.75rem;
  line-height:            1rem;
}
.font-bold {
  font-weight:            700;
}
.font-extrabold {
  font-weight:            800;
}
.font-medium {
  font-weight:            500;
}
.font-normal {
  font-weight:            400;
}
.font-price {
  font-weight:            var(--weight-price, 700);
}
.font-semibold {
  font-weight:            600;
}
.uppercase {
  text-transform:            uppercase;
}
.italic {
  font-style:            italic;
}
.not-italic {
  font-style:            normal;
}
.tabular-nums {
  --tw-numeric-spacing:            tabular-nums;
  font-variant-numeric:            var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-8 {
  line-height:            2rem;
}
.leading-\[1\.08\] {
  line-height:            1.08;
}
.leading-none {
  line-height:            1;
}
.leading-relaxed {
  line-height:            1.625;
}
.leading-snug {
  line-height:            1.375;
}
.leading-tight {
  line-height:            1.25;
}
.tracking-\[0\.18em\] {
  letter-spacing:            0.18em;
}
.tracking-\[0\.35em\] {
  letter-spacing:            0.35em;
}
.tracking-\[0\.3em\] {
  letter-spacing:            0.3em;
}
.tracking-tight {
  letter-spacing:            -0.025em;
}
.tracking-wide {
  letter-spacing:            0.025em;
}
.tracking-wider {
  letter-spacing:            0.05em;
}
.tracking-widest {
  letter-spacing:            0.1em;
}
.text-\[\#191919\] {
  --tw-text-opacity:            1;
  color:            rgb(25 25 25 / var(--tw-text-opacity, 1));
}
.text-accent {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-accent) / var(--tw-text-opacity, 1));
}
.text-alert-icon {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-alert-icon) / var(--tw-text-opacity, 1));
}
.text-alert-text {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-alert-text) / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity:            1;
  color:            rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity:            1;
  color:            rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity:            1;
  color:            rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity:            1;
  color:            rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity:            1;
  color:            rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-body {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
}
.text-body\/70 {
  color:            rgb(var(--color-text) / 0.7);
}
.text-body\/75 {
  color:            rgb(var(--color-text) / 0.75);
}
.text-body\/80 {
  color:            rgb(var(--color-text) / 0.8);
}
.text-body\/85 {
  color:            rgb(var(--color-text) / 0.85);
}
.text-body2 {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text-2) / var(--tw-text-opacity, 1));
}
.text-brand {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}
.text-brand-dark {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-dark) / var(--tw-text-opacity, 1));
}
.text-brand-on {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-on, 255 255 255) / var(--tw-text-opacity, 1));
}
.text-brand-text {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-text, var(--color-brand)) / var(--tw-text-opacity, 1));
}
.text-brand\/60 {
  color:            rgb(var(--color-brand) / 0.6);
}
.text-emerald-400 {
  --tw-text-opacity:            1;
  color:            rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity:            1;
  color:            rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity:            1;
  color:            rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity:            1;
  color:            rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity:            1;
  color:            rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-gray-100 {
  --tw-text-opacity:            1;
  color:            rgb(243 244 246 / var(--tw-text-opacity, 1));
}
.text-gray-200 {
  --tw-text-opacity:            1;
  color:            rgb(229 231 235 / var(--tw-text-opacity, 1));
}
.text-gray-300 {
  --tw-text-opacity:            1;
  color:            rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity:            1;
  color:            rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity:            1;
  color:            rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity:            1;
  color:            rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity:            1;
  color:            rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity:            1;
  color:            rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity:            1;
  color:            rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity:            1;
  color:            rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity:            1;
  color:            rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-indigo-400 {
  --tw-text-opacity:            1;
  color:            rgb(129 140 248 / var(--tw-text-opacity, 1));
}
.text-indigo-500 {
  --tw-text-opacity:            1;
  color:            rgb(99 102 241 / var(--tw-text-opacity, 1));
}
.text-indigo-600 {
  --tw-text-opacity:            1;
  color:            rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity:            1;
  color:            rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-line {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-line) / var(--tw-text-opacity, 1));
}
.text-muted {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted) / var(--tw-text-opacity, 1));
}
.text-muted\/60 {
  color:            rgb(var(--color-muted) / 0.6);
}
.text-muted\/70 {
  color:            rgb(var(--color-muted) / 0.7);
}
.text-muted\/80 {
  color:            rgb(var(--color-muted) / 0.8);
}
.text-muted2 {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-muted-2) / var(--tw-text-opacity, 1));
}
.text-ok {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-ok-text) / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity:            1;
  color:            rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-pink-700 {
  --tw-text-opacity:            1;
  color:            rgb(190 24 93 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity:            1;
  color:            rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity:            1;
  color:            rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity:            1;
  color:            rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity:            1;
  color:            rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity:            1;
  color:            rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity:            1;
  color:            rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity:            1;
  color:            rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity:            1;
  color:            rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
  --tw-text-opacity:            1;
  color:            rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity:            1;
  color:            rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity:            1;
  color:            rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity:            1;
  color:            rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity:            1;
  color:            rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity:            1;
  color:            rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity:            1;
  color:            rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity:            1;
  color:            rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color:            transparent;
}
.text-violet-700 {
  --tw-text-opacity:            1;
  color:            rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity:            1;
  color:            rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80 {
  color:            rgb(255 255 255 / 0.8);
}
.text-yellow-700 {
  --tw-text-opacity:            1;
  color:            rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line:            underline;
}
.line-through {
  text-decoration-line:            line-through;
}
.decoration-alert-line {
  text-decoration-color:            rgb(var(--color-alert-line) / 1);
}
.decoration-muted {
  text-decoration-color:            rgb(var(--color-muted) / 1);
}
.decoration-dashed {
  text-decoration-style:            dashed;
}
.underline-offset-2 {
  text-underline-offset:            2px;
}
.accent-brand {
  accent-color:            rgb(var(--color-brand) / 1);
}
.\!opacity-100 {
  opacity:            1 !important;
}
.opacity-0 {
  opacity:            0;
}
.opacity-100 {
  opacity:            1;
}
.opacity-30 {
  opacity:            0.3;
}
.opacity-40 {
  opacity:            0.4;
}
.opacity-50 {
  opacity:            0.5;
}
.opacity-55 {
  opacity:            0.55;
}
.opacity-60 {
  opacity:            0.6;
}
.opacity-70 {
  opacity:            0.7;
}
.shadow {
  --tw-shadow:            0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow:            0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored:            0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow:            var(--shadow-card, none);
  --tw-shadow-colored:            var(--shadow-card, none);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow:            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow:            0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:            0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow:            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline:            2px solid transparent;
  outline-offset:            2px;
}
.outline {
  outline-style:            solid;
}
.ring-1 {
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-brand {
  --tw-ring-opacity:            1;
  --tw-ring-color:            rgb(var(--color-brand) / var(--tw-ring-opacity, 1));
}
.ring-brand\/20 {
  --tw-ring-color:            rgb(var(--color-brand) / 0.2);
}
.ring-indigo-200 {
  --tw-ring-opacity:            1;
  --tw-ring-color:            rgb(199 210 254 / var(--tw-ring-opacity, 1));
}
.ring-indigo-300 {
  --tw-ring-opacity:            1;
  --tw-ring-color:            rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.ring-line\/60 {
  --tw-ring-color:            rgb(var(--color-line) / 0.6);
}
.ring-offset-1 {
  --tw-ring-offset-width:            1px;
}
.blur {
  --tw-blur:            blur(8px);
  filter:            var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale:            grayscale(100%);
  filter:            var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert:            invert(100%);
  filter:            var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter:            var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur:            blur(8px);
  backdrop-filter:            var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur:            blur(4px);
  backdrop-filter:            var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter:            var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.transition-all {
  transition-property:            all;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.transition-colors {
  transition-property:            color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.transition-opacity {
  transition-property:            opacity;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.transition-transform {
  transition-property:            transform;
  transition-timing-function:            cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:            150ms;
}
.duration-150 {
  transition-duration:            150ms;
}
.duration-200 {
  transition-duration:            200ms;
}
.duration-300 {
  transition-duration:            300ms;
}
.duration-500 {
  transition-duration:            500ms;
}
.duration-theme {
  transition-duration:            var(--transition-speed, 300ms);
}
.ease-out {
  transition-timing-function:            cubic-bezier(0, 0, 0.2, 1);
}
.\[-ms-overflow-style\:none\] {
  -ms-overflow-style:            none;
}
.\[filter\:grayscale\(1\)\] {
  filter:            grayscale(1);
}
.\[max-height\:85dvh\] {
  max-height:            85dvh;
}
.\[max-height\:90dvh\] {
  max-height:            90dvh;
}
.\[scrollbar-width\:none\] {
  scrollbar-width:            none;
}
body {
  /* 시맨틱 토큰 — 테마(noir 등)가 페이지 배경/본문색을 결정 */
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing:            antialiased;
  -moz-osx-font-smoothing:            grayscale;
  /* 본문 폰트는 타입 축 토큰 — 폴백은 토큰화 이전 스택이라 미이관 팩의 화면은 그대로다 */
  font-family: var(--font-body, "Pretendard Variable", Pretendard, system-ui, -apple-system,
      "Segoe UI", "Malgun Gothic", sans-serif);
}
/* 관리자 콘솔은 테마 대상 아님 — 항상 라이트 (테마와 무관한 운영 화면).
   시맨틱 토큰도 라이트 값으로 고정 — 공용 컴포넌트(components/shared/modal 등)가
   토큰 기반이어도 다크 팔레트에서 관리자 화면이 어두워지지 않는다. */
[data-palette] body:has([data-admin-root]) {
  background-color: rgb(249 250 251);
  color: rgb(17 24 39);
  --color-bg: 249 250 251;
  --color-surface: 255 255 255;
  --color-text: 17 24 39;
  --color-muted: 107 114 128;
  --color-line: 229 231 235;
  /* 파생 토큰도 라이트 고정 — 빠뜨리면 noir 팔레트 사용자의 관리자 화면에서
     기본 5종만 라이트로 돌아가고 파생 토큰은 다크로 남아 색이 섞인다 */
  --color-surface-2: 248 250 252;
  --color-surface-3: 241 245 249;
  --color-line-soft: 248 250 252;
  --color-line-strong: 229 231 235;
  --color-text-2: 71 85 105;
  --color-muted-2: 107 114 128;
  --color-alert-bg: 254 242 242;
  --color-alert-bg-hover: 254 226 226;
  --color-alert-text: 185 28 28;
  --color-alert-icon: 248 113 113;
  --color-alert-line: 254 202 202;
  --color-ok-text: 4 120 87;
  /* 브랜드 계열도 고정 — 여기가 비어 있어서 `bg-brand` 를 쓰는 공용/벤더 컴포넌트가
     사이트 브랜드색(market 오렌지 등)을 그대로 따라가고 있었다. 값은 gift24(인디고) =
     관리자 레시피가 원래 하드코딩하던 색이라 화면은 그대로다. */
  --color-brand: 79 70 229;
  --color-brand-dark: 67 56 202;
  --color-brand-light: 238 242 255;
  --color-brand-wash: 234 234 246;
  --color-brand-text: 79 70 229;
  --color-accent: 244 63 94;
  --color-brand-on: 255 255 255;
  --color-accent-on: 255 255 255;
  --color-ok-bg: 236 253 245;
  --color-warn-text: 180 83 9;
  --color-warn-bg: 255 251 235;
  --color-info-text: 3 105 161;
  --color-info-bg: 240 249 255;
  /* 레이아웃 축 토큰도 고정 — 공용 Modal 등이 rounded-card/font-display 를 써도 관리자는 불변 */
  --radius-card: 0.75rem;
  --font-display: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI",
    "Malgun Gothic", sans-serif;
  /* 테마 축 토큰(theme-axis-system)도 고정 — 형태·밀도·타입·엘리베이션이 관리자로 새지 않게.
     값은 @ops/ui preset 폴백과 동일(=토큰화 이전 하드코딩 값). 축 추가 시 여기도 함께 채울 것 */
  --radius-control: 0.5rem;
  --radius-chip: 9999px;
  --radius-avatar: 9999px;
  --radius-image: 0.75rem;
  --border-width: 1px;
  --shadow-card: none;
  --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --hover-lift: 0.25rem;
  --transition-speed: 300ms;
  --space-unit: 1;
  --gap-grid: 0.75rem;
  --gap-section: 2.5rem;
  --pad-card: 0.75rem;
  --pad-card-top: 0.625rem;
  --pad-card-bottom: 0.875rem;
  --pad-gutter: 1rem;
  --pad-block: 2rem;
  --row-height: 2.75rem;
  --scale-ratio: 1.125;
  --size-price: 1.125rem;
  --leading-price: 1.75rem;
  --size-title: 1.25rem;
  --leading-title: 1.75rem;
  --size-name: 0.875rem;
  --leading-name: 1.25rem;
  --weight-price: 700;
  --tracking-title: -0.025em;
  --media-ratio-card: 4 / 3;
  --media-ratio-hero: 16 / 9;
  --media-fit: cover;
}
/* Capacitor 앱 셸(iOS) — 상태바/노치 영역 확보 (capacitor-app-shell-v1).
   data-native-app 은 app-bridge-init 이 세팅. Android 는 셸이 네이티브 마진으로 처리
   (capacitor.config adjustMarginsForEdgeToEdge — Android WebView 는 env() 가 0이라 CSS 불가). */
html[data-native-app="ios"] body {
  padding-top: env(safe-area-inset-top);
}
html[data-native-app="ios"] body::before {
  /* 상태바 뒤 스크롤 콘텐츠 비침 방지 — surface 색 스트립 */
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: env(safe-area-inset-top);
  background: rgb(var(--color-surface));
}
html[data-native-app="ios"] header {
  /* sticky 헤더는 상태바 스트립 아래에 정지 (비 sticky 헤더엔 top 무영향) */
  top: env(safe-area-inset-top);
}
@media (min-width: 640px) {
  .sm\:flex-row {
    display:            flex;
    align-items:            center;
    gap:            0.5rem;
  }
}
.file\:mr-3::file-selector-button {
  margin-right:            0.75rem;
}
.file\:rounded-lg::file-selector-button {
  border-radius:            0.5rem;
}
.file\:border-0::file-selector-button {
  border-width:            0px;
}
.file\:bg-gray-100::file-selector-button {
  --tw-bg-opacity:            1;
  background-color:            rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.file\:px-3::file-selector-button {
  padding-left:            0.75rem;
  padding-right:            0.75rem;
}
.file\:py-1\.5::file-selector-button {
  padding-top:            0.375rem;
  padding-bottom:            0.375rem;
}
.file\:text-sm::file-selector-button {
  font-size:            0.875rem;
  line-height:            1.25rem;
}
.last\:border-0:last-child {
  border-width:            0px;
}
.last\:border-b-0:last-child {
  border-bottom-width:            0px;
}
.hover\:-translate-y-lift:hover {
  --tw-translate-y:            calc(var(--hover-lift, 0.25rem) * -1);
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-brand:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}
.hover\:border-gray-300:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-300:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.hover\:border-indigo-400:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(129 140 248 / var(--tw-border-opacity, 1));
}
.hover\:border-muted:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-muted) / var(--tw-border-opacity, 1));
}
.hover\:border-slate-300:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-400:hover {
  --tw-border-opacity:            1;
  border-color:            rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.hover\:bg-black\/65:hover {
  background-color:            rgb(0 0 0 / 0.65);
}
.hover\:bg-brand-dark:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-light:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand-light) / var(--tw-bg-opacity, 1));
}
.hover\:bg-brand-light\/30:hover {
  background-color:            rgb(var(--color-brand-light) / 0.3);
}
.hover\:bg-brand\/5:hover {
  background-color:            rgb(var(--color-brand) / 0.05);
}
.hover\:bg-emerald-100:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-50:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-100:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-50:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(67 56 202 / var(--tw-bg-opacity, 1));
}
.hover\:bg-page:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
.hover\:bg-page\/60:hover {
  background-color:            rgb(var(--color-bg) / 0.6);
}
.hover\:bg-page\/70:hover {
  background-color:            rgb(var(--color-bg) / 0.7);
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface\/70:hover {
  background-color:            rgb(var(--color-surface) / 0.7);
}
.hover\:bg-surface2:hover {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover {
  background-color:            rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/30:hover {
  background-color:            rgb(255 255 255 / 0.3);
}
.hover\:text-body:hover {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-text) / var(--tw-text-opacity, 1));
}
.hover\:text-brand:hover {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}
.hover\:text-brand-dark:hover {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-dark) / var(--tw-text-opacity, 1));
}
.hover\:text-brand-text:hover {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-text, var(--color-brand)) / var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover {
  --tw-text-opacity:            1;
  color:            rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover {
  --tw-text-opacity:            1;
  color:            rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover {
  --tw-text-opacity:            1;
  color:            rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover {
  --tw-text-opacity:            1;
  color:            rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-600:hover {
  --tw-text-opacity:            1;
  color:            rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.hover\:text-indigo-700:hover {
  --tw-text-opacity:            1;
  color:            rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover {
  --tw-text-opacity:            1;
  color:            rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-red-500:hover {
  --tw-text-opacity:            1;
  color:            rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover {
  --tw-text-opacity:            1;
  color:            rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover {
  --tw-text-opacity:            1;
  color:            rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-800:hover {
  --tw-text-opacity:            1;
  color:            rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line:            underline;
}
.hover\:opacity-100:hover {
  opacity:            1;
}
.hover\:opacity-90:hover {
  opacity:            0.9;
}
.hover\:opacity-95:hover {
  opacity:            0.95;
}
.hover\:shadow-hover:hover {
  --tw-shadow:            var(--shadow-hover, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
  --tw-shadow-colored:            0 10px 15px -3px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --tw-shadow:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-brand\/40:hover {
  --tw-ring-color:            rgb(var(--color-brand) / 0.4);
}
.focus\:border-brand:focus {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline:            2px solid transparent;
  outline-offset:            2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-brand\/20:focus {
  --tw-ring-color:            rgb(var(--color-brand) / 0.2);
}
.focus\:ring-brand\/25:focus {
  --tw-ring-color:            rgb(var(--color-brand) / 0.25);
}
.focus\:ring-indigo-300:focus {
  --tw-ring-opacity:            1;
  --tw-ring-color:            rgb(165 180 252 / var(--tw-ring-opacity, 1));
}
.focus-visible\:outline-none:focus-visible {
  outline:            2px solid transparent;
  outline-offset:            2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow:            var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:            var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:            var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-brand\/40:focus-visible {
  --tw-ring-color:            rgb(var(--color-brand) / 0.4);
}
.active\:scale-95:active {
  --tw-scale-x:            .95;
  --tw-scale-y:            .95;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.97\]:active {
  --tw-scale-x:            0.97;
  --tw-scale-y:            0.97;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:cursor-grabbing:active {
  cursor:            grabbing;
}
.active\:bg-page:active {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
.active\:bg-surface2:active {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.disabled\:cursor-default:disabled {
  cursor:            default;
}
.disabled\:cursor-not-allowed:disabled {
  cursor:            not-allowed;
}
.disabled\:bg-gray-50:disabled {
  --tw-bg-opacity:            1;
  background-color:            rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.disabled\:text-gray-400:disabled {
  --tw-text-opacity:            1;
  color:            rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-30:disabled {
  opacity:            0.3;
}
.disabled\:opacity-40:disabled {
  opacity:            0.4;
}
.disabled\:opacity-50:disabled {
  opacity:            0.5;
}
.disabled\:opacity-60:disabled {
  opacity:            0.6;
}
.disabled\:hover\:border-gray-200:hover:disabled {
  --tw-border-opacity:            1;
  border-color:            rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.disabled\:hover\:text-gray-400:hover:disabled {
  --tw-text-opacity:            1;
  color:            rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.disabled\:hover\:text-inherit:hover:disabled {
  color:            inherit;
}
.group[open] .group-open\:rotate-180 {
  --tw-rotate:            180deg;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:visible {
  visibility:            visible;
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x:            0.125rem;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x:            1.05;
  --tw-scale-y:            1.05;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.015\] {
  --tw-scale-x:            1.015;
  --tw-scale-y:            1.015;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x:            1.03;
  --tw-scale-y:            1.03;
  transform:            translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-brand {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-brand) / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-brand {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-brand) / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-surface2 {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-surface-2) / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-brand {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-brand-text {
  --tw-text-opacity:            1;
  color:            rgb(var(--color-brand-text, var(--color-brand)) / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-gray-500 {
  --tw-text-opacity:            1;
  color:            rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity:            1;
  color:            rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline {
  text-decoration-line:            underline;
}
.group:hover .group-hover\:opacity-100 {
  opacity:            1;
}
.group:hover .group-hover\:shadow-md {
  --tw-shadow:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:            0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:            var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@supports (backdrop-filter: var(--tw)) {
  .supports-\[backdrop-filter\]\:bg-page\/80 {
    background-color:            rgb(var(--color-bg) / 0.8);
  }
  .supports-\[backdrop-filter\]\:bg-surface\/80 {
    background-color:            rgb(var(--color-surface) / 0.8);
  }
  .supports-\[backdrop-filter\]\:backdrop-blur-md {
    --tw-backdrop-blur:            blur(12px);
    backdrop-filter:            var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
  .supports-\[backdrop-filter\]\:backdrop-blur-xl {
    --tw-backdrop-blur:            blur(24px);
    backdrop-filter:            var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  }
}
@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column:            span 2 / span 2;
  }
  .sm\:flex {
    display:            flex;
  }
  .sm\:table-cell {
    display:            table-cell;
  }
  .sm\:hidden {
    display:            none;
  }
  .sm\:max-h-\[320px\] {
    max-height:            320px;
  }
  .sm\:w-1\/2 {
    width:            50%;
  }
  .sm\:w-1\/3 {
    width:            33.333333%;
  }
  .sm\:w-2\/3 {
    width:            66.666667%;
  }
  .sm\:min-w-\[228px\] {
    min-width:            228px;
  }
  .sm\:max-w-xs {
    max-width:            20rem;
  }
  .sm\:auto-rows-\[10rem\] {
    grid-auto-rows:            10rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns:            repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns:            repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns:            repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5 {
    grid-template-columns:            repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns:            repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols-\[1\.6fr_1fr\] {
    grid-template-columns:            1.6fr 1fr;
  }
  .sm\:grid-cols-\[16rem_1fr\] {
    grid-template-columns:            16rem 1fr;
  }
  .sm\:flex-row {
    flex-direction:            row;
  }
  .sm\:flex-row-reverse {
    flex-direction:            row-reverse;
  }
  .sm\:flex-wrap {
    flex-wrap:            wrap;
  }
  .sm\:items-center {
    align-items:            center;
  }
  .sm\:justify-between {
    justify-content:            space-between;
  }
  .sm\:overflow-visible {
    overflow:            visible;
  }
  .sm\:p-8 {
    padding:            2rem;
  }
  .sm\:pb-0 {
    padding-bottom:            0px;
  }
  .sm\:text-3xl {
    font-size:            1.875rem;
    line-height:            2.25rem;
  }
  .sm\:text-4xl {
    font-size:            2.25rem;
    line-height:            2.5rem;
  }
  .sm\:text-5xl {
    font-size:            3rem;
    line-height:            1;
  }
}
@media (min-width: 768px) {
  .md\:table-cell {
    display:            table-cell;
  }
  .md\:min-h-0 {
    min-height:            0px;
  }
  .md\:grid-cols-4 {
    grid-template-columns:            repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns:            repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-8 {
    grid-template-columns:            repeat(8, minmax(0, 1fr));
  }
  .md\:grid-cols-\[3rem_minmax\(0\2c 1fr\)_minmax\(0\2c 1\.05fr\)\] {
    grid-template-columns:            3rem minmax(0,1fr) minmax(0,1.05fr);
  }
  .md\:overflow-visible {
    overflow:            visible;
  }
  .md\:border-r {
    border-right-width:            1px;
  }
  .md\:border-t-0 {
    border-top-width:            0px;
  }
  .md\:border-line {
    --tw-border-opacity:            1;
    border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
  }
  .md\:py-5 {
    padding-top:            1.25rem;
    padding-bottom:            1.25rem;
  }
  .md\:pr-0 {
    padding-right:            0px;
  }
  .md\:text-2xl {
    font-size:            1.5rem;
    line-height:            2rem;
  }
}
@media (min-width: 1024px) {
  .lg\:sticky {
    position:            sticky;
  }
  .lg\:top-16 {
    top:            4rem;
  }
  .lg\:top-20 {
    top:            5rem;
  }
  .lg\:top-6 {
    top:            1.5rem;
  }
  .lg\:col-span-2 {
    grid-column:            span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column:            span 3 / span 3;
  }
  .lg\:block {
    display:            block;
  }
  .lg\:table-cell {
    display:            table-cell;
  }
  .lg\:max-h-\[480px\] {
    max-height:            480px;
  }
  .lg\:grid-cols-2 {
    grid-template-columns:            repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns:            repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns:            repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns:            repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns:            repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[1\.05fr_0\.95fr\] {
    grid-template-columns:            1.05fr 0.95fr;
  }
  .lg\:grid-cols-\[1fr_360px\] {
    grid-template-columns:            1fr 360px;
  }
  .lg\:grid-cols-\[1fr_380px\] {
    grid-template-columns:            1fr 380px;
  }
  .lg\:grid-cols-\[1fr_400px\] {
    grid-template-columns:            1fr 400px;
  }
  .lg\:grid-cols-\[1fr_420px\] {
    grid-template-columns:            1fr 420px;
  }
  .lg\:grid-rows-\[auto_1fr\] {
    grid-template-rows:            auto 1fr;
  }
  .lg\:items-start {
    align-items:            flex-start;
  }
  .lg\:gap-x-10 {
    -moz-column-gap:            2.5rem;
         column-gap:            2.5rem;
  }
  .lg\:self-start {
    align-self:            flex-start;
  }
  .lg\:py-20 {
    padding-top:            5rem;
    padding-bottom:            5rem;
  }
  .lg\:\[grid-area\:content\] {
    grid-area:            content;
  }
  .lg\:\[grid-area\:image\] {
    grid-area:            image;
  }
  .lg\:\[grid-area\:panel\] {
    grid-area:            panel;
  }
  .lg\:\[grid-template-areas\:\'image_panel\'_\'content_panel\'\] {
    grid-template-areas:            'image panel' 'content panel';
  }
}
@media (min-width: 1280px) {
  .xl\:table {
    display:            table;
  }
  .xl\:hidden {
    display:            none;
  }
  .xl\:grid-cols-3 {
    grid-template-columns:            repeat(3, minmax(0, 1fr));
  }
  .xl\:grid-cols-7 {
    grid-template-columns:            repeat(7, minmax(0, 1fr));
  }
}
@media (prefers-color-scheme: dark) {
  .dark\:bg-amber-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(69 26 3 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-amber-950\/60 {
    background-color:            rgb(69 26 3 / 0.6);
  }
  .dark\:bg-blue-500 {
    --tw-bg-opacity:            1;
    background-color:            rgb(59 130 246 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-blue-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(23 37 84 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-emerald-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(2 44 34 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-green-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(5 46 22 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-indigo-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(30 27 75 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-orange-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(67 20 7 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-purple-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(59 7 100 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-red-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(69 10 10 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-red-950\/60 {
    background-color:            rgb(69 10 10 / 0.6);
  }
  .dark\:bg-slate-700 {
    --tw-bg-opacity:            1;
    background-color:            rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-violet-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(46 16 101 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-yellow-950 {
    --tw-bg-opacity:            1;
    background-color:            rgb(66 32 6 / var(--tw-bg-opacity, 1));
  }
  .dark\:text-amber-300 {
    --tw-text-opacity:            1;
    color:            rgb(252 211 77 / var(--tw-text-opacity, 1));
  }
  .dark\:text-blue-300 {
    --tw-text-opacity:            1;
    color:            rgb(147 197 253 / var(--tw-text-opacity, 1));
  }
  .dark\:text-emerald-300 {
    --tw-text-opacity:            1;
    color:            rgb(110 231 183 / var(--tw-text-opacity, 1));
  }
  .dark\:text-green-300 {
    --tw-text-opacity:            1;
    color:            rgb(134 239 172 / var(--tw-text-opacity, 1));
  }
  .dark\:text-indigo-300 {
    --tw-text-opacity:            1;
    color:            rgb(165 180 252 / var(--tw-text-opacity, 1));
  }
  .dark\:text-orange-300 {
    --tw-text-opacity:            1;
    color:            rgb(253 186 116 / var(--tw-text-opacity, 1));
  }
  .dark\:text-purple-300 {
    --tw-text-opacity:            1;
    color:            rgb(216 180 254 / var(--tw-text-opacity, 1));
  }
  .dark\:text-red-300 {
    --tw-text-opacity:            1;
    color:            rgb(252 165 165 / var(--tw-text-opacity, 1));
  }
  .dark\:text-slate-300 {
    --tw-text-opacity:            1;
    color:            rgb(203 213 225 / var(--tw-text-opacity, 1));
  }
  .dark\:text-violet-300 {
    --tw-text-opacity:            1;
    color:            rgb(196 181 253 / var(--tw-text-opacity, 1));
  }
  .dark\:text-white {
    --tw-text-opacity:            1;
    color:            rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .dark\:text-yellow-300 {
    --tw-text-opacity:            1;
    color:            rgb(253 224 71 / var(--tw-text-opacity, 1));
  }
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display:            none;
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
  display:            none;
}
.\[\&_\.ProseMirror\]\:min-h-\[200px\] .ProseMirror {
  min-height:            200px;
}
.\[\&_\.ProseMirror\]\:outline-none .ProseMirror {
  outline:            2px solid transparent;
  outline-offset:            2px;
}
.\[\&_\.selectedCell\]\:bg-blue-50 .selectedCell {
  --tw-bg-opacity:            1;
  background-color:            rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.\[\&_a\]\:text-blue-600 a {
  --tw-text-opacity:            1;
  color:            rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.\[\&_a\]\:underline a {
  text-decoration-line:            underline;
}
.\[\&_img\]\:inline-block img {
  display:            inline-block;
}
.\[\&_img\]\:max-w-full img {
  max-width:            100%;
}
.\[\&_p\]\:my-0 p {
  margin-top:            0px;
  margin-bottom:            0px;
}
.\[\&_table\]\:my-1 table {
  margin-top:            0.25rem;
  margin-bottom:            0.25rem;
}
.\[\&_table\]\:my-2 table {
  margin-top:            0.5rem;
  margin-bottom:            0.5rem;
}
.\[\&_table\]\:w-full table {
  width:            100%;
}
.\[\&_table\]\:border-collapse table {
  border-collapse:            collapse;
}
.\[\&_td\]\:border td {
  border-width:            1px;
}
.\[\&_td\]\:border-gray-300 td {
  --tw-border-opacity:            1;
  border-color:            rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.\[\&_td\]\:border-line td {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
.\[\&_td\]\:px-2 td {
  padding-left:            0.5rem;
  padding-right:            0.5rem;
}
.\[\&_td\]\:px-2\.5 td {
  padding-left:            0.625rem;
  padding-right:            0.625rem;
}
.\[\&_td\]\:py-1 td {
  padding-top:            0.25rem;
  padding-bottom:            0.25rem;
}
.\[\&_td\]\:py-1\.5 td {
  padding-top:            0.375rem;
  padding-bottom:            0.375rem;
}
.\[\&_th\]\:border th {
  border-width:            1px;
}
.\[\&_th\]\:border-gray-300 th {
  --tw-border-opacity:            1;
  border-color:            rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.\[\&_th\]\:border-line th {
  --tw-border-opacity:            1;
  border-color:            rgb(var(--color-line) / var(--tw-border-opacity, 1));
}
.\[\&_th\]\:bg-gray-50 th {
  --tw-bg-opacity:            1;
  background-color:            rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.\[\&_th\]\:bg-page th {
  --tw-bg-opacity:            1;
  background-color:            rgb(var(--color-bg) / var(--tw-bg-opacity, 1));
}
.\[\&_th\]\:px-2 th {
  padding-left:            0.5rem;
  padding-right:            0.5rem;
}
.\[\&_th\]\:px-2\.5 th {
  padding-left:            0.625rem;
  padding-right:            0.625rem;
}
.\[\&_th\]\:py-1 th {
  padding-top:            0.25rem;
  padding-bottom:            0.25rem;
}
.\[\&_th\]\:py-1\.5 th {
  padding-top:            0.375rem;
  padding-bottom:            0.375rem;
}
.\[\&_th\]\:text-left th {
  text-align:            left;
}