/* app.css — 공통 디자인 토큰/컴포넌트 (Phase 234 — 고가브릿지/gogabridj 디자인 시스템)
 *
 * catdyy(KOHGANE 고가네) 무드의 에디토리얼 럭셔리:
 *   먹(ink) 베이스 · 한지(hanji) 크림 · 금(antique gold) 악센트 · 청록(teal) Primary.
 * 작업 화면(콘솔)은 한지 라이트(가독성), 랜딩/로그인은 먹 다크(입구 럭셔리, 별도 테마).
 * 색·폰트·간격은 이 토큰을 단일 소스로 — 화면에서 하드코딩하지 말 것.
 * 폰트: 디스플레이=Noto Serif KR(명조), 본문/UI=Pretendard.
 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;600;700&display=swap');

:root {
  /* ========================================================================
     v18 디자인 토큰 — 단일 소스(에디토리얼 럭셔리). 전 화면이 이 토큰만 참조.
     하드코딩 hex/px 금지. 화면당 강조색 1개(주황=주요행동, 청록=브랜드/링크, 금=얕은 악센트).
     ======================================================================== */
  /* 컬러 */
  --ink: #1A1714;        /* 먹: 최강 텍스트/다크 표면 */
  --cream: #F5EFE3;      /* 한지: 기본 배경 */
  --gold: #C9A24B;       /* 금: 절제된 프리미엄 악센트/구분 */
  --teal: #119A8E;       /* 브랜드/보조 액션/링크/현재위치 */
  --orange: #F5821F;     /* 주요 행동 CTA 전용 */
  --text-strong: #1A1714; --text: #3A352F; --text-muted: #7A726A;
  --bg: #F7F2E8; --surface: #FFFFFF; --surface-warm: #FBF8F1; --border: #E7DECC;
  --success: #2E7D5B; --warn: #C9821F; --danger: #C2503C;
  /* 브랜드 음영(hover/텍스트) 단일소스 — 컴포넌트에서 하드코딩 금지 */
  --teal-strong: #0E8A7C; --teal-hover: #12A897;
  --orange-strong: #DA7012; --orange-hover: #F5871F;
  --gold-ink: #8A6D22; --gold-ink-strong: #6F561A;
  --on-accent: #FFFFFF;
  /* 다크 'vault'(랜딩/로그인) */
  --vault-bg: #1A1714; --vault-surface: #241F1A; --vault-text: #F5EFE3; --vault-gold: #C9A24B;

  /* 타이포 — 디스플레이 Noto Serif KR, 본문/UI Pretendard(KR)+Inter(EN) */
  --font-display: "Noto Serif KR", 'Nanum Myeongjo', Georgia, 'Times New Roman', serif;
  --font-ui: "Pretendard", "Pretendard Variable", "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display-size: clamp(40px, 6vw, 72px); --display-lh: 1.1;
  --h1-size: 32px; --h1-lh: 1.2; --h2-size: 26px; --h2-lh: 1.25; --h3-size: 20px; --h3-lh: 1.3;
  --body-lg: 17px; --body: 15px; --small: 13px; --caption: 12px; --line: 1.6;
  --w-reg: 400; --w-med: 500; --w-semi: 600;

  /* 간격 — 8px 그리드(모든 패딩/마진/갭은 이 배수만) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* 라운드 / 그림자 — 두꺼운 보더 대신 여백 + 얕은 그림자 + 1px 가는 구분선 */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 23, 20, .06);
  --shadow: 0 4px 16px rgba(26, 23, 20, .08);
  --shadow-lg: 0 12px 32px rgba(26, 23, 20, .10);

  /* 레이아웃 */
  --sidebar-w: 264px; --nav-item-h: 36px; --content-max: 1200px;

  /* 모션 (prefers-reduced-motion 존중) */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(.2, .8, .2, 1);

  /* ========================================================================
     v26 네오-클래식 리프레시 — "디지털 한지 위의 금속활자". 단일 소스 토큰만 확장.
     깊이(--ink-2/--gold-soft) · 대형 세리프(--display-2) · 128 여백 · 금 헤어라인 · 미세 그레인.
     ======================================================================== */
  --ink-2: #2A241E;                       /* 레이어드 다크(깊이) */
  --gold-soft: #E0C588;                   /* 부드러운 금(헤어라인/하이라이트) */
  --display-2-size: clamp(44px, 7vw, 84px); --display-2-lh: 1.05; --display-tracking: -0.025em;
  --space-10: 128px;                      /* 대형 섹션 여백 */
  --hairline-color: rgba(201, 162, 75, .28);   /* 금 헤어라인(절제) */
  --grain-opacity: 0.035;                 /* 미세 그레인 2~4% */
  --lift: translateY(-2px);               /* 카드 호버 상승 */

  /* ========================================================================
     하위호환 별칭: 기존 --pc-* 는 v18 토큰을 가리킨다(단일 소스 유지).
     ※ 신규 코드는 v18 토큰을 직접 쓰고, --pc-* 는 점진적으로 정리.
     ======================================================================== */
  --pc-color-bg: var(--bg);
  --pc-color-bg-secondary: var(--surface-warm);
  --pc-color-surface: var(--surface);
  --pc-color-surface-muted: var(--surface-warm);
  --pc-color-text: var(--text-strong);
  --pc-color-text-muted: var(--text-muted);
  --pc-color-border: var(--border);
  --pc-color-primary: var(--teal);
  --pc-color-primary-strong: var(--teal-strong);   /* teal 짙은 단계(hover) */
  --pc-color-accent-gold: var(--gold);
  --pc-color-cta: var(--orange);
  --pc-color-cta-strong: var(--orange-strong);        /* orange 짙은 단계(hover) */
  --pc-color-ink: var(--ink);
  --pc-color-hanji: var(--cream);
  --pc-color-accent-lime: #C2F970;       /* (레거시 호환) */
  --pc-color-success: var(--success);
  --pc-color-warning: var(--warn);
  --pc-color-danger: var(--danger);
  --pc-color-info: var(--teal);          /* 링크 — 청록 */
  --pc-space-1: var(--space-1);          /* 4px(=.25rem) */
  --pc-space-2: var(--space-2);          /* 8px */
  --pc-space-3: var(--space-3);          /* 12px */
  --pc-space-4: var(--space-4);          /* 16px */
  --pc-space-5: var(--space-5);          /* 24px */
  --pc-radius-sm: var(--radius-sm);
  --pc-radius-md: var(--radius);
  --pc-radius-lg: var(--radius-lg);
  --pc-shadow-sm: var(--shadow-sm);
  --pc-shadow-md: var(--shadow);
  --pc-focus-ring: 0 0 0 .2rem rgba(17, 154, 142, .28);
  --pc-z-toast: 1080;
  --pc-transition: var(--dur) var(--ease);
  --pc-font-body: var(--font-ui);
  --pc-font-display: var(--font-display);
}

body {
  font-family: var(--pc-font-body);
  background: linear-gradient(180deg, var(--surface-warm) 0%, var(--pc-color-bg) 100%) fixed;
  color: var(--pc-color-text);
}

/* 디스플레이 세리프 — 페이지 타이틀/히어로/섹션 타이틀에 고전·우아함.
   본문·버튼·작은 헤딩은 Pretendard 유지(가독성). */
.pc-display,
.pc-serif { font-family: var(--pc-font-display); font-weight: 600; letter-spacing: -.01em; }
/* 페이지 타이틀(h1)·디스플레이는 세리프, 그 외 헤딩/본문은 Pretendard 유지 */
h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--pc-font-display);
  font-weight: 600;
  letter-spacing: -.01em;
}

a {
  color: var(--pc-color-info);
}

a:hover {
  color: var(--pc-color-primary-strong);
}

.pc-surface,
.card,
.modal-content,
.dropdown-menu {
  background-color: var(--pc-color-surface);
  border-color: var(--pc-color-border);
}

.pc-empty-state {
  padding: var(--pc-space-5);
  border: 1px dashed var(--pc-color-border);
  border-radius: var(--pc-radius-md);
  text-align: center;
  color: var(--pc-color-text-muted);
}

.pc-status {
  border-radius: var(--pc-radius-sm);
  border: 1px solid var(--pc-color-border);
  padding: var(--pc-space-3) var(--pc-space-4);
}
.pc-status-success { background: #ecfdf5; border-color: #86efac; }
.pc-status-info { background: #eff6ff; border-color: #bfdbfe; }
.pc-status-warning { background: #fffbeb; border-color: #fde68a; }
.pc-status-danger { background: #fef2f2; border-color: #fecaca; }

.btn {
  border-radius: var(--pc-radius-sm);
  transition: transform var(--pc-transition), box-shadow var(--pc-transition), background-color var(--pc-transition);
}
/* CTA 위계(브리프 v3 P1-3) — "은은하되 확실히".
   Primary(청록 채움)=화면당 1개, 그 화면의 핵심 행동. 굵게 + hover lift + 청록 글로우. */
.btn-primary {
  background: linear-gradient(135deg, var(--pc-color-primary), var(--pc-color-primary-strong));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(15, 157, 140, .26);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--teal-hover), var(--pc-color-primary-strong));
  border-color: transparent;
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 157, 140, .34);
}
.btn-outline-primary { border-color: var(--pc-color-primary); color: var(--pc-color-primary-strong); font-weight: 600; }
.btn-outline-primary:hover { background: var(--pc-color-primary); border-color: var(--pc-color-primary); color: var(--on-accent); }
/* Secondary(금 아웃라인) — Primary보다 한 단계 약하게. 명시적으로 .btn-gold. */
.btn-gold {
  background: transparent;
  border: 1.5px solid var(--pc-color-accent-gold);
  color: var(--gold-ink);
  font-weight: 600;
}
.btn-gold:hover,
.btn-gold:focus {
  background: rgba(201, 162, 75, .12);
  border-color: var(--pc-color-accent-gold);
  color: var(--gold-ink-strong);
}
/* 초대 CTA(주황 채움) — "큰 행동"(For Beginners·시작하기·구글로 시작). 화면당 절제 사용. (v5) */
.btn-cta {
  background: linear-gradient(135deg, var(--pc-color-cta), var(--pc-color-cta-strong));
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(239, 122, 34, .28);
}
.btn-cta:hover,
.btn-cta:focus {
  background: linear-gradient(135deg, var(--orange-hover), var(--pc-color-cta-strong));
  border-color: transparent;
  color: var(--on-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(239, 122, 34, .38);
}
/* Tertiary(고스트) — 보조 동작. */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--pc-color-text-muted);
  font-weight: 600;
}
.btn-ghost:hover,
.btn-ghost:focus {
  background: var(--pc-color-surface-muted);
  color: var(--pc-color-text);
}
.btn:disabled,
.btn.disabled {
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background: #a9d8d1;
  border-color: #a9d8d1;
  color: #0b4f47;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  background: #effaf8;
  border-color: #a9d8d1;
  color: #0b6b60;
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}
.btn-outline-warning:disabled,
.btn-outline-warning.disabled {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--pc-focus-ring);
}

.pc-btn-loading,
.pc-btn-loading:hover {
  pointer-events: none;
  opacity: .72;
}

.pc-action-table .table thead th {
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pc-color-text-muted);
  background: var(--pc-color-surface-muted);
}
.pc-action-table .table tbody tr:hover {
  background: #f8f8ff;
}

.pc-bulk-toolbar {
  position: sticky;
  top: var(--pc-space-3);
  z-index: 5;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.pc-inline-feedback {
  margin-top: var(--pc-space-2);
  padding: .35rem .55rem;
  border-radius: var(--pc-radius-sm);
  border: 1px solid transparent;
  font-size: .74rem;
  line-height: 1.4;
}
.pc-inline-feedback-success {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}
.pc-inline-feedback-warning {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.pc-inline-feedback-danger {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.pc-market-card {
  border: 1px solid var(--pc-color-border);
  transition: border-color var(--pc-transition), box-shadow var(--pc-transition), transform var(--pc-transition);
}
.pc-market-card[data-market-state="connected"] {
  border-color: #86efac;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .08);
}
.pc-market-card[data-market-state="token_missing"] {
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px rgba(100, 116, 139, .08);
}
.pc-market-card[data-market-state="token_expired"],
.pc-market-card[data-market-state="scope_insufficient"] {
  border-color: #fcd34d;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .08);
}
.pc-market-card[data-market-state="api_error"] {
  border-color: #fca5a5;
  box-shadow: 0 10px 24px rgba(220, 38, 38, .08);
}

.pc-market-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.pc-market-badge-pending {
  background: #e2e8f0;
  color: #334155;
}
.pc-market-badge-connected {
  background: #dcfce7;
  color: #166534;
}
.pc-market-badge-token-missing {
  background: #e2e8f0;
  color: #334155;
}
.pc-market-badge-token-expired,
.pc-market-badge-scope-insufficient {
  background: #fef3c7;
  color: #92400e;
}
.pc-market-badge-api-error {
  background: #fee2e2;
  color: #b91c1c;
}

.pc-market-guide {
  min-height: 2.8rem;
}

.pc-toast-stack {
  z-index: var(--pc-z-toast);
}

.navbar-brand small {
  display: block;
  line-height: 1;
  margin-top: -2px;
}

/* "?" 도움말 토글 — 개발자/내부 문구를 본문에서 숨기고 팝오버로만(v5) */
.pc-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pc-color-surface-muted); color: var(--pc-color-text-muted);
  border: 1px solid var(--pc-color-border);
  font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle; line-height: 1;
}
.pc-help:hover, .pc-help:focus { background: var(--pc-color-primary); color: var(--on-accent); border-color: var(--pc-color-primary); outline: none; }

.text-teal { color: #0d9488 !important; }
.bg-teal { background-color: #0d9488 !important; }
.badge-get { background: #22c55e; color: var(--on-accent); }
.badge-post { background: #3b82f6; color: var(--on-accent); }
.badge-put { background: #f97316; color: var(--on-accent); }
.badge-patch { background: #a855f7; color: var(--on-accent); }
.badge-delete { background: #ef4444; color: var(--on-accent); }
.endpoint-path {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .85rem;
}
.api-accordion .accordion-button:not(.collapsed) {
  background: #e0f2fe;
  color: #0369a1;
}

@media (max-width: 767.98px) {
  .pc-bulk-toolbar {
    position: static;
  }

  .pc-bulk-toolbar .badge,
  .pc-bulk-toolbar .small {
    width: 100%;
  }

  .pc-bulk-toolbar .btn,
  .pc-market-card .btn {
    flex: 1 1 calc(50% - .25rem);
  }
}

/* v13 속도: 스켈레톤 로더(체감 속도). prefers-reduced-motion이면 셔머 정지. */
.skeleton {
  background: linear-gradient(90deg, rgba(26,23,20,.06) 25%, rgba(26,23,20,.12) 37%, rgba(26,23,20,.06) 63%);
  background-size: 400% 100%;
  animation: pc-skeleton 1.2s ease-in-out infinite;
  border-radius: 8px;
  min-height: 1em;
}
.skeleton-text { height: .85em; margin: .35em 0; }
.skeleton-line-2 { width: 80%; }
.skeleton-line-3 { width: 60%; }
@keyframes pc-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: rgba(26,23,20,.08); }
}

/* ========================================================================
   v18 컴포넌트 베이스라인 — 토큰 적용("과제물 → 프로"). 모두 토큰 참조(하드코딩 0).
   타입 스케일은 유틸리티(opt-in)로 제공해 점진 적용(레이아웃 회귀 방지).
   ======================================================================== */
/* 타입 스케일 유틸 */
.pc-display { font-family: var(--font-display); font-size: var(--display-size); line-height: var(--display-lh); letter-spacing: -.02em; font-weight: var(--w-semi); }
.pc-h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: -.01em; font-weight: var(--w-semi); }
.pc-h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--w-semi); }
.pc-h3 { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: var(--w-semi); }
.pc-body-lg { font-size: var(--body-lg); line-height: var(--line); }
.pc-body { font-size: var(--body); line-height: var(--line); }
.pc-small { font-size: var(--small); }
.pc-caption { font-size: var(--caption); line-height: var(--caption-lh, 1.4); color: var(--text-muted); }
/* 8px 그리드 스택(세로 간격) 유틸 */
.pc-stack-2 > * + * { margin-top: var(--space-2); }
.pc-stack-3 > * + * { margin-top: var(--space-3); }
.pc-stack-4 > * + * { margin-top: var(--space-4); }
.pc-stack-5 > * + * { margin-top: var(--space-5); }

/* 버튼: 스펙 radius(12) + 터치 타깃 + 토큰 포커스 링(청록) */
.btn { border-radius: var(--radius); }
.btn-lg { min-height: 44px; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(17, 154, 142, .35); }
/* 입력: 토큰 radius + 가는 보더 */
.form-control, .form-select { border-radius: var(--radius); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(17, 154, 142, .18); }
/* 카드: 두꺼운 보더 대신 얕은 그림자 + 1px 가는 구분선(여백 우선) */
.console-card, .card { box-shadow: var(--shadow-sm); }

/* ============================================================================
   v26 네오-클래식 유틸리티 — 토큰 기반(하드코딩 0). opt-in 클래스라 저회귀.
   "디지털 한지 위의 금속활자": 대형 세리프 · 오버라인 라벨 · 금 헤어라인 · 미세 그레인 · 모션.
   ============================================================================ */
/* 대형 디스플레이(랜딩 히어로 등) */
.pc-display-2 {
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: var(--display-2-size); line-height: var(--display-2-lh);
  letter-spacing: var(--display-tracking); color: var(--text-strong);
}
/* 오버라인 라벨 — 대문자 + 자간(에디토리얼 키커) */
.pc-overline {
  font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .18em; font-size: var(--caption); font-weight: var(--w-semi);
  color: var(--gold-ink);
}
/* 금 헤어라인 디바이더(두꺼운 보더 대신) */
.pc-hairline { border: 0; border-top: 1px solid var(--hairline-color); margin: var(--space-6) 0; }
/* 대형 세리프 숫자(대시보드 KPI) */
.pc-num { font-family: var(--font-display); font-weight: var(--w-semi); letter-spacing: -.01em; line-height: 1; }
/* 대형 섹션 여백(럭셔리한 공간) */
.pc-section { padding-top: var(--space-9); padding-bottom: var(--space-9); }
@media (min-width: 992px) { .pc-section { padding-top: var(--space-10); padding-bottom: var(--space-10); } }
/* 카드 호버 상승 + 얕은 3단 그림자(opt-in) */
.pc-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pc-lift:hover { transform: var(--lift); box-shadow: var(--shadow-lg); }
/* 링크 밑줄 슬라이드(opt-in) */
.pc-link { position: relative; text-decoration: none; color: var(--teal); }
.pc-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.pc-link:hover::after { transform: scaleX(1); }
/* 진입 페이드 + 8px(절제) */
.pc-enter { animation: pcEnter var(--dur-slow) var(--ease) both; }
@keyframes pcEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 미세 그레인 — 디지털 한지 질감(2~4%, 전역 오버레이·클릭 통과) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 모션 최소화 존중 — 모든 v26 모션/그레인 정지 */
@media (prefers-reduced-motion: reduce) {
  .pc-lift, .pc-link::after, .pc-enter { transition: none; animation: none; }
  .pc-lift:hover { transform: none; }
  body::before { display: none; }
}

/* ============================================================================
   v33 3-3 토스트 — 네오-클래식(먹 배경·한지 텍스트·금 보더·유형 좌악센트·라인 아이콘).
   이모지 0, 토큰 단일소스, reduced-motion 존중.
   ============================================================================ */
.pc-toast {
  display: flex; align-items: flex-start; gap: .55rem;
  min-width: 260px; max-width: 380px;
  background: var(--vault-surface); color: var(--vault-text);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .7rem .85rem;
  font-family: var(--font-ui);
  animation: pcToastIn var(--dur) var(--ease) both;
}
.pc-toast .pc-toast-ic { color: var(--teal); font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.pc-toast .pc-toast-msg { flex: 1; font-size: .9rem; line-height: 1.45; }
.pc-toast .pc-toast-x {
  background: none; border: 0; cursor: pointer; padding: 0 .15rem; line-height: 1;
  color: color-mix(in srgb, var(--cream) 65%, transparent); font-size: 1rem;
}
.pc-toast .pc-toast-x:hover { color: var(--cream); }
.pc-toast-success { border-left-color: var(--teal); }    .pc-toast-success .pc-toast-ic { color: var(--teal); }
.pc-toast-warning { border-left-color: var(--orange); }  .pc-toast-warning .pc-toast-ic { color: var(--orange); }
.pc-toast-danger  { border-left-color: var(--danger); }  .pc-toast-danger .pc-toast-ic  { color: var(--danger); }
.pc-toast-info    { border-left-color: var(--gold); }    .pc-toast-info .pc-toast-ic    { color: var(--gold); }
@keyframes pcToastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pc-toast { animation: none; } }