:root {
  /* =========================
     🎯 BRAND (공모전 기준 네이비)
  ========================= */
  --color-primary: #10367d;
  --color-primary-hover: #0d2f70;
  --color-primary-active: #0a2558;

  /* soft / background */
  --color-primary-soft: #f1edff;
  --color-primary-soft-hover: #e5ddff;

  /* glow (헤더 그라데이션용) */
  --color-primary-glow: rgba(124, 58, 237, 0.13);

  /* =========================
     🎨 ACCENT (보라 포인트)
  ========================= */
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;

  --color-accent-soft: #f5f3ff;
  --color-accent-soft-hover: #ede9fe;

  /* =========================
     📝 TEXT (기본)
  ========================= */
  --color-text-main: #111827;
  --color-text-sub: #374151;
  --color-text-muted: #6b7280;
  --color-text-placeholder: #9ca3af;
  --color-text-inverse: #ffffff;

  /* =========================
     📦 BACKGROUND
  ========================= */
  --color-bg-white: #ffffff;
  --color-bg-soft: #f3f4f6;
  --color-bg-page: #ffffff;

  /* =========================
     🔲 BORDER
  ========================= */
  --color-border: #e5e7eb;
  --color-border-muted: #d1d5db;
  --color-border-strong: #cbd5e1;
  --color-border-focus: #c4b5fd;

  /* =========================
     🔷 BRAND (인디고 블루)
     --color-primary(#10367d)와 별개로, 여러 화면에 이미 반복 하드코딩돼
     있던 밝은 인디고 블루 계열. 6-B1(MyPage 파일럿)에서 처음 토큰화.
     brand-strong/deep/badge/icon/joined은 서로 다른 텍스트 용도로 쓰이던
     근접색(Δ13~35)을 값 변경 없이 각자 토큰화한 것 - 추후 통합 여지 있음.
  ========================= */
  --color-brand: #3158ff;
  --color-brand-strong: #4054dc;
  --color-brand-purple: #6b54ff;
  --color-brand-deep: #4d5dde;
  --color-brand-badge: #5368df;
  --color-brand-icon: #4965ff;
  --color-brand-joined: #4361c2;
  --color-brand-soft: #eef2ff;
  --color-brand-soft-hover: #cfd8ff;
  --color-brand-glow: rgba(69, 91, 255, 0.22);
  --color-brand-focus-ring: rgba(73, 101, 255, 0.1);
  --color-brand-badge-bg: rgba(87, 108, 255, 0.09);

  /* =========================
     🚨 STATUS
  ========================= */
  --color-success: #16a34a;
  --color-success-soft: #ecf7ef;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --color-danger-soft: #fff3f3;
  --color-danger-hover: #e05252;
  --color-status-pending: #a87000;
  --color-status-pending-soft: #fff8e6;
  --color-danger-strong: #b42318;
  --color-like: #ff4f75;

  /* 채도 높은 브랜드/상태 색 배경(버튼·배지 등) 위에 얹는 텍스트 -
     두 테마 모두에서 배경이 이미 충분히 짙거나 채도가 높아 흰 글자를
     그대로 유지해야 하는 경우 전용 (예: 삭제/종료 버튼, 그라디언트 CTA) */
  --color-text-on-brand: #ffffff;

  /* =========================
     🏷️ TYPE 배지 (My*Page 목록 계열 - 스터디/소모임 유형 라벨)
  ========================= */
  --color-type-study: #189b5b;
  --color-type-smallgroup: #b45309;
  --color-type-smallgroup-soft: #d97706;

  /* =========================
     🪟 오버레이 / 백드롭
  ========================= */
  --color-backdrop: rgba(10, 12, 30, 0.48);
  --color-backdrop-strong: rgba(4, 13, 30, 0.62);
  --color-overlay-white: rgba(255, 255, 255, 0.1);
  --color-brand-glow-fab: rgba(73, 101, 255, 0.28);
  --color-brand-glow-fab-hover: rgba(73, 101, 255, 0.34);
  --color-admin-highlight-bg: rgba(38, 91, 173, 0.28);
  --color-danger-glow: rgba(220, 38, 38, 0.22);

  /* =========================
     🌑 SHADOW BASE (색상만)
  ========================= */
  --color-shadow-base: rgba(15, 23, 42, 0.05);
  --color-shadow-strong: rgba(15, 23, 42, 0.08);

  --color-shadow-primary: rgba(16, 54, 125, 0.18);
  --color-shadow-primary-hover: rgba(16, 54, 125, 0.24);
  --color-shadow-primary-active: rgba(16, 54, 125, 0.22);
  --color-shadow-accent-glow: rgba(124, 58, 237, 0.1);

  /* =========================
     🎯 FOCUS
  ========================= */
  --color-focus-ring: rgba(124, 58, 237, 0.1);
}

/* 6-B2.1: dark.css는 순증가가 금지된 해체 대상 파일이라 이 다크 재정의는
   여기(토큰 정의 파일)에 둔다 - --color-danger-strong은 라이트에서
   재정의 없이 그대로 쓰였는데(#b42318), 다크에서는 어두운 배경 위 텍스트로
   쓰이는 지점(삭제/마감 등 상태 라벨)이 있어 --color-danger와 동일한
   다크 값으로 밝혀준다. */

[data-theme="dark"] {
  --color-danger-strong: #f87171;
  --color-shadow-accent-glow: rgba(79, 142, 247, 0.15);
}

:root {
  --shadow-sm: 0 10px 28px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 14px 40px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.08);

  --shadow-primary: 0 10px 22px rgba(16, 54, 125, 0.18);
  --shadow-primary-hover: 0 14px 28px rgba(16, 54, 125, 0.24);

  --focus-ring: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 999px;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --mobile-nav-height: 76px;
}

/* 브라우저에게 이 화면이 밝은 화면임을 알린다.
 *
 * 이걸 안 적어 두면 태블릿·폰의 크로미움이 "자동 다크 모드"로 색을 제멋대로
 * 뒤집는다. 앱에서 밝은 모드를 골라 두어도 OS가 다크면 화면이 어두워져서,
 * 사용자 눈에는 설정이 먹지 않는 것으로 보인다.
 * 스크롤바·기본 폼 요소 같은 브라우저가 그리는 부분도 이 값을 따른다.
 * 다크 쪽은 dark.css가 이미 선언한다 — 여기 없던 건 밝은 쪽뿐이었다. */

:root { color-scheme: light; }

:root,
[data-theme="light"] {
  /* =========================
     🧱 BACKGROUND
  ========================= */
  --app-bg: var(--color-bg-white);
  --app-bg-page: var(--color-bg-page);
  --app-bg-card: var(--color-bg-white);
  --app-bg-soft: var(--color-bg-soft);

  /* =========================
     📝 TEXT
  ========================= */
  --app-text-main: var(--color-text-main);
  --app-text-sub: var(--color-text-sub);
  --app-text-muted: var(--color-text-muted);
  --app-text-placeholder: var(--color-text-placeholder);
  --app-text-inverse: var(--color-text-inverse);

  /* =========================
     🔲 BORDER
  ========================= */
  --app-border: var(--color-border);
  --app-border-muted: var(--color-border-muted);
  --app-border-strong: var(--color-border-strong);

  /* =========================
     🎯 PRIMARY (버튼, 강조)
  ========================= */
  --app-primary: var(--color-primary);
  --app-primary-hover: var(--color-primary-hover);
  --app-primary-active: var(--color-primary-active);

  --app-primary-soft: var(--color-primary-soft);

  /* =========================
     🎨 ACCENT
  ========================= */
  --app-accent: var(--color-accent);
  --app-accent-soft: var(--color-accent-soft);

  /* =========================
     🌑 SHADOW
  ========================= */
  --shadow-sm: 0 10px 28px var(--color-shadow-base);
  --shadow-md: 0 14px 40px var(--color-shadow-base);
  --shadow-lg: 0 20px 48px var(--color-shadow-strong);

  --shadow-primary: 0 10px 22px var(--color-shadow-primary);
  --shadow-primary-hover: 0 14px 28px var(--color-shadow-primary-hover);
  --shadow-primary-active: 0 8px 18px var(--color-shadow-primary-active);

  /* =========================
     🎯 FOCUS
  ========================= */
  --focus-ring: 0 0 0 4px var(--color-focus-ring);

  /* =========================
     🌈 DECORATION
  ========================= */
  --app-glow: var(--color-primary-glow);
}

/* ================================================
   DARK MODE — 컬러 토큰 재정의 + 컴포넌트 오버라이드
   ================================================ */

[data-theme="dark"] {
  /* === 컬러 토큰 재정의 === */
  --color-primary: #4f8ef7;
  --color-primary-hover: #3a7de8;
  --color-primary-active: #2563eb;
  --color-primary-soft: #1e2d4a;
  --color-primary-soft-hover: #1e3a5f;
  --color-primary-glow: rgba(79, 142, 247, 0.15);

  --color-accent: #a78bfa;
  --color-accent-hover: #8b5cf6;
  --color-accent-soft: #1e1a2e;
  --color-accent-soft-hover: #261e3f;

  --color-text-main: #f1f5f9;
  --color-text-sub: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-placeholder: #64748b;
  --color-text-inverse: #0f172a;

  --color-bg-white: #1e293b;
  --color-bg-soft: #0f172a;
  --color-bg-page: #0f172a;

  --color-border: #334155;
  --color-border-muted: #475569;
  --color-border-strong: #4b5563;
  --color-border-focus: #4f8ef7;

  /* 6-B1(MyPage)에서 흡수: 기존 dark.css의 .mypage-* 개별 규칙이 주던
     값을 그대로 토큰 재정의로 옮김. brand-strong/deep는 서로 다른
     mypage 규칙이 공통으로 요구하던 값(#7eb3ff)으로 수렴시킴. */
  --color-brand-badge: #a5b4fc;
  --color-brand-purple: #a5b4fc;
  --color-brand-strong: #7eb3ff;
  --color-brand-deep: #7eb3ff;
  --color-brand-soft: #1e2d4a;
  --color-brand-soft-hover: #4965ff;
  --color-brand-badge-bg: rgba(99, 102, 241, 0.15);
  --color-danger: #f87171;
  --color-danger-soft: #2d1420;
  --color-success: #4ade80;
  --color-success-soft: #0f2d1f;
  --color-status-pending: #fbbf24;
  --color-status-pending-soft: #2d1f00;

  /* 다크 전용(라이트 대응 없음) - 기존 토큰 어디에도 안 맞던 값만 최소로 추가 */
  --color-brand-soft-dark: #1a2640;
  --color-brand-purple-soft-dark: #1e1b4b;
  --color-bg-elevated-dark: #263347;
  --color-bg-sunken-dark: #162035;
  --color-border-sunken-dark: #2d3f5e;
  --color-danger-soft-alt-dark: #2d0f0f;
  --color-brand-shadow-dark: rgba(73, 101, 255, 0.12);
  --color-indigo-accent-dark: #6366f1;

  --color-shadow-base: rgba(0, 0, 0, 0.3);
  --color-shadow-strong: rgba(0, 0, 0, 0.4);
  --color-shadow-primary: rgba(79, 142, 247, 0.2);
  --color-shadow-primary-hover: rgba(79, 142, 247, 0.3);
  --color-shadow-primary-active: rgba(79, 142, 247, 0.25);

  --color-focus-ring: rgba(79, 142, 247, 0.15);

  /* === 앱 변수 재정의 === */
  --app-bg: #0b1120;
  --app-bg-page: #0f172a;
  --app-bg-card: #1e293b;
  --app-bg-soft: #0f172a;

  --app-text-main: #f1f5f9;
  --app-text-sub: #cbd5e1;
  --app-text-muted: #94a3b8;
  --app-text-placeholder: #64748b;
  --app-text-inverse: #0f172a;

  --app-border: #334155;
  --app-border-muted: #475569;
  --app-border-strong: #4b5563;

  --app-primary: #4f8ef7;
  --app-primary-hover: #3a7de8;
  --app-primary-active: #2563eb;
  --app-primary-soft: #1e2d4a;

  --app-accent: #a78bfa;
  --app-accent-soft: #1e1a2e;

  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-primary: 0 10px 22px rgba(79, 142, 247, 0.2);
  --shadow-primary-hover: 0 14px 28px rgba(79, 142, 247, 0.3);
  --shadow-primary-active: 0 8px 18px rgba(79, 142, 247, 0.25);
  --focus-ring: 0 0 0 4px rgba(79, 142, 247, 0.15);
  --app-glow: rgba(79, 142, 247, 0.15);

  color-scheme: dark;
}

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

[data-theme="dark"] .header {
  background: rgba(23, 25, 30, 0.94);
  border-bottom-color: #303239;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .header-brand-title {
  color: #f1f5f9;
}

[data-theme="dark"] .nav-link {
  color: #b9bcc4;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: #f1f5f9;
}

[data-theme="dark"] .contest-split-item {
  color: #94a3b8;
}

[data-theme="dark"] .contest-split-item:hover,
[data-theme="dark"] .contest-split-item.selected {
  color: #f1f5f9;
}

[data-theme="dark"] .contest-split-divider {
  color: #475569;
}

[data-theme="dark"] .nav-icon-btn {
  background: transparent !important;
  color: #b9bcc4;
}

[data-theme="dark"] .nav-icon-btn:hover {
  background: #2b2e35 !important;
  color: #f0f0f2;
}

[data-theme="dark"] .nav-icon-btn.active {
  background: #30333a !important;
  box-shadow: inset 0 0 0 1px #444750;
}

[data-theme="dark"] .nav-icon {
  color: #b9bcc4;
}

/* ------------------------------------------------
   프로필 드롭다운
   ------------------------------------------------ */

[data-theme="dark"] .profile-dropdown-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .profile-dropdown-user strong {
  color: #f1f5f9;
}

[data-theme="dark"] .profile-dropdown-item {
  color: #e2e8f0;
}

[data-theme="dark"] .profile-dropdown-item:hover {
  background: #334155;
}

[data-theme="dark"] .profile-dropdown-divider {
  background: #334155;
}

[data-theme="dark"] .profile-dropdown-setting-icon {
  color: #64748b;
}

[data-theme="dark"] .drop-logout-button:hover {
  background: rgba(220, 38, 38, 0.15);
}

/* ------------------------------------------------
   알림 / 채팅 드롭다운
   ------------------------------------------------ */

[data-theme="dark"] .notification-dropdown-menu,
[data-theme="dark"] .chat-dropdown-menu {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .notification-dropdown-header,
[data-theme="dark"] .chat-dropdown-header {
  background: #1e293b;
  border-bottom-color: #2d3f5e;
}

[data-theme="dark"] .notification-dropdown-title,
[data-theme="dark"] .chat-dropdown-title {
  color: #f1f5f9;
}

[data-theme="dark"] .notification-dropdown-action,
[data-theme="dark"] .chat-dropdown-action {
  color: #64748b;
}

[data-theme="dark"] .notification-dropdown-action:hover,
[data-theme="dark"] .chat-dropdown-action:hover {
  color: #94a3b8;
}

[data-theme="dark"] .chat-dropdown-filters {
  background: #1e293b;
  border-bottom-color: #2d3f5e;
}

[data-theme="dark"] .chat-dropdown-filter {
  color: #64748b;
}

[data-theme="dark"] .chat-dropdown-filter:hover {
  background: #25334b;
  color: #cbd5e1;
}

[data-theme="dark"] .chat-dropdown-filter.active {
  background: #263b62;
  color: #8eb9ff;
}

[data-theme="dark"] .chat-dropdown-filter-count {
  background: #345083;
  color: #b9d4ff;
}

[data-theme="dark"] .notification-dropdown-body,
[data-theme="dark"] .chat-dropdown-body {
  background: #162035;
}

[data-theme="dark"] .notification-dropdown-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-dropdown-body::-webkit-scrollbar-thumb {
  background: #334155;
}

/* 알림 아이템 */

[data-theme="dark"] .notification-item {
  background: #162035;
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .notification-item:hover {
  background: #1a2640;
}

[data-theme="dark"] .notification-item.unread {
  background: #1a2640;
}

[data-theme="dark"] .notification-item.unread:hover {
  background: #1e2d4a;
}

[data-theme="dark"] .notification-title {
  color: #f1f5f9;
}

[data-theme="dark"] .notification-message {
  color: #94a3b8;
}

[data-theme="dark"] .notification-time {
  color: #475569;
}

[data-theme="dark"] .notification-action-text {
  color: #7eb3ff;
}

[data-theme="dark"] .notification-delete-btn:hover {
  background: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .notification-empty-title,
[data-theme="dark"] .chat-empty-title {
  color: #f1f5f9;
}

[data-theme="dark"] .notification-empty-text,
[data-theme="dark"] .chat-empty-text {
  color: #64748b;
}

/* 채팅 아이템 */

[data-theme="dark"] .chat-item {
  background: #162035;
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .chat-item:hover {
  background: #1a2640;
}

[data-theme="dark"] .chat-item.unread {
  background: #1a2640;
}

[data-theme="dark"] .chat-item.unread:hover {
  background: #1e2d4a;
}

[data-theme="dark"] .chat-name {
  color: #f1f5f9;
}

[data-theme="dark"] .chat-preview {
  color: #94a3b8;
}

[data-theme="dark"] .chat-workspace-name {
  color: #475569;
}

[data-theme="dark"] .chat-time {
  color: #475569;
}

[data-theme="dark"] .chat-unread-count {
  background: #1e2d4a;
  color: #7eb3ff;
}

/* ------------------------------------------------
   글로벌 폼 요소
   ------------------------------------------------ */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #4f8ef7;
  outline-color: #4f8ef7;
}

/* ------------------------------------------------
   모바일 네비게이션
   ------------------------------------------------ */

[data-theme="dark"] .mobile-bottom-nav {
  background: rgba(15, 23, 42, 0.96);
  border-top-color: #1e293b;
}

[data-theme="dark"] .mobile-drawer {
  background: #0f172a;
}

[data-theme="dark"] .drawer-link {
  color: #e2e8f0;
}

[data-theme="dark"] .drawer-link:hover {
  background: #1e293b;
  color: #f1f5f9;
}

[data-theme="dark"] .drawer-link.active {
  background: #1e293b;
  color: #818cf8;
}

[data-theme="dark"] .drawer-link-muted {
  color: #94a3b8;
}

[data-theme="dark"] .drawer-divider {
  border-color: #1e293b;
}

[data-theme="dark"] .drawer-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------
   카드 / 패널 공통
   ------------------------------------------------ */

[data-theme="dark"] .card,
[data-theme="dark"] [class*="-card"],
[data-theme="dark"] [class*="-panel"],
[data-theme="dark"] [class*="-box"] {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

/* ------------------------------------------------
   모달 / 오버레이 — 최상위 컨테이너만 다크 적용
   (자식 요소는 transparent 초기화 후 필요한 것만 개별 지정)
   ------------------------------------------------ */

[data-theme="dark"] [class*="-modal"] {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

/* 모달 내부 자식 요소 — 박스 제거 (투명 초기화) */

[data-theme="dark"] [class*="-modal__"] {
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="dark"] [class*="-overlay"],
[data-theme="dark"] [class*="-popup"],
[data-theme="dark"] [class*="-dialog"] {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

/* chat-popup__ BEM 자식 요소 — 투명 초기화 (-popup 와일드카드가 전부 잡아버려서) */

[data-theme="dark"] [class*="chat-popup__"] {
  background: transparent !important;
  border-color: transparent !important;
}

/* ------------------------------------------------
   설정 페이지
   ------------------------------------------------ */

/* ------------------------------------------------
   알림 드롭다운 / 채팅 패널
   ------------------------------------------------ */

/* .notification-dropdown / .chat-dropdown 는 아이콘 버튼을 감싸는
   position:relative 래퍼일 뿐 라이트모드에서는 배경이 전혀 없는데,
   여기서만 배경(#1e293b)을 칠하고 있어서 둥근 버튼(border-radius)
   모서리 바깥으로 각진 래퍼 배경이 비치는 원인이었다. 실제 드롭다운
   패널 배경은 .notification-dropdown-menu/.chat-dropdown-menu에
   이미 별도로 정의되어 있어 이 규칙 자체가 불필요 - 제거함. */

/* ------------------------------------------------
   프로젝트 카드
   ------------------------------------------------ */

[data-theme="dark"] .project-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .project-card:hover {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------
   팀맵 / 오피스
   ------------------------------------------------ */

/* 팀맵 섹션 — 다크모드에서 .card 일반 규칙 오버라이드 (캔버스가 있으므로 어두운 배경 불필요) */

/* Pixi 캔버스 래퍼들 — 다크모드에서 배경 투과 방지 */

[data-theme="dark"] .office-canvas-wrap {
  background: #C8C4BC !important;
}

/* 야간 오버레이 — 다크모드에서는 비활성화 (이미 어두운 테마이므로) */

/* 팀맵 헤더 바 — 다크 */

/* office-map-overlay / office-zone-overlay / home-future-overlay — 와일드카드 -overlay 규칙 취소 */

@media (max-width: 640px) {
  [data-theme="dark"] .home-future-modal__btn-row {
    background: #1e293b !important;
    border-top-color: #334155;
  }
}

/* 존 메뉴 드롭다운 */

/* 채팅 입력 바 — 다크 */

/* 캐릭터 이름 레이블 */

/* 캐릭터 말풍선 */

/* 캐릭터 클릭 팝업 — 와일드카드 -popup 규칙 취소 */

/* 권한/자리 수 설정 패널 — 와일드카드 -panel 규칙 취소 */

/* 사무실 배치 관리 패널 */

[data-theme="dark"] .office-seat-mgmt {
  background: transparent;
  border-color: transparent;
  color: #1e2a3a;
}

/* 미배정 섹션 — 다크 */

/* online bar */

/* ------------------------------------------------
   프로필 페이지
   ------------------------------------------------ */

[data-theme="dark"] .profile-hero,
[data-theme="dark"] .profile-tabs,
[data-theme="dark"] .profile-section-card,
[data-theme="dark"] .profile-info-card,
[data-theme="dark"] .profile-trust-summary,
[data-theme="dark"] .profile-roadmap-hero,
[data-theme="dark"] .profile-roadmap-empty,
[data-theme="dark"] .profile-loading,
[data-theme="dark"] .profile-empty-state {
  background: #1e293b;
  border-color: #334155;
  box-shadow: none;
}

/* 와일드카드 -box 규칙으로 인한 intro-box 다크 박스 제거 */

[data-theme="dark"] .profile-intro-box {
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="dark"] .profile-skill-list button,
[data-theme="dark"] .profile-skill-list span {
  background: #1e1b4b;
  border-color: #312e81;
  color: #a5b4fc;
}

[data-theme="dark"] .profile-roadmap-info-grid article {
  background: #1e293b;
  border-color: #334155;
}

/* 10년 뒤 내 모습 섹션 */

/* 포트폴리오 / 프로젝트 / 경험 카드 */

[data-theme="dark"] .profile-experience-card h3 { color: #f1f5f9; }

[data-theme="dark"] .profile-experience-card strong { color: #cbd5e1; }

[data-theme="dark"] .profile-experience-card p { color: #94a3b8; }

/* 신뢰도 탭 */

[data-theme="dark"] .profile-trust-summary h2 { color: #f1f5f9; }

[data-theme="dark"] .profile-trust-item p { color: #64748b; }

[data-theme="dark"] .profile-trust-item i { background: #1e293b; }

[data-theme="dark"] .profile-thermo-bar { background: #1e293b !important; }

/* ------------------------------------------------
   프로필 편집 페이지
   ------------------------------------------------ */

/* 섹션 카드 (편집 페이지에서도 동일 클래스 공유) */

[data-theme="dark"] .edit-profile-form input,
[data-theme="dark"] .edit-profile-form textarea,
[data-theme="dark"] .edit-profile-form select {
  background: #162035;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .edit-profile-form input::placeholder,
[data-theme="dark"] .edit-profile-form textarea::placeholder {
  color: #475569;
}

[data-theme="dark"] .edit-profile-form input:focus,
[data-theme="dark"] .edit-profile-form textarea:focus,
[data-theme="dark"] .edit-profile-form select:focus {
  background: #1e293b;
  border-color: #6366f1;
}

[data-theme="dark"] .interest-chip-list button:hover,
[data-theme="dark"] .interest-chip-list button.is-selected {
  background: #1e1b4b;
  border-color: #312e81;
  color: #a5b4fc;
}

/* ------------------------------------------------
   공모전 상세 페이지
   ------------------------------------------------ */

/* 와일드카드 카드 규칙이 contest-detail-card 자식 요소에 적용되지 않도록 초기화 */

[data-theme="dark"] .contest-detail-hero__header,
[data-theme="dark"] .contest-detail-hero__badges,
[data-theme="dark"] .contest-detail-hero__actions,
[data-theme="dark"] .contest-detail-main,
[data-theme="dark"] .contest-detail-side,
[data-theme="dark"] .contest-detail-content,
[data-theme="dark"] .contest-detail-info {
  background: transparent;
  border-color: transparent;
}

/* ------------------------------------------------
   내 팀공간 페이지
   ------------------------------------------------ */

[data-theme="dark"] .type-badge {
  background: #1e1b4b;
  color: #818cf8;
}

[data-theme="dark"] .type-badge.study {
  background: #052e16;
  color: #4ade80;
}

/* ZoneSidePanel */

/* 설정 메뉴 — 라이트 그대로 */

/* 존 이름 인라인 편집 input — 존 header strip 위에 올라가므로 항상 흰색 계열 */

/* 캐릭터 클릭 팝업 내부 h/p 텍스트 명시 */

/* ------------------------------------------------
   폼 레이블 / 섹션 헤딩
   ------------------------------------------------ */

[data-theme="dark"] label {
  color: #cbd5e1;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f1f5f9;
}

[data-theme="dark"] p {
  color: #cbd5e1;
}

/* ------------------------------------------------
   구분선
   ------------------------------------------------ */

[data-theme="dark"] hr,
[data-theme="dark"] [class*="-divider"] {
  border-color: #334155;
  background: #334155;
}

/* ------------------------------------------------
   스크롤바
   ------------------------------------------------ */

[data-theme="dark"] * {
  scrollbar-color: #334155 transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ------------------------------------------------
   홈페이지
   ------------------------------------------------ */

[data-theme="dark"] .home-reco__title-wrap h3 {
  color: #e2e8f0;
}

/* 로드맵 카드 내부 자식 요소 — 카드 와일드카드로 인한 다크 박스 제거 */

/* ================================================
   각 페이지 공통 히어로/배경 패턴 오버라이드
   (studies, contest, small-groups, recruit, community, onboarding)
   ================================================ */

/* --- 공모전 페이지 --- */

/* --- 소그룹 페이지 --- */

/* --- 팀원 모집 페이지 --- */

/* 검색/필터 카드 */

[data-theme="dark"] .recruit-suggest-tags button:hover,
[data-theme="dark"] .recruit-suggest-tags button.is-active {
  background: #1e2d4a;
  border-color: #4965ff;
  color: #7eb3ff;
}

[data-theme="dark"] .recruit-verified-filter:hover,
[data-theme="dark"] .recruit-verified-filter.is-active {
  background: #14382a;
  border-color: #34d399;
  color: #6ee7b7;
}

/* 통계 칩 */

/* 멤버 목록 헤더 */

/* 액션 버튼 */

/* 분야 뱃지 */

/* AI 추천 섹션 */

/* 인증 유저 스팟라이트 */

/* 빈 상태 / 에러 상태 */

/* 스켈레톤 */

/* --- 커뮤니티 페이지 --- */

[data-theme="dark"] .community-category-card,
[data-theme="dark"] .community-search-card,
[data-theme="dark"] .community-popular-card,
[data-theme="dark"] .community-board-card,
[data-theme="dark"] .community-side-card {
  background: #162035;
  border-color: rgba(79,142,247,0.1);
}

[data-theme="dark"] .community-category-button:hover,
[data-theme="dark"] .community-category-button.is-active { background: #1e293b; color: #7eb3ff; }

[data-theme="dark"] .community-section-head h2,
[data-theme="dark"] .community-board-head h2 { color: #f1f5f9; }

[data-theme="dark"] .community-section-head span,
[data-theme="dark"] .community-board-head span { color: #94a3b8; }

/* 카테고리 뱃지 (span = 자유/정보 등, b = 고정/공지) */

/* 인기글 목록 */

/* 헤더 구분선 */

[data-theme="dark"] .community-section-head,
[data-theme="dark"] .community-board-head { border-bottom-color: #2d3f5e; }

/* 섹션 헤드 버튼 */

/* 사이드 카드 */

/* 결과 행 */

/* 페이지네이션 */

/* 스켈레톤 */

/* 빈 상태 */

/* 모바일 탭 */

/* --- 로드맵/온보딩 페이지 --- */

[data-theme="dark"] .onboarding-dashboard-loading,
[data-theme="dark"] .onboarding-dashboard-empty {
  background: #162035;
  border-color: rgba(79,142,247,0.1);
}

/* 챕터 카드 */

/* 챕터 내 스텝 카드 */

/* 우측 현재 미션 카드 */

/* 스텝 목록 (구 스타일) */

/* AI 히스토리 / 어시스턴트 */

/* 팝업 */

/* AI 채팅 팝업 */

/* AI 조언 모달 */

/* 프로젝트 확인 모달 */

/* 환영 모달 */

/* 다음 단계 패널 */

/* AI 추천 섹션 */

/* ------------------------------------------------
   프로젝트 탐색 페이지
   ------------------------------------------------ */

[data-theme="dark"] .projects-page {
  background: #0b1120;
  color: #f1f5f9;
}

[data-theme="dark"] .projects-hero-wrap {
  background: #0f172a;
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .projects-hero h1 {
  color: #f1f5f9;
}

[data-theme="dark"] .projects-hero h1 strong {
  color: #6b9fff;
}

[data-theme="dark"] .projects-hero p {
  color: #94a3b8;
}

[data-theme="dark"] .projects-hero-badge {
  background: rgba(107, 159, 255, 0.12);
  color: #7eb3ff;
}

[data-theme="dark"] .projects-stat-item {
  background: #162035;
  border-color: rgba(79, 142, 247, 0.1);
}

[data-theme="dark"] .projects-stat-label {
  color: #64748b;
}

[data-theme="dark"] .projects-stat-value {
  color: #f1f5f9;
}

[data-theme="dark"] .projects-search-card {
  background: #162035;
  border-color: rgba(79, 142, 247, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .projects-search-box {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .projects-search-box:focus-within {
  background: #1e293b;
  border-color: #4f8ef7;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.12);
}

[data-theme="dark"] .projects-search-box input {
  color: #f1f5f9;
}

[data-theme="dark"] .projects-filter-group select {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme="dark"] .projects-view-toggle {
  background: #1e293b;
}

[data-theme="dark"] .projects-view-toggle button.is-active {
  background: #334155;
  color: #7eb3ff;
}

[data-theme="dark"] .projects-tabs-wrap {
  border-top-color: #1e293b;
}

[data-theme="dark"] .projects-tab {
  color: #64748b;
}

[data-theme="dark"] .projects-tab.is-active {
  color: #7eb3ff;
}

[data-theme="dark"] .projects-tab.is-active::after {
  background: #4f8ef7;
}

[data-theme="dark"] .projects-tab:hover:not(.is-active) {
  color: #cbd5e1;
}

[data-theme="dark"] .projects-result-count {
  color: #64748b;
}

[data-theme="dark"] .project-card-new {
  background: #162035;
  border-color: rgba(79, 142, 247, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .project-card-new:hover {
  border-color: rgba(107, 159, 255, 0.25);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .pcard__status.is-open {
  background: #1e2d4a;
  color: #7eb3ff;
}

[data-theme="dark"] .pcard__status.is-closed {
  background: #1e293b;
  color: #64748b;
}

[data-theme="dark"] .pcard__category {
  background: #1e293b;
  color: #94a3b8;
}

[data-theme="dark"] .pcard__title {
  color: #f1f5f9;
}

[data-theme="dark"] .pcard__summary {
  color: #94a3b8;
}

[data-theme="dark"] .pcard__role-tag {
  background: #1e2d4a;
  color: #7eb3ff;
}

[data-theme="dark"] .pcard__footer {
  border-top-color: #1e293b;
}

[data-theme="dark"] .pcard__meta span {
  color: #64748b;
}

[data-theme="dark"] .pcard__like {
  background: #1e293b;
  border-color: #334155;
  color: #f472b6;
}

[data-theme="dark"] .project-card-skeleton {
  background: #162035;
  border-color: rgba(79, 142, 247, 0.08);
}

[data-theme="dark"] .pcs__badges,
[data-theme="dark"] .pcs__title,
[data-theme="dark"] .pcs__line,
[data-theme="dark"] .pcs__tags span {
  background: linear-gradient(90deg, #1e293b 0%, #263348 50%, #1e293b 100%);
}

[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .pagination-num {
  background: #162035;
  border-color: #334155;
  color: #cbd5e1;
}

/* ------------------------------------------------
   팀원 추천 카드 (홈 + 팀원 모집 페이지 공통)
   ------------------------------------------------ */

/* 모바일 뷰 하드코딩 배경 오버라이드 */

@media (max-width: 768px) {
  [data-theme="dark"] .home-page {
    background: #0b1120;
  }

  [data-theme="dark"] .home-hero-wrap {
    background: #0d1428;
  }

  [data-theme="dark"] .home-notice {
    background: #162035;
  }

  [data-theme="dark"] .home-hero {
    background: transparent;
  }

  [data-theme="dark"] .home-account,
  [data-theme="dark"] .home-roadmap-card {
    background: #162035;
  }

  [data-theme="dark"] .home-section {
    background: #0b1120;
  }

  [data-theme="dark"] .home-feed-card,
  [data-theme="dark"] .home-card-skeleton {
    background: #162035;
  }
}

/* ------------------------------------------------
   언어 전환 버튼
   ------------------------------------------------ */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  letter-spacing: 0;
}

.lang-toggle__flag {
  font-size: 18px;
  line-height: 1;
}

.lang-toggle__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

.lang-toggle:hover {
  background: #f3f4f6;
  color: #1e293b;
  transform: translateY(-1px);
}

[data-theme="dark"] .lang-toggle {
  border-color: #383b43;
  background: #24262c;
  color: #d1d3d8;
}

[data-theme="dark"] .lang-toggle:hover {
  border-color: #4a4d56;
  background: #30333a;
  color: #f0f0f2;
}

/* ------------------------------------------------
   다크모드 토글 버튼
   ------------------------------------------------ */

.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  font-size: 20px;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.dark-mode-toggle:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

[data-theme="dark"] .dark-mode-toggle:hover {
  background: #30333a;
}

[data-theme="dark"] .dark-mode-toggle {
  border-color: #383b43;
  background: #24262c;
  color: #d1d3d8;
}

/* ------------------------------------------------
   마이페이지
   ------------------------------------------------ */

/* ------------------------------------------------
   관리자 페이지
   ------------------------------------------------ */

[data-theme="dark"] .admin-toolbar input,
[data-theme="dark"] .admin-toolbar select {
  background: #162035;
  border-color: #334155;
  color: #f1f5f9;
}

[data-theme="dark"] .admin-toolbar input:focus,
[data-theme="dark"] .admin-toolbar select:focus {
  border-color: #6366f1;
}

[data-theme="dark"] .admin-toolbar button,
[data-theme="dark"] .primary-btn {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="dark"] .ghost-btn:hover {
  background: #1e2d4a;
  color: #f1f5f9;
}

[data-theme="dark"] .danger-btn {
  background: #2d1420;
  color: #f87171;
}

[data-theme="dark"] .admin-table td {
  border-bottom-color: #1e293b;
  color: #cbd5e1;
}

[data-theme="dark"] .admin-pagination button:hover:not(:disabled) {
  background: #1e2d4a;
  color: #f1f5f9;
}

/* ================================================
   워크스페이스 팝업 공통 쉘 (cp / tp / tkp / vp / bp / fp / myt)
   ================================================ */

/* 닫기 버튼 — 모든 팝업 접두어 */

[data-theme="dark"] .tp-close,
[data-theme="dark"] .tkp-close,
[data-theme="dark"] .vp-close,
[data-theme="dark"] .bp-close {
  background: #263347;
  color: #94a3b8;
}

[data-theme="dark"] .tp-close:hover,
[data-theme="dark"] .tkp-close:hover,
[data-theme="dark"] .vp-close:hover,
[data-theme="dark"] .bp-close:hover {
  background: #334155;
  color: #f1f5f9;
}

/* 새로고침 버튼 */

/* 헤더 */

[data-theme="dark"] .tp-header,
[data-theme="dark"] .tkp-header,
[data-theme="dark"] .vp-header,
[data-theme="dark"] .bp-header {
  border-bottom-color: #334155;
}

[data-theme="dark"] .tp-title,
[data-theme="dark"] .tkp-title,
[data-theme="dark"] .vp-title,
[data-theme="dark"] .bp-title {
  color: #f1f5f9;
}

/* 요약 바 */

/* 추가 폼 */

/* 필터 */

/* 할 일 아이템 */

/* ================================================
   내 할 일 모달 (myt-*)
   ================================================ */

/* ------------------------------------------------
   크레딧 충전 페이지
   ------------------------------------------------ */

/* 크레딧 잔액 컴포넌트 (헤더 등 공용) */

[data-theme="dark"] .credit-balance {
  background: #162035;
  border-color: #2d3f5e;
  box-shadow: none;
}

[data-theme="dark"] .credit-balance strong {
  color: #f1f5f9;
}

[data-theme="dark"] .credit-balance__label {
  color: #64748b;
}

[data-theme="dark"] .credit-balance--large strong {
  color: #f1f5f9;
}

/* ------------------------------------------------
   워크스페이스 채팅 팝업 (ChatPopup)
   ------------------------------------------------ */

/* DM 팝업 — !important 로 투명 초기화 이후 재선언 */

/* ------------------------------------------------
   워크스페이스 채팅 본체 (WorkspaceChatPage)
   ------------------------------------------------ */

[data-theme="dark"] .workspace-chat__messages {
  background: #162035;
  border-color: rgba(51, 65, 85, 0.4);
  box-shadow: none;
}

/* 입력 폼 */

/* 멘션 목록 */

/* 링크 미리보기 (받은 메시지) */

/* 파일 링크 (받은 메시지) */

/* 점프 버튼 */

/* 채널 헤더 버튼들 */

/* 스와이프 리플라이 인디케이터 */

/* 리더 아바타 테두리 */

/* 모바일 배경 오버라이드 */

@media (max-width: 960px) {
  [data-theme="dark"] .workspace-chat {
    background: #162035;
  }

  [data-theme="dark"] .workspace-chat__messages {
    background: #162035;
  }
}

/* ================================================
   투표 팝업 내부 (vote-page-*)
   vote-page는 CSS 변수를 사용하므로 변수 재정의로 일괄 처리
   ================================================ */

[data-theme="dark"] .vote-page {
  --vp-border:       #334155;
  --vp-card:         #162035;
  --vp-text:         #f1f5f9;
  --vp-muted:        #94a3b8;
  --vp-primary:      #818cf8;
  --vp-primary-soft: #1e1b4b;
  --vp-green:        #4ade80;
  --vp-green-soft:   #0f2d1f;
  --vp-amber:        #fbbf24;
  --vp-amber-soft:   #2d1f00;
}

/* ================================================
   업무 팝업 내부 (workspace-task-page, task-*)
   ================================================ */

[data-theme="dark"] .workspace-task-page { color: #f1f5f9; }

/* 업무 모달 (task-modal — 팝업 안의 팝업) */

/* ================================================
   게시판 팝업 내부 (bp-*)
   ================================================ */

/* 검색 */

/* 게시글 아이템 */

/* 빈 상태 */

/* 뒤로가기 / 취소 버튼 */

/* 글쓰기 폼 */

/* 상세 뷰 */

/* 댓글 */

/* 화면 아래 탭바를 걷어냈다. 스무 곳 넘는 화면이 이 값만큼 아래를 비우는데,
   정의가 없으면 각자 68px 폴백을 써서 이제 아무것도 없는 자리를 비운다.
   탭바를 되살릴 때는 이 값만 그 높이로 되돌리면 된다. */

:root { --mobile-bottom-nav-height: 0px; }

/* box sizing */

/* width = content + padding + border */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 기본 margin 제거 */

* {
  margin: 0;
}

/* 기본 높이 */

html,
body,
#root {
  height: 100%;
}

/* 모달/팝업 열릴 때 스크롤바 사라지며 레이아웃이 밀리는 현상 방지 */

html {
  scrollbar-gutter: stable;
}

/* 전체 화면 캔버스에서는 페이지 스크롤바가 없으므로 오른쪽 거터를 비우지 않는다. */

html:has(.wh-naver-layout),
html:has(.networking-venue-page),
html:has(.onsite-visit--joined) {
  scrollbar-gutter: auto;
}

html:has(.onsite-visit--joined) { overflow: hidden; }

/* 기본 폰트 */

body {
  margin: 0;
  font-family:
    "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", sans-serif;
  line-height: 1.5;
  letter-spacing: -0.01em;
  background: var(--app-bg-page);
  color: var(--app-text-main);
  word-break: keep-all;
}

/* 이미지 */

/* img overflow 방지 */

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* buttons reset */

button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* 링크 */

a {
  text-decoration: none;
  color: inherit;
}

/* 리스트 */

ul,
ol {
  list-style: none;
  padding: 0;
}

.main-content {
  min-height: 100%;
  padding-top: var(--header-height); /*nav로 인한 가려짐 방지*/
  background: var(--app-bg-page);
}

.main-content.messages-layout {
  height: 100vh;
  min-height: 0;
  padding-top: var(--header-height);
  padding-bottom: 0;
  overflow: hidden;
}

.main-content.workspace-layout-page {
  padding-top: 0;
}

@media (max-width: 1024px) {
  .main-content.workspace-chat-layout {
    height: 100dvh;
    min-height: 0;
    padding-top: 0;
    padding-bottom: calc(
      var(--mobile-bottom-nav-height, 68px)
      + env(safe-area-inset-bottom)
    );
    overflow: hidden;
  }

  .main-content.messages-layout {
    height: 100dvh;
    padding-top: 0;
    padding-bottom: calc(
      var(--mobile-bottom-nav-height, 68px)
      + env(safe-area-inset-bottom)
    );
  }

  .touch-keyboard-open .main-content.workspace-chat-layout,
  .touch-keyboard-open .main-content.messages-layout {
    padding-bottom: 0;
  }

}

@media (max-width: 960px) {
  .main-content.workspace-layout-page {
    padding-top: 0;
  }

  .main-content.workspace-layout-page.workspace-chat-layout {
    padding-bottom: 0;
  }
}

:root {
  --real-vh: 100dvh;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
}

.mobile-safe-bottom {
  padding-bottom: calc(
    var(--mobile-nav-height) + env(safe-area-inset-bottom)
  );
}

.mobile-fixed-safe {
  bottom: calc(
    var(--mobile-nav-height) + 16px + env(safe-area-inset-bottom)
  ) !important;
}

.mobile-screen-safe {
  min-height: calc(
    100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom)
  );
}  .server-unavailable {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px;
    background: var(--color-bg-page, #ffffff);
    color: var(--color-text-main, #111827);
  }

  .server-unavailable__panel {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .server-unavailable__mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 50%;
    color: var(--color-primary, #10367d);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  .server-unavailable__mark svg {
    width: 22px;
    height: 22px;
  }

  .server-unavailable__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .server-unavailable__description {
    margin: 10px 0 0;
    color: var(--color-text-muted, #6b7280);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: 0;
  }

  .server-unavailable__button {
    min-width: 120px;
    height: 44px;
    margin-top: 24px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary, #10367d);
    color: var(--color-text-inverse, #ffffff);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
  }

  .server-unavailable__button:hover:not(:disabled) {
    background: var(--color-primary-hover, #0d2f70);
  }

  .server-unavailable__button:focus-visible {
    outline: 3px solid color-mix(
      in srgb,
      var(--color-primary, #10367d) 28%,
      transparent
    );
    outline-offset: 3px;
  }

  .server-unavailable__button:disabled {
    cursor: wait;
    opacity: 0.72;
  }

  @media (max-width: 480px) {
    .server-unavailable {
      padding: 20px;
    }

    .server-unavailable__title {
      font-size: 20px;
    }
  }
:root {
  --header-height: 76px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: color-mix(in srgb, var(--color-bg-white, #fff) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.025);
  z-index: 1100;
  transition:
    transform 0.35s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.header.show {
  transform: translateY(0);
}

.header.hide {
  transform: translateY(-100%);
}

.header-inner {
  width: 100%;
  max-width: 1440px;
  height: var(--header-height);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr);
  align-items: center;
  position: relative;
  gap: 24px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: fit-content;
  justify-self: start;
  z-index: 2;
}

.header-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo img {
  height: 44px;
  display: block;
}

.header-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.header-brand-title {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #111827;
}

.header-brand-subtitle {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #9ca3af;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--color-border, #e5e7eb) 75%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-bg-soft, #f5f6f8) 82%, transparent);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.nav-link {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 7px;
  color: var(--color-text-muted, #6b7280);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.nav-link:hover {
  background: color-mix(in srgb, var(--color-bg-white, #fff) 65%, transparent);
  color: var(--color-text-main, #111827);
}

.nav-link.active {
  background: var(--color-bg-white, #fff);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  color: var(--color-text-main, #111827);
  font-weight: 750;
}
.contest-split-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contest-split-item {
  position: relative;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}

.contest-split-item:hover {
  color: #111827;
}

.contest-split-item.selected {
  color: #111827;
  font-weight: 700;
}

.contest-split-nav:hover
  .contest-split-item:not(:hover):not(.selected) {
  opacity: 0.45;
}

.contest-split-divider {
  color: #6b7280;
  user-select: none;
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  z-index: 2;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dark-mode-toggle {
  color: var(--color-text-muted);
}

.lang-toggle,
.dark-mode-toggle {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8f9fb;
  color: #4b5563;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lang-toggle {
  gap: 7px;
  padding: 0 11px;
  letter-spacing: 0;
}

.lang-toggle__icon {
  width: 17px;
  height: 17px;
}

.lang-toggle__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.dark-mode-toggle {
  width: 38px;
}

.lang-toggle:hover,
.dark-mode-toggle:hover {
  border-color: #cfd4dc;
  background: #f1f3f6;
  color: #111827;
  transform: none;
}

.lang-toggle:focus-visible,
.dark-mode-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.theme-toggle__icon {
  width: 19px;
  height: 19px;
  transition: color 0.2s ease;
}

.dark-mode-toggle:hover .theme-toggle__icon {
  color: var(--color-text-main);
}

.dark-mode-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.nav-icon-btn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

.nav-icon {
  width: 23px;
  height: 23px;
}

@media (max-width: 1180px) {
  .header-inner {
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    gap: 16px;
    padding-inline: 22px;
  }

  .desktop-nav {
    font-size: 13px;
  }

  .nav-link {
    padding-inline: 10px;
  }

  .header-brand-title {
    font-size: 1.4rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-height: 78px;
  }

  .header-inner {
    display: flex;
    padding: 0 18px;
  }

  .desktop-nav,
  .header-actions {
    display: none;
  }

  .logo img {
    height: 42px;
  }

  .header-brand-title {
    font-size: 1.2rem;
  }

  .header-brand-subtitle {
    font-size: 0.7rem;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 74px;
  }

  .header-inner {
    padding: 0 14px;
  }

  .header-brand {
    gap: 10px;
  }

  .logo img {
    height: 38px;
  }

  .header-brand-title {
    font-size: 1.05rem;
  }

  .header-brand-subtitle {
    display: none;
  }
}
.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: #fff;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  z-index: 1600;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.mobile-menu-button:hover {
  background: #f8fafc;
}

.mobile-menu-line {
  position: absolute;
  width: 22px;
  height: 2px;
  background: #111827;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease,
    top 0.3s ease;
}

.mobile-menu-line:nth-child(1) {
  top: 14px;
}

.mobile-menu-line:nth-child(2) {
  top: 21px;
}

.mobile-menu-line:nth-child(3) {
  top: 28px;
}

.mobile-menu-button.open .mobile-menu-line:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.mobile-menu-button.open .mobile-menu-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-button.open .mobile-menu-line:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

.drawer-backdrop {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
  z-index: 1400;
}

.drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-drawer {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  background: #fff;
  box-shadow: none;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateX(104%);
  transition: transform 0.28s ease;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-nav::-webkit-scrollbar {
  width: 6px;
}

.drawer-nav::-webkit-scrollbar-thumb {
  background: #d9dee7;
  border-radius: 999px;
}

.drawer-link {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  color: #374151;
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 10px;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.drawer-link:hover {
  background: #f7f8fb;
  color: #111827;
}

.drawer-link.active {
  background: #f4f6fb;
  color: #111827;
}

.drawer-accordion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.drawer-toggle {
  justify-content: space-between;
}

.drawer-chevron {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.drawer-toggle.is-open .drawer-chevron {
  transform: rotate(180deg);
}

.drawer-submenu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.24s ease;
}

.drawer-submenu.is-open {
  grid-template-rows: 1fr;
}

.drawer-submenu-inner {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 4px;
}

.drawer-submenu-link {
  min-height: 42px;
  padding: 0 14px 0 28px;
  border-radius: 12px;
  color: #6b7280;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;

  display: flex;
  align-items: center;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.drawer-submenu-link:hover {
  background: #f7f8fb;
  color: #111827;
}

.drawer-submenu-link.active {
  background: #f4f6fb;
  color: #111827;
}

.drawer-divider {
  width: 100%;
  height: 1px;
  margin: 10px 0;
  background: #eef0f4;
  flex-shrink: 0;
}

.drawer-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.drawer-dark-toggle .drawer-link-icon {
  color: var(--color-text-muted);
}

.drawer-dark-toggle:hover .drawer-link-icon {
  color: var(--color-text-main);
}

.drawer-link-muted {
  color: #4b5563;
}

.drawer-link-muted .drawer-link-icon {
  color: #8a94a6;
}

.drawer-link-danger {
  color: #d93025;
}

.drawer-link-danger:hover {
  background: #fff1f0;
  color: #b42318;
}

.drawer-link-danger .drawer-link-icon {
  color: #d93025;
}

.drawer-login-guide {
  padding: 4px 14px 8px;
}

.drawer-login-guide-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

.drawer-login-guide-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: #8a94a6;
  letter-spacing: -0.02em;
}

.drawer-login-button {
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border-radius: 14px;
  background: #111827;
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.drawer-login-button:hover {
  background: #0f172a;
}

.drawer-login-button:active {
  transform: scale(0.985);
}

.drawer-login-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .mobile-menu-button {
    display: flex;
  }
}

@media (max-width: 640px) {
  .mobile-menu-button {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .mobile-drawer {
    width: min(88vw, 340px);
  }
}
.credit-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-width: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e0e7ff;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.08);
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}

.credit-balance__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.credit-balance__icon svg {
  width: 9px;
  height: 9px;
  fill: #ffffff;
}

.credit-balance strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1e293b;
}

.credit-balance__label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}

.credit-balance--compact {
  gap: 6px;
  padding: 5px 10px;
}

.credit-balance--compact .credit-balance__icon {
  width: 14px;
  height: 14px;
}

.credit-balance--compact .credit-balance__icon svg {
  width: 7px;
  height: 7px;
}

.credit-balance--compact strong {
  font-size: 12px;
}

.credit-balance--compact .credit-balance__label {
  font-size: 11px;
}

.credit-balance--large {
  gap: 12px;
  padding: 12px 18px;
  border-radius: 20px;
}

.credit-balance--large .credit-balance__icon {
  width: 28px;
  height: 28px;
}

.credit-balance--large .credit-balance__icon svg {
  width: 14px;
  height: 14px;
}

.credit-balance--large strong {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
}

.credit-balance--large .credit-balance__label {
  font-size: 14px;
}
/* 실제 종이 명함과 같은 규격으로 그린다.
 *
 * 한국·국제 표준 명함은 90mm × 50mm다. 픽셀로 고정하면 화면마다 짜임새가 달라지므로
 * 폭만 정하고 높이는 비율(9/5)로 따라오게 한다.
 *
 * 글자 크기도 px가 아니라 카드 폭에 대한 비율(cqw)로 잡는다. 미리보기를 크게 보든
 * 인쇄용으로 크게 뽑든 같은 짜임새가 유지된다.
 *
 * 종이 명함은 흰 바탕에 각진 모서리다. 화면용 카드처럼 둥글리고 회색을 깔면
 * 인쇄했을 때 전혀 다른 물건이 된다. */
.bcard {
  container-type: inline-size;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 9 / 5;
  overflow: hidden;
  border: 1px solid #e3e5e9;
  background: #fff;
  color: #15181d;
  box-shadow: 0 10px 28px rgba(24, 26, 31, .12);
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
}

/* 여백과 글자는 모두 카드 폭(cqw) 기준인데, 그 기준을 만드는 .bcard 자신은
 * 자기 크기를 쓸 수 없다 — 컨테이너의 자기 속성에 쓴 cqw는 바깥 기준으로 풀려
 * 화면이 넓을수록 여백만 커지고 내용이 쪼그라든다. 그래서 안쪽 칸이 여백을 든다. */
.bcard__body {
  box-sizing: border-box;
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  /* 위: 로고 / 가운데: 이름 / 아래: 연락처. 가운데가 남는 자리를 흡수한다. */
  grid-template-rows: auto 1fr auto;
  padding: 5cqw 5.6cqw;
}

/* 직접 올린 명함은 손대지 않고 그대로 보여 준다. */
.bcard--uploaded { display: block; }
.bcard--uploaded img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── 위: 로고와 한 줄 문구 ─────────────────────────────────────────────── */
.bcard__head { display: flex; flex-direction: column; align-items: flex-end; gap: 1cqw; }
.bcard__logo { height: 7.8cqw; width: auto; object-fit: contain; }
.bcard__tagline {
  margin: 0;
  color: #1677d2;
  font-size: 2.7cqw;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: right;
}

/* ── 가운데: 이름과 직책 (아래쪽에 붙여 구분선 바로 위에 선다) ─────────── */
.bcard__identity { align-self: end; min-width: 0; padding-bottom: 2.2cqw; }
.bcard__name {
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
  margin: 0;
  font-size: 6.1cqw;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* 영문 이름은 한글 이름 옆에 작게 붙는다 — 같은 사람의 다른 표기일 뿐이다. */
.bcard__name span { font-size: 3.7cqw; font-weight: 750; }
.bcard__position {
  margin: 1cqw 0 0;
  font-size: 3.5cqw;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ── 아래: 소속·주소 | 연락처 ─────────────────────────────────────────── */
.bcard__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.4cqw;
  padding-top: 2.2cqw;
  border-top: 0.35cqw solid #15181d;
}

.bcard__org { flex: 1 1 auto; min-width: 0; }
.bcard__org p {
  margin: 0;
  font-size: 2.5cqw;
  line-height: 1.45;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* 라벨과 값이 나란히 선다. 종이 명함에서 가장 흔한 짜임새다. */
.bcard__contact {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto auto;
  gap: 0.5cqw 1.8cqw;
  margin: 0;
}
.bcard__contact dt { font-size: 2.5cqw; font-weight: 800; line-height: 1.25; }
.bcard__contact dd { margin: 0; font-size: 2.5cqw; font-weight: 500; line-height: 1.25; }

/* Translated addresses wrap more often than Korean; reserve enough vertical room. */
.bcard--en .bcard__body { padding: 3.2cqw 4.3cqw; }
.bcard--en .bcard__head { gap: .6cqw; }
.bcard--en .bcard__logo { height: 6.2cqw; }
.bcard--en .bcard__tagline { font-size: 2.3cqw; }
.bcard--en .bcard__identity { padding-bottom: 1.1cqw; }
.bcard--en .bcard__name { font-size: 5.5cqw; }
.bcard--en .bcard__position { margin-top: .5cqw; font-size: 3cqw; line-height: 1.18; }
.bcard--en .bcard__foot { gap: 1.3cqw; padding-top: 1.3cqw; }
.bcard--en .bcard__org p { font-size: 2.15cqw; line-height: 1.22; }
.bcard--en .bcard__contact { gap: .25cqw .8cqw; min-width: 0; }
.bcard--en .bcard__contact dt,
.bcard--en .bcard__contact dd { font-size: 2.15cqw; line-height: 1.18; }
.bcard--en .bcard__contact dd { overflow-wrap: anywhere; }

[data-theme="dark"] .bcard { border-color: #33363d; }
.business-card-carousel { position:relative; width:100%; margin-bottom:28px; touch-action:pan-y; user-select:none; }
.business-card-carousel img { -webkit-user-drag:none; }
.business-card-carousel:focus-visible { outline:2px solid var(--ov-primary, #526bc2); outline-offset:4px; }
.business-card-carousel__viewport { position:relative; width:100%; aspect-ratio:9 / 5; overflow:visible; }
.business-card-carousel__rail { display:contents; }
.business-card-carousel__foreground { position:relative; z-index:1; height:100%; }
.business-card-carousel__foreground.is-settling { transition:transform .26s ease-out; }
.business-card-carousel__side { position:absolute; z-index:2; top:50%; left:calc(100% + clamp(32px, 5vw, 100px)); display:grid; width:clamp(160px, 17vw, 220px); aspect-ratio:9 / 5; place-items:center; overflow:hidden; padding:0; border:2px solid var(--ov-primary, #526bc2); background:var(--ov-panel, #fff); color:var(--ov-primary, #526bc2); cursor:grab; transform:translateY(-50%); }
.business-card-carousel__side--previous { left:auto; right:calc(100% + clamp(32px, 5vw, 100px)); }
.business-card-carousel__side.is-settling { transition:left .27s ease-out, top .27s ease-out, width .27s ease-out; }
.business-card-carousel__side > svg { width:44px; height:44px; stroke-width:1.6; }
.business-card-carousel__side > img,.business-card-carousel__side .bcard { width:100%; height:100%; max-width:none; object-fit:contain; box-shadow:none; }
.business-card-carousel__side:hover,.business-card-carousel__side:focus-visible { border-color:var(--ov-primary-hover, #405bb4); outline:2px solid var(--ov-primary, #526bc2); outline-offset:3px; }
.business-card-carousel__create { display:grid; width:100%; height:100%; place-items:center; border:2px solid var(--ov-primary, #526bc2); background:var(--ov-panel, #fff); color:var(--ov-primary, #526bc2); cursor:pointer; }
.business-card-carousel__create svg { width:54px; height:54px; stroke-width:1.5; }
.business-card-carousel__create:focus-visible { outline:3px solid var(--ov-primary, #526bc2); outline-offset:3px; }
@media (max-width:940px) { .business-card-carousel__side--next { position:relative; top:auto; left:auto; width:min(200px, 42%); margin:16px 0 0 auto; transform:none; } }
@media (prefers-reduced-motion:reduce) { .business-card-carousel__foreground.is-settling,.business-card-carousel__side.is-settling { transition:none; } }
.business-card-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 줄(.__row)이 이미 두 칸을 나눈다. 여기까지 두 칸으로 두면 칸이 겹쳐
   네 칸 폭이 되어 가로로 넘쳤다. 여기서는 줄만 쌓는다. */
.business-card-editor__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.business-card-editor__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-sub);
}

.business-card-editor__field > input,
.business-card-editor__field > select {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: 14px;
}
.business-card-editor__field-head { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 8px; }
.business-card-editor__field-head > label:first-child { min-width: 0; }
.business-card-editor__visibility { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: var(--color-text-muted, #6f727b); font-size: 11px; font-weight: 650; cursor: pointer; }
.business-card-editor__visibility input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-primary, #556ed2); }

.business-card-editor__actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}

.business-card-editor__actions button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  font-weight: 700;
  cursor: pointer;
}

.business-card-editor__actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── 규격 명함 편집기 ─────────────────────────────────────────────────── */
.business-card-editor__stage { display: flex; justify-content: center; width: 100%; margin-bottom: 12px; }
.business-card-editor__carousel { width:min(100%, 700px); display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); align-items:center; gap:12px; }
.business-card-editor__carousel .business-card-carousel__viewport { grid-column:2; grid-row:1; min-width:0; }
.business-card-editor__carousel .business-card-carousel__side { position:relative; top:auto; left:auto; right:auto; width:100%; min-width:0; margin:0; transform:none; }
.business-card-editor__carousel .business-card-carousel__side--previous { grid-column:1; grid-row:1; }
.business-card-editor__carousel .business-card-carousel__side--next { grid-column:3; grid-row:1; }
.business-card-editor__carousel .business-card-editor__flip { width:100%; }
.business-card-editor__carousel .business-card-carousel__side[style*="position: absolute"] { position:absolute; }
@media (max-width:600px) {
  .business-card-editor__carousel { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .business-card-editor__carousel .business-card-carousel__viewport { grid-column:1; grid-row:1; }
  .business-card-editor__carousel .business-card-carousel__rail { display:grid; grid-column:1; grid-row:2; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; height:95px; }
  .business-card-editor__carousel .business-card-carousel__side { width:min(170px, 100%); }
  .business-card-editor__carousel .business-card-carousel__side--previous { grid-column:1; grid-row:1; justify-self:start; }
  .business-card-editor__carousel .business-card-carousel__side--next { grid-column:2; grid-row:1; justify-self:end; }
}
.business-card-editor__flip { position: relative; display: block; width: min(100%, 460px); aspect-ratio: 9 / 5; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; perspective: 1200px; }
.business-card-editor__flip:focus-visible { outline: 3px solid var(--color-primary, #556ed2); outline-offset: 5px; }
.business-card-editor__flip:disabled { cursor: wait; }
.business-card-editor__flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s ease; }
.business-card-editor__flip.is-flipped .business-card-editor__flip-inner { transform: rotateY(180deg); }
.business-card-editor__flip-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.business-card-editor__flip-face--back { transform: rotateY(180deg); }
.business-card-editor__flip-face .bcard { max-width: none; height: 100%; }
.business-card-editor__flip-hint { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #dce2ed; border-radius: 5px; background: rgba(255, 255, 255, .95); color: #38465c; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.business-card-editor__flip:hover .business-card-editor__flip-hint { border-color: var(--color-primary, #556ed2); }
@media (prefers-reduced-motion: reduce) {
  .business-card-editor__flip-inner { transition: none; }
}

/* 이미 있는 명함 올리기 */
.business-card-editor__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--color-border, #dfe3ea);
  border-radius: 12px;
}
.business-card-editor__upload strong { display: block; font-size: 13px; font-weight: 700; }
.business-card-editor__upload small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted, #6f727b);
  font-size: 11.5px;
  line-height: 1.5;
}
.business-card-editor__upload-actions { display: flex; align-items: center; gap: 10px; }
.business-card-editor__upload-actions > button {
  padding: 8px 13px;
  border: 1px solid var(--color-border, #dfe3ea);
  border-radius: 9px;
  background: var(--color-bg-white, #fff);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.business-card-editor__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}

/* 한글·영문을 한 줄에 짝지어 둔다. */
.business-card-editor__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.business-card-editor__row:has(> :only-child) { grid-template-columns: 1fr; }
.business-card-editor__fields[aria-hidden="true"] { opacity: .45; }

@media (max-width: 520px) {
  .business-card-editor__row { grid-template-columns: 1fr; }
}

.business-card-editor__stage .bcard { max-width: 460px; }
.business-card-editor { gap: 12px; }
.business-card-editor__upload { margin-bottom: 4px; padding: 10px 12px; }

/* 꼭 적어야 하는 칸 표시 */
.business-card-editor__field-head b { margin-left: 3px; color: #c0453c; font-weight: 800; }
.business-card-editor__note {
  margin: 2px 0 0;
  color: var(--color-text-muted, #8b8e97);
  font-size: 11.5px;
  line-height: 1.5;
}
.profile-hub-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  padding: clamp(24px, 5vh, 56px);
  background: rgba(15, 23, 42, 0.56);
  display: grid;
  place-items: center;
}

.profile-hub-modal {
  width: min(980px, 100%);
  height: min(700px, calc(100dvh - 80px));
  border: 1px solid var(--color-border, #e3e7ef);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-white, #fff);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  color: var(--color-text-main, #182235);
}

.profile-hub-sidebar {
  min-width: 0;
  padding: 22px 14px 18px;
  border-right: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-soft, #f7f8fb);
  display: flex;
  flex-direction: column;
}

.profile-hub-person { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.profile-hub-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-avatar { position: relative; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.profile-hub-avatar img { display: block; }
.profile-hub-avatar > span { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border: 2px solid var(--color-bg-soft, #f7f8fb); border-radius: 50%; background: #5969df; color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.profile-hub-avatar:hover > span, .profile-hub-avatar:focus-visible > span { opacity: 1; transform: scale(1); }
.profile-hub-avatar:focus-visible { outline: 3px solid rgba(89, 105, 223, .2); outline-offset: 2px; }
.profile-hub-avatar:disabled { cursor: wait; opacity: .65; }
.profile-hub-person div { min-width: 0; display: grid; gap: 3px; }
.profile-hub-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.profile-hub-person span { color: var(--color-text-muted, #7a8496); font-size: 12px; }

.profile-hub-progress { margin: 18px 8px 14px; }
.profile-hub-progress div { display: flex; justify-content: space-between; color: var(--color-text-muted, #697386); font-size: 12px; }
.profile-hub-progress strong { color: var(--color-brand-strong, #5264d9); }
.profile-hub-progress i { height: 5px; margin-top: 8px; border-radius: 999px; background: #e5e9f2; display: block; overflow: hidden; }
.profile-hub-progress b { height: 100%; border-radius: inherit; background: #5969df; display: block; }

.profile-hub-sidebar nav { display: grid; gap: 4px; }
.profile-hub-sidebar nav button { width: 100%; min-height: 42px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text-secondary, #536074); display: flex; align-items: center; gap: 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.profile-hub-sidebar nav button:hover { background: rgba(91, 105, 223, 0.07); }
.profile-hub-sidebar nav button.is-active { background: rgba(91, 105, 223, 0.12); color: #4f5fd2; }
.profile-hub-sidebar nav em { margin-left: auto; min-width: 22px; height: 22px; border-radius: 999px; background: rgba(91, 105, 223, 0.12); font-style: normal; font-size: 11px; display: grid; place-items: center; }

.profile-hub-main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; }
.profile-hub-header { min-height: 74px; padding: 14px 18px 12px 24px; border-bottom: 1px solid var(--color-border, #e5e7eb); display: flex; align-items: center; justify-content: space-between; }
.profile-hub-header span { color: #6574dc; font-size: 11px; font-weight: 800; letter-spacing: 0; }
.profile-hub-header h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: 0; }
.profile-hub-header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted, #768094); display: grid; place-items: center; cursor: pointer; }
.profile-hub-header button:hover { background: var(--color-bg-soft, #f4f5f8); }
.profile-hub-scroll { min-height: 0; overflow: auto; padding: 24px; }
.profile-hub-loading { min-height: 320px; display: grid; place-items: center; color: var(--color-text-muted, #798399); }
.profile-hub-panel { width: min(700px, 100%); margin: 0 auto; }

.profile-hub-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-hub-form-grid label, .profile-hub-single-field { min-width: 0; display: grid; gap: 8px; }
.profile-hub-form-grid label.is-wide { grid-column: 1 / -1; }
.profile-hub-form-grid label > span, .profile-hub-single-field > span { font-size: 13px; font-weight: 750; }
.profile-hub-form-grid input, .profile-hub-form-grid select, .profile-hub-form-grid textarea, .profile-hub-single-field input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--color-border, #dce1e9); border-radius: 6px; outline: none; background: var(--color-bg-white, #fff); color: var(--color-text-main, #182235); font: inherit; font-size: 13px; resize: vertical; }
.profile-hub-form-grid textarea { min-height: 82px; line-height: 1.6; }
.profile-hub-form-grid input:focus, .profile-hub-form-grid select:focus, .profile-hub-form-grid textarea:focus, .profile-hub-single-field input:focus { border-color: #7180e6; box-shadow: 0 0 0 3px rgba(89, 105, 223, 0.1); }
.profile-hub-form-grid input:disabled { background: var(--color-bg-soft, #f5f6f8); color: var(--color-text-muted, #7a8494); }
.profile-hub-form-grid small { justify-self: end; margin-top: -4px; color: var(--color-text-muted, #8a93a3); }
.profile-hub-picker { position: relative; }
.profile-hub-picker__control { position: relative; }
.profile-hub-picker__control:has(> button) input { padding-right: 42px; }
.profile-hub-picker__control > button { position: absolute; top: 1px; right: 1px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0 5px 5px 0; background: transparent; color: var(--color-text-muted, #758095); display: grid; place-items: center; cursor: pointer; }
.profile-hub-picker__control > button:hover { background: var(--color-bg-soft, #f5f6f8); color: var(--color-text-main, #182235); }
.profile-hub-picker__control > button svg { width: 17px; height: 17px; }
.profile-hub-picker__menu { max-height: 224px; margin-top: 6px; padding: 5px; overflow-y: auto; border: 1px solid var(--color-border, #dce1e9); border-radius: 8px; background: var(--color-bg-white, #fff); box-shadow: 0 10px 24px rgba(15, 23, 42, .1); }
.profile-hub-picker__menu > button { width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--color-text-main, #182235); display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.profile-hub-picker__menu > button:hover, .profile-hub-picker__menu > button.is-selected { background: rgba(89, 105, 223, .09); color: #4f5fd2; }
.profile-hub-picker__menu > button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hub-picker__menu > button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.profile-hub-save { min-width: 136px; min-height: 40px; margin-top: 20px; padding: 0 16px; border: 0; border-radius: 7px; background: #5868dc; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.profile-hub-save:disabled { opacity: .55; cursor: wait; }
.profile-hub-save--inline { margin-top: 14px; }
.profile-hub-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-photo-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.profile-hub-photo-row > div { flex: 1; min-width: 130px; display: grid; gap: 3px; }
.profile-hub-photo-row strong, .profile-hub-settings-section h3 { font-size: 14px; }
.profile-hub-photo-row span, .profile-hub-switch small { color: var(--color-text-muted, #778195); font-size: 12px; }
.profile-hub-photo-row button, .profile-hub-text-action { min-height: 36px; padding: 0 11px; border: 1px solid var(--color-border, #dce1e9); border-radius: 6px; background: var(--color-bg-white, #fff); color: var(--color-text-main, #182235); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-hub-photo-row button:disabled { opacity: .55; cursor: wait; }
.profile-hub-settings-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-settings-section h3 { margin: 0 0 15px; }
.profile-hub-text-action { margin-top: 4px; }
.profile-hub-switch { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-hub-switch + .profile-hub-switch { border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-switch span { display: grid; gap: 3px; }
.profile-hub-switch strong { font-size: 13px; }
.profile-hub-switch input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: #5868dc; cursor: pointer; }

.profile-hub-section-heading { margin-bottom: 22px; display: flex; align-items: flex-start; gap: 12px; }
.profile-hub-section-heading > svg { margin-top: 2px; color: #5b6adb; }
.profile-hub-section-heading h3, .profile-hub-liked-heading h3 { margin: 0 0 5px; font-size: 18px; }
.profile-hub-section-heading p, .profile-hub-liked-heading p { margin: 0; color: var(--color-text-muted, #778195); font-size: 13px; line-height: 1.5; }
.profile-hub-section-heading--action > div { flex: 1; }
.profile-hub-section-heading--action > button { min-height: 36px; padding: 0 12px; border: 1px solid #7b88df; border-radius: 6px; background: transparent; color: #5262d4; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-hub-experience-list { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-career-editor { padding: 18px 0; border-top: 1px solid var(--color-border, #edf0f4); }
.profile-hub-career-editor__head { margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.profile-hub-career-editor__head select { min-height: 36px; padding: 0 10px; border: 1px solid var(--color-border, #dce1e9); border-radius: 6px; background: var(--color-bg-white, #fff); color: inherit; font: inherit; font-size: 13px; }
.profile-hub-career-editor__head button { border: 0; background: transparent; color: #d14343; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.profile-hub-career-empty { padding: 24px; border: 1px dashed var(--color-border, #dce1e8); border-radius: 8px; color: var(--color-text-muted, #778195); text-align: center; font-size: 13px; }

.profile-hub-resume { width: min(760px, 100%); }
.profile-hub-resume-section + .profile-hub-resume-section { margin-top: 30px; padding-top: 26px; border-top: 6px solid var(--color-bg-soft, #f3f4f7); }
.profile-hub-resume-heading { min-height: 44px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-hub-resume-heading h3 { margin: 0; font-size: 20px; letter-spacing: 0; }
.profile-hub-resume-heading > div { display: flex; align-items: center; gap: 4px; }
.profile-hub-resume-heading button, .profile-hub-resume-row__edit { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-secondary, #536074); display: grid; place-items: center; cursor: pointer; }
.profile-hub-resume-heading button:hover, .profile-hub-resume-row__edit:hover { background: var(--color-bg-soft, #f3f4f7); color: #4f5fd2; }
.profile-hub-resume-heading svg { width: 21px; height: 21px; }
.profile-hub-resume-row__edit svg { width: 17px; height: 17px; }
.profile-hub-resume-list { display: grid; }
.profile-hub-resume-row { min-width: 0; padding: 16px 2px; display: grid; grid-template-columns: 50px minmax(0, 1fr) 36px; align-items: start; gap: 14px; }
.profile-hub-resume-row + .profile-hub-resume-row { border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-resume-logo { width: 50px; height: 50px; border-radius: 7px; background: #edf0f6; color: #5d687a; display: grid; place-items: center; }
.profile-hub-resume-logo--school { background: rgba(89, 105, 223, .11); color: #5363d7; }
.profile-hub-resume-logo svg { width: 24px; height: 24px; }
.profile-hub-resume-copy { min-width: 0; display: grid; gap: 3px; }
.profile-hub-resume-copy strong, .profile-hub-resume-copy span, .profile-hub-resume-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hub-resume-copy strong { font-size: 15px; line-height: 1.35; }
.profile-hub-resume-copy span { color: var(--color-text-secondary, #4f5b6d); font-size: 13px; }
.profile-hub-resume-copy small { color: var(--color-text-muted, #7b8494); font-size: 12px; }
.profile-hub-resume-copy p { margin: 5px 0 0; color: var(--color-text-secondary, #596579); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.profile-hub-resume-editor { margin: 10px 0 16px; padding: 18px; border: 1px solid var(--color-border, #dce1e9); border-radius: 8px; background: var(--color-bg-white, #fff); }
.profile-hub-resume-editor .profile-hub-career-editor__head > strong { font-size: 14px; }
.profile-hub-resume-editor .profile-hub-career-editor__head > button { color: var(--color-text-muted, #778195); }
.profile-hub-resume-editor__actions { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-hub-resume-editor__actions button { min-height: 38px; padding: 0 14px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-hub-resume-editor__actions button svg { width: 15px; height: 15px; }
.profile-hub-resume-editor__actions .is-danger { border: 0; background: transparent; color: #c33f3f; }
.profile-hub-resume-editor__actions .is-primary { min-width: 82px; border: 0; background: #5868dc; color: #fff; justify-content: center; }
.profile-hub-resume-editor__actions button:disabled { opacity: .55; cursor: wait; }
.profile-hub-resume-empty { min-height: 92px; padding: 20px; border: 1px dashed var(--color-border, #dce1e8); border-radius: 7px; color: var(--color-text-muted, #778195); display: grid; place-items: center; text-align: center; font-size: 12px; }

.profile-hub-liked-heading { margin: 34px 0 14px; padding-top: 26px; border-top: 1px solid var(--color-border, #e5e7eb); display: flex; justify-content: space-between; align-items: center; }
.profile-hub-liked-heading > span { color: #5969d9; font-size: 13px; font-weight: 800; }
.profile-hub-liked-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-hub-liked-grid > a { min-width: 0; padding: 14px; border: 1px solid var(--color-border, #e2e6ed); border-radius: 8px; color: inherit; text-decoration: none; display: flex; gap: 12px; }
.profile-hub-liked-grid > a:hover { border-color: #9ca8ed; }
.profile-hub-liked-grid img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.profile-hub-liked-grid a div { min-width: 0; display: grid; gap: 3px; }
.profile-hub-liked-grid strong, .profile-hub-liked-grid span, .profile-hub-liked-grid p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hub-liked-grid span, .profile-hub-liked-grid p { margin: 0; color: var(--color-text-muted, #7a8495); font-size: 12px; }
.profile-hub-empty { grid-column: 1 / -1; min-height: 180px; border: 1px dashed var(--color-border, #dce1e8); border-radius: 8px; color: var(--color-text-muted, #758095); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.profile-hub-empty p { margin: 0; font-size: 13px; }
.profile-hub-card-panel { width: min(900px, 100%); }

.profile-hub-network-stats { margin-bottom: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border, #e2e6ed); border-radius: 8px; overflow: hidden; }
.profile-hub-network-stats > div { min-height: 88px; padding: 18px; display: grid; align-content: center; gap: 4px; }
.profile-hub-network-stats > div + div { border-left: 1px solid var(--color-border, #e2e6ed); }
.profile-hub-network-stats strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.profile-hub-network-stats span { color: var(--color-text-muted, #778195); font-size: 12px; }
.profile-hub-network-section + .profile-hub-network-section { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--color-border, #e5e7eb); }
.profile-hub-network-title { margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.profile-hub-network-title h4 { margin: 0; font-size: 16px; }
.profile-hub-network-title span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--color-bg-soft, #f1f3f7); color: var(--color-text-muted, #6f798c); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.profile-hub-network-section--pending .profile-hub-network-title span { background: #5969df; color: #fff; }
.profile-hub-network-search { min-height: 44px; margin-bottom: 12px; padding: 0 13px; border: 1px solid var(--color-border, #dce1e9); border-radius: 7px; display: flex; align-items: center; gap: 9px; }
.profile-hub-network-search:focus-within { border-color: #7180e6; box-shadow: 0 0 0 3px rgba(89, 105, 223, 0.1); }
.profile-hub-network-search svg { width: 17px; color: var(--color-text-muted, #7a8495); }
.profile-hub-network-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; }
.profile-hub-network-requests, .profile-hub-network-list { display: grid; gap: 8px; }
.profile-hub-network-requests article, .profile-hub-network-list article { min-width: 0; min-height: 70px; padding: 12px 14px; border: 1px solid var(--color-border, #e2e6ed); border-radius: 8px; display: flex; align-items: center; gap: 12px; }
.profile-hub-network-list img, .profile-hub-network-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.profile-hub-network-avatar { background: rgba(89, 105, 223, 0.12); color: #5060d3; display: grid; place-items: center; font-size: 16px; font-weight: 800; }
.profile-hub-network-requests article > div:nth-child(2), .profile-hub-network-person { min-width: 0; flex: 1; display: grid; gap: 3px; }
.profile-hub-network-requests strong, .profile-hub-network-person strong, .profile-hub-network-requests span, .profile-hub-network-person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-hub-network-requests strong, .profile-hub-network-person strong { font-size: 14px; }
.profile-hub-network-requests span, .profile-hub-network-person span, .profile-hub-network-person small { color: var(--color-text-muted, #778195); font-size: 12px; }
.profile-hub-network-person small { display: flex; align-items: center; gap: 4px; }
.profile-hub-network-person small svg { width: 12px; height: 12px; }
.profile-hub-network-requests button, .profile-hub-network-list article > button { min-height: 36px; padding: 0 12px; border: 1px solid var(--color-border, #dce1e9); border-radius: 7px; background: var(--color-bg-white, #fff); color: var(--color-text-main, #182235); display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-hub-network-requests button { border-color: transparent; background: #5969df; color: #fff; }
.profile-hub-network-requests button svg, .profile-hub-network-list article > button svg { width: 15px; height: 15px; }
.profile-hub-network-requests button:disabled, .profile-hub-network-list article > button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 760px) {
  .profile-hub-backdrop { padding: 0; }
  .profile-hub-modal { height: 100dvh; border: 0; border-radius: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .profile-hub-sidebar { padding: 12px 12px 10px; border-right: 0; border-bottom: 1px solid var(--color-border, #e5e7eb); }
  .profile-hub-person, .profile-hub-progress { display: none; }
  .profile-hub-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .profile-hub-sidebar nav button { min-width: 0; min-height: 42px; padding: 0 8px; gap: 7px; justify-content: center; }
  .profile-hub-sidebar nav button span { white-space: nowrap; }
  .profile-hub-sidebar nav em { margin-left: 0; }
  .profile-hub-header { min-height: 72px; padding: 12px 14px 10px 18px; }
  .profile-hub-header h2 { font-size: 20px; }
  .profile-hub-scroll { padding: 20px 16px 40px; }
  .profile-hub-form-grid, .profile-hub-liked-grid { grid-template-columns: 1fr; }
  .profile-hub-form-grid label.is-wide { grid-column: auto; }
  .profile-hub-resume-section + .profile-hub-resume-section { margin-top: 24px; padding-top: 22px; }
  .profile-hub-resume-heading h3 { font-size: 18px; }
  .profile-hub-resume-row { grid-template-columns: 44px minmax(0, 1fr) 34px; gap: 11px; }
  .profile-hub-resume-logo { width: 44px; height: 44px; }
  .profile-hub-resume-editor { padding: 14px; }
  .profile-hub-network-stats > div { min-height: 74px; padding: 12px; }
  .profile-hub-network-stats strong { font-size: 20px; }
  .profile-hub-network-list article > button { width: 38px; padding: 0; justify-content: center; font-size: 0; }
}
@media (max-width: 520px) {
  .profile-hub-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.profile-hub-section-heading--cards > div:nth-child(2) { flex:1; min-width:0; }
.profile-hub-card-tools { display:flex; align-items:center; gap:6px; margin-left:auto; }
.profile-hub-card-tools button { display:grid; width:36px; height:36px; place-items:center; padding:0; border:1px solid #d9e0ec; border-radius:6px; background:var(--color-bg-main, #fff); color:var(--color-text-main, #374151); cursor:pointer; }
.profile-hub-card-tools button svg { width:17px; height:17px; }
.profile-hub-card-tools button:focus-visible { outline:2px solid #526bc2; outline-offset:2px; }
@media (max-width:600px) { .profile-hub-section-heading--cards { flex-wrap:wrap; } }
.profile-hub-card-delete-confirm { display:flex; align-items:center; gap:10px; margin:0 0 16px; color:#374151; font-size:13px; }
.profile-hub-card-delete-confirm button { padding:7px 12px; border:1px solid #d9e0ec; border-radius:6px; background:#fff; color:#374151; cursor:pointer; }
.profile-hub-card-delete-confirm button:last-child { border-color:#dc6464; color:#b13232; }
/* ============================= */
/* profile dropdown */
/* ============================= */

.profile-dropdown{
  position: relative;
}

.profile-dropdown-menu{
  position: absolute;
  top: 46px;
  right: 0;

  min-width: 190px;
  padding: 8px;

  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);

  display: flex;
  flex-direction: column;
  gap: 4px;

  z-index: 1200;
}

.profile-dropdown-item{
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 42px;
  padding: 0 12px;

  border: none;
  border-radius: 10px;
  background: transparent;

  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  text-align: left;

  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.profile-dropdown-item:hover{
  background: #f5f5f5;
}

.profile-dropdown-divider{
  height: 1px;
  margin: 4px 2px;
  background: #ececec;
}

.drop-logout-button{
  color: #d93025;
}

.drop-logout-button:hover{
  background: #fff1f0;
}


/* ============================= */
/* icon button */
/* ============================= */

.nav-icon-btn{
  position: relative;

  width: 42px;
  height: 42px;

  border: none;
  border-radius: 12px;
  background: #ffffff;
  color: #222;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.nav-icon-btn:hover{
  background: #f6f7f9;
}

.nav-icon-btn.active{
  background: #f3f6ff;
  box-shadow: inset 0 0 0 1px #dfe7ff;
}

.nav-icon-btn:active{
  transform: translateY(1px);
}

.nav-icon{
  font-size: 20px;
  color: #222;
}


/* ============================= */
/* badge */
/* ============================= */

.nav-badge{
  position: absolute;
  top: 4px;
  right: 4px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff5a5f, #e53935);
  color: #fff;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-sizing: border-box;
}


/* ============================= */
/* notification / chat dropdown */
/* ============================= */

.notification-dropdown,
.chat-dropdown{
  position: relative;
}

.notification-dropdown-menu,
.chat-dropdown-menu{
  position: absolute;
  top: 48px;
  right: 0;

  width: 360px;
  min-height: 320px;

  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.10),
    0 4px 14px rgba(15, 23, 42, 0.06);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  z-index: 1200;
}


/* ============================= */
/* dropdown header */
/* ============================= */

.notification-dropdown-header,
.chat-dropdown-header{
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 56px;
  padding: 0 16px;

  background: #fff;
  border-bottom: 1px solid #f1f3f5;
}

.notification-dropdown-title,
.chat-dropdown-title{
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.notification-dropdown-action,
.chat-dropdown-action{
  border: none;
  background: transparent;
  padding: 0;

  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #667085;

  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.notification-dropdown-action:hover,
.chat-dropdown-action:hover{
  color: #111827;
}

.notification-dropdown-action:disabled,
.chat-dropdown-action:disabled{
  opacity: 0.45;
  cursor: default;
}

.notification-dropdown-action--delete-read{
  margin-left: auto;
  margin-right: 12px;
  color: #8b95a1;
}

.chat-dropdown-filters{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid #f1f3f5;
}

.chat-dropdown-filter{
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #7b8494;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.chat-dropdown-filter:hover{
  background: #f6f8fc;
  color: #344054;
}

.chat-dropdown-filter.active{
  background: #edf3ff;
  color: #315efb;
}

.chat-dropdown-filter:focus-visible{
  outline: 2px solid #8eb0ff;
  outline-offset: 1px;
}

.chat-dropdown-filter-count{
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dce8ff;
  color: #315efb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}


/* ============================= */
/* dropdown body */
/* ============================= */

.notification-dropdown-body,
.chat-dropdown-body{
  flex: 1;
  min-height: 264px;
  max-height: 420px;
  overflow-y: auto;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}

.notification-dropdown-body::-webkit-scrollbar,
.chat-dropdown-body::-webkit-scrollbar{
  width: 8px;
}

.notification-dropdown-body::-webkit-scrollbar-thumb,
.chat-dropdown-body::-webkit-scrollbar-thumb{
  background: #d9dee7;
  border-radius: 999px;
}

.notification-dropdown-body::-webkit-scrollbar-track,
.chat-dropdown-body::-webkit-scrollbar-track{
  background: transparent;
}


/* ============================= */
/* empty state */
/* ============================= */

.notification-empty,
.chat-empty{
  min-height: 264px;
  padding: 28px 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.notification-empty-title,
.chat-empty-title{
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.notification-empty-text,
.chat-empty-text{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}


/* ============================= */
/* notification item */
/* ============================= */

.notification-item{
  width: 100%;
  padding: 14px 16px;

  border: none;
  border-bottom: 1px solid #f1f3f5;
  background: #fff;

  display: block;
  text-align: left;

  cursor: pointer;
  transition: background-color 0.18s ease;
}

.notification-item:last-child{
  border-bottom: none;
}

.notification-item:hover{
  background: #f8fafc;
}

.notification-item.unread{
  background: #f8fbff;
}

.notification-item.unread:hover{
  background: #f2f7ff;
}

.notification-item-top{
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-title{
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

.notification-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2563eb;
  flex-shrink: 0;
}

.notification-delete-btn{
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  color: #667085;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.notification-item:hover .notification-delete-btn,
.notification-item:focus-within .notification-delete-btn{
  opacity: 1;
  pointer-events: auto;
}

.notification-delete-btn:hover,
.notification-delete-btn:focus-visible{
  background: #f2f4f7;
  color: #101828;
  outline: none;
}

.notification-message{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.notification-item-bottom{
  margin-top: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification-time{
  font-size: 12px;
  color: #9ca3af;
}

.notification-action-text{
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
}


/* ============================= */
/* chat item */
/* ============================= */

.chat-item{
  width: 100%;
  padding: 14px 16px;

  border: none;
  border-bottom: 1px solid #f1f3f5;
  background: #fff;

  display: block;
  text-align: left;

  cursor: pointer;
  transition: background-color 0.18s ease;
}

.chat-item:last-child{
  border-bottom: none;
}

.chat-item:hover{
  background: #f8fafc;
}

.chat-item.unread{
  background: #f8fbff;
}

.chat-item.unread:hover{
  background: #f2f7ff;
}

.chat-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-name{
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

.chat-time{
  font-size: 12px;
  color: #9ca3af;
  flex-shrink: 0;
}

.chat-preview{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-workspace-name{
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: #9ca3af;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-bottom{
  margin-top: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-meta{
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-unread-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2563eb;
  flex-shrink: 0;
}

.chat-unread-count{
  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #eef2ff;
  color: #315efb;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.profile-dropdown{
  position: relative;
}

.profile-dropdown-menu{
  position: absolute;
  top: 46px;
  right: 0;

  min-width: 190px;
  padding: 8px;

  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);

  display: flex;
  flex-direction: column;
  gap: 4px;

  z-index: 1200;
}

.profile-dropdown-item{
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 42px;
  padding: 0 12px;

  border: none;
  border-radius: 10px;
  background: transparent;

  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  text-align: left;

  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.profile-dropdown-item:hover{
  background: #f5f5f5;
}

.profile-dropdown-divider{
  height: 1px;
  margin: 4px 2px;
  background: #ececec;
}

.profile-dropdown-setting-icon{
  flex-shrink: 0;
  font-size: 17px;
  color: #8d96a8;
  transition: color 0.18s ease;
}

.profile-dropdown-item:hover .profile-dropdown-setting-icon{
  color: #4b5563;
}

.drop-logout-button{
  color: #d93025;
}

.drop-logout-button:hover{
  background: #fff1f0;
}

.profile-dropdown-logout-icon{
  flex-shrink: 0;
  font-size: 17px;
  color: #d93025;
}

.profile-dropdown-user {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-dropdown-user strong {
  display: inline-block;
  min-width: 0;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================= */
/* responsive */
/* ============================= */

@media (max-width: 768px){
  .notification-dropdown-menu,
  .chat-dropdown-menu{
    right: -8px;
    width: min(360px, calc(100vw - 24px));
  }
}

.notif-invite-actions {
  margin: 8px 0 4px;
}

.notif-invite-accept-btn {
  display: inline-flex;
  align-items: center;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.notif-invite-accept-btn:hover:not(:disabled) {
  background: #4338ca;
}

.notif-invite-accept-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.notif-invite-accepted {
  margin: 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
}

/* ============================= */
/* login button */
/* ============================= */

.login-button{
  border:none;
  padding:12px 22px;
  border-radius:30px;
  background:#000;
  color:#fff;
  cursor:pointer;
}

/* ============================= */
/* logout button */
/* ============================= */

.logout-button{
  border:none;
  padding:12px 22px;
  border-radius:30px;
  background:#e53935;
  color:#fff;
  cursor:pointer;
}/* 알림·채팅 두 개만 들고 있는 묶음. 데스크톱에는 헤더 오른쪽(NavRight)에 이미
   같은 버튼이 있으므로, 이 묶음은 탭바가 있던 좁은 화면에서만 나온다. */
.mobile-quick-actions {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-quick-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* 드롭다운은 버튼 바로 아래에 떨어진다. 좁은 화면에서는 화면 밖으로 밀려
     잘리기 쉬워, 오른쪽 끝에 맞추고 폭을 화면 안으로 묶어 둔다. */
  .mobile-quick-actions .notification-dropdown-menu,
  .mobile-quick-actions .chat-dropdown-menu {
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}
/* ============================= */
/* footer base */
/* ============================= */

.footer {
  position: relative;
  overflow: hidden;
  padding: 0 20px;
  background:
    radial-gradient(circle at 10% 18%, rgba(113, 91, 255, 0.14), transparent 26%),
    radial-gradient(circle at 88% 10%, rgba(74, 159, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #11131a 0%, #0a0c12 100%);
  color: #f5f7fb;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.015) 12%,
      rgba(255, 255, 255, 0) 30%
    );
  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1160px, 92%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 18%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.04) 82%,
    transparent 100%
  );
  pointer-events: none;
}

/* ============================= */
/* shell */
/* ============================= */

.footer-shell {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 92px 0 32px;
}

/* ============================= */
/* top */
/* ============================= */

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 88px;
}

/* ============================= */
/* brand */
/* ============================= */

.footer-brand {
  flex: 1;
  max-width: 430px;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.footer-brand-link:hover .footer-logo-text {
  opacity: 0.96;
}

.footer-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-logo-wrap::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(
    circle,
    rgba(124, 117, 255, 0.16) 0%,
    rgba(124, 117, 255, 0.06) 34%,
    rgba(124, 117, 255, 0.02) 54%,
    transparent 72%
  );
  filter: blur(18px);
  pointer-events: none;
}

.footer-logo-wrap .logo {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
}

.footer-logo-wrap .logo img {
  display: block;
  height: 96px;
  width: auto;
  object-fit: contain;
  filter:
    brightness(1.03)
    contrast(1.03)
    saturate(0.96)
    drop-shadow(0 16px 28px rgba(0, 0, 0, 0.28));
}

.footer-brand-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.footer-logo-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(124, 185, 255, 0.7);
  margin-bottom: 4px;
}

.footer-logo-text {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ffffff;
}

.footer-logo-sub {
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(214, 220, 232, 0.62);
  white-space: nowrap;
}

.footer-biz-info {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(214, 220, 232, 0.4);
  letter-spacing: 0.01em;
}

.footer-description {
  margin: 24px 0 0;
  max-width: 360px;
  color: rgba(229, 234, 242, 0.7);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: -0.015em;
}

/* ============================= */
/* links */
/* ============================= */

.footer-links {
  flex: 1.15;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 52px;
}

.footer-column h4 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column li + li {
  margin-top: 14px;
}

.footer-column a {
  position: relative;
  display: inline-block;
  color: rgba(216, 221, 231, 0.66);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.75;
  transition:
    color 0.22s ease,
    transform 0.22s ease,
    opacity 0.22s ease;
}

.footer-column a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.78);
  transition: width 0.22s ease;
}

.footer-column a:hover {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-column a:hover::after {
  width: 100%;
}

/* ============================= */
/* divider */
/* ============================= */

.footer-divider {
  margin-top: 64px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );
}

/* ============================= */
/* bottom */
/* ============================= */

.footer-bottom {
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-copyright {
  margin: 0;
  color: rgba(203, 209, 220, 0.52);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.footer-meta {
  margin: 0;
  color: rgba(203, 209, 220, 0.4);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: rgba(203, 209, 220, 0.52);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
  color: #ffffff;
}

/* ============================= */
/* tablet */
/* ============================= */
@media (max-width: 1024px) {
  .footer {
    padding-bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + env(safe-area-inset-bottom)
    );
  }
}

@media (max-width: 992px) {
  .footer {
    margin-top: 0px;
  }

  .footer-shell {
    padding: 78px 0 28px;
  }

  .footer-top {
    flex-direction: column;
    gap: 52px;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-description {
    max-width: 100%;
  }

  .footer-links {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .footer-divider {
    margin-top: 48px;
  }
}

/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 768px) {
  .footer {
    margin-top: 0;
    padding:
      0
      16px
      calc(
        var(--mobile-bottom-nav-height, 68px)
        + env(safe-area-inset-bottom)
      );
  }

  .footer-shell {
    padding: 62px 0 24px;
  }

  .footer-top {
    gap: 38px;
  }

  .footer-brand-link {
    gap: 12px;
  }

  .footer-logo-wrap::before {
    width: 150px;
    height: 150px;
    left: -12px;
  }

  .footer-logo-wrap .logo img {
    height: 78px;
  }

  .footer-logo-text {
    font-size: 1.2rem;
  }

  .footer-logo-sub {
    margin-top: 4px;
    font-size: 0.68rem;
  }

  .footer-description {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-column h4 {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .footer-column a {
    font-size: 14px;
  }

  .footer-divider {
    margin-top: 36px;
  }

  .footer-bottom {
    margin-top: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-copyright,
  .footer-meta,
  .footer-bottom-links a {
    font-size: 12px;
  }

  .footer-bottom-links {
    gap: 14px;
  }
}.business-card-prompt-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2000;
}

.business-card-prompt-modal {
  width: min(100%, 460px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
}

.business-card-prompt-modal h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.business-card-prompt-modal__description {
  margin: 0 0 16px;
  color: var(--color-text-sub);
  font-size: 14px;
}
/* ══════════════════════════════════════════
   NEW HOME PAGE  (hn-*)
══════════════════════════════════════════ */

:root {
  --hn-bg: #ffffff;
  --hn-text: #111827;
  --hn-text-muted: #6b7280;
  --hn-border: #e5e7eb;
  --hn-surface: #f9fafb;
  --hn-accent: #4965ff;
  --hn-accent-hover: #3751e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hn-bg: #0f0f11;
    --hn-text: #f3f4f6;
    --hn-text-muted: #9ca3af;
    --hn-border: #1f2937;
    --hn-surface: #18191e;
    --hn-accent: #6b82ff;
    --hn-accent-hover: #5a6fe0;
  }
}
:root[data-theme="dark"] {
  --hn-bg: #0f0f11;
  --hn-text: #f3f4f6;
  --hn-text-muted: #9ca3af;
  --hn-border: #1f2937;
  --hn-surface: #18191e;
  --hn-accent: #6b82ff;
  --hn-accent-hover: #5a6fe0;
}

/* ── 페이지 ── */
.hn-page {
  min-height: calc(100vh - 60px);
  background: var(--hn-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 80px;
}

.hn-layout {
  width: 100%;
  max-width: 960px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.hn-layout--start {
  justify-content: center;
}

/* ── 캐릭터 패널 ── */
.hn-char-panel {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  position: sticky;
  top: 120px;
  margin-top: 80px;
}

.hn-char-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 12px;
  transition: transform 0.15s;
}

.hn-char-stage:hover {
  transform: scale(1.04);
}

.hn-char-hint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 2px 10px;
  border-radius: 99px;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  pointer-events: none;
}

.hn-char-stage:hover .hn-char-hint {
  opacity: 1;
}

.hn-char-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e1e2e;
  margin: 4px 0 0;
  text-align: center;
}

.hn-center {
  flex: 1;
  min-width: 0;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

@media (max-width: 780px) {
  .hn-layout { flex-direction: column; align-items: center; gap: 12px; }
  .hn-char-panel {
    width: 100%;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-top: 0;
    padding: 0 4px;
  }
  .hn-char-stage svg,
  .hn-char-stage canvas { width: 72px !important; height: 72px !important; }
  .hn-char-name { font-size: 14px; margin: 0; }
  .hn-center { width: 100%; max-width: 100%; }
}

/* ── 신규 유저: 인트로 ── */
.hn-intro {
  text-align: center;
  margin-bottom: 32px;
}

.hn-ai-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hn-accent);
  background: color-mix(in srgb, var(--hn-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hn-accent) 25%, transparent);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.hn-intro-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--hn-text-muted);
  margin: 14px 0 0;
  word-break: keep-all;
}

.hn-intro-text strong { color: var(--hn-text); }

.hn-greeting {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 700;
  color: var(--hn-text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ── 기존 유저: 헤더 ── */
.hn-user-header {
  text-align: center;
  margin-bottom: 24px;
}

.hn-welcome {
  font-size: 16px;
  color: var(--hn-text-muted);
  margin: 0;
  text-align: center;
}

.hn-welcome strong { color: var(--hn-text); }

/* ── 팀공간 카드 목록 ── */
.hn-ws-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.hn-ws-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--hn-surface);
  border: 1.5px solid var(--hn-border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  text-align: left;
}

.hn-ws-card:hover {
  border-color: var(--hn-accent);
  box-shadow: 0 4px 20px rgba(73, 101, 255, 0.12);
  transform: translateY(-1px);
}

.hn-ws-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.hn-ws-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--hn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hn-ws-enter {
  font-size: 13px;
  color: var(--hn-accent);
  font-weight: 600;
  flex-shrink: 0;
}

.hn-ws-new {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 22px;
  background: transparent;
  border: 1.5px dashed var(--hn-border);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hn-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.hn-ws-new:hover {
  border-color: var(--hn-accent);
  color: var(--hn-accent);
}

/* ── 빠른 액션 (신규 유저) ── */
.hn-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}

.hn-quick-btn {
  background: var(--hn-surface);
  border: 1.5px solid var(--hn-border);
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hn-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.hn-quick-btn:hover {
  border-color: var(--hn-accent);
  color: var(--hn-accent);
}

/* ── 프로필 완료율 넛지 ── */
.hn-profile-nudge {
  display: block;
  width: 100%;
  margin: 12px 0 4px;
  padding: 4px 0;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--hn-accent);
  text-align: center;
  cursor: pointer;
  line-height: 1.5;
}
.hn-profile-nudge:hover { text-decoration: underline; }
.hn-profile-nudge strong { font-weight: 700; }

/* ── 하단 CTA ── */
.hn-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hn-cta-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--hn-accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.hn-cta-primary:hover {
  background: var(--hn-accent-hover);
  transform: translateY(-1px);
}

.hn-cta-secondary {
  background: none;
  border: none;
  font-size: 14px;
  color: var(--hn-text-muted);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s, background 0.12s;
}

.hn-cta-secondary:hover {
  color: var(--hn-text);
  background: var(--hn-surface);
}

.hn-cta-secondary strong { color: var(--hn-text); }

.hn-cta-secondary--bottom {
  margin-top: 16px;
  font-size: 13px;
}

/* ── 팀원 추천 ── */
.hn-recruit {
  width: 100%;
  margin-top: 8px;
}

.hn-recruit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-text-muted);
  margin: 0 0 12px 4px;
}

.hn-recruit-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hn-recruit-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--hn-surface);
  border: 1.5px solid var(--hn-border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  flex: 1;
  min-width: 160px;
  text-align: left;
}

.hn-recruit-card:hover {
  border-color: var(--hn-accent);
  transform: translateY(-1px);
}

.hn-recruit-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--hn-border);
}

.hn-recruit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hn-recruit-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hn-recruit-role {
  font-size: 11.5px;
  color: var(--hn-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── FAQ 리스트 ── */
.hn-faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
  border-top: 1px solid var(--hn-border);
}

.hn-faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hn-border);
  font-size: 15px;
  font-weight: 400;
  color: var(--hn-text);
  cursor: pointer;
  text-align: left;
  transition: color 0.12s, padding-left 0.12s;
}

.hn-faq-btn:hover {
  color: var(--hn-accent);
  padding-left: 14px;
}

.hn-faq-icon {
  font-size: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.hn-faq-text {
  flex: 1;
}

.hn-faq-arrow {
  color: var(--hn-text-muted);
  font-size: 13px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.hn-faq-btn:hover .hn-faq-arrow {
  opacity: 1;
}

/* ── 온라인 사무실 아코디언 패널 ── */
.hn-faq-btn--open {
  color: var(--hn-accent);
  background: color-mix(in srgb, var(--hn-accent) 5%, transparent);
}

.hn-office-panel {
  padding: 16px 6px 16px 6px;
  border-bottom: 1px solid var(--hn-border);
  border-left: 3px solid var(--hn-accent);
  background: color-mix(in srgb, var(--hn-accent) 3%, var(--hn-surface));
}

@keyframes hn-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hn-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hn-panel-in {
  animation: hn-slide-down 0.18s ease both;
}

.hn-reveal-item {
  animation: hn-reveal 0.2s ease both;
}

.hn-office-img-wrap {
  position: relative;
  display: block;
}

.hn-office-img {
  width: 100%;
  border-radius: 12px;
  display: block;
  border: 1px solid var(--hn-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.hn-office-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  background: var(--hn-accent);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 2px 8px rgba(73, 101, 255, 0.35);
}

.hn-office-badge:hover {
  background: var(--hn-accent-hover);
  transform: scale(1.04);
}

.hn-office-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hn-office-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--hn-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.hn-office-cta:hover {
  background: var(--hn-accent-hover);
  transform: translateY(-1px);
}

.hn-office-collapse {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--hn-text-muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.12s, background 0.12s;
}

.hn-office-collapse:hover {
  color: var(--hn-text);
  background: var(--hn-border);
}

/* ── 기능소개 모달 ── */
.hn-feat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.hn-feat-modal {
  background: var(--hn-bg);
  border: 1px solid var(--hn-border);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.hn-feat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--hn-border);
  flex-shrink: 0;
}

.hn-feat-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hn-text);
}

.hn-feat-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hn-text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 8px;
  transition: color 0.12s, background 0.12s;
}

.hn-feat-close:hover {
  color: var(--hn-text);
  background: var(--hn-surface);
}

.hn-feat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.hn-feat-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hn-text-muted);
  margin: 0 0 12px;
}

.hn-feat-body .hn-feat-category:not(:first-child) {
  margin-top: 24px;
}

.hn-feat-section + .hn-feat-section {
  margin-top: 24px;
}

.hn-feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.hn-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-border);
  border-radius: 8px;
}

.hn-feat-emoji {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.hn-feat-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hn-text);
  margin: 0 0 3px;
}

.hn-feat-desc {
  font-size: 12px;
  color: var(--hn-text-muted);
  line-height: 1.55;
  margin: 0;
  word-break: keep-all;
}

.hn-feat-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--hn-border);
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .hn-feat-grid { grid-template-columns: 1fr; }
  .hn-feat-modal { max-height: 90vh; border-radius: 8px; }
}

/* Authenticated workspace dashboard */
.hn-page {
  padding: 36px 24px 72px;
}

.hn-layout {
  max-width: 1040px;
  display: block;
}

.hn-center {
  width: 100%;
  max-width: 1040px;
  align-items: stretch;
}

.hn-user-header {
  width: 100%;
  min-height: 96px;
  display: grid;
  /* 캐릭터를 뺀 뒤로 칸은 둘이다 — 인사말과, 그 옆의 안내 배너. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 34px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hn-border);
  text-align: left;
}

.hn-user-heading {
  min-width: 0;
}

.hn-user-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--hn-accent);
  font-size: 12px;
  font-weight: 700;
}

.hn-user-heading .hn-welcome {
  color: var(--hn-text);
  font-size: 24px;
  line-height: 1.3;
  text-align: left;
}

.hn-user-heading p {
  margin: 6px 0 0;
  color: var(--hn-text-muted);
  font-size: 14px;
}

.hn-dashboard-section {
  width: 100%;
  margin-bottom: 38px;
}

.hn-section-header {
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.hn-section-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hn-text);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
}

.hn-section-header p {
  margin: 5px 0 0;
  color: var(--hn-text-muted);
  font-size: 13px;
}

.hn-section-action {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  background: var(--hn-text);
  border: 1px solid var(--hn-text);
  border-radius: 7px;
  color: var(--hn-bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.hn-section-action:hover {
  opacity: 0.84;
}

.hn-ws-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
  margin-bottom: 0;
  border-top: 0;
}

.hn-ws-card {
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 14px 10px 16px;
  background: transparent;
  border: 0;
  border-radius: 26px;
  box-shadow: none;
  text-align: center;
  transition: transform .15s ease;
}

.hn-ws-card:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-3px);
}

.hn-ws-card:focus-visible {
  outline: 2px solid var(--hn-accent);
  outline-offset: 3px;
}

.hn-ws-icon {
  width: 118px;
  height: 118px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, #7c58d3 16%, var(--hn-border));
  border-radius: 34px;
  background: color-mix(in srgb, #b78ae8 16%, var(--hn-surface));
  color: #8757cf;
  box-shadow: 0 12px 28px rgba(62, 44, 102, .09);
  transition: transform .15s ease, box-shadow .15s ease;
}

.hn-ws-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.hn-ws-card:hover .hn-ws-icon {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(62, 44, 102, .14);
}

.hn-ws-icon--study {
  background: color-mix(in srgb, #7bc9a7 16%, var(--hn-surface));
  color: #268363;
  border-color: color-mix(in srgb, #268363 16%, var(--hn-border));
}

.hn-ws-icon--small_group {
  background: color-mix(in srgb, #e8b65c 17%, var(--hn-surface));
  color: #9b6818;
  border-color: color-mix(in srgb, #9b6818 16%, var(--hn-border));
}

.hn-ws-main {
  width: 100%;
  min-width: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.hn-ws-name {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  font-size: 16px;
  font-weight: 780;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hn-ws-meta {
  color: var(--hn-text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.hn-dashboard-section--quick {
  margin-bottom: 24px;
}

.hn-faq-list {
  margin: 0;
  border: 0;
}

.hn-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hn-faq-btn {
  min-height: 76px;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hn-surface);
  border: 1px solid var(--hn-border);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.hn-faq-btn:hover {
  padding-left: 14px;
  background: color-mix(in srgb, var(--hn-accent) 4%, var(--hn-surface));
  border-color: color-mix(in srgb, var(--hn-accent) 45%, var(--hn-border));
  color: var(--hn-text);
}

.hn-faq-btn--open {
  background: color-mix(in srgb, var(--hn-accent) 7%, var(--hn-surface));
  border-color: var(--hn-accent);
}

.hn-faq-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--hn-bg);
  border: 1px solid var(--hn-border);
  color: var(--hn-accent);
}

.hn-faq-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hn-faq-text {
  flex: none;
  color: var(--hn-text);
  font-weight: 700;
}

.hn-faq-description {
  color: var(--hn-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.hn-faq-arrow {
  opacity: 1;
  transition: transform 0.15s;
}

.hn-faq-btn--open .hn-faq-arrow {
  color: var(--hn-accent);
  transform: rotate(90deg);
}

.hn-faq-list > .hn-panel-in {
  margin-top: 12px;
  border: 1px solid var(--hn-border);
  border-left: 3px solid var(--hn-accent);
  border-radius: 8px;
}

@media (max-width: 720px) {
  .hn-page {
    padding: 22px 16px 56px;
  }

  .hn-user-header {
    /* 캐릭터가 있던 시절의 [아바타][인사말] 배치가 남아 있었다.
       지금은 [인사말][배너]라서, 이 규칙이 배너를 인사말 왼쪽으로 밀어냈다. */
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin-bottom: 28px;
  }

  .hn-user-heading .hn-welcome {
    font-size: 20px;
  }

  .hn-user-heading p {
    display: none;
  }

  .hn-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hn-section-header {
    align-items: center;
  }

  .hn-section-header p {
    display: none;
  }

  .hn-ws-list {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 12px;
  }

  .hn-ws-card {
    min-height: 196px;
    gap: 12px;
    padding: 12px 8px 14px;
  }

  .hn-ws-icon { width: 104px; height: 104px; border-radius: 29px; }
  .hn-ws-icon svg { width: 34px; height: 34px; }
  .hn-ws-name { font-size: 15px; }
  .hn-ws-meta { font-size: 12px; }

}

/* ── 팀원 추천 인라인 패널 ── */
.hn-recruit-panel {
  padding: 16px 6px 12px;
  border-bottom: 1px solid var(--hn-border);
  border-left: 3px solid var(--hn-accent);
  background: color-mix(in srgb, var(--hn-accent) 3%, var(--hn-surface));
}

.hn-rp-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 16px;
  padding-left: 2px;
}

.hn-rp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hn-text);
}

.hn-rp-sub {
  font-size: 12px;
  color: var(--hn-text-muted);
}

.hn-rp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hn-rp-card {
  background: var(--hn-bg);
  border: 1px solid var(--hn-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hn-rp-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.hn-rp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--hn-border);
}

.hn-rp-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hn-rp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--hn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hn-rp-username {
  font-size: 11.5px;
  color: var(--hn-text-muted);
}

.hn-rp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.hn-rp-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--hn-accent) 12%, transparent);
  color: var(--hn-accent);
}

.hn-rp-add-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--hn-surface);
  border: 1px solid var(--hn-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hn-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.hn-rp-add-btn:hover {
  border-color: var(--hn-accent);
  color: var(--hn-accent);
}

.hn-rp-bio-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hn-rp-bio-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--hn-text-muted);
  letter-spacing: 0.02em;
}

.hn-rp-bio {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hn-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.hn-rp-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.hn-rp-more {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--hn-accent);
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.12s;
}

.hn-rp-more:hover { opacity: 0.75; }

.hn-rp-loading,
.hn-rp-empty {
  font-size: 13px;
  color: var(--hn-text-muted);
  padding: 12px 2px;
}

@media (max-width: 600px) {
  .hn-rp-cards { grid-template-columns: 1fr; }
}

/* ── 프로젝트 / 스터디 추천 패널 공통 ── */
.hn-rec-panel {
  padding: 16px 6px 12px;
  border-bottom: 1px solid var(--hn-border);
  border-left: 3px solid var(--hn-accent);
  background: color-mix(in srgb, var(--hn-accent) 3%, var(--hn-surface));
}

.hn-rec-panel .hn-rp-cards {
  grid-template-columns: 1fr;
  gap: 8px;
}

.hn-rec-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.hn-rec-category {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--hn-accent) 12%, transparent);
  color: var(--hn-accent);
}

.hn-rec-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
}

.hn-rec-status--on {
  background: color-mix(in srgb, #10b981 12%, transparent);
  color: #10b981;
}

.hn-rec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hn-text);
  margin: 0 0 5px;
  word-break: keep-all;
}

.hn-rec-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hn-text-muted);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.hn-rec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hn-rec-members {
  font-size: 12px;
  color: var(--hn-text-muted);
}

.hn-rec-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--hn-accent);
}

.hn-rp-card--project,
.hn-rp-card--study {
  cursor: pointer;
  transition: border-color 0.13s, transform 0.12s;
}

.hn-rp-card--project:hover,
.hn-rp-card--study:hover {
  border-color: var(--hn-accent);
  transform: translateY(-2px);
}

/* ── 인라인 요약 (타이핑 애니메이션) ── */
.hn-si-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.hn-si-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 4px;
}

.hn-si-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hn-text-muted);
  animation: hn-dot-bounce 1.2s ease-in-out infinite;
}
.hn-si-dot:nth-child(2) { animation-delay: 0.2s; }
.hn-si-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes hn-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

.hn-si-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--hn-border);
}

.hn-si-card:last-child {
  border-bottom: none;
}

.hn-si-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hn-si-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.hn-si-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--hn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hn-si-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 99px;
}

.hn-si-badge--project {
  background: color-mix(in srgb, #4965ff 12%, transparent);
  color: #4965ff;
}

.hn-si-badge--study {
  background: color-mix(in srgb, #10b981 12%, transparent);
  color: #10b981;
}

.hn-si-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--hn-text-muted);
  margin: 0;
  min-height: 24px;
  word-break: keep-all;
}

.hn-si-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--hn-accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  border-radius: 1px;
  animation: hn-blink 0.75s step-end infinite;
}

@keyframes hn-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 반응형 ── */
@media (max-width: 520px) {
  .hn-page { padding: 20px 14px 60px; }
  .hn-greeting { font-size: 22px; }
  .hn-intro-text { font-size: 14px; line-height: 1.7; }
  .hn-ws-card { padding: 12px 8px 14px; gap: 12px; }
  .hn-faq-btn { font-size: 14px; padding: 16px 10px; }
  .hn-recruit-list { flex-direction: column; }
  .hn-recruit-card { flex: unset; width: 100%; }
  .hn-summary-modal { max-height: 90vh; border-radius: 16px; }
  .hn-char-panel { gap: 10px; }
  .hn-char-stage svg,
  .hn-char-stage canvas { width: 60px !important; height: 60px !important; }
  .hn-si-card { padding: 14px 16px; }
  .hn-si-name { font-size: 14px; }
  .hn-profile-nudge { font-size: 12px; }
}

/* ── 로그인 전 / 팀공간이 아직 없는 화면 ──────────────────
 *
 * 위의 대시보드 규칙은 팀공간 목록처럼 넓게 펌쳐야 하는 화면을 위한 것이라
 * 폭을 1040px까지 열고 카드 아래 여백도 지운다. 그런데 이 화면은 카드 네 장과
 * 버튼 하나가 전부라, 같은 폭을 쓰면 글자는 왼쪽 끝·화살표는 오른쪽 끝에
 * 붙어 가운데가 비고, 버튼은 카드에 붙어 두 칸 사이 경계선 위에 얇힌다.
 * 이 화면만 좌된다. */
.hn-layout--start {
  /* 내용이 짧아 아래 절반이 통째로 남는다 — 위아래 여백을 나눠 갖게 한다.
     align-items 대신 auto 여백을 쓰면 내용이 화면보다 길어져도 위가 잘리지 않는다. */
  margin-block: auto;
}
.hn-layout--start .hn-center { max-width: 720px; }
.hn-layout--start .hn-intro { margin-bottom: 28px; }
.hn-layout--start .hn-intro-text { max-width: 560px; margin-inline: auto; }
.hn-layout--start .hn-faq-list { margin-bottom: 28px; }
:root {
  --color-cwm-backdrop: rgba(10, 12, 30, 0.5);
  --color-cwm-modal-bg: rgb(255, 255, 255);
  --color-cwm-modal-shadow: rgba(10, 12, 40, 0.2);
  --color-cwm-close-bg: rgb(244, 244, 248);
  --color-cwm-close-text: rgb(102, 112, 133);
  --color-cwm-close-hover-bg: rgb(235, 233, 251);
  --color-cwm-close-hover-text: rgb(111, 100, 216);
  --color-cwm-back-border: rgba(124, 92, 255, 0.18);
  --color-cwm-back-text: rgb(95, 69, 232);
  --color-cwm-back-hover-bg: rgb(245, 243, 255);
  --color-cwm-eyebrow: rgb(124, 108, 248);
  --color-cwm-title: rgb(26, 29, 58);
  --color-cwm-sub: rgb(102, 112, 133);
  --color-cwm-check-icon: rgb(34, 197, 94);
  --color-cwm-code-entry: rgb(102, 112, 133);
  --color-cwm-code-entry-strong: rgb(79, 70, 200);
  --color-cwm-type-border: rgb(228, 231, 236);
  --color-cwm-type-bg: rgb(250, 250, 250);
  --color-cwm-type-hover-border: rgb(168, 156, 248);
  --color-cwm-type-hover-bg: rgb(245, 243, 255);
  --color-cwm-type-selected-border: rgb(124, 108, 248);
  --color-cwm-type-selected-bg: rgb(237, 233, 255);
  --color-cwm-type-icon-bg: rgba(124, 92, 255, 0.1);
  --color-cwm-type-icon-text: rgb(108, 76, 255);
  --color-cwm-type-icon-active-bg: rgb(108, 76, 255);
  --color-cwm-type-icon-active-text: rgb(255, 255, 255);
  --color-cwm-type-desc: rgb(148, 163, 184);
  --color-cwm-cat-border: rgba(124, 92, 255, 0.15);
  --color-cwm-cat-grad-1: rgba(255, 255, 255, 0.98);
  --color-cwm-cat-grad-2: rgba(255, 255, 255, 0.78);
  --color-cwm-cat-grad-3: rgba(255, 255, 255, 0.95);
  --color-cwm-cat-grad-4: rgba(246, 243, 255, 0.9);
  --color-cwm-cat-shadow-1: rgba(17, 17, 17, 0.08);
  --color-cwm-cat-shadow-2: rgba(255, 255, 255, 0.95);
  --color-cwm-cat-hover-border: rgba(124, 92, 255, 0.38);
  --color-cwm-cat-hover-shadow-1: rgba(124, 92, 255, 0.18);
  --color-cwm-cat-selected-border: rgba(124, 92, 255, 0.6);
  --color-cwm-cat-selected-grad-2: rgba(239, 234, 255, 0.95);
  --color-cwm-cat-selected-grad-3: rgb(255, 255, 255);
  --color-cwm-cat-selected-grad-4: rgb(238, 232, 255);
  --color-cwm-cat-selected-shadow: rgba(124, 92, 255, 0.24);
  --color-cwm-cat-selected-ring: rgba(124, 92, 255, 0.12);
  --color-cwm-cat-icon-bg: rgba(124, 92, 255, 0.1);
  --color-cwm-cat-icon-text: rgb(108, 76, 255);
  --color-cwm-cat-title: rgb(23, 23, 23);
  --color-cwm-input-border: rgb(228, 231, 236);
  --color-cwm-input-text: rgb(26, 29, 58);
  --color-cwm-input-focus-border: rgb(124, 108, 248);
  --color-cwm-input-focus-ring: rgba(124, 108, 248, 0.1);
  --color-cwm-input-error-border: rgb(239, 68, 68);
  --color-cwm-err-text: rgb(239, 68, 68);
  --color-cwm-btn-cancel-border: rgb(228, 231, 236);
  --color-cwm-btn-cancel-bg: rgb(255, 255, 255);
  --color-cwm-btn-cancel-text: rgb(102, 112, 133);
  --color-cwm-btn-cancel-hover-bg: rgb(249, 250, 251);
  --color-cwm-btn-primary-bg: rgb(124, 108, 248);
  --color-cwm-btn-primary-shadow: rgba(124, 108, 248, 0.28);
  --color-cwm-btn-primary-hover-bg: rgb(100, 87, 224);
  --color-cwm-btn-recruit-bg: rgb(220, 38, 38);
  --color-cwm-btn-recruit-shadow: rgba(220, 38, 38, 0.2);
  --color-cwm-btn-recruit-hover-bg: rgb(185, 28, 28);
}

.cwm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-cwm-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cwm-modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 24px;
  background: var(--color-cwm-modal-bg);
  box-shadow: 0 24px 64px var(--color-cwm-modal-shadow);
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: cwmFadeUp 0.22s ease both;
}

@keyframes cwmFadeUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cwm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-cwm-close-bg);
  color: var(--color-cwm-close-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.cwm-close:hover { background: var(--color-cwm-close-hover-bg); color: var(--color-cwm-close-hover-text); }

.cwm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px 12px 5px 8px;
  border: 1.5px solid var(--color-cwm-back-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-cwm-back-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cwm-back:hover { background: var(--color-cwm-back-hover-bg); }

/* Eyebrow / title / sub */
.cwm-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cwm-eyebrow);
  margin-bottom: 4px;
}
.cwm-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-cwm-title);
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.cwm-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-cwm-sub);
}

.cwm-header--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cwm-check-icon {
  font-size: 44px;
  color: var(--color-cwm-check-icon);
  margin-bottom: 8px;
}

/* ── Type step ── */
.cwm-step--type .cwm-title { margin-top: 6px; }

.cwm-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.cwm-code-entry {
  display: block;
  margin: 16px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-cwm-code-entry);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cwm-code-entry strong { color: var(--color-cwm-code-entry-strong); text-decoration: underline; text-underline-offset: 3px; }

.cwm-type-card {
  padding: 20px 16px;
  border: 1.5px solid var(--color-cwm-type-border);
  border-radius: 16px;
  background: var(--color-cwm-type-bg);
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  font: inherit;
}
.cwm-type-card:hover {
  border-color: var(--color-cwm-type-hover-border);
  background: var(--color-cwm-type-hover-bg);
  transform: translateY(-2px);
}
.cwm-type-card.is-selected {
  border-color: var(--color-cwm-type-selected-border);
  background: var(--color-cwm-type-selected-bg);
}
.cwm-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--color-cwm-type-icon-bg);
  color: var(--color-cwm-type-icon-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.15s;
}
.cwm-type-card:hover .cwm-type-icon,
.cwm-type-card.is-selected .cwm-type-icon {
  background: var(--color-cwm-type-icon-active-bg);
  color: var(--color-cwm-type-icon-active-text);
}
.cwm-type-card strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-cwm-title);
}
.cwm-type-desc {
  font-size: 11px;
  color: var(--color-cwm-type-desc);
}

/* ── Category step (ProjectNewPage 스타일 그대로) ── */
.cwm-cat-list {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.cwm-cat-circle {
  width: 96px;
  height: 96px;
  border: 1px solid var(--color-cwm-cat-border);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, var(--color-cwm-cat-grad-1), var(--color-cwm-cat-grad-2)),
              linear-gradient(145deg, var(--color-cwm-cat-grad-3), var(--color-cwm-cat-grad-4));
  box-shadow: 0 20px 45px var(--color-cwm-cat-shadow-1), inset 0 1px 0 var(--color-cwm-cat-shadow-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-20px) scale(0.94);
  animation: cwmCatIn 0.45s ease forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font: inherit;
}
.cwm-cat-circle:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: var(--color-cwm-cat-hover-border);
  box-shadow: 0 28px 56px var(--color-cwm-cat-hover-shadow-1), 0 16px 36px var(--color-cwm-cat-shadow-1);
}
.cwm-cat-circle.is-selected {
  border-color: var(--color-cwm-cat-selected-border);
  background: radial-gradient(circle at 30% 20%, var(--color-cwm-cat-grad-1), var(--color-cwm-cat-selected-grad-2)),
              linear-gradient(145deg, var(--color-cwm-cat-selected-grad-3), var(--color-cwm-cat-selected-grad-4));
  box-shadow: 0 30px 60px var(--color-cwm-cat-selected-shadow), inset 0 0 0 1px var(--color-cwm-cat-selected-ring);
}

.cwm-cat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-cwm-cat-icon-bg);
  color: var(--color-cwm-cat-icon-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.15s;
}
.cwm-cat-circle:hover .cwm-cat-icon,
.cwm-cat-circle.is-selected .cwm-cat-icon {
  background: var(--color-cwm-type-icon-active-bg);
  color: var(--color-cwm-type-icon-active-text);
}
.cwm-cat-circle strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-cwm-cat-title);
}

@keyframes cwmCatIn {
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Name input step ── */
.cwm-body { display: flex; flex-direction: column; gap: 6px; }

.cwm-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-cwm-input-border);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--color-cwm-input-text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.14s;
}
.cwm-input:focus { border-color: var(--color-cwm-input-focus-border); box-shadow: 0 0 0 3px var(--color-cwm-input-focus-ring); }
.cwm-input.is-error { border-color: var(--color-cwm-input-error-border); }
.cwm-err { margin: 0; font-size: 12px; color: var(--color-cwm-err-text); }

/* ── Footer / Prompt ── */
.cwm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.cwm-prompt-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cwm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
}
.cwm-btn--cancel {
  border: 1.5px solid var(--color-cwm-btn-cancel-border);
  background: var(--color-cwm-btn-cancel-bg);
  color: var(--color-cwm-btn-cancel-text);
}
.cwm-btn--cancel:hover { background: var(--color-cwm-btn-cancel-hover-bg); }

.cwm-btn--primary {
  border: none;
  background: var(--color-cwm-btn-primary-bg);
  color: var(--color-text-inverse);
  box-shadow: 0 2px 10px var(--color-cwm-btn-primary-shadow);
}
.cwm-btn--primary:hover:not(:disabled) { background: var(--color-cwm-btn-primary-hover-bg); }
.cwm-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.cwm-btn--recruit {
  border: none;
  background: var(--color-cwm-btn-recruit-bg);
  color: var(--color-text-inverse);
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--color-cwm-btn-recruit-shadow);
}
.cwm-btn--recruit:hover { background: var(--color-cwm-btn-recruit-hover-bg); }

.cwm-btn--skip {
  border: 1.5px solid var(--color-cwm-btn-cancel-border);
  background: var(--color-cwm-btn-cancel-bg);
  color: var(--color-cwm-btn-cancel-text);
  font-size: 13px;
}
.cwm-btn--skip:hover { background: var(--color-cwm-btn-cancel-hover-bg); }

[data-theme="dark"] {
  --color-cwm-backdrop: rgba(2, 6, 16, 0.65);
  --color-cwm-modal-bg: rgb(30, 41, 59);
  --color-cwm-modal-shadow: rgba(0, 0, 0, 0.45);
  --color-cwm-close-bg: var(--color-bg-elevated-dark);
  --color-cwm-close-text: var(--color-text-muted);
  --color-cwm-close-hover-bg: rgba(129, 140, 248, 0.16);
  --color-cwm-close-hover-text: rgb(199, 210, 254);
  --color-cwm-back-border: rgba(129, 140, 248, 0.3);
  --color-cwm-back-text: rgb(199, 210, 254);
  --color-cwm-back-hover-bg: rgba(129, 140, 248, 0.12);
  --color-cwm-eyebrow: rgb(165, 180, 252);
  --color-cwm-title: var(--color-text-main);
  --color-cwm-sub: var(--color-text-muted);
  --color-cwm-check-icon: rgb(52, 211, 153);
  --color-cwm-code-entry: var(--color-text-muted);
  --color-cwm-code-entry-strong: rgb(165, 180, 252);
  --color-cwm-type-border: rgb(51, 65, 85);
  --color-cwm-type-bg: var(--color-bg-elevated-dark);
  --color-cwm-type-hover-border: rgba(129, 140, 248, 0.5);
  --color-cwm-type-hover-bg: rgba(129, 140, 248, 0.12);
  --color-cwm-type-selected-border: rgb(129, 140, 248);
  --color-cwm-type-selected-bg: rgba(129, 140, 248, 0.18);
  --color-cwm-type-icon-bg: rgba(129, 140, 248, 0.16);
  --color-cwm-type-icon-text: rgb(199, 210, 254);
  --color-cwm-type-icon-active-bg: rgb(129, 140, 248);
  --color-cwm-type-icon-active-text: var(--color-text-inverse);
  --color-cwm-type-desc: var(--color-text-placeholder);
  --color-cwm-cat-border: rgba(129, 140, 248, 0.25);
  --color-cwm-cat-grad-1: rgba(51, 65, 85, 0.9);
  --color-cwm-cat-grad-2: rgba(30, 41, 59, 0.7);
  --color-cwm-cat-grad-3: rgba(51, 65, 85, 0.85);
  --color-cwm-cat-grad-4: rgba(30, 27, 75, 0.8);
  --color-cwm-cat-shadow-1: rgba(0, 0, 0, 0.3);
  --color-cwm-cat-shadow-2: rgba(255, 255, 255, 0.06);
  --color-cwm-cat-hover-border: rgba(129, 140, 248, 0.5);
  --color-cwm-cat-hover-shadow-1: rgba(129, 140, 248, 0.25);
  --color-cwm-cat-selected-border: rgba(129, 140, 248, 0.7);
  --color-cwm-cat-selected-grad-2: rgba(129, 140, 248, 0.2);
  --color-cwm-cat-selected-grad-3: rgb(51, 65, 85);
  --color-cwm-cat-selected-grad-4: rgb(49, 46, 129);
  --color-cwm-cat-selected-shadow: rgba(129, 140, 248, 0.3);
  --color-cwm-cat-selected-ring: rgba(129, 140, 248, 0.25);
  --color-cwm-cat-icon-bg: rgba(129, 140, 248, 0.16);
  --color-cwm-cat-icon-text: rgb(199, 210, 254);
  --color-cwm-cat-title: var(--color-text-main);
  --color-cwm-input-border: rgb(51, 65, 85);
  --color-cwm-input-text: var(--color-text-main);
  --color-cwm-input-focus-border: rgb(129, 140, 248);
  --color-cwm-input-focus-ring: rgba(129, 140, 248, 0.18);
  --color-cwm-input-error-border: rgb(248, 113, 113);
  --color-cwm-err-text: rgb(248, 113, 113);
  --color-cwm-btn-cancel-border: rgb(51, 65, 85);
  --color-cwm-btn-cancel-bg: rgb(30, 41, 59);
  --color-cwm-btn-cancel-text: var(--color-text-muted);
  --color-cwm-btn-cancel-hover-bg: var(--color-bg-elevated-dark);
  --color-cwm-btn-primary-bg: rgb(129, 140, 248);
  --color-cwm-btn-primary-shadow: rgba(129, 140, 248, 0.3);
  --color-cwm-btn-primary-hover-bg: rgb(165, 180, 252);
  --color-cwm-btn-recruit-bg: rgb(220, 38, 38);
  --color-cwm-btn-recruit-shadow: rgba(220, 38, 38, 0.3);
  --color-cwm-btn-recruit-hover-bg: rgb(185, 28, 28);
}

/* dark.css의 전역 안전망 규칙([class*="-modal"]/[class*="-card"]가 배경/
   테두리/글자색을 일괄 지정)이 .cwm-modal("-modal" 포함)과 .cwm-type-card
   ("-card" 포함)를 잡아버려서 위 다크 토큰이 무시되고 있었다.
   명시도를 맞춰 재선언한다. */
[data-theme="dark"] .cwm-modal {
  background: var(--color-cwm-modal-bg);
  border-color: transparent;
  color: var(--color-cwm-title);
}

[data-theme="dark"] .cwm-type-card {
  background: var(--color-cwm-type-bg);
  border-color: var(--color-cwm-type-border);
}

[data-theme="dark"] .cwm-type-card:hover {
  background: var(--color-cwm-type-hover-bg);
  border-color: var(--color-cwm-type-hover-border);
}

[data-theme="dark"] .cwm-type-card.is-selected {
  background: var(--color-cwm-type-selected-bg);
  border-color: var(--color-cwm-type-selected-border);
}
.recruit-invite-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-invite-modal {
  width: min(440px, 100%);
  max-height: min(620px, calc(100vh - 40px));
  padding: 20px;
  border: 1px solid #e5eaf4;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  color: #111827;
  overflow: auto;
}

.recruit-invite-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.recruit-invite-modal__head span {
  color: #4965ff;
  font-size: 12px;
  font-weight: 950;
}

.recruit-invite-modal__head h2 {
  margin: 4px 0 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 950;
}

.recruit-invite-modal__head button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #e5eaf4;
  border-radius: 12px;
  background: #ffffff;
  color: #667085;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recruit-invite-state {
  margin-top: 18px;
  padding: 22px 16px;
  border-radius: 16px;
  background: #f7f8fc;
  color: #667085;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
  text-align: center;
}

.recruit-invite-state.is-error {
  background: #fff1f2;
  color: #be123c;
}

.recruit-invite-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recruit-invite-option {
  min-height: 72px;
  padding: 14px;
  border: 1px solid #e5eaf4;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.recruit-invite-option:hover,
.recruit-invite-option:has(input:checked) {
  border-color: #bfc9ff;
  background: #f8faff;
  box-shadow: 0 8px 24px rgba(73, 101, 255, 0.08);
}

.recruit-invite-option.is-disabled {
  cursor: default;
  background: #f8fafc;
  color: #98a2b3;
}

.recruit-invite-option.is-disabled:hover {
  border-color: #e5eaf4;
  background: #f8fafc;
  box-shadow: none;
}

.recruit-invite-option.is-disabled strong,
.recruit-invite-option.is-disabled small {
  color: #98a2b3;
}

.recruit-invite-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #4965ff;
}

.recruit-invite-option span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recruit-invite-option strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 950;
}

.recruit-invite-option small {
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

.recruit-invite-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recruit-invite-footer span {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}

.recruit-invite-footer button {
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 13px;
  background: #3158ff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.recruit-invite-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.icon-btn--invite {
  color: #4054dc;
}

.icon-btn--invite:hover:not(:disabled) {
  background: #f1f4ff;
}

@media (max-width: 520px) {
  .recruit-invite-backdrop {
    padding: 12px;
    align-items: flex-end;
  }

  .recruit-invite-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 22px 22px 0 0;
  }
}
/* 홈 오른쪽 안내 배너.
   본문(팀공간 목록)보다 조용해야 한다 — 늘 쓰는 건 목록이고 이건 가끔 쓰는 길이다. */
.hn-promo {
  position: sticky;
  top: 24px;
  display: flex;
  width: 200px;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
}

.hn-promo__card {
  display: grid;
  padding: 18px 16px 15px;
  border: 1px solid var(--hn-border);
  border-radius: 16px;
  background: var(--hn-bg);
  color: var(--hn-text);
  font: inherit;
  gap: 5px;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.hn-promo__card:hover {
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(24, 26, 31, .1);
  transform: translateY(-1px);
}

.hn-promo__icon {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 11px;
}
.hn-promo__card--amber .hn-promo__icon { background: #fdf3e0; color: #a97b25; }
.hn-promo__card--violet .hn-promo__icon { background: #ede9fb; color: #6b4fc4; }

.hn-promo__title { font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; }
.hn-promo__desc {
  color: var(--hn-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.hn-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
}
.hn-promo__card--amber .hn-promo__cta { color: #a97b25; }
.hn-promo__card--violet .hn-promo__cta { color: #6b4fc4; }

[data-theme="dark"] .hn-promo__card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
[data-theme="dark"] .hn-promo__card--amber .hn-promo__icon { background: #3a3222; color: #d8ab5e; }
[data-theme="dark"] .hn-promo__card--violet .hn-promo__icon { background: #322a4d; color: #b9a6e8; }
[data-theme="dark"] .hn-promo__card--amber .hn-promo__cta { color: #d8ab5e; }
[data-theme="dark"] .hn-promo__card--violet .hn-promo__cta { color: #b9a6e8; }

/* ── 인사말 줄에 나란히 놓는 작은 형태 ─────────────────────────────────
   "5 팀공간"이 있던 자리를 대신 쓴다. 인사말과 같은 줄이라 세로로 키우면
   줄 전체가 밀린다. 그래서 아이콘·제목·화살표를 한 줄로 눕혀 납작하게 만든다. */
.hn-promo--compact {
  position: static;
  display: flex;
  width: auto;
  flex-direction: row;
  gap: 8px;
}
.hn-promo--compact .hn-promo__card {
  display: flex;
  width: auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 12px;
}
.hn-promo--compact .hn-promo__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 8px;
}
.hn-promo--compact .hn-promo__title {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.hn-promo--compact .hn-promo__cta { margin: 0; }

/* 인사말과 나란히 둘 자리가 없으면 아래로 내려가 가로로 눕는다. */
@media (max-width: 900px) {
  .hn-user-header { grid-template-columns: minmax(0, 1fr); }
  .hn-promo--compact { width: 100%; }
  .hn-promo--compact .hn-promo__card { flex: 1 1 0; justify-content: flex-start; }
}
/* 팀공간 카드에서 우클릭·길게 누르기로 여는 메뉴. */
.ws-menu {
  position: fixed;
  z-index: 1400;
  min-width: 208px;
  max-width: 280px;
  padding: 6px;
  border: 1px solid var(--hn-border, #e4e5e9);
  border-radius: 12px;
  background: var(--hn-bg, #fff);
  box-shadow: 0 18px 44px rgba(24, 26, 31, .18);
  font-size: 13px;
}

.ws-menu__name {
  overflow: hidden;
  margin: 4px 8px 6px;
  color: var(--hn-text-muted, #8b8e97);
  font-size: 11.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-menu > button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hn-text, #24262c);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ws-menu > button:hover { background: var(--hn-surface, #f4f4f6); }
.ws-menu > button.is-danger { color: #c0453c; }
.ws-menu > button.is-danger:hover { background: #fdecea; }

.ws-menu__note {
  margin: 2px 10px 6px;
  color: var(--hn-text-muted, #9a9da5);
  font-size: 11.5px;
  line-height: 1.5;
}

/* 지우기 전에 같은 자리에서 한 번 더 묻는다. */
.ws-menu__warn {
  margin: 2px 8px 8px;
  color: var(--hn-text, #24262c);
  font-size: 12.5px;
  line-height: 1.6;
}
.ws-menu__error { margin: 0 8px 8px; color: #c0453c; font-size: 12px; }

.ws-menu__confirm { display: flex; gap: 6px; }
.ws-menu__confirm button {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 1px solid var(--hn-border, #e4e5e9);
  border-radius: 8px;
  background: var(--hn-bg, #fff);
  color: var(--hn-text-muted, #6f727b);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.ws-menu__confirm button:hover { color: var(--hn-text, #24262c); }
.ws-menu__confirm button.is-danger {
  border-color: transparent;
  background: #c0453c;
  color: #fff;
  font-weight: 700;
}
.ws-menu__confirm button.is-danger:hover { background: #a93a32; }
.ws-menu__confirm button:disabled { opacity: .5; cursor: default; }

[data-theme="dark"] .ws-menu { border-color: #3a3d44; background: #24262c; }
[data-theme="dark"] .ws-menu > button { color: #f0f0f2; }
[data-theme="dark"] .ws-menu > button:hover { background: #2f333a; }
[data-theme="dark"] .ws-menu > button.is-danger { color: #e08b83; }
[data-theme="dark"] .ws-menu > button.is-danger:hover { background: #3a2523; }
[data-theme="dark"] .ws-menu__warn { color: #f0f0f2; }
[data-theme="dark"] .ws-menu__confirm button { border-color: #3a3d44; background: #2b2e35; color: #b9bcc4; }
[data-theme="dark"] .ws-menu__confirm button.is-danger { border-color: transparent; background: #c0453c; color: #fff; }
:root {
  /* .login-box는 다크모드에서도 항상 라이트 고정 카드라 글자색도 고정값 필요 */
  --color-lp-locked-text: rgb(17, 24, 39);
}

@keyframes pageFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 20px 36px;
  background: var(--color-bg-page);
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 다크 테마 CSS 변수 차단 - 로그인 카드(.login-box) 내부는 OAuth 브랜드
     버튼 색상 등이 라이트 배경을 전제로 하므로 항상 라이트 유지 */
  isolation: isolate;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background: transparent;
  color: #111827;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

.login-brand {
  width: fit-content;
  margin: 0 auto 46px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-logo-wrap .logo {
  display: block;
  line-height: 0;
}

.login-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

.login-brand-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.08;
}

.login-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.login-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.065em;
}

[data-theme="dark"] .login-logo-text {
  color: var(--color-brand-icon);
}

/* dark.css의 전역 안전망 규칙([class*="-box"]가 배경/테두리/글자색을
   일괄 지정)이 .login-box도 "-box"로 끝난다는 이유만으로 잡아버려서
   background: transparent가 무시되고 있었음 - 명시도를 맞춰 재선언 */
[data-theme="dark"] .login-box {
  background: transparent;
  border-color: transparent;
  color: var(--color-lp-locked-text);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.login-form input {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  background: #ffffff !important;
  color: #111827;
  font-size: 16px;
  font-weight: 650;
  outline: none !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.login-form input::placeholder {
  color: #a3a7ae;
  font-size: 16px;
  font-weight: 600;
}

.login-form input:focus,
.login-form input:active,
.login-form input:valid,
.login-form input:focus-visible {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  outline: none !important;
  box-shadow: none !important;
}

.login-form input::selection {
  background: rgba(73, 101, 255, 0.14);
  color: #111827;
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  border: 1px solid #e5e7eb !important;
  transition: background-color 9999s ease-in-out 0s;
}

.login-submit-btn {
  width: 100%;
  height: 54px;
  margin-top: 8px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.2s ease;
}

.login-submit-btn:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.login-submit-btn:active {
  transform: scale(0.985);
}

.login-error-message {
  margin-bottom: 8px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 750;
}

.login-sub-links {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.login-sub-links a {
  color: #6b7280;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.login-sub-links span {
  width: 1px;
  height: 13px;
  background: #d1d5db;
}

.login-divider {
  position: relative;
  margin: 28px 0 17px;
  text-align: center;
}

.login-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #eceff4;
}

.login-divider span {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  background: var(--color-bg-page);
  color: #9ca3af;
  font-size: 13px;
  font-weight: 750;
}

/* dark.css의 전역 안전망 규칙([class*="-divider"]가 배경을 일괄 지정)이
   .login-divider도 "-divider"로 끝난다는 이유만으로 잡아버려서 "또는"
   줄 전체에 페이지 배경보다 밝은 띠가 생기던 문제를 막는다 */
[data-theme="dark"] .login-divider {
  background: transparent;
}

.social-login-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.social-btn {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid #e3e6ec;
  background: #ffffff;
  color: #222222;
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.18s ease;
}

.social-btn:hover {
  background: #f8faff;
  border-color: #cfd8ff;
  transform: translateY(-1px);
}

.social-btn:active {
  transform: scale(0.985);
}

.social-btn span {
  width: 22px;
  text-align: center;
  font-weight: 950;
}

.social-btn-wrap {
  position: relative;
}

.social-btn-wrap--has-badge {
  margin-top: 26px;
}

.social-btn-recent-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 8px;
  background: #4b5563;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.social-btn-recent-badge::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #4b5563;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.social-btn-kakao {
  border-color: #fee500;
  background: #fee500;
  color: #191919;
}

.social-btn-kakao:hover {
  border-color: #f2d900;
  background: #f2d900;
}

.social-btn-github {
  border-color: #111827;
  background: #111827;
  color: #ffffff;
}

.social-btn-github:hover {
  border-color: #0f172a;
  background: #0f172a;
}

.login-footer {
  margin-top: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  color: #777d88;
  font-size: 13px;
  font-weight: 750;
}

.login-footer a {
  color: #777d88;
  text-decoration: none;
}

@media (max-width: 768px) {
  .login-page {
    padding: 42px 18px 30px;
    align-items: flex-start;
  }

  .login-box {
    max-width: 400px;
    margin: 0 auto;
  }

  .login-brand {
    margin-bottom: 42px;
  }

  .login-logo-wrap .logo img {
    height: 52px;
  }

  .login-logo-text {
    font-size: 27px;
  }

  .login-form input,
  .login-submit-btn {
    height: 52px;
    font-size: 16px;
  }

  .social-btn {
    height: 49px;
  }

  .login-footer {
    margin-top: 54px;
    gap: 11px;
  }
}

@media (max-width: 420px) {
  .login-page {
    padding: 38px 16px 26px;
  }

  .login-box {
    max-width: 100%;
  }

  .login-brand {
    margin-bottom: 38px;
    gap: 11px;
  }

  .login-logo-wrap .logo img {
    height: 48px;
  }

  .login-logo-text {
    font-size: 24px;
  }

  .login-logo-sub {
    font-size: 11px;
  }

  .login-form input,
  .login-submit-btn {
    height: 50px;
    border-radius: 14px;
  }

  .login-sub-links a {
    font-size: 14px;
  }

  .login-footer {
    font-size: 12px;
  }
}:root {
  /* .signup-box는 다크모드에서도 항상 라이트 고정 카드라 글자색도 고정값 필요 */
  --color-sup-locked-text: rgb(17, 24, 39);
}

.signup-page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 20px 36px;
  background: var(--color-bg-page);
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-box {
  width: 100%;
  max-width: 430px;
}

/* dark.css의 전역 안전망 규칙([class*="-box"]가 배경/테두리/글자색을
   일괄 지정)이 .signup-box도 "-box"로 끝난다는 이유만으로 잡아버려서
   원래 배경이 없던 박스에 강제로 배경이 생기는 문제를 막는다 */
[data-theme="dark"] .signup-box {
  background: transparent;
  border-color: transparent;
  color: var(--color-sup-locked-text);
}

.signup-brand {
  width: fit-content;
  margin: 0 auto 42px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

.signup-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

.signup-brand-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.signup-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.signup-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.065em;
}

[data-theme="dark"] .signup-logo-text {
  color: var(--color-brand-icon);
}

.signup-header {
  margin-bottom: 18px;
}

.signup-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 950;
  color: #111827;
  letter-spacing: -0.05em;
}

.signup-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signup-input-group {
  overflow: hidden;
  border: 1px solid #d7dbe3;
  border-radius: 14px;
  background: #ffffff;
}

.signup-field-row {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #eceff4;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
}

.signup-field-row:last-child {
  border-bottom: none;
}

.signup-field-row label {
  flex: 0 0 96px;
  color: #8b929d;
  font-size: 15px;
  font-weight: 750;
}

.signup-field-row input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: none;
  outline: none;
  background: #ffffff !important;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  box-shadow: none !important;
}

.signup-field-row input:focus,
.signup-field-row input:active,
.signup-field-row input:valid {
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.signup-field-row input::placeholder {
  color: #b4bac3;
  font-weight: 650;
}

.signup-field-row input:disabled {
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #111827 !important;
}

.signup-field-row input:-webkit-autofill,
.signup-field-row input:-webkit-autofill:hover,
.signup-field-row input:-webkit-autofill:focus,
.signup-field-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  transition: background-color 9999s ease-in-out 0s;
}

.signup-input-with-action {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.signup-text-action {
  flex-shrink: 0;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.signup-text-action:hover:not(:disabled) {
  background: #f9fafb;
}

.signup-text-action:disabled {
  color: #a3a7ae;
  background: #f8f9fb;
  cursor: not-allowed;
}

.signup-verified-text {
  flex-shrink: 0;
  min-width: 64px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.signup-help-area {
  min-height: 20px;
}

.signup-help-area p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.signup-error-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signup-error-list li {
  color: #ef4444;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.signup-success-text {
  color: #111827;
}

.signup-hint-text {
  color: #6b7280;
}

.signup-submit-btn {
  width: 100%;
  height: 54px;
  margin-top: 4px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.signup-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.signup-sub-links {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.signup-sub-links a {
  color: #6b7280;
  font-size: 14px;
  font-weight: 750;
}

.signup-sub-links span {
  width: 1px;
  height: 13px;
  background: #d1d5db;
}

.signup-footer {
  margin-top: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  flex-wrap: wrap;
  color: #777d88;
  font-size: 13px;
  font-weight: 750;
}

.signup-footer a {
  color: #777d88;
}

.signup-error-text {
  margin: 0;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.signup-box {
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 768px) {
  .signup-page {
    padding: 42px 18px 30px;
    align-items: flex-start;
  }

  .signup-brand {
    margin-bottom: 38px;
  }

  .signup-logo-wrap .logo img {
    height: 52px;
  }

  .signup-logo-text {
    font-size: 27px;
  }

  .signup-footer {
    margin-top: 54px;
  }
}

@media (max-width: 420px) {
  .signup-page {
    padding: 38px 16px 26px;
  }

  .signup-brand {
    margin-bottom: 34px;
    gap: 11px;
  }

  .signup-logo-wrap .logo img {
    height: 48px;
  }

  .signup-logo-text {
    font-size: 24px;
  }

  .signup-logo-sub {
    font-size: 11px;
  }

  .signup-field-row {
    padding: 0 13px;
    gap: 10px;
  }

  .signup-field-row label {
    flex-basis: 78px;
    font-size: 14px;
  }

  .signup-field-row input {
    font-size: 16px;
  }

  .signup-text-action {
    min-width: 42px;
    padding: 0 9px;
    font-size: 12px;
  }

  .signup-verified-text {
    min-width: 58px;
    font-size: 12px;
  }

  .signup-footer {
    font-size: 12px;
  }
}:root {
  --color-pp-tab-active-bg: rgb(17, 24, 39);
  --color-pp-page-bg: rgb(247, 248, 252);
  --color-pp-card-border: rgb(233, 237, 246);
  --color-pp-card-shadow: rgba(26, 38, 90, 0.05);
  --color-pp-project-hover-shadow: rgba(26, 38, 90, 0.07);
  --color-pp-muted: rgb(105, 115, 134);
  --color-pp-muted-2: rgb(102, 112, 133);
  --color-pp-affiliation: rgb(72, 85, 107);
  --color-pp-badge-bg: rgb(241, 244, 255);
  --color-pp-icon-btn-border: rgb(225, 230, 242);
  --color-pp-icon-text: rgb(104, 113, 132);
  --color-pp-like-border: rgb(239, 191, 215);
  --color-pp-like-bg: rgb(255, 234, 244);
  --color-pp-like-text: rgb(217, 50, 124);
  --color-pp-hover-bg: rgb(244, 247, 255);
  --color-pp-meta-bg: rgb(248, 250, 255);
  --color-pp-divider: rgb(237, 240, 246);
  --color-pp-intro-text: rgb(79, 91, 111);
  --color-pp-skill-border: rgb(223, 231, 255);
  --color-pp-skill-hover-border: rgb(184, 199, 255);
  --color-pp-skill-hover-bg: rgb(231, 237, 255);
  --color-pp-link-accent: rgb(37, 99, 235);
  --color-pp-skill-count-bg: rgba(255, 255, 255, 0.72);
  --color-pp-skill-divider: rgb(237, 241, 248);
  --color-pp-evidence-border: rgb(219, 227, 242);
  --color-pp-pec-border: rgb(228, 234, 255);
  --color-pp-pec-bg: rgb(251, 252, 255);
  --color-pp-pec-open-border: rgb(199, 212, 255);
  --color-pp-pec-header-grad-1: rgb(240, 244, 255);
  --color-pp-pec-header-grad-2: rgb(232, 239, 255);
  --color-pp-pec-count-bg: rgb(220, 230, 255);
  --color-pp-pec-label: rgb(26, 33, 64);
  --color-pp-pec-count-text: rgb(53, 80, 184);
  --color-pp-pec-chevron: rgb(136, 149, 181);
  --color-pp-linked-bg: rgb(236, 253, 243);
  --color-pp-linked-text: rgb(2, 122, 72);
  --color-pp-period-dot: rgb(196, 207, 232);
  --color-pp-cert-text: rgb(42, 58, 124);
  --color-pp-cert-hover-border: rgb(153, 180, 255);
  --color-pp-cert-hover-bg: rgb(237, 243, 255);
  --color-pp-bullets-text: rgb(62, 74, 98);
  --color-pp-empty-border: rgb(223, 229, 242);
  --color-pp-empty-bg: rgb(250, 251, 255);
  --color-pp-project-hover-border: rgb(207, 216, 255);
  --color-pp-thermo-pin: rgb(148, 163, 184);
  --color-pp-thermo-bar-bg: rgb(238, 240, 248);
  --color-pp-thermo-label: rgb(55, 68, 102);
  --color-pp-trust-desc: rgb(100, 114, 154);
  --color-pp-gather-badge-border: rgb(199, 210, 254);
  --color-pp-manual-badge-border: rgb(229, 231, 235);
  --color-pp-group-small: rgb(156, 163, 175);
}

.profile-page {
  width: 100%;
  min-height: 100vh;
  padding: 30px 20px 88px;
  background: var(--color-pp-page-bg);
  color: var(--color-text-main);
}

.profile-page * {
  box-sizing: border-box;
}

.profile-page button,
.profile-page a {
  font-family: inherit;
}

.profile-container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}

.profile-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.profile-layout__content { min-width: 0; }

.profile-side-nav {
  position: sticky;
  top: 98px;
  padding: 18px 10px;
  border: 1px solid var(--color-pp-card-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  box-shadow: 0 10px 28px var(--color-pp-card-shadow);
  display: grid;
  gap: 4px;
}

.profile-side-nav__person {
  min-width: 0;
  margin: 0 6px 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-pp-divider);
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-side-nav__person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.profile-side-nav__person div { min-width: 0; display: grid; gap: 2px; }
.profile-side-nav__person strong, .profile-side-nav__person span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-side-nav__person strong { font-size: 14px; }
.profile-side-nav__person span { color: var(--color-pp-muted); font-size: 11px; }
.profile-side-nav > button { min-height: 42px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--color-pp-muted); display: flex; align-items: center; gap: 10px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.profile-side-nav > button:hover { background: var(--color-pp-hover-bg); }
.profile-side-nav > button.is-active { background: var(--color-pp-badge-bg); color: var(--color-brand-strong); }

.profile-loading,
.profile-empty-state {
  min-height: 320px;
  padding: 48px 20px;
  border: 1px solid var(--color-pp-card-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  color: var(--color-pp-muted);
  font-size: 16px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-hero,
.profile-tabs,
.profile-section-card,
.profile-info-card,
.profile-trust-summary,
.profile-roadmap-hero,
.profile-roadmap-info-grid article,
.profile-roadmap-empty {
  border: 1px solid var(--color-pp-card-border);
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-pp-card-shadow);
}

.profile-hero {
  position: relative;
  padding: 30px;
  border-radius: 28px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-side-nav { position: static; padding: 8px; display: flex; overflow-x: auto; }
  .profile-side-nav__person { display: none; }
  .profile-side-nav > button { flex: 0 0 auto; }
}

.profile-hero-menu {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
}

.profile-image-wrap {
  width: 150px;
  height: 150px;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-pp-card-border);
  display: block;
}

.profile-hero-body {
  min-width: 0;
}

.profile-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-right: 54px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.profile-name-row h1 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 34px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.profile-university-badge-link {
  width: fit-content;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
}

.profile-university-badge--mobile {
  display: none;
}

.profile-username {
  margin: 7px 0 0;
  color: var(--color-pp-muted-2);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 800;
}

.profile-affiliation {
  margin: 8px 0 0;
  color: var(--color-pp-affiliation);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 800;
}

.profile-affiliation strong {
  color: var(--color-text-main);
  font-weight: 950;
}

.profile-affiliation span {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-pp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
}

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

.profile-edit-button,
.profile-icon-button {
  border: none;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-edit-button {
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-purple) 100%);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 10px 24px var(--color-brand-glow);
}

.profile-icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-pp-icon-btn-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-pp-icon-text);
}

.profile-icon-button.is-active {
  border-color: var(--color-pp-like-border);
  background: var(--color-pp-like-bg);
  color: var(--color-pp-like-text);
}

.profile-more-menu-button.more-menu-trigger {
  border: none;
  background: var(--color-bg-white);
  color: var(--color-pp-icon-text);
}

.profile-more-menu-button.more-menu-trigger:hover {
  background: var(--color-pp-hover-bg);
  color: var(--color-brand-strong);
}

.profile-meta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-meta-row span {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--color-pp-icon-btn-border);
  border-radius: 999px;
  background: var(--color-pp-meta-bg);
  color: var(--color-prp-muted);
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-meta-row svg {
  color: var(--color-brand-icon);
}

.profile-hero-divider {
  width: 100%;
  height: 1px;
  margin: 22px 0 18px;
  background: var(--color-pp-divider);
}

.profile-intro-box h3 {
  margin: 0 0 9px;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.profile-intro-box p {
  margin: 0;
  color: var(--color-pp-intro-text);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
  white-space: pre-line;
  word-break: keep-all;
}

.profile-tabs {
  margin-top: 18px;
  padding: 6px;
  border-radius: 18px;
  display: flex;
  gap: 6px;
}

.profile-tabs button {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: none;
  border-radius: 13px;
  background: transparent;
  color: var(--color-pp-muted);
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.profile-tabs button:hover {
  background: var(--color-pp-hover-bg);
  color: var(--color-brand-strong);
}

.profile-tabs button.is-active {
  background: var(--color-pp-tab-active-bg);
  color: var(--color-text-on-brand);
}

.profile-tab-panel {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-section-card,
.profile-trust-summary,
.profile-roadmap-hero,
.profile-roadmap-empty {
  padding: 24px;
  border-radius: 24px;
}

.profile-section-head {
  margin-bottom: 18px;
}

.profile-section-head h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.profile-skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-skill-list button,
.profile-skill-list span {
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-pp-badge-bg);
  border: 1px solid var(--color-pp-skill-border);
  color: var(--color-brand-strong);
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-skill-list button {
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.profile-skill-list button:hover {
  transform: translateY(-1px);
  border-color: var(--color-pp-skill-hover-border);
  background: var(--color-pp-skill-hover-bg);
}

.profile-skill-list button.is-selected {
  background: var(--color-pp-link-accent);
  border-color: var(--color-pp-link-accent);
  color: var(--color-text-on-brand);
}

.profile-skill-list button small {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-pp-skill-count-bg);
  color: var(--color-pp-link-accent);
  font-size: 11px;
  font-weight: 950;
}

.profile-skill-evidence {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-pp-skill-divider);
}

.profile-skill-evidence__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-skill-evidence__head span {
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 950;
}

.profile-skill-evidence__head button {
  border: 1px solid var(--color-pp-evidence-border);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--color-bg-white);
  color: var(--color-pep-state-text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.profile-info-card {
  padding: 22px;
  border-radius: 22px;
}

.profile-info-card h3 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 17px;
  font-weight: 950;
}

.profile-info-card p {
  margin: 12px 0 0;
  color: var(--color-prp-muted);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  white-space: pre-line;
}

/* 기존 grid — 스킬 필터 하이라이트 뷰에서 재사용 */
.profile-experience-grid,
.pec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ─── 아코디언 컨테이너 ─── */
.pec-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── 아코디언 그룹 ─── */
.pec-group {
  border: 1px solid var(--color-pp-pec-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-pp-pec-bg);
}

.pec-group.is-open {
  border-color: var(--color-pp-pec-open-border);
}

.pec-group__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.pec-group__header:hover {
  background: var(--color-pp-hover-bg);
}

.pec-group.is-open .pec-group__header {
  background: linear-gradient(135deg, var(--color-pp-pec-header-grad-1) 0%, var(--color-pp-pec-header-grad-2) 100%);
  border-bottom: 1px solid var(--color-pp-pec-count-bg);
}

.pec-group__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.pec-group__label {
  flex: 1;
  font-size: 15px;
  font-weight: 900;
  color: var(--color-pp-pec-label);
}

.pec-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-pp-pec-count-bg);
  color: var(--color-pp-pec-count-text);
  font-size: 12px;
  font-weight: 900;
}

.pec-group__chevron {
  color: var(--color-pp-pec-chevron);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 4px;
}

.pec-group__body {
  padding: 16px 20px 20px;
}

/* ─── 경험 카드 ─── */
.pec-card {
  padding: 18px 20px;
  border: 1px solid var(--color-pp-pec-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pec-card__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pec-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pec-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  color: var(--color-text-main);
  line-height: 1.3;
}

.pec-linked-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-pp-linked-bg);
  color: var(--color-pp-linked-text);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

.pec-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pec-role {
  font-size: 13px;
  font-weight: 850;
  color: var(--color-pp-pec-count-text);
}

.pec-period {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-pp-pec-chevron);
}

.pec-period::before {
  content: "·";
  margin-right: 8px;
  color: var(--color-pp-period-dot);
}

.pec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.pec-tag {
  font-style: normal;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--color-pp-badge-bg);
  color: var(--color-pp-link-accent);
  font-size: 12px;
  font-weight: 900;
}

.pec-tag.is-selected {
  background: var(--color-pp-link-accent);
  color: var(--color-text-on-brand);
}

.pec-divider {
  height: 1px;
  background: var(--color-pp-skill-divider);
  margin: 14px 0 10px;
}


.pec-desc {
  margin: 0;
  color: var(--color-prp-muted);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 700;
}

.pec-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pec-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--color-pp-bullets-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.pec-bullets li::before {
  content: "✓";
  color: var(--color-brand-icon);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 900;
}

.pec-expand-btn {
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-brand-icon);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  align-self: flex-start;
}

.pec-expand-btn:hover {
  text-decoration: underline;
}

/* ─── 자격증 태그 클라우드 ─── */
.pec-cert-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pec-cert-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-pp-pec-count-bg);
  background: var(--color-pp-cert-hover-bg);
  color: var(--color-pp-cert-text);
  font-size: 13px;
  font-weight: 900;
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
}

.pec-cert-tag:hover {
  border-color: var(--color-pp-cert-hover-border);
  background: var(--color-pp-cert-hover-bg);
}

.pec-cert-tag small {
  color: var(--color-pp-pec-chevron);
  font-size: 11px;
  font-weight: 700;
}

/* 기존 스타일 호환 유지 */
.profile-experience-card {
  padding: 20px;
  border: 1px solid var(--color-pp-pec-border);
  border-radius: 20px;
  background: var(--color-pp-pec-bg);
}
.profile-experience-card.is-highlighted {
  border-color: var(--color-pp-skill-hover-border);
  background: linear-gradient(180deg, var(--color-pp-pec-bg) 0%, var(--color-pp-cert-hover-bg) 100%);
  box-shadow: 0 12px 28px var(--color-epp-image-hover-shadow);
}
.profile-experience-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.profile-experience-stack em {
  font-style: normal;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--color-pp-badge-bg);
  color: var(--color-pp-link-accent);
  font-size: 12px;
  font-weight: 900;
}
.profile-experience-stack em.is-selected {
  background: var(--color-pp-link-accent);
  color: var(--color-text-on-brand);
}
.profile-experience-linked-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-pp-linked-bg);
  color: var(--color-pp-linked-text);
  font-size: 12px;
  font-weight: 900;
}

.profile-empty-text {
  margin: 0;
  min-height: 112px;
  padding: 34px 18px;
  border: 1px dashed var(--color-pp-empty-border);
  border-radius: 18px;
  background: var(--color-pp-empty-bg);
  color: var(--color-pp-muted);
  font-size: 14px;
  font-weight: 850;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  grid-column: 1 / -1;
}

.profile-portfolio-link-card {
  padding: 20px;
  border: 1px solid var(--color-pp-pec-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--color-pp-meta-bg) 0%, var(--color-pp-hover-bg) 100%);
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.profile-portfolio-link-card span {
  color: var(--color-brand-icon);
  font-size: 12px;
  font-weight: 950;
}

.profile-portfolio-link-card h3 {
  margin: 8px 0 0;
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 950;
}

.profile-portfolio-link-card p {
  margin: 8px 0 0;
  color: var(--color-prp-muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.profile-portfolio-link-card small {
  display: block;
  margin-top: 12px;
  color: var(--color-prp-info-label);
  font-size: 12px;
  word-break: break-all;
}

.profile-portfolio-link-card a {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  border-radius: 13px;
  background: var(--color-bg-white);
  color: var(--color-brand-strong);
  text-decoration: none;
  font-size: 13px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-portfolio-sections {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.profile-portfolio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-portfolio-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-portfolio-group__header small {
  color: var(--color-text-placeholder);
  font-size: 12px;
  font-weight: 700;
}

.profile-portfolio-group__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.profile-portfolio-group__badge.is-gather {
  background: var(--color-pep-badge-bg);
  color: var(--color-pep-accent);
  border: 1.5px solid var(--color-pp-gather-badge-border);
}

.profile-portfolio-group__badge.is-manual {
  background: var(--color-pep-secondary-hover-bg);
  color: var(--color-text-sub);
  border: 1.5px solid var(--color-pp-manual-badge-border);
}

.profile-portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.profile-portfolio-card.is-gather {
  border-left: 3px solid var(--color-pep-readonly-accent);
}

.profile-portfolio-card.is-manual {
  border-left: 3px solid var(--color-border-muted);
}

.profile-portfolio-card {
  overflow: hidden;
  border: 1px solid var(--color-pp-card-border);
  border-radius: 20px;
  background: var(--color-pp-pec-bg);
  transition: box-shadow 0.18s, border-color 0.18s;
}

.profile-portfolio-card.is-clickable:hover {
  border-color: var(--color-pep-badge-border);
  box-shadow: 0 4px 16px var(--color-pep-focus-ring);
}

.profile-portfolio-detail-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-pep-focus-accent);
  background: var(--color-pep-badge-bg);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.profile-portfolio-card.has-image {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
}

.profile-portfolio-card__image {
  min-height: 180px;
  background: var(--color-pp-thermo-bar-bg);
}

.profile-portfolio-card__image img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: block;
}

.profile-portfolio-card__body {
  padding: 20px;
}

.profile-portfolio-card.has-image .profile-portfolio-card__body {
  padding-left: 0;
}

.profile-portfolio-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.profile-portfolio-card h3 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 950;
}

.profile-portfolio-card__top a {
  flex: 0 0 auto;
  color: var(--color-brand-strong);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.profile-portfolio-card span {
  display: block;
  margin-top: 10px;
  color: var(--color-brand-icon);
  font-size: 13px;
  font-weight: 900;
}

.profile-portfolio-card p {
  margin: 12px 0 0;
  color: var(--color-prp-muted);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
  white-space: pre-line;
}

.profile-portfolio-stack {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-portfolio-stack em {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-pp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.profile-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-project-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--color-pp-card-border);
  border-radius: 18px;
  background: var(--color-bg-white);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.profile-project-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-pp-project-hover-border);
  background: var(--color-pp-pec-bg);
  box-shadow: 0 16px 36px var(--color-pp-project-hover-shadow);
}

.profile-project-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-project-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-project-card__badges span {
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-pp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 11px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
}

.profile-project-card__badges span.is-muted {
  background: var(--color-pp-page-bg);
  color: var(--color-pep-muted-2);
}

.profile-project-card__date {
  flex: 0 0 auto;
  color: var(--color-pep-hint);
  font-size: 12px;
  font-weight: 850;
}

.profile-project-card h3 {
  margin: 14px 0 0;
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.42;
  font-weight: 950;
  letter-spacing: -0.045em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-project-card p {
  min-height: 45px;
  margin: 8px 0 0;
  color: var(--color-prp-muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile-project-card__meta {
  margin-top: 14px;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.profile-project-card__meta span {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-pp-page-bg);
  color: var(--color-pp-icon-text);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
}

/* ── 매너온도 스타일 신뢰도 ── */
.profile-trust-summary {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 왼쪽: 라벨 + 점수 + 하트 */
.profile-thermo-left {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.profile-thermo-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-pp-thermo-label);
  white-space: nowrap;
}

.profile-thermo-score-area {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-thermo-score-val {
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
  transition: color 0.4s ease;
}

.trust-heart-svg {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  overflow: visible;
}

/* ── 바 영역 전체 래퍼 ── */
.profile-thermo-bar-area {
  flex: 1;
  min-width: 0;
}

/* 바 위: 기준선 라벨 */
.profile-thermo-above-bar {
  position: relative;
  height: 30px;
  width: 100%;
}

.profile-thermo-base-pin {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  gap: 1px;
}

.profile-thermo-base-pin > span:first-child {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-pp-thermo-pin);
  white-space: nowrap;
  line-height: 1.3;
}

.profile-thermo-pin-down {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-border-strong);
}

/* 바 본체 (카테고리 바와 동일) */
i.profile-thermo-bar {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--color-pp-thermo-bar-bg);
  overflow: hidden;
}

i.profile-thermo-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.5s ease;
}

/* 바 아래: 현재 점수 라벨 */
.profile-thermo-below-bar {
  position: relative;
  height: 30px;
  width: 100%;
}

.profile-thermo-score-pin {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  gap: 2px;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-thermo-pin-up {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  /* border-bottom set inline */
}

.profile-thermo-score-pin > span:last-child {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
}

/* ── Hex radar chart ── */
.profile-hex-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.profile-hex-svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* ── Category bars ── */
.profile-trust-list {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.profile-trust-item {
  padding: 0;
  border: 0;
  background: transparent;
}

.profile-trust-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-trust-item-title {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.profile-trust-item-title span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--trust-color);
}

.profile-trust-item-title strong {
  color: var(--color-pp-pec-label);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.profile-trust-item-head em {
  color: var(--trust-color);
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}

.profile-trust-item i {
  width: 100%;
  height: 10px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--color-pp-thermo-bar-bg);
  overflow: hidden;
  display: block;
}

.profile-trust-item i b {
  height: 100%;
  border-radius: inherit;
  background: var(--trust-color);
  display: block;
}

.profile-trust-item p {
  margin: 8px 0 0;
  color: var(--color-pp-trust-desc);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}


.profile-section-card:has(.profile-trust-list) .profile-section-head h2 {
  margin-bottom: 20px;
  font-size: 19px;
}

@media (max-width: 768px) {
  .profile-page {
    padding: 14px 14px 64px;
  }

  .profile-hero,
  .profile-tabs,
  .profile-section-card,
  .profile-info-card,
  .profile-trust-summary,
  .profile-roadmap-hero,
  .profile-roadmap-info-grid article,
  .profile-roadmap-empty {
    box-shadow: none;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 22px;
    border-radius: 24px;
  }

  .profile-hero-menu {
    top: 16px;
    right: 16px;
  }

  .profile-hero-top {
    flex-direction: column;
    align-items: center;
    padding-right: 0;
  }

  .profile-name-row {
    justify-content: center;
  }

  .profile-university-badge--desktop {
    display: none;
  }

  .profile-university-badge--mobile {
    width: fit-content;
    margin: 8px auto 0;
    display: flex;
  }

  .profile-name-row h1 {
    font-size: 29px;
  }

  .profile-actions,
  .profile-meta-row {
    justify-content: center;
  }

  .profile-affiliation {
    justify-content: center;
  }

  .profile-info-grid,
  .profile-experience-grid,
  .pec-grid,
  .profile-project-grid {
    grid-template-columns: 1fr;
  }

  .profile-portfolio-card.has-image {
    grid-template-columns: 1fr;
  }

  .profile-portfolio-card.has-image .profile-portfolio-card__body {
    padding: 18px;
  }

  .profile-portfolio-link-card {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .profile-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .profile-image-wrap,
  .profile-image {
    width: 132px;
    height: 132px;
  }

  .profile-tabs button {
    font-size: 13px;
  }

  .profile-section-card,
  .profile-trust-summary,
  .profile-roadmap-hero,
  .profile-roadmap-empty {
    padding: 18px;
    border-radius: 22px;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pp-tab-active-bg: var(--color-brand-strong);
  --color-pp-page-bg: rgb(15, 23, 42);
  --color-pp-card-border: var(--color-border);
  --color-pp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-pp-project-hover-shadow: rgba(0, 0, 0, 0.35);
  --color-pp-muted: var(--color-text-muted);
  --color-pp-muted-2: var(--color-text-muted);
  --color-pp-affiliation: var(--color-text-sub);
  --color-pp-badge-bg: rgba(129, 140, 248, 0.16);
  --color-pp-icon-btn-border: var(--color-border);
  --color-pp-icon-text: var(--color-text-muted);
  --color-pp-like-border: rgba(217, 50, 124, 0.4);
  --color-pp-like-bg: rgba(217, 50, 124, 0.14);
  --color-pp-like-text: rgb(244, 114, 182);
  --color-pp-hover-bg: rgba(129, 140, 248, 0.12);
  --color-pp-meta-bg: var(--color-bg-elevated-dark);
  --color-pp-divider: var(--color-border);
  --color-pp-intro-text: var(--color-text-sub);
  --color-pp-skill-border: rgba(129, 140, 248, 0.3);
  --color-pp-skill-hover-border: rgba(129, 140, 248, 0.5);
  --color-pp-skill-hover-bg: rgba(129, 140, 248, 0.18);
  --color-pp-link-accent: rgb(96, 165, 250);
  --color-pp-skill-count-bg: rgba(30, 41, 59, 0.72);
  --color-pp-skill-divider: var(--color-border);
  --color-pp-evidence-border: var(--color-border);
  --color-pp-pec-border: var(--color-border);
  --color-pp-pec-bg: var(--color-bg-elevated-dark);
  --color-pp-pec-open-border: rgba(129, 140, 248, 0.4);
  --color-pp-pec-header-grad-1: rgba(129, 140, 248, 0.14);
  --color-pp-pec-header-grad-2: rgba(129, 140, 248, 0.2);
  --color-pp-pec-count-bg: rgba(129, 140, 248, 0.2);
  --color-pp-pec-label: var(--color-text-main);
  --color-pp-pec-count-text: rgb(165, 180, 252);
  --color-pp-pec-chevron: var(--color-text-placeholder);
  --color-pp-linked-bg: rgba(2, 122, 72, 0.18);
  --color-pp-linked-text: rgb(74, 222, 128);
  --color-pp-period-dot: var(--color-border-strong);
  --color-pp-cert-text: rgb(165, 180, 252);
  --color-pp-cert-hover-border: rgba(153, 180, 255, 0.4);
  --color-pp-cert-hover-bg: rgba(129, 140, 248, 0.12);
  --color-pp-bullets-text: var(--color-text-sub);
  --color-pp-empty-border: var(--color-border);
  --color-pp-empty-bg: var(--color-bg-soft);
  --color-pp-project-hover-border: rgba(129, 140, 248, 0.4);
  --color-pp-thermo-pin: var(--color-text-muted);
  --color-pp-thermo-bar-bg: var(--color-bg-elevated-dark);
  --color-pp-thermo-label: var(--color-text-sub);
  --color-pp-trust-desc: var(--color-text-muted);
  --color-pp-gather-badge-border: rgba(129, 140, 248, 0.4);
  --color-pp-manual-badge-border: var(--color-border);
  --color-pp-group-small: var(--color-text-placeholder);
}
:root {
  --color-ptp-muted: rgb(105, 115, 134);
  --color-ptp-muted-2: rgb(123, 136, 161);
  --color-ptp-border: rgb(229, 233, 243);
  --color-ptp-history-border: rgb(237, 240, 246);
  --color-ptp-em-text: rgb(79, 91, 111);
}

.profile-trust-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.profile-trust-summary span {
  color: var(--color-brand-icon);
  font-size: 13px;
  font-weight: 950;
}

.profile-trust-summary h2 {
  margin: 8px 0 0;
  color: var(--color-text-main);
  font-size: 36px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.profile-trust-summary p {
  margin: 10px 0 0;
  color: var(--color-ptp-muted);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.profile-trust-circle {
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
  border-radius: 50%;
  padding: 9px;
}

.profile-trust-circle div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-bg-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.profile-trust-circle strong {
  color: var(--color-brand-strong);
  font-size: 25px;
  font-weight: 950;
}

.profile-trust-circle small {
  color: var(--color-ptp-muted-2);
  font-size: 11px;
  font-weight: 850;
}

.profile-trust-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-trust-item div {
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.profile-trust-item strong {
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 950;
}

.profile-trust-item span {
  color: var(--color-brand-strong);
  font-size: 15px;
  font-weight: 950;
}

.profile-trust-item i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-ptp-border);
  display: block;
}

.profile-trust-item b {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-purple) 100%);
  display: block;
}

.profile-trust-item p {
  margin: 7px 0 0;
  color: var(--color-ptp-muted-2);
  font-size: 13px;
  font-weight: 700;
}

.profile-trust-history-list {
  display: flex;
  flex-direction: column;
}

.profile-trust-history-item {
  padding: 17px 0;
  border-bottom: 1px solid var(--color-ptp-history-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.profile-trust-history-item:first-child {
  padding-top: 0;
}

.profile-trust-history-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.profile-trust-history-item strong {
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 950;
}

.profile-trust-history-item p {
  margin: 6px 0 0;
  color: var(--color-ptp-muted-2);
  font-size: 13px;
  font-weight: 700;
}

.profile-trust-history-item em {
  display: block;
  margin-top: 9px;
  color: var(--color-ptp-em-text);
  font-size: 14px;
  line-height: 1.6;
  font-style: normal;
  font-weight: 700;
  white-space: pre-line;
}

.profile-trust-history-item > span {
  flex: 0 0 auto;
  color: var(--color-brand-strong);
  font-size: 22px;
  font-weight: 950;
}

@media (max-width: 520px) {
  .profile-trust-summary {
    align-items: flex-start;
  }

  .profile-trust-circle {
    display: none;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-ptp-muted: var(--color-text-muted);
  --color-ptp-muted-2: var(--color-text-muted);
  --color-ptp-border: var(--color-border);
  --color-ptp-history-border: var(--color-border);
  --color-ptp-em-text: var(--color-text-sub);
}
:root {
  --color-prp-visibility-border: rgb(223, 231, 255);
  --color-prp-visibility-bg: rgb(244, 247, 255);
  --color-prp-muted: rgb(95, 104, 122);
  --color-prp-private-border: rgb(254, 215, 170);
  --color-prp-private-bg: rgb(255, 247, 237);
  --color-prp-private-text: rgb(234, 88, 12);
  --color-prp-badge-bg: rgb(237, 242, 255);
  --color-prp-meta-border: rgb(225, 230, 242);
  --color-prp-meta-bg: rgb(247, 248, 252);
  --color-prp-meta-text: rgb(104, 113, 132);
  --color-prp-action-border: rgb(223, 229, 242);
  --color-prp-info-label: rgb(123, 136, 161);
  --color-prp-timeline-border: rgb(233, 237, 246);
  --color-prp-timeline-bg: rgb(251, 252, 255);
  --color-prp-mission-text: rgb(54, 65, 82);
  --color-prp-future-border: rgb(236, 236, 243);
  --color-prp-future-title: rgb(17, 17, 17);
  --color-prp-future-accent: rgb(91, 79, 245);
  --color-prp-future-empty-text: rgb(154, 154, 170);
  --color-prp-future-empty-bg: rgb(248, 248, 252);
  --color-prp-regen-border: rgb(124, 109, 234);
  --color-prp-regen-text: rgb(91, 79, 207);
  --color-prp-regen-disabled-border: rgb(204, 204, 204);
  --color-prp-regen-disabled-text: rgb(170, 170, 170);
  --color-prp-story-grad-1: rgb(244, 240, 255);
  --color-prp-story-grad-2: rgb(238, 243, 255);
  --color-prp-story-border: rgb(224, 217, 255);
  --color-prp-story-label: rgb(124, 111, 224);
  --color-prp-story-text: rgb(59, 51, 89);

  /* 신문 클리핑 목업 - 항상 종이 질감 고정(다크모드 무관) */
  --color-prp-news-bg: rgb(255, 255, 255);
  --color-prp-news-border: rgb(224, 216, 200);
  --color-prp-news-text: rgb(17, 17, 17);
  --color-prp-news-date: rgb(136, 136, 136);
  --color-prp-news-rule-thin: rgb(216, 208, 190);
  --color-prp-news-headline: rgb(13, 13, 13);
  --color-prp-news-subhead: rgb(68, 68, 68);
  --color-prp-news-byline: rgb(102, 102, 102);
  --color-prp-news-byline-dot: rgb(187, 187, 187);
  --color-prp-news-caption-bg: rgb(248, 246, 241);
  --color-prp-news-caption-border: rgb(232, 224, 206);
  --color-prp-news-body: rgb(26, 26, 26);
}

.profile-roadmap-visibility {
  padding: 14px 18px;
  border: 1px solid var(--color-prp-visibility-border);
  border-radius: 16px;
  background: var(--color-prp-visibility-bg);
  color: var(--color-prp-muted);
  font-size: 14px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-roadmap-visibility strong {
  font-weight: 950;
}

.profile-roadmap-visibility.is-public strong {
  color: var(--color-brand-strong);
}

.profile-roadmap-visibility.is-private {
  border-color: var(--color-prp-private-border);
  background: var(--color-prp-private-bg);
}

.profile-roadmap-visibility.is-private strong {
  color: var(--color-prp-private-text);
}

.profile-roadmap-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.profile-roadmap-badge {
  width: fit-content;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-prp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
}

.profile-roadmap-badge.challenge {
  background: var(--color-prp-private-bg);
  color: var(--color-prp-private-text);
}

.profile-roadmap-badge.explore {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.profile-roadmap-hero h2 {
  margin: 16px 0 0;
  color: var(--color-text-main);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.profile-roadmap-hero p {
  max-width: 620px;
  margin: 12px 0 0;
  color: var(--color-prp-muted);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 700;
  word-break: keep-all;
}

.profile-roadmap-meta {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-roadmap-meta span {
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid var(--color-prp-meta-border);
  border-radius: 999px;
  background: var(--color-prp-meta-bg);
  color: var(--color-prp-meta-text);
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
}

.profile-roadmap-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-roadmap-actions a,
.profile-roadmap-empty a {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-roadmap-actions a:first-child,
.profile-roadmap-empty a:first-child {
  background: var(--color-brand-icon);
  border: 1px solid var(--color-brand-icon);
  color: var(--color-text-on-brand);
}

.profile-roadmap-actions a:last-child,
.profile-roadmap-empty a:last-child {
  background: var(--color-bg-white);
  border: 1px solid var(--color-prp-action-border);
  color: var(--color-brand-strong);
}

.profile-roadmap-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.profile-roadmap-info-grid article {
  padding: 20px;
  border-radius: 20px;
}

.profile-roadmap-info-grid span {
  display: block;
  color: var(--color-prp-info-label);
  font-size: 13px;
  font-weight: 900;
}

.profile-roadmap-info-grid strong {
  display: block;
  margin-top: 9px;
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 950;
  word-break: keep-all;
}

.profile-roadmap-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-roadmap-timeline article {
  padding: 18px;
  border: 1px solid var(--color-prp-timeline-border);
  border-radius: 18px;
  background: var(--color-prp-timeline-bg);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
}

.profile-roadmap-timeline article > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--color-prp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 15px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-roadmap-timeline h3 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 17px;
  font-weight: 950;
}

.profile-roadmap-timeline p {
  margin: 8px 0 0;
  color: var(--color-prp-muted);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 700;
  word-break: keep-all;
}

.profile-roadmap-mission {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--color-prp-timeline-border);
  border-radius: 14px;
  background: var(--color-bg-white);
}

.profile-roadmap-mission small {
  display: block;
  margin-bottom: 6px;
  color: var(--color-brand-icon);
  font-size: 12px;
  font-weight: 950;
}

.profile-roadmap-mission strong {
  color: var(--color-prp-mission-text);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 850;
  word-break: keep-all;
}

.profile-roadmap-more {
  margin: 16px 0 0;
  text-align: center;
  color: var(--color-prp-info-label);
  font-size: 13px;
  font-weight: 750;
}

.profile-future-image-section {
  background: var(--color-bg-white);
  border: 1px solid var(--color-prp-future-border);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-future-image-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-future-image-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-prp-future-title);
}

.profile-future-image-btn {
  padding: 8px 16px;
  background: var(--color-prp-future-accent);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.profile-future-image-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-future-image {
  width: 100%;
  display: block;
  border-radius: 14px;
  object-fit: contain;
}

.profile-future-image-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-prp-future-empty-text);
  font-size: 14px;
  background: var(--color-prp-future-empty-bg);
  border-radius: 12px;
}

.profile-future-regen-wrap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-future-regen-btn {
  padding: 9px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--color-prp-regen-border);
  background: var(--color-bg-white);
  color: var(--color-prp-regen-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.profile-future-regen-btn:hover:not(:disabled) {
  background: var(--color-prp-regen-text);
  color: var(--color-bg-white);
}

.profile-future-regen-btn:disabled {
  border-color: var(--color-prp-regen-disabled-border);
  color: var(--color-prp-regen-disabled-text);
  cursor: not-allowed;
}

.profile-future-regen-hint {
  font-size: 12px;
  color: var(--color-prp-future-empty-text);
  margin: 0;
}

.profile-future-story {
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--color-prp-story-grad-1) 0%, var(--color-prp-story-grad-2) 100%);
  border: 1px solid var(--color-prp-story-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-future-story-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--color-prp-story-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-future-story p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-prp-story-text);
  font-weight: 700;
  word-break: keep-all;
}

/* ── 미래 뉴스 기사 카드 ─────────────────────────── */
.profile-future-news {
  background: var(--color-prp-news-bg);
  border: 1px solid var(--color-prp-news-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.profile-future-news__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 12px;
  gap: 12px;
}

.profile-future-news__brand {
  font-size: 22px;
  font-weight: 950;
  color: var(--color-prp-news-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: "Georgia", serif;
}

.profile-future-news__top-date {
  font-size: 12px;
  color: var(--color-prp-news-date);
  font-family: sans-serif;
  font-weight: 600;
  white-space: nowrap;
}

.profile-future-news__rule {
  border: none;
  margin: 0;
}

.profile-future-news__rule--thick {
  border-top: 3px solid var(--color-prp-news-text);
}

.profile-future-news__rule--thin {
  border-top: 1px solid var(--color-prp-news-rule-thin);
}

.profile-future-news__headline {
  margin: 0;
  padding: 20px 24px 8px;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.3;
  color: var(--color-prp-news-headline);
  letter-spacing: -0.03em;
  word-break: keep-all;
  font-family: "Georgia", serif;
}

.profile-future-news__subheadline {
  margin: 0;
  padding: 0 24px 14px;
  font-size: 17px;
  color: var(--color-prp-news-subhead);
  line-height: 1.55;
  word-break: keep-all;
  font-family: sans-serif;
  font-weight: 500;
}

.profile-future-news__byline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-size: 13px;
  color: var(--color-prp-news-byline);
  font-family: sans-serif;
  font-weight: 600;
}

.profile-future-news__byline-dot {
  color: var(--color-prp-news-byline-dot);
}

.profile-future-news__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.profile-future-news__photo {
  width: 100%;
  display: block;
  object-fit: contain;
}

.profile-future-news__caption {
  padding: 9px 24px;
  font-size: 12px;
  color: var(--color-prp-news-date);
  font-family: sans-serif;
  background: var(--color-prp-news-caption-bg);
  border-top: 1px solid var(--color-prp-news-caption-border);
}

.profile-future-news__body {
  margin: 0;
  padding: 20px 24px 24px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--color-prp-news-body);
  word-break: keep-all;
  font-family: "Georgia", serif;
  border-top: 1px solid var(--color-prp-news-caption-border);
}

.profile-roadmap-empty {
  min-height: 260px;
  text-align: center;
  color: var(--color-prp-meta-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.profile-roadmap-empty svg {
  color: var(--color-brand-icon);
}

.profile-roadmap-empty h3 {
  margin: 16px 0 0;
  color: var(--color-text-main);
  font-size: 22px;
  font-weight: 950;
}

.profile-roadmap-empty p {
  margin: 10px 0 0;
  color: var(--color-prp-meta-text);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
}

.profile-roadmap-empty div {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .profile-roadmap-hero {
    flex-direction: column;
  }

  .profile-roadmap-actions {
    flex-direction: row;
  }

  .profile-roadmap-actions a {
    flex: 1;
  }

  .profile-roadmap-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .profile-roadmap-visibility {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-roadmap-hero h2 {
    font-size: 24px;
  }

  .profile-roadmap-actions {
    flex-direction: column;
  }

  .profile-roadmap-timeline article {
    grid-template-columns: 1fr;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-prp-visibility-border: rgba(129, 140, 248, 0.35);
  --color-prp-visibility-bg: rgba(129, 140, 248, 0.12);
  --color-prp-muted: var(--color-text-muted);
  --color-prp-private-border: rgba(234, 88, 12, 0.4);
  --color-prp-private-bg: rgba(234, 88, 12, 0.14);
  --color-prp-private-text: rgb(251, 146, 60);
  --color-prp-badge-bg: rgba(129, 140, 248, 0.16);
  --color-prp-meta-border: var(--color-border);
  --color-prp-meta-bg: var(--color-bg-soft);
  --color-prp-meta-text: var(--color-text-muted);
  --color-prp-action-border: var(--color-border);
  --color-prp-info-label: var(--color-text-placeholder);
  --color-prp-timeline-border: var(--color-border);
  --color-prp-timeline-bg: var(--color-bg-elevated-dark);
  --color-prp-mission-text: var(--color-text-sub);
  --color-prp-future-border: var(--color-border);
  --color-prp-future-title: var(--color-text-main);
  --color-prp-future-accent: rgb(129, 140, 248);
  --color-prp-future-empty-text: var(--color-text-placeholder);
  --color-prp-future-empty-bg: var(--color-bg-soft);
  --color-prp-regen-border: rgb(129, 140, 248);
  --color-prp-regen-text: rgb(167, 139, 250);
  --color-prp-regen-disabled-border: var(--color-border);
  --color-prp-regen-disabled-text: var(--color-text-placeholder);
  --color-prp-story-grad-1: rgba(167, 139, 250, 0.14);
  --color-prp-story-grad-2: rgba(129, 140, 248, 0.14);
  --color-prp-story-border: rgba(167, 139, 250, 0.3);
  --color-prp-story-label: rgb(196, 181, 253);
  --color-prp-story-text: var(--color-text-sub);

  /* 신문 목업은 다크모드에서도 값 불변 */
}

/* dark.css의 전역 안전망 규칙([data-theme="dark"] h3/p 색상 지정)이
   태그 선택자(h3/p)라서 클래스 하나짜리 규칙보다 명시도가 높아 이겨버림 -
   종이 질감 고정용 색을 다시 명시도 높게 재선언해서 되찾아온다 */
[data-theme="dark"] .profile-future-news__headline {
  color: var(--color-prp-news-headline);
}

[data-theme="dark"] .profile-future-news__subheadline {
  color: var(--color-prp-news-subhead);
}

[data-theme="dark"] .profile-future-news__body {
  color: var(--color-prp-news-body);
}
.university-verified-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.university-verified-badge.is-unverified {
  width: auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #bbf7d0;
  color: #047857;
  font-size: 12px;
  font-weight: 950;
}

.university-verified-badge svg {
  flex: 0 0 auto;
  stroke-width: 2.8;
}

.university-verified-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.university-verified-badge:has(span) {
  width: auto;
  max-width: 220px;
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  border: 1px solid #bbf7d0;
  color: #047857;
  font-size: 12px;
  font-weight: 950;
}
:root {
  --color-mm-icon: rgb(75, 85, 99);
  --color-mm-shadow: rgba(17, 24, 39, 0.14);
  --color-mm-danger-hover: rgba(220, 38, 38, 0.08);
}

[data-theme="dark"] {
  --color-mm-icon: var(--color-text-muted);
  --color-mm-shadow: rgba(0, 0, 0, 0.4);
  --color-mm-danger-hover: rgba(248, 113, 113, 0.16);
}

.more-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.more-menu-trigger {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--color-mm-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
  flex-shrink: 0;
}

.more-menu-trigger svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.more-menu-trigger:hover {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}

.more-menu-trigger:active {
  transform: scale(0.96);
}

.more-menu-dropdown-portal {
  min-width: 160px;
  max-width: min(220px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  box-shadow: 0 18px 40px var(--color-mm-shadow);
  pointer-events: auto;
}

.more-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 12px;
  padding: 11px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

.more-menu-item:hover {
  background: var(--color-bg-soft);
}

.more-menu-item.danger {
  color: var(--color-danger);
}

.more-menu-item.danger:hover {
  background: var(--color-mm-danger-hover);
}

.more-menu-item.disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
  pointer-events: none;
}

.more-menu-item.disabled:hover {
  background: transparent;
}

@media (max-width: 640px) {
  .more-menu-trigger {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .more-menu-dropdown-portal {
    min-width: 148px;
    max-width: calc(100vw - 12px);
    padding: 6px;
    border-radius: 14px;
  }

  .more-menu-item {
    padding: 10px 11px;
    font-size: 13px;
  }
}:root {
  --color-rm-backdrop: rgba(15, 23, 42, 0.52);
  --color-rm-modal-shadow: rgba(15, 23, 42, 0.18);
  --color-rm-header-border: rgb(238, 242, 247);
  --color-rm-input-border: rgb(219, 226, 234);
}

.report-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--color-rm-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.report-modal {
  width: 100%;
  max-width: 480px;
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 24px 80px var(--color-rm-modal-shadow);
  overflow: hidden;
}

.report-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-rm-header-border);
}

.report-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
}

.report-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}

.report-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.report-modal-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-sub);
}

.report-modal-select,
.report-modal-textarea {
  width: 100%;
  border: 1px solid var(--color-rm-input-border);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-text-main);
  background: var(--color-bg-white);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.report-modal-select:focus,
.report-modal-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-focus-ring);
}

.report-modal-textarea {
  resize: vertical;
  min-height: 120px;
}

.report-modal-error {
  margin: 0;
  font-size: 13px;
  color: var(--color-danger);
}

.report-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.report-modal-cancel,
.report-modal-submit {
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.report-modal-cancel {
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
}

.report-modal-submit {
  background: var(--color-text-main);
  color: var(--color-text-inverse);
}

.report-modal-cancel:disabled,
.report-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

[data-theme="dark"] {
  --color-rm-backdrop: rgba(2, 6, 16, 0.65);
  --color-rm-modal-shadow: rgba(0, 0, 0, 0.4);
  --color-rm-header-border: rgb(51, 65, 85);
  --color-rm-input-border: rgb(51, 65, 85);
}

/* dark.css의 전역 안전망 규칙([class*="-modal"]이 배경/테두리/글자색을
   일괄 지정)이 "report-modal"을 포함하는 이 파일의 모든 클래스를 잡아버려서
   각 요소가 의도한 색 대신 전부 동일한 고정 배경/테두리/글자색으로
   뭉개지고 있었다. 명시도를 맞춰 전부 재선언한다. */
[data-theme="dark"] .report-modal-backdrop {
  background: var(--color-rm-backdrop);
  border-color: transparent;
  color: inherit;
}

[data-theme="dark"] .report-modal {
  background: var(--color-bg-white);
  border-color: transparent;
  color: var(--color-text-main);
}

[data-theme="dark"] .report-modal-header {
  background: transparent;
  border-color: var(--color-rm-header-border);
  color: var(--color-text-main);
}

[data-theme="dark"] .report-modal-close {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

[data-theme="dark"] .report-modal-form {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

[data-theme="dark"] .report-modal-label {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-sub);
}

[data-theme="dark"] .report-modal-select,
[data-theme="dark"] .report-modal-textarea {
  background: var(--color-bg-white);
  border-color: var(--color-rm-input-border);
  color: var(--color-text-main);
}

[data-theme="dark"] .report-modal-error {
  background: transparent;
  border-color: transparent;
  color: var(--color-danger);
}

[data-theme="dark"] .report-modal-actions {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

[data-theme="dark"] .report-modal-cancel {
  background: var(--color-bg-soft);
  border-color: transparent;
  color: var(--color-text-sub);
}

[data-theme="dark"] .report-modal-submit {
  background: var(--color-brand-strong);
  border-color: transparent;
  color: var(--color-text-inverse);
}
.digital-card-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.digital-card-modal {
  position: relative;
  width: min(100%, 380px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  padding: 24px;
}

.digital-card-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.digital-card-modal__loading,
.digital-card-modal__empty {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 24px 0;
  text-align: center;
}

.digital-card-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.digital-card-modal__header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-main);
}

.digital-card-modal__job {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--color-text-sub);
}

.digital-card-modal__role {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.digital-card-modal__specialty {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-main);
}

.digital-card-modal__specialty strong {
  color: var(--color-text-sub);
  font-weight: 700;
  margin-right: 4px;
}

.digital-card-modal__bio {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--color-text-main);
  line-height: 1.5;
  white-space: pre-wrap;
}

.digital-card-modal__section {
  margin: 0 0 14px;
}

.digital-card-modal__section h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-sub);
}

.digital-card-modal__multiline {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-main);
  line-height: 1.5;
  white-space: pre-wrap;
}

.digital-card-modal__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.digital-card-modal__skill-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-bg-soft);
  border-radius: 999px;
  padding: 4px 10px;
}

.digital-card-modal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.digital-card-modal__links a {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
}

.digital-card-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.digital-card-modal__actions button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.digital-card-modal__exchange-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-accent);
  background: var(--color-bg-soft);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.digital-card-modal__exchange-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.digital-card-modal__exchange-respond {
  display: flex;
  gap: 8px;
  flex: 1;
}

.digital-card-modal__exchange-respond button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.digital-card-modal__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.digital-card-modal__form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-sub);
  margin-top: 8px;
}

.digital-card-modal__form input,
.digital-card-modal__form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.digital-card-modal__form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.digital-card-modal__form-actions button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.digital-card-modal__form-actions button[type="submit"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.digital-card-modal__encounter {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-strong);
}

.digital-card-modal__encounter h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-sub);
}

.digital-card-modal__encounter-empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.digital-card-modal__encounter-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-main);
}
.hackathon-encounters-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hackathon-encounters-list__item {
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg-soft);
  padding: 14px 16px;
}

.hackathon-encounters-list__item p {
  margin: 2px 0;
  font-size: 13px;
  color: var(--color-text-sub);
}

.hackathon-encounters-list__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
}
.hackathon-network-modal__title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-main);
}

.hackathon-network-modal__back {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-network-modal__my-card-btn {
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-accent);
  background: var(--color-bg-soft);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-network-modal__view-card-btn {
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.projects-page {
  width: 100%;
  min-height: 100vh;
  background: #f7f8fc;
  color: #111827;
  box-sizing: border-box;
}
.projects-page * { box-sizing: border-box; }
.projects-page button, .projects-page input, .projects-page select { font-family: inherit; }

/* ── Hero ── */
.projects-hero-wrap {
  padding: 24px 20px 0;
  background: #ffffff;
  border-bottom: 1px solid #eef0f8;
}
.projects-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.projects-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(87, 108, 255, 0.09);
  color: #5368df;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.projects-hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -0.065em;
  color: #0f172a;
  line-height: 1.1;
}
.projects-hero h1 strong { color: #4965ff; }
.projects-hero p {
  margin: 10px 0 0;
  color: #5f687a;
  font-size: 16px;
  font-weight: 600;
}
.projects-hero-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.projects-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #f8f9ff;
  border: 1px solid #eef0f8;
  border-radius: 16px;
  min-width: 120px;
}
.projects-stat-icon {
  font-size: 18px;
  color: #4965ff;
  flex-shrink: 0;
}
.projects-stat-label {
  display: block;
  font-size: 11px;
  color: #8492a6;
  font-weight: 700;
  margin-bottom: 2px;
}
.projects-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 950;
  color: #111827;
  letter-spacing: -0.04em;
  line-height: 1;
}
.projects-stat-highlight { color: #4965ff; }

/* ── Content ── */
.projects-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 96px;
}

/* ── Search card ── */
.projects-search-card {
  background: #ffffff;
  border: 1px solid #e9edf6;
  border-radius: 20px;
  padding: 18px 20px 0;
  box-shadow: 0 4px 20px rgba(26, 38, 90, 0.04);
  margin-bottom: 16px;
}
.projects-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.projects-search-box {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #dfe5f2;
  border-radius: 12px;
  background: #f9faff;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.projects-search-box:focus-within {
  border-color: #c2ccff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(73, 101, 255, 0.08);
}
.projects-search-box svg { font-size: 17px; color: #7b88b1; flex-shrink: 0; }
.projects-search-box input {
  width: 100%;
  height: 48px;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}
.projects-search-box input::placeholder { color: #98a2b3; font-weight: 500; }
.projects-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.projects-filter-group select {
  height: 40px;
  padding: 0 28px 0 12px;
  border: 1px solid #dfe5f2;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.projects-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #f3f4f8;
  border-radius: 10px;
}
.projects-view-toggle button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8492a6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.projects-view-toggle button.is-active {
  background: #ffffff;
  color: #4965ff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.projects-tabs-wrap {
  display: flex;
  align-items: center;
  border-top: 1px solid #f0f1f8;
}
.projects-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.projects-tabs::-webkit-scrollbar { display: none; }
.projects-tab {
  position: relative;
  height: 46px;
  padding: 0 18px;
  border: none;
  background: transparent;
  color: #98a2b3;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.projects-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #4965ff;
  opacity: 0;
  transition: opacity 0.2s;
}
.projects-tab.is-active { color: #4965ff; }
.projects-tab.is-active::after { opacity: 1; }
.projects-tab:hover:not(.is-active) { color: #374151; }
.projects-result-count {
  flex-shrink: 0;
  padding: 0 12px 0 8px;
  font-size: 13px;
  color: #8492a6;
  font-weight: 700;
  white-space: nowrap;
}
.projects-result-count strong { color: #4965ff; }

/* ── Grid ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.projects-grid.is-list {
  grid-template-columns: 1fr;
}

/* ── Card ── */
.project-card-new {
  position: relative;
  background: #ffffff;
  border: 1px solid #e9edf6;
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 4px 16px rgba(26, 38, 90, 0.04);
  min-height: 220px;
}
.project-card-new:hover {
  transform: translateY(-3px);
  border-color: #c9d4ff;
  box-shadow: 0 12px 32px rgba(73, 101, 255, 0.10);
}
.is-list .project-card-new {
  flex-direction: row;
  align-items: flex-start;
  min-height: auto;
  gap: 16px;
}
.pcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.pcard__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.pcard__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pcard__status {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}
.pcard__status.is-open { background: #edf2ff; color: #4d5dde; }
.pcard__status.is-closed { background: #f2f3f5; color: #6b7280; }
.pcard__category {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #f7f8fc;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.pcard__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pcard__icon-wrap svg { width: 18px; height: 18px; }
.pcard__icon-wrap--contest { background: #fef3c7; }
.pcard__icon-wrap--contest svg { color: #d97706; }
.pcard__icon-wrap--portfolio { background: #dbeafe; }
.pcard__icon-wrap--portfolio svg { color: #2563eb; }
.pcard__icon-wrap--startup { background: #fee2e2; }
.pcard__icon-wrap--startup svg { color: #dc2626; }
.pcard__icon-wrap--study { background: #d1fae5; }
.pcard__icon-wrap--study svg { color: #059669; }
.pcard__icon-wrap--hobby { background: #ede9fe; }
.pcard__icon-wrap--hobby svg { color: #7c3aed; }
.pcard__icon-wrap--etc { background: #f3f4f6; }
.pcard__icon-wrap--etc svg { color: #6b7280; }
.pcard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 950;
  color: #111827;
  letter-spacing: -0.04em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard__summary {
  margin: 0;
  font-size: 13px;
  color: #5f687a;
  line-height: 1.6;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pcard__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pcard__role-tag {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f0f2ff;
  color: #4965ff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.pcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f3f4f8;
}
.pcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pcard__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #8492a6;
  font-weight: 700;
}
.pcard__meta svg { font-size: 13px; color: #b0bdd8; }
.pcard__like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #f4d9e7;
  border-radius: 999px;
  background: #fff7fb;
  color: #db4388;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.pcard__like:hover:not(:disabled) { transform: translateY(-1px); background: #fff0f7; }
.pcard__like.is-active { background: #ffeaf4; border-color: #efbfd7; }
.pcard__like.is-active svg { fill: currentColor; }
.pcard__like:disabled { opacity: 0.6; cursor: default; }

/* ── Skeleton ── */
.project-card-skeleton {
  background: #ffffff;
  border: 1px solid #e9edf6;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.pcs__badges, .pcs__title, .pcs__line, .pcs__tags span {
  border-radius: 8px;
  background: linear-gradient(90deg, #eef1f7 0%, #f7f8fb 50%, #eef1f7 100%);
  background-size: 220% 100%;
  animation: skeletonAnim 1.2s ease-in-out infinite;
}
.pcs__badges { height: 22px; width: 120px; border-radius: 6px; }
.pcs__title { height: 20px; width: 75%; border-radius: 6px; margin-top: 6px; }
.pcs__line { height: 13px; width: 100%; border-radius: 6px; }
.pcs__line--short { width: 60%; }
.pcs__tags { display: flex; gap: 6px; }
.pcs__tags span { height: 24px; width: 70px; border-radius: 999px; }
@keyframes skeletonAnim {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* ── Pagination ── */
.projects-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pagination-btn, .pagination-num {
  width: 38px;
  height: 38px;
  border: 1px solid #dfe5f2;
  border-radius: 10px;
  background: #ffffff;
  color: #4b5563;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pagination-btn:hover:not(:disabled), .pagination-num:hover {
  transform: translateY(-1px);
  border-color: #c2ccff;
  background: #f8faff;
  color: #4054dc;
}
.pagination-num.is-active {
  border-color: #4965ff;
  background: #4965ff;
  color: #ffffff;
}
.pagination-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Empty ── */
.projects-empty {
  grid-column: 1 / -1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e9edf6;
  border-radius: 20px;
  text-align: center;
  padding: 40px;
}
.projects-empty strong { font-size: 17px; font-weight: 950; color: #111827; }
.projects-empty p { margin: 8px 0 0; color: #697386; font-size: 14px; }

/* ── FAB ── */
.projects-floating-write {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #3158ff, #4965ff);
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(73, 101, 255, 0.28);
  transition: transform 0.2s, box-shadow 0.2s;
}
.projects-floating-write:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(73, 101, 255, 0.34); }
.projects-floating-write svg { font-size: 19px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-hero-stats { display: none; }
  .projects-floating-write { bottom: calc(68px + 18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .projects-hero-wrap { padding: 0; }
  .projects-hero { padding: 20px 16px; flex-direction: column; align-items: flex-start; gap: 0; }
  .projects-hero-left { width: 100%; }
  .projects-hero h1 { font-size: 26px; }
  .projects-hero p { font-size: 14px; }
  .projects-content { padding: 12px 12px 96px; }
  .projects-search-card { border-radius: 14px; padding: 14px 14px 0; }
  .projects-search-box { height: 42px; }
  .projects-search-box input { height: 42px; font-size: 14px; }
  .projects-grid { grid-template-columns: 1fr; gap: 10px; }
  .projects-filter-group { display: none; }
  .projects-view-toggle { display: none; }
  .is-list .project-card-new { flex-direction: column; min-height: 0; gap: 10px; }
  .pcard__meta { gap: 6px; }
  .pcard__meta span { font-size: 11px; }
  .pcard__title { font-size: 15px; }
  .projects-pagination { flex-wrap: wrap; gap: 4px; }
  .projects-floating-write {
    right: 16px;
    bottom: calc(var(--mobile-nav-height, 76px) + 18px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 16px;
    justify-content: center;
  }
  .projects-floating-write span { display: none; }
}
:root {
  --color-pdp-page-glow: rgba(111, 66, 193, 0.06);
  --color-pdp-page-bg: rgb(246, 247, 251);
  --color-pdp-card-bg: rgba(255, 255, 255, 0.92);
  --color-pdp-card-border: rgb(235, 237, 244);
  --color-pdp-card-shadow-1: rgba(15, 23, 42, 0.04);
  --color-pdp-card-shadow-2: rgba(15, 23, 42, 0.03);
  --color-pdp-hero-border: rgb(228, 224, 246);
  --color-pdp-hero-shadow: rgba(78, 54, 146, 0.07);
  --color-pdp-title: rgb(16, 17, 20);
  --color-pdp-subtitle: rgb(122, 127, 140);
  --color-pdp-category-bg: rgb(241, 239, 255);
  --color-pdp-category-text: rgb(93, 63, 211);
  --color-pdp-status-open-bg: rgb(235, 255, 243);
  --color-pdp-status-open-text: rgb(23, 138, 77);
  --color-pdp-status-closed-bg: rgb(241, 243, 247);
  --color-pdp-status-closed-text: rgb(111, 119, 133);
  --color-pdp-status-deleted-bg: rgb(255, 241, 240);
  --color-pdp-status-deleted-text: rgb(180, 35, 24);
  --color-pdp-heading: rgb(17, 17, 17);
  --color-pdp-summary: rgb(95, 100, 114);
  --color-pdp-stat-bg: rgb(250, 251, 255);
  --color-pdp-stat-border: rgb(236, 239, 245);
  --color-pdp-stat-label: rgb(138, 144, 160);
  --color-pdp-stat-value: rgb(20, 22, 26);
  --color-pdp-accent: rgb(111, 66, 193);
  --color-pdp-accent-shadow: rgba(111, 66, 193, 0.18);
  --color-pdp-danger: rgb(211, 60, 60);
  --color-pdp-delete-bg: rgb(244, 244, 248);
  --color-pdp-cta-bg: rgb(17, 17, 17);
  --color-pdp-cta-disabled-bg: rgb(235, 237, 243);
  --color-pdp-cta-disabled-text: rgb(138, 144, 160);
  --color-pdp-cancel-border: rgb(241, 201, 207);
  --color-pdp-cancel-bg: rgb(255, 245, 246);
  --color-pdp-cancel-hover-bg: rgb(255, 236, 238);
  --color-pdp-cancel-hover-border: rgb(233, 179, 188);
  --color-pdp-item-border: rgb(237, 240, 246);
  --color-pdp-item-bg: rgb(251, 252, 255);
  --color-pdp-avatar-bg: rgb(243, 244, 248);
  --color-pdp-name-disabled: rgb(138, 143, 156);
  --color-pdp-pending: rgb(210, 135, 0);
  --color-pdp-message: rgb(51, 51, 51);
  --color-pdp-date: rgb(138, 143, 156);
  --color-pdp-description: rgb(49, 52, 60);
  --color-pdp-member-hover-border: rgb(226, 231, 240);
  --color-pdp-member-hover-shadow: rgba(15, 23, 42, 0.05);
  --color-pdp-owner-grad-1: rgb(252, 251, 255);
  --color-pdp-owner-grad-2: rgb(247, 243, 255);
  --color-pdp-owner-border: rgb(227, 216, 255);
  --color-pdp-member-avatar-bg: rgb(241, 239, 255);
  --color-pdp-member-avatar-text: rgb(93, 63, 211);
  --color-pdp-owner-avatar-bg: rgb(236, 228, 255);
  --color-pdp-owner-avatar-text: rgb(91, 53, 201);
  --color-pdp-name: rgb(17, 17, 17);
  --color-pdp-role-badge-bg: rgb(242, 244, 248);
  --color-pdp-role-badge-text: rgb(95, 100, 114);
  --color-pdp-role-owner-bg: rgb(239, 232, 255);
  --color-pdp-role-owner-text: rgb(106, 63, 208);
  --color-pdp-role-desc: rgb(122, 127, 140);
  --color-pdp-btn-border: rgb(221, 226, 236);
  --color-pdp-btn-bg: rgb(255, 255, 255);
  --color-pdp-btn-text: rgb(31, 41, 55);
  --color-pdp-btn-hover-bg: rgb(248, 249, 252);
  --color-pdp-btn-hover-border: rgb(207, 214, 226);
  --color-pdp-danger-btn-border: rgb(255, 208, 204);
  --color-pdp-danger-btn-bg: rgb(255, 246, 245);
  --color-pdp-danger-btn-hover-bg: rgb(255, 241, 240);
  --color-pdp-danger-btn-hover-border: rgb(255, 184, 176);
  --color-pdp-empty-text: rgb(123, 127, 137);
  --color-pdp-info-border: rgb(237, 240, 246);
  --color-pdp-info-bg: rgb(251, 252, 255);
  --color-pdp-info-label: rgb(122, 127, 140);
  --color-pdp-info-value: rgb(17, 17, 17);
  --color-pdp-textarea-border: rgb(230, 233, 241);
  --color-pdp-focus-ring: rgba(111, 66, 193, 0.08);
  --color-pdp-cancel-btn-bg: rgb(242, 243, 247);
  --color-pdp-cancel-btn-text: rgb(79, 85, 97);
  --color-pdp-reply-border: rgb(231, 232, 241);
  --color-pdp-more-border: rgba(17, 17, 17, 0.08);
  --color-pdp-more-hover-border: rgba(17, 17, 17, 0.14);
  --color-pdp-more-shadow: rgba(0, 0, 0, 0.08);
  --color-pdp-more-menu-shadow: rgba(0, 0, 0, 0.12);
  --color-pdp-menu-text: rgb(34, 34, 34);
  --color-pdp-menu-hover-bg: rgb(247, 247, 248);
  --color-pdp-menu-danger: rgb(217, 48, 37);
  --color-pdp-like: rgb(255, 79, 117);
  --color-pdp-like-bg: rgb(255, 242, 245);
  --color-pdp-interest-disabled-bg: rgb(245, 246, 250);
  --color-pdp-interest-disabled-border: rgb(228, 231, 239);
  --color-pdp-interest-disabled-text: rgb(138, 144, 160);
  --color-pdp-comment-highlight-border: rgb(217, 205, 247);
  --color-pdp-comment-highlight-bg: rgb(248, 245, 255);
  --color-pdp-comment-flash-bg: rgb(239, 232, 255);
  --color-pdp-comment-flash-border: rgb(191, 167, 245);
  --color-pdp-comment-flash-shadow: rgba(111, 66, 193, 0.16);
  --color-pdp-workspace-grad-1: rgb(79, 70, 229);
  --color-pdp-workspace-grad-2: rgb(37, 99, 235);
  --color-pdp-workspace-shadow: rgba(79, 70, 229, 0.2);
  --color-pdp-workspace-hover-shadow: rgba(79, 70, 229, 0.24);
}

/* ============================= */
/* page */
/* ============================= */

.project-detail-page {
  min-height: 100vh;
  padding: 40px 20px 88px;
  background:
    radial-gradient(circle at top, var(--color-pdp-page-glow), transparent 24%),
    var(--color-pdp-page-bg);
}

.project-detail-container {
  max-width: 980px;
  margin: 0 auto;
}

.project-detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================= */
/* card */
/* ============================= */

.project-detail-card {
  background: var(--color-pdp-card-bg);
  border: 1px solid var(--color-pdp-card-border);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 10px 30px var(--color-pdp-card-shadow-1),
    0 2px 8px var(--color-pdp-card-shadow-2);
  backdrop-filter: blur(8px);
}

.project-hero-card {
  border: 1px solid var(--color-pdp-hero-border);
  box-shadow:
    0 14px 36px var(--color-pdp-hero-shadow),
    0 2px 8px var(--color-pdp-card-shadow-2);
}

/* ============================= */
/* common section head */
/* ============================= */

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.project-section-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--color-pdp-title);
  letter-spacing: -0.02em;
}

.project-section-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-pdp-subtitle);
}

/* ============================= */
/* top */
/* ============================= */

.project-detail-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.project-category {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--color-pdp-category-bg);
  color: var(--color-pdp-category-text);
  font-size: 13px;
  font-weight: 800;
}

.project-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.project-status.open {
  background: var(--color-pdp-status-open-bg);
  color: var(--color-pdp-status-open-text);
}

.project-status.closed {
  background: var(--color-pdp-status-closed-bg);
  color: var(--color-pdp-status-closed-text);
}

.project-status.deleted {
  background: var(--color-pdp-status-deleted-bg);
  color: var(--color-pdp-status-deleted-text);
}

.project-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--color-pdp-heading);
}

.project-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-pdp-summary);
}

.project-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--color-pdp-stat-bg);
  border: 1px solid var(--color-pdp-stat-border);
  border-radius: 18px;
}

.project-summary-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-pdp-stat-label);
}

.project-summary-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-pdp-stat-value);
}

/* ============================= */
/* actions */
/* ============================= */

.project-owner-actions,
.project-apply-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.project-edit-button,
.project-delete-button,
.project-apply-button,
.project-cancel-apply-button,
.project-approve-button,
.project-reject-button {
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.project-edit-button:hover,
.project-delete-button:hover,
.project-apply-button:hover,
.project-cancel-apply-button:hover,
.project-approve-button:hover,
.project-reject-button:hover,
.project-member-profile-button:hover,
.project-comment-submit:hover,
.project-comment-cancel:hover {
  transform: translateY(-1px);
}

.project-edit-button {
  background: var(--color-pdp-accent);
  color: var(--color-text-inverse);
  box-shadow: 0 10px 20px var(--color-pdp-accent-shadow);
}

.project-delete-button {
  background: var(--color-pdp-delete-bg);
  color: var(--color-pdp-danger);
}

.project-apply-button {
  background: var(--color-pdp-cta-bg);
  color: var(--color-text-inverse);
  box-shadow: 0 10px 18px rgba(17, 17, 17, 0.14);
}

.project-apply-button.disabled,
.project-apply-button:disabled {
  background: var(--color-pdp-cta-disabled-bg);
  color: var(--color-pdp-cta-disabled-text);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.project-cancel-apply-button {
  border: 1px solid var(--color-pdp-cancel-border);
  background: var(--color-pdp-cancel-bg);
  color: var(--color-pdp-danger);
}

.project-cancel-apply-button:hover {
  background: var(--color-pdp-cancel-hover-bg);
  border-color: var(--color-pdp-cancel-hover-border);
}

.project-cancel-apply-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.project-approve-button {
  background: var(--color-pdp-cta-bg);
  color: var(--color-text-inverse);
}

.project-reject-button {
  background: var(--color-pdp-delete-bg);
  color: var(--color-pdp-danger);
}

.project-delete-button:disabled,
.project-cancel-apply-button:disabled,
.project-approve-button:disabled,
.project-reject-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ============================= */
/* application list */
/* ============================= */

.project-application-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-application-item {
  padding: 18px;
  border: 1px solid var(--color-pdp-item-border);
  border-radius: 18px;
  background: var(--color-pdp-item-bg);
}

.project-application-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.project-application-user-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.project-application-user {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.project-application-avatar-button,
.project-application-avatar {
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-pdp-avatar-bg);
}

.project-application-avatar-button {
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.project-application-avatar-button:hover {
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.project-application-avatar.static {
  opacity: 0.8;
}

.project-application-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-application-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-pdp-name);
}

.project-application-name-button {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-pdp-name);
  cursor: pointer;
  text-align: left;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.project-application-name-button:hover {
  color: var(--color-pdp-accent);
}

.project-application-name.is-disabled {
  color: var(--color-pdp-name-disabled);
}

.project-application-status {
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.project-application-status.pending {
  color: var(--color-pdp-pending);
}

.project-application-status.approved {
  color: var(--color-pdp-status-open-text);
}

.project-application-status.rejected,
.project-application-status.cancelled {
  color: var(--color-pdp-danger);
}

.project-application-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.project-application-message {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-pdp-message);
  white-space: pre-line;
}

.project-application-date {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-pdp-date);
}

/* ============================= */
/* description */
/* ============================= */

.project-description {
  margin: 0;
  white-space: pre-line;
  line-height: 1.95;
  font-size: 15px;
  color: var(--color-pdp-description);
}

/* ============================= */
/* members */
/* ============================= */

.project-members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--color-pdp-item-border);
  border-radius: 18px;
  background: var(--color-pdp-avatar-bg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.project-member-item:hover {
  transform: translateY(-1px);
  border-color: var(--color-pdp-member-hover-border);
  box-shadow: 0 12px 24px var(--color-pdp-member-hover-shadow);
}

.owner-card {
  background: linear-gradient(180deg, var(--color-pdp-owner-grad-1) 0%, var(--color-pdp-owner-grad-2) 100%);
  border-color: var(--color-pdp-owner-border);
}

.project-member-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.project-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-pdp-member-avatar-bg);
  color: var(--color-pdp-member-avatar-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.project-member-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.owner-avatar {
  background: var(--color-pdp-owner-avatar-bg);
  color: var(--color-pdp-owner-avatar-text);
}

.project-member-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.project-member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-member-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-pdp-name);
}

.project-role-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-pdp-role-badge-bg);
  color: var(--color-pdp-role-badge-text);
  font-size: 12px;
  font-weight: 800;
}

.project-role-badge.owner {
  background: var(--color-pdp-role-owner-bg);
  color: var(--color-pdp-role-owner-text);
}

.project-member-role {
  font-size: 13px;
  color: var(--color-pdp-role-desc);
  line-height: 1.6;
}

.project-member-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-member-profile-button,
.project-member-action-button {
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--color-pdp-btn-border);
  border-radius: 12px;
  background: var(--color-pdp-btn-bg);
  color: var(--color-pdp-btn-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.project-member-profile-button:hover {
  background: var(--color-pdp-btn-hover-bg);
  border-color: var(--color-pdp-btn-hover-border);
}

.project-member-action-button.danger {
  border-color: var(--color-pdp-danger-btn-border);
  background: var(--color-pdp-danger-btn-bg);
  color: var(--color-pdp-danger);
}

.project-member-action-button.danger:hover:not(:disabled) {
  background: var(--color-pdp-danger-btn-hover-bg);
  border-color: var(--color-pdp-danger-btn-hover-border);
}

.project-member-profile-button:disabled,
.project-member-action-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.project-empty-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-pdp-empty-text);
}

/* ============================= */
/* detail info */
/* ============================= */

.project-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-pdp-info-border);
  border-radius: 18px;
  background: var(--color-pdp-info-bg);
}

.project-info-label {
  font-size: 13px;
  color: var(--color-pdp-info-label);
  font-weight: 700;
}

.project-info-value {
  font-size: 15px;
  color: var(--color-pdp-info-value);
  font-weight: 800;
}

/* ============================= */
/* comments */
/* ============================= */

.project-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.project-comment-textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px 16px;
  border: 1px solid var(--color-pdp-textarea-border);
  border-radius: 16px;
  background: var(--color-pdp-btn-bg);
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.project-comment-textarea.reply {
  min-height: 96px;
}

.project-comment-textarea:focus {
  border-color: var(--color-pdp-accent);
  box-shadow: 0 0 0 4px var(--color-pdp-focus-ring);
}

.project-comment-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.project-comment-submit,
.project-comment-cancel {
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;
}

.project-comment-submit {
  background: var(--color-pdp-accent);
  color: var(--color-text-inverse);
}

.project-comment-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.project-comment-cancel {
  background: var(--color-pdp-cancel-btn-bg);
  color: var(--color-pdp-cancel-btn-text);
}

.project-comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-comment-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-comment-item {
  padding: 18px;
  border: 1px solid var(--color-pdp-item-border);
  border-radius: 18px;
  background: var(--color-pdp-avatar-bg);
}

.reply-item {
  background: var(--color-pdp-btn-bg);
}

.project-comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.project-comment-author-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-comment-author {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-pdp-name);
}

.project-comment-date {
  font-size: 12px;
  color: var(--color-pdp-date);
}

.project-comment-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.comment-action-button {
  border: none;
  background: transparent;
  color: var(--color-pdp-summary);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.comment-action-button:hover {
  color: var(--color-pdp-name);
}

.comment-action-button.danger {
  color: var(--color-pdp-danger);
}

.project-comment-content {
  margin: 0;
  white-space: pre-line;
  line-height: 1.85;
  font-size: 14px;
  color: var(--color-pdp-description);
}

.project-comment-edit-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-reply-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-pdp-reply-border);
}

.project-reply-list {
  margin-left: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--color-pdp-reply-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================= */
/* menu / interest */
/* ============================= */

.project-detail-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-head-actions {
  position: relative;
  flex-shrink: 0;
}

.project-more-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-pdp-more-border);
  border-radius: 12px;
  background: var(--color-pdp-btn-bg);
  color: var(--color-pdp-menu-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.project-more-button:hover {
  transform: translateY(-1px);
  border-color: var(--color-pdp-more-hover-border);
  box-shadow: 0 10px 20px var(--color-pdp-more-shadow);
}

.project-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 140px;
  padding: 8px;
  border: 1px solid var(--color-pdp-more-border);
  border-radius: 14px;
  background: var(--color-pdp-btn-bg);
  box-shadow: 0 18px 34px var(--color-pdp-more-menu-shadow);
  z-index: 20;
}

.project-more-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-pdp-menu-text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.project-more-menu-item:hover {
  background: var(--color-pdp-menu-hover-bg);
}

.project-more-menu-item.danger {
  color: var(--color-pdp-menu-danger);
}

.project-apply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.project-interest-detail-button {
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-pdp-more-border);
  background: var(--color-pdp-btn-bg);
  color: var(--color-pdp-role-badge-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.project-interest-detail-button:hover {
  transform: translateY(-1px);
  color: var(--color-pdp-like);
  border-color: rgba(255, 79, 117, 0.24);
  box-shadow: 0 10px 22px var(--color-pdp-more-shadow);
}

.project-interest-detail-button:disabled:hover {
  transform: none;
  color: var(--color-pdp-cta-disabled-text);
  border-color: var(--color-pdp-interest-disabled-border);
  box-shadow: none;
}

.project-interest-detail-button.active {
  background: var(--color-pdp-like-bg);
  color: var(--color-pdp-like);
  border-color: rgba(255, 79, 117, 0.2);
}

.project-interest-detail-button:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--color-pdp-interest-disabled-bg);
  color: var(--color-pdp-cta-disabled-text);
  border-color: var(--color-pdp-interest-disabled-border);
}

.project-workspace-button {
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-pdp-workspace-grad-1) 0%, var(--color-pdp-workspace-grad-2) 100%);
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 10px 20px var(--color-pdp-workspace-shadow);
}

.project-workspace-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px var(--color-pdp-workspace-hover-shadow);
}

.project-workspace-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================= */
/* responsive */
/* ============================= */

@media (max-width: 768px) {
  .project-detail-head-row {
    gap: 12px;
  }

  .project-apply-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .project-interest-detail-button,
  .project-apply-button,
  .project-cancel-apply-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .project-detail-page {
    padding: 24px 16px 64px;
  }

  .project-detail-card {
    padding: 22px;
    border-radius: 18px;
  }

  .project-title {
    font-size: 28px;
  }

  .project-summary-stats {
    grid-template-columns: 1fr;
  }

  .project-owner-actions,
  .project-apply-actions,
  .project-application-actions {
    flex-direction: column;
  }

  .project-edit-button,
  .project-delete-button,
  .project-apply-button,
  .project-cancel-apply-button,
  .project-approve-button,
  .project-reject-button,
  .project-workspace-button {
    width: 100%;
  }

  .project-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .project-info-item {
    gap: 5px;
    padding: 11px 12px;
    border-radius: 13px;
  }

  .project-info-label {
    font-size: 11px;
  }

  .project-info-value {
    font-size: 13px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .project-comment-header,
  .project-application-top,
  .project-member-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-application-user-wrap {
    width: 100%;
  }

  .project-application-actions {
    width: 100%;
  }

  .project-member-right {
    width: 100%;
  }

  .project-member-profile-button {
    width: 100%;
  }

  .project-reply-list {
    margin-left: 10px;
    padding-left: 10px;
  }
}

.comment-highlight {
  animation: commentHighlightFade 2.2s ease;
  box-shadow: 0 0 0 2px var(--color-pdp-comment-flash-shadow);
  border-color: var(--color-pdp-comment-highlight-border) !important;
  background: var(--color-pdp-comment-highlight-bg) !important;
}

@keyframes commentHighlightFade {
  0% {
    background: var(--color-pdp-comment-flash-bg);
    border-color: var(--color-pdp-comment-flash-border);
    box-shadow: 0 0 0 4px var(--color-pdp-comment-flash-shadow);
  }
  100% {
    background: inherit;
    border-color: inherit;
    box-shadow: none;
  }
}

[data-theme="dark"] {
  --color-pdp-page-glow: rgba(167, 139, 250, 0.14);
  --color-pdp-page-bg: rgb(15, 23, 42);
  --color-pdp-card-bg: rgba(30, 41, 59, 0.9);
  --color-pdp-card-border: rgb(51, 65, 85);
  --color-pdp-card-shadow-1: rgba(0, 0, 0, 0.3);
  --color-pdp-card-shadow-2: rgba(0, 0, 0, 0.2);
  --color-pdp-hero-border: rgba(129, 140, 248, 0.3);
  --color-pdp-hero-shadow: rgba(0, 0, 0, 0.35);
  --color-pdp-title: var(--color-text-main);
  --color-pdp-subtitle: var(--color-text-muted);
  --color-pdp-category-bg: rgba(129, 140, 248, 0.16);
  --color-pdp-category-text: rgb(199, 210, 254);
  --color-pdp-status-open-bg: rgba(52, 211, 153, 0.14);
  --color-pdp-status-open-text: rgb(110, 231, 183);
  --color-pdp-status-closed-bg: var(--color-bg-elevated-dark);
  --color-pdp-status-closed-text: var(--color-text-muted);
  --color-pdp-status-deleted-bg: rgba(248, 113, 113, 0.14);
  --color-pdp-status-deleted-text: rgb(248, 113, 113);
  --color-pdp-heading: var(--color-text-main);
  --color-pdp-summary: var(--color-text-muted);
  --color-pdp-stat-bg: var(--color-bg-elevated-dark);
  --color-pdp-stat-border: rgb(51, 65, 85);
  --color-pdp-stat-label: var(--color-text-muted);
  --color-pdp-stat-value: var(--color-text-main);
  --color-pdp-accent: rgb(167, 139, 250);
  --color-pdp-accent-shadow: rgba(167, 139, 250, 0.3);
  --color-pdp-danger: rgb(248, 113, 113);
  --color-pdp-delete-bg: var(--color-bg-elevated-dark);
  --color-pdp-cta-bg: rgb(129, 140, 248);
  --color-pdp-cta-disabled-bg: rgb(51, 65, 85);
  --color-pdp-cta-disabled-text: var(--color-text-placeholder);
  --color-pdp-cancel-border: rgba(248, 113, 113, 0.3);
  --color-pdp-cancel-bg: rgba(248, 113, 113, 0.1);
  --color-pdp-cancel-hover-bg: rgba(248, 113, 113, 0.16);
  --color-pdp-cancel-hover-border: rgba(248, 113, 113, 0.4);
  --color-pdp-item-border: rgb(51, 65, 85);
  --color-pdp-item-bg: var(--color-bg-elevated-dark);
  --color-pdp-avatar-bg: var(--color-bg-elevated-dark);
  --color-pdp-name-disabled: var(--color-text-placeholder);
  --color-pdp-pending: rgb(251, 191, 36);
  --color-pdp-message: var(--color-text-sub);
  --color-pdp-date: var(--color-text-muted);
  --color-pdp-description: var(--color-text-sub);
  --color-pdp-member-hover-border: rgba(129, 140, 248, 0.4);
  --color-pdp-member-hover-shadow: rgba(0, 0, 0, 0.3);
  --color-pdp-owner-grad-1: var(--color-bg-elevated-dark);
  --color-pdp-owner-grad-2: rgba(129, 140, 248, 0.12);
  --color-pdp-owner-border: rgba(129, 140, 248, 0.35);
  --color-pdp-member-avatar-bg: rgba(129, 140, 248, 0.16);
  --color-pdp-member-avatar-text: rgb(199, 210, 254);
  --color-pdp-owner-avatar-bg: rgba(129, 140, 248, 0.22);
  --color-pdp-owner-avatar-text: rgb(199, 210, 254);
  --color-pdp-name: var(--color-text-main);
  --color-pdp-role-badge-bg: var(--color-bg-elevated-dark);
  --color-pdp-role-badge-text: var(--color-text-muted);
  --color-pdp-role-owner-bg: rgba(129, 140, 248, 0.18);
  --color-pdp-role-owner-text: rgb(199, 210, 254);
  --color-pdp-role-desc: var(--color-text-muted);
  --color-pdp-btn-border: rgb(51, 65, 85);
  --color-pdp-btn-bg: var(--color-bg-white);
  --color-pdp-btn-text: var(--color-text-sub);
  --color-pdp-btn-hover-bg: var(--color-bg-elevated-dark);
  --color-pdp-btn-hover-border: rgb(71, 85, 105);
  --color-pdp-danger-btn-border: rgba(248, 113, 113, 0.3);
  --color-pdp-danger-btn-bg: rgba(248, 113, 113, 0.1);
  --color-pdp-danger-btn-hover-bg: rgba(248, 113, 113, 0.16);
  --color-pdp-danger-btn-hover-border: rgba(248, 113, 113, 0.4);
  --color-pdp-empty-text: var(--color-text-muted);
  --color-pdp-info-border: rgb(51, 65, 85);
  --color-pdp-info-bg: var(--color-bg-elevated-dark);
  --color-pdp-info-label: var(--color-text-muted);
  --color-pdp-info-value: var(--color-text-main);
  --color-pdp-textarea-border: rgb(51, 65, 85);
  --color-pdp-focus-ring: rgba(167, 139, 250, 0.18);
  --color-pdp-cancel-btn-bg: var(--color-bg-elevated-dark);
  --color-pdp-cancel-btn-text: var(--color-text-muted);
  --color-pdp-reply-border: rgb(51, 65, 85);
  --color-pdp-more-border: rgb(51, 65, 85);
  --color-pdp-more-hover-border: rgb(71, 85, 105);
  --color-pdp-more-shadow: rgba(0, 0, 0, 0.3);
  --color-pdp-more-menu-shadow: rgba(0, 0, 0, 0.4);
  --color-pdp-menu-text: var(--color-text-sub);
  --color-pdp-menu-hover-bg: var(--color-bg-elevated-dark);
  --color-pdp-menu-danger: rgb(248, 113, 113);
  --color-pdp-like: rgb(255, 107, 143);
  --color-pdp-like-bg: rgba(255, 79, 117, 0.14);
  --color-pdp-interest-disabled-bg: var(--color-bg-elevated-dark);
  --color-pdp-interest-disabled-border: rgb(51, 65, 85);
  --color-pdp-interest-disabled-text: var(--color-text-placeholder);
  --color-pdp-comment-highlight-border: rgba(167, 139, 250, 0.4);
  --color-pdp-comment-highlight-bg: rgba(167, 139, 250, 0.1);
  --color-pdp-comment-flash-bg: rgba(167, 139, 250, 0.2);
  --color-pdp-comment-flash-border: rgba(167, 139, 250, 0.5);
  --color-pdp-comment-flash-shadow: rgba(167, 139, 250, 0.25);
}

/* dark.css의 전역 안전망 규칙([class*="-card"]/[class*="-box"]가 배경/
   테두리/글자색을 일괄 지정)이 이름에 "-card"/"-box"가 들어간 클래스를
   전부 잡아버려서, 위에서 지정한 다크 토큰이 무시되고 있었다.
   명시도를 맞춰 재선언한다. */
[data-theme="dark"] .project-detail-card {
  background: var(--color-pdp-card-bg);
  border-color: var(--color-pdp-card-border);
}

[data-theme="dark"] .project-hero-card {
  border-color: var(--color-pdp-hero-border);
}

[data-theme="dark"] .owner-card {
  background: linear-gradient(180deg, var(--color-pdp-owner-grad-1) 0%, var(--color-pdp-owner-grad-2) 100%);
  border-color: var(--color-pdp-owner-border);
}

[data-theme="dark"] .project-comment-edit-box {
  background: transparent;
  border-color: transparent;
}
:root {
  --color-bb-border: rgba(17, 17, 17, 0.09);
  --color-bb-bg: rgba(255, 255, 255, 0.85);
  --color-bb-text: rgb(79, 85, 97);
  --color-bb-hover-shadow: rgba(15, 23, 42, 0.08);
  --color-bb-hover-border: rgba(17, 17, 17, 0.16);
  --color-bb-hover-text: rgb(17, 17, 17);
}

/* ============================= */
/* back button                   */
/* ============================= */

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 14px;
  height: 38px;
  border: 1px solid var(--color-bb-border);
  border-radius: 12px;
  background: var(--color-bb-bg);
  color: var(--color-bb-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.back-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px var(--color-bb-hover-shadow);
  border-color: var(--color-bb-hover-border);
  color: var(--color-bb-hover-text);
}

[data-theme="dark"] {
  --color-bb-border: rgb(51, 65, 85);
  --color-bb-bg: rgba(30, 41, 59, 0.85);
  --color-bb-text: var(--color-text-sub);
  --color-bb-hover-shadow: rgba(0, 0, 0, 0.3);
  --color-bb-hover-border: rgb(71, 85, 105);
  --color-bb-hover-text: var(--color-text-main);
}
:root {
  --color-acm-backdrop: rgba(15, 23, 42, 0.45);
  --color-acm-modal-bg: rgb(255, 255, 255);
  --color-acm-modal-shadow-1: rgba(0, 0, 0, 0.18);
  --color-acm-modal-shadow-2: rgba(0, 0, 0, 0.08);
  --color-acm-close-text: rgb(156, 163, 175);
  --color-acm-close-hover-bg: rgb(243, 244, 246);
  --color-acm-close-hover-text: rgb(17, 24, 39);
  --color-acm-icon-bg: rgb(255, 247, 237);
  --color-acm-icon-text: rgb(245, 158, 11);
  --color-acm-title: rgb(17, 24, 39);
  --color-acm-text: rgb(107, 114, 128);
  --color-acm-profile-btn-bg: rgb(243, 244, 246);
  --color-acm-profile-btn-text: rgb(55, 65, 81);
  --color-acm-profile-btn-hover-bg: rgb(229, 231, 235);
  --color-acm-submit-btn-bg: rgb(17, 24, 39);
  --color-acm-submit-btn-hover-bg: rgb(0, 0, 0);
}

.apply-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: var(--color-acm-backdrop);
  backdrop-filter: blur(6px);
}

.apply-confirm-modal {
  position: relative;

  width: 100%;
  max-width: 420px;
  padding: 34px 28px 26px;

  border-radius: 22px;
  background: var(--color-acm-modal-bg);

  box-shadow:
    0 24px 60px var(--color-acm-modal-shadow-1),
    0 6px 20px var(--color-acm-modal-shadow-2);

  text-align: center;
  animation: applyConfirmFadeIn 0.18s ease;
}

@keyframes applyConfirmFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.apply-confirm-close-button {
  position: absolute;
  top: 14px;
  right: 16px;

  width: 34px;
  height: 34px;
  padding: 0;

  border: none;
  border-radius: 999px;
  background: transparent;

  color: var(--color-acm-close-text);
  font-size: 26px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.apply-confirm-close-button:hover {
  background: var(--color-acm-close-hover-bg);
  color: var(--color-acm-close-hover-text);
}

.apply-confirm-close-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.apply-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;

  border-radius: 999px;
  background: var(--color-acm-icon-bg);
  color: var(--color-acm-icon-text);

  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-confirm-title {
  margin: 0;

  color: var(--color-acm-title);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.03em;
}

.apply-confirm-text {
  margin: 10px 0 0;

  color: var(--color-acm-text);
  font-size: 14px;
  line-height: 1.7;
}

.apply-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}

.apply-confirm-profile-button,
.apply-confirm-submit-button {
  flex: 1;

  min-height: 48px;
  padding: 13px 16px;

  border: none;
  border-radius: 14px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    opacity 0.15s ease;
}

.apply-confirm-profile-button {
  background: var(--color-acm-profile-btn-bg);
  color: var(--color-acm-profile-btn-text);
}

.apply-confirm-profile-button:hover {
  background: var(--color-acm-profile-btn-hover-bg);
}

.apply-confirm-submit-button {
  background: var(--color-acm-submit-btn-bg);
  color: var(--color-text-inverse);
}

.apply-confirm-submit-button:hover {
  background: var(--color-acm-submit-btn-hover-bg);
}

.apply-confirm-profile-button:active,
.apply-confirm-submit-button:active {
  transform: translateY(1px);
}

.apply-confirm-profile-button:disabled,
.apply-confirm-submit-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 480px) {
  .apply-confirm-backdrop {
    padding: 16px;
  }

  .apply-confirm-modal {
    padding: 34px 22px 22px;
    border-radius: 20px;
  }

  .apply-confirm-title {
    font-size: 19px;
  }

  .apply-confirm-actions {
    flex-direction: column;
    gap: 10px;
  }

  .apply-confirm-profile-button,
  .apply-confirm-submit-button {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }
}

[data-theme="dark"] {
  --color-acm-backdrop: rgba(2, 6, 16, 0.65);
  --color-acm-modal-bg: rgb(30, 41, 59);
  --color-acm-modal-shadow-1: rgba(0, 0, 0, 0.4);
  --color-acm-modal-shadow-2: rgba(0, 0, 0, 0.25);
  --color-acm-close-text: var(--color-text-placeholder);
  --color-acm-close-hover-bg: var(--color-bg-elevated-dark);
  --color-acm-close-hover-text: var(--color-text-main);
  --color-acm-icon-bg: rgba(251, 191, 36, 0.14);
  --color-acm-icon-text: rgb(251, 191, 36);
  --color-acm-title: var(--color-text-main);
  --color-acm-text: var(--color-text-muted);
  --color-acm-profile-btn-bg: var(--color-bg-elevated-dark);
  --color-acm-profile-btn-text: var(--color-text-sub);
  --color-acm-profile-btn-hover-bg: rgb(51, 65, 85);
  --color-acm-submit-btn-bg: rgb(129, 140, 248);
  --color-acm-submit-btn-hover-bg: rgb(165, 180, 252);
}

/* dark.css의 전역 안전망 규칙([class*="-modal"]가 배경/테두리/글자색을
   일괄 지정)이 .apply-confirm-modal("-modal" 포함)을 잡아버려서 위 다크
   토큰이 무시되고 있었다. 명시도를 맞춰 재선언한다. */
[data-theme="dark"] .apply-confirm-modal {
  background: var(--color-acm-modal-bg);
  border-color: transparent;
  color: var(--color-acm-title);
}
/* ============================= */
/* edit project page */
/* ============================= */

.edit-project-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.edit-project-page * {
  box-sizing: border-box;
}

.edit-project-container {
  width: 100%;
  min-width: 0;
  padding-top: 4px;
}

.edit-project-form {
  width: 100%;
  min-width: 0;
  margin-top: 22px;
}

/* ============================= */
/* back button */
/* ============================= */

.edit-project-back-button {
  opacity: 0;
  transform: translateY(10px);
  animation: editProjectFadeUp 0.45s ease forwards;
}

/* ============================= */
/* cards */
/* ============================= */

.edit-project-animated-card {
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  animation: editProjectFadeUp 0.52s ease forwards;
}

.edit-project-animated-card:nth-of-type(1) {
  animation-delay: 0.04s;
}

.edit-project-animated-card:nth-of-type(2) {
  animation-delay: 0.1s;
}

.edit-project-animated-card:nth-of-type(3) {
  animation-delay: 0.16s;
}

.edit-project-animated-card:nth-of-type(4) {
  animation-delay: 0.22s;
}

/* ============================= */
/* field */
/* ============================= */

.edit-project-recruitment-field {
  max-width: 220px;
}

/* ============================= */
/* editor */
/* ============================= */

.edit-project-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin-bottom: 16px;
}

.edit-project-editor-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  color: #111111;
  letter-spacing: -0.03em;
}

.edit-project-editor-header p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #70707c;
}

.edit-project-editor-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.edit-project-editor-wrap > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.edit-project-editor-wrap .ProseMirror {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.edit-project-editor-wrap img {
  max-width: 100%;
  height: auto;
}

/* ============================= */
/* checkbox */
/* ============================= */

.edit-project-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #333333;
  cursor: pointer;
  user-select: none;
}

.edit-project-checkbox input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6f42c1;
  cursor: pointer;
}

.edit-project-checkbox span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================= */
/* actions */
/* ============================= */

.edit-project-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.edit-project-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.edit-project-cancel-button {
  background: #f2f3f7;
  color: #333333;
}

.edit-project-cancel-button:hover {
  background: #e9eaf1;
  transform: translateY(-1px);
}

.edit-project-save-button {
  background: #6f42c1;
  color: #ffffff;
}

.edit-project-save-button:hover {
  background: #6338b5;
  transform: translateY(-1px);
}

.edit-project-action-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ============================= */
/* fade item */
/* ============================= */

.edit-project-fade-item {
  opacity: 0;
  transform: translateY(12px);
  animation: editProjectFadeUp 0.45s ease forwards;
  animation-delay: 0.3s;
}

/* ============================= */
/* loading */
/* ============================= */

.edit-project-loading {
  width: 100%;
  min-width: 0;
  margin: 80px 0 0;
  padding: 28px;
  border: 1px solid #ececf3;
  border-radius: 20px;
  background: #ffffff;
  color: #70707c;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ============================= */
/* animation */
/* ============================= */

@keyframes editProjectFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* tablet */
/* ============================= */

@media (max-width: 768px) {
  .edit-project-container {
    padding-top: 0;
  }

  .edit-project-form {
    margin-top: 18px;
  }

  .edit-project-recruitment-field {
    max-width: 100%;
  }

  .edit-project-editor-header {
    flex-direction: column;
    gap: 8px;
  }

  .edit-project-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .edit-project-action-button {
    height: 50px;
    border-radius: 15px;
    font-size: 14px;
  }
}

/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 480px) {
  .edit-project-form {
    margin-top: 16px;
  }

  .edit-project-editor-header h2 {
    font-size: 19px;
  }

  .edit-project-editor-header p {
    font-size: 13px;
  }

  .edit-project-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .edit-project-action-button {
    height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
  }
}:root {
  --color-pwp-page-bg-1: rgb(252, 251, 255);
  --color-pwp-page-bg-2: rgb(247, 245, 255);
  --color-pwp-text: rgb(17, 17, 17);
  --color-pwp-text-muted: rgb(102, 102, 116);
  --color-pwp-text-muted-2: rgb(112, 112, 124);
  --color-pwp-purple-solid: rgb(108, 76, 255);
  --color-pwp-purple-text: rgb(95, 69, 232);
  --color-pwp-label: rgb(77, 77, 89);
  --color-pwp-placeholder: rgb(154, 154, 165);

  --color-pwp-purple-04: rgba(124, 92, 255, 0.04);
  --color-pwp-purple-06: rgba(124, 92, 255, 0.06);
  --color-pwp-purple-08: rgba(124, 92, 255, 0.08);
  --color-pwp-purple-10: rgba(124, 92, 255, 0.1);
  --color-pwp-purple-12: rgba(124, 92, 255, 0.12);
  --color-pwp-purple-14: rgba(124, 92, 255, 0.14);
  --color-pwp-purple-18: rgba(124, 92, 255, 0.18);
  --color-pwp-purple-24: rgba(124, 92, 255, 0.24);
  --color-pwp-purple-28: rgba(124, 92, 255, 0.28);
  --color-pwp-purple-34: rgba(124, 92, 255, 0.34);
  --color-pwp-purple-42: rgba(124, 92, 255, 0.42);

  --color-pwp-shadow-06: rgba(17, 17, 17, 0.06);
  --color-pwp-shadow-07: rgba(17, 17, 17, 0.07);

  --color-pwp-white-86: rgba(255, 255, 255, 0.86);
  --color-pwp-card-bg: rgba(255, 255, 255, 0.96);

  --color-pwp-border-soft: rgb(230, 226, 245);
  --color-pwp-input-border: rgb(229, 229, 239);

  --color-pwp-btn-bg: rgb(250, 249, 254);
  --color-pwp-btn-text: rgb(102, 96, 118);
  --color-pwp-btn-hover-bg: rgb(245, 242, 255);
  --color-pwp-btn-hover-border: rgb(216, 207, 253);
  --color-pwp-btn-hover-text: rgb(99, 71, 235);
  --color-pwp-btn-selected-bg: rgb(239, 233, 255);
  --color-pwp-btn-selected-border: rgb(203, 188, 255);
  --color-pwp-btn-selected-text: rgb(91, 61, 245);

  --color-pwp-notice-bg: rgb(240, 247, 255);
  --color-pwp-notice-text: rgb(37, 99, 235);
  --color-pwp-error-bg: rgb(255, 241, 241);
  --color-pwp-error-text: rgb(225, 75, 75);

  --color-pwp-gradient-1: rgb(124, 92, 255);
  --color-pwp-gradient-2: rgb(108, 78, 245);
}

/* ============================= */
/* project write common layout */
/* ============================= */

.project-write-page {
  min-height: 100vh;
  padding: 44px 20px 80px;
  background:
    radial-gradient(circle at top left, var(--color-pwp-purple-08), transparent 24%),
    radial-gradient(circle at top right, var(--color-pwp-purple-06), transparent 20%),
    linear-gradient(180deg, var(--color-pwp-page-bg-1) 0%, var(--color-pwp-page-bg-2) 18%, var(--color-bg-white) 42%);
  color: var(--color-pwp-text);
}

.project-write-container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.project-write-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--color-pwp-purple-18);
  border-radius: 999px;
  background: var(--color-pwp-white-86);
  color: var(--color-pwp-purple-text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 28px var(--color-pwp-shadow-06);
  backdrop-filter: blur(10px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.project-write-back-button:hover {
  transform: translateY(-1px);
  border-color: var(--color-pwp-purple-34);
  background: var(--color-bg-white);
  box-shadow: 0 16px 34px var(--color-pwp-purple-12);
}

.project-write-header {
  margin-top: 32px;
  margin-bottom: 28px;
}

.project-write-eyebrow {
  margin: 0 0 10px;
  color: var(--color-pwp-purple-solid);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.project-write-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.16;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: var(--color-pwp-text);
}

.project-write-desc {
  max-width: 640px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-pwp-text-muted);
  letter-spacing: -0.01em;
}

.project-write-form {
  display: grid;
  gap: 18px;
}

.project-write-card {
  padding: 26px;
  border-radius: 26px;
  background: var(--color-pwp-card-bg);
  border: 1px solid var(--color-pwp-shadow-06);
  box-shadow:
    0 20px 56px var(--color-pwp-shadow-07),
    0 8px 24px var(--color-pwp-purple-04);
  backdrop-filter: blur(14px);
}

.project-write-card-title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 850;
  color: var(--color-pwp-text);
  letter-spacing: -0.03em;
}

.project-write-card-desc {
  margin: -8px 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-pwp-text-muted-2);
}

.project-write-selected-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.project-write-selected-category span {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-pwp-text-muted-2);
}

.project-write-selected-category strong {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-pwp-purple-10);
  color: var(--color-pwp-purple-solid);
  font-size: 13px;
  font-weight: 850;
}

.project-write-category-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-write-contest-field {
  margin-top: 24px;
}

.project-write-category-button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-pwp-border-soft);
  border-radius: 999px;
  background: var(--color-pwp-btn-bg);
  color: var(--color-pwp-btn-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.project-write-category-button:hover {
  background: var(--color-pwp-btn-hover-bg);
  border-color: var(--color-pwp-btn-hover-border);
  color: var(--color-pwp-btn-hover-text);
}

.project-write-category-button.is-selected {
  background: var(--color-pwp-btn-selected-bg);
  border-color: var(--color-pwp-btn-selected-border);
  color: var(--color-pwp-btn-selected-text);
}

.project-write-field {
  margin-bottom: 18px;
}

.project-write-field:last-child {
  margin-bottom: 0;
}

.project-write-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 850;
  color: var(--color-pwp-label);
  letter-spacing: -0.01em;
}

.project-write-input,
.project-write-textarea {
  width: 100%;
  border: 1px solid var(--color-pwp-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  color: var(--color-pwp-text);
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.project-write-input {
  height: 52px;
  padding: 0 16px;
}

.project-write-textarea {
  min-height: 120px;
  padding: 15px 16px;
  resize: vertical;
  line-height: 1.65;
  font-family: inherit;
}

.project-write-input::placeholder,
.project-write-textarea::placeholder {
  color: var(--color-pwp-placeholder);
}

.project-write-input:focus,
.project-write-textarea:focus {
  border-color: var(--color-pwp-purple-42);
  box-shadow: 0 0 0 4px var(--color-pwp-purple-10);
}

.project-write-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-write-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.project-write-notice {
  margin: 0;
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--color-pwp-notice-bg);
  color: var(--color-pwp-notice-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.project-write-error {
  margin: 0;
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--color-pwp-error-bg);
  color: var(--color-pwp-error-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.project-write-submit-button {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-pwp-gradient-1) 0%, var(--color-pwp-gradient-2) 100%);
  color: var(--color-text-on-brand);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 16px 34px var(--color-pwp-purple-24);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.project-write-submit-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 20px 40px var(--color-pwp-purple-28);
}

.project-write-submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
  box-shadow: 0 10px 20px var(--color-pwp-purple-14);
}

@media (max-width: 768px) {
  .project-write-page {
    padding: 28px 16px 64px;
  }

  .project-write-header {
    margin-top: 28px;
  }

  .project-write-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .project-write-desc {
    font-size: 15px;
  }

  .project-write-card {
    padding: 20px;
    border-radius: 22px;
  }

  .project-write-selected-category {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .project-write-grid-2,
  .project-write-grid-3 {
    grid-template-columns: 1fr;
    /* 한 줄로 접히면 가로 간격은 쓸 일이 없다. 그렇다고 0으로 뭉개면
       칸들이 맞붙어 어디까지가 한 칸인지 알기 어렵다. 세로 간격은 남긴다. */
    column-gap: 0;
    row-gap: 14px;
  }
}

@media (max-width: 480px) {
  .project-write-page {
    padding: 24px 14px 56px;
  }

  .project-write-title {
    font-size: 28px;
  }

  .project-write-card {
    padding: 18px 16px;
  }

  .project-write-input {
    height: 50px;
    border-radius: 15px;
    font-size: 16px;
  }

  .project-write-textarea {
    /* 16px보다 작게 두면 아이폰이 칸을 누를 때 화면을 확대해 버린다.
       글자를 줄이려다 화면이 튀는 쪽이 훨씬 거슬린다. */
    font-size: 16px;
  }

  .project-write-submit-button {
    height: 54px;
    border-radius: 16px;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pwp-page-bg-1: rgb(11, 15, 26);
  --color-pwp-page-bg-2: rgb(15, 23, 42);
  --color-pwp-text: rgb(241, 245, 249);
  --color-pwp-text-muted: rgb(148, 163, 184);
  --color-pwp-text-muted-2: rgb(148, 163, 184);
  --color-pwp-purple-solid: rgb(167, 139, 250);
  --color-pwp-purple-text: rgb(196, 181, 253);
  --color-pwp-label: rgb(203, 213, 225);
  --color-pwp-placeholder: rgb(100, 116, 139);

  --color-pwp-purple-04: rgba(167, 139, 250, 0.06);
  --color-pwp-purple-06: rgba(167, 139, 250, 0.08);
  --color-pwp-purple-08: rgba(167, 139, 250, 0.1);
  --color-pwp-purple-10: rgba(167, 139, 250, 0.14);
  --color-pwp-purple-12: rgba(167, 139, 250, 0.16);
  --color-pwp-purple-14: rgba(167, 139, 250, 0.18);
  --color-pwp-purple-18: rgba(167, 139, 250, 0.24);
  --color-pwp-purple-24: rgba(167, 139, 250, 0.32);
  --color-pwp-purple-28: rgba(167, 139, 250, 0.36);
  --color-pwp-purple-34: rgba(167, 139, 250, 0.4);
  --color-pwp-purple-42: rgba(167, 139, 250, 0.5);

  --color-pwp-shadow-06: rgba(0, 0, 0, 0.3);
  --color-pwp-shadow-07: rgba(0, 0, 0, 0.34);

  --color-pwp-white-86: rgba(30, 41, 59, 0.75);
  --color-pwp-card-bg: rgba(30, 41, 59, 0.92);

  --color-pwp-border-soft: rgb(51, 65, 85);
  --color-pwp-input-border: rgb(51, 65, 85);

  --color-pwp-btn-bg: rgb(30, 41, 59);
  --color-pwp-btn-text: rgb(148, 163, 184);
  --color-pwp-btn-hover-bg: rgb(38, 30, 63);
  --color-pwp-btn-hover-border: rgb(91, 76, 158);
  --color-pwp-btn-hover-text: rgb(196, 181, 253);
  --color-pwp-btn-selected-bg: rgb(49, 46, 129);
  --color-pwp-btn-selected-border: rgb(99, 102, 241);
  --color-pwp-btn-selected-text: rgb(196, 181, 253);

  --color-pwp-notice-bg: rgb(30, 45, 74);
  --color-pwp-notice-text: rgb(96, 165, 250);
  --color-pwp-error-bg: rgb(45, 20, 32);
  --color-pwp-error-text: rgb(248, 113, 113);

  --color-pwp-gradient-1: rgb(124, 92, 255);
  --color-pwp-gradient-2: rgb(108, 78, 245);
}
:root {
  --color-rte-border: rgb(229, 229, 239);
  --color-rte-bg: rgb(255, 255, 255);
  --color-rte-toolbar-border: rgb(238, 238, 238);
  --color-rte-toolbar-bg: rgb(250, 250, 250);
  --color-rte-divider: rgb(221, 221, 221);
  --color-rte-btn-hover-bg: rgb(240, 240, 255);
  --color-rte-btn-active-bg: rgb(230, 224, 255);
  --color-rte-btn-active-text: rgb(91, 61, 245);
  --color-rte-blockquote-border: rgb(203, 188, 255);
  --color-rte-blockquote-text: rgb(85, 85, 85);
  --color-rte-image-outline: rgb(123, 97, 255);
  --color-rte-handle-border: rgb(255, 255, 255);
  --color-rte-handle-bg: rgb(111, 85, 255);
  --color-rte-handle-shadow: rgba(70, 55, 180, 0.25);
  --color-rte-handle-hover-bg: rgb(91, 61, 245);
  --color-rte-resize-border: rgb(238, 238, 255);
  --color-rte-resize-grad-1: rgb(255, 255, 255);
  --color-rte-resize-grad-2: rgb(250, 250, 255);
  --color-rte-resize-grip: rgb(215, 211, 248);
  --color-rte-resize-hover-bg: rgb(244, 241, 255);
  --color-rte-status-text: rgb(91, 61, 245);
  --color-rte-error-text: rgb(255, 0, 0);
  --color-rte-placeholder: rgb(160, 160, 173);
  --color-rte-text: rgb(17, 24, 39);
}

.rich-editor {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-rte-border);
  border-radius: 14px;
  background: var(--color-rte-bg);
  overflow: hidden;
}

.rich-editor *,
.rich-editor *::before,
.rich-editor *::after {
  box-sizing: border-box;
}

.rich-editor.is-disabled {
  opacity: 0.6;
}

.rich-editor-toolbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--color-rte-toolbar-border);
  background: var(--color-rte-toolbar-bg);
  overflow-x: hidden;
}

.toolbar-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--color-rte-divider);
}

.toolbar-spacer {
  flex: 1;
  min-width: 0;
}

.rich-editor-toolbar button,
.image-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-rte-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rich-editor-toolbar button:hover,
.image-button:hover {
  background: var(--color-rte-btn-hover-bg);
}

.rich-editor-toolbar button.is-active {
  background: var(--color-rte-btn-active-bg);
  color: var(--color-rte-btn-active-text);
}

.image-button input {
  display: none;
}

.rich-editor-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--color-rte-bg);
  position: relative;
  overflow: hidden;
}

.rich-editor-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 16px;
  min-height: 420px;
  max-height: 900px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-rte-text);
  overflow: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rich-editor-content:focus {
  outline: none;
}

.rich-editor-content p {
  margin: 0 0 6px;
}

.rich-editor-content p:empty::before {
  content: "\00a0";
}

.rich-editor-content h2 {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rich-editor-content ul {
  list-style: disc;
  padding-left: 22px;
}

.rich-editor-content ol {
  list-style: decimal;
  padding-left: 22px;
}

.rich-editor-content li {
  margin: 4px 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rich-editor-content blockquote {
  max-width: 100%;
  border-left: 4px solid var(--color-rte-blockquote-border);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--color-rte-blockquote-text);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rich-editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.resizable-image-node {
  display: inline-block;
  max-width: 100%;
  margin: 12px 0;
  line-height: 0;
  vertical-align: top;
}

.resizable-image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;
  line-height: 0;
}

.resizable-image-wrap img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.resizable-image-node.is-selected .resizable-image-wrap {
  outline: 2px solid var(--color-rte-image-outline);
  outline-offset: 3px;
  border-radius: 12px;
}

.resizable-image-handle {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-rte-handle-border);
  border-radius: 999px;
  background: var(--color-rte-handle-bg);
  box-shadow: 0 4px 10px var(--color-rte-handle-shadow);
  cursor: nwse-resize;
  z-index: 5;
}

.resizable-image-handle:hover {
  background: var(--color-rte-handle-hover-bg);
}

.rich-image-resizing,
.rich-image-resizing * {
  cursor: nwse-resize !important;
  user-select: none !important;
}

.rich-editor-resize-handle {
  height: 14px;
  border-top: 1px solid var(--color-rte-resize-border);
  background: linear-gradient(to bottom, var(--color-rte-resize-grad-1), var(--color-rte-resize-grad-2));
  cursor: ns-resize;
  position: relative;
}

.rich-editor-resize-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-rte-resize-grip);
  transform: translateX(-50%);
}

.rich-editor-resize-handle:hover {
  background: var(--color-rte-resize-hover-bg);
}

.rich-editor-resizing,
.rich-editor-resizing * {
  cursor: ns-resize !important;
  user-select: none !important;
}

.editor-status {
  padding: 8px;
  font-size: 13px;
  color: var(--color-rte-status-text);
}

.editor-error {
  padding: 8px;
  font-size: 13px;
  color: var(--color-rte-error-text);
}

.rich-editor-content .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  color: var(--color-rte-placeholder);
  pointer-events: none;
}

.rich-editor-content h2.is-editor-empty::before {
  content: none !important;
}

@media (max-width: 768px) {
  .rich-editor {
    border-radius: 13px;
  }

  .rich-editor-toolbar {
    gap: 6px;
    padding: 7px;
  }

  .toolbar-group {
    gap: 3px;
  }

  .toolbar-divider {
    display: none;
  }

  .toolbar-spacer {
    display: none;
  }

  .rich-editor-toolbar button,
  .image-button {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .rich-editor-content {
    padding: 14px;
    min-height: 360px;
    font-size: 16px;
  }

  .resizable-image-handle {
    right: -6px;
    bottom: -6px;
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  .rich-editor-toolbar {
    padding: 6px;
    gap: 5px;
  }

  .rich-editor-toolbar button,
  .image-button {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .rich-editor-content {
    padding: 12px;
    min-height: 320px;
    font-size: 16px;
  }

  .rich-editor-content ul,
  .rich-editor-content ol {
    padding-left: 20px;
  }

  .rich-editor-resize-handle::before {
    width: 38px;
  }
}

[data-theme="dark"] {
  --color-rte-border: rgb(51, 65, 85);
  --color-rte-bg: rgb(30, 41, 59);
  --color-rte-toolbar-border: rgb(51, 65, 85);
  --color-rte-toolbar-bg: rgb(15, 23, 42);
  --color-rte-divider: rgb(71, 85, 105);
  --color-rte-btn-hover-bg: rgba(129, 140, 248, 0.16);
  --color-rte-btn-active-bg: rgba(129, 140, 248, 0.22);
  --color-rte-btn-active-text: rgb(165, 180, 252);
  --color-rte-blockquote-border: rgb(99, 102, 241);
  --color-rte-blockquote-text: var(--color-text-muted);
  --color-rte-image-outline: rgb(129, 140, 248);
  --color-rte-handle-border: rgb(30, 41, 59);
  --color-rte-handle-bg: rgb(129, 140, 248);
  --color-rte-handle-shadow: rgba(0, 0, 0, 0.4);
  --color-rte-handle-hover-bg: rgb(165, 180, 252);
  --color-rte-resize-border: rgb(51, 65, 85);
  --color-rte-resize-grad-1: rgb(30, 41, 59);
  --color-rte-resize-grad-2: rgb(15, 23, 42);
  --color-rte-resize-grip: rgb(71, 85, 105);
  --color-rte-resize-hover-bg: rgba(129, 140, 248, 0.14);
  --color-rte-status-text: rgb(165, 180, 252);
  --color-rte-error-text: rgb(248, 113, 113);
  --color-rte-placeholder: var(--color-text-placeholder);
  --color-rte-text: var(--color-text-main);
}
:root {
  --color-mpp-moved-border: rgb(223, 230, 255);
  --color-mpp-moved-bg: rgb(251, 252, 255);
  --color-mpp-moved-hover-border: rgb(200, 212, 255);
  --color-mpp-moved-hover-bg: rgb(248, 250, 255);
}

.my-projects-page {
  width: 100%;
  min-height: 100vh;
  padding: 30px 20px 88px;
  background: var(--color-accent-soft);
  color: var(--color-text-main);
}

.my-projects-page * {
  box-sizing: border-box;
}

.my-projects-page button {
  font-family: inherit;
}

.my-projects-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.my-projects-loading-card,
.my-projects-header-card,
.my-projects-empty,
.my-project-card {
  border: 1px solid var(--color-accent-soft-hover);
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-shadow-base);
}

.my-projects-loading-card {
  min-height: 320px;
  padding: 48px 20px;
  border-radius: 24px;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-projects-loading-card.is-error {
  color: var(--color-danger);
}

.my-projects-header-card {
  padding: 22px;
  border-radius: 24px;
  margin-bottom: 18px;
}

.my-projects-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.my-projects-title {
  margin: 0;
  color: var(--color-text-main);
  font-size: 36px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.my-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.my-project-card {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background 0.2s ease;
}

.my-project-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand-soft-hover);
  background: var(--color-bg-white);
  box-shadow: 0 16px 36px var(--color-shadow-strong);
}

.my-project-card:focus {
  outline: none;
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 0 0 4px var(--color-brand-focus-ring);
}

.my-project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.my-project-badges {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.my-project-category,
.my-project-status {
  height: 25px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.my-project-category {
  color: var(--color-brand-deep);
  background: var(--color-brand-soft);
}

.my-project-status.open {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.my-project-status.closed {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}

.my-project-status.deleted {
  color: var(--color-danger-strong);
  background: var(--color-danger-soft);
}

.my-project-status.default {
  color: var(--color-text-muted);
  background: var(--color-accent-soft);
}

.my-project-status.moved {
  color: var(--color-brand-strong);
  background: var(--color-brand-soft);
}

.my-project-interest {
  flex: 0 0 auto;
  height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-like);
  font-size: 13px;
  font-weight: 900;
}

.my-project-card-title {
  margin: 13px 0 0;
  color: var(--color-text-main);
  font-size: 21px;
  line-height: 1.42;
  font-weight: 950;
  letter-spacing: -0.045em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-project-card-summary {
  margin: 8px 0 0;
  min-height: 48px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-project-card-summary.empty {
  color: var(--color-text-placeholder);
}

.my-project-meta-list {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.my-project-meta-chip {
  min-height: 29px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.my-project-card-footer {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.my-project-owner {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-project-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.my-project-card:hover .my-project-arrow {
  transform: translateX(3px);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.my-projects-empty {
  min-height: 260px;
  padding: 48px 20px;
  border-radius: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.my-projects-empty strong {
  color: var(--color-text-main);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.my-projects-empty p {
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 750;
}

.my-projects-empty-btn {
  height: 46px;
  margin-top: 22px;
  padding: 0 17px;
  border: none;
  border-radius: 15px;
  background: var(--color-text-main);
  color: var(--color-text-inverse);
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.my-projects-floating-write {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 56px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow:
    0 10px 30px var(--color-brand-glow-fab),
    0 2px 8px var(--color-shadow-strong);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.my-projects-floating-write:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px var(--color-brand-glow-fab-hover),
    0 6px 18px var(--color-shadow-strong);
}

.my-project-card.is-moved-small-group {
  border-color: var(--color-mpp-moved-border);
  background: var(--color-mpp-moved-bg);
}

.my-project-card.is-moved-small-group:hover {
  border-color: var(--color-mpp-moved-hover-border);
  background: var(--color-mpp-moved-hover-bg);
}

@media (max-width: 1024px) {
  .my-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-projects-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .my-projects-page {
    padding: 14px 14px calc(
      var(--mobile-bottom-nav-height, 68px) + 96px + env(safe-area-inset-bottom)
    );
  }

  .my-projects-loading-card,
  .my-projects-header-card,
  .my-projects-empty,
  .my-project-card {
    box-shadow: none;
  }

  .my-projects-header-card {
    padding: 16px;
    border-radius: 22px;
  }

  .my-projects-title {
    font-size: 30px;
  }

  .my-projects-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .my-project-card {
    padding: 16px;
    border-radius: 20px;
  }

  .my-project-card:hover {
    transform: none;
    box-shadow: none;
  }

  .my-project-card-title {
    font-size: 19px;
  }

  .my-project-card-summary {
    min-height: auto;
    font-size: 14px;
  }

  .my-projects-empty {
    padding: 42px 18px;
    border-radius: 22px;
  }

  .my-projects-empty strong {
    font-size: 19px;
  }

  .my-projects-floating-write {
    right: 16px;
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 18px;
    justify-content: center;
  }

  .my-projects-floating-write span {
    display: none;
  }
}

@media (max-width: 420px) {
  .my-projects-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .my-projects-header-card,
  .my-project-card,
  .my-projects-empty {
    padding: 15px;
  }

  .my-projects-title {
    font-size: 28px;
  }
}

/* ================================================
   DARK MODE — 와일드카드([class*="-card"] 등) 우선순위 보정
   MyStudiesPage.css와 동일한 패턴 - 전역 다크 와일드카드가
   `-card`로 끝나는 클래스의 background/border-color/color를
   일괄로 덮어써서, 의도한 값이 반영되지 않는 지점만 재선언한다.
   ================================================ */

[data-theme="dark"] .my-projects-loading-card {
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-projects-loading-card.is-error {
  color: var(--color-danger);
}

[data-theme="dark"] .my-project-card:hover {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .my-project-card:focus {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .my-project-card-summary {
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-project-card-summary.empty {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .my-project-card:hover .my-project-arrow {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

[data-theme="dark"] .my-project-card.is-moved-small-group {
  border-color: var(--color-mpp-moved-hover-border);
  background: var(--color-mpp-moved-bg);
}

[data-theme="dark"] .my-project-card.is-moved-small-group:hover {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-mpp-moved-hover-bg);
}

[data-theme="dark"] {
  --color-mpp-moved-border: rgba(129, 140, 248, 0.3);
  --color-mpp-moved-bg: rgba(129, 140, 248, 0.08);
  --color-mpp-moved-hover-border: rgba(129, 140, 248, 0.5);
  --color-mpp-moved-hover-bg: rgba(129, 140, 248, 0.14);
}
:root {
  --color-pnp-page-bg-1: rgb(252, 251, 255);
  --color-pnp-page-bg-2: rgb(247, 245, 255);
  --color-pnp-text: rgb(17, 17, 17);
  --color-pnp-label: rgb(23, 23, 23);
  --color-pnp-text-muted: rgb(95, 95, 107);
  --color-pnp-text-muted-2: rgb(102, 102, 116);
  --color-pnp-purple-solid: rgb(108, 76, 255);
  --color-pnp-purple-text: rgb(95, 69, 232);
  --color-pnp-lavender-solid: rgb(238, 232, 255);

  --color-pnp-purple-04: rgba(124, 92, 255, 0.04);
  --color-pnp-purple-06: rgba(124, 92, 255, 0.06);
  --color-pnp-purple-08: rgba(124, 92, 255, 0.08);
  --color-pnp-purple-10: rgba(124, 92, 255, 0.1);
  --color-pnp-purple-12: rgba(124, 92, 255, 0.12);
  --color-pnp-purple-15: rgba(124, 92, 255, 0.15);
  --color-pnp-purple-18: rgba(124, 92, 255, 0.18);
  --color-pnp-purple-26: rgba(124, 92, 255, 0.26);
  --color-pnp-purple-30: rgba(124, 92, 255, 0.3);
  --color-pnp-purple-34: rgba(124, 92, 255, 0.34);
  --color-pnp-purple-38: rgba(124, 92, 255, 0.38);
  --color-pnp-purple-60: rgba(124, 92, 255, 0.6);

  --color-pnp-shadow-06: rgba(17, 17, 17, 0.06);
  --color-pnp-shadow-07: rgba(17, 17, 17, 0.07);
  --color-pnp-shadow-08: rgba(17, 17, 17, 0.08);
  --color-pnp-shadow-09: rgba(17, 17, 17, 0.09);

  --color-pnp-white-78: rgba(255, 255, 255, 0.78);
  --color-pnp-white-82: rgba(255, 255, 255, 0.82);
  --color-pnp-white-94: rgba(255, 255, 255, 0.94);
  --color-pnp-white-95: rgba(255, 255, 255, 0.95);
  --color-pnp-white-98: rgba(255, 255, 255, 0.98);

  --color-pnp-lavender-90: rgba(246, 243, 255, 0.9);
  --color-pnp-lavender2-95: rgba(239, 234, 255, 0.95);
}

/* ============================= */
/* page */
/* ============================= */

.project-new-page {
  min-height: 100vh;
  padding: 56px 20px 80px;
  background:
    radial-gradient(circle at top left, var(--color-pnp-purple-08), transparent 24%),
    radial-gradient(circle at top right, var(--color-pnp-purple-06), transparent 20%),
    linear-gradient(180deg, var(--color-pnp-page-bg-1) 0%, var(--color-pnp-page-bg-2) 18%, var(--color-bg-white) 42%);
  color: var(--color-pnp-text);
}

/* ============================= */
/* select layout */
/* ============================= */

.project-new-select-layout {
  width: 100%;
  max-width: 1120px;
  min-height: calc(100vh - 136px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-step-panel {
  width: 100%;
  animation: projectStepFadeUp 0.48s ease both;
}

.project-new-title {
  margin: 0 0 16px;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-pnp-text);
}

.project-new-desc {
  max-width: 600px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-pnp-text-muted);
  letter-spacing: -0.01em;
}

/* ============================= */
/* category step */
/* ============================= */

.project-category-list {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.project-category-circle {
  width: 132px;
  height: 132px;
  border: 1px solid var(--color-pnp-purple-15);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, var(--color-pnp-white-98), var(--color-pnp-white-78)),
    linear-gradient(145deg, var(--color-pnp-white-95), var(--color-pnp-lavender-90));
  box-shadow:
    0 20px 45px var(--color-pnp-shadow-08),
    inset 0 1px 0 var(--color-pnp-white-95);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-24px) scale(0.94);
  animation: categoryCircleIn 0.55s ease forwards;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.project-category-circle:hover {
  transform: translateY(-8px) scale(1.04);
  border-color: var(--color-pnp-purple-38);
  box-shadow:
    0 28px 62px var(--color-pnp-purple-18),
    0 18px 42px var(--color-pnp-shadow-08);
}

.project-category-circle.is-selected {
  border-color: var(--color-pnp-purple-60);
  background:
    radial-gradient(circle at 30% 20%, var(--color-pnp-white-98), var(--color-pnp-lavender2-95)),
    linear-gradient(145deg, var(--color-bg-white), var(--color-pnp-lavender-solid));
  box-shadow:
    0 30px 70px var(--color-pnp-purple-26),
    inset 0 0 0 1px var(--color-pnp-purple-12);
}

.project-category-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: var(--color-pnp-purple-10);
  color: var(--color-pnp-purple-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.project-category-circle:hover .project-category-icon,
.project-category-circle.is-selected .project-category-icon {
  background: var(--color-pnp-purple-solid);
  color: var(--color-text-on-brand);
}

.project-category-circle strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-pnp-label);
  letter-spacing: -0.02em;
}

/* ============================= */
/* mode step */
/* ============================= */

.project-back-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  margin-bottom: 24px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--color-pnp-purple-18);
  border-radius: 999px;
  background: var(--color-pnp-white-82);
  color: var(--color-pnp-purple-text);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 28px var(--color-pnp-shadow-06);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.project-back-button:hover {
  transform: translateY(-1px);
  border-color: var(--color-pnp-purple-34);
  background: var(--color-bg-white);
  box-shadow: 0 16px 34px var(--color-pnp-purple-12);
}

.project-back-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--color-pnp-purple-10);
  color: var(--color-pnp-purple-solid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-mode-grid {
  width: 100%;
  max-width: 1080px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.project-mode-card {
  width: 100%;
  min-height: 188px;
  padding: 26px 24px;
  border: 1px solid var(--color-pnp-shadow-08);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, var(--color-pnp-purple-08), transparent 34%),
    var(--color-pnp-white-94);
  box-shadow:
    0 18px 48px var(--color-pnp-shadow-07),
    0 8px 24px var(--color-pnp-purple-04);
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
  animation: modeCardIn 0.5s ease forwards;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.project-mode-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-pnp-purple-30);
  box-shadow:
    0 24px 56px var(--color-pnp-shadow-09),
    0 10px 28px var(--color-pnp-purple-10);
}

.project-mode-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-pnp-purple-10);
  color: var(--color-pnp-purple-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex: 0 0 auto;
}

.project-mode-card-content {
  display: block;
}

.project-mode-card-content strong {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-pnp-text);
  letter-spacing: -0.02em;
}

.project-mode-card-content span {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-pnp-text-muted-2);
  letter-spacing: -0.01em;
}


/* ============================= */
/* animations */
/* ============================= */

@keyframes projectStepFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes categoryCircleIn {
  from {
    opacity: 0;
    transform: translateX(-24px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes modeCardIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* tablet */
/* ============================= */

@media (max-width: 1024px) {
  .project-new-page {
    padding: 44px 20px 72px;
  }

  .project-new-select-layout {
    min-height: calc(100vh - 116px);
  }

  .project-new-title {
    font-size: 40px;
  }

  .project-mode-grid {
    max-width: 720px;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .project-mode-card {
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .project-mode-card-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  .project-mode-card-content strong {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .project-mode-card-content span {
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 768px) {
  .project-new-page {
    padding: 32px 16px 64px;
  }

  .project-new-select-layout {
    min-height: calc(100vh - 96px);
  }

  .project-new-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .project-new-desc {
    font-size: 15px;
    line-height: 1.65;
  }

  .project-category-list {
    margin-top: 34px;
    gap: 14px;
  }

  .project-category-circle {
    width: 112px;
    height: 112px;
  }

  .project-category-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 20px;
  }

  .project-category-circle strong {
    font-size: 14px;
  }

  .project-mode-grid {
    margin-top: 30px;
  }

  .project-back-button {
    margin-bottom: 20px;
  }
}

/* ============================= */
/* small mobile */
/* ============================= */

@media (max-width: 480px) {
  .project-new-title {
    font-size: 28px;
  }

  .project-category-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-category-circle {
    width: 100%;
    height: 108px;
    border-radius: 26px;
  }

  .project-mode-card {
    padding: 16px;
    border-radius: 18px;
    gap: 13px;
  }

  .project-mode-card-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 14px;
    font-size: 20px;
  }

  .project-mode-card-content strong {
    font-size: 17px;
  }

  .project-mode-card-content span {
    font-size: 13px;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pnp-page-bg-1: rgb(11, 15, 26);
  --color-pnp-page-bg-2: rgb(15, 23, 42);
  --color-pnp-text: rgb(241, 245, 249);
  --color-pnp-label: rgb(241, 245, 249);
  --color-pnp-text-muted: rgb(148, 163, 184);
  --color-pnp-text-muted-2: rgb(148, 163, 184);
  --color-pnp-purple-solid: rgb(167, 139, 250);
  --color-pnp-purple-text: rgb(196, 181, 253);
  --color-pnp-lavender-solid: rgb(30, 27, 75);

  --color-pnp-purple-04: rgba(167, 139, 250, 0.06);
  --color-pnp-purple-06: rgba(167, 139, 250, 0.08);
  --color-pnp-purple-08: rgba(167, 139, 250, 0.1);
  --color-pnp-purple-10: rgba(167, 139, 250, 0.14);
  --color-pnp-purple-12: rgba(167, 139, 250, 0.16);
  --color-pnp-purple-15: rgba(167, 139, 250, 0.2);
  --color-pnp-purple-18: rgba(167, 139, 250, 0.24);
  --color-pnp-purple-26: rgba(167, 139, 250, 0.3);
  --color-pnp-purple-30: rgba(167, 139, 250, 0.34);
  --color-pnp-purple-34: rgba(167, 139, 250, 0.4);
  --color-pnp-purple-38: rgba(167, 139, 250, 0.45);
  --color-pnp-purple-60: rgba(167, 139, 250, 0.7);

  --color-pnp-shadow-06: rgba(0, 0, 0, 0.28);
  --color-pnp-shadow-07: rgba(0, 0, 0, 0.32);
  --color-pnp-shadow-08: rgba(0, 0, 0, 0.36);
  --color-pnp-shadow-09: rgba(0, 0, 0, 0.4);

  --color-pnp-white-78: rgba(30, 41, 59, 0.55);
  --color-pnp-white-82: rgba(30, 41, 59, 0.7);
  --color-pnp-white-94: rgba(30, 41, 59, 0.9);
  --color-pnp-white-95: rgba(51, 65, 85, 0.5);
  --color-pnp-white-98: rgba(30, 41, 59, 0.96);

  --color-pnp-lavender-90: rgba(30, 27, 75, 0.45);
  --color-pnp-lavender2-95: rgba(49, 46, 129, 0.55);
}
:root {
  --color-ptn-dashed-border: rgb(216, 207, 253);
  --color-ptn-muted-text: rgb(138, 133, 151);
  --color-ptn-add-text: rgb(95, 67, 217);
  --color-ptn-add-hover-border: rgb(200, 187, 255);
  --color-ptn-remove-border: rgb(236, 236, 243);
  --color-ptn-remove-hover-bg: rgb(255, 245, 245);
  --color-ptn-remove-hover-border: rgb(255, 214, 214);
  --color-ptn-remove-hover-text: rgb(229, 72, 72);
}

/* ============================= */
/* template only */
/* ============================= */

.project-template-preview-card pre {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--color-pwp-btn-bg);
  border: 1px solid var(--color-pwp-border-soft);
  color: var(--color-pwp-text);
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: keep-all;
  font-family: inherit;
}

.project-template-preview-card p {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--color-pwp-btn-bg);
  border: 1px dashed var(--color-ptn-dashed-border);
  color: var(--color-ptn-muted-text);
  font-size: 14px;
  line-height: 1.6;
}

.project-write-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.project-write-card-header-row .project-write-card-title {
  margin-bottom: 0;
}

.project-write-add-button {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--color-ptn-dashed-border);
  border-radius: 999px;
  background: var(--color-pwp-btn-bg);
  color: var(--color-ptn-add-text);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.project-write-add-button:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-ptn-add-hover-border);
}

.project-template-role-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-template-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: end;
  gap: 12px;
}

.project-write-remove-button {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-ptn-remove-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-ptn-muted-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.project-write-remove-button:hover:not(:disabled) {
  background: var(--color-ptn-remove-hover-bg);
  border-color: var(--color-ptn-remove-hover-border);
  color: var(--color-ptn-remove-hover-text);
}

.project-write-remove-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .project-write-card-header-row {
    flex-direction: column;
    align-items: stretch;
  }

  .project-write-add-button {
    width: 100%;
  }

  .project-template-role-row {
    grid-template-columns: 1fr;
  }

  .project-write-remove-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .project-template-preview-card pre,
  .project-template-preview-card p {
    padding: 15px;
    font-size: 13px;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-ptn-dashed-border: rgb(91, 76, 158);
  --color-ptn-muted-text: rgb(148, 163, 184);
  --color-ptn-add-text: rgb(196, 181, 253);
  --color-ptn-add-hover-border: rgb(129, 108, 209);
  --color-ptn-remove-border: rgb(51, 65, 85);
  --color-ptn-remove-hover-bg: rgb(45, 20, 32);
  --color-ptn-remove-hover-border: rgb(127, 29, 29);
  --color-ptn-remove-hover-text: rgb(248, 113, 113);
}
/* ============================= */
/* manual only */
/* ============================= */

.project-manual-container {
  padding-top: 4px;
}

.project-manual-back-button {
  opacity: 0;
  transform: translateY(10px);
  animation: projectManualFadeUp 0.45s ease forwards;
}

.project-manual-form {
  margin-top: 22px;
}

.project-manual-animated-card {
  opacity: 0;
  transform: translateY(18px);
  animation: projectManualFadeUp 0.52s ease forwards;
}

.project-manual-fade-item {
  opacity: 0;
  transform: translateY(12px);
  animation: projectManualFadeUp 0.45s ease forwards;
  animation-delay: 0.3s;
}

.project-manual-submit-button {
  opacity: 0;
  transform: translateY(14px);
  animation: projectManualFadeUp 0.48s ease forwards;
  animation-delay: 0.34s;
}

.project-manual-recruitment-field {
  max-width: 220px;
}

.project-manual-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.project-manual-editor-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  color: #111111;
  letter-spacing: -0.03em;
}

.project-manual-editor-header p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #70707c;
}

/* ============================= */
/* animations */
/* ============================= */

@keyframes projectManualFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* tablet */
/* ============================= */

@media (max-width: 768px) {
  .project-manual-container {
    padding-top: 0;
  }

  .project-manual-form {
    margin-top: 18px;
  }

  .project-manual-recruitment-field {
    max-width: 100%;
  }

  .project-manual-editor-header {
    flex-direction: column;
  }
}

/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 480px) {
  .project-manual-form {
    margin-top: 16px;
  }
}:root {
  --color-pjai-card-bg: rgba(255, 255, 255, 0.96);
  --color-pjai-shadow-06: rgba(17, 17, 17, 0.06);
  --color-pjai-shadow-08: rgba(17, 17, 17, 0.08);
  --color-pjai-purple-06: rgba(124, 92, 255, 0.06);
  --color-pjai-purple-10: rgba(124, 92, 255, 0.1);
  --color-pjai-purple-22: rgba(124, 92, 255, 0.22);
  --color-pjai-purple-26: rgba(124, 92, 255, 0.26);
  --color-pjai-border: rgb(238, 240, 248);
  --color-pjai-border-soft: rgb(230, 226, 245);
  --color-pjai-purple-solid: rgb(108, 76, 255);
  --color-pjai-purple-hover-bg: rgb(245, 242, 255);
  --color-pjai-purple-hover-border: rgb(203, 188, 255);
  --color-pjai-purple-hover-text: rgb(91, 61, 245);
  --color-pjai-text: rgb(17, 17, 17);
  --color-pjai-text-muted: rgb(139, 149, 173);
  --color-pjai-text-muted-2: rgb(132, 144, 170);
  --color-pjai-heading: rgb(15, 23, 42);
  --color-pjai-soft-bg: rgb(248, 250, 255);
  --color-pjai-soft-border: rgb(220, 229, 255);
  --color-pjai-feature-text: rgb(82, 120, 245);
  --color-pjai-gradient-1: rgb(124, 92, 255);
  --color-pjai-gradient-2: rgb(108, 78, 245);
  --color-pjai-scrollbar-thumb: rgb(216, 222, 245);
  --color-pjai-avatar-bg: rgb(244, 247, 255);
  --color-pjai-loading-text: rgb(100, 116, 139);
  --color-pjai-placeholder: rgb(154, 163, 184);
  --color-pjai-disabled-bg: rgb(199, 210, 254);
}

/* ============================= */
/* ai page */
/* ============================= */

.project-ai-page {
  padding-top: 36px;
  padding-bottom: 48px;
}

.project-ai-container {
  max-width: 640px;
}

.project-ai-form-wrap {
  width: 100%;
  margin-top: 0;
  display: flex;
  justify-content: center;
}


/* ============================= */
/* ai chat card */
/* ============================= */

.project-ai-chat-card {
  width: 100%;
  max-width: 540px;
  height: min(620px, calc(100vh - 120px));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: var(--color-pjai-card-bg);
  border: 1px solid var(--color-pjai-shadow-06);
  box-shadow:
    0 24px 64px var(--color-pjai-shadow-08),
    0 8px 24px var(--color-pjai-purple-06);
  backdrop-filter: blur(14px);
}


/* ============================= */
/* header */
/* ============================= */

.project-ai-chat-header {
  min-height: 70px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--color-pjai-border);
  flex-shrink: 0;
}

.project-ai-back-inline {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid var(--color-pjai-border-soft);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-pjai-purple-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.project-ai-back-inline:hover {
  transform: translateX(-1px);
  background: var(--color-pjai-purple-hover-bg);
  border-color: var(--color-pjai-purple-hover-border);
  color: var(--color-pjai-purple-hover-text);
}

.project-ai-chat-title-box {
  min-width: 0;
  flex: 1;
}

.project-ai-chat-title-box h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  color: var(--color-pjai-text);
  letter-spacing: -0.03em;
}

.project-ai-chat-title-box p {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-pjai-text-muted);
}

.project-ai-step-badge {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--color-pjai-purple-10);
  color: var(--color-pjai-purple-solid);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}

.project-ai-progress-bar {
  height: 4px;
  width: 18%;
  background: linear-gradient(135deg, var(--color-pjai-gradient-1) 0%, var(--color-pjai-gradient-2) 100%);
  flex-shrink: 0;
}


/* ============================= */
/* body */
/* ============================= */

.project-ai-chat-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 18px 22px;
  display: flex;
}

.project-ai-intro,
.project-ai-chat-content {
  width: 100%;
}


/* ============================= */
/* intro */
/* ============================= */

.project-ai-intro {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 4px 10px;
}

.project-ai-sparkle {
  margin-bottom: 14px;
  font-size: 30px;
}

.project-ai-intro h3 {
  margin: 0;
  font-size: 25px;
  line-height: 1.28;
  font-weight: 850;
  color: var(--color-pjai-heading);
  letter-spacing: -0.04em;
}

.project-ai-intro > p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-pjai-text-muted-2);
  letter-spacing: -0.02em;
}

.project-ai-feature-list {
  width: 100%;
  max-width: 340px;
  margin: 20px auto 0;
  display: grid;
  gap: 8px;
}

.project-ai-feature-item {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--color-pjai-soft-bg);
  border: 1px solid var(--color-pjai-soft-border);
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}

.project-ai-feature-item span {
  font-size: 16px;
}

.project-ai-feature-item strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-pjai-feature-text);
  letter-spacing: -0.02em;
}

.project-ai-primary-btn {
  width: auto;
  min-width: 170px;
  height: 46px;
  margin-top: 22px;
  padding: 0 28px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--color-pjai-gradient-1) 0%, var(--color-pjai-gradient-2) 100%);
  color: var(--color-text-on-brand);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  box-shadow: 0 14px 28px var(--color-pjai-purple-22);
}

.project-ai-primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 18px 34px var(--color-pjai-purple-26);
}

.project-ai-primary-btn:active {
  transform: translateY(0);
}


/* ============================= */
/* chat content */
/* ============================= */

.project-ai-chat-content {
  height: 100%;
  overflow-y: auto;
  padding: 6px 2px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-ai-chat-content::before {
  content: "";
  margin-top: auto;
}

.project-ai-chat-content::-webkit-scrollbar {
  width: 6px;
}

.project-ai-chat-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-pjai-scrollbar-thumb);
}


/* ============================= */
/* chat message */
/* ============================= */

.project-ai-message-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.project-ai-message-row-user {
  justify-content: flex-end;
}
.project-ai-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--color-pjai-avatar-bg);
  border: 1px solid var(--color-pjai-soft-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.project-ai-avatar img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.project-ai-message-bubble {
  max-width: 390px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--color-pjai-soft-bg);
  border: 1px solid var(--color-pjai-soft-border);
  color: var(--color-pjai-heading);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.project-ai-message-bubble p {
  margin: 0 0 12px;
  white-space: pre-wrap;
}

.project-ai-message-bubble p:last-child {
  margin-bottom: 0;
}

.project-ai-message-bubble ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.project-ai-message-bubble li {
  margin-top: 5px;
}

.project-ai-user-bubble {
  max-width: 390px;
  background: linear-gradient(135deg, var(--color-pjai-gradient-1) 0%, var(--color-pjai-gradient-2) 100%);
  border-color: transparent;
  color: var(--color-text-on-brand);
}

.project-ai-user-bubble p {
  color: var(--color-text-on-brand);
}

.project-ai-loading-bubble {
  color: var(--color-pjai-loading-text);
  font-weight: 700;
}

.project-ai-loading-dot {
  animation: projectAiLoadingDot 1s infinite;
}

.project-ai-loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.project-ai-loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}


/* ============================= */
/* draft action */
/* ============================= */

.project-ai-draft-action {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}

.project-ai-draft-btn {
  width: 100%;
  margin-top: 0;
}


/* ============================= */
/* input */
/* ============================= */

.project-ai-chat-input-area {
  min-height: 62px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--color-pjai-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  flex-shrink: 0;
}

.project-ai-chat-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--color-pjai-soft-border);
  border-radius: 15px;
  background: var(--color-bg-white);
  color: var(--color-pjai-text);
  font-size: 16px;
  font-weight: 600;
  outline: none;
  box-sizing: border-box;
}

.project-ai-chat-input::placeholder {
  color: var(--color-pjai-placeholder);
}

.project-ai-chat-input:read-only {
  cursor: default;
  background: var(--color-pjai-soft-bg);
  opacity: 1;
}

.project-ai-send-btn {
  width: 48px;
  height: 46px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--color-pjai-gradient-1) 0%, var(--color-pjai-gradient-2) 100%);
  color: var(--color-text-on-brand);
  font-size: 20px;
  cursor: pointer;
}

.project-ai-send-btn:disabled {
  cursor: not-allowed;
  background: var(--color-pjai-disabled-bg);
}


/* ============================= */
/* animations */
/* ============================= */

@keyframes projectAiLoadingDot {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}


/* ============================= */
/* tablet */
/* ============================= */

@media (max-width: 1024px) {
  .project-ai-container {
    max-width: 640px;
  }

  .project-ai-chat-card {
    max-width: 100%;
    height: min(620px, calc(100vh - 120px));
  }
}


/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 768px) {
  .project-ai-page {
    padding-top: 28px;
    padding-bottom: 64px;
  }

  .project-ai-chat-card {
    height: calc(100vh - 92px);
    max-width: 100%;
    border-radius: 22px;
  }

  .project-ai-chat-header {
    min-height: 62px;
    padding: 12px 16px;
    gap: 12px;
  }

  .project-ai-back-inline {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 18px;
  }

  .project-ai-chat-title-box h2 {
    font-size: 17px;
  }

  .project-ai-chat-title-box p {
    font-size: 12px;
  }

  .project-ai-step-badge {
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }

  .project-ai-chat-body {
    padding: 16px 14px;
  }

  .project-ai-sparkle {
    margin-bottom: 12px;
    font-size: 28px;
  }

  .project-ai-intro h3 {
    font-size: 22px;
  }

  .project-ai-intro > p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
  }

  .project-ai-feature-list {
    max-width: 100%;
    margin-top: 16px;
    gap: 7px;
  }

  .project-ai-feature-item {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 13px;
  }

  .project-ai-feature-item strong {
    font-size: 13px;
  }

  .project-ai-primary-btn {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin-top: 18px;
    font-size: 14px;
    border-radius: 14px;
  }

  .project-ai-message-row {
    gap: 9px;
  }

  .project-ai-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .project-ai-avatar img {
    width: 24px;
    height: 24px;
  }

  .project-ai-message-bubble,
  .project-ai-user-bubble {
    max-width: calc(100% - 43px);
    padding: 14px 15px;
    border-radius: 17px;
    font-size: 13px;
    line-height: 1.55;
  }

  .project-ai-message-bubble p {
    margin-bottom: 10px;
  }

  .project-ai-chat-input-area {
    min-height: 58px;
    padding: 8px 12px 12px;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
  }

  .project-ai-chat-input {
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 16px;
  }

  .project-ai-send-btn {
    width: 46px;
    height: 44px;
    border-radius: 14px;
    font-size: 19px;
  }

  .project-ai-draft-btn {
    height: 44px;
    font-size: 14px;
  }
}


/* ============================= */
/* small mobile */
/* ============================= */

@media (max-width: 480px) {
  .project-ai-page {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  .project-ai-chat-card {
    height: calc(100vh - 80px);
    border-radius: 20px;
  }

  .project-ai-chat-header {
    padding: 11px 14px;
  }

  .project-ai-step-badge {
    display: none;
  }

  .project-ai-chat-body {
    padding: 14px 12px;
  }

  .project-ai-sparkle {
    font-size: 26px;
  }

  .project-ai-intro h3 {
    font-size: 21px;
  }

  .project-ai-intro > p {
    font-size: 12.5px;
  }

  .project-ai-feature-item {
    min-height: 38px;
  }

  .project-ai-feature-item strong {
    font-size: 12.5px;
  }

  .project-ai-message-bubble,
  .project-ai-user-bubble {
    padding: 13px 14px;
    font-size: 12.5px;
  }
}

/* ============================= */
/* entrance animations */
/* ============================= */

.project-ai-chat-card {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  animation: projectAiCardEnter 0.52s ease forwards;
}

.project-ai-chat-header {
  opacity: 0;
  transform: translateY(-8px);
  animation: projectAiHeaderEnter 0.45s ease forwards;
  animation-delay: 0.12s;
}

.project-ai-intro > * {
  opacity: 0;
  transform: translateY(12px);
  animation: projectAiIntroEnter 0.45s ease forwards;
}

.project-ai-intro > *:nth-child(1) {
  animation-delay: 0.18s;
}

.project-ai-intro > *:nth-child(2) {
  animation-delay: 0.26s;
}

.project-ai-intro > *:nth-child(3) {
  animation-delay: 0.34s;
}

.project-ai-intro > *:nth-child(4) {
  animation-delay: 0.42s;
}

.project-ai-intro > *:nth-child(5) {
  animation-delay: 0.5s;
}

.project-ai-message-row {
  animation: projectAiMessageEnter 0.28s ease both;
}

.project-ai-draft-action {
  animation: projectAiDraftEnter 0.35s ease both;
}

@keyframes projectAiCardEnter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes projectAiHeaderEnter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes projectAiIntroEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes projectAiMessageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes projectAiDraftEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1024px) {
  .project-ai-chat-card {
    height: calc(
      100dvh
      - var(--mobile-bottom-nav-height, 68px)
      - 120px
      - env(safe-area-inset-bottom)
    );
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pjai-card-bg: rgba(30, 41, 59, 0.92);
  --color-pjai-shadow-06: rgba(0, 0, 0, 0.3);
  --color-pjai-shadow-08: rgba(0, 0, 0, 0.36);
  --color-pjai-purple-06: rgba(167, 139, 250, 0.1);
  --color-pjai-purple-10: rgba(167, 139, 250, 0.16);
  --color-pjai-purple-22: rgba(167, 139, 250, 0.3);
  --color-pjai-purple-26: rgba(167, 139, 250, 0.36);
  --color-pjai-border: rgb(51, 65, 85);
  --color-pjai-border-soft: rgb(51, 65, 85);
  --color-pjai-purple-solid: rgb(167, 139, 250);
  --color-pjai-purple-hover-bg: rgb(38, 30, 63);
  --color-pjai-purple-hover-border: rgb(91, 76, 158);
  --color-pjai-purple-hover-text: rgb(196, 181, 253);
  --color-pjai-text: rgb(241, 245, 249);
  --color-pjai-text-muted: rgb(148, 163, 184);
  --color-pjai-text-muted-2: rgb(148, 163, 184);
  --color-pjai-heading: rgb(241, 245, 249);
  --color-pjai-soft-bg: rgb(30, 41, 59);
  --color-pjai-soft-border: rgb(51, 65, 85);
  --color-pjai-feature-text: rgb(167, 139, 250);
  --color-pjai-gradient-1: rgb(124, 92, 255);
  --color-pjai-gradient-2: rgb(108, 78, 245);
  --color-pjai-scrollbar-thumb: rgb(51, 65, 85);
  --color-pjai-avatar-bg: rgb(30, 41, 59);
  --color-pjai-loading-text: rgb(148, 163, 184);
  --color-pjai-placeholder: rgb(100, 116, 139);
  --color-pjai-disabled-bg: rgb(51, 65, 85);
}
:root {
  --color-sp-bg-2: rgb(253, 252, 255);
  --color-sp-bg-3: rgb(243, 239, 255);
  --color-sp-bg-4: rgb(236, 230, 255);
  --color-sp-bg-5: rgb(248, 246, 255);
  --color-sp-accent: rgb(124, 92, 255);
  --color-sp-heading: rgb(17, 17, 17);
  --color-sp-desc: rgb(102, 102, 102);
  --color-sp-banner-bg: rgba(255, 255, 255, 0.9);
  --color-sp-card-border: rgb(236, 233, 248);
  --color-sp-banner-shadow: rgba(75, 52, 173, 0.06);
  --color-sp-card-shadow: rgba(75, 52, 173, 0.05);
  --color-sp-avatar-grad-end: rgb(164, 139, 255);
  --color-sp-error-bg: rgb(255, 242, 241);
  --color-sp-error-border: rgb(255, 210, 204);
  --color-sp-success-text: rgb(15, 122, 66);
  --color-sp-success-bg: rgb(236, 253, 243);
  --color-sp-success-border: rgb(183, 235, 198);
  --color-sp-desc-2: rgb(119, 119, 119);
  --color-sp-label: rgb(34, 34, 34);
  --color-sp-input-border: rgb(221, 215, 247);
  --color-sp-input-focus-shadow: rgba(124, 92, 255, 0.12);
  --color-sp-input-error-border: rgb(240, 68, 56);
  --color-sp-input-error-shadow: rgba(240, 68, 56, 0.08);
  --color-sp-input-readonly-bg: rgb(248, 248, 252);
  --color-sp-error-text: rgb(217, 45, 32);
  --color-sp-row-border: rgb(240, 236, 251);
  --color-sp-toggle-off-bg: rgb(217, 214, 234);
  --color-sp-toggle-on-end: rgb(157, 132, 255);
  --color-sp-toggle-thumb-shadow: rgba(17, 17, 17, 0.15);
  --color-sp-toggle-thumb-disabled: rgb(247, 247, 251);
  --color-sp-disabled-text: rgb(154, 154, 154);
  --color-sp-btn-text: rgb(51, 51, 51);
  --color-sp-btn-hover-bg: rgb(247, 244, 255);
  --color-sp-btn-hover-border: rgb(203, 191, 255);
  --color-sp-save-shadow: rgba(124, 92, 255, 0.22);
  --color-sp-danger-border: rgb(255, 215, 220);
  --color-sp-danger-grad-1: rgb(255, 254, 254);
  --color-sp-danger-grad-2: rgb(255, 248, 249);
  --color-sp-danger-btn-bg: rgb(255, 92, 116);
  --color-sp-skeleton-bg: rgba(255, 255, 255, 0.94);
  --color-sp-skeleton-grad-1: rgb(242, 239, 255);
  --color-sp-skeleton-grad-2: rgb(235, 229, 255);
  --color-sp-card-bg: rgba(255, 255, 255, 0.95);
}

.settings-page {
  min-height: 100vh;
  padding: 48px 20px 80px;
  background:
    linear-gradient(
      180deg,
      var(--color-bg-white) 0%,
      var(--color-sp-bg-2) 8%,
      var(--color-sp-bg-3) 18%,
      var(--color-sp-bg-4) 28%,
      var(--color-sp-bg-5) 40%,
      var(--color-bg-white) 54%
    ),
    var(--color-bg-white);
}

.settings-container {
  max-width: 920px;
  margin: 0 auto;
}

.settings-header {
  margin-bottom: 24px;
}

.settings-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-accent);
}

.settings-header h1 {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 800;
  color: var(--color-sp-heading);
}

.settings-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-sp-desc);
}

.settings-profile-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  background: var(--color-sp-banner-bg);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px var(--color-sp-banner-shadow);
  backdrop-filter: blur(8px);
}

.settings-profile-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sp-accent), var(--color-sp-avatar-grad-end));
  color: var(--color-bg-white);
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.settings-profile-meta h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-sp-heading);
}

.settings-profile-meta p {
  margin: 0;
  font-size: 14px;
  color: var(--color-sp-desc);
}

.settings-feedback {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.settings-section-feedback {
  margin-bottom: 18px;
}

.settings-feedback-error {
  color: var(--color-danger-strong);
  background: var(--color-sp-error-bg);
  border: 1px solid var(--color-sp-error-border);
}

.settings-feedback-success {
  color: var(--color-sp-success-text);
  background: var(--color-sp-success-bg);
  border: 1px solid var(--color-sp-success-border);
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  padding: 24px;
  background: var(--color-sp-card-bg);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px var(--color-sp-card-shadow);
  backdrop-filter: blur(10px);
}

.settings-card-header {
  margin-bottom: 18px;
}

.settings-card-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-sp-heading);
}

.settings-card-header p {
  margin: 0;
  font-size: 14px;
  color: var(--color-sp-desc-2);
  line-height: 1.6;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-label);
}

.settings-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-sp-input-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  font-size: 15px;
  color: var(--color-sp-heading);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.settings-input:focus {
  border-color: var(--color-sp-accent);
  box-shadow: 0 0 0 4px var(--color-sp-input-focus-shadow);
}

.settings-input.is-error {
  border-color: var(--color-sp-input-error-border);
  box-shadow: 0 0 0 4px var(--color-sp-input-error-shadow);
}

.settings-input-readonly {
  background: var(--color-sp-input-readonly-bg);
  color: var(--color-sp-desc);
  cursor: not-allowed;
}

.settings-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-sp-desc-2);
}

.settings-error-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sp-error-text);
}

.settings-inline-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 4px;
}

.settings-row-content {
  flex: 1;
}

.settings-row-content h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-sp-heading);
}

.settings-row-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-sp-desc);
}

.settings-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-browser-push-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-sp-row-border);
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-sp-row-border);
}

.settings-toggle-row:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.settings-toggle-content {
  flex: 1;
  min-width: 0;
}

.settings-toggle-content h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-sp-heading);
}

.settings-toggle-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-sp-desc);
}

.settings-toggle-row.is-disabled .settings-toggle-content h3,
.settings-toggle-row.is-disabled .settings-toggle-content p {
  color: var(--color-sp-disabled-text);
}

.settings-toggle {
  position: relative;
  width: 56px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: var(--color-sp-toggle-off-bg);
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    opacity 0.2s ease;
  flex-shrink: 0;
}

.settings-toggle:hover {
  transform: translateY(-1px);
}

.settings-toggle.is-on {
  background: linear-gradient(135deg, var(--color-sp-accent), var(--color-sp-toggle-on-end));
}

.settings-toggle.is-disabled,
.settings-toggle.is-disabled.is-on {
  background: var(--color-sp-toggle-off-bg);
}

.settings-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-bg-white);
  box-shadow: 0 4px 10px var(--color-sp-toggle-thumb-shadow);
  transition: left 0.2s ease;
}

.settings-toggle.is-on .settings-toggle-thumb {
  left: 28px;
}

.settings-toggle.is-disabled .settings-toggle-thumb,
.settings-toggle.is-disabled.is-on .settings-toggle-thumb {
  left: 4px;
  background: var(--color-sp-toggle-thumb-disabled);
}

.settings-btn {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-sp-input-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-btn-text);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
  flex-shrink: 0;
}

.settings-btn:hover {
  background: var(--color-sp-btn-hover-bg);
  border-color: var(--color-sp-btn-hover-border);
  transform: translateY(-1px);
}

.settings-save-btn {
  min-width: 160px;
  height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-sp-accent), var(--color-sp-toggle-on-end));
  color: var(--color-bg-white);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px var(--color-sp-save-shadow);
  transition:
    transform 0.15s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.settings-save-btn:hover:not(:disabled) {
  opacity: 0.96;
  transform: translateY(-1px);
}

.settings-save-btn:disabled,
.settings-btn:disabled,
.danger-btn:disabled,
.settings-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
  box-shadow: none;
}

.danger-card {
  border-color: var(--color-sp-danger-border);
  background: linear-gradient(180deg, var(--color-sp-danger-grad-1) 0%, var(--color-sp-danger-grad-2) 100%);
}

.settings-link-button {
  text-decoration: none;
  flex-shrink: 0;
}

.danger-btn {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: var(--color-sp-danger-btn-bg);
  color: var(--color-bg-white);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.2s ease;
}

.danger-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.settings-skeleton-card {
  padding: 24px;
  background: var(--color-sp-skeleton-bg);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 22px;
}

.settings-skeleton-line {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-sp-skeleton-grad-1) 25%, var(--color-sp-skeleton-grad-2) 50%, var(--color-sp-skeleton-grad-1) 75%);
  background-size: 200% 100%;
  animation: settingsShimmer 1.4s linear infinite;
}

.settings-skeleton-line + .settings-skeleton-line {
  margin-top: 12px;
}

.settings-skeleton-line-lg {
  width: 32%;
  height: 20px;
}

.settings-skeleton-line-sm {
  width: 54%;
}

@keyframes settingsShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 768px) {
  .settings-page {
    padding: 32px 16px 60px;
  }

  .settings-header h1 {
    font-size: 30px;
  }

  .settings-profile-banner {
    padding: 18px;
    border-radius: 18px;
  }

  .settings-profile-avatar {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }

  .settings-card {
    padding: 20px;
    border-radius: 18px;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-toggle-row {
    align-items: flex-start;
  }

  .settings-browser-push-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-btn,
  .settings-save-btn,
  .danger-btn,
  .settings-link-button {
    width: 100%;
  }

  .settings-inline-actions {
    justify-content: stretch;
  }
}

[data-theme="dark"] {
  --color-sp-bg-2: rgb(15, 23, 42);
  --color-sp-bg-3: rgb(30, 27, 58);
  --color-sp-bg-4: rgb(36, 30, 66);
  --color-sp-bg-5: rgb(20, 22, 40);
  --color-sp-accent: rgb(157, 132, 255);
  --color-sp-heading: var(--color-text-main);
  --color-sp-desc: var(--color-text-muted);
  --color-sp-banner-bg: rgba(30, 41, 59, 0.85);
  --color-sp-card-border: rgb(51, 65, 85);
  --color-sp-banner-shadow: rgba(0, 0, 0, 0.3);
  --color-sp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-sp-avatar-grad-end: rgb(196, 181, 253);
  --color-sp-error-bg: rgba(248, 113, 113, 0.12);
  --color-sp-error-border: rgba(248, 113, 113, 0.3);
  --color-sp-success-text: rgb(110, 231, 183);
  --color-sp-success-bg: rgba(52, 211, 153, 0.14);
  --color-sp-success-border: rgba(52, 211, 153, 0.3);
  --color-sp-desc-2: var(--color-text-muted);
  --color-sp-label: var(--color-text-sub);
  --color-sp-input-border: rgb(51, 65, 85);
  --color-sp-input-focus-shadow: rgba(157, 132, 255, 0.18);
  --color-sp-input-error-border: rgb(248, 113, 113);
  --color-sp-input-error-shadow: rgba(248, 113, 113, 0.15);
  --color-sp-input-readonly-bg: var(--color-bg-elevated-dark);
  --color-sp-error-text: rgb(248, 113, 113);
  --color-sp-row-border: rgb(51, 65, 85);
  --color-sp-toggle-off-bg: rgb(51, 65, 85);
  --color-sp-toggle-on-end: rgb(196, 181, 253);
  --color-sp-toggle-thumb-shadow: rgba(0, 0, 0, 0.35);
  --color-sp-toggle-thumb-disabled: var(--color-bg-elevated-dark);
  --color-sp-disabled-text: var(--color-text-placeholder);
  --color-sp-btn-text: var(--color-text-sub);
  --color-sp-btn-hover-bg: rgba(157, 132, 255, 0.12);
  --color-sp-btn-hover-border: rgba(157, 132, 255, 0.4);
  --color-sp-save-shadow: rgba(124, 92, 255, 0.35);
  --color-sp-danger-border: rgba(248, 113, 113, 0.3);
  --color-sp-danger-grad-1: rgba(248, 113, 113, 0.06);
  --color-sp-danger-grad-2: rgba(248, 113, 113, 0.1);
  --color-sp-danger-btn-bg: rgb(255, 92, 116);
  --color-sp-skeleton-bg: rgba(30, 41, 59, 0.9);
  --color-sp-skeleton-grad-1: rgb(51, 65, 85);
  --color-sp-skeleton-grad-2: rgb(71, 85, 105);
  --color-sp-card-bg: rgba(30, 41, 59, 0.92);
}

/* ── AI 사용량 ─────────────────────────────────────────────────────── */
.settings-ai-usage__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.settings-ai-usage__top strong { font-size: 15px; font-weight: 800; }
.settings-ai-usage__top span {
  color: var(--color-text-muted, #7b7e87);
  font-size: 13px;
  /* 숫자가 자리에서 흔들리지 않게 — 쓸 때마다 폭이 변하면 눈에 거슬린다. */
  font-variant-numeric: tabular-nums;
}
.settings-ai-usage__bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-bg-soft, #f1f2f4);
}
.settings-ai-usage__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary, #4f46e5);
  transition: width .3s ease;
}
/* 다 쓴 상태는 색으로도 알려 준다 — 숫자만으로는 눈에 안 들어온다. */
.settings-ai-usage__bar i[data-full] { background: #c0453c; }
.settings-ai-usage__note {
  margin: 10px 0 0;
  color: var(--color-text-muted, #7b7e87);
  font-size: 12.5px;
}

/* Settings workspace */
.settings-page {
  min-height: 100dvh;
  padding: 24px;
  background: var(--color-bg-soft, #f5f6f8);
}

.settings-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  width: min(1440px, 100%);
  height: min(900px, calc(100dvh - 48px));
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--color-bg-white, #fff);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(24, 30, 42, 0.12);
}

.settings-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 24px 18px;
  overflow-y: auto;
  background: var(--color-sp-input-readonly-bg, #f7f7f8);
  border-right: 1px solid var(--color-sp-card-border);
}

.settings-sidebar .settings-profile-banner {
  gap: 12px;
  margin: 0 0 28px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.settings-sidebar .settings-profile-avatar {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.settings-sidebar .settings-profile-meta {
  min-width: 0;
}

.settings-sidebar .settings-profile-meta h2,
.settings-sidebar .settings-profile-meta p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-sidebar .settings-profile-meta h2 {
  font-size: 15px;
}

.settings-sidebar__label {
  margin: 0 8px 8px;
  color: var(--color-sp-desc);
  font-size: 12px;
  font-weight: 700;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-nav button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-sp-desc);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.settings-nav button:hover {
  color: var(--color-sp-heading);
  background: rgba(124, 92, 255, 0.08);
}

.settings-nav button.is-active {
  color: var(--color-sp-heading);
  background: rgba(124, 92, 255, 0.13);
}

.settings-nav button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.settings-sidebar__security {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: auto;
  padding: 18px 8px 2px;
  color: var(--color-sp-desc);
  font-size: 12px;
  line-height: 1.5;
}

.settings-sidebar__security svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex: 0 0 auto;
}

.settings-main {
  position: relative;
  min-width: 0;
  padding: 46px 52px 64px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.settings-close {
  position: absolute;
  top: 20px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-sp-desc);
  cursor: pointer;
}

.settings-close:hover {
  color: var(--color-sp-heading);
  background: var(--color-sp-input-readonly-bg);
}

.settings-close svg {
  width: 21px;
  height: 21px;
}

.settings-main .settings-header {
  max-width: 760px;
  margin-bottom: 28px;
  padding-right: 48px;
}

.settings-main .settings-kicker {
  margin-bottom: 6px;
  color: var(--color-sp-desc);
  font-size: 12px;
}

.settings-main .settings-header h1 {
  margin-bottom: 6px;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0;
}

.settings-main .settings-desc {
  font-size: 14px;
  line-height: 1.55;
}

.settings-card[hidden] {
  display: none;
}

.settings-main .settings-sections {
  gap: 16px;
}

.settings-main .settings-card {
  padding: 24px 26px;
  border-radius: 8px;
  background: var(--color-sp-card-bg);
  box-shadow: none;
  backdrop-filter: none;
}

.settings-main .settings-card-header {
  margin-bottom: 20px;
}

.settings-main .settings-card-header h2 {
  font-size: 18px;
}

.settings-main .settings-input {
  height: 44px;
  border-radius: 7px;
}

.settings-main .settings-btn,
.settings-main .settings-save-btn,
.settings-main .danger-btn {
  min-width: 0;
  height: 42px;
  border-radius: 7px;
  box-shadow: none;
}

.settings-main .settings-save-btn {
  padding: 0 20px;
}

.settings-main .settings-feedback {
  border-radius: 7px;
}

.settings-plan-panel {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--color-sp-card-border);
  border-radius: 8px;
}

.settings-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-ai-meter-note {
  margin: 12px 2px 0;
  color: var(--color-sp-desc);
  font-size: 11px;
  line-height: 1.55;
}

.settings-plan-option {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 19px 17px 16px;
  border: 1px solid var(--color-sp-card-border);
  border-radius: 8px;
  background: var(--color-bg-white, #fff);
}

.settings-plan-option.is-recommended {
  border-color: color-mix(in srgb, var(--color-sp-accent) 58%, var(--color-sp-card-border));
}

.settings-plan-option.is-current {
  border-color: var(--color-sp-accent);
  background: color-mix(in srgb, var(--color-sp-accent) 5%, var(--color-bg-white, #fff));
}

.settings-plan-option__head {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-plan-option__head h3 {
  margin: 0;
  color: var(--color-sp-heading);
  font-size: 17px;
  font-weight: 800;
}

.settings-plan-option__head span {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-sp-accent) 12%, transparent);
  color: var(--color-sp-accent);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.settings-plan-option__price {
  min-height: 34px;
  margin: 11px 0 10px;
  color: var(--color-sp-heading);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.settings-plan-option__price small {
  margin-left: 3px;
  color: var(--color-sp-desc);
  font-size: 11px;
  font-weight: 650;
}

.settings-plan-option__limit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: var(--color-sp-heading);
  font-size: 12px;
  font-weight: 700;
}

.settings-plan-option__limit svg {
  flex: 0 0 auto;
  color: var(--color-sp-accent);
}

.settings-plan-option__description {
  flex: 1;
  min-height: 42px;
  margin: 0 0 16px;
  color: var(--color-sp-desc);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}

.settings-plan-option > button {
  width: 100%;
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid var(--color-sp-input-border);
  border-radius: 7px;
  background: var(--color-bg-white, #fff);
  color: var(--color-sp-heading);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.settings-plan-option.is-recommended > button:not(:disabled) {
  border-color: var(--color-sp-accent);
  background: var(--color-sp-accent);
  color: #fff;
}

.settings-plan-option > button:disabled {
  cursor: default;
  opacity: 0.62;
}

.settings-ai-status {
  display: flex;
  min-height: 112px;
  align-items: center;
  gap: 14px;
  padding: 22px;
}

.settings-ai-status > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: var(--color-sp-accent);
}

.settings-ai-status strong {
  color: var(--color-sp-heading);
  font-size: 14px;
}

.settings-ai-status p {
  margin: 5px 0 0;
  color: var(--color-sp-desc);
  font-size: 12px;
  line-height: 1.5;
}

.settings-plan-row,
.settings-plan-usage {
  padding: 22px;
}

.settings-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.settings-plan-copy,
.settings-ai-usage__top > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.settings-plan-copy > span {
  color: var(--color-sp-desc);
  font-size: 12px;
  font-weight: 700;
}

.settings-plan-copy > strong {
  color: var(--color-sp-heading);
  font-size: 18px;
}

.settings-plan-copy > small,
.settings-ai-usage__top small {
  color: var(--color-sp-desc);
  font-size: 12px;
  line-height: 1.45;
}

.settings-plan-usage {
  border-top: 0;
}

.settings-plan-usage .settings-ai-usage__top {
  align-items: flex-end;
  margin-bottom: 14px;
}

.settings-plan-usage .settings-ai-usage__top strong {
  color: var(--color-sp-heading);
  font-size: 14px;
}

.settings-plan-usage .settings-ai-usage__bar {
  height: 7px;
}

.settings-plan-usage .settings-ai-usage__note {
  margin-top: 9px;
  line-height: 1.5;
}

.settings-ai-usage__numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.settings-ai-usage__numbers > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  padding: 12px;
  border-radius: 7px;
  background: var(--color-sp-input-readonly-bg);
  color: var(--color-sp-desc);
  font-size: 11px;
}

.settings-ai-usage__numbers strong {
  overflow-wrap: anywhere;
  color: var(--color-sp-heading);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.settings-ai-usage__sync-warning {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-sp-card-border);
  color: var(--color-sp-desc);
  font-size: 11px;
  line-height: 1.5;
}

[data-theme="dark"] .settings-page {
  background: var(--color-bg-main, #111827);
}

[data-theme="dark"] .settings-shell {
  background: var(--color-bg-card, #1e293b);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .settings-nav button:hover,
[data-theme="dark"] .settings-nav button.is-active {
  background: rgba(157, 132, 255, 0.16);
}

[data-theme="dark"] .settings-plan-option,
[data-theme="dark"] .settings-plan-option > button {
  background: var(--color-sp-card-bg);
}

[data-theme="dark"] .settings-plan-option.is-current {
  background: rgba(157, 132, 255, 0.1);
}

@media (max-width: 900px) {
  .settings-page {
    padding: 12px;
  }

  .settings-shell {
    display: block;
    height: calc(100dvh - 24px);
    min-height: 560px;
  }

  .settings-sidebar {
    display: block;
    padding: 14px 14px 10px;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--color-sp-card-border);
  }

  .settings-sidebar .settings-profile-banner,
  .settings-sidebar__label,
  .settings-sidebar__security {
    display: none;
  }

  .settings-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
  }

  .settings-nav button {
    width: auto;
    min-width: max-content;
    padding: 0 13px;
  }

  .settings-main {
    height: calc(100% - 69px);
    padding: 32px 22px 48px;
  }

  .settings-plan-grid {
    grid-template-columns: 1fr;
  }

  .settings-plan-option__description {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .settings-page {
    padding: 0;
  }

  .settings-shell {
    height: 100dvh;
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .settings-main {
    padding: 28px 16px 40px;
  }

  .settings-main .settings-header h1 {
    font-size: 23px;
  }

  .settings-main .settings-card {
    padding: 20px 16px;
  }

  .settings-plan-row {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-plan-row .settings-btn {
    width: 100%;
  }

  .settings-ai-usage__numbers {
    grid-template-columns: 1fr;
  }
}
.notifications-page {
  width: 100%;
  min-height: calc(100vh - 80px);
  padding: 24px 20px 72px;
  background: #f7f8fc;
  color: #111827;
}

.notifications-page * {
  box-sizing: border-box;
}

.notifications-page button {
  font-family: inherit;
}

.notifications-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* =========================
   Header
========================= */

.notifications-header {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
}

.notifications-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notifications-readall-btn,
.notifications-delete-read-btn {
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.notifications-readall-btn {
  border: 1px solid #dfe5f2;
  color: #394150;
}

.notifications-readall-btn:hover {
  border-color: #cfd8ff;
  background: #f8faff;
  color: #4054dc;
}

.notifications-delete-read-btn {
  border: 1px solid #f0d6d6;
  background: #fffafa;
  color: #c85252;
}

.notifications-delete-read-btn:hover {
  border-color: #efc0c0;
  background: #fff1f1;
}

.notifications-readall-btn:disabled,
.notifications-delete-read-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================
   Tabs
========================= */

.notifications-tabs {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.notifications-tabs button {
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #697386;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.notifications-tabs button:hover {
  background: #eef1f7;
  color: #111827;
}

.notifications-tabs button.active {
  background: #111827;
  color: #ffffff;
}

.notifications-tabs button span {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   List Card
========================= */

.notifications-list-card {
  border: 1px solid #e6ebf4;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(26, 38, 90, 0.045);
  overflow: hidden;
}

.notifications-list {
  display: flex;
  flex-direction: column;
}

/* =========================
   Row
========================= */

.notification-row {
  position: relative;
  width: 100%;
  min-height: 82px;
  padding: 17px 16px 17px 20px;
  border: none;
  border-bottom: 1px solid #edf0f6;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 8px 38px minmax(0, 1fr) 32px;
  gap: 13px;
  align-items: center;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}

.notification-row:last-child {
  border-bottom: none;
}

.notification-row:hover {
  background: #fafbff;
}

.notification-row.is-unread {
  background: #fbfcff;
}

.notification-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: transparent;
}

.notification-row.is-unread .notification-unread-dot {
  background: #4965ff;
}

.notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #f3f5fb;
  color: #7b8498;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notification-row.is-unread .notification-icon {
  background: #eef1ff;
  color: #4965ff;
}

.notification-content {
  min-width: 0;
}

.notification-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.notification-top strong {
  min-width: 0;
  color: #111827;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -0.025em;
  word-break: keep-all;
}

.notification-row.is-read .notification-top strong {
  color: #394150;
  font-weight: 800;
}

.notification-top time {
  flex: 0 0 auto;
  color: #9aa3b5;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  white-space: nowrap;
}

.notification-bottom {
  min-width: 0;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-bottom span {
  flex: 0 0 auto;
  color: #5368df;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 850;
}

.notification-bottom p {
  min-width: 0;
  margin: 0;
  color: #697386;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-delete-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: transparent;
  color: #a1aac0;
  font-size: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.notification-delete-btn:hover {
  background: #f3f5fb;
  color: #394150;
}

/* =========================
   More
========================= */

.notifications-more {
  padding: 16px;
  border-top: 1px solid #edf0f6;
  display: flex;
  justify-content: center;
}

.notifications-more-btn {
  min-width: 112px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #dfe5f2;
  border-radius: 999px;
  background: #ffffff;
  color: #394150;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.notifications-more-btn:hover {
  border-color: #cfd8ff;
  background: #f8faff;
  color: #4054dc;
}

.notifications-more-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.notifications-end {
  padding: 16px;
  border-top: 1px solid #edf0f6;
  color: #9aa3b5;
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

/* =========================
   Empty
========================= */

.notifications-empty {
  min-height: 320px;
  padding: 50px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.notifications-empty-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: #f3f5fb;
  color: #8b95a8;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-empty strong {
  color: #111827;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.notifications-empty p {
  margin: 7px 0 0;
  color: #697386;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}

/* =========================
   Responsive
========================= */

@media (max-width: 768px) {
  .notifications-page {
    min-height: 100vh;
    padding: 18px 14px 44px;
  }

  .notifications-header {
    margin-bottom: 10px;
  }

  .notifications-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .notifications-readall-btn,
  .notifications-delete-read-btn {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border-radius: 13px;
    font-size: 12px;
  }

  .notifications-tabs {
    width: 100%;
    padding: 4px;
    border-radius: 16px;
    background: #eef1f7;
    gap: 4px;
  }

  .notifications-tabs button {
    flex: 1;
    height: 38px;
    justify-content: center;
    border-radius: 13px;
    font-size: 13px;
  }

  .notifications-tabs button.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 6px 16px rgba(26, 38, 90, 0.08);
  }

  .notifications-tabs button span {
    background: #eef1ff;
    color: #4965ff;
  }

  .notifications-list-card {
    border-radius: 18px;
    box-shadow: none;
  }

  .notification-row {
    min-height: auto;
    padding: 16px 12px 16px 14px;
    grid-template-columns: 7px 36px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: flex-start;
  }

  .notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 19px;
  }

  .notification-top {
    flex-direction: column;
    gap: 4px;
  }

  .notification-top strong {
    font-size: 14px;
    line-height: 1.45;
  }

  .notification-bottom {
    margin-top: 7px;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .notification-bottom p {
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .notification-delete-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 18px;
  }

  .notifications-more {
    padding: 14px;
  }

  .notifications-more-btn {
    width: 100%;
    border-radius: 14px;
  }

  .notifications-empty {
    min-height: 280px;
    padding: 42px 18px;
  }
}

@media (max-width: 420px) {
  .notifications-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .notification-row {
    padding: 15px 10px 15px 12px;
  }
}
.notification-invite-actions {
  margin-top: 10px;
}

.notif-invite-accept-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.notif-invite-accept-btn:hover:not(:disabled) {
  background: #4338ca;
  transform: translateY(-1px);
}

.notif-invite-accept-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.notification-invite-accepted {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
}
* {
  box-sizing: border-box;
}

:root {
  /* .find-password-box는 다크모드에서도 항상 라이트 고정 카드라 글자색도 고정값 필요 */
  --color-fpp-locked-text: rgb(17, 24, 39);
}

.find-password-page {
  width: 100%;
  min-height: 100vh;
  padding: 42px 20px 34px;
  background: var(--color-bg-page);
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.find-password-box {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* dark.css의 전역 안전망 규칙([class*="-box"]가 배경/테두리/글자색을
   일괄 지정)이 .find-password-box도 "-box"로 끝난다는 이유만으로 잡아버려서
   원래 배경이 없던 박스에 강제로 배경이 생기는 문제를 막는다 */
[data-theme="dark"] .find-password-box {
  background: transparent;
  border-color: transparent;
  color: var(--color-fpp-locked-text);
}

.find-password-brand {
  width: fit-content;
  margin: 0 auto 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

.find-password-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.find-password-logo-wrap .logo {
  display: block;
  line-height: 0;
}

.find-password-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 56px;
  object-fit: contain;
}

.find-password-brand-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.08;
}

.find-password-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.find-password-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.065em;
}

[data-theme="dark"] .find-password-logo-text {
  color: var(--color-brand-icon);
}

.find-password-header {
  margin-bottom: 18px;
  text-align: left;
}

.find-password-title {
  margin: 0 0 6px;
  color: #111827;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.find-password-subtitle {
  margin: 0;
  color: #7a808a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.025em;
}

.find-password-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 18px;
}

.find-step {
  flex: 1;
  text-align: center;
}

.find-step span {
  width: 32px;
  height: 32px;
  margin: 0 auto 7px;
  border-radius: 999px;
  background: #eef0f4;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
}

.find-step p {
  margin: 0;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.find-step.active span {
  background: #111827;
  color: #ffffff;
}

.find-step.active p {
  color: #111827;
}

.find-step-line {
  width: 24px;
  height: 2px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: #e5e7eb;
  flex-shrink: 0;
}

.find-password-message {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
}

.find-password-message.success {
  background: #ecfdf3;
  color: #027a48;
}

.find-password-message.error {
  background: #fef2f2;
  color: #dc2626;
}

.find-password-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.find-password-input-group {
  width: 100%;
  overflow: hidden;
  border: 1px solid #d7dbe3;
  border-radius: 14px;
  background: #ffffff;
}

.find-password-row {
  min-height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid #eceff4;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.find-password-row:last-child {
  border-bottom: none;
}

.find-password-row label {
  flex: 0 0 100px;
  color: #8b929d;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.find-password-row input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: none;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.find-password-row input::placeholder {
  color: #a3a7ae;
  font-weight: 650;
}

.find-password-row input:read-only {
  color: #111827;
  opacity: 1;
  -webkit-text-fill-color: #111827;
}

.find-password-help {
  margin: -4px 0 0;
  color: #8b929d;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -0.025em;
}

.find-password-help.error-text {
  color: #ef4444;
}

.find-password-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.find-password-button {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 52px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.2s ease;
}

.find-password-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.find-password-button-primary {
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
}

.find-password-button-primary:hover:not(:disabled) {
  opacity: 0.94;
}

.find-password-button-primary:active:not(:disabled) {
  transform: scale(0.985);
}

.find-password-button-secondary {
  background: #f4f6fb;
  color: #111827;
  border: 1px solid #e3e6ec;
}

.find-password-button-secondary:hover:not(:disabled) {
  background: #edf1f8;
}

.find-password-text-button {
  width: fit-content;
  margin: -2px auto 0;
  padding: 2px 0;
  border: none;
  background: transparent;
  color: #4965ff;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.find-password-text-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.find-password-footer {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.find-password-footer a {
  color: #6b7280;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.find-password-footer span {
  width: 1px;
  height: 13px;
  background: #d1d5db;
}

.find-password-row input {
  line-height: 54px;
  background: transparent;
}

/* 텍스트 클릭/드래그 시 위아래 흰색 삐져나가는 느낌 방지 */
.find-password-row input::selection {
  background: rgba(73, 101, 255, 0.18);
  color: #111827;
}

/* 크롬 자동완성 파란 배경 제거 */
.find-password-row input:-webkit-autofill,
.find-password-row input:-webkit-autofill:hover,
.find-password-row input:-webkit-autofill:focus,
.find-password-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  transition: background-color 9999s ease-in-out 0s;
}

.find-password-box {
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 768px) {
  .find-password-page {
    padding: 38px 18px 28px;
    align-items: flex-start;
  }

  .find-password-box {
    max-width: 100%;
  }

  .find-password-brand {
    margin-bottom: 30px;
  }

  .find-password-logo-wrap .logo img {
    height: 52px;
  }

  .find-password-logo-text {
    font-size: 27px;
  }
}

@media (max-width: 420px) {
  .find-password-page {
    padding: 34px 16px 24px;
  }

  .find-password-brand {
    gap: 11px;
  }

  .find-password-logo-wrap .logo img {
    height: 48px;
  }

  .find-password-logo-text {
    font-size: 24px;
  }

  .find-password-logo-sub {
    font-size: 11px;
  }

  .find-password-row {
    padding: 0 12px;
    gap: 9px;
  }

  .find-password-row label {
    flex-basis: 88px;
    font-size: 14px;
  }

  .find-password-row input {
    font-size: 16px;
  }

  .find-password-actions {
    flex-direction: column;
  }

  .find-step-line {
    width: 12px;
  }
}

:root {
  --color-pf-border: rgb(238, 238, 238);
  --color-pf-shadow-04: rgba(0, 0, 0, 0.04);
  --color-pf-shadow-08: rgba(0, 0, 0, 0.08);
  --color-pf-status-progress-bg: rgb(224, 242, 254);
  --color-pf-status-progress-text: rgb(2, 132, 199);
  --color-pf-status-done-bg: rgb(220, 252, 231);
  --color-pf-text-sub: rgb(85, 85, 85);
  --color-pf-text-muted: rgb(136, 136, 136);
  --color-pf-link: rgb(37, 99, 235);
}

/* ============================= */
/* page */
/* ============================= */

.portfolio-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.portfolio-page-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 32px;
}

/* ============================= */
/* grid */
/* ============================= */

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ============================= */
/* card */
/* ============================= */

.portfolio-card {
  background: var(--color-bg-white);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-pf-border);
  box-shadow: 0 10px 25px var(--color-pf-shadow-04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px var(--color-pf-shadow-08);
}

/* ============================= */
/* header */
/* ============================= */

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portfolio-title {
  font-size: 20px;
  font-weight: 700;
}

.portfolio-status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.portfolio-status.progress {
  background: var(--color-pf-status-progress-bg);
  color: var(--color-pf-status-progress-text);
}

.portfolio-status.done {
  background: var(--color-pf-status-done-bg);
  color: var(--color-success);
}

/* ============================= */
/* content */
/* ============================= */

.portfolio-description {
  margin: 12px 0 16px;
  color: var(--color-pf-text-sub);
}

.portfolio-section {
  margin-bottom: 14px;
}

.label {
  display: block;
  font-size: 12px;
  color: var(--color-pf-text-muted);
  margin-bottom: 4px;
}

/* ============================= */
/* tags */
/* ============================= */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  background: var(--color-bg-soft);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* ============================= */
/* achievements */
/* ============================= */

.achievement-list {
  padding-left: 16px;
}

.achievement-list li {
  font-size: 14px;
  margin-bottom: 4px;
}

/* ============================= */
/* links */
/* ============================= */

.portfolio-links {
  margin-top: 12px;
  display: flex;
  gap: 12px;
}

.portfolio-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-pf-link);
  text-decoration: none;
}

.portfolio-links a:hover {
  text-decoration: underline;
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pf-border: var(--color-border);
  --color-pf-shadow-04: rgba(0, 0, 0, 0.25);
  --color-pf-shadow-08: rgba(0, 0, 0, 0.4);
  --color-pf-status-progress-bg: rgba(2, 132, 199, 0.18);
  --color-pf-status-progress-text: rgb(56, 189, 248);
  --color-pf-status-done-bg: rgba(22, 163, 74, 0.18);
  --color-pf-text-sub: var(--color-text-sub);
  --color-pf-text-muted: var(--color-text-muted);
  --color-pf-link: rgb(96, 165, 250);
}
:root {
  --color-ppd-page-bg: rgb(248, 249, 252);
  --color-ppd-accent: rgb(99, 102, 241);
  --color-ppd-hover-bg: rgb(243, 244, 246);
  --color-ppd-shadow: rgba(0, 0, 0, 0.07);
  --color-ppd-thumb-grad-1: rgb(99, 102, 241);
  --color-ppd-thumb-grad-2: rgb(139, 92, 246);
  --color-ppd-badge-bg: rgb(238, 242, 255);
  --color-ppd-notice-bg: rgb(255, 251, 235);
  --color-ppd-notice-border: rgb(253, 230, 138);
  --color-ppd-notice-text: rgb(146, 64, 14);
  --color-ppd-notice-done-bg: rgb(240, 249, 255);
  --color-ppd-notice-done-border: rgb(186, 230, 253);
  --color-ppd-notice-done-text: rgb(7, 89, 133);
  --color-ppd-sum-item-bg: rgb(249, 250, 251);
  --color-ppd-satisfaction: rgb(245, 158, 11);
  --color-ppd-goal-icon: rgb(8, 145, 178);
  --color-ppd-violet-soft: rgb(245, 243, 255);
  --color-ppd-violet-soft-border: rgb(237, 233, 254);
  --color-ppd-icon-ring-shadow: rgba(99, 102, 241, 0.12);
  --color-ppd-start-bg: rgb(239, 246, 255);
  --color-ppd-start-border: rgb(191, 219, 254);
  --color-ppd-start-text: rgb(29, 78, 216);
  --color-ppd-end-bg: rgb(240, 253, 244);
  --color-ppd-end-border: rgb(187, 247, 208);
  --color-ppd-end-text: rgb(21, 128, 61);
  --color-ppd-task-bg: rgb(254, 252, 232);
  --color-ppd-task-border: rgb(253, 230, 138);
  --color-ppd-progress-bg: rgb(253, 244, 255);
  --color-ppd-progress-border: rgb(233, 213, 255);
  --color-ppd-eval-bg: rgb(255, 247, 237);
  --color-ppd-eval-border: rgb(254, 215, 170);
  --color-ppd-eval-text: rgb(194, 65, 12);
  --color-ppd-line-grad-1: rgb(224, 231, 255);
  --color-ppd-kpi-done-bg: rgb(220, 252, 231);
  --color-ppd-kpi-grad: rgb(167, 139, 250);
}

.ppd-page { min-height: 100vh; background: var(--color-ppd-page-bg); }

.ppd-loading, .ppd-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; gap: 16px; color: var(--color-text-muted); font-size: 15px;
}
.ppd-spinner {
  width: 40px; height: 40px; border: 3px solid var(--color-border);
  border-top-color: var(--color-ppd-accent); border-radius: 50%;
  animation: ppd-spin 0.8s linear infinite;
}
@keyframes ppd-spin { to { transform: rotate(360deg); } }

/* 상단 바 */
.ppd-topbar {
  background: var(--color-bg-white); border-bottom: 1px solid var(--color-border);
  padding: 14px 32px; display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 100;
}
.ppd-back {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--color-text-muted); padding: 4px 8px;
  border-radius: 6px; transition: background 0.15s;
}
.ppd-back:hover { background: var(--color-ppd-hover-bg); }
.ppd-topbar-title { font-size: 17px; font-weight: 700; color: var(--color-text-main); margin: 0; }

/* 컨텐츠 레이아웃 */
.ppd-content { max-width: 1100px; margin: 0 auto; padding: 28px 20px; }

/* 평가 대기 안내 배너 */
.ppd-eval-notice {
  background: var(--color-ppd-notice-bg); border: 1px solid var(--color-ppd-notice-border); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; color: var(--color-ppd-notice-text);
  margin-bottom: 16px; line-height: 1.5;
}
.ppd-eval-notice--done { background: var(--color-ppd-notice-done-bg); border-color: var(--color-ppd-notice-done-border); color: var(--color-ppd-notice-done-text); }

/* 1인 프로젝트 안내 */
.ppd-solo-note { font-size: 12px; color: var(--color-text-placeholder); margin: 12px 0 0; text-align: center; }
.ppd-sum-na { color: var(--color-border-muted); }
.ppd-summary-grid--solo { grid-template-columns: repeat(3, 1fr); }
.ppd-progress-na { color: var(--color-text-placeholder); font-size: 13px; }
.ppd-progress-na small { font-size: 11px; }

/* 히어로 카드 */
.ppd-hero {
  background: var(--color-bg-white); border-radius: 16px; padding: 28px;
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 24px; align-items: start;
  box-shadow: 0 1px 8px var(--color-ppd-shadow); margin-bottom: 20px;
}
.ppd-hero-thumb {
  width: 160px; height: 120px; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-ppd-thumb-grad-1), var(--color-ppd-thumb-grad-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; flex-shrink: 0;
}
.ppd-thumb-placeholder { font-size: 48px; }

.ppd-status-badge {
  display: inline-block; background: var(--color-ppd-badge-bg); color: var(--color-ppd-accent);
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; margin-bottom: 8px;
}
.ppd-project-title { font-size: 22px; font-weight: 800; color: var(--color-text-main); margin: 0 0 10px; line-height: 1.3; }
.ppd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ppd-role-tag {
  background: var(--color-ppd-badge-bg); color: var(--color-ppd-accent); font-size: 13px;
  font-weight: 600; padding: 3px 10px; border-radius: 20px;
}
.ppd-cat-tag { background: var(--color-bg-soft); color: var(--color-text-sub); font-size: 13px; padding: 3px 10px; border-radius: 20px; }
.ppd-summary { font-size: 14px; color: var(--color-text-muted); margin: 0; line-height: 1.6; }

.ppd-hero-meta { min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.ppd-meta-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ppd-meta-label { color: var(--color-text-placeholder); width: 96px; flex-shrink: 0; }
.ppd-meta-val { color: var(--color-text-main); font-weight: 500; }
.ppd-progress-inline { display: flex; align-items: center; gap: 10px; }
.ppd-prog-bar { width: 120px; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.ppd-prog-fill { height: 100%; background: var(--color-ppd-accent); border-radius: 3px; }

/* 바디 레이아웃 */
.ppd-body { display: grid; grid-template-columns: 1fr 280px; gap: 20px; align-items: start; }
.ppd-main { display: flex; flex-direction: column; gap: 20px; }
.ppd-side { display: flex; flex-direction: column; gap: 20px; }

/* 공통 카드 */
.ppd-card {
  background: var(--color-bg-white); border-radius: 14px; padding: 22px;
  box-shadow: 0 1px 8px var(--color-ppd-shadow);
}
.ppd-card-title {
  font-size: 15px; font-weight: 700; color: var(--color-text-main);
  margin: 0 0 16px; display: flex; align-items: center; gap: 6px;
}

/* AI 요약 그리드 */
.ppd-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ppd-sum-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 12px; background: var(--color-ppd-sum-item-bg); border-radius: 12px; gap: 4px;
}
.ppd-sum-icon { font-size: 22px; line-height: 1; }
.ppd-sum-icon--satisfaction { color: var(--color-ppd-satisfaction); }
.ppd-sum-icon--contrib { color: var(--color-ppd-accent); }
.ppd-sum-icon--goal { color: var(--color-ppd-goal-icon); }
.ppd-sum-icon--grade { color: var(--color-success); }
.ppd-sum-sub { font-size: 11px; color: var(--color-text-placeholder); font-weight: 500; }
.ppd-sum-big { font-size: 22px; font-weight: 800; color: var(--color-text-main); }
.ppd-sum-unit { font-size: 13px; color: var(--color-text-placeholder); font-weight: 400; }
.ppd-sum-note { font-size: 11px; color: var(--color-text-placeholder); }
.ppd-grade { color: var(--color-ppd-accent); }

.ppd-stars { display: flex; gap: 2px; }
.ppd-star { font-size: 16px; color: var(--color-border-muted); }
.ppd-star--on { color: var(--color-ppd-satisfaction); }
.ppd-star--half { color: var(--color-ppd-satisfaction); opacity: 0.6; }

/* 더블 컬럼 */
.ppd-double { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* 점수 바 */
.ppd-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ppd-bar-label { font-size: 13px; color: var(--color-text-sub); font-weight: 500; width: 44px; flex-shrink: 0; }
.ppd-bar-track { flex: 1; height: 8px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.ppd-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.ppd-bar-val { font-size: 12px; color: var(--color-text-placeholder); width: 56px; text-align: right; flex-shrink: 0; }

/* AI 코멘트 */
.ppd-ai-text { font-size: 14px; color: var(--color-text-sub); line-height: 1.7; margin: 0 0 14px; }
.ppd-strength-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ppd-strength-tag {
  background: var(--color-ppd-badge-bg); color: var(--color-ppd-accent); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 20px;
}

/* 할일 */
.ppd-todo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ppd-todo-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--color-text-sub); }
.ppd-todo-check { flex-shrink: 0; color: var(--color-ppd-accent); font-weight: 700; margin-top: 1px; }

/* 회고 */
.ppd-retro-result { font-size: 22px; font-weight: 800; color: var(--color-ppd-accent); margin-bottom: 10px; }
.ppd-retro-comment { font-size: 14px; color: var(--color-text-muted); font-style: italic; margin: 0; }

/* 배지 */
.ppd-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ppd-badge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 18px; background: var(--color-ppd-violet-soft); border-radius: 12px;
  border: 1.5px solid var(--color-ppd-violet-soft-border); min-width: 90px;
}
.ppd-badge-icon { font-size: 24px; }
.ppd-badge-label { font-size: 12px; font-weight: 600; color: var(--color-ppd-accent); text-align: center; }
.ppd-ai-note { font-size: 12px; color: var(--color-text-placeholder); text-align: center; margin-top: 4px; }

/* 팀원 목록 */
.ppd-member-count { font-size: 13px; color: var(--color-text-placeholder); font-weight: 400; margin-left: auto; }
.ppd-member-list { display: flex; flex-direction: column; gap: 10px; }
.ppd-member-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; transition: background 0.15s;
}
.ppd-member-row--me { background: var(--color-ppd-violet-soft); }
.ppd-member-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--color-bg-soft); flex-shrink: 0; }
.ppd-member-info { flex: 1; min-width: 0; }
.ppd-member-name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-main); }
.ppd-member-role { display: block; font-size: 11px; color: var(--color-text-placeholder); }
.ppd-member-rank { font-size: 12px; font-weight: 600; color: var(--color-ppd-accent); white-space: nowrap; flex-shrink: 0; }

/* 타임라인 */
.ppd-timeline { display: flex; flex-direction: column; }

.ppd-tl-row {
  display: grid;
  grid-template-columns: 72px 32px 1fr;
  gap: 8px;
  align-items: flex-start;
}

.ppd-tl-left {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  justify-content: flex-end;
}

.ppd-tl-date {
  font-size: 10.5px;
  color: var(--color-text-placeholder);
  white-space: nowrap;
  font-weight: 500;
}

.ppd-tl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ppd-tl-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-ppd-badge-bg);
  border: 2px solid var(--color-brand-soft-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--color-ppd-icon-ring-shadow);
}

.ppd-tl-row--start .ppd-tl-icon  { background: var(--color-ppd-start-bg); border-color: var(--color-ppd-start-border); }
.ppd-tl-row--end .ppd-tl-icon    { background: var(--color-ppd-end-bg); border-color: var(--color-ppd-end-border); }
.ppd-tl-row--task .ppd-tl-icon   { background: var(--color-ppd-task-bg); border-color: var(--color-ppd-task-border); }
.ppd-tl-row--progress .ppd-tl-icon { background: var(--color-ppd-progress-bg); border-color: var(--color-ppd-progress-border); }
.ppd-tl-row--eval .ppd-tl-icon   { background: var(--color-ppd-eval-bg); border-color: var(--color-ppd-eval-border); }

.ppd-tl-line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: linear-gradient(to bottom, var(--color-ppd-line-grad-1), var(--color-border));
  margin: 3px 0;
}

.ppd-tl-right {
  padding-top: 5px;
  padding-bottom: 16px;
}

.ppd-tl-label {
  font-size: 12.5px;
  color: var(--color-text-sub);
  font-weight: 600;
  line-height: 1.4;
}

.ppd-tl-row--start .ppd-tl-label { color: var(--color-ppd-start-text); }
.ppd-tl-row--end .ppd-tl-label   { color: var(--color-ppd-end-text); }
.ppd-tl-row--eval .ppd-tl-label  { color: var(--color-ppd-eval-text); }

/* 반응형 */
@media (max-width: 900px) {
  .ppd-hero { grid-template-columns: 1fr; }
  .ppd-hero-thumb { width: 100%; height: 140px; }
  .ppd-body { grid-template-columns: 1fr; }
  .ppd-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .ppd-double { grid-template-columns: 1fr; }
}


/* ── 팀원 다면평가 ── */
.ppd-peer-card { margin-top: 20px; }

.ppd-peer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.ppd-peer-temp-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ppd-page-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 6px 14px;
}

.ppd-peer-temp-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.ppd-peer-temp-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.ppd-peer-count {
  font-size: 11px;
  color: var(--color-text-placeholder);
  background: var(--color-bg-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* 온도계 바 */
.ppd-peer-thermo {
  position: relative;
  margin-bottom: 20px;
  padding-top: 24px;
  padding-bottom: 20px;
}

.ppd-peer-thermo-pin {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--color-text-placeholder);
  gap: 2px;
}

.ppd-peer-thermo-pin-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-border-muted);
}

.ppd-peer-thermo-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.ppd-peer-thermo-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.ppd-peer-thermo-cur {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  gap: 2px;
}

.ppd-peer-thermo-cur-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

.ppd-peer-bars { display: flex; flex-direction: column; gap: 2px; }

/* ── KPI 목표 달성 현황 ── */
.ppd-kpi-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.ppd-kpi-summary {
  font-size: 13px; font-weight: 600; color: var(--color-ppd-accent);
}
.ppd-kpi-avg { color: var(--color-text-placeholder); font-weight: 400; }
.ppd-kpi-list { display: flex; flex-direction: column; gap: 10px; }
.ppd-kpi-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--color-ppd-sum-item-bg); border: 1px solid var(--color-border);
  transition: border-color 0.15s;
}
.ppd-kpi-row--done {
  background: var(--color-ppd-end-bg); border-color: var(--color-ppd-end-border);
}
.ppd-kpi-left { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ppd-kpi-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--color-ppd-accent); background: var(--color-ppd-badge-bg); border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
}
.ppd-kpi-row--done .ppd-kpi-type { color: var(--color-ppd-end-text); background: var(--color-ppd-kpi-done-bg); }
.ppd-kpi-title { font-size: 13px; font-weight: 600; color: var(--color-text-main); }
.ppd-kpi-target { font-size: 11px; color: var(--color-text-placeholder); }
.ppd-kpi-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 110px; }
.ppd-kpi-bar-track { flex: 1; height: 6px; background: var(--color-border); border-radius: 99px; overflow: hidden; }
.ppd-kpi-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-ppd-accent), var(--color-ppd-kpi-grad)); border-radius: 99px; transition: width 0.6s ease; }
.ppd-kpi-pct { font-size: 12px; font-weight: 700; color: var(--color-ppd-accent); min-width: 34px; text-align: right; }
.ppd-kpi-done-badge {
  font-size: 11px; font-weight: 700; color: var(--color-ppd-end-text); background: var(--color-ppd-kpi-done-bg);
  border-radius: 6px; padding: 3px 10px; white-space: nowrap;
}

/* ── 기여도 분석 ── */
.ppd-contrib-analysis-body {
  background: var(--color-ppd-sum-item-bg); border-radius: 10px; padding: 16px 18px;
  border-left: 3px solid var(--color-ppd-accent);
}
.ppd-contrib-analysis-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ppd-accent); margin-bottom: 8px;
}
.ppd-contrib-analysis-text {
  font-size: 14px; line-height: 1.75; color: var(--color-text-sub); margin: 0;
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-ppd-page-bg: rgb(15, 23, 42);
  --color-ppd-accent: rgb(129, 140, 248);
  --color-ppd-hover-bg: var(--color-bg-elevated-dark);
  --color-ppd-shadow: rgba(0, 0, 0, 0.3);
  --color-ppd-thumb-grad-1: rgb(99, 102, 241);
  --color-ppd-thumb-grad-2: rgb(139, 92, 246);
  --color-ppd-badge-bg: rgba(129, 140, 248, 0.16);
  --color-ppd-notice-bg: rgba(217, 119, 6, 0.14);
  --color-ppd-notice-border: rgba(217, 119, 6, 0.35);
  --color-ppd-notice-text: rgb(252, 211, 77);
  --color-ppd-notice-done-bg: rgba(2, 132, 199, 0.14);
  --color-ppd-notice-done-border: rgba(2, 132, 199, 0.35);
  --color-ppd-notice-done-text: rgb(125, 211, 252);
  --color-ppd-sum-item-bg: var(--color-bg-elevated-dark);
  --color-ppd-satisfaction: rgb(251, 191, 36);
  --color-ppd-goal-icon: rgb(34, 211, 238);
  --color-ppd-violet-soft: rgba(167, 139, 250, 0.12);
  --color-ppd-violet-soft-border: rgba(167, 139, 250, 0.3);
  --color-ppd-icon-ring-shadow: rgba(129, 140, 248, 0.25);
  --color-ppd-start-bg: rgba(59, 130, 246, 0.14);
  --color-ppd-start-border: rgba(59, 130, 246, 0.35);
  --color-ppd-start-text: rgb(96, 165, 250);
  --color-ppd-end-bg: rgba(34, 197, 94, 0.14);
  --color-ppd-end-border: rgba(34, 197, 94, 0.35);
  --color-ppd-end-text: rgb(74, 222, 128);
  --color-ppd-task-bg: rgba(217, 119, 6, 0.14);
  --color-ppd-task-border: rgba(217, 119, 6, 0.35);
  --color-ppd-progress-bg: rgba(217, 70, 239, 0.14);
  --color-ppd-progress-border: rgba(217, 70, 239, 0.35);
  --color-ppd-eval-bg: rgba(234, 88, 12, 0.14);
  --color-ppd-eval-border: rgba(234, 88, 12, 0.35);
  --color-ppd-eval-text: rgb(251, 146, 60);
  --color-ppd-line-grad-1: rgba(129, 140, 248, 0.3);
  --color-ppd-kpi-done-bg: rgba(34, 197, 94, 0.18);
  --color-ppd-kpi-grad: rgb(167, 139, 250);
}
.terms-page {
  min-height: 100vh;
  background: #f8fafc;
  padding: 80px 20px;
}

.terms-container {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.terms-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.terms-updated {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 32px;
}

.terms-section {
  margin-bottom: 32px;
}

.terms-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
}

.terms-section p {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}

.terms-section ol {
  padding-left: 18px;
}

.terms-section li {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 6px;
}.privacy-page {
  min-height: auto;
  background: #f8fafc;
  padding: 80px 20px;
}

.privacy-container {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.privacy-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.privacy-updated {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 32px;
}

.privacy-section {
  margin-bottom: 32px;
}

.privacy-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
}

.privacy-section p {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}

.privacy-section ul {
  padding-left: 18px;
}

.privacy-section li {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 6px;
}.policy-page {
  min-height: auto;
  background: #f8fafc;
  padding: 80px 20px;
}

.policy-container {
  max-width: 800px;
  margin: 0 auto;
  background: #ffffff;
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.policy-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.policy-updated {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 32px;
}

.policy-section {
  margin-bottom: 32px;
}

.policy-section h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1f2937;
}

.policy-section p {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
}

.policy-section ol {
  padding-left: 18px;
}

.policy-section li {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 6px;
}

.policy-sublist {
  margin-top: 8px;
  padding-left: 18px;
}

.policy-sublist li {
  font-size: 14px;
  color: #4b5563;
}.agreement-page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 20px 36px;
  background: #ffffff;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-box {
  width: 100%;
  max-width: 430px;
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.agreement-brand {
  width: fit-content;
  margin: 0 auto 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: default;
  user-select: none;
}

.agreement-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

.agreement-brand-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.agreement-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.agreement-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.agreement-header {
  margin-bottom: 18px;
}

.agreement-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 950;
  color: #111827;
  letter-spacing: -0.05em;
}

.agreement-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.agreement-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agreement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agreement-input-group {
  overflow: hidden;
  border: 1px solid #d7dbe3;
  border-radius: 14px;
  background: #ffffff;
}

.agreement-all {
  background: #ffffff;
}

.agreement-check-row {
  width: 100%;
  min-height: 58px;
  padding: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
}

.agreement-check-row-all {
  min-height: 64px;
}

.agreement-check-left {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.agreement-check-left input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #3158ff;
  cursor: pointer;
  flex-shrink: 0;
}

.agreement-check-title {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.agreement-check-desc {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.agreement-view-button {
  flex-shrink: 0;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.agreement-view-button:hover {
  background: #f9fafb;
}

.agreement-help-area {
  min-height: 20px;
}

.agreement-error-text {
  margin: 0;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.agreement-actions {
  display: flex;
  gap: 10px;
}

.agreement-secondary-button,
.agreement-submit-btn {
  height: 54px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.agreement-secondary-button {
  flex: 0 0 132px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
}

.agreement-secondary-button:hover:not(:disabled) {
  background: #f9fafb;
}

.agreement-submit-btn {
  flex: 1;
  border: none;
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
}

.agreement-secondary-button:disabled,
.agreement-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .agreement-page {
    padding: 42px 18px 30px;
    align-items: flex-start;
  }

  .agreement-brand {
    margin-bottom: 38px;
  }

  .agreement-logo-wrap .logo img {
    height: 52px;
  }

  .agreement-logo-text {
    font-size: 27px;
  }
}

@media (max-width: 420px) {
  .agreement-page {
    padding: 38px 16px 26px;
  }

  .agreement-brand {
    margin-bottom: 34px;
    gap: 11px;
  }

  .agreement-logo-wrap .logo img {
    height: 48px;
  }

  .agreement-logo-text {
    font-size: 24px;
  }

  .agreement-logo-sub {
    font-size: 11px;
  }

  .agreement-check-row {
    padding: 15px 13px;
    gap: 10px;
  }

  .agreement-check-title {
    font-size: 14px;
  }

  .agreement-view-button {
    min-width: 42px;
    padding: 0 9px;
    font-size: 12px;
  }

  .agreement-actions {
    flex-direction: column-reverse;
  }

  .agreement-secondary-button,
  .agreement-submit-btn {
    width: 100%;
    flex: none;
  }
}:root {
  /* .complete-signup-box는 다크모드에서도 항상 라이트 고정 카드라 글자색도 고정값 필요 */
  --color-csp-locked-text: rgb(17, 24, 39);
}

.complete-signup-page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 20px 36px;
  background: var(--color-bg-page);
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.complete-signup-box {
  width: 100%;
  max-width: 430px;
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* dark.css의 전역 안전망 규칙([class*="-box"]가 배경/테두리/글자색을
   일괄 지정)이 .complete-signup-box도 "-box"로 끝난다는 이유만으로
   잡아버려서 원래 배경이 없던 박스에 강제로 배경이 생기는 문제를 막는다 */
[data-theme="dark"] .complete-signup-box {
  background: transparent;
  border-color: transparent;
  color: var(--color-csp-locked-text);
}

.complete-signup-brand {
  width: fit-content;
  margin: 0 auto 42px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: default;
  user-select: none;
}

.complete-signup-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

.complete-signup-brand-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.complete-signup-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.complete-signup-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -0.065em;
}

[data-theme="dark"] .complete-signup-logo-text {
  color: var(--color-brand-icon);
}

.complete-signup-header {
  margin-bottom: 18px;
}

.complete-signup-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 950;
  color: #111827;
  letter-spacing: -0.05em;
}

.complete-signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.complete-signup-input-group {
  overflow: hidden;
  border: 1px solid #d7dbe3;
  border-radius: 14px;
  background: #ffffff;
}

.complete-signup-field-row {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #eceff4;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
}

.complete-signup-field-row:last-child {
  border-bottom: none;
}

.complete-signup-field-row label {
  flex: 0 0 96px;
  color: #8b929d;
  font-size: 15px;
  font-weight: 750;
}

.complete-signup-field-row input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: none;
  outline: none;
  background: #ffffff !important;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  box-shadow: none !important;
}

.complete-signup-field-row input:focus,
.complete-signup-field-row input:active,
.complete-signup-field-row input:valid {
  background: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.complete-signup-field-row input::placeholder {
  color: #b4bac3;
  font-weight: 650;
}

.complete-signup-field-row input:-webkit-autofill,
.complete-signup-field-row input:-webkit-autofill:hover,
.complete-signup-field-row input:-webkit-autofill:focus,
.complete-signup-field-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  transition: background-color 9999s ease-in-out 0s;
}

.complete-signup-help-area {
  min-height: 20px;
}

.complete-signup-error-text {
  margin: 0;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.complete-signup-submit-btn {
  width: 100%;
  height: 54px;
  margin-top: 4px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.complete-signup-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .complete-signup-page {
    padding: 42px 18px 30px;
    align-items: flex-start;
  }

  .complete-signup-brand {
    margin-bottom: 38px;
  }

  .complete-signup-logo-wrap .logo img {
    height: 52px;
  }

  .complete-signup-logo-text {
    font-size: 27px;
  }
}

@media (max-width: 420px) {
  .complete-signup-page {
    padding: 38px 16px 26px;
  }

  .complete-signup-brand {
    margin-bottom: 34px;
    gap: 11px;
  }

  .complete-signup-logo-wrap .logo img {
    height: 48px;
  }

  .complete-signup-logo-text {
    font-size: 24px;
  }

  .complete-signup-logo-sub {
    font-size: 11px;
  }

  .complete-signup-field-row {
    padding: 0 13px;
    gap: 10px;
  }

  .complete-signup-field-row label {
    flex-basis: 78px;
    font-size: 14px;
  }

  .complete-signup-field-row input {
    font-size: 16px;
  }
}:root {
  /* .profile-setup-box는 다크모드에서도 항상 라이트 고정 카드라 글자색도 고정값 필요 */
  --color-psp-locked-text: rgb(17, 24, 39);
}

.profile-setup-page {
  width: 100%;
  min-height: 100vh;
  padding: 48px 20px 36px;
  background: var(--color-bg-page);
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-setup-box {
  width: 100%;
  max-width: 460px;
  animation: pageFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* dark.css의 전역 안전망 규칙([class*="-box"]가 배경/테두리/글자색을
   일괄 지정)이 .profile-setup-box도 "-box"로 끝난다는 이유만으로
   잡아버려서 원래 배경이 없던 박스에 강제로 배경이 생기는 문제를 막는다 */
[data-theme="dark"] .profile-setup-box {
  background: transparent;
  border-color: transparent;
  color: var(--color-psp-locked-text);
}

.profile-setup-brand {
  width: fit-content;
  margin: 0 auto 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: default;
  user-select: none;
}

.profile-setup-logo-wrap .logo img {
  display: block;
  width: auto;
  height: 58px;
  object-fit: contain;
}

.profile-setup-brand-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.profile-setup-logo-sub {
  margin-bottom: 5px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 850;
}

.profile-setup-logo-text {
  color: #222222;
  font-size: 30px;
  font-weight: 950;
}

[data-theme="dark"] .profile-setup-logo-text {
  color: var(--color-brand-icon);
}

.profile-setup-header {
  margin-bottom: 18px;
}

.profile-setup-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 950;
  color: #111827;
}

.profile-setup-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}

.profile-setup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-setup-field,
.profile-setup-invite {
  border: 1px solid #d7dbe3;
  border-radius: 14px;
  background: #ffffff;
}

.profile-setup-field {
  padding: 16px;
}

.profile-setup-field-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-setup-field-head label,
.profile-setup-field-head span:first-child {
  color: #111827;
  font-size: 15px;
  font-weight: 850;
}

.profile-setup-field-head span:last-child {
  color: #8b929d;
  font-size: 12px;
  font-weight: 750;
}

.profile-setup-field textarea,
.profile-setup-field input {
  width: 100%;
  border: none;
  outline: none;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  resize: none;
}

.profile-setup-field textarea::placeholder,
.profile-setup-field input::placeholder {
  color: #b4bac3;
  font-weight: 650;
}

.profile-setup-help {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}

.profile-setup-interest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-setup-interest-list button {
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid #e1e6f2;
  border-radius: 999px;
  background: #ffffff;
  color: #5f687a;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.profile-setup-interest-list button:hover,
.profile-setup-interest-list button.is-selected {
  border-color: #cfd8ff;
  background: #f4f7ff;
  color: #4054dc;
}

.profile-setup-interest-list button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.profile-setup-invite {
  min-height: 74px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}

.profile-setup-invite strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 850;
}

.profile-setup-invite p {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 650;
}

.profile-setup-invite input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  accent-color: #3158ff;
  cursor: pointer;
}

.profile-setup-help-area {
  min-height: 20px;
}

.profile-setup-error-text {
  margin: 0;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.profile-setup-actions {
  display: flex;
  gap: 10px;
}

.profile-setup-secondary-button,
.profile-setup-submit-btn {
  height: 54px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.profile-setup-secondary-button {
  flex: 0 0 132px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #6b7280;
}

.profile-setup-secondary-button:hover:not(:disabled) {
  background: #f9fafb;
}

.profile-setup-submit-btn {
  flex: 1;
  border: none;
  background: linear-gradient(135deg, #3158ff 0%, #6b54ff 100%);
  color: #ffffff;
}

.profile-setup-secondary-button:disabled,
.profile-setup-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .profile-setup-page {
    padding: 42px 18px 30px;
    align-items: flex-start;
  }

  .profile-setup-brand {
    margin-bottom: 38px;
  }

  .profile-setup-logo-wrap .logo img {
    height: 52px;
  }

  .profile-setup-logo-text {
    font-size: 27px;
  }
}

@media (max-width: 420px) {
  .profile-setup-page {
    padding: 38px 16px 26px;
  }

  .profile-setup-brand {
    margin-bottom: 34px;
    gap: 11px;
  }

  .profile-setup-logo-wrap .logo img {
    height: 48px;
  }

  .profile-setup-logo-text {
    font-size: 24px;
  }

  .profile-setup-logo-sub {
    font-size: 11px;
  }

  .profile-setup-actions {
    flex-direction: column-reverse;
  }

  .profile-setup-secondary-button,
  .profile-setup-submit-btn {
    width: 100%;
    flex: none;
  }
}
.delete-account-page {
  min-height: 100vh;
  padding: 120px 20px 60px;
  background:
    radial-gradient(circle at top left, rgba(255, 99, 132, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(255, 159, 64, 0.08), transparent 24%),
    linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.delete-account-card {
  width: 100%;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  padding: 34px 28px 28px;
}

.delete-account-header {
  margin-bottom: 24px;
}

.delete-account-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.delete-account-title {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 800;
  color: #111827;
}

.delete-account-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #6b7280;
}

.delete-account-warning-box {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff5f5 0%, #fff1f2 100%);
  border: 1px solid rgba(239, 68, 68, 0.14);
}

.delete-account-warning-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #991b1b;
}

.delete-account-warning-list {
  margin: 0;
  padding-left: 18px;
  color: #7f1d1d;
  font-size: 14px;
  line-height: 1.7;
}

.delete-account-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.delete-account-field {
  display: flex;
  flex-direction: column;
}

.delete-account-label {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.delete-account-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  color: #111827;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  box-sizing: border-box;
}

.delete-account-input:focus {
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15);
}

.delete-account-help {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

.delete-account-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 2px 2px;
}

.delete-account-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  cursor: pointer;
}

.delete-account-check input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #dc2626;
  flex-shrink: 0;
}

.delete-account-message {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}

.delete-account-message.success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.delete-account-message.error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

.delete-account-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.delete-account-cancel-btn,
.delete-account-submit-btn {
  min-width: 132px;
  height: 50px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.delete-account-cancel-btn {
  background: #f3f4f6;
  color: #111827;
}

.delete-account-cancel-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.delete-account-submit-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.24);
}

.delete-account-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(220, 38, 38, 0.28);
}

.delete-account-submit-btn:disabled,
.delete-account-cancel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 640px) {
  .delete-account-page {
    padding: 96px 14px 40px;
  }

  .delete-account-card {
    padding: 24px 18px 20px;
    border-radius: 22px;
  }

  .delete-account-title {
    font-size: 26px;
  }

  .delete-account-actions {
    flex-direction: column;
  }

  .delete-account-cancel-btn,
  .delete-account-submit-btn {
    width: 100%;
  }
}:root {
  --color-ap-btn-dark-bg: rgb(17, 24, 39);
  --color-ap-success-bg: rgb(236, 253, 245);
  --color-ap-success-text: rgb(6, 95, 70);
  --color-ap-danger-bg: rgb(254, 242, 242);
  --color-ap-danger-text: rgb(153, 27, 27);
  --color-ap-shadow-card: rgba(15, 23, 42, 0.04);
  --color-ap-surface-soft: rgb(248, 250, 252);
  --color-ap-focus-border: rgb(99, 102, 241);
  --color-ap-danger-btn-bg: rgb(254, 226, 226);
  --color-ap-danger-btn-text: rgb(185, 28, 28);
  --color-ap-table-head-bg: rgb(249, 250, 251);
  --color-ap-row-selected-bg: rgb(245, 247, 255);
  --color-ap-badge-indigo-bg: rgb(238, 242, 255);
  --color-ap-badge-indigo-text: rgb(55, 48, 163);
  --color-ap-badge-purple-bg: rgb(243, 232, 255);
  --color-ap-badge-purple-text: rgb(126, 34, 206);
  --color-ap-badge-teal-bg: rgb(230, 255, 251);
  --color-ap-badge-teal-text: rgb(15, 118, 110);
  --color-ap-link: rgb(79, 70, 229);
  --color-ap-status-new-border: rgb(191, 219, 254);
  --color-ap-status-new-bg: rgb(239, 246, 255);
  --color-ap-status-new-text: rgb(29, 78, 216);
  --color-ap-status-review-border: rgb(253, 230, 138);
  --color-ap-status-review-bg: rgb(255, 251, 235);
  --color-ap-status-review-text: rgb(161, 98, 7);
  --color-ap-status-contact-border: rgb(187, 247, 208);
  --color-ap-status-contact-bg: rgb(240, 253, 244);
  --color-ap-status-contact-text: rgb(21, 128, 61);
  --color-ap-status-closed-text: rgb(75, 85, 99);
  --color-ap-status-created-border: rgb(167, 243, 208);
  --color-ap-status-created-text: rgb(4, 120, 87);
  --color-ap-backdrop: rgba(15, 23, 42, 0.56);
  --color-ap-detail-border: rgb(219, 226, 238);
  --color-ap-detail-shadow: rgba(15, 23, 42, 0.3);
  --color-ap-detail-divider: rgb(226, 232, 240);
  --color-ap-detail-label: rgb(100, 116, 139);
  --color-ap-notes-text: rgb(51, 65, 85);
  --color-ap-warning-text: rgb(180, 83, 9);
  --color-ap-badge-role-admin-bg: rgb(237, 233, 254);
  --color-ap-badge-moved-text: rgb(67, 56, 202);
}

.admin-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.admin-header h1 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-main);
}

.admin-header p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-tabs button {
  border: none;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.admin-tabs button.active {
  background: var(--color-ap-btn-dark-bg);
  color: white;
}

.admin-alert {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
}

.admin-alert.success {
  background: var(--color-ap-success-bg);
  color: var(--color-ap-success-text);
}

.admin-alert.error {
  background: var(--color-ap-danger-bg);
  color: var(--color-ap-danger-text);
}

.admin-section {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 10px 30px var(--color-ap-shadow-card);
}

.admin-section--flush {
  padding-bottom: 0;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.stat-card {
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-ap-surface-soft) 100%);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 22px 20px;
}

.stat-card span {
  display: block;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-card strong {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-text-main);
}

.admin-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.admin-toolbar input,
.admin-toolbar select {
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--color-border-muted);
  outline: none;
  font-size: 14px;
  background: var(--color-bg-white);
}

.admin-toolbar input:focus,
.admin-toolbar select:focus {
  border-color: var(--color-ap-focus-border);
}

.admin-toolbar button,
.primary-btn,
.ghost-btn,
.danger-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s ease;
}

.admin-toolbar button,
.primary-btn {
  background: var(--color-ap-btn-dark-bg);
  color: white;
}

.ghost-btn {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}

.danger-btn {
  background: var(--color-ap-danger-btn-bg);
  color: var(--color-ap-danger-btn-text);
}

.primary-btn:hover,
.ghost-btn:hover,
.danger-btn:hover,
.admin-toolbar button:hover {
  transform: translateY(-1px);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1280px;
}

.admin-table th,
.admin-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 14px;
}

.admin-table td a.ghost-btn,
.admin-table td button {
  white-space: nowrap;
}

.admin-table th {
  color: var(--color-text-sub);
  background: var(--color-ap-table-head-bg);
  font-weight: 800;
}

.admin-application-table {
  min-width: 1500px;
}

.admin-application-table tr.is-selected-row {
  background: var(--color-ap-row-selected-bg);
}

.admin-operation-type {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--color-ap-badge-indigo-bg);
  color: var(--color-ap-badge-indigo-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-operation-type.education {
  background: var(--color-ap-badge-purple-bg);
  color: var(--color-ap-badge-purple-text);
}

.admin-operation-type.organization {
  background: var(--color-ap-badge-teal-bg);
  color: var(--color-ap-badge-teal-text);
}

.admin-contact-cell {
  display: grid;
  min-width: 190px;
  gap: 4px;
}

.admin-contact-cell a,
.admin-application-detail a {
  color: var(--color-ap-link);
  font-weight: 700;
  text-decoration: none;
}

.admin-contact-cell span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.admin-application-status {
  min-width: 98px;
  padding: 8px 9px;
  border: 1px solid var(--color-border-muted);
  border-radius: 9px;
  outline: none;
  background: var(--color-bg-white);
  color: var(--color-text-sub);
  font-size: 12px;
  font-weight: 800;
}

.admin-application-status.new {
  border-color: var(--color-ap-status-new-border);
  background: var(--color-ap-status-new-bg);
  color: var(--color-ap-status-new-text);
}

.admin-application-status.reviewing {
  border-color: var(--color-ap-status-review-border);
  background: var(--color-ap-status-review-bg);
  color: var(--color-ap-status-review-text);
}

.admin-application-status.contacted {
  border-color: var(--color-ap-status-contact-border);
  background: var(--color-ap-status-contact-bg);
  color: var(--color-ap-status-contact-text);
}

.admin-application-status.closed {
  background: var(--color-bg-soft);
  color: var(--color-ap-status-closed-text);
}

.admin-application-status.created {
  border-color: var(--color-ap-status-created-border);
  background: var(--color-ap-success-bg);
  color: var(--color-ap-status-created-text);
}

.admin-application-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--color-ap-backdrop);
  backdrop-filter: blur(4px);
}

.admin-application-detail {
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--color-ap-detail-border);
  border-radius: 18px;
  background: var(--color-ap-surface-soft);
  box-shadow: 0 28px 80px var(--color-ap-detail-shadow);
  animation: admin-detail-enter 160ms ease-out;
}

@keyframes admin-detail-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.admin-application-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-ap-detail-divider);
}

.admin-application-detail__header span,
.admin-application-detail__grid span,
.admin-application-detail__notes > span {
  color: var(--color-ap-detail-label);
  font-size: 12px;
  font-weight: 750;
}

.admin-application-detail__header h3 {
  margin: 6px 0 0;
  font-size: 22px;
}

.admin-application-detail__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 20px 0;
}

.admin-application-detail__grid > div {
  display: grid;
  gap: 7px;
}

.admin-application-detail__grid strong,
.admin-application-detail__grid a {
  overflow-wrap: anywhere;
  color: var(--color-text-main);
  font-size: 14px;
}

.admin-application-detail__notes {
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-white);
}

.admin-application-detail__notes p {
  margin: 8px 0 0;
  color: var(--color-ap-notes-text);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.admin-application-detail__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.admin-application-detail__actions p {
  margin: 0;
  color: var(--color-ap-warning-text);
  font-size: 13px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .admin-application-detail {
    animation: none;
  }
}

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.role-badge.user {
  background: var(--color-border);
  color: var(--color-text-sub);
}

.role-badge.admin {
  background: var(--color-ap-badge-role-admin-bg);
  color: var(--color-accent-hover);
}

.status-on {
  color: var(--color-ap-status-created-text);
  font-weight: 700;
}

.status-off {
  color: var(--color-ap-danger-btn-text);
  font-weight: 700;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

.admin-table tr.is-moved-row {
  background: var(--color-ap-surface-soft);
}

.admin-title-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.admin-title-cell > span {
  font-weight: 800;
  color: var(--color-text-main);
}

.admin-moved-badge {
  width: fit-content;
  border-radius: 999px;
  background: var(--color-ap-badge-indigo-bg);
  color: var(--color-ap-badge-moved-text);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.admin-pagination button {
  border: none;
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.admin-pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 600;
}

.admin-table a.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-section h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-main);
}

@media (max-width: 1024px) {
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-application-detail-backdrop {
    padding: 10px;
  }

  .admin-application-detail {
    max-height: calc(100vh - 20px);
    padding: 18px;
    border-radius: 14px;
  }

  .admin-page {
    padding: 24px 14px 60px;
  }

  .admin-header h1 {
    font-size: 26px;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-section {
    padding: 18px;
  }

  .admin-toolbar {
    flex-direction: column;
  }

  .admin-toolbar input,
  .admin-toolbar select,
  .admin-toolbar button {
    width: 100%;
  }

  .admin-application-detail__grid {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] {
  --color-ap-btn-dark-bg: rgb(51, 65, 85);
  --color-ap-success-bg: rgb(15, 46, 36);
  --color-ap-success-text: rgb(110, 231, 183);
  --color-ap-danger-bg: rgb(56, 24, 24);
  --color-ap-danger-text: rgb(252, 165, 165);
  --color-ap-shadow-card: rgba(0, 0, 0, 0.35);
  --color-ap-surface-soft: rgb(30, 41, 59);
  --color-ap-focus-border: rgb(129, 140, 248);
  --color-ap-danger-btn-bg: rgb(64, 30, 30);
  --color-ap-danger-btn-text: rgb(248, 113, 113);
  --color-ap-table-head-bg: rgb(30, 41, 59);
  --color-ap-row-selected-bg: rgb(30, 41, 64);
  --color-ap-badge-indigo-bg: rgba(99, 102, 241, 0.18);
  --color-ap-badge-indigo-text: rgb(165, 180, 252);
  --color-ap-badge-purple-bg: rgba(168, 85, 247, 0.18);
  --color-ap-badge-purple-text: rgb(216, 180, 254);
  --color-ap-badge-teal-bg: rgba(20, 184, 166, 0.15);
  --color-ap-badge-teal-text: rgb(94, 234, 212);
  --color-ap-link: rgb(129, 140, 248);
  --color-ap-status-new-border: rgba(59, 130, 246, 0.4);
  --color-ap-status-new-bg: rgba(59, 130, 246, 0.12);
  --color-ap-status-new-text: rgb(147, 197, 253);
  --color-ap-status-review-border: rgba(245, 158, 11, 0.4);
  --color-ap-status-review-bg: rgba(245, 158, 11, 0.12);
  --color-ap-status-review-text: rgb(252, 211, 77);
  --color-ap-status-contact-border: rgba(34, 197, 94, 0.4);
  --color-ap-status-contact-bg: rgba(34, 197, 94, 0.12);
  --color-ap-status-contact-text: rgb(134, 239, 172);
  --color-ap-status-closed-text: rgb(148, 163, 184);
  --color-ap-status-created-border: rgba(52, 211, 153, 0.4);
  --color-ap-status-created-text: rgb(110, 231, 183);
  --color-ap-backdrop: rgba(2, 6, 18, 0.7);
  --color-ap-detail-border: rgb(51, 65, 85);
  --color-ap-detail-shadow: rgba(0, 0, 0, 0.55);
  --color-ap-detail-divider: rgb(51, 65, 85);
  --color-ap-detail-label: rgb(148, 163, 184);
  --color-ap-notes-text: rgb(203, 213, 225);
  --color-ap-warning-text: rgb(251, 191, 36);
  --color-ap-badge-role-admin-bg: rgba(139, 92, 246, 0.22);
  --color-ap-badge-moved-text: rgb(165, 180, 252);
}
.organizer-code-manager {
  padding: 0 0 72px;
}

.organizer-code-manager__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.organizer-code-manager__eyebrow {
  color: #5061f5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.organizer-code-manager h2 {
  margin: 8px 0 0;
  color: #17213a;
  font-size: 28px;
  line-height: 1.2;
}

.organizer-code-manager__layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.38fr) minmax(0, 0.62fr);
  gap: 18px;
}

.organizer-code-manager__form,
.organizer-code-manager__item,
.organizer-code-manager__empty {
  border: 1px solid #e1e6f4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(32, 45, 74, 0.06);
}

.organizer-code-manager__form {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
}

.organizer-code-manager__form-title,
.organizer-code-manager__item-main,
.organizer-code-manager__actions {
  display: flex;
  align-items: center;
}

.organizer-code-manager__form-title {
  justify-content: space-between;
  color: #1c2843;
}

.organizer-code-manager__form-title button,
.organizer-code-manager__actions button,
.organizer-code-manager__issued button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dce3f2;
  border-radius: 8px;
  background: #fff;
  color: #4d5b73;
  font-weight: 750;
  cursor: pointer;
}

.organizer-code-manager__form-title button {
  width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
}

.organizer-code-manager__form label {
  display: grid;
  gap: 7px;
  color: #4a5870;
  font-size: 12px;
  font-weight: 750;
}

.organizer-code-manager__form input,
.organizer-code-manager__form textarea,
.organizer-code-manager__form select {
  width: 100%;
  border: 1px solid #dce3f2;
  border-radius: 8px;
  background: #fbfcff;
  color: #1c2843;
  padding: 11px 12px;
  font: inherit;
  outline: none;
}

.organizer-code-manager__form textarea {
  resize: vertical;
  min-height: 96px;
}

.organizer-code-manager__form input:focus,
.organizer-code-manager__form textarea:focus,
.organizer-code-manager__form select:focus {
  border-color: #8ea1ff;
  box-shadow: 0 0 0 4px rgba(80, 97, 245, 0.1);
}

.organizer-code-manager__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.organizer-code-manager__form > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #5061f5;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.organizer-code-manager__form > button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.organizer-code-manager__issued {
  display: grid;
  gap: 8px;
  border: 1px solid #cfd8ff;
  border-radius: 8px;
  background: #f4f6ff;
  padding: 12px;
}

.organizer-code-manager__issued span {
  color: #5061f5;
  font-size: 12px;
  font-weight: 800;
}

.organizer-code-manager__issued code {
  overflow-wrap: anywhere;
  color: #17213a;
  font-size: 15px;
  font-weight: 800;
}

.organizer-code-manager__issued button {
  justify-content: center;
  min-height: 34px;
}

.organizer-code-manager__message {
  margin: 0;
  color: #25825a;
  font-size: 13px;
  font-weight: 700;
}

.organizer-code-manager__message--error {
  color: #c23b3b;
}

.organizer-code-manager__list {
  display: grid;
  align-content: start;
  gap: 12px;
}

.organizer-code-manager__item {
  padding: 18px;
}

.organizer-code-manager__item-main {
  justify-content: space-between;
  gap: 14px;
}

.organizer-code-manager__item-main strong {
  color: #17213a;
  font-size: 16px;
}

.organizer-code-manager__item-main p {
  margin: 6px 0 0;
  color: #6d7890;
  font-size: 13px;
  line-height: 1.5;
}

.organizer-code-manager__status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
}

.organizer-code-manager__status--active {
  background: #eaf8f1;
  color: #218357;
}

.organizer-code-manager__status--expired,
.organizer-code-manager__status--used_up {
  background: #fff4df;
  color: #9d6a18;
}

.organizer-code-manager__status--revoked {
  background: #f1f3f8;
  color: #79849a;
}

.organizer-code-manager__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.organizer-code-manager__meta span {
  border-radius: 999px;
  background: #f4f6fb;
  color: #59677f;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.organizer-code-manager__actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.organizer-code-manager__actions button {
  min-height: 34px;
  padding: 0 11px;
}

.organizer-code-manager__empty {
  padding: 28px;
  color: #6d7890;
  text-align: center;
}

@media (max-width: 900px) {
  .organizer-code-manager__layout,
  .organizer-code-manager__form-grid {
    grid-template-columns: 1fr;
  }
}
.contact-page {
  min-height: 100vh;
  background: #f7f8fc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.contact-container {
  width: 100%;
  max-width: 600px;
}

.contact-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.contact-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 32px;
}

.contact-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

.value {
  font-size: 16px;
  color: #111827;
  font-weight: 500;
}

.link {
  color: #4f46e5;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}.notice-page {
  min-height: 100vh;
  background: #f7f8fc;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.notice-container {
  width: 100%;
  max-width: 700px;
}

.notice-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #111827;
}

.notice-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 32px;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.notice-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
}

.notice-item:hover {
  transform: translateY(-2px);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notice-title-text {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.notice-date {
  font-size: 13px;
  color: #9ca3af;
}

.notice-content {
  margin-top: 14px;
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
}:root {
  --color-pep-glow-1: rgba(99, 102, 241, 0.08);
  --color-pep-glow-2: rgba(59, 130, 246, 0.07);
  --color-pep-page-bg-1: rgb(248, 250, 252);
  --color-pep-page-bg-2: rgb(245, 247, 251);
  --color-pep-hint: rgb(152, 162, 179);
  --color-pep-state-text: rgb(71, 84, 103);
  --color-pep-accent: rgb(79, 70, 229);
  --color-pep-muted-2: rgb(102, 112, 133);
  --color-pep-card-bg: rgba(255, 255, 255, 0.92);
  --color-pep-card-border: rgba(226, 232, 240, 0.95);
  --color-pep-shadow-05: rgba(15, 23, 42, 0.05);
  --color-pep-shadow-03: rgba(15, 23, 42, 0.03);
  --color-pep-badge-bg: rgb(238, 242, 255);
  --color-pep-badge-border: rgb(199, 210, 254);
  --color-pep-badge-text: rgb(67, 56, 202);
  --color-pep-label: rgb(52, 64, 84);
  --color-pep-input-border: rgb(208, 213, 221);
  --color-pep-input-hover-border: rgb(184, 193, 204);
  --color-pep-focus-accent: rgb(99, 102, 241);
  --color-pep-focus-ring: rgba(99, 102, 241, 0.12);
  --color-pep-primary-grad-1: rgb(17, 24, 39);
  --color-pep-primary-grad-2: rgb(49, 46, 129);
  --color-pep-primary-shadow: rgba(17, 24, 39, 0.18);
  --color-pep-secondary-hover-bg: rgb(249, 250, 251);
  --color-pep-add-card-shadow: rgba(17, 24, 39, 0.14);
  --color-pep-chip-bg: rgb(248, 250, 252);
  --color-pep-danger-bg: rgb(254, 242, 242);
  --color-pep-danger-border: rgb(254, 202, 202);
  --color-pep-card-grad-2: rgb(251, 252, 255);
  --color-pep-readonly-accent: rgb(129, 140, 248);
  --color-pep-toast-shadow: rgba(15, 23, 42, 0.16);
}

.portfolio-edit-page {
  min-height: 100vh;
  padding: 56px 20px 120px;
  background:
    radial-gradient(circle at top left, var(--color-pep-glow-1), transparent 26%),
    radial-gradient(circle at top right, var(--color-pep-glow-2), transparent 24%),
    linear-gradient(180deg, var(--color-pep-page-bg-1) 0%, var(--color-pep-page-bg-2) 100%);
}

.portfolio-edit-shell {
  max-width: 1100px;
  margin: 0 auto;
}

.portfolio-field-hint {
  font-size: 12px;
  color: var(--color-pep-hint);
}

.portfolio-edit-page-state {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--color-pep-page-bg-1);
  font-size: 16px;
  color: var(--color-pep-state-text);
}

.portfolio-edit-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.portfolio-edit-eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pep-accent);
}

.portfolio-edit-title {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text-main);
}

.portfolio-edit-description {
  margin: 12px 0 0;
  max-width: 680px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-pep-muted-2);
}

.portfolio-edit-top-actions,
.portfolio-edit-bottom-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portfolio-edit-section {
  margin-bottom: 22px;
  padding: 28px;
  border-radius: 28px;
  background: var(--color-pep-card-bg);
  border: 1px solid var(--color-pep-card-border);
  box-shadow:
    0 10px 30px var(--color-pep-shadow-05),
    0 2px 10px var(--color-pep-shadow-03);
  backdrop-filter: blur(10px);
}

.portfolio-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.portfolio-section-header h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
}

.portfolio-section-header p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.portfolio-summary-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-pep-badge-bg);
  border: 1px solid var(--color-pep-badge-border);
  color: var(--color-pep-badge-text);
  font-size: 13px;
  font-weight: 700;
}

.portfolio-form-grid {
  display: grid;
  gap: 18px;
}

.portfolio-form-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.portfolio-field-full {
  grid-column: 1 / -1;
}

.portfolio-field-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-pep-label);
}

.portfolio-field input,
.portfolio-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-pep-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  padding: 15px 16px;
  font-size: 15px;
  color: var(--color-text-main);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.portfolio-field input::placeholder,
.portfolio-field textarea::placeholder {
  font-size: 14px;
  color: var(--color-pep-hint);
}

.portfolio-field textarea {
  resize: vertical;
  min-height: 132px;
  line-height: 1.65;
}

.portfolio-field input:hover,
.portfolio-field textarea:hover {
  border-color: var(--color-pep-input-hover-border);
}

.portfolio-field input:focus,
.portfolio-field textarea:focus {
  border-color: var(--color-pep-focus-accent);
  box-shadow: 0 0 0 5px var(--color-pep-focus-ring);
  background: var(--color-bg-white);
}

.portfolio-add-card-button,
.portfolio-primary-button,
.portfolio-secondary-button,
.portfolio-chip-button,
.portfolio-danger-button {
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.portfolio-primary-button {
  padding: 14px 20px;
  color: var(--color-text-on-brand);
  background: linear-gradient(135deg, var(--color-pep-primary-grad-1) 0%, var(--color-pep-primary-grad-2) 100%);
  box-shadow: 0 12px 24px var(--color-pep-primary-shadow);
}

.portfolio-primary-button:hover {
  opacity: 0.97;
}

.portfolio-primary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.portfolio-secondary-button {
  padding: 13px 18px;
  border: 1px solid var(--color-pep-input-border);
  background: var(--color-bg-white);
  color: var(--color-pep-label);
}

.portfolio-secondary-button:hover {
  background: var(--color-pep-secondary-hover-bg);
}

.portfolio-add-card-button {
  padding: 13px 18px;
  background: var(--color-pep-primary-grad-1);
  color: var(--color-bg-white);
  box-shadow: 0 10px 22px var(--color-pep-add-card-shadow);
}

.portfolio-chip-button {
  padding: 10px 14px;
  background: var(--color-pep-chip-bg);
  border: 1px solid var(--color-pep-input-border);
  color: var(--color-pep-label);
}

.portfolio-chip-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.portfolio-danger-button {
  padding: 10px 14px;
  background: var(--color-pep-danger-bg);
  border: 1px solid var(--color-pep-danger-border);
  color: var(--color-danger);
}

.portfolio-card-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.portfolio-editor-card {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-pep-card-grad-2) 100%);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px var(--color-pep-shadow-05);
}

.portfolio-editor-card--readonly {
  background: var(--color-pep-page-bg-1);
  border-color: var(--color-pep-badge-border);
  border-left: 3px solid var(--color-pep-readonly-accent);
  box-shadow: none;
  opacity: 0.85;
}

.portfolio-readonly-badge {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-pep-badge-bg);
  color: var(--color-pep-accent);
  border: 1px solid var(--color-pep-badge-border);
}

.portfolio-readonly-role {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand-icon);
}

.portfolio-readonly-desc {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  white-space: pre-line;
}

.portfolio-gather-section {
  border-left: none;
}

.portfolio-gather-badge {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--color-pep-badge-bg);
  color: var(--color-pep-accent);
  border: 1.5px solid var(--color-pep-badge-border);
}

.portfolio-editor-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.portfolio-card-order {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-pep-focus-accent);
}

.portfolio-editor-card-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text-main);
}

.portfolio-editor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-empty-state {
  padding: 44px 24px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-pep-card-grad-2) 100%);
  border: 1px dashed var(--color-border-strong);
}

.portfolio-empty-state strong {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--color-text-main);
}

.portfolio-empty-state p {
  margin: 0 0 20px;
  color: var(--color-pep-muted-2);
  font-size: 14px;
  line-height: 1.7;
}

.portfolio-edit-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
  padding: 18px 20px;
  border: 1px solid var(--color-pep-card-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  box-shadow:
    0 10px 24px var(--color-pep-shadow-05),
    0 2px 8px var(--color-pep-shadow-03);
}

.portfolio-edit-bottom-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
}

.portfolio-edit-bottom-copy p {
  margin: 0;
  font-size: 14px;
  color: var(--color-pep-muted-2);
}

.portfolio-edit-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  min-width: 240px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 18px 40px var(--color-pep-toast-shadow);
}

.portfolio-edit-toast.success {
  background: var(--color-pep-primary-grad-1);
}

.portfolio-edit-toast.error {
  background: var(--color-danger);
}

@media (max-width: 900px) {
  .portfolio-edit-topbar,
  .portfolio-section-header,
  .portfolio-editor-card-top,
  .portfolio-edit-bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-form-grid.two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .portfolio-edit-page {
    padding: 28px 16px 90px;
  }

  .portfolio-edit-title {
    font-size: 30px;
  }

  .portfolio-edit-section {
    padding: 20px;
    border-radius: 22px;
  }

  .portfolio-editor-card {
    padding: 18px;
  }

  .portfolio-field input,
  .portfolio-field textarea {
    font-size: 16px;
    padding: 13px 14px;
    border-radius: 14px;
  }

  .portfolio-edit-bottom-actions,
  .portfolio-edit-top-actions {
    width: 100%;
  }

  .portfolio-primary-button,
  .portfolio-secondary-button {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .portfolio-edit-title {
    font-size: 26px;
  }

  .portfolio-edit-toast {
    top: 16px;
    right: 16px;
    left: 16px;
    min-width: auto;
    max-width: none;
  }

  .portfolio-edit-bottom-actions,
  .portfolio-edit-top-actions {
    flex-direction: column;
  }

  .portfolio-primary-button,
  .portfolio-secondary-button {
    width: 100%;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-pep-glow-1: rgba(99, 102, 241, 0.16);
  --color-pep-glow-2: rgba(96, 165, 250, 0.12);
  --color-pep-page-bg-1: rgb(15, 23, 42);
  --color-pep-page-bg-2: rgb(11, 15, 26);
  --color-pep-hint: var(--color-text-placeholder);
  --color-pep-state-text: var(--color-text-muted);
  --color-pep-accent: rgb(129, 140, 248);
  --color-pep-muted-2: var(--color-text-muted);
  --color-pep-card-bg: rgba(30, 41, 59, 0.8);
  --color-pep-card-border: var(--color-border);
  --color-pep-shadow-05: rgba(0, 0, 0, 0.25);
  --color-pep-shadow-03: rgba(0, 0, 0, 0.2);
  --color-pep-badge-bg: rgba(129, 140, 248, 0.16);
  --color-pep-badge-border: rgba(129, 140, 248, 0.35);
  --color-pep-badge-text: rgb(199, 210, 254);
  --color-pep-label: var(--color-text-sub);
  --color-pep-input-border: var(--color-border);
  --color-pep-input-hover-border: var(--color-border-strong);
  --color-pep-focus-accent: rgb(129, 140, 248);
  --color-pep-focus-ring: rgba(129, 140, 248, 0.22);
  --color-pep-primary-grad-1: rgb(30, 41, 59);
  --color-pep-primary-grad-2: rgb(49, 46, 129);
  --color-pep-primary-shadow: rgba(0, 0, 0, 0.35);
  --color-pep-secondary-hover-bg: var(--color-bg-elevated-dark);
  --color-pep-add-card-shadow: rgba(0, 0, 0, 0.3);
  --color-pep-chip-bg: var(--color-bg-soft);
  --color-pep-danger-bg: rgba(248, 113, 113, 0.12);
  --color-pep-danger-border: rgba(248, 113, 113, 0.35);
  --color-pep-card-grad-2: var(--color-bg-elevated-dark);
  --color-pep-readonly-accent: rgb(129, 140, 248);
  --color-pep-toast-shadow: rgba(0, 0, 0, 0.4);
}
:root {
  --color-rp-glow: rgba(73, 101, 255, 0.09);
  --color-rp-page-bg-1: rgb(247, 248, 252);
  --color-rp-studio-border: rgba(229, 234, 255, 0.96);
  --color-rp-studio-grad-1: rgba(255, 255, 255, 0.98);
  --color-rp-studio-grad-2: rgba(247, 249, 255, 0.96);
  --color-rp-studio-shadow: rgba(26, 38, 90, 0.08);
  --color-rp-eyebrow-bg: rgb(237, 242, 255);
  --color-rp-title: rgb(15, 23, 42);
  --color-rp-body: rgb(72, 85, 107);
  --color-rp-stat-border: rgb(238, 240, 248);
  --color-rp-stat-bg: rgb(248, 249, 255);
  --color-rp-stat-label: rgb(132, 146, 166);
  --color-rp-finder-border: rgb(231, 235, 243);
  --color-rp-finder-shadow: rgba(26, 38, 90, 0.07);
  --color-rp-search-border: rgb(223, 229, 242);
  --color-rp-search-bg: rgb(249, 250, 252);
  --color-rp-search-focus-border: rgb(207, 216, 255);
  --color-rp-search-focus-ring: rgba(73, 101, 255, 0.08);
  --color-rp-search-icon: rgb(123, 136, 177);
  --color-rp-placeholder: rgb(152, 162, 179);
  --color-rp-clear-hover-bg: rgb(238, 242, 247);
  --color-rp-clear-hover-text: rgb(75, 85, 99);
  --color-rp-filter-title: rgb(51, 65, 85);
  --color-rp-filter-hint: rgb(138, 148, 166);
  --color-rp-select-border: rgb(220, 227, 255);
  --color-rp-select-bg: rgb(251, 252, 255);
  --color-rp-select-hover-border: rgb(196, 206, 255);
  --color-rp-select-focus-border: rgb(185, 198, 255);
  --color-rp-filter-divider: rgb(237, 240, 246);
  --color-rp-verified-border: rgb(187, 247, 208);
  --color-rp-verified-bg: rgb(236, 253, 245);
  --color-rp-verified-text: rgb(4, 120, 87);
  --color-rp-verified-hover-border: rgb(52, 211, 153);
  --color-rp-verified-hover-bg: rgb(209, 250, 229);
  --color-rp-verified-hover-text: rgb(6, 95, 70);
  --color-rp-tag-border: rgb(225, 230, 242);
  --color-rp-tag-text: rgb(95, 104, 122);
  --color-rp-tag-hover-border: rgb(212, 219, 235);
  --color-rp-tag-hover-bg: rgb(246, 248, 252);
  --color-rp-reset-border: rgb(225, 230, 242);
  --color-rp-reset-bg: rgb(248, 250, 252);
  --color-rp-reset-text: rgb(100, 116, 139);
  --color-rp-reset-hover-bg: rgb(243, 246, 255);
  --color-rp-rec-border: rgb(234, 237, 255);
  --color-rp-rec-grad-1: rgb(246, 248, 255);
  --color-rp-rec-card-border: rgb(231, 235, 243);
  --color-rp-rec-hover-border: rgb(197, 206, 255);
  --color-rp-rec-hover-shadow: rgba(73, 101, 255, 0.1);
  --color-rp-rank-2: rgb(124, 58, 237);
  --color-rp-rank-3: rgb(8, 145, 178);
  --color-rp-avatar-bg: rgb(241, 244, 249);
  --color-rp-spotlight-border: rgb(238, 240, 248);
  --color-rp-spotlight-shadow: rgba(26, 38, 90, 0.04);
  --color-rp-spotlight-title: rgb(4, 120, 87);
  --color-rp-spotlight-card-border: rgb(233, 237, 246);
  --color-rp-spotlight-card-bg: rgb(250, 251, 255);
  --color-rp-spotlight-hover-border: rgb(201, 212, 255);
  --color-rp-board-icon-bg: rgb(238, 243, 255);
  --color-rp-board-desc: rgb(105, 115, 134);
  --color-rp-more-border: rgb(220, 227, 255);
  --color-rp-more-shadow: rgba(26, 38, 90, 0.06);
  --color-rp-more-hover-border: rgb(196, 206, 255);
  --color-rp-more-hover-bg: rgb(243, 246, 255);
  --color-rp-more-hover-text: rgb(51, 71, 216);
  --color-rp-card-bg: rgba(255, 255, 255, 0.96);
  --color-rp-card-shadow: rgba(26, 38, 90, 0.055);
  --color-rp-card-hover-shadow: rgba(26, 38, 90, 0.1);
  --color-rp-avatar-img-border: rgb(233, 237, 246);
  --color-rp-badge-border: rgb(220, 227, 255);
  --color-rp-badge-bg: rgb(240, 244, 255);
  --color-rp-icon-btn-border: rgb(223, 229, 242);
  --color-rp-icon-btn-text: rgb(104, 113, 132);
  --color-rp-icon-hover-border: rgb(239, 207, 223);
  --color-rp-icon-hover-bg: rgb(255, 245, 250);
  --color-rp-icon-hover-text: rgb(201, 68, 126);
  --color-rp-icon-active-border: rgb(239, 191, 215);
  --color-rp-icon-active-bg: rgb(255, 234, 244);
  --color-rp-icon-active-text: rgb(217, 50, 124);
  --color-rp-bio-border: rgb(238, 241, 246);
  --color-rp-bio-bg: rgb(250, 251, 255);
  --color-rp-bio-label: rgb(123, 136, 177);
  --color-rp-bio-text: rgb(79, 91, 111);
  --color-rp-tag-chip-bg: rgb(243, 245, 249);
  --color-rp-tag-chip-text: rgb(104, 113, 132);
  --color-rp-tag-more-bg: rgb(238, 243, 255);
  --color-rp-state-border: rgb(233, 237, 246);
  --color-rp-state-shadow: rgba(26, 38, 90, 0.045);
  --color-rp-state-text: rgb(105, 115, 134);
  --color-rp-error-text: rgb(180, 35, 24);
  --color-rp-error-border: rgb(244, 199, 192);
  --color-rp-error-bg: rgb(255, 247, 246);
  --color-rp-skeleton-grad: rgb(238, 241, 247);
  --color-rp-network-border: rgb(232, 236, 255);
  --color-rp-network-grad-1: rgb(245, 247, 255);
  --color-rp-network-icon-bg: rgb(237, 242, 255);
  --color-rp-network-card-border: rgb(237, 242, 255);
  --color-rp-collab-1-bg: rgb(219, 234, 254);
  --color-rp-collab-1-text: rgb(30, 64, 175);
  --color-rp-collab-2-bg: rgb(243, 244, 246);
  --color-rp-collab-2-text: rgb(107, 114, 128);
}

.recruit-page {
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--color-rp-glow), transparent 34%),
    linear-gradient(180deg, var(--color-rp-page-bg-1) 0%, var(--color-bg-white) 44%);
  color: var(--color-text-main);
}

.recruit-page * {
  box-sizing: border-box;
}

.recruit-page button,
.recruit-page input,
.recruit-page select {
  font-family: inherit;
}

.recruit-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 96px;
}

.recruit-studio {
  min-height: 342px;
  padding: 34px;
  border: 1px solid var(--color-rp-studio-border);
  border-radius: 34px;
  background:
    linear-gradient(135deg, var(--color-rp-studio-grad-1) 0%, var(--color-rp-studio-grad-2) 100%);
  box-shadow: 0 24px 64px var(--color-rp-studio-shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  gap: 30px;
  align-items: stretch;
}

.recruit-studio__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recruit-eyebrow {
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-rp-eyebrow-bg);
  color: var(--color-brand-deep);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.recruit-studio h1 {
  margin: 0;
  color: var(--color-rp-title);
  font-size: 50px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.072em;
  word-break: keep-all;
}

.recruit-studio h1 strong {
  color: var(--color-brand-icon);
}

.recruit-studio p {
  max-width: 540px;
  margin: 20px 0 0;
  color: var(--color-rp-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  word-break: keep-all;
}

.recruit-hero-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.recruit-hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--color-rp-stat-border);
  border-radius: 16px;
  background: var(--color-rp-stat-bg);
}

.recruit-hero-stat svg {
  color: var(--color-brand-icon);
  flex-shrink: 0;
}

.recruit-hero-stat strong {
  display: block;
  font-size: 22px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.05em;
  line-height: 1;
}

.recruit-hero-stat small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-rp-stat-label);
  margin-top: 3px;
}

.recruit-finder {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-rp-finder-border);
  border-radius: 28px;
  background: var(--color-bg-white);
  box-shadow: 0 16px 42px var(--color-rp-finder-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recruit-search-box {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--color-rp-search-border);
  border-radius: 18px;
  background: var(--color-rp-search-bg);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.recruit-search-box:focus-within {
  border-color: var(--color-rp-search-focus-border);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 4px var(--color-rp-search-focus-ring);
}

.recruit-search-box svg {
  flex: 0 0 auto;
  color: var(--color-rp-search-icon);
}

.recruit-search-box input {
  width: 100%;
  min-width: 0;
  height: 54px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 750;
  line-height: 54px;
  appearance: none;
  -webkit-appearance: none;
}

.recruit-search-box input::placeholder {
  color: var(--color-rp-placeholder);
  font-size: 14px;
  font-weight: 700;
}

.recruit-search-clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-rp-placeholder);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.recruit-search-clear:hover {
  background: var(--color-rp-clear-hover-bg);
  color: var(--color-rp-clear-hover-text);
}

.recruit-filter-section {
  margin-top: 18px;
}

.recruit-filter-section--primary {
  margin-top: 20px;
}

.recruit-filter-title {
  margin-bottom: 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.recruit-filter-title span {
  color: var(--color-rp-filter-title);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
}

.recruit-filter-title small {
  color: var(--color-rp-filter-hint);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.recruit-select-wrap {
  position: relative;
  width: 100%;
  height: 46px;
  display: block;
}

.recruit-select-wrap select {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 15px;
  border: 1px solid var(--color-rp-select-border);
  border-radius: 16px;
  background: var(--color-rp-select-bg);
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.recruit-select-wrap select:hover {
  border-color: var(--color-rp-select-hover-border);
  background: var(--color-bg-white);
}

.recruit-select-wrap select:focus {
  border-color: var(--color-rp-select-focus-border);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 4px var(--color-rp-search-focus-ring);
}

.recruit-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--color-rp-search-icon);
  pointer-events: none;
  transform: translateY(-50%);
}

.recruit-filter-divider {
  height: 1px;
  margin: 18px 0 0;
  background: var(--color-rp-filter-divider);
}

.recruit-verified-filter {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-rp-verified-border);
  border-radius: 15px;
  background: var(--color-rp-verified-bg);
  color: var(--color-rp-verified-text);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.recruit-verified-filter:hover,
.recruit-verified-filter.is-active {
  transform: translateY(-2px);
  border-color: var(--color-rp-verified-hover-border);
  background: var(--color-rp-verified-hover-bg);
  color: var(--color-rp-verified-hover-text);
}

.recruit-suggest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recruit-suggest-tags button {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-rp-tag-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--color-rp-tag-text);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.recruit-suggest-tags button:hover,
.recruit-suggest-tags button.is-active {
  transform: translateY(-2px);
  border-color: var(--color-rp-tag-hover-border);
  background: var(--color-rp-tag-hover-bg);
  color: var(--color-rp-filter-title);
}

.recruit-filter-reset {
  width: 100%;
  height: 40px;
  margin-top: 18px;
  border: 1px solid var(--color-rp-reset-border);
  border-radius: 14px;
  background: var(--color-rp-reset-bg);
  color: var(--color-rp-reset-text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.recruit-filter-reset:hover {
  border-color: var(--color-rp-search-focus-border);
  background: var(--color-rp-reset-hover-bg);
  color: var(--color-brand-strong);
}

/* ── Roadmap Recommendation ── */

.recruit-rec {
  margin-top: 20px;
  padding: 22px 24px;
  border: 1.5px solid var(--color-rp-rec-border);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--color-rp-rec-grad-1) 0%, var(--color-bg-white) 100%);
}

.recruit-rec__head {
  margin-bottom: 16px;
}

.recruit-rec__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 950;
  color: var(--color-text-main);
  margin: 0 0 4px;
}

.recruit-rec__title svg {
  color: var(--color-brand-icon);
  flex-shrink: 0;
}

.recruit-rec__subtitle {
  margin: 0;
  font-size: 12px;
  color: var(--color-rp-stat-label);
  font-weight: 700;
}

.recruit-rec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.recruit-rec__card {
  position: relative;
  padding: 16px;
  border: 1.5px solid var(--color-rp-rec-card-border);
  border-radius: 20px;
  background: var(--color-bg-white);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.recruit-rec__card:hover {
  transform: translateY(-3px);
  border-color: var(--color-rp-rec-hover-border);
  box-shadow: 0 8px 28px var(--color-rp-rec-hover-shadow);
}

.recruit-rec__rank {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 950;
  color: var(--color-bg-white);
  background: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.recruit-rec__card:nth-child(2) .recruit-rec__rank { background: var(--color-rp-rank-2); }
.recruit-rec__card:nth-child(3) .recruit-rec__rank { background: var(--color-rp-rank-3); }

.recruit-rec__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.recruit-rec__avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--color-rp-avatar-bg);
  flex-shrink: 0;
}

.recruit-rec__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recruit-rec__info {
  flex: 1;
  min-width: 0;
}

.recruit-rec__name {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recruit-rec__username {
  display: block;
  font-size: 12px;
  color: var(--color-rp-stat-label);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

.recruit-rec__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.recruit-rec__bio {
  margin: 0;
  font-size: 12px;
  color: var(--color-rp-bio-text);
  line-height: 1.65;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: keep-all;
}

.recruit-rec__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

/* ── Verified spotlight ── */
.recruit-spotlight {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--color-rp-spotlight-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 4px 16px var(--color-rp-spotlight-shadow);
}

.recruit-spotlight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.recruit-spotlight__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 950;
  color: var(--color-rp-spotlight-title);
}

.recruit-spotlight__title svg { color: var(--color-success); }

.recruit-spotlight__count {
  font-size: 13px;
  color: var(--color-rp-stat-label);
  font-weight: 700;
}

.recruit-spotlight__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.recruit-spotlight__scroll::-webkit-scrollbar { display: none; }

.recruit-spotlight__card {
  flex: 0 0 auto;
  width: 116px;
  padding: 14px 10px;
  border: 1px solid var(--color-rp-spotlight-card-border);
  border-radius: 18px;
  background: var(--color-rp-spotlight-card-bg);
  text-decoration: none;
  color: inherit;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.recruit-spotlight__card:hover {
  transform: translateY(-3px);
  border-color: var(--color-rp-spotlight-hover-border);
  box-shadow: 0 8px 24px var(--color-rp-rec-hover-shadow);
}

.recruit-spotlight__avatar {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-rp-avatar-bg);
  margin-bottom: 2px;
}

.recruit-spotlight__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recruit-spotlight__name {
  font-size: 13px;
  font-weight: 950;
  color: var(--color-text-main);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.recruit-spotlight__username {
  font-size: 11px;
  color: var(--color-rp-stat-label);
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.recruit-spotlight__field {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-rp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}

.recruit-board-head {
  margin: 30px 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.recruit-board-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recruit-board-head__icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: var(--color-rp-board-icon-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.recruit-board-head h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 25px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.recruit-board-head p {
  margin: 5px 0 0;
  color: var(--color-rp-board-desc);
  font-size: 14px;
  font-weight: 750;
}

.recruit-board-count {
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--color-rp-tag-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--color-rp-board-desc);
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 10px 26px var(--color-rp-state-shadow);
}

.recruit-board-count strong {
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 950;
}

.people-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.recruit-more-wrap {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.recruit-more-button {
  min-width: 150px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--color-rp-more-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--color-brand-strong);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px var(--color-rp-more-shadow);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.recruit-more-button:hover {
  transform: translateY(-2px);
  border-color: var(--color-rp-more-hover-border);
  background: var(--color-rp-more-hover-bg);
  color: var(--color-rp-more-hover-text);
}

.person-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--color-rp-rec-card-border);
  border-radius: 26px;
  background: var(--color-rp-card-bg);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 16px 42px var(--color-rp-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.person-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-rp-search-focus-border);
  box-shadow: 0 24px 58px var(--color-rp-card-hover-shadow);
}

.person-top {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.person-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.person-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-rp-avatar-bg);
  display: block;
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--color-rp-avatar-img-border);
  border-radius: inherit;
  display: block;
}

.person-meta {
  min-width: 0;
}

.person-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-name-link {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.person-name-link strong {
  max-width: 132px;
  color: var(--color-text-main);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -0.045em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-username {
  margin: 5px 0 0;
  color: var(--color-rp-board-desc);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-badge {
  flex: 0 1 auto;
  max-width: 122px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--color-rp-badge-border);
  border-radius: 999px;
  background: var(--color-rp-badge-bg);
  color: var(--color-brand-strong);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-rp-icon-btn-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-rp-icon-btn-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.icon-btn:hover:not(:disabled) {
  border-color: var(--color-rp-icon-hover-border);
  background: var(--color-rp-icon-hover-bg);
  color: var(--color-rp-icon-hover-text);
}

.icon-btn--message:hover:not(:disabled) {
  border-color: var(--color-rp-search-focus-border);
  background: var(--color-rp-reset-hover-bg);
  color: var(--color-brand-strong);
}

.icon-btn.is-active {
  border-color: var(--color-rp-icon-active-border);
  background: var(--color-rp-icon-active-bg);
  color: var(--color-rp-icon-active-text);
}

.icon-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.person-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.person-bio-wrap {
  padding: 12px 14px;
  border: 1px solid var(--color-rp-bio-border);
  border-radius: 16px;
  background: var(--color-rp-bio-bg);
}

.person-bio-label {
  display: block;
  margin-bottom: 6px;
  color: var(--color-rp-bio-label);
  font-size: 11px;
  font-weight: 950;
}

.person-bio {
  margin: 0;
  color: var(--color-rp-bio-text);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 700;
  word-break: keep-all;
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.tag-list {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.tag-chip {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--color-rp-tag-chip-bg);
  color: var(--color-rp-tag-chip-text);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}

.tag-chip--more {
  background: var(--color-rp-tag-more-bg);
  color: var(--color-brand-icon);
}

.recruit-empty-chip {
  display: none;
  color: var(--color-rp-placeholder);
}

.person-tag-row:has(.recruit-empty-chip) {
  display: none;
}

.recruit-state {
  min-height: 230px;
  padding: 48px 20px;
  border: 1px solid var(--color-rp-state-border);
  border-radius: 26px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-rp-state-shadow);
  text-align: center;
  color: var(--color-rp-state-text);
  font-size: 15px;
  font-weight: 750;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.recruit-state strong {
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 950;
}

.recruit-state p {
  margin: 10px 0 0;
  color: var(--color-rp-state-text);
  font-size: 14px;
  font-weight: 700;
}

.recruit-state-reset {
  height: 40px;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid var(--color-rp-search-focus-border);
  border-radius: 999px;
  background: var(--color-rp-reset-hover-bg);
  color: var(--color-brand-strong);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.recruit-state--error {
  color: var(--color-rp-error-text);
  border-color: var(--color-rp-error-border);
  background: var(--color-rp-error-bg);
}

.person-skeleton {
  min-height: 260px;
  padding: 20px;
  border: 1px solid var(--color-rp-state-border);
  border-radius: 26px;
  background: var(--color-bg-white);
}

.person-skeleton__avatar,
.person-skeleton__body span,
.person-skeleton__body strong,
.person-skeleton__body p {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-rp-skeleton-grad) 0%, var(--color-rp-page-bg-1) 50%, var(--color-rp-skeleton-grad) 100%);
  background-size: 220% 100%;
  animation: recruitSkeleton 1.2s ease-in-out infinite;
}

.person-skeleton__avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
}

.person-skeleton__body {
  margin-top: 18px;
}

.person-skeleton__body span {
  width: 86px;
  height: 13px;
}

.person-skeleton__body strong {
  width: 70%;
  height: 20px;
  margin-top: 10px;
}

.person-skeleton__body p {
  width: 100%;
  height: 13px;
  margin: 18px 0 0;
}

.person-skeleton__body p.is-short {
  width: 58%;
  margin-top: 10px;
}

@keyframes recruitSkeleton {
  0% {
    background-position: 220% 0;
  }

  100% {
    background-position: -220% 0;
  }
}

@media (max-width: 1080px) {
  .recruit-studio {
    grid-template-columns: 1fr;
  }

  .recruit-finder {
    max-width: 620px;
  }

  .people-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .recruit-page {
    background: var(--color-rp-page-bg-1);
  }

  .recruit-shell {
    padding: 14px 14px 96px;
  }

  .recruit-studio {
    min-height: auto;
    padding: 24px 20px;
    border-radius: 24px;
    background: var(--color-bg-white);
    box-shadow: none;
    gap: 22px;
  }

  .recruit-eyebrow {
    margin-bottom: 14px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .recruit-studio h1 {
    font-size: clamp(31px, 8.5vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.075em;
  }

  .recruit-studio p {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.65;
  }

  .recruit-finder {
    padding: 16px;
    border-radius: 20px;
    box-shadow: none;
    background: var(--color-rp-spotlight-card-bg);
  }

  .recruit-search-box {
    height: 52px;
    border-radius: 14px;
    background: var(--color-bg-white);
  }

  .recruit-search-box input {
    height: 52px;
    font-size: 16px;
    line-height: 52px;
  }

  .recruit-board-head {
    margin: 24px 0 14px;
    align-items: flex-start;
  }

  .recruit-board-head__icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .recruit-board-head h2 {
    font-size: 22px;
  }

  .recruit-board-head p {
    font-size: 13px;
    line-height: 1.45;
  }

  .recruit-board-count {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    box-shadow: none;
  }

  .people-board {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .recruit-hero-stats {
    margin-top: 20px;
    gap: 8px;
  }

  .recruit-hero-stat {
    padding: 10px 14px;
    border-radius: 14px;
  }

  .recruit-hero-stat strong { font-size: 18px; }

  .recruit-rec {
    padding: 16px;
    border-radius: 20px;
    margin-top: 16px;
  }

  .recruit-rec__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .recruit-rec__grid::-webkit-scrollbar { display: none; }

  .recruit-rec__card {
    flex: 0 0 calc(75vw - 40px);
    max-width: 280px;
    min-width: 220px;
    scroll-snap-align: start;
  }

  .recruit-spotlight {
    padding: 16px;
    border-radius: 20px;
    box-shadow: none;
  }

  .recruit-spotlight__card {
    width: 100px;
    padding: 12px 8px;
    border-radius: 16px;
  }

  .recruit-spotlight__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .person-card {
    padding: 16px;
    border-radius: 22px;
    box-shadow: none;
    gap: 10px;
  }

  .person-card:hover {
    transform: none;
    box-shadow: none;
  }

  .person-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .person-name-link strong {
    max-width: 140px;
    font-size: 16px;
  }

  .field-badge {
    max-width: 100px;
  }

  .person-bio {
    font-size: 13px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .person-skeleton {
    min-height: 230px;
    padding: 18px;
    border-radius: 22px;
    box-shadow: none;
  }

  .recruit-state {
    min-height: 210px;
    border-radius: 22px;
    box-shadow: none;
  }

}

@media (max-width: 420px) {
  .recruit-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .recruit-studio {
    padding: 22px 18px;
  }

  .person-card {
    padding: 16px;
  }

  .person-top {
    gap: 10px;
  }

  .person-profile {
    gap: 10px;
  }

  .person-avatar {
    width: 50px;
    height: 50px;
    border-radius: 17px;
  }

  .person-name-link strong {
    max-width: 104px;
  }

  .field-badge {
    max-width: 104px;
    height: 23px;
    padding: 0 8px;
    font-size: 10px;
  }

  .icon-btn {
    min-width: 36px;
    height: 36px;
    border-radius: 13px;
  }
}

/* ── 네트워크 추천 섹션 ───────────────────────────────── */

.recruit-network {
  margin: 24px 0;
  padding: 22px 24px;
  border: 1.5px solid var(--color-rp-network-border);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--color-rp-network-grad-1) 0%, var(--color-bg-white) 100%);
}

.recruit-network__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.recruit-network__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--color-rp-eyebrow-bg);
  color: var(--color-brand-icon);
  flex-shrink: 0;
  margin-top: 1px;
}

.recruit-network__title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 950;
  color: var(--color-text-main);
}

.recruit-network__sub {
  margin: 0;
  font-size: 12px;
  color: var(--color-rp-stat-label);
  font-weight: 700;
}

.recruit-network__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.recruit-network-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-rp-network-card-border);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.recruit-network-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-rp-spotlight-hover-border);
  box-shadow: 0 8px 24px var(--color-rp-rec-hover-shadow);
}

.recruit-network-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.recruit-network-card__name {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recruit-network-card__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.field-badge--sm {
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
}

.recruit-network-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-chip--xs {
  min-height: 22px;
  padding: 3px 7px;
  font-size: 10px;
}

.collab-badge {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.recruit-network-card .collab-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

.collab-badge--inline {
  display: inline-flex;
  align-items: center;
}

.collab-badge--1 {
  background: var(--color-rp-collab-1-bg);
  color: var(--color-rp-collab-1-text);
}

.collab-badge--2 {
  background: var(--color-rp-collab-2-bg);
  color: var(--color-rp-collab-2-text);
}

.recruit-network-skeleton {
  height: 130px;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--color-rp-skeleton-grad) 0%, var(--color-rp-page-bg-1) 50%, var(--color-rp-skeleton-grad) 100%);
  background-size: 220% 100%;
  animation: recruitSkeleton 1.2s ease-in-out infinite;
}

@media (max-width: 1080px) {
  .recruit-network__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .recruit-network {
    padding: 16px;
    border-radius: 18px;
  }

  .recruit-network__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-rp-glow: rgba(129, 140, 248, 0.16);
  --color-rp-page-bg-1: rgb(15, 23, 42);
  --color-rp-studio-border: rgb(51, 65, 85);
  --color-rp-studio-grad-1: rgba(30, 41, 59, 0.9);
  --color-rp-studio-grad-2: rgba(129, 140, 248, 0.08);
  --color-rp-studio-shadow: rgba(0, 0, 0, 0.35);
  --color-rp-eyebrow-bg: rgba(77, 93, 222, 0.2);
  --color-rp-title: var(--color-text-main);
  --color-rp-body: var(--color-text-sub);
  --color-rp-stat-border: rgb(51, 65, 85);
  --color-rp-stat-bg: var(--color-bg-elevated-dark);
  --color-rp-stat-label: var(--color-text-placeholder);
  --color-rp-finder-border: rgb(51, 65, 85);
  --color-rp-finder-shadow: rgba(0, 0, 0, 0.3);
  --color-rp-search-border: rgb(51, 65, 85);
  --color-rp-search-bg: var(--color-bg-soft);
  --color-rp-search-focus-border: rgba(129, 140, 248, 0.5);
  --color-rp-search-focus-ring: rgba(129, 140, 248, 0.18);
  --color-rp-search-icon: var(--color-text-placeholder);
  --color-rp-placeholder: var(--color-text-placeholder);
  --color-rp-clear-hover-bg: var(--color-bg-elevated-dark);
  --color-rp-clear-hover-text: var(--color-text-sub);
  --color-rp-filter-title: var(--color-text-sub);
  --color-rp-filter-hint: var(--color-text-placeholder);
  --color-rp-select-border: rgb(51, 65, 85);
  --color-rp-select-bg: var(--color-bg-soft);
  --color-rp-select-hover-border: rgba(129, 140, 248, 0.4);
  --color-rp-select-focus-border: rgba(129, 140, 248, 0.5);
  --color-rp-filter-divider: var(--color-border);
  --color-rp-verified-border: rgba(52, 211, 153, 0.35);
  --color-rp-verified-bg: rgba(4, 120, 87, 0.14);
  --color-rp-verified-text: rgb(52, 211, 153);
  --color-rp-verified-hover-border: rgb(52, 211, 153);
  --color-rp-verified-hover-bg: rgba(52, 211, 153, 0.2);
  --color-rp-verified-hover-text: rgb(110, 231, 183);
  --color-rp-tag-border: rgb(51, 65, 85);
  --color-rp-tag-text: var(--color-text-muted);
  --color-rp-tag-hover-border: rgb(71, 85, 105);
  --color-rp-tag-hover-bg: var(--color-bg-elevated-dark);
  --color-rp-reset-border: rgb(51, 65, 85);
  --color-rp-reset-bg: var(--color-bg-soft);
  --color-rp-reset-text: var(--color-text-muted);
  --color-rp-reset-hover-bg: rgba(129, 140, 248, 0.14);
  --color-rp-rec-border: rgba(129, 140, 248, 0.25);
  --color-rp-rec-grad-1: rgba(129, 140, 248, 0.1);
  --color-rp-rec-card-border: rgb(51, 65, 85);
  --color-rp-rec-hover-border: rgba(129, 140, 248, 0.5);
  --color-rp-rec-hover-shadow: rgba(129, 140, 248, 0.2);
  --color-rp-rank-2: rgb(167, 139, 250);
  --color-rp-rank-3: rgb(34, 211, 238);
  --color-rp-avatar-bg: var(--color-bg-elevated-dark);
  --color-rp-spotlight-border: rgb(51, 65, 85);
  --color-rp-spotlight-shadow: rgba(0, 0, 0, 0.3);
  --color-rp-spotlight-title: rgb(52, 211, 153);
  --color-rp-spotlight-card-border: rgb(51, 65, 85);
  --color-rp-spotlight-card-bg: var(--color-bg-elevated-dark);
  --color-rp-spotlight-hover-border: rgba(129, 140, 248, 0.5);
  --color-rp-board-icon-bg: rgba(73, 101, 255, 0.18);
  --color-rp-board-desc: var(--color-text-muted);
  --color-rp-more-border: rgb(51, 65, 85);
  --color-rp-more-shadow: rgba(0, 0, 0, 0.3);
  --color-rp-more-hover-border: rgba(129, 140, 248, 0.5);
  --color-rp-more-hover-bg: rgba(129, 140, 248, 0.14);
  --color-rp-more-hover-text: rgb(165, 180, 252);
  --color-rp-card-bg: rgba(30, 41, 59, 0.92);
  --color-rp-card-shadow: rgba(0, 0, 0, 0.35);
  --color-rp-card-hover-shadow: rgba(0, 0, 0, 0.45);
  --color-rp-avatar-img-border: rgb(51, 65, 85);
  --color-rp-badge-border: rgba(129, 140, 248, 0.4);
  --color-rp-badge-bg: rgba(129, 140, 248, 0.16);
  --color-rp-icon-btn-border: rgb(51, 65, 85);
  --color-rp-icon-btn-text: var(--color-text-muted);
  --color-rp-icon-hover-border: rgba(217, 50, 124, 0.35);
  --color-rp-icon-hover-bg: rgba(217, 50, 124, 0.12);
  --color-rp-icon-hover-text: rgb(244, 114, 182);
  --color-rp-icon-active-border: rgba(217, 50, 124, 0.4);
  --color-rp-icon-active-bg: rgba(217, 50, 124, 0.16);
  --color-rp-icon-active-text: rgb(244, 114, 182);
  --color-rp-bio-border: rgb(51, 65, 85);
  --color-rp-bio-bg: var(--color-bg-elevated-dark);
  --color-rp-bio-label: var(--color-text-placeholder);
  --color-rp-bio-text: var(--color-text-sub);
  --color-rp-tag-chip-bg: var(--color-bg-elevated-dark);
  --color-rp-tag-chip-text: var(--color-text-muted);
  --color-rp-tag-more-bg: rgba(73, 101, 255, 0.18);
  --color-rp-state-border: rgb(51, 65, 85);
  --color-rp-state-shadow: rgba(0, 0, 0, 0.3);
  --color-rp-state-text: var(--color-text-muted);
  --color-rp-error-text: rgb(248, 113, 113);
  --color-rp-error-border: rgba(248, 113, 113, 0.35);
  --color-rp-error-bg: rgba(248, 113, 113, 0.1);
  --color-rp-skeleton-grad: rgb(51, 65, 85);
  --color-rp-network-border: rgba(129, 140, 248, 0.25);
  --color-rp-network-grad-1: rgba(129, 140, 248, 0.1);
  --color-rp-network-icon-bg: rgba(73, 101, 255, 0.18);
  --color-rp-network-card-border: rgba(129, 140, 248, 0.2);
  --color-rp-collab-1-bg: rgba(30, 64, 175, 0.25);
  --color-rp-collab-1-text: rgb(147, 197, 253);
  --color-rp-collab-2-bg: var(--color-bg-elevated-dark);
  --color-rp-collab-2-text: var(--color-text-muted);
}
:root {
  --color-ccp-page-bg: rgb(247, 248, 252);
  --color-ccp-border: rgb(223, 229, 242);
  --color-ccp-back-text: rgb(75, 85, 99);
  --color-ccp-back-hover-bg: rgb(248, 250, 255);
  --color-ccp-card-border: rgb(233, 237, 246);
  --color-ccp-card-shadow: rgba(26, 38, 90, 0.05);
  --color-ccp-hero-desc: rgb(102, 112, 133);
  --color-ccp-balance-grad-2: rgb(238, 243, 255);
  --color-ccp-balance-amount: rgb(15, 23, 42);
  --color-ccp-icon-grad-1: rgb(129, 140, 248);
  --color-ccp-icon-shadow: rgba(83, 104, 223, 0.28);
  --color-ccp-card-desc: rgb(105, 115, 134);
  --color-ccp-package-border: rgb(228, 234, 255);
  --color-ccp-package-hover-border: rgb(199, 210, 255);
  --color-ccp-package-hover-shadow: rgba(26, 38, 90, 0.09);
  --color-ccp-recommended-border: rgb(158, 175, 255);
  --color-ccp-recommended-grad-1: rgb(251, 252, 255);
  --color-ccp-recommended-grad-2: rgb(245, 247, 255);
  --color-ccp-recommended-shadow: rgba(64, 84, 220, 0.1);
  --color-ccp-muted: rgb(152, 162, 179);
  --color-ccp-bonus-bg: rgba(83, 104, 223, 0.1);
  --color-ccp-package-bottom-border: rgb(237, 240, 247);
  --color-ccp-badge-shadow: rgba(64, 84, 220, 0.2);
  --color-ccp-state-border: rgb(216, 223, 240);
  --color-ccp-success-bg: rgb(236, 253, 243);
  --color-ccp-success-text: rgb(18, 183, 106);
  --color-ccp-fail-bg: rgb(254, 243, 242);
  --color-ccp-fail-text: rgb(240, 68, 56);
  --color-ccp-pending-bg: rgb(255, 250, 235);
  --color-ccp-pending-text: rgb(247, 144, 9);
  --color-ccp-balance-result-bg: rgb(245, 247, 255);
  --color-ccp-action-text: rgb(52, 64, 84);
}

.credit-charge-page {
  min-height: 100vh;
  padding: 30px 20px 88px;
  background: var(--color-ccp-page-bg);
  color: var(--color-text-main);
}

.credit-charge-page * {
  box-sizing: border-box;
}

.credit-charge-page button {
  font-family: inherit;
}

.credit-charge-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.credit-charge-back {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-ccp-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-ccp-back-text);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.credit-charge-back:hover {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-ccp-back-hover-bg);
}

.credit-charge-hero,
.credit-charge-card {
  border: 1px solid var(--color-ccp-card-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-ccp-card-shadow);
}

.credit-charge-hero {
  margin-top: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.credit-charge-kicker {
  width: fit-content;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.credit-charge-hero h1 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 36px;
  line-height: 1.16;
  font-weight: 950;
}

.credit-charge-hero p {
  margin: 10px 0 0;
  color: var(--color-ccp-hero-desc);
  font-size: 15px;
  font-weight: 700;
}

.credit-charge-balance {
  min-width: 220px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--color-ccp-back-hover-bg) 0%, var(--color-ccp-balance-grad-2) 100%);
}

.credit-charge-balance__label {
  display: block;
  margin-bottom: 14px;
  color: var(--color-brand-badge);
  font-size: 13px;
  font-weight: 950;
}

.credit-charge-balance__amount {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 10px;
  color: var(--color-ccp-balance-amount);
  line-height: 1;
  white-space: nowrap;
}

.credit-charge-balance__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-ccp-icon-grad-1) 0%, var(--color-brand-badge) 100%);
  color: var(--color-bg-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 12px var(--color-ccp-icon-shadow);
}

.credit-charge-balance__icon svg {
  width: 14px;
  height: 14px;
  fill: var(--color-bg-white);
}

.credit-charge-balance__amount strong {
  min-width: 0;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.credit-charge-balance__amount > span:last-child {
  flex: 0 0 auto;
  color: var(--color-brand-badge);
  font-size: 13px;
  font-weight: 950;
}

.credit-charge-card {
  margin-top: 16px;
  padding: 24px;
}

.credit-charge-card-header h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 22px;
  font-weight: 950;
}

.credit-charge-card-header p {
  margin: 8px 0 0;
  color: var(--color-ccp-card-desc);
  font-size: 14px;
  font-weight: 750;
}

.credit-charge-packages {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.credit-charge-package {
  position: relative;
  min-height: 224px;
  padding: 20px 17px 17px;
  border: 1px solid var(--color-ccp-package-border);
  border-radius: 18px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.credit-charge-package:hover {
  transform: translateY(-3px);
  border-color: var(--color-ccp-package-hover-border);
  box-shadow: 0 16px 36px var(--color-ccp-package-hover-shadow);
}

.credit-charge-package:disabled {
  cursor: wait;
  opacity: 0.68;
}

.credit-charge-package:disabled:hover {
  transform: none;
  box-shadow: none;
}

.credit-charge-package.is-recommended {
  border-color: var(--color-ccp-recommended-border);
  background: linear-gradient(180deg, var(--color-ccp-recommended-grad-1) 0%, var(--color-ccp-recommended-grad-2) 100%);
  box-shadow: 0 12px 28px var(--color-ccp-recommended-shadow);
}

.credit-charge-package-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.credit-charge-package-base {
  min-height: 20px;
  color: var(--color-ccp-muted);
  font-size: 13px;
  font-weight: 850;
}

.credit-charge-package-base s {
  text-decoration-thickness: 1.5px;
}

.credit-charge-package-base.is-placeholder {
  color: transparent;
  user-select: none;
}

.credit-charge-package-credits {
  margin-top: 5px;
  color: var(--color-text-main);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.8px;
}

.credit-charge-package-credits span {
  margin-left: 5px;
  color: var(--color-brand-badge);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

.credit-charge-package-bonus {
  min-height: 24px;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--color-ccp-bonus-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
}

.credit-charge-package-bonus.is-placeholder {
  background: transparent;
  color: transparent;
  user-select: none;
}

.credit-charge-package-bottom {
  padding-top: 15px;
  border-top: 1px solid var(--color-ccp-package-bottom-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.credit-charge-package-bottom em {
  color: var(--color-text-sub);
  font-size: 16px;
  font-style: normal;
  font-weight: 950;
}

.credit-charge-package-bottom span {
  color: var(--color-ccp-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.credit-charge-package-pay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.credit-charge-package-badge {
  position: absolute;
  top: 13px;
  right: 13px;
  height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-brand-strong);
  color: var(--color-bg-white);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 6px 14px var(--color-ccp-badge-shadow);
}

.credit-charge-state {
  margin-top: 20px;
  min-height: 120px;
  border: 1px dashed var(--color-ccp-state-border);
  border-radius: 16px;
  color: var(--color-ccp-hero-desc);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credit-payment-result {
  margin-top: 68px;
  padding: 42px 28px;
  border: 1px solid var(--color-ccp-card-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-ccp-card-shadow);
  text-align: center;
}

.credit-payment-result__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credit-payment-result__icon.is-success {
  background: var(--color-ccp-success-bg);
  color: var(--color-ccp-success-text);
}

.credit-payment-result__icon.is-fail {
  background: var(--color-ccp-fail-bg);
  color: var(--color-ccp-fail-text);
}

.credit-payment-result__icon.is-pending {
  background: var(--color-ccp-pending-bg);
  color: var(--color-ccp-pending-text);
}

.credit-payment-result h1 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 28px;
  font-weight: 950;
}

.credit-payment-result p {
  margin: 10px auto 0;
  max-width: 460px;
  color: var(--color-ccp-hero-desc);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.6;
}

.credit-payment-result__balance {
  width: fit-content;
  margin: 20px auto 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-ccp-balance-result-bg);
  color: var(--color-brand-strong);
  font-size: 14px;
  font-weight: 950;
}

.credit-payment-result__actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.credit-payment-result__actions a {
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--color-ccp-border);
  border-radius: 12px;
  color: var(--color-ccp-action-text);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.credit-payment-result__actions a:first-child {
  border-color: var(--color-brand-strong);
  background: var(--color-brand-strong);
  color: var(--color-bg-white);
}

@media (max-width: 900px) {
  .credit-charge-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .credit-charge-page {
    padding: 14px 14px 56px;
  }

  .credit-charge-hero,
  .credit-charge-card {
    border-radius: 20px;
    box-shadow: none;
  }

  .credit-charge-hero {
    padding: 20px;
    align-items: stretch;
    flex-direction: column;
  }

  .credit-charge-hero h1 {
    font-size: 30px;
  }

  .credit-charge-balance {
    min-width: 0;
  }

  .credit-charge-balance__amount strong {
    font-size: 26px;
  }

  .credit-charge-card {
    padding: 18px;
  }

  .credit-payment-result {
    margin-top: 32px;
    padding: 34px 18px;
    border-radius: 20px;
    box-shadow: none;
  }

  .credit-payment-result__actions {
    flex-direction: column;
  }

  .credit-payment-result__actions a {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .credit-charge-packages {
    grid-template-columns: 1fr;
  }

  .credit-charge-package {
    min-height: 190px;
  }
}

[data-theme="dark"] {
  --color-ccp-page-bg: rgb(15, 23, 42);
  --color-ccp-border: rgb(51, 65, 85);
  --color-ccp-back-text: var(--color-text-muted);
  --color-ccp-back-hover-bg: rgba(129, 140, 248, 0.12);
  --color-ccp-card-border: rgb(51, 65, 85);
  --color-ccp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-ccp-hero-desc: var(--color-text-muted);
  --color-ccp-balance-grad-2: rgba(129, 140, 248, 0.12);
  --color-ccp-balance-amount: var(--color-text-main);
  --color-ccp-icon-grad-1: rgb(165, 180, 252);
  --color-ccp-icon-shadow: rgba(83, 104, 223, 0.4);
  --color-ccp-card-desc: var(--color-text-muted);
  --color-ccp-package-border: rgb(51, 65, 85);
  --color-ccp-package-hover-border: rgba(129, 140, 248, 0.5);
  --color-ccp-package-hover-shadow: rgba(0, 0, 0, 0.35);
  --color-ccp-recommended-border: rgba(129, 140, 248, 0.5);
  --color-ccp-recommended-grad-1: var(--color-bg-elevated-dark);
  --color-ccp-recommended-grad-2: rgba(129, 140, 248, 0.1);
  --color-ccp-recommended-shadow: rgba(64, 84, 220, 0.25);
  --color-ccp-muted: var(--color-text-muted);
  --color-ccp-bonus-bg: rgba(83, 104, 223, 0.18);
  --color-ccp-package-bottom-border: rgb(51, 65, 85);
  --color-ccp-badge-shadow: rgba(64, 84, 220, 0.35);
  --color-ccp-state-border: rgb(51, 65, 85);
  --color-ccp-success-bg: rgba(52, 211, 153, 0.14);
  --color-ccp-success-text: rgb(110, 231, 183);
  --color-ccp-fail-bg: rgba(248, 113, 113, 0.14);
  --color-ccp-fail-text: rgb(248, 113, 113);
  --color-ccp-pending-bg: rgba(251, 191, 36, 0.14);
  --color-ccp-pending-text: rgb(252, 211, 77);
  --color-ccp-balance-result-bg: rgba(129, 140, 248, 0.12);
  --color-ccp-action-text: var(--color-text-sub);
}
:root {
  --color-sp-muted: rgb(132, 146, 166);
  --color-sp-card-border: rgb(233, 237, 246);
  --color-sp-page-bg: rgb(247, 248, 252);
  --color-sp-hero-border: rgb(238, 240, 248);
  --color-sp-text-soft: rgb(95, 104, 122);
  --color-sp-shadow: rgba(26, 38, 90, 0.04);
  --color-sp-focus-border: rgb(194, 204, 255);
  --color-sp-toggle-bg: rgb(243, 244, 248);
  --color-sp-skeleton: rgb(238, 241, 247);
  --color-sp-stat-bg: rgb(248, 249, 255);
  --color-sp-search-bg: rgb(249, 250, 255);
  --color-sp-focus-glow: rgba(73, 101, 255, 0.08);
  --color-sp-search-icon: rgb(123, 136, 177);
  --color-sp-toggle-shadow: rgba(0, 0, 0, 0.08);
  --color-sp-tabs-border: rgb(240, 241, 248);
  --color-sp-card-hover-border: rgb(201, 212, 255);
  --color-sp-card-hover-shadow: rgba(73, 101, 255, 0.1);
  --color-sp-category-text: rgb(102, 112, 133);
  --color-sp-icon-dev-bg: rgb(219, 234, 254);
  --color-sp-icon-dev-fg: rgb(37, 99, 235);
  --color-sp-icon-job-bg: rgb(255, 237, 213);
  --color-sp-icon-job-fg: rgb(234, 88, 12);
  --color-sp-icon-academic-bg: rgb(209, 250, 229);
  --color-sp-icon-academic-fg: rgb(5, 150, 105);
  --color-sp-icon-lang-bg: rgb(207, 250, 254);
  --color-sp-icon-lang-fg: rgb(8, 145, 178);
  --color-sp-icon-cert-bg: rgb(237, 233, 254);
  --color-sp-icon-self-bg: rgb(220, 252, 231);
  --color-sp-role-tag-bg: rgb(240, 242, 255);
  --color-sp-meta-icon: rgb(176, 189, 216);
  --color-sp-like-border: rgb(244, 217, 231);
  --color-sp-like-bg: rgb(255, 247, 251);
  --color-sp-like-text: rgb(219, 67, 136);
  --color-sp-like-hover-bg: rgb(255, 240, 247);
  --color-sp-like-active-bg: rgb(255, 234, 244);
  --color-sp-like-active-border: rgb(239, 191, 215);
  --color-sp-skeleton-2: rgb(247, 248, 251);
  --color-sp-pagination-text: rgb(75, 85, 99);
  --color-sp-pagination-hover-bg: rgb(248, 250, 255);
  --color-sp-empty-text: rgb(105, 115, 134);
}

/* 다크 값: dark.css "스터디 페이지" 섹션(32건 단독 소유)의 값을 그대로
   보존. pagination-*은 ProjectsPage.css와 공유하는 dark.css 규칙의
   값을 동일하게 맞춤. 나머지(카테고리 아이콘/좋아요 버튼 등)는 기존
   커버가 없던 사각지대라 이번에 새로 부여 */
[data-theme="dark"] {
  --color-sp-muted: var(--color-text-placeholder);
  --color-sp-card-border: rgba(79, 142, 247, 0.1);
  --color-sp-page-bg: rgb(11, 17, 32);
  --color-sp-hero-border: var(--color-bg-white);
  --color-sp-text-soft: var(--color-text-muted);
  --color-sp-shadow: rgba(0, 0, 0, 0.25);
  --color-sp-focus-border: var(--color-primary);
  --color-sp-toggle-bg: var(--color-bg-white);
  --color-sp-skeleton: rgb(30, 41, 59);
  --color-sp-stat-bg: var(--color-bg-sunken-dark);
  --color-sp-search-bg: var(--color-bg-white);
  --color-sp-focus-glow: rgba(79, 142, 247, 0.15);
  --color-sp-search-icon: var(--color-text-placeholder);
  --color-sp-toggle-shadow: rgba(0, 0, 0, 0.3);
  --color-sp-tabs-border: var(--color-bg-white);
  --color-sp-card-hover-border: rgba(107, 159, 255, 0.25);
  --color-sp-card-hover-shadow: rgba(0, 0, 0, 0.35);
  --color-sp-category-text: var(--color-text-muted);
  --color-sp-icon-dev-bg: rgba(37, 99, 235, 0.15);
  --color-sp-icon-dev-fg: rgb(96, 165, 250);
  --color-sp-icon-job-bg: rgba(234, 88, 12, 0.15);
  --color-sp-icon-job-fg: rgb(251, 146, 60);
  --color-sp-icon-academic-bg: rgba(5, 150, 105, 0.15);
  --color-sp-icon-academic-fg: rgb(52, 211, 153);
  --color-sp-icon-lang-bg: rgba(8, 145, 178, 0.15);
  --color-sp-icon-lang-fg: rgb(34, 211, 238);
  --color-sp-icon-cert-bg: rgba(124, 58, 237, 0.15);
  --color-sp-icon-self-bg: rgba(22, 163, 74, 0.15);
  --color-sp-role-tag-bg: rgba(73, 101, 255, 0.15);
  --color-sp-meta-icon: var(--color-text-placeholder);
  --color-sp-like-border: rgb(76, 29, 49);
  --color-sp-like-bg: rgb(45, 20, 30);
  --color-sp-like-text: rgb(244, 114, 182);
  --color-sp-like-hover-bg: rgb(55, 25, 37);
  --color-sp-like-active-bg: rgb(60, 24, 38);
  --color-sp-like-active-border: rgb(157, 23, 77);
  --color-sp-skeleton-2: rgb(38, 51, 71);
  --color-sp-pagination-text: rgb(203, 213, 225);
  --color-sp-pagination-hover-bg: var(--color-bg-elevated-dark);
  --color-sp-empty-text: var(--color-text-muted);
  --color-sp-badge-bg-dark: rgba(107, 159, 255, 0.12);
}

.studies-page {
  width: 100%;
  min-height: 100vh;
  background: var(--color-sp-page-bg);
  color: var(--color-text-main);
  box-sizing: border-box;
}
.studies-page * { box-sizing: border-box; }
.studies-page button, .studies-page input, .studies-page select { font-family: inherit; }

/* ── Hero ── */
.studies-hero-wrap {
  padding: 24px 20px 0;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-sp-hero-border);
}
.studies-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 40px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.studies-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.studies-hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 950;
  letter-spacing: -0.065em;
  color: var(--color-text-main);
  line-height: 1.1;
}
.studies-hero h1 strong { color: var(--color-brand-icon); }
.studies-hero p {
  margin: 10px 0 0;
  color: var(--color-sp-text-soft);
  font-size: 16px;
  font-weight: 600;
}
.studies-hero-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.studies-stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--color-sp-stat-bg);
  border: 1px solid var(--color-sp-hero-border);
  border-radius: 16px;
  min-width: 120px;
}
.studies-stat-icon {
  font-size: 18px;
  color: var(--color-brand-icon);
  flex-shrink: 0;
}
.studies-stat-label {
  display: block;
  font-size: 11px;
  color: var(--color-sp-muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.studies-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
  line-height: 1;
}
.studies-stat-highlight { color: var(--color-brand-icon); }

/* ── Content ── */
.studies-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 96px;
}

/* ── Search card ── */
.studies-search-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 20px;
  padding: 18px 20px 0;
  box-shadow: 0 4px 20px var(--color-sp-shadow);
  margin-bottom: 16px;
}
.studies-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.studies-search-box {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-sp-search-bg);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.studies-search-box:focus-within {
  border-color: var(--color-sp-focus-border);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-sp-focus-glow);
}
.studies-search-box svg { font-size: 17px; color: var(--color-sp-search-icon); flex-shrink: 0; }
.studies-search-box input {
  width: 100%;
  height: 48px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 700;
}
.studies-search-box input::placeholder { color: var(--color-text-placeholder); font-weight: 500; }
.studies-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.studies-filter-group select {
  height: 40px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.studies-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--color-sp-toggle-bg);
  border-radius: 10px;
}
.studies-view-toggle button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-sp-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s, color 0.15s;
}
.studies-view-toggle button.is-active {
  background: var(--color-bg-white);
  color: var(--color-brand-icon);
  box-shadow: 0 1px 4px var(--color-sp-toggle-shadow);
}
.studies-tabs-wrap {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-sp-tabs-border);
}
.studies-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.studies-tabs::-webkit-scrollbar { display: none; }
.studies-tab {
  position: relative;
  height: 46px;
  padding: 0 18px;
  border: none;
  background: transparent;
  color: var(--color-text-placeholder);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.studies-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-brand-icon);
  opacity: 0;
  transition: opacity 0.2s;
}
.studies-tab.is-active { color: var(--color-brand-icon); }
.studies-tab.is-active::after { opacity: 1; }
.studies-tab:hover:not(.is-active) { color: var(--color-text-sub); }
.studies-result-count {
  flex-shrink: 0;
  padding: 0 12px 0 8px;
  font-size: 13px;
  color: var(--color-sp-muted);
  font-weight: 700;
  white-space: nowrap;
}
.studies-result-count strong { color: var(--color-brand-icon); }

/* ── Grid ── */
.studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.studies-grid.is-list {
  grid-template-columns: 1fr;
}

/* ── Card ── */
.study-card-new {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: 0 4px 16px var(--color-sp-shadow);
  min-height: 220px;
}
.study-card-new:hover {
  transform: translateY(-3px);
  border-color: var(--color-sp-card-hover-border);
  box-shadow: 0 12px 32px var(--color-sp-card-hover-shadow);
}
.is-list .study-card-new {
  flex-direction: row;
  align-items: flex-start;
  min-height: auto;
  gap: 16px;
}
.scard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.scard__top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.scard__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.scard__status {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}
.scard__status.is-open { background: var(--color-brand-soft); color: var(--color-brand-deep); }
.scard__status.is-closed { background: var(--color-bg-soft); color: var(--color-text-muted); }
.scard__category {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--color-sp-page-bg);
  color: var(--color-sp-category-text);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.scard__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.scard__icon-wrap svg { width: 18px; height: 18px; }
.scard__icon-wrap--development { background: var(--color-sp-icon-dev-bg); }
.scard__icon-wrap--development svg { color: var(--color-sp-icon-dev-fg); }
.scard__icon-wrap--job { background: var(--color-sp-icon-job-bg); }
.scard__icon-wrap--job svg { color: var(--color-sp-icon-job-fg); }
.scard__icon-wrap--academic { background: var(--color-sp-icon-academic-bg); }
.scard__icon-wrap--academic svg { color: var(--color-sp-icon-academic-fg); }
.scard__icon-wrap--language { background: var(--color-sp-icon-lang-bg); }
.scard__icon-wrap--language svg { color: var(--color-sp-icon-lang-fg); }
.scard__icon-wrap--certificate { background: var(--color-sp-icon-cert-bg); }
.scard__icon-wrap--certificate svg { color: var(--color-accent); }
.scard__icon-wrap--self_improvement { background: var(--color-sp-icon-self-bg); }
.scard__icon-wrap--self_improvement svg { color: var(--color-success); }
.scard__icon-wrap--etc { background: var(--color-bg-soft); }
.scard__icon-wrap--etc svg { color: var(--color-text-muted); }
.scard__title {
  margin: 0;
  font-size: 17px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scard__summary {
  margin: 0;
  font-size: 13px;
  color: var(--color-sp-text-soft);
  line-height: 1.6;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.scard__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.scard__role-tag {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-sp-role-tag-bg);
  color: var(--color-brand-icon);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}
.scard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--color-sp-toggle-bg);
}
.scard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scard__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-sp-muted);
  font-weight: 700;
}
.scard__meta svg { font-size: 13px; color: var(--color-sp-meta-icon); }
.scard__like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-sp-like-border);
  border-radius: 999px;
  background: var(--color-sp-like-bg);
  color: var(--color-sp-like-text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.scard__like:hover:not(:disabled) { transform: translateY(-1px); background: var(--color-sp-like-hover-bg); }
.scard__like.is-active { background: var(--color-sp-like-active-bg); border-color: var(--color-sp-like-active-border); }
.scard__like.is-active svg { fill: currentColor; }
.scard__like:disabled { opacity: 0.6; cursor: default; }

/* ── Skeleton ── */
.study-card-skeleton {
  background: var(--color-bg-white);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.scs__badges, .scs__title, .scs__line, .scs__tags span {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--color-sp-skeleton) 0%, var(--color-sp-skeleton-2) 50%, var(--color-sp-skeleton) 100%);
  background-size: 220% 100%;
  animation: skeletonAnim 1.2s ease-in-out infinite;
}
.scs__badges { height: 22px; width: 120px; border-radius: 6px; }
.scs__title { height: 20px; width: 75%; border-radius: 6px; margin-top: 6px; }
.scs__line { height: 13px; width: 100%; border-radius: 6px; }
.scs__line--short { width: 60%; }
.scs__tags { display: flex; gap: 6px; }
.scs__tags span { height: 24px; width: 70px; border-radius: 999px; }
@keyframes skeletonAnim {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* ── Pagination ── */
.studies-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.pagination-btn, .pagination-num {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-white);
  color: var(--color-sp-pagination-text);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.pagination-btn:hover:not(:disabled), .pagination-num:hover {
  transform: translateY(-1px);
  border-color: var(--color-sp-focus-border);
  background: var(--color-sp-pagination-hover-bg);
  color: var(--color-brand-strong);
}
.pagination-num.is-active {
  border-color: var(--color-brand-icon);
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
}
.pagination-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Empty ── */
.studies-empty {
  grid-column: 1 / -1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-white);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 20px;
  text-align: center;
  padding: 40px;
}
.studies-empty strong { font-size: 17px; font-weight: 950; color: var(--color-text-main); }
.studies-empty p { margin: 8px 0 0; color: var(--color-sp-empty-text); font-size: 14px; }

/* ── FAB ── */
.studies-floating-write {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--color-brand-glow-fab);
  transition: transform 0.2s, box-shadow 0.2s;
}
.studies-floating-write:hover { transform: translateY(-2px); box-shadow: 0 14px 36px var(--color-brand-glow-fab-hover); }
.studies-floating-write svg { font-size: 19px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .studies-grid { grid-template-columns: repeat(2, 1fr); }
  .studies-hero-stats { display: none; }
  .studies-floating-write { bottom: calc(68px + 18px + env(safe-area-inset-bottom)); }
}
@media (max-width: 768px) {
  .studies-hero-wrap { padding: 0; }
  .studies-hero { padding: 20px 16px; flex-direction: column; align-items: flex-start; gap: 0; }
  .studies-hero-left { width: 100%; }
  .studies-hero h1 { font-size: 26px; }
  .studies-hero p { font-size: 14px; }
  .studies-content { padding: 12px 12px 96px; }
  .studies-search-card { border-radius: 14px; padding: 14px 14px 0; }
  .studies-search-box { height: 42px; }
  .studies-search-box input { height: 42px; font-size: 14px; }
  .studies-grid { grid-template-columns: 1fr; gap: 10px; }
  .studies-filter-group { display: none; }
  .studies-view-toggle { display: none; }
  .is-list .study-card-new { flex-direction: column; min-height: 0; gap: 10px; }
  .scard__meta { gap: 6px; }
  .scard__meta span { font-size: 11px; }
  .scard__title { font-size: 15px; }
  .studies-pagination { flex-wrap: wrap; gap: 4px; }
  .studies-floating-write {
    right: 16px;
    bottom: calc(var(--mobile-nav-height, 76px) + 18px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 16px;
    justify-content: center;
  }
  .studies-floating-write span { display: none; }
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B4 STUDY-1, dark.css 흡수분) */
[data-theme="dark"] .studies-page { background: var(--color-sp-page-bg); color: var(--color-text-main); }
[data-theme="dark"] .studies-hero-wrap { background: var(--color-bg-soft); border-bottom-color: var(--color-sp-hero-border); }
[data-theme="dark"] .studies-hero h1 { color: var(--color-text-main); }
[data-theme="dark"] .studies-hero p { color: var(--color-sp-text-soft); }
[data-theme="dark"] .studies-hero-badge { background: var(--color-sp-badge-bg-dark); color: var(--color-brand-strong); }
[data-theme="dark"] .studies-stat-item { background: var(--color-sp-stat-bg); border-color: var(--color-sp-card-border); }
[data-theme="dark"] .studies-stat-label { color: var(--color-sp-muted); }
[data-theme="dark"] .studies-stat-value { color: var(--color-text-main); }
[data-theme="dark"] .studies-search-card {
  background: var(--color-sp-stat-bg);
  border-color: var(--color-sp-card-border);
  box-shadow: 0 4px 20px var(--color-sp-shadow);
}
[data-theme="dark"] .studies-search-box { background: var(--color-bg-white); border-color: var(--color-border); }
[data-theme="dark"] .studies-search-box:focus-within { background: var(--color-bg-white); border-color: var(--color-primary); }
[data-theme="dark"] .studies-search-box input { color: var(--color-text-main); }
[data-theme="dark"] .studies-filter-group select {
  background-color: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-sp-pagination-text);
}
[data-theme="dark"] .studies-view-toggle { background: var(--color-bg-white); }
[data-theme="dark"] .studies-view-toggle button.is-active { background: var(--color-border); color: var(--color-brand-strong); }
[data-theme="dark"] .studies-tabs-wrap { border-top-color: var(--color-bg-white); }
[data-theme="dark"] .studies-tab { color: var(--color-sp-muted); }
[data-theme="dark"] .studies-tab.is-active { color: var(--color-brand-strong); }
[data-theme="dark"] .studies-tab.is-active::after { background: var(--color-primary); }
[data-theme="dark"] .studies-tab:hover:not(.is-active) { color: var(--color-sp-pagination-text); }
[data-theme="dark"] .studies-result-count { color: var(--color-sp-muted); }
[data-theme="dark"] .study-card-new { background: var(--color-sp-stat-bg); border-color: var(--color-sp-card-border); }
[data-theme="dark"] .study-card-new:hover {
  border-color: var(--color-sp-card-hover-border);
  box-shadow: 0 12px 32px var(--color-sp-card-hover-shadow);
}
[data-theme="dark"] .scard__status.is-open { background: var(--color-primary-soft); color: var(--color-brand-strong); }
[data-theme="dark"] .scard__status.is-closed { background: var(--color-bg-white); color: var(--color-sp-muted); }
[data-theme="dark"] .scard__category { background: var(--color-bg-white); color: var(--color-sp-text-soft); }
[data-theme="dark"] .scard__title { color: var(--color-text-main); }
[data-theme="dark"] .scard__summary { color: var(--color-sp-text-soft); }
[data-theme="dark"] .scard__role-tag { background: var(--color-primary-soft); color: var(--color-brand-strong); }
[data-theme="dark"] .scard__footer { border-top-color: var(--color-bg-white); }
[data-theme="dark"] .scard__meta span { color: var(--color-sp-muted); }
[data-theme="dark"] .scard__like { background: var(--color-bg-white); border-color: var(--color-border); color: var(--color-sp-like-text); }

/* pagination-btn/num은 ProjectsPage.css와 공유하는 dark.css 규칙(미제거) -
   StudiesPage 쪽에서 동일 값으로 자체 오버라이드해 흡수 완료 상태로 전환 */
[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .pagination-num {
  background: var(--color-sp-stat-bg);
  border-color: var(--color-border);
  color: var(--color-sp-pagination-text);
}
/* ============================= */
/* page */
/* ============================= */

:root {
  /* 6-B4 (STUDY-1) 서브배치 A/2 - 헤더/히어로/액션버튼/더보기메뉴/지원자목록 */
  --color-sd-page-glow: rgba(111, 66, 193, 0.06);
  --color-sd-page-bg: rgb(246, 247, 251);
  --color-sd-card-bg: rgba(255, 255, 255, 0.92);
  --color-sd-card-border: rgb(235, 237, 244);
  --color-sd-shadow-04: rgba(15, 23, 42, 0.04);
  --color-sd-shadow-03: rgba(15, 23, 42, 0.03);
  --color-sd-hero-border: rgb(228, 224, 246);
  --color-sd-hero-shadow: rgba(78, 54, 146, 0.07);
  --color-sd-title: rgb(16, 17, 20);
  --color-sd-subtitle: rgb(122, 127, 140);
  --color-sd-category-bg: rgb(241, 239, 255);
  --color-sd-category-text: rgb(93, 63, 211);
  --color-sd-status-open-bg: rgb(235, 255, 243);
  --color-sd-status-open-text: rgb(23, 138, 77);
  --color-sd-status-closed-bg: rgb(241, 243, 247);
  --color-sd-status-closed-text: rgb(111, 119, 133);
  --color-sd-status-deleted-bg: rgb(255, 241, 240);
  --color-sd-solid-text: rgb(17, 17, 17);
  --color-sd-summary-text: rgb(95, 100, 114);
  --color-sd-stat-bg: rgb(250, 251, 255);
  --color-sd-stat-border: rgb(236, 239, 245);
  --color-sd-muted: rgb(138, 144, 160);
  --color-sd-stat-value: rgb(20, 22, 26);
  --color-sd-pill-bg: rgb(247, 245, 255);
  --color-sd-pill-border: rgb(236, 231, 255);
  --color-sd-pill-text: rgb(95, 75, 207);
  --color-sd-accent: rgb(111, 66, 193);
  --color-sd-accent-shadow: rgba(111, 66, 193, 0.18);
  --color-sd-btn-muted-bg: rgb(244, 244, 248);
  --color-sd-danger-text: rgb(211, 60, 60);
  --color-sd-solid-shadow: rgba(17, 17, 17, 0.14);
  --color-sd-disabled-bg: rgb(235, 237, 243);
  --color-sd-cancel-border: rgb(241, 201, 207);
  --color-sd-cancel-bg: rgb(255, 245, 246);
  --color-sd-cancel-hover-bg: rgb(255, 236, 238);
  --color-sd-cancel-hover-border: rgb(233, 179, 188);
  --color-sd-solid-ring-08: rgba(17, 17, 17, 0.08);
  --color-sd-icon-btn-text: rgb(85, 85, 85);
  --color-sd-like-ring-24: rgba(255, 79, 117, 0.24);
  --color-sd-black-shadow-08: rgba(0, 0, 0, 0.08);
  --color-sd-disabled-border: rgb(228, 231, 239);
  --color-sd-like-active-bg: rgb(255, 242, 245);
  --color-sd-like-ring-20: rgba(255, 79, 117, 0.2);
  --color-sd-icon-btn-disabled-bg: rgb(245, 246, 250);
  --color-sd-ws-grad-1: rgb(79, 70, 229);
  --color-sd-ws-grad-2: rgb(37, 99, 235);
  --color-sd-ws-shadow: rgba(79, 70, 229, 0.2);
  --color-sd-ws-shadow-hover: rgba(79, 70, 229, 0.24);
  --color-sd-black-shadow-12: rgba(0, 0, 0, 0.12);
  --color-sd-menu-text: rgb(34, 34, 34);
  --color-sd-menu-hover-bg: rgb(247, 247, 248);
  --color-sd-menu-danger: rgb(217, 48, 37);
  --color-sd-app-border: rgb(237, 240, 246);
  --color-sd-app-bg: rgb(251, 252, 255);
  --color-sd-avatar-bg: rgb(243, 244, 248);
  --color-sd-muted-2: rgb(138, 143, 156);
  --color-sd-pending-text: rgb(210, 135, 0);
  --color-sd-body-text: rgb(51, 51, 51);
  --color-sd-solid-cta: rgb(17, 17, 17);

  /* 6-B4 (STUDY-1) 서브배치 B/2 - 정보그리드/멤버목록/댓글 */
  --color-sd-info-value: rgb(27, 29, 34);
  --color-sd-member-bg: rgb(252, 252, 255);
  --color-sd-member-hover-border: rgb(226, 231, 240);
  --color-sd-shadow-05: rgba(15, 23, 42, 0.05);
  --color-sd-owner-grad-1: rgb(252, 251, 255);
  --color-sd-owner-grad-2: rgb(247, 243, 255);
  --color-sd-owner-border: rgb(227, 216, 255);
  --color-sd-owner-avatar-bg: rgb(236, 228, 255);
  --color-sd-owner-avatar-text: rgb(91, 53, 201);
  --color-sd-badge-bg: rgb(242, 244, 248);
  --color-sd-owner-badge-bg: rgb(239, 232, 255);
  --color-sd-owner-badge-text: rgb(106, 63, 208);
  --color-sd-profile-btn-border: rgb(221, 226, 236);
  --color-sd-profile-btn-text: rgb(31, 41, 55);
  --color-sd-profile-btn-hover-bg: rgb(248, 249, 252);
  --color-sd-profile-btn-hover-border: rgb(207, 214, 226);
  --color-sd-danger-btn-border: rgb(255, 208, 204);
  --color-sd-danger-btn-bg: rgb(255, 246, 245);
  --color-sd-danger-btn-hover-border: rgb(255, 184, 176);
  --color-sd-textarea-border: rgb(230, 233, 241);
  --color-sd-accent-ring-08: rgba(111, 66, 193, 0.08);
  --color-sd-comment-cancel-bg: rgb(242, 243, 247);
  --color-sd-comment-cancel-text: rgb(79, 85, 97);
  --color-sd-comment-text: rgb(43, 47, 55);
  --color-sd-reply-border: rgb(236, 236, 244);
  --color-sd-reply-list-border: rgb(231, 232, 241);
  --color-sd-highlight-border: rgb(217, 205, 247);
  --color-sd-highlight-bg: rgb(248, 245, 255);
  --color-sd-highlight-border-strong: rgb(191, 167, 245);
  --color-sd-accent-ring-16: rgba(111, 66, 193, 0.16);
}

/* 다크 값: dark.css 커버 전무([N])라 전체 신규 부여. 보라색 액센트
   계열은 이번 배치 전반(스터디 상세)에서 일관되게 사용 */
[data-theme="dark"] {
  --color-sd-page-glow: rgba(167, 139, 250, 0.08);
  --color-sd-page-bg: var(--color-bg-soft);
  --color-sd-card-bg: rgba(30, 41, 59, 0.8);
  --color-sd-card-border: var(--color-border);
  --color-sd-shadow-04: rgba(0, 0, 0, 0.25);
  --color-sd-shadow-03: rgba(0, 0, 0, 0.2);
  --color-sd-hero-border: rgba(167, 139, 250, 0.2);
  --color-sd-hero-shadow: rgba(0, 0, 0, 0.3);
  --color-sd-title: var(--color-text-main);
  --color-sd-subtitle: var(--color-text-muted);
  --color-sd-category-bg: rgba(167, 139, 250, 0.15);
  --color-sd-category-text: rgb(196, 181, 253);
  --color-sd-status-open-bg: rgba(34, 197, 94, 0.15);
  --color-sd-status-open-text: rgb(74, 222, 128);
  --color-sd-status-closed-bg: var(--color-bg-elevated-dark);
  --color-sd-status-closed-text: var(--color-text-placeholder);
  --color-sd-status-deleted-bg: rgba(248, 113, 113, 0.15);
  --color-sd-solid-text: var(--color-text-main);
  --color-sd-summary-text: var(--color-text-muted);
  --color-sd-stat-bg: var(--color-bg-sunken-dark);
  --color-sd-stat-border: var(--color-border);
  --color-sd-muted: var(--color-text-placeholder);
  --color-sd-stat-value: var(--color-text-main);
  --color-sd-pill-bg: rgba(167, 139, 250, 0.12);
  --color-sd-pill-border: rgba(167, 139, 250, 0.25);
  --color-sd-pill-text: rgb(196, 181, 253);
  --color-sd-accent: rgb(167, 139, 250);
  --color-sd-accent-shadow: rgba(167, 139, 250, 0.25);
  --color-sd-btn-muted-bg: var(--color-bg-elevated-dark);
  --color-sd-danger-text: var(--color-danger);
  --color-sd-solid-shadow: rgba(0, 0, 0, 0.35);
  --color-sd-disabled-bg: var(--color-bg-elevated-dark);
  --color-sd-cancel-border: rgba(248, 113, 113, 0.3);
  --color-sd-cancel-bg: rgba(248, 113, 113, 0.1);
  --color-sd-cancel-hover-bg: rgba(248, 113, 113, 0.16);
  --color-sd-cancel-hover-border: rgba(248, 113, 113, 0.4);
  --color-sd-solid-ring-08: rgba(255, 255, 255, 0.1);
  --color-sd-icon-btn-text: var(--color-text-muted);
  --color-sd-like-ring-24: rgba(255, 107, 138, 0.3);
  --color-sd-black-shadow-08: rgba(0, 0, 0, 0.3);
  --color-sd-disabled-border: var(--color-border);
  --color-sd-like-active-bg: rgba(255, 79, 117, 0.15);
  --color-sd-like-ring-20: rgba(255, 79, 117, 0.3);
  --color-sd-icon-btn-disabled-bg: var(--color-bg-elevated-dark);
  --color-sd-ws-grad-1: rgb(99, 102, 241);
  --color-sd-ws-grad-2: rgb(59, 130, 246);
  --color-sd-ws-shadow: rgba(99, 102, 241, 0.3);
  --color-sd-ws-shadow-hover: rgba(99, 102, 241, 0.4);
  --color-sd-black-shadow-12: rgba(0, 0, 0, 0.35);
  --color-sd-menu-text: var(--color-text-main);
  --color-sd-menu-hover-bg: var(--color-bg-elevated-dark);
  --color-sd-menu-danger: var(--color-danger);
  --color-sd-app-border: var(--color-border);
  --color-sd-app-bg: var(--color-bg-sunken-dark);
  --color-sd-avatar-bg: var(--color-bg-elevated-dark);
  --color-sd-muted-2: var(--color-text-placeholder);
  --color-sd-pending-text: rgb(251, 191, 36);
  --color-sd-body-text: var(--color-text-sub);
  --color-sd-solid-cta: rgb(51, 65, 85);

  /* 6-B4 (STUDY-1) 서브배치 B/2 - 정보그리드/멤버목록/댓글 */
  --color-sd-info-value: var(--color-text-main);
  --color-sd-member-bg: rgba(30, 41, 59, 0.6);
  --color-sd-member-hover-border: var(--color-border);
  --color-sd-shadow-05: rgba(0, 0, 0, 0.28);
  --color-sd-owner-grad-1: rgba(49, 46, 129, 0.4);
  --color-sd-owner-grad-2: rgba(30, 27, 75, 0.5);
  --color-sd-owner-border: rgba(167, 139, 250, 0.3);
  --color-sd-owner-avatar-bg: rgba(167, 139, 250, 0.18);
  --color-sd-owner-avatar-text: rgb(196, 181, 253);
  --color-sd-badge-bg: var(--color-bg-elevated-dark);
  --color-sd-owner-badge-bg: rgba(167, 139, 250, 0.2);
  --color-sd-owner-badge-text: rgb(196, 181, 253);
  --color-sd-profile-btn-border: var(--color-border);
  --color-sd-profile-btn-text: var(--color-text-main);
  --color-sd-profile-btn-hover-bg: var(--color-bg-elevated-dark);
  --color-sd-profile-btn-hover-border: var(--color-border-strong);
  --color-sd-danger-btn-border: rgba(248, 113, 113, 0.35);
  --color-sd-danger-btn-bg: rgba(248, 113, 113, 0.1);
  --color-sd-danger-btn-hover-border: rgba(248, 113, 113, 0.5);
  --color-sd-textarea-border: var(--color-border);
  --color-sd-accent-ring-08: rgba(167, 139, 250, 0.14);
  --color-sd-comment-cancel-bg: var(--color-bg-elevated-dark);
  --color-sd-comment-cancel-text: var(--color-text-muted);
  --color-sd-comment-text: var(--color-text-sub);
  --color-sd-reply-border: var(--color-border);
  --color-sd-reply-list-border: var(--color-border);
  --color-sd-highlight-border: rgba(167, 139, 250, 0.4);
  --color-sd-highlight-bg: rgba(167, 139, 250, 0.12);
  --color-sd-highlight-border-strong: rgba(167, 139, 250, 0.55);
  --color-sd-accent-ring-16: rgba(167, 139, 250, 0.28);
}

.study-detail-page {
  min-height: 100vh;
  padding: 40px 20px 88px;
  background:
    radial-gradient(circle at top, var(--color-sd-page-glow), transparent 24%),
    var(--color-sd-page-bg);
}

.study-detail-container {
  max-width: 980px;
  margin: 0 auto;
}

.study-detail-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ============================= */
/* card */
/* ============================= */

.study-detail-card {
  background: var(--color-sd-card-bg);
  border: 1px solid var(--color-sd-card-border);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 10px 30px var(--color-sd-shadow-04),
    0 2px 8px var(--color-sd-shadow-03);
  backdrop-filter: blur(8px);
}

.study-hero-card {
  border: 1px solid var(--color-sd-hero-border);
  box-shadow:
    0 14px 36px var(--color-sd-hero-shadow),
    0 2px 8px var(--color-sd-shadow-03);
}

/* ============================= */
/* common section head */
/* ============================= */

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.study-section-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--color-sd-title);
  letter-spacing: -0.02em;
}

.study-section-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-sd-subtitle);
}

/* ============================= */
/* top */
/* ============================= */

.study-detail-top {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.study-detail-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.study-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.study-category {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--color-sd-category-bg);
  color: var(--color-sd-category-text);
  font-size: 13px;
  font-weight: 800;
}

.study-status {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.study-status.open {
  background: var(--color-sd-status-open-bg);
  color: var(--color-sd-status-open-text);
}

.study-status.closed {
  background: var(--color-sd-status-closed-bg);
  color: var(--color-sd-status-closed-text);
}

.study-status.deleted {
  background: var(--color-sd-status-deleted-bg);
  color: var(--color-danger-strong);
}

.study-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--color-sd-solid-text);
}

.study-summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-sd-summary-text);
}

.study-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.study-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--color-sd-stat-bg);
  border: 1px solid var(--color-sd-stat-border);
  border-radius: 18px;
}

.study-summary-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-sd-muted);
}

.study-summary-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-sd-stat-value);
}

.study-detail-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.study-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--color-sd-pill-bg);
  border: 1px solid var(--color-sd-pill-border);
  color: var(--color-sd-pill-text);
  font-size: 13px;
  font-weight: 700;
}

/* ============================= */
/* actions */
/* ============================= */

.study-owner-actions,
.study-apply-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.study-edit-button,
.study-delete-button,
.study-apply-button,
.study-cancel-apply-button,
.study-approve-button,
.study-reject-button {
  height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.study-edit-button:hover,
.study-delete-button:hover,
.study-apply-button:hover,
.study-cancel-apply-button:hover,
.study-approve-button:hover,
.study-reject-button:hover,
.study-member-profile-button:hover,
.study-comment-submit:hover,
.study-comment-cancel:hover {
  transform: translateY(-1px);
}

.study-edit-button {
  background: var(--color-sd-accent);
  color: var(--color-text-on-brand);
  box-shadow: 0 10px 20px var(--color-sd-accent-shadow);
}

.study-delete-button {
  background: var(--color-sd-btn-muted-bg);
  color: var(--color-sd-danger-text);
}

.study-apply-button {
  background: var(--color-sd-solid-cta);
  color: var(--color-text-on-brand);
  box-shadow: 0 10px 18px var(--color-sd-solid-shadow);
}

.study-apply-button.disabled,
.study-apply-button:disabled {
  background: var(--color-sd-disabled-bg);
  color: var(--color-sd-muted);
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.study-cancel-apply-button {
  border: 1px solid var(--color-sd-cancel-border);
  background: var(--color-sd-cancel-bg);
  color: var(--color-sd-danger-text);
}

.study-cancel-apply-button:hover {
  background: var(--color-sd-cancel-hover-bg);
  border-color: var(--color-sd-cancel-hover-border);
}

.study-cancel-apply-button:disabled,
.study-delete-button:disabled,
.study-approve-button:disabled,
.study-reject-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.study-approve-button {
  background: var(--color-sd-solid-cta);
  color: var(--color-text-on-brand);
}

.study-reject-button {
  background: var(--color-sd-btn-muted-bg);
  color: var(--color-sd-danger-text);
}

.study-interest-detail-button {
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--color-sd-solid-ring-08);
  background: var(--color-bg-white);
  color: var(--color-sd-icon-btn-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.study-interest-detail-button:hover {
  transform: translateY(-1px);
  color: var(--color-like);
  border-color: var(--color-sd-like-ring-24);
  box-shadow: 0 10px 22px var(--color-sd-black-shadow-08);
}

.study-interest-detail-button:disabled:hover {
  transform: none;
  color: var(--color-sd-muted);
  border-color: var(--color-sd-disabled-border);
  box-shadow: none;
}

.study-interest-detail-button.active {
  background: var(--color-sd-like-active-bg);
  color: var(--color-like);
  border-color: var(--color-sd-like-ring-20);
}

.study-interest-detail-button:disabled {
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: var(--color-sd-icon-btn-disabled-bg);
  color: var(--color-sd-muted);
  border-color: var(--color-sd-disabled-border);
}

.study-workspace-button {
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-sd-ws-grad-1) 0%, var(--color-sd-ws-grad-2) 100%);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 10px 20px var(--color-sd-ws-shadow);
}

.study-workspace-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px var(--color-sd-ws-shadow-hover);
}

.study-workspace-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================= */
/* more menu */
/* ============================= */

.study-head-actions {
  position: relative;
}

.study-more-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-sd-solid-ring-08);
  border-radius: 12px;
  background: var(--color-bg-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.study-more-button:hover {
  transform: translateY(-1px);
  border-color: var(--color-sd-solid-shadow);
  box-shadow: 0 10px 20px var(--color-sd-black-shadow-08);
}

.study-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 148px;
  padding: 8px;
  border: 1px solid var(--color-sd-solid-ring-08);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 18px 34px var(--color-sd-black-shadow-12);
  z-index: 20;
}

.study-more-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-sd-menu-text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.study-more-menu-item:hover {
  background: var(--color-sd-menu-hover-bg);
}

.study-more-menu-item.danger {
  color: var(--color-sd-menu-danger);
}

/* ============================= */
/* application list */
/* ============================= */

.study-application-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.study-application-item {
  padding: 18px;
  border: 1px solid var(--color-sd-app-border);
  border-radius: 18px;
  background: var(--color-sd-app-bg);
}

.study-application-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.study-application-user-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.study-application-user {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.study-application-avatar-button,
.study-application-avatar {
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-sd-avatar-bg);
}

.study-application-avatar-button {
  cursor: pointer;
  transition: none;
  box-shadow: none;
}

.study-application-avatar-button:hover {
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.study-application-avatar.static {
  opacity: 0.8;
}

.study-application-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.study-application-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-sd-solid-text);
}

.study-application-name-button {
  padding: 0;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-sd-solid-text);
  cursor: pointer;
  text-align: left;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.study-application-name-button:hover {
  color: var(--color-sd-accent);
}

.study-application-name.is-disabled {
  color: var(--color-sd-muted-2);
}

.study-application-status {
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}

.study-application-status.pending {
  color: var(--color-sd-pending-text);
}

.study-application-status.approved {
  color: var(--color-sd-status-open-text);
}

.study-application-status.rejected,
.study-application-status.cancelled {
  color: var(--color-sd-danger-text);
}

.study-application-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.study-application-message {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-sd-body-text);
  white-space: pre-line;
}

.study-application-date {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-sd-muted-2);
}

/* ============================= */
/* description */
/* ============================= */

.study-description {
  margin: 0;
  white-space: pre-line;
  line-height: 1.95;
  color: var(--color-sd-body-text);
}

/* ============================= */
/* info grid */
/* ============================= */

.study-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.study-info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--color-sd-app-border);
  border-radius: 18px;
  background: var(--color-sd-app-bg);
}

.study-info-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sd-muted);
}

.study-info-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-sd-info-value);
}

/* ============================= */
/* member */
/* ============================= */

.study-member-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.study-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--color-sd-app-border);
  border-radius: 18px;
  background: var(--color-sd-member-bg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.study-member-item:hover {
  transform: translateY(-1px);
  border-color: var(--color-sd-member-hover-border);
  box-shadow: 0 12px 24px var(--color-sd-shadow-05);
}

.study-member-item.owner-card {
  background: linear-gradient(180deg, var(--color-sd-owner-grad-1) 0%, var(--color-sd-owner-grad-2) 100%);
  border-color: var(--color-sd-owner-border);
}

.study-member-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.study-member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-sd-category-bg);
  color: var(--color-sd-category-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.study-member-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.study-member-avatar.owner-avatar {
  background: var(--color-sd-owner-avatar-bg);
  color: var(--color-sd-owner-avatar-text);
}

.study-member-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.study-member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.study-member-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-sd-solid-text);
}

.study-role-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-sd-badge-bg);
  color: var(--color-sd-summary-text);
  font-size: 12px;
  font-weight: 800;
}

.study-role-badge.owner {
  background: var(--color-sd-owner-badge-bg);
  color: var(--color-sd-owner-badge-text);
}

.study-member-role {
  font-size: 13px;
  color: var(--color-sd-subtitle);
  line-height: 1.6;
}

.study-member-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.study-member-profile-button,
.study-member-action-button {
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--color-sd-profile-btn-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-sd-profile-btn-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.study-member-profile-button:hover {
  background: var(--color-sd-profile-btn-hover-bg);
  border-color: var(--color-sd-profile-btn-hover-border);
}

.study-member-action-button.danger {
  border-color: var(--color-sd-danger-btn-border);
  background: var(--color-sd-danger-btn-bg);
  color: var(--color-danger-strong);
}

.study-member-action-button.danger:hover:not(:disabled) {
  background: var(--color-sd-status-deleted-bg);
  border-color: var(--color-sd-danger-btn-hover-border);
}

.study-member-profile-button.disabled,
.study-member-profile-button:disabled,
.study-member-action-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.study-empty-text {
  margin: 0;
  color: var(--color-sd-subtitle);
  line-height: 1.7;
}

/* ============================= */
/* comments */
/* ============================= */

.study-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.study-comment-textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px 16px;
  border: 1px solid var(--color-sd-textarea-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  font-size: 14px;
  line-height: 1.8;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.study-comment-textarea.reply {
  min-height: 96px;
}

.study-comment-textarea:focus {
  border-color: var(--color-sd-accent);
  box-shadow: 0 0 0 4px var(--color-sd-accent-ring-08);
}

.study-comment-form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.study-comment-submit,
.study-comment-cancel {
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;
}

.study-comment-submit:hover,
.study-comment-cancel:hover {
  transform: translateY(-1px);
}

.study-comment-submit {
  background: var(--color-sd-accent);
  color: var(--color-text-on-brand);
}

.study-comment-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.study-comment-cancel {
  background: var(--color-sd-comment-cancel-bg);
  color: var(--color-sd-comment-cancel-text);
}

.study-comment-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.study-comment-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.study-comment-item {
  padding: 18px;
  border: 1px solid var(--color-sd-app-border);
  border-radius: 18px;
  background: var(--color-sd-member-bg);
}

.study-reply-item {
  background: var(--color-bg-white);
}

.study-comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.study-comment-author-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-comment-author {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-sd-solid-text);
}

.study-comment-date {
  font-size: 12px;
  color: var(--color-sd-muted-2);
}

.study-comment-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.study-comment-action-button {
  border: none;
  background: transparent;
  color: var(--color-sd-summary-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.study-comment-action-button:hover {
  color: var(--color-sd-solid-text);
}

.study-comment-action-button.danger {
  color: var(--color-sd-danger-text);
}

.study-comment-content {
  margin: 0;
  white-space: pre-line;
  line-height: 1.85;
  font-size: 14px;
  color: var(--color-sd-comment-text);
}

.study-comment-edit-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.study-reply-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-sd-reply-border);
}

.study-reply-list {
  margin-left: 22px;
  padding-left: 14px;
  border-left: 2px solid var(--color-sd-reply-list-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================= */
/* responsive */
/* ============================= */

@media (max-width: 768px) {
  .study-detail-page {
    padding: 24px 16px 64px;
  }

  .study-detail-card {
    padding: 22px;
    border-radius: 18px;
  }

  .study-title {
    font-size: 28px;
  }

  .study-summary-stats {
    grid-template-columns: 1fr;
  }

  .study-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .study-info-item {
    gap: 5px;
    padding: 11px 12px;
    border-radius: 13px;
  }

  .study-info-label {
    font-size: 11px;
  }

  .study-info-value {
    font-size: 13px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .study-owner-actions,
  .study-apply-actions,
  .study-application-actions {
    flex-direction: column;
  }

  .study-edit-button,
.study-delete-button,
.study-apply-button,
.study-cancel-apply-button,
.study-approve-button,
.study-reject-button,
.study-workspace-button {
  width: 100%;
}

  .study-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .study-comment-header,
  .study-application-top,
  .study-member-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .study-application-user-wrap {
    width: 100%;
  }

  .study-application-actions {
    width: 100%;
  }

  .study-member-right {
    width: 100%;
  }

  .study-member-profile-button,
  .study-interest-detail-button,
  .study-apply-button,
  .study-cancel-apply-button {
    width: 100%;
    justify-content: center;
  }

  .study-reply-list {
    margin-left: 10px;
    padding-left: 10px;
  }
}

.comment-highlight {
  animation: commentHighlightFade 2.2s ease;
  box-shadow: 0 0 0 2px var(--color-sd-accent-shadow);
  border-color: var(--color-sd-highlight-border) !important;
  background: var(--color-sd-highlight-bg) !important;
}

@keyframes commentHighlightFade {
  0% {
    background: var(--color-sd-owner-badge-bg);
    border-color: var(--color-sd-highlight-border-strong);
    box-shadow: 0 0 0 4px var(--color-sd-accent-ring-16);
  }

  100% {
    background: inherit;
    border-color: inherit;
    box-shadow: none;
  }
}
.my-studies-page {
  width: 100%;
  min-height: 100vh;
  padding: 30px 20px 88px;
  background: var(--color-accent-soft);
  color: var(--color-text-main);
}

.my-studies-page * {
  box-sizing: border-box;
}

.my-studies-page button {
  font-family: inherit;
}

.my-studies-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.my-studies-loading-card,
.my-studies-header-card,
.my-studies-empty,
.my-study-card {
  border: 1px solid var(--color-accent-soft-hover);
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-shadow-base);
}

.my-studies-loading-card {
  min-height: 320px;
  padding: 48px 20px;
  border-radius: 24px;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-studies-loading-card.is-error {
  color: var(--color-danger);
}

.my-studies-header-card {
  padding: 22px;
  border-radius: 24px;
  margin-bottom: 18px;
}

.my-studies-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 11px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.my-studies-title {
  margin: 0;
  color: var(--color-text-main);
  font-size: 36px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.my-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.my-study-card {
  min-width: 0;
  padding: 20px;
  border-radius: 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease, background 0.2s ease;
}

.my-study-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand-soft-hover);
  background: var(--color-bg-white);
  box-shadow: 0 16px 36px var(--color-shadow-strong);
}

.my-study-card:focus {
  outline: none;
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 0 0 4px var(--color-brand-focus-ring);
}

.my-study-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.my-study-badges {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.my-study-category,
.my-study-status {
  height: 25px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.my-study-category {
  color: var(--color-brand-deep);
  background: var(--color-brand-soft);
}

.my-study-status.open {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.my-study-status.closed {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}

.my-study-status.deleted {
  color: var(--color-danger-strong);
  background: var(--color-danger-soft);
}

.my-study-status.default {
  color: var(--color-text-muted);
  background: var(--color-accent-soft);
}

.my-study-interest {
  flex: 0 0 auto;
  height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-like);
  font-size: 13px;
  font-weight: 900;
}

.my-study-card-title {
  margin: 13px 0 0;
  color: var(--color-text-main);
  font-size: 21px;
  line-height: 1.42;
  font-weight: 950;
  letter-spacing: -0.045em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-study-card-summary {
  margin: 8px 0 0;
  min-height: 48px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-study-card-summary.empty {
  color: var(--color-text-placeholder);
}

.my-study-meta-list {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.my-study-meta-chip {
  min-height: 29px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.my-study-card-footer {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.my-study-owner {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-study-arrow {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.my-study-card:hover .my-study-arrow {
  transform: translateX(3px);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.my-studies-empty {
  min-height: 260px;
  padding: 48px 20px;
  border-radius: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.my-studies-empty strong {
  color: var(--color-text-main);
  font-size: 22px;
  line-height: 1.35;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.my-studies-empty p {
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 750;
}

.my-studies-empty-btn {
  height: 46px;
  margin-top: 22px;
  padding: 0 17px;
  border: none;
  border-radius: 15px;
  background: var(--color-text-main);
  color: var(--color-text-inverse);
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.my-studies-floating-write {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 56px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow:
    0 10px 30px var(--color-brand-glow-fab),
    0 2px 8px var(--color-shadow-strong);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.my-studies-floating-write:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px var(--color-brand-glow-fab-hover),
    0 6px 18px var(--color-shadow-strong);
}

@media (max-width: 1024px) {
  .my-studies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-studies-title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .my-studies-page {
    padding: 14px 14px calc(
      var(--mobile-bottom-nav-height, 68px) + 96px + env(safe-area-inset-bottom)
    );
  }

  .my-studies-loading-card,
  .my-studies-header-card,
  .my-studies-empty,
  .my-study-card {
    box-shadow: none;
  }

  .my-studies-header-card {
    padding: 16px;
    border-radius: 22px;
  }

  .my-studies-title {
    font-size: 30px;
  }

  .my-studies-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .my-study-card {
    padding: 16px;
    border-radius: 20px;
  }

  .my-study-card:hover {
    transform: none;
    box-shadow: none;
  }

  .my-study-card-title {
    font-size: 19px;
  }

  .my-study-card-summary {
    min-height: auto;
    font-size: 14px;
  }

  .my-studies-empty {
    padding: 42px 18px;
    border-radius: 22px;
  }

  .my-studies-empty strong {
    font-size: 19px;
  }

  .my-studies-floating-write {
    right: 16px;
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 18px;
    justify-content: center;
  }

  .my-studies-floating-write span {
    display: none;
  }
}

@media (max-width: 420px) {
  .my-studies-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .my-studies-header-card,
  .my-study-card,
  .my-studies-empty {
    padding: 15px;
  }

  .my-studies-title {
    font-size: 28px;
  }
}

/* ================================================
   DARK MODE — 와일드카드([class*="-card"] 등) 우선순위 보정
   (6-B1.7, 신규 토큰화) 이 파일은 dark.css에 규칙이 원래 없었다.
   토큰만으로는 일부가 와일드카드의 제네릭 다크값에 덮여 의도한
   값이 반영되지 않아, 그 지점만 명시적으로 재선언한다.
   ================================================ */

[data-theme="dark"] .my-studies-loading-card {
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-studies-loading-card.is-error {
  color: var(--color-danger);
}

[data-theme="dark"] .my-study-card:hover {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .my-study-card:focus {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .my-study-card-summary {
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-study-card-summary.empty {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .my-study-card:hover .my-study-arrow {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

/* ============================= */
/* edit study page */
/* ============================= */

.edit-study-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.edit-study-page * {
  box-sizing: border-box;
}

.edit-study-container {
  width: 100%;
  min-width: 0;
  padding-top: 4px;
}

.edit-study-form {
  width: 100%;
  min-width: 0;
  margin-top: 22px;
}

/* ============================= */
/* back button */
/* ============================= */

.edit-study-back-button {
  opacity: 0;
  transform: translateY(10px);
  animation: editStudyFadeUp 0.45s ease forwards;
}

/* ============================= */
/* cards */
/* ============================= */

.edit-study-animated-card {
  width: 100%;
  min-width: 0;
  opacity: 0;
  transform: translateY(18px);
  animation: editStudyFadeUp 0.52s ease forwards;
}

.edit-study-animated-card:nth-of-type(1) {
  animation-delay: 0.04s;
}

.edit-study-animated-card:nth-of-type(2) {
  animation-delay: 0.1s;
}

.edit-study-animated-card:nth-of-type(3) {
  animation-delay: 0.16s;
}

.edit-study-animated-card:nth-of-type(4) {
  animation-delay: 0.22s;
}

.edit-study-animated-card:nth-of-type(5) {
  animation-delay: 0.28s;
}

/* ============================= */
/* field */
/* ============================= */

.edit-study-recruitment-field {
  max-width: 220px;
}

/* ============================= */
/* editor */
/* ============================= */

.edit-study-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 0;
  margin-bottom: 16px;
}

.edit-study-editor-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 850;
  color: var(--color-text-main);
  letter-spacing: -0.03em;
}

.edit-study-editor-header p {
  margin: 7px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.edit-study-editor-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.edit-study-editor-wrap > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.edit-study-editor-wrap .ProseMirror {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.edit-study-editor-wrap img {
  max-width: 100%;
  height: auto;
}

/* ============================= */
/* checkbox */
/* ============================= */

.edit-study-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-main);
  cursor: pointer;
  user-select: none;
}

.edit-study-checkbox input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.edit-study-checkbox span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================= */
/* actions */
/* ============================= */

.edit-study-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

.edit-study-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

.edit-study-cancel-button {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}

.edit-study-cancel-button:hover {
  background: var(--color-border);
  transform: translateY(-1px);
}

.edit-study-save-button {
  background: var(--color-primary);
  color: var(--color-text-on-brand);
}

.edit-study-save-button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.edit-study-action-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* ============================= */
/* fade item */
/* ============================= */

.edit-study-fade-item {
  opacity: 0;
  transform: translateY(12px);
  animation: editStudyFadeUp 0.45s ease forwards;
  animation-delay: 0.3s;
}

/* ============================= */
/* loading */
/* ============================= */

.edit-study-loading {
  width: 100%;
  min-width: 0;
  margin: 80px 0 0;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/* ============================= */
/* animation */
/* ============================= */

@keyframes editStudyFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* tablet */
/* ============================= */

@media (max-width: 768px) {
  .edit-study-container {
    padding-top: 0;
  }

  .edit-study-form {
    margin-top: 18px;
  }

  .edit-study-recruitment-field {
    max-width: 100%;
  }

  .edit-study-editor-header {
    flex-direction: column;
    gap: 8px;
  }

  .edit-study-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .edit-study-action-button {
    height: 50px;
    border-radius: 15px;
    font-size: 14px;
  }
}

/* ============================= */
/* mobile */
/* ============================= */

@media (max-width: 480px) {
  .edit-study-form {
    margin-top: 16px;
  }

  .edit-study-editor-header h2 {
    font-size: 19px;
  }

  .edit-study-editor-header p {
    font-size: 13px;
  }

  .edit-study-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .edit-study-action-button {
    height: 48px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 14px;
  }
}:root {
  /* 6-B3 (MSG-1) 서브배치 1/3 - 대화 목록/사이드바 */
  --color-msg-danger-border: rgb(254, 202, 202);
  --color-msg-selected-bg: rgb(241, 244, 255);
  --color-msg-sticky-bg: rgba(255, 255, 255, 0.94);
  --color-msg-section-title: rgb(138, 148, 166);
  --color-msg-hover-bg: rgb(247, 248, 252);
  --color-msg-brand-ring-12: rgba(73, 101, 255, 0.12);
  --color-msg-brand-ring-08: rgba(73, 101, 255, 0.08);
  --color-msg-brand-ring-28: rgba(73, 101, 255, 0.28);
  --color-msg-request-bg: rgb(255, 247, 237);
  --color-msg-request-text: rgb(234, 88, 12);
  --color-msg-group-selected-bg: rgb(248, 250, 255);
  --color-msg-icon-grad-2: rgb(224, 231, 255);
  --color-msg-thread-grad-1: rgb(244, 240, 255);
  --color-msg-thread-grad-2: rgb(236, 227, 255);
  --color-msg-thread-accent: rgb(124, 92, 255);
  --color-msg-thread-ring: rgba(124, 92, 255, 0.1);
  --color-msg-channel-guide: rgb(231, 235, 243);
  --color-msg-channel-icon: rgb(99, 117, 244);
  --color-msg-channel-name: rgb(31, 41, 55);
  --color-msg-channel-time: rgb(162, 171, 192);
  --color-msg-channel-preview: rgb(123, 132, 151);

  /* 서브배치 2/3 - 메시지 스레드 뷰 + 입력창 */
  --color-msg-warning-border: rgb(254, 215, 170);
  --color-msg-warning-text: rgb(154, 52, 18);
  --color-msg-read-label: rgb(108, 142, 191);
  --color-msg-avatar-ring: rgb(255, 255, 255);
  --color-msg-avatar-shadow-15: rgba(0, 0, 0, 0.15);
  --color-msg-avatar-shadow-12: rgba(0, 0, 0, 0.12);
  --color-msg-reader-more: rgb(136, 136, 136);
  --color-msg-bubble-border: rgb(237, 241, 247);
  --color-msg-input-border: rgb(223, 229, 242);
  --color-msg-input-placeholder: rgb(161, 170, 192);
  --color-msg-scrollbar: rgb(215, 222, 234);
  --color-msg-date-divider-bg: rgb(232, 237, 247);
  --color-msg-date-divider-text: rgb(102, 112, 133);
  --color-msg-scroll-btn-border: rgba(148, 163, 184, 0.24);
  --color-msg-scroll-btn-shadow: rgba(15, 23, 42, 0.18);

  /* 서브배치 3/3 - 필터탭/링크미리보기/이미지뷰어/파일/스레드/리액션/멘션/답장/채팅요청 */
  --color-msg-muted-2: rgb(75, 85, 99);
  --color-msg-text-strong: rgb(51, 65, 85);
  --color-msg-indigo-text: rgb(55, 48, 163);
  --color-msg-link: rgb(37, 99, 235);
  --color-msg-link-hover: rgb(29, 78, 216);
  --color-msg-mine-glass-border: rgba(255, 255, 255, 0.28);
  --color-msg-mine-glass-bg: rgba(255, 255, 255, 0.13);
  --color-msg-modal-backdrop: rgba(15, 23, 42, 0.86);
  --color-msg-modal-btn-bg: rgba(255, 255, 255, 0.14);
  --color-msg-modal-btn-hover-bg: rgba(255, 255, 255, 0.22);
  --color-msg-mine-glass-bg-18: rgba(255, 255, 255, 0.18);
  --color-msg-thread-preview-border: rgba(15, 23, 42, 0.1);
  --color-msg-thread-preview-border-hover: rgba(15, 23, 42, 0.2);
  --color-msg-guide-bg: rgb(244, 246, 251);
  --color-msg-guide-text: rgb(95, 107, 122);
  --color-msg-request-actions-border: rgb(229, 233, 242);
  --color-msg-cancel-bg: rgb(241, 243, 247);
  --color-msg-highlight: rgba(250, 204, 21, 0.18);
  --color-msg-reaction-border: rgba(15, 23, 42, 0.12);
  --color-msg-reaction-border-hover: rgba(15, 23, 42, 0.24);
  --color-msg-reaction-mine-border: rgb(129, 140, 248);
  --color-msg-reaction-mine-text: rgb(67, 56, 202);
  --color-msg-mine-glass-border-72: rgba(255, 255, 255, 0.72);
  --color-msg-reply-border: rgb(199, 210, 254);
  --color-msg-mention-shadow: rgba(15, 23, 42, 0.14);
  --color-msg-thread-badge-border: rgba(124, 92, 255, 0.24);
  --color-msg-thread-badge-bg: rgb(247, 245, 255);
  --color-msg-thread-badge-hover-bg: rgb(239, 234, 255);
  --color-msg-solid-tab: rgb(17, 24, 39);
}

/* 다크 값: dark.css 커버 전무([N])라 전체 신규 부여. 워크스페이스
   채팅(WS-3)에서 확립한 브랜드/인디고 톤과 일관되게 맞춤 */
[data-theme="dark"] {
  --color-msg-danger-border: var(--color-danger);
  --color-msg-selected-bg: rgb(30, 41, 74);
  --color-msg-sticky-bg: rgba(15, 23, 42, 0.92);
  --color-msg-section-title: var(--color-text-placeholder);
  --color-msg-hover-bg: var(--color-bg-elevated-dark);
  --color-msg-brand-ring-12: rgba(79, 142, 247, 0.18);
  --color-msg-brand-ring-08: rgba(79, 142, 247, 0.12);
  --color-msg-brand-ring-28: rgba(79, 142, 247, 0.32);
  --color-msg-request-bg: rgb(45, 30, 10);
  --color-msg-request-text: rgb(251, 146, 60);
  --color-msg-group-selected-bg: var(--color-bg-elevated-dark);
  --color-msg-icon-grad-2: rgb(49, 46, 129);
  --color-msg-thread-grad-1: rgb(45, 41, 78);
  --color-msg-thread-grad-2: rgb(51, 41, 92);
  --color-msg-thread-accent: rgb(167, 153, 234);
  --color-msg-thread-ring: rgba(167, 153, 234, 0.2);
  --color-msg-channel-guide: var(--color-border);
  --color-msg-channel-icon: rgb(129, 140, 248);
  --color-msg-channel-name: var(--color-text-main);
  --color-msg-channel-time: var(--color-text-placeholder);
  --color-msg-channel-preview: var(--color-text-muted);

  --color-msg-warning-border: rgb(146, 90, 6);
  --color-msg-warning-text: rgb(253, 186, 116);
  --color-msg-read-label: rgb(148, 163, 184);
  --color-msg-avatar-ring: var(--color-bg-white);
  --color-msg-avatar-shadow-15: rgba(0, 0, 0, 0.4);
  --color-msg-avatar-shadow-12: rgba(0, 0, 0, 0.35);
  --color-msg-reader-more: var(--color-text-placeholder);
  --color-msg-bubble-border: var(--color-border);
  --color-msg-input-border: var(--color-border);
  --color-msg-input-placeholder: var(--color-text-placeholder);
  --color-msg-scrollbar: var(--color-border-strong);
  --color-msg-date-divider-bg: var(--color-bg-elevated-dark);
  --color-msg-date-divider-text: var(--color-text-muted);
  --color-msg-scroll-btn-border: rgba(148, 163, 184, 0.3);
  --color-msg-scroll-btn-shadow: rgba(0, 0, 0, 0.4);

  --color-msg-muted-2: var(--color-text-muted);
  --color-msg-text-strong: var(--color-text-main);
  --color-msg-indigo-text: rgb(165, 180, 252);
  --color-msg-link: rgb(96, 165, 250);
  --color-msg-link-hover: rgb(147, 197, 253);
  --color-msg-modal-backdrop: rgba(2, 6, 16, 0.9);
  --color-msg-thread-preview-border: rgba(255, 255, 255, 0.12);
  --color-msg-thread-preview-border-hover: rgba(255, 255, 255, 0.24);
  --color-msg-guide-bg: var(--color-bg-elevated-dark);
  --color-msg-guide-text: var(--color-text-muted);
  --color-msg-request-actions-border: var(--color-border);
  --color-msg-cancel-bg: var(--color-bg-elevated-dark);
  --color-msg-highlight: rgba(250, 204, 21, 0.28);
  --color-msg-reaction-border: rgba(255, 255, 255, 0.14);
  --color-msg-reaction-border-hover: rgba(255, 255, 255, 0.28);
  --color-msg-reaction-mine-border: rgb(129, 140, 248);
  --color-msg-reaction-mine-text: rgb(165, 180, 252);
  --color-msg-reply-border: rgb(67, 56, 202);
  --color-msg-mention-shadow: rgba(0, 0, 0, 0.4);
  --color-msg-thread-badge-border: rgba(167, 153, 234, 0.3);
  --color-msg-thread-badge-bg: rgb(45, 41, 78);
  --color-msg-thread-badge-hover-bg: rgb(51, 41, 92);
  --color-msg-solid-tab: rgb(51, 65, 85);
}

.messages-page {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--color-bg-white);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.messages-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.messages-sidebar-panel {
  border-right: 1px solid var(--color-border);
}

.messages-chat-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.messages-panel-header {
  flex-shrink: 0;
  padding: 22px 24px;
  font-size: 21px;
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
}

.messages-panel-error {
  margin: 12px;
}

.messages-empty,
.messages-error {
  padding: 18px;
  font-size: 14px;
}

.messages-empty {
  color: var(--color-text-muted);
}

.messages-error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-msg-danger-border);
  border-radius: 14px;
}

.messages-empty-state {
  min-height: 100%;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 28px;
  color: var(--color-text-muted);
}

.messages-empty-state.sidebar {
  padding: 36px 24px;
}

.messages-empty-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.messages-empty-title {
  font-size: 17px;
  font-weight: 850;
  color: var(--color-text-main);
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}

.messages-empty-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 270px;
}

.conversation-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.conversation-section {
  margin-bottom: 16px;
}

.conversation-section-title {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 0 6px;
  padding: 9px 10px 7px;
  background: var(--color-msg-sticky-bg);
  backdrop-filter: blur(10px);
  color: var(--color-msg-section-title);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.conversation-list.workspace {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conversation-item {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 16px;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
  text-align: left;
}

.conversation-item:hover {
  background: var(--color-msg-hover-bg);
}

.conversation-item.selected {
  background: var(--color-msg-selected-bg);
}

.conversation-item.direct.selected {
  box-shadow: inset 0 0 0 1px var(--color-msg-brand-ring-12);
}

.conversation-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}

.conversation-main {
  min-width: 0;
  flex: 1;
}

.conversation-top-line,
.conversation-bottom-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conversation-top-line {
  justify-content: space-between;
  margin-bottom: 6px;
}

.conversation-bottom-line {
  justify-content: space-between;
}

.conversation-name-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.conversation-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 850;
  color: var(--color-text-main);
  letter-spacing: -0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--color-text-placeholder);
}

.conversation-last-message {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-request-label {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--color-msg-request-bg);
  color: var(--color-msg-request-text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.unread-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.unread-badge.small {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  font-size: 10px;
}

.workspace-group {
  border-radius: 18px;
  overflow: hidden;
}

.workspace-group.has-selected {
  background: var(--color-msg-group-selected-bg);
}

.workspace-group-button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 12px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-radius: 18px;
  text-align: left;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.workspace-group-button:hover {
  background: var(--color-msg-hover-bg);
}

.workspace-group.has-selected .workspace-group-button {
  background: var(--color-msg-selected-bg);
}

.workspace-group-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-brand-soft) 0%, var(--color-msg-icon-grad-2) 100%);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--color-msg-brand-ring-08);
}

.workspace-group-icon.thread {
  background: linear-gradient(135deg, var(--color-msg-thread-grad-1) 0%, var(--color-msg-thread-grad-2) 100%);
  color: var(--color-msg-thread-accent);
  box-shadow: inset 0 0 0 1px var(--color-msg-thread-ring);
}

.workspace-group-icon--link {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.workspace-group-icon--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-msg-brand-ring-28);
}

.workspace-group-main {
  min-width: 0;
}

.workspace-group-top,
.workspace-group-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workspace-group-top {
  justify-content: space-between;
  margin-bottom: 6px;
}

.workspace-group-bottom {
  justify-content: space-between;
}

.workspace-group-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.035em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-group-time {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--color-text-placeholder);
}

.workspace-group-preview {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-group-chevron {
  color: var(--color-text-placeholder);
  font-size: 18px;
  transition: transform 0.18s ease;
}

.workspace-group-chevron.expanded {
  transform: rotate(180deg);
}

.workspace-channel-list {
  list-style: none;
  margin: 2px 0 8px 60px;
  padding: 0 6px 0 10px;
  border-left: 1px solid var(--color-msg-channel-guide);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-channel-item {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 9px 9px;
  border-radius: 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.workspace-channel-item:hover {
  background: var(--color-msg-hover-bg);
}

.workspace-channel-item.selected {
  background: var(--color-brand-soft);
}

.workspace-channel-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--color-msg-selected-bg);
  color: var(--color-msg-channel-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.workspace-channel-icon.thread {
  background: var(--color-msg-thread-grad-1);
  color: var(--color-msg-thread-accent);
}

.workspace-channel-main {
  min-width: 0;
  flex: 1;
}

.workspace-channel-top,
.workspace-channel-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-channel-top {
  justify-content: space-between;
  margin-bottom: 4px;
}

.workspace-channel-bottom {
  justify-content: space-between;
}

.workspace-channel-name {
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--color-msg-channel-name);
  letter-spacing: -0.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-channel-time {
  flex-shrink: 0;
  color: var(--color-msg-channel-time);
  font-size: 11px;
  font-weight: 700;
}

.workspace-channel-preview {
  min-width: 0;
  flex: 1;
  color: var(--color-msg-channel-preview);
  font-size: 12px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-msg-hover-bg);
  position: relative;
  z-index: 1;
}

.chat-area-empty {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--color-msg-hover-bg);
}

.chat-header {
  flex-shrink: 0;
  padding: 15px 22px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 20;
  overflow: visible;
}

.chat-header-user-btn {
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.chat-header-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}

.chat-header-user-text {
  min-width: 0;
  display: flex;
  align-items: center;
}

.chat-header-title {
  min-width: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.035em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header-sub {
  display: none;
}

.chat-status-box {
  flex-shrink: 0;
  padding: 12px 20px 0;
}

.chat-notice {
  margin: 12px 20px 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.chat-notice.warning {
  background: var(--color-msg-request-bg);
  border: 1px solid var(--color-msg-warning-border);
  color: var(--color-msg-warning-text);
}

.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-msg-hover-bg);
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.message-row {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
  align-items: flex-end;
}

.message-row.mine {
  justify-content: flex-end;
}

.message-row.received {
  justify-content: flex-start;
  gap: 8px;
}

.message-avatar-col {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.message-avatar,
.message-avatar-placeholder {
  width: 32px;
  height: 32px;
}

.message-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  cursor: pointer;
}

.message-bubble-wrap {
  max-width: min(68%, 560px);
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  z-index: 1;
  touch-action: pan-y;
}

.message-meta-side {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
  min-height: 32px;
}

.message-meta-side.mine {
  margin-right: 8px;
}

.message-meta-side.received {
  margin-left: 2px;
}

.message-time {
  line-height: 1;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: opacity 0.16s ease;
}

.message-read-label {
  display: block;
  font-size: 11px;
  color: var(--color-msg-read-label);
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  margin-top: 3px;
  padding-right: 2px;
}

.message-read-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--color-msg-avatar-ring);
  box-shadow: 0 1px 3px var(--color-msg-avatar-shadow-15);
}

.message-readers {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  align-self: flex-end;
}

.message-bottom-readers {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding: 2px 12px 4px;
}

.message-inline-readers {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 2px 12px 2px 0;
}

.message-reader-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--color-msg-avatar-ring);
  box-shadow: 0 1px 2px var(--color-msg-avatar-shadow-12);
}

.message-reader-more {
  font-size: 10px;
  color: var(--color-msg-reader-more);
  font-weight: 600;
  line-height: 1;
  padding: 2px 2px;
}

.message-bubble {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 14px;
  position: relative;
  z-index: 1;
}

.message-bubble-motion {
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease;
  will-change: transform;
}

.message-bubble-wrap--swiping .message-bubble-motion {
  transition: none;
}

.message-swipe-reply-indicator {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-brand-icon);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transform: translateY(-50%) scale(0.86);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
  pointer-events: none;
  display: none;
}

.message-row.received .message-swipe-reply-indicator {
  left: 2px;
}

.message-row.mine .message-swipe-reply-indicator {
  right: 2px;
}

.message-row.mine .message-swipe-reply-indicator svg {
  transform: scaleX(-1);
}

.message-bubble-wrap--swiping .message-swipe-reply-indicator {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.message-row.received .message-bubble {
  background: var(--color-bg-white);
  color: var(--color-text-main);
  border: 1px solid var(--color-msg-bubble-border);
  border-radius: 18px 18px 18px 6px;
}

.message-row.mine .message-bubble {
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  border-radius: 18px 18px 6px 18px;
}

.chat-header .more-menu,
.chat-mobile-topbar .more-menu {
  z-index: 200;
}

.chat-header .more-menu-dropdown,
.chat-mobile-topbar .more-menu-dropdown {
  z-index: 9999;
}

.message-input-form {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-white);
}

.message-input-form.drag-over {
  border-top-color: var(--color-brand-icon);
  background: var(--color-brand-soft);
}

.message-input {
  flex: 1;
  min-height: 46px;
  max-height: 110px;
  resize: none;
  border: 1px solid var(--color-msg-input-border);
  border-radius: 15px;
  background: var(--color-bg-soft);
  padding: 11px 13px;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-main);
  overflow-y: hidden;
  box-sizing: border-box;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.message-input::placeholder {
  color: var(--color-msg-input-placeholder);
}

.message-input:focus {
  outline: none;
  background: var(--color-bg-white);
  border-color: var(--color-brand-icon);
}

.message-input:disabled {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

.message-send-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 0;
  border-radius: 14px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  font-weight: 850;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.message-send-btn svg {
  width: 19px;
  height: 19px;
}

.message-send-btn:hover {
  opacity: 0.9;
}

.message-send-btn:disabled {
  background: var(--color-border-strong);
  cursor: not-allowed;
  opacity: 1;
}

.chat-mobile-topbar {
  display: none;
}

.chat-mobile-back {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-main);
  cursor: pointer;
  flex-shrink: 0;
}

.chat-mobile-profile-btn {
  min-width: 0;
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.chat-mobile-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  flex-shrink: 0;
}

.chat-mobile-workspace-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.chat-mobile-topbar-title {
  min-width: 0;
  flex: 1;
  font-size: 16px;
  font-weight: 850;
  color: var(--color-text-main);
  letter-spacing: -0.035em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-list-wrap::-webkit-scrollbar,
.message-list::-webkit-scrollbar {
  width: 8px;
}

.conversation-list-wrap::-webkit-scrollbar-track,
.message-list::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-list-wrap::-webkit-scrollbar-thumb,
.message-list::-webkit-scrollbar-thumb {
  background: var(--color-msg-scrollbar);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.message-date-divider {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.message-date-divider span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-msg-date-divider-bg);
  color: var(--color-msg-date-divider-text);
  font-size: 12px;
  font-weight: 800;
}

.message-history-loading {
  align-self: center;
  margin: 2px 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-msg-date-divider-bg);
  color: var(--color-msg-date-divider-text);
  font-size: 12px;
  font-weight: 800;
}

.message-bottom-anchor {
  flex: 0 0 1px;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

.message-scroll-bottom-btn {
  position: sticky;
  right: 14px;
  bottom: 12px;
  z-index: 20;
  align-self: flex-end;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  margin: -2px 4px 0 0;
  padding: 0;
  border: 1px solid var(--color-msg-scroll-btn-border);
  border-radius: 50%;
  background: var(--color-bg-white);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: 0 12px 28px var(--color-msg-scroll-btn-shadow);
  cursor: pointer;
}

.message-scroll-bottom-btn:hover {
  background: var(--color-brand-soft);
}

@media (max-width: 1100px) {
  .messages-page {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .message-bubble-wrap {
    max-width: 76%;
  }
}

@media (max-width: 1024px) {
  .messages-page {
    display: block;
    height: calc(
      100dvh
      - var(--mobile-bottom-nav-height, 68px)
      - env(safe-area-inset-bottom)
    );
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-top: 0;
  }

  .touch-keyboard-open .messages-page {
    height: 100dvh;
  }

  .messages-panel {
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }

  .messages-sidebar-panel,
  .messages-chat-panel {
    min-height: 0;
  }

  .messages-chat-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .messages-panel-header {
    padding: 17px 18px;
    font-size: 20px;
  }

  .conversation-list-wrap {
    padding: 8px 8px 18px;
  }

  .chat-mobile-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-white);
    position: relative;
    z-index: 30;
  }

  .messages-chat-panel .chat-header {
    display: none;
  }

  .chat-area {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .message-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 12px;
  }

  .message-input-form {
    flex-shrink: 0;
    padding: 9px 10px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 25;
  }

  /* more-menu는 화면에 안 보이지만 reaction-col(+ 버튼, 팀채팅에만 존재)은 보이므로
     time + margins + reaction-col 너비만큼 확보 */
  .message-bubble-wrap {
    max-width: calc(100% - 100px);
  }
}

@media (max-width: 640px) {
  .conversation-item {
    padding: 12px;
  }

  .conversation-avatar,
  .workspace-group-icon {
    width: 46px;
    height: 46px;
  }

  .workspace-group-button {
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    padding: 12px;
  }

  .workspace-channel-list {
    margin-left: 58px;
    padding-left: 9px;
  }

  .message-avatar-col {
    width: 30px;
  }

  .message-avatar,
  .message-avatar-placeholder {
    width: 28px;
    height: 28px;
  }

  .message-meta-side {
    font-size: 10px;
    gap: 4px;
  }

  .message-input {
    min-height: 44px;
    padding: 10px 12px;
  }

  .message-send-btn {
    height: 44px;
    padding: 0 14px;
  }
}

.conversation-list-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.conversation-filter-tabs {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 10px 7px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
}

.conversation-filter-tab {
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-msg-channel-preview);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.conversation-filter-tab:hover {
  background: var(--color-msg-hover-bg);
  color: var(--color-text-main);
}

.conversation-filter-tab.active {
  background: var(--color-msg-solid-tab);
  color: var(--color-text-on-brand);
}

.conversation-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 8px 18px;
}

.conversation-section {
  margin-bottom: 10px;
}

.conversation-section-title {
  position: static;
  margin: 0;
  padding: 10px 10px 8px;
  background: var(--color-bg-white);
  color: var(--color-msg-section-title);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conversation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.conversation-list.workspace {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.conversation-workspace-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

.conversation-item.workspace-flat.selected {
  background: var(--color-msg-selected-bg);
}

.conversation-workspace-icon.thread {
  background: var(--color-msg-thread-grad-1);
  color: var(--color-msg-thread-accent);
}

.conversation-thread-badge {
  align-self: flex-start;
  margin: -4px 0 4px 64px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--color-msg-thread-badge-border);
  border-radius: 999px;
  background: var(--color-msg-thread-badge-bg);
  color: var(--color-msg-thread-accent);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.conversation-thread-badge:hover {
  background: var(--color-msg-thread-badge-hover-bg);
}

.conversation-thread-badge.small {
  margin-left: 46px;
}

.conversation-thread-unread {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

.conversation-channel-name {
  flex-shrink: 0;
  max-width: 92px;
  color: var(--color-msg-section-title);
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-last-sender {
  color: var(--color-msg-muted-2);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .conversation-filter-tabs {
    padding: 7px 8px 6px;
  }

  .conversation-list-wrap {
    padding: 8px 8px 18px;
  }
}

@media (max-width: 320px) {
  .conversation-filter-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .conversation-workspace-icon {
    width: 46px;
    height: 46px;
  }

  .conversation-channel-name {
    max-width: 78px;
  }
}

.chat-header-workspace-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--color-border);
}

.chat-header-sub-visible {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-placeholder);
  letter-spacing: -0.02em;
}

.message-sender-name {
  width: fit-content;
  margin: 0 0 6px 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-msg-text-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.message-bubble p {
  margin: 0;
}

.message-link {
  color: var(--color-msg-link);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.message-link:hover,
.message-link:focus-visible {
  color: var(--color-msg-link-hover);
}

.message-row.mine .message-link {
  color: var(--color-text-on-brand);
}

.message-row.mine .message-link:hover,
.message-row.mine .message-link:focus-visible {
  color: var(--color-text-on-brand);
  opacity: 0.88;
}

.message-link-preview {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: min(360px, 100%);
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-soft);
  color: inherit;
  text-decoration: none;
}

.message-row.mine .message-link-preview {
  border-color: var(--color-msg-mine-glass-border);
  background: var(--color-msg-mine-glass-bg);
}

.message-link-preview__body {
  min-width: 0;
  flex: 1 1 auto;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.message-link-preview__body strong,
.message-link-preview__body span,
.message-link-preview__body em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-link-preview__body strong {
  color: var(--color-text-main);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-link-preview__body span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-link-preview__body em {
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.message-row.mine .message-link-preview__body strong,
.message-row.mine .message-link-preview__body span,
.message-row.mine .message-link-preview__body em {
  color: var(--color-text-on-brand);
}

.message-link-preview__thumb {
  flex: 0 0 92px;
  min-height: 88px;
  background: var(--color-border);
}

.message-link-preview__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.message-bubble p + .message-attachments {
  margin-top: 10px;
}

.message-image-grid {
  display: grid;
  gap: 6px;
  max-width: 360px;
}

.message-image-grid--after-bubble {
  margin-top: 6px;
}

.message-image-grid.count-1 {
  grid-template-columns: 1fr;
  width: min(360px, calc(100vw - 120px));
  max-width: min(360px, calc(100vw - 120px));
}

.message-image-grid.count-2,
.message-image-grid.count-3,
.message-image-grid.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-image-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-border);
  cursor: default;
  line-height: 0;
}

.message-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-image-grid.count-1 .message-image-link {
  display: block;
  width: 100%;
  max-height: 480px;
  overflow: hidden;
}

.message-image-grid.count-1 .message-image-link img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.message-image-grid.count-2 .message-image-link,
.message-image-grid.count-3 .message-image-link,
.message-image-grid.count-4 .message-image-link {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.message-image-grid.count-3 .message-image-link:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.image-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--color-msg-modal-backdrop);
  cursor: pointer;
}

.image-preview-modal__viewer {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-preview-modal__topbar {
  width: 100%;
  min-height: 40px;
  margin-bottom: 10px;
  color: var(--color-text-on-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-preview-modal__topbar > span {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.86;
}

.image-preview-modal__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.image-preview-modal__actions a,
.image-preview-modal__actions button,
.image-preview-modal__nav {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-msg-modal-btn-bg);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.image-preview-modal__actions a:hover,
.image-preview-modal__actions button:hover,
.image-preview-modal__nav:hover {
  background: var(--color-msg-modal-btn-hover-bg);
  transform: translateY(-1px);
}

.image-preview-modal__actions svg,
.image-preview-modal__nav svg {
  width: 20px;
  height: 20px;
}

.image-preview-modal__image-scroll {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview-modal__image-scroll img {
  display: block;
  max-width: min(100%, 1120px);
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.image-preview-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.image-preview-modal__nav:hover {
  transform: translateY(-50%) translateY(-1px);
}

.image-preview-modal__nav:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.image-preview-modal__nav--prev {
  left: 8px;
}

.image-preview-modal__nav--next {
  right: 8px;
}

@media (max-width: 768px) {
  .image-preview-modal {
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .image-preview-modal__viewer {
    max-height: calc(100dvh - 24px);
  }

  .image-preview-modal__image-scroll {
    max-height: calc(100dvh - 84px);
  }

  .image-preview-modal__image-scroll img {
    max-width: 100%;
    max-height: calc(100dvh - 84px);
  }
}

.message-file-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(300px, 100%);
  padding: 10px 12px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.message-row.mine .message-file-link {
  background: var(--color-msg-mine-glass-bg-18);
}

.message-row.received .message-file-link {
  background: var(--color-bg-soft);
  color: var(--color-msg-text-strong);
}

.message-file-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-shadow-strong);
}

.message-row.mine .message-file-icon {
  background: var(--color-msg-mine-glass-bg-18);
}

.message-file-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 850;
}

.message-file-size {
  font-size: 11px;
  opacity: 0.75;
}

.message-thread-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 10px;
  width: 100%;
  border: 0.5px solid var(--color-msg-thread-preview-border);
  border-radius: 8px;
  background: var(--color-shadow-base);
  cursor: pointer;
  text-align: left;
}

.message-thread-preview:hover {
  border-color: var(--color-msg-thread-preview-border-hover);
}

.message-thread-avatars {
  display: flex;
  align-items: center;
}

.message-thread-avatar-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-bg-white);
  object-fit: cover;
  margin-left: -4px;
}

.message-thread-avatar-img:first-child {
  margin-left: 0;
}

.message-thread-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand-icon);
  white-space: nowrap;
}

.message-thread-last {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.message-file-input {
  display: none;
}

.message-attachment-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.message-attach-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--color-msg-input-border);
  border-radius: 14px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}

.message-attach-btn:hover:not(:disabled) {
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
}

.message-attach-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.message-attach-btn svg {
  transition: transform 0.18s ease;
}

.message-attach-btn.is-open svg {
  transform: rotate(45deg);
}

.message-attachment-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  bottom: calc(100% + 10px);
  width: 176px;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  box-shadow: 0 16px 38px var(--color-shadow-base);
}

.message-attachment-menu button {
  width: 100%;
  min-height: 44px;
  padding: 6px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.message-attachment-menu button:hover,
.message-attachment-menu button:focus-visible {
  background: var(--color-bg-soft);
  outline: none;
}

.message-attachment-menu button > span {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.message-attachment-menu .is-photo {
  color: var(--color-brand-icon);
  background: var(--color-msg-brand-ring-12);
}

.message-attachment-menu .is-video {
  color: var(--color-chat-accent, var(--color-brand-icon));
  background: var(--color-brand-soft);
}

.message-attachment-menu .is-file {
  color: var(--color-text-muted);
  background: var(--color-border);
}

.message-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-selected-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.message-selected-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 7px 8px 7px 10px;
  border-radius: 999px;
  background: var(--color-msg-selected-bg);
  color: var(--color-brand-icon);
  font-size: 12px;
  font-weight: 850;
}

.message-selected-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-selected-file button {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--color-msg-brand-ring-12);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 1024px) {
  .messages-chat-panel .chat-header {
    display: none;
  }
}

@media (max-width: 640px) {
  .message-attach-btn {
    width: 44px;
    height: 44px;
  }

  .message-image-grid {
    max-width: 280px;
  }

  .message-image-grid.count-1 {
    width: min(280px, calc(100vw - 120px));
    max-width: min(280px, calc(100vw - 120px));
  }

  .message-image-grid.count-1 .message-image-link img {
    max-height: 400px;
  }

  .message-image-grid.count-2 .message-image-link,
  .message-image-grid.count-3 .message-image-link,
  .message-image-grid.count-4 .message-image-link {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .message-image-grid.count-3 .message-image-link:first-child {
    aspect-ratio: auto;
  }

  .message-file-link {
    max-width: min(240px, 100%);
  }
}

.chat-request-guide {
  margin: 12px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-msg-guide-bg);
  color: var(--color-msg-guide-text);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.chat-request-actions {
  margin: 12px 16px;
  padding: 14px;
  border: 1px solid var(--color-msg-request-actions-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-request-actions strong {
  display: block;
  font-size: 15px;
  color: var(--color-msg-channel-name);
  margin-bottom: 4px;
}

.chat-request-actions p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.chat-request-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chat-request-buttons button {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.chat-request-buttons button:first-child {
  background: var(--color-msg-cancel-bg);
  color: var(--color-msg-muted-2);
}

.chat-request-buttons button:last-child {
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
}

@media (max-width: 640px) {
  .chat-request-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-request-buttons {
    justify-content: flex-end;
  }
}

.message-input::-webkit-scrollbar {
  width: 8px;
}

.message-input::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.chat-header-actions {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chat-header-icon-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--color-msg-hover-bg);
  color: var(--color-msg-muted-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.chat-header-icon-btn:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-icon);
}

.chat-header-icon-btn.is-muted {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
}

.chat-header-icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.chat-header-search {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-msg-input-border);
  border-radius: 14px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-header-search.mobile {
  flex: 1;
}

.chat-header-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 700;
}

.chat-search-cancel-btn {
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--color-msg-cancel-bg);
  color: var(--color-msg-muted-2);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.message-anchor {
  border-radius: 18px;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.message-anchor.is-highlighted {
  background: var(--color-msg-highlight);
  box-shadow: 0 0 0 8px var(--color-msg-highlight);
}

.message-jump-button {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-msg-indigo-text);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.message-reply-button {
  align-self: flex-end;
  flex-shrink: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  opacity: 0;
  transition:
    color 0.16s ease,
    opacity 0.16s ease;
  white-space: nowrap;
  overflow: visible;
}

.message-row:has(.message-bubble-wrap--swiping) .message-reply-button {
  opacity: 0;
}

.message-row:has(.message-bubble-wrap--swiping) .message-time {
  opacity: 0;
}

.message-reply-button:hover,
.message-jump-button:hover {
  color: var(--color-brand-icon);
}

@media (hover: hover) and (pointer: fine) {
  .message-row:hover .message-reply-button,
  .message-reply-button:focus-visible {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .message-reply-button,
  .message-reply-button:focus-visible {
    opacity: 0;
  }
}

.message-more-menu {
  align-self: flex-end;
  flex-shrink: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.message-more-menu .message-more-trigger {
  width: 28px;
  height: 28px;
}

.message-row:has(.message-bubble-wrap--swiping) .message-more-menu {
  opacity: 0;
}

.message-reaction-col {
  align-self: flex-end;
  flex-shrink: 0;
  margin: 0 2px;
}

.message-row:has(.message-bubble-wrap--swiping) .message-reaction-col {
  opacity: 0;
  pointer-events: none;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.message-reaction-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--color-msg-reaction-border);
  border-radius: 999px;
  background: var(--color-shadow-base);
  color: var(--color-msg-text-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}

.message-reaction-pill:hover {
  border-color: var(--color-msg-reaction-border-hover);
}

.message-reaction-pill.mine-reacted {
  border-color: var(--color-msg-reaction-mine-border);
  background: var(--color-brand-soft);
  color: var(--color-msg-reaction-mine-text);
}

.message-reply-preview {
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid var(--color-msg-mine-glass-border-72);
  border-radius: 12px;
  background: var(--color-msg-mine-glass-bg-18);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.message-row.received .message-reply-preview {
  background: var(--color-bg-soft);
  border-left-color: var(--color-msg-reply-border);
  color: var(--color-msg-text-strong);
}

.message-reply-preview span {
  font-size: 11px;
  font-weight: 850;
  opacity: 0.8;
}

.message-reply-preview strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}

.message-input-form {
  flex-wrap: wrap;
}

.message-input-wrap {
  position: relative;
}

.message-replying {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--color-brand-soft);
  color: var(--color-msg-indigo-text);
  box-sizing: border-box;
}

.message-input-form > .message-replying {
  flex-basis: 100%;
}

.message-replying div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.message-replying span {
  font-size: 11px;
  font-weight: 850;
}

.message-replying strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.message-replying button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--color-msg-brand-ring-12);
  color: var(--color-msg-indigo-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.message-mention-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 18px 36px var(--color-msg-mention-shadow);
}

.message-mention-list button {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
}

.message-mention-list button:hover {
  background: var(--color-bg-soft);
}

.message-mention-list button.is-selected {
  background: var(--color-brand-soft);
  color: var(--color-msg-indigo-text);
}

.message-mention-list img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.message-mention-list span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.message-mention-list strong,
.message-mention-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-mention-list strong {
  color: var(--color-text-main);
  font-size: 13px;
}

.message-mention-list small {
  color: var(--color-text-muted);
  font-size: 12px;
}

.message-mention-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.message-mention-link:hover,
.message-mention-link:focus-visible {
  color: var(--color-msg-indigo-text);
}

.message-mention-link--static {
  cursor: default;
}

.message-mention-link--static:hover {
  color: inherit;
}

.message-row.mine .message-mention-link:hover,
.message-row.mine .message-mention-link:focus-visible {
  color: var(--color-text-on-brand);
  opacity: 0.88;
}

@media (hover: none), (pointer: coarse) {
  .message-swipe-reply-indicator {
    display: inline-flex;
  }
}
.ai-msg-wrap {
  padding: 2px 16px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #1e293b;
  word-break: break-word;
  overflow-wrap: anywhere;
}


.ai-msg-line {
  margin: 1px 0;
}

.ai-msg-spacer {
  height: 8px;
}

.ai-msg-step-header {
  font-size: 13.5px;
  font-weight: 700;
  color: #534AB7;
  margin: 12px 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-msg-step-header::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #534AB7;
  flex-shrink: 0;
}

.ai-msg-arrow-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  margin: 2px 0 2px 12px;
}

.ai-msg-arrow {
  color: #02C39A;
  font-weight: 700;
  flex-shrink: 0;
}

.ai-msg-link {
  color: #534AB7;
  font-weight: 600;
  text-decoration: none;
  background: rgba(83, 74, 183, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(83, 74, 183, 0.20);
  cursor: pointer;
  display: inline-block;
  transition: background 0.15s;
}
.ai-msg-link:hover {
  background: rgba(83, 74, 183, 0.16);
}

.ai-msg-link-line {
  margin: 12px 0 4px;
}

.ai-msg-link-line .ai-msg-link {
  display: inline;
  background: none;
  color: #4965ff;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
  transition: opacity 0.14s;
}
.ai-msg-link-line .ai-msg-link::after {
  content: none;
}
.ai-msg-link-line .ai-msg-link:hover {
  opacity: 0.7;
  background: none;
  transform: none;
}

hr.ai-msg-divider {
  margin: 8px 16px 4px;
  opacity: 0.35;
}

/* ── 타이핑 애니메이션 ── */
@keyframes ai-msg-reveal {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-msg-reveal {
  animation: ai-msg-reveal 0.14s ease both;
}

.ai-msg-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  opacity: 1;
  animation: ai-cursor-blink 0.65s step-end infinite;
}

@keyframes ai-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

:root[data-theme="dark"] .ai-msg-wrap { color: #E2E8F0; }
:root[data-theme="dark"] hr.ai-msg-divider { border-top-color: rgba(255, 255, 255, 0.25); }
:root[data-theme="dark"] .ai-msg-step-header { color: #AFA9EC; }
:root[data-theme="dark"] .ai-msg-step-header::before { background: #AFA9EC; }
:root[data-theme="dark"] .ai-msg-link { color: #AFA9EC; background: rgba(83,74,183,.18); border-color: rgba(175,169,236,.3); }
:root[data-theme="dark"] .ai-msg-link-line .ai-msg-link { background: none; color: #7b93ff; border: none; text-decoration: underline; }
:root[data-theme="light"] .ai-msg-wrap { color: #1e293b; }

/* 표·인용·목록 — 원문 기호(| > -)를 그대로 두지 않고 형태로 보여준다.
   진짜 <table>이라 복사하면 워드·엑셀·한글에 표 그대로 붙는다. */
.ai-msg-table { overflow-x: auto; margin: 8px 0; }
.ai-msg-table table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.ai-msg-table th,
.ai-msg-table td {
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e0e1e5);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.ai-msg-table th { background: var(--color-bg-soft, #f5f5f3); font-weight: 700; }

.ai-msg-quote {
  margin: 8px 0;
  padding: 2px 0 2px 13px;
  border-left: 3px solid var(--color-border-strong, #d9dbe0);
  color: var(--color-text-sub, #55585f);
}
.ai-msg-quote > div + div { margin-top: 3px; }

.ai-msg-list { margin: 6px 0; padding-left: 20px; }
.ai-msg-list li { margin: 3px 0; line-height: 1.65; }

.ai-msg-line code,
.ai-msg-list code,
.ai-msg-table code,
.ai-msg-quote code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-bg-soft, #f1f1ef);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .92em;
}

[data-theme="dark"] .ai-msg-table th { background: #303239; }
[data-theme="dark"] .ai-msg-table th, [data-theme="dark"] .ai-msg-table td { border-color: #3a3d44; }
[data-theme="dark"] .ai-msg-quote { border-left-color: #444852; color: #b9bcc4; }
[data-theme="dark"] :is(.ai-msg-line, .ai-msg-list, .ai-msg-table, .ai-msg-quote) code { background: #3a3d44; color: #f0a3ad; }
:root {
  --color-rp-border: rgba(148, 163, 184, 0.32);
  --color-rp-trigger-hover-bg: rgb(241, 245, 249);
  --color-rp-trigger-hover-text: rgb(51, 65, 85);
  --color-rp-dropdown-bg: rgb(31, 41, 55);
  --color-rp-dropdown-shadow: rgba(15, 23, 42, 0.28);
  --color-rp-emoji-hover: rgba(255, 255, 255, 0.16);
}

/* 드롭다운 이모지 팔레트(dropdown-bg/shadow/emoji-hover)는 라이트/다크
   구분 없이 항상 짙은 슬레이트 톤 플로팅 필로 유지 - 재정의하지 않음 */
[data-theme="dark"] {
  --color-rp-border: rgba(100, 116, 139, 0.4);
  --color-rp-trigger-hover-bg: var(--color-bg-elevated-dark);
  --color-rp-trigger-hover-text: var(--color-text-main);
}

.reaction-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.reaction-picker-trigger {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-rp-border);
  border-radius: 50%;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.reaction-picker-trigger:hover {
  background: var(--color-rp-trigger-hover-bg);
  color: var(--color-rp-trigger-hover-text);
}

.reaction-picker-trigger:active {
  transform: scale(0.94);
}

.reaction-picker-dropdown-portal {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--color-rp-dropdown-bg);
  box-shadow: 0 18px 40px var(--color-rp-dropdown-shadow);
  pointer-events: auto;
}

.reaction-picker-emoji {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.reaction-picker-emoji:hover {
  background: var(--color-rp-emoji-hover);
  transform: scale(1.2);
}

@media (max-width: 640px) {
  .reaction-picker-trigger {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .reaction-picker-dropdown-portal {
    padding: 5px 6px;
  }

  .reaction-picker-emoji {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }
}
.message-todo-modal,
.message-todo-modal *,
.message-todo-form input,
.message-todo-form select,
.message-todo-form button {
  font-family: inherit;
  box-sizing: border-box;
}

.message-todo-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 88px 20px 24px;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.message-todo-modal__sheet {
  width: min(420px, 100%);
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.18);
}

.message-todo-modal__header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.message-todo-modal__header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.message-todo-modal__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.message-todo-form {
  padding: 16px 20px 20px;
}

.message-todo-form__field {
  display: block;
  margin-top: 11px;
}

.message-todo-form__field:first-child {
  margin-top: 0;
}

.message-todo-form__field span {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.message-todo-form__field input,
.message-todo-form__field select {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 500;
  outline: 0;
}

.message-todo-form__field input::placeholder {
  color: #9aa3b2;
  font-weight: 500;
}

.message-todo-form__field input:focus,
.message-todo-form__field select:focus {
  border-color: #5365f6;
  box-shadow: 0 0 0 4px rgba(83, 101, 246, 0.1);
}

.message-todo-form__field input.is-invalid {
  border-color: #ef4444;
}

.message-todo-form__error {
  margin: 10px 0 0;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
}

.message-todo-form__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.message-todo-form__actions button {
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.message-todo-form__cancel {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.message-todo-form__submit {
  border: 0;
  background: #4965ff;
  color: #ffffff;
}

.message-todo-form button:disabled,
.message-todo-form input:disabled,
.message-todo-form select:disabled,
.message-todo-modal__close:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 768px) {
  .message-todo-modal {
    padding: 0;
    align-items: flex-end;
  }

  .message-todo-modal__sheet {
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
  }
}
/* 이 파일 전용 로컬 토큰(6-B2 WS-3) - 채팅 전용 인디고/블루 팔레트 및
   그림자/오버레이 계열. colors.css의 공유 토큰과 거리가 있어(Δ>12)
   값 보존을 위해 파일 내부에 스코프. 다크값은 [data-theme="dark"]
   블록에서 개별 재정의. */
:root {
  --color-chat-accent-strong: rgb(55, 48, 163);
  --color-chat-primary: rgb(37, 99, 235);
  --color-chat-primary-hover: rgb(29, 78, 216);
  --color-chat-accent: rgb(79, 70, 229);
  --color-chat-reaction-mine-border: rgb(129, 140, 248);
  --color-chat-reaction-mine-text: rgb(67, 56, 202);
  --color-chat-muted-2: rgb(71, 85, 105);
  --color-chat-search-text: rgb(75, 85, 99);
  --color-chat-thread-count: rgb(83, 74, 183);
  --color-chat-reader-more: rgb(136, 136, 136);
  --color-chat-unread-dot: rgb(239, 68, 68);
  --color-chat-thread-hover-border: rgb(202, 189, 240);

  --color-chat-highlight-glow: rgba(250, 204, 21, 0.18);
  --color-chat-overlay-white-18: rgba(255, 255, 255, 0.18);
  --color-chat-overlay-white-72: rgba(255, 255, 255, 0.72);
  --color-chat-overlay-white-28: rgba(255, 255, 255, 0.28);
  --color-chat-overlay-white-13: rgba(255, 255, 255, 0.13);
  --color-chat-overlay-white-14: rgba(255, 255, 255, 0.14);
  --color-chat-overlay-white-22: rgba(255, 255, 255, 0.22);

  --color-chat-shadow-12: rgba(15, 23, 42, 0.12);
  --color-chat-shadow-18: rgba(15, 23, 42, 0.18);
  --color-chat-shadow-24: rgba(15, 23, 42, 0.24);
  --color-chat-shadow-10: rgba(15, 23, 42, 0.1);
  --color-chat-shadow-14: rgba(15, 23, 42, 0.14);
  --color-chat-backdrop-strong: rgba(15, 23, 42, 0.86);

  --color-chat-primary-glow-18: rgba(37, 99, 235, 0.18);
  --color-chat-primary-glow-10: rgba(37, 99, 235, 0.1);
  --color-chat-primary-glow-22: rgba(37, 99, 235, 0.22);

  --color-chat-indigo-glow-12: rgba(79, 70, 229, 0.12);
  --color-chat-indigo-glow-18: rgba(79, 70, 229, 0.18);

  --color-chat-slate-glow-24: rgba(148, 163, 184, 0.24);
  --color-chat-slate-glow-14: rgba(148, 163, 184, 0.14);

  --color-chat-black-glow-12: rgba(0, 0, 0, 0.12);
  --color-chat-black-glow-05: rgba(0, 0, 0, 0.05);
}

/* 다크 전용(라이트 대응 없음) - dark.css 흡수 과정에서 필요한 값만 최소로 추가 */
[data-theme="dark"] {
  --color-chat-reply-preview-bg-dark: rgba(255, 255, 255, 0.08);
  --color-chat-reply-preview-border-dark: rgba(255, 255, 255, 0.4);
  --color-chat-form-border-dark: rgba(51, 65, 85, 0.5);
  --color-chat-input-focus-glow-dark: rgba(37, 99, 235, 0.12);
  --color-chat-indigo-glow-20-dark: rgba(99, 102, 241, 0.2);

  /* 6-B2 WS-3 Step6: 다크 명도 검사 - 인디고/블루 계열 텍스트 토큰이
     다크에서도 라이트와 같은 값을 쓰면 너무 어두워 안 보이므로 밝은
     톤으로 재정의(강조/링크 → 밝은 인디고·블루, 보조 텍스트 → 회색). */
  --color-chat-accent: rgb(129, 140, 248);
  --color-chat-accent-strong: rgb(165, 180, 252);
  --color-chat-primary-hover: rgb(96, 165, 250);
  --color-chat-muted-2: rgb(148, 163, 184);
  --color-chat-search-text: rgb(148, 163, 184);
  --color-chat-thread-count: rgb(165, 180, 252);
  --color-chat-reaction-mine-text: rgb(165, 180, 252);
}

.workspace-chat {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0;
  min-width: 0;
  min-height: calc(100dvh - var(--header-height));
  padding: 0 0 16px;
}

.workspace-chat__messages {
  flex: 1;
  min-height: 420px;
  max-height: calc(100dvh - var(--header-height) - 180px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px;
  border-radius: 0;
  background: var(--color-bg-white);
  border: none;
  border-top: 1px solid var(--color-border);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.workspace-chat__messages--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.workspace-chat__empty-text {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: center;
}

.workspace-chat__scroll-bottom-btn {
  position: sticky;
  right: 14px;
  bottom: 12px;
  z-index: 20;
  align-self: flex-end;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  margin: -2px 4px 0 0;
  padding: 0;
  border: 1px solid var(--color-chat-slate-glow-24);
  border-radius: 50%;
  background: var(--color-bg-white);
  color: var(--color-chat-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  box-shadow: 0 12px 28px var(--color-chat-shadow-18);
  cursor: pointer;
}

.workspace-chat__scroll-bottom-btn:hover {
  background: var(--color-brand-soft);
}

.workspace-chat__bottom-anchor {
  flex: 0 0 1px;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

/* 캔버스 반영 알림 — 대화 흐름이 아니라 입력창 위에 떠 있는 알림이다.
   스크롤 위치와 무관하게 보이도록 sticky로 띄운다. */
.workspace-chat__ai-canvas-activity {
  position: sticky;
  bottom: 10px;
  z-index: 21;
  align-self: center;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(100%, 460px);
  margin-top: 6px;
  padding: 7px 8px 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  box-shadow: 0 6px 20px rgba(28, 30, 38, .12);
  color: var(--color-text-sub, #5b5f68);
  font-size: 12.5px;
  animation: workspace-chat-canvas-notice .22s ease both;
}
.workspace-chat__ai-canvas-activity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-chat__ai-canvas-activity svg { flex: 0 0 auto; width: 15px; height: 15px; }
.workspace-chat__ai-canvas-activity.is-error {
  border-color: #e8c2c8;
  background: #fdf5f6;
  color: #a4485a;
}
.workspace-chat__ai-canvas-activity-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: .55;
  cursor: pointer;
}
.workspace-chat__ai-canvas-activity-close:hover { opacity: 1; background: rgba(28, 30, 38, .08); }
.workspace-chat__ai-canvas-activity-close svg { width: 13px; height: 13px; }
@keyframes workspace-chat-canvas-notice {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-chat__ai-canvas-activity { animation: none; }
  .ai-thinking-dot,
  .ai-thinking-star { animation: none; }
}
[data-theme="dark"] .workspace-chat__ai-canvas-activity {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .workspace-chat__ai-canvas-activity.is-error {
  border-color: #6d3a44;
  background: #3a2429;
  color: #f0a3ad;
}
[data-theme="dark"] .workspace-chat__ai-canvas-activity-close:hover { background: rgba(255, 255, 255, .12); }

.workspace-chat__older-loading {
  align-self: center;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-chat-muted-2);
  font-size: 12px;
  font-weight: 800;
}

.workspace-chat__message-row {
  display: flex;
  width: 100%;
  align-items: flex-end;
}

.workspace-chat__message-anchor {
  border-radius: 20px;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.workspace-chat__message-anchor.is-highlighted {
  background: var(--color-chat-highlight-glow);
  box-shadow: 0 0 0 8px var(--color-chat-highlight-glow);
}

.workspace-chat__message-row.mine {
  justify-content: flex-end;
}

.workspace-chat__message-row.received {
  justify-content: flex-start;
  gap: 8px;
}

.workspace-chat__message-row.workspace-chat__message-row--image-only {
  justify-content: center;
}

.workspace-chat__avatar-col {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.workspace-chat__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}

.workspace-chat__avatar-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.workspace-chat__avatar-button:disabled {
  cursor: default;
}

.workspace-chat__avatar-placeholder {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.workspace-chat__bubble-wrap {
  max-width: min(72%, 600px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  touch-action: pan-y;
}

.workspace-chat__message-row.mine .workspace-chat__bubble-wrap {
  align-items: flex-end;
}

.workspace-chat__bubble-motion {
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.18s ease;
  will-change: transform;
}

.workspace-chat__bubble-wrap--swiping .workspace-chat__bubble-motion {
  transition: none;
}

.workspace-chat__swipe-reply-indicator {
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand-soft);
  color: var(--color-chat-accent);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px var(--color-chat-indigo-glow-18);
  pointer-events: none;
}

.workspace-chat__message-row.received .workspace-chat__swipe-reply-indicator {
  left: 4px;
}

.workspace-chat__message-row.mine .workspace-chat__swipe-reply-indicator {
  right: 4px;
}

.workspace-chat__swipe-reply-indicator svg {
  font-size: 17px;
}

.workspace-chat__message-row.mine .workspace-chat__swipe-reply-indicator svg {
  transform: scaleX(-1);
}

.workspace-chat__sender-name {
  display: block;
  margin: 0 0 6px;
  padding: 0 0 0 2px;
  border: 0;
  background: transparent;
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

.workspace-chat__sender-name.clickable {
  cursor: pointer;
}

.workspace-chat__sender-name:disabled {
  cursor: default;
}

.workspace-chat__meta-side {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-placeholder);
  flex-shrink: 0;
  min-height: 32px;
}

.workspace-chat__meta-side.mine {
  margin-right: 8px;
}

.workspace-chat__meta-side.received {
  margin-left: 2px;
}

.workspace-chat__time {
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.16s ease;
}

.workspace-chat__bubble {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 14px;
  width: fit-content;
  min-width: 48px;
  max-width: 100%;
}

.workspace-chat__content {
  margin: 0;
}

.workspace-chat__jump-button {
  align-self: flex-start;
  width: fit-content;
  margin: 0 0 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-chat-accent-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.workspace-chat__message-row:has(.workspace-chat__bubble-wrap--swiping)
  .workspace-chat__time {
  opacity: 0;
}

.workspace-chat__jump-button:hover {
  color: var(--color-chat-primary-hover);
}


.workspace-chat__more-menu {
  align-self: flex-end;
  flex-shrink: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.workspace-chat__more-menu .workspace-chat__more-trigger {
  width: 28px;
  height: 28px;
}

.workspace-chat__message-row:has(.workspace-chat__bubble-wrap--swiping)
  .workspace-chat__more-menu {
  opacity: 0;
}

.workspace-chat__reaction-col {
  align-self: flex-end;
  flex-shrink: 0;
  margin: 0 2px;
}

.workspace-chat__message-row:has(.workspace-chat__bubble-wrap--swiping)
  .workspace-chat__reaction-col {
  opacity: 0;
  pointer-events: none;
}

.workspace-chat__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.workspace-chat__reaction-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--color-chat-shadow-12);
  border-radius: 999px;
  background: var(--color-shadow-base);
  color: var(--color-text-sub);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}

.workspace-chat__reaction-pill:hover {
  border-color: var(--color-chat-shadow-24);
}

.workspace-chat__reaction-pill.mine-reacted {
  border-color: var(--color-chat-reaction-mine-border);
  background: var(--color-brand-soft);
  color: var(--color-chat-reaction-mine-text);
}

.workspace-chat__reply-preview {
  width: 100%;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 0;
  border-left: 3px solid var(--color-chat-overlay-white-72);
  border-radius: 12px;
  background: var(--color-chat-overlay-white-18);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.workspace-chat__message-row.received .workspace-chat__reply-preview {
  background: var(--color-bg-soft);
  border-left-color: var(--color-brand-soft-hover);
  color: var(--color-text-sub);
}

.workspace-chat__reply-preview span {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.8;
}

.workspace-chat__reply-preview strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.workspace-chat__message-row.received .workspace-chat__bubble {
  background: var(--color-bg-white);
  color: var(--color-text-main);
  border: 1px solid var(--color-bg-soft);
  border-radius: 17px 17px 17px 6px;
  box-shadow: 0 8px 20px var(--color-shadow-base);
}

.workspace-chat__message-row.mine .workspace-chat__bubble {
  margin-left: auto;
  background: var(--color-chat-primary);
  color: var(--color-text-on-brand);
  border-radius: 17px 17px 6px 17px;
  box-shadow: 0 10px 20px var(--color-chat-primary-glow-18);
}

.workspace-chat__message-link {
  color: var(--color-chat-primary);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.workspace-chat__message-link:hover,
.workspace-chat__message-link:focus-visible {
  color: var(--color-chat-primary-hover);
}

.workspace-chat__message-row.mine .workspace-chat__message-link {
  color: var(--color-text-on-brand);
}

.workspace-chat__message-row.mine .workspace-chat__message-link:hover,
.workspace-chat__message-row.mine .workspace-chat__message-link:focus-visible {
  color: var(--color-text-on-brand);
  opacity: 0.88;
}

.workspace-chat__link-preview {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(380px, 100%);
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-soft);
  color: inherit;
  text-decoration: none;
}

.workspace-chat__message-row.mine .workspace-chat__link-preview {
  border-color: var(--color-chat-overlay-white-28);
  background: var(--color-chat-overlay-white-13);
}

.workspace-chat__link-preview__body {
  min-width: 0;
  flex: 1 1 auto;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.workspace-chat__link-preview__body strong,
.workspace-chat__link-preview__body span,
.workspace-chat__link-preview__body em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-chat__link-preview__body strong {
  color: var(--color-text-main);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workspace-chat__link-preview__body span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workspace-chat__link-preview__body em {
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.workspace-chat__message-row.mine .workspace-chat__link-preview__body strong,
.workspace-chat__message-row.mine .workspace-chat__link-preview__body span,
.workspace-chat__message-row.mine .workspace-chat__link-preview__body em {
  color: var(--color-text-on-brand);
}

.workspace-chat__link-preview__thumb {
  order: -1;
  flex: 0 0 auto;
  width: 100%;
  /* OG 규격 그대로 둔다. 세로로 긴 그림이 와도 이 틀 안에서만 잘린다. */
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
  background: var(--color-border);
}

.workspace-chat__link-preview__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workspace-chat__attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.workspace-chat__content + .workspace-chat__attachments {
  margin-top: 10px;
}

.workspace-chat__image-grid {
  display: grid;
  gap: 6px;
  max-width: 360px;
}

.workspace-chat__image-grid--after-bubble {
  margin-top: 6px;
}

.workspace-chat__image-grid.count-1 {
  grid-template-columns: 1fr;
  width: min(360px, calc(100vw - 120px));
  max-width: min(360px, calc(100vw - 120px));
}

.workspace-chat__image-grid.count-2,
.workspace-chat__image-grid.count-3,
.workspace-chat__image-grid.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-chat__image-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--color-border);
  text-decoration: none;
  cursor: default;
  line-height: 0;
}

.workspace-chat__image-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
}

.workspace-chat__image-grid.count-1 .workspace-chat__image-link {
  display: block;
  width: 100%;
  max-height: 480px;
  overflow: hidden;
}

.workspace-chat__image-grid.count-1 .workspace-chat__image-link img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.workspace-chat__image-grid.count-2 .workspace-chat__image-link,
.workspace-chat__image-grid.count-3 .workspace-chat__image-link,
.workspace-chat__image-grid.count-4 .workspace-chat__image-link {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.workspace-chat__image-grid.count-3 .workspace-chat__image-link:first-child {
  grid-row: span 2;
  aspect-ratio: auto;
}

.workspace-chat__message-row.mine .workspace-chat__image-link {
  box-shadow: 0 12px 26px var(--color-chat-primary-glow-18);
}

.workspace-chat__message-row.received .workspace-chat__image-link {
  box-shadow: 0 12px 26px var(--color-chat-shadow-10);
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.image-preview-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--color-chat-backdrop-strong);
  cursor: pointer;
}

.image-preview-modal__viewer {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-preview-modal__topbar {
  width: 100%;
  min-height: 40px;
  margin-bottom: 10px;
  color: var(--color-text-on-brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-preview-modal__topbar > span {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.86;
}

.image-preview-modal__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.image-preview-modal__actions a,
.image-preview-modal__actions button,
.image-preview-modal__nav {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-chat-overlay-white-14);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.image-preview-modal__actions a:hover,
.image-preview-modal__actions button:hover,
.image-preview-modal__nav:hover {
  background: var(--color-chat-overlay-white-22);
  transform: translateY(-1px);
}

.image-preview-modal__actions svg,
.image-preview-modal__nav svg {
  width: 20px;
  height: 20px;
}

.image-preview-modal__image-scroll {
  max-width: 100%;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview-modal__image-scroll img {
  display: block;
  max-width: min(100%, 1120px);
  max-height: calc(100vh - 100px);
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.image-preview-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.image-preview-modal__nav:hover {
  transform: translateY(-50%) translateY(-1px);
}

.image-preview-modal__nav:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
}

.image-preview-modal__nav--prev {
  left: 8px;
}

.image-preview-modal__nav--next {
  right: 8px;
}

@media (max-width: 768px) {
  .image-preview-modal {
    padding: max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .image-preview-modal__viewer {
    max-height: calc(100dvh - 24px);
  }

  .image-preview-modal__image-scroll {
    max-height: calc(100dvh - 84px);
  }

  .image-preview-modal__image-scroll img {
    max-width: 100%;
    max-height: calc(100dvh - 84px);
  }
}

.workspace-chat__file-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(300px, 100%);
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--color-chat-overlay-white-18);
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.workspace-chat__message-row.received .workspace-chat__file-link {
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
}

.workspace-chat__file-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--color-shadow-strong);
}

.workspace-chat__message-row.mine .workspace-chat__file-icon {
  background: var(--color-chat-overlay-white-18);
}

.workspace-chat__file-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-chat__file-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.workspace-chat__file-size {
  font-size: 11px;
  opacity: 0.75;
}

.workspace-chat__error {
  margin: 0;
  padding: 0 4px;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 700;
}

.workspace-chat__form {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-chat-slate-glow-14);
  box-shadow: 0 14px 32px var(--color-shadow-base);
  box-sizing: border-box;
}

.workspace-chat__form--drag-over {
  border-color: var(--color-chat-primary);
  background: var(--color-brand-soft);
  box-shadow:
    0 0 0 4px var(--color-chat-primary-glow-10),
    0 14px 32px var(--color-shadow-base);
}

.workspace-chat__file-input {
  display: none;
}

.workspace-chat__attachment-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.workspace-chat__attach-button {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  font-size: 20px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.workspace-chat__attach-button:hover:not(:disabled) {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-soft-hover);
  transform: translateY(-1px);
}

.workspace-chat__attach-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.workspace-chat__input-area {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-chat__replying {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--color-brand-soft);
  color: var(--color-chat-accent-strong);
}

.workspace-chat__replying > svg {
  font-size: 16px;
  flex-shrink: 0;
}

.workspace-chat__replying div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-chat__replying span {
  font-size: 11px;
  font-weight: 800;
}

.workspace-chat__replying strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.workspace-chat__replying button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--color-chat-indigo-glow-12);
  color: var(--color-chat-accent-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-chat__mention-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 18px 36px var(--color-chat-shadow-14);
}

/* #카드 지목 자동완성 — 멘션 목록과 같은 껍데기에 카드용 행을 얹는다. */
.workspace-chat__card-ref-hint {
  display: block;
  padding: 5px 8px 7px;
  color: var(--color-text-sub);
  font-size: 10.5px;
  font-weight: 600;
}

.workspace-chat__card-ref-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #ede9fb;
  color: #6b4fc4;
  font-size: 12px;
  font-weight: 750;
}

.workspace-chat__card-ref-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.workspace-chat__card-ref-copy strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat__card-ref-copy small {
  color: var(--color-text-sub);
  font-size: 10.5px;
}

.workspace-chat__mention-list button {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
}

.workspace-chat__mention-list button:hover,
.workspace-chat__mention-list button:focus-visible {
  background: var(--color-bg-soft);
  outline: none;
}

.workspace-chat__mention-list button.is-selected {
  background: var(--color-brand-soft);
  color: var(--color-chat-accent-strong);
}

.workspace-chat__mention-list img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg-soft);
}

.workspace-chat__mention-list span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.workspace-chat__mention-list strong,
.workspace-chat__mention-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat__mention-list strong {
  color: var(--color-text-main);
  font-size: 13px;
}

.workspace-chat__mention-list small {
  color: var(--color-text-muted);
  font-size: 12px;
}

.workspace-chat__mention-link {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.workspace-chat__mention-link:hover,
.workspace-chat__mention-link:focus-visible {
  color: var(--color-chat-accent-strong);
}

.workspace-chat__mention-link--static {
  cursor: default;
}

.workspace-chat__mention-link--static:hover {
  color: inherit;
}

.workspace-chat__message-row.mine .workspace-chat__mention-link:hover,
.workspace-chat__message-row.mine .workspace-chat__mention-link:focus-visible {
  color: var(--color-text-on-brand);
  opacity: 0.88;
}

.workspace-chat__selected-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workspace-chat__selected-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 7px 8px 7px 10px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-chat-accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.workspace-chat__selected-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat__selected-file button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--color-chat-indigo-glow-12);
  color: var(--color-chat-accent-strong);
  cursor: pointer;
  padding: 0;
}

.workspace-chat__input {
  width: 100%;
  flex: 1;
  min-height: 48px;
  max-height: 112px;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--color-text-main);
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
  overflow-y: hidden;
  box-sizing: border-box;
  scrollbar-width: thin;
}

.workspace-chat__input::-webkit-scrollbar {
  width: 8px;
}

.workspace-chat__input::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.workspace-chat__input::placeholder {
  color: var(--color-text-placeholder);
}

.workspace-chat__input:focus {
  outline: none;
  background: var(--color-bg-white);
  border-color: var(--color-chat-primary);
  box-shadow: 0 0 0 4px var(--color-chat-primary-glow-10);
}

.workspace-chat__input:disabled {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

.workspace-chat__submit {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-chat-primary) 0%, var(--color-chat-primary-hover) 100%);
  color: var(--color-text-on-brand);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  box-shadow: 0 10px 22px var(--color-chat-primary-glow-22);
}

.workspace-chat__submit svg {
  width: 20px;
  height: 20px;
}

.workspace-chat__submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

.workspace-chat__submit:disabled {
  background: var(--color-border-strong);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.workspace-chat__messages::-webkit-scrollbar {
  width: 10px;
}

.workspace-chat__messages::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-chat__messages::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.workspace-chat__messages::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-strong);
  background-clip: padding-box;
}

.workspace-chat__date-divider {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.workspace-chat__date-divider span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-chat-muted-2);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 960px) {
  .workspace-chat {
    height: 100%;
    min-height: 0;
    gap: 0;
    background: var(--color-bg-soft);
  }

  .workspace-chat__messages {
    flex: 1;
    min-height: 0;
    max-height: none;
    padding: 14px 12px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg-soft);
  }

  /* more-menu는 화면에 안 보이지만 reaction-col(+ 버튼, ~32px)은 보이므로
     time(~50px) + margins(~12px) + reaction-col(~32px)만큼 확보 */
  .workspace-chat__bubble-wrap {
    max-width: calc(100% - 100px);
    min-width: 48px;
  }

  .workspace-chat__form {
    padding: 10px 10px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -8px 24px var(--color-shadow-base);
  }
}

@media (hover: none), (pointer: coarse) {
  .workspace-chat__swipe-reply-indicator {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .workspace-chat__channel-header {
    padding: 10px 12px;
  }

  .workspace-chat__channel-search {
    height: 40px;
    padding: 0 10px;
    border-radius: 13px;
  }

  .workspace-chat__channel-search input {
    font-size: 15px;
  }

  .workspace-chat__search-cancel {
    height: 36px;
    padding: 0 10px;
  }

  .workspace-chat__messages {
    min-height: 0;
    max-height: none;
    padding: 12px 10px;
    border-radius: 0;
  }

  .workspace-chat__avatar-col {
    width: 30px;
  }

  .workspace-chat__avatar,
  .workspace-chat__avatar-button,
  .workspace-chat__avatar-placeholder {
    width: 28px;
    height: 28px;
  }

  .workspace-chat__meta-side {
    font-size: 10px;
    gap: 4px;
  }

  .workspace-chat__form {
    gap: 8px;
  }

  .workspace-chat__attach-button {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .workspace-chat__submit {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .workspace-chat__input {
    min-height: 44px;
    padding: 10px 12px;
  }

  .workspace-chat__image-grid {
    max-width: 280px;
  }

  .workspace-chat__image-grid.count-1 {
    width: min(280px, calc(100vw - 120px));
    max-width: min(280px, calc(100vw - 120px));
  }

  .workspace-chat__image-grid.count-1 .workspace-chat__image-link img {
    max-height: 400px;
  }

  .workspace-chat__image-grid.count-2 .workspace-chat__image-link,
  .workspace-chat__image-grid.count-3 .workspace-chat__image-link,
  .workspace-chat__image-grid.count-4 .workspace-chat__image-link {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .workspace-chat__image-grid.count-3 .workspace-chat__image-link:first-child {
    aspect-ratio: auto;
  }

  .workspace-chat__file-link {
    max-width: min(240px, 100%);
  }

}

@media (max-width: 1024px) {
  .workspace-layout--chat .workspace-chat {
    gap: 0;
    min-height: 0;
    height: 100%;
  }

  .workspace-layout--chat .workspace-chat__messages {
    min-height: 0;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ================================================
   WorkspaceChatPage.css 추가 스타일
   기존 CSS 파일 하단에 붙여넣기
================================================ */

/* ── 채널 헤더 ── */
.workspace-chat__channel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--color-border);
  background: var(--color-bg-white);
  flex-shrink: 0;
}

.workspace-chat__channel-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-chat__channel-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.workspace-chat__channel-hash {
  font-size: 16px;
  color: var(--color-text-placeholder);
  font-weight: 400;
  line-height: 1;
}

.workspace-chat__channel-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat__member-avatars {
  display: flex;
  align-items: center;
}

.workspace-chat__member-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-bg-white);
  margin-left: -6px;
  flex-shrink: 0;
}

.workspace-chat__member-avatars .workspace-chat__member-avatar:first-child {
  margin-left: 0;
}

.workspace-chat__member-avatar-more {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 2px solid var(--color-bg-white);
  margin-left: -6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-chat__channel-member-count {
  font-size: 12px;
  color: var(--color-text-placeholder);
  margin-left: 6px;
}

.workspace-chat__channel-clear-ai {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-placeholder);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.workspace-chat__channel-clear-ai:hover {
  background: #fee2e2;
  color: #ef4444;
}

.workspace-chat__attach-button.is-open svg {
  transform: rotate(45deg);
}

.workspace-chat__attach-button svg {
  transition: transform 0.18s ease;
}

.workspace-chat__attachment-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  bottom: calc(100% + 10px);
  width: 176px;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  box-shadow: 0 16px 38px var(--color-shadow-base);
}

.workspace-chat__attachment-menu button {
  width: 100%;
  min-height: 44px;
  padding: 6px 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.workspace-chat__attachment-menu button:hover,
.workspace-chat__attachment-menu button:focus-visible {
  background: var(--color-bg-soft);
  outline: none;
}

.workspace-chat__attachment-menu button > span {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.workspace-chat__attachment-menu .is-photo {
  color: var(--color-chat-primary);
  background: var(--color-chat-primary-glow-10);
}

.workspace-chat__attachment-menu .is-video {
  color: var(--color-chat-accent);
  background: var(--color-chat-indigo-glow-12);
}

.workspace-chat__attachment-menu .is-file {
  color: var(--color-chat-muted-2);
  background: var(--color-border);
}

.workspace-chat__memory-toggle {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.workspace-chat__memory-toggle:hover,
.workspace-chat__memory-toggle.is-active {
  border-color: #c9c5ee;
  background: #eeecfb;
  color: #5f55bd;
}

/* ── AI 채널 주제 칩 바 ──────────────────── */
.workspace-chat__topic-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-surface, #fff);
  flex-shrink: 0;
}
.workspace-chat__topic-bar::-webkit-scrollbar { display: none; }

.workspace-chat__topic-chip {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: transparent;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.workspace-chat__topic-chip:hover {
  background: var(--color-bg-hover, #f3f4f6);
  color: var(--color-text-primary, #111827);
}
.workspace-chat__topic-chip.is-active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .workspace-chat__topic-bar {
  background: var(--color-bg-surface, #1e1e2e);
  border-bottom-color: var(--color-border, #2e2e3e);
}
[data-theme="dark"] .workspace-chat__topic-chip {
  border-color: var(--color-border, #3e3e4e);
  color: var(--color-text-secondary, #9ca3af);
}
[data-theme="dark"] .workspace-chat__topic-chip:hover {
  background: var(--color-bg-hover, #2e2e3e);
  color: #fff;
}

.workspace-chat__channel-notify {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.workspace-chat__channel-notify:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-icon);
}

.workspace-chat__channel-notify.is-muted {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
}

.workspace-chat__channel-notify:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.workspace-chat__channel-search-button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

.workspace-chat__channel-search-button:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-icon);
}

.workspace-chat__channel-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-chat__channel-search svg {
  flex: 0 0 auto;
  font-size: 18px;
}

.workspace-chat__channel-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 700;
}

.workspace-chat__channel-search input::placeholder {
  color: var(--color-text-placeholder);
}

.workspace-chat__search-cancel {
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: var(--color-bg-soft);
  color: var(--color-chat-search-text);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.workspace-chat__search-cancel:hover {
  background: var(--color-border);
  color: var(--color-text-main);
}

/* ── 스레드 프리뷰 ── */
.workspace-chat__thread-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 5px 10px;
  background: var(--color-accent-soft);
  border: 0.5px solid var(--color-primary-soft-hover);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
  max-width: 360px;
  width: 100%;
}

.workspace-chat__thread-preview:hover {
  border-color: var(--color-chat-thread-hover-border);
}

.workspace-chat__thread-avatars {
  display: flex;
  align-items: center;
}

.workspace-chat__thread-avatar-img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-bg-white);
  object-fit: cover;
  margin-left: -4px;
}

.workspace-chat__thread-avatar-img:first-child {
  margin-left: 0;
}

.workspace-chat__thread-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-chat-thread-count);
  white-space: nowrap;
}

.workspace-chat__thread-last {
  font-size: 12px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* ── 메시지 텍스트 줄바꿈 개선 ── */
.workspace-chat__content {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

/* ── placeholder 개선 ── */
.workspace-chat__input::placeholder {
  color: var(--color-text-placeholder);
  font-size: 14px;
}

/* ── 날짜 구분선 개선 ── */
.workspace-chat__date-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
  padding: 0 4px;
}

.workspace-chat__date-divider::before,
.workspace-chat__date-divider::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background: var(--color-border);
}

.workspace-chat__date-divider span {
  font-size: 11px;
  color: var(--color-text-placeholder);
  white-space: nowrap;
  padding: 2px 8px;
  background: var(--color-bg-white);
  border: 0.5px solid var(--color-border);
  border-radius: 10px;
}


.workspace-chat__readers {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  align-self: flex-end;
}

.workspace-chat__bottom-readers {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  padding: 2px 12px 4px;
}

.workspace-chat__inline-readers {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 2px 44px 2px 0;
}

.workspace-chat__reader-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--color-bg-white);
  box-shadow: 0 1px 2px var(--color-chat-black-glow-12);
}

.workspace-chat__reader-more {
  font-size: 10px;
  color: var(--color-chat-reader-more);
  font-weight: 600;
  line-height: 1;
  padding: 2px 2px;
}

/* ── 채널 전환 드롭다운 ── */
.workspace-chat__channel-switcher {
  position: relative;
  flex-shrink: 0;
}

.workspace-chat__channel-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.12s;
  color: inherit;
}

.workspace-chat__channel-toggle:hover {
  background: var(--color-chat-black-glow-05);
}

.workspace-chat__channel-chevron {
  font-size: 14px;
  color: var(--color-text-placeholder);
  transition: transform 0.2s;
}

.workspace-chat__channel-chevron.is-open {
  transform: rotate(180deg);
}

.workspace-chat__channel-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
  border: none;
  cursor: default;
}

.workspace-chat__channel-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 180px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--color-chat-shadow-12);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-chat__channel-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--color-text-sub);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.workspace-chat__channel-menu-item:hover {
  background: var(--color-bg-soft);
}

.workspace-chat__channel-menu-item.is-active {
  background: var(--color-brand-soft);
  color: var(--color-chat-accent);
  font-weight: 600;
}

.workspace-chat__channel-menu-unread {
  margin-left: auto;
  background: var(--color-chat-unread-dot);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
}

.workspace-chat__channel-menu-add {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-top: 1px solid var(--color-bg-soft);
  background: transparent;
  border-radius: 0 0 8px 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-top: 2px;
  transition: background 0.1s;
}

.workspace-chat__channel-menu-add:hover {
  background: var(--color-text-inverse);
  color: var(--color-text-sub);
}

/* ── Gather AI Thinking Indicator ── */
.workspace-chat__ai-thinking-simple {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 24px;
  animation: fadeInTyping 0.2s ease;
}

@keyframes fadeInTyping {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 점은 한 묶음으로 다닌다 — 옆에 서는 글자와 간격이 따로 놀지 않게. */
.ai-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ai-thinking-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-placeholder);
  animation: aiDotBounce 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.ai-thinking-dot:nth-child(1) { animation-delay: 0s; }
.ai-thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes aiDotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

.ai-thinking-star {
  font-size: 14px;
  color: #ef4444;
  animation: aiStarPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
  line-height: 1;
}

@keyframes aiStarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

.ai-thinking-label {
  font-size: 12.5px;
  color: var(--color-text-placeholder);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-3, dark.css 흡수분)
   토큰 재정의로 정확히 커버되지 않는 값만 여기 남긴다.
   ================================================ */

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__link-preview {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__link-preview__body strong,
[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__link-preview__body span,
[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__link-preview__body em {
  color: var(--color-text-sub);
}

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__file-icon {
  background: var(--color-chat-reply-preview-bg-dark);
}

[data-theme="dark"] .workspace-chat__channel-notify,
[data-theme="dark"] .workspace-chat__channel-search-button {
  background: var(--color-bg-elevated-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__channel-notify:hover,
[data-theme="dark"] .workspace-chat__channel-search-button:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__bubble {
  background: var(--color-bg-elevated-dark);
  border-color: var(--color-border);
  box-shadow: none;
}

[data-theme="dark"] .workspace-chat__reply-preview {
  background: var(--color-chat-reply-preview-bg-dark);
  border-left-color: var(--color-chat-reply-preview-border-dark);
}

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__reply-preview {
  background: var(--color-bg-white);
  border-left-color: var(--color-indigo-accent-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__sender-name {
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__meta-side {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__time {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__avatar {
  background: var(--color-bg-elevated-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .workspace-chat__date-divider::before,
[data-theme="dark"] .workspace-chat__date-divider::after {
  background: var(--color-border);
}

[data-theme="dark"] .workspace-chat__date-divider span {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__older-loading {
  background: var(--color-bg-elevated-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__scroll-bottom-btn {
  border-color: var(--color-border);
  color: var(--color-brand-strong);
  box-shadow: 0 8px 24px var(--color-shadow-strong);
}

[data-theme="dark"] .workspace-chat__scroll-bottom-btn:hover {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .workspace-chat__form {
  border-color: var(--color-chat-form-border-dark);
  box-shadow: none;
}

[data-theme="dark"] .workspace-chat__form--drag-over {
  border-color: var(--color-primary-active);
}

[data-theme="dark"] .workspace-chat__attach-button {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__attach-button:hover:not(:disabled) {
  color: var(--color-brand-strong);
}

[data-theme="dark"] .workspace-chat__input {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .workspace-chat__input::placeholder {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__input:focus {
  border-color: var(--color-primary-active);
  box-shadow: 0 0 0 4px var(--color-chat-input-focus-glow-dark);
}

[data-theme="dark"] .workspace-chat__input:disabled {
  background: var(--color-bg-sunken-dark);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__replying {
  background: var(--color-brand-purple-soft-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .workspace-chat__replying button {
  background: var(--color-chat-indigo-glow-20-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .workspace-chat__selected-file {
  background: var(--color-brand-purple-soft-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .workspace-chat__selected-file button {
  background: var(--color-chat-indigo-glow-20-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .workspace-chat__mention-list {
  border-color: var(--color-border);
  box-shadow: 0 18px 36px var(--color-shadow-strong);
}

[data-theme="dark"] .workspace-chat__mention-list button:hover,
[data-theme="dark"] .workspace-chat__mention-list button:focus-visible {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .workspace-chat__mention-list button.is-selected {
  color: var(--color-brand-strong);
}

[data-theme="dark"] .workspace-chat__mention-list small {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__message-row.received .workspace-chat__file-link {
  background: var(--color-bg-white);
}

[data-theme="dark"] .workspace-chat__jump-button {
  color: var(--color-brand-strong);
}

[data-theme="dark"] .workspace-chat__channel-notify.is-muted {
  background: var(--color-bg-sunken-dark);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__channel-search {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .workspace-chat__channel-search input::placeholder {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .workspace-chat__search-cancel {
  background: var(--color-bg-elevated-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .workspace-chat__swipe-reply-indicator {
  color: var(--color-brand-strong);
}

[data-theme="dark"] .workspace-chat__reader-avatar {
  border-color: var(--color-bg-white);
}

/* 이미지 프리뷰 라이트박스는 테마와 무관하게 항상 어두운 오버레이 UI -
   와일드카드([class*="-modal"])의 일반 다크값에 덮이지 않도록 명시.
   텍스트는 항상 흰색 유지(--color-text-on-brand, invariant). */
[data-theme="dark"] .image-preview-modal__backdrop {
  background: var(--color-chat-backdrop-strong);
}

[data-theme="dark"] .image-preview-modal__topbar {
  color: var(--color-text-on-brand);
}

[data-theme="dark"] .image-preview-modal__actions a,
[data-theme="dark"] .image-preview-modal__actions button,
[data-theme="dark"] .image-preview-modal__nav {
  background: var(--color-chat-overlay-white-14);
  color: var(--color-text-on-brand);
}

[data-theme="dark"] .image-preview-modal__actions a:hover,
[data-theme="dark"] .image-preview-modal__actions button:hover,
[data-theme="dark"] .image-preview-modal__nav:hover {
  background: var(--color-chat-overlay-white-22);
}

/* ── 리서치 로그 패널 ── */
.research-log-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: var(--color-bg-white);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: -2px 0 8px rgba(0,0,0,.06);
}

/* ── 오른쪽 패널 탭 래퍼 ──────────────────── */
.workspace-chat__right-panel {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg-surface, #fff);
  overflow: hidden;
}
.workspace-chat__right-panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
}
.workspace-chat__right-tab {
  flex: 1;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition: color 0.15s, border-bottom 0.15s;
  border-bottom: 2px solid transparent;
}
.workspace-chat__right-tab.is-active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

/* ── AI 캔버스 패널 ──────────────────────── */
.ai-canvas-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.ai-canvas-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
}
.ai-canvas-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
}
.ai-canvas-panel__refresh {
  font-size: 11px;
  color: #4f46e5;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.ai-canvas-panel__refresh:hover { background: #eef2ff; }
.ai-canvas-panel__refresh:disabled { opacity: 0.5; cursor: default; }
.ai-canvas-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-canvas-panel__empty {
  font-size: 12px;
  color: var(--color-text-placeholder, #9ca3af);
  text-align: center;
  margin-top: 40px;
  line-height: 1.6;
}
.ai-canvas-panel__loading {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 40px;
}
.ai-canvas-panel__loading-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4f46e5;
  animation: aiDotBounce 1.2s ease-in-out infinite;
}
.ai-canvas-panel__loading-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-canvas-panel__loading-dot:nth-child(3) { animation-delay: 0.4s; }

.ai-canvas-card {
  background: var(--color-bg-card, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-canvas-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.ai-canvas-card__emoji { font-size: 16px; line-height: 1; }
.ai-canvas-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, #111827);
}
.ai-canvas-card__points {
  margin: 0;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-canvas-card__point {
  font-size: 12px;
  color: var(--color-text-secondary, #374151);
  line-height: 1.5;
}

[data-theme="dark"] .workspace-chat__right-panel {
  background: var(--color-bg-surface, #1e1e2e);
  border-left-color: var(--color-border, #2e2e3e);
}
[data-theme="dark"] .ai-canvas-card {
  background: var(--color-bg-card, #252535);
  border-color: var(--color-border, #3e3e4e);
}

.research-log-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.research-log-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.research-log-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  padding: 2px;
  display: flex;
  align-items: center;
}

.research-log-panel__close:hover {
  color: var(--color-text-primary);
}

.research-log-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.research-log-panel__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.research-log-panel__section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-tertiary);
}

.research-log-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.research-log-panel__query-item {
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 4px 8px;
  background: var(--color-bg-subtle, rgba(0,0,0,.04));
  border-radius: 4px;
  line-height: 1.4;
}

.research-log-panel__source-item {
  font-size: 12px;
  line-height: 1.4;
}

.research-log-panel__source-link {
  color: var(--color-primary, #4f46e5);
  text-decoration: none;
  word-break: break-all;
}

.research-log-panel__source-link:hover {
  text-decoration: underline;
}

.research-log-panel__empty {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin-top: 20px;
}

/* ── 리서치 로그 열렸을 때 채팅 영역 밀기 ── */
.workspace-chat.has-research-log .workspace-chat__messages {
  margin-right: 280px;
}

.workspace-chat.has-research-log .workspace-chat__form {
  margin-right: 280px;
}

.workspace-chat.has-research-log .workspace-chat__channel-header {
  padding-right: calc(56px + 280px);
}

/* ── 리서치 로그 엔트리 ── */
.research-log-panel__count {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin-left: 6px;
}

.research-log-panel__empty {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  padding: 24px 8px;
  line-height: 1.6;
}

.research-log-panel__entry {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.research-log-panel__entry:last-child {
  border-bottom: none;
}

.research-log-panel__entry-time {
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: .02em;
}

/* Gather AI의 대화 옆에서 전략보드와 같은 팀 기억을 편집하는 보조 캔버스 */
.workspace-chat.has-memory-canvas {
  --memory-canvas-width: max(430px, calc(100% - 720px));
}

.workspace-chat__memory-canvas {
  position: absolute;
  inset: 0 0 0 auto;
  width: var(--memory-canvas-width, 430px);
  min-width: 0;
  z-index: 30;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-white);
  box-shadow: -10px 0 30px rgba(23, 25, 34, .09);
}

.workspace-chat__memory-canvas.is-expanded {
  inset: 0;
  width: 100%;
  border-left: 0;
  box-shadow: none;
}

.workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__messages,
.workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__form,
.workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__topic-bar {
  margin-right: var(--memory-canvas-width, 430px);
}

.workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__channel-header {
  padding-right: calc(var(--memory-canvas-width, 430px) + 16px);
}

[data-theme="dark"] .workspace-chat__memory-toggle:hover,
[data-theme="dark"] .workspace-chat__memory-toggle.is-active {
  border-color: #57516f;
  background: rgba(143, 131, 214, .18);
  color: #cbc5ff;
}

@media (max-width: 1040px) {
  .workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__messages,
  .workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__form,
  .workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__topic-bar {
    margin-right: 0;
  }

  .workspace-chat.has-memory-canvas:not(.has-memory-canvas-expanded) .workspace-chat__channel-header {
    padding-right: 16px;
  }

  .workspace-chat__memory-canvas {
    width: min(620px, 100%);
    box-shadow: -18px 0 50px rgba(23, 25, 34, .2);
  }
}

@media (max-width: 640px) {
  .workspace-chat__memory-toggle { width: 34px; padding: 0; }
  .workspace-chat__memory-toggle span { display: none; }
  .workspace-chat__memory-canvas { width: 100%; border-left: 0; }
}

/* AI 작업 기록 — 답변 본문이 아니라 "무엇을 했는지"라서 한 톤 낮춘다. */
.workspace-chat__ai-trace {
  flex: 0 0 auto;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}
.workspace-chat__ai-trace-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 0;
  color: #6f727b;
  font-size: 12.5px;
}
.workspace-chat__ai-trace-step > svg { flex: 0 0 auto; width: 14px; height: 14px; opacity: .75; }
.workspace-chat__ai-trace-label { flex: 0 0 auto; color: #3f434c; }
.workspace-chat__ai-trace-detail {
  overflow: hidden;
  min-width: 0;
  color: #93969e;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-chat__ai-trace-count { flex: 0 0 auto; margin-left: auto; padding-left: 10px; color: #a4a7ae; font-size: 12px; }
.workspace-chat__ai-trace-step.is-canvas .workspace-chat__ai-trace-label { color: #5b53c6; }

/* AI 사용량 한도 */
.workspace-chat__ai-limit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 16px 8px;
  padding: 12px 14px;
  border: 1px solid #f2b9b2;
  border-radius: 8px;
  background: #fff0ed;
  color: #bd382c;
  font-size: 13px;
}
.workspace-chat__ai-limit > svg { flex: 0 0 auto; width: 20px; height: 20px; }
.workspace-chat__ai-limit-copy {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.workspace-chat__ai-limit-copy strong {
  color: #a92f25;
  font-size: 13px;
  line-height: 1.35;
}
.workspace-chat__ai-limit-copy span {
  color: #8f5a55;
  font-size: 11.5px;
  line-height: 1.4;
}
.workspace-chat__ai-limit > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: #d94738;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.workspace-chat__ai-limit > button:hover { background: #bf382d; }
.workspace-chat__ai-limit > button svg { width: 15px; height: 15px; }
.workspace-chat__ai-limit.is-provider {
  border-color: #e6cf9b;
  background: #fff8e8;
  color: #956515;
}
.workspace-chat__ai-limit.is-provider .workspace-chat__ai-limit-copy strong { color: #77500f; }
.workspace-chat__ai-limit.is-provider .workspace-chat__ai-limit-copy span { color: #806b45; }
.workspace-chat__ai-limit.is-provider > button { background: #8a6829; }

@media (max-width: 620px) {
  .workspace-chat__ai-limit { align-items: flex-start; flex-wrap: wrap; }
  .workspace-chat__ai-limit-copy { min-width: calc(100% - 36px); }
  .workspace-chat__ai-limit > button { margin-left: 32px; }
}

[data-theme="dark"] .workspace-chat__ai-trace-step { color: #9a9dab; }
[data-theme="dark"] .workspace-chat__ai-trace-label { color: #d5d7dd; }
[data-theme="dark"] .workspace-chat__ai-trace-detail { color: #7f838d; }
[data-theme="dark"] .workspace-chat__ai-limit { border-color: #70433e; background: #352320; color: #ff9d91; }
[data-theme="dark"] .workspace-chat__ai-limit-copy strong { color: #ffb2a8; }
[data-theme="dark"] .workspace-chat__ai-limit-copy span { color: #d7a09a; }
[data-theme="dark"] .workspace-chat__ai-limit.is-provider { border-color: #665735; background: #302a1d; color: #e6c475; }
[data-theme="dark"] .workspace-chat__ai-limit.is-provider .workspace-chat__ai-limit-copy strong { color: #f0cf80; }
[data-theme="dark"] .workspace-chat__ai-limit.is-provider .workspace-chat__ai-limit-copy span { color: #c9b788; }
:root {
  /* 스레드 패널은 항상 밝은 배경으로 고정된 디자인 - 아래 값들은
     다크모드에서도 값이 바뀌지 않는 불변(invariant) 토큰이다 */
  --color-tp-overlay: rgba(15, 23, 42, 0.32);
  --color-tp-bg: rgb(255, 255, 255);
  --color-tp-shadow: rgba(15, 23, 42, 0.16);
  --color-tp-border: rgba(148, 163, 184, 0.18);
  --color-tp-text: rgb(17, 24, 39);
  --color-tp-close: rgb(107, 114, 128);
  --color-tp-root-bg: rgb(248, 250, 252);
  --color-tp-empty: rgb(148, 163, 184);
}

.thread-panel__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-tp-overlay);
  display: flex;
  justify-content: flex-end;
}

.thread-panel {
  width: 420px;
  max-width: 100%;
  height: 100%;
  background: var(--color-tp-bg);
  box-shadow: -18px 0 40px var(--color-tp-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.thread-panel__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-tp-border);
}

.thread-panel__header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-tp-text);
}

.thread-panel__close {
  border: 0;
  background: transparent;
  color: var(--color-tp-close);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.thread-panel__root {
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--color-tp-root-bg);
  border-bottom: 1px solid var(--color-tp-border);
  max-height: 220px;
  overflow-y: auto;
}

.thread-panel__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thread-panel__empty {
  margin: auto;
  font-size: 13px;
  color: var(--color-tp-empty);
  text-align: center;
}

.thread-panel__form {
  flex-shrink: 0;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

@media (max-width: 640px) {
  .thread-panel__overlay {
    align-items: flex-end;
    justify-content: center;
  }

  .thread-panel {
    width: 100%;
    height: 88dvh;
    border-radius: 20px 20px 0 0;
  }

  /* 가상 키보드가 열리면 dvh가 키보드 높이만큼 줄어드는 걸 그대로 반영해
     입력창이 키보드에 가려지지 않고 항상 화면 안에 보이게 함 */
  .touch-keyboard-open .thread-panel {
    height: 100dvh;
    border-radius: 0;
  }
}

/* 스레드 패널은 항상 밝은 배경으로 고정된 디자인이라, 전역 다크모드의
   [class*="-panel"]/h1~h6 규칙이 배경·글자색을 덮어써 흰 배경에 흰 글씨처럼
   안 보이는 문제가 생긴다. 다크모드에서도 이 패널만은 원래 밝은 색을 유지하도록
   명시적으로 다시 지정한다. */
[data-theme="dark"] .thread-panel {
  background: var(--color-tp-bg) !important;
  color: var(--color-tp-text) !important;
}

[data-theme="dark"] .thread-panel__header {
  border-bottom-color: var(--color-tp-border) !important;
}

[data-theme="dark"] .thread-panel__header h2 {
  color: var(--color-tp-text) !important;
}

[data-theme="dark"] .thread-panel__close {
  color: var(--color-tp-close) !important;
}

[data-theme="dark"] .thread-panel__root {
  background: var(--color-tp-root-bg) !important;
  border-bottom-color: var(--color-tp-border) !important;
}

[data-theme="dark"] .thread-panel__empty {
  color: var(--color-tp-empty) !important;
}
.gjp-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1f3a 0%, #0e1526 100%);
  padding: 24px 16px;
}

.gjp-card {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.gjp-card--error {
  text-align: center;
  padding: 48px 28px;
}

/* ── 헤더 ── */
.gjp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
}

.gjp-logo {
  font-size: 20px;
  font-weight: 800;
  color: #1a1f3a;
  letter-spacing: -0.5px;
}

.gjp-ws-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.gjp-ws-label {
  font-size: 10px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.gjp-ws-name {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 캐릭터 미리보기 ── */
.gjp-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.gjp-avatar-stage {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8ecf8 0%, #d4daf0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.gjp-preview-label {
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}

/* ── 폼 섹션 ── */
.gjp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gjp-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gjp-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gjp-input {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1f2937;
  outline: none;
  transition: border-color 0.15s;
}
.gjp-input:focus { border-color: #6272c0; }

/* ── 색상 선택 ── */
.gjp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gjp-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.15s;
  padding: 0;
}
.gjp-swatch:hover { transform: scale(1.1); }
.gjp-swatch.is-active { border-color: #1a1f3a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a1f3a; }

/* ── 칩 (스타일 선택) ── */
.gjp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gjp-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gjp-chip:hover { border-color: #6272c0; color: #6272c0; }
.gjp-chip.is-active { background: #1a1f3a; border-color: #1a1f3a; color: #fff; }

/* ── 버튼 ── */
.gjp-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.gjp-btn:active { transform: scale(0.98); }
.gjp-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gjp-btn--primary { background: #1a1f3a; color: #fff; }
.gjp-btn--primary:hover:not(:disabled) { background: #232b4e; }

.gjp-btn--secondary { background: #f3f4f6; color: #374151; }
.gjp-btn--secondary:hover { background: #e5e7eb; }

/* ── 안내 문구 ── */
.gjp-notice {
  margin-top: 14px;
  font-size: 11.5px;
  color: #9ca3af;
  text-align: center;
  line-height: 1.6;
}

/* ── 로딩 ── */
.gjp-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #6272c0;
  border-radius: 50%;
  animation: gjp-spin 0.7s linear infinite;
  margin: 0 auto 16px;
}
@keyframes gjp-spin { to { transform: rotate(360deg); } }

.gjp-loading-text { text-align: center; color: #9ca3af; font-size: 14px; }

/* ── 에러 ── */
.gjp-error-icon { font-size: 48px; margin-bottom: 12px; }
.gjp-error-title { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.gjp-error-msg { font-size: 14px; color: #6b7280; margin-bottom: 24px; }
.gwp-wrap {
  min-height: 100vh;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
}

/* ── 상단 바 ── */
.gwp-topbar {
  height: 52px;
  background: #1a1f3a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.gwp-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gwp-logo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.gwp-ws-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}

.gwp-guest-badge {
  background: #C07A28;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}

.gwp-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gwp-my-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gwp-my-nick {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 버튼 ── */
.gwp-btn { border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 14px; transition: opacity 0.15s; }
.gwp-btn--leave { background: rgba(255,255,255,0.12); color: #fff; }
.gwp-btn--leave:hover { background: rgba(255,255,255,0.22); }
.gwp-btn--secondary { background: #f3f4f6; color: #374151; }
.gwp-btn--secondary:hover { background: #e5e7eb; }

/* ── 본문 ── */
.gwp-body {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 24px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.gwp-main { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.gwp-sidebar { width: 240px; flex-shrink: 0; }

/* ── 라운지 카드 ── */
.gwp-lounge-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border: 2px solid #C07A28;
}

.gwp-lounge-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.gwp-lounge-icon { font-size: 32px; }

.gwp-lounge-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 2px;
}

.gwp-lounge-sub {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

/* ── 라운지 인원 ── */
.gwp-lounge-people { padding-top: 16px; border-top: 1px solid #f3f4f6; }

.gwp-people-label {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

.gwp-people-list { display: flex; flex-direction: column; gap: 10px; }

.gwp-person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gwp-person--me .gwp-person-name { font-weight: 700; }
.gwp-person--me .gwp-person-name em { font-style: normal; font-weight: 400; color: #9ca3af; font-size: 12px; }

.gwp-person-avatar { position: relative; width: 36px; height: 36px; }
.gwp-person-online {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px;
  background: #22c55e; border: 2px solid #fff;
  border-radius: 50%;
}

.gwp-person-name { font-size: 14px; color: #1f2937; }

.gwp-member-tag {
  background: #e8f0fe; color: #4a6aaa;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
}

.gwp-empty { font-size: 13px; color: #d1d5db; text-align: center; padding: 16px 0; }

/* ── 팀원 카드 ── */
.gwp-members-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.gwp-card-title { font-size: 14px; font-weight: 700; color: #374151; margin: 0 0 12px; }
.gwp-member-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gwp-member-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #4b5563; }
.gwp-member-dot { width: 7px; height: 7px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }

/* ── 사이드바: 구역 지도 ── */
.gwp-sidebar-title { font-size: 13px; font-weight: 700; color: #6b7280; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.gwp-zone-map { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

.gwp-zone-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  font-size: 13px;
  color: #374151;
}

.gwp-zone-item--active {
  border: 2px solid #C07A28;
  background: #fdf7ef;
  color: #92400e;
  font-weight: 600;
}

.gwp-zone-item--locked {
  opacity: 0.45;
  border: 1.5px solid #e5e7eb;
}

.gwp-zone-icon { font-size: 16px; }
.gwp-zone-name { flex: 1; }
.gwp-zone-lock { font-size: 12px; }
.gwp-zone-here { font-size: 11px; color: #C07A28; font-weight: 700; }

.gwp-sidebar-notice { font-size: 11px; color: #9ca3af; line-height: 1.6; }

/* ── 로딩/에러 센터 ── */
.gwp-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #6b7280;
  font-size: 14px;
  padding: 48px;
}

.gwp-center--error { gap: 16px; }
.gwp-error-icon { font-size: 48px; margin: 0; }
.gwp-error-msg { text-align: center; color: #6b7280; }

.gwp-spinner {
  width: 36px; height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #C07A28;
  border-radius: 50%;
  animation: gwp-spin 0.7s linear infinite;
}
@keyframes gwp-spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .gwp-body { flex-direction: column; padding: 16px; }
  .gwp-sidebar { width: 100%; }
}
.wil-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
  padding: 24px 16px;
}

.wil-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.wil-logo {
  margin-bottom: 28px;
}
.wil-logo-text {
  font-size: 15px;
  font-weight: 800;
  color: #4965ff;
  letter-spacing: -0.3px;
}

.wil-badge {
  display: inline-block;
  padding: 3px 12px;
  background: #eef2ff;
  color: #4965ff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 12px;
}

.wil-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 10px;
}

.wil-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 16px;
}

.wil-sub {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0 0 24px;
}

.wil-btn-primary {
  width: 100%;
  height: 48px;
  background: #4965ff;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 10px;
}
.wil-btn-primary:hover { background: #3b52e6; }

.wil-btn-secondary {
  width: 100%;
  height: 44px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 8px;
}
.wil-btn-secondary:hover { background: #e2e8f0; }

.wil-hint {
  font-size: 11px;
  color: #cbd5e1;
  margin: 0;
}

.wil-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  color: #94a3b8;
  font-size: 14px;
}
.wil-spinner {
  width: 28px; height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #4965ff;
  border-radius: 50%;
  animation: wil-spin 0.7s linear infinite;
}
@keyframes wil-spin { to { transform: rotate(360deg); } }

.wil-done, .wil-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.wil-done-icon { font-size: 40px; }
.wil-done h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; }
.wil-done p  { font-size: 14px; color: #64748b; margin: 0 0 8px; line-height: 1.6; }
.wil-error-icon { font-size: 36px; }
.wil-error p { font-size: 14px; color: #dc2626; margin: 0 0 8px; }
.pil-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f6fa;
  padding: 24px 16px;
}

.pil-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  text-align: center;
}

.pil-logo {
  font-size: 15px;
  font-weight: 700;
  color: #5b4fcf;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}

.pil-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #888;
  padding: 24px 0;
}

.pil-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e5e5e5;
  border-top-color: #5b4fcf;
  border-radius: 50%;
  animation: pil-spin 0.7s linear infinite;
}

@keyframes pil-spin { to { transform: rotate(360deg); } }

.pil-badge {
  display: inline-block;
  background: #ede9ff;
  color: #5b4fcf;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.pil-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 10px;
  line-height: 1.35;
}

.pil-summary {
  font-size: 14px;
  color: #555;
  margin: 0 0 18px;
  line-height: 1.6;
}

.pil-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.pil-slots {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.pil-closed {
  color: #e53935;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0 0;
}

/* 비로그인 */
.pil-auth-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.pil-auth-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 4px;
}

/* 로그인 상태 */
.pil-apply-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.pil-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8f8fc;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
}

.pil-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pil-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5b4fcf;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.pil-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.pil-profile-username {
  font-size: 12px;
  color: #888;
  margin: 2px 0 0;
}

.pil-edit-link {
  margin-left: auto;
  background: none;
  border: none;
  color: #5b4fcf;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.pil-apply-hint {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 버튼 */
.pil-btn-primary {
  width: 100%;
  padding: 14px;
  background: #5b4fcf;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pil-btn-primary:hover:not(:disabled) { background: #4a3fb8; }
.pil-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.pil-btn-secondary {
  width: 100%;
  padding: 13px;
  background: #f0eeff;
  color: #5b4fcf;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pil-btn-secondary:hover { background: #e5e0ff; }

/* 완료 / 에러 */
.pil-done, .pil-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.pil-done-icon, .pil-error-icon { font-size: 40px; }

.pil-done h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

.pil-done p, .pil-error p {
  font-size: 14px;
  color: #666;
  margin: 0;
}
:root {
  --color-spp-back-text: rgb(107, 90, 237);
  --color-spp-toggle-bg: rgb(245, 243, 255);
  --color-spp-toggle-text: rgb(91, 70, 219);
  --color-spp-toggle-hover-bg: rgb(237, 232, 255);
  --color-spp-actions-border: rgb(240, 237, 248);
}

.settings-password-page {
  min-height: 100vh;
  padding: 48px 20px 80px;
  background:
    linear-gradient(
      180deg,
      var(--color-bg-white) 0%,
      var(--color-sp-bg-2) 8%,
      var(--color-sp-bg-3) 18%,
      var(--color-sp-bg-4) 28%,
      var(--color-sp-bg-5) 40%,
      var(--color-bg-white) 54%
    ),
    var(--color-bg-white);
}

.settings-password-container {
  max-width: 720px;
  margin: 0 auto;
}

.settings-password-header {
  margin-bottom: 24px;
}

.settings-password-back {
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-spp-back-text);
  cursor: pointer;
}

.settings-password-back:hover {
  opacity: 0.85;
}

.settings-password-kicker {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-accent);
}

.settings-password-header h1 {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 800;
  color: var(--color-sp-heading);
}

.settings-password-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-sp-desc);
}

.settings-password-card {
  padding: 24px;
  background: var(--color-sp-card-bg);
  border: 1px solid var(--color-sp-card-border);
  border-radius: 22px;
  box-shadow: 0 10px 30px var(--color-sp-card-shadow);
  backdrop-filter: blur(10px);
}

.settings-password-card-header {
  margin-bottom: 20px;
}

.settings-password-card-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-sp-heading);
}

.settings-password-card-header p {
  margin: 0;
  font-size: 14px;
  color: var(--color-sp-desc-2);
  line-height: 1.6;
}

.settings-password-feedback {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

.settings-password-feedback-error {
  color: var(--color-danger-strong);
  background: var(--color-sp-error-bg);
  border: 1px solid var(--color-sp-error-border);
}

.settings-password-feedback-success {
  color: var(--color-sp-success-text);
  background: var(--color-sp-success-bg);
  border: 1px solid var(--color-sp-success-border);
}

.settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-password-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-password-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-label);
}

.settings-password-input-wrap {
  position: relative;
}

.settings-password-input {
  width: 100%;
  height: 48px;
  padding: 0 88px 0 14px;
  border: 1px solid var(--color-sp-input-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  font-size: 15px;
  color: var(--color-sp-heading);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.settings-password-input:focus {
  border-color: var(--color-sp-accent);
  box-shadow: 0 0 0 4px var(--color-sp-input-focus-shadow);
}

.settings-password-input.is-error {
  border-color: var(--color-sp-input-error-border);
  box-shadow: 0 0 0 4px var(--color-sp-input-error-shadow);
}

.settings-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: var(--color-spp-toggle-bg);
  color: var(--color-spp-toggle-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.settings-password-toggle:hover {
  background: var(--color-spp-toggle-hover-bg);
}

.settings-password-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-sp-desc-2);
}

.settings-password-error-text {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sp-error-text);
}

.settings-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--color-spp-actions-border);
}

.settings-password-secondary-btn {
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--color-sp-input-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sp-btn-text);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.settings-password-secondary-btn:hover:not(:disabled) {
  background: var(--color-sp-btn-hover-bg);
  border-color: var(--color-sp-btn-hover-border);
  transform: translateY(-1px);
}

.settings-password-primary-btn {
  min-width: 160px;
  height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-sp-accent), var(--color-sp-toggle-on-end));
  color: var(--color-bg-white);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px var(--color-sp-save-shadow);
  transition:
    transform 0.15s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.settings-password-primary-btn:hover:not(:disabled) {
  opacity: 0.96;
  transform: translateY(-1px);
}

.settings-password-primary-btn:disabled,
.settings-password-secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

@media (max-width: 768px) {
  .settings-password-page {
    padding: 32px 16px 60px;
  }

  .settings-password-header h1 {
    font-size: 30px;
  }

  .settings-password-card {
    padding: 20px;
    border-radius: 18px;
  }

  .settings-password-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .settings-password-secondary-btn,
  .settings-password-primary-btn {
    width: 100%;
  }
}

[data-theme="dark"] {
  --color-spp-back-text: rgb(196, 181, 253);
  --color-spp-toggle-bg: rgba(157, 132, 255, 0.14);
  --color-spp-toggle-text: rgb(196, 181, 253);
  --color-spp-toggle-hover-bg: rgba(157, 132, 255, 0.22);
  --color-spp-actions-border: rgb(51, 65, 85);
}
/* 완료 근거 창 — 앱 전반과 같은 회색·보라 팔레트. */
.todo-evidence__backdrop {
  position: fixed;
  z-index: 1300;
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  background: rgba(24, 26, 31, .42);
}
.todo-evidence {
  box-sizing: border-box;
  width: min(440px, 100%);
  padding: 20px 22px 22px;
  border: 1px solid #e6e7ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(24, 26, 31, .18);
  color: #24262c;
  font-size: 13px;
}
.todo-evidence header { display: flex; align-items: center; gap: 8px; }
.todo-evidence header h2 { flex: 1 1 auto; margin: 0; font-size: 15px; font-weight: 750; }
.todo-evidence header button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6f727b;
  cursor: pointer;
}
.todo-evidence header button:hover { background: #f1f2f4; color: #24262c; }
.todo-evidence header button svg { width: 15px; height: 15px; }

.todo-evidence__task { margin: 12px 0 4px; font-size: 13.5px; font-weight: 700; }
.todo-evidence__lead { margin: 0 0 16px; color: #6f727b; font-size: 12.5px; line-height: 1.6; }

.todo-evidence__field { display: block; margin-bottom: 12px; }
.todo-evidence__field > span { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 700; }
.todo-evidence__field > span small { color: #9a9da5; font-weight: 600; }
.todo-evidence__field textarea,
.todo-evidence__field input {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #e0e1e5;
  border-radius: 9px;
  background: #fff;
  color: #24262c;
  font: inherit;
  font-size: 12.5px;
  outline: 0;
  resize: vertical;
}
.todo-evidence__field textarea:focus,
.todo-evidence__field input:focus { border-color: #7c5cd6; box-shadow: 0 0 0 3px rgba(124, 92, 214, .14); }

.todo-evidence__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.todo-evidence__actions button {
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  background: #7c5cd6;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.todo-evidence__actions button:hover { background: #6d4dc9; }
.todo-evidence__actions button:disabled { opacity: .45; cursor: default; }
.todo-evidence__actions .is-ghost { border: 1px solid #e4e5e9; background: #fff; color: #6f727b; font-weight: 650; }
.todo-evidence__actions .is-ghost:hover { border-color: #cfd1d8; background: #fff; color: #24262c; }

/* 확인 대기 표시 — 목록 어디에 놓아도 같은 모양으로 읽히게 한다. */
.todo-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fdf3e3;
  color: #9a6b1f;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
.todo-review-badge.is-rejected { background: #fdecea; color: #c0453c; }
.todo-review-badge.is-approved { background: #eef7f2; color: #2f7d5d; }
.todo-review-badge svg { width: 11px; height: 11px; }

.todo-review-actions { display: inline-flex; gap: 5px; }
.todo-review-actions button {
  padding: 3px 9px;
  border: 1px solid #e4e5e9;
  border-radius: 7px;
  background: #fff;
  color: #6f727b;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.todo-review-actions button:hover { border-color: #cfd1d8; color: #24262c; }
.todo-review-actions button.is-approve { border-color: #bfe0cf; color: #2f7d5d; }
.todo-review-actions button.is-approve:hover { background: #eef7f2; }

[data-theme="dark"] .todo-evidence { border-color: #33363d; background: #24262c; color: #f0f0f2; }
[data-theme="dark"] .todo-evidence__lead { color: #b9bcc4; }
[data-theme="dark"] .todo-evidence header button:hover { background: #33363d; color: #f0f0f2; }
[data-theme="dark"] .todo-evidence__field textarea,
[data-theme="dark"] .todo-evidence__field input { border-color: #3a3d44; background: #2b2e35; color: #f0f0f2; }
[data-theme="dark"] .todo-evidence__actions .is-ghost { border-color: #3a3d44; background: #2b2e35; color: #b9bcc4; }
[data-theme="dark"] .todo-review-badge { background: #3a3222; color: #d8ab5e; }
[data-theme="dark"] .todo-review-badge.is-rejected { background: #3a2523; color: #e08b83; }
[data-theme="dark"] .todo-review-badge.is-approved { background: #23342c; color: #7fc6a4; }
[data-theme="dark"] .todo-review-actions button { border-color: #3a3d44; background: #2b2e35; color: #b9bcc4; }

/* 완료 규칙 스위치 */
.todo-policy__switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #e6e7ea;
  border-radius: 11px;
  cursor: pointer;
}
.todo-policy__switch:hover { border-color: #cfd1d8; }
.todo-policy__switch input { margin-top: 2px; width: 15px; height: 15px; accent-color: #7c5cd6; cursor: pointer; }
.todo-policy__switch span { display: grid; gap: 3px; }
.todo-policy__switch strong { font-size: 13px; font-weight: 700; }
.todo-policy__switch small { color: #6f727b; font-size: 11.5px; line-height: 1.6; }
.todo-policy__error { margin: 0; color: #c0453c; font-size: 12px; }

[data-theme="dark"] .todo-policy__switch { border-color: #33363d; }
[data-theme="dark"] .todo-policy__switch small { color: #b9bcc4; }
/* 카드 하나를 읽기 전용 문서로 그릴 때의 서식.
   캔버스 카드가 아니라 "펼쳐 읽는" 화면이라 글자와 여백을 키운다. */
.card-doc { color: #24262c; font-size: 14px; line-height: 1.75; }
.card-doc > * { margin: 0; }
.card-doc > * + * { margin-top: 12px; }

.card-doc__block--title { font-size: 1.857em; font-weight: 750; line-height: 1.3; letter-spacing: -.01em; }
.card-doc__block--heading1 { margin-top: 30px; font-size: 1.429em; font-weight: 720; line-height: 1.35; }
.card-doc__block--heading2 { margin-top: 26px; font-size: 1.214em; font-weight: 700; line-height: 1.4; }
.card-doc__block--heading3 { margin-top: 22px; font-size: 1.071em; font-weight: 700; }
.card-doc__block--title + *, .card-doc [class*="heading"] + * { margin-top: 10px; }

.card-doc__block--body { overflow-wrap: anywhere; white-space: pre-wrap; }
.card-doc__block--quote {
  padding: 2px 0 2px 14px;
  border-left: 3px solid #dcdde1;
  color: #55585f;
}
.card-doc__block--todo.is-checked { color: #9699a1; text-decoration: line-through; }
.card-doc__block--numbered { counter-reset: card-doc-li; }
.card-doc .aic-li { position: relative; padding-left: 21px; }
.card-doc .aic-li + .aic-li { margin-top: 4px; }
.card-doc .aic-li::before {
  position: absolute;
  top: 0;
  left: 2px;
  color: #6f737d;
  font-variant-numeric: tabular-nums;
}
.card-doc__block--bullet .aic-li::before { content: "•"; font-weight: 700; }
.card-doc__block--numbered .aic-li::before { counter-increment: card-doc-li; content: counter(card-doc-li) "."; font-size: .92em; }

.card-doc__divider { height: 0; margin: 22px 0; border: 0; border-top: 1px solid #e6e7ea; }
.card-doc__code {
  overflow-x: auto;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f4f4f2;
  font: .893em/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.card-doc__table { overflow-x: auto; }
.card-doc__table table { width: 100%; border-collapse: collapse; font-size: .893em; line-height: 1.55; }
.card-doc__table td { min-width: 96px; padding: 9px 11px; border: 1px solid #e0e1e5; vertical-align: top; overflow-wrap: anywhere; }
.card-doc__table tr:first-child td { background: #f5f5f3; font-weight: 700; }
.card-doc__chart { padding: 4px 0; }
/* 그래프는 캔버스 카드보다 넓은 지면에 놓이므로 조금 키운다. */
.card-doc__chart .aic-chart { font-size: .857em; }
.card-doc__chart .aic-chart--line svg { height: 150px; }
.card-doc__chart .aic-chart--donut svg { flex-basis: 128px; width: 128px; height: 128px; }
.card-doc__chart .aic-chart__legend { max-width: 320px; }

.card-doc a { color: #5b53c6; text-decoration: underline; }
.card-doc code { padding: 1px 5px; border-radius: 4px; background: #f1f1ef; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }

[data-theme="dark"] .card-doc { color: #f0f0f2; }
[data-theme="dark"] .card-doc__block--quote { border-left-color: #444852; color: #b9bcc4; }
[data-theme="dark"] .card-doc__divider { border-top-color: #33363d; }
[data-theme="dark"] .card-doc__code { background: #2d3037; }
[data-theme="dark"] .card-doc__table td { border-color: #3a3d44; }
[data-theme="dark"] .card-doc__table tr:first-child td { background: #303239; }
[data-theme="dark"] .card-doc code { background: #3a3d44; color: #f0a3ad; }
[data-theme="dark"] .card-doc a { color: #a9a2f5; }

/* 그래프 블록 — 표와 같은 톤으로, 숫자가 바로 읽히도록 값을 항상 함께 적는다. */
.aic-chart { margin: 0; color: #3f434c; font-size: 9.5px; line-height: 1.45; }
.aic-chart figcaption { margin-bottom: 7px; color: #55585f; font-weight: 700; }
.aic-chart ul { margin: 0; padding: 0; list-style: none; }
.aic-chart b { font-variant-numeric: tabular-nums; font-weight: 700; }
.aic-chart--bar li { display: grid; grid-template-columns: minmax(48px, 27%) 1fr auto; align-items: center; gap: 8px; }
.aic-chart--bar li + li { margin-top: 5px; }
.aic-chart__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-chart__track { height: 13px; border-radius: 3px; background: #eeeff1; }
.aic-chart__track i { display: block; height: 100%; border-radius: 3px; }
.aic-chart__value { min-width: 34px; text-align: right; }
.aic-chart--line svg { display: block; width: 100%; height: 96px; overflow: visible; }
.aic-chart__axis { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; }
.aic-chart__axis li { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; }
.aic-chart__axis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #797d86; }
.aic-chart__donut-body { display: flex; align-items: center; gap: 14px; }
.aic-chart--donut svg { flex: 0 0 96px; width: 96px; height: 96px; }
.aic-chart__legend { flex: 1 1 auto; min-width: 0; max-width: 230px; }
.aic-chart__legend li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 6px; }
.aic-chart__legend li + li { margin-top: 4px; }
.aic-chart__legend i { width: 8px; height: 8px; border-radius: 2px; }
.aic-chart__legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .aic-chart { color: #d5d7dd; }
[data-theme="dark"] .aic-chart figcaption { color: #c4c7ce; }
[data-theme="dark"] .aic-chart__track { background: #33363d; }
[data-theme="dark"] .aic-chart__axis span { color: #9a9dab; }

/* ── 올린 파일 ────────────────────────────────────────────────────────────
   사진은 카드 안에 펼쳐 보이고, 워드·한글·PDF는 브라우저가 못 펼치므로
   미리보기를 흉내내지 않고 내려받는 칩으로 둔다. */
.card-media { position: relative; }
.card-media--image { margin: 0; }
.card-media--image a { display: block; }
.card-media--image a.is-canvas-draggable { cursor: grab; }
.aic-viewport.is-element-dragging .card-media--image a.is-canvas-draggable { cursor: grabbing; }
.card-media--image img {
  display: block;
  width: 100%;
  max-height: 520px;
  border-radius: 8px;
  background: #f3f3f1;
  object-fit: contain;
}
.card-media--image figcaption { margin-top: 6px; color: #797d86; font-size: .92em; }

.card-media--file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #e2e3e7;
  border-radius: 9px;
  background: #fbfbfa;
}
.card-media__badge {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #ecebff;
  color: #5b53c6;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.card-media__meta { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 1px; }
.card-media__meta strong { overflow: hidden; font-size: .95em; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.card-media__meta small { color: #8b8e97; font-size: .82em; }
.card-media__open {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 6px;
  background: #efeffd;
  color: #5b53c6;
  font-size: .86em;
  font-weight: 700;
  text-decoration: none;
}
.card-media__open:hover { background: #e4e3fb; }
.card-media__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 30, 38, .55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.card-media:hover .card-media__remove, .card-media__remove:focus-visible { opacity: 1; }

[data-theme="dark"] .card-media--file { border-color: #3a3d44; background: #2a2c33; }
[data-theme="dark"] .card-media__badge { background: #38356b; color: #b9b3ff; }
[data-theme="dark"] .card-media__open { background: #38356b; color: #b9b3ff; }
[data-theme="dark"] .card-media--image img { background: #2d3037; }

/* ── 문서에서 바로 고치기 ─────────────────────────────────────────────
   문서처럼 보이는 화면이라 입력칸 테두리는 두지 않는다. 대신 커서가
   글자 위에 있고, 지금 쓰는 문단만 옅게 떠오르게 해 어디를 고치는지 알린다. */
.card-doc--editable [contenteditable="true"] { border-radius: 6px; outline: 0; cursor: text; }
.card-doc--editable [contenteditable="true"]:hover { background: rgba(28, 31, 39, .035); }
.card-doc--editable [contenteditable="true"]:focus { background: rgba(124, 92, 214, .07); box-shadow: 0 0 0 1px rgba(124, 92, 214, .28); }
.card-doc--editable > [contenteditable="true"] { margin-left: -6px; margin-right: -6px; padding: 2px 6px; }
.card-doc--editable > [contenteditable="true"] + [contenteditable="true"] { margin-top: 8px; }
/* 빈 문단은 높이가 0이 되어 누를 곳이 사라진다. 안내 글자로 자리를 만든다. */
.card-doc--editable [contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #b0b3bb;
  pointer-events: none;
}
.card-doc--editable .card-doc__table td { cursor: text; }

[data-theme="dark"] .card-doc--editable [contenteditable="true"]:hover { background: rgba(240, 240, 242, .05); }
[data-theme="dark"] .card-doc--editable [contenteditable="true"]:focus { background: rgba(160, 140, 240, .14); box-shadow: 0 0 0 1px rgba(160, 140, 240, .4); }
[data-theme="dark"] .card-doc--editable [contenteditable="true"]:empty::before { color: #6b6e77; }

/* ── 문서 전체를 한 덩이로 고치기 ────────────────────────────────────
   문단별 편집과 달리 편집 영역이 문서 하나다. 문단마다 테두리를 그리면
   워드가 아니라 입력칸 묶음처럼 보이므로, 문서 전체에만 표시를 준다. */
.card-doc--whole { outline: 0; cursor: text; }
.card-doc--whole:focus-within { border-radius: 8px; box-shadow: 0 0 0 2px rgba(124, 92, 214, .18); }
.card-doc--whole .card-doc__media,
.card-doc--whole .card-doc__chart { user-select: none; }

/* ── 문서 서식 (형광펜·글꼴·크기·글자색) ─────────────────────────────────
   저장 형식이 정해진 클래스만 받으므로 값도 여기서 한 벌로 정한다.
   캔버스 카드에서도 같은 클래스로 그려지도록 범위를 좁히지 않는다. */
/* 형광펜 색은 한 곳에서 정한다 — 글에 칠한 색과 색을 고르는 단추(문서 우클릭
   메뉴·캔버스 서식 바)가 같은 값을 써야 고른 대로 칠해진 것처럼 보인다. */
:root {
  --rt-hl-yellow: #fff3a8;
  --rt-hl-green: #c9f0d2;
  --rt-hl-blue: #cfe4ff;
  --rt-hl-pink: #ffd6e4;
}
mark.rt-hl-yellow { background: var(--rt-hl-yellow); color: inherit; }
mark.rt-hl-green { background: var(--rt-hl-green); color: inherit; }
mark.rt-hl-blue { background: var(--rt-hl-blue); color: inherit; }
mark.rt-hl-pink { background: var(--rt-hl-pink); color: inherit; }
.doc-menu__swatch.rt-hl-yellow, .fmt-bar__swatch.rt-hl-yellow { background: var(--rt-hl-yellow); }
.doc-menu__swatch.rt-hl-green, .fmt-bar__swatch.rt-hl-green { background: var(--rt-hl-green); }
.doc-menu__swatch.rt-hl-blue, .fmt-bar__swatch.rt-hl-blue { background: var(--rt-hl-blue); }
.doc-menu__swatch.rt-hl-pink, .fmt-bar__swatch.rt-hl-pink { background: var(--rt-hl-pink); }

.rt-ff-sans { font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif; }
.rt-ff-serif { font-family: "Nanum Myeongjo", "Batang", Georgia, serif; }
.rt-ff-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

.rt-fs-sm { font-size: .85em; }
.rt-fs-lg { font-size: 1.25em; }
.rt-fs-xl { font-size: 1.6em; }

.rt-fc-red { color: #d0463b; }
.rt-fc-blue { color: #2f6fd0; }
.rt-fc-violet { color: #7c5cd6; }
.rt-fc-gray { color: #8b8e97; }

[data-theme="dark"] {
  --rt-hl-yellow: #6b5c1f;
  --rt-hl-green: #2f5b3c;
  --rt-hl-blue: #2c4a70;
  --rt-hl-pink: #6b3247;
}
[data-theme="dark"] mark.rt-hl-yellow { color: #f4f2e6; }
[data-theme="dark"] mark.rt-hl-green { color: #eaf5ec; }
[data-theme="dark"] mark.rt-hl-blue { color: #e9f1fb; }
[data-theme="dark"] mark.rt-hl-pink { color: #fbe9f0; }
[data-theme="dark"] .rt-fc-red { color: #ff8b80; }
[data-theme="dark"] .rt-fc-blue { color: #86b5f5; }
[data-theme="dark"] .rt-fc-violet { color: #b7a2ff; }
[data-theme="dark"] .rt-fc-gray { color: #9ea2ab; }

/* ── 우클릭 서식 메뉴 ──────────────────────────────────────────────────── */
.doc-menu__scrim { position: fixed; inset: 0; z-index: 400; }
.doc-menu {
  position: fixed;
  z-index: 401;
  width: 236px;
  padding: 8px;
  border: 1px solid #e4e5e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(24, 26, 32, .18);
  color: #24262c;
  font-size: 12px;
}
.doc-menu__group { margin-top: 8px; }
.doc-menu__label { display: block; margin: 0 2px 4px; color: #8b8e97; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.doc-menu__row { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-menu__row > button {
  flex: 1 1 auto;
  min-width: 40px;
  padding: 6px 8px;
  border: 1px solid #e8e8ea;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.doc-menu__row > button:hover { border-color: #cfd1d8; background: #f6f6f7; }
.doc-menu__row--marks > button { flex: 1 1 0; font-size: 13px; }
.doc-menu__row--swatches { gap: 6px; }
.doc-menu__swatch { flex: 0 0 auto; width: 24px; height: 24px; min-width: 0; padding: 0; border-radius: 999px; }
.doc-menu__swatch--none { position: relative; background: #fff; }
.doc-menu__swatch--none::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 14px;
  height: 1.5px;
  background: #c2c4cb;
  transform: rotate(-45deg);
}
.doc-menu__clear {
  width: 100%;
  margin-top: 10px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: #f3f3f4;
  color: #55585f;
  font: inherit;
  cursor: pointer;
}
.doc-menu__clear:hover { background: #e9e9ec; color: #24262c; }

[data-theme="dark"] .doc-menu { border-color: #3a3d44; background: #24262c; color: #f0f0f2; }
[data-theme="dark"] .doc-menu__row > button { border-color: #3a3d44; background: #2b2e35; }
[data-theme="dark"] .doc-menu__row > button:hover { background: #33363d; }
[data-theme="dark"] .doc-menu__clear { background: #2b2e35; color: #b9bcc4; }
.second-brain {
  position: absolute;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  background: #f3f3f2;
  color: #24262c;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  will-change: opacity;
}
.second-brain.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.second-brain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
/* 노드를 끌 때 브라우저가 라벨 글자를 같이 선택하면 화면이 파랗게 남는다. */
.second-brain__canvas { position: absolute; inset: 0; display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.second-brain__canvas:active { cursor: grabbing; }
.second-brain__links line { stroke: #d9dce4; stroke-width: 1.2; }
.second-brain__links line.is-memory { stroke: #9b92d3; stroke-width: 1.6; }
.second-brain__node { cursor: grab; touch-action: none; }
.second-brain__node--memory { cursor: grab; }
.second-brain__node--memory:active { cursor: grabbing; }
.second-brain__node--project { cursor: default; }
.second-brain__node circle { filter: drop-shadow(0 3px 7px rgba(35, 39, 52, .15)); stroke: rgba(255, 255, 255, .92); stroke-width: 2; transition: r .14s ease, stroke .14s ease, filter .14s ease; }
.second-brain__node:hover circle,
.second-brain__node.is-active circle { stroke: #4d4f58; stroke-width: 2.5; filter: drop-shadow(0 5px 10px rgba(35, 39, 52, .22)); }
.second-brain__node-ring { fill: transparent; stroke: rgba(63, 66, 78, .2) !important; stroke-width: 1 !important; filter: none !important; }
.second-brain__node text { fill: #5d606a; font-family: inherit; font-size: 10px; font-weight: 550; letter-spacing: 0; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.second-brain__node--group text { fill: #26282e; font-size: 11.5px; font-weight: 750; }
.second-brain__node .second-brain__count { fill: #fff; font-size: 10px; font-weight: 800; }
.second-brain__node--project circle:first-of-type {
  filter: drop-shadow(0 8px 18px rgba(55, 78, 184, .28));
  stroke-width: 3;
}
.second-brain__node--project .second-brain__node-ring {
  stroke: rgba(86, 111, 232, .24) !important;
  stroke-width: 2 !important;
}
.second-brain__node .second-brain__project-kicker,
.second-brain__node .second-brain__project-title {
  fill: #fff;
  stroke: none;
  paint-order: normal;
}
.second-brain__node .second-brain__project-kicker {
  font-size: 8px;
  font-weight: 650;
  opacity: .78;
}
.second-brain__node .second-brain__project-title {
  font-size: 12px;
  font-weight: 800;
}
.second-brain__topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 12px 0 7px;
  border: 1px solid #e2e3e7;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(28, 31, 39, .1);
  backdrop-filter: blur(12px);
}
.second-brain__topbar > button,
.second-brain__controls button { width: 30px; height: 30px; border-radius: 6px; }
.second-brain__topbar > button:hover,
.second-brain__controls button:hover:not(:disabled) { background: #f1f2f4; color: #24262c; }
.second-brain__mark { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: #6d5ed0; color: #fff; font-size: 16px; }
.second-brain__topbar div { display: flex; flex-direction: column; gap: 1px; }
.second-brain__topbar strong { font-size: 12px; font-weight: 750; }
.second-brain__topbar small { color: #8a8d96; font-size: 9.5px; }
.second-brain__controls {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  height: 34px;
  overflow: hidden;
  border: 1px solid #dedfe4;
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 7px 20px rgba(28, 31, 39, .1);
}
.second-brain__controls button { border-right: 1px solid #e7e8eb; }
.second-brain__controls button:last-child { border-right: 0; }
.second-brain__controls button:disabled { opacity: .35; cursor: default; }
@media (max-width: 720px) {
  .second-brain__topbar { top: 10px; left: 10px; }
  .second-brain__controls { bottom: 10px; left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .second-brain { transition: none; }
}

/* ── 메모리 상세 ─────────────────────────────────────────────────────────
   그래프는 훑어보는 화면이고, 내용을 읽는 건 이 문서다.
   그래서 패널로 겹쳐 띄우지 않고 화면을 덮어 그 카드만 보이게 한다. */
.second-brain__sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #f4f4f6;
  animation: second-brain-sheet-in .2s ease both;
}
@keyframes second-brain-sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .second-brain__sheet { animation: none; }
}
.second-brain__crumbs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  /* 상단 바의 칩 묶음(프로젝트 › Outline) 바로 오른쪽에 나란히 선다.
     --arky-bar-left 는 겹쳐 있는 사이드바 폭, --arky-bar-cluster 는 그 칩
     묶음의 실측 폭이며, 둘 다 캔버스 셸이 내려 준다. 높이(38px)와 위 여백도
     칩 묶음과 맞춰 같은 줄에 놓이게 한다. */
  min-height: var(--arky-bar-cluster-h, 38px);
  margin: var(--arky-bar-cluster-top, 9px) 0 0 calc(var(--arky-bar-left, 16px) + var(--arky-bar-cluster, 0px) + 12px);
  transition: margin-left .28s cubic-bezier(.22, 1, .36, 1);
  font-size: 12.5px;
}
.second-brain__crumbs > svg { width: 13px; height: 13px; color: #b4b7bf; }
/* 앞머리 이름이 곧 뒤로가기 버튼이다. */
.second-brain__crumb-root {
  padding: 4px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6f727b;
  font: inherit;
  cursor: pointer;
}
.second-brain__crumb-root:hover { background: rgba(28, 31, 39, .07); color: #24262c; }
.second-brain__crumb-leaf {
  overflow: hidden;
  max-width: 42vw;
  padding-left: 8px;
  border-left: 3px solid var(--node-color, #6d5ed0);
  color: #24262c;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 문서는 왼쪽 사이드바와 오른쪽 AI 도크 사이의 '실제로 보이는 폭' 안에서
   가운데에 놓여야 한다. 전체 폭을 기준으로 잡으면 왼쪽은 사이드바 밑에 깔리고,
   오른쪽은 도크에 가려져 문서가 오른쪽으로 쏠려 보인다.
   두 변수 모두 패널을 소유한 WorkspaceHomePage.css가 실제 패널 폭으로 정의한다. */
.second-brain__sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px var(--arky-bar-right, 16px) 40px var(--arky-bar-left, 16px);
  transition: padding .28s cubic-bezier(.22, 1, .36, 1);
}
.second-brain__doc {
  box-sizing: border-box;
  /* Ctrl+휠 확대는 글자만 키우는 게 아니라 문서 자체를 확대한다 — 종이,
     여백, 표, 그림이 모두 같은 비율로 커진다. transform이 아니라 zoom을 쓰는 건
     이게 배치까지 확대해서 스크롤 범위와 글자 커서가 어긋나지 않기 때문이다.
     폭이 100% 기준이라 확대해도 가로로 밀려 나가지 않고 줄만 다시 흐른다. */
  zoom: var(--doc-zoom, 1);
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 34px 40px 28px;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(28, 31, 39, .06);
}
.second-brain__doc-empty { margin: 0; color: #8b8e97; font-size: 13px; }
.second-brain__doc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid #ececed;
}
.second-brain__doc-foot span {
  padding-left: 9px;
  border-left: 3px solid var(--node-color, #6d5ed0);
  color: #777a84;
  font-size: 11px;
  font-weight: 650;
}
.second-brain__doc-foot small { color: #8b8e97; font-size: 11px; }

[data-theme="dark"] .second-brain__sheet { background: #1c1e23; }
[data-theme="dark"] .second-brain__crumb-root:hover { background: rgba(240, 240, 242, .1); color: #f0f0f2; }
[data-theme="dark"] .second-brain__crumb-leaf { color: #f0f0f2; }
[data-theme="dark"] .second-brain__doc { border-color: #33363d; background: #24262c; }

/* 전체 편집 켜고 끄기. 경로 표시 옆에 붙어 문서의 상태를 알린다. */
.second-brain__edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 5px 10px;
  border: 1px solid #e2e3e8;
  border-radius: 8px;
  background: #fff;
  color: #6f727b;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.second-brain__edit-toggle svg { width: 13px; height: 13px; }
.second-brain__edit-toggle:hover { border-color: #cfd1d8; color: #24262c; }
.second-brain__edit-toggle.is-on { border-color: #7c5cd6; background: #7c5cd6; color: #fff; }

[data-theme="dark"] .second-brain__edit-toggle { border-color: #3a3d44; background: #24262c; color: #b9bcc4; }
[data-theme="dark"] .second-brain__edit-toggle.is-on { border-color: #7c5cd6; background: #7c5cd6; color: #fff; }

/* 글자 배율 표시 — 100%가 아닐 때만 나타나고, 누르면 원래대로 돌아간다.
   (Ctrl+휠로 키운 뒤 되돌릴 방법이 없으면 갇힌 느낌이 든다) */
.second-brain__zoom {
  position: absolute;
  right: calc(var(--arky-bar-right, 16px) + 8px);
  bottom: 18px;
  z-index: 2;
  padding: 6px 11px;
  border: 1px solid #e2e3e8;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 4px 14px rgba(28, 31, 39, .1);
  color: #6f727b;
  font: inherit;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: right .28s cubic-bezier(.22, 1, .36, 1);
}
.second-brain__zoom:hover { border-color: #cfd1d8; color: #24262c; }
[data-theme="dark"] .second-brain__zoom { border-color: #3a3d44; background: #24262c; color: #b9bcc4; }
.brand-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 20px;
}
.brand-loading--full { position: absolute; inset: 0; background: var(--color-bg-white, #f5f5f5); }

.brand-loading__mark {
  display: grid;
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  place-items: center;
  padding: 7px;
  overflow: visible;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(28, 30, 38, .12);
  /* 숨 쉬듯 천천히. 빠르게 깜빡이면 오류처럼 읽힌다. */
  animation: brand-loading-breathe 1.8s ease-in-out infinite;
}
.brand-loading__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-loading__label { margin: 0; color: #8b8e97; font-size: 15px; font-weight: 600; }
.brand-loading__label b { color: #24262c; font-weight: 750; }

@keyframes brand-loading-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .62; transform: scale(.955); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-loading__mark { animation: none; }
}

[data-theme="dark"] .brand-loading--full { background: #1c1e23; }
[data-theme="dark"] .brand-loading__mark { background: #2a2c33; box-shadow: 0 6px 22px rgba(0, 0, 0, .4); }
[data-theme="dark"] .brand-loading__label b { color: #f0f0f2; }
/* 고른 글자 위에 떠 있는 서식 바. 카드보다 위, 상단 바보다 위에 있어야
   글을 고른 자리 바로 옆에서 누를 수 있다. */
.fmt-bar {
  position: fixed;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid #e4e5e9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(24, 26, 32, .16);
  color: #24262c;
  font-size: 12px;
  /* 항목이 아홉 가지라 좁은 화면에서는 한 줄에 다 못 선다. 화면 안으로 폭을
     묶고, 넘치면 아랫줄로 접는다 — 잘려서 못 누르는 것보다 두 줄이 낫다. */
  max-width: calc(100vw - 16px);
  flex-wrap: wrap;
  row-gap: 3px;
}
.fmt-bar__field { position: relative; display: flex; }
.fmt-bar__drop,
.fmt-bar__mark,
.fmt-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.fmt-bar__mark { min-width: 30px; justify-content: center; font-size: 13px; }
.fmt-bar__drop svg,
.fmt-bar__mark svg { width: 12px; height: 12px; color: #8b8e97; }
.fmt-bar__drop:hover,
.fmt-bar__mark:hover,
.fmt-bar__clear:hover { background: #f2f2f4; }
.fmt-bar__drop[aria-expanded="true"],
.fmt-bar__mark[aria-expanded="true"] { background: #ede9fb; }
.fmt-bar__sep { width: 1px; height: 18px; margin: 0 3px; background: #e8e8ea; }
.fmt-bar__clear { color: #6f727b; }

.fmt-bar__pop {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
  padding: 5px;
  border: 1px solid #e4e5e9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(24, 26, 32, .16);
}
.fmt-bar__pop > button {
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.fmt-bar__pop > button:hover { background: #f2f2f4; }
.fmt-bar__pop--swatches { flex-direction: row; min-width: 0; }
.fmt-bar__swatch { width: 22px; height: 22px; padding: 0; border: 1px solid #e0e1e5; border-radius: 999px; cursor: pointer; }
.fmt-bar__swatch--none { position: relative; background: #fff; }
.fmt-bar__swatch--none::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 13px;
  height: 1.5px;
  background: #c2c4cb;
  transform: rotate(-45deg);
}

[data-theme="dark"] .fmt-bar,
[data-theme="dark"] .fmt-bar__pop { border-color: #3a3d44; background: #24262c; color: #f0f0f2; }
[data-theme="dark"] .fmt-bar__drop:hover,
[data-theme="dark"] .fmt-bar__mark:hover,
[data-theme="dark"] .fmt-bar__clear:hover,
[data-theme="dark"] .fmt-bar__pop > button:hover { background: #33363d; }
[data-theme="dark"] .fmt-bar__sep { background: #3a3d44; }
/* 캔버스 위 팀 도구 위젯 — 캘린더·할 일과 같은 종이 위에 선다.
   화면에서 보조 역할이라 캘린더보다 작고 조용하게 둔다. */
.aic-tool-widget {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  width: 420px;
  height: 300px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 31, 39, .08);
  color: #24262c;
  font-size: 12.5px;
}
.aic-tool-widget header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 11px 14px;
  border-bottom: 1px solid #f0f0f2;
  cursor: grab;
  touch-action: none;
}
.aic-tool-widget header:active { cursor: grabbing; }
.aic-tool-widget__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #eef2f7;
  color: #4a6b8a;
}
.aic-tool-widget__icon svg { width: 15px; height: 15px; }
.aic-tool-widget header strong { font-size: 13px; font-weight: 700; }
.aic-tool-widget header > small {
  min-width: 20px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #f1f2f4;
  color: #6f727b;
  font-size: 10.5px;
  font-weight: 700;
}
.aic-tool-widget__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 14px 14px;
}
.aic-tool-widget__empty { margin: 10px 0; color: #9a9da5; font-size: 12px; }

.aic-tool-widget__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: -2px 0 8px;
  border-bottom: 1px solid #eceef1;
}
.aic-tool-widget__stats span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px 10px;
  border-right: 1px solid #eceef1;
  background: transparent;
}
.aic-tool-widget__stats span:last-child { border-right: 0; }
.aic-tool-widget__stats b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.aic-tool-widget__stats small { color: #8b8e97; font-size: 10.5px; }
.aic-tool-widget__stats .is-income { color: #2f7d5d; }
.aic-tool-widget__stats .is-expense { color: #c0574f; }

.aic-tool-widget__row { padding: 8px 4px; border-bottom: 1px solid #f0f1f3; }
.aic-tool-widget__row:last-child { border-bottom: 0; }
.aic-tool-widget__row strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.4; }
.aic-tool-widget__row p { margin: 3px 0 0; color: #6f727b; font-size: 11.5px; line-height: 1.5; }
.aic-tool-widget__row small { display: block; margin-top: 3px; color: #9a9da5; font-size: 11px; }
.aic-tool-widget__row small.is-income { color: #2f7d5d; }
.aic-tool-widget__row small.is-expense { color: #c0574f; }
.aic-tool-widget__row-head { display: flex; align-items: flex-start; gap: 10px; }
.aic-tool-widget__row-head > strong { min-width: 0; flex: 1; }
.aic-tool-widget__row-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 650;
}
.aic-tool-widget__row-action svg { width: 11px; height: 11px; }

[data-theme="dark"] .aic-tool-widget { border-color: #33363d; background: #24262c; color: #f0f0f2; }
[data-theme="dark"] .aic-tool-widget header { border-bottom-color: #303239; }
[data-theme="dark"] .aic-tool-widget__icon { background: #2f333a; color: #9db6cc; }
[data-theme="dark"] .aic-tool-widget header > small { background: #2b2e35; color: #b9bcc4; }
[data-theme="dark"] .aic-tool-widget__stats,
[data-theme="dark"] .aic-tool-widget__stats span { border-color: #34373e; }
[data-theme="dark"] .aic-tool-widget__row { border-bottom-color: #303239; }

/* ── 위젯 안에서 자세히 보기 ─────────────────────────────────────────────
   목록에서 한 줄을 누르면 이 자리에서 펼친다. 캔버스를 떠나지 않는 게 요점이라
   팝업처럼 덮지 않고, 위젯이 조금 커지면서 내용이 들어온다. */
.aic-tool-widget.is-detail { height: 520px; }
.aic-tool-widget__back {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6f727b;
  cursor: pointer;
}
.aic-tool-widget__back:hover { background: #f1f2f4; color: #24262c; }
.aic-tool-widget__back svg { width: 14px; height: 14px; }
.aic-tool-widget__detail-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aic-tool-widget__meta { margin: 0 0 8px; color: #8b8e97; font-size: 11px; }

/* 누를 수 있는 줄 — 목록에서 상세로 들어가는 입구 */
button.aic-tool-widget__row {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #f4f4f6;
  border-radius: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.aic-tool-widget__row:hover { background: #f7f8fa; }
.aic-tool-widget__row.is-clickable strong { color: #24262c; }

/* 중요도 막대 — 숫자만 적으면 서로 비교가 안 된다 */
.aic-tool-widget__bar {
  display: block;
  height: 4px;
  margin: 5px 0 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f3;
}
.aic-tool-widget__bar i { display: block; height: 100%; border-radius: 999px; background: #7c8fa8; }

.aic-tool-widget__section { margin-top: 12px; }
.aic-tool-widget__section-label {
  display: block;
  margin-bottom: 4px;
  color: #8b8e97;
  font-size: 10.5px;
  font-weight: 700;
}
/* 긴 글은 카드와 같은 서식으로 읽힌다 (제목·목록·표 그대로) */
.aic-tool-widget__doc .card-doc { font-size: 12.5px; line-height: 1.7; }
.aic-tool-widget__doc .card-doc__block--title { font-size: 1.35em; }
.aic-tool-widget__doc .card-doc__block--heading1 { margin-top: 14px; font-size: 1.15em; }
.aic-tool-widget__doc .card-doc__block--heading2 { margin-top: 12px; font-size: 1.05em; }

[data-theme="dark"] .aic-tool-widget__back:hover { background: #33363d; color: #f0f0f2; }
[data-theme="dark"] button.aic-tool-widget__row { border-bottom-color: #303239; }
[data-theme="dark"] button.aic-tool-widget__row:hover { background: #2b2e35; }
[data-theme="dark"] .aic-tool-widget__row.is-clickable strong { color: #f0f0f2; }
[data-theme="dark"] .aic-tool-widget__bar { background: #33363d; }

.aic-tool-widget__detail-foot {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #eceef1;
  color: #7b7f88;
  font-size: 11px;
}
.aic-tool-widget__detail-foot span { display: inline-flex; align-items: center; gap: 4px; }
.aic-tool-widget__detail-foot svg { width: 13px; height: 13px; }

.aic-tool-widget__vote-options { display: flex; flex-direction: column; gap: 7px; }
.aic-tool-widget__vote-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid #e2e5e9;
  border-radius: 7px;
  background: #fff;
  color: #2b2e35;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aic-tool-widget__vote-option:hover:not(:disabled) { border-color: #aeb9c7; background: #fafbfc; }
.aic-tool-widget__vote-option.is-selected { border-color: #6e83a0; background: #f5f7fa; }
.aic-tool-widget__vote-option:disabled { cursor: default; opacity: .72; }
.aic-tool-widget__vote-check {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #cfd4da;
  border-radius: 50%;
  color: #fff;
}
.aic-tool-widget__vote-option.is-selected .aic-tool-widget__vote-check { border-color: #5e7696; background: #5e7696; }
.aic-tool-widget__vote-check svg { width: 11px; height: 11px; }
.aic-tool-widget__vote-copy { min-width: 0; }
.aic-tool-widget__vote-copy b { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.aic-tool-widget__vote-copy i {
  display: block;
  height: 3px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0f3;
}
.aic-tool-widget__vote-copy i span { display: block; height: 100%; border-radius: inherit; background: #6e83a0; }
.aic-tool-widget__vote-option > strong { color: #626873; font-size: 11px; text-align: right; }
.aic-tool-widget__error { margin: 9px 0 0; color: #bd4d4d; font-size: 11px; }
.aic-tool-widget__readonly { margin: 9px 0 0; color: #8b8e97; font-size: 11px; text-align: right; }

[data-theme="dark"] .aic-tool-widget__detail-foot { border-top-color: #34373e; }
[data-theme="dark"] .aic-tool-widget__vote-option { border-color: #3a3d44; background: #292c32; color: #f0f0f2; }
[data-theme="dark"] .aic-tool-widget__vote-option:hover:not(:disabled),
[data-theme="dark"] .aic-tool-widget__vote-option.is-selected { border-color: #7087a4; background: #30343b; }
[data-theme="dark"] .aic-tool-widget__vote-copy i { background: #3a3d44; }
.aic-shell {
  /* 문서처럼 읽히는 카드 폭 — AiCanvasBoard.jsx의 CARD_WIDTH와 같은 값이어야
     연결선 좌표와 자동 배치 간격이 어긋나지 않는다. */
  /* A4 한 장 폭(210mm @96dpi). JS의 CARD_WIDTH와 같은 값이어야 한다. */
  --aic-card-width: 794px;
  --aic-ink: #171922;
  --aic-paper: #fbfbf8;
  --aic-muted: #737783;
  --aic-line: #58aaa8;
  --aic-signal: #6558d9;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f4f5f7;
}

.aic-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px 8px 18px;
  border-bottom: 1px solid #dde0e6;
  background: rgba(252, 252, 250, 0.96);
  flex-shrink: 0;
}
.aic-toolbar__intro, .aic-toolbar__actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.aic-kicker { font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; color: var(--aic-ink); white-space: nowrap; }
.aic-category-title { padding-left: 9px; border-left: 1px solid #d9dce2; color: #555a65; font-size: 13px; font-weight: 760; white-space: nowrap; }
.aic-toolbar__back { margin-right: 1px; }
.aic-toolbar__copy { font-size: 12px; color: var(--aic-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aic-button, .aic-icon-button {
  height: 30px; border: 1px solid #d9dce2; border-radius: 7px; background: #fff; color: #3e424d;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
  font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap; transition: .16s ease;
}
.aic-icon-button { width: 30px; padding: 0; }
.aic-button:hover, .aic-icon-button:hover { border-color: #b8bdc8; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(25, 29, 40, .08); }
.aic-button:focus-visible, .aic-icon-button:focus-visible, .aic-card button:focus-visible { outline: 2px solid var(--aic-signal); outline-offset: 2px; }
.aic-button--danger { color: #b73f4c; border-color: #edcdd1; }
.aic-icon-button--danger { color: #b73f4c; border-color: #edcdd1; }
.aic-button--primary { color: #fff; background: var(--aic-signal); border-color: var(--aic-signal); }
.aic-button:disabled { opacity: .55; cursor: default; transform: none; }
.aic-icon-button:disabled { opacity: .38; cursor: default; transform: none; box-shadow: none; }
.aic-save-state { display: inline-flex; align-items: center; gap: 4px; color: #858995; font-size: 11px; white-space: nowrap; }
.aic-save-state--dirty { color: #9a6b24; font-weight: 700; }
.aic-save-state--error { color: #c54855; }
.aic-edge-tools { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding-left: 9px; border: 1px solid #d9dce2; border-radius: 8px; background: #fff; }
.aic-edge-tools > span { color: #898d97; font-size: 10px; white-space: nowrap; }
.aic-edge-tools select { height: 24px; max-width: 104px; padding: 0 18px 0 7px; border: 0; border-left: 1px solid #e4e5e8; outline: 0; background: transparent; color: #414650; font-size: 11px; font-weight: 650; cursor: pointer; }
.aic-edge-colors { height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 7px; border-left: 1px solid #e4e5e8; }
.aic-edge-colors button { width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%; outline: 1px solid transparent; background: var(--swatch); cursor: pointer; transition: transform .12s, outline-color .12s; }
.aic-edge-colors button:hover { transform: scale(1.18); }
.aic-edge-colors button.is-active { outline-color: var(--swatch); transform: scale(1.12); }
.aic-edge-tools .aic-icon-button { width: 29px; height: 29px; border-width: 0 0 0 1px; border-radius: 0 7px 7px 0; box-shadow: none; transform: none; }

.aic-canvas-area { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #eef0f3; }
.aic-viewport {
  position: absolute; inset: 0; overflow: hidden; overscroll-behavior: contain; touch-action: none;
  background-color: #eef0f3;
  background-image: radial-gradient(circle, rgba(39, 44, 57, .14) .8px, transparent .9px);
  background-size: 22px 22px;
  cursor: default;
  scrollbar-width: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s;
}
.aic-viewport.is-view-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .3s; }
.aic-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 캔버스는 읽는 문서가 아니라 손으로 다루는 판이다. 카드를 끌 때마다 브라우저가
   글자까지 선택해 버리면 화면이 온통 파랗게 물들고 그대로 남는다.
   (드래그가 시작된 뒤에 클래스로 막으면 이미 시작된 선택은 못 막는다.)
   글자 선택은 실제로 편집 중인 곳에서만 허용한다. */
.aic-viewport { user-select: none; -webkit-user-select: none; }
.aic-viewport .aic-shell-rich[contenteditable="true"],
.aic-viewport .aic-shell-row__field {
  user-select: text;
  -webkit-user-select: text;
}
.aic-viewport.is-panning { cursor: grabbing; }
.aic-viewport.is-selecting { cursor: crosshair; }
.aic-stage { position: absolute; inset: 0; overflow: visible; }
.aic-stage__surface { position: absolute; inset: 0 auto auto 0; width: 6400px; height: 4800px; transform-origin: 0 0; }
.aic-drawings {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: visible;
  pointer-events: none;
  touch-action: none;
}
.aic-drawings.is-drawing { pointer-events: auto; cursor: crosshair; }
.aic-drawings.is-drawing.is-eraser { cursor: none; }
.aic-drawings path {
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.aic-drawing-stroke--pen { stroke: none; }
.aic-drawing-stroke--highlighter {
  fill: none;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .aic-drawing-stroke--highlighter { mix-blend-mode: screen; }
.aic-drawing-eraser-cursor {
  fill: rgba(255, 255, 255, .72);
  stroke: #59606b;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(20, 24, 32, .18));
  pointer-events: none;
}
[data-theme="dark"] .aic-drawing-eraser-cursor {
  fill: rgba(34, 36, 41, .72);
  stroke: #d7d9df;
}
.aic-selection-box {
  position: absolute;
  z-index: 24;
  box-sizing: border-box;
  border: 1.5px solid #6187f2;
  border-radius: 6px;
  background: rgba(97, 135, 242, .1);
  box-shadow: 0 0 0 1px rgba(97, 135, 242, .08);
  pointer-events: none;
}
.aic-zoom-controls {
  position: absolute; right: 16px; bottom: 16px; z-index: 30;
  display: grid; grid-template-columns: 38px 58px 38px; height: 38px;
  overflow: hidden; border: 1px solid #d6d9e0; border-radius: 10px;
  background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(30,35,48,.14);
}
.aic-zoom-controls button {
  display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-right: 1px solid #e2e4e9;
  background: transparent; color: #343944; font-size: 16px; cursor: pointer;
}
.aic-zoom-controls button:last-child { border-right: 0; }
.aic-zoom-controls button:hover:not(:disabled) { background: #f2f1fb; color: var(--aic-signal); }
.aic-zoom-controls button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--aic-signal); outline-offset: -2px; }
.aic-zoom-controls button:disabled { color: #b5b8c0; cursor: default; }
.aic-zoom-controls .aic-zoom-controls__value { font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.aic-exit-prompt { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(24,27,36,.42); backdrop-filter: blur(4px); animation: aic-prompt-in .14s ease-out; }
.aic-exit-prompt__dialog { width: min(420px, 100%); box-sizing: border-box; padding: 25px 25px 21px; border: 1px solid #d8d9df; border-radius: 14px; background: #fbfbf9; color: var(--aic-ink); box-shadow: 0 24px 70px rgba(21,24,34,.24); }
.aic-exit-prompt__eyebrow { display: block; margin-bottom: 9px; color: #756bc5; font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.aic-exit-prompt__dialog h2 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.025em; }
.aic-exit-prompt__dialog > p { margin: 9px 0 0; color: #6f737d; font-size: 12.5px; line-height: 1.55; }
.aic-exit-prompt__dialog .aic-exit-prompt__error { padding: 8px 10px; border-radius: 7px; background: #fff0f1; color: #b23d49; font-size: 11px; font-weight: 650; }
.aic-exit-prompt__actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 22px; }
.aic-exit-prompt__actions button { min-width: 70px; height: 34px; padding: 0 12px; border: 1px solid #d7d9df; border-radius: 7px; background: #fff; color: #424650; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.aic-exit-prompt__actions button:hover:not(:disabled) { border-color: #b9bdc7; background: #f5f5f3; }
.aic-exit-prompt__actions button:focus-visible { outline: 2px solid var(--aic-signal); outline-offset: 2px; }
.aic-exit-prompt__actions button:disabled { opacity: .55; cursor: wait; }
.aic-exit-prompt__actions .aic-exit-prompt__discard { color: #a14450; border-color: #ebcbd0; }
.aic-exit-prompt__actions .aic-exit-prompt__save { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; border-color: var(--aic-signal); background: var(--aic-signal); }
.aic-exit-prompt__actions .aic-exit-prompt__save:hover:not(:disabled) { border-color: #574bc8; background: #574bc8; }
@keyframes aic-prompt-in { from { opacity: 0; } to { opacity: 1; } }
.aic-group { position: absolute; box-sizing: border-box; border: 1px solid var(--group-line); border-radius: 16px; background: color-mix(in srgb, var(--group-fill) 76%, transparent); pointer-events: none; transition: inset .18s ease, width .18s ease, height .18s ease, box-shadow .16s ease; }
/* 드래그 중에는 프레임 트랜지션을 끈다. 켜두면 그룹 테두리와 라벨이
   커서보다 180ms 늦게 따라와 "잡고 끌면 늦게 온다"는 느낌이 난다. */
.aic-viewport.is-element-dragging .aic-group { transition: none; }
.aic-group.is-selected, .aic-group.is-connecting { box-shadow: 0 0 0 3px color-mix(in srgb, var(--group-line) 48%, transparent); }
.aic-group.is-connectable { border-style: dashed; }
.aic-group__label { position: absolute; left: 0; top: 0; z-index: 4; width: 100%; max-width: none; height: 42px; overflow: hidden; padding: 0 52px 0 16px; border: 0; border-bottom: 1px solid transparent; border-radius: 16px 16px 0 0; background: transparent; color: var(--group-ink); font-size: 12px; font-weight: 780; letter-spacing: -.01em; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: default; pointer-events: auto; touch-action: none; }
.aic-group__label:hover { border-bottom-color: color-mix(in srgb, var(--group-line) 62%, transparent); background: color-mix(in srgb, var(--group-fill) 78%, white); }
.aic-group.is-selected .aic-group__label { background: color-mix(in srgb, var(--group-fill) 72%, white); }
.aic-group > small { position: absolute; right: 14px; top: 11px; z-index: 5; min-width: 22px; height: 20px; display: grid; place-items: center; border: 1px solid var(--group-line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--group-ink); font-size: 10px; font-weight: 750; pointer-events: none; }
.aic-group__port { position: absolute; z-index: 5; width: 18px; height: 18px; padding: 0; border: 3px solid #eef0f3; border-radius: 50%; background: var(--group-ink); opacity: 0; pointer-events: none; cursor: crosshair; transition: opacity .12s ease, transform .12s ease; }
.aic-group__port--top { left: calc(50% - 9px); top: -10px; }
.aic-group__port--right { right: -10px; top: calc(50% - 9px); }
.aic-group__port--bottom { left: calc(50% - 9px); bottom: -10px; }
.aic-group__port--left { left: -10px; top: calc(50% - 9px); }
.aic-group.is-selected .aic-group__port, .aic-group.is-connectable .aic-group__port { opacity: 1; pointer-events: auto; }
.aic-group.is-connecting .aic-group__port { opacity: .2; pointer-events: none; }
.aic-group.is-connecting .aic-group__port.is-active { opacity: 1; pointer-events: auto; }
.aic-group__port:hover, .aic-group__port.is-active { transform: scale(1.25); }
.aic-connections { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.aic-connection-line { fill: none; stroke: var(--edge-color, var(--aic-line)); stroke-width: 2; stroke-linecap: round; opacity: .9; pointer-events: none; }
.aic-connection-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.aic-connections g:hover .aic-connection-line, .aic-connections g.is-selected .aic-connection-line { stroke: var(--edge-color, var(--aic-line)); stroke-width: 3; opacity: 1; }
.aic-connections g.is-selected .aic-connection-line { filter: drop-shadow(0 0 3px rgba(101, 88, 217, .42)); }
.aic-connections g.is-dashed .aic-connection-line { stroke-dasharray: 7 6; }
.aic-connections g.is-group-edge .aic-connection-line { stroke-width: 3; opacity: .72; }
.aic-connections g.is-group-edge:hover .aic-connection-line, .aic-connections g.is-group-edge.is-selected .aic-connection-line { stroke-width: 4; opacity: 1; }

.aic-card {
  position: absolute; top: 0; left: 0; z-index: 2; width: var(--aic-card-width); min-height: 142px; box-sizing: border-box;
  background: var(--aic-paper); color: var(--aic-ink); border: 1px solid #d6d7d5; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(28, 31, 39, .06), 0 8px 25px rgba(28, 31, 39, .09);
  transition: box-shadow .16s ease, border-color .16s ease;
  cursor: default;
}
/* will-change를 상시 걸면 카드 31장이 각각 GPU 레이어로 승격돼(큰 그림자까지 얹혀)
   합성 비용이 계속 든다. 실제로 옮기는 동안에만 켠다. */
.aic-viewport.is-element-dragging .aic-card { will-change: transform; }
.aic-card:hover { border-color: #bfc2c7; box-shadow: 0 2px 4px rgba(28, 31, 39, .08), 0 14px 34px rgba(28, 31, 39, .13); }
.aic-card.is-selected { z-index: 12; }
/* 잡고 있는 카드는 무조건 맨 앞. 어떤 건 그룹 테두리 뒤로, 어떤 건 앞으로
   지나가면 지금 뭘 옮기는 중인지 눈으로 좇을 수가 없다. */
.aic-card.is-dragging { z-index: 25; }
.aic-viewport:focus { outline: 0; }
/* 빈 캔버스에 붙여넣은 글과 이미지는 카드 장식 없이 원본만 보인다. */
:is(.aic-card.aic-card--plain-text, .aic-shell--arky .aic-card.aic-card--plain-text, .aic-card.aic-card--plain-media, .aic-shell--arky .aic-card.aic-card--plain-media),
:is(.aic-card.aic-card--plain-text, .aic-shell--arky .aic-card.aic-card--plain-text, .aic-card.aic-card--plain-media, .aic-shell--arky .aic-card.aic-card--plain-media):hover {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(.aic-card.aic-card--plain-text, .aic-shell--arky .aic-card.aic-card--plain-text, .aic-card.aic-card--plain-media, .aic-shell--arky .aic-card.aic-card--plain-media).is-selected {
  border: 0;
  box-shadow: 0 0 0 1px rgba(74, 124, 240, .38);
}
.aic-card--plain-text > .aic-card__dragbar,
.aic-card--plain-text > .aic-card__resize,
.aic-card--plain-text > .aic-card__port,
.aic-card--plain-media > .aic-card__dragbar,
.aic-card--plain-media > .aic-card__resize,
.aic-card--plain-media > .aic-card__port,
.aic-card--plain-text .aic-shell-add,
.aic-card--plain-text .aic-shell-row__type,
.aic-card--plain-text .aic-shell-row__remove,
.aic-card--plain-media .aic-shell-add,
.aic-card--plain-media .aic-shell-row__type,
.aic-card--plain-media .aic-shell-row__remove,
.aic-card--plain-media .card-media__remove { display: none !important; }
.aic-card--plain-text .aic-note,
.aic-shell--arky .aic-card--plain-text .aic-note,
.aic-card--plain-media .aic-note,
.aic-shell--arky .aic-card--plain-media .aic-note { padding: 0; }
.aic-card--plain-text .aic-shell-row { display: block; background: transparent; }
.aic-card--plain-text .aic-shell-row:hover { background: transparent; }
.aic-card--plain-media .aic-shell-row { display: block; background: transparent; }
.aic-card--plain-media .aic-shell-media { padding: 0; }
.aic-card--plain-text .aic-shell-rich,
.aic-card--plain-text .aic-shell-row__field,
.aic-shell--arky .aic-card--plain-text .aic-shell-rich,
.aic-shell--arky .aic-card--plain-text .aic-shell-row__field {
  min-height: 0;
  padding: 0;
  color: #33343a;
  font-size: 16px;
  line-height: 1.65;
  cursor: inherit;
}
[data-theme="dark"] .aic-card.aic-card--plain-text { background: transparent; }
[data-theme="dark"] .aic-card--plain-text .aic-shell-rich,
[data-theme="dark"] .aic-card--plain-text .aic-shell-row__field { color: #e4e4e7; }
.aic-stage__surface.is-ai-refreshing .aic-card {
  transition: transform .62s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease;
}
.aic-stage__surface.is-ai-refreshing .aic-group {
  transition: inset .55s cubic-bezier(.22, 1, .36, 1), width .55s cubic-bezier(.22, 1, .36, 1), height .55s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}
.aic-card.is-ai-entering {
  opacity: 0;
  scale: .92;
  animation: aic-card-enter .58s cubic-bezier(.22, 1, .36, 1) var(--aic-motion-delay, 0ms) forwards;
}
.aic-card.is-ai-updated { animation: aic-card-update 1.65s ease var(--aic-motion-delay, 0ms) both; }
.aic-connections.is-ai-refreshing .aic-connection-line { animation: aic-edge-reveal .8s ease .25s both; }
@keyframes aic-card-enter {
  0% { opacity: 0; scale: .92; filter: blur(2px); }
  100% { opacity: 1; scale: 1; filter: blur(0); }
}
@keyframes aic-card-update {
  0%, 100% { border-color: #d6d7d5; box-shadow: 0 1px 2px rgba(28, 31, 39, .06), 0 8px 25px rgba(28, 31, 39, .09); }
  28%, 68% { border-color: #8f83d6; box-shadow: 0 0 0 4px rgba(143, 131, 214, .16), 0 14px 34px rgba(28, 31, 39, .13); }
}
@keyframes aic-edge-reveal {
  from { opacity: 0; stroke-dashoffset: 28; }
  to { opacity: .78; stroke-dashoffset: 0; }
}
.aic-card.is-connecting { border-color: var(--aic-signal); box-shadow: 0 0 0 3px rgba(101, 88, 217, .13), 0 14px 34px rgba(28, 31, 39, .13); }
.aic-card.is-connectable { border-color: rgba(88, 170, 168, .7); }
.aic-card__dragbar { height: 38px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #e8e8e4; cursor: default; touch-action: none; }
.aic-card__emoji { font-size: 14px; }
.aic-card__eyebrow { font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: #9a9da4; letter-spacing: .13em; text-transform: uppercase; }
.aic-card__group-field { width: min(82px, 34%); min-width: 44px; height: 24px; box-sizing: border-box; padding: 0 5px; border: 1px solid transparent; border-radius: 5px; outline: 0; background: transparent; color: #777b86; font-size: 10px; font-weight: 720; text-overflow: ellipsis; }
.aic-card__group-field:hover { border-color: #dcdee3; background: rgba(255,255,255,.72); }
.aic-card__group-field:focus { width: 104px; border-color: #aaa4df; background: #fff; color: #5148a0; }
.aic-memory-status { margin-left: 2px; padding: 3px 5px; border-radius: 4px; font-size: 8px; font-weight: 750; letter-spacing: -.01em; }
.aic-memory-status--ai { color: #5d54b2; background: #eceafd; }
.aic-memory-status--verified { color: #287772; background: #e2f3f1; }
.aic-card__actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .14s; }
.aic-card:hover .aic-card__actions, .aic-card:focus-within .aic-card__actions { opacity: 1; }
.aic-card__actions button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; color: #767a84; cursor: pointer; }
.aic-card__actions button:hover { color: var(--aic-ink); background: #ecece8; }
.aic-note { padding: 9px 10px 10px; }
.aic-shell-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: start; gap: 4px; border-radius: 6px; }
.aic-shell-row:hover, .aic-shell-row:focus-within { background: rgba(33, 36, 46, .035); }
.aic-shell-row.is-selected { z-index: 18; background: #fff; outline: 2px solid #3f87f5; outline-offset: 2px; }
.aic-shell-selection-handle {
  position: absolute;
  z-index: 20;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #58a3f6;
  box-shadow: 0 1px 3px rgba(26, 92, 181, .28);
  pointer-events: none;
}
.aic-shell-selection-handle--top { top: -7px; left: calc(50% - 4px); }
.aic-shell-selection-handle--right { top: calc(50% - 4px); right: -7px; }
.aic-shell-selection-handle--bottom { bottom: -7px; left: calc(50% - 4px); }
.aic-shell-selection-handle--left { top: calc(50% - 4px); left: -7px; }
.aic-shell-context {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  z-index: 30;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px;
  border: 1px solid #e1e3e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 36, 48, .16);
  transform: translateX(-50%);
  animation: aic-shell-context-in .18s cubic-bezier(.22, 1, .36, 1) both;
  white-space: nowrap;
}
.aic-shell-context > button,
.aic-shell-context__more > button {
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid #ececef;
  border-radius: 5px;
  background: transparent;
  color: #4c5059;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}
.aic-shell-context > button:hover:not(:disabled),
.aic-shell-context__more > button:hover { background: #f1f2f4; color: #262931; }
.aic-shell-context > button:disabled { opacity: .38; cursor: default; }
.aic-shell-context .aic-shell-context__icon { width: 28px; padding: 0; }
.aic-shell-context__more { position: relative; display: flex; }
.aic-shell-context__more > button { border-right: 0; }
.aic-shell-context__menu {
  position: absolute;
  top: 33px;
  right: 0;
  z-index: 31;
  width: 142px;
  padding: 4px;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 36, 48, .18);
}
.aic-shell-context__menu button { width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #4c5059; font-size: 10.5px; text-align: left; cursor: pointer; }
.aic-shell-context__menu button:hover { background: #f1f2f4; color: #262931; }
.aic-block-type-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 18px;
  z-index: 34;
  width: 210px;
  max-height: 286px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dfe1e6;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(31, 36, 48, .2);
  animation: aic-shell-context-in .16s cubic-bezier(.22, 1, .36, 1) both;
}
.aic-block-type-menu > span { display: block; padding: 5px 7px 7px; color: #999ca4; font-size: 9px; font-weight: 700; }
.aic-block-type-menu > button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px; border: 0; border-radius: 6px; background: transparent; color: #3f434c; text-align: left; cursor: pointer; }
.aic-block-type-menu > button:hover { background: #f1f2f4; }
.aic-block-type-menu i { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border: 1px solid #e1e3e7; border-radius: 5px; background: #fff; font-size: 14px; font-style: normal; }
.aic-block-type-menu button > span { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.aic-block-type-menu strong { font-size: 11px; font-weight: 650; }
.aic-block-type-menu small { color: #94979f; font-size: 9px; }
.aic-block-type-menu p { margin: 8px; color: #92959d; font-size: 10px; }
@keyframes aic-shell-context-in {
  from { opacity: 0; transform: translate(-50%, 5px) scale(.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.aic-shell-row__type {
  width: 20px; height: 24px; display: grid; place-items: center; margin-top: 1px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: #a2a5ac;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.aic-shell-row:hover .aic-shell-row__type, .aic-shell-row:focus-within .aic-shell-row__type { opacity: 1; }
.aic-shell-row__type:hover:not(:disabled) { background: #e6e7e9; color: var(--aic-signal); }
.aic-shell-row__type:disabled { cursor: default; }
.aic-shell-row--todo .aic-shell-row__type,
.aic-shell-row--toggle .aic-shell-row__type { opacity: 1; color: #6f737d; }
.aic-shell-row__type.is-checkbox { font-size: 14px; color: #6b62c3; }
.aic-shell-row--toggle .aic-shell-row__type svg { transition: transform .16s ease; }
.aic-shell-row--toggle:not(.is-collapsed) .aic-shell-row__type svg { transform: rotate(90deg); }

/* 목록은 블록 하나에 항목이 여러 개다. 글머리 기호와 번호는 왼쪽 여백의
   블록 버튼이 아니라 항목마다 붙어야 하므로 본문 안에서 그린다. */
.aic-shell-row--numbered .aic-shell-rich { counter-reset: aic-li; }
.aic-li { position: relative; padding-left: 20px; }
.aic-li + .aic-li { margin-top: 3px; }
.aic-li::before {
  position: absolute; left: 2px; top: 0;
  color: #6f737d; font-variant-numeric: tabular-nums;
}
.aic-shell-row--bullet .aic-li::before { content: "•"; font-weight: 700; }
.aic-shell-row--numbered .aic-li::before { counter-increment: aic-li; content: counter(aic-li) "."; font-size: .92em; }
[data-theme="dark"] .aic-li::before { color: #9a9dab; }
.aic-shell-row__field {
  field-sizing: content; width: 100%; height: auto; min-height: 25px; max-height: none; box-sizing: border-box; resize: none; overflow: hidden;
  margin: 0; padding: 3px 1px; border: 0; outline: 0; background: transparent; color: var(--aic-ink);
  font: inherit; font-size: 13px; line-height: 1.58; overflow-wrap: anywhere;
}
.aic-shell-rich { width: 100%; min-height: 25px; box-sizing: border-box; padding: 3px 1px; color: var(--aic-ink); font-size: 13px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.aic-shell-rich strong { font-weight: 760; }
.aic-shell-rich code { padding: 1px 4px; border-radius: 4px; background: #ececeb; color: #b33a4a; font: .92em/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.aic-shell-rich a { color: #5750b8; text-decoration: underline; text-underline-offset: 2px; }
.aic-shell-row--title :is(.aic-shell-row__field, .aic-shell-rich) { min-height: 32px; padding-top: 2px; font-size: 16px; line-height: 1.45; font-weight: 760; letter-spacing: -.025em; }
.aic-shell-row--heading1 :is(.aic-shell-row__field, .aic-shell-rich) { min-height: 31px; font-size: 17px; line-height: 1.4; font-weight: 760; }
.aic-shell-row--heading2 :is(.aic-shell-row__field, .aic-shell-rich) { min-height: 28px; font-size: 15px; line-height: 1.45; font-weight: 740; }
.aic-shell-row--heading3 :is(.aic-shell-row__field, .aic-shell-rich) { min-height: 26px; font-size: 13.5px; line-height: 1.5; font-weight: 720; }
.aic-shell-row--quote :is(.aic-shell-row__field, .aic-shell-rich) { padding-left: 10px; border-left: 3px solid #c9cbd1; color: #525660; font-style: italic; }
.aic-shell-row--code :is(.aic-shell-row__field, .aic-shell-rich),
.aic-shell-row--table .aic-shell-row__field { padding: 8px; border-radius: 6px; background: #f3f3f1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10.5px; line-height: 1.55; }
:is(.aic-shell-row__field, .aic-shell-rich).is-checked { color: #9699a1; text-decoration: line-through; }
.aic-shell-row__divider { align-self: center; width: 100%; height: 17px; margin: 3px 0; padding: 0; border: 0; border-top: 1px solid #dfe1e5; background: transparent; cursor: pointer; }
.aic-shell-table { width: 100%; overflow-x: auto; padding: 2px 0 5px; cursor: text; }
.aic-shell-table table { width: 100%; border-collapse: collapse; color: #3f434c; font-size: 9.5px; line-height: 1.45; }
.aic-shell-table td { min-width: 74px; padding: 6px 7px; border: 1px solid #d9dbe0; vertical-align: top; overflow-wrap: anywhere; }
.aic-shell-table tr:first-child td { background: #f3f3f1; font-weight: 700; }

.aic-shell-chart { width: 100%; padding: 2px 0 5px; cursor: text; }




.aic-shell-row__field::placeholder { color: #b0b2b8; opacity: 1; }
.aic-shell-row__field.is-ai-changed {
  border-radius: 4px;
  animation: aic-field-update 1.9s ease var(--aic-motion-delay, 0ms) both;
}
@keyframes aic-field-update {
  0%, 100% { background: transparent; }
  22%, 70% { background: rgba(143, 131, 214, .16); }
}
.aic-shell-row__remove {
  width: 18px; height: 22px; display: grid; place-items: center; margin-top: 2px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: #a6a8ae; cursor: pointer; opacity: 0;
}
.aic-shell-row:hover .aic-shell-row__remove, .aic-shell-row:focus-within .aic-shell-row__remove { opacity: 1; }
.aic-shell-row__remove:hover { color: #bd4350; background: #f6e7e9; }
.aic-shell-add { position: relative; margin: 4px 0 0 24px; }
.aic-shell-add__trigger {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 0; border-radius: 5px;
  background: transparent; color: #9296a0; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.aic-card:hover .aic-shell-add__trigger, .aic-card:focus-within .aic-shell-add__trigger { opacity: 1; }
.aic-shell-add__trigger:hover { background: #e9eaeb; color: #595e69; }
.aic-shell-menu {
  position: absolute; left: 0; top: 27px; z-index: 12; width: 196px; padding: 5px;
  border: 1px solid #d8dae0; border-radius: 9px; background: #fff;
  box-shadow: 0 12px 35px rgba(25, 29, 40, .18);
}
.aic-shell-menu button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #4c515c; text-align: left; cursor: pointer; }
.aic-shell-menu button:hover { background: #f0f1f3; color: var(--aic-signal); }
.aic-shell-menu button > svg, .aic-shell-menu__text-icon { width: 18px; flex: 0 0 18px; text-align: center; font-size: 12px; font-weight: 750; }
.aic-shell-menu button span:last-child { display: flex; flex-direction: column; gap: 2px; }
.aic-shell-menu strong { font-size: 12px; font-weight: 700; }
.aic-shell-menu small { color: #8f939c; font-size: 10.5px; }
.aic-card__port {
  position: absolute; width: 16px; height: 16px; padding: 0; border: 3px solid #eef0f3; border-radius: 50%;
  background: var(--aic-line); z-index: 4; cursor: crosshair; opacity: 0; pointer-events: none;
  transition: transform .12s, background .12s, opacity .12s;
}
.aic-card__port--top { top: -9px; left: calc(50% - 8px); }
.aic-card__port--right { right: -9px; top: calc(50% - 8px); }
.aic-card__port--bottom { bottom: -9px; left: calc(50% - 8px); }
.aic-card__port--left { left: -9px; top: calc(50% - 8px); }
.aic-card.is-selected .aic-card__port, .aic-card.is-connectable .aic-card__port { opacity: 1; pointer-events: auto; }
.aic-card.is-connecting .aic-card__port { opacity: .18; pointer-events: none; }
.aic-card.is-connecting .aic-card__port.is-active { opacity: 1; pointer-events: auto; }
.aic-card__port:hover, .aic-card__port.is-active { transform: scale(1.3); background: var(--aic-signal); }
.aic-card.is-connectable .aic-card__port { animation: aicPortPulse 1.4s ease-in-out infinite; }

.aic-empty { position: absolute; inset: 0; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #777b85; }
.aic-empty__mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid #d4d7dd; border-radius: 50%; background: rgba(255,255,255,.65); color: var(--aic-signal); font-size: 18px; }
.aic-empty strong { color: #353945; font-size: 14px; }
.aic-empty p { margin: 6px 0 14px; font-size: 11px; }
.aic-spin { animation: aicSpin .8s linear infinite; }
@keyframes aicSpin { to { transform: rotate(360deg); } }
@keyframes aicDash { to { stroke-dashoffset: -12; } }
@keyframes aicPortPulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

[data-theme="dark"] .aic-shell { --aic-paper: #25272d; --aic-ink: #f2f2ef; background: #191b20; }
[data-theme="dark"] .aic-toolbar { background: #202228; border-color: #363941; }
[data-theme="dark"] .aic-kicker { color: #f3f3ef; }
[data-theme="dark"] .aic-category-title { border-left-color: #41454f; color: #d5d6da; }
[data-theme="dark"] .aic-button, [data-theme="dark"] .aic-icon-button { background: #292c33; border-color: #41454f; color: #e1e2e5; }
[data-theme="dark"] .aic-edge-tools { background: #292c33; border-color: #41454f; }
[data-theme="dark"] .aic-edge-tools select { border-left-color: #41454f; color: #e1e2e5; }
[data-theme="dark"] .aic-edge-colors { border-left-color: #41454f; }
[data-theme="dark"] .aic-edge-colors button { border-color: #292c33; }
[data-theme="dark"] .aic-viewport { background-color: #17191e; background-image: radial-gradient(circle, rgba(255,255,255,.13) .8px, transparent .9px); }
[data-theme="dark"] .aic-zoom-controls { border-color: #41454f; background: rgba(42,45,53,.94); box-shadow: 0 8px 24px rgba(0,0,0,.32); }
[data-theme="dark"] .aic-zoom-controls button { border-color: #41454f; color: #e1e2e5; }
[data-theme="dark"] .aic-zoom-controls button:hover:not(:disabled) { background: #393743; color: #d8d3ff; }
[data-theme="dark"] .aic-zoom-controls button:disabled { color: #686c76; }
[data-theme="dark"] .aic-exit-prompt { background: rgba(5,6,9,.58); }
[data-theme="dark"] .aic-exit-prompt__dialog { border-color: #444750; background: #25272d; color: #f2f2ef; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
[data-theme="dark"] .aic-exit-prompt__dialog > p { color: #b5b7bd; }
[data-theme="dark"] .aic-exit-prompt__dialog .aic-exit-prompt__error { background: rgba(178,61,73,.16); color: #f1a9b1; }
[data-theme="dark"] .aic-exit-prompt__actions button { border-color: #494c55; background: #30333a; color: #e3e4e6; }
[data-theme="dark"] .aic-exit-prompt__actions button:hover:not(:disabled) { background: #383b43; }
[data-theme="dark"] .aic-exit-prompt__actions .aic-exit-prompt__discard { color: #efa7af; border-color: #70434a; }
[data-theme="dark"] .aic-exit-prompt__actions .aic-exit-prompt__save { color: #fff; border-color: var(--aic-signal); background: var(--aic-signal); }
[data-theme="dark"] .aic-card { border-color: #3c3f47; }
[data-theme="dark"] .aic-group { background: color-mix(in srgb, var(--group-fill) 9%, #17191e); border-color: color-mix(in srgb, var(--group-line) 48%, #343740); }
[data-theme="dark"] .aic-group > small { background: rgba(23,25,30,.78); }
[data-theme="dark"] .aic-group__label:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .aic-group.is-selected .aic-group__label { background: rgba(255,255,255,.055); }
[data-theme="dark"] .aic-group__port { border-color: #17191e; }
[data-theme="dark"] .aic-card__dragbar { border-color: #383b42; }
[data-theme="dark"] .aic-card__group-field { color: #b8bac2; }
[data-theme="dark"] .aic-card__group-field:hover, [data-theme="dark"] .aic-card__group-field:focus { border-color: #50545e; background: #30333a; color: #dedaff; }
[data-theme="dark"] .aic-card__port { border-color: #17191e; }
[data-theme="dark"] .aic-shell-row:hover, [data-theme="dark"] .aic-shell-row:focus-within { background: rgba(255,255,255,.035); }
[data-theme="dark"] .aic-shell-row.is-selected { background: #25272d; }
[data-theme="dark"] .aic-shell-context,
[data-theme="dark"] .aic-shell-context__menu,
[data-theme="dark"] .aic-block-type-menu { border-color: #454851; background: #292c33; color: #e0e1e4; }
[data-theme="dark"] .aic-shell-context > button,
[data-theme="dark"] .aic-shell-context__more > button,
[data-theme="dark"] .aic-shell-context__menu button { border-color: #41444d; color: #d5d6da; }
[data-theme="dark"] .aic-shell-context > button:hover:not(:disabled),
[data-theme="dark"] .aic-shell-context__more > button:hover,
[data-theme="dark"] .aic-shell-context__menu button:hover { background: #383b43; color: #fff; }
[data-theme="dark"] .aic-block-type-menu > button { color: #d5d6da; }
[data-theme="dark"] .aic-block-type-menu > button:hover,
[data-theme="dark"] .aic-block-type-menu i { border-color: #454851; background: #383b43; }
[data-theme="dark"] .aic-shell-row--code :is(.aic-shell-row__field, .aic-shell-rich),
[data-theme="dark"] .aic-shell-row--table .aic-shell-row__field,
[data-theme="dark"] .aic-shell-table tr:first-child td { background: #303239; }
[data-theme="dark"] .aic-shell-table table { color: #d6d7da; }
[data-theme="dark"] .aic-shell-table td { border-color: #484b54; }
[data-theme="dark"] .aic-shell-row__type:hover:not(:disabled), [data-theme="dark"] .aic-shell-add__trigger:hover { background: #363940; color: #dcdbff; }
[data-theme="dark"] .aic-shell-row__field { color: #f4f4f2; }
[data-theme="dark"] .aic-shell-rich { color: #f4f4f2; }
[data-theme="dark"] .aic-shell-rich code { background: #3a3d44; color: #f0a3ad; }
[data-theme="dark"] .aic-shell-row__remove:hover { background: rgba(189,67,80,.18); }
[data-theme="dark"] .aic-shell-menu { background: #292c33; border-color: #444852; }
[data-theme="dark"] .aic-shell-menu button { color: #dedfe2; }
[data-theme="dark"] .aic-shell-menu button:hover { background: #363940; color: #dcdbff; }
[data-theme="dark"] .aic-memory-status--ai { color: #c7c1ff; background: rgba(143,131,214,.2); }
[data-theme="dark"] .aic-memory-status--verified { color: #9adbd5; background: rgba(88,170,168,.18); }

.aic-shell--panel .aic-toolbar { min-height: 58px; align-items: flex-start; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
.aic-shell--panel .aic-toolbar__intro { width: 100%; }
.aic-shell--panel .aic-toolbar__copy { flex: 1; }
.aic-shell--panel .aic-toolbar__actions { width: 100%; justify-content: flex-end; gap: 5px; }
.aic-shell--panel .aic-save-state { margin-right: auto; }
.aic-shell--panel .aic-button { padding: 0 8px; }
.aic-shell--panel .aic-edge-tools { max-width: 100%; overflow-x: auto; }

@media (max-width: 760px) {
  .aic-toolbar {
    min-height: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
  }
  .aic-toolbar__intro {
    width: 100%;
    height: 32px;
    gap: 7px;
    overflow: hidden;
  }
  .aic-kicker { flex: 0 0 auto; font-size: 9px; }
  .aic-category-title {
    min-width: 0;
    overflow: hidden;
    padding-left: 7px;
    font-size: 14px;
    text-overflow: ellipsis;
  }
  .aic-toolbar__copy, .aic-save-state { display: none; }
  .aic-toolbar__actions {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: 5px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .aic-toolbar__actions::-webkit-scrollbar { display: none; }
  .aic-toolbar__actions > * { flex: 0 0 auto; }
  .aic-button { padding: 0 9px; }
  .aic-edge-tools { max-width: none; overflow: visible; }
  .aic-viewport { scrollbar-width: none; }
  .aic-viewport::-webkit-scrollbar { display: none; }
  .aic-zoom-controls {
    right: 10px;
    bottom: 10px;
    grid-template-columns: 34px 52px 34px;
    height: 36px;
  }
  .aic-exit-prompt__dialog { padding: 22px 18px 18px; }
  .aic-exit-prompt__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .aic-exit-prompt__actions .aic-exit-prompt__save { grid-column: 1 / -1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aic-button, .aic-card, .aic-card__actions, .aic-group { transition: none; }
  .aic-exit-prompt { animation: none; }
  .aic-spin, .aic-connections g.is-selected .aic-connection-line { animation: none; }
  .aic-card.is-connectable .aic-card__port { animation: none; }
  .aic-card.is-ai-entering, .aic-card.is-ai-updated,
  .aic-shell-row__field.is-ai-changed, .aic-connections.is-ai-refreshing .aic-connection-line { animation: none; opacity: 1; scale: 1; filter: none; }
  .aic-viewport { transition: none; }
  .aic-shell-context { animation: none; }
  .aic-block-type-menu { animation: none; }
}

/* 표를 고르면 칸을 직접 고친다 (원문 | 를 펼치지 않는다). */
.aic-shell-table.is-editing td { background: #fcfcff; cursor: text; }
.aic-shell-table.is-editing td:focus { outline: 2px solid var(--aic-signal); outline-offset: -2px; background: #fff; }
.aic-shell-table__tools { display: flex; gap: 4px; margin-top: 5px; }
.aic-shell-table__tools button {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #dcdde1;
  border-radius: 6px;
  background: #fff;
  color: #5b5f68;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.aic-shell-table__tools button:hover { border-color: #b8bdc8; color: var(--aic-signal); }
[data-theme="dark"] .aic-shell-table.is-editing td { background: #2c2e34; }
[data-theme="dark"] .aic-shell-table.is-editing td:focus { background: #33363d; }
[data-theme="dark"] .aic-shell-table__tools button { border-color: #444852; background: #2a2c33; color: #c8cad1; }

.aic-readonly-badge,
.aic-dock__readonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #687386;
  font-size: 12px;
  font-weight: 700;
}
.aic-readonly-badge {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #dce2ea;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
}
.aic-shell.is-readonly .aic-card,
.aic-shell.is-readonly .aic-group__label { cursor: default; }
.aic-shell.is-readonly .aic-dock > button,
.aic-shell.is-readonly .aic-dock > .aic-dock__sep { display: none; }
.aic-shell.is-readonly .aic-dock { gap: 10px; }
.aic-shell.is-readonly .aic-shell-row__type { visibility: hidden; }
.aic-shell.is-readonly .aic-shell-row__field { cursor: default; }
[data-theme="dark"] .aic-readonly-badge {
  border-color: #444852;
  background: rgba(42, 44, 51, 0.94);
  color: #c8cad1;
}

/* 손가락으로 벌려 확대할 수 있는 화면에서는 −/+ 단추가 자리만 차지한다.
   지금 배율이 얼마인지만 남기고, 눌러서 100%로 되돌리는 기능은 그대로 둔다. */
@media (max-width: 768px) {
  .aic-zoom-controls > button:not(.aic-zoom-controls__value) { display: none; }
}
/* Arky 스타일 크롬 — 상단 얇은 바 + 하단 플로팅 독 + 좌하단 배율.
   기존 .aic-* 동작은 그대로 두고 시각 언어만 덮어쓴다. */
.aic-shell--arky {
  --arky-ink: #1c1c1e;
  --arky-sub: #8a8a8f;
  --arky-hair: #e8e8e6;
  --arky-paper: #fff;
  --arky-ground: #f3f3f2;
  --arky-accent: #7c5cd6;
  --arky-chip: #f2f2f0;
  background: var(--arky-ground);
}

.aic-shell--arky .aic-arky-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 좌우 여백은 실제 사이드 패널 폭을 따라간다. 패널이 접히고 펴질 때
     같은 duration·easing으로 움직여서 상단 칩이 패널에 붙어 함께 이동한다.
     (변수는 패널을 소유한 WorkspaceHomePage.css가 정의한다) */
  /* 바 상자를 여백으로 밀지 않고 시작점 자체를 옮긴다. 여백으로 밀면 상자는
     여전히 화면 폭 전체를 덮어, z-index가 더 낮은 왼쪽 사이드바의 위쪽
     (브랜드 메뉴·접기 버튼)을 가려 누를 수 없게 만든다. */
  left: var(--arky-bar-left, 12px);
  padding: 9px var(--arky-bar-right, 12px) 9px 0;
  background: transparent;
  pointer-events: none;
  transition: left .28s cubic-bezier(.22, 1, .36, 1), padding .28s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .aic-shell--arky .aic-arky-bar { transition: none; }
}
/* 이 두 칸은 칩을 좌우로 미는 자리일 뿐, 그 자체는 투명한 빈 띠다.
   여기에 pointer-events: auto를 주면 화면 폭 전체(특히 flex:1인 왼쪽 칸)가
   보이지 않는 채로 클릭을 삼켜, 그 아래 카드나 사이드바를 누를 수 없다.
   실제로 누를 수 있어야 하는 건 안에 든 칩들뿐이다. */
.aic-shell--arky .aic-arky-bar__left,
.aic-shell--arky .aic-arky-bar__right { display: flex; align-items: center; gap: 6px; min-width: 0; pointer-events: none; }
.aic-shell--arky .aic-arky-bar__left > *,
.aic-shell--arky .aic-arky-bar__right > * { pointer-events: auto; }
.aic-shell--arky .aic-arky-bar__left { flex: 1; overflow: visible; }
.aic-shell--arky .aic-arky-bar__right { position: relative; z-index: 2; flex: 0 0 auto; }

/* 상단 칩들은 각자 뜨지 않고 한 판에 붙어 함께 움직인다.
   바깥 판이 배경·그림자를 갖고, 안쪽 칩은 투명하게 얹힌다. */
.aic-shell--arky .aic-arky-cluster {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 3px;
  border-radius: 12px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 6px 18px rgba(20, 20, 25, .06);
  pointer-events: auto;
}
.aic-shell--arky .aic-arky-cluster > .aic-arky-project,
.aic-shell--arky .aic-arky-cluster .aic-arky-pill,
.aic-shell--arky .aic-arky-cluster .aic-arky-icon,
.aic-shell--arky .aic-arky-cluster .aic-arky-outline-toggle {
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}
.aic-shell--arky .aic-arky-cluster .aic-arky-pill:hover:not(:disabled),
.aic-shell--arky .aic-arky-cluster .aic-arky-icon:hover:not(:disabled),
.aic-shell--arky .aic-arky-cluster .aic-arky-outline-toggle:hover { background: #f2f2f0; }
.aic-shell--arky .aic-arky-cluster .aic-arky-pill[aria-pressed="true"] { box-shadow: none; background: #ede9fb; }

/* 붙은 칩 사이의 얇은 구분선 */
.aic-shell--arky .aic-arky-cluster > * + * { position: relative; }
.aic-shell--arky .aic-arky-cluster > * + *::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: #e8e8e6;
  pointer-events: none;
}

.aic-shell--arky .aic-arky-project {
  flex: 0 0 auto;
  max-width: 220px;
  overflow: hidden;
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06);
  color: var(--arky-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aic-shell--arky .aic-arky-project--editing {
  outline: 0;
  cursor: text;
  user-select: text;
}

.aic-shell--arky .aic-arky-outline-toggle {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 8px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .68);
  color: var(--arky-sub);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.aic-shell--arky .aic-arky-outline-toggle:hover { background: var(--arky-paper); color: var(--arky-ink); }
.aic-shell--arky .aic-arky-outline-toggle svg { width: 15px; height: 15px; transition: transform .15s ease; }
.aic-shell--arky .aic-arky-outline-toggle.is-expanded svg { transform: rotate(90deg); }
.aic-shell--arky .aic-arky-outline-toggle:focus-visible { outline: 2px solid var(--arky-accent); outline-offset: 2px; }
.aic-shell--arky .aic-arky-outline-wrap { position: relative; flex: 0 0 auto; }
.aic-shell--arky .aic-arky-outline-popover {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 70;
  width: min(350px, calc(100vw - 440px));
  min-width: 280px;
  max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 12px;
  background: var(--arky-paper);
  box-shadow: 0 18px 48px rgba(25, 27, 34, .16);
}
.aic-shell--arky .aic-arky-outline-tabs { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; }
.aic-shell--arky .aic-arky-outline-tabs > div { display: flex; padding: 3px; border-radius: 9px; background: var(--arky-chip); }
.aic-shell--arky .aic-arky-outline-tabs button { height: 31px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--arky-sub); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.aic-shell--arky .aic-arky-outline-tabs button.is-active { background: var(--arky-paper); color: var(--arky-ink); box-shadow: 0 1px 3px rgba(20, 20, 25, .09); }
.aic-shell--arky .aic-arky-outline-tabs > svg { width: 19px; color: var(--arky-sub); }
.aic-shell--arky .aic-arky-outline-tree { max-height: min(486px, calc(100vh - 190px)); overflow-y: auto; padding: 0 12px 14px; scrollbar-width: thin; }
.aic-shell--arky .aic-arky-outline-project { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; color: var(--arky-sub); }
.aic-shell--arky .aic-arky-outline-project strong { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-arky-outline-project svg { width: 16px; flex: 0 0 auto; }
.aic-shell--arky .aic-arky-outline-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); min-height: 40px; align-items: center; border-radius: 8px; }
.aic-shell--arky .aic-arky-outline-row:hover, .aic-shell--arky .aic-arky-outline-row.is-selected { background: var(--arky-chip); }
.aic-shell--arky .aic-arky-outline-chevron { display: grid; width: 30px; height: 38px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--arky-sub); cursor: pointer; }
.aic-shell--arky .aic-arky-outline-chevron svg { width: 15px; transition: transform .14s ease; }
.aic-shell--arky .aic-arky-outline-chevron svg.is-open { transform: rotate(90deg); }
.aic-shell--arky .aic-arky-outline-label { display: flex; min-width: 0; height: 40px; align-items: center; gap: 7px; padding: 0 8px 0 0; border: 0; background: transparent; color: #414146; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.aic-shell--arky .aic-arky-outline-label span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-arky-outline-label small { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: #e8e8e6; color: var(--arky-sub); font-size: 10px; }
.aic-shell--arky .aic-arky-outline-children { margin-left: 15px; padding: 2px 0 3px 18px; border-left: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-arky-outline-card { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: #5b5b60; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.aic-shell--arky .aic-arky-outline-card:hover, .aic-shell--arky .aic-arky-outline-card.is-selected { background: var(--arky-chip); color: var(--arky-ink); }
.aic-shell--arky .aic-arky-outline-card svg { width: 14px; flex: 0 0 auto; color: #aaa; }
.aic-shell--arky .aic-arky-outline-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-arky-outline-details { min-height: 180px; padding: 18px 20px; }
.aic-shell--arky .aic-arky-outline-details > span { color: var(--arky-sub); font-size: 10px; font-weight: 750; }
.aic-shell--arky .aic-arky-outline-details h3 { margin: 8px 0; color: var(--arky-ink); font-size: 16px; }
.aic-shell--arky .aic-arky-outline-details p, .aic-shell--arky .aic-arky-outline-empty { margin: 12px 20px 20px; color: var(--arky-sub); font-size: 12px; line-height: 1.55; }

[data-theme="dark"] .aic-shell--arky .aic-arky-outline-popover { border-color: #3b3d44; }
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-tabs > div,
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-row:hover,
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-row.is-selected,
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-card:hover,
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-card.is-selected { background: #303239; }
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-label,
[data-theme="dark"] .aic-shell--arky .aic-arky-outline-card { color: #e1e1e5; }

@media (max-width: 960px) {
  /* 좁은 화면에서도 여백은 변수(실제 패널 폭)를 그대로 따른다 — 고정값으로
     덮으면 패널을 다시 펼쳤을 때 상단 칩이 패널 밑에 깔린다. */
  .aic-shell--arky .aic-arky-outline-popover { width: min(330px, calc(100vw - 80px)); min-width: 0; }
}

.aic-shell--arky .aic-arky-tabs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .58);
  scrollbar-width: none;
}
.aic-shell--arky .aic-arky-tabs::-webkit-scrollbar { display: none; }
.aic-shell--arky .aic-arky-tabs button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  max-width: 168px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--arky-sub);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.aic-shell--arky .aic-arky-tabs button > * { flex: 0 0 auto; }
.aic-shell--arky .aic-arky-tabs button:hover { background: rgba(0, 0, 0, .04); color: #4a4a50; }
.aic-shell--arky .aic-arky-tabs button.is-active {
  background: var(--arky-paper);
  color: var(--arky-ink);
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(20, 20, 25, .07);
}
.aic-shell--arky .aic-arky-tabs small {
  min-width: 15px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--arky-chip);
  color: var(--arky-sub);
  font-size: 9.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.aic-shell--arky .aic-arky-tabs button.is-active small { background: #ede9fb; color: #6b4fc4; }

.aic-shell--arky .aic-arky-save { color: var(--arky-sub); font-size: 11px; white-space: nowrap; }
.aic-shell--arky .aic-arky-save--dirty { color: #9a6b24; font-weight: 650; }
.aic-shell--arky .aic-arky-save--error { color: #c54855; font-weight: 650; }

.aic-shell--arky .aic-arky-pill,
.aic-shell--arky .aic-arky-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06);
  color: #3d3d42;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.aic-shell--arky .aic-arky-pill { padding: 0 12px; }
.aic-shell--arky .aic-view-toggle {
  position: relative;
  width: 104px;
  overflow: hidden;
  padding: 0;
}
.aic-shell--arky .aic-view-toggle__current,
.aic-shell--arky .aic-view-toggle__target {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.aic-shell--arky .aic-view-toggle__current { opacity: 1; transform: translateY(0); }
.aic-shell--arky .aic-view-toggle__target { opacity: 0; transform: translateY(7px); }
.aic-shell--arky .aic-view-toggle:hover .aic-view-toggle__current,
.aic-shell--arky .aic-view-toggle:focus-visible .aic-view-toggle__current { opacity: 0; transform: translateY(-7px); }
.aic-shell--arky .aic-view-toggle:hover .aic-view-toggle__target,
.aic-shell--arky .aic-view-toggle:focus-visible .aic-view-toggle__target { opacity: 1; transform: translateY(0); }
.aic-shell--arky .aic-arky-icon { width: 32px; font-size: 15px; }
.aic-shell--arky .aic-arky-pill:hover:not(:disabled),
.aic-shell--arky .aic-arky-icon:hover:not(:disabled) { background: #fbfbfa; color: var(--arky-ink); }
.aic-shell--arky .aic-arky-pill[aria-pressed="true"] { color: #5f50bd; box-shadow: 0 0 0 1px #d8d1f2, 0 4px 14px rgba(67, 54, 137, .12); }
.aic-shell--arky .aic-arky-pill:disabled { opacity: .5; cursor: default; }
.aic-shell--arky .aic-arky-pill:focus-visible,
.aic-shell--arky .aic-arky-icon:focus-visible,
.aic-shell--arky .aic-arky-tabs button:focus-visible { outline: 2px solid var(--arky-accent); outline-offset: 2px; }

.aic-shell--arky .aic-arky-menu-wrap { position: relative; }
.aic-shell--arky .aic-arky-menu__scrim { position: fixed; inset: 0; z-index: 40; }
.aic-shell--arky .aic-arky-menu {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 41;
  width: 210px;
  max-height: min(640px, calc(100vh - 96px));
  overflow-y: auto;
  padding: 5px;
  border-radius: 12px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .08), 0 16px 44px rgba(20, 20, 25, .16);
}
.aic-shell--arky .aic-arky-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3d3d42;
  font-size: 12.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.aic-shell--arky .aic-arky-menu button:hover:not(:disabled) { background: #f5f5f3; color: var(--arky-ink); }
.aic-shell--arky .aic-arky-menu button:disabled { opacity: .42; cursor: default; }
.aic-shell--arky .aic-arky-menu small { margin-left: auto; color: #b0b0b5; font-size: 10px; font-weight: 500; }
.aic-shell--arky .aic-arky-menu__divider { height: 1px; margin: 5px 7px; background: var(--arky-hair); }
.aic-shell--arky .aic-arky-menu__label { display: block; padding: 5px 10px 3px; color: #a0a0a6; font-size: 9px; font-weight: 750; }
.aic-shell--arky .aic-arky-menu__tool > button > span,
.aic-shell--arky .aic-arky-menu__children button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-arky-menu__tool button > svg { flex: 0 0 auto; }
.aic-shell--arky .aic-arky-menu__tool button > svg:last-child { margin-left: auto; transition: transform .14s ease; }
.aic-shell--arky .aic-arky-menu__tool button > svg:last-child.is-open { transform: rotate(90deg); }
.aic-shell--arky .aic-arky-menu__tool b { min-width: 17px; margin-left: auto; padding: 1px 4px; border-radius: 9px; background: #e95b68; color: #fff; font-size: 8px; text-align: center; }
.aic-shell--arky .aic-arky-menu__children { margin: 0 3px 3px 27px; padding-left: 5px; border-left: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-arky-menu__children button { padding-top: 7px; padding-bottom: 7px; color: #66666d; font-size: 11px; }

/* 캔버스와 2nd Brain은 같은 바닥을 사용해 전환할 때 색이 튀지 않는다. */
.aic-shell--arky .aic-canvas-area,
.aic-shell--arky .aic-viewport,
.aic-shell--arky .second-brain { background-color: var(--arky-ground); background-image: none; }
.aic-shell--arky .second-brain__topbar { display: none; }

/* 그룹 프레임 — 연한 면 + 좌상단 컬러 필 라벨 */
.aic-shell--arky .aic-group {
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--group-fill) 88%, transparent);
}
.aic-shell--arky .aic-group.is-selected,
.aic-shell--arky .aic-group.is-connecting { box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-ink) 42%, transparent); }
.aic-shell--arky .aic-group.is-connectable { outline: 1px dashed color-mix(in srgb, var(--group-ink) 46%, transparent); outline-offset: -1px; }
.aic-shell--arky .aic-group__label {
  left: 11px;
  top: 9px;
  width: auto;
  max-width: calc(100% - 62px);
  height: 25px;
  padding: 0 11px;
  border-radius: 7px;
  background: var(--group-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: grab;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--group-ink) 34%, transparent);
}
.aic-shell--arky .aic-group__label:hover,
.aic-shell--arky .aic-group.is-selected .aic-group__label {
  background: color-mix(in srgb, var(--group-ink) 88%, black);
  border-bottom-color: transparent;
}
.aic-shell--arky .aic-group__label--editing {
  cursor: text;
  outline: 0;
  user-select: text;
}
.aic-shell--arky .aic-group > small {
  right: 11px;
  top: 12px;
  border-color: transparent;
  background: var(--arky-paper);
  color: var(--group-ink);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .1);
}
.aic-shell--arky .aic-group__port { border-color: var(--arky-ground); }

/* 연결선 — 얇은 점선이 기본 */
.aic-shell--arky .aic-connection-line { stroke-width: 1.4; opacity: .78; stroke-dasharray: 5 5; }
.aic-shell--arky .aic-connections g.is-dashed .aic-connection-line { stroke-dasharray: 3 5; }
.aic-shell--arky .aic-connections g:hover .aic-connection-line,
.aic-shell--arky .aic-connections g.is-selected .aic-connection-line { stroke-width: 2; opacity: 1; stroke-dasharray: none; }
.aic-shell--arky .aic-connections g.is-group-edge .aic-connection-line { stroke-width: 1.8; opacity: .62; }

/* 카드 — 흰 종이, 얇은 헤어라인, 굵은 제목 + 불릿 본문 */
.aic-shell--arky .aic-card {
  width: var(--aic-card-width);
  min-height: 0;
  border: 1px solid var(--arky-hair);
  border-radius: 9px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .05), 0 6px 18px rgba(20, 20, 25, .06);
}
.aic-shell--arky .aic-card:hover { border-color: #dbdbd8; box-shadow: 0 1px 3px rgba(20, 20, 25, .07), 0 10px 26px rgba(20, 20, 25, .1); }
/* 한 번 클릭 = 선택. 편집 중이 아니라는 걸 알 수 있게 테두리를 또렷하게 준다. */
.aic-shell--arky .aic-card.is-selected {
  border-color: #4a7cf0;
  box-shadow: 0 0 0 1px #4a7cf0, 0 1px 3px rgba(20, 20, 25, .07), 0 10px 26px rgba(20, 20, 25, .1);
}
/* 읽기 상태에서는 잡아끌 수 있다는 걸 커서로 알린다 (더블클릭해야 편집). */
.aic-shell--arky .aic-card { cursor: grab; }
.aic-shell--arky .aic-shell-rich { cursor: inherit; }
.aic-viewport.is-element-dragging .aic-shell--arky .aic-card,
.aic-shell--arky .aic-viewport.is-element-dragging .aic-card { cursor: grabbing; }
/* 편집 중인 카드에서는 글자 다루기가 우선. */
.aic-shell--arky .aic-card:has(.aic-shell-row.is-selected) { cursor: default; }
.aic-shell--arky .aic-card:has(.aic-shell-row.is-selected) .aic-shell-rich { cursor: text; }
.aic-shell--arky .aic-card__port { border-color: var(--arky-ground); background: var(--arky-accent); }
/* 헤더에 남은 건 상태 배지와 hover 액션뿐이라 얇은 손잡이로만 둔다.
   문서처럼 보이도록 평소에는 비어 있고, 카드에 올렸을 때만 액션이 뜬다. */
.aic-shell--arky .aic-card__dragbar {
  height: 20px;
  padding: 0 6px 0 12px;
  border-bottom: 0;
  gap: 6px;
  cursor: grab;
}
.aic-shell--arky .aic-card__emoji { display: none; }

/* 위지윅 편집 — 편집 중에도 마크다운 기호 없이 서식만 보인다. */
.aic-shell-rich[contenteditable="true"] {
  outline: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.aic-shell-rich[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #b0b2b8;
  pointer-events: none;
}
.aic-shell-rich.is-editing { background: rgba(124, 92, 214, .05); border-radius: 5px; }
.aic-shell-rich strong { font-weight: 750; }
.aic-shell-rich em { font-style: italic; }
.aic-shell-rich a { color: #6b4fc4; text-decoration: underline; }

/* 블록 서식 도구막대의 구분선 */
.aic-shell-context__sep {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: #e2e2df;
}
[data-theme="dark"] .aic-shell-context__sep { background: #3a3c43; }

/* 오른쪽 가장자리 너비 손잡이 — 평소엔 숨고 카드에 올리면 선이 뜬다. */
.aic-card__resize {
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  z-index: 6;
  width: 10px;
  cursor: ew-resize;
  touch-action: none;
}
.aic-card__resize::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background .14s ease;
}
.aic-card:hover > .aic-card__resize::after { background: #d8d8d5; }
.aic-card__resize:hover::after,
.aic-card.is-selected > .aic-card__resize::after { background: var(--arky-accent, #7c5cd6); }
[data-theme="dark"] .aic-card:hover > .aic-card__resize::after { background: #4a4c54; }
.aic-shell--arky .aic-card__emoji { font-size: 11px; opacity: .6; }
.aic-shell--arky .aic-memory-status { padding: 2px 5px; font-size: 8px; }
/* Gather AI가 채팅에서 이 카드를 고쳐 썼을 때 붙는 표시 */
.aic-updated-badge {
  padding: 2px 6px;
  border-radius: 5px;
  background: #ede9fb;
  color: #6b4fc4;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .02em;
  white-space: nowrap;
}
[data-theme="dark"] .aic-updated-badge { background: #393350; color: #cfc4f7; }
.aic-shell--arky .aic-note { padding: 0 12px 11px; }
.aic-shell--arky .aic-shell-row { grid-template-columns: 14px minmax(0, 1fr) 16px; gap: 3px; }
.aic-shell--arky .aic-shell-row__type { width: 14px; height: 20px; font-size: 8.5px; }
.aic-shell--arky .aic-shell-row__field { padding: 2px 1px; font-size: 12px; line-height: 1.58; color: #4a4a52; }
/* 카드 제목은 문서 제목처럼 본문보다 확실히 크게 — 본문 12px 대비 24px.
   축소해서 여러 장을 훑을 때 제목만으로 카드를 골라낼 수 있어야 한다. */
.aic-shell--arky .aic-shell-row--title :is(.aic-shell-row__field, .aic-shell-rich) {
  min-height: 36px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -.025em;
  color: var(--arky-ink);
}
/* 제목 아래로 한 숨 띄워 본문과 층이 나뉘게 한다. */
.aic-shell--arky .aic-shell-row--title { margin-bottom: 7px; }
/* 제목이 커진 만큼 소제목도 같이 올려 층이 눌리지 않게 한다. */
.aic-shell--arky .aic-shell-row--heading1 :is(.aic-shell-row__field, .aic-shell-rich) { font-size: 18px; font-weight: 720; }
.aic-shell--arky .aic-shell-row--heading2 :is(.aic-shell-row__field, .aic-shell-rich) { font-size: 15px; font-weight: 700; }
.aic-shell--arky .aic-shell-row--heading3 :is(.aic-shell-row__field, .aic-shell-rich) { font-size: 12.5px; }
.aic-shell--arky .aic-shell-rich { padding: 2px 1px; font-size: 12px; line-height: 1.58; color: #4a4a52; }
.aic-shell--arky .aic-shell-row.is-selected { background: var(--arky-paper); outline-color: #3f87f5; }
.aic-shell--arky .aic-shell-context { border-color: var(--arky-hair); border-radius: 8px; background: var(--arky-paper); }
.aic-shell--arky .aic-shell-add { margin: 2px 0 0 18px; }

/* 하단 플로팅 도구 독 */
.aic-shell--arky .aic-dock {
  position: absolute;
  left: 50%;
  /* 아이폰의 홈 인디케이터 위로, 그리고 모바일 앱 탭바 위로 띄운다.
     둘 다 없는 화면에서는 0이라 그대로다. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--app-bottom-bar, 0px));
  z-index: 32;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .09), 0 12px 34px rgba(20, 20, 25, .15);
}
.aic-shell--arky .aic-dock button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6b6b72;
  font-size: 16px;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.aic-shell--arky .aic-dock button:hover:not(:disabled) { background: #f2f2f0; color: var(--arky-ink); }
.aic-shell--arky .aic-dock button.is-active { background: #ede9fb; color: #6b4fc4; }
.aic-shell--arky .aic-dock button.is-dirty { color: #9a6b24; }
.aic-shell--arky .aic-dock button:disabled { opacity: .34; cursor: default; }
.aic-shell--arky .aic-dock button:focus-visible { outline: 2px solid var(--arky-accent); outline-offset: 1px; }
.aic-shell--arky .aic-dock__sep { width: 1px; height: 20px; margin: 0 3px; background: #e8e8e6; }
/* 이름이 붙는 버튼 — 아이콘만으로는 무슨 동작인지 알 수 없는 것에만 쓴다. */
.aic-shell--arky .aic-dock button.aic-dock__labeled {
  width: auto;
  grid-auto-flow: column;
  gap: 6px;
  padding: 0 11px 0 9px;
}
.aic-shell--arky .aic-dock__labeled span { font-size: 12px; font-weight: 650; letter-spacing: -.01em; }

/* 첫 캔버스에 기본으로 놓이는 팀 기능 카드. 캔버스와 함께 이동·확대된다. */
.aic-shell--arky .aic-workspace-tool-group {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border-radius: 12px;
  background: #f0f5f8;
  pointer-events: none;
  transition: inset .18s ease, width .18s ease, height .18s ease;
}
.aic-shell--arky .aic-workspace-tool-group > strong {
  position: absolute;
  top: 8px;
  left: 12px;
  color: #4d6877;
  font-size: 12px;
  font-weight: 720;
}
.aic-shell--arky .aic-workspace-tool-group.has-members > strong { top: calc(10px + var(--aic-member-offset, 40px)); }
.aic-shell--arky .aic-workspace-tool-group > small {
  position: absolute;
  top: 8px;
  right: 12px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: #66808e;
  font-size: 9px;
  font-weight: 750;
}
.aic-shell--arky .aic-workspace-tool-group.has-members > small { top: calc(8px + var(--aic-member-offset, 40px)); }
.aic-shell--arky .aic-workspace-members {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  pointer-events: auto;
}
.aic-shell--arky .aic-workspace-members button {
  min-width: 0;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 5px;
  border: 1px solid #dce5ea;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  color: #364b57;
  box-shadow: 0 1px 2px rgba(28, 47, 58, .06);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.aic-shell--arky .aic-workspace-members button:hover {
  border-color: #9bb7c5;
  background: #fff;
  box-shadow: 0 3px 9px rgba(28, 47, 58, .1);
  transform: translateY(-1px);
}
.aic-shell--arky .aic-workspace-members button:focus-visible {
  outline: 2px solid #6b8fa2;
  outline-offset: 1px;
}
.aic-shell--arky .aic-workspace-members button > strong {
  max-width: 140px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aic-shell--arky .aic-workspace-members button > svg { flex: 0 0 auto; color: #78909c; font-size: 12px; }
.aic-shell--arky .aic-workspace-members__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 50%;
  background: #e6eef2;
  color: #456575;
  font-size: 12px;
  font-weight: 760;
}
.aic-shell--arky .aic-workspace-members__avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.aic-shell--arky .aic-workspace-members__avatar i {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: #b7c0c5;
}
.aic-shell--arky .aic-workspace-members button.is-online .aic-workspace-members__avatar i { background: #2eaa72; }
.aic-shell--arky .aic-workspace-members .aic-workspace-members__voice { font-size: 13px; }
.aic-shell--arky .aic-workspace-members .aic-workspace-members__voice.is-muted { color: #c1535d; }
.aic-shell--arky .aic-workspace-members .aic-workspace-members__voice.is-speaking {
  color: #278b85;
  filter: drop-shadow(0 0 3px rgba(39, 139, 133, .28));
  animation: aic-member-speaking 1s ease-in-out infinite;
}
@keyframes aic-member-speaking { 50% { transform: scale(1.14); } }

.aic-shell--arky .aic-member-insight {
  position: relative;
  width: min(900px, 100%);
  height: min(720px, 100%);
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  border: 1px solid #d8e2e7;
  border-radius: 8px;
  background: rgba(255, 255, 255, .98);
  color: #273740;
  box-shadow: 0 14px 36px rgba(27, 45, 55, .16);
  pointer-events: auto;
}
.aic-shell--arky .aic-member-mini-overlay {
  position: absolute;
  inset: 0;
  z-index: 48;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vh, 48px) 24px clamp(20px, 7vh, 64px);
  box-sizing: border-box;
  background: rgba(244, 246, 247, .92);
  animation: aic-member-overlay-in .16s ease-out;
}
.aic-shell--arky.has-member-insight .aic-canvas-area {
  visibility: hidden;
  content-visibility: hidden;
  pointer-events: none;
}
@keyframes aic-member-overlay-in { from { opacity: 0; } }
.aic-shell--arky .aic-member-insight > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 26px;
  align-items: center;
  gap: 9px;
  padding: 15px 18px 13px;
  border-bottom: 1px solid #e8edef;
}
.aic-shell--arky .aic-member-insight__avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e8f0f3;
  color: #496d7e;
  font-size: 14px;
  font-weight: 750;
}
.aic-shell--arky .aic-member-insight__avatar img { width: 100%; height: 100%; object-fit: cover; }
.aic-shell--arky .aic-member-insight > header > div { display: grid; gap: 2px; min-width: 0; }
.aic-shell--arky .aic-member-insight > header > div strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-member-insight > header > div small { color: #87949a; font-size: 10px; }
.aic-shell--arky .aic-member-insight > header > b { color: #526db7; font-size: 20px; font-variant-numeric: tabular-nums; }
.aic-shell--arky .aic-member-insight > header > button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b969b;
  cursor: pointer;
}
.aic-shell--arky .aic-member-insight > header > button:hover { background: #f0f3f4; color: #2f3d44; }
.aic-shell--arky .aic-member-insight__score { display: grid; justify-items: end; line-height: 1; }
.aic-shell--arky .aic-member-insight__score b { color: #526db7; font-size: 22px; font-variant-numeric: tabular-nums; }
.aic-shell--arky .aic-member-insight__score span { margin-top: 4px; color: #8a969c; font-size: 9px; font-weight: 650; }
.aic-shell--arky .aic-member-insight__state { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #7b898f; font-size: 12px; }
.aic-shell--arky .aic-member-insight__state.is-error { color: #b64d57; }
.aic-shell--arky .aic-member-insight__axes { display: grid; gap: 7px; padding: 12px 0; }
.aic-shell--arky .aic-member-insight__axes > div { display: grid; grid-template-columns: 54px 1fr 28px; align-items: center; gap: 7px; }
.aic-shell--arky .aic-member-insight__axes span { color: #68777e; font-size: 10px; }
.aic-shell--arky .aic-member-insight__axes i { height: 6px; overflow: hidden; border-radius: 3px; background: #edf0f2; }
.aic-shell--arky .aic-member-insight__axes i b { display: block; height: 100%; border-radius: inherit; }
.aic-shell--arky .aic-member-insight__axes > div > strong { color: #53636b; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.aic-shell--arky .aic-member-insight__activity { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid #e8edef; }
.aic-shell--arky .aic-member-insight__activity > div { display: grid; gap: 2px; padding: 9px 6px; }
.aic-shell--arky .aic-member-insight__activity span { color: #8a969c; font-size: 9px; }
.aic-shell--arky .aic-member-insight__activity strong { color: #344850; font-size: 13px; font-variant-numeric: tabular-nums; }
.aic-shell--arky .aic-member-insight__analysis { padding-top: 11px; }
.aic-shell--arky .aic-member-insight__analysis > span { color: #71828a; font-size: 9px; font-weight: 750; }
.aic-shell--arky .aic-member-insight__analysis p { max-height: 150px; margin: 5px 0 0; overflow-y: auto; color: #485960; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.aic-shell--arky .aic-member-insight__analysis p.is-loading { color: #9aa4a8; }
.aic-shell--arky .aic-member-mini-overlay .aic-member-insight { animation: aic-member-page-in .2s cubic-bezier(.22, 1, .36, 1); }
@keyframes aic-member-page-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.aic-shell--arky .aic-member-insight__canvas {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 10px;
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  background-image: radial-gradient(circle, rgba(114, 130, 139, .18) 1px, transparent 1px);
  background-size: 18px 18px;
}
.aic-shell--arky .aic-member-insight__card {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e1e7ea;
  border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 12px rgba(32, 48, 56, .06);
}
.aic-shell--arky .aic-member-insight__card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.aic-shell--arky .aic-member-insight__card-title strong { color: #34464f; font-size: 12px; }
.aic-shell--arky .aic-member-insight__card-title > span { color: #8b979d; font-size: 9px; white-space: nowrap; }
.aic-shell--arky .aic-member-insight__period { display: flex; gap: 2px; padding: 2px; border-radius: 5px; background: #f0f3f4; }
.aic-shell--arky .aic-member-insight__period button { height: 22px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: #7b898f; font: inherit; font-size: 8px; cursor: pointer; }
.aic-shell--arky .aic-member-insight__period button.is-active { background: #fff; color: #4f65aa; box-shadow: 0 1px 3px rgba(32, 48, 56, .12); }
.aic-shell--arky .aic-member-insight__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aic-shell--arky .aic-member-insight__facts > div { display: grid; gap: 3px; padding: 10px 8px; border-radius: 5px; background: #f4f7f8; }
.aic-shell--arky .aic-member-insight__facts strong { color: #344b56; font-size: 17px; font-variant-numeric: tabular-nums; }
.aic-shell--arky .aic-member-insight__facts span { color: #839198; font-size: 9px; }
.aic-shell--arky .aic-member-insight__activity-card,
.aic-shell--arky .aic-member-insight__analysis,
.aic-shell--arky .aic-member-insight__workboard { grid-column: 1 / -1; }
.aic-shell--arky .aic-member-insight__activity-card .aic-member-insight__activity { grid-template-columns: repeat(6, 1fr); }
.aic-shell--arky .aic-member-insight__analysis { padding-top: 13px; }
.aic-shell--arky .aic-member-insight__analysis > p { display: flex; align-items: center; gap: 7px; max-height: none; margin: 0; }
.aic-shell--arky .aic-member-insight__analysis-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #aa4e58; font-size: 10px; }
.aic-shell--arky .aic-member-insight__analysis-error button { border: 1px solid #e0b8bd; border-radius: 5px; background: #fff; color: #a34751; font: inherit; cursor: pointer; }
.aic-shell--arky .aic-member-insight__insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.aic-shell--arky .aic-member-insight__insights article { padding: 9px 10px; border-left: 3px solid #9cb4bf; background: #f6f8f9; }
.aic-shell--arky .aic-member-insight__insights article:nth-child(2) { border-left-color: #4f9a83; }
.aic-shell--arky .aic-member-insight__insights article:nth-child(3) { border-left-color: #c58b35; }
.aic-shell--arky .aic-member-insight__insights article.is-action { border-left-color: #6574d8; }
.aic-shell--arky .aic-member-insight__insights article span { color: #7a888e; font-size: 8px; font-weight: 750; }
.aic-shell--arky .aic-member-insight__insights article p { max-height: none; margin: 4px 0 0; overflow: visible; color: #40525a; font-size: 11px; line-height: 1.55; }
.aic-shell--arky .aic-member-insight__evidence { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.aic-shell--arky .aic-member-insight__evidence span { padding: 5px 7px; border: 1px solid #e2e7e9; border-radius: 4px; background: #fff; color: #6f7e85; font-size: 8px; }
.aic-shell--arky .aic-member-assignment { display: grid; gap: 7px; }
.aic-shell--arky .aic-member-assignment__tools { display: flex; flex-wrap: wrap; gap: 5px; }
.aic-shell--arky .aic-member-assignment__tools button { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid #dce3e6; border-radius: 5px; background: #fff; color: #66767d; font: inherit; font-size: 10px; cursor: pointer; }
.aic-shell--arky .aic-member-assignment__tools button.is-active { border-color: #8296d4; background: #eef1fb; color: #4f65aa; }
.aic-shell--arky .aic-member-assignment > input,
.aic-shell--arky .aic-member-assignment > textarea { box-sizing: border-box; width: 100%; border: 1px solid #dce3e6; border-radius: 5px; outline: none; background: #fff; color: #34464f; font: inherit; font-size: 11px; }
.aic-shell--arky .aic-member-assignment > input { height: 36px; padding: 0 11px; }
.aic-shell--arky .aic-member-assignment > textarea { min-height: 58px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.aic-shell--arky .aic-member-assignment > input:focus,
.aic-shell--arky .aic-member-assignment > textarea:focus { border-color: #8296d4; box-shadow: 0 0 0 2px rgba(101, 116, 216, .10); }
.aic-shell--arky .aic-member-assignment__meta { display: grid; grid-template-columns: 142px 112px minmax(170px, 1fr) 104px; align-items: end; gap: 8px; }
.aic-shell--arky .aic-member-assignment__meta label { min-width: 0; display: grid; gap: 4px; color: #7c898f; font-size: 9px; }
.aic-shell--arky .aic-member-assignment__meta input[type="date"],
.aic-shell--arky .aic-member-assignment__meta select { width: 100%; height: 34px; box-sizing: border-box; border: 1px solid #dce3e6; border-radius: 5px; background: #fff; color: #43545c; font: inherit; font-size: 10px; }
.aic-shell--arky .aic-member-assignment__meta input[type="date"] { width: 100%; height: 34px; padding-inline: 8px; }
.aic-shell--arky .aic-member-assignment__meta input[type="range"] { width: 100%; accent-color: #6574d8; }
.aic-shell--arky .aic-member-assignment__meta > button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; border: 0; border-radius: 5px; background: #526db7; color: #fff; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.aic-shell--arky .aic-member-assignment__meta > button:disabled { opacity: .45; cursor: default; }
.aic-shell--arky .aic-member-assignment__error { margin: 0; color: #b24f58; font-size: 9px; }
.aic-shell--arky .aic-member-tasks { display: grid; gap: 5px; margin-top: 10px; }
.aic-shell--arky .aic-member-tasks > article { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 7px; padding: 8px; border: 1px solid #e3e8ea; border-radius: 5px; background: #fff; }
.aic-shell--arky .aic-member-tasks > article.is-done { opacity: .58; }
.aic-shell--arky .aic-member-tasks > article > button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: #eef2f4; color: #71828a; cursor: pointer; }
.aic-shell--arky .aic-member-tasks > article.is-done > button { background: #e4f2ed; color: #37856e; }
.aic-shell--arky .aic-member-tasks > article > div { display: grid; gap: 3px; min-width: 0; }
.aic-shell--arky .aic-member-tasks strong { color: #34464f; font-size: 10px; }
.aic-shell--arky .aic-member-tasks article.is-done strong { text-decoration: line-through; }
.aic-shell--arky .aic-member-tasks p { margin: 0; color: #6f7d83; font-size: 9px; line-height: 1.4; }
.aic-shell--arky .aic-member-tasks span { color: #8a969c; font-size: 8px; }
.aic-shell--arky .aic-member-tasks__empty { padding: 12px; text-align: center; }
@media (max-width: 760px) {
  .aic-shell--arky .aic-member-mini-overlay { padding: 10px; }
  .aic-shell--arky .aic-member-insight { height: 100%; }
  .aic-shell--arky .aic-member-insight__canvas { grid-template-columns: 1fr; }
  .aic-shell--arky .aic-member-insight__activity-card,
  .aic-shell--arky .aic-member-insight__analysis,
  .aic-shell--arky .aic-member-insight__workboard { grid-column: 1; }
  .aic-shell--arky .aic-member-insight__activity-card .aic-member-insight__activity { grid-template-columns: repeat(3, 1fr); }
  .aic-shell--arky .aic-member-assignment__meta { grid-template-columns: 1fr 1fr; }
  .aic-shell--arky .aic-member-insight__insights { grid-template-columns: 1fr; }
}
.aic-shell--arky .aic-workspace-tool-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 164px;
  height: 88px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 7px 20px rgba(20, 20, 25, .08);
  font: inherit;
  text-align: left;
  cursor: grab;
  touch-action: none;
}
.aic-shell--arky .aic-workspace-tool-card:hover { border-color: #aebcc4; box-shadow: 0 2px 4px rgba(20, 20, 25, .08), 0 11px 26px rgba(20, 20, 25, .12); }
.aic-shell--arky .aic-workspace-tool-card:active { cursor: grabbing; }
.aic-shell--arky .aic-workspace-tool-card:focus-visible { outline: 2px solid var(--arky-accent); outline-offset: 2px; }
.aic-shell--arky .aic-workspace-tool-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #edf3f6;
  color: #456f84;
  font-size: 19px;
}
.aic-shell--arky .aic-workspace-tool-card__copy { min-width: 0; display: grid; gap: 3px; }
.aic-shell--arky .aic-workspace-tool-card__copy small { overflow: hidden; color: #999da3; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-tool-card__copy strong { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-tool-card > b {
  align-self: start;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 9px;
  background: #e75563;
  color: #fff;
  font-size: 8px;
}
.aic-shell--arky .aic-workspace-settings-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 260px;
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 7px 20px rgba(20, 20, 25, .08);
}
.aic-shell--arky .aic-workspace-settings-card > header {
  min-height: 61px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--arky-hair);
  cursor: grab;
  touch-action: none;
}
.aic-shell--arky .aic-workspace-settings-card > header:active { cursor: grabbing; }
.aic-shell--arky .aic-workspace-settings-card > header > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #edf3f6;
  color: #456f84;
  font-size: 19px;
}
.aic-shell--arky .aic-workspace-settings-card > header > div { min-width: 0; display: grid; gap: 2px; }
.aic-shell--arky .aic-workspace-settings-card > header small { color: #999da3; font-size: 8.5px; }
.aic-shell--arky .aic-workspace-settings-card > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-settings-card__items { padding: 4px 7px 6px; }
.aic-shell--arky .aic-workspace-settings-card__items button {
  width: 100%;
  height: 43px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--arky-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.aic-shell--arky .aic-workspace-settings-card__items button:hover { background: var(--arky-chip); }
.aic-shell--arky .aic-workspace-settings-card__items button > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 6px; background: #edf3f6; color: #456f84; }
.aic-shell--arky .aic-workspace-settings-card__items button > span svg { width: 15px; height: 15px; }
.aic-shell--arky .aic-workspace-settings-card__items button > strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-settings-card__items button > svg { width: 14px; height: 14px; color: #a1a5ab; }
.aic-shell--arky .aic-workspace-calendar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 540px;
  height: 430px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 9px 24px rgba(20, 20, 25, .1);
}
.aic-shell--arky .aic-workspace-calendar__header {
  height: 55px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(84px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border-bottom: 1px solid var(--arky-hair);
  cursor: grab;
  touch-action: none;
}
.aic-shell--arky .aic-workspace-calendar__header:active { cursor: grabbing; }
.aic-shell--arky .aic-workspace-calendar__title { display: flex; min-width: 0; align-items: center; gap: 7px; font-size: 14px; }
.aic-shell--arky .aic-workspace-calendar__title svg { color: #4d7f96; font-size: 17px; }
.aic-shell--arky .aic-workspace-calendar__month { display: flex; align-items: center; gap: 5px; }
.aic-shell--arky .aic-workspace-calendar__month b { min-width: 104px; font-size: 12px; text-align: center; }
.aic-shell--arky .aic-workspace-calendar__month button,
.aic-shell--arky .aic-workspace-calendar__editor button {
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6c7078;
  font: inherit;
  cursor: pointer;
}
.aic-shell--arky .aic-workspace-calendar__month button { width: 28px; display: grid; place-items: center; padding: 0; }
.aic-shell--arky .aic-workspace-calendar__month button:hover { background: var(--arky-chip); color: var(--arky-ink); }
.aic-shell--arky .aic-workspace-calendar__hint { justify-self: end; color: #92959c; font-size: 9px; white-space: nowrap; }
.aic-shell--arky .aic-workspace-calendar__weekdays,
.aic-shell--arky .aic-workspace-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.aic-shell--arky .aic-workspace-calendar__weekdays { height: 26px; align-items: center; border-bottom: 1px solid var(--arky-hair); color: #92959c; font-size: 9px; font-weight: 700; text-align: center; }
.aic-shell--arky .aic-workspace-calendar__grid { height: 348px; grid-template-rows: repeat(6, 58px); }
.aic-shell--arky .aic-workspace-calendar__grid > span,
.aic-shell--arky .aic-workspace-calendar__grid > button {
  min-width: 0;
  overflow: hidden;
  padding: 5px 6px;
  border: 0;
  border-right: 1px solid var(--arky-hair);
  border-bottom: 1px solid var(--arky-hair);
  background: transparent;
  color: var(--arky-ink);
  font: inherit;
  text-align: left;
}
.aic-shell--arky .aic-workspace-calendar__grid > :nth-child(7n) { border-right: 0; }
.aic-shell--arky .aic-workspace-calendar__grid > button { cursor: pointer; }
.aic-shell--arky .aic-workspace-calendar__grid > button:hover { background: var(--arky-chip); }
.aic-shell--arky .aic-workspace-calendar__grid > button.is-selected { background: #e9f2f7; box-shadow: inset 0 0 0 1px #86afc2; }
.aic-shell--arky .aic-workspace-calendar__grid > button > b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; }
.aic-shell--arky .aic-workspace-calendar__grid > button.is-today > b { background: #4d7f96; color: #fff; }
.aic-shell--arky .aic-workspace-calendar__grid > button > small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  padding-left: 6px;
  color: #696d75;
  font-size: 8px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 3px 0 var(--event-color);
}
.aic-shell--arky .aic-workspace-calendar__editor {
  position: absolute;
  top: 82px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  width: 288px;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  box-shadow: 0 12px 34px rgba(20, 20, 25, .2);
}
.aic-shell--arky .aic-workspace-calendar__editor > header { display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 11px; border-bottom: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-workspace-calendar__editor > header strong { font-size: 11.5px; }
.aic-shell--arky .aic-workspace-calendar__editor > header button { width: 26px; padding: 0; display: grid; place-items: center; }
.aic-shell--arky .aic-workspace-calendar__events { overflow-y: auto; padding: 6px; }
.aic-shell--arky .aic-workspace-calendar__events > div { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 2px; }
.aic-shell--arky .aic-workspace-calendar__events > div > button:first-child { min-width: 0; height: auto; min-height: 30px; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 6px; text-align: left; }
.aic-shell--arky .aic-workspace-calendar__events > div > button:first-child i { width: 7px; height: 7px; border-radius: 50%; background: var(--event-color); }
.aic-shell--arky .aic-workspace-calendar__events > div > button:first-child span { min-width: 0; display: grid; gap: 1px; }
/* 제목 아래 한 줄에 시간과 장소를 적는다 — 날짜를 눌렀을 때 알고 싶은 게 그거다. */
.aic-shell--arky .aic-workspace-calendar__events > div > button:first-child strong { overflow: hidden; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-calendar__events > div > button:first-child small { overflow: hidden; color: #8a8d94; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-workspace-calendar__events > div > button:last-child { width: 28px; padding: 0; color: #b85a64; }
.aic-shell--arky .aic-workspace-calendar__events p { margin: 10px; color: #92959c; font-size: 10.5px; text-align: center; }
.aic-shell--arky .aic-workspace-calendar__editor form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; padding: 6px; border-top: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-workspace-calendar__editor form input:first-of-type { grid-column: 1 / -1; }
.aic-shell--arky .aic-workspace-calendar__editor input { min-width: 0; height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--arky-hair); border-radius: 6px; background: var(--arky-paper); color: var(--arky-ink); font: inherit; font-size: 10.5px; outline: 0; }
.aic-shell--arky .aic-workspace-calendar__editor input:focus { border-color: #699aae; box-shadow: 0 0 0 2px rgba(80, 139, 164, .14); }
.aic-shell--arky .aic-workspace-calendar__editor form button { width: auto; height: 30px; padding: 0 7px; background: #4d7f96; color: #fff; font-size: 10px; font-weight: 700; }
.aic-shell--arky .aic-workspace-calendar__editor form button:disabled { opacity: .45; cursor: default; }

.aic-shell--arky .aic-canvas-todos {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 760px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 9px 24px rgba(20, 20, 25, .1);
}
.aic-shell--arky .aic-canvas-todos__header {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid var(--arky-hair);
  cursor: grab;
  touch-action: none;
}
.aic-shell--arky .aic-canvas-todos__header:active { cursor: grabbing; }
.aic-shell--arky .aic-canvas-todos__header > span,
.aic-shell--arky .aic-canvas-todos__header > div { display: flex; align-items: center; gap: 7px; }
.aic-shell--arky .aic-canvas-todos__header > span > svg { color: #596f7c; font-size: 17px; }
.aic-shell--arky .aic-canvas-todos__header > span > strong { font-size: 14px; }
.aic-shell--arky .aic-canvas-todos__header > span > small { min-width: 19px; padding: 2px 5px; border-radius: 9px; background: var(--arky-chip); color: #747981; font-size: 9px; text-align: center; }
.aic-shell--arky .aic-canvas-todos__header > div button {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--arky-hair);
  border-radius: 6px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  font: inherit;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
}
.aic-shell--arky .aic-canvas-todos__header > div button:hover { background: var(--arky-chip); }
.aic-shell--arky .aic-canvas-todos__header > div button:disabled { opacity: .45; cursor: default; }
.aic-shell--arky .aic-canvas-todos__body { height: calc(100% - 55px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(245px, .9fr); }
.aic-shell--arky .aic-canvas-todos__list { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 12px; border-right: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-canvas-todos__list > form { height: 34px; display: grid; grid-template-columns: minmax(0, 1fr) 34px; margin-bottom: 10px; }
.aic-shell--arky .aic-canvas-todos__list > form input { min-width: 0; padding: 0 10px; border: 1px solid var(--arky-hair); border-right: 0; border-radius: 6px 0 0 6px; background: var(--arky-paper); color: var(--arky-ink); font: inherit; font-size: 10.5px; outline: 0; }
.aic-shell--arky .aic-canvas-todos__list > form input:focus { border-color: #758894; box-shadow: 0 0 0 2px rgba(91, 117, 132, .12); }
.aic-shell--arky .aic-canvas-todos__list > form button { display: grid; place-items: center; padding: 0; border: 1px solid #657c89; border-radius: 0 6px 6px 0; background: #657c89; color: #fff; cursor: pointer; }
.aic-shell--arky .aic-canvas-todos__list > form button:disabled { opacity: .45; cursor: default; }
.aic-shell--arky .aic-canvas-todos__list > ul { min-height: 0; flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.aic-shell--arky .aic-canvas-todos__list > ul li { min-height: 49px; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto 25px; align-items: center; gap: 6px; padding: 6px 3px; border-bottom: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-canvas-todos__list > ul li.is-done { opacity: .48; }
.aic-shell--arky .aic-canvas-todos__list > ul li.is-pending { animation: aic-todo-pending 1s ease-in-out infinite alternate; }
.aic-shell--arky .aic-canvas-todos__list > ul li.is-done strong { text-decoration: line-through; }
.aic-shell--arky .aic-canvas-todos__list li > span { min-width: 0; }
.aic-shell--arky .aic-canvas-todos__list li > span strong,
.aic-shell--arky .aic-canvas-todos__list li > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-canvas-todos__list li > span strong { font-size: 10.5px; }
.aic-shell--arky .aic-canvas-todos__list li > span small { margin-top: 3px; color: #92969d; font-size: 8px; }
.aic-shell--arky .aic-canvas-todos__check,
.aic-shell--arky .aic-canvas-todos__delete { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #858b93; cursor: pointer; }
.aic-shell--arky .aic-canvas-todos__check:hover { background: var(--arky-chip); color: #506873; }
.aic-shell--arky .aic-canvas-todos__delete { opacity: 0; }
.aic-shell--arky .aic-canvas-todos__list li:hover .aic-canvas-todos__delete { opacity: 1; }
.aic-shell--arky .aic-canvas-todos__delete:hover { background: #fff0f1; color: #b44953; }
.aic-shell--arky .aic-canvas-todos__list li > b { min-width: 25px; padding: 3px 5px; border-radius: 4px; background: #eef0f2; color: #777d85; font-size: 8px; text-align: center; }
.aic-shell--arky .aic-canvas-todos__list li > b.is-high { background: #f6e5e7; color: #a6525b; }
.aic-shell--arky .aic-canvas-todos__list li > b.is-medium { background: #f5efd9; color: #8c7439; }
.aic-shell--arky .aic-canvas-todos__list li > b.is-low { background: #e5efec; color: #52786e; }
.aic-shell--arky .aic-canvas-todos__empty { margin: 58px 0; color: #92969d; font-size: 10px; text-align: center; }
.aic-shell--arky .aic-canvas-todos__insight { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 12px; overflow: hidden; background: color-mix(in srgb, var(--arky-chip) 28%, var(--arky-paper)); }
.aic-shell--arky .aic-canvas-todos__insight > section + section { margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-canvas-todos__insight section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.aic-shell--arky .aic-canvas-todos__insight section > header strong { font-size: 11px; }
.aic-shell--arky .aic-canvas-todos__insight section > header small { color: #92969d; font-size: 8px; }
.aic-shell--arky .aic-canvas-todos__ranking { display: grid; gap: 5px; margin: 0 0 9px; padding: 0; list-style: none; }
.aic-shell--arky .aic-canvas-todos__ranking li { min-width: 0; display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 7px; }
.aic-shell--arky .aic-canvas-todos__ranking li > b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #e2ece9; color: #416f65; font-size: 8px; }
.aic-shell--arky .aic-canvas-todos__ranking li > span { min-width: 0; }
.aic-shell--arky .aic-canvas-todos__ranking strong,
.aic-shell--arky .aic-canvas-todos__ranking small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-canvas-todos__ranking strong { font-size: 9px; }
.aic-shell--arky .aic-canvas-todos__ranking small { margin-top: 1px; color: #92969d; font-size: 7.5px; }
.aic-shell--arky .aic-canvas-todos__priority-empty { margin: 7px 0 10px; color: #92969d; font-size: 8.5px; line-height: 1.45; }
.aic-shell--arky .aic-canvas-todos__quadrants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.aic-shell--arky .aic-canvas-todos__quadrants > div { min-width: 0; min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 7px; border: 1px solid var(--arky-hair); border-radius: 5px; background: var(--arky-paper); }
.aic-shell--arky .aic-canvas-todos__quadrants span { min-width: 0; }
.aic-shell--arky .aic-canvas-todos__quadrants strong,
.aic-shell--arky .aic-canvas-todos__quadrants small { display: block; }
.aic-shell--arky .aic-canvas-todos__quadrants strong { font-size: 8.5px; }
.aic-shell--arky .aic-canvas-todos__quadrants small { margin-top: 2px; overflow: hidden; color: #94989f; font-size: 6.8px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-canvas-todos__quadrants > div > b { font-size: 14px; }
.aic-shell--arky .aic-canvas-todos__quadrants .is-now { border-color: #b9d9d0; background: #edf7f4; color: #356d60; }
.aic-shell--arky .aic-canvas-todos__quadrants .is-plan { border-color: #d9caad; background: #faf5e9; color: #806937; }
.aic-shell--arky .aic-canvas-todos__quadrants .is-batch { border-color: #c9d9e3; background: #f0f6f9; color: #4d7186; }
.aic-shell--arky .aic-canvas-todos__quadrants .is-later { color: #858a91; }
.aic-shell--arky .aic-canvas-todos__unscored { margin: 7px 0 0; color: #8b9097; font-size: 7.5px; text-align: right; }
.aic-shell--arky .aic-canvas-todos__suggestions > p { margin: 18px 3px; color: #92969d; font-size: 9px; line-height: 1.55; }
.aic-shell--arky .aic-canvas-todos__suggestions { min-height: 0; display: flex; flex-direction: column; }
.aic-shell--arky .aic-canvas-todos__suggestions ul { min-height: 0; flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.aic-shell--arky .aic-canvas-todos__suggestions li { display: grid; grid-template-columns: minmax(0, 1fr) 25px; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-canvas-todos__suggestions li span { min-width: 0; }
.aic-shell--arky .aic-canvas-todos__suggestions li strong,
.aic-shell--arky .aic-canvas-todos__suggestions li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-canvas-todos__suggestions li strong { font-size: 9.5px; }
.aic-shell--arky .aic-canvas-todos__suggestions li small { margin-top: 2px; color: #94989f; font-size: 7.5px; }
.aic-shell--arky .aic-canvas-todos__suggestions li button { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 1px solid var(--arky-hair); border-radius: 5px; background: var(--arky-paper); color: #647b87; cursor: pointer; }
.aic-shell--arky .aic-canvas-todos__suggestions li button:disabled { opacity: .55; cursor: default; }
.aic-shell--arky .aic-canvas-todos .is-spinning { animation: aic-todo-spin .8s linear infinite; }
.aic-shell--arky .aic-canvas-todos__error { position: absolute; top: 55px; right: 0; left: 0; z-index: 3; min-height: 30px; margin: 0; padding: 7px 12px; box-sizing: border-box; background: #fff0f1; color: #a43d48; font-size: 9px; box-shadow: 0 2px 8px rgba(90, 32, 40, .12); }
.aic-shell--arky .aic-canvas-todos__notice { position: absolute; top: 55px; right: 0; left: 0; z-index: 3; min-height: 30px; margin: 0; padding: 7px 12px; box-sizing: border-box; background: #eaf4f0; color: #3f6f63; font-size: 9px; box-shadow: 0 2px 8px rgba(38, 86, 74, .1); }
@keyframes aic-todo-pending { from { opacity: .52; } to { opacity: .9; } }
@keyframes aic-todo-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__list li > b { background: #383b41; }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__error { background: #49292e; color: #ffc0c6; }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__notice { background: #203d36; color: #b7e7da; }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__quadrants .is-now { border-color: #31564d; background: #203d36; color: #b7e7da; }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__quadrants .is-plan { border-color: #5b5138; background: #3d3727; color: #e6d29f; }
[data-theme="dark"] .aic-shell--arky .aic-canvas-todos__quadrants .is-batch { border-color: #344f5e; background: #263b46; color: #b9d8e8; }

.aic-shell--arky .aic-team-schedule {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 1080px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--arky-hair);
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 9px 24px rgba(20, 20, 25, .1);
}
.aic-shell--arky .aic-team-schedule:focus { outline: none; }

.aic-shell--arky .aic-team-schedule__header {
  height: 55px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 0 13px;
  border-bottom: 1px solid var(--arky-hair);
  cursor: grab;
  touch-action: none;
}

.aic-shell--arky .aic-team-schedule__header:active { cursor: grabbing; }
.aic-shell--arky .aic-team-schedule__title,
.aic-shell--arky .aic-team-schedule__actions,
.aic-shell--arky .aic-team-schedule__mode { display: flex; align-items: center; }
.aic-shell--arky .aic-team-schedule__title { min-width: 0; gap: 8px; font-size: 14px; }
.aic-shell--arky .aic-team-schedule__title > svg { color: #4d7f96; font-size: 17px; }
.aic-shell--arky .aic-team-schedule__title small { padding: 2px 6px; border-radius: 9px; background: var(--arky-chip); color: #7c8088; font-size: 9px; }
.aic-shell--arky .aic-team-schedule__mode { justify-content: center; gap: 2px; padding: 3px; border-radius: 7px; background: var(--arky-chip); }
.aic-shell--arky .aic-team-schedule__mode > button { height: 25px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; color: #858991; font: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer; }
.aic-shell--arky .aic-team-schedule__mode > button.is-active { background: var(--arky-paper); color: var(--arky-ink); box-shadow: 0 1px 3px rgba(20, 20, 25, .1); }
.aic-shell--arky .aic-team-schedule__week { display: flex; align-items: center; gap: 2px; margin-left: 5px; padding-left: 5px; border-left: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-team-schedule__week button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #777b83; cursor: pointer; }
.aic-shell--arky .aic-team-schedule__week button:hover { background: var(--arky-paper); }
.aic-shell--arky .aic-team-schedule__week b { min-width: 74px; font-size: 8.5px; text-align: center; }
.aic-shell--arky .aic-team-schedule__actions { gap: 6px; }
.aic-shell--arky .aic-team-schedule__actions button,
.aic-shell--arky .aic-team-schedule__editor button {
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--arky-hair);
  border-radius: 6px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.aic-shell--arky .aic-team-schedule__actions button.is-primary,
.aic-shell--arky .aic-team-schedule__editor button { border-color: #4d7f96; background: #4d7f96; color: #fff; }
.aic-shell--arky .aic-team-schedule__actions button:disabled,
.aic-shell--arky .aic-team-schedule__editor button:disabled { opacity: .45; cursor: default; }

.aic-shell--arky .aic-team-schedule__members {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-sizing: border-box;
  overflow-x: auto;
  padding: 6px 12px;
  border-bottom: 1px solid var(--arky-hair);
  background: color-mix(in srgb, var(--arky-chip) 42%, var(--arky-paper));
  scrollbar-width: thin;
}
.aic-shell--arky .aic-team-schedule__members button {
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #777b83;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.aic-shell--arky .aic-team-schedule__members button:hover { background: color-mix(in srgb, var(--arky-paper) 74%, transparent); color: var(--arky-ink); }
.aic-shell--arky .aic-team-schedule__members button.is-active { border-color: var(--arky-hair); background: var(--arky-paper); color: var(--arky-ink); box-shadow: 0 1px 3px rgba(20, 20, 25, .08); }
.aic-shell--arky .aic-team-schedule__members button i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e2e4e7; color: #626871; font-size: 8px; font-style: normal; }
.aic-shell--arky .aic-team-schedule__members button small { padding: 1px 5px; border-radius: 7px; background: var(--arky-chip); color: #8b8f96; font-size: 8px; }
.aic-shell--arky .aic-team-schedule__members button:first-child small { min-width: 14px; padding: 1px 4px; text-align: center; }

.aic-shell--arky .aic-team-schedule__paste-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: start center;
  padding-top: 86px;
  background: rgba(245, 246, 247, .76);
  backdrop-filter: blur(2px);
}
.aic-shell--arky .aic-team-schedule__paste-target {
  position: relative;
  width: min(440px, calc(100% - 48px));
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  border: 2px dashed #9ba1a9;
  border-radius: 8px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  box-shadow: 0 14px 36px rgba(20, 20, 25, .16);
  outline: 0;
}
.aic-shell--arky .aic-team-schedule__paste-target:focus { border-color: #5e7887; box-shadow: 0 0 0 3px rgba(77, 127, 150, .16), 0 14px 36px rgba(20, 20, 25, .16); }
.aic-shell--arky .aic-team-schedule__paste-target > svg { color: #6f7780; font-size: 28px; }
.aic-shell--arky .aic-team-schedule__paste-target > strong { font-size: 14px; }
.aic-shell--arky .aic-team-schedule__paste-target > span { color: #858991; font-size: 11px; }
.aic-shell--arky .aic-team-schedule__paste-target kbd { padding: 2px 6px; border: 1px solid var(--arky-hair); border-radius: 4px; background: var(--arky-chip); font: inherit; font-weight: 700; }
.aic-shell--arky .aic-team-schedule__paste-target > button { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #858991; cursor: pointer; }
.aic-shell--arky .aic-team-schedule__paste-target > button:hover { background: var(--arky-chip); color: var(--arky-ink); }
[data-theme="dark"] .aic-shell--arky .aic-team-schedule__paste-backdrop { background: rgba(25, 27, 31, .78); }

.aic-shell--arky .aic-team-schedule__editor {
  height: 74px;
  display: grid;
  grid-template-columns: 76px 90px 10px 90px minmax(180px, 1.2fr) minmax(150px, 1fr) 54px;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 0 13px;
  border-bottom: 1px solid var(--arky-hair);
  background: color-mix(in srgb, var(--arky-chip) 55%, var(--arky-paper));
}
.aic-shell--arky .aic-team-schedule__editor input,
.aic-shell--arky .aic-team-schedule__editor select {
  min-width: 0;
  height: 32px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--arky-hair);
  border-radius: 6px;
  background: var(--arky-paper);
  color: var(--arky-ink);
  font: inherit;
  font-size: 10.5px;
  outline: 0;
}
.aic-shell--arky .aic-team-schedule__editor input:focus,
.aic-shell--arky .aic-team-schedule__editor select:focus { border-color: #699aae; box-shadow: 0 0 0 2px rgba(80, 139, 164, .14); }
.aic-shell--arky .aic-team-schedule__editor > span { color: #9699a0; text-align: center; }

.aic-shell--arky .aic-team-schedule__table { padding: 10px 12px; }
.aic-shell--arky .aic-team-schedule__timetable { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--arky-hair); border-radius: 8px; background: var(--arky-paper); }
.aic-shell--arky .aic-team-schedule__timetable:last-child { margin-bottom: 0; }
.aic-shell--arky .aic-team-schedule__member-title { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-team-schedule__member-title > span { min-width: 0; display: flex; align-items: center; gap: 7px; }
.aic-shell--arky .aic-team-schedule__member-title i { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--member-color) 18%, var(--arky-paper)); color: var(--member-color); font-size: 9px; font-style: normal; font-weight: 800; }
.aic-shell--arky .aic-team-schedule__member-title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.aic-shell--arky .aic-team-schedule__member-title small { padding: 2px 6px; border-radius: 8px; background: var(--arky-chip); color: #777b83; font-size: 8px; }
.aic-shell--arky .aic-team-schedule__member-title em { color: #999ca3; font-size: 8.5px; font-style: normal; }
.aic-shell--arky .aic-team-schedule__days-head { height: 29px; display: grid; grid-template-columns: 42px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--arky-hair); color: #858991; font-size: 9px; text-align: center; }
.aic-shell--arky .aic-team-schedule__days-head > * { display: grid; place-items: center; border-right: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-team-schedule__days-head > *:last-child { border-right: 0; }
.aic-shell--arky .aic-team-schedule__days-head b { grid-auto-flow: column; gap: 4px; }
.aic-shell--arky .aic-team-schedule__days-head b small { color: #a6a9af; font-size: 7px; font-weight: 600; }
.aic-shell--arky .aic-team-schedule__vertical-grid { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
.aic-shell--arky .aic-team-schedule__hours { position: relative; border-right: 1px solid var(--arky-hair); }
.aic-shell--arky .aic-team-schedule__hours span { position: absolute; right: 6px; color: #858991; font-size: 8px; line-height: 1; transform: translateY(3px); }
.aic-shell--arky .aic-team-schedule__days-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); user-select: none; touch-action: none; }
.aic-shell--arky .aic-team-schedule__days-grid.is-editable { cursor: crosshair; }
.aic-shell--arky .aic-team-schedule__days-grid.is-selecting { cursor: cell; }
.aic-shell--arky .aic-team-schedule__day-column { position: relative; min-width: 0; border-right: 1px solid var(--arky-hair); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(4.166666% - 1px), color-mix(in srgb, var(--arky-hair) 82%, transparent) calc(4.166666% - 1px), color-mix(in srgb, var(--arky-hair) 82%, transparent) 4.166666%); }
.aic-shell--arky .aic-team-schedule__day-column:last-child { border-right: 0; }
.aic-shell--arky .aic-team-schedule__day-column.is-editable:hover { background-color: rgba(92, 98, 107, .035); }
.aic-shell--arky .aic-team-schedule__day-column.is-saving { cursor: progress; }
.aic-shell--arky .aic-team-schedule__slot { position: absolute; right: 3px; left: 3px; z-index: 1; min-height: 18px; box-sizing: border-box; overflow: hidden; border: 1px solid #858b94; border-radius: 4px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .11) 0 5px, transparent 5px 10px), #9399a2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(20, 20, 25, .1); pointer-events: none; }
.aic-shell--arky .aic-team-schedule__selection { position: absolute; right: 2px; left: 2px; z-index: 2; min-height: 24px; box-sizing: border-box; border-radius: 4px; pointer-events: none; }
.aic-shell--arky .aic-team-schedule__selection.is-add { border: 1px solid #6f7680; background: rgba(112, 119, 128, .64); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.aic-shell--arky .aic-team-schedule__selection.is-remove { border: 1px dashed #626972; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .7) 0 5px, rgba(151, 157, 165, .2) 5px 10px); }
.aic-shell--arky .aic-team-schedule__empty { margin: 26px 0; color: #92959c; font-size: 11px; text-align: center; }
.aic-shell--arky .aic-team-schedule__error { height: 28px; margin: 0; padding: 5px 13px; box-sizing: border-box; background: #fff0f1; color: #a43d48; font-size: 10px; }

[data-theme="dark"] .aic-shell--arky .aic-team-schedule__slot { border-color: #777c84; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 5px, transparent 5px 10px), #5d626a; }
[data-theme="dark"] .aic-shell--arky .aic-team-schedule__selection.is-add { border-color: #a4a9b0; background: rgba(139, 145, 154, .68); }
[data-theme="dark"] .aic-shell--arky .aic-team-schedule__selection.is-remove { border-color: #c3c6cb; background: repeating-linear-gradient(135deg, rgba(42, 44, 49, .72) 0 5px, rgba(180, 184, 191, .18) 5px 10px); }
[data-theme="dark"] .aic-shell--arky .aic-team-schedule__member-title i { background: color-mix(in srgb, var(--member-color) 22%, #24262b); }
[data-theme="dark"] .aic-shell--arky .aic-team-schedule__error { background: #49292e; color: #ffc0c6; }

/* 마커 도구 — 독 바로 위에서 색과 굵기를 바꾼다. */
.aic-shell--arky .aic-drawing-tools {
  position: absolute;
  left: 50%;
  bottom: 62px;
  z-index: 34;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 7px 5px 10px;
  border: 1px solid rgba(25, 25, 29, .07);
  border-radius: 11px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .09), 0 12px 34px rgba(20, 20, 25, .15);
}
.aic-shell--arky .aic-drawing-modes { display: flex; align-items: center; gap: 2px; }
.aic-shell--arky .aic-drawing-modes button {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #66666d;
  cursor: pointer;
  white-space: nowrap;
}
.aic-shell--arky .aic-drawing-modes button span { display: none; font-size: 11px; font-weight: 650; }
.aic-shell--arky .aic-drawing-modes button.is-active { background: #ede9fb; color: #5f4dad; }
.aic-shell--arky .aic-drawing-modes button.is-active span { display: inline; }
.aic-shell--arky .aic-drawing-stabilization {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #66666d;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.aic-shell--arky .aic-drawing-stabilization input {
  width: 62px;
  height: 18px;
  margin: 0;
  accent-color: #7257c8;
  cursor: pointer;
}
.aic-shell--arky .aic-drawing-stabilization:has(input:disabled) { opacity: .38; }
.aic-shell--arky .aic-drawing-stabilization input:disabled { cursor: default; }
.aic-shell--arky .aic-drawing-stabilization output {
  min-width: 18px;
  color: #8b8b91;
  font-variant-numeric: tabular-nums;
}
.aic-shell--arky .aic-drawing-colors,
.aic-shell--arky .aic-drawing-widths { display: flex; align-items: center; gap: 4px; }
.aic-shell--arky .aic-drawing-colors button {
  width: 19px;
  height: 19px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  outline: 1px solid #d5d5d2;
  background: var(--marker-color);
  cursor: pointer;
}
.aic-shell--arky .aic-drawing-colors button.is-active {
  outline: 2px solid #7257c8;
  outline-offset: 1px;
}
.aic-shell--arky .aic-drawing-colors button:disabled { opacity: .25; cursor: default; }
.aic-shell--arky .aic-drawing-tools__sep { width: 1px; height: 20px; background: #e8e8e6; }
.aic-shell--arky .aic-drawing-widths button,
.aic-shell--arky .aic-drawing-clear {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #77777e;
  cursor: pointer;
}
.aic-shell--arky .aic-drawing-widths button:hover,
.aic-shell--arky .aic-drawing-clear:hover:not(:disabled) { background: #f2f2f0; color: #25262b; }
.aic-shell--arky .aic-drawing-widths button.is-active { background: #ede9fb; }
.aic-shell--arky .aic-drawing-widths button > span {
  width: 17px;
  max-height: 10px;
  border-radius: 999px;
  background: currentColor;
}
.aic-shell--arky .aic-drawing-clear:disabled { opacity: .3; cursor: default; }

/* 선 편집 바 — 독 위에 떠 있는 작은 팝오버 */
.aic-shell--arky .aic-arky-edgebar {
  position: absolute;
  left: 50%;
  bottom: 62px;
  z-index: 33;
  transform: translateX(-50%);
}
.aic-shell--arky .aic-arky-edgebar .aic-edge-tools {
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .09), 0 12px 34px rgba(20, 20, 25, .15);
}

/* 배율 — 독 안에 그대로 얹혀 하나의 덩어리로 같이 움직인다.
   따로 떠 있지 않으므로 위치 지정도, 자체 배경·그림자도 없다. */
.aic-shell--arky .aic-dock .aic-zoom-controls--arky {
  position: static;
  transform: none;
  grid-template-columns: 30px 44px 30px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.aic-shell--arky .aic-dock .aic-zoom-controls--arky button {
  width: auto;
  height: 34px;
  border-right: 0;
  border-radius: 9px;
  color: #6b6b72;
  font-size: 14px;
}
.aic-shell--arky .aic-dock .aic-zoom-controls--arky button:hover:not(:disabled) { background: #f2f2f0; color: var(--arky-ink); }
.aic-shell--arky .aic-dock .aic-zoom-controls--arky button:disabled { opacity: .34; }
.aic-shell--arky .aic-dock .aic-zoom-controls--arky .aic-zoom-controls__value { font-size: 11.5px; font-weight: 650; }

.aic-shell--arky .aic-empty__mark { border-color: #e4e4e1; }

[data-theme="dark"] .aic-shell--arky {
  --arky-ink: #f3f3f1;
  --arky-sub: #9a9aa2;
  --arky-hair: #35373d;
  --arky-paper: #24262b;
  --arky-ground: #191b20;
  --arky-chip: #2f3138;
  background: var(--arky-ground);
}
[data-theme="dark"] .aic-shell--arky .aic-arky-project,
[data-theme="dark"] .aic-shell--arky .aic-arky-pill,
[data-theme="dark"] .aic-shell--arky .aic-arky-icon { background: var(--arky-paper); color: #e2e2e5; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
/* 묶인 칩은 다크에서도 바깥 판만 배경을 갖는다. */
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster { background: var(--arky-paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .34); }
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster > .aic-arky-project,
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-pill,
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-icon,
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-outline-toggle { background: transparent; box-shadow: none; }
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-pill:hover:not(:disabled),
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-icon:hover:not(:disabled),
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-outline-toggle:hover { background: #32343b; }
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster .aic-arky-pill[aria-pressed="true"] { background: #393350; box-shadow: none; }
[data-theme="dark"] .aic-shell--arky .aic-arky-cluster > * + *::before { background: #3a3c43; }
[data-theme="dark"] .aic-shell--arky .aic-dock .aic-zoom-controls--arky button { color: #b6b7bd; }
[data-theme="dark"] .aic-shell--arky .aic-dock .aic-zoom-controls--arky button:hover:not(:disabled) { background: #32343b; color: var(--arky-ink); }
[data-theme="dark"] .aic-shell--arky .aic-arky-menu { background: var(--arky-paper); box-shadow: 0 16px 44px rgba(0, 0, 0, .45); }
[data-theme="dark"] .aic-shell--arky .aic-arky-menu button { color: #dcdce0; }
[data-theme="dark"] .aic-shell--arky .aic-arky-menu button:hover:not(:disabled) { background: #31333a; }
[data-theme="dark"] .aic-shell--arky .aic-arky-tabs { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .aic-shell--arky .aic-arky-tabs button.is-active { background: var(--arky-paper); color: var(--arky-ink); }
[data-theme="dark"] .aic-shell--arky .aic-arky-tabs button:hover { background: rgba(255, 255, 255, .06); color: #d6d6da; }
[data-theme="dark"] .aic-shell--arky .aic-dock,
[data-theme="dark"] .aic-shell--arky .aic-arky-edgebar .aic-edge-tools,
[data-theme="dark"] .aic-shell--arky .aic-drawing-tools { background: rgba(36, 38, 43, .96); box-shadow: 0 12px 34px rgba(0, 0, 0, .48); }
[data-theme="dark"] .aic-shell--arky .aic-workspace-tool-group { background: #20282d; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-tool-group > strong { color: #9db4c0; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-tool-group > small { background: #2e373c; color: #aec0c9; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members button { border-color: #39464c; background: #2a3237; color: #d9e0e3; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members button:hover { border-color: #607b88; background: #303a3f; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members__avatar { background: #39474d; color: #d7e3e8; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight { border-color: #414b50; background: rgba(38, 42, 46, .98); color: #e2e6e8; box-shadow: 0 16px 40px rgba(0, 0, 0, .42); }
[data-theme="dark"] .aic-shell--arky .aic-member-insight > header { border-color: #42494d; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight > header > button:hover { background: #343a3e; color: #eef1f2; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__avatar { background: #39474d; color: #d7e3e8; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__axes i { background: #3a4145; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__axes > div > strong,
[data-theme="dark"] .aic-shell--arky .aic-member-insight__activity strong { color: #d5dcdf; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__activity { border-color: #42494d; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__analysis p { color: #c2cacc; }
[data-theme="dark"] .aic-shell--arky .aic-member-mini-overlay { background: rgba(20, 22, 25, .55); }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__canvas { background-image: radial-gradient(circle, rgba(192, 202, 207, .14) 1px, transparent 1px); }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__card { border-color: #414a4f; background: rgba(43, 48, 52, .97); box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__card-title strong,
[data-theme="dark"] .aic-shell--arky .aic-member-insight__facts strong,
[data-theme="dark"] .aic-shell--arky .aic-member-tasks strong { color: #e0e6e8; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__facts > div,
[data-theme="dark"] .aic-shell--arky .aic-member-insight__insights article { background: #343b3f; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__period { background: #343b3f; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__period button.is-active { background: #4a5358; color: #e0e5f4; }
[data-theme="dark"] .aic-shell--arky .aic-member-insight__evidence span,
[data-theme="dark"] .aic-shell--arky .aic-member-assignment__tools button,
[data-theme="dark"] .aic-shell--arky .aic-member-assignment > input,
[data-theme="dark"] .aic-shell--arky .aic-member-assignment > textarea,
[data-theme="dark"] .aic-shell--arky .aic-member-assignment__meta input[type="date"],
[data-theme="dark"] .aic-shell--arky .aic-member-assignment__meta select,
[data-theme="dark"] .aic-shell--arky .aic-member-tasks > article { border-color: #465055; background: #30363a; color: #dbe2e5; }
[data-theme="dark"] .aic-shell--arky .aic-member-assignment__tools button.is-active { border-color: #7183bd; background: #3b4259; color: #d7ddf4; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members button { border-color: #3a454b; background: #292f33; color: #d6e0e5; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members button:hover { border-color: #607985; background: #30383d; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members button > svg { color: #91a8b3; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members__avatar { background: #34434a; color: #d6e0e5; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-members__avatar i { border-color: #292f33; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-tool-card__icon { background: #2b373d; color: #9fc4d5; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-settings-card > header > span,
[data-theme="dark"] .aic-shell--arky .aic-workspace-settings-card__items button > span { background: #2b373d; color: #9fc4d5; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-calendar__grid > button > small { color: #b9bbc1; }
[data-theme="dark"] .aic-shell--arky .aic-workspace-calendar__grid > button.is-selected { background: #283a43; box-shadow: inset 0 0 0 1px #567f91; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-modes button { color: #c5c6cb; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-modes button.is-active { background: #393350; color: #d5caf8; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-stabilization { color: #c5c6cb; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-stabilization output { color: #999ba2; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-tools__sep { background: #3a3c43; }
[data-theme="dark"] .aic-shell--arky .aic-drawing-widths button,
[data-theme="dark"] .aic-shell--arky .aic-drawing-clear { color: #b6b7bd; }
[data-theme="dark"] .aic-shell--arky .aic-dock button { color: #b6b7bd; }
[data-theme="dark"] .aic-shell--arky .aic-dock button:hover:not(:disabled) { background: #32343b; color: var(--arky-ink); }
[data-theme="dark"] .aic-shell--arky .aic-dock button.is-active { background: #393350; color: #cfc4f7; }
[data-theme="dark"] .aic-shell--arky .aic-dock__sep { background: #3a3c43; }
[data-theme="dark"] .aic-shell--arky .aic-card { background: var(--arky-paper); border-color: var(--arky-hair); }
[data-theme="dark"] .aic-shell--arky .aic-shell-row__field { color: #c9cad0; }
[data-theme="dark"] .aic-shell--arky .aic-shell-row.is-selected { background: var(--arky-paper); }
[data-theme="dark"] .aic-shell--arky .aic-shell-row--title .aic-shell-row__field { color: var(--arky-ink); }
[data-theme="dark"] .aic-shell--arky .aic-shell-row--body::before { background: #5d5f68; }
[data-theme="dark"] .aic-shell--arky .aic-group__label { color: #fff; }
[data-theme="dark"] .aic-shell--arky .aic-group > small { background: var(--arky-paper); }
[data-theme="dark"] .aic-shell--arky .aic-viewport { background-color: var(--arky-ground); background-image: none; }
[data-theme="dark"] .aic-shell--arky .aic-card__port,
[data-theme="dark"] .aic-shell--arky .aic-group__port { border-color: var(--arky-ground); }

@media (max-width: 860px) {
  .aic-shell--arky .aic-arky-bar { gap: 6px;
    left: var(--arky-bar-left, 8px); padding: 8px var(--arky-bar-right, 8px) 8px 0; }
  /* 제목과 오른쪽 단추(Canvas·저장)를 굳이 두 줄로 나누면 오른쪽 줄이 캔버스
     위로 한 칸 더 내려앉는다. 한 줄에 두고 남는 폭은 제목이 가져간다. */
  .aic-shell--arky .aic-arky-bar { flex-wrap: nowrap; align-items: flex-start; }
  .aic-shell--arky .aic-arky-bar__left { order: 0; width: auto; flex: 1 1 auto; min-width: 0; }

  /* 팀 이름은 대개 길다. 좁은 화면에서 한 줄로 자르면 앞머리만 남아
     어느 팀인지 알 수 없으니, 두 줄까지 펴서 보여 준다. */
  .aic-shell--arky .aic-arky-project {
    max-width: none;
    min-width: 0;
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    word-break: keep-all;
  }
  .aic-shell--arky .aic-arky-bar__right { order: 0; width: auto; flex: 0 0 auto; justify-content: flex-end; }
  .aic-shell--arky .aic-dock { bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--app-bottom-bar, 0px)); padding: 4px; gap: 4px; }

  /* 좁은 화면에서는 독이 화면 폭을 넘겨 끝이 잘린다. 손가락으로 하기 어렵거나
     없어도 되는 것부터 뺀다.
       · 연결 도구 — 점을 정확히 찍어야 해서 손가락으로는 거의 못 쓴다
       · 실행 취소·저장 — 캔버스는 바뀌면 700ms 뒤 알아서 저장된다
       · 구분선 — 단추가 줄어 묶음을 가를 일이 없다 (간격으로 대신한다) */
  .aic-shell--arky .aic-dock > button[aria-label="연결 도구"],
  .aic-shell--arky .aic-dock > button[aria-label="실행 취소"],
  .aic-shell--arky .aic-dock > button[aria-label="저장"],
  .aic-shell--arky .aic-dock > .aic-dock__sep { display: none; }

  /* 배율의 −/+ 도 뺀다. 손가락으로 벌리면 되고, 숫자는 눌러서 100%로 되돌리는
     기능이 있으니 그대로 둔다. (독 안의 배율은 Arky 규칙이 따로 있어서
     같은 깊이로 잡아야 밀리지 않는다) */
  .aic-shell--arky .aic-dock .aic-zoom-controls > button:not(.aic-zoom-controls__value) { display: none; }
  .aic-shell--arky .aic-dock .aic-zoom-controls--arky { grid-template-columns: auto; }
  .aic-shell--arky .aic-dock button { width: 32px; height: 32px; }
  .aic-shell--arky .aic-arky-edgebar { bottom: 56px; width: calc(100% - 20px); }
  .aic-shell--arky .aic-arky-edgebar .aic-edge-tools { width: 100%; overflow-x: auto; }
  .aic-shell--arky .aic-drawing-tools {
    bottom: 56px;
    max-width: calc(100% - 16px);
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .aic-shell--arky .aic-arky-project { max-width: 110px; }
  .aic-shell--arky .aic-arky-pill { padding: 0 9px; }
  .aic-shell--arky .aic-arky-tabs button { max-width: 128px; padding-inline: 8px; }
}

/* 오른쪽 채팅이 열린 상태에서는 뷰포트가 넓어도 실제 캔버스 칸은 좁을 수 있다. */
/* @container는 container-type 선언이 있어야 도는데 이 화면엔 없어서
   지금까지 한 번도 적용되지 않았다. 셸에 container-type을 주면 안쪽의
   position:fixed 스크림이 셸 기준으로 바뀌어 메뉴 배경이 깨지므로,
   화면 폭 기준으로 바꾼다. */
@media (max-width: 760px) {
  .aic-shell--arky .aic-arky-bar {
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    left: var(--arky-bar-left, 8px);
    padding: 8px var(--arky-bar-right, 8px) 8px 0;
  }
  .aic-shell--arky .aic-arky-bar__left {
    order: 0;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .aic-shell--arky .aic-arky-bar__right {
    order: 0;
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

@media (max-width: 560px) {
  .aic-shell--arky .aic-arky-project { max-width: none; }
  .aic-shell--arky .aic-arky-pill { padding-inline: 9px; }
  .aic-shell--arky .aic-arky-tabs button { max-width: 124px; padding-inline: 8px; }
  /* 버튼이 화면보다 넓어지면 잘리는 대신 옆으로 밀어 볼 수 있게 한다. */
  .aic-shell--arky .aic-dock { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .aic-shell--arky .aic-dock::-webkit-scrollbar { display: none; }
  .aic-shell--arky .aic-dock > * { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .aic-shell--arky .aic-arky-pill,
  .aic-shell--arky .aic-arky-icon,
  .aic-shell--arky .aic-dock button,
  .aic-shell--arky .aic-arky-tabs button,
  .aic-shell--arky .aic-view-toggle__current,
  .aic-shell--arky .aic-view-toggle__target { transition: none; }
}

/* 파일을 끌어다 놓는 중임을 알리는 안내와 업로드 실패 알림. */
.aic-drop-hint {
  position: absolute;
  inset: 12px;
  z-index: 60;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  border: 2px dashed #a49bf0;
  border-radius: 16px;
  background: rgba(240, 239, 253, .82);
  color: #4c45a8;
  pointer-events: none;
}
.aic-drop-hint strong { font-size: 15px; font-weight: 750; }
.aic-drop-hint span { font-size: 12px; opacity: .8; }
.aic-upload-error {
  position: absolute;
  bottom: 68px;
  left: 50%;
  z-index: 61;
  transform: translateX(-50%);
  padding: 9px 14px;
  border: 1px solid #edc8ce;
  border-radius: 10px;
  background: #fdf3f4;
  color: #a4485a;
  font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(28, 30, 38, .12);
}
.aic-shell-media { width: 100%; padding: 3px 0 6px; }
.aic-shell--arky .aic-dock button .is-spinning { animation: aic-dock-spin .9s linear infinite; }
@keyframes aic-dock-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .aic-drop-hint { border-color: #6b62c3; background: rgba(40, 42, 48, .86); color: #b9b3ff; }

/* 여러 장을 고른 동안 뜨는 막대 — 하단 독 바로 위. */
.aic-multi-bar {
  position: absolute;
  bottom: 68px;
  left: 50%;
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  padding: 5px 6px 5px 13px;
  border: 1px solid var(--arky-hair);
  border-radius: 999px;
  background: var(--arky-paper);
  box-shadow: 0 8px 26px rgba(20, 20, 25, .13);
  font-size: 12.5px;
}
.aic-multi-bar > span { color: var(--arky-sub); font-weight: 650; }
.aic-multi-bar button {
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--arky-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.aic-multi-bar button:hover { background: var(--arky-chip); }
[data-theme="dark"] .aic-multi-bar { border-color: #41434a; background: #282a30; }
[data-theme="dark"] .aic-multi-bar button { color: #e4e4e7; }
[data-theme="dark"] .aic-multi-bar button:hover { background: #35373e; }

/* 블록을 고쳐 쓰는 동안에는 카드 쪽 선택 표시를 거둔다.
   선택 틀이 두 겹으로 겹치면 지금 무엇을 고치는 중인지 오히려 알기 어렵다. */
.aic-shell--arky .aic-card.is-selected:has(.aic-shell-row.is-selected) {
  border-color: var(--arky-hair);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .07), 0 10px 26px rgba(20, 20, 25, .1);
}
.aic-card:has(.aic-shell-row.is-selected) .aic-card__port,
.aic-card:has(.aic-shell-row.is-selected) > .aic-card__resize { opacity: 0; pointer-events: none; }

/* 카드 우클릭 메뉴 */
.aic-card-menu__scrim { position: fixed; inset: 0; z-index: 70; }
.aic-card-menu {
  position: fixed;
  z-index: 71;
  min-width: 168px;
  padding: 5px;
  border: 1px solid var(--arky-hair);
  border-radius: 11px;
  background: var(--arky-paper);
  box-shadow: 0 16px 40px rgba(25, 27, 34, .18);
}
.aic-card-menu button {
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--arky-ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.aic-card-menu button:hover { background: var(--arky-chip); }
.aic-card-menu button svg { width: 15px; height: 15px; color: var(--arky-sub); }
.aic-card-menu button.is-danger { color: #b73f4c; }
.aic-card-menu button.is-danger svg { color: #b73f4c; }
[data-theme="dark"] .aic-card-menu { border-color: #41434a; background: #282a30; }
[data-theme="dark"] .aic-card-menu button { color: #e4e4e7; }
[data-theme="dark"] .aic-card-menu button:hover { background: #35373e; }

/* 캔버스 시트 탭 — 엑셀처럼 한 팀공간 안의 캔버스 여러 장을 오간다.
   하단 독은 가운데 있으므로 탭은 왼쪽 아래에 둔다. */
.aic-sheets {
  position: absolute;
  /* 하단 독이 가운데 떠 있어 같은 높이에 두면 겹친다. 독 위 줄에 앉힌다. */
  bottom: calc(66px + var(--app-bottom-bar, 0px));
  /* 왼쪽에는 채널 사이드바가 겹쳐 있다. 상단 바와 같은 변수를 써서 그 옆으로
     비켜 놓지 않으면 탭이 사이드바 밑에 깔려 아예 보이지 않는다. */
  left: var(--arky-bar-left, 16px);
  z-index: 33;
  transition: left .28s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  max-width: min(42vw, 520px);
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 6px 18px rgba(20, 20, 25, .08);
  scrollbar-width: none;
}
.aic-sheets::-webkit-scrollbar { display: none; }
.aic-sheet { display: flex; flex: 0 0 auto; align-items: center; border-radius: 8px; }
.aic-sheet > button:first-child {
  max-width: 168px;
  height: 30px;
  padding: 0 11px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--arky-sub);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.aic-sheet:hover > button:first-child { background: var(--arky-chip); }
.aic-sheet.is-active { background: #ede9fb; }
.aic-sheet.is-active > button:first-child { color: #5b4bc4; }
.aic-sheet__remove {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-right: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b62c3;
  cursor: pointer;
}
.aic-sheet__remove:hover { background: rgba(107, 98, 195, .16); }
.aic-sheet__remove svg { width: 12px; height: 12px; }
.aic-sheet__rename {
  width: 140px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--arky-accent);
  border-radius: 8px;
  outline: 0;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
}
.aic-sheets__add {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--arky-sub);
  cursor: pointer;
}
.aic-sheets__add:hover { background: var(--arky-chip); color: var(--arky-ink); }
.aic-sheets__add svg { width: 15px; height: 15px; }
[data-theme="dark"] .aic-sheets { background: #282a30; }
[data-theme="dark"] .aic-sheet.is-active { background: #38356b; }
[data-theme="dark"] .aic-sheet.is-active > button:first-child { color: #c9c3ff; }
/* 탭 이름은 넓은 화면에서만 온전히 쓴다. */
.aic-sheet__index { display: none; }

@media (max-width: 768px) {
  .aic-sheets {
    left: var(--arky-bar-left, 8px);
    max-width: calc(100vw - var(--arky-bar-left, 8px) - 12px);
    bottom: calc(60px + env(safe-area-inset-bottom, 0px) + var(--app-bottom-bar, 0px));
  }
  /* 좁은 화면에서 "캔버스 1"을 다 적으면 탭 두어 개로 줄이 꽉 찬다.
     몇 번째 캔버스인지만 남긴다 — 어차피 고르는 데는 그거면 된다. */
  .aic-sheet__name { display: none; }
  .aic-sheet__index { display: inline; }
}

/* 팀 통화 바 — Canvas 칩 묶음 바로 아래 줄에 선다.
   캔버스로 바뀌면서 사이드바가 숨겨져 사라졌던 것을 이 자리로 옮겨 왔다. */
.aic-shell--arky .aic-arky-bar__right { flex-direction: column; align-items: flex-end; gap: 8px; }
.aic-shell--arky .aic-arky-voice { pointer-events: auto; }
.aic-shell--arky .aic-arky-voice .voice-bar {
  border-radius: 12px;
  background: var(--arky-paper);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 6px 18px rgba(20, 20, 25, .06);
}

/* 손가락으로 꾹 눌러 집어 든 위젯.
   맵을 끄는 중인지 위젯을 옮기는 중인지 손끝만으로는 알 수 없어서,
   집힌 순간 살짝 떠오르게 해 "지금부터 이게 따라온다"를 알려 준다. */
.aic-shell--arky .is-lifted {
  z-index: 20;
  box-shadow: 0 18px 44px rgba(20, 20, 25, .28);
  outline: 2px solid #7c5cd6;
  outline-offset: 2px;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .aic-shell--arky .is-lifted { transition: box-shadow .12s ease, outline-color .12s ease; }
}
.tmh {
  --tmh-ink: #1c1e26;
  --tmh-muted: #777b86;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0;
  background: #f4f5f7;
  color: var(--tmh-ink);
}

.tmh__header { width: 100%; min-height: 88px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 22px 13px 24px; border-bottom: 1px solid #e0e2e7; background: rgba(252,252,250,.95); }
.tmh__heading-row { min-width: 0; display: flex; align-items: center; gap: 13px; }
.tmh__header-actions { display: flex; align-items: center; gap: 8px; }
.tmh__kicker { display: block; margin-bottom: 5px; color: #6860bd; font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .17em; }
.tmh h1 { margin: 0; color: var(--tmh-ink); font-size: clamp(20px, 2vw, 25px); font-weight: 770; line-height: 1.12; letter-spacing: -.04em; }
.tmh__back { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; margin: 0; padding: 0; border: 1px solid #d9dce2; border-radius: 9px; background: #fff; color: #555a66; cursor: pointer; }
.tmh__sync, .tmh__empty button { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #d4d6dd; border-radius: 9px; background: #fff; color: #444955; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tmh__sync:hover, .tmh__empty button:hover, .tmh__back:hover { border-color: #aaa4df; color: #6157be; }
.tmh__sync:disabled { opacity: .6; cursor: default; }
.tmh__summary { margin-top: 7px; display: flex; align-items: baseline; gap: 5px; color: var(--tmh-muted); font-size: 11px; }
.tmh__summary strong { color: #5f57ad; font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

.tmh__map { position: relative; flex: 1 1 auto; width: min(calc(100% - 40px), 1120px); min-height: 0; margin: 0 auto; overflow: hidden; }
.tmh__map-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.tmh__branches { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tmh__branches path { fill: none; stroke: var(--branch-color); stroke-width: 2; stroke-linecap: round; opacity: .58; }
.tmh__branches circle { fill: var(--branch-color); opacity: .9; }
.tmh__core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); border: 1px solid #ccc8ec; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff 0, #f2f0fc 58%, #e5e1f8 100%); box-shadow: 0 18px 50px rgba(69,61,137,.18), 0 0 0 12px rgba(143,131,214,.07); }
.tmh__core::after { content: ""; position: absolute; inset: -22px; border: 1px dashed rgba(101,88,217,.2); border-radius: 50%; }
.tmh__core span { color: #8b84c9; font: 750 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .22em; }
.tmh__core strong { margin-top: 5px; color: #403978; font: 850 21px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.04em; }
.tmh__core small { margin-top: 10px; color: #827d9f; font-size: 12px; font-weight: 700; }
.tmh-page { position: absolute; z-index: 3; width: 226px; min-height: 112px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: start; gap: 10px; padding: 14px; overflow: hidden; transform: translate(-50%, -50%); border: 1px solid #dfe1e6; border-radius: 13px; background: rgba(255,255,255,.9); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 4px 18px rgba(24,27,37,.07); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.tmh-page::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--page-accent); }
.tmh-page:hover { transform: translate(-50%, calc(-50% - 3px)); border-color: color-mix(in srgb, var(--page-accent) 48%, #dfe1e6); box-shadow: 0 14px 32px rgba(24,27,37,.12); }
.tmh-page:focus-visible, .tmh__sync:focus-visible, .tmh__back:focus-visible { outline: 2px solid #6558d9; outline-offset: 2px; }
.tmh-page__mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--page-accent) 14%, white); color: color-mix(in srgb, var(--page-accent) 88%, #333); font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tmh-page__content { min-width: 0; display: flex; flex-direction: column; }
.tmh-page__topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tmh-page__topline strong { overflow: hidden; color: #242730; font-size: 15px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.tmh-page__topline small { padding: 3px 6px; border-radius: 999px; background: #f0f1f3; color: #858994; font-size: 12px; font-weight: 750; white-space: nowrap; }
.tmh-page__note { margin-top: 5px; color: #777b85; font-size: 12px; line-height: 1.4; }
.tmh-page__preview { margin-top: 8px; overflow: hidden; color: #8f939c; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.tmh-page__arrow { align-self: center; color: #b0b3ba; }
.tmh__excluded-tray { flex: 0 0 auto; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 22px; border-top: 1px solid #e0e2e7; background: rgba(247,248,249,.94); }
.tmh__excluded-copy { display: flex; flex-direction: column; gap: 3px; }
.tmh__excluded-copy > span { color: #6d717b; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.tmh__excluded-copy > small { color: #989ba3; font-size: 10px; }
.tmh__excluded-button { min-width: 190px; height: 44px; display: grid; grid-template-columns: 28px minmax(0,1fr) 14px; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid #d9dce1; border-radius: 9px; background: #fff; color: #4d515a; text-align: left; cursor: pointer; }
.tmh__excluded-button:hover { border-color: #b9bdc5; background: #f9f9f8; }
.tmh__excluded-button .tmh-page__mark { width: 28px; height: 28px; border-radius: 7px; background: #f0f1f3; color: #81858d; }
.tmh__excluded-button > span:nth-child(2) { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tmh__excluded-button strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tmh__excluded-button small { color: #93969e; font-size: 10px; white-space: nowrap; }
.tmh__excluded-button > svg { color: #a9acb3; }
.tmh__excluded-button:focus-visible { outline: 2px solid #6558d9; outline-offset: 2px; }
.tmh__empty { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #7b7f89; }
.tmh__empty > span { margin-bottom: 12px; color: #6558d9; font-size: 24px; }
.tmh__empty strong { color: #333741; font-size: 15px; }
.tmh__empty p { margin: 7px 0 16px; font-size: 11px; }
.tmh-detail { height: 100%; min-height: 0; overflow: hidden; }

[data-theme="dark"] .tmh { --tmh-ink: #f1f1ee; --tmh-muted: #a5a8b0; background: #191b20; }
[data-theme="dark"] .tmh__header { border-bottom-color: #363941; background: rgba(32,34,40,.96); }
[data-theme="dark"] .tmh-page { border-color: #383b43; background: rgba(37,39,45,.9); }
[data-theme="dark"] .tmh-page__topline strong, [data-theme="dark"] .tmh__empty strong { color: #f0f0ed; }
[data-theme="dark"] .tmh-page__topline small { background: #34373e; color: #bbbfc7; }
[data-theme="dark"] .tmh-page__note { color: #afb2ba; }
[data-theme="dark"] .tmh-page__preview { color: #777b84; }
[data-theme="dark"] .tmh__core { border-color: #565071; background: radial-gradient(circle at 36% 30%, #34313f 0, #292735 58%, #211f2b 100%); box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 12px rgba(143,131,214,.08); }
[data-theme="dark"] .tmh__core strong { color: #e3dfff; }
[data-theme="dark"] .tmh__core span, [data-theme="dark"] .tmh__core small { color: #aaa3dc; }
[data-theme="dark"] .tmh__sync, [data-theme="dark"] .tmh__back, [data-theme="dark"] .tmh__empty button { border-color: #41454f; background: #292c33; color: #e1e2e5; }
[data-theme="dark"] .tmh__excluded-tray { border-top-color: #363941; background: rgba(29,31,36,.96); }
[data-theme="dark"] .tmh__excluded-copy > span { color: #c0c2c8; }
[data-theme="dark"] .tmh__excluded-copy > small { color: #7f838c; }
[data-theme="dark"] .tmh__excluded-button { border-color: #41454f; background: #292c33; color: #e1e2e5; }
[data-theme="dark"] .tmh__excluded-button:hover { border-color: #555a66; background: #30333a; }
[data-theme="dark"] .tmh__excluded-button .tmh-page__mark { background: #373a42; color: #b7bac1; }

@media (max-width: 900px) {
  .tmh { display: block; overflow-y: auto; }
  .tmh__header { position: sticky; top: 0; z-index: 10; }
  .tmh__map { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 18px; overflow: visible; }
  .tmh__map-stage { display: contents; }
  .tmh__branches { display: none; }
  .tmh__core { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 128px; height: 128px; margin: 6px auto 20px; transform: none; }
  .tmh-page { position: relative; left: auto !important; top: auto !important; width: 100%; min-height: 112px; transform: none; }
  .tmh-page:hover { transform: translateY(-2px); }
  .tmh__excluded-tray { margin-top: 18px; }
}
@media (max-width: 600px) {
  .tmh__header { min-height: 78px; align-items: center; gap: 10px; padding: 12px; }
  .tmh__heading-row { gap: 8px; }
  .tmh h1 { font-size: 19px; }
  .tmh__sync { width: 36px; gap: 0; padding: 0; font-size: 0; }
  .tmh__sync svg { width: 16px; height: 16px; font-size: 16px; }
  .tmh__map { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .tmh-page { min-height: 132px; }
  .tmh__excluded-tray { align-items: stretch; flex-direction: column; gap: 8px; padding: 12px; }
  .tmh__excluded-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .tmh-page { transition: none; } }
/* Arky 우측 독 — 아이콘 탭 스트립 + 패널.
   활성 탭만 라벨을 펼치고 나머지는 아이콘으로 접힌다. */
.arky-dock {
  position: relative;
  --dock-ink: #1c1c1e;
  --dock-sub: #8a8a8f;
  --dock-hair: #ececea;
  --dock-accent: #7c5cd6;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
  border-radius: inherit;
  overflow: hidden;
}
.arky-dock__body { animation: arky-dock-body-in .24s ease both; }
.arky-dock__collapse > svg { transition: transform .24s ease; }
@keyframes arky-dock-body-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 왼쪽 가장자리 리사이즈 손잡이 — 평소엔 보이지 않고 올리면 선이 뜬다. */
.arky-dock__resizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.arky-dock__resizer::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .14s ease;
}
.arky-dock__resizer:hover::after { background: var(--dock-accent); }
/* 끄는 동안에는 폭 transition을 꺼서 손에 붙게 한다. */
body.is-dock-resizing .workspace-home__ai-dock,
body.is-dock-resizing .aic-arky-bar { transition: none; }
body.is-dock-resizing { user-select: none; }

.arky-dock__tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 50px;
  box-sizing: border-box;
  padding: 9px 10px;
  background: #fff;
}

.arky-dock__tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--dock-sub);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.arky-dock__tabs button > svg { flex: 0 0 auto; font-size: 15px; }
.arky-dock__tabs button > span { display: none; }
.arky-dock__tabs button:hover { background: #f4f4f2; color: #4a4a50; }
.arky-dock__tabs button.is-active { background: #f2f2f0; color: var(--dock-ink); }
.arky-dock__tabs button.is-active > span { display: inline; }
.arky-dock__tabs button:focus-visible { outline: 2px solid var(--dock-accent); outline-offset: 2px; }

.arky-dock__collapse { margin-left: auto; }
.arky-dock.is-collapsed .arky-dock__collapse > svg { transform: rotate(180deg); }

/* 접힌 레일 — 아이콘만 세로로 쌓는다. */
.arky-dock.is-collapsed .arky-dock__tabs {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 9px 8px;
}
.arky-dock.is-collapsed .arky-dock__tabs button { justify-content: center; padding: 0; }
.arky-dock.is-collapsed .arky-dock__tabs button > span { display: none; }
.arky-dock.is-collapsed .arky-dock__collapse { order: -1; margin: 0 0 4px; }

.arky-dock__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arky-dock__pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.arky-dock__pane[hidden] { display: none; }
.arky-dock__pane--scroll { overflow-y: auto; padding: 2px 14px 16px; }

.arky-dock__hint { margin: 18px 16px; color: var(--dock-sub); font-size: 12px; }

.arky-dock__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 260px;
  padding: 24px 18px;
  text-align: center;
}
.arky-dock__empty-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #f4f4f2;
  color: #a3a3a9;
  font-size: 17px;
}
.arky-dock__empty strong { color: #3a3a40; font-size: 13px; font-weight: 650; }
.arky-dock__empty p { margin: 0; max-width: 240px; color: var(--dock-sub); font-size: 11.5px; line-height: 1.6; }

.arky-dock__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.arky-dock__list > li { min-width: 0; }
.arky-dock__list a,
.arky-dock__source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 9px 10px;
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
}
.arky-dock__list a:hover { background: #f6f6f4; }
.arky-dock__list a > svg { grid-row: 1 / span 2; color: #b4b4ba; font-size: 13px; }
.arky-dock__list strong {
  grid-column: 1;
  overflow: hidden;
  color: #33333a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arky-dock__list a:hover strong { color: var(--dock-accent); }
.arky-dock__list span { grid-column: 1; color: var(--dock-sub); font-size: 10.5px; }
.arky-dock__source p {
  grid-column: 1;
  margin: 1px 0 2px;
  color: #6d6d75;
  font-size: 11px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.arky-dock__sources { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.arky-dock__sources h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0 10px;
  color: var(--dock-sub);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.arky-dock__sources h3 small {
  padding: 1px 5px;
  border-radius: 999px;
  background: #f2f2f0;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.arky-dock__files {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 8px 0 18px;
}
.arky-dock__files section { min-width: 0; }
.arky-dock__files h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 0 3px;
  color: #4a4a50;
  font-size: 12px;
  font-weight: 700;
}
.arky-dock__files h3 small {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 5px;
  border-radius: 10px;
  background: #f0f0ee;
  color: var(--dock-sub);
  font-size: 10px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.arky-dock__image-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.arky-dock__image-grid a {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1.25;
  overflow: hidden;
  border: 1px solid #e7e7e4;
  border-radius: 7px;
  background: #f4f4f2;
}
.arky-dock__image-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .16s ease;
}
.arky-dock__image-grid a:hover img { transform: scale(1.025); }
.arky-dock__image-grid a > span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(24, 24, 27, .72);
  color: #fff;
  font-size: 9.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arky-dock__image-grid a > span svg { flex: 0 0 auto; }
.arky-dock__file-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arky-dock__file-list a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 7px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}
.arky-dock__file-list a:hover { background: #f6f6f4; }
.arky-dock__file-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #e5e5e2;
  border-radius: 6px;
  background: #fff;
  color: #696971;
  font-size: 15px;
}
.arky-dock__file-copy { min-width: 0; }
.arky-dock__file-copy strong,
.arky-dock__file-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arky-dock__file-copy strong { color: #34343a; font-size: 11.5px; font-weight: 650; }
.arky-dock__file-copy small { margin-top: 3px; color: var(--dock-sub); font-size: 9.5px; }
.arky-dock__file-download { color: #a0a0a7; font-size: 14px; }
.arky-dock__file-list a:hover .arky-dock__file-download { color: var(--dock-accent); }

[data-theme="dark"] .arky-dock {
  --dock-ink: #f3f3f1;
  --dock-sub: #9a9aa2;
  --dock-hair: #33353b;
  background: #1f2126;
}
[data-theme="dark"] .arky-dock__tabs { background: #1f2126; }
[data-theme="dark"] .arky-dock__tabs button:hover { background: #2b2d34; color: #d6d6da; }
[data-theme="dark"] .arky-dock__tabs button.is-active { background: #2f3138; color: var(--dock-ink); }
[data-theme="dark"] .arky-dock__list a:hover { background: #2a2c32; }
[data-theme="dark"] .arky-dock__list strong { color: #dcdce0; }
[data-theme="dark"] .arky-dock__list a:hover strong { color: #c5b6f5; }
[data-theme="dark"] .arky-dock__source p { color: #aeaeb6; }
[data-theme="dark"] .arky-dock__empty-mark,
[data-theme="dark"] .arky-dock__sources h3 small { background: #2d2f36; color: #a5a5ad; }
[data-theme="dark"] .arky-dock__empty strong { color: #e2e2e6; }
[data-theme="dark"] .arky-dock__files h3 { color: #d6d6da; }
[data-theme="dark"] .arky-dock__files h3 small { background: #2d2f36; color: #a5a5ad; }
[data-theme="dark"] .arky-dock__image-grid a,
[data-theme="dark"] .arky-dock__file-icon { border-color: #373940; background: #292b31; }
[data-theme="dark"] .arky-dock__file-list a:hover { background: #2a2c32; }
[data-theme="dark"] .arky-dock__file-icon { color: #c3c3c8; }
[data-theme="dark"] .arky-dock__file-copy strong { color: #dcdce0; }
/* Arky 채팅 스킨 — .arky-dock 안에서만 적용된다.
   일반 채팅 페이지(#채널)는 건드리지 않는다.

   Arky의 규칙:
   - AI 답변은 말풍선 없이 본문 글처럼 흐른다 (아바타·배경·테두리 없음)
   - 내 말만 회색 말풍선으로 오른쪽에 붙는다
   - 헤더는 스레드 이름 필 하나 + 아이콘 몇 개
   - 입력창은 테두리 있는 한 덩어리, 하단에 모델명과 원형 전송 버튼 */

.arky-dock {
  --skin-ink: #1c1c1e;
  --skin-body: #33333a;
  --skin-sub: #8a8a8f;
  --skin-hair: #ececea;
  --skin-mine: #f1f1ef;
  --skin-accent: #7c5cd6;
}

/* ── 스레드 헤더 ──────────────────────────────────────────────────────── */
.arky-dock .workspace-chat__channel-header {
  gap: 4px;
  background: transparent;
}
.arky-dock .workspace-chat__channel-toggle {
  gap: 5px;
  height: 27px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--skin-mine);
  color: var(--skin-body);
  font-size: 12px;
  font-weight: 600;
}
.arky-dock .workspace-chat__channel-toggle:hover { background: #e9e9e6; }
.arky-dock .workspace-chat__channel-hash { display: none; }

/* 멤버 아바타·인원수는 Arky에 없는 요소 — 스레드 이름만 남긴다. */
.arky-dock .workspace-chat__member-avatars,
.arky-dock .workspace-chat__channel-member-count { display: none; }

.arky-dock .workspace-chat__channel-actions { gap: 2px; }
.arky-dock .workspace-chat__channel-actions > button,
.arky-dock .workspace-chat__channel-search-button,
.arky-dock .workspace-chat__memory-toggle,
.arky-dock .workspace-chat__channel-clear-ai {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--skin-sub);
  font-size: 0; /* 버튼 안의 라벨 텍스트를 감춘다 */
}
.arky-dock .workspace-chat__channel-actions > button > svg,
.arky-dock .workspace-chat__channel-search-button > svg,
.arky-dock .workspace-chat__memory-toggle > svg,
.arky-dock .workspace-chat__channel-clear-ai > svg { font-size: 15px; }
.arky-dock .workspace-chat__channel-actions > button:hover,
.arky-dock .workspace-chat__channel-search-button:hover,
.arky-dock .workspace-chat__memory-toggle:hover,
.arky-dock .workspace-chat__channel-clear-ai:hover { background: var(--skin-mine); color: var(--skin-ink); }

.arky-dock .workspace-chat__topic-bar { border-radius: 9px; }

/* ── AI 채팅 세션 ─────────────────────────────────────────────────────── */
.arky-dock .workspace-chat__ai-session-bar {
  position: relative;
  z-index: 35;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 12px 8px;
  border-bottom: 1px solid var(--skin-hair);
  background: #fff;
}
.arky-dock .workspace-chat__ai-session-title {
  min-width: 0;
  max-width: calc(100% - 78px);
  height: 32px;
  overflow: hidden;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: var(--skin-mine);
  color: var(--skin-ink);
  font-size: 12.5px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arky-dock .workspace-chat__ai-session-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.arky-dock .workspace-chat__ai-session-actions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--skin-sub);
}
.arky-dock .workspace-chat__ai-session-actions button:hover { background: var(--skin-mine); color: var(--skin-ink); }
.arky-dock .workspace-chat__ai-session-actions svg { width: 16px; height: 16px; }
.arky-dock .workspace-chat__ai-history {
  position: absolute;
  top: 43px;
  left: 12px;
  right: 12px;
  z-index: 60;
  min-height: 300px;
  max-height: min(520px, calc(100dvh - 150px));
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--skin-hair);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(24, 24, 28, .16);
}
.arky-dock .workspace-chat__ai-history-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--skin-mine);
  color: var(--skin-sub);
}
.arky-dock .workspace-chat__ai-history-search svg { flex: 0 0 auto; width: 16px; height: 16px; }
.arky-dock .workspace-chat__ai-history-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--skin-ink);
  font: inherit;
  font-size: 13px;
}
.arky-dock .workspace-chat__ai-history-list {
  max-height: min(450px, calc(100dvh - 220px));
  padding-top: 10px;
  overflow-y: auto;
}
.arky-dock .workspace-chat__ai-history-label {
  display: block;
  padding: 4px 4px 6px;
  color: var(--skin-sub);
  font-size: 12px;
}
.arky-dock .workspace-chat__ai-history-list > button {
  display: block;
  width: 100%;
  min-height: 38px;
  overflow: hidden;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--skin-body);
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arky-dock .workspace-chat__ai-history-list > button:hover,
.arky-dock .workspace-chat__ai-history-list > button.is-active { background: var(--skin-mine); color: var(--skin-ink); }
.arky-dock .workspace-chat__ai-history-list > p { margin: 22px 4px; color: var(--skin-sub); font-size: 12px; text-align: center; }

/* ── 메시지 ──────────────────────────────────────────────────────────── */
.arky-dock .workspace-chat__message-row { padding-left: 2px; padding-right: 2px; }
/* 본문이 패널 폭을 최대한 쓰도록 좌우 여백을 맞춰 줄인다. */
.arky-dock .workspace-chat__messages { padding-left: 16px; padding-right: 16px; }

/* AI·상대 답변: 말풍선을 벗기고 본문 글처럼 */
.arky-dock .workspace-chat__message-row.received .workspace-chat__avatar-col { display: none; }
/* AI 답변은 문서처럼 패널 폭을 다 쓴다.
   기본 채팅은 말풍선을 min(72%, 600px)로 묶는데, 넓힌 도크에서는 그 캡 때문에
   오른쪽이 휑하게 빈다. */
.arky-dock .workspace-chat__message-row.received .workspace-chat__bubble-wrap {
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
/* 반응·더보기 열이 오른쪽에 자리를 잡고 있어 본문이 그만큼 좁아진다.
   레이아웃에서 빼고 호버할 때만 본문 위에 겹쳐 띄운다. */
.arky-dock .workspace-chat__message-row { position: relative; }
.arky-dock .workspace-chat__message-row.received > .workspace-chat__reaction-col {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.arky-dock .workspace-chat__message-row.received:hover > .workspace-chat__reaction-col {
  opacity: 1;
  pointer-events: auto;
}
.arky-dock .workspace-chat__message-row.received .workspace-chat__bubble {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.arky-dock .workspace-chat__message-row.received .workspace-chat__content {
  color: var(--skin-body);
  font-size: 13px;
  line-height: 1.68;
}
.arky-dock .workspace-chat__message-row.received .workspace-chat__content strong { color: var(--skin-ink); font-weight: 700; }

/* 내 말: 회색 말풍선, 오른쪽 */
.arky-dock .workspace-chat__message-row.mine .workspace-chat__bubble {
  padding: 9px 13px;
  border: 0;
  border-radius: 14px;
  background: var(--skin-mine);
  box-shadow: none;
}
.arky-dock .workspace-chat__message-row.mine .workspace-chat__bubble-wrap { max-width: 84%; }
.arky-dock .workspace-chat__message-row.mine .workspace-chat__content {
  color: var(--skin-body);
  font-size: 13px;
  line-height: 1.6;
}

/* 시간·읽음 표시는 호버 전까지 숨긴다 (Arky는 항상 노출하지 않음) */
.arky-dock .workspace-chat__time,
.arky-dock .workspace-chat__inline-readers { opacity: 0; transition: opacity .14s ease; }
.arky-dock .workspace-chat__message-row:hover .workspace-chat__time,
.arky-dock .workspace-chat__message-row:hover .workspace-chat__inline-readers { opacity: 1; }

/* "생각 중" — Arky의 Thought 줄처럼 담백한 회색 한 줄. 점은 본문이 들고 있다. */
.arky-dock .workspace-chat__ai-thinking-simple {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--skin-sub);
  font-size: 12px;
  font-weight: 500;
}
.arky-dock .workspace-chat__date-divider { color: var(--skin-sub); font-size: 10.5px; }
/* 도크는 폭이 좁다. 알림 자체는 공용 스타일(떠 있는 알약)을 그대로 쓰고
   글자와 여백만 줄인다. */
.arky-dock .workspace-chat__ai-canvas-activity {
  gap: 7px;
  padding: 6px 6px 6px 10px;
  color: var(--skin-sub);
  font-size: 11.5px;
}
.arky-dock .workspace-chat__ai-canvas-activity svg { width: 14px; height: 14px; }

/* ── 입력창 ──────────────────────────────────────────────────────────── */
/* Arky는 테두리 한 겹 안에 [입력] / [모델명 · 첨부 · 전송] 두 줄이 들어간다.
   form 자체를 그 상자로 쓰고, 2행은 grid로 배치한다. */
.arky-dock .workspace-chat__form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 8px;
  margin: 6px 12px 12px;
  padding: 10px 10px 8px;
  border: 1px solid #e2e2df;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 25, .04);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.arky-dock .workspace-chat__form:focus-within {
  border-color: #cfc7ee;
  box-shadow: 0 0 0 3px rgba(124, 92, 214, .1);
}

/* 1행: 입력 영역이 전체 폭 */
.arky-dock .workspace-chat__input-area { grid-column: 1 / -1; grid-row: 1; }

/* 안쪽 textarea의 테두리·배경을 벗겨 상자가 한 겹으로 보이게 한다. */
.arky-dock .workspace-chat__input {
  min-height: 26px;
  max-height: 168px;
  padding: 2px 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--skin-ink);
  font-size: 13.5px;
  line-height: 1.62;
}
.arky-dock .workspace-chat__input.workspace-chat__input--ai {
  min-height: 46px;
}
.arky-dock .workspace-chat__input:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.arky-dock .workspace-chat__input::placeholder { color: #b3b3b8; }

/* 2행 왼쪽: 모델 선택 */
.arky-dock .workspace-chat__model-picker {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.arky-dock .workspace-chat__model-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 28px;
  padding: 0 6px 0 3px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--skin-sub);
  font: inherit;
  font-size: 11.5px;
  font-weight: 550;
  cursor: pointer;
}
.arky-dock .workspace-chat__model-trigger svg { width: 13px; height: 13px; }
.arky-dock .workspace-chat__model-trigger:hover,
.arky-dock .workspace-chat__model-trigger:focus-visible {
  background: var(--skin-mine);
  color: var(--skin-ink);
  outline: none;
}
.arky-dock .workspace-chat__model-menu {
  position: absolute;
  z-index: 30;
  left: -10px;
  bottom: calc(100% + 9px);
  width: 210px;
  padding: 8px;
  border: 1px solid var(--skin-hair);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(24, 24, 28, .14);
}
.arky-dock .workspace-chat__model-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--skin-body);
  font-size: 14px;
  text-align: left;
}
.arky-dock .workspace-chat__model-menu button:hover,
.arky-dock .workspace-chat__model-menu button:focus-visible { background: var(--skin-mine); outline: none; }
.arky-dock .workspace-chat__model-menu button svg { width: 16px; height: 16px; color: var(--skin-ink); }

/* 2행 오른쪽: 첨부 + 전송 */
.arky-dock .workspace-chat__attachment-menu-wrap { grid-column: 2; grid-row: 2; }
.arky-dock .workspace-chat__attach-button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--skin-sub);
  font-size: 15px;
  transition: background .14s ease, color .14s ease;
}
.arky-dock .workspace-chat__attach-button:hover:not(:disabled) {
  background: var(--skin-mine);
  border-color: transparent;
  color: var(--skin-ink);
  transform: none;
}

.arky-dock .workspace-chat__submit {
  grid-column: 3;
  grid-row: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--skin-ink);
  color: #fff;
  box-shadow: none;
  transition: background .14s ease;
}
.arky-dock .workspace-chat__submit svg { width: 15px; height: 15px; }
.arky-dock .workspace-chat__submit:hover:not(:disabled) {
  background: var(--skin-accent);
  transform: none;
  box-shadow: none;
}
.arky-dock .workspace-chat__submit:disabled { background: #dedede; color: #fff; opacity: 1; }

.arky-dock .workspace-chat__selected-files { margin-top: 8px; }

/* ── 다크 ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .arky-dock {
  --skin-ink: #f3f3f1;
  --skin-body: #d3d4d9;
  --skin-sub: #9a9aa2;
  --skin-hair: #33353b;
  --skin-mine: #2e3037;
}
[data-theme="dark"] .arky-dock .workspace-chat__channel-toggle { background: var(--skin-mine); color: #e0e0e4; }
[data-theme="dark"] .arky-dock .workspace-chat__ai-session-bar,
[data-theme="dark"] .arky-dock .workspace-chat__ai-history { background: #24262b; }
[data-theme="dark"] .arky-dock .workspace-chat__channel-toggle:hover { background: #363940; }
[data-theme="dark"] .arky-dock .workspace-chat__form { background: #24262b; border-color: #3a3c43; box-shadow: none; }
[data-theme="dark"] .arky-dock .workspace-chat__form:focus-within { border-color: #574c86; box-shadow: 0 0 0 3px rgba(124, 92, 214, .16); }
[data-theme="dark"] .arky-dock .workspace-chat__attach-button:hover:not(:disabled) { background: #363940; color: var(--skin-ink); }
[data-theme="dark"] .arky-dock .workspace-chat__input::placeholder { color: #74757d; }
[data-theme="dark"] .arky-dock .workspace-chat__model-menu { background: #24262b; }
[data-theme="dark"] .arky-dock .workspace-chat__submit { background: #ebebe9; color: #1c1c1e; }
[data-theme="dark"] .arky-dock .workspace-chat__submit:hover:not(:disabled) { background: var(--skin-accent); color: #fff; }
[data-theme="dark"] .arky-dock .workspace-chat__submit:disabled { background: #3e4047; color: #83848c; }

@media (prefers-reduced-motion: reduce) {
  .arky-dock .workspace-chat__time,
  .arky-dock .workspace-chat__inline-readers,
  .arky-dock .workspace-chat__form,
  .arky-dock .workspace-chat__attach-button,
  .arky-dock .workspace-chat__submit { transition: none; }
}
:root {
  --color-fp-backdrop: rgba(15, 23, 42, 0.45);
  --color-fp-panel-shadow: rgba(15, 23, 42, 0.24);
  --color-fp-add-hover: rgb(59, 82, 230);
  --color-fp-close-bg: rgb(241, 245, 249);
}

/* 다크 값은 기존 dark.css 공유 규칙(.cp-close 등과 함께 있던 .fp-close 등)의
   값을 그대로 보존 */
[data-theme="dark"] {
  --color-fp-backdrop: rgba(2, 6, 16, 0.6);
  --color-fp-panel-shadow: rgba(0, 0, 0, 0.4);
  --color-fp-add-hover: rgb(91, 118, 255);
  --color-fp-close-bg: var(--color-bg-elevated-dark);
}

.fp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-fp-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + var(--app-bottom-bar, 0px));
  animation: fp-fade-in 0.18s ease both;
}
@keyframes fp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.fp-panel {
  width: 100%;
  max-width: 1280px;
  max-height: min(95vh, calc(100vh - 24px));
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 32px 80px var(--color-fp-panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fp-slide-up 0.2s ease both;
}
@keyframes fp-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.fp-header-left { display: flex; align-items: center; gap: 12px; }
.fp-header-icon { font-size: 22px; }
.fp-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-text-main); line-height: 1.2; }
.fp-meta { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--color-text-placeholder); }
.fp-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.fp-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px;
  border: 0; border-radius: 10px;
  background: var(--color-brand-icon); color: var(--color-text-on-brand);
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background 0.14s;
}
.fp-add-btn:hover { background: var(--color-fp-add-hover); }

.fp-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: var(--color-fp-close-bg); color: var(--color-text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.fp-close:hover { background: var(--color-border); color: var(--color-text-main); }

.fp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.fp-body .workspace-finance__floating-add { display: none; }
.fp-body .workspace-finance__desktop-add { display: none; }

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분)
   dark.css의 워크스페이스 팝업 공통 쉘 규칙(.cp-/.tp-/.tkp-/.vp-/.bp-/.fp-
   공유 셀렉터)과 동일 지점을 명시도(0,2,0/0,3,0)로 재현해 흡수한다. */
[data-theme="dark"] .fp-close {
  background: var(--color-fp-close-bg);
  color: var(--color-text-muted);
}
[data-theme="dark"] .fp-close:hover {
  background: var(--color-border);
  color: var(--color-text-main);
}
[data-theme="dark"] .fp-header {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .fp-title {
  color: var(--color-text-main);
}

@media (max-width: 640px) {
  .fp-backdrop { padding: 0 0 var(--app-bottom-bar, 0px); align-items: flex-end; }
  .fp-panel { max-width: 100%; max-height: 95vh; border-radius: 20px 20px 0 0; }
  .fp-body { padding: 16px; }
}
/* 이 파일 전용 로컬 토큰(6-B2 WS-3) - WorkspaceChatPage와는 다른
   보라/인디고 팔레트(violet-500계열)를 쓰므로 별도 스코프 유지.
   다크값은 [data-theme="dark"] 블록에서 개별 재정의. */
:root {
  --color-chatpopup-primary: rgb(99, 102, 241);
  --color-chatpopup-strong-text: rgb(30, 41, 59);
  --color-chatpopup-quote-text: rgb(67, 56, 202);
  --color-chatpopup-shadow-18: rgba(15, 23, 42, 0.18);
  --color-chatpopup-close-btn-bg: rgba(255, 255, 255, 0.85);
  --color-chatpopup-scrollbar: rgba(148, 163, 184, 0.4);
  --color-chatpopup-primary-glow: rgba(99, 102, 241, 0.1);
  --color-chatpopup-primary-hover: rgb(79, 70, 229);
  --color-chatpopup-chip-border: rgb(226, 232, 240);
  --color-chatpopup-chip-hover-border: rgb(203, 213, 225);
}

/* 다크 전용(라이트 대응 없음) - dark.css 흡수 과정에서 필요한 값만 최소로 추가 */
[data-theme="dark"] {
  --color-chatpopup-primary-hover: rgb(79, 70, 229);
  --color-chatpopup-panel-shadow-dark: rgba(0, 0, 0, 0.5);
  --color-chatpopup-close-bg-dark: rgba(30, 41, 59, 0.9);
  --color-chatpopup-reply-border-dark: rgb(49, 46, 129);

  /* 6-B2 WS-3 Step6: 다크 명도 검사 - 버블/입력창 본문 텍스트는 밝은
     회색조로, 인용/답장 강조 텍스트는 밝은 인디고로 재정의. */
  --color-chatpopup-strong-text: rgb(241, 245, 249);
  --color-chatpopup-quote-text: rgb(165, 180, 252);
  --color-chatpopup-close-btn-bg: rgba(30, 41, 59, 0.85);
  --color-chatpopup-chip-border: var(--color-border);
  --color-chatpopup-chip-hover-border: var(--color-border-strong);
}

/* ═══ 채널 팝업 껍데기 ═══ */
.chat-popup__backdrop {
  z-index: 20000;
}

.cp-channel-panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  height: min(760px, calc(100dvh - var(--app-bottom-bar, 0px) - 40px));
  max-height: calc(100dvh - var(--app-bottom-bar, 0px) - 40px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 24px 72px var(--color-chatpopup-shadow-18);
  overflow: hidden;
}

.cp-channel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--color-chatpopup-close-btn-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.12s, color 0.12s;
}

.cp-channel-close:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-border);
  color: var(--color-chatpopup-strong-text);
}

/* 채널 채팅 팝업: 두 클래스 조합으로 특이성 높여 강제 override */
.fp-backdrop.cp-channel-backdrop {
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
}

/* WorkspaceChatPage가 패널을 꽉 채우도록 — absolute로 확실한 높이 고정 */
.cp-channel-panel .workspace-chat {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: unset !important;
  max-height: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* X 닫기 버튼(absolute, right:14px, 32px)이 벨+검색 버튼을 가리지 않도록 */
.cp-channel-panel .workspace-chat__channel-header {
  min-height: 60px;
  padding: 10px 58px 10px 16px;
  border-bottom: 1px solid var(--color-border);
}

.cp-channel-panel .workspace-chat__messages {
  flex: 1 !important;
  min-height: 0 !important;
  /* 원래 max-height:calc(100dvh - header - 180px)가 메시지 영역을 제한해
     폼 아래 빈 공간이 생기는 원인 — none으로 해제 */
  max-height: none !important;
  overflow-y: scroll !important;
  /* justify-content:flex-end는 overflow 발생 시 위쪽으로 넘쳐
     브라우저가 스크롤을 막으므로 flex-start로 교체.
     ::before 스페이서가 메시지를 아래로 밀어줌 */
  justify-content: flex-start !important;
  gap: 8px;
  padding: 18px 20px 22px;
  background: color-mix(in srgb, var(--color-bg-soft) 48%, var(--color-bg-white));
  scrollbar-gutter: stable;
}

/* 메시지가 적을 때 아래로 밀어주는 스페이서 */
.cp-channel-panel .workspace-chat__messages::before {
  content: '';
  display: block;
  flex: 1 1 auto;
}

/* 일반 채널 팝업은 DM과 같은 밀도와 조작 크기를 사용한다. */
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-toggle {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-toggle:hover {
  border-color: var(--color-border);
  background: var(--color-bg-soft);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-name {
  font-size: 14px;
  font-weight: 700;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-actions {
  gap: 3px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-actions > button,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-search-button,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-notify,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__memory-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-actions > button:hover,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-search-button:hover,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__channel-notify:hover,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__memory-toggle:hover {
  border-color: var(--color-border);
  background: var(--color-bg-soft);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__memory-toggle span {
  display: none;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__topic-bar {
  min-height: 40px;
  padding: 6px 16px;
  gap: 6px;
  background: var(--color-bg-white);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__topic-chip {
  min-height: 28px;
  padding: 3px 10px;
  border-radius: 999px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__message-row.received {
  gap: 7px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__avatar-col {
  width: 30px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__avatar,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__avatar-button,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__avatar-placeholder {
  width: 30px;
  height: 30px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__bubble-wrap {
  max-width: min(76%, 500px);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__bubble {
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__message-row.received .workspace-chat__bubble {
  border-color: var(--color-border);
  border-radius: 10px 10px 10px 3px;
  box-shadow: 0 2px 8px var(--color-shadow-base);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__message-row.mine .workspace-chat__bubble {
  border-radius: 10px 10px 3px 10px;
  box-shadow: 0 3px 10px var(--color-chat-primary-glow-10);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__sender-name {
  margin-bottom: 4px;
  font-size: 11.5px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__time {
  font-size: 10.5px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__form {
  gap: 8px;
  margin: 10px 12px 12px;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow-base);
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__attach-button,
.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__submit {
  width: 42px;
  height: 42px;
  border-radius: 9px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__input {
  min-height: 42px;
  max-height: 126px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 22px;
}

.cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__attachment-menu {
  border-radius: 10px;
}

/* Gather AI 전용 작업면: 팀 메모리를 주 화면으로, 대화를 고정 우측 레일로 둔다. */
.cp-channel-panel.cp-channel-panel--ai {
  width: min(1560px, calc(100vw - 28px));
  max-width: none;
  height: min(94dvh, 960px);
  max-height: calc(100dvh - var(--app-bottom-bar, 0px) - 20px);
  border-radius: 12px;
  background: #f6f6f5;
}

.cp-ai-workbench {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(350px, 27vw, 410px);
  overflow: hidden;
  transition: grid-template-columns .2s ease;
}

/* 독을 접으면 오른쪽은 아이콘 레일만 남고 캔버스가 넓어진다. */
.cp-ai-workbench--collapsed { grid-template-columns: minmax(0, 1fr) 56px; }

@media (prefers-reduced-motion: reduce) {
  .cp-ai-workbench { transition: none; }
}

.cp-ai-canvas,
.cp-ai-chat {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.cp-ai-canvas {
  background: #f6f6f5;
  container-type: inline-size;
}

.cp-ai-canvas .tmh__header-actions .tmh__back {
  display: none;
}

.cp-ai-chat {
  background: #fff;
  border-radius: 10px 0 0 10px;
  box-shadow: -1px 0 0 #ececea, -14px 0 38px rgba(29, 33, 45, 0.05);
}

/* 공통 팝업 규칙이 채팅을 패널 top:0에 고정하면 독 탭 뒤에서 시작한다.
   Arky 독 안에서는 정상적인 flex 자식으로 되돌려 탭과 채팅을 분리한다. */
.cp-ai-chat .arky-dock__pane {
  position: relative;
  overflow: hidden;
}

.cp-ai-chat .arky-dock__pane > .workspace-chat {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding-bottom: 0;
}

.cp-ai-chat .arky-dock__tabs {
  min-height: 52px;
  padding-right: 52px;
  border-bottom: 1px solid #eeeeec;
}

.cp-channel-panel--ai > .cp-channel-close {
  top: 9px;
  right: 9px;
  z-index: 45;
  background: var(--color-chatpopup-close-btn-bg);
}

/* Arky는 독 탭 아래에 현재 대화 이름을 한 줄로 둔다. */
.cp-ai-chat .arky-dock .workspace-chat__channel-header {
  min-height: 42px;
  padding: 6px 12px 8px;
  border-bottom: 0;
}

.cp-ai-chat .arky-dock .workspace-chat__channel-name {
  font-size: 12.5px;
  font-weight: 600;
}

[data-theme="dark"] .cp-channel-panel.cp-channel-panel--ai,
[data-theme="dark"] .cp-ai-canvas {
  background: #191b20;
}

[data-theme="dark"] .cp-ai-chat {
  background: #1f2126;
  box-shadow: -1px 0 0 #33353b, -14px 0 38px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .cp-ai-chat .arky-dock__tabs { border-bottom-color: #303238; }

/* ═══ DM 팝업 공통 ═══ */
.chat-popup__panel {
  max-width: 560px;
  width: 100%;
  height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.chat-popup__panel--dm {
  width: min(480px, calc(100vw - 32px));
  max-width: 480px;
  height: min(680px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

.chat-popup__header {
  min-height: 72px;
  padding: 13px 16px;
  background: var(--color-bg-white);
}

.chat-popup__identity {
  min-width: 0;
  gap: 11px;
}

.chat-popup__header-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg-soft);
  object-fit: cover;
}

.chat-popup__identity > div {
  min-width: 0;
}

.chat-popup__identity .fp-title {
  max-width: 320px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-popup__subtitle {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--color-text-placeholder);
  font-size: 11px;
  font-weight: 600;
}

.chat-popup__subtitle svg {
  width: 12px;
  height: 12px;
}

.chat-popup__header .fp-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.chat-popup__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 22px;
  background: var(--color-bg-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--color-chatpopup-scrollbar) transparent;
  scrollbar-gutter: stable;
}

.chat-popup__body::before {
  content: "";
  flex: 1 1 auto;
}

.chat-popup__body:has(> .chat-popup__empty)::before {
  display: none;
}

.chat-popup__empty {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--color-text-placeholder);
  font-size: 13px;
  padding: 32px 0;
}

.chat-popup__empty svg {
  width: 28px;
  height: 28px;
  color: var(--color-border-strong);
}

/* ═══ 메시지 행 ═══ */
.chat-popup__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  animation: chat-popup-message-in 0.16s ease both;
}

@keyframes chat-popup-message-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-popup__msg:hover .chat-popup__actions {
  opacity: 1;
  pointer-events: auto;
}

.chat-popup__msg--mine {
  flex-direction: row-reverse;
}

.chat-popup__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-popup__bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(78%, 340px);
}

.chat-popup__msg--mine .chat-popup__bubble-wrap {
  align-items: flex-end;
}

.chat-popup__name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-left: 2px;
}

/* 인용 (답장) */
.chat-popup__quote {
  display: flex;
  gap: 5px;
  align-items: baseline;
  padding: 4px 10px;
  border-left: 3px solid var(--color-chatpopup-primary);
  background: var(--color-accent-soft-hover);
  border-radius: 6px;
  margin-bottom: 2px;
  max-width: 100%;
  overflow: hidden;
}

.chat-popup__quote-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-chatpopup-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-popup__quote-text {
  font-size: 11px;
  color: var(--color-chatpopup-quote-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-popup__bubble {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  background: var(--color-bg-white);
  color: var(--color-chatpopup-strong-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 3px var(--color-shadow-base);
}

.chat-popup__msg--mine .chat-popup__bubble {
  background: var(--color-chatpopup-primary);
  color: var(--color-text-on-brand);
  border-color: var(--color-chatpopup-primary);
  border-bottom-right-radius: 3px;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.14);
}

.chat-popup__msg:not(.chat-popup__msg--mine) .chat-popup__bubble {
  border-bottom-left-radius: 3px;
}

.chat-popup__meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
}

.chat-popup__time {
  font-size: 10.5px;
  color: var(--color-text-placeholder);
}

.chat-popup__read {
  font-size: 10px;
  color: var(--color-chatpopup-primary);
  font-weight: 600;
}

/* ═══ 호버 액션 버튼 ═══ */
.chat-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  align-self: center;
}

.chat-popup__actions--mine {
  order: -1;
}

.chat-popup__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.chat-popup__action-btn:hover {
  background: var(--color-chatpopup-primary);
  border-color: var(--color-chatpopup-primary);
  color: var(--color-text-on-brand);
}

/* ═══ 답장 바 ═══ */
.chat-popup__reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-accent-soft-hover);
  border-top: 1px solid var(--color-border-focus);
}

.chat-popup__reply-info {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--color-chatpopup-primary);
  font-size: 12px;
}

.chat-popup__reply-name {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-popup__reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-chatpopup-quote-text);
}

.chat-popup__reply-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-chatpopup-primary);
  cursor: pointer;
}

.chat-popup__reply-cancel:hover {
  background: var(--color-border-focus);
}

/* ═══ 입력 행 ═══ */
.chat-popup__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-white);
  border-radius: 0 0 12px 12px;
}

.chat-popup__input {
  flex: 1;
  min-height: 42px;
  max-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-muted);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  outline: none;
  resize: none;
  background: var(--color-bg-soft);
  color: var(--color-chatpopup-strong-text);
  overflow-y: auto;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.chat-popup__input:focus {
  border-color: var(--color-chatpopup-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-chatpopup-primary-glow);
}

.chat-popup__send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: var(--color-chatpopup-primary);
  color: var(--color-text-on-brand);
  cursor: pointer;
  transition: background 0.12s;
}

.chat-popup__send-btn:hover:not(:disabled) {
  background: var(--color-chatpopup-primary-hover);
}

.chat-popup__send-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-3, dark.css 흡수분)
   토큰 재정의로 정확히 커버되지 않는 값만 여기 남긴다.
   ================================================ */

[data-theme="dark"] .cp-channel-panel {
  border-color: var(--color-border);
  box-shadow: 0 24px 60px var(--color-chatpopup-panel-shadow-dark);
}

[data-theme="dark"] .cp-channel-panel .workspace-chat__messages {
  background: var(--color-bg-sunken-dark);
}

[data-theme="dark"] .cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__topic-bar {
  background: var(--color-bg-white);
}

[data-theme="dark"] .cp-channel-close {
  background: var(--color-chatpopup-close-bg-dark);
}

[data-theme="dark"] .cp-channel-close:hover {
  background: var(--color-border);
  color: var(--color-text-main);
}

[data-theme="dark"] .chat-popup__body {
  background: var(--color-bg-sunken-dark) !important;
}

[data-theme="dark"] .chat-popup__panel--dm {
  border-color: #34373e;
  background: #1f2126;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
}

[data-theme="dark"] .chat-popup__header {
  border-bottom-color: #34373e;
  background: #1f2126;
}

[data-theme="dark"] .chat-popup__subtitle {
  color: #a4a8b1;
}

[data-theme="dark"] .chat-popup__header-avatar {
  border-color: #3a3d44;
  background: #2b2e35;
}

[data-theme="dark"] .chat-popup__bubble {
  background: var(--color-bg-elevated-dark) !important;
  color: var(--color-text-main) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .chat-popup__msg--mine .chat-popup__bubble {
  background: var(--color-indigo-accent-dark) !important;
  color: var(--color-text-on-brand) !important;
  border-color: var(--color-indigo-accent-dark) !important;
}

[data-theme="dark"] .chat-popup__input-row {
  background: var(--color-bg-white) !important;
  border-top-color: var(--color-border) !important;
}

[data-theme="dark"] .chat-popup__input {
  background: var(--color-bg-sunken-dark) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-main) !important;
}

[data-theme="dark"] .chat-popup__input:focus {
  background: var(--color-bg-white) !important;
  border-color: var(--color-indigo-accent-dark) !important;
  box-shadow: 0 0 0 3px var(--color-brand-badge-bg) !important;
}

[data-theme="dark"] .chat-popup__action-btn {
  background: var(--color-bg-elevated-dark) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .chat-popup__action-btn:hover {
  background: var(--color-indigo-accent-dark) !important;
  border-color: var(--color-indigo-accent-dark) !important;
  color: var(--color-text-on-brand) !important;
}

[data-theme="dark"] .chat-popup__name {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .chat-popup__time {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .chat-popup__reply-bar {
  background: var(--color-brand-purple-soft-dark) !important;
  border-top-color: var(--color-chatpopup-reply-border-dark) !important;
}

[data-theme="dark"] .chat-popup__reply-info {
  color: var(--color-brand-badge);
}

[data-theme="dark"] .chat-popup__reply-cancel {
  color: var(--color-brand-badge);
}

[data-theme="dark"] .chat-popup__reply-cancel:hover {
  background: var(--color-chatpopup-reply-border-dark) !important;
}

[data-theme="dark"] .chat-popup__quote {
  background: var(--color-brand-purple-soft-dark) !important;
  border-left-color: var(--color-indigo-accent-dark) !important;
}

[data-theme="dark"] .chat-popup__quote-text {
  color: var(--color-brand-badge);
}

[data-theme="dark"] .chat-popup__send-btn {
  background: var(--color-indigo-accent-dark) !important;
}

[data-theme="dark"] .chat-popup__send-btn:hover:not(:disabled) {
  background: var(--color-chatpopup-primary-hover) !important;
}

[data-theme="dark"] .chat-popup__send-btn:disabled {
  background: var(--color-bg-elevated-dark) !important;
  color: var(--color-text-placeholder) !important;
}

/* 채널 팝업에서 리서치 로그 패널 */
.cp-channel-panel .workspace-chat.has-research-log .workspace-chat__messages {
  margin-right: 280px;
}

.cp-channel-panel .workspace-chat.has-research-log .workspace-chat__form {
  margin-right: 280px;
}

.cp-channel-panel .workspace-chat.has-research-log .workspace-chat__channel-header {
  padding-right: calc(56px + 280px);
}

@media (hover: none) {
  .chat-popup__actions {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-popup__msg { animation: none; }
}

@media (max-width: 640px) {
  .fp-backdrop.cp-channel-backdrop {
    align-items: center;
    padding: 12px 10px calc(12px + var(--app-bottom-bar, 0px));
  }

  .cp-channel-panel:not(.cp-channel-panel--ai) {
    width: calc(100vw - 20px);
    max-width: none;
    height: calc(100dvh - var(--app-bottom-bar, 0px) - 24px);
    max-height: calc(100dvh - var(--app-bottom-bar, 0px) - 24px);
  }

  .cp-channel-panel .workspace-chat__channel-header {
    min-height: 54px;
    padding: 8px 52px 8px 10px;
  }

  .cp-channel-panel .workspace-chat__messages {
    padding: 14px 12px 18px;
  }

  .cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__bubble-wrap {
    max-width: calc(100% - 88px);
  }

  .cp-channel-panel:not(.cp-channel-panel--ai) .workspace-chat__form {
    margin: 8px;
  }

  .cp-channel-panel .workspace-chat.has-research-log .workspace-chat__messages,
  .cp-channel-panel .workspace-chat.has-research-log .workspace-chat__form {
    margin-right: 0;
  }

  .cp-channel-panel .workspace-chat.has-research-log .workspace-chat__channel-header {
    padding-right: 52px;
  }

  .fp-backdrop.chat-popup__backdrop:not(.cp-channel-backdrop) {
    align-items: center;
    padding: 16px 12px calc(16px + var(--app-bottom-bar, 0px));
  }

  .chat-popup__panel--dm {
    width: min(480px, calc(100vw - 24px));
    max-width: 480px;
    height: min(720px, calc(100dvh - var(--app-bottom-bar, 0px) - 32px));
    max-height: calc(100dvh - var(--app-bottom-bar, 0px) - 32px);
    border-radius: 12px;
  }

  .chat-popup__identity .fp-title {
    max-width: calc(100vw - 130px);
  }

  .chat-popup__body {
    padding-right: 12px;
    padding-left: 12px;
  }

  .chat-popup__bubble-wrap {
    max-width: 82%;
  }

  .chat-popup__input-row {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-radius: 0 0 12px 12px;
  }
}

@media (max-width: 480px) {
  .fp-backdrop.cp-channel-backdrop {
    align-items: flex-end;
    padding: 0 0 var(--app-bottom-bar, 0px);
  }

  .cp-channel-panel:not(.cp-channel-panel--ai) {
    width: 100%;
    height: calc(100dvh - var(--app-bottom-bar, 0px));
    max-height: calc(100dvh - var(--app-bottom-bar, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
  }

  .fp-backdrop.chat-popup__backdrop:not(.cp-channel-backdrop) {
    align-items: flex-end;
    padding: 0 0 var(--app-bottom-bar, 0px);
  }

  .chat-popup__panel--dm {
    width: 100%;
    max-width: 100%;
    height: min(90dvh, 760px);
    max-height: calc(100dvh - var(--app-bottom-bar, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 12px 12px 0 0;
  }

  .chat-popup__input-row {
    border-radius: 0;
  }
}
:root {
  --color-ws-accent: rgb(83, 74, 183);
  --color-ws-text-strong: rgb(29, 41, 57);
  --color-ws-accent-bright: rgb(111, 100, 216);
  --color-ws-accent-soft: rgb(238, 237, 254);
  --color-ws-scrollbar: rgba(148, 163, 184, 0.48);
  --color-ws-unread-bg: rgb(102, 91, 209);
  --color-ws-dropdown-shadow: rgba(0, 0, 0, 0.12);
  --color-ws-focus-ring: rgba(111, 100, 216, 0.15);
  --color-ws-focus-ring-2: rgba(111, 100, 216, 0.12);
  --color-ws-board-guide: rgba(148, 163, 184, 0.25);
  --color-ws-accent-soft-2: rgba(83, 74, 183, 0.1);
  --color-ws-info-text: rgb(71, 84, 103);
  --color-ws-partnership-hover-bg: rgba(124, 58, 237, 0.07);
  --color-ws-integration-on-bg: rgba(74, 21, 75, 0.06);
}

/* 다크 값: 기존 dark.css는 .workspace-sidebar 배경/테두리만 커버하고
   있었고(그대로 보존), 나머지(활성 링크 강조색/드롭다운/채널 추가 폼
   등)는 사각지대라 이번에 브랜드 퍼플 계열로 새로 부여 */
[data-theme="dark"] {
  --color-ws-accent: var(--color-accent);
  --color-ws-text-strong: var(--color-text-main);
  --color-ws-accent-bright: rgb(167, 153, 234);
  --color-ws-accent-soft: rgb(45, 41, 78);
  --color-ws-unread-bg: var(--color-accent);
  --color-ws-dropdown-shadow: rgba(0, 0, 0, 0.4);
  --color-ws-focus-ring: rgba(167, 153, 234, 0.2);
  --color-ws-focus-ring-2: rgba(167, 153, 234, 0.18);
  --color-ws-board-guide: rgba(100, 116, 139, 0.4);
  --color-ws-accent-soft-2: rgba(167, 153, 234, 0.16);
  --color-ws-info-text: var(--color-text-muted);
  --color-ws-partnership-hover-bg: rgba(167, 139, 250, 0.12);
  --color-ws-integration-on-bg: rgba(167, 139, 250, 0.14);
}

/* ── 연동 섹션 ── */
.ws-integration-section {
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.ws-integration-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-placeholder);
  padding: 0 6px;
  margin-bottom: 4px;
}
.ws-integration-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ws-integration-item:hover { background: var(--color-bg-soft); }
.ws-integration-item--on { background: var(--color-ws-integration-on-bg); }

.ws-integration-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-main);
  flex: 1;
}
.ws-integration-status {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.ws-integration-status--on  { color: var(--color-success); }
.ws-integration-status--off { color: var(--color-text-placeholder); }

.workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 8px 18px;
  overflow-y: auto;
  background: var(--color-bg-white);
  border-right: 1px solid var(--color-border);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.workspace-sidebar:hover {
  scrollbar-color: var(--color-ws-scrollbar) transparent;
}

.workspace-sidebar__section {
  padding: 5px 0;
}

.workspace-sidebar__section + .workspace-sidebar__section {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--color-border);
}

.workspace-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.workspace-sidebar__title {
  margin: 0;
  color: var(--color-text-placeholder);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.workspace-sidebar__section-label {
  padding: 1px 10px 6px;
}

.workspace-sidebar__link,
.workspace-sidebar__channel-link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 37px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.workspace-sidebar__link:hover,
.workspace-sidebar__channel-link:hover {
  background: var(--color-bg-soft);
  color: var(--color-ws-text-strong);
}

.workspace-sidebar__link--active,
.workspace-sidebar__channel-link.workspace-sidebar__link--active {
  background: var(--color-ws-accent-soft);
  color: var(--color-ws-accent);
  font-weight: 700;
}

.workspace-sidebar__link--active::before,
.workspace-sidebar__channel-link.workspace-sidebar__link--active::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-ws-accent-bright);
  content: "";
}

.workspace-sidebar__link--active:hover,
.workspace-sidebar__channel-link.workspace-sidebar__link--active:hover {
  background: var(--color-ws-accent-soft);
  color: var(--color-ws-accent);
}

.workspace-sidebar__link-icon,
.workspace-sidebar__channel-hash {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 9px;
  color: var(--color-text-placeholder);
  stroke-width: 1.8;
}

.workspace-sidebar__link--active .workspace-sidebar__link-icon,
.workspace-sidebar__channel-link.workspace-sidebar__link--active
  .workspace-sidebar__channel-hash {
  color: var(--color-ws-accent);
}

.workspace-sidebar__link-label,
.workspace-sidebar__channel-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-sidebar__link-label,
.workspace-sidebar__channel-name {
  flex: 1;
}

.workspace-sidebar__section-header {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 7px 3px 10px;
}

.workspace-sidebar__section-toggle {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 4px 2px 4px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.workspace-sidebar__section-toggle:hover {
  background: var(--color-bg-soft);
}

.workspace-sidebar__section-toggle:hover .workspace-sidebar__title,
.workspace-sidebar__section-toggle:hover .workspace-sidebar__section-chevron,
.workspace-sidebar__section-toggle:hover .workspace-sidebar__count {
  color: var(--color-text-muted);
}

.workspace-sidebar__section-chevron {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  color: var(--color-text-placeholder);
  transition: transform 0.16s ease;
}

.workspace-sidebar__section-chevron.is-open {
  transform: rotate(180deg);
}

.workspace-sidebar__count {
  margin-left: 5px;
  color: var(--color-text-placeholder);
  font-size: 10px;
  font-weight: 700;
}

.workspace-sidebar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  opacity: 0;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.workspace-sidebar__section--channels:hover .workspace-sidebar__icon-btn,
.workspace-sidebar__icon-btn:focus-visible,
.workspace-sidebar__icon-btn[aria-expanded="true"] {
  opacity: 1;
}

.workspace-sidebar__icon-btn:hover {
  background: var(--color-bg-soft);
  color: var(--color-ws-accent);
}

.workspace-sidebar__channel-list {
  gap: 1px;
}

.workspace-sidebar__channel-link {
  min-height: 34px;
  padding-right: 8px;
}

.workspace-sidebar__channel-hash {
  width: 15px;
  height: 15px;
  margin-right: 7px;
}

.workspace-sidebar__unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-ws-unread-bg);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* 채널 아이템 래퍼 (hover 시 ... 버튼 표시) */
.workspace-sidebar__channel-item {
  position: relative;
  display: flex;
  align-items: center;
}

.workspace-sidebar__channel-item .workspace-sidebar__channel-link {
  flex: 1;
  min-width: 0;
}

.workspace-sidebar__channel-item--active .workspace-sidebar__channel-link {
  background: var(--color-ws-accent-soft);
  color: var(--color-ws-accent);
  font-weight: 700;
}

.workspace-sidebar__channel-item--active .workspace-sidebar__channel-link::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-ws-accent-bright);
  content: "";
}

.workspace-sidebar__channel-more {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  margin-right: 4px;
  padding: 0;
}

.workspace-sidebar__channel-item:hover .workspace-sidebar__channel-more {
  display: flex;
}

.workspace-sidebar__channel-more:hover {
  background: var(--color-border);
  color: var(--color-ws-text-strong);
}

.workspace-sidebar__channel-menu-wrap {
  position: relative;
}

.workspace-sidebar__channel-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  z-index: 200;
  min-width: 120px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--color-border-strong);
  border-radius: 9px;
  background: var(--color-bg-white);
  box-shadow: 0 8px 24px var(--color-ws-dropdown-shadow);
}

.workspace-sidebar__channel-dropdown li button {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-ws-text-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.workspace-sidebar__channel-dropdown li button:hover {
  background: var(--color-bg-soft);
}

.workspace-sidebar__channel-dropdown--danger {
  color: var(--color-danger) !important;
}

.workspace-sidebar__channel-dropdown--danger:hover {
  background: var(--color-danger-soft) !important;
}

/* 이름변경 인라인 입력 */
.workspace-sidebar__rename-row {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 8px 0 10px;
  min-height: 34px;
}

.workspace-sidebar__rename-input {
  flex: 1;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--color-ws-accent-bright);
  border-radius: 6px;
  outline: none;
  background: var(--color-bg-white);
  color: var(--color-ws-text-strong);
  font: inherit;
  font-size: 12px;
  box-shadow: 0 0 0 2px var(--color-ws-focus-ring);
  box-sizing: border-box;
}

.workspace-sidebar__add-channel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 7px 2px 2px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-bg-soft);
}

.workspace-sidebar__add-channel-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  outline: none;
  background: var(--color-bg-white);
  color: var(--color-ws-text-strong);
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}

.workspace-sidebar__add-channel-input:focus {
  border-color: var(--color-ws-accent-bright);
  box-shadow: 0 0 0 3px var(--color-ws-focus-ring-2);
}

.workspace-sidebar__add-channel-btns {
  display: flex;
  gap: 6px;
}

.workspace-sidebar__add-channel-cancel,
.workspace-sidebar__add-channel-confirm {
  flex: 1;
  height: 29px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.workspace-sidebar__add-channel-cancel {
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
}

.workspace-sidebar__add-channel-confirm {
  border: 1px solid var(--color-ws-accent);
  background: var(--color-ws-accent);
  color: var(--color-text-on-brand);
}

.workspace-sidebar__add-channel-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.workspace-sidebar__board-list {
  gap: 1px;
  margin-left: 17px;
  padding-left: 8px;
  border-left: 1px solid var(--color-ws-board-guide);
}

.workspace-sidebar__board-category {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.workspace-sidebar__board-category:hover {
  background: var(--color-bg-soft);
  color: var(--color-ws-text-strong);
}

.workspace-sidebar__board-category--active {
  background: var(--color-ws-accent-soft-2);
  color: var(--color-ws-accent);
  font-weight: 700;
}

.workspace-sidebar__chat-search {
  display: none;
}

.workspace-sidebar__section--info {
  background: transparent;
}

.workspace-sidebar__info-label {
  margin: 0 0 8px;
  color: var(--color-ws-accent);
  font-size: 12px;
  font-weight: 800;
}

.workspace-sidebar__info-text {
  margin: 0;
  color: var(--color-ws-info-text);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .workspace-sidebar--desktop {
    display: none;
  }

  .workspace-sidebar {
    gap: 7px;
    padding: 8px;
    overflow-x: hidden;
  }

  .workspace-sidebar__section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
  }

  .workspace-sidebar__section + .workspace-sidebar__section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .workspace-sidebar__section-label,
  .workspace-sidebar__section-header {
    display: none;
  }

  .workspace-sidebar__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .workspace-sidebar__nav::-webkit-scrollbar {
    display: none;
  }

  .workspace-sidebar__link,
  .workspace-sidebar__channel-link {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    white-space: nowrap;
  }

  .workspace-sidebar__link--active::before,
  .workspace-sidebar__channel-link.workspace-sidebar__link--active::before {
    top: auto;
    right: 10px;
    bottom: 0;
    left: 10px;
    width: auto;
    height: 2px;
    border-radius: 2px 2px 0 0;
  }

  .workspace-sidebar__section--channels,
  .workspace-sidebar__section--board {
    display: none;
  }

  .workspace-sidebar--mobile-drawer {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 0;
    padding: 10px 8px 24px;
    border-right: 0;
    overflow-y: auto;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__section {
    padding: 4px 0;
    overflow: visible;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__section + .workspace-sidebar__section {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--color-border);
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__section-header {
    display: flex;
    min-height: 38px;
    padding: 0 7px 4px 10px;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__section-label {
    display: block;
    padding: 1px 10px 6px;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    overflow: visible;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__link,
  .workspace-sidebar--mobile-drawer .workspace-sidebar__channel-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
    white-space: normal;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__link--active::before,
  .workspace-sidebar--mobile-drawer
    .workspace-sidebar__channel-link.workspace-sidebar__link--active::before {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: -8px;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__section--channels,
  .workspace-sidebar--mobile-drawer .workspace-sidebar__section--board {
    display: block;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__board-list {
    display: flex;
    margin: 2px 6px 6px 20px;
    padding-left: 10px;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__board-category {
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__channel-link {
    min-height: 42px;
    padding: 9px 12px;
  }

  .workspace-sidebar--mobile-drawer .workspace-sidebar__icon-btn {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
}

/* 홈 페이지 wh-sidebar 안에 임베드될 때 */
.workspace-sidebar--home-embedded {
  flex: 1;
  min-height: 0;
  border-right: none;
  box-shadow: none;
  background: transparent;
  overflow-y: auto;
  padding: 6px 6px 16px;
  gap: 4px;
}

/* 임베드 모드 — 칩바와 중복되는 항목은 데스크탑 사이드바와 동일하게 숨김 */
.workspace-sidebar--home-embedded .workspace-sidebar__notice-btn,
.workspace-sidebar--home-embedded .workspace-sidebar__todo-link-wrap,
.workspace-sidebar--home-embedded .workspace-sidebar__task-link-wrap,
.workspace-sidebar--home-embedded .workspace-sidebar__calendar-link-wrap,
.workspace-sidebar--home-embedded .workspace-sidebar__vote-link-wrap,
.workspace-sidebar--home-embedded .workspace-sidebar__finance-link-wrap {
  display: none;
}

.workspace-sidebar--desktop .workspace-sidebar__notice-btn,
.workspace-sidebar--desktop .workspace-sidebar__todo-link-wrap,
.workspace-sidebar--desktop .workspace-sidebar__calendar-link-wrap,
.workspace-sidebar--desktop .workspace-sidebar__vote-link-wrap,
.workspace-sidebar--desktop .workspace-sidebar__task-link-wrap,
.workspace-sidebar--desktop .workspace-sidebar__finance-link-wrap {
  display: none;
}



/* ── 파트너십 채널 ─────────────────────────────────────────────────────────── */
.workspace-sidebar__channel-link--partnership {
  color: var(--color-accent);
}
.workspace-sidebar__channel-link--partnership:hover {
  background: var(--color-ws-partnership-hover-bg);
  color: var(--color-accent-hover);
}
.workspace-sidebar__channel-hash--partnership {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분)
   dark.css의 워크스페이스 사이드바 / 채팅 규칙 중 .workspace-sidebar
   지분을 흡수 (동봉된 .ws-sidebar는 코드베이스 어디서도 쓰이지 않는
   사문화 클래스라 옮기지 않고 폐기) */
[data-theme="dark"] .workspace-sidebar {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}
/* 이 파일 전용 로컬 토큰(6-B2 WS-4) - colors.css 공유 토큰과 거리가
   있는(Δ>12) 값 보존을 위해 파일 내부에 스코프. 다크값은
   [data-theme="dark"] 블록에서 개별 재정의. */
:root {
  --color-bp-primary: rgb(99, 102, 241);
  --color-bp-primary-glow: rgba(99, 102, 241, 0.1);
  --color-bp-primary-glow-30: rgba(99, 102, 241, 0.3);
  --color-bp-muted-2: rgb(71, 85, 105);
  --color-bp-primary-hover: rgb(59, 82, 230);
  --color-bp-backdrop: rgba(15, 23, 42, 0.45);
  --color-bp-panel-shadow: rgba(15, 23, 42, 0.24);
  --color-bp-empty-btn-a: rgb(79, 70, 229);
  --color-bp-empty-btn-b: rgb(37, 99, 235);
  --color-bp-empty-btn-glow: rgba(79, 70, 229, 0.3);
  --color-bp-notice-bg: rgba(79, 70, 229, 0.1);
  --color-bp-notice-text: rgb(67, 56, 202);
  --color-bp-error-border: rgb(254, 202, 202);
  --color-bp-detail-text: rgb(30, 41, 59);
  --color-bp-delete-hover: rgb(239, 68, 68);
}

/* 다크 전용(라이트 대응 없음) - dark.css 흡수 과정에서 필요한 값만 최소로 추가 */
[data-theme="dark"] {
  --color-bp-pinned-bg-dark: rgba(241, 245, 249, 0.08);
  --color-bp-notice-bg-dark: rgba(99, 102, 241, 0.12);
  --color-bp-error-bg-dark: rgba(220, 38, 38, 0.1);
  --color-bp-error-border-dark: rgba(220, 38, 38, 0.3);

  /* 6-B2 WS-4 Step6: 다크 명도 검사 - 아래 텍스트 계열 로컬 토큰이
     다크에서도 라이트와 같은 값을 쓰면 너무 어두워 안 보이므로 밝은
     톤으로 재정의(보조 텍스트 → 회색, 강조 → 밝은 인디고, 본문 →
     밝은 회색조). */
  --color-bp-muted-2: rgb(148, 163, 184);
  --color-bp-notice-text: rgb(165, 180, 252);
  --color-bp-detail-text: rgb(241, 245, 249);
}

/* ── 배경 오버레이 ── */
.bp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bp-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: bp-fade-in 0.18s ease both;
}

@keyframes bp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 팝업 패널 ── */
.bp-panel {
  width: 100%;
  max-width: 680px;
  max-height: min(700px, calc(100vh - 48px));
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 32px 80px var(--color-bp-panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bp-slide-up 0.2s ease both;
}

@keyframes bp-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 헤더 ── */
.bp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--color-bg-soft);
  flex-shrink: 0;
}

.bp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bp-header-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.bp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.2;
}

.bp-meta {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-placeholder);
}

.bp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.bp-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}

.bp-close:hover {
  background: var(--color-border);
  color: var(--color-text-main);
}

/* ── 검색 ── */
.bp-search {
  display: flex;
  justify-content: flex-end;
}

.bp-search-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.14s, border-color 0.14s;
}

.bp-search-toggle:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}

.bp-search:not(.is-open) .bp-search-box { display: none; }
.bp-search.is-open .bp-search-toggle    { display: none; }

.bp-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 14px;
  animation: bp-search-in 0.15s ease both;
}

@keyframes bp-search-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bp-search-box:focus-within {
  border-color: var(--color-bp-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-bp-primary-glow);
}

.bp-search-box input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-main);
  font-size: 13px;
  font-weight: 600;
  width: 140px;
}

.bp-search-box input::placeholder { color: var(--color-text-placeholder); }

.bp-search-clear {
  border: 0;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.14s;
}

.bp-search-clear:hover { color: var(--color-bp-muted-2); }

/* ── 본문 스크롤 영역 ── */
.bp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* ── 빈 상태 ── */
.bp-state {
  color: var(--color-text-muted);
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
}

.bp-empty {
  text-align: center;
  padding: 48px 24px 32px;
  background: var(--color-bg-soft);
  border-radius: 16px;
}

.bp-empty-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-main);
}

.bp-empty-desc {
  margin: 8px 0 20px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.bp-empty-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--color-bp-empty-btn-a) 0%, var(--color-bp-empty-btn-b) 100%);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
}

.bp-empty-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--color-bp-empty-btn-glow);
}

/* ── 게시글 목록 ── */
.bp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bp-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--color-bg-soft);
  border-radius: 14px;
  background: var(--color-bg-white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

.bp-item:hover {
  border-color: var(--color-bp-primary-glow-30);
  box-shadow: 0 6px 18px var(--color-shadow-strong);
  transform: translateY(-1px);
}

.bp-item-main { flex: 1; min-width: 0; }

.bp-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.bp-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.bp-badge--pinned { background: var(--color-shadow-strong); color: var(--color-text-main); }
.bp-badge--notice { background: var(--color-bp-notice-bg); color: var(--color-bp-notice-text); }

.bp-category {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.bp-item-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-item-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-placeholder);
}

.bp-item-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-placeholder);
  white-space: nowrap;
}

/* ── 글쓰기 버튼 ── */
.bp-write-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 24px 20px;
  padding: 12px 0;
  border: 0;
  border-radius: 12px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, transform 0.14s, box-shadow 0.14s;
}

.bp-write-btn:hover {
  background: var(--color-bp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--color-brand-glow-fab);
}

/* ── 뒤로 가기 버튼 ── */
.bp-back-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}

.bp-back-btn:hover {
  background: var(--color-bg-soft);
  color: var(--color-text-main);
}

/* ── 글쓰기 폼 ── */
.bp-write-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.bp-write-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bp-write-options {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bp-check {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-bp-muted-2);
  user-select: none;
}

.bp-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand-icon);
  cursor: pointer;
}

.bp-write-field {
  display: flex;
  flex-direction: column;
}

.bp-write-title-input {
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-main);
  background: var(--color-bg-soft);
  outline: none;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.bp-write-title-input::placeholder {
  color: var(--color-text-placeholder);
  font-weight: 500;
}

.bp-write-title-input:focus {
  border-color: var(--color-bp-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-bp-primary-glow);
}

.bp-write-title-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-write-field--editor {
  flex: 1;
  min-height: 200px;
}

.bp-write-field--editor > * {
  height: 100%;
  min-height: 200px;
}

.bp-write-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-bp-error-border);
}

.bp-write-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--color-bg-soft);
  flex-shrink: 0;
}

.bp-write-cancel {
  height: 38px;
  padding: 0 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-white);
  color: var(--color-bp-muted-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}

.bp-write-cancel:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}

.bp-write-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bp-write-submit {
  height: 38px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.14s, transform 0.14s, box-shadow 0.14s;
}

.bp-write-submit:hover:not(:disabled) {
  background: var(--color-bp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--color-brand-glow-fab);
}

.bp-write-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 글쓰기 뷰일 때 팝업 높이 확장 */
.bp-panel--write {
  max-height: min(820px, calc(100vh - 48px));
}

/* ── 모바일 ── */
@media (max-width: 640px) {
  .bp-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .bp-panel {
    max-width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
  }

  .bp-panel--write {
    max-height: 95vh;
  }
}


/* ── 상세 뷰 ── */
.bp-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bp-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-placeholder);
}

.bp-detail-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-bp-detail-text);
  word-break: break-word;
}

.bp-detail-content img {
  max-width: 100%;
  border-radius: 8px;
}

.bp-state {
  padding: 40px 0;
  text-align: center;
  color: var(--color-text-placeholder);
  font-size: 14px;
}

/* ── 댓글 영역 ── */
.bp-comments {
  border-top: 1px solid var(--color-bg-soft);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bp-comments-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bp-muted-2);
}

.bp-comments-empty {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-placeholder);
  text-align: center;
  padding: 16px 0;
}

.bp-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bp-comment-item {
  background: var(--color-bg-soft);
  border-radius: 10px;
  padding: 12px 14px;
}

.bp-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bp-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-main);
}

.bp-comment-date {
  font-size: 11px;
  color: var(--color-text-placeholder);
  margin-left: auto;
}

.bp-comment-delete {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.14s;
  flex-shrink: 0;
}

.bp-comment-delete:hover {
  color: var(--color-bp-delete-hover);
}

.bp-comment-content {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}

.bp-comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bp-comment-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-main);
  background: var(--color-bg-soft);
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.bp-comment-input::placeholder { color: var(--color-text-placeholder); }

.bp-comment-input:focus {
  border-color: var(--color-bp-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-bp-primary-glow);
}

.bp-comment-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bp-comment-submit {
  align-self: flex-end;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, transform 0.14s;
}

.bp-comment-submit:hover:not(:disabled) {
  background: var(--color-bp-primary-hover);
  transform: translateY(-1px);
}

.bp-comment-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── 카테고리 탭 ── */
.bp-cat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid var(--color-bg-soft);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.bp-cat-tabs::-webkit-scrollbar { display: none; }

.bp-cat-tab {
  flex-shrink: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.13s, background 0.13s;
  position: relative;
}
.bp-cat-tab:hover { color: var(--color-text-sub); background: var(--color-bg-soft); }
.bp-cat-tab.is-active {
  color: var(--color-brand-icon);
  background: transparent;
}
.bp-cat-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-brand-icon);
  border-radius: 2px 2px 0 0;
}

/* ── 카테고리 선택 (글쓰기 폼) ── */
.bp-category-select {
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--color-text-sub);
  background: var(--color-bg-soft);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.bp-category-select:focus {
  border-color: var(--color-bp-primary);
  background: var(--color-bg-white);
  box-shadow: 0 0 0 3px var(--color-bp-primary-glow);
}
.bp-category-select:disabled { opacity: 0.6; cursor: not-allowed; }

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-4, dark.css 흡수분)
   토큰 재정의로 정확히 커버되지 않는 값만 여기 남긴다.
   ================================================ */

[data-theme="dark"] .bp-search-toggle,
[data-theme="dark"] .bp-search-box {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .bp-search-box:focus-within {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-indigo-accent-dark);
}

[data-theme="dark"] .bp-search-box input::placeholder {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-item {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border-sunken-dark);
}

[data-theme="dark"] .bp-item:hover {
  border-color: var(--color-bp-primary-glow-30);
  box-shadow: 0 6px 18px var(--color-shadow-base);
}

[data-theme="dark"] .bp-badge--pinned {
  background: var(--color-bp-pinned-bg-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .bp-badge--notice {
  background: var(--color-bp-notice-bg-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .bp-category {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-empty {
  background: var(--color-bg-white);
}

[data-theme="dark"] .bp-empty-desc {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-back-btn {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .bp-back-btn:hover {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .bp-write-footer {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .bp-write-title-input {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .bp-write-title-input::placeholder {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-write-title-input:focus {
  border-color: var(--color-indigo-accent-dark);
}

[data-theme="dark"] .bp-check {
  color: var(--color-text-muted);
}

[data-theme="dark"] .bp-write-cancel {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .bp-write-cancel:hover {
  background: var(--color-bg-elevated-dark);
  border-color: var(--color-border-muted);
}

[data-theme="dark"] .bp-write-error {
  background: var(--color-bp-error-bg-dark);
  border-color: var(--color-bp-error-border-dark);
}

[data-theme="dark"] .bp-detail-content {
  color: var(--color-text-sub);
}

[data-theme="dark"] .bp-comments {
  border-top-color: var(--color-border);
}

[data-theme="dark"] .bp-comments-title {
  color: var(--color-text-muted);
}

[data-theme="dark"] .bp-comment-item {
  background: var(--color-bg-white);
}

[data-theme="dark"] .bp-comment-date {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-comment-delete {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-comment-delete:hover {
  color: var(--color-danger);
}

[data-theme="dark"] .bp-comment-input {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .bp-comment-input::placeholder {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .bp-comment-input:focus {
  border-color: var(--color-indigo-accent-dark);
}
/* ────────────────────────────────────────────────────
   AI Task Manager Popup — TodoPopup
──────────────────────────────────────────────────── */
:root {
  --color-tpp-danger-border: rgb(252, 165, 165);
  --color-tpp-success: rgb(34, 197, 94);
  --color-tpp-warning: rgb(217, 119, 6);
  --color-tpp-indigo: rgb(79, 70, 229);
  --color-tpp-focus: rgb(99, 102, 241);
  --color-tpp-warning-soft: rgb(255, 251, 235);
  --color-tpp-warning-border: rgb(252, 211, 77);
  --color-tpp-brand-hover: rgb(59, 82, 230);
  --color-tpp-focus-ring: rgba(99, 102, 241, 0.1);
  --color-tpp-backdrop: rgba(15, 23, 42, 0.45);
  --color-tpp-panel-shadow: rgba(15, 23, 42, 0.24);
  --color-tpp-active-ring: rgba(73, 101, 255, 0.12);
  --color-tpp-indigo-light: rgb(129, 140, 248);
  --color-tpp-focus-soft: rgb(199, 210, 254);
  --color-tpp-count-bg: rgba(0, 0, 0, 0.07);
  --color-tpp-count-bg-active: rgba(255, 255, 255, 0.25);
  --color-tpp-alert-count-bg: rgba(220, 38, 38, 0.12);
  --color-tpp-item-hover-border: rgba(99, 102, 241, 0.25);
  --color-tpp-zone-border: rgb(221, 214, 254);
  --color-tpp-low-border: rgb(187, 247, 208);
  --color-tpp-date-sep: rgb(203, 213, 225);
}

/* 다크 값: dark.css 커버가 전무한 사각지대라 이번에 새로 부여.
   비비드 상태색(성공/경고/위험) 계열은 앱 전역 다크 재정의 톤에 맞춤 */
[data-theme="dark"] {
  --color-tpp-danger-border: var(--color-danger);
  --color-tpp-success: var(--color-success);
  --color-tpp-warning: var(--color-status-pending);
  --color-tpp-indigo: rgb(129, 140, 248);
  --color-tpp-focus: var(--color-indigo-accent-dark);
  --color-tpp-warning-soft: rgb(45, 31, 0);
  --color-tpp-warning-border: rgb(146, 90, 6);
  --color-tpp-brand-hover: rgb(91, 118, 255);
  --color-tpp-focus-ring: rgba(129, 140, 248, 0.18);
  --color-tpp-backdrop: rgba(2, 6, 16, 0.6);
  --color-tpp-panel-shadow: rgba(0, 0, 0, 0.4);
  --color-tpp-active-ring: rgba(129, 140, 248, 0.2);
  --color-tpp-indigo-light: rgb(165, 180, 252);
  --color-tpp-focus-soft: rgb(67, 56, 202);
  --color-tpp-count-bg: rgba(255, 255, 255, 0.08);
  --color-tpp-count-bg-active: rgba(255, 255, 255, 0.2);
  --color-tpp-alert-count-bg: rgba(248, 113, 113, 0.18);
  --color-tpp-item-hover-border: rgba(129, 140, 248, 0.35);
  --color-tpp-zone-border: rgb(76, 29, 149);
  --color-tpp-low-border: rgb(22, 101, 52);
  --color-tpp-date-sep: rgb(100, 116, 139);
}

.tpp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-tpp-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: tpp-fade 0.18s ease both;
}
@keyframes tpp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tpp-panel {
  width: 100%;
  max-width: 680px;
  max-height: min(780px, calc(100vh - 48px));
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 32px 80px var(--color-tpp-panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tpp-slide 0.2s ease both;
}
@keyframes tpp-slide {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 헤더 ── */
.tpp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.tpp-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tpp-header-icon { color: var(--color-tpp-indigo); flex-shrink: 0; }
.tpp-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1.2;
}
.tpp-meta {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-placeholder);
}
.tpp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tpp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s;
}
.tpp-add-btn:hover { background: var(--color-tpp-brand-hover); }
.tpp-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: var(--color-border); color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.tpp-close:hover { background: var(--color-border); color: var(--color-text-main); }

/* ── 로드맵 진행도 ── */
.tpp-roadmap {
  padding: 14px 24px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tpp-rm-stats {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tpp-rm-pct {
  font-size: 26px;
  font-weight: 750;
  color: var(--color-brand-icon);
  line-height: 1;
}
.tpp-rm-text {
  font-size: 13px;
  color: var(--color-text-placeholder);
  font-weight: 600;
}
.tpp-rm-overdue {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-tpp-danger-border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* 트랙 */
.tpp-rm-track-wrap {
  position: relative;
}
.tpp-rm-track {
  position: absolute;
  top: 9px;
  left: calc(100% / 6);
  width: calc(100% * 2 / 3);
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.tpp-rm-track-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-icon), var(--color-tpp-success));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* 노드 행 */
.tpp-rm-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.tpp-rm-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* 노드 원 */
.tpp-rm-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  background: var(--color-bg-soft);
  transition: all 0.2s;
}
.tpp-rm-node--pending.has-items .tpp-rm-dot { border-color: var(--color-text-placeholder); background: var(--color-border); }
.tpp-rm-node--active.has-items  .tpp-rm-dot { border-color: var(--color-brand-icon); background: var(--color-brand-soft); box-shadow: 0 0 0 3px var(--color-tpp-active-ring); }
.tpp-rm-node--done.has-items    .tpp-rm-dot { border-color: var(--color-tpp-success); background: var(--color-success-soft); }

/* 노드 텍스트 */
.tpp-rm-count {
  font-size: 18px;
  font-weight: 750;
  color: var(--color-text-placeholder);
  line-height: 1;
}
.tpp-rm-node--active.has-items .tpp-rm-count { color: var(--color-brand-icon); }
.tpp-rm-node--done.has-items   .tpp-rm-count { color: var(--color-tpp-success); }
.tpp-rm-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-placeholder);
  white-space: nowrap;
}

/* 구역별 진행 바 */
.tpp-rm-zones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}
.tpp-rm-zone {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tpp-rm-zone-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 70px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tpp-rm-zone-bar {
  flex: 1;
  height: 5px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.tpp-rm-zone-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-brand-icon), var(--color-tpp-indigo-light));
  border-radius: 3px;
  transition: width 0.35s ease;
}
.tpp-rm-zone-stat {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-placeholder);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 추가 폼 ── */
.tpp-form {
  padding: 14px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.tpp-form-input {
  width: 100%; height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--color-border); border-radius: 10px;
  font-size: 14px; color: var(--color-text-main); background: var(--color-bg-soft);
  outline: none; box-sizing: border-box;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.tpp-form-input:focus { border-color: var(--color-tpp-focus); background: var(--color-bg-white); box-shadow: 0 0 0 3px var(--color-tpp-focus-ring); }
.tpp-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.tpp-form-sel {
  flex: 1; min-width: 110px;
  height: 36px; box-sizing: border-box;
  padding: 0 10px;
  border: 1.5px solid var(--color-border); border-radius: 8px;
  font-size: 13px; color: var(--color-text-main); background: var(--color-bg-soft);
  outline: none; cursor: pointer;
}
.tpp-form-sel:focus { border-color: var(--color-tpp-focus); }

/* 날짜 입력 래퍼 — 래퍼가 select와 동일한 시각적 박스 역할 */
.tpp-date-wrap {
  flex: 1; min-width: 110px;
  height: 36px; box-sizing: border-box;
  border: 1.5px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-soft); overflow: hidden;
  display: flex; align-items: center;
}
.tpp-date-wrap:hover { border-color: var(--color-tpp-focus-soft); background: var(--color-bg-white); }
.tpp-date-wrap:focus-within { border-color: var(--color-tpp-focus); background: var(--color-bg-white); box-shadow: 0 0 0 3px var(--color-tpp-focus-ring); }

/* input 자체는 래퍼 안을 채우기만 함 */
.tpp-form-date {
  width: 100%; height: 100%;
  border: none; background: transparent; outline: none;
  padding: 0 8px 0 10px;
  font-size: 13px; font-family: inherit; color: var(--color-text-main);
  letter-spacing: 0.01em; cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
  color-scheme: light;
}
.tpp-form-date::-webkit-calendar-picker-indicator {
  width: 14px; height: 14px;
  padding: 2px; border-radius: 4px;
  cursor: pointer; opacity: 0.55;
  filter: invert(30%) sepia(80%) saturate(500%) hue-rotate(215deg);
  transition: opacity 0.14s;
}
.tpp-form-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.tpp-form-date::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.tpp-form-date::-webkit-datetime-edit { padding: 0; color: var(--color-text-main); }
.tpp-form-date::-webkit-datetime-edit-year-field { color: var(--color-tpp-indigo); font-weight: 600; }
.tpp-form-date::-webkit-datetime-edit-month-field,
.tpp-form-date::-webkit-datetime-edit-day-field { color: var(--color-text-main); font-weight: 500; }
.tpp-form-date::-webkit-datetime-edit-text { color: var(--color-tpp-date-sep); }
.tpp-form-btns { display: flex; justify-content: flex-end; gap: 8px; }
.tpp-form-cancel {
  height: 34px; padding: 0 16px;
  border: 1.5px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-white); color: var(--color-text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
}
.tpp-form-cancel:hover { background: var(--color-bg-soft); }
.tpp-form-submit {
  height: 34px; padding: 0 16px;
  border: 0; border-radius: 8px;
  background: var(--color-brand-icon); color: var(--color-text-on-brand); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.14s;
}
.tpp-form-submit:hover:not(:disabled) { background: var(--color-tpp-brand-hover); }
.tpp-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 필터 탭 ── */
.tpp-filters {
  display: flex;
  gap: 5px;
  padding: 12px 24px 10px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tpp-filters::-webkit-scrollbar { display: none; }
.tpp-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 11px;
  border: 1.5px solid var(--color-border); border-radius: 999px;
  background: var(--color-bg-white); color: var(--color-text-muted);
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: all 0.14s;
  flex-shrink: 0;
}
.tpp-filter-btn:hover { background: var(--color-bg-soft); }
.tpp-filter-btn.active { background: var(--color-brand-icon); border-color: var(--color-brand-icon); color: var(--color-text-on-brand); }
.tpp-filter-btn.has-alert { border-color: var(--color-tpp-danger-border); color: var(--color-danger); }
.tpp-filter-btn.has-alert.active { background: var(--color-danger-soft); border-color: var(--color-tpp-danger-border); color: var(--color-danger); }
.tpp-filter-count {
  font-size: 10px; font-weight: 700;
  background: var(--color-tpp-count-bg); border-radius: 999px;
  padding: 1px 5px; min-width: 16px; text-align: center;
}
.tpp-filter-btn.active .tpp-filter-count { background: var(--color-tpp-count-bg-active); }
.tpp-filter-btn.has-alert .tpp-filter-count { background: var(--color-tpp-alert-count-bg); }

/* ── 목록 ── */
.tpp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.tpp-state, .tpp-empty {
  text-align: center; padding: 40px 0;
  font-size: 14px; color: var(--color-text-placeholder);
}
.tpp-list { display: flex; flex-direction: column; gap: 5px; }

.tpp-item {
  padding: 11px 14px;
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-bg-white);
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.tpp-item:hover { border-color: var(--color-tpp-item-hover-border); box-shadow: 0 3px 10px var(--color-shadow-base); }
.tpp-item--done { opacity: 0.52; }
.tpp-item--overdue { border-left: 3px solid var(--color-danger); }
.tpp-item--editing { gap: 10px; background: var(--color-bg-soft); }

/* 행 1 */
.tpp-row1 { display: flex; align-items: center; gap: 9px; }
.tpp-check {
  width: 18px; height: 18px;
  border: 2px solid var(--color-border-strong); border-radius: 5px;
  background: var(--color-bg-white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  transition: all 0.14s;
}
.tpp-check.checked { background: var(--color-tpp-success); border-color: var(--color-tpp-success); }
.tpp-title {
  flex: 1; font-size: 13.5px; font-weight: 600; color: var(--color-text-main);
  line-height: 1.4; word-break: break-all; min-width: 0;
}
.tpp-item--done .tpp-title { text-decoration: line-through; color: var(--color-text-placeholder); }

/* 우선순위 뱃지 */
.tpp-priority {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
}
.tpp-priority--urgent { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-tpp-danger-border); }
.tpp-priority--high   { background: var(--color-tpp-warning-soft); color: var(--color-tpp-warning); border: 1px solid var(--color-tpp-warning-border); }

/* 액션 버튼 */
.tpp-actions { display: flex; gap: 1px; opacity: 0; transition: opacity 0.14s; }
.tpp-item:hover .tpp-actions { opacity: 1; }
.tpp-btn-edit, .tpp-btn-del {
  width: 24px; height: 24px;
  border: 0; border-radius: 5px;
  background: transparent; color: var(--color-text-placeholder);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.tpp-btn-edit:hover { background: var(--color-brand-soft); color: var(--color-tpp-indigo); }
.tpp-btn-del:hover  { background: var(--color-danger-soft); color: var(--color-danger); }

/* 행 2: 칩 */
.tpp-row2 { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding-left: 27px; }
.tpp-description { margin: 5px 0 0; padding-left: 27px; color: var(--color-text-secondary); font-size: 11px; line-height: 1.45; white-space: pre-wrap; }
.tpp-chip--tool { border-color: #cfd9ee; background: #f2f5fb; color: #536ba5; font-weight: 700; }
.tpp-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--color-border);
}
.tpp-chip--assignee { color: var(--color-text-muted); background: var(--color-bg-soft); }
.tpp-chip--zone     { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-tpp-zone-border); }
.tpp-chip--dday     { color: var(--color-text-placeholder); background: var(--color-bg-soft); }
.tpp-chip--dday.soon    { color: var(--color-tpp-warning); background: var(--color-tpp-warning-soft); border-color: var(--color-tpp-warning-border); font-weight: 700; }
.tpp-chip--dday.overdue { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-tpp-danger-border); font-weight: 700; }

.tpp-ai-priority { font-weight: 700; }
.tpp-ai-priority--high   { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-tpp-danger-border); }
.tpp-ai-priority--medium { color: var(--color-tpp-warning); background: var(--color-tpp-warning-soft); border-color: var(--color-tpp-warning-border); }
.tpp-ai-priority--low    { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-tpp-low-border); }

/* 행 3 공통 */
.tpp-row3 {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; padding-left: 27px;
}
.tpp-workers { color: var(--color-tpp-indigo); font-weight: 600; }
.tpp-workers-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-tpp-success); flex-shrink: 0;
  animation: tpp-pulse 1.5s ease infinite;
}
@keyframes tpp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.tpp-insight { color: var(--color-tpp-warning); font-weight: 500; }
.tpp-insight svg { color: var(--color-tpp-warning); flex-shrink: 0; }

/* ── 모바일 ── */
@media (max-width: 640px) {
  .tpp-backdrop { padding: 0; align-items: flex-end; }
  .tpp-panel { max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
  .tpp-form-row { flex-direction: column; }
  .tpp-form-sel, .tpp-date-wrap { min-width: 0; }
  .tpp-actions { opacity: 1; }
}


/* 완료 규칙 — 지금 무엇이 걸려 있는지 할 일 화면에서 바로 보인다. */
.tpp-policy-chips { display: inline-flex; gap: 5px; margin-right: 4px; }
.tpp-policy-chip {
  padding: 3px 8px;
  border-radius: 999px;
  background: #ede9fb;
  color: #5b45a3;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.tpp-policy-btn {
  padding: 6px 11px;
  border: 1px solid #e4e5e9;
  border-radius: 8px;
  background: #fff;
  color: #6f727b;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.tpp-policy-btn:hover { border-color: #cfd1d8; color: #24262c; }

[data-theme="dark"] .tpp-policy-chip { background: #322a4d; color: #b9a6e8; }
[data-theme="dark"] .tpp-policy-btn { border-color: #3a3d44; background: #2b2e35; color: #b9bcc4; }
:root {
  --color-cwp-p-border: rgb(226, 232, 240);
  --color-cwp-p-card: rgb(255, 255, 255);
  --color-cwp-p-text: rgb(15, 23, 42);
  --color-cwp-p-muted: rgb(100, 116, 139);
  --color-cwp-p-hint: rgb(148, 163, 184);
  --color-cwp-p-primary: rgb(79, 70, 229);
  --color-cwp-p-primary-soft: rgb(238, 242, 255);
  --color-cwp-p-bg: rgb(248, 250, 252);

  --color-cwp-indigo-light: rgb(165, 180, 252);
  --color-cwp-danger-border: rgb(254, 202, 202);
  --color-cwp-todo: rgb(13, 148, 136);
  --color-cwp-indigo-border: rgb(199, 210, 254);
  --color-cwp-chip-text: rgb(23, 32, 51);
  --color-cwp-text-strong: rgb(71, 85, 105);
  --color-cwp-success-text: rgb(4, 120, 87);
  --color-cwp-success-border: rgb(134, 239, 172);
  --color-cwp-best-bg: rgb(245, 247, 255);
  --color-cwp-tab-shadow: rgba(15, 23, 42, 0.1);
  --color-cwp-guide-text: rgb(67, 56, 202);
  --color-cwp-notice-border: rgb(167, 243, 208);
  --color-cwp-best-shadow: rgba(79, 70, 229, 0.14);
  --color-cwp-confirm-shadow: rgba(79, 70, 229, 0.18);
  --color-cwp-remove-border: rgb(252, 165, 165);
  --color-cwp-remove-shadow: rgba(239, 68, 68, 0.16);

  /* Google Calendar 임베드 페이지 (.gcal-*) */
  --color-gcal-link-border: rgb(224, 231, 255);
  --color-gcal-link-hover-bg: rgb(237, 233, 254);
  --color-gcal-strong-text: rgb(30, 41, 59);
  --color-gcal-primary-hover: rgb(67, 56, 202);
  --color-gcal-overlay: rgba(0, 0, 0, 0.4);
  --color-gcal-modal-shadow: rgba(0, 0, 0, 0.18);
  --color-gcal-body-text: rgb(71, 85, 105);
  --color-gcal-error: rgb(239, 68, 68);
  --color-gcal-error-border: rgb(254, 202, 202);
  --color-gcal-google-blue: rgb(66, 133, 244);
  --color-gcal-google-blue-hover: rgb(51, 103, 214);
}

/* 다크 값: --p-*는 dark.css의 .cal-page 다크 재정의 값을 그대로 보존.
   나머지(일정조율 상태 배지/버튼 등)는 기존 다크 커버가 없던
   사각지대라 이번에 새로 부여 */
[data-theme="dark"] {
  --color-cwp-p-border: rgb(51, 65, 85);
  --color-cwp-p-card: rgb(22, 32, 53);
  --color-cwp-p-text: rgb(241, 245, 249);
  --color-cwp-p-muted: rgb(148, 163, 184);
  --color-cwp-p-hint: rgb(100, 116, 139);
  --color-cwp-p-primary: rgb(129, 140, 248);
  --color-cwp-p-primary-soft: rgb(30, 27, 75);
  --color-cwp-p-bg: rgb(30, 41, 59);

  --color-cwp-indigo-light: rgb(129, 140, 248);
  --color-cwp-danger-border: var(--color-danger);
  --color-cwp-todo: rgb(45, 212, 191);
  --color-cwp-indigo-border: rgb(67, 56, 202);
  --color-cwp-chip-text: var(--color-text-main);
  --color-cwp-text-strong: var(--color-text-muted);
  --color-cwp-success-text: var(--color-success);
  --color-cwp-success-border: rgb(22, 101, 52);
  --color-cwp-best-bg: rgb(30, 27, 75);
  --color-cwp-tab-shadow: rgba(0, 0, 0, 0.3);
  --color-cwp-guide-text: rgb(165, 180, 252);
  --color-cwp-notice-border: rgb(6, 95, 70);
  --color-cwp-best-shadow: rgba(129, 140, 248, 0.2);
  --color-cwp-confirm-shadow: rgba(129, 140, 248, 0.25);
  --color-cwp-remove-border: var(--color-danger);
  --color-cwp-remove-shadow: rgba(248, 113, 113, 0.2);

  --color-gcal-link-border: rgb(49, 46, 129);
  --color-gcal-link-hover-bg: rgb(51, 41, 92);
  --color-gcal-strong-text: var(--color-text-main);
  --color-gcal-primary-hover: rgb(165, 180, 252);
  --color-gcal-overlay: rgba(2, 6, 16, 0.6);
  --color-gcal-modal-shadow: rgba(0, 0, 0, 0.4);
  --color-gcal-body-text: var(--color-text-muted);
  --color-gcal-error: var(--color-danger);
  --color-gcal-error-border: rgba(248, 113, 113, 0.3);
  --color-gcal-google-blue: rgb(66, 133, 244);
  --color-gcal-google-blue-hover: rgb(96, 165, 250);
}

.cal-page {
  --p-border: var(--color-cwp-p-border);
  --p-card: var(--color-cwp-p-card);
  --p-text: var(--color-cwp-p-text);
  --p-muted: var(--color-cwp-p-muted);
  --p-hint: var(--color-cwp-p-hint);
  --p-primary: var(--color-cwp-p-primary);
  --p-primary-soft: var(--color-cwp-p-primary-soft);
  --p-bg: var(--color-cwp-p-bg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--p-text);
}

.cal-page__tabs {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 5px;
  border: 1px solid var(--p-border);
  border-radius: 11px;
  background: var(--color-bg-soft);
  width: fit-content;
}

.cal-page__tab {
  min-width: 108px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--p-muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.cal-page__tab.active {
  background: var(--color-bg-white);
  color: var(--p-text);
  box-shadow: 0 1px 6px var(--color-cwp-tab-shadow);
}

.cal-page__card {
  padding: 20px;
  border: 1px solid var(--p-border);
  border-radius: 16px;
  background: var(--p-card);
  box-shadow: 0 14px 32px var(--color-shadow-base);
}

.cal-page__card--schedule-picker {
  padding: 12px;
  border-radius: 13px;
  box-shadow: none;
}

.cal-page__card--compact .cal-page__day {
  min-height: 66px;
}

.cal-page__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
}

.cal-page__nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--p-border);
  background: var(--p-card);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--p-muted);
  font-size: 16px;
}

.cal-page__nav-btn:hover {
  background: var(--p-bg);
}

.cal-page__nav-title {
  min-width: 112px;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--p-text);
}

.cal-page__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--p-border);
  border-left: 1px solid var(--p-border);
  background: var(--p-card);
  overflow: hidden;
  border-radius: 12px;
}

.cal-page__day-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--p-hint);
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  background: var(--color-bg-soft);
}

.cal-page__day {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  height: auto;
  align-items: stretch;
  padding: 7px;
  border: none;
  border-right: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
  border-radius: 0;
  cursor: pointer;
  gap: 6px;
  background: var(--color-bg-white);
  color: inherit;
  text-align: left;
  overflow: visible;
}

.cal-page__day:hover {
  background: var(--color-bg-soft);
}

.cal-page__day--empty {
  cursor: default;
  background: var(--color-bg-white);
}

.cal-page__day--empty:hover {
  background: var(--color-bg-white);
}

.cal-page__day-num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  color: var(--p-text);
  border-radius: 999px;
}

.cal-page__day.today .cal-page__day-num {
  color: var(--color-text-on-brand);
  background: var(--p-primary);
}

.cal-page__day.selected {
  background: var(--color-bg-soft);
  box-shadow: inset 0 0 0 2px var(--p-primary);
}

.cal-page__day--schedule-picker {
  min-height: 68px;
  align-items: center;
  text-align: center;
}

.cal-page__day--schedule-picker .cal-page__day-num {
  align-self: center;
}

.cal-page__day--schedule-picker.sched-sel {
  background: var(--p-primary-soft);
  box-shadow: inset 0 0 0 2px var(--color-cwp-indigo-light);
}

.cal-page__day--schedule-picker.sched-disabled {
  cursor: not-allowed;
  background: var(--color-bg-soft);
  color: var(--p-muted);
  opacity: 0.78;
}

.cal-page__day--schedule-picker.sched-disabled:hover {
  background: var(--color-bg-soft);
}

.cal-page__day--schedule-picker.sched-sel .cal-page__day-num {
  color: var(--p-primary);
  background: var(--color-bg-white);
}

.cal-page__schedule-cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 20px;
}

.cal-page__schedule-mark {
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--p-primary);
  font-size: 11px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-page__schedule-event-label {
  width: 100%;
  max-width: 100%;
  min-height: 18px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  border-left: 2px solid var(--event-color);
  border-radius: 5px;
  background: color-mix(in srgb, var(--event-color) 10%, var(--color-bg-white));
  color: var(--p-text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
}

.cal-page__schedule-event-time {
  flex: 0 0 auto;
  color: var(--p-muted);
  font-size: 9px;
}

.cal-page__schedule-event-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-page__day-event-count {
  color: var(--p-muted);
  font-size: 10px;
  font-weight: 800;
}

.cal-page__events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cal-page__event-chip {
  min-height: 20px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--event-color) 18%, var(--color-bg-white));
  border-left: 3px solid var(--event-color);
  color: var(--color-cwp-chip-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.cal-page__todo-chip {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-cwp-todo) 18%, var(--color-bg-white));
  border-left: 3px solid var(--color-cwp-todo);
  color: var(--color-cwp-chip-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.cal-page__todo-chip.is-done {
  opacity: 0.55;
  text-decoration: line-through;
}

.cal-page__todo-chip-icon {
  flex: 0 0 auto;
  color: var(--color-cwp-todo);
}

.cal-page__event-chip-time {
  flex: 0 0 auto;
  color: var(--color-cwp-text-strong);
  font-weight: 700;
}

.cal-page__event-chip-title {
  white-space: normal;
  word-break: break-word;
}

.cal-page__more-events {
  padding-left: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--p-muted);
}

.cal-page__more-events--mobile {
  display: none;
}

.cal-page__selected-panel {
  width: min(100%, 560px);
  min-height: min(380px, calc(100dvh - 96px));
  max-height: min(680px, calc(100dvh - 64px));
  margin: 0;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--p-border);
  border-radius: 18px;
  background: var(--p-card);
  box-shadow: 0 24px 60px var(--color-shadow-base);
}

.cal-page__selected-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--p-text) 38%, transparent);
}

.cal-page__selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cal-page__selected-date {
  font-size: 14px;
  font-weight: 900;
  color: var(--p-text);
}

.cal-page__selected-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-page__selected-close {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--p-border);
  border-radius: 9px;
  background: var(--p-bg);
  color: var(--p-muted);
  cursor: pointer;
}

.cal-page__add-event-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--p-border);
  background: var(--p-card);
  color: var(--p-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cal-page__add-event-btn:hover {
  background: var(--p-bg);
}

.cal-page__event-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 160px 120px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cal-page__form-input,
.cal-page__schedule-input {
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  background: var(--p-bg);
  color: var(--p-text);
  width: 100%;
  font-weight: 600;
}

.cal-page__form-input:focus,
.cal-page__schedule-input:focus {
  outline: none;
  border-color: var(--p-primary);
  background: var(--color-bg-white);
}

.cal-page__color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
  grid-column: 1 / -1;
}

.cal-page__color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid var(--color-bg-white);
  background: var(--event-color);
  box-shadow: 0 0 0 1px var(--p-border);
  cursor: pointer;
}

.cal-page__color-swatch.active {
  box-shadow: 0 0 0 2px var(--p-text);
}

.cal-page__form-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  grid-column: 1 / -1;
  margin-top: 12px;
}

.cal-page__form-mode {
  grid-column: 1 / -1;
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--p-primary-soft);
  color: var(--p-primary);
  font-size: 12px;
  font-weight: 900;
}

.cal-page__form-cancel,
.cal-page__form-submit {
  padding: 0 14px;
  height: 36px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.cal-page__form-cancel {
  border: 1px solid var(--p-border);
  background: var(--p-bg);
  color: var(--p-muted);
}

.cal-page__form-submit {
  border: 1px solid var(--p-primary);
  background: var(--p-primary);
  color: var(--color-text-on-brand);
}

.cal-page__form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cal-page__no-event {
  font-size: 13px;
  color: var(--p-hint);
  text-align: center;
  padding: 14px;
}

.cal-page__event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.cal-page__event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--p-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--p-text);
  background: color-mix(in srgb, var(--event-color) 9%, var(--color-bg-white));
}

.cal-page__event-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--event-color);
  flex-shrink: 0;
}

.cal-page__event-title {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.cal-page__event-time {
  font-size: 12px;
  color: var(--p-muted);
  white-space: nowrap;
}

/* 장소 — 시간 옆에 같은 무게로 붙는다. 길면 줄여서 목록 줄을 지키게 한다. */
.cal-page__event-place {
  overflow: hidden;
  max-width: 180px;
  color: var(--p-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-page__event-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

.cal-page__event-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--p-border);
  border-radius: 7px;
  background: var(--color-bg-white);
  color: var(--p-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.cal-page__event-action:hover {
  color: var(--p-text);
  background: var(--p-bg);
}

.cal-page__event-action.danger {
  width: 30px;
  min-width: 30px;
  padding: 0;
  border-color: var(--color-cwp-danger-border);
  color: var(--color-danger-strong);
}

.cal-page__schedule-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cal-page__schedule-create-card {
  padding: 16px;
  border: 1px solid var(--color-cwp-indigo-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-soft) 100%);
  box-shadow: 0 10px 24px var(--color-shadow-base);
}

.cal-page__schedule-add-main {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px dashed var(--color-cwp-indigo-light);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--p-primary);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.cal-page__schedule-add-main:hover {
  background: var(--p-primary-soft);
}

.cal-page__section-head h2 {
  margin: 0;
  color: var(--p-text);
  font-size: 17px;
  font-weight: 900;
}

.cal-page__schedule-input {
  margin-bottom: 12px;
}

.cal-page__candidate-list-wrap {
  margin-top: 12px;
}

.cal-page__candidate-title {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
  color: var(--p-text);
}

.cal-page__candidate-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.cal-page__candidate-empty {
  margin: 0;
  color: var(--p-hint);
  font-size: 13px;
  font-weight: 700;
}

.cal-page__candidate-add-card,
.cal-page__candidate-card,
.cal-page__schedule-option--add {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-align: left;
}

.cal-page__candidate-add-card {
  border: 1px dashed var(--color-cwp-indigo-light);
  background: var(--color-bg-white);
  color: var(--p-primary);
}

.cal-page__candidate-add-card.active {
  border-style: solid;
  background: var(--p-primary-soft);
}

.cal-page__candidate-card {
  justify-content: space-between;
  border: 1px solid var(--p-border);
  background: var(--color-bg-white);
  color: var(--p-text);
}

.cal-page__candidate-card svg {
  color: var(--p-muted);
}

.cal-page__inline-picker {
  margin-top: 10px;
}

.cal-page__schedule-guide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--p-primary-soft);
  color: var(--p-primary);
  font-size: 13px;
  font-weight: 700;
}

.cal-page__schedule-guide strong {
  flex: 0 0 auto;
  font-weight: 900;
}

.cal-page__schedule-guide span {
  color: var(--color-cwp-guide-text);
}

.cal-page__guide-close {
  width: 28px;
  height: 28px;
  margin-left: auto;
  border: 1px solid var(--color-cwp-indigo-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--p-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cal-page__schedule-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-danger-soft);
  border: 1px solid var(--color-cwp-danger-border);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 700;
}

.cal-page__schedule-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-success-soft);
  border: 1px solid var(--color-cwp-notice-border);
  color: var(--color-cwp-success-text);
  font-size: 13px;
  font-weight: 800;
}

.cal-page__schedule-create {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--p-primary);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.cal-page__schedule-create:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cal-page__schedule-votes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-page__section-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cal-page__schedule-empty {
  margin: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--p-bg);
  color: var(--p-muted);
  font-size: 13px;
  text-align: center;
}

.cal-page__schedule-vote-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-page__closed-schedules {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.cal-page__closed-toggle {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--p-border);
  border-radius: 10px;
  background: var(--color-bg-white);
  color: var(--p-muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.cal-page__closed-toggle:hover {
  background: var(--p-bg);
  color: var(--p-text);
}

.cal-page__closed-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}

.cal-page__schedule-vote-card {
  padding: 12px 14px;
  border: 1px solid var(--p-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  box-shadow: 0 8px 18px var(--color-shadow-base);
}

.cal-page__schedule-vote-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cal-page__schedule-vote-head strong {
  color: var(--p-text);
  font-size: 14px;
}

.cal-page__status-badge,
.cal-page__best-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-cwp-success-text);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.cal-page__status-badge.closed {
  background: var(--color-bg-soft);
  color: var(--p-muted);
}

.cal-page__schedule-participant-line {
  margin-bottom: 7px;
  color: var(--p-muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cal-page__schedule-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.cal-page__schedule-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 104px;
  padding: 10px;
  border: 1px solid var(--p-border);
  border-radius: 11px;
  background: var(--p-bg);
  color: var(--p-text);
  cursor: pointer;
  text-align: left;
}

.cal-page__schedule-option.selected {
  border-color: var(--color-cwp-success-border);
  background: var(--color-success-soft);
}

.cal-page__schedule-option.best {
  border-color: var(--color-cwp-indigo-light);
  background: var(--color-cwp-best-bg);
  box-shadow: inset 0 0 0 1px var(--color-cwp-best-shadow);
}

.cal-page__schedule-option.confirmed {
  border-color: var(--color-cwp-success-border);
  background: var(--color-success-soft);
  opacity: 1;
}

.cal-page__schedule-option.muted {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
  opacity: 0.72;
}

.cal-page__schedule-option.muted .cal-page__schedule-option-count,
.cal-page__schedule-option.muted .cal-page__schedule-participants,
.cal-page__schedule-option.muted .cal-page__schedule-participants-full {
  color: var(--color-text-placeholder);
}

.cal-page__schedule-option.action-mode {
  border-style: dashed;
  background: var(--color-bg-white);
  box-shadow: none;
}

.cal-page__schedule-option.action-mode:hover {
  border-color: var(--color-cwp-indigo-light);
  background: var(--color-bg-soft);
}

.cal-page__schedule-option.confirm-mode.action-selected {
  border-style: solid;
  border-color: var(--p-primary);
  background: var(--p-primary-soft);
  box-shadow: inset 0 0 0 1px var(--color-cwp-confirm-shadow);
}

.cal-page__schedule-option.remove-mode.action-selected {
  border-style: solid;
  border-color: var(--color-cwp-remove-border);
  background: var(--color-danger-soft);
  box-shadow: inset 0 0 0 1px var(--color-cwp-remove-shadow);
}

.cal-page__schedule-option--add {
  min-height: 104px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-cwp-indigo-light);
  background: var(--color-bg-white);
  color: var(--p-primary);
}

.cal-page__schedule-option--add.active {
  border-style: solid;
  background: var(--p-primary-soft);
}

.cal-page__schedule-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.cal-page__schedule-option-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
}

.cal-page__schedule-option-count,
.cal-page__schedule-participants {
  color: var(--p-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cal-page__schedule-participants-full {
  display: none;
  color: var(--color-cwp-text-strong);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cal-page__schedule-card-actions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--p-border);
}

.cal-page__schedule-card-actions.active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-cwp-indigo-border);
  border-radius: 10px;
  background: var(--color-cwp-best-bg);
}

.cal-page__schedule-action-copy {
  color: var(--p-muted);
  font-size: 12px;
  font-weight: 800;
}

.cal-page__schedule-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cal-page__schedule-action-start,
.cal-page__schedule-action-cancel,
.cal-page__schedule-action-complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--p-border);
  background: var(--color-bg-white);
  color: var(--p-text);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cal-page__schedule-action-start {
  border-color: var(--p-primary);
  background: var(--p-primary-soft);
  color: var(--p-primary);
}

.cal-page__schedule-action-start.danger,
.cal-page__schedule-action-complete.danger {
  border-color: var(--color-cwp-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-strong);
}

.cal-page__schedule-action-complete {
  border-color: var(--p-primary);
  background: var(--p-primary);
  color: var(--color-text-on-brand);
}

.cal-page__schedule-action-complete.danger {
  background: var(--color-danger);
  color: var(--color-text-on-brand);
}

.cal-page__schedule-action-complete:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.cal-page__schedule-delete {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-cwp-danger-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-danger-strong);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.cal-page__schedule-delete:hover {
  background: var(--color-danger-soft);
}

.cal-page__loading {
  padding: 60px;
  text-align: center;
  color: var(--p-muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  .cal-page {
    gap: 12px;
  }

  .cal-page__tabs {
    width: 100%;
  }

  .cal-page__tab {
    flex: 1;
    min-width: 0;
  }

  .cal-page__card,
  .cal-page__schedule-create-card,
  .cal-page__schedule-vote-card {
    padding: 12px;
    border-radius: 14px;
  }

  .cal-page__nav {
    gap: 12px;
    margin-bottom: 12px;
  }

  .cal-page__nav-title {
    min-width: 100px;
    font-size: 15px;
  }

  .cal-page__day-label {
    font-size: 10px;
    padding: 7px 0;
  }

  .cal-page__day {
    height: 88px;
    min-height: 88px;
    max-height: 88px;
    padding: 4px;
    gap: 4px;
    overflow: hidden;
  }

  .cal-page__card--compact .cal-page__day,
  .cal-page__day--schedule-picker {
    min-height: 56px;
  }

  .cal-page__day-num {
    width: 21px;
    height: 21px;
    font-size: 11px;
  }

  .cal-page__event-chip,
  .cal-page__todo-chip {
    min-height: 17px;
    padding: 2px 4px;
    font-size: 10px;
    border-left-width: 2px;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cal-page__calendar-item--mobile-hidden {
    display: none;
  }

  .cal-page__more-events--mobile {
    display: block;
    min-height: 13px;
    padding-left: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }

  .cal-page__event-chip-title,
  .cal-page__schedule-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .cal-page__event-chip-time {
    display: none;
  }

  .cal-page__more-events,
  .cal-page__day-event-count {
    font-size: 10px;
  }

  .cal-page__schedule-mark {
    padding: 2px 6px;
    font-size: 10px;
  }

  .cal-page__schedule-guide {
    align-items: flex-start;
    gap: 4px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .cal-page__schedule-guide span {
    flex: 1;
  }

  .cal-page__selected-header {
    align-items: center;
  }

  .cal-page__selected-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: color-mix(in srgb, var(--p-text) 38%, transparent);
  }

  .cal-page__selected-panel {
    width: min(100%, 420px);
    min-height: min(360px, calc(100dvh - 80px));
    max-height: min(620px, calc(100dvh - 80px));
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--p-border);
    border-radius: 16px;
    background: var(--p-card);
    box-shadow: 0 24px 60px var(--color-shadow-base);
  }

  .cal-page__selected-actions {
    margin-left: auto;
  }

  .cal-page__selected-close {
    display: inline-flex;
  }

  .cal-page__event-form {
    grid-template-columns: 1fr;
  }

  .cal-page__form-btns {
    justify-content: stretch;
  }

  .cal-page__event-item {
    align-items: center;
    flex-wrap: nowrap;
  }

  .cal-page__event-actions {
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .cal-page__form-cancel,
  .cal-page__form-submit,
  .cal-page__schedule-create {
    flex: 1;
  }

  .cal-page__section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .cal-page__schedule-vote-card {
    position: relative;
  }

  .cal-page__schedule-vote-head {
    align-items: flex-start;
    flex-direction: row;
    padding-right: 58px;
  }

  .cal-page__status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    min-height: 21px;
    padding: 0 7px;
    font-size: 10px;
  }

  .cal-page__schedule-options {
    grid-template-columns: 1fr;
  }

  .cal-page__schedule-option {
    min-height: 86px;
  }

  .cal-page__schedule-option--add {
    min-height: 44px;
  }

  .cal-page__schedule-card-actions.active {
    align-items: stretch;
    flex-direction: column;
  }

  .cal-page__schedule-action-buttons {
    width: 100%;
  }

  .cal-page__schedule-action-start,
  .cal-page__schedule-action-cancel,
  .cal-page__schedule-action-complete {
    flex: 1;
  }

  .cal-page__schedule-delete {
    flex: 0 0 34px;
  }

  .cal-page__schedule-participants-full {
    display: block;
  }
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분) */
[data-theme="dark"] .cal-page__tabs {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .cal-page__tab.active {
  background: var(--color-bg-elevated-dark);
  box-shadow: 0 1px 6px var(--color-shadow-base);
}
[data-theme="dark"] .cal-page__day-label { background: var(--color-bg-white); }
[data-theme="dark"] .cal-page__day       { background: var(--color-bg-sunken-dark); }
[data-theme="dark"] .cal-page__day:hover { background: var(--color-brand-soft-dark); }
[data-theme="dark"] .cal-page__day--empty,
[data-theme="dark"] .cal-page__day--empty:hover { background: var(--color-bg-soft); }
[data-theme="dark"] .cal-page__day.selected { background: var(--color-brand-soft-dark); }
[data-theme="dark"] .cal-page__day--schedule-picker.sched-disabled { background: var(--color-bg-sunken-dark); }
[data-theme="dark"] .cal-page__schedule-mark { background: var(--color-bg-elevated-dark); }
[data-theme="dark"] .cal-page__schedule-event-label {
  background: color-mix(in srgb, var(--event-color) 15%, var(--color-bg-sunken-dark));
}

/* ================================================
   Google Calendar 임베드 페이지 (.gcal-*)
   WorkspaceCalendarPage.jsx에서 사용
   ================================================ */

.gcal-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.gcal-page--center {
  align-items: center;
  justify-content: center;
}

.gcal-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-cwp-p-primary);
  border-radius: 50%;
  animation: gcal-spin 0.7s linear infinite;
}
@keyframes gcal-spin { to { transform: rotate(360deg); } }

.gcal-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-white);
  flex-shrink: 0;
}

.gcal-toolbar__link,
.gcal-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.gcal-toolbar__link {
  color: var(--color-cwp-p-primary);
  border: 1px solid var(--color-gcal-link-border);
  background: var(--color-accent-soft);
}
.gcal-toolbar__link:hover { background: var(--color-gcal-link-hover-bg); }

.gcal-toolbar__btn {
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
}
.gcal-toolbar__btn:hover { background: var(--color-bg-soft); }

.gcal-frame-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.gcal-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.gcal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 48px 24px;
  text-align: center;
}

.gcal-empty__icon { color: var(--color-text-placeholder); }

.gcal-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gcal-strong-text);
  margin: 0;
}

.gcal-empty__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 340px;
  margin: 0;
  line-height: 1.6;
}

.gcal-setup-btn {
  margin-top: 8px;
  padding: 10px 24px;
  border-radius: 8px;
  background: var(--color-cwp-p-primary);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.gcal-setup-btn:hover { background: var(--color-gcal-primary-hover); }

.gcal-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-gcal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.gcal-modal {
  background: var(--color-bg-white);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px var(--color-gcal-modal-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.gcal-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-main);
}

.gcal-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.gcal-modal__close:hover { background: var(--color-bg-soft); }

.gcal-modal__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--color-gcal-body-text);
  line-height: 1.6;
}
.gcal-modal__steps a { color: var(--color-cwp-p-primary); text-decoration: none; }
.gcal-modal__steps a:hover { text-decoration: underline; }

.gcal-modal__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
  color: var(--color-gcal-strong-text);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.5;
}
.gcal-modal__input:focus { border-color: var(--color-cwp-p-primary); box-shadow: 0 0 0 3px var(--color-brand-soft); }

.gcal-modal__error { margin: 0; font-size: 13px; color: var(--color-gcal-error); }

.gcal-modal__btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.gcal-modal__disconnect {
  margin-right: auto;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid var(--color-gcal-error-border);
  background: var(--color-bg-white);
  color: var(--color-gcal-error);
  font-size: 13px;
  cursor: pointer;
}
.gcal-modal__disconnect:hover { background: var(--color-danger-soft); }

.gcal-modal__cancel {
  padding: 8px 16px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
}
.gcal-modal__cancel:hover { background: var(--color-bg-soft); }

.gcal-modal__save {
  padding: 8px 20px;
  border-radius: 7px;
  border: none;
  background: var(--color-cwp-p-primary);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.gcal-modal__save:hover:not(:disabled) { background: var(--color-gcal-primary-hover); }
.gcal-modal__save:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 연동 가이드 ── */
.gcal-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg-soft);
  border-radius: 10px;
  padding: 14px 16px;
}
.gcal-guide__open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 7px 14px;
  background: var(--color-gcal-google-blue);
  color: var(--color-text-on-brand);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.14s;
}
.gcal-guide__open-btn:hover { background: var(--color-gcal-google-blue-hover); }
.gcal-guide__step {
  margin: 0;
  font-size: 13px;
  color: var(--color-gcal-body-text);
  line-height: 1.6;
}
.gcal-guide__step strong { color: var(--color-text-main); }
:root {
  --color-cp-tooltip-bg: rgb(15, 23, 42);
  --color-cp-voted: rgb(99, 102, 241);
  --color-cp-backdrop: rgba(15, 23, 42, 0.45);
  --color-cp-panel-shadow: rgba(15, 23, 42, 0.24);
  --color-cp-heat-1: rgb(209, 250, 229);
  --color-cp-heat-2: rgb(110, 231, 183);
  --color-cp-heat-3: rgb(52, 211, 153);
  --color-cp-heat-4: rgb(16, 185, 129);
  --color-cp-heat-5: rgb(5, 150, 105);
  --color-cp-tooltip-shadow: rgba(0, 0, 0, 0.18);

  /* .cal-page 다크 재정의(dark.css)와 동일하게 맞춘 팝업 전용 --p-* 소스값 -
     팝업에는 .cal-page 래퍼가 없어 dark.css의 .cal-page 규칙이 안 먹으므로
     이 로컬 토큰들이 유일한 다크 공급원 */
  --color-cp-p-border: rgb(226, 232, 240);
  --color-cp-p-card: rgb(255, 255, 255);
  --color-cp-p-text: rgb(15, 23, 42);
  --color-cp-p-muted: rgb(100, 116, 139);
  --color-cp-p-hint: rgb(148, 163, 184);
  --color-cp-p-primary: rgb(73, 101, 255);
  --color-cp-p-primary-soft: rgb(238, 242, 255);
  --color-cp-p-bg: rgb(248, 250, 252);
  --color-cp-google-blue-soft: rgb(232, 240, 254);
}

/* 다크 값: cp-close/cp-header/cp-title/cp-tabs/cp-tab*은 기존 dark.css
   워크스페이스 팝업 공통 쉘 값을 그대로 보존. --p-*는 .cal-page 다크
   재정의(dark.css)와 동일 값으로 맞춤. 나머지(시간그리드 등)는
   기존 다크 커버가 없던 사각지대라 이번에 새로 부여 */
[data-theme="dark"] {
  --color-cp-tooltip-bg: rgb(30, 41, 59);
  --color-cp-voted: var(--color-indigo-accent-dark);
  --color-cp-backdrop: rgba(2, 6, 16, 0.6);
  --color-cp-panel-shadow: rgba(0, 0, 0, 0.4);
  --color-cp-tooltip-shadow: rgba(0, 0, 0, 0.4);

  --color-cp-p-border: rgb(51, 65, 85);
  --color-cp-p-card: rgb(22, 32, 53);
  --color-cp-p-text: rgb(241, 245, 249);
  --color-cp-p-muted: rgb(148, 163, 184);
  --color-cp-p-hint: rgb(100, 116, 139);
  --color-cp-p-primary: rgb(129, 140, 248);
  --color-cp-p-primary-soft: rgb(30, 27, 75);
  --color-cp-p-bg: rgb(30, 41, 59);

  --color-cp-heat-1: rgb(6, 78, 59);
  --color-cp-heat-2: rgb(6, 95, 70);
  --color-cp-heat-3: rgb(4, 120, 87);
  --color-cp-heat-4: rgb(5, 150, 105);
  --color-cp-heat-5: rgb(16, 185, 129);
  --color-cp-google-blue-soft: rgba(66, 133, 244, 0.18);
}

.cp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-cp-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: cp-fade-in 0.18s ease both;
}

@keyframes cp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cp-panel {
  width: 100%;
  max-width: 1200px;
  height: min(94vh, calc(100vh - 32px));
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 32px 80px var(--color-cp-panel-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cp-slide-up 0.2s ease both;
}

@keyframes cp-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cp-header-icon { font-size: 22px; }

.cp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-main);
}

.cp-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.cp-close:hover { background: var(--color-border); color: var(--color-text-main); }

.cp-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cp-tab {
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}

.cp-tab.active {
  color: var(--color-brand-icon);
  border-bottom-color: var(--color-brand-icon);
  font-weight: 800;
}

.cp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  /* cal-page CSS 변수 재정의 (팝업은 .cal-page 래퍼 없음) */
  --p-border: var(--color-cp-p-border);
  --p-card: var(--color-cp-p-card);
  --p-text: var(--color-cp-p-text);
  --p-muted: var(--color-cp-p-muted);
  --p-hint: var(--color-cp-p-hint);
  --p-primary: var(--color-cp-p-primary);
  --p-primary-soft: var(--color-cp-p-primary-soft);
  --p-bg: var(--color-cp-p-bg);
}

/* 팝업 안 cal-page 루트 여백 제거 */
.cp-body .cal-page {
  padding: 0;
}

/* ── 생성 카드 3분할 레이아웃 ── */
.cp-create-card {
  display: flex !important;
  flex-direction: column;
  max-height: calc(min(94vh, 100vh - 32px) - 120px); /* header + tabs */
  min-height: 0;
}
.cp-create-top {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}
.cp-create-mid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.cp-create-bot {
  flex-shrink: 0;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* 후보 날짜를 가로 줄바꿈 칩으로 */
.cp-body .cal-page__candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cp-body .cal-page__candidate-card {
  width: auto;
  min-height: 30px;
  padding: 0 10px 0 12px;
  border-radius: 20px;
  font-size: 12px;
  gap: 6px;
}
.cp-body .cal-page__candidate-add-card {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 생성 카드 안 달력: 높이 제한 없이 mid 영역이 스크롤 */
.cp-create-mid .cal-page__inline-picker {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .cp-backdrop { padding: 0; align-items: flex-end; }
  .cp-panel { max-width: 100%; height: 95vh; border-radius: 20px 20px 0 0; }
  .cp-body { padding: 16px; }
}

/* ── 일정 조율 모드 토글 ── */
.cal-page__schedule-mode-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.cal-page__schedule-mode-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.cal-page__schedule-mode-btn.active {
  background: var(--color-brand-icon);
  border-color: var(--color-brand-icon);
  color: var(--color-text-on-brand);
}
.cal-page__schedule-mode-btn:not(.active):hover {
  border-color: var(--color-brand-icon);
  color: var(--color-brand-icon);
}

/* ── 시간 범위 선택 ── */
.cal-page__time-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cal-page__time-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.cal-page__time-range-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-main);
  font-size: 13px;
  cursor: pointer;
}
.cal-page__time-range-select:focus {
  outline: none;
  border-color: var(--color-brand-icon);
}
.cal-page__time-range-sep {
  font-size: 13px;
  color: var(--color-text-placeholder);
}

/* ── 시간 그리드 범례 ── */
.cal-page__tg-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cal-page__tg-legend-label {
  font-size: 11px;
  color: var(--color-text-placeholder);
  white-space: nowrap;
}
.cal-page__tg-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-page__tg-legend-voted {
  background: transparent;
  border: 2px solid var(--color-cp-voted);
}
.cal-page__tg-legend-sep {
  width: 12px;
  flex-shrink: 0;
}

/* ── 시간 그리드 컨테이너 ── */
.cal-page__tg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.cal-page__tg {
  display: grid;
  min-width: max-content;
}

/* ── 헤더 셀 ── */
.cal-page__tg-corner {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  position: sticky;
  left: 0;
  z-index: 1;
}
.cal-page__tg-date-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}
.cal-page__tg-date-md {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-main);
}
.cal-page__tg-date-wd {
  font-size: 11px;
  color: var(--color-text-placeholder);
  font-weight: 500;
}

/* ── 시간 레이블 ── */
.cal-page__tg-time-label {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 6px;
  height: 20px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-placeholder);
  white-space: nowrap;
  background: var(--color-bg-soft);
  border-right: 1px solid var(--color-border);
  position: sticky;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
}
.cal-page__tg-time-label--half {
  color: transparent;
  border-bottom: 1px dashed var(--color-border);
}

/* ── 그리드 셀 ── */
.cal-page__tg-cell {
  position: relative;
  height: 20px;
  border-left: 1px solid var(--color-border);
  box-sizing: border-box;
  transition: filter 0.08s;
}
.cal-page__tg-cell--interactive {
  cursor: pointer;
  user-select: none;
}
.cal-page__tg-cell--interactive:hover {
  filter: brightness(0.92);
}
.cal-page__tg-cell--na {
  background: var(--color-bg-soft);
}
.cal-page__tg-cell--empty {
  background: var(--color-bg-white);
}
.cal-page__tg-cell--heat-1 { background: var(--color-cp-heat-1); }
.cal-page__tg-cell--heat-2 { background: var(--color-cp-heat-2); }
.cal-page__tg-cell--heat-3 { background: var(--color-cp-heat-3); }
.cal-page__tg-cell--heat-4 { background: var(--color-cp-heat-4); }
.cal-page__tg-cell--heat-5 { background: var(--color-cp-heat-5); }
.cal-page__tg-cell--voted {
  outline: 2px solid var(--color-cp-voted);
  outline-offset: -2px;
  z-index: 1;
}

/* ── 툴팁 ── */
.cal-page__tg-tooltip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-cp-tooltip-bg);
  color: var(--color-text-on-brand);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 4px 12px var(--color-cp-tooltip-shadow);
}
.cal-page__tg-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-cp-tooltip-bg);
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분) */
[data-theme="dark"] .cp-close {
  background: var(--color-bg-elevated-dark);
  color: var(--color-text-muted);
}
[data-theme="dark"] .cp-close:hover {
  background: var(--color-border);
  color: var(--color-text-main);
}
[data-theme="dark"] .cp-header {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .cp-title {
  color: var(--color-text-main);
}
[data-theme="dark"] .cp-tabs {
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .cp-tab {
  color: var(--color-text-muted);
}
[data-theme="dark"] .cp-tab.active {
  color: var(--color-brand-strong);
  border-bottom-color: var(--color-brand-strong);
}

/* ── 구글 캘린더 탭 ── */
.cp-gcal {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.cp-gcal-frame-wrap {
  flex: 1;
  min-height: 0;
}
.cp-gcal-frame-wrap .gcal-frame {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: none;
  border-radius: 12px;
}
.cp-gcal-setup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.cp-gcal-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-cp-p-text);
}

/* ── 이벤트 드래그 ── */
.cal-page__event-drag {
  cursor: grab;
  color: var(--color-border-strong);
  font-size: 14px;
  padding: 0 4px 0 0;
  flex-shrink: 0;
  user-select: none;
}
.cal-page__event-item[draggable] { cursor: default; }
.cal-page__event-item[draggable]:active .cal-page__event-drag { cursor: grabbing; }
.cal-page__event-item.drag-over {
  outline: 2px dashed var(--color-cp-p-primary);
  outline-offset: -2px;
  background: var(--color-cp-p-primary-soft);
  border-radius: 8px;
}

/* ── 구글 캘린더 이벤트 목록 ── */
.cp-gcal-events {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.cp-gcal-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-gcal-event-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-cp-p-bg);
  font-size: 13px;
}
.cp-gcal-event-item:hover { background: var(--color-bg-soft); }
.cp-gcal-event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gcal-google-blue);
  flex-shrink: 0;
}
.cp-gcal-event-date {
  color: var(--color-cp-p-muted);
  font-size: 12px;
  white-space: nowrap;
  min-width: 70px;
}
.cp-gcal-event-time {
  color: var(--color-cp-p-muted);
  font-size: 12px;
  white-space: nowrap;
}
.cp-gcal-event-title {
  color: var(--color-cp-p-text);
  font-weight: 500;
  flex: 1;
}
.gcal-toolbar__btn.danger {
  color: var(--color-danger);
}
.gcal-toolbar__btn.danger:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ── Google Calendar status bar ─────────────────────────── */
.cal-gcal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--color-cp-p-bg);
  border-bottom: 1px solid var(--color-cp-p-border);
  font-size: 12px;
  min-height: 34px;
  flex-shrink: 0;
}
.cal-gcal-bar__loading {
  color: var(--color-text-placeholder);
  font-size: 12px;
}
.cal-gcal-bar__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  color: var(--color-text-sub);
  font-weight: 500;
}
.cal-gcal-bar__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.cal-gcal-bar__link {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  margin-left: 2px;
}
.cal-gcal-bar__link:hover { color: var(--color-gcal-google-blue); }
.cal-gcal-bar__btn {
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--color-cp-p-border);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
  color: var(--color-text-sub);
  transition: background 0.15s;
}
.cal-gcal-bar__btn:hover { background: var(--color-bg-soft); }
.cal-gcal-bar__btn:disabled { opacity: 0.5; cursor: default; }
.cal-gcal-bar__btn.danger { color: var(--color-danger); border-color: var(--color-gcal-error-border); }
.cal-gcal-bar__btn.danger:hover { background: var(--color-danger-soft); }
.cal-gcal-bar__connect {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: var(--color-gcal-google-blue);
  color: var(--color-text-on-brand);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-gcal-bar__connect:hover { background: var(--color-gcal-google-blue-hover); }

/* ── Google Calendar event badge in panel ───────────────── */
.cal-page__event-item--gcal {
  cursor: default;
}
.cal-page__event-gcal-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-gcal-google-blue);
  background: var(--color-cp-google-blue-soft);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.vote-page {
  --vp-border: var(--color-border);
  --vp-card: var(--color-bg-white);
  --vp-text: var(--color-text-main);
  --vp-muted: var(--color-text-muted);
  --vp-primary: rgb(79, 70, 229);
  --vp-primary-soft: var(--color-brand-soft);
  --vp-green: rgb(15, 159, 110);
  --vp-green-soft: var(--color-success-soft);
  --vp-amber: var(--color-type-smallgroup);
  --vp-amber-soft: rgb(255, 251, 235);

  /* 6-B2 WS-4: 아래 상태 배지 전용 로컬 토큰 - colors.css 공유 토큰과
     거리가 있어(Δ>12) 값 보존을 위해 파일 내부에 스코프. */
  --vp-primary-strong: rgb(67, 56, 202);
  --vp-amber-vivid: rgb(245, 158, 11);
  --vp-muted-2: rgb(71, 85, 105);
  --vp-green-vivid: rgb(5, 150, 105);
  --vp-amber-soft-2: rgb(254, 243, 199);
  --vp-amber-glow-16: rgba(245, 158, 11, 0.16);
  --vp-amber-glow-13: rgba(245, 158, 11, 0.13);
  --vp-done-border: rgb(22, 163, 74);
  --vp-done-bg: rgb(220, 252, 231);
  --vp-done-text: rgb(21, 128, 61);
  --vp-done-glow: rgba(22, 163, 74, 0.14);
  --vp-delete-border: rgb(254, 202, 202);
  --vp-delete-bg: rgb(255, 241, 242);
  --vp-delete-text: rgb(225, 29, 72);
  --vp-delete-hover-bg: rgb(255, 228, 230);

  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--vp-text);
}

/* 다크 전용(라이트 대응 없음) - dark.css 흡수 과정에서 필요한 값만 최소로 추가 */
[data-theme="dark"] {
  --vp-green-icon-bg-dark: rgba(16, 185, 129, 0.12);
  --vp-amber-icon-bg-dark: rgba(217, 119, 6, 0.12);
  --vp-amber-glow-12-dark: rgba(245, 158, 11, 0.12);
  --vp-done-glow-12-dark: rgba(22, 163, 74, 0.12);
  --vp-done-border-dark: rgb(34, 197, 94);
  --vp-delete-glow-12-dark: rgba(220, 38, 38, 0.12);
  --vp-icon-blue-text-dark: rgb(129, 140, 248);
  --vp-badge-ongoing-bg-dark: rgb(30, 27, 75);
  --vp-join-edit-text-dark: rgb(251, 191, 36);
  --vp-icon-blue-bg-dark: rgba(99, 102, 241, 0.15);
  --vp-primary-strong: rgb(165, 180, 252);
  --vp-amber-soft-2: rgba(245, 158, 11, 0.12);

  /* 6-B2 WS-4 Step6: 다크 명도 검사 - vp-primary가 텍스트로도 쓰이는데
     라이트와 같은 값이면 다크에서 너무 어두워 밝은 인디고로 재정의
     (버튼/체크박스 등 배경 용도는 그대로 밝게 유지되어 문제 없음).
     vp-muted-2 보조 텍스트 → 회색. vp-amber-soft는 요약 아이콘 배경이
     형제 아이콘(파랑/초록)과 달리 다크에서 안 어두워지던 것 보정. */
  --vp-primary: rgb(129, 140, 248);
  --vp-muted-2: rgb(148, 163, 184);
  --vp-amber-soft: rgba(217, 119, 6, 0.16);
}

/* ── 상단 탭 + 버튼 ── */
.vote-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vote-page__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--vp-border);
}

.vote-page__tab {
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vp-muted);
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1.5px;
}

.vote-page__tab.active {
  color: var(--vp-primary);
  border-bottom-color: var(--vp-primary);
}

.vote-page__create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--vp-border);
  background: var(--vp-card);
  color: var(--vp-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.vote-page__create-btn:hover {
  background: var(--color-bg-soft);
}

/* ── 요약 카드 3개 ── */
.vote-page__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vote-page__summary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--vp-border);
  border-radius: 18px;
  background: var(--vp-card);
  box-shadow: 0 8px 20px var(--color-shadow-base);
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.vote-page__summary-card:hover {
  box-shadow: 0 12px 28px var(--color-shadow-strong);
}

.vote-page__summary-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}

.vote-page__summary-icon--blue { background: var(--vp-primary-soft); color: var(--vp-primary); }
.vote-page__summary-icon--green { background: var(--vp-green-soft); color: var(--vp-green-vivid); }
.vote-page__summary-icon--amber { background: var(--vp-amber-soft); color: var(--color-type-smallgroup-soft); }

.vote-page__summary-label {
  font-size: 12px;
  color: var(--vp-muted);
  margin-bottom: 2px;
}

.vote-page__summary-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--vp-text);
  line-height: 1;
}

/* ── 섹션 제목 ── */
.vote-page__section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--vp-text);
  margin-bottom: 12px;
}

.vote-page__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vote-page__section-head .vote-page__section-title {
  margin-bottom: 0;
}

/* ── 투표 카드 ── */
.vote-page__card {
  padding: 22px;
  border: 1px solid var(--vp-border);
  border-radius: 20px;
  background: var(--vp-card);
  box-shadow: 0 14px 32px var(--color-shadow-base);
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.vote-page__card--closed {
  opacity: 0.8;
}

.vote-page__card-left {
  flex: 1;
  min-width: 0;
}

.vote-page__card-right {
  flex: 1.2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.vote-page__card-right--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.vote-page__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.vote-page__badge--ongoing {
  background: var(--vp-primary-soft);
  color: var(--vp-primary-strong);
}

.vote-page__badge--closed {
  background: var(--color-bg-soft);
  color: var(--vp-muted);
}

.vote-page__card-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--vp-text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.vote-page__card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--vp-muted);
}

.vote-page__card-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vote-page__action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.vote-page__join-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--vp-border);
  background: var(--vp-card);
  color: var(--vp-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.vote-page__join-btn:hover {
  background: var(--color-bg-soft);
}

.vote-page__join-btn--save {
  border-color: var(--vp-primary);
  color: var(--vp-primary);
}

.vote-page__join-btn--edit {
  border-color: var(--vp-amber-vivid);
  background: var(--vp-amber-soft-2);
  color: var(--vp-amber);
  box-shadow: 0 8px 18px var(--vp-amber-glow-16);
}

.vote-page__join-btn--done {
  border-color: var(--vp-done-border);
  background: var(--vp-done-bg);
  color: var(--vp-done-text);
  box-shadow: 0 8px 18px var(--vp-done-glow);
}

.vote-page__join-btn--delete {
  border-color: var(--vp-delete-border);
  background: var(--vp-delete-bg);
  color: var(--vp-delete-text);
}

.vote-page__join-btn--delete:hover {
  background: var(--vp-delete-hover-bg);
}

.vote-page__join-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vote-page__badge--expired {
  background: var(--color-bg-soft);
  color: var(--vp-muted);
}

.vote-page__vote-message {
  margin: 8px 0 0;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 700;
}

.vote-page__card--locked {
  background: var(--color-bg-soft);
  border-color: var(--color-border-strong);
}

.vote-page__card--locked .vote-page__card-title,
.vote-page__card--locked .vote-page__card-meta {
  color: var(--vp-muted);
}

.vote-page__card--editing {
  border-color: var(--vp-amber-vivid);
  box-shadow:
    0 0 0 3px var(--vp-amber-glow-13),
    0 12px 26px var(--color-shadow-base);
}

/* ── 투표 옵션 (바형) ── */
.vote-page__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--vp-border);
  background: var(--color-bg-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.vote-page__option:hover {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-accent-soft);
}

.vote-page__option.is-locked,
.vote-page__time-option.is-locked {
  cursor: not-allowed;
  opacity: 0.58;
  filter: grayscale(0.22);
}

.vote-page__option.is-locked:hover,
.vote-page__time-option.is-locked:hover {
  background: var(--color-bg-soft);
  border-color: var(--vp-border);
}

.vote-page__option.voted {
  border-color: var(--vp-primary);
  background: var(--vp-primary-soft);
}

.vote-page__option.winner {
  border-color: var(--vp-primary);
}

.vote-page__option-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vote-page__option.voted .vote-page__option-check {
  border-color: var(--vp-primary);
  background: var(--vp-primary);
}

.vote-page__option-text {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-text);
}

.vote-page__option-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--vp-border);
  border-radius: 3px;
  overflow: hidden;
  max-width: 160px;
}

.vote-page__option-bar {
  height: 100%;
  background: var(--vp-primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.vote-page__option-pct {
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-primary);
  min-width: 36px;
  text-align: right;
}

/* ── 시간 선택 옵션 (그리드형) ── */
.vote-page__time-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1.5px solid var(--vp-border);
  background: var(--color-bg-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}

.vote-page__time-option:hover {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-accent-soft);
}

.vote-page__time-option.winner {
  border-color: var(--vp-primary);
  background: var(--vp-primary-soft);
}

.vote-page__time-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--vp-text);
  margin-bottom: 4px;
}

.vote-page__time-option.winner .vote-page__time-label {
  color: var(--vp-primary);
}

.vote-page__time-count {
  font-size: 12px;
  color: var(--vp-muted);
}

/* ── 완료 투표 행 ── */
.vote-page__closed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vote-page__closed-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vp-border);
  cursor: pointer;
}

.vote-page__closed-row:last-child {
  border-bottom: none;
}

.vote-page__closed-row:hover {
  background: var(--color-bg-soft);
  margin: 0 -4px;
  padding: 16px 4px;
  border-radius: 8px;
}

.vote-page__closed-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--color-bg-soft);
  color: var(--vp-muted);
  flex-shrink: 0;
}

.vote-page__closed-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-text);
}

.vote-page__closed-sub {
  font-size: 12px;
  color: var(--vp-muted);
}

.vote-page__closed-date {
  font-size: 11px;
  color: var(--color-text-placeholder);
}

.vote-page__closed-result {
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-green);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.vote-page__closed-chevron {
  color: var(--color-text-muted);
  font-size: 16px;
}

/* ── 폼 ── */
.vote-page__form-wrap {
  padding: 22px;
  border: 1px solid var(--vp-border);
  border-radius: 20px;
  background: var(--vp-card);
  box-shadow: 0 14px 32px var(--color-shadow-base);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vote-page__form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-muted);
  margin-bottom: 4px;
}

.vote-page__form-input {
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--vp-border);
  border-radius: 12px;
  background: var(--color-bg-soft);
  color: var(--vp-text);
  width: 100%;
  font-weight: 600;
}

.vote-page__form-input:focus {
  outline: none;
  border-color: var(--vp-primary);
  background: var(--color-bg-white);
}

.vote-page__form-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vote-page__form-option-input {
  flex: 1;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--vp-text);
}

.vote-page__form-option-input:focus {
  outline: none;
  border-color: var(--vp-primary);
  background: var(--color-bg-white);
}

.vote-page__form-add-option {
  font-size: 13px;
  padding: 7px 12px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  background: none;
  color: var(--vp-muted);
  cursor: pointer;
  align-self: flex-start;
}

.vote-page__form-meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.vote-page__form-date {
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--vp-text);
}

.vote-page__form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-muted);
  cursor: pointer;
}

.vote-page__form-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

.vote-page__form-cancel {
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--vp-border);
  background: var(--color-bg-soft);
  color: var(--vp-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vote-page__form-submit {
  padding: 0 20px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--vp-primary);
  background: var(--vp-primary);
  color: var(--color-text-on-brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vote-page__form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── 빈 상태 ── */
.vote-page__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--vp-muted);
  font-size: 14px;
}

/* ── 결정사항 ── */
.vote-page__decision-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vote-page__decision-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vp-border);
}

.vote-page__decision-row:last-child {
  border-bottom: none;
}

.vote-page__decision-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vp-primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.vote-page__decision-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vp-text);
  margin-bottom: 4px;
}

.vote-page__decision-body {
  font-size: 13px;
  color: var(--vp-muted);
  padding: 6px 10px;
  background: var(--color-bg-soft);
  border-radius: 8px;
  margin-bottom: 4px;
}

.vote-page__decision-meta {
  font-size: 11px;
  color: var(--color-text-placeholder);
}

.vote-page__section-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vote-page__loading {
  padding: 60px;
  text-align: center;
  color: var(--vp-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .vote-page__summary {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vote-page__summary-card {
    padding: 14px 16px;
    border-radius: 14px;
  }

  .vote-page__summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .vote-page__summary-value {
    font-size: 20px;
  }

  .vote-page__action-row .vote-page__join-btn--delete {
    flex-basis: 100%;
    max-width: max-content;
  }
}

.vote-page__participants {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
}

.vote-page__participants-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-sub);
}

.vote-page__participants-anonymous,
.vote-page__participant-empty {
  font-size: 12px;
  color: var(--vp-muted);
}

.vote-page__participant-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vote-page__participant-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vote-page__participant-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-muted-2);
}

.vote-page__participant-option span {
  color: var(--vp-muted);
  font-weight: 800;
  white-space: nowrap;
}

.vote-page__participant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vote-page__participant-chip {
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--vp-primary-soft);
  color: var(--vp-primary-strong);
  font-size: 12px;
  font-weight: 700;
}

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-4, dark.css 흡수분)
   토큰 재정의로 정확히 커버되지 않는 값만 여기 남긴다.
   ================================================ */

[data-theme="dark"] .vote-page__badge--closed,
[data-theme="dark"] .vote-page__badge--expired {
  background: var(--color-bg-white);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .vote-page__form-input,
[data-theme="dark"] .vote-page__form-option-input,
[data-theme="dark"] .vote-page__form-date {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

[data-theme="dark"] .vote-page__form-input:focus,
[data-theme="dark"] .vote-page__form-option-input:focus {
  background: var(--color-bg-elevated-dark);
  border-color: var(--vp-icon-blue-text-dark);
}

[data-theme="dark"] .vote-page__summary-icon--blue {
  background: var(--color-brand-badge-bg);
}

[data-theme="dark"] .vote-page__summary-icon--green {
  background: var(--vp-green-icon-bg-dark);
  color: var(--color-success);
}

[data-theme="dark"] .vote-page__summary-icon--amber {
  background: var(--vp-amber-icon-bg-dark);
  color: var(--color-status-pending);
}

[data-theme="dark"] .vote-page__badge--ongoing {
  color: var(--color-brand-badge);
}

[data-theme="dark"] .vote-page__card--locked {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__card--locked .vote-page__card-title,
[data-theme="dark"] .vote-page__card--locked .vote-page__card-meta {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .vote-page__card--editing {
  border-color: var(--vp-amber-vivid);
  box-shadow: 0 0 0 3px var(--vp-amber-glow-13);
}

[data-theme="dark"] .vote-page__option {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__option:hover {
  background: var(--color-brand-purple-soft-dark);
  border-color: var(--color-indigo-accent-dark);
}

[data-theme="dark"] .vote-page__option-bar-wrap {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .vote-page__time-option {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__time-option:hover {
  background: var(--color-brand-purple-soft-dark);
  border-color: var(--color-indigo-accent-dark);
}

[data-theme="dark"] .vote-page__closed-badge {
  background: var(--color-bg-white);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .vote-page__closed-row:hover {
  background: var(--color-bg-white);
}

[data-theme="dark"] .vote-page__form-cancel {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__join-btn {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__join-btn:hover {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .vote-page__join-btn--edit {
  background: var(--vp-amber-glow-12-dark);
  border-color: var(--vp-amber-vivid);
}

[data-theme="dark"] .vote-page__join-btn--done {
  background: var(--vp-done-glow-12-dark);
  border-color: var(--vp-done-border-dark);
  color: var(--color-success);
}

[data-theme="dark"] .vote-page__join-btn--delete {
  background: var(--vp-delete-glow-12-dark);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

[data-theme="dark"] .vote-page__decision-body {
  background: var(--color-bg-white);
}

[data-theme="dark"] .vote-page__participants {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__participants-title {
  color: var(--color-text-main);
}

[data-theme="dark"] .vote-page__participant-chip {
  color: var(--color-brand-badge);
}

[data-theme="dark"] .vote-page__create-btn {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .vote-page__create-btn:hover {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .vote-page__summary-icon--blue {
  background: var(--vp-icon-blue-bg-dark);
  color: var(--vp-icon-blue-text-dark);
}

[data-theme="dark"] .vote-page__badge--ongoing {
  background: var(--vp-badge-ongoing-bg-dark);
}

[data-theme="dark"] .vote-page__participant-chip {
  background: var(--vp-badge-ongoing-bg-dark);
}

[data-theme="dark"] .vote-page__join-btn--edit {
  color: var(--vp-join-edit-text-dark);
}
.vp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: vp-fade-in 0.18s ease both;
}

@keyframes vp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vp-panel {
  width: 100%;
  max-width: 780px;
  max-height: min(88vh, calc(100vh - 48px));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.24);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vp-slide-up 0.2s ease both;
}

@keyframes vp-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.vp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vp-header-icon { font-size: 22px; }

.vp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.vp-meta {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.vp-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #4965ff;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s;
}
.vp-add-btn:hover { background: #3b52e6; }

.vp-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.vp-close:hover { background: #e2e8f0; color: #0f172a; }

.vp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* 팝업 안 vote-page 루트 여백 제거 */
.vp-body .vote-page {
  padding: 0;
}

@media (max-width: 640px) {
  .vp-backdrop { padding: 0; align-items: flex-end; }
  .vp-panel { max-width: 100%; max-height: 95vh; border-radius: 20px 20px 0 0; }
  .vp-body { padding: 16px; }
}
/* 이 파일 전용 로컬 토큰(6-B2 WS-2) */
:root {
  --color-tasks-hint-bg: rgba(238, 242, 255, 0.58);
}

[data-theme="dark"] {
  --color-tasks-hint-bg: rgba(99, 102, 241, 0.14);
  --color-tasks-indigo-soft-bg: rgba(99, 102, 241, 0.08);
  --color-tasks-indigo-soft-bg-3: rgba(99, 102, 241, 0.12);
  --color-tasks-indigo-border: rgb(49, 46, 129);
  --color-tasks-indigo-strong: rgb(99, 91, 255);
  --color-tasks-green-soft-bg: rgba(16, 185, 129, 0.12);
  --color-tasks-modal-shadow: rgba(0, 0, 0, 0.5);
  --color-tasks-button-text: rgb(255, 255, 255);
}

.workspace-task-page {
  width: 100%;
  color: var(--color-text-main);
}

.workspace-task-header {
  margin-bottom: 22px;
}

.workspace-task-header h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.workspace-task-header p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.my-task-panel {
  margin-bottom: 30px;
  padding: 24px;
  border: 1px solid var(--color-primary-soft-hover);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, var(--color-brand-focus-ring), transparent 34%),
    linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-accent-soft) 100%);
  box-shadow: 0 20px 50px var(--color-brand-badge-bg);
}

.my-task-panel__eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--color-brand-purple);
  font-size: 13px;
  font-weight: 900;
}

.my-task-panel__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.my-task-panel__main h2,
.my-task-panel__empty h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.my-task-panel__main p,
.my-task-panel__empty p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.my-task-panel__hint {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-primary-soft-hover);
  border-radius: 14px;
  background: var(--color-tasks-hint-bg);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.my-task-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.my-task-panel__actions button,
.my-task-panel__empty button {
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-sub);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.my-task-panel__actions button:hover,
.my-task-panel__empty button:hover {
  border-color: var(--color-brand-soft-hover);
  color: var(--color-brand-strong);
}

.my-task-panel__actions button.is-complete,
.my-task-panel__empty button {
  border-color: transparent;
  background: var(--color-brand-purple);
  color: var(--color-text-on-brand);
}

.my-task-panel__actions button.is-complete:hover,
.my-task-panel__empty button:hover {
  color: var(--color-text-on-brand);
  filter: brightness(0.98);
}

.my-task-panel__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.task-board__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.task-board__header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.task-board__header p {
  margin: 6px 0 0;
  color: var(--color-text-placeholder);
  font-size: 13px;
  font-weight: 700;
}

.task-refresh-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-text-sub);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.task-refresh-button svg {
  flex: 0 0 auto;
}

.task-refresh-button:hover {
  border-color: var(--color-brand-soft-hover);
  color: var(--color-brand-strong);
}

.task-refresh-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.task-card {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 18px 44px var(--color-shadow-base);
  overflow: hidden;
}

.task-card--mine {
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 20px 50px var(--color-brand-badge-bg);
}

.task-card--idle {
  background: var(--color-text-inverse);
}

.task-card--idle .task-card__body h3 {
  color: var(--color-text-sub);
}

.task-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 0;
}

.task-card__member {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.task-card__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
}

.task-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-card__avatar span {
  line-height: 1;
}

.task-card--mine .task-card__avatar {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.task-card__member strong {
  display: block;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 900;
}

.task-card__member p {
  margin: 3px 0 0;
  color: var(--color-text-placeholder);
  font-size: 12px;
  font-weight: 700;
}

.task-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.task-status--active {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.task-status--done {
  background: var(--color-success-soft);
  color: var(--color-type-study);
}

.task-status--idle {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}

.task-card__body {
  padding: 18px 22px 22px;
}

.task-card__body h3 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.task-card__body > p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.task-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.task-chip--todo {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.task-chip--contribution {
  background: var(--color-success-soft);
  color: var(--color-type-study);
}

.task-chip--muted {
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
}

.task-card__linked {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
}

.task-card__linked span {
  display: block;
  margin-bottom: 8px;
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 900;
}

.task-card__linked p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.task-done-section {
  margin-top: 34px;
}

.task-done-list {
  display: grid;
  gap: 10px;
}

.task-done-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-bg-white);
}

.task-done-item strong {
  display: block;
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 900;
}

.task-done-item p {
  margin: 5px 0 0;
  color: var(--color-text-placeholder);
  font-size: 13px;
  font-weight: 700;
}

.task-done-item__right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.task-done-item__status,
.task-done-item__contribution,
.task-done-item__muted {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.task-done-item__status {
  background: var(--color-success-soft);
  color: var(--color-type-study);
}

.task-done-item__contribution {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.task-done-item__muted {
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
}

.task-empty-box {
  padding: 28px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.task-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-brand-glow-fab-hover);
}

.task-modal {
  width: min(720px, 100%);
  max-height: min(820px, 92vh);
  overflow: auto;
  border-radius: 28px;
  background: var(--color-bg-white);
  box-shadow: 0 30px 80px var(--color-shadow-primary-hover);
}

.task-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--color-bg-soft);
}

.task-modal__header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.task-modal__header p {
  margin: 7px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.task-modal__header > button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 22px;
  cursor: pointer;
}

.task-form {
  display: grid;
  gap: 18px;
  padding: 22px 28px 28px;
}

.task-form__mode {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
}

.task-form__mode button {
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.task-form__mode button.is-active {
  background: var(--color-bg-white);
  color: var(--color-brand-strong);
  box-shadow: 0 8px 20px var(--color-shadow-base);
}

.task-field {
  display: grid;
  gap: 8px;
}

.task-readonly-field {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
}

.task-field span {
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 900;
}

.task-readonly-field span {
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 900;
}

.task-readonly-field strong {
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.task-field input,
.task-field select,
.task-field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  padding: 13px 14px;
  font-size: 14px;
  outline: none;
}

.task-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.task-field input:focus,
.task-field select:focus,
.task-field textarea:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 4px var(--color-brand-badge-bg);
}

.task-check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-soft);
  cursor: pointer;
}

.task-check input {
  grid-row: span 2;
}

.task-check span {
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 900;
}

.task-check small {
  color: var(--color-text-placeholder);
  font-size: 12px;
  font-weight: 700;
}

.task-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 6px;
}

.task-modal__footer button {
  height: 44px;
  border-radius: 14px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.task-modal__footer button:first-child {
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
}

.task-modal__footer button:last-child {
  border: 0;
  background: var(--color-brand-purple);
  color: var(--color-text-on-brand);
}

@media (max-width: 900px) {
  .task-grid {
    grid-template-columns: 1fr;
  }

  .my-task-panel__main,
  .my-task-panel__empty,
  .task-board__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-task-panel__empty button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .workspace-task-header h1 {
    font-size: 22px;
  }

  .my-task-panel,
  .task-card {
    border-radius: 20px;
  }

  .my-task-panel,
  .task-card__top,
  .task-card__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .task-done-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-done-item__right {
    flex-wrap: wrap;
  }

  .task-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .task-modal {
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }

  .task-modal__header,
  .task-form {
    padding-left: 20px;
    padding-right: 20px;
  }

  .task-form__mode {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-2, dark.css 흡수분)
   ================================================ */

[data-theme="dark"] .my-task-panel {
  background: var(--color-brand-soft-dark);
  border-color: var(--color-border);
  box-shadow: none;
}

[data-theme="dark"] .my-task-panel__hint {
  background: var(--color-tasks-indigo-soft-bg);
  border-color: var(--color-tasks-indigo-border);
}

[data-theme="dark"] .my-task-panel__actions button,
[data-theme="dark"] .my-task-panel__empty button {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-task-panel__actions button.is-complete,
[data-theme="dark"] .my-task-panel__empty button {
  background: var(--color-tasks-indigo-strong);
  border-color: var(--color-tasks-indigo-strong);
  color: var(--color-tasks-button-text);
}

[data-theme="dark"] .task-refresh-button {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .task-refresh-button:hover {
  border-color: var(--color-indigo-accent-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-card {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border-sunken-dark);
  box-shadow: none;
}

[data-theme="dark"] .task-card--mine {
  border-color: var(--color-tasks-indigo-border);
}

[data-theme="dark"] .task-card--idle {
  background: var(--color-brand-soft-dark);
}

[data-theme="dark"] .task-card__avatar {
  background: var(--color-bg-elevated-dark);
  color: var(--color-text-muted);
}

[data-theme="dark"] .task-card--mine .task-card__avatar {
  background: var(--color-brand-purple-soft-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-status--active {
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-status--done {
  background: var(--color-tasks-green-soft-bg);
  color: var(--color-success);
}

[data-theme="dark"] .task-status--idle {
  background: var(--color-bg-white);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .task-chip--todo {
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-chip--contribution {
  background: var(--color-tasks-green-soft-bg);
  color: var(--color-success);
}

[data-theme="dark"] .task-chip--muted {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-card__linked {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-card__linked p {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .task-done-item {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border-sunken-dark);
}

[data-theme="dark"] .task-done-item p {
  color: var(--color-text-muted);
}

[data-theme="dark"] .task-done-item__status {
  background: var(--color-tasks-green-soft-bg);
  color: var(--color-success);
}

[data-theme="dark"] .task-done-item__contribution {
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-done-item__muted {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-empty-box {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

[data-theme="dark"] .task-modal {
  box-shadow: 0 30px 80px var(--color-tasks-modal-shadow);
}

[data-theme="dark"] .task-modal__header {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .task-modal__header h2 {
  color: var(--color-text-main);
}

[data-theme="dark"] .task-modal__header > button {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .task-form__mode {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-form__mode button {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .task-form__mode button.is-active {
  background: var(--color-bg-elevated-dark);
  color: var(--color-brand-badge);
  box-shadow: none;
}

[data-theme="dark"] .task-readonly-field {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-field input,
[data-theme="dark"] .task-field select,
[data-theme="dark"] .task-field textarea {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-field input:focus,
[data-theme="dark"] .task-field select:focus,
[data-theme="dark"] .task-field textarea:focus {
  border-color: var(--color-indigo-accent-dark);
  box-shadow: 0 0 0 4px var(--color-tasks-indigo-soft-bg-3);
}

[data-theme="dark"] .task-check {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .task-modal__footer button:first-child {
  border-color: var(--color-border);
}

[data-theme="dark"] .my-task-panel__main h2,
[data-theme="dark"] .my-task-panel__empty h2,
[data-theme="dark"] .task-board__header h2 {
  color: var(--color-text-main);
}

[data-theme="dark"] .my-task-panel__main p,
[data-theme="dark"] .my-task-panel__empty p,
[data-theme="dark"] .task-board__header p {
  color: var(--color-text-muted);
}

[data-theme="dark"] .my-task-panel__actions button:hover {
  border-color: var(--color-indigo-accent-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .task-field span,
[data-theme="dark"] .task-readonly-field span {
  color: var(--color-text-sub);
}
.tkp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: tkp-fade-in 0.18s ease both;
}
@keyframes tkp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.tkp-panel {
  width: 100%;
  max-width: 820px;
  max-height: min(88vh, calc(100vh - 48px));
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 32px 80px var(--color-shadow-primary-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tkp-slide-up 0.2s ease both;
}
@keyframes tkp-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.tkp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--color-bg-soft);
  flex-shrink: 0;
}
.tkp-header-left { display: flex; align-items: center; gap: 12px; }
.tkp-header-icon { font-size: 22px; }
.tkp-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-text-main); line-height: 1.2; }
.tkp-meta { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--color-text-placeholder); }
.tkp-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.tkp-refresh-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg-soft); color: var(--color-text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s;
}
.tkp-refresh-btn:hover { background: var(--color-bg-soft); }
.tkp-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tkp-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 10px;
  background: var(--color-bg-soft); color: var(--color-text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.tkp-close:hover { background: var(--color-border); color: var(--color-text-main); }

.tkp-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.tkp-body .workspace-task-page { padding: 0; }
.tkp-body .workspace-task-header { display: none; }

@media (max-width: 640px) {
  .tkp-backdrop { padding: 0; align-items: flex-end; }
  .tkp-panel { max-width: 100%; max-height: 95vh; border-radius: 20px 20px 0 0; }
  .tkp-body { padding: 16px; }
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-2) */

[data-theme="dark"] .tkp-refresh-btn {
  background: var(--color-bg-elevated-dark);
  border-color: var(--color-border);
}

[data-theme="dark"] .tkp-refresh-btn:hover {
  background: var(--color-border);
}
.workspace-finance-modal,
.workspace-finance-modal *,
.workspace-finance-form input,
.workspace-finance-form textarea,
.workspace-finance-form button {
  font-family: inherit;
  box-sizing: border-box;
}

.workspace-finance-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: 88px 20px 24px;
  background: rgba(15, 23, 42, 0.28);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.workspace-finance-modal__sheet {
  width: min(500px, 100%);
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.18);
}

.workspace-finance-modal__header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.workspace-finance-modal__header h2 {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.workspace-finance-modal__header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.workspace-finance-modal__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.workspace-finance-form {
  padding: 16px 20px 20px;
}

.workspace-finance-form__type {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e8edf5;
}

.workspace-finance-form__type::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 3px);
  height: calc(100% - 8px);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease;
}

.workspace-finance-form__type.is-income::before {
  transform: translateX(calc(100% + 2px));
}

.workspace-finance-form__type button {
  position: relative;
  z-index: 1;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  transition: color 0.16s ease;
}

.workspace-finance-form__type.is-expense button.is-active {
  color: #ef3f5f;
}

.workspace-finance-form__type.is-income button.is-active {
  color: #12a66a;
}

.workspace-finance-form__field {
  display: block;
  margin-top: 11px;
}

.workspace-finance-form__field span {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.workspace-finance-form__field input,
.workspace-finance-form__field textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 15px;
  font-weight: 500;
  outline: 0;
}

.workspace-finance-form__field input {
  height: 42px;
  padding: 0 14px;
}

.workspace-finance-form__field textarea {
  min-height: 72px;
  resize: vertical;
  padding: 13px 14px;
  line-height: 1.5;
}

.workspace-finance-form__field input::placeholder,
.workspace-finance-form__field textarea::placeholder {
  color: #9aa3b2;
  font-weight: 500;
}

.workspace-finance-form__field input:focus,
.workspace-finance-form__field textarea:focus {
  border-color: #5365f6;
  box-shadow: 0 0 0 4px rgba(83, 101, 246, 0.1);
}

.workspace-finance-form__field input.is-invalid,
.workspace-finance-form__field textarea.is-invalid {
  border-color: #ef4444;
}

.workspace-finance-form__field input.is-invalid:focus,
.workspace-finance-form__field textarea.is-invalid:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.workspace-finance-form__error {
  margin: 6px 0 0;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
}

.workspace-finance-form__actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.workspace-finance-form__actions button {
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.workspace-finance-form__cancel {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
}

.workspace-finance-form__submit {
  border: 0;
  background: #4965ff;
  color: #ffffff;
}

.workspace-finance-form button:disabled,
.workspace-finance-form input:disabled,
.workspace-finance-form textarea:disabled,
.workspace-finance-modal__close:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 768px) {
  .workspace-finance-modal {
    padding: 0;
    align-items: flex-end;
  }

  .workspace-finance-modal__sheet {
    width: 100%;
    max-height: 86vh;
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
  }

  .workspace-finance-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 0;
    overscroll-behavior: contain;
  }

  .workspace-finance-form__actions {
    position: sticky;
    bottom: 0;
    margin: 16px -20px 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #eef2f7;
  }

  .workspace-finance-form__actions button {
    flex: 1;
  }
}
:root {
  --color-wfp-accent: rgb(83, 101, 246);
  --color-wfp-income: rgb(18, 166, 106);
  --color-wfp-expense: rgb(239, 63, 95);
  --color-wfp-accent-2: rgb(128, 103, 238);
  --color-wfp-icon-bg: rgba(255, 255, 255, 0.16);
  --color-wfp-metric-label: rgb(71, 85, 105);
  --color-wfp-warning: rgb(240, 138, 36);
  --color-wfp-progress-track: rgb(232, 237, 246);
  --color-wfp-cta-shadow: rgba(73, 101, 255, 0.18);
  --color-wfp-cta-shadow-hover: rgba(73, 101, 255, 0.24);
}

/* 다크 값: 카드류(top-card/budget-card/panel) 배경·테두리는 기존
   dark.css 값을 그대로 보존. 나머지는 사각지대라 이번에 새로 부여 */
[data-theme="dark"] {
  --color-wfp-accent: rgb(129, 140, 248);
  --color-wfp-income: var(--color-success);
  --color-wfp-expense: var(--color-danger);
  --color-wfp-accent-2: rgb(167, 153, 234);
  --color-wfp-icon-bg: rgba(255, 255, 255, 0.08);
  --color-wfp-metric-label: var(--color-text-muted);
  --color-wfp-warning: var(--color-status-pending);
  --color-wfp-progress-track: var(--color-bg-elevated-dark);
  --color-wfp-cta-shadow: rgba(79, 142, 247, 0.2);
  --color-wfp-cta-shadow-hover: rgba(79, 142, 247, 0.28);
  --color-wfp-income-icon-bg: rgba(16, 185, 129, 0.12);
  --color-wfp-expense-icon-bg: rgba(239, 63, 95, 0.12);
}

.workspace-finance {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workspace-finance__top-card,
.workspace-finance__budget-card,
.workspace-finance__panel {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 28px var(--color-shadow-base);
}

.workspace-finance__top-card {
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  align-items: stretch;
  padding: 20px;
  border-radius: 26px;
}

.workspace-finance__balance-card {
  min-height: 112px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-wfp-accent) 0%, var(--color-wfp-accent-2) 100%);
  color: var(--color-text-on-brand);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workspace-finance__balance-card span,
.workspace-finance__metric span {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.workspace-finance__balance-card span {
  opacity: 0.9;
}

.workspace-finance__balance-card strong {
  display: block;
  margin-top: 16px;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.workspace-finance__balance-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--color-wfp-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}

.workspace-finance__metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-finance__metric {
  min-height: 112px;
  padding: 24px 32px;
  border-right: 1px solid var(--color-border);
}

.workspace-finance__metric:last-child {
  border-right: 0;
}

.workspace-finance__metric span {
  color: var(--color-wfp-metric-label);
}

.workspace-finance__metric strong {
  display: block;
  margin-top: 12px;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -0.035em;
}

.workspace-finance__metric small {
  margin-top: 8px;
  display: block;
  color: var(--color-text-placeholder);
  font-size: 13px;
  font-weight: 800;
}

.is-income {
  color: var(--color-wfp-income) !important;
}

.is-expense {
  color: var(--color-wfp-expense) !important;
}

.is-warning {
  color: var(--color-wfp-warning) !important;
}

.workspace-finance__budget-card {
  padding: 22px 26px;
  border-radius: 26px;
}

.workspace-finance__budget-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: end;
  gap: 24px;
}

.workspace-finance__budget-row span {
  display: block;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.workspace-finance__budget-row strong {
  display: block;
  margin-top: 8px;
  color: var(--color-text-main);
  font-size: 22px;
  font-weight: 850;
}

.workspace-finance__budget-meta {
  display: flex;
  justify-content: flex-end;
  gap: 48px;
}

.workspace-finance__budget-meta .is-used {
  color: var(--color-wfp-accent);
}

.workspace-finance__progress {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-wfp-progress-track);
  overflow: hidden;
}

.workspace-finance__progress div {
  height: 100%;
  border-radius: inherit;
  background: var(--color-wfp-accent);
}

.workspace-finance__panel {
  padding: 22px;
  border-radius: 26px;
}

.workspace-finance__panel-header {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-finance__panel-header h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.workspace-finance__panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.workspace-finance__panel-actions button {
  height: 38px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.workspace-finance__desktop-add {
  padding: 0 14px;
  border: 0;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  box-shadow: 0 12px 24px var(--color-wfp-cta-shadow);
}

.workspace-finance__view-all {
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--color-wfp-accent);
}

.workspace-finance__transaction {
  display: grid;
  grid-template-columns: 48px 54px minmax(0, 1fr) 130px 34px;
  align-items: center;
  gap: 12px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-border);
}

.workspace-finance__transaction:last-child {
  border-bottom: 0;
}

.workspace-finance__transaction-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.workspace-finance__transaction-icon.is-income {
  background: var(--color-success-soft);
  color: var(--color-wfp-income);
}

.workspace-finance__transaction-icon.is-expense {
  background: var(--color-danger-soft);
  color: var(--color-wfp-expense);
}

.workspace-finance__transaction-type {
  font-size: 12px;
  font-weight: 850;
}

.workspace-finance__transaction-main {
  min-width: 0;
}

.workspace-finance__transaction-main strong {
  display: block;
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-finance__transaction-main p {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 650;
}

.workspace-finance__transaction-amount {
  text-align: right;
  font-size: 15px;
  font-weight: 850;
}

.workspace-finance__more {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
}

.workspace-finance__empty {
  padding: 38px 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.workspace-finance__floating-add {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1301;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 15px;
  font-weight: 850;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 32px var(--color-wfp-cta-shadow-hover);
}

@media (max-width: 1024px) {
  .workspace-finance__top-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .workspace-finance__metrics-row {
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
  }

  .workspace-finance__metric {
    min-height: auto;
    padding: 0 18px;
  }

  .workspace-finance__transaction {
    grid-template-columns: 42px minmax(0, 1fr) 110px 34px;
  }

  .workspace-finance__transaction-type {
    display: none;
  }

  .workspace-finance__panel-actions .workspace-finance__desktop-add {
    display: none;
  }

  .workspace-finance__floating-add {
    right: 18px;
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
    height: 50px;
    padding: 0 18px;
    font-size: 14px;
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  .workspace-finance {
    gap: 14px;
  }

  .workspace-finance__top-card {
    padding: 14px;
    border-radius: 22px;
  }

  .workspace-finance__balance-card {
    min-height: 96px;
    padding: 20px;
    border-radius: 18px;
  }

  .workspace-finance__balance-card strong {
    margin-top: 12px;
    font-size: 26px;
  }

  .workspace-finance__balance-icon {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }

  .workspace-finance__metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
  }

  .workspace-finance__metric {
    min-height: auto;
    padding: 0 8px;
    text-align: center;
    border-right: 0;
  }

  .workspace-finance__metric span {
    font-size: 12px;
  }

  .workspace-finance__metric strong {
    margin-top: 8px;
    font-size: 17px;
    letter-spacing: -0.04em;
  }

  .workspace-finance__metric small {
    margin-top: 4px;
    font-size: 12px;
  }

  .workspace-finance__budget-card,
  .workspace-finance__panel {
    border-radius: 22px;
  }

  .workspace-finance__budget-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .workspace-finance__budget-meta {
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
  }

  .workspace-finance__transaction {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
  }

  .workspace-finance__transaction-amount {
    grid-column: 2 / 3;
    text-align: left;
  }

}

@media (max-width: 420px) {
  .workspace-finance__floating-add {
    width: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .workspace-finance__floating-add span {
    display: none;
  }
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분) */
[data-theme="dark"] .workspace-finance__top-card,
[data-theme="dark"] .workspace-finance__budget-card,
[data-theme="dark"] .workspace-finance__panel {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border-sunken-dark);
  box-shadow: none;
}
[data-theme="dark"] .workspace-finance__metric { border-right-color: var(--color-border-sunken-dark); }
[data-theme="dark"] .workspace-finance__metric span { color: var(--color-text-placeholder); }
[data-theme="dark"] .workspace-finance__metric strong { color: var(--color-text-main); }
[data-theme="dark"] .workspace-finance__metric small { color: var(--color-text-muted); }
[data-theme="dark"] .workspace-finance__budget-row span { color: var(--color-text-placeholder); }
[data-theme="dark"] .workspace-finance__budget-row strong { color: var(--color-text-main); }
[data-theme="dark"] .workspace-finance__progress { background: var(--color-bg-elevated-dark); }
[data-theme="dark"] .workspace-finance__panel-header h2 { color: var(--color-text-main); }
[data-theme="dark"] .workspace-finance__transaction { border-bottom-color: var(--color-border-sunken-dark); }
[data-theme="dark"] .workspace-finance__transaction-main strong { color: var(--color-text-main); }
[data-theme="dark"] .workspace-finance__transaction-main p { color: var(--color-text-muted); }
[data-theme="dark"] .workspace-finance__transaction-icon.is-income { background: var(--color-wfp-income-icon-bg); }
[data-theme="dark"] .workspace-finance__transaction-icon.is-expense { background: var(--color-wfp-expense-icon-bg); }
[data-theme="dark"] .workspace-finance__empty {
  border-top-color: var(--color-border-sunken-dark);
  color: var(--color-text-muted);
}
@media (max-width: 1024px) {
  [data-theme="dark"] .workspace-finance__metrics-row { border-top-color: var(--color-border-sunken-dark); }
}
.pp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: pp-fade-in 0.18s ease both;
}
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pp-panel {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pp-slide-up 0.2s ease both;
}
@keyframes pp-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.pp-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-header-icon { font-size: 22px; }
.pp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.pp-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, color 0.14s;
  flex-shrink: 0;
}
.pp-close:hover { background: #e2e8f0; color: #0f172a; }

.pp-body {
  flex: 1;
  padding: 40px 24px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.pp-coming-icon {
  font-size: 52px;
  line-height: 1;
  filter: grayscale(0.15);
}

.pp-coming-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
}

.pp-coming-desc {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  max-width: 340px;
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .pp-backdrop { padding: 0; align-items: flex-end; }
  .pp-panel { max-width: 100%; border-radius: 20px 20px 0 0; }
  .pp-body { padding: 32px 20px 40px; }
}
.workspace-evaluation {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #111827;
}

.workspace-evaluation__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.workspace-evaluation__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 800;
}

.workspace-evaluation__header h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.workspace-evaluation__header p:last-child {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.workspace-evaluation__progress-circle {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, #ffffff 58%, transparent 59%),
    conic-gradient(#4f46e5 var(--progress-degree, 0deg), #e5e7eb 0deg);
  border: 8px solid #eef2ff;
}

.workspace-evaluation__progress-circle span {
  color: #0f172a;
  font-size: 20px;
  font-weight: 900;
}

.workspace-evaluation__bar {
  height: 6px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.workspace-evaluation__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  transition: width 0.2s ease;
}

.workspace-evaluation__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-evaluation__card {
  padding: 18px 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.workspace-evaluation__card:hover {
  border-color: #d7dce3;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
/* 👉 선택 중일 땐 hover 효과 제거 */
.workspace-evaluation__card--open:hover {
  transform: none;
  border-color: #6366f1;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.12),
    0 12px 26px rgba(15, 23, 42, 0.06);
}

.workspace-evaluation__card--open {
  border-color: #6366f1;
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.12),
    0 12px 26px rgba(15, 23, 42, 0.06);
}

.workspace-evaluation__question {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.workspace-evaluation__question:disabled {
  cursor: not-allowed;
}

.workspace-evaluation__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.workspace-evaluation__badge--blue {
  background: #eef2ff;
  color: #4338ca;
}

.workspace-evaluation__badge--green {
  background: #ecfdf5;
  color: #047857;
}

.workspace-evaluation__badge--orange {
  background: #fffbeb;
  color: #b45309;
}

.workspace-evaluation__badge--purple {
  background: #f5f3ff;
  color: #6d28d9;
}

.workspace-evaluation__badge--pink {
  background: #fdf2f8;
  color: #be185d;
}

.workspace-evaluation__badge--amber {
  background: #fff7ed;
  color: #c2410c;
}

.workspace-evaluation__question strong {
  display: block;
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.5;
  word-break: keep-all;
}

/* ── 7점 리커트 원형 스케일 ── */
.eval-likert {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.eval-likert--readonly {
  margin-top: 10px;
}

.eval-likert__label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.eval-likert__circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

.eval-likert__circle {
  border-radius: 999px;
  border: 2.5px solid;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}

.eval-likert__circle:hover {
  opacity: 0.85;
}

.eval-likert__circle--sm {
  width: 18px !important;
  height: 18px !important;
}

/* green: 그렇다 (positions 1-3) */
.eval-likert__circle--green {
  border-color: #10b981;
}
.eval-likert__circle--green.active,
.eval-likert__circle--green:hover {
  background: #10b981;
}

/* neutral: 중립 (position 4) */
.eval-likert__circle--neutral {
  border-color: #cbd5e1;
}
.eval-likert__circle--neutral.active,
.eval-likert__circle--neutral:hover {
  background: #cbd5e1;
}

/* purple: 그렇지 않다 (positions 5-7) */
.eval-likert__circle--purple {
  border-color: #8b5cf6;
}
.eval-likert__circle--purple.active,
.eval-likert__circle--purple:hover {
  background: #8b5cf6;
}
.workspace-evaluation__comment {
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.workspace-evaluation__comment label {
  display: block;
  margin-bottom: 12px;
  color: #334155;
  font-size: 15px;
  font-weight: 900;
}

.workspace-evaluation__comment textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  outline: none;
}

.workspace-evaluation__comment textarea::placeholder {
  color: #9ca3af;
}

.workspace-evaluation__comment textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.workspace-evaluation__comment textarea:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}

.workspace-evaluation__submit {
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  color: #ffffff;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.24);
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease;
}

.workspace-evaluation__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(79, 70, 229, 0.28);
}

.workspace-evaluation__submit:disabled {
  background: #c7d2fe;
  color: #ffffff;
  opacity: 0.8;
  cursor: not-allowed;
  box-shadow: none;
}

.workspace-evaluation__all-done {
  min-height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  color: #15803d;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #bbf7d0;
}

.workspace-evaluation__member-section {
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.workspace-evaluation__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.workspace-evaluation__section-head h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.workspace-evaluation__section-head span {
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
}

.workspace-evaluation__member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.workspace-evaluation__member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    background-color 0.16s ease;
}

.workspace-evaluation__member-card:hover {
  transform: translateY(-1px);
  background: #f8fafc;
  border-color: #d7dce3;
}

.workspace-evaluation__member-card--selected {
  background: #eef2ff;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.workspace-evaluation__member-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f3f4f6;
}

.workspace-evaluation__member-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-evaluation__member-info strong {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-evaluation__member-info em {
  color: #6b7280;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.workspace-evaluation__empty {
  padding: 24px 16px;
  border: 1px dashed #d7dce3;
  border-radius: 16px;
  background: #f8fafc;
  color: #6b7280;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.workspace-evaluation__evaluated {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.workspace-evaluation__evaluated-title {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.workspace-evaluation__evaluated-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-evaluation__evaluated-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.workspace-evaluation__question-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.workspace-evaluation__answered-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: #22c55e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.workspace-evaluation__answered-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.workspace-evaluation__answered-text {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.workspace-evaluation__answered-text {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.workspace-evaluation__card--answered {
  border-color: #e5e7eb;
  background: #fafafa;
}

@media (max-width: 768px) {
  .workspace-evaluation {
    gap: 16px;
  }

  .workspace-evaluation__header {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 16px;
    border-radius: 20px;
  }

  .workspace-evaluation__header h2 {
    font-size: 20px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .workspace-evaluation__progress-circle {
    width: 64px;
    height: 64px;
    border-width: 6px;
  }

  .workspace-evaluation__progress-circle span {
    font-size: 15px;
  }

  .workspace-evaluation__card,
  .workspace-evaluation__comment,
  .workspace-evaluation__member-section {
    padding: 16px 14px;
    border-radius: 18px;
  }

  .workspace-evaluation__question strong {
    font-size: 14px;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.55;
  }

  /* 모바일: 레이블을 위아래로, 원형 중앙 배치 */
  .eval-likert {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }

  .eval-likert__label {
    font-size: 11px;
  }

  .eval-likert__circles {
    gap: 5px;
    width: 100%;
    justify-content: center;
  }

  /* 원형 크기 모바일 축소 */
  .eval-likert__circle {
    flex-shrink: 1;
  }

  .workspace-evaluation__submit {
    min-height: 52px;
    font-size: 15px;
    border-radius: 16px;
  }

  .workspace-evaluation__member-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace-evaluation__section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .workspace-evaluation__answered-preview {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 팀공간 다면평가 팝업 ───────────────────────────────────────────────
   한 사람의 최근 협업을 빠르게 검토하는 작업 화면이다. 장식보다 기준, 현재
   선택, 남은 항목을 같은 시야 안에 두어 점수 방향을 헷갈리지 않게 한다. */
.fp-panel.evaluation-popup {
  width: min(1080px, calc(100vw - 40px));
  max-width: 1080px;
  max-height: min(92vh, 940px);
  border-radius: 8px;
}

.evaluation-popup .fp-header {
  min-height: 64px;
  padding: 12px 18px;
}

.evaluation-popup__title-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 7px;
  background: #eef3f7;
  color: #42657d;
}

.evaluation-popup__title-icon svg { width: 18px; height: 18px; }
.evaluation-popup .fp-body { padding: 0; background: #f6f7f8; }

.workspace-evaluation--popup {
  gap: 0;
  color: #20242a;
}

.workspace-evaluation--popup .workspace-evaluation__header {
  position: relative;
  align-items: center;
  min-height: 174px;
  padding: 26px 34px;
  border: 0;
  border-bottom: 1px solid #e4e7ea;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.workspace-evaluation--popup .workspace-evaluation__eyebrow {
  gap: 6px;
  min-height: 26px;
  margin-bottom: 12px;
  padding: 0 9px;
  border-radius: 6px;
  background: #edf3f6;
  color: #315f77;
  font-size: 11px;
  letter-spacing: 0;
}

.workspace-evaluation--popup .workspace-evaluation__eyebrow svg { width: 13px; height: 13px; }

.workspace-evaluation--popup .workspace-evaluation__header h2 {
  max-width: 720px;
  color: #1e242b;
  font-size: 25px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.35;
}

.workspace-evaluation__header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  color: #747b84;
  font-size: 12px;
  font-weight: 600;
}

.workspace-evaluation__header-stats span + span { position: relative; padding-left: 18px; }
.workspace-evaluation__header-stats span + span::before { position: absolute; left: 0; color: #c8cdd2; content: "/"; }
.workspace-evaluation__header-stats b { color: #2d3740; font-size: 14px; }

.workspace-evaluation--popup .workspace-evaluation__progress-circle {
  width: 76px;
  height: 76px;
  border: 0;
  background: radial-gradient(circle at center, #fff 61%, transparent 62%), conic-gradient(#4d7c92 var(--progress-degree, 0deg), #e8ecef 0deg);
  box-shadow: inset 0 0 0 1px #e7eaed;
}

.workspace-evaluation--popup .workspace-evaluation__progress-circle span { color: #2d414e; font-size: 17px; }

.workspace-evaluation__guide {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 24px 0;
  padding: 11px 13px;
  border: 1px solid #dce4e8;
  border-radius: 7px;
  background: #f4f8fa;
  color: #52636d;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.55;
}

.workspace-evaluation__guide svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: #4d7c92; }

.workspace-evaluation--popup .workspace-evaluation__member-section {
  margin: 18px 24px 0;
  padding: 18px;
  border: 1px solid #e0e3e6;
  border-radius: 8px;
  box-shadow: none;
}

.workspace-evaluation--popup .workspace-evaluation__section-head { margin-bottom: 12px; }
.workspace-evaluation--popup .workspace-evaluation__section-head h3 { font-size: 15px; font-weight: 750; letter-spacing: 0; }
.workspace-evaluation--popup .workspace-evaluation__section-head span { font-size: 11.5px; font-weight: 550; }
.workspace-evaluation--popup .workspace-evaluation__member-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.workspace-evaluation--popup .workspace-evaluation__member-card {
  position: relative;
  min-width: 0;
  min-height: 64px;
  padding: 9px 38px 9px 10px;
  border-radius: 7px;
  box-shadow: none;
  transform: none;
}

.workspace-evaluation--popup .workspace-evaluation__member-card:hover { transform: none; border-color: #aebdc6; background: #f8fafb; }
.workspace-evaluation--popup .workspace-evaluation__member-card--selected { border-color: #4d7c92; background: #eff5f7; box-shadow: inset 0 0 0 1px #4d7c92; }
.workspace-evaluation--popup .workspace-evaluation__member-avatar { width: 40px; height: 40px; }
.workspace-evaluation--popup .workspace-evaluation__member-info strong { font-size: 13.5px; }
.workspace-evaluation--popup .workspace-evaluation__member-info em { font-size: 11.5px; }

.workspace-evaluation__member-check {
  position: absolute;
  right: 12px;
  width: 17px;
  height: 17px;
  padding: 3px;
  border-radius: 50%;
  background: #4d7c92;
  color: #fff;
}

.workspace-evaluation--popup .workspace-evaluation__evaluated { margin-top: 12px; padding-top: 12px; }
.workspace-evaluation--popup .workspace-evaluation__evaluated-title { margin-bottom: 7px; font-size: 11px; }
.workspace-evaluation--popup .workspace-evaluation__evaluated-list span { min-height: 25px; border-radius: 5px; font-size: 11px; }

.workspace-evaluation--popup .workspace-evaluation__list {
  gap: 0;
  margin: 18px 24px 0;
  overflow: hidden;
  border: 1px solid #e0e3e6;
  border-radius: 8px;
  background: #fff;
}

.workspace-evaluation--popup .workspace-evaluation__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: 26px;
  min-height: 142px;
  padding: 20px 22px;
  border: 0;
  border-bottom: 1px solid #e7e9eb;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.workspace-evaluation--popup .workspace-evaluation__card:last-child { border-bottom: 0; }
.workspace-evaluation--popup .workspace-evaluation__card:hover { border-color: #e7e9eb; box-shadow: none; }
.workspace-evaluation--popup .workspace-evaluation__card--answered { background: #fbfcfc; }

.workspace-evaluation--popup .workspace-evaluation__question {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  cursor: default;
}

.workspace-evaluation__question-index {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid #dce1e5;
  border-radius: 6px;
  color: #77818a;
  font-size: 10px;
  font-weight: 750;
}

.workspace-evaluation--popup .workspace-evaluation__question-main { display: block; min-width: 0; }
.workspace-evaluation--popup .workspace-evaluation__question-main > small { display: block; margin-bottom: 5px; color: #4d7c92; font-size: 10.5px; font-weight: 750; }
.workspace-evaluation--popup .workspace-evaluation__question strong { color: #262c32; font-size: 14px; font-weight: 720; letter-spacing: 0; line-height: 1.45; }
.workspace-evaluation--popup .workspace-evaluation__question-main p { margin: 6px 0 0; color: #7b828a; font-size: 11px; line-height: 1.5; word-break: keep-all; }

.workspace-evaluation__score-result { display: flex; align-items: baseline; gap: 2px; color: #345f74; font-size: 20px; font-weight: 800; }
.workspace-evaluation__score-result small { color: #9299a0; font-size: 10px; font-weight: 600; }

.eval-scale { min-width: 0; }
.eval-scale__labels { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 7px; color: #858c93; font-size: 10px; font-weight: 600; }
.eval-scale__labels span:nth-child(2) { text-align: center; }
.eval-scale__labels span:last-child { text-align: right; }
.eval-scale__options { display: grid; grid-template-columns: repeat(7, minmax(34px, 1fr)); gap: 5px; }
.eval-scale__options button {
  height: 38px;
  padding: 0;
  border: 1px solid #d9dde1;
  border-radius: 6px;
  background: #fff;
  color: #687078;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.eval-scale__options button:hover { border-color: #7895a5; background: #f3f7f9; color: #315f77; }
.eval-scale__options button.is-selected { border-color: #4d7c92; background: #4d7c92; color: #fff; box-shadow: 0 0 0 2px rgba(77, 124, 146, .13); }

.workspace-evaluation--popup .workspace-evaluation__comment {
  margin: 18px 24px 0;
  padding: 18px;
  border-radius: 8px;
  box-shadow: none;
}

.workspace-evaluation__comment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-evaluation--popup .workspace-evaluation__comment label { margin: 0; font-size: 13.5px; font-weight: 750; }
.workspace-evaluation--popup .workspace-evaluation__comment label small { margin-left: 5px; color: #9299a0; font-size: 10.5px; font-weight: 600; }
.workspace-evaluation__comment-head > span { color: #9299a0; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.workspace-evaluation--popup .workspace-evaluation__comment textarea { min-height: 92px; margin-top: 10px; padding: 12px; border-radius: 6px; font-size: 12px; }
.workspace-evaluation--popup .workspace-evaluation__comment textarea:focus { border-color: #4d7c92; box-shadow: 0 0 0 3px rgba(77, 124, 146, .12); }

.workspace-evaluation__feedback {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 24px -4px;
  padding: 10px 12px;
  border: 1px solid #d8e6dd;
  border-radius: 7px;
  background: #f2f8f4;
  color: #2f6b49;
  font-size: 12px;
  font-weight: 650;
}

.workspace-evaluation__feedback.is-error { border-color: #ead8d8; background: #fbf3f3; color: #a04444; }
.workspace-evaluation__feedback svg { flex: 0 0 auto; }

.workspace-evaluation__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 14px 24px;
  border-top: 1px solid #dfe3e6;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 18px rgba(31, 39, 46, .05);
  backdrop-filter: blur(8px);
}

.workspace-evaluation__actions > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.workspace-evaluation__actions > div:first-child strong { overflow: hidden; color: #2b3137; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-evaluation__actions > div:first-child span { color: #858c93; font-size: 10.5px; }
.workspace-evaluation--popup .workspace-evaluation__submit { width: 210px; min-height: 44px; flex: 0 0 auto; border-radius: 7px; background: #345f74; font-size: 12.5px; box-shadow: none; }
.workspace-evaluation--popup .workspace-evaluation__submit:hover:not(:disabled) { transform: none; background: #294f62; box-shadow: none; }
.workspace-evaluation--popup .workspace-evaluation__submit:disabled { background: #d8dde0; color: #8e959b; opacity: 1; }
.workspace-evaluation--popup .workspace-evaluation__all-done { min-height: 44px; padding: 0 16px; border: 1px solid #cfe3d5; border-radius: 7px; background: #f1f8f3; font-size: 12px; }

[data-theme="dark"] .evaluation-popup .fp-body { background: #1e2025; }
[data-theme="dark"] .evaluation-popup__title-icon { background: #2e3940; color: #9bb5c3; }
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__header,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__member-section,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__list,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__card,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__comment { border-color: #373b42; background: #272a30; }
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__card--answered { background: #2a2e34; }
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__header h2,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__section-head h3,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__question strong,
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__member-info strong,
[data-theme="dark"] .workspace-evaluation__actions > div:first-child strong { color: #f0f2f4; }
[data-theme="dark"] .workspace-evaluation__guide { border-color: #3a4951; background: #263238; color: #bcc9cf; }
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__member-card,
[data-theme="dark"] .eval-scale__options button { border-color: #41454c; background: #2c2f35; color: #c2c6cb; }
[data-theme="dark"] .workspace-evaluation--popup .workspace-evaluation__member-card--selected { border-color: #789aaa; background: #303d43; }
[data-theme="dark"] .eval-scale__options button.is-selected { border-color: #86a7b6; background: #587f91; color: #fff; }
[data-theme="dark"] .workspace-evaluation__actions { border-color: #393d44; background: rgba(38, 41, 47, .96); }

@media (max-width: 900px) {
  .workspace-evaluation--popup .workspace-evaluation__member-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-evaluation--popup .workspace-evaluation__card { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 640px) {
  .fp-panel.evaluation-popup { width: 100%; max-height: 96vh; border-radius: 8px 8px 0 0; }
  .workspace-evaluation--popup .workspace-evaluation__header { min-height: 150px; padding: 20px 18px; }
  .workspace-evaluation--popup .workspace-evaluation__header h2 { max-width: calc(100% - 72px); font-size: 20px; }
  .workspace-evaluation--popup .workspace-evaluation__progress-circle { position: absolute; top: 22px; right: 18px; width: 58px; height: 58px; }
  .workspace-evaluation--popup .workspace-evaluation__progress-circle span { font-size: 13px; }
  .workspace-evaluation__guide,
  .workspace-evaluation--popup .workspace-evaluation__member-section,
  .workspace-evaluation--popup .workspace-evaluation__list,
  .workspace-evaluation--popup .workspace-evaluation__comment { margin-right: 12px; margin-left: 12px; }
  .workspace-evaluation--popup .workspace-evaluation__member-list { grid-template-columns: 1fr; }
  .workspace-evaluation--popup .workspace-evaluation__card { min-height: 0; padding: 18px 14px; }
  .eval-scale__options { gap: 4px; }
  .eval-scale__options button { min-width: 0; height: 36px; }
  .workspace-evaluation__actions { padding: 12px; }
  .workspace-evaluation__actions > div:first-child { display: none; }
  .workspace-evaluation--popup .workspace-evaluation__submit,
  .workspace-evaluation--popup .workspace-evaluation__all-done { width: 100%; }
}
.workspace-ai-page {
  --ai-bg: rgb(248, 250, 252);
  --ai-card: rgb(255, 255, 255);
  --ai-border: rgb(226, 232, 240);
  --ai-text: rgb(15, 23, 42);
  --ai-muted: rgb(100, 116, 139);
  --ai-primary: rgb(79, 70, 229);
  --ai-primary-soft: rgb(238, 242, 255);
  --ai-green: rgb(15, 159, 110);
  --ai-warning: rgb(180, 83, 9);
  --ai-text-sub: rgb(51, 65, 85);
  --ai-card-shadow: rgba(15, 23, 42, 0.06);
  --ai-toggle-shadow: rgba(15, 23, 42, 0.05);
  --ai-icon-bg: rgb(238, 237, 254);
  --ai-icon-accent: rgb(83, 74, 183);
  --ai-badge-on-bg: rgb(236, 253, 245);
  --ai-badge-on-text: rgb(6, 95, 70);
  --ai-badge-off-bg: rgb(241, 245, 249);
  --ai-dot: rgb(245, 158, 11);
  --ai-switch-off: rgb(203, 213, 225);
  --ai-switch-knob-shadow: rgba(15, 23, 42, 0.18);
  --ai-switch-on: rgb(103, 84, 232);
  --ai-notice-text: rgb(71, 85, 105);
  --ai-alert-border: rgb(253, 230, 138);
  --ai-alert-bg: rgb(255, 251, 235);
  --ai-calm-border: rgb(187, 247, 208);
  --ai-calm-bg: rgb(240, 253, 244);
  --ai-stage-bg: rgb(251, 253, 255);
  --ai-stage-current-border: rgb(199, 210, 254);
  --ai-stage-current-text: rgb(55, 48, 163);
  --ai-partner-avatar-text: rgb(4, 120, 87);
  --ai-modal-backdrop: rgba(15, 23, 42, 0.45);
  --ai-modal-shadow: rgba(15, 23, 42, 0.24);
  --ai-error-bg: rgb(254, 242, 242);
  --ai-error-text: rgb(185, 28, 28);
  --ai-skeleton-1: rgb(241, 245, 249);
  --ai-skeleton-2: rgb(255, 255, 255);

  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ai-text);
}

.workspace-ai-page__ghost-button,
.workspace-ai-page__partner button {
  min-height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.workspace-ai-page__ghost-button {
  border: 1px solid var(--ai-border);
  background: var(--ai-card);
  color: var(--ai-text-sub);
  padding: 0 16px;
}

.workspace-ai-page__ghost-button:disabled,
.workspace-ai-page__switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.workspace-ai-page__card {
  padding: 22px;
  border: 1px solid var(--ai-border);
  border-radius: 22px;
  background: var(--ai-card);
  box-shadow: 0 18px 40px var(--ai-card-shadow);
}

.workspace-ai-page__card.is-disabled {
  background: var(--ai-bg);
  filter: grayscale(0.35);
  opacity: 0.62;
}

/* ── 상단 토글 헤더 (A형) ── */
.workspace-ai-page__usage-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--ai-border);
  border-radius: 18px;
  background: var(--ai-card);
  box-shadow: 0 12px 28px var(--ai-toggle-shadow);
}

.workspace-ai-page__usage-toggle-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.workspace-ai-page__usage-toggle-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ai-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-ai-page__usage-toggle-icon svg {
  width: 20px;
  height: 20px;
  color: var(--ai-icon-accent);
}

.workspace-ai-page__usage-toggle strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--ai-text);
  line-height: 1.3;
}

.workspace-ai-page__usage-toggle-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ai-muted);
  font-weight: 700;
  line-height: 1.4;
}

.workspace-ai-page__usage-toggle-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.workspace-ai-page__active-badge {
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.workspace-ai-page__active-badge.is-on {
  background: var(--ai-badge-on-bg);
  color: var(--ai-badge-on-text);
}

.workspace-ai-page__active-badge.is-off {
  background: var(--ai-badge-off-bg);
  color: var(--ai-muted);
}

/* ── 공통 섹션 ── */
.workspace-ai-page__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.workspace-ai-page__section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.workspace-ai-page__section-title svg {
  flex-shrink: 0;
  color: var(--ai-muted);
  font-size: 19px;
}

.workspace-ai-page__section-title h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}

.workspace-ai-page__section-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.workspace-ai-page__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ai-dot);
}

.workspace-ai-page__switch {
  width: 52px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--ai-switch-off);
  padding: 3px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.workspace-ai-page__switch span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ai-card);
  box-shadow: 0 4px 10px var(--ai-switch-knob-shadow);
  transition: transform 0.18s ease;
}

.workspace-ai-page__switch.is-on {
  background: var(--ai-switch-on);
}

.workspace-ai-page__switch.is-on span {
  transform: translateX(22px);
}

.workspace-ai-page__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  line-height: 1.7;
}

.workspace-ai-page__notice svg {
  margin-top: 4px;
  font-size: 20px;
}

.workspace-ai-page__notice strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
}

.workspace-ai-page__notice p {
  margin: 2px 0 0;
  color: var(--ai-notice-text);
  font-size: 15px;
  font-weight: 650;
}

.workspace-ai-page__notice.has-alert {
  border: 1px solid var(--ai-alert-border);
  background: var(--ai-alert-bg);
  color: var(--ai-warning);
}

.workspace-ai-page__notice.is-calm {
  border: 1px solid var(--ai-calm-border);
  background: var(--ai-calm-bg);
  color: var(--ai-green);
}

.workspace-ai-page__signal-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.workspace-ai-page__signal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--ai-bg);
  color: var(--ai-text-sub);
  font-size: 14px;
  font-weight: 800;
}

.workspace-ai-page__signal svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ai-green);
}

.workspace-ai-page__stage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.workspace-ai-page__stage {
  padding: 14px 12px;
  border: 1px solid var(--ai-border);
  border-radius: 14px;
  background: var(--ai-stage-bg);
  text-align: center;
}

.workspace-ai-page__stage strong,
.workspace-ai-page__stage span {
  display: block;
}

.workspace-ai-page__stage strong {
  font-size: 14px;
  font-weight: 900;
}

.workspace-ai-page__stage span {
  margin-top: 4px;
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-ai-page__stage.is-current {
  border-color: var(--ai-stage-current-border);
  background: var(--ai-primary-soft);
  color: var(--ai-stage-current-text);
}

.workspace-ai-page__muted {
  margin: 0;
  color: var(--ai-muted);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;
}

.workspace-ai-page__report {
  padding: 18px;
  border-radius: 16px;
  background: var(--ai-bg);
}

.workspace-ai-page__report div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.workspace-ai-page__report strong {
  font-size: 15px;
  font-weight: 900;
}

.workspace-ai-page__report span {
  color: var(--ai-muted);
  font-size: 13px;
  font-weight: 800;
}

.workspace-ai-page__report p {
  margin: 0;
  color: var(--ai-text-sub);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 650;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.workspace-ai-page__partner-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.workspace-ai-page__partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--ai-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.workspace-ai-page__partner:hover,
.workspace-ai-page__partner:focus-visible {
  background: var(--ai-bg);
  outline: none;
}

.workspace-ai-page__partner > span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ai-badge-on-bg);
  color: var(--ai-partner-avatar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.workspace-ai-page__partner strong,
.workspace-ai-page__partner p {
  display: block;
  margin: 0;
}

.workspace-ai-page__partner strong {
  font-size: 15px;
  font-weight: 900;
}

.workspace-ai-page__partner p {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 13px;
  font-weight: 750;
}

.workspace-ai-page__partner button {
  border: 1px solid var(--ai-border);
  background: var(--ai-card);
  color: var(--ai-text-sub);
  padding: 0 14px;
}

.workspace-ai-page__partner button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.workspace-ai-page__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--ai-modal-backdrop);
}

.workspace-ai-page__modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--ai-border);
  border-radius: 22px;
  background: var(--ai-card);
  box-shadow: 0 28px 80px var(--ai-modal-shadow);
}

.workspace-ai-page__modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--ai-border);
  background: var(--ai-card);
}

.workspace-ai-page__modal-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 900;
}

.workspace-ai-page__modal-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}

.workspace-ai-page__modal-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ai-border);
  border-radius: 50%;
  background: var(--ai-card);
  color: var(--ai-text-sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workspace-ai-page__modal-close svg {
  width: 19px;
  height: 19px;
}

.workspace-ai-page__modal-close:hover,
.workspace-ai-page__modal-close:focus-visible {
  background: var(--ai-bg);
  outline: none;
}

.workspace-ai-page__report-list {
  display: grid;
  gap: 12px;
  padding: 18px 22px 22px;
}

.workspace-ai-page__report-item {
  padding: 16px;
  border: 1px solid var(--ai-border);
  border-radius: 16px;
  background: var(--ai-bg);
}

.workspace-ai-page__report-item div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.workspace-ai-page__report-item strong {
  font-size: 15px;
  font-weight: 900;
}

.workspace-ai-page__report-item span {
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.workspace-ai-page__report-item p {
  margin: 0;
  color: var(--ai-text-sub);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 650;
  white-space: pre-wrap;
}

.workspace-ai-page__member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.workspace-ai-page__member {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--ai-bg);
  color: var(--ai-text-sub);
  font-size: 13px;
  font-weight: 850;
}

.workspace-ai-page__member b {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ai-primary-soft);
  color: var(--ai-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.workspace-ai-page__member small {
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-ai-page__error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--ai-error-bg);
  color: var(--ai-error-text);
  font-size: 14px;
  font-weight: 800;
}

.workspace-ai-page__skeleton {
  height: 280px;
  border-radius: 22px;
  background: linear-gradient(90deg, var(--ai-skeleton-1), var(--ai-skeleton-2), var(--ai-skeleton-1));
  background-size: 220% 100%;
  animation: workspace-ai-page-pulse 1.4s infinite linear;
}

.workspace-ai-page__skeleton.short {
  height: 160px;
}

@keyframes workspace-ai-page-pulse {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -220% 0;
  }
}

@media (max-width: 860px) {
  .workspace-ai-page__report div {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-ai-page__stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .workspace-ai-page__card {
    padding: 18px;
    border-radius: 18px;
  }

  .workspace-ai-page__usage-toggle {
    padding: 14px 16px;
  }

  .workspace-ai-page__usage-toggle-sub {
    display: none;
  }

  .workspace-ai-page__usage-toggle-right {
    gap: 8px;
  }

  .workspace-ai-page {
    gap: 14px;
  }

  .workspace-ai-page__section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-ai-page__status-card .workspace-ai-page__section-head {
    align-items: center;
    flex-direction: row;
  }

  .workspace-ai-page__status-card .workspace-ai-page__section-actions {
    width: auto;
    display: inline-flex;
    grid-template-columns: none;
  }

  .workspace-ai-page__status-card .workspace-ai-page__ghost-button {
    min-height: 38px;
    padding: 0 12px;
  }

  .workspace-ai-page__section-title {
    align-items: flex-start;
  }

  .workspace-ai-page__section-title h2 {
    font-size: 18px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .workspace-ai-page__notice {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .workspace-ai-page__notice svg {
    margin-top: 0;
  }

  .workspace-ai-page__stage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-ai-page__partner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .workspace-ai-page__partner button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .workspace-ai-page__section-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-ai-page__ghost-button {
    min-width: 0;
    padding: 0 10px;
  }

  .workspace-ai-page__report-item div {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-ai-page__modal-backdrop {
    align-items: flex-end;
    padding: 12px;
  }

  .workspace-ai-page__modal {
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }

  .workspace-ai-page__modal-head {
    padding: 16px;
  }

  .workspace-ai-page__report-list {
    padding: 14px 16px 16px;
  }
}

@media (max-width: 380px) {
  .workspace-ai-page__section-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-theme="dark"] .workspace-ai-page {
  --ai-bg: var(--color-bg-soft);
  --ai-card: var(--color-bg-white);
  --ai-border: rgb(51, 65, 85);
  --ai-text: var(--color-text-main);
  --ai-muted: var(--color-text-muted);
  --ai-primary: rgb(129, 140, 248);
  --ai-primary-soft: rgba(129, 140, 248, 0.16);
  --ai-green: rgb(52, 211, 153);
  --ai-warning: rgb(251, 191, 36);
  --ai-text-sub: var(--color-text-sub);
  --ai-card-shadow: rgba(0, 0, 0, 0.3);
  --ai-toggle-shadow: rgba(0, 0, 0, 0.25);
  --ai-icon-bg: rgba(129, 140, 248, 0.16);
  --ai-icon-accent: rgb(165, 180, 252);
  --ai-badge-on-bg: rgba(52, 211, 153, 0.14);
  --ai-badge-on-text: rgb(110, 231, 183);
  --ai-badge-off-bg: var(--color-bg-elevated-dark);
  --ai-dot: rgb(251, 191, 36);
  --ai-switch-off: rgb(51, 65, 85);
  --ai-switch-knob-shadow: rgba(0, 0, 0, 0.4);
  --ai-switch-on: rgb(129, 108, 250);
  --ai-notice-text: var(--color-text-sub);
  --ai-alert-border: rgba(251, 191, 36, 0.3);
  --ai-alert-bg: rgba(251, 191, 36, 0.1);
  --ai-calm-border: rgba(52, 211, 153, 0.3);
  --ai-calm-bg: rgba(52, 211, 153, 0.1);
  --ai-stage-bg: var(--color-bg-elevated-dark);
  --ai-stage-current-border: rgba(129, 140, 248, 0.5);
  --ai-stage-current-text: rgb(199, 210, 254);
  --ai-partner-avatar-text: rgb(110, 231, 183);
  --ai-modal-backdrop: rgba(2, 6, 16, 0.65);
  --ai-modal-shadow: rgba(0, 0, 0, 0.45);
  --ai-error-bg: rgba(248, 113, 113, 0.12);
  --ai-error-text: rgb(248, 113, 113);
  --ai-skeleton-1: rgb(51, 65, 85);
  --ai-skeleton-2: rgb(71, 85, 105);
}
.contrib-page {
  --p-border: rgb(226, 232, 240); --p-card: rgb(255, 255, 255); --p-text: rgb(15, 23, 42); --p-muted: rgb(100, 116, 139);
  --p-hint: rgb(148, 163, 184); --p-primary: rgb(79, 70, 229); --p-primary-soft: rgb(238, 242, 255);
  --p-green: rgb(5, 150, 105); --p-green-soft: rgb(236, 253, 245); --p-amber: rgb(217, 119, 6); --p-bg: rgb(248, 250, 252);
  --p-rank1-text: rgb(255, 255, 255);
  --p-bar-track: rgb(226, 232, 240);
  --p-anomaly-text: rgb(180, 83, 9);
  --p-anomaly-bg: rgb(255, 251, 235);
  --p-anomaly-border: rgb(253, 230, 138);
  --p-card-shadow: rgba(15, 23, 42, 0.04);
  display: flex; flex-direction: column; gap: 16px; color: var(--p-text);
}

/* ── 상단 헤더 ── */
.contrib-page__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.contrib-page__heading { font-size: 16px; font-weight: 900; color: var(--p-text); }
.contrib-page__periods { display: flex; gap: 5px; }
.contrib-page__period-btn {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--p-border);
  background: var(--p-card); color: var(--p-muted); font-size: 12px; font-weight: 700; cursor: pointer;
}
.contrib-page__period-btn.active { background: var(--p-primary-soft); border-color: var(--p-hint); color: var(--p-primary); }

/* ── 팀 요약 카드: 5개 한 줄 ── */
.contrib-page__summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.contrib-page__summary-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 6px; border: 1px solid var(--p-border); border-radius: 14px;
  background: var(--p-card); text-align: center;
}
.contrib-page__summary-val { font-size: 18px; font-weight: 900; color: var(--p-text); line-height: 1; margin-bottom: 3px; }
.contrib-page__summary-label { font-size: 11px; color: var(--p-muted); }

/* ── 멤버 그리드 ── */
.contrib-page__grid { display: grid; gap: 8px; }
.contrib-page__grid--2col { grid-template-columns: repeat(2, 1fr); }
.contrib-page__grid--3col { grid-template-columns: repeat(3, 1fr); }

/* 모바일: 무조건 1열 */
@media (max-width: 600px) {
  .contrib-page__grid--2col,
  .contrib-page__grid--3col { grid-template-columns: 1fr; }
  .contrib-page__summary { grid-template-columns: repeat(3, 1fr); }
}

/* 3열: 카드 내부 더 컴팩트 */
.contrib-page__grid--3col .contrib-page__member-card { padding: 10px 12px; gap: 6px; }
.contrib-page__grid--3col .contrib-page__score-val { font-size: 18px; }
.contrib-page__grid--3col .contrib-page__member-name { font-size: 12px; }
.contrib-page__grid--3col .contrib-page__detail-item { padding: 4px 7px; }
.contrib-page__grid--3col .contrib-page__detail-val { font-size: 11px; }
.contrib-page__grid--3col .contrib-page__detail-label { font-size: 10px; }

/* ── 섹션 타이틀 ── */
.contrib-page__section-title { font-size: 14px; font-weight: 900; color: var(--p-text); }

/* ── 멤버 카드 ── */
.contrib-page__member-card {
  padding: 14px 16px; border: 1px solid var(--p-border); border-radius: 16px;
  background: var(--p-card); box-shadow: 0 4px 12px var(--p-card-shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.contrib-page__member-header { display: flex; align-items: center; justify-content: space-between; }
.contrib-page__member-left { display: flex; align-items: center; gap: 10px; }
.contrib-page__rank {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.contrib-page__rank--1 { background: var(--p-primary); color: var(--p-rank1-text); }
.contrib-page__rank--2 { background: var(--p-primary-soft); color: var(--p-primary); }
.contrib-page__rank--3 { background: var(--p-bg); color: var(--p-muted); border: 1px solid var(--p-border); }
.contrib-page__rank--other { background: var(--p-bg); color: var(--p-hint); border: 1px solid var(--p-border); }
.contrib-page__av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--p-primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: var(--p-primary); flex-shrink: 0;
}
.contrib-page__member-name { font-size: 13px; font-weight: 800; color: var(--p-text); }
.contrib-page__member-role { font-size: 11px; color: var(--p-hint); }

/* 점수 */
.contrib-page__score-wrap { display: flex; align-items: baseline; gap: 2px; }
.contrib-page__score-val { font-size: 22px; font-weight: 900; color: var(--p-primary); line-height: 1; }
.contrib-page__score-label { font-size: 13px; font-weight: 700; color: var(--p-primary); }

/* 바 */
.contrib-page__bar-wrap { height: 5px; background: var(--p-bar-track); border-radius: 3px; overflow: hidden; }
.contrib-page__bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

/* ── 상세 지표: 가로 칩 ── */
.contrib-page__detail { display: flex; flex-wrap: wrap; gap: 6px; }
.contrib-page__detail-item {
  display: flex; align-items: center; gap: 5px;
  background: var(--p-bg); border-radius: 8px; padding: 5px 10px;
  border: 1px solid var(--p-border);
}
.contrib-page__detail-icon { font-size: 12px; color: var(--p-muted); display: flex; align-items: center; }
.contrib-page__detail-val { font-size: 12px; font-weight: 800; color: var(--p-text); }
.contrib-page__detail-label { font-size: 11px; color: var(--p-hint); }

/* ── 이상 탐지 ── */
.contrib-page__anomaly {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  color: var(--p-anomaly-text); background: var(--p-anomaly-bg); border-radius: 8px; padding: 6px 10px;
  border: 1px solid var(--p-anomaly-border);
}

/* ── 하단 안내 ── */
.contrib-page__info {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--p-muted);
  line-height: 1.6; padding: 12px 14px; background: var(--p-bg);
  border-radius: 12px; border: 1px solid var(--p-border);
}
.contrib-page__empty { text-align: center; padding: 40px 20px; color: var(--p-muted); font-size: 14px; }
.contrib-page__loading { padding: 40px; text-align: center; color: var(--p-muted); font-size: 14px; }

[data-theme="dark"] .contrib-page {
  --p-border: rgb(51, 65, 85);
  --p-card: rgb(30, 41, 59);
  --p-text: var(--color-text-main);
  --p-muted: var(--color-text-muted);
  --p-hint: var(--color-text-placeholder);
  --p-primary: rgb(129, 140, 248);
  --p-primary-soft: rgba(129, 140, 248, 0.16);
  --p-green: rgb(52, 211, 153);
  --p-green-soft: rgba(52, 211, 153, 0.14);
  --p-amber: rgb(251, 191, 36);
  --p-bg: var(--color-bg-elevated-dark);
  --p-rank1-text: var(--color-text-inverse);
  --p-bar-track: rgb(51, 65, 85);
  --p-anomaly-text: rgb(253, 230, 138);
  --p-anomaly-bg: rgba(251, 191, 36, 0.12);
  --p-anomaly-border: rgba(251, 191, 36, 0.35);
  --p-card-shadow: rgba(0, 0, 0, 0.3);
}
:root {
  --color-cp-border: rgb(226, 232, 240);
  --color-cp-surface: rgb(255, 255, 255);
  --color-cp-surface2: rgb(248, 250, 252);
  --color-cp-text: rgb(30, 41, 59);
  --color-cp-text-muted: rgb(148, 163, 184);
  --color-cp-accent: rgb(99, 102, 241);
  --color-cp-beta-bg: rgb(224, 231, 255);
  --color-cp-beta-text: rgb(67, 56, 202);
  --color-cp-card-hover-shadow: rgba(0, 0, 0, 0.07);
  --color-cp-top-border: rgb(245, 158, 11);
  --color-cp-top-grad-1: rgb(255, 251, 235);
  --color-cp-avatar-grad-1: rgb(99, 102, 241);
  --color-cp-avatar-grad-2: rgb(129, 140, 248);
  --color-cp-score-num: rgb(79, 70, 229);
  --color-cp-score-label: rgb(129, 140, 248);
  --color-cp-bar-grad-1: rgb(99, 102, 241);
  --color-cp-bar-grad-2: rgb(167, 139, 250);
  --color-cp-bar-pct: rgb(99, 102, 241);
  --color-cp-ai-btn-border: rgb(209, 213, 219);
  --color-cp-ai-btn-text: rgb(107, 114, 128);
  --color-cp-ai-btn-hover-bg: rgb(245, 243, 255);
  --color-cp-ai-loading-text: rgb(156, 163, 175);
  --color-cp-ai-error: rgb(239, 68, 68);
  --color-cp-ai-result-bg: rgb(250, 250, 250);
  --color-cp-ai-copy-border: rgba(99, 102, 241, 0.25);
  --color-cp-ai-copy-hover-bg: rgba(99, 102, 241, 0.1);
  --color-cp-ai-text: rgb(55, 65, 81);
  --color-cp-hint-bg: rgb(255, 255, 255);
  --color-cp-hint-border: rgb(226, 232, 240);
  --color-cp-hint-text: rgb(148, 163, 184);
}

/* ── 패널 ── */
.cp-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: min(1200px, calc(100vw - 32px)) !important;
}

/* ── 헤더 탭바 ── */
.cp-header {
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding-bottom: 0 !important;
}

.cp-tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  padding: 0 8px;
}

.cp-tab {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-cp-text-muted, #94a3b8);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.cp-tab:hover { color: var(--color-cp-text, #1e293b); }
.cp-tab.is-active {
  color: var(--color-cp-accent, #6366f1);
  border-bottom-color: var(--color-cp-accent, #6366f1);
}

[data-theme="dark"] .cp-tab:hover { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .cp-tab.is-active { color: #a5b4fc; border-bottom-color: #a5b4fc; }

.contrib-popup-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── 베타 뱃지 ── */
.cp-beta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--color-cp-beta-bg);
  color: var(--color-cp-beta-text);
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}


/* ── 멤버 목록 ── */
.cp-members-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 멤버 카드 (가로 2단) ── */
.cp-member-card {
  border: 1.5px solid var(--color-cp-border);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--color-cp-surface);
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  transition: box-shadow 0.15s;
}

/* ── 왼쪽: 멤버 정보 ── */
.cp-member-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 100px;
  min-width: 100px;
  text-align: center;
  padding-top: 4px;
}

.cp-member-card:hover {
  box-shadow: 0 4px 20px var(--color-cp-card-hover-shadow);
}

.cp-member-card--top {
  border-color: var(--color-cp-top-border);
  background: linear-gradient(135deg, var(--color-cp-top-grad-1) 0%, var(--color-cp-surface) 60%);
}

.cp-member-card.is-selected {
  border-color: var(--color-cp-accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12), 0 8px 24px var(--color-cp-card-hover-shadow);
}

/* ── 아바타 ── */
.cp-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-cp-avatar-grad-1), var(--color-cp-avatar-grad-2));
  color: var(--color-text-inverse);
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-cp-text);
  word-break: break-all;
}

.cp-role {
  font-size: 11px;
  color: var(--color-cp-text-muted);
  font-weight: 500;
}

/* ── 점수 박스 ── */
.cp-score-box {
  display: flex;
  align-items: baseline;
  gap: 2px;
  background: var(--color-cp-surface2);
  border: 1px solid var(--color-cp-border);
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 4px;
}

.cp-score-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-cp-score-num);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cp-score-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-cp-score-label);
}

/* ── 오른쪽: AI 분석 ── */
.cp-member-right {
  flex: 1;
  min-width: 0;
}

/* ── 점수 바 ── */
.cp-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-score-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-cp-surface2);
  border-radius: 99px;
  overflow: hidden;
}

.cp-score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-cp-bar-grad-1), var(--color-cp-bar-grad-2));
  border-radius: 99px;
  transition: width 0.5s ease;
}

.cp-score-bar-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-cp-bar-pct);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── 활동 그룹 ── */
.cp-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cp-group {
  border: 1.5px solid var(--color-cp-border);
  border-left: 3px solid var(--g-color, var(--color-cp-accent));
  border-radius: 10px;
  padding: 10px 12px 8px;
  background: var(--color-cp-surface2);
}

.cp-group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}

.cp-group-icon {
  color: var(--g-color, var(--color-cp-accent));
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cp-group-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--g-color, var(--color-cp-accent));
  letter-spacing: 0.04em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-group-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--g-color, var(--color-cp-accent));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cp-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.cp-group-item-label {
  font-size: 10.5px;
  color: var(--color-cp-text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cp-group-item-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-cp-text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* ── 안내 ── */
.cp-beta-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  color: var(--color-cp-text-muted);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-cp-border);
  line-height: 1.5;
}

/* ── 4-axis 바 ── */
.cp-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--color-cp-surface2);
  border: 1px solid var(--color-cp-border);
  border-radius: 10px;
}

.cp-axis-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-axis-label {
  font-size: 10px;
  color: var(--color-cp-text-muted);
  font-weight: 600;
  min-width: 34px;
  white-space: nowrap;
}

.cp-axis-track {
  flex: 1;
  height: 5px;
  background: var(--color-cp-border);
  border-radius: 99px;
  overflow: hidden;
}

.cp-axis-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}

.cp-axis-val {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-cp-text);
  min-width: 22px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── AI 분석 ── */
.cp-ai-btn {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px dashed var(--color-cp-ai-btn-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-cp-ai-btn-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cp-ai-btn:hover {
  border-color: var(--color-cp-accent);
  color: var(--color-cp-accent);
  background: var(--color-cp-ai-btn-hover-bg);
}

.cp-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-cp-ai-loading-text);
  font-weight: 500;
  padding: 8px 0;
}

@keyframes cp-spin {
  to { transform: rotate(360deg); }
}
.cp-ai-spin {
  animation: cp-spin 0.8s linear infinite;
}

.cp-ai-error {
  font-size: 11.5px;
  color: var(--color-cp-ai-error);
  padding: 6px 0;
  text-align: center;
}

.cp-ai-result {
  border-left: 3px solid var(--color-cp-accent);
  border-radius: 0 10px 10px 0;
  background: var(--color-cp-ai-result-bg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-ai-result-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--color-cp-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cp-ai-copy-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid var(--color-cp-ai-copy-border);
  background: transparent;
  color: var(--color-cp-accent);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-left: auto;
  letter-spacing: 0.04em;
  transition: background 0.15s;
  text-transform: none;
}
.cp-ai-copy-btn:hover { background: var(--color-cp-ai-copy-hover-bg); }

.cp-ai-text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-cp-ai-text);
  margin: 0;
  word-break: keep-all;
}

.cp-hints {
  background: var(--color-cp-hint-bg);
  border: 1px solid var(--color-cp-hint-border);
}

.cp-hint-item {
  color: var(--color-cp-hint-text);
}

/* ── 반응형 ── */
@media (max-width: 640px) {
  .contrib-popup-inner { padding: 16px 16px 24px; }
  .cp-member-card { flex-direction: column; gap: 16px; }
  .cp-member-left { flex-direction: row; text-align: left; flex: unset; min-width: unset; align-items: center; }
  .cp-score-box { margin-top: 0; }
}

/* ── 다크모드 ── */
[data-theme="dark"] {
  --color-cp-border: rgb(51, 65, 85);
  --color-cp-surface: rgb(30, 41, 59);
  --color-cp-surface2: rgb(22, 32, 50);
  --color-cp-text: var(--color-text-main);
  --color-cp-text-muted: var(--color-text-muted);
  --color-cp-accent: rgb(129, 140, 248);
  --color-cp-beta-bg: rgba(129, 140, 248, 0.18);
  --color-cp-beta-text: rgb(199, 210, 254);
  --color-cp-card-hover-shadow: rgba(0, 0, 0, 0.35);
  --color-cp-top-border: rgb(245, 158, 11);
  --color-cp-top-grad-1: rgb(42, 32, 16);
  --color-cp-avatar-grad-1: rgb(99, 102, 241);
  --color-cp-avatar-grad-2: rgb(129, 140, 248);
  --color-cp-score-num: rgb(165, 180, 252);
  --color-cp-score-label: rgb(129, 140, 248);
  --color-cp-bar-grad-1: rgb(99, 102, 241);
  --color-cp-bar-grad-2: rgb(167, 139, 250);
  --color-cp-bar-pct: rgb(165, 180, 252);
  --color-cp-ai-btn-border: rgb(55, 65, 81);
  --color-cp-ai-btn-text: rgb(156, 163, 175);
  --color-cp-ai-btn-hover-bg: rgb(30, 27, 75);
  --color-cp-ai-loading-text: var(--color-text-placeholder);
  --color-cp-ai-error: rgb(248, 113, 113);
  --color-cp-ai-result-bg: rgb(17, 24, 39);
  --color-cp-ai-copy-border: rgba(129, 140, 248, 0.3);
  --color-cp-ai-copy-hover-bg: rgba(129, 140, 248, 0.12);
  --color-cp-ai-text: rgb(209, 213, 219);
  --color-cp-hint-bg: rgb(42, 31, 0);
  --color-cp-hint-border: rgb(120, 53, 15);
  --color-cp-hint-text: rgb(253, 230, 138);
}
:root {
  --color-wpp-text: rgb(15, 23, 42);
  --color-wpp-muted: rgb(100, 116, 139);
  --color-wpp-card-border: rgba(148, 163, 184, 0.18);
  --color-wpp-card-bg: rgb(255, 255, 255);
  --color-wpp-card-shadow: rgba(15, 23, 42, 0.05);
  --color-wpp-accent: rgb(79, 70, 229);
  --color-wpp-accent-hover: rgb(67, 56, 202);
  --color-wpp-accent-shadow: rgba(79, 70, 229, 0.22);
  --color-wpp-error-border: rgba(220, 38, 38, 0.18);
  --color-wpp-error-bg: rgb(254, 242, 242);
  --color-wpp-error-text: rgb(220, 38, 38);
  --color-wpp-empty-border: rgba(148, 163, 184, 0.16);
  --color-wpp-content-bg: rgb(248, 250, 252);
  --color-wpp-content-text: rgb(17, 24, 39);
  --color-wpp-share-border: rgba(148, 163, 184, 0.3);
  --color-wpp-share-text: rgb(51, 65, 85);
  --color-wpp-share-hover-border: rgba(79, 70, 229, 0.36);
  --color-wpp-share-hover-bg: rgb(238, 242, 255);
  --color-wpp-share-hover-text: rgb(67, 56, 202);
  --color-wpp-share-box-border: rgba(148, 163, 184, 0.24);
  --color-wpp-share-input-text: rgb(71, 85, 105);
  --color-wpp-copy-bg: rgb(226, 232, 240);
  --color-wpp-copy-text: rgb(51, 65, 85);
  --color-wpp-copy-hover-bg: rgb(203, 213, 225);
  --color-wpp-notice: rgb(148, 163, 184);
}

.portfolio-page {
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 4px 0 40px;
  color: var(--color-wpp-text);
}

.portfolio-page__loading {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-wpp-muted);
  font-size: 14px;
  font-weight: 700;
}

.portfolio-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--color-wpp-card-border);
  border-radius: 18px;
  background: var(--color-wpp-card-bg);
  box-shadow: 0 14px 32px var(--color-wpp-card-shadow);
}

.portfolio-page__title {
  margin: 0;
  color: var(--color-wpp-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.portfolio-page__desc {
  max-width: 560px;
  margin: 8px 0 0;
  color: var(--color-wpp-muted);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}

.portfolio-page__generate-btn,
.portfolio-page__share-btn,
.portfolio-page__copy-btn {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}

.portfolio-page__generate-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--color-wpp-accent);
  color: var(--color-bg-white);
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 12px 24px var(--color-wpp-accent-shadow);
}

.portfolio-page__generate-btn:hover {
  background: var(--color-wpp-accent-hover);
  transform: translateY(-1px);
}

.portfolio-page__generate-btn:disabled,
.portfolio-page__share-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.portfolio-page__error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--color-wpp-error-border);
  border-radius: 12px;
  background: var(--color-wpp-error-bg);
  color: var(--color-wpp-error-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.portfolio-page__empty,
.portfolio-page__result {
  border: 1px solid var(--color-wpp-empty-border);
  border-radius: 18px;
  background: var(--color-wpp-card-bg);
  box-shadow: 0 14px 32px var(--color-wpp-card-shadow);
}

.portfolio-page__empty {
  min-height: 260px;
  padding: 48px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.portfolio-page__empty-title {
  margin: 0;
  color: var(--color-wpp-text);
  font-size: 16px;
  font-weight: 850;
}

.portfolio-page__empty-desc {
  max-width: 360px;
  margin: 10px 0 0;
  color: var(--color-wpp-muted);
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}

.portfolio-page__result {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
}

.portfolio-page__content {
  min-height: 220px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-wpp-content-bg);
  color: var(--color-wpp-content-text);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.portfolio-page__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portfolio-page__share-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--color-wpp-share-border);
  border-radius: 12px;
  background: var(--color-wpp-card-bg);
  color: var(--color-wpp-share-text);
  font-size: 13px;
  font-weight: 800;
}

.portfolio-page__share-btn:hover {
  border-color: var(--color-wpp-share-hover-border);
  background: var(--color-wpp-share-hover-bg);
  color: var(--color-wpp-share-hover-text);
}

.portfolio-page__share-box {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-wpp-share-box-border);
  border-radius: 12px;
  background: var(--color-wpp-content-bg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.portfolio-page__share-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-wpp-share-input-text);
  font-size: 13px;
}

.portfolio-page__copy-btn {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--color-wpp-copy-bg);
  color: var(--color-wpp-copy-text);
  font-size: 12px;
  font-weight: 850;
}

.portfolio-page__copy-btn:hover {
  background: var(--color-wpp-copy-hover-bg);
}

.portfolio-page__notice {
  margin: 0;
  color: var(--color-wpp-notice);
  font-size: 12px;
  line-height: 1.6;
  word-break: keep-all;
}

@media (max-width: 768px) {
  .portfolio-page {
    padding: 0 0 32px;
  }

  .portfolio-page__header {
    flex-direction: column;
    gap: 16px;
    padding: 18px;
    border-radius: 16px;
  }

  .portfolio-page__title {
    font-size: 20px;
  }

  .portfolio-page__generate-btn {
    width: 100%;
  }

  .portfolio-page__result {
    padding: 16px;
    border-radius: 16px;
  }

  .portfolio-page__content {
    padding: 16px;
    font-size: 14px;
  }

  .portfolio-page__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-page__share-btn {
    width: 100%;
  }
}

[data-theme="dark"] {
  --color-wpp-text: var(--color-text-main);
  --color-wpp-muted: var(--color-text-muted);
  --color-wpp-card-border: rgb(51, 65, 85);
  --color-wpp-card-bg: var(--color-bg-white);
  --color-wpp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-wpp-accent: rgb(129, 140, 248);
  --color-wpp-accent-hover: rgb(165, 180, 252);
  --color-wpp-accent-shadow: rgba(129, 140, 248, 0.3);
  --color-wpp-error-border: rgba(248, 113, 113, 0.35);
  --color-wpp-error-bg: rgba(248, 113, 113, 0.12);
  --color-wpp-error-text: rgb(248, 113, 113);
  --color-wpp-empty-border: rgb(51, 65, 85);
  --color-wpp-content-bg: var(--color-bg-elevated-dark);
  --color-wpp-content-text: var(--color-text-main);
  --color-wpp-share-border: rgb(51, 65, 85);
  --color-wpp-share-text: var(--color-text-sub);
  --color-wpp-share-hover-border: rgba(129, 140, 248, 0.4);
  --color-wpp-share-hover-bg: rgba(129, 140, 248, 0.12);
  --color-wpp-share-hover-text: rgb(165, 180, 252);
  --color-wpp-share-box-border: rgb(51, 65, 85);
  --color-wpp-share-input-text: var(--color-text-sub);
  --color-wpp-copy-bg: var(--color-bg-elevated-dark);
  --color-wpp-copy-text: var(--color-text-sub);
  --color-wpp-copy-hover-bg: rgb(51, 65, 85);
  --color-wpp-notice: var(--color-text-placeholder);
}
.partner-page {
  --p-border: #e2e8f0; --p-card: #ffffff; --p-text: #0f172a; --p-muted: #64748b;
  --p-hint: #94a3b8; --p-primary: #4f46e5; --p-primary-soft: #eef2ff;
  --p-green: #059669; --p-green-soft: #ecfdf5; --p-amber: #d97706; --p-bg: #f8fafc;
  --p-shadow: rgba(15, 23, 42, 0.05); --p-green-border: rgb(110, 231, 183); --p-focus-ring: rgb(199, 210, 254);
  --p-amber-soft: rgb(255, 251, 235); --p-amber-text: rgb(180, 83, 9); --p-amber-border: rgb(253, 230, 138);
  display: flex; flex-direction: column; gap: 20px; color: var(--p-text);
}
.partner-page__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.partner-page__tabs { display: flex; border-bottom: 1.5px solid var(--p-border); }
.partner-page__tab {
  padding: 10px 16px; font-size: 15px; font-weight: 700; color: var(--p-muted);
  background: none; border: none; border-bottom: 2.5px solid transparent;
  cursor: pointer; margin-bottom: -1.5px; transition: color 0.15s, border-color 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.partner-page__tab.active { color: var(--p-primary); border-bottom-color: var(--p-primary); }
.partner-page__tab-badge {
  font-size: 10px; background: var(--p-primary); color: var(--color-text-on-brand);
  border-radius: 999px; padding: 1px 6px; font-weight: 900;
}
.partner-page__create-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px;
  border-radius: 12px; border: 1px solid var(--p-border); background: var(--p-card);
  color: var(--p-text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.partner-page__create-btn:hover { background: var(--p-bg); }
.partner-page__form-wrap {
  padding: 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px var(--p-shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.partner-page__form-input, .partner-page__form-textarea {
  font-size: 14px; padding: 10px 14px; border: 1px solid var(--p-border);
  border-radius: 12px; background: var(--p-bg); color: var(--p-text); width: 100%; font-weight: 600;
}
.partner-page__form-input:focus, .partner-page__form-textarea:focus { outline: none; border-color: var(--p-primary); background: var(--p-card); }
.partner-page__form-textarea { resize: none; line-height: 1.5; }
.partner-page__form-btns { display: flex; gap: 8px; justify-content: flex-end; }
.partner-page__form-cancel {
  padding: 0 16px; height: 40px; border-radius: 12px; border: 1px solid var(--p-border);
  background: var(--p-bg); color: var(--p-muted); font-size: 14px; font-weight: 700; cursor: pointer;
}
.partner-page__form-submit {
  padding: 0 20px; height: 40px; border-radius: 12px; border: 1px solid var(--p-primary);
  background: var(--p-primary); color: var(--color-text-on-brand); font-size: 14px; font-weight: 700; cursor: pointer;
}
.partner-page__form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.partner-page__card {
  padding: 20px 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px var(--p-shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.partner-page__card--accepted { border-color: var(--p-green-border); }
.partner-page__card--rejected { opacity: 0.7; }
.partner-page__card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.partner-page__team-info { display: flex; align-items: center; gap: 12px; }
.partner-page__team-info[role="button"] { cursor: pointer; border-radius: 12px; }
.partner-page__team-info[role="button"]:hover .partner-page__team-name { color: var(--p-primary); }
.partner-page__team-info[role="button"]:focus-visible {
  outline: 2px solid var(--p-focus-ring);
  outline-offset: 4px;
}
.partner-page__team-av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--p-primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--p-primary); flex-shrink: 0;
}
.partner-page__team-name { font-size: 15px; font-weight: 800; color: var(--p-text); margin-bottom: 2px; }
.partner-page__team-meta { font-size: 12px; color: var(--p-hint); }
.partner-page__status { font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.partner-page__status--pending { background: var(--p-amber-soft); color: var(--p-amber-text); border: 1px solid var(--p-amber-border); }
.partner-page__status--accepted { background: var(--p-green-soft); color: var(--p-green); border: 1px solid var(--p-green-border); }
.partner-page__status--rejected { background: var(--p-bg); color: var(--p-hint); border: 1px solid var(--p-border); }
.partner-page__message { font-size: 13px; color: var(--p-muted); line-height: 1.6; }
.partner-page__synergy {
  background: var(--p-bg); border-radius: 12px; padding: 10px 14px;
  border: 1px solid var(--p-border);
}
.partner-page__synergy-label { font-size: 10px; font-weight: 900; color: var(--p-primary); display: block; margin-bottom: 4px; }
.partner-page__synergy p { font-size: 13px; color: var(--p-muted); line-height: 1.5; }
.partner-page__actions { display: flex; gap: 8px; justify-content: flex-end; }
.partner-page__reject-btn {
  padding: 0 16px; height: 38px; border-radius: 10px; border: 1px solid var(--p-border);
  background: var(--p-bg); color: var(--p-muted); font-size: 13px; font-weight: 700; cursor: pointer;
}
.partner-page__accept-btn {
  padding: 0 16px; height: 38px; border-radius: 10px; border: 1px solid var(--p-primary);
  background: var(--p-primary); color: var(--color-text-on-brand); font-size: 13px; font-weight: 700; cursor: pointer;
}
.partner-page__accept-btn:disabled, .partner-page__reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.partner-page__match-score { font-size: 13px; font-weight: 900; color: var(--p-primary); white-space: nowrap; }
.partner-page__propose-btn {
  padding: 0 16px; height: 40px; width: 100%; border-radius: 12px;
  border: 1px solid var(--p-border); background: var(--p-bg);
  color: var(--p-text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.partner-page__propose-btn:hover { background: var(--p-primary-soft); border-color: var(--p-focus-ring); color: var(--p-primary); }
.partner-page__recommend-desc { font-size: 13px; color: var(--p-muted); line-height: 1.6; }
.partner-page__empty { text-align: center; padding: 60px 20px; color: var(--p-muted); font-size: 14px; }
.partner-page__body { display: flex; flex-direction: column; gap: 12px; }
.partner-page__loading { padding: 60px; text-align: center; color: var(--p-muted); font-size: 14px; }

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] .partner-page {
  --p-border: rgb(51, 65, 85); --p-card: rgb(30, 41, 59); --p-text: rgb(241, 245, 249); --p-muted: rgb(148, 163, 184);
  --p-hint: rgb(100, 116, 139); --p-primary: rgb(129, 140, 248); --p-primary-soft: rgb(30, 27, 75);
  --p-green: rgb(52, 211, 153); --p-green-soft: rgb(6, 78, 59); --p-amber: rgb(251, 191, 36); --p-bg: rgb(15, 23, 42);
  --p-shadow: rgba(0, 0, 0, 0.32); --p-green-border: rgba(52, 211, 153, 0.45);
  --p-focus-ring: rgba(129, 140, 248, 0.5);
  --p-amber-soft: rgba(120, 53, 15, 0.35); --p-amber-text: rgb(252, 211, 77); --p-amber-border: rgba(217, 119, 6, 0.4);
}
:root {
  --color-mp-border: rgb(233, 237, 242);
  --color-mp-bg-soft: rgb(248, 250, 252);
  --color-mp-primary: rgb(73, 101, 255);
  --color-mp-primary-hover: rgb(59, 82, 230);
  --color-mp-primary-glow: rgba(73, 101, 255, 0.07);
  --color-mp-scrollbar: rgb(221, 226, 234);
  --color-mp-hover-bg: rgb(241, 244, 248);
  --color-mp-heading: rgb(30, 41, 59);
  --color-mp-purple-soft: rgb(237, 233, 254);
  --color-mp-purple-text: rgb(91, 33, 182);
  --color-mp-amber-soft: rgb(254, 243, 199);
  --color-mp-amber-text: rgb(180, 83, 9);
  --color-mp-muted: rgb(100, 116, 139);
  --color-mp-placeholder: rgb(148, 163, 184);
  --color-mp-title: rgb(15, 23, 42);
  --color-mp-body-text: rgb(51, 65, 85);
  --color-mp-input-border: rgb(226, 232, 240);
  --color-mp-chip-person-text: rgb(109, 40, 217);
  --color-mp-chip-date-bg: rgb(224, 242, 254);
  --color-mp-chip-date-text: rgb(3, 105, 161);
  --color-mp-chip-neutral-bg: rgb(241, 245, 249);
  --color-mp-danger-soft: rgb(254, 242, 242);
  --color-mp-danger-text: rgb(220, 38, 38);
  --color-mp-success-soft: rgb(240, 253, 244);
  --color-mp-success-text: rgb(22, 163, 74);
  --color-mp-border-strong: rgb(203, 213, 225);
  --color-mp-tab-shadow: rgba(0, 0, 0, 0.1);
  --color-mp-dashed-border: rgb(209, 217, 230);
  --color-mp-transcript-bg: rgb(244, 246, 251);
  --color-mp-transcript-text: rgb(74, 85, 104);
  --color-mp-added-border: rgb(187, 247, 208);
  --color-mp-suggested-accent: rgb(99, 102, 241);
  --color-mp-done-accent: rgb(34, 197, 94);
  --color-mp-suggested-hover-border: rgb(203, 213, 225);
  --color-mp-suggested-hover-bg: rgb(241, 245, 249);
}

@keyframes fp-spin { to { transform: rotate(360deg); } }

/* ── Meeting Popup ────────────────────────────────────── */
.mp-root {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar ─────────────────────────────────────────── */
.mp-sidebar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-mp-border);
  background: var(--color-mp-bg-soft);
  border-radius: 0 0 0 20px;
  overflow: hidden;
}

.mp-sidebar-head {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-mp-border);
  flex-shrink: 0;
}

.mp-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  border-radius: 10px;
  border: none;
  background: var(--color-mp-primary);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, transform 0.1s;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.mp-new-btn:hover { background: var(--color-mp-primary-hover); }
.mp-new-btn:active { transform: scale(0.98); }

.mp-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-mp-scrollbar) transparent;
}
.mp-list::-webkit-scrollbar { width: 4px; }
.mp-list::-webkit-scrollbar-thumb { background: var(--color-mp-scrollbar); border-radius: 4px; }

.mp-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-left: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.mp-item:hover { background: var(--color-mp-hover-bg); }
.mp-item.is-active {
  background: var(--color-bg-white);
  border-left-color: var(--color-mp-primary);
  box-shadow: 0 1px 4px var(--color-mp-primary-glow);
}

.mp-item-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-mp-heading);
  line-height: 1.3;
}
.mp-item.is-active .mp-item-date { color: var(--color-mp-primary); }

.mp-item-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.mp-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.mp-item-badge--internal {
  background: var(--color-mp-purple-soft);
  color: var(--color-mp-purple-text);
}
.mp-item-badge--external {
  background: var(--color-mp-amber-soft);
  color: var(--color-mp-amber-text);
}

.mp-item-counterpart {
  font-size: 11px;
  color: var(--color-mp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-item-preview {
  font-size: 11px;
  color: var(--color-mp-placeholder);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mp-empty-sidebar {
  padding: 24px 14px;
  font-size: 12px;
  color: var(--color-mp-placeholder);
  text-align: center;
  line-height: 1.6;
}

/* ── Detail Panel ────────────────────────────────────── */
.mp-detail {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-mp-scrollbar) transparent;
}
.mp-detail::-webkit-scrollbar { width: 4px; }
.mp-detail::-webkit-scrollbar-thumb { background: var(--color-mp-scrollbar); border-radius: 4px; }

.mp-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 28px 0;
  flex-shrink: 0;
}

.mp-detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-mp-title);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.mp-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.mp-badge--internal { background: var(--color-mp-purple-soft); color: var(--color-mp-purple-text); }
.mp-badge--external { background: var(--color-mp-amber-soft); color: var(--color-mp-amber-text); }

.mp-detail-counterpart {
  font-size: 12px;
  color: var(--color-mp-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mp-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 28px 28px;
  flex: 1;
}

.mp-section {
  border-radius: 12px;
  padding: 16px 20px;
  background: var(--color-mp-bg-soft);
  border: 1px solid var(--color-mp-border);
  margin-bottom: 12px;
}

.mp-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-mp-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mp-section-label-icon {
  font-size: 13px;
}

.mp-section-body {
  font-size: 13.5px;
  color: var(--color-mp-body-text);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Summary Renderer ────────────────────────────────── */
.mp-render {
  display: flex;
  flex-direction: column;
}

.mp-render-gap { height: 8px; }

.mp-render-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-mp-heading);
  margin: 22px 0 8px;
  padding-bottom: 7px;
  border-bottom: 1.5px solid var(--color-mp-border);
  letter-spacing: -0.01em;
}
.mp-render-h:first-child { margin-top: 0; }

.mp-render-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mp-primary);
  margin: 10px 0 4px;
  padding-left: 2px;
}

.mp-render-bullet {
  font-size: 13.5px;
  color: var(--color-mp-body-text);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
  margin: 1px 0;
}
.mp-render-bullet::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--color-mp-placeholder);
}
.mp-render-bullet--indent {
  padding-left: 30px;
  color: var(--color-mp-muted);
  font-size: 13px;
}
.mp-render-bullet--indent::before { left: 18px; }

.mp-render-p {
  font-size: 13.5px;
  color: var(--color-mp-body-text);
  line-height: 1.7;
  margin: 2px 0;
  padding: 0;
}

/* 액션 아이템 */
.mp-render-action {
  background: var(--color-mp-bg-soft);
  border: 1px solid var(--color-mp-input-border);
  border-left: 3px solid var(--color-mp-primary);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-render-action-task {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-mp-heading);
  line-height: 1.5;
}

.mp-render-action-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mp-chip-person,
.mp-chip-date,
.mp-chip-priority {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.mp-chip-person { background: var(--color-mp-purple-soft); color: var(--color-mp-chip-person-text); }
.mp-chip-date   { background: var(--color-mp-chip-date-bg); color: var(--color-mp-chip-date-text); }
.mp-chip-priority { background: var(--color-mp-chip-neutral-bg); color: var(--color-mp-muted); }
.mp-chip-priority--high { background: var(--color-mp-danger-soft); color: var(--color-mp-danger-text); }
.mp-chip-priority--low  { background: var(--color-mp-success-soft); color: var(--color-mp-success-text); }

/* ── Empty State ─────────────────────────────────────── */
.mp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 24px;
  gap: 12px;
  text-align: center;
}

.mp-empty-icon {
  font-size: 36px;
  opacity: 0.5;
}

.mp-empty-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mp-placeholder);
}

.mp-empty-sub {
  font-size: 12px;
  color: var(--color-mp-border-strong);
  margin-top: -4px;
}

/* ── Form ────────────────────────────────────────────── */
.mp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
  padding: 24px 28px 20px;
}

.mp-form-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-mp-title);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.mp-type-tabs {
  display: flex;
  background: var(--color-mp-chip-neutral-bg);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  flex-shrink: 0;
}

.mp-type-tab {
  flex: 1;
  padding: 9px 0;
  border-radius: 9px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
  background: transparent;
  color: var(--color-mp-placeholder);
  font-family: inherit;
}
.mp-type-tab.is-active {
  background: var(--color-bg-white);
  color: var(--color-mp-primary);
  box-shadow: 0 1px 4px var(--color-mp-tab-shadow);
}
.mp-type-tab.is-active.is-external { color: var(--color-mp-amber-text); }

.mp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.mp-field-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-mp-placeholder);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mp-input, .mp-textarea {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--color-mp-input-border);
  background: var(--color-mp-bg-soft);
  color: var(--color-mp-heading);
  font-size: 14px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.14s;
}
.mp-input:focus, .mp-textarea:focus {
  border-color: var(--color-mp-primary);
  background: var(--color-bg-white);
}
.mp-textarea {
  resize: none;
  line-height: 1.65;
}

.mp-agenda-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
}
.mp-agenda-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-mp-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.mp-agenda-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mp-body-text);
}
.mp-agenda-toggle-hint {
  font-size: 12px;
  color: var(--color-mp-placeholder);
}

.mp-notes-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.mp-notes-field .mp-textarea {
  flex: 1;
  min-height: 0;
}

.mp-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.mp-btn-cancel {
  padding: 0 18px;
  height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--color-mp-input-border);
  background: var(--color-bg-white);
  color: var(--color-mp-muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.14s;
}
.mp-btn-cancel:hover { border-color: var(--color-mp-border-strong); }

.mp-btn-generate {
  padding: 0 22px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: var(--color-mp-primary);
  color: var(--color-text-on-brand);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, background 0.14s;
}
.mp-btn-generate:hover:not(:disabled) { background: var(--color-mp-primary-hover); }
.mp-btn-generate:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 로딩 ──────────────────────────────────────────────── */
.mp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 60px;
  color: var(--color-mp-placeholder);
  font-size: 14px;
  gap: 10px;
}
.mp-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--color-mp-input-border);
  border-top-color: var(--color-mp-primary);
  border-radius: 50%;
  display: inline-block;
  animation: fp-spin 0.7s linear infinite;
}

/* ── 뒤로가기 버튼 (모바일) ──────────────────────────── */
.mp-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: var(--color-mp-chip-neutral-bg);
  border-radius: 8px;
  color: var(--color-mp-body-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s;
}
.mp-back-btn:hover { background: var(--color-mp-input-border); }

/* ── 목록 아이템 화살표 (모바일) ─────────────────────── */
.mp-item-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-mp-border-strong);
  font-weight: 300;
}
.mp-item { position: relative; }

/* ── 숨김 클래스 ────────────────────────────────────── */
.mp-sidebar--hidden { display: none; }

/* ── 모바일 ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* 패널 전체를 하단 시트로 (FinancePopup.css에서 설정) */
  .mp-root { flex-direction: column; }

  /* 사이드바 → 전체 너비 */
  .mp-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-mp-border);
    border-radius: 0;
    max-height: calc(95vh - 60px);
    flex-shrink: 0;
  }

  /* 목록 헤더 */
  .mp-sidebar-head { padding: 12px; }
  .mp-new-btn { font-size: 14px; padding: 11px 0; border-radius: 12px; }

  /* 목록 아이템 더 터치 친화적으로 */
  .mp-item {
    padding: 13px 40px 13px 16px;
    gap: 5px;
    border-left: none;
    border-bottom: 1px solid var(--color-mp-hover-bg);
  }
  .mp-item:last-child { border-bottom: none; }
  .mp-item:hover { background: var(--color-mp-bg-soft); }

  .mp-item-date { font-size: 13px; }
  .mp-item-preview { font-size: 12px; -webkit-line-clamp: 1; }

  /* 상세/폼 → 전체 너비 */
  .mp-detail,
  .mp-form {
    width: 100%;
    min-height: 0;
  }

  .mp-detail-head { padding: 16px 16px 0; }
  .mp-detail-title { font-size: 17px; }

  .mp-sections { padding: 14px 16px 20px; gap: 0; }
  .mp-section { padding: 14px 16px; margin-bottom: 10px; }
  .mp-section-body { font-size: 13px; }

  /* 폼 */
  .mp-form { padding: 16px 16px 14px; gap: 14px; }
  .mp-form-title { font-size: 14px; }
  .mp-type-tabs { border-radius: 10px; }
  .mp-type-tab { font-size: 12.5px; padding: 8px 0; }
  .mp-input, .mp-textarea { font-size: 16px; } /* 모바일 자동 확대 방지 */
  .mp-notes-field .mp-textarea { min-height: 160px; }
  .mp-agenda-toggle-hint { display: none; } /* 모바일에서 힌트 숨김 */

  .mp-form-actions { gap: 8px; }
  .mp-btn-cancel { font-size: 13px; }
  .mp-btn-generate { font-size: 13px; flex: 1; }

  /* 빈 상태 */
  .mp-empty { padding: 40px 20px; }
  .mp-empty-icon { font-size: 30px; }
  .mp-empty-text { font-size: 13px; }
}


/* ── 원본 녹취록 섹션 ─────────────────────────────────── */
.mp-transcript-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--color-mp-dashed-border);
}

.mp-transcript-text {
  margin: 10px 0 0;
  padding: 14px 16px;
  background: var(--color-mp-transcript-bg);
  border-radius: 10px;
  border: 1px solid var(--color-mp-input-border);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-mp-transcript-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* ── 추천 할일 섹션 ─────────────────────────────── */
.mp-suggested-section {
  margin-top: 4px;
}
.mp-suggested-hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--color-mp-placeholder);
  margin-left: 6px;
}
.mp-suggested-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.mp-suggested-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--color-mp-input-border);
  background: var(--color-mp-bg-soft);
  transition: border-color 0.15s, background 0.15s;
}
.mp-suggested-item:hover {
  border-color: var(--color-mp-suggested-hover-border);
  background: var(--color-mp-suggested-hover-bg);
}
.mp-suggested-item--added {
  border-color: var(--color-mp-added-border);
  background: var(--color-mp-success-soft);
  opacity: 0.75;
}
.mp-suggested-conf {
  font-size: 12px;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.mp-suggested-body {
  flex: 1;
  min-width: 0;
}
.mp-suggested-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-mp-heading);
  line-height: 1.4;
  margin-bottom: 4px;
}
.mp-suggested-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mp-suggested-reason {
  font-size: 11px;
  color: var(--color-mp-placeholder);
  font-style: italic;
}
.mp-suggested-add {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-mp-suggested-accent);
  background: transparent;
  color: var(--color-mp-suggested-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-top: 1px;
}
.mp-suggested-add:hover:not(:disabled) {
  background: var(--color-mp-suggested-accent);
  color: var(--color-text-on-brand);
}
.mp-suggested-add--done {
  border-color: var(--color-mp-done-accent);
  color: var(--color-mp-done-accent);
  cursor: default;
}
.mp-suggested-add:disabled { opacity: 0.6; cursor: default; }

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-mp-border: rgb(51, 65, 85);
  --color-mp-bg-soft: rgb(15, 23, 42);
  --color-mp-primary: rgb(129, 140, 248);
  --color-mp-primary-hover: rgb(99, 102, 241);
  --color-mp-primary-glow: rgba(129, 140, 248, 0.18);
  --color-mp-scrollbar: rgb(71, 85, 105);
  --color-mp-hover-bg: rgb(30, 41, 59);
  --color-mp-heading: rgb(226, 232, 240);
  --color-mp-purple-soft: rgb(49, 46, 129);
  --color-mp-purple-text: rgb(196, 181, 253);
  --color-mp-amber-soft: rgb(69, 45, 4);
  --color-mp-amber-text: rgb(252, 211, 77);
  --color-mp-muted: rgb(148, 163, 184);
  --color-mp-placeholder: rgb(100, 116, 139);
  --color-mp-title: rgb(241, 245, 249);
  --color-mp-body-text: rgb(203, 213, 225);
  --color-mp-input-border: rgb(51, 65, 85);
  --color-mp-chip-person-text: rgb(196, 181, 253);
  --color-mp-chip-date-bg: rgb(12, 74, 110);
  --color-mp-chip-date-text: rgb(125, 211, 252);
  --color-mp-chip-neutral-bg: rgb(30, 41, 59);
  --color-mp-danger-soft: rgb(45, 20, 32);
  --color-mp-danger-text: rgb(248, 113, 113);
  --color-mp-success-soft: rgb(5, 46, 22);
  --color-mp-success-text: rgb(74, 222, 128);
  --color-mp-border-strong: rgb(71, 85, 105);
  --color-mp-tab-shadow: rgba(0, 0, 0, 0.35);
  --color-mp-dashed-border: rgb(45, 55, 72);
  --color-mp-transcript-bg: rgb(30, 37, 51);
  --color-mp-transcript-text: rgb(160, 174, 192);
  --color-mp-added-border: rgb(22, 101, 52);
  --color-mp-suggested-accent: rgb(129, 140, 248);
  --color-mp-done-accent: rgb(74, 222, 128);
  --color-mp-suggested-hover-border: rgb(71, 85, 105);
  --color-mp-suggested-hover-bg: rgb(38, 51, 73);
}
.ai-teammate {
  --p-border: #e2e8f0; --p-card: #ffffff; --p-text: #0f172a; --p-muted: #64748b;
  --p-hint: #94a3b8; --p-primary: #4f46e5; --p-primary-soft: #eef2ff;
  --p-green: #059669; --p-green-soft: #ecfdf5; --p-amber: #d97706; --p-bg: #f8fafc;
  display: flex; flex-direction: column; gap: 20px; color: var(--p-text);
}
.ai-teammate__loading { padding: 60px; text-align: center; color: var(--p-muted); font-size: 14px; }
.ai-teammate__tabs { display: flex; border-bottom: 1.5px solid var(--p-border); }
.ai-teammate__tab {
  padding: 10px 18px; font-size: 15px; font-weight: 700; color: var(--p-muted);
  background: none; border: none; border-bottom: 2.5px solid transparent;
  cursor: pointer; margin-bottom: -1.5px; transition: color 0.15s, border-color 0.15s;
}
.ai-teammate__tab.active { color: var(--p-primary); border-bottom-color: var(--p-primary); }
.ai-teammate__tab-body { display: flex; flex-direction: column; gap: 16px; }
.ai-teammate__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-teammate__title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--p-text); }
.ai-teammate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  margin-left: 4px;
}

.ai-teammate__icon svg {
  width: 20px;
  height: 20px;
}
.ai-teammate__badge {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.ai-teammate__badge.on { background: #ecfdf5; color: #059669; }
.ai-teammate__badge.off { background: var(--p-bg); color: var(--p-hint); border: 1px solid var(--p-border); }
.ai-teammate__toggle {
  padding: 0 16px; height: 38px; border-radius: 10px; border: 1px solid var(--p-border);
  background: var(--p-card); color: var(--p-text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-teammate__toggle:hover { background: var(--p-bg); }
.ai-teammate__toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-teammate__analyze-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%; height: 46px; border-radius: 14px; border: 1px solid var(--p-primary);
  background: var(--p-primary); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.ai-teammate__analyze-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.ai-teammate__analyze-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-teammate__result {
  padding: 16px 20px; border-radius: 16px; border: 1px solid var(--p-border);
  font-size: 14px; line-height: 1.6;
}
.ai-teammate__result.has-alert { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ai-teammate__result.no-alert { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.ai-teammate__triggers { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-teammate__trigger-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
.ai-teammate__trigger-badge svg { flex: 0 0 auto; width: 13px; height: 13px; }
.ai-teammate__message { font-size: 14px; font-weight: 600; }
.ai-teammate__message--icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ai-teammate__message--icon svg { flex: 0 0 auto; width: 15px; height: 15px; }
.ai-teammate__inactive-desc {
  padding: 20px; background: var(--p-bg); border-radius: 14px; border: 1px solid var(--p-border);
  font-size: 14px; color: var(--p-muted); line-height: 1.6; text-align: center;
}
.ai-teammate__levels-card {
  padding: 20px 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px rgba(15,23,42,0.05);
}
.ai-teammate__levels-title { font-size: 15px; font-weight: 800; color: var(--p-text); margin-bottom: 14px; }
.ai-teammate__levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.ai-teammate__level {
  background: var(--p-bg); border: 1px solid var(--p-border); border-radius: 14px;
  padding: 12px 6px; text-align: center;
}
.ai-teammate__level.active { background: var(--p-primary-soft); border-color: #c7d2fe; }
.ai-teammate__level-name { font-size: 12px; font-weight: 800; color: var(--p-muted); display: block; }
.ai-teammate__level.active .ai-teammate__level-name { color: var(--p-primary); }
.ai-teammate__level-sub { font-size: 10px; color: var(--p-hint); }
.ai-teammate__level.active .ai-teammate__level-sub { color: var(--p-primary); }
.ai-teammate__level-desc { font-size: 12px; color: var(--p-hint); }
.ai-teammate__minutes-header { display: flex; justify-content: flex-end; }
.ai-teammate__create-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; height: 40px;
  border-radius: 12px; border: 1px solid var(--p-border); background: var(--p-card);
  color: var(--p-text); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-teammate__create-btn:hover { background: var(--p-bg); }
.ai-teammate__form {
  padding: 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px rgba(15,23,42,0.05);
  display: flex; flex-direction: column; gap: 12px;
}
.ai-teammate__form-label { font-size: 12px; font-weight: 700; color: var(--p-muted); margin-bottom: 4px; }
.ai-teammate__form-textarea {
  font-size: 14px; padding: 10px 14px; border: 1px solid var(--p-border);
  border-radius: 12px; background: var(--p-bg); color: var(--p-text); width: 100%;
  resize: none; line-height: 1.5; font-weight: 600;
}
.ai-teammate__form-textarea:focus { outline: none; border-color: var(--p-primary); background: #fff; }
.ai-teammate__form-btns { display: flex; gap: 8px; justify-content: flex-end; }
.ai-teammate__form-cancel {
  padding: 0 16px; height: 40px; border-radius: 12px; border: 1px solid var(--p-border);
  background: var(--p-bg); color: var(--p-muted); font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-teammate__form-submit {
  padding: 0 20px; height: 40px; border-radius: 12px; border: 1px solid var(--p-primary);
  background: var(--p-primary); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ai-teammate__form-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-teammate__empty { text-align: center; padding: 60px 20px; color: var(--p-muted); font-size: 14px; }
.ai-teammate__meeting-card {
  padding: 20px 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px rgba(15,23,42,0.05);
  display: flex; flex-direction: column; gap: 12px;
}
.ai-teammate__meeting-header { display: flex; align-items: center; justify-content: space-between; }
.ai-teammate__meeting-date { font-size: 12px; color: var(--p-hint); }
.ai-teammate__meeting-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--p-primary-soft); color: var(--p-primary); font-weight: 700; }
.ai-teammate__meeting-badge--external { background: #fef3c7; color: #b45309; }

.meeting-type-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.meeting-type-btn {
  flex: 1; padding: 8px 0; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--p-border); background: var(--p-bg); color: var(--p-muted); transition: all 0.15s;
}
.meeting-type-btn--active { border-color: var(--p-primary); background: var(--p-primary-soft); color: var(--p-primary); }
.ai-teammate__form-input {
  width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--p-border);
  background: var(--p-bg); color: var(--p-text); font-size: 14px; margin-bottom: 14px; box-sizing: border-box;
}
.ai-teammate__meeting-section { display: flex; flex-direction: column; gap: 4px; }
.ai-teammate__meeting-section-title { font-size: 12px; font-weight: 700; color: var(--p-muted); }
.ai-teammate__meeting-text {
  font-size: 14px; color: var(--p-text); line-height: 1.6; background: var(--p-bg);
  border-radius: 10px; padding: 10px 14px; white-space: pre-wrap; border: 1px solid var(--p-border);
}
.ai-teammate__report-desc { font-size: 13px; color: var(--p-muted); }
.ai-teammate__report-card {
  padding: 20px 22px; border: 1px solid var(--p-border); border-radius: 20px;
  background: var(--p-card); box-shadow: 0 14px 32px rgba(15,23,42,0.05);
}
.ai-teammate__report-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ai-teammate__report-date { font-size: 14px; font-weight: 800; color: var(--p-text); }
.ai-teammate__temp-badge { font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.ai-teammate__temp-badge--high { background: #ecfdf5; color: #059669; }
.ai-teammate__temp-badge--low { background: #fffbeb; color: #b45309; }
.ai-teammate__temp-badge--normal { background: var(--p-bg); color: var(--p-muted); border: 1px solid var(--p-border); }
.ai-teammate__report-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--p-muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.ai-teammate__report-summary p {
  margin: 0;
}
.mvp-phase-card {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid #e9edf6;
  border-radius: 16px;
  padding: 16px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.mvp-phase-card[data-status="active"] {
  border-color: #c7d2fe;
  box-shadow: 0 4px 16px rgba(73, 101, 255, 0.1);
}

.mvp-phase-card[data-status="done"] {
  background: #f8faff;
  border-color: #c7d2fe;
  opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════
   TaskGraphPopup.css
   ─ 의존 관계 그래프 + 중요도 분포 팝업
   ═══════════════════════════════════════════════════════ */

/* ── 배경 ─────────────────────────────────────────── */
.fp-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ── 패널 ──────────────────────────────────────────── */
.tg-panel {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  width: min(1260px, 96vw);
  height: min(820px, 92vh);
  overflow: hidden;
}

:root[data-theme="dark"] .tg-panel {
  background: #0f172a;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-panel {
    background: #0f172a;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  }
}

/* ── 헤더 ─────────────────────────────────────────── */
.fp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid #e2e8f0;
}

:root[data-theme="dark"] .fp-header {
  border-bottom-color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-header {
    border-bottom-color: #1e293b;
  }
}

.fp-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-header-icon {
  font-size: 22px;
}

.fp-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

:root[data-theme="dark"] .fp-title { color: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-title { color: #e2e8f0; }
}

.fp-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.15s;
}
.fp-close:hover { background: #f1f5f9; color: #1e293b; }

:root[data-theme="dark"] .fp-close:hover { background: #1e293b; color: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fp-close:hover { background: #1e293b; color: #e2e8f0; }
}

/* ── 탭 버튼 ─────────────────────────────────────── */
.tg-tab-btn {
  padding: 5px 16px;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tg-tab-btn:hover { border-color: #6366f1; color: #6366f1; }
.tg-tab-btn[data-active="true"] {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

/* ── 전체 AI 분석 버튼 ───────────────────────────── */
.tg-bulk-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #6366f1;
  background: transparent;
  color: #6366f1;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tg-bulk-btn:hover:not(:disabled) {
  background: #6366f1;
  color: #fff;
}
.tg-bulk-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── 바디 ─────────────────────────────────────────── */
.tg-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.tg-loading,
.tg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  gap: 12px;
  font-size: 15px;
}

.tg-empty-icon {
  font-size: 40px;
  opacity: 0.6;
}

.tg-empty p {
  text-align: center;
  line-height: 1.7;
  color: #94a3b8;
}

/* ── 메인 레이아웃 ────────────────────────────────── */
.tg-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── 시각화 영역 ─────────────────────────────────── */
.tg-viz {
  flex: 1;
  overflow: hidden;
  position: relative;
  border-right: 1px solid #e2e8f0;
}

:root[data-theme="dark"] .tg-viz { border-right-color: #1e293b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-viz { border-right-color: #1e293b; }
}

/* ── 의존 관계 그래프 ─────────────────────────────── */
.tg-graph-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.tg-graph-svg {
  flex-shrink: 0;
  display: block;
}

/* ── 스캐터 플롯 ─────────────────────────────────── */
.tg-scatter-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 16px 16px;
  box-sizing: border-box;
  gap: 10px;
  overflow: auto;
}

.tg-scatter-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.tg-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
}

.tg-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tg-scatter {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

:root[data-theme="dark"] .tg-scatter { background: #0f172a; border-color: #1e293b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-scatter { background: #0f172a; border-color: #1e293b; }
}

/* ── 상세 패널 ────────────────────────────────────── */
.tg-detail {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

:root[data-theme="dark"] .tg-detail { background: #0c1524; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-detail { background: #0c1524; }
}

.tg-detail-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}

/* ── 사용 가이드 ───────────────────────────────────── */
.tg-detail-guide {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.tg-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #475569;
}

:root[data-theme="dark"] .tg-guide-step { background: #1e293b; border-color: #334155; color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-guide-step { background: #1e293b; border-color: #334155; color: #94a3b8; }
}

.tg-guide-step--primary {
  border-color: #a5b4fc;
  background: #eef2ff;
}

:root[data-theme="dark"] .tg-guide-step--primary { background: #1e1b4b; border-color: #4338ca; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-guide-step--primary { background: #1e1b4b; border-color: #4338ca; }
}

.tg-guide-step strong { color: #1e293b; }
:root[data-theme="dark"] .tg-guide-step strong { color: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-guide-step strong { color: #e2e8f0; }
}

.tg-guide-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.tg-guide-hint {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  padding: 8px 4px 0;
}

.tg-detail-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tg-detail-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tg-detail-source {
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 12px;
}

:root[data-theme="dark"] .tg-detail-source { background: #1e1b4b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-detail-source { background: #1e1b4b; }
}

.tg-done-chip {
  font-size: 11px;
  font-weight: 700;
  color: #22c55e;
  background: #f0fdf4;
  padding: 2px 8px;
  border-radius: 12px;
}

.tg-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

:root[data-theme="dark"] .tg-detail-title { color: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-detail-title { color: #e2e8f0; }
}

.tg-detail-meta {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* ── 중요도·난이도 바 ─────────────────────────────── */
.tg-detail-scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tg-score-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tg-score-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tg-score-num {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

.tg-score-bar-wrap {
  display: flex;
  gap: 3px;
  flex: 1;
}

.tg-score-bar-100 {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  overflow: hidden;
}

.tg-score-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.tg-score-seg {
  height: 8px;
  flex: 1;
  border-radius: 4px;
  transition: background 0.2s;
}

.tg-score-text {
  font-size: 11px;
  font-weight: 700;
  width: 72px;
  text-align: right;
  flex-shrink: 0;
}

/* ── AI 분석 이유 ─────────────────────────────────── */
.tg-reasoning {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 10px;
  padding: 12px;
}

:root[data-theme="dark"] .tg-reasoning { background: #0c1a2e; border-color: #1e3a5f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-reasoning { background: #0c1a2e; border-color: #1e3a5f; }
}

.tg-reasoning-label {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  margin-bottom: 6px;
}

.tg-reasoning-text {
  font-size: 12px;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}

:root[data-theme="dark"] .tg-reasoning-text { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-reasoning-text { color: #94a3b8; }
}

.tg-no-reasoning {
  font-size: 12px;
  color: #cbd5e1;
  text-align: center;
  padding: 8px 0;
}

/* ── AI 분석 버튼 ─────────────────────────────────── */
.tg-analyze-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.tg-analyze-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.tg-analyze-btn:disabled { opacity: 0.5; cursor: default; }

/* ── 의존 관계 섹션 ───────────────────────────────── */
.tg-deps-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tg-deps-section--dependent {
  opacity: 0.7;
}

.tg-deps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
}

:root[data-theme="dark"] .tg-deps-head { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-deps-head { color: #94a3b8; }
}

.tg-dep-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.tg-dep-add-btn:hover { background: #e0e7ff; color: #6366f1; border-color: #a5b4fc; }

.tg-dep-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
}

:root[data-theme="dark"] .tg-dep-picker { background: #1e293b; border-color: #334155; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-dep-picker { background: #1e293b; border-color: #334155; }
}

.tg-dep-pick-item {
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  transition: background 0.12s;
}
.tg-dep-pick-item:hover { background: #e0e7ff; color: #6366f1; }

:root[data-theme="dark"] .tg-dep-pick-item { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-dep-pick-item { color: #94a3b8; }
}

.tg-no-dep {
  font-size: 12px;
  color: #cbd5e1;
  margin: 0;
}

.tg-dep-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #f1f5f9;
  border-radius: 8px;
}

:root[data-theme="dark"] .tg-dep-item { background: #1e293b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-dep-item { background: #1e293b; }
}

.tg-dep-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tg-dep-name {
  flex: 1;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-theme="dark"] .tg-dep-name { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-dep-name { color: #94a3b8; }
}

.tg-dep-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #f87171;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.tg-dep-del:hover { opacity: 1; }

/* ── 선택 해제 버튼 ───────────────────────────────── */
.tg-close-detail {
  align-self: flex-end;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 4px;
}
.tg-close-detail:hover { border-color: #6366f1; color: #6366f1; background: #f0f4ff; }

/* ── 스피너 ─────────────────────────────────────── */
.mp-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: mp-spin 0.6s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ── AI 추천 버튼 ───────────────────────────────── */
.tg-recommend-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid #10b981;
  background: transparent;
  color: #10b981;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tg-recommend-btn:hover:not(:disabled) { background: #10b981; color: #fff; }
.tg-recommend-btn:disabled { opacity: 0.5; cursor: default; }

/* ── AI 추천 결과 패널 ──────────────────────────── */
.tg-rec-panel {
  border-bottom: 1px solid #d1fae5;
  background: #f0fdf4;
  padding: 12px 20px;
  max-height: 320px;
  overflow-y: auto;
}
.tg-rec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 10px;
}
.tg-rec-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #6b7280;
  padding: 0 4px;
}
.tg-rec-empty { font-size: 13px; color: #6b7280; }
.tg-rec-list { display: flex; flex-direction: column; gap: 8px; }
.tg-rec-item {
  background: #fff;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
}
.tg-rec-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.tg-rec-role {
  font-size: 11px;
  font-weight: 700;
  background: #dcfce7;
  color: #166534;
  padding: 2px 7px;
  border-radius: 8px;
}
.tg-rec-scores { display: flex; gap: 8px; font-size: 11px; font-weight: 700; }
.tg-rec-title  { font-size: 13px; font-weight: 600; color: #1e293b; margin: 2px 0 4px; }
.tg-rec-reason { font-size: 11.5px; color: #64748b; margin: 0 0 8px; line-height: 1.5; }
.tg-rec-add-btn {
  font-size: 12px;
  font-weight: 700;
  color: #059669;
  border: 1px solid #6ee7b7;
  border-radius: 7px;
  background: #ecfdf5;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.14s;
}
.tg-rec-add-btn:hover:not(:disabled) { background: #d1fae5; }
.tg-rec-add-btn:disabled { opacity: 0.5; cursor: default; }

/* ── 인간 평가 UI ───────────────────────────────── */
.tg-human-eval {
  margin-top: 12px;
  padding: 12px;
  background: #f8f8ff;
  border: 1px solid #e0e0f8;
  border-radius: 10px;
}
.tg-human-eval-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-human-eval-badge {
  font-size: 10.5px;
  background: #e0e7ff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 8px;
}
.tg-human-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tg-human-row label {
  font-size: 12px;
  color: #374151;
  min-width: 80px;
  white-space: nowrap;
}
.tg-human-row label strong { color: #4338ca; }
.tg-human-slider {
  flex: 1;
  accent-color: #6366f1;
  height: 4px;
}
.tg-human-slider--diff { accent-color: #8b5cf6; }
.tg-human-save-btn {
  width: 100%;
  padding: 7px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s;
  margin-top: 4px;
}
.tg-human-save-btn:hover:not(:disabled) { background: #4f46e5; }
.tg-human-save-btn:disabled { opacity: 0.5; cursor: default; }

/* ── AI vs 인간 점수 비교 ───────────────────────── */
.tg-score-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fafafa;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 12px;
}
.tg-score-compare-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.tg-score-compare-label {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 2px;
}
.tg-score-compare-col--final .tg-score-compare-label { color: #4338ca; }
.tg-score-compare-col--final { font-weight: 700; }
.tg-score-compare-arrow { color: #94a3b8; font-size: 16px; flex-shrink: 0; }

/* ── Jira 버튼 ──────────────────────────────────── */
.tg-jira-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid #0052cc;
  background: transparent;
  color: #0052cc;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tg-jira-btn:hover { background: #0052cc; color: #fff; }

/* ── Jira 폼 ─────────────────────────────────────── */
.tg-jira-form-wrap {
  background: var(--tg-jira-bg, #f8faff);
  border-bottom: 1px solid #dce6f7;
  padding: 16px 24px;
  animation: tg-slide-down 0.18s ease;
}
@keyframes tg-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-jira-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}
.tg-jira-form-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0052cc;
}
.tg-jira-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.tg-jira-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
}
.tg-jira-label a.tg-jira-link {
  font-size: 10.5px;
  color: #0052cc;
  text-decoration: none;
  margin-left: 4px;
}
.tg-jira-label a.tg-jira-link:hover { text-decoration: underline; }
.tg-jira-input {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  font-size: 12.5px;
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
  color: #1e293b;
}
.tg-jira-input:focus { border-color: #0052cc; }
.tg-jira-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.tg-jira-cancel {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.tg-jira-cancel:hover { border-color: #94a3b8; color: #334155; }
.tg-jira-submit {
  padding: 6px 20px;
  border-radius: 8px;
  border: none;
  background: #0052cc;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.tg-jira-submit:hover:not(:disabled) { background: #003d99; }
.tg-jira-submit:disabled { opacity: 0.5; cursor: default; }

/* ── 다크 모드: Jira ────────────────────────────── */
:root[data-theme="dark"] .tg-jira-form-wrap {
  background: #1a2133;
  border-bottom-color: #2d3a52;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-jira-form-wrap {
    background: #1a2133;
    border-bottom-color: #2d3a52;
  }
}
:root[data-theme="dark"] .tg-jira-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-jira-input {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }
}
:root[data-theme="dark"] .tg-jira-label { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-jira-label { color: #94a3b8; }
}

/* ── 다크 모드: AI 추천 패널 ───────────────────── */
:root[data-theme="dark"] .tg-rec-panel { background: #071912; border-bottom-color: #1a3d28; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-panel { background: #071912; border-bottom-color: #1a3d28; }
}
:root[data-theme="dark"] .tg-rec-header { color: #34d399; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-header { color: #34d399; }
}
:root[data-theme="dark"] .tg-rec-close { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-close { color: #94a3b8; }
}
:root[data-theme="dark"] .tg-rec-item { background: #0d2318; border-color: #1a4a2e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-item { background: #0d2318; border-color: #1a4a2e; }
}
:root[data-theme="dark"] .tg-rec-role { background: #0f2820; color: #34d399; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-role { background: #0f2820; color: #34d399; }
}
:root[data-theme="dark"] .tg-rec-title { color: #e2e8f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-title { color: #e2e8f0; }
}
:root[data-theme="dark"] .tg-rec-reason { color: #64748b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-reason { color: #64748b; }
}
:root[data-theme="dark"] .tg-rec-add-btn { background: #062010; border-color: #1a4a2e; color: #34d399; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-add-btn { background: #062010; border-color: #1a4a2e; color: #34d399; }
}
:root[data-theme="dark"] .tg-rec-empty { color: #64748b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-rec-empty { color: #64748b; }
}

/* ── 다크 모드: 인간 평가 ───────────────────────── */
:root[data-theme="dark"] .tg-human-eval { background: #100f2b; border-color: #1e1b4b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-human-eval { background: #100f2b; border-color: #1e1b4b; }
}
:root[data-theme="dark"] .tg-human-eval-title { color: #818cf8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-human-eval-title { color: #818cf8; }
}
:root[data-theme="dark"] .tg-human-eval-badge { background: #1e1b4b; color: #818cf8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-human-eval-badge { background: #1e1b4b; color: #818cf8; }
}
:root[data-theme="dark"] .tg-human-row label { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-human-row label { color: #94a3b8; }
}
:root[data-theme="dark"] .tg-human-row label strong { color: #818cf8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-human-row label strong { color: #818cf8; }
}

/* ── 다크 모드: AI vs 최종 점수 비교 ───────────── */
:root[data-theme="dark"] .tg-score-compare { background: #1e293b; border-color: #334155; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-score-compare { background: #1e293b; border-color: #334155; }
}
:root[data-theme="dark"] .tg-score-compare-label { color: #475569; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-score-compare-label { color: #475569; }
}
:root[data-theme="dark"] .tg-score-compare-col--final .tg-score-compare-label { color: #818cf8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-score-compare-col--final .tg-score-compare-label { color: #818cf8; }
}

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 860px) {
  .tg-jira-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tg-jira-fields { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tg-panel {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .tg-main {
    flex-direction: column;
  }
  .tg-viz {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    height: 55%;
  }
  .tg-detail {
    width: 100%;
    height: 45%;
  }
}
/* OutcomePopup.css */

/* ── AI 캔버스 탭 ── */
.op-canvas-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.op-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px 10px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  flex-shrink: 0;
  background: var(--color-bg-white, #fff);
}
[data-theme="dark"] .op-canvas-toolbar {
  background: var(--color-bg-card, #1a1a2e);
  border-bottom-color: rgba(255,255,255,0.07);
}

.op-canvas-toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.op-canvas-toolbar-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary, #111);
}
[data-theme="dark"] .op-canvas-toolbar-label { color: rgba(255,255,255,0.85); }

.op-canvas-toolbar-desc {
  font-size: 11px;
  color: var(--color-text-secondary, #9ca3af);
}

.op-canvas-refresh-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary, #6b7280);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.op-canvas-refresh-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, #f3f4f6);
  color: var(--color-text-primary, #111);
}
.op-canvas-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] .op-canvas-refresh-btn {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
}
[data-theme="dark"] .op-canvas-refresh-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
}

/* ── 보드 영역 ── */
.op-canvas-board {
  flex: 1;
  overflow-y: auto;
  background: #111318;
  background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 20px 20px;
  padding: 20px;
  position: relative;
}

.op-canvas-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  gap: 12px;
  text-align: center;
}

.op-canvas-empty-icon {
  font-size: 22px;
  opacity: 0.2;
  color: #fff;
}

.op-canvas-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  line-height: 1.7;
  margin: 0;
}

.op-canvas-loading-dots {
  display: flex;
  gap: 5px;
}

.op-canvas-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  animation: opDotBounce 1.2s ease-in-out infinite;
}
.op-canvas-dot:nth-child(2) { animation-delay: 0.2s; }
.op-canvas-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes opDotBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── 카드 그리드 (masonry) ── */
.op-canvas-cards {
  columns: 3 190px;
  column-gap: 11px;
}

/* ── 카드 — Arky 문서 노드 스타일 ── */
.op-canvas-card {
  break-inside: avoid;
  margin-bottom: 11px;
  background: #f9f9f7;
  border: 1px solid rgba(0,0,0,0.13);
  border-radius: 3px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 4px 14px rgba(0,0,0,0.32);
  transition: box-shadow 0.15s, transform 0.15s;
}
.op-canvas-card:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.22),
    0 8px 22px rgba(0,0,0,0.42);
  transform: translateY(-1px);
}

/* 카드 상단 타이틀 바 */
.op-canvas-card__titlebar {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 11px 7px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}

.op-canvas-card__index {
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #aaa;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 1px;
}

.op-canvas-card__title {
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* 포인트 목록 */
.op-canvas-card__points {
  margin: 0;
  padding: 8px 11px 9px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-canvas-card__point {
  font-size: 10.5px;
  color: #3d3d3d;
  line-height: 1.6;
  padding-left: 10px;
  position: relative;
}

.op-canvas-card__point::before {
  content: "–";
  position: absolute;
  left: 0;
  color: #b0b0b0;
  font-size: 9px;
  top: 1px;
}

/* ── 덱 탭 숨김 ── */
.op-body--hidden { display: none !important; }

/* ── 덱 레이아웃 ── */
.op-deck-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── 사이드바 ── */
.op-deck-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.op-deck-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  flex-shrink: 0;
}

.op-deck-sidebar-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.op-deck-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: var(--bg-sub, #f3f4f6);
  border-radius: 6px;
  color: var(--text-main, #111);
  cursor: pointer;
  transition: background 0.15s;
}
.op-deck-add-btn:hover { background: var(--primary-light, #ede9fe); color: var(--primary, #4f46e5); }

.op-deck-form {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  flex-shrink: 0;
}

.op-deck-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-main, #fff);
  color: var(--text-main, #111);
  box-sizing: border-box;
}
.op-deck-input:focus { outline: none; border-color: var(--primary, #4f46e5); }

.op-deck-form-actions {
  display: flex;
  gap: 6px;
}

.op-deck-empty-side {
  padding: 16px 14px;
  font-size: 12px;
  color: var(--text-sub, #9ca3af);
  line-height: 1.5;
}

.op-deck-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}

.op-deck-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 8px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.op-deck-item:hover { background: var(--bg-sub, #f3f4f6); }
.op-deck-item.active { background: var(--primary-light, #ede9fe); }

.op-deck-icon { font-size: 14px; flex-shrink: 0; }

.op-deck-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-main, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-deck-del {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-sub, #9ca3af);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.op-deck-item:hover .op-deck-del { display: flex; }
.op-deck-del:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* ── 뷰어 ── */
.op-deck-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.op-deck-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  flex-shrink: 0;
}

.op-deck-viewer-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main, #111);
}

.op-deck-viewer-ext {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary, #4f46e5);
  text-decoration: none;
}
.op-deck-viewer-ext:hover { text-decoration: underline; }

.op-deck-iframe {
  flex: 1;
  width: 100%;
  border: none;
  display: block;
}

.op-deck-viewer-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-sub, #9ca3af);
  text-align: center;
  padding: 24px;
}

.op-deck-viewer-empty-icon { opacity: 0.3; }

.op-deck-viewer-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--text-sub, #6b7280);
}

.op-deck-viewer-hint {
  font-size: 12px !important;
  color: var(--text-sub, #9ca3af) !important;
}

/* 다크모드 */
[data-theme="dark"] .op-deck-sidebar { border-right-color: var(--border-dark, #374151); }
[data-theme="dark"] .op-deck-input { background: var(--bg-sub-dark, #1f2937); border-color: var(--border-dark, #374151); color: #f9fafb; }
[data-theme="dark"] .op-deck-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .op-deck-item.active { background: rgba(99,102,241,0.18); }
[data-theme="dark"] .op-deck-viewer-header { border-bottom-color: var(--border-dark, #374151); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .op-deck-sidebar { border-right-color: #374151; }
  :root:not([data-theme="light"]) .op-deck-input { background: #1f2937; border-color: #374151; color: #f9fafb; }
  :root:not([data-theme="light"]) .op-deck-item:hover { background: rgba(255,255,255,0.06); }
  :root:not([data-theme="light"]) .op-deck-item.active { background: rgba(99,102,241,0.18); }
  :root:not([data-theme="light"]) .op-deck-viewer-header { border-bottom-color: #374151; }
}

.op-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px 0;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  flex-shrink: 0;
}

.op-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-sub, #6b7280);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.op-tab:hover { color: var(--text-main, #111); }
.op-tab.active {
  color: var(--primary, #4f46e5);
  border-bottom-color: var(--primary, #4f46e5);
}

.op-tab-cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary, #4f46e5);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* body */
.op-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 24px;
}

.op-body--canvas {
  padding: 0;
  overflow: hidden;
}

.op-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.op-section-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.op-desc {
  font-size: 13px;
  color: var(--text-sub, #6b7280);
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
}

.op-add-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1.5px solid var(--primary, #4f46e5);
  background: none;
  color: var(--primary, #4f46e5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.op-add-btn:hover { background: rgba(79, 70, 229, 0.06); }

/* form */
.op-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 10px;
  border: 1.5px dashed var(--border-light, #e5e7eb);
  background: var(--bg-sub, #f9fafb);
}

.op-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.op-select {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  font-size: 13px;
  color: var(--text-main, #111);
  cursor: pointer;
}

.op-input {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  font-size: 13px;
  color: var(--text-main, #111);
  min-width: 120px;
}
.op-input--flex { flex: 1; min-width: 180px; }
.op-input:focus, .op-select:focus { outline: none; border-color: var(--primary, #4f46e5); }

.op-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  font-size: 13px;
  color: var(--text-main, #111);
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.op-textarea:focus { outline: none; border-color: var(--primary, #4f46e5); }

.op-submit-btn {
  padding: 7px 16px;
  border-radius: 7px;
  border: none;
  background: var(--primary, #4f46e5);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.op-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.op-cancel-btn {
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-light, #e5e7eb);
  background: none;
  color: var(--text-sub, #6b7280);
  font-size: 13px;
  cursor: pointer;
}

.op-form-actions {
  justify-content: flex-end;
}

/* contributors */
.op-contributors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-contributors-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.op-contributors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.op-contributor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  color: var(--text-sub, #6b7280);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.op-contributor-chip.selected {
  border-color: var(--primary, #4f46e5);
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary, #4f46e5);
  font-weight: 600;
}

/* evidence hint */
.op-evidence-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-sub, #9ca3af);
  flex: 1;
}

/* error */
.op-error {
  padding: 8px 12px;
  border-radius: 7px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 12.5px;
}

/* empty */
.op-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-sub, #9ca3af);
  font-size: 13.5px;
}

/* list */
.op-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* type badge */
.op-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary, #4f46e5);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* KPI item */
.op-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
  transition: border-color 0.15s;
}
.op-kpi-item.is-achieved {
  border-color: #d1fae5;
  background: #f0fdf4;
}

.op-kpi-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.op-check-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.op-check-done { color: #10b981; }
.op-check-empty { color: var(--border-light, #d1d5db); }
.op-kpi-item.is-achieved .op-check-btn { cursor: default; }

.op-kpi-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.op-kpi-title { font-size: 13.5px; font-weight: 500; color: var(--text-main, #111); }
.op-kpi-target { font-size: 12px; color: var(--text-sub, #6b7280); }
.op-kpi-achieved { font-size: 11.5px; color: #059669; font-weight: 600; }

/* 체크인 버튼 */
.op-checkin-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-light, #e5e7eb);
  background: none;
  color: var(--text-sub, #6b7280);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.op-checkin-trigger:hover,
.op-checkin-trigger.active {
  border-color: var(--primary, #4f46e5);
  color: var(--primary, #4f46e5);
  background: rgba(79, 70, 229, 0.06);
}

/* 진척도 바 */
.op-kpi-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-kpi-progress-track {
  flex: 1;
  height: 5px;
  background: var(--border-light, #e5e7eb);
  border-radius: 99px;
  overflow: hidden;
}
.op-kpi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a78bfa);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.op-kpi-progress-pct {
  font-size: 11px;
  font-weight: 700;
  color: #6366f1;
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 체크인 폼 */
.op-checkin-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-sub, #f9fafb);
  border-radius: 8px;
  border: 1px dashed var(--border-light, #e5e7eb);
}
.op-checkin-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.op-checkin-pct-label {
  font-size: 15px;
  font-weight: 800;
  color: #6366f1;
  min-width: 40px;
  font-variant-numeric: tabular-nums;
}
.op-checkin-range {
  flex: 1;
  accent-color: #6366f1;
  cursor: pointer;
  height: 4px;
}

.op-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-sub, #9ca3af);
  padding: 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.op-del-btn:hover { color: #dc2626; background: #fee2e2; }

/* Outcome item */
.op-outcome-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-light, #e5e7eb);
  background: var(--bg-main, #fff);
}

.op-outcome-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.op-outcome-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main, #111);
  min-width: 0;
}
.op-outcome-date { font-size: 12px; color: var(--text-sub, #9ca3af); white-space: nowrap; }

.op-outcome-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.op-link-btn {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 5px;
  color: var(--primary, #4f46e5);
  transition: background 0.15s;
}
.op-link-btn:hover { background: rgba(79, 70, 229, 0.08); }

.op-outcome-desc {
  font-size: 13px;
  color: var(--text-sub, #6b7280);
  line-height: 1.55;
  margin: 0;
}

.op-outcome-contributors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.op-no-evidence {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #b45309;
  background: #fffbeb;
  padding: 5px 10px;
  border-radius: 6px;
}

/* outcome form extras */

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .op-form {
    background: var(--bg-sub, #1e1e2e);
    border-color: var(--border-light, #374151);
  }
  :root:not([data-theme="light"]) .op-kpi-item.is-achieved {
    border-color: #065f46;
    background: rgba(5, 150, 105, 0.08);
  }
  :root:not([data-theme="light"]) .op-no-evidence {
    background: rgba(180, 83, 9, 0.12);
  }
  :root:not([data-theme="light"]) .op-error {
    background: rgba(220, 38, 38, 0.12);
  }
}

[data-theme="dark"] .op-form {
  background: var(--bg-sub, #1e1e2e);
  border-color: var(--border-light, #374151);
}
[data-theme="dark"] .op-kpi-item.is-achieved {
  border-color: #065f46;
  background: rgba(5, 150, 105, 0.08);
}
[data-theme="dark"] .op-no-evidence {
  background: rgba(180, 83, 9, 0.12);
}
[data-theme="dark"] .op-error {
  background: rgba(220, 38, 38, 0.12);
}

/* ── AI 캔버스 통합 탭: 목표 + 결과 패널 ── */
.op-canvas-meta {
  display: flex;
  gap: 12px;
  padding: 14px 18px 0;
  flex-shrink: 0;
}

.op-canvas-meta-panel {
  flex: 1;
  min-width: 0;
  background: var(--bg-sub, #f9fafb);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.op-canvas-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.op-canvas-meta-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-sub, #6b7280);
}

.op-canvas-meta-add {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-main, #fff);
  font-size: 11px;
  font-weight: 500;
  color: var(--primary, #4f46e5);
  cursor: pointer;
  transition: background 0.15s;
}
.op-canvas-meta-add:hover { background: var(--primary-light, #ede9fe); }

/* canvas-section이 op-body 안에서 꽉 차도록 */
.op-body .op-canvas-section {
  margin: -20px -24px -24px;
  height: calc(100% + 44px);
}

/* 다크모드 */
[data-theme="dark"] .op-canvas-meta-panel {
  background: var(--bg-sub, #1e1e2e);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .op-canvas-meta-add {
  background: var(--bg-card, #1a1a2e);
  border-color: rgba(255,255,255,0.12);
  color: #a5b4fc;
}
[data-theme="dark"] .op-canvas-meta-add:hover { background: rgba(99,102,241,0.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .op-canvas-meta-panel {
    background: #1e1e2e;
    border-color: rgba(255,255,255,0.08);
  }
  :root:not([data-theme="light"]) .op-canvas-meta-add {
    background: #1a1a2e;
    border-color: rgba(255,255,255,0.12);
    color: #a5b4fc;
  }
}
/* EventGraphPopup.css */
.eg-panel {
  width: min(560px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.eg-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.eg-header-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.eg-header-type {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6366f1;
  line-height: 1;
  margin-bottom: 2px;
}
.eg-header-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.eg-body {
  overflow-y: auto;
  flex: 1;
  padding: 20px 24px 24px;
}

/* ── Chain view ── */
.eg-loading,
.eg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}

.eg-chain {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.eg-arrow {
  display: flex;
  justify-content: center;
  font-size: 18px;
  color: #94a3b8;
  line-height: 1;
  margin: 6px 0;
  user-select: none;
}

.eg-node {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #fff);
  position: relative;
  transition: border-color .15s;
}
.eg-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
  background: var(--node-color, #6366f1);
}
.eg-node--root {
  border-color: var(--node-color, #6366f1);
  background: color-mix(in srgb, var(--node-color, #6366f1) 6%, var(--bg, #fff));
}

.eg-node-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.eg-node-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.eg-node-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--node-color, #6366f1);
}
.eg-node-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eg-node-sub {
  font-size: 12px;
  color: #64748b;
}
.eg-node-note {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}
.eg-node-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  width: fit-content;
}
.eg-node-status--done {
  background: #d1fae5;
  color: #065f46;
}
.eg-node-date {
  font-size: 11px;
  color: #94a3b8;
}
.eg-node-unlink {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #94a3b8;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color .15s, background .15s;
}
.eg-node-unlink:hover {
  color: #ef4444;
  background: #fee2e2;
}

.eg-branch-hint {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 10px;
}

/* ── Link form ── */
.eg-link-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eg-link-dir {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.eg-link-dir-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-right: 4px;
}
.eg-dir-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border, #e2e8f0);
  cursor: pointer;
  color: #64748b;
  font-weight: 500;
  transition: all .15s;
}
.eg-dir-btn input { display: none; }
.eg-dir-btn--active {
  border-color: #6366f1;
  background: #ede9fe;
  color: #4f46e5;
  font-weight: 700;
}

.eg-link-search {
  position: relative;
}
.eg-link-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}
.eg-link-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px 10px 34px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 14px;
  background: var(--bg-secondary, #f8fafc);
  color: var(--text, #0f172a);
  outline: none;
  transition: border-color .15s;
}
.eg-link-input:focus { border-color: #6366f1; background: var(--bg, #fff); }

.eg-link-hint {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}

.eg-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eg-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg, #fff);
}
.eg-search-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.eg-search-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.eg-search-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6366f1;
}
.eg-search-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eg-search-link-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.eg-search-link-btn:hover { background: #4f46e5; }
.eg-search-link-btn:disabled { opacity: .5; cursor: default; }

.eg-link-note-wrap { margin-top: 4px; }
.eg-link-note {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--text, #0f172a);
  outline: none;
}
.eg-link-note:focus { border-color: #6366f1; }

/* dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eg-node { background: #1e293b; border-color: #334155; }
  :root:not([data-theme="light"]) .eg-link-input,
  :root:not([data-theme="light"]) .eg-link-note { background: #1e293b; color: #f1f5f9; border-color: #334155; }
  :root:not([data-theme="light"]) .eg-search-item { background: #1e293b; border-color: #334155; }
  :root:not([data-theme="light"]) .eg-dir-btn { border-color: #334155; color: #94a3b8; }
  :root:not([data-theme="light"]) .eg-dir-btn--active { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
}
[data-theme="dark"] .eg-node { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .eg-link-input,
[data-theme="dark"] .eg-link-note { background: #1e293b; color: #f1f5f9; border-color: #334155; }
[data-theme="dark"] .eg-search-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .eg-dir-btn { border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .eg-dir-btn--active { background: #312e81; border-color: #6366f1; color: #a5b4fc; }
.sk-panel {
  width: min(560px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.sk-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.sk-body {
  overflow-y: auto;
  flex: 1;
  padding: 20px 24px 24px;
}

.sk-loading,
.sk-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: #64748b;
  font-size: 14px;
}

/* ── Status ─────────────────────────────────── */
.sk-not-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0;
  text-align: center;
}

.sk-connect-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #0f172a);
  margin: 0;
}

.sk-connect-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 380px;
  line-height: 1.6;
  margin: 0;
}

.sk-connect-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #4a154b;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.sk-connect-btn:hover { background: #3b0f3c; }
.sk-connect-btn:disabled { opacity: .6; cursor: default; }

.sk-connected {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sk-workspace-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--bg, #fff);
}

.sk-workspace-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #0f172a);
}

.sk-workspace-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #16a34a;
  font-weight: 600;
  margin-top: 2px;
}

.sk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
}

.sk-stat-row {
  display: flex;
  gap: 16px;
}

.sk-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-secondary, #f8fafc);
  gap: 4px;
}

.sk-stat-n {
  font-size: 22px;
  font-weight: 700;
  color: #4a154b;
}
.sk-stat-n--small { font-size: 13px; }
.sk-stat-l {
  font-size: 11px;
  color: #64748b;
}

.sk-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 6px;
}

.sk-linked-channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-linked-ch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg, #fff);
}

.sk-ch-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
}

.sk-ch-count {
  font-size: 11px;
  color: #94a3b8;
}

.sk-unlink-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  padding: 3px;
  border-radius: 4px;
  transition: color .15s;
}
.sk-unlink-btn:hover { color: #ef4444; }

.sk-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sk-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.sk-btn:disabled { opacity: .5; cursor: default; }

.sk-btn--sync {
  border-color: #4a154b;
  background: #4a154b;
  color: #fff;
}
.sk-btn--sync:hover:not(:disabled) { background: #3b0f3c; }

.sk-btn--ch {
  border-color: var(--border, #e2e8f0);
  background: var(--bg, #fff);
  color: var(--text, #0f172a);
}
.sk-btn--ch:hover { background: var(--bg-secondary, #f8fafc); }

.sk-btn--disc {
  border-color: #fee2e2;
  background: transparent;
  color: #ef4444;
}
.sk-btn--disc:hover { background: #fee2e2; }

@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-spin { animation: sk-spin .7s linear infinite; }

/* ── Channels ───────────────────────────────── */
.sk-ch-desc {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}

.sk-ch-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.sk-ch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
  background: var(--bg, #fff);
}
.sk-ch-item:hover { background: var(--bg-secondary, #f8fafc); }
.sk-ch-item--linked { opacity: .7; cursor: default; }
.sk-ch-item input { cursor: pointer; }

.sk-ch-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--text, #0f172a);
}

.sk-ch-linked-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #16a34a;
  font-weight: 600;
}

.sk-ch-members {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #94a3b8;
}

.sk-link-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  padding: 11px;
  background: #4a154b;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.sk-link-btn:hover { background: #3b0f3c; }
.sk-link-btn:disabled { opacity: .6; cursor: default; }

/* ── Messages ───────────────────────────────── */
.sk-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sk-msg {
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg, #fff);
}

.sk-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.sk-msg-user {
  font-size: 12px;
  font-weight: 700;
  color: #4a154b;
}

.sk-msg-ch {
  font-size: 11px;
  color: #94a3b8;
}

.sk-msg-time {
  font-size: 11px;
  color: #94a3b8;
  margin-left: auto;
}

.sk-msg-text {
  font-size: 13px;
  color: var(--text, #0f172a);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Mappings ───────────────────────────────── */
.sk-mappings {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sk-map-desc {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
}

.sk-map-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--bg, #fff);
}

.sk-map-slack {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #0f172a);
}

.sk-map-email {
  font-size: 11px;
  color: #94a3b8;
  display: block;
}

.sk-map-arrow {
  font-size: 16px;
  color: #94a3b8;
  flex-shrink: 0;
}

.sk-map-select {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg, #fff);
  color: var(--text, #0f172a);
  cursor: pointer;
}

/* dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sk-workspace-card,
  :root:not([data-theme="light"]) .sk-linked-ch,
  :root:not([data-theme="light"]) .sk-ch-item,
  :root:not([data-theme="light"]) .sk-msg,
  :root:not([data-theme="light"]) .sk-map-row { background: #1e293b; border-color: #334155; }
  :root:not([data-theme="light"]) .sk-stat { background: #1e293b; border-color: #334155; }
  :root:not([data-theme="light"]) .sk-map-select { background: #1e293b; color: #f1f5f9; border-color: #334155; }
}
[data-theme="dark"] .sk-workspace-card,
[data-theme="dark"] .sk-linked-ch,
[data-theme="dark"] .sk-ch-item,
[data-theme="dark"] .sk-msg,
[data-theme="dark"] .sk-map-row { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .sk-stat { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .sk-map-select { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.gh-panel {
  max-width: 860px;
  height: min(88vh, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}

.gh-icon { display: flex; align-items: center; color: var(--color-text-main); }

.gh-repo-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 8px;
}

.fp-header-right { display: flex; align-items: center; gap: 6px; }

.fp-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-border);
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
  transition: background 0.13s;
}
.fp-icon-btn:hover { background: var(--color-bg-soft); }
.gh-disconnect-btn:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }

/* Loading / empty */
.gh-loading { padding: 60px; text-align: center; color: var(--color-text-tertiary); font-size: 14px; }
.gh-error-box { margin: 16px; padding: 12px 16px; border-radius: 10px; background: #fef2f2; color: #ef4444; font-size: 13px; }
.gh-empty { padding: 60px; text-align: center; color: var(--color-text-tertiary); font-size: 14px; }

/* Connect form */
.gh-connect-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 32px 24px; gap: 0;
}
.gh-connect-hero {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 28px; text-align: center;
}
.gh-connect-icon { color: var(--color-text-main); opacity: 0.7; }
.gh-connect-title { font-size: 18px; font-weight: 800; color: var(--color-text-main); margin: 0; }
.gh-connect-desc { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.7; }
.gh-pat-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: #4965ff; text-decoration: none; margin-top: 4px;
}
.gh-pat-link:hover { text-decoration: underline; }

.gh-connect-form {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column;
}
.gh-label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
.gh-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--color-border); background: var(--color-bg-main);
  color: var(--color-text-main); font-size: 13px; outline: none;
  transition: border-color 0.15s; box-sizing: border-box;
}
.gh-input:focus { border-color: #4965ff; }
.gh-error { font-size: 12px; color: #ef4444; margin: 8px 0 0; }
.gh-connect-btn {
  margin-top: 20px; padding: 11px; border-radius: 10px; border: none;
  background: #24292f; color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.gh-connect-btn:hover:not(:disabled) { background: #1a1f24; }
.gh-connect-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Connected view */
.gh-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.gh-tabs {
  display: flex; gap: 4px; padding: 12px 20px 0;
  border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.gh-tab {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: none; background: transparent; font-size: 13px; font-weight: 600;
  color: var(--color-text-secondary); cursor: pointer; border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.13s;
}
.gh-tab--active { color: #24292f; border-bottom-color: #24292f; }
:root[data-theme="dark"] .gh-tab--active,
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gh-tab--active { color: #fff; border-bottom-color: #fff; } }

.gh-list {
  flex: 1; overflow-y: auto; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.gh-list::-webkit-scrollbar { width: 5px; }
.gh-list::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

.gh-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-bg-main); text-decoration: none;
  transition: background 0.12s, border-color 0.12s; cursor: pointer;
}
.gh-item:hover { background: var(--color-bg-soft); border-color: #4965ff44; }

.gh-item--commit { flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.gh-sha {
  font-family: monospace; font-size: 11px; background: var(--color-bg-soft);
  border: 1px solid var(--color-border); border-radius: 5px;
  padding: 2px 6px; color: var(--color-text-secondary); flex-shrink: 0;
}
.gh-msg { font-size: 13px; color: var(--color-text-main); font-weight: 500; flex: 1; word-break: break-word; }
.gh-item-top { display: flex; align-items: flex-start; gap: 8px; }
.gh-num { font-size: 12px; color: var(--color-text-tertiary); flex-shrink: 0; padding-top: 1px; }
.gh-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gh-author { font-size: 11px; color: var(--color-text-tertiary); }
.gh-time { font-size: 11px; color: var(--color-text-tertiary); }
.gh-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.gh-badge--draft { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }
.gh-labels { display: flex; gap: 4px; flex-wrap: wrap; }
.gh-label-chip { font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: 600; }
/* ── 회의실 전체 오버레이 ── */
.mr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0d0d14;
  display: flex;
  flex-direction: column;
}

.mr-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── 왼쪽: AI 채팅 패널 ── */
.mr-chat-panel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #13131f;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.mr-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.mr-chat-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: mr-pulse 2s infinite;
}

@keyframes mr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.mr-chat-title {
  font-size: 13px;
  font-weight: 700;
  color: #e5e7eb;
  letter-spacing: 0.02em;
}

.mr-chat-connecting {
  font-size: 11px;
  color: #9ca3af;
}

.mr-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.mr-close-btn:hover { background: rgba(255,255,255,0.08); color: #e5e7eb; }

.mr-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mr-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: #6b7280;
  padding: 24px;
}

.mr-chat-empty-icon {
  font-size: 28px;
  opacity: 0.5;
}

.mr-chat-empty p {
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

/* 메시지 */
.mr-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mr-msg-label {
  font-size: 10px;
  font-weight: 600;
  color: #a5b4fc;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mr-msg-label--user { color: #6b7280; }

.mr-msg-bubble {
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
}

.mr-msg--user .mr-msg-bubble {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
  color: #9ca3af;
  font-size: 12px;
}

.mr-msg-bubble--streaming {
  border-color: rgba(99,102,241,0.4);
}

.mr-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: #818cf8;
  border-radius: 1px;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: mr-blink 0.8s infinite;
}

@keyframes mr-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 채팅 하단 */
.mr-chat-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.mr-notes-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #9ca3af;
}

.mr-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mr-notes-btn {
  width: 100%;
  padding: 9px;
  background: rgba(99,102,241,0.2);
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 8px;
  color: #a5b4fc;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.mr-notes-btn:hover { background: rgba(99,102,241,0.3); }

/* ── 오른쪽: 비디오 패널 ── */
.mr-video-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mr-video-grid {
  flex: 1;
  display: grid;
  gap: 8px;
  padding: 16px;
  overflow: hidden;
  align-content: center;
  justify-content: center;
}

/* 참가자 수에 따른 그리드 레이아웃 */
.mr-video-grid[data-count="1"] { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.mr-video-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.mr-video-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mr-video-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mr-video-grid[data-count="5"],
.mr-video-grid[data-count="6"] { grid-template-columns: 1fr 1fr 1fr; }

/* 비디오 타일 */
.mr-tile {
  position: relative;
  background: #1a1a2e;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 2px solid rgba(255,255,255,0.06);
}

.mr-tile--local {
  border-color: rgba(99,102,241,0.3);
}

.mr-tile__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mr-tile__avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mr-tile__avatar span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(99,102,241,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #e0e7ff;
}

.mr-tile__label {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #e5e7eb;
  background: rgba(0,0,0,0.55);
  padding: 3px 7px;
  border-radius: 5px;
  backdrop-filter: blur(4px);
}

/* 컨트롤 바 */
.mr-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: #0d0d14;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.mr-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: #d1d5db;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 72px;
}
.mr-ctrl-btn:hover { background: rgba(255,255,255,0.1); }

.mr-ctrl-btn--off {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.3);
  color: #fca5a5;
}
.mr-ctrl-btn--off:hover { background: rgba(239,68,68,0.22); }

.mr-ctrl-btn--end {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.mr-ctrl-btn--end:hover { background: rgba(239,68,68,0.32); }

/* ── 회의록 모달 ── */
.mr-notes-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.mr-notes-modal {
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: min(720px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mr-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.mr-notes-title {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
}

.mr-notes-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mr-notes-copy {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: #d1d5db;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.mr-notes-copy:hover { background: rgba(255,255,255,0.1); }

.mr-notes-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
}
.mr-notes-close:hover { background: rgba(255,255,255,0.08); color: #e5e7eb; }

.mr-notes-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.mr-notes-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  color: #d1d5db;
  margin: 0;
}

/* 반응형 */
@media (max-width: 768px) {
  .mr-layout { flex-direction: column; }
  .mr-chat-panel { width: 100%; height: 280px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}
.team-memory-popup__backdrop {
  z-index: 10040;
}

.team-memory-popup__panel {
  width: min(1280px, calc(100vw - 32px));
  height: min(94vh, 900px);
  max-width: 1280px;
  max-height: calc(100dvh - 24px);
  background: #f6f6f5;
}

.team-memory-popup__panel .tmh,
.team-memory-popup__panel .tmh-detail,
.team-memory-popup__panel .aic-shell {
  border-radius: inherit;
}

[data-theme="dark"] .team-memory-popup__panel {
  background: #191b20;
}

@media (max-width: 640px) {
  .team-memory-popup__backdrop {
    padding: 0;
  }

  .team-memory-popup__panel {
    width: 100%;
    height: 95dvh;
    max-height: 95dvh;
    border-radius: 20px 20px 0 0;
  }
}
.voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: background 0.2s;
  user-select: none;
}

.voice-bar--active {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.voice-bar--connecting {
  background: #fefce8;
  border-color: #fde68a;
}

.voice-bar--denied {
  background: #fef2f2;
  border-color: #fecaca;
  color: #ef4444;
}

/* 상태 점 */
.voice-bar__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}

.voice-bar--active .voice-bar__status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  animation: voicePulse 2s ease-in-out infinite;
}

.voice-bar--connecting .voice-bar__status-dot {
  background: #f59e0b;
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25); }
  50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.1); }
}

/* 참가자 수 */
.voice-bar__peers {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
}

/* 음소거 버튼 */
.voice-bar__mute-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: none;
  border-radius: 12px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.voice-bar__mute-btn:hover {
  background: #cbd5e1;
}

.voice-bar__mute-btn.is-muted {
  background: #fee2e2;
  color: #dc2626;
}

.voice-bar__mute-btn.is-muted:hover {
  background: #fecaca;
}

/* 재시도 버튼 */
.voice-bar__retry-btn {
  padding: 2px 8px;
  border: 1px solid #ef4444;
  border-radius: 10px;
  background: transparent;
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 2px;
}
.voice-bar__retry-btn:hover {
  background: #fee2e2;
}

/* 다크모드 */
:root[data-theme="dark"] .voice-bar { background: #1e293b; border-color: #334155; color: #cbd5e1; }
:root[data-theme="dark"] .voice-bar--active { background: #052e16; border-color: #166534; }
:root[data-theme="dark"] .voice-bar--connecting { background: #1c1917; border-color: #713f12; }
:root[data-theme="dark"] .voice-bar__mute-btn { background: #334155; color: #e2e8f0; }
:root[data-theme="dark"] .voice-bar__mute-btn:hover { background: #475569; }
:root[data-theme="dark"] .voice-bar__mute-btn.is-muted { background: #450a0a; color: #f87171; }
:root {
  --color-wl-layout-bg: rgb(249, 250, 251);
  --color-wl-gather-accent: rgb(108, 99, 255);
  --color-wl-mobile-subtext: rgb(138, 148, 166);
  --color-wl-shadow-18: rgba(15, 23, 42, 0.18);
  --color-wl-divider: rgb(238, 242, 247);
  --color-wl-gather-accent-2: rgb(74, 144, 226);
  --color-wl-mobile-header-bg: rgba(255, 255, 255, 0.94);
  --color-wl-menu-backdrop: rgba(15, 23, 42, 0.42);
  --color-wl-close-icon: rgb(75, 85, 99);
  --color-wl-welcome-backdrop: rgba(15, 23, 42, 0.48);
  --color-wl-steps-bg: rgb(248, 247, 255);
}

/* .workspace-layout 다크 배경은 기존 dark.css "워크스페이스 레이아웃
   전체 배경" 섹션 값을 그대로 보존. 나머지는 이번에 새로 다크 값 부여 */
[data-theme="dark"] {
  --color-wl-layout-bg: rgb(15, 23, 42);
  --color-wl-mobile-subtext: var(--color-text-placeholder);
  --color-wl-shadow-18: rgba(0, 0, 0, 0.4);
  --color-wl-divider: var(--color-border);
  --color-wl-mobile-header-bg: rgba(15, 23, 42, 0.92);
  --color-wl-menu-backdrop: rgba(2, 6, 16, 0.6);
  --color-wl-close-icon: var(--color-text-muted);
  --color-wl-welcome-backdrop: rgba(2, 6, 16, 0.6);
  --color-wl-steps-bg: rgba(108, 99, 255, 0.12);
}

.workspace-layout {
  min-height: 100vh;
  background: var(--color-wl-layout-bg);
}

.workspace-layout__body {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 40px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.workspace-layout__body--chat {
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.workspace-layout__sidebar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 20px;
}

.workspace-layout__voice-slot {
  padding: 10px 12px 4px;
}

.workspace-layout__content {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.workspace-layout__content > * {
  min-height: 0;
}

.workspace-layout__error {
  min-height: 320px;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  box-shadow: 0 10px 32px var(--color-shadow-base);
}

.workspace-layout__error strong {
  font-size: 18px;
  font-weight: 800;
}

.workspace-layout__error p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.workspace-mobile-header,
.workspace-mobile-menu {
  display: none;
}

@media (max-width: 960px) {
  .workspace-layout {
    min-height: 100dvh;
  }

  .workspace-header {
    display: none;
  }

  .workspace-mobile-header {
    position: sticky;
    top: 0;
    z-index: 900;
    height: 58px;
    padding: 0 12px;
    border-bottom: 1px solid var(--color-shadow-strong);
    background: var(--color-wl-mobile-header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 42px;
    align-items: center;
    gap: 6px;
    transition:
      transform 0.24s ease,
      opacity 0.2s ease;
    will-change: transform;
  }

  .workspace-mobile-header--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
  }

  .workspace-mobile-header__back,
  .workspace-mobile-header__menu {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .workspace-mobile-header__menu {
    justify-self: end;
  }

  .workspace-mobile-header__title-wrap {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
  }

  .workspace-mobile-header__title-wrap strong {
    max-width: 100%;
    color: var(--color-text-main);
    font-size: 16px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-mobile-header__title-wrap span {
    max-width: 100%;
    margin-top: 3px;
    color: var(--color-wl-mobile-subtext);
    font-size: 11px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: block;
  }

  .workspace-mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--color-wl-menu-backdrop);
  }

  .workspace-mobile-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    padding: env(safe-area-inset-top) 0
      calc(var(--mobile-bottom-nav-height, 68px) + env(safe-area-inset-bottom));
    background: var(--color-bg-white);
    box-shadow: -18px 0 42px var(--color-wl-shadow-18);
    display: flex;
    flex-direction: column;
  }

  .workspace-mobile-menu__head {
    flex-shrink: 0;
    min-height: 64px;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--color-wl-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .workspace-mobile-menu__head div {
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .workspace-mobile-menu__head strong {
    color: var(--color-text-main);
    font-size: 16px;
    font-weight: 650;
  }

  .workspace-mobile-menu__head span {
    margin-top: 3px;
    color: var(--color-wl-mobile-subtext);
    font-size: 12px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-mobile-menu__close {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--color-wl-close-icon);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
  }

  .workspace-layout__sidebar-wrap {
    display: none;
  }

  .workspace-sidebar--desktop {
    display: none;
  }

  .workspace-mobile-menu__voice {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--color-wl-divider);
  }

  .workspace-layout__body {
    width: min(100%, calc(100% - 24px));
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 0 28px;
  }
}

@media (max-width: 1024px) {
  .workspace-layout--chat {
    height: 100%;
    min-height: 0;
  }

  .workspace-layout--chat .workspace-header {
    display: none;
  }

  .workspace-layout--chat .workspace-layout__body {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    box-sizing: border-box;
  }

  .workspace-layout--chat .workspace-layout__content {
    height: 100%;
    min-height: 0;
  }

  .workspace-layout--chat .workspace-layout__content > * {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 960px) {
  .workspace-layout--chat .workspace-layout__body {
    height: calc(
      100dvh - 58px - var(--mobile-bottom-nav-height, 68px) -
        env(safe-area-inset-bottom)
    );
    grid-template-rows: minmax(0, 1fr);
  }

  .touch-keyboard-open .workspace-layout--chat .workspace-layout__body {
    height: calc(100dvh - 58px);
  }
}

/* ── Gather AI 환영 모달 ── */
.gather-welcome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--color-wl-welcome-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: gather-welcome-fade-in 0.25s ease;
}

@keyframes gather-welcome-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gather-welcome-card {
  width: min(480px, 100%);
  padding: 32px 28px 28px;
  border-radius: 20px;
  background: var(--color-bg-white);
  box-shadow: 0 20px 60px var(--color-wl-shadow-18);
  animation: gather-welcome-slide-up 0.28s ease;
}

@keyframes gather-welcome-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gather-welcome-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.gather-welcome-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-wl-gather-accent), var(--color-wl-gather-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--color-text-on-brand);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.gather-welcome-sender {
  display: flex;
  flex-direction: column;
}

.gather-welcome-sender strong {
  color: var(--color-text-main);
  font-size: 15px;
  font-weight: 700;
}

.gather-welcome-sender span {
  color: var(--color-text-placeholder);
  font-size: 12px;
}

.gather-welcome-body {
  color: var(--color-text-sub);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.gather-welcome-body p {
  margin: 0 0 6px;
}

.gather-welcome-steps {
  margin: 14px 0 0;
  padding: 16px;
  border-radius: 12px;
  background: var(--color-wl-steps-bg);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gather-welcome-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-sub);
  font-size: 13.5px;
  line-height: 1.5;
}

.gather-welcome-steps li .step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-wl-gather-accent);
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.gather-welcome-btn {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-wl-gather-accent), var(--color-wl-gather-accent-2));
  color: var(--color-text-on-brand);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.15s;
}

.gather-welcome-btn:hover {
  opacity: 0.9;
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분) */
[data-theme="dark"] .workspace-layout {
  background: var(--color-wl-layout-bg);
}

/* AI 회의 시작 버튼 */
.workspace-meeting-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 7px 12px;
  margin-top: 6px;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 8px;
  background: rgba(99,102,241,0.1);
  color: var(--primary, #4f46e5);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.workspace-meeting-btn:hover { background: rgba(99,102,241,0.18); }
[data-theme="dark"] .workspace-meeting-btn { color: #a5b4fc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .workspace-meeting-btn { color: #a5b4fc; }
}
/* 앱 설치 안내 — 앱 전반과 같은 회색·보라 팔레트를 쓴다. */
.app-install__backdrop {
  position: fixed;
  z-index: 1200;
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  background: rgba(24, 26, 31, .42);
  backdrop-filter: blur(2px);
}
.app-install {
  box-sizing: border-box;
  width: min(520px, 100%);
  padding: 22px 24px 24px;
  border: 1px solid #e6e7ea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(24, 26, 31, .18);
  color: #24262c;
  font-size: 13.5px;
}
.app-install__head { display: flex; align-items: center; gap: 8px; }
.app-install__head h2 { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 750; }
.app-install__close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f727b;
  cursor: pointer;
}
.app-install__close:hover { background: #f1f2f4; color: #24262c; }
.app-install__close svg { width: 16px; height: 16px; }

.app-install__lead { margin: 10px 0 18px; color: #6f727b; font-size: 13px; line-height: 1.7; }

.app-install__primary {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 16px;
  border: 0;
  border-radius: 11px;
  background: #7c5cd6;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.app-install__primary:hover { background: #6d4dc9; }
.app-install__primary svg { width: 16px; height: 16px; }

.app-install__done {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: #eef7f2;
  color: #2f7d5d;
  font-weight: 700;
}
.app-install__done svg { width: 16px; height: 16px; }

/* QR — 데스크탑에서 휴대폰으로 넘기는 다리 */
.app-install__qr { display: flex; align-items: center; gap: 18px; }
.app-install__qr img,
.app-install__qr-skeleton {
  flex: 0 0 auto;
  width: 148px;
  height: 148px;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  background: #fff;
}
.app-install__qr-skeleton { background: #f3f3f2; }
.app-install__qr-side { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; }
.app-install__qr-side strong { font-size: 13.5px; font-weight: 700; }
.app-install__qr-side p { margin: 0; color: #6f727b; font-size: 12.5px; line-height: 1.65; }
.app-install__qr-side b { color: #24262c; font-weight: 700; }

.app-install__ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #e4e5e9;
  border-radius: 9px;
  background: #fff;
  color: #6f727b;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.app-install__ghost:hover { border-color: #cfd1d8; color: #24262c; }
.app-install__ghost svg { width: 14px; height: 14px; }

.app-install__manual { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f2; }
.app-install__manual-label { display: block; margin-bottom: 10px; color: #8b8e97; font-size: 11px; font-weight: 700; }
.app-install__manual ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.app-install__manual li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4a4d55;
  font-size: 12.5px;
  line-height: 1.6;
}
.app-install__manual li svg { flex: 0 0 auto; width: 15px; height: 15px; color: #7c5cd6; }

[data-theme="dark"] .app-install { border-color: #33363d; background: #24262c; color: #f0f0f2; }
[data-theme="dark"] .app-install__lead,
[data-theme="dark"] .app-install__qr-side p { color: #b9bcc4; }
[data-theme="dark"] .app-install__qr-side b { color: #f0f0f2; }
[data-theme="dark"] .app-install__close:hover { background: #33363d; color: #f0f0f2; }
[data-theme="dark"] .app-install__done { background: #23342c; color: #7fc6a4; }
[data-theme="dark"] .app-install__qr img,
[data-theme="dark"] .app-install__qr-skeleton { border-color: #33363d; }
[data-theme="dark"] .app-install__qr-skeleton { background: #2b2e35; }
[data-theme="dark"] .app-install__ghost { border-color: #3a3d44; background: #2b2e35; color: #b9bcc4; }
[data-theme="dark"] .app-install__manual { border-top-color: #303239; }
[data-theme="dark"] .app-install__manual li { color: #c8cad0; }

@media (max-width: 520px) {
  .app-install__qr { flex-direction: column; align-items: flex-start; }
}
.arky-outline {
  position: absolute;
  inset: 10px auto 10px 10px;
  z-index: 90;
  display: flex;
  width: 292px;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 30, .09);
  border-radius: 18px;
  background: rgba(253, 253, 252, .98);
  box-shadow: 0 16px 44px rgba(28, 30, 38, .08);
  color: #333338;
  transition: width .28s cubic-bezier(.22, 1, .36, 1), padding .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
  /* will-change를 상시 걸면 사이드바가 계속 GPU 레이어로 떠 있어 합성 비용만 든다.
     폭 애니메이션은 0.28초뿐이라 굳이 미리 승격시킬 필요가 없다. */
}
.arky-outline--collapsed { align-items: center; width: 48px; padding: 10px 0; gap: 10px; }
.arky-outline:not(.arky-outline--collapsed) .arky-outline__topbar,
.arky-outline:not(.arky-outline--collapsed) .arky-outline__channel-content,
.arky-outline:not(.arky-outline--collapsed) .arky-outline__footer { animation: arky-outline-content-in .22s ease both; }
@keyframes arky-outline-content-in {
  from { opacity: 0; transform: translateX(-8px); }
  /* transform을 남기지 않고 끝낸다. animation-fill-mode가 both라 translateX(0)을
     그대로 두면 상단바와 채널 목록에 쌓임 맥락이 영구히 남고, 그러면 상단바
     안의 메뉴는 z-index를 아무리 올려도 채널 목록 밑에 깔린다. */
  to { opacity: 1; transform: none; }
}
/* 애니메이션이 도는 동안에도 상단바(그 안의 메뉴)가 목록 위에 오도록. */
.arky-outline__topbar { position: relative; z-index: 2; display: flex; min-height: 52px; align-items: center; justify-content: space-between; padding: 8px 10px; flex: 0 0 auto; }
/* 메뉴가 열리면 아래 채널 목록 위로 올라와야 한다. 메뉴에만 z-index를 주면
   목록 글자가 메뉴 위에 겹쳐 찍혀 "홈으로"조차 읽히지 않는다. */
.arky-outline__brand-wrap { position: relative; z-index: 120; }
.arky-outline__brand-menu {
  display: flex;
  width: 82px;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px 4px 7px;
  border: 1px solid #ececea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 30, 38, .05);
  color: #606064;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.arky-outline__brand-menu:hover { border-color: #dededb; background: #fafaf9; box-shadow: 0 2px 7px rgba(28, 30, 38, .08); }
.arky-outline__brand-menu > svg { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 2.2; }
.arky-outline__brand { display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.arky-outline__brand img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.arky-outline__brand--symbol {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 4px;
  overflow: visible;
  border-radius: 8px;
}
.arky-outline__brand--symbol img { display: block; width: 100%; height: 100%; object-fit: contain; }
.arky-outline__icon-button, .arky-outline__footer button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #717176; cursor: pointer; }
.arky-outline__icon-button:hover, .arky-outline__footer button:hover { background: #f0f0ee; color: #242428; }
.arky-outline__icon-button svg, .arky-outline__footer svg { width: 17px; height: 17px; }
.arky-outline__menu { position: absolute; top: 44px; left: 0; z-index: 80; width: 250px; padding: 9px; border: 1px solid #e7e7e4; border-radius: 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 20px 52px rgba(30, 31, 37, .16); }
.arky-outline__menu button { display: flex; width: 100%; height: 47px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: #3e3e43; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.arky-outline__menu button:hover { background: #f3f3f1; }
.arky-outline__menu-label { min-width: 0; display: inline-flex; align-items: center; gap: 9px; }
.arky-outline__menu-label > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #737378; }
.arky-outline__menu-meta { display: inline-flex; align-items: center; gap: 8px; color: #929297; font-size: 12px; white-space: nowrap; }
.arky-outline__menu-meta svg { width: 17px; height: 17px; color: #55555a; }
.arky-outline__menu-meta svg { transition: transform .16s ease; }
.arky-outline__menu-meta svg.is-open { transform: rotate(90deg); }
.arky-outline__submenu { margin: -2px 0 4px; padding: 3px 5px 5px 14px; }
.arky-outline__menu .arky-outline__submenu button { height: 38px; padding: 0 10px; color: #65656a; font-size: 13px; }
.arky-outline__menu .arky-outline__submenu button svg { width: 16px; height: 16px; color: #5550aa; }
.arky-outline__menu-separator { height: 1px; margin: 7px 2px; background: #e8e8e5; }
.arky-outline__memory-tabs { display: flex; align-items: center; justify-content: space-between; padding: 2px 14px 12px; flex: 0 0 auto; }
.arky-outline__memory-tabs > div { display: flex; padding: 3px; border-radius: 9px; background: #f0f0ee; }
.arky-outline__memory-tabs button { height: 31px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: #818186; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.arky-outline__memory-tabs button.is-active { background: #fff; color: #242428; box-shadow: 0 1px 3px rgba(20, 20, 25, .09); }
.arky-outline__memory-tabs > svg { width: 20px; color: #77777c; }
.arky-outline__memory-area { max-height: 44%; min-height: 128px; overflow-y: auto; padding: 0 12px 12px; border-bottom: 1px solid #e8e8e5; scrollbar-width: thin; }
.arky-outline__project-row { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; color: #75757a; }
.arky-outline__project-row strong { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.arky-outline__project-row svg { width: 17px; flex: 0 0 auto; }
.arky-outline__tree { display: flex; flex-direction: column; gap: 2px; }
.arky-outline__tree-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); min-height: 40px; align-items: center; border-radius: 8px; }
.arky-outline__tree-row:hover, .arky-outline__tree-row.is-selected { background: #f0f0ee; }
.arky-outline__chevron { display: grid; width: 30px; height: 38px; place-items: center; padding: 0; border: 0; background: transparent; color: #87878b; cursor: pointer; }
.arky-outline__chevron svg { width: 16px; }
.arky-outline__tree-label { display: flex; min-width: 0; height: 40px; align-items: center; gap: 7px; padding: 0 8px 0 0; border: 0; background: transparent; color: #414146; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.arky-outline__tree-label span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arky-outline__tree-label small { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: #e8e8e6; color: #85858a; font-size: 10px; }
.arky-outline__children { margin-left: 15px; padding: 2px 0 3px 18px; border-left: 1px solid #dededb; }
.arky-outline__child { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 6px; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent; color: #5b5b60; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.arky-outline__child:hover, .arky-outline__child.is-selected { background: #f0f0ee; color: #242428; }
.arky-outline__child svg { width: 14px; flex: 0 0 auto; color: #aaa; }
.arky-outline__child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arky-outline__details { padding: 10px 8px; }
.arky-outline__details > span { color: #99999d; font-size: 10px; font-weight: 750; }
.arky-outline__details h2 { margin: 7px 0; color: #29292d; font-size: 15px; line-height: 1.45; }
.arky-outline__details p, .arky-outline__empty { margin: 8px; color: #8a8a8f; font-size: 12px; line-height: 1.55; }
.arky-outline__channel-content { flex: 1; min-height: 150px; overflow: hidden; padding: 8px 12px 2px; }
.arky-outline__channel-content > .workspace-sidebar { height: 100%; padding: 0; overflow-y: auto; border: 0; background: transparent; }
.arky-outline__channel-content .workspace-sidebar__section-header { padding-right: 4px; padding-left: 6px; }
.arky-outline__channel-content .workspace-sidebar__section-toggle { min-height: 38px; }
.arky-outline__channel-content .workspace-sidebar__title { font-size: 11px; letter-spacing: 0; text-transform: none; }
.arky-outline__channel-content .workspace-sidebar__link, .arky-outline__channel-content .workspace-sidebar__channel-link { min-height: 42px; border-radius: 8px; font-size: 13px; }
.arky-outline__channel-content .workspace-sidebar__link--active, .arky-outline__channel-content .workspace-sidebar__channel-link.workspace-sidebar__link--active { background: #f0f0ee; color: #29292d; }
.arky-outline__channel-content .workspace-sidebar__link--active::before, .arky-outline__channel-content .workspace-sidebar__channel-link.workspace-sidebar__link--active::before { display: none; }
.arky-outline__footer { display: flex; gap: 4px; padding: 10px 14px 14px; flex: 0 0 auto; }
[data-theme="dark"] .arky-outline { border-color: #383a40; background: rgba(31, 33, 38, .98); color: #e4e4e7; }
[data-theme="dark"] .arky-outline__brand-menu { border-color: #41434a; background: #282a30; color: #d8d9dd; box-shadow: none; }
[data-theme="dark"] .arky-outline__brand-menu:hover { border-color: #555860; background: #303239; }
[data-theme="dark"] .arky-outline__menu { border-color: #41434a; background: #282a30; }
[data-theme="dark"] .arky-outline__menu button { color: #e4e4e7; }
[data-theme="dark"] .arky-outline__menu button:hover { background: #35373e; }
[data-theme="dark"] .arky-outline__menu .arky-outline__submenu button { color: #c6c7cc; }
[data-theme="dark"] .arky-outline__memory-tabs > div, [data-theme="dark"] .arky-outline__tree-row:hover, [data-theme="dark"] .arky-outline__tree-row.is-selected, [data-theme="dark"] .arky-outline__child:hover, [data-theme="dark"] .arky-outline__child.is-selected { background: #2c2e34; }
[data-theme="dark"] .arky-outline__memory-tabs button.is-active { background: #3a3c43; color: #f0f0f2; }
[data-theme="dark"] .arky-outline__memory-area { border-bottom-color: #3a3c43; }
[data-theme="dark"] .arky-outline__tree-label, [data-theme="dark"] .arky-outline__child, [data-theme="dark"] .arky-outline__details h2 { color: #e4e4e7; }
[data-theme="dark"] .arky-outline__channel-content .workspace-sidebar__link--active, [data-theme="dark"] .arky-outline__channel-content .workspace-sidebar__channel-link.workspace-sidebar__link--active { background: #2c2e34; color: #f0f0f2; }
@media (max-width: 960px) {
  .arky-outline { inset: 8px auto 8px 8px; width: min(82vw, 292px); }
  .arky-outline--collapsed { width: 48px; }

  /* 팀공간 사이드바는 좁은 화면에서 채널 구역을 감춘다 — 거기서는 채널을
     화면 아래 가로줄로 대신 보여주기 때문이다. 그런데 이 패널은 채널을 보려고
     여는 자리라 감추면 열어도 텅 빈 칸만 나온다. 여기서는 도로 편다. */
  .arky-outline__channel-content .workspace-sidebar__section--channels { display: block; }
  .arky-outline__channel-content .workspace-sidebar__section-header,
  .arky-outline__channel-content .workspace-sidebar__section-label { display: flex; }

  /* 가로로 밀어 보는 줄이 아니라 세로 목록으로 되돌린다. */
  .arky-outline__channel-content .workspace-sidebar__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
  }
  .arky-outline__channel-content .workspace-sidebar__link,
  .arky-outline__channel-content .workspace-sidebar__channel-link {
    width: 100%;
    flex: 0 0 auto;
  }
}
.gip-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.gip-panel--embedded {
  width: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ── 헤더 ── */
.gip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.gip-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.gip-header-right { display: flex; align-items: center; gap: 4px; }

.gip-icon-btn {
  width: 28px; height: 28px;
  border: none; background: transparent;
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280; transition: background 0.12s, color 0.12s;
}
.gip-icon-btn:hover { background: #f3f4f6; color: #374151; }

/* ── 본문 ── */
.gip-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── 생성 버튼 ── */
.gip-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gip-create-btn:hover { border-color: #6272c0; background: #f0f1f9; color: #4a5aac; }

/* ── 생성 폼 ── */
.gip-form {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gip-form-row { display: flex; flex-direction: column; gap: 6px; }

.gip-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.gip-input {
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1f2937;
  outline: none;
  background: #fff;
  transition: border-color 0.15s;
}
.gip-input:focus { border-color: #6272c0; }

.gip-num-row { display: flex; gap: 6px; flex-wrap: wrap; }

.gip-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
  transition: all 0.12s;
}
.gip-chip:hover { border-color: #6272c0; color: #6272c0; }
.gip-chip.is-active { background: #1a1f3a; border-color: #1a1f3a; color: #fff; }

.gip-section-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gip-check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}
.gip-check-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: #6272c0; }

.gip-hint { font-size: 11px; color: #9ca3af; margin: 2px 0 0; }

.gip-form-actions { display: flex; gap: 8px; }

/* ── 버튼 ── */
.gip-btn {
  flex: 1; padding: 9px; border-radius: 9px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.gip-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gip-btn--primary { background: #1a1f3a; color: #fff; }
.gip-btn--primary:hover:not(:disabled) { background: #232b4e; }
.gip-btn--ghost { background: #f3f4f6; color: #374151; }
.gip-btn--ghost:hover { background: #e5e7eb; }

/* ── 목록 ── */
.gip-list { display: flex; flex-direction: column; gap: 8px; }

.gip-invite-item {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gip-invite-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gip-code-box { display: flex; align-items: center; gap: 8px; min-width: 0; }

.gip-code {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #1a1f3a;
  letter-spacing: 2px;
}

.gip-code-label {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.gip-invite-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.gip-copy-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 7px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.gip-copy-btn:hover { border-color: #6272c0; color: #6272c0; }
.gip-copy-btn.is-copied { border-color: #22c55e; color: #22c55e; background: #f0fdf4; }

.gip-revoke-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fee2e2; border-radius: 7px;
  background: #fff; color: #dc2626;
  cursor: pointer; transition: background 0.15s;
}
.gip-revoke-btn:hover { background: #fee2e2; }

/* ── 메타 정보 ── */
.gip-invite-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #9ca3af;
}

.gip-active-dot { color: #22c55e; font-weight: 600; }

.gip-sections {
  color: #6272c0;
  background: #f0f1f9;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
}

/* ── 빈 상태 ── */
.gip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: #9ca3af;
  font-size: 13px;
}

/* ── 로딩 ── */
.gip-loading { display: flex; justify-content: center; padding: 24px; }
.gip-spinner {
  width: 24px; height: 24px;
  border: 2.5px solid #e5e7eb;
  border-top-color: #6272c0;
  border-radius: 50%;
  animation: gip-spin 0.7s linear infinite;
}
@keyframes gip-spin { to { transform: rotate(360deg); } }
.zone-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #e8edf3;
  border-radius: 0 22px 22px 0;
  box-shadow: -8px 0 28px rgba(15, 23, 42, .08);
  animation: zone-panel-slide-in .2s ease;
  overflow: hidden;
}

@keyframes zone-panel-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* 사이드바 인라인 모드 — 절대 위치/그림자/애니메이션 제거 */
.zone-panel--sidebar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  animation: zone-panel-sidebar-in .18s ease;
  flex: 1;
}

@keyframes zone-panel-sidebar-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* header */
.zone-panel__header {
  flex-shrink: 0;
  padding: 16px 16px 14px;
  background: color-mix(in srgb, var(--zone-accent, #6366f1) 8%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--zone-accent, #6366f1) 16%, #e8edf3);
}

.zone-panel__header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-panel__zone-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--zone-accent, #6366f1);
}

.zone-panel__zone-name {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #111827;
  letter-spacing: -.02em;
}

.zone-panel__zone-meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: #697386;
  font-weight: 700;
}

.zone-panel__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(0,0,0,.06);
  color: #697386;
  cursor: pointer;
}

.zone-panel__close:hover { background: rgba(0,0,0,.10); color: #111827; }

/* tabs */
.zone-panel__tabs {
  flex-shrink: 0;
  display: flex;
  padding: 0;
  border-bottom: 1px solid #eef2f7;
}

.zone-panel__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #697386;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .14s, border-color .14s;
}

.zone-panel__tab.is-active {
  color: var(--zone-accent, #6366f1);
  border-bottom-color: var(--zone-accent, #6366f1);
}

/* body */
.zone-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 18px;
}

/* embedded GuestInvitePanel은 body padding 무시하고 꽉 채움 */
.zone-panel__body .gip-panel--embedded {
  margin: -14px -14px -18px;
  width: calc(100% + 28px);
}

.zone-panel__empty {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  font-weight: 700;
}

/* members */
.zone-panel__members { display: flex; flex-direction: column; gap: 10px; }

.zone-panel__member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-panel__member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.zone-panel__member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eef2f7;
}

.zone-panel__presence-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
}

.zone-panel__presence {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: default;
}

.zone-panel__presence--online  { background: #22c55e; }
.zone-panel__presence--away    { background: #f59e0b; }
.zone-panel__presence--offline { background: #d1d5db; }

.zone-panel__presence-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 6px;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .15s;
}

.zone-panel__presence-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

/* 데스크톱: hover */
.zone-panel__presence-wrap:hover .zone-panel__presence-tooltip {
  opacity: 1;
}

/* 모바일 longpress: JS로 추가되는 클래스 */
.zone-panel__presence-tooltip--force {
  opacity: 1;
}

.zone-panel__member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zone-panel__member-info strong {
  font-size: 13px;
  font-weight: 850;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-panel__member-info span {
  font-size: 11px;
  color: #697386;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* todos */
.zone-panel__todos { display: flex; flex-direction: column; gap: 14px; }

.zone-panel__todo-group-label {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 900;
  color: #9ca3af;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.zone-panel__todo-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2937;
}

.zone-panel__todo-item--done {
  opacity: .55;
  text-decoration: line-through;
  color: #697386;
}

.zone-panel__todo-icon { flex-shrink: 0; margin-top: 1px; color: #9ca3af; }

.zone-panel__todo-assignee {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  color: #9ca3af;
  white-space: nowrap;
}

/* ai */
.zone-panel__ai-desc {
  margin: 0 0 12px;
  font-size: 12px;
  color: #697386;
  font-weight: 700;
  line-height: 1.5;
}

.zone-panel__ai-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #f8fafc;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.zone-panel__ai-btn:hover { background: #f0f4ff; border-color: #c7d2fe; }

.zone-panel__ai-btn > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zone-panel__ai-btn strong { font-size: 12.5px; font-weight: 850; }
.zone-panel__ai-btn span { font-size: 11px; color: #697386; font-weight: 700; }

/* 2순위: AI 팀원 카드 */
.zone-panel__ai-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  margin-bottom: 14px;
}

.zone-panel__ai-member-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zone-panel__ai-bot-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  animation: bot-float 3s ease-in-out infinite;
}

@keyframes bot-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

.zone-panel__ai-member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.zone-panel__ai-member-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zone-panel__ai-member-name-row strong {
  font-size: 13px;
  font-weight: 850;
  color: #111827;
}

.zone-panel__ai-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: ai-dot-pulse 2s ease-in-out infinite;
}

@keyframes ai-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%       { box-shadow: 0 0 0 3px rgba(34,197,94,.0); }
}

.zone-panel__ai-member-info > span {
  font-size: 11px;
  color: #7c3aed;
  font-weight: 700;
}

/* AI 작업 목록 */
.zone-panel__ai-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-panel__ai-task-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.zone-panel__ai-task-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.zone-panel__ai-task-title {
  font-size: 12px;
  font-weight: 750;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.zone-panel__ai-task-pct {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  color: #7c3aed;
}

.zone-panel__ai-progress-track {
  height: 5px;
  border-radius: 99px;
  background: #ede9fe;
  overflow: hidden;
}

.zone-panel__ai-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  animation: ai-progress-shimmer 2s ease-in-out infinite;
}

@keyframes ai-progress-shimmer {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}

/* online count */
.zone-panel__online-count { color: #22c55e; font-weight: 800; }

/* member name row */
.zone-panel__member-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* status text */
.zone-panel__status-text {
  font-size: 11px;
  color: #6366f1;
  font-weight: 700;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* status edit button */
.zone-panel__status-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: color .14s, background .14s;
}
.zone-panel__status-edit-btn:hover { color: #6366f1; background: #eef2ff; }

.zone-panel__char-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: #ede9fe;
  font-size: 12px;
  cursor: pointer;
  transition: background .14s, transform .1s;
  line-height: 1;
}
.zone-panel__char-edit-btn:hover { background: #ddd6fe; transform: scale(1.1); }

/* status input row */
.zone-panel__status-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.zone-panel__status-input {
  flex: 1;
  min-width: 0;
  padding: 3px 7px;
  border: 1.5px solid #c7d2fe;
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #1f2937;
  background: #f5f7ff;
  outline: none;
}
.zone-panel__status-input:focus { border-color: #6366f1; background: #fff; }
.zone-panel__status-input::placeholder { color: #c4b5fd; }

.zone-panel__status-save-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}
.zone-panel__status-save-btn:hover { background: #4f46e5; }

/* ── 채팅 탭 ── */
.zone-panel__chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.zone-panel__chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-panel__chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.zone-panel__chat-msg.is-me {
  flex-direction: row-reverse;
}

.zone-panel__chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.zone-panel__chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 70%;
}

.zone-panel__chat-msg.is-me .zone-panel__chat-bubble-wrap {
  align-items: flex-end;
}

.zone-panel__chat-name {
  font-size: 10px;
  font-weight: 800;
  color: #6b7280;
  padding-left: 2px;
}

.zone-panel__chat-bubble {
  padding: 7px 11px;
  border-radius: 14px 14px 14px 4px;
  background: #f3f4f6;
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}

.zone-panel__chat-msg.is-me .zone-panel__chat-bubble {
  background: #6366f1;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

.zone-panel__chat-time {
  font-size: 9px;
  color: #9ca3af;
  padding: 0 2px;
}

/* 입력창 */
.zone-panel__chat-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #e8edf3;
}

.zone-panel__chat-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #1f2937;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  outline: none;
}

.zone-panel__chat-input:focus {
  border-color: #6366f1;
  background: #fff;
}

.zone-panel__chat-input::placeholder { color: #9ca3af; }

.zone-panel__chat-send {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.zone-panel__chat-send:hover { background: #4f46e5; }
.zone-panel__chat-send:disabled { background: #e2e8f0; color: #94a3b8; cursor: default; }

/* ── 섹션 레이블 ── */
.zone-panel__section-label {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.zone-panel__members .zone-panel__section-label:first-child { margin-top: 0; }

/* ── 역할 배지 ── */
.zone-panel__role-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: #f1f5f9;
  color: #64748b;
  flex-shrink: 0;
}
.zone-panel__role-badge--owner {
  background: #ede9fe;
  color: #7c3aed;
}
.zone-panel__role-badge--modifier {
  background: #dbeafe;
  color: #1d4ed8;
}

/* ── 현재 작업 섹션 ── */
.zone-panel__current-tasks {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.zone-panel__current-task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  margin-bottom: 4px;
}

.zone-panel__current-task-text {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-panel__current-task-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  font-size: 10px;
  font-weight: 800;
}


.zone-panel__ai-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.zone-panel__ai-feature-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(124,58,237,0.15);
  background: #faf5ff;
  cursor: pointer;
  text-align: left;
  transition: background .12s, box-shadow .12s;
}
.zone-panel__ai-feature-btn:hover {
  background: #ede9fe;
  box-shadow: 0 2px 8px rgba(124,58,237,0.15);
}

.zone-panel__ai-feature-icon {
  font-size: 18px;
  line-height: 1;
}
.zone-panel__ai-feature-label {
  font-size: 12px;
  font-weight: 800;
  color: #5b21b6;
}
.zone-panel__ai-feature-desc {
  font-size: 10px;
  color: #7c3aed;
  opacity: 0.7;
}

.zone-panel__ai-ask-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c5cfc, #6366f1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .28);
  transition: box-shadow .15s, transform .1s;
}
.zone-panel__ai-ask-btn:hover {
  box-shadow: 0 6px 18px rgba(99, 102, 241, .38);
  transform: translateY(-1px);
}

.zone-panel__ai-member-role {
  font-size: 11px;
  color: #7c3aed;
  font-weight: 600;
}

.zone-panel__ai-status-box {
  margin: 8px 0;
  padding: 10px 12px;
  background: #f5f3ff;
  border-radius: 10px;
  border: 1px solid rgba(124,58,237,0.12);
}

.zone-panel__ai-status-summary {
  font-size: 12px;
  color: #4c1d95;
  line-height: 1.5;
  margin: 0 0 6px;
}

.zone-panel__ai-alert {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 7px;
  padding: 6px 8px;
}

.zone-panel__ai-alert-icon {
  flex-shrink: 0;
}

/* ── AI 봇 아바타 (dicebear 이미지 대체) ── */
.zone-panel__ai-bot-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6c63ff, #4a90e2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* ── 회의 탭 (공용 라운지) ── */
.zone-panel__meeting {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.zone-panel__meeting-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 20px 20px;
  background: linear-gradient(160deg, #f0f4ff 0%, #e8f0ff 100%);
  border-bottom: 1px solid #dde6f5;
}

.zone-panel__meeting-cam-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4361ee, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(67, 97, 238, 0.3);
  margin-bottom: 4px;
}

.zone-panel__meeting-hero-title {
  margin: 0;
  font-size: 14px;
  font-weight: 850;
  color: #111827;
  letter-spacing: -0.02em;
}

.zone-panel__meeting-hero-sub {
  margin: 0;
  font-size: 11.5px;
  color: #697386;
  line-height: 1.55;
  text-align: center;
}

.zone-panel__meeting-start-btn {
  margin-top: 6px;
  padding: 9px 20px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4361ee, #7c3aed);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(67, 97, 238, 0.28);
  transition: opacity 0.15s, transform 0.1s;
}

.zone-panel__meeting-start-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.zone-panel__meeting-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #eef2f7;
  background: #fafbff;
}

.zone-panel__meeting-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #374151;
  letter-spacing: 0.01em;
}

.zone-panel__meeting-label span { color: #ef4444; }
.zone-panel__meeting-opt { color: #9ca3af; font-weight: 600; }

.zone-panel__meeting-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #dde6f5;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: #111827;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.55;
  transition: border-color 0.15s;
}

.zone-panel__meeting-textarea:focus { border-color: #6366f1; }

.zone-panel__meeting-create-btn {
  padding: 9px 0;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #6c63ff, #4a90e2);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}

.zone-panel__meeting-create-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.zone-panel__meeting-create-btn:not(:disabled):hover { opacity: 0.9; }

.zone-panel__meeting-history {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.zone-panel__meeting-item {
  border: 1px solid #eef2f7;
  border-radius: 10px;
  overflow: hidden;
}

.zone-panel__meeting-item-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  background: #fafbff;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.zone-panel__meeting-item-head:hover { background: #f0f4ff; }

.zone-panel__meeting-item-agenda {
  font-size: 12.5px;
  font-weight: 750;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zone-panel__meeting-item-date {
  font-size: 10.5px;
  color: #9ca3af;
  font-weight: 600;
}

.zone-panel__meeting-item-body {
  padding: 10px 12px;
  border-top: 1px solid #eef2f7;
  background: #fff;
}

.zone-panel__meeting-minutes {
  margin: 0;
  font-size: 11.5px;
  color: #374151;
  line-height: 1.65;
  white-space: pre-wrap;
  font-family: inherit;
}

/* 화상 회의 참여 버튼 */
.zone-panel__meeting-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.3);
  transition: opacity 0.15s, transform 0.1s;
}

.zone-panel__meeting-video-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 화상 회의 전체화면 오버레이 */
.zone-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 19000;
  display: flex;
  flex-direction: column;
  background: #0a0a14;
}

.zone-video-header {
  flex-shrink: 0;
  height: 48px;
  padding: 0 16px;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.zone-video-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e5e7eb;
  font-size: 14px;
  font-weight: 700;
}

.zone-video-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  cursor: pointer;
  transition: background 0.15s;
}

.zone-video-close:hover { background: rgba(239, 68, 68, 0.7); }

.zone-video-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #000;
}

/* ── 게스트 라운지 공유 내용 탭 ─────────────────────── */
.zone-panel__guest-shared {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 10px;
}

.zone-panel__guest-shared-hint {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 4px;
}

.zone-panel__guest-shared-textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font: inherit;
  font-size: 12.5px;
  color: #1e293b;
  background: #f8fafc;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  line-height: 1.6;
  transition: border-color 0.15s;
}

.zone-panel__guest-shared-textarea:focus { border-color: #6366f1; background: #fff; }

.zone-panel__guest-shared-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zone-panel__guest-shared-count {
  font-size: 11px;
  color: #94a3b8;
}

.zone-panel__guest-shared-save {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: #6366f1;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.zone-panel__guest-shared-save:hover { background: #4f46e5; }

/* ── 게스트 라운지 공유 내용 탭 (주간 리포트 + 포트폴리오) ─── */
.zone-panel__guest-shared {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 14px;
}

/* 주간 리포트 */
.zone-panel__guest-report-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.zone-panel__guest-report-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}
.zone-panel__guest-report-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.zone-panel__guest-report-date {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}
.zone-panel__guest-report-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  flex-shrink: 0;
}
.zone-panel__guest-report-badge--high   { background: #dcfce7; color: #15803d; }
.zone-panel__guest-report-badge--low    { background: #fee2e2; color: #dc2626; }
.zone-panel__guest-report-badge--normal { background: #e0e7ff; color: #4338ca; }
.zone-panel__guest-report-body {
  padding: 0 10px 10px;
  border-top: 1px solid #e2e8f0;
}
.zone-panel__guest-report-body p {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.55;
  margin: 4px 0 0;
}

/* 팀원 포트폴리오 */
.zone-panel__guest-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zone-panel__guest-portfolio-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
}
.zone-panel__guest-portfolio-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.zone-panel__guest-portfolio-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.zone-panel__guest-portfolio-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: #1e2a3a;
}
.zone-panel__guest-portfolio-body {
  padding: 0 10px 10px;
  border-top: 1px solid #e2e8f0;
}
.zone-panel__guest-portfolio-content {
  font: inherit;
  font-size: 11.5px;
  color: #334155;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 6px 0 0;
}

/* ── 링크 탭 ─────────────────────────────────────── */
.zone-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.zone-links__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px 20px;
  text-align: center;
}

.zone-links__empty-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 2px;
}

.zone-links__empty-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #374151;
}

.zone-links__empty-sub {
  margin: 0;
  font-size: 11.5px;
  color: #9ca3af;
  line-height: 1.55;
  white-space: pre-line;
}

.zone-links__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zone-links__item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e8edf3;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.zone-links__item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, .12);
}

.zone-links__item-anchor {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  text-decoration: none;
  color: inherit;
}

.zone-links__item-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  width: 24px;
  text-align: center;
}

.zone-links__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.zone-links__item-title {
  font-size: 12.5px;
  font-weight: 750;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-links__item-url {
  font-size: 10.5px;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-links__item-ext {
  flex-shrink: 0;
  color: #9ca3af;
}

.zone-links__item-del {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  padding: 0 6px;
  border: 0;
  border-left: 1px solid #e8edf3;
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
  align-self: stretch;
  transition: color .14s, background .14s;
}

.zone-links__item-del:hover {
  color: #ef4444;
  background: #fff1f2;
}

.zone-links__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.zone-links__add-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f5f3ff;
}

.zone-links__form {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  background: #f5f7ff;
}

.zone-links__input {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}

.zone-links__input:focus {
  border-color: #6366f1;
}

.zone-links__input::placeholder {
  color: #9ca3af;
}

.zone-links__error {
  margin: 0;
  font-size: 11.5px;
  color: #ef4444;
  font-weight: 600;
}

.zone-links__form-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.zone-links__btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background .14s, opacity .14s;
}

.zone-links__btn--cancel {
  background: #f1f5f9;
  color: #64748b;
}

.zone-links__btn--cancel:hover { background: #e2e8f0; }

.zone-links__btn--save {
  background: #6366f1;
  color: #fff;
}

.zone-links__btn--save:hover:not(:disabled) { background: #4f46e5; }
.zone-links__btn--save:disabled { opacity: 0.5; cursor: not-allowed; }
/* 이 파일 전용 로컬 토큰(6-B2 WS-2) */
[data-theme="dark"] {
  --color-myt-modal-shadow: rgba(0, 0, 0, 0.5);
  --color-myt-add-input-focus-border: rgb(91, 79, 207);
  --color-myt-item-active-bg: rgb(31, 26, 0);
  --color-myt-item-active-border: rgb(245, 158, 11);
  --color-myt-tag-who-bg: rgb(15, 34, 51);
  --color-myt-delete-hover-bg: rgba(220, 38, 38, 0.12);
  --color-myt-progress-on-bg: rgba(245, 158, 11, 0.12);
}

/* ── 백드롭 ──────────────────────────────────────────────────────────────── */
.myt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--color-backdrop);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: myt-fade-in 0.18s ease both;
}
@keyframes myt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 모달 카드 ──────────────────────────────────────────────────────────── */
.myt-modal {
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: var(--color-bg-white);
  border-radius: 18px;
  box-shadow: 0 24px 64px var(--color-shadow-primary-hover), 0 4px 16px var(--color-shadow-accent-glow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: myt-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes myt-pop {
  from { opacity: 0; transform: scale(0.9) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── 헤더 ────────────────────────────────────────────────────────────────── */
.myt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-bg-soft);
}
.myt-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-main);
}
.myt-close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-bg-soft);
  border-radius: 50%;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.myt-close:hover { background: var(--color-border); color: var(--color-text-sub); }

/* ── 탭 ──────────────────────────────────────────────────────────────────── */
.myt-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--color-bg-soft);
}
.myt-tab {
  position: relative;
  padding: 8px 14px;
  border: none;
  background: none;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.myt-tab:hover { color: var(--color-text-sub); background: var(--color-accent-soft); }
.myt-tab--active {
  color: var(--color-brand-deep);
  background: var(--color-primary-soft);
  font-weight: 600;
}
.myt-tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 2px;
  background: var(--color-brand-deep);
  border-radius: 2px 2px 0 0;
}
.myt-tab-badge {
  background: var(--color-brand-deep);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}

/* ── 바디 ────────────────────────────────────────────────────────────────── */
.myt-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px 14px;
}

/* ── 개인 메모 추가 폼 ──────────────────────────────────────────────────── */
.myt-add-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.myt-add-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.12s;
}
.myt-add-input:focus { border-color: var(--color-brand-deep); }
.myt-add-btn {
  padding: 8px 16px;
  background: var(--color-brand-deep);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.myt-add-btn:hover { background: var(--color-accent-hover); }

/* ── 목록 ────────────────────────────────────────────────────────────────── */
.myt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── 아이템 ──────────────────────────────────────────────────────────────── */
.myt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  transition: background 0.1s;
}
.myt-item:hover { background: var(--color-accent-soft); }
.myt-item--done .myt-item-title {
  text-decoration: line-through;
  color: var(--color-text-placeholder);
}

.myt-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-muted);
  border-radius: 6px;
  background: var(--color-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
  margin-top: 1px;
}
.myt-check:hover { border-color: var(--color-brand-deep); }
.myt-check--done {
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
}
.myt-check-mark {
  color: var(--color-text-on-brand);
  font-size: 11px;
  line-height: 1;
}

.myt-item-body {
  flex: 1;
  min-width: 0;
}
.myt-item-title {
  font-size: 13.5px;
  color: var(--color-text-main);
  line-height: 1.4;
  word-break: break-word;
}
.myt-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.myt-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}
.myt-tag--zone    { background: var(--color-accent-soft-hover); color: var(--color-brand-deep); }
.myt-tag--who     { background: var(--color-accent-soft-hover); color: var(--color-primary); }
.myt-tag--date    { background: var(--color-status-pending-soft); color: var(--color-danger-strong); }

.myt-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 11px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.myt-delete:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* ── 제목 행 ──────────────────────────────────────────────────────────────── */
.myt-item-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ── 진행 중 배지 ─────────────────────────────────────────────────────────── */
.myt-in-progress-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--color-warning);
  color: var(--color-text-inverse);
  letter-spacing: 0.02em;
}

/* ── 진행 중 버튼 ─────────────────────────────────────────────────────────── */
.myt-progress-btn {
  flex-shrink: 0;
  padding: 3px 10px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  align-self: center;
}
.myt-progress-btn:hover:not(:disabled) {
  border-color: var(--color-warning);
  color: var(--color-type-smallgroup-soft);
  background: var(--color-status-pending-soft);
}
.myt-progress-btn--on {
  border-color: var(--color-warning);
  background: var(--color-status-pending-soft);
  color: var(--color-type-smallgroup-soft);
  font-weight: 600;
}
.myt-progress-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.myt-item--active {
  background: var(--color-danger-soft);
  border-left: 3px solid var(--color-warning);
  padding-left: 5px;
}

/* ── 빈 상태 ─────────────────────────────────────────────────────────────── */
.myt-empty {
  text-align: center;
  color: var(--color-text-placeholder);
  font-size: 13px;
  padding: 32px 0;
}

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-2) */

[data-theme="dark"] .myt-modal {
  box-shadow: 0 24px 64px var(--color-myt-modal-shadow);
}

[data-theme="dark"] .myt-header {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .myt-close {
  background: var(--color-bg-elevated-dark);
}

[data-theme="dark"] .myt-close:hover {
  color: var(--color-text-main);
}

[data-theme="dark"] .myt-tabs {
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .myt-tab {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .myt-tab:hover {
  color: var(--color-text-muted);
  background: var(--color-bg-sunken-dark);
}

[data-theme="dark"] .myt-tab--active {
  color: var(--color-brand-badge);
  background: var(--color-brand-purple-soft-dark);
}

[data-theme="dark"] .myt-add-input {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

[data-theme="dark"] .myt-add-input:focus {
  border-color: var(--color-myt-add-input-focus-border);
}

[data-theme="dark"] .myt-item:hover {
  background: var(--color-bg-sunken-dark);
}

[data-theme="dark"] .myt-item--active {
  background: var(--color-myt-item-active-bg);
  border-left-color: var(--color-myt-item-active-border);
}

[data-theme="dark"] .myt-check {
  background: var(--color-bg-elevated-dark);
  border-color: var(--color-border-muted);
}

[data-theme="dark"] .myt-item--done .myt-item-title {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .myt-tag--zone {
  background: var(--color-brand-purple-soft-dark);
  color: var(--color-brand-badge);
}

[data-theme="dark"] .myt-tag--who {
  background: var(--color-myt-tag-who-bg);
  color: var(--color-brand-strong);
}

[data-theme="dark"] .myt-tag--date {
  background: var(--color-myt-item-active-bg);
  color: var(--color-status-pending);
}

[data-theme="dark"] .myt-delete:hover {
  background: var(--color-myt-delete-hover-bg);
}

[data-theme="dark"] .myt-progress-btn {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .myt-progress-btn--on {
  background: var(--color-myt-progress-on-bg);
  color: var(--color-status-pending);
}

[data-theme="dark"] .myt-empty {
  color: var(--color-text-muted);
}
:root {
  --color-wim-backdrop: rgba(15, 23, 42, 0.45);
  --color-wim-panel-shadow: rgba(15, 23, 42, 0.22);
  --color-wim-copy-hover: rgb(59, 82, 230);
  --color-wim-revoke-hover-border: rgb(252, 165, 165);
}

[data-theme="dark"] {
  --color-wim-backdrop: rgba(2, 6, 16, 0.6);
  --color-wim-panel-shadow: rgba(0, 0, 0, 0.4);
  --color-wim-copy-hover: rgb(91, 118, 255);
  --color-wim-revoke-hover-border: var(--color-danger);
}

.wim-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-wim-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: wim-fade 0.16s ease both;
}
@keyframes wim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wim-panel {
  width: 100%;
  max-width: 440px;
  background: var(--color-bg-white);
  border-radius: 20px;
  box-shadow: 0 24px 64px var(--color-wim-panel-shadow);
  overflow: hidden;
  animation: wim-slide 0.2s ease both;
}
@keyframes wim-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wim-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--color-border);
}
.wim-header-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wim-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.wim-title {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-main);
}
.wim-sub {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-placeholder);
  line-height: 1.5;
}
.wim-close {
  width: 30px; height: 30px;
  border: none; border-radius: 8px;
  background: var(--color-border); color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.13s;
}
.wim-close:hover { background: var(--color-border); }

.wim-body {
  padding: 20px 22px;
}
.wim-loading {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.wim-spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand-icon);
  border-radius: 50%;
  animation: wim-spin 0.7s linear infinite;
}
@keyframes wim-spin { to { transform: rotate(360deg); } }
@keyframes wim-spin-icon { to { transform: rotate(360deg); } }
.wim-spin { animation: wim-spin-icon 0.7s linear infinite; }

.wim-link-box {
  background: var(--color-bg-soft);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
  overflow: hidden;
}
.wim-link-text {
  font-size: 12.5px;
  color: var(--color-brand-icon);
  word-break: break-all;
  font-family: monospace;
  line-height: 1.5;
}

.wim-actions {
  display: flex;
  gap: 8px;
}
.wim-btn-copy {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.13s;
}
.wim-btn-copy:hover { background: var(--color-wim-copy-hover); }

.wim-btn-revoke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  white-space: nowrap;
}
.wim-btn-revoke:hover:not(:disabled) { border-color: var(--color-wim-revoke-hover-border); color: var(--color-danger); }
.wim-btn-revoke:disabled { opacity: 0.5; cursor: not-allowed; }

.wim-footer {
  padding: 12px 22px 18px;
  border-top: 1px solid var(--color-bg-soft);
}
.wim-footer p {
  margin: 0;
  font-size: 11.5px;
  color: var(--color-text-placeholder);
  line-height: 1.6;
  text-align: center;
}
:root {
  --color-rnp-accent: rgb(124, 108, 248);
  --color-rnp-text-strong: rgb(71, 84, 103);
  --color-rnp-accent-bright: rgb(111, 100, 216);
  --color-rnp-accent-soft: rgb(240, 238, 255);
  --color-rnp-accent-text: rgb(91, 80, 201);
  --color-rnp-active-dot: rgb(34, 197, 94);
  --color-rnp-backdrop: rgba(10, 12, 30, 0.52);
  --color-rnp-modal-shadow: rgba(10, 12, 40, 0.22);
  --color-rnp-wide-grad-1: rgb(252, 251, 255);
  --color-rnp-wide-grad-2: rgb(247, 245, 255);
  --color-rnp-close-bg: rgba(244, 244, 248, 0.9);
  --color-rnp-close-hover-bg: rgb(235, 233, 251);
  --color-rnp-toggle-closed-bg: rgb(244, 244, 248);
  --color-rnp-counter-text: rgb(26, 29, 58);
  --color-rnp-footer-border: rgb(240, 242, 247);
  --color-rnp-save-grad-1: rgb(124, 92, 255);
  --color-rnp-save-grad-2: rgb(98, 72, 240);
  --color-rnp-save-shadow: rgba(108, 72, 240, 0.32);
  --color-rnp-save-shadow-hover: rgba(108, 72, 240, 0.42);
  --color-rnp-chip-hover-border: rgb(197, 188, 252);
  --color-rnp-chip-active-bg: rgb(237, 233, 255);
  --color-rnp-checkbox-icon: rgb(203, 213, 225);
}

/* 다크 값: 기존 dark.css 커버가 전무한 사각지대라 이번에 새로 부여.
   보라색 CTA/배지 계열은 앱 전역 --color-accent 다크값 톤에 맞춤 */
[data-theme="dark"] {
  --color-rnp-accent: var(--color-accent);
  --color-rnp-text-strong: var(--color-text-muted);
  --color-rnp-accent-bright: rgb(167, 153, 234);
  --color-rnp-accent-soft: rgb(45, 41, 78);
  --color-rnp-accent-text: rgb(196, 181, 253);
  --color-rnp-backdrop: rgba(2, 6, 16, 0.65);
  --color-rnp-modal-shadow: rgba(0, 0, 0, 0.45);
  --color-rnp-wide-grad-1: var(--color-bg-white);
  --color-rnp-wide-grad-2: rgb(30, 26, 46);
  --color-rnp-close-bg: rgba(255, 255, 255, 0.08);
  --color-rnp-close-hover-bg: rgb(45, 41, 78);
  --color-rnp-toggle-closed-bg: var(--color-bg-soft);
  --color-rnp-counter-text: var(--color-text-main);
  --color-rnp-footer-border: var(--color-border);
  --color-rnp-save-grad-1: rgb(140, 112, 255);
  --color-rnp-save-grad-2: rgb(115, 92, 250);
  --color-rnp-save-shadow: rgba(140, 112, 255, 0.3);
  --color-rnp-save-shadow-hover: rgba(140, 112, 255, 0.4);
  --color-rnp-chip-hover-border: rgb(124, 108, 248);
  --color-rnp-chip-active-bg: rgb(51, 41, 92);
  --color-rnp-checkbox-icon: rgb(100, 116, 139);
}

/* ── 배경 ── */
.rnp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-rnp-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

/* ── 모달 기본 ── */
.rnp-modal {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 32px 80px var(--color-rnp-modal-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rnpFadeUp 0.22s ease both;
}

/* 카테고리·모드 단계 — 그라데이션 배경 */
.rnp-modal--wide {
  background: linear-gradient(180deg, var(--color-rnp-wide-grad-1) 0%, var(--color-rnp-wide-grad-2) 50%, var(--color-bg-white) 100%);
}

/* 템플릿·AI 단계 — 세로로 길게 */
.rnp-modal--tall {
  height: 92vh;
  max-height: 92vh;
}

@keyframes rnpFadeUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 닫기 버튼 ── */
.rnp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--color-rnp-close-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.14s;
}
.rnp-close:hover { background: var(--color-rnp-close-hover-bg); color: var(--color-rnp-accent-bright); }

/* ── 직접/템플릿 작성 공통 레이아웃 ── */
.rnp-write-step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.rnp-write-header {
  padding: 28px 28px 0;
  flex-shrink: 0;
}

.rnp-write-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.rnp-write-body::-webkit-scrollbar { width: 6px; }
.rnp-write-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--color-border-strong); }

/* 카테고리 step 내부 — 기존 project-category-circle override */
.rnp-modal .project-category-list { margin-top: 36px; }
.rnp-modal .project-category-circle { width: 118px; height: 118px; }
.rnp-modal .project-new-title { font-size: 36px; }

/* 모드 step 내부 */
.rnp-modal .project-mode-grid { max-width: 100%; margin-top: 28px; }

/* project-write-card 내부 패딩 축소 (팝업에 맞게) */
.rnp-write-body .project-write-card { padding: 18px 20px; border-radius: 16px; }
.rnp-write-body .project-write-card-title { font-size: 15px; margin-bottom: 12px; }
.rnp-write-body .project-write-input,
.rnp-write-body .project-write-textarea { font-size: 14px; }
.rnp-write-body .project-write-submit-button { margin-top: 4px; }

/* 모집 상태 토글 (직접/템플릿 공통) */
.rnp-toggle-row {
  display: flex;
  gap: 8px;
}
.rnp-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.rnp-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.rnp-toggle.is-active { border-color: var(--color-rnp-accent); background: var(--color-rnp-accent-soft); color: var(--color-rnp-accent-text); }
.rnp-toggle.is-active .rnp-toggle-dot { background: var(--color-rnp-active-dot); }
.rnp-toggle.is-active.is-closed { border-color: var(--color-border-strong); background: var(--color-rnp-toggle-closed-bg); color: var(--color-rnp-text-strong); }
.rnp-toggle.is-active.is-closed .rnp-toggle-dot { background: var(--color-text-placeholder); }

/* 모집 인원 카운터 */
.rnp-counter { display: flex; align-items: center; gap: 12px; }
.rnp-counter-btn {
  width: 32px; height: 32px;
  border: 1.5px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-white); color: var(--color-rnp-text-strong);
  font-size: 18px; font-weight: 700;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.rnp-counter-btn:hover:not(:disabled) { border-color: var(--color-rnp-accent); color: var(--color-rnp-accent); background: var(--color-rnp-accent-soft); }
.rnp-counter-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rnp-counter-value { font-size: 16px; font-weight: 700; color: var(--color-rnp-counter-text); min-width: 36px; text-align: center; }

/* ── 작성 단계 하단 푸터 ── */
.rnp-write-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 28px 20px;
  border-top: 1px solid var(--color-rnp-footer-border);
  background: var(--color-bg-white);
}

.rnp-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 24px;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.rnp-footer-btn--cancel {
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-text-muted);
}
.rnp-footer-btn--cancel:hover { background: var(--color-bg-soft); }

.rnp-footer-btn--save {
  border: none;
  background: linear-gradient(135deg, var(--color-rnp-save-grad-1) 0%, var(--color-rnp-save-grad-2) 100%);
  color: var(--color-text-on-brand);
  padding: 0 32px;
  box-shadow: 0 4px 14px var(--color-rnp-save-shadow);
  letter-spacing: -0.01em;
}
.rnp-footer-btn--save:hover:not(:disabled) {
  box-shadow: 0 6px 20px var(--color-rnp-save-shadow-hover);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.rnp-footer-btn--save:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── 수정 모드 카테고리 칩 ── */
.rnp-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rnp-category-chip {
  height: 34px;
  padding: 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
}
.rnp-category-chip:hover { border-color: var(--color-rnp-chip-hover-border); background: var(--color-accent-soft); color: var(--color-rnp-accent-bright); }
.rnp-category-chip.is-active { border-color: var(--color-rnp-accent); background: var(--color-rnp-chip-active-bg); color: var(--color-rnp-accent-text); }

/* ── 모집 중 상태 체크박스 ── */
.rnp-status-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-rnp-text-strong);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.rnp-checkbox-icon {
  font-size: 20px;
  color: var(--color-rnp-checkbox-icon);
  flex-shrink: 0;
}
.rnp-checkbox-icon.is-checked { color: var(--color-rnp-accent); }

/* ── AI 작성 레이아웃 ── */
.rnp-ai-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* AI 헤더에 X 버튼 공간 확보 */
.rnp-modal .project-ai-chat-header {
  padding-right: 56px;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* AI 카드: flex로 rnp-ai-wrap 전체를 채우도록, 고정 height 제거 */
.rnp-modal .project-ai-chat-card {
  flex: 1;
  height: auto !important;
  max-width: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.rnp-modal .project-ai-intro > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* ── 오버레이 & 모달 ───────────────────────────────────── */
.pcf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}

.pcf-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  padding: 32px 28px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.pcf-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.pcf-close:hover { color: #111; background: #f3f4f6; }

/* ── 프로그레스 ──────────────────────────────────────────── */
.pcf-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  padding: 0 4px;
}

.pcf-progress-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.pcf-progress-step::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #e5e7eb;
  z-index: 0;
}
.pcf-progress-step:last-child::after { display: none; }
.pcf-progress-step--done::after { background: #6366f1; }

.pcf-progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}
.pcf-progress-step--active .pcf-progress-dot {
  border-color: #6366f1;
  color: #6366f1;
  background: #eef2ff;
}
.pcf-progress-step--done .pcf-progress-dot {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

.pcf-progress-label {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
}
.pcf-progress-step--active .pcf-progress-label { color: #6366f1; font-weight: 600; }
.pcf-progress-step--done .pcf-progress-label { color: #6366f1; }

/* ── 공통 섹션 ──────────────────────────────────────────── */
.pcf-section { display: flex; flex-direction: column; gap: 16px; }
.pcf-section--done { align-items: center; text-align: center; }

.pcf-icon-big { font-size: 48px; text-align: center; }
.pcf-done-emoji { font-size: 64px; }

.pcf-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  text-align: center;
}

.pcf-desc {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

.pcf-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ef4444;
  background: #fef2f2;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0;
}

/* ── 체크리스트 (Step 0) ────────────────────────────────── */
.pcf-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
}
.pcf-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}
.pcf-check-icon { color: #22c55e; flex-shrink: 0; font-size: 16px; }

/* ── 버튼 ────────────────────────────────────────────────── */
.pcf-btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.pcf-btn-row--center { justify-content: center; }

.pcf-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.pcf-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.pcf-btn--primary { background: #6366f1; color: #fff; }
.pcf-btn--primary:hover:not(:disabled) { background: #4f46e5; }

.pcf-btn--danger { background: #ef4444; color: #fff; }
.pcf-btn--danger:hover:not(:disabled) { background: #dc2626; }

.pcf-btn--ghost { background: #f3f4f6; color: #374151; }
.pcf-btn--ghost:hover:not(:disabled) { background: #e5e7eb; }

/* ── 회고 (Step 1) ──────────────────────────────────────── */
.pcf-retro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pcf-retro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition: all 0.18s;
  font-size: 14px;
}
.pcf-retro-card:hover { border-color: #a5b4fc; background: #f5f3ff; }
.pcf-retro-card--selected { font-weight: 700; }

.pcf-retro-emoji { font-size: 32px; }
.pcf-retro-label { font-size: 13px; color: #374151; }

.pcf-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid #e5e7eb;
  font-size: 14px;
  color: #111827;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s;
  outline: none;
}
.pcf-textarea:focus { border-color: #6366f1; }

.pcf-char-count { font-size: 11px; color: #9ca3af; text-align: right; margin-top: -10px; }

/* ── 팀원 평가 (Step 2) ─────────────────────────────────── */
.pcf-eval-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.pcf-eval-card {
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
}

.pcf-eval-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.pcf-eval-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
}

.pcf-eval-name { font-size: 14px; font-weight: 600; color: #111827; }
.pcf-eval-role { font-size: 12px; color: #9ca3af; }

.pcf-eval-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcf-eval-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcf-eval-cat-label { font-size: 13px; color: #374151; font-weight: 500; }

.pcf-stars { display: flex; gap: 4px; }
.pcf-star { font-size: 22px; color: #d1d5db; cursor: pointer; transition: color 0.1s; user-select: none; }
.pcf-star--on { color: #f59e0b; }

.pcf-empty { text-align: center; color: #9ca3af; font-size: 14px; padding: 24px 0; }

/* ── AI 분석 (Step 3) ──────────────────────────────────── */
.pcf-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0;
  color: #6b7280;
  font-size: 14px;
}

.pcf-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: pcf-spin 0.8s linear infinite;
}
@keyframes pcf-spin { to { transform: rotate(360deg); } }

.pcf-ai-scores {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 14px;
}

.pcf-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pcf-bar-label { font-size: 13px; color: #374151; font-weight: 500; width: 48px; flex-shrink: 0; }
.pcf-bar-track {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.pcf-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.pcf-bar-value { font-size: 13px; font-weight: 600; color: #111827; width: 28px; text-align: right; flex-shrink: 0; }

.pcf-ai-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.pcf-ai-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
}
.pcf-ai-stat-val { font-size: 18px; font-weight: 700; color: #6366f1; }
.pcf-ai-stat-label { font-size: 11px; color: #9ca3af; text-align: center; }

/* ── AI 포트폴리오 (Step 4) ─────────────────────────────── */
.pcf-portfolio-card {
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.pcf-portfolio-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.pcf-portfolio-emoji { font-size: 36px; }
.pcf-portfolio-proj { font-size: 15px; font-weight: 700; color: #111827; }
.pcf-portfolio-user { font-size: 13px; color: #6b7280; }

.pcf-portfolio-stats {
  display: flex;
  gap: 12px;
}
.pcf-p-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
}
.pcf-p-stat-val { font-size: 16px; font-weight: 700; color: #6366f1; }
.pcf-p-stat-label { font-size: 11px; color: #9ca3af; text-align: center; }

.pcf-portfolio-note { font-size: 13px; color: #9ca3af; text-align: center; }

/* 다크모드 */
[data-theme="dark"] .pcf-modal { background: #1f2937; }
[data-theme="dark"] .pcf-title { color: #f9fafb; }
[data-theme="dark"] .pcf-desc { color: #9ca3af; }
[data-theme="dark"] .pcf-checklist { background: #111827; }
[data-theme="dark"] .pcf-checklist li { color: #d1d5db; }
[data-theme="dark"] .pcf-retro-card { background: #111827; border-color: #374151; color: #d1d5db; }
[data-theme="dark"] .pcf-retro-card:hover { border-color: #818cf8; background: #1e1b4b; }
[data-theme="dark"] .pcf-retro-label { color: #d1d5db; }
[data-theme="dark"] .pcf-textarea { background: #111827; color: #f9fafb; border-color: #374151; }
[data-theme="dark"] .pcf-eval-card { border-color: #374151; background: #111827; }
[data-theme="dark"] .pcf-eval-name { color: #f9fafb; }
[data-theme="dark"] .pcf-eval-cat-label { color: #d1d5db; }
[data-theme="dark"] .pcf-ai-scores { background: #111827; }
[data-theme="dark"] .pcf-bar-label { color: #d1d5db; }
[data-theme="dark"] .pcf-bar-track { background: #374151; }
[data-theme="dark"] .pcf-bar-value { color: #f9fafb; }
[data-theme="dark"] .pcf-ai-stat { background: #111827; border-color: #374151; }
[data-theme="dark"] .pcf-portfolio-card { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); }
[data-theme="dark"] .pcf-portfolio-proj { color: #f9fafb; }
[data-theme="dark"] .pcf-p-stat { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .pcf-btn--ghost { background: #374151; color: #d1d5db; }
[data-theme="dark"] .pcf-btn--ghost:hover:not(:disabled) { background: #4b5563; }
[data-theme="dark"] .pcf-progress-dot { background: #1f2937; }
@keyframes spin {
  to { transform: rotate(360deg); }
}

:root {
  /* --wh-* 로컬 팔레트(인디고/슬레이트 스케일 + 그림자) 대응 토큰 */
  --color-wh-indigo-100: rgb(224, 231, 255);
  --color-wh-indigo-200: rgb(199, 210, 254);
  --color-wh-indigo-400: rgb(129, 140, 248);
  --color-wh-indigo-500: rgb(99, 102, 241);
  --color-wh-indigo-600: rgb(79, 70, 229);
  --color-wh-indigo-700: rgb(67, 56, 202);
  --color-wh-slate-100: rgb(241, 245, 249);
  --color-wh-slate-600: rgb(71, 85, 105);
  --color-wh-slate-700: rgb(51, 65, 85);
  --color-wh-slate-800: rgb(30, 41, 59);
  --color-wh-border: rgb(232, 237, 243);
  --color-wh-border-strong: rgb(212, 218, 227);
  --color-wh-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --color-wh-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
  --color-wh-shadow-md: 0 10px 32px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  --color-wh-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  --color-wh-hero-accent: rgb(167, 139, 250);
  --color-wh-indigo-glow-08: rgba(99, 102, 241, 0.08);
  --color-wh-indigo-glow-12: rgba(99, 102, 241, 0.12);
  --color-wh-indigo-glow-15: rgba(99, 102, 241, 0.15);
  --color-wh-indigo-glow-13: rgba(99, 102, 241, 0.13);
  --color-wh-indigo-glow-25: rgba(99, 102, 241, 0.25);
  --color-wh-indigo-glow-20: rgba(99, 102, 241, 0.2);
  --color-wh-shadow-18: rgba(15, 23, 42, 0.18);
  --color-wh-shadow-22: rgba(15, 23, 42, 0.22);
  --color-wh-shadow-24: rgba(15, 23, 42, 0.24);
  --color-wh-shadow-12: rgba(15, 23, 42, 0.12);
  --color-wh-shadow-14: rgba(15, 23, 42, 0.14);
  --color-wh-shadow-16: rgba(15, 23, 42, 0.16);
  --color-wh-black-glow-06: rgba(0, 0, 0, 0.06);
  --color-wh-black-glow-10: rgba(0, 0, 0, 0.1);
  --color-wh-black-glow-12: rgba(0, 0, 0, 0.12);
  --color-wh-black-glow-18: rgba(0, 0, 0, 0.18);
  --color-wh-black-glow-45: rgba(0, 0, 0, 0.45);

  --color-wh-rose-border: rgb(254, 205, 211);
  --color-wh-rose-text: rgb(190, 18, 60);
  --color-wh-rose-hover-bg: rgb(255, 228, 230);
  --color-wh-rose-border-hover: rgb(253, 164, 175);
  --color-wh-danger-hover-bg: rgb(254, 226, 226);
  --color-wh-red-500: rgb(239, 68, 68);
  --color-wh-red-800: rgb(153, 27, 27);
  --color-wh-danger-shadow-20: rgba(220, 38, 38, 0.2);
  --color-wh-danger-shadow-15: rgba(220, 38, 38, 0.15);
  --color-wh-danger-border-30: rgba(220, 38, 38, 0.3);
  --color-wh-danger-shadow-28: rgba(220, 38, 38, 0.28);
  --color-wh-red-shadow-25: rgba(239, 68, 68, 0.25);
  --color-wh-red-shadow-15: rgba(239, 68, 68, 0.15);
  --color-wh-rose-shadow: rgba(190, 18, 60, 0.12);

  --color-wh-green: rgb(34, 197, 94);
  --color-wh-green-700: rgb(21, 128, 61);
  --color-wh-green-border: rgb(187, 247, 208);
  --color-wh-green-border-2: rgb(167, 243, 208);
  --color-wh-green-800: rgb(4, 120, 87);
  --color-wh-green-soft-2: rgb(220, 252, 231);
  --color-wh-green-border-25: rgba(34, 197, 94, 0.25);
  --color-wh-green-shadow-15: rgba(34, 197, 94, 0.15);
  --color-wh-green-900: rgb(22, 101, 52);

  --color-wh-amber-800: rgb(146, 64, 14);
  --color-wh-amber-soft: rgb(255, 251, 235);
  --color-wh-amber-700: rgb(180, 83, 9);
  --color-wh-amber-ring: rgba(245, 158, 11, 0.3);
  --color-wh-amber-ring-40: rgba(245, 158, 11, 0.4);
  --color-wh-amber-100: rgb(254, 243, 199);
  --color-wh-amber-ring-35: rgba(245, 158, 11, 0.35);
  --color-wh-amber-shadow-20: rgba(245, 158, 11, 0.2);
  --color-wh-amber-pulse: rgba(245, 158, 11, 0.9);
  --color-wh-amber-ring-50: rgba(245, 158, 11, 0.5);
  --color-wh-amber-hover-bg: rgba(245, 158, 11, 0.1);
  --color-wh-amber-border: rgb(253, 230, 138);

  --color-wh-purple-soft: rgb(240, 237, 248);
  --color-wh-purple-ring-35: rgba(124, 58, 237, 0.35);
  --color-wh-purple-hover-bg: rgba(124, 58, 237, 0.07);
  --color-wh-purple-100: rgb(237, 233, 254);
  --color-wh-purple-25: rgb(250, 245, 255);
  --color-wh-purple-hover-2: rgb(243, 232, 255);
  --color-wh-purple-ring-60: rgba(124, 58, 237, 0.6);
  --color-wh-purple-ring-20: rgba(124, 58, 237, 0.2);
  --color-wh-purple-shadow-15: rgba(124, 58, 237, 0.15);
  --color-wh-purple-ring-25: rgba(124, 58, 237, 0.25);
  --color-wh-purple-shadow-12: rgba(124, 58, 237, 0.12);
  --color-wh-purple-shadow-10: rgba(124, 58, 237, 0.1);
  --color-wh-purple-hover-bg-2: rgba(124, 58, 237, 0.06);
  --color-wh-purple-hover-bg-3: rgba(124, 58, 237, 0.08);
  --color-wh-purple-hover-bg-4: rgba(124, 58, 237, 0.14);

  --color-wh-white-glow-80: rgba(255, 255, 255, 0.8);
  --color-wh-hero-grad-1: rgb(250, 251, 255);
  --color-wh-white-glow-90: rgba(255, 255, 255, 0.9);
  --color-wh-white-glow-97: rgba(255, 255, 255, 0.97);
  --color-wh-white-glow-70: rgba(255, 255, 255, 0.7);
  --color-wh-white-glow-88: rgba(255, 255, 255, 0.88);
  --color-wh-white-glow-50: rgba(255, 255, 255, 0.5);
  --color-wh-white-glow-85: rgba(255, 255, 255, 0.85);
  --color-wh-white-glow-035: rgba(255, 255, 255, 0.035);
  --color-wh-white-glow-28: rgba(255, 255, 255, 0.28);
  --color-wh-white-glow-12: rgba(255, 255, 255, 0.12);
  --color-wh-white-glow-17: rgba(255, 255, 255, 0.17);

  --color-wh-contest-border: rgba(13, 38, 79, 0.16);
  --color-wh-contest-grad-1: rgb(11, 35, 73);
  --color-wh-contest-grad-2: rgb(21, 59, 121);
  --color-wh-contest-grad-3: rgb(39, 88, 200);
  --color-wh-contest-grad-4: rgba(92, 130, 255, 0.6);
  --color-wh-contest-mint: rgb(145, 223, 197);
  --color-wh-contest-blue-text: rgb(200, 215, 243);
  --color-wh-contest-action-text: rgb(231, 239, 255);

  --color-wh-cbar-bg: rgba(73, 101, 255, 0.08);
  --color-wh-cbar-border: rgba(73, 101, 255, 0.18);
  --color-wh-chipsbar-bg: rgba(248, 250, 252, 0.9);

  --color-wh-loading-bg: rgb(232, 236, 241);
  --color-wh-chip-active-bg: rgb(26, 31, 58);
  --color-wh-welcome-sub: rgb(102, 112, 133);
  --color-wh-welcome-close: rgb(152, 162, 179);
  --color-wh-welcome-close-hover: rgb(71, 84, 103);
  --color-wh-welcome-title: rgb(16, 24, 40);
  --color-wh-lounge-backdrop: rgba(15, 23, 42, 0.45);

  --color-wh-cyan-soft: rgb(236, 254, 255);
  --color-wh-cyan-border: rgb(165, 243, 252);
  --color-wh-cyan-text: rgb(14, 116, 144);
  --color-wh-cyan-focus-ring: rgba(14, 116, 144, 0.24);
  --color-wh-blue-soft: rgb(239, 246, 255);
  --color-wh-blue-border: rgb(191, 219, 254);
  --color-wh-blue-text: rgb(29, 78, 216);
  --color-wh-blue-hover-bg: rgb(219, 234, 254);
  --color-wh-blue-hover-border: rgb(147, 197, 253);
  --color-wh-blue-shadow: rgba(29, 78, 216, 0.12);
  --color-wh-solid-cta: rgb(15, 23, 42);
  --color-wh-empty-hint: rgb(203, 213, 225);
}

/* 다크 값: 슬레이트/인디고 스케일은 앱 전역 토큰이 있는 단계는 그쪽에
   위임(위 --wh-* 재정의에서 이미 처리), 나머지 스케일 단계와 상태색
   계열은 이번 배치에서 다크 값을 새로 부여. vote-banner 관련은
   기존 dark.css 로컬 오버라이드 값을 그대로 보존(별도 처리, 아래
   .wh-vote-banner* 규칙 참고). */
[data-theme="dark"] {
  --color-wh-indigo-100: rgb(49, 46, 129);
  --color-wh-indigo-200: rgb(67, 56, 202);
  --color-wh-indigo-400: rgb(129, 140, 248);
  --color-wh-indigo-500: var(--color-indigo-accent-dark);
  --color-wh-indigo-600: rgb(129, 140, 248);
  --color-wh-indigo-700: rgb(165, 180, 252);
  --color-wh-slate-100: rgb(51, 65, 85);
  --color-wh-slate-600: var(--color-text-muted);
  --color-wh-slate-700: rgb(203, 213, 225);
  --color-wh-slate-800: rgb(241, 245, 249);
  --color-wh-border: var(--color-border);
  --color-wh-border-strong: var(--color-border-strong);
  --color-wh-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --color-wh-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.2);
  --color-wh-shadow-md: 0 10px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --color-wh-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  --color-wh-hero-accent: rgb(139, 92, 246);
  --color-wh-shadow-18: rgba(0, 0, 0, 0.35);
  --color-wh-shadow-22: rgba(0, 0, 0, 0.4);
  --color-wh-shadow-24: rgba(0, 0, 0, 0.4);
  --color-wh-shadow-12: rgba(0, 0, 0, 0.3);
  --color-wh-shadow-14: rgba(0, 0, 0, 0.32);
  --color-wh-shadow-16: rgba(0, 0, 0, 0.35);

  --color-wh-rose-border: rgb(136, 19, 55);
  --color-wh-rose-text: rgb(251, 113, 133);
  --color-wh-rose-hover-bg: rgb(76, 5, 25);
  --color-wh-rose-border-hover: rgb(159, 18, 57);
  --color-wh-danger-hover-bg: rgb(69, 10, 10);
  --color-wh-red-800: rgb(248, 113, 113);
  --color-wh-rose-shadow: rgba(251, 113, 133, 0.2);

  --color-wh-green-700: var(--color-success);
  --color-wh-green-border: rgb(22, 101, 52);
  --color-wh-green-border-2: rgb(6, 95, 70);
  --color-wh-green-800: var(--color-success);
  --color-wh-green-soft-2: rgb(6, 46, 26);
  --color-wh-green-900: rgb(74, 222, 128);

  --color-wh-amber-800: var(--color-status-pending);
  --color-wh-amber-soft: rgb(45, 31, 0);
  --color-wh-amber-700: var(--color-status-pending);
  --color-wh-amber-100: rgb(69, 46, 4);
  --color-wh-amber-border: rgb(146, 90, 6);

  --color-wh-purple-soft: rgb(45, 41, 78);
  --color-wh-purple-100: rgb(49, 33, 89);
  --color-wh-purple-25: rgb(30, 24, 48);
  --color-wh-purple-hover-2: rgb(45, 33, 74);

  --color-wh-contest-mint: rgb(94, 191, 160);
  --color-wh-contest-blue-text: rgb(165, 184, 224);
  --color-wh-contest-action-text: rgb(203, 217, 250);

  --color-wh-loading-bg: var(--color-bg-elevated-dark);
  --color-wh-chip-active-bg: rgb(30, 27, 75);
  --color-wh-welcome-sub: var(--color-text-muted);
  --color-wh-welcome-close: var(--color-text-placeholder);
  --color-wh-welcome-close-hover: var(--color-text-muted);
  --color-wh-welcome-title: var(--color-text-main);
  --color-wh-lounge-backdrop: rgba(2, 6, 16, 0.6);

  --color-wh-cyan-soft: rgb(19, 51, 56);
  --color-wh-cyan-border: rgb(21, 94, 117);
  --color-wh-cyan-text: rgb(103, 232, 249);
  --color-wh-blue-soft: rgb(23, 37, 61);
  --color-wh-blue-border: rgb(30, 58, 95);
  --color-wh-blue-text: rgb(147, 197, 253);
  --color-wh-blue-hover-bg: rgb(30, 58, 95);
  --color-wh-blue-hover-border: rgb(59, 105, 173);

  /* 명도 검사로 발견 - 반투명 흰색 유리질 표면들이 다크에서도 그대로
     흰색으로 남아있던 것을 다크 배경에 어울리는 반투명 톤으로 수정 */
  --color-wh-white-glow-80: rgba(30, 41, 59, 0.6);
  --color-wh-white-glow-90: rgba(30, 41, 59, 0.7);
  --color-wh-white-glow-97: rgb(30, 41, 59);
  --color-wh-white-glow-88: rgba(15, 23, 42, 0.85);
  --color-wh-white-glow-70: rgba(30, 41, 59, 0.75);
  --color-wh-white-glow-85: rgba(15, 23, 42, 0.85);
  --color-wh-chipsbar-bg: rgba(15, 23, 42, 0.92);
  --color-wh-solid-cta: rgb(51, 65, 85);
  --color-wh-empty-hint: var(--color-text-muted);
  --color-wh-chip-label-dark: rgb(203, 213, 225);
  --color-wh-badge-status-bg-dark: rgb(26, 58, 42);
  --color-wh-indigo-glow-invite: rgb(165, 180, 252);
  --color-wh-invite-border-dark: rgba(165, 180, 252, 0.3);

  /* Step 0 보호 대상: 기존 .wh-vote-banner* 다크 로컬 오버라이드 5건의
     원래 값을 값 변경 없이 그대로 토큰화(다크 전용, 라이트 대응 없음) */
  --color-wh-vote-grad-1: rgb(45, 32, 8);
  --color-wh-vote-grad-2: rgb(61, 42, 6);
  --color-wh-vote-title: rgb(252, 211, 77);
  --color-wh-vote-count: rgb(251, 191, 36);
  --color-wh-vote-btn: rgb(217, 119, 6);
  --color-wh-vote-done-bg: rgb(20, 83, 45);
  --color-wh-vote-done-text: rgb(134, 239, 172);
}

.workspace-home {
  --wh-indigo-50: var(--color-brand-soft);
  --wh-indigo-100: var(--color-wh-indigo-100);
  --wh-indigo-200: var(--color-wh-indigo-200);
  --wh-indigo-400: var(--color-wh-indigo-400);
  --wh-indigo-500: var(--color-wh-indigo-500);
  --wh-indigo-600: var(--color-wh-indigo-600);
  --wh-indigo-700: var(--color-wh-indigo-700);
  --wh-slate-0: var(--color-bg-white);
  --wh-slate-50: var(--color-bg-soft);
  --wh-slate-100: var(--color-wh-slate-100);
  --wh-slate-200: var(--color-border);
  --wh-slate-300: var(--color-border-strong);
  --wh-slate-400: var(--color-text-placeholder);
  --wh-slate-500: var(--color-text-muted);
  --wh-slate-600: var(--color-wh-slate-600);
  --wh-slate-700: var(--color-wh-slate-700);
  --wh-slate-800: var(--color-wh-slate-800);
  --wh-slate-900: var(--color-text-main);
  --wh-border: var(--color-wh-border);
  --wh-border-strong: var(--color-wh-border-strong);
  --wh-shadow-xs: var(--color-wh-shadow-xs);
  --wh-shadow-sm: var(--color-wh-shadow-sm);
  --wh-shadow-md: var(--color-wh-shadow-md);
  --wh-shadow-inset: var(--color-wh-shadow-inset);
  --wh-radius-2xl: 28px;
  --wh-radius-xl: 22px;
  --wh-radius-lg: 18px;
  --wh-radius-md: 14px;
  --wh-radius-sm: 10px;
  --wh-radius-pill: 999px;

  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--wh-slate-900);
}

/* =========================
   Shared card base
========================= */

.card {
  background: var(--wh-slate-0);
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-xl);
  box-shadow: var(--wh-shadow-sm);
}

/* =========================
   Hero
========================= */

.workspace-home__hero {
  position: relative;
  padding: 0;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-2xl);
  background: linear-gradient(145deg, var(--color-bg-white) 0%, var(--color-wh-hero-grad-1) 55%, var(--color-accent-soft) 100%);
  box-shadow: var(--wh-shadow-md);
}

/* subtle top accent line */
.workspace-home__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wh-indigo-500) 0%, var(--color-wh-hero-accent) 60%, transparent 100%);
  border-radius: var(--wh-radius-2xl) var(--wh-radius-2xl) 0 0;
}

/* decorative orb */
.workspace-home__hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-wh-indigo-glow-08) 0%, transparent 70%);
  pointer-events: none;
}

.workspace-home__hero-inner {
  position: relative;
  z-index: 1;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* top row: eyebrow + stats badges */
.workspace-home__hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.workspace-home__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-indigo-50);
  border: 1px solid var(--wh-indigo-200);
  color: var(--wh-indigo-700);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* stat pills inline */
.workspace-home__hero-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-home__hero-badges--mobile {
  display: none;
}

.workspace-home__hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--wh-radius-pill);
  background: var(--color-wh-white-glow-80);
  border: 1px solid var(--wh-border);
  backdrop-filter: blur(8px);
  box-shadow: var(--wh-shadow-xs);
}

.workspace-home__hero-badge-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--wh-slate-400);
  letter-spacing: 0.01em;
}

.workspace-home__hero-badge-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--wh-slate-800);
  letter-spacing: -0.01em;
}

.workspace-home__hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wh-indigo-400);
  flex-shrink: 0;
}

/* title area */
.workspace-home__hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workspace-home__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.workspace-home__title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.workspace-home__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 900;
  color: var(--wh-slate-900);
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.workspace-home__title-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 680px;
}

.workspace-home__title-input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1.5px solid var(--wh-slate-200);
  border-radius: var(--wh-radius-md);
  background: var(--wh-slate-0);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--wh-slate-900);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workspace-home__title-input:focus {
  border-color: var(--wh-indigo-500);
  box-shadow: 0 0 0 3px var(--color-wh-indigo-glow-12);
}

.workspace-home__title-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* hero divider */
.workspace-home__hero-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--wh-border) 0%, transparent 100%);
  margin: 0 -32px;
}

/* hero footer row: action buttons */
.workspace-home__hero-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   Button tokens
========================= */

.workspace-home__title-edit-button,
.workspace-home__title-save-button,
.workspace-home__title-cancel-button,
.workspace-home__view-project-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--wh-radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease;
}

.workspace-home__title-edit-button {
  background: var(--wh-indigo-50);
  border-color: var(--wh-indigo-200);
  color: var(--wh-indigo-700);
}

.workspace-home__title-edit-button:hover {
  background: var(--wh-indigo-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-wh-indigo-glow-15);
}

.workspace-home__title-save-button {
  background: var(--color-wh-solid-cta);
  color: var(--color-text-on-brand);
  box-shadow: 0 4px 14px var(--color-wh-shadow-18);
}

.workspace-home__title-save-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--color-wh-shadow-22);
}

.workspace-home__title-cancel-button {
  background: var(--wh-slate-50);
  border-color: var(--wh-border);
  color: var(--wh-slate-700);
}

.workspace-home__title-cancel-button:hover:not(:disabled) {
  background: var(--wh-slate-100);
  border-color: var(--wh-border-strong);
  transform: translateY(-1px);
}

.workspace-home__view-project-button {
  background: var(--color-wh-white-glow-90);
  border-color: var(--wh-border);
  color: var(--wh-slate-700);
  box-shadow: var(--wh-shadow-xs);
}

.workspace-home__view-project-button:hover:not(:disabled) {
  background: var(--wh-slate-50);
  border-color: var(--wh-border-strong);
  color: var(--wh-slate-900);
  transform: translateY(-1px);
  box-shadow: var(--wh-shadow-sm);
}

.workspace-home__title-save-button:disabled,
.workspace-home__title-cancel-button:disabled,
.workspace-home__view-project-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================
   네이버 지도 스타일 레이아웃
========================= */

/* 전체 레이아웃: 맵이 전체 너비 차지 */
/* 오피스 맵 페이지 — viewport 전체를 맵으로 채움 */
.workspace-layout:has(.wh-naver-layout) {
  display: flex;
  flex-direction: column;
  /* 100vh는 모바일에서 주소창이 숨은 상태의 높이다. 주소창이 보이는 평소에는
     화면보다 커져서, 아래쪽에 붙인 도구 막대가 주소창 뒤로 밀려 안 보인다.
     dvh는 지금 실제로 보이는 높이를 쓴다. 100vh는 dvh를 모르는 브라우저용. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.wh-naver-layout {
  flex-direction: column !important;
  gap: 0 !important;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* workspace-layout 패딩/여백 제거 */
.workspace-layout__content:has(.wh-naver-layout) {
  margin: 0;
  flex: 1;
  min-height: 0;
}

.workspace-layout__body:has(.wh-naver-layout) {
  width: 100%;
  padding: 0;
  gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

.workspace-layout__body:has(.wh-naver-layout) .workspace-sidebar--desktop {
  display: none;
}

.workspace-layout__body:has(.wh-naver-layout) .workspace-layout__sidebar-wrap {
  display: none;
}

/* ── 사이드바: 맵 위에 float 패널 — 헤더 바 아래부터 맵 바닥 위까지 ── */
.wh-sidebar {
  position: absolute;
  left: 10px;
  top: 75px;
  bottom: 80px;
  width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--color-wh-white-glow-97);
  border: 1.5px solid var(--color-wh-indigo-200);
  border-radius: 14px;
  box-shadow: 0 4px 20px var(--color-wh-indigo-glow-13), 0 1px 4px var(--color-shadow-strong);
  overflow: hidden;
  z-index: 20;
}


.wh-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-wh-slate-100);
}

.wh-sidebar-head-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.wh-sidebar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.02em;
  word-break: keep-all;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 배지 + 온라인 한 줄 */
.wh-sidebar-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.wh-sidebar-online-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-success-soft);
  border: 1px solid var(--color-wh-green-border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-wh-green-700);
}

.wh-sidebar-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.wh-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-wh-slate-100);
  border: 1px solid var(--color-border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-wh-slate-600);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wh-badge--status {
  background: var(--color-success-soft);
  border-color: var(--color-wh-green-border-2);
  color: var(--color-wh-green-800);
}

.wh-invite-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--color-wh-purple-ring-35);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  font: inherit;
}

.wh-invite-btn:hover {
  background: var(--color-wh-purple-hover-bg);
  border-color: var(--color-wh-purple-ring-60);
}

/* 온라인 바 */
.wh-online-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--color-wh-slate-100);
}

.wh-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-wh-green);
  flex-shrink: 0;
}

.wh-online-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-wh-slate-700);
  flex: 1;
}

.wh-online-avatars {
  display: flex;
  flex-direction: row-reverse;
}

.wh-online-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-bg-white);
  margin-left: -6px;
}

.wh-online-avatar:last-child { margin-left: 0; }

.wh-online-more {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-white);
  background: var(--color-border);
  font-size: 9px;
  font-weight: 700;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
}

/* 팀원 섹션 라벨 */
.wh-sidebar-section-label {
  padding: 12px 18px 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-placeholder);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 팀원 목록 */
.wh-member-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
}

.wh-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.12s;
}

.wh-member-row:hover {
  background: var(--color-bg-soft);
}

.wh-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.wh-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  display: block;
}

.wh-member-presence {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-wh-green);
  border: 2px solid var(--color-bg-white);
}

.wh-member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wh-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-wh-slate-800);
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-member-self {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-wh-purple-100);
  color: var(--color-accent);
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

.wh-member-role {
  font-size: 11px;
  color: var(--color-text-placeholder);
  font-weight: 600;
}

.wh-member-kick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-wh-rose-border);
  background: var(--color-danger-soft);
  color: var(--color-wh-rose-text);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
  font: inherit;
}

.wh-member-row:hover .wh-member-kick {
  opacity: 1;
}

.wh-member-kick:disabled { opacity: 0.3; cursor: not-allowed; }

/* 사이드바 빈 상태 */
.wh-sidebar-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.wh-sidebar-empty-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-wh-empty-hint);
  font-weight: 600;
  line-height: 1.7;
}

/* 사이드바 하단 관리 버튼 */
.wh-sidebar-manage {
  padding: 12px 14px 16px;
  border-top: 1px solid var(--color-wh-slate-100);
  margin-top: auto;
}

.wh-manage-btn {
  width: 100%;
  padding: 9px 0;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  color: var(--color-wh-slate-600);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  font: inherit;
}

.wh-manage-btn:hover:not(:disabled) {
  background: var(--color-wh-slate-100);
  border-color: var(--color-border-strong);
}

.wh-manage-btn--danger {
  background: var(--color-danger-soft);
  border-color: var(--color-wh-rose-border);
  color: var(--color-wh-rose-text);
}

.wh-manage-btn--danger:hover:not(:disabled) {
  background: var(--color-wh-rose-hover-bg);
  border-color: var(--color-wh-rose-border-hover);
}

.wh-manage-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 우측 맵 영역 ── */
.wh-map-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.wh-contest-entry {
  position: relative;
  z-index: 11;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 78px;
  padding: 13px 24px;
  border: 0;
  border-bottom: 1px solid var(--color-wh-contest-border);
  background:
    radial-gradient(circle at 77% -80%, var(--color-wh-contest-grad-4), transparent 38%),
    linear-gradient(110deg, var(--color-wh-contest-grad-1) 0%, var(--color-wh-contest-grad-2) 68%, var(--color-wh-contest-grad-3) 100%);
  color: var(--color-text-on-brand);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.wh-contest-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, var(--color-wh-white-glow-035) 1px, transparent 1px);
  background-size: 72px 100%;
  pointer-events: none;
}

.wh-contest-entry__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-wh-white-glow-28);
  border-radius: 13px;
  background: var(--color-wh-white-glow-12);
  font-size: 16px;
  font-weight: 950;
}

.wh-contest-entry__copy {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.wh-contest-entry__copy small {
  grid-column: 1 / -1;
  color: var(--color-wh-contest-mint);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}

.wh-contest-entry__copy strong { font-size: 16px; }
.wh-contest-entry__copy > span:last-child {
  overflow: hidden;
  color: var(--color-wh-contest-blue-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-contest-entry__action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 22px;
  border-left: 1px solid var(--color-wh-white-glow-17);
  color: var(--color-wh-contest-action-text);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.wh-contest-entry__action b { color: var(--color-text-on-brand); font-size: 20px; line-height: 1; }
.wh-contest-entry:hover { filter: brightness(1.05); }

/* ============================
   칩 바 통합 헤더 요소
============================ */
.wh-cbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-wh-black-glow-06);
}

.wh-cbar-category {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand-icon);
  background: var(--color-wh-cbar-bg);
  border: 1px solid var(--color-wh-cbar-border);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.wh-cbar-title-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-wh-slate-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  transition: color 0.14s;
}
.wh-cbar-title-btn:hover { color: var(--color-brand-icon); }

.wh-cbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-wh-black-glow-06);
}

.wh-header-row__search { position: relative; }

.wh-header-row__search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-wh-slate-100);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 5px 10px;
  transition: border-color 0.14s, background 0.14s;
}
.wh-header-row__search-wrap:focus-within {
  border-color: var(--color-brand-icon);
  background: var(--color-bg-white);
}

.wh-header-row__search-icon { color: var(--color-text-placeholder); font-size: 14px; flex-shrink: 0; }

.wh-header-row__search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--color-wh-slate-800);
  width: 160px;
}
.wh-header-row__search-input::placeholder { color: var(--color-text-placeholder); }

.wh-header-row__search-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-placeholder);
  display: flex;
  align-items: center;
  font-size: 14px;
}
.wh-header-row__search-clear:hover { color: var(--color-text-muted); }

.wh-header-row__search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--color-wh-shadow-12);
  z-index: 999;
  max-height: 320px;
  overflow-y: auto;
}

.wh-header-row__search-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--color-text-placeholder);
  margin: 0;
  text-align: center;
}

.wh-header-row__search-group {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-wh-slate-100);
}
.wh-header-row__search-group:last-child { border-bottom: none; }

.wh-header-row__search-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-placeholder);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  padding: 4px 14px 2px;
}

.wh-header-row__search-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--color-wh-slate-700);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s;
}
.wh-header-row__search-item:hover { background: var(--color-bg-soft); }

.wh-header-row__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.wh-header-row__meta span { color: var(--color-text-placeholder); font-size: 10px; }
.wh-header-row__meta strong { color: var(--color-wh-slate-800); font-size: 13px; font-weight: 700; }

/* 맵 영역 상단 칩 바 (네이버 지도 스타일) */
.wh-chips-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  background: var(--color-wh-chipsbar-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-wh-black-glow-06);
  flex-shrink: 0;
}

/* 칩 스크롤 영역 (chips-bar 안의 가로 스크롤 컨테이너) */
.wh-chips-scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.wh-chips-scroll::-webkit-scrollbar { display: none; }

/* 드롭다운 칩 */
.wh-chip-dd { position: relative; flex-shrink: 0; }
.wh-chip-dd-menu {
  position: fixed;
  z-index: 9999;
  min-width: 168px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-wh-black-glow-10);
  border-radius: 14px;
  box-shadow: 0 8px 28px var(--color-wh-shadow-16);
  overflow: hidden;
}
.wh-chip-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-wh-slate-800);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.wh-chip-dd-item:hover { background: var(--color-bg-soft); }
.wh-chip-dd-sep { height: 1px; background: var(--color-wh-slate-100); margin: 2px 0; }
.wh-chip-dd-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.wh-chip-dd-soon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 99px;
}
.wh-chip-dd-item--active {
  color: #0f172a;
  font-weight: 700;
}
.wh-chip-dd-unified {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 11px;
  color: #6366f1;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.wh-chip-dd-unified:hover { text-decoration: underline; }


@media (max-width: 768px) {
  .wh-contest-entry {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 68px;
    gap: 10px;
    padding: 10px 14px;
  }

  .wh-contest-entry__mark { width: 36px; height: 36px; border-radius: 11px; }
  .wh-contest-entry__copy { grid-template-columns: 1fr; gap: 1px; }
  .wh-contest-entry__copy small { grid-column: auto; }
  .wh-contest-entry__copy > span:last-child { display: none; }
  .wh-contest-entry__action {
    padding-left: 12px;
    font-size: 0;
  }

  .wh-contest-entry__action b { font-size: 20px; }
}

.wh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-wh-black-glow-10);
  box-shadow: 0 2px 8px var(--color-shadow-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-wh-slate-800);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.14s, box-shadow 0.14s, transform 0.1s;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.wh-chip:hover {
  background: var(--color-bg-soft);
  box-shadow: 0 4px 14px var(--color-wh-shadow-14);
  transform: translateY(-1px);
}

.wh-chip-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 7px;
  box-sizing: border-box;
  background: var(--wh-chip-icon-bg, var(--color-bg-soft));
  color: var(--wh-chip-icon-color, var(--color-text-muted));
  stroke-width: 2;
}
.wh-chip-label { color: var(--color-wh-slate-800); }

.wh-chip:hover .wh-chip-icon {
  background: var(--wh-chip-icon-hover-bg, var(--wh-chip-icon-bg, var(--color-bg-soft)));
  color: var(--wh-chip-icon-color, var(--color-ws-accent, var(--color-accent)));
}

.wh-chip-icon--board       { --wh-chip-icon-color: #4f46e5; --wh-chip-icon-bg: rgba(79, 70, 229, .11); --wh-chip-icon-hover-bg: rgba(79, 70, 229, .17); }
.wh-chip-icon--todo        { --wh-chip-icon-color: #059669; --wh-chip-icon-bg: rgba(5, 150, 105, .11); --wh-chip-icon-hover-bg: rgba(5, 150, 105, .17); }
.wh-chip-icon--calendar    { --wh-chip-icon-color: #0284c7; --wh-chip-icon-bg: rgba(2, 132, 199, .11); --wh-chip-icon-hover-bg: rgba(2, 132, 199, .17); }
.wh-chip-icon--vote        { --wh-chip-icon-color: #d97706; --wh-chip-icon-bg: rgba(217, 119, 6, .12); --wh-chip-icon-hover-bg: rgba(217, 119, 6, .18); }
.wh-chip-icon--progress    { --wh-chip-icon-color: #0891b2; --wh-chip-icon-bg: rgba(8, 145, 178, .11); --wh-chip-icon-hover-bg: rgba(8, 145, 178, .17); }
.wh-chip-icon--finance     { --wh-chip-icon-color: #16a34a; --wh-chip-icon-bg: rgba(22, 163, 74, .11); --wh-chip-icon-hover-bg: rgba(22, 163, 74, .17); }
.wh-chip-icon--minutes     { --wh-chip-icon-color: #7c3aed; --wh-chip-icon-bg: rgba(124, 58, 237, .11); --wh-chip-icon-hover-bg: rgba(124, 58, 237, .17); }
.wh-chip-icon--graph       { --wh-chip-icon-color: #c026d3; --wh-chip-icon-bg: rgba(192, 38, 211, .10); --wh-chip-icon-hover-bg: rgba(192, 38, 211, .16); }
.wh-chip-icon--strategy    { --wh-chip-icon-color: #ea580c; --wh-chip-icon-bg: rgba(234, 88, 12, .10); --wh-chip-icon-hover-bg: rgba(234, 88, 12, .16); }
.wh-chip-icon--recruit     { --wh-chip-icon-color: #e11d48; --wh-chip-icon-bg: rgba(225, 29, 72, .10); --wh-chip-icon-hover-bg: rgba(225, 29, 72, .16); }
.wh-chip-icon--integration { --wh-chip-icon-color: #2563eb; --wh-chip-icon-bg: rgba(37, 99, 235, .10); --wh-chip-icon-hover-bg: rgba(37, 99, 235, .16); }
.wh-chip-icon--settings    { --wh-chip-icon-color: #64748b; --wh-chip-icon-bg: rgba(100, 116, 139, .11); --wh-chip-icon-hover-bg: rgba(100, 116, 139, .17); }
.wh-chip-icon--success     { --wh-chip-icon-color: #16a34a; --wh-chip-icon-bg: rgba(22, 163, 74, .11); --wh-chip-icon-hover-bg: rgba(22, 163, 74, .17); }
.wh-chip-icon--danger      { --wh-chip-icon-color: #dc2626; --wh-chip-icon-bg: rgba(220, 38, 38, .10); --wh-chip-icon-hover-bg: rgba(220, 38, 38, .16); }

.wh-chip-vote-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
}

.wh-chip-vote-count svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

.wh-chip-dd-item > svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--color-text-muted);
  stroke-width: 1.8;
}

.wh-chip-dd-item > .wh-chip-dd-icon--violet  { color: #7c3aed; }
.wh-chip-dd-item > .wh-chip-dd-icon--blue    { color: #2563eb; }
.wh-chip-dd-item > .wh-chip-dd-icon--emerald { color: #059669; }
.wh-chip-dd-item > .wh-chip-dd-icon--amber   { color: #d97706; }

.wh-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-wh-red-500);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.wh-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-wh-indigo-500);
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 800;
}

/* 팀원 공고 칩: 빨강 계열 */
.wh-chip--recruit {
  background: var(--color-danger-soft);
  border-color: var(--color-wh-danger-shadow-20);
  color: var(--color-danger);
}

.wh-chip--recruit:hover {
  background: var(--color-wh-danger-hover-bg);
  box-shadow: 0 4px 14px var(--color-wh-danger-shadow-15);
}

.wh-chip--recruit .wh-chip-label { color: var(--color-danger); }

/* AI 포트폴리오 칩 (완료 프로젝트) */
.wh-chip--portfolio {
  background: var(--color-success-soft);
  border-color: var(--color-wh-green-border-25);
  color: var(--color-success);
}
.wh-chip--portfolio:hover:not(:disabled) {
  background: var(--color-wh-green-soft-2);
  box-shadow: 0 4px 14px var(--color-wh-green-shadow-15);
}
.wh-chip--portfolio:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-chip--portfolio .wh-chip-label { color: var(--color-success); }

/* 프로젝트 마감 칩 */
.wh-chip--close {
  background: var(--color-accent-soft);
  border-color: var(--color-wh-indigo-glow-25);
  color: var(--color-wh-indigo-500);
}
.wh-chip--close:hover:not(:disabled) {
  background: var(--color-wh-purple-100);
  box-shadow: 0 4px 14px var(--color-wh-indigo-glow-15);
}
.wh-chip--close:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-chip--close .wh-chip-label { color: var(--color-wh-indigo-500); }

/* 마감 취소 (리더 전용) */
.wh-chip--close-reset {
  background: var(--color-danger-soft);
  border-color: var(--color-wh-red-shadow-25);
  color: var(--color-danger);
}
.wh-chip--close-reset:hover:not(:disabled) {
  background: var(--color-wh-danger-hover-bg);
  box-shadow: 0 4px 14px var(--color-wh-red-shadow-15);
}
.wh-chip--close-reset:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-chip--close-reset .wh-chip-label { color: var(--color-danger); }

/* 마무리 투표 진행 중 (리더 — 읽기 전용) */
.wh-chip--vote-pending {
  background: var(--color-wh-amber-soft);
  border-color: var(--color-wh-amber-ring);
  color: var(--color-wh-amber-800);
}
.wh-chip--vote-pending .wh-chip-label { color: var(--color-wh-amber-700); font-weight: 700; }

/* 동의 완료 (팀원) */
.wh-chip--vote-done {
  background: var(--color-success-soft);
  border-color: var(--color-wh-green-border-25);
  color: var(--color-wh-green-900);
}
.wh-chip--vote-done .wh-chip-label { color: var(--color-wh-green-700); font-weight: 700; }

/* 동의하기 버튼 (팀원 — 미투표) */
.wh-chip--vote-request {
  background: var(--color-wh-amber-soft);
  border-color: var(--color-wh-amber-ring-40);
  color: var(--color-wh-amber-800);
  animation: wh-vote-pulse 2s ease-in-out infinite;
}
.wh-chip--vote-request:hover:not(:disabled) {
  background: var(--color-wh-amber-100);
  box-shadow: 0 4px 14px var(--color-wh-amber-shadow-20);
}
.wh-chip--vote-request:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-chip--vote-request .wh-chip-label { color: var(--color-wh-amber-700); font-weight: 700; }

@keyframes wh-vote-pulse {
  0%, 100% { border-color: var(--color-wh-amber-ring-40); }
  50%       { border-color: var(--color-wh-amber-pulse); }
}

/* 반대하기 칩 */
.wh-chip--vote-reject {
  background: var(--color-danger-soft);
  border-color: var(--color-wh-danger-border-30);
  color: var(--color-wh-red-800);
}

.wh-chip--vote-reject:hover:not(:disabled) {
  background: var(--color-wh-rose-hover-bg);
  box-shadow: 0 4px 14px var(--color-wh-danger-shadow-15);
}

.wh-chip--vote-reject:disabled { opacity: 0.6; cursor: not-allowed; }
.wh-chip--vote-reject .wh-chip-label { color: var(--color-danger); font-weight: 700; }

/* 반대 완료 배너 */
.wh-vote-banner__done--disagree {
  background: var(--color-wh-danger-hover-bg);
  color: var(--color-danger-strong);
}

.wh-chip-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  margin-left: 2px;
  animation: wh-chip-pulse 1.4s ease-in-out infinite;
}

@keyframes wh-chip-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.75); }
}

/* AI 칩: 보라 계열 */
.wh-chip--ai {
  background: var(--color-wh-purple-25);
  border-color: var(--color-wh-purple-ring-20);
  color: var(--color-accent-hover);
}

.wh-chip--ai:hover {
  background: var(--color-wh-purple-hover-2);
  box-shadow: 0 4px 14px var(--color-wh-purple-shadow-15);
}

.wh-chip--ai .wh-chip-label { color: var(--color-accent-hover); }

/* AI팀원 토글 칩 */
.wh-chip--ai-toggle {
  background: var(--color-wh-purple-25);
  border-color: var(--color-wh-purple-ring-25);
  color: var(--color-accent-hover);
}

.wh-chip--ai-toggle:hover {
  background: var(--color-wh-purple-hover-2);
}

/* ── 마감 투표 배너 ─────────────────────────────────────────── */
.wh-vote-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--color-wh-amber-soft) 0%, var(--color-wh-amber-100) 100%);
  border-bottom: 2px solid var(--color-wh-amber-ring-35);
  border-top: 2px solid var(--color-wh-amber-ring-35);
  margin-bottom: 0;
}

.wh-vote-banner__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.wh-vote-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.wh-vote-banner__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-wh-amber-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wh-vote-banner__count {
  font-size: 12px;
  color: var(--color-wh-amber-700);
}

.wh-vote-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.wh-vote-banner__btn {
  flex-shrink: 0;
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.wh-vote-banner__btn--agree {
  background: var(--color-success);
  color: var(--color-text-on-brand);
  animation: wh-vote-pulse 2s ease-in-out infinite;
}

.wh-vote-banner__btn--agree:hover:not(:disabled) {
  background: var(--color-wh-green-700);
  transform: translateY(-1px);
}

.wh-vote-banner__btn--disagree {
  background: var(--color-danger);
  color: var(--color-text-on-brand);
}

.wh-vote-banner__btn--disagree:hover:not(:disabled) {
  background: var(--color-danger-strong);
  transform: translateY(-1px);
}

.wh-vote-banner__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  animation: none;
}

.wh-vote-banner__done {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-wh-green-700);
  background: var(--color-wh-green-soft-2);
  padding: 6px 14px;
  border-radius: 8px;
}

.wh-vote-banner__notify-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: transparent;
  color: var(--color-wh-amber-800);
  border: 1.5px solid var(--color-wh-amber-ring-50);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.wh-vote-banner__notify-btn:hover:not(:disabled) {
  background: var(--color-wh-amber-hover-bg);
}

.wh-vote-banner__notify-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="dark"] .wh-vote-banner {
  background: linear-gradient(135deg, var(--color-wh-vote-grad-1) 0%, var(--color-wh-vote-grad-2) 100%);
  border-color: var(--color-wh-amber-ring);
}
[data-theme="dark"] .wh-vote-banner__title { color: var(--color-wh-vote-title); }
[data-theme="dark"] .wh-vote-banner__count { color: var(--color-wh-vote-count); }
[data-theme="dark"] .wh-vote-banner__btn { background: var(--color-wh-vote-btn); }
[data-theme="dark"] .wh-vote-banner__done { background: var(--color-wh-vote-done-bg); color: var(--color-wh-vote-done-text); }

.wh-chip--ai-toggle--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-brand);
  box-shadow: 0 2px 10px var(--color-wh-purple-ring-35);
}

.wh-chip--ai-toggle--active .wh-chip-label { color: var(--color-text-on-brand); }

.wh-chip-toggle-arrow {
  font-size: 8px;
  margin-left: 2px;
  opacity: 0.7;
}

/* 구분선 */
.wh-chips-divider {
  width: 1px;
  height: 22px;
  background: var(--color-wh-black-glow-12);
  flex-shrink: 0;
}

/* =========================
   맵 전체 폭 + 오버레이 위젯
========================= */

/* Team Map Wrapper — 전체 폭, 하단 오버레이 기준점 */
.workspace-home__map-wrapper {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Keep every surface in the team workspace on one typography system. */
/* 캔버스 상단 바가 피해야 할 좌우 폭.
   왼쪽: .arky-outline (left 10px + 292px, 접히면 48px)
   오른쪽: .workspace-home__ai-dock (right 0 + 380px, 접히면 52px)
   AiCanvasArky.css의 .aic-arky-bar가 이 값을 읽어 패널과 함께 움직인다. */
.workspace-home__map-wrapper--canvas {
  --arky-bar-left: 316px;
  /* AI 도크 폭 — 사용자가 가장자리를 끌어 바꾸면 JS가 이 값을 갱신한다.
     상단 바 여백도 같은 값을 읽어 도크와 함께 움직인다. */
  --ai-dock-width: 380px;
  /* 도크의 실제 폭(52vw로 묶인 값) + 오른쪽 여백 10px + 간격 10px */
  --arky-bar-right: calc(min(var(--ai-dock-width), 52vw) + 20px);
}
.workspace-home__map-wrapper--canvas.is-outline-collapsed { --arky-bar-left: 72px; }

/* 좁은 화면에서 왼쪽 패널은 자리를 나눠 쓰는 칸이 아니라 화면을 덮는 오버레이다.
   그런데도 상단 바를 316px 밀어 두면, 패널을 닫아 놓았을 때조차 제목이 손바닥만 한
   칸에 갇혀 잘린다. 여기서는 접힌 레일(48px)만 피하고, 패널이 열리면 그 아래로
   들어간다 — 어차피 패널이 덮고 있어 보일 필요가 없다. */
@media (max-width: 860px) {
  .workspace-home__map-wrapper--canvas,
  .workspace-home__map-wrapper--canvas.is-outline-collapsed { --arky-bar-left: 64px; }
}
.workspace-home__map-wrapper--canvas.is-ai-chat-collapsed { --arky-bar-right: 72px; }

.workspace-home__map-wrapper--canvas {
  font-family:
    "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.workspace-home__map-wrapper--canvas :where(button, input, textarea, select) {
  font-family: inherit;
  letter-spacing: 0;
}

.workspace-home__canvas-host {
  position: absolute;
  inset: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--color-bg-soft);
}

/* 왼쪽 .arky-outline과 좌우 대칭.
   왼쪽:  inset: 10px auto 10px 10px  (위·아래·왼쪽 10px)
   오른쪽: inset: 10px 10px 10px auto  (위·아래·오른쪽 10px)
   두 패널이 화면 가장자리에서 같은 간격으로 떠 있어야 한다. */
.workspace-home__ai-dock {
  position: absolute;
  inset: 10px 10px 10px auto;
  z-index: 90;
  /* 드래그로 저장해 둔 폭이 지나치게 크면 화면을 통째로 덮어버린다.
     화면의 절반 남짓을 넘지 않도록 묶는다. */
  width: min(var(--ai-dock-width), 52vw);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-wh-black-glow-10);
  border-radius: 18px;
  background: var(--color-bg-white);
  box-shadow: 0 16px 44px rgba(28, 30, 38, .08);
  transition: width .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease;
}

.workspace-home__ai-dock .arky-dock__body {
  overflow: hidden;
}

.workspace-home__ai-dock .arky-dock__pane {
  position: relative;
  overflow: hidden;
}

.workspace-home__ai-dock .arky-dock__pane > .workspace-chat {
  position: relative !important;
  inset: auto !important;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  padding-bottom: 0;
}

.workspace-home__ai-dock .workspace-chat__messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  justify-content: flex-start;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 스크롤바가 둥근 패널 오른쪽에 세로선처럼 걸려 "턱"으로 보인다.
   트랙을 없애고 얇게 만들어, 마우스를 올렸을 때만 손잡이가 흐리게 보이게 한다. */
.workspace-home__ai-dock .workspace-chat__messages,
.workspace-home__ai-dock .arky-dock__pane--scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.workspace-home__ai-dock .workspace-chat__messages:hover,
.workspace-home__ai-dock .arky-dock__pane--scroll:hover {
  scrollbar-color: rgba(20, 20, 25, .18) transparent;
}
.workspace-home__ai-dock .workspace-chat__messages::-webkit-scrollbar,
.workspace-home__ai-dock .arky-dock__pane--scroll::-webkit-scrollbar {
  width: 6px;
}
.workspace-home__ai-dock .workspace-chat__messages::-webkit-scrollbar-track,
.workspace-home__ai-dock .arky-dock__pane--scroll::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
}
.workspace-home__ai-dock .workspace-chat__messages::-webkit-scrollbar-thumb,
.workspace-home__ai-dock .arky-dock__pane--scroll::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: transparent;
}
.workspace-home__ai-dock .workspace-chat__messages:hover::-webkit-scrollbar-thumb,
.workspace-home__ai-dock .arky-dock__pane--scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(20, 20, 25, .18);
}
[data-theme="dark"] .workspace-home__ai-dock .workspace-chat__messages:hover,
[data-theme="dark"] .workspace-home__ai-dock .arky-dock__pane--scroll:hover {
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
[data-theme="dark"] .workspace-home__ai-dock .workspace-chat__messages:hover::-webkit-scrollbar-thumb,
[data-theme="dark"] .workspace-home__ai-dock .arky-dock__pane--scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .2);
}

/* 팀공간의 고정 AI 독은 검색만 남긴 간결한 헤더를 사용한다. */
.workspace-home__ai-dock .workspace-chat__channel-switcher,
.workspace-home__ai-dock .workspace-chat__channel-clear-ai,
.workspace-home__ai-dock .workspace-chat__channel-notify,
.workspace-home__ai-dock .workspace-chat__memory-toggle,
.workspace-home__ai-dock .workspace-chat__topic-bar {
  display: none !important;
}

.workspace-home__ai-dock .workspace-chat__channel-header {
  position: absolute;
  top: -45px;
  right: 46px;
  z-index: 48;
  justify-content: flex-end;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
}

.workspace-home__ai-dock .workspace-chat__channel-header.is-search-open {
  left: 8px;
  right: 46px;
  justify-content: flex-start;
  padding: 2px 4px;
  background: var(--color-bg-white);
}

.workspace-home__ai-dock .workspace-chat__channel-search {
  flex: 1;
}

.workspace-home__map-wrapper--canvas.is-ai-chat-collapsed .workspace-home__ai-dock { width: 52px; box-shadow: 0 8px 24px rgba(28, 30, 38, .06); }

.workspace-home__map-wrapper:has(.workspace-home__canvas-host) .wh-sidebar {
  top: 10px;
  bottom: 10px;
}

/* 맵 위에 떠 있는 하단 바 패널 */
.workspace-home__map-float-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  pointer-events: none;
}

.workspace-home__float-widget {
  background: var(--color-wh-white-glow-88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-wh-white-glow-50);
  padding: 8px 16px 10px;
  pointer-events: all;
}

.workspace-home__float-widget:first-child {
  border-top: none;
  border-bottom: 1px solid var(--color-wh-black-glow-06);
}

/* 마지막 바 하단 모서리를 카드 radius와 맞춤 */
.workspace-home__float-widget:last-child {
  border-radius: 0 0 var(--wh-radius-xl) var(--wh-radius-xl);
}

.workspace-home__float-widget-title {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--wh-slate-500);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* 공용 라운지 바 */
.workspace-home__float-lounge-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.workspace-home__float-lounge-row::-webkit-scrollbar {
  display: none;
}

.workspace-home__float-lounge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--wh-border);
  background: var(--color-wh-white-glow-70);
  cursor: pointer;
  flex-shrink: 0;
  min-width: 68px;
  text-align: center;
  transition: background 0.15s, box-shadow 0.15s;
  font: inherit;
}

.workspace-home__float-lounge-btn:hover {
  background: var(--color-wh-purple-soft);
  box-shadow: 0 2px 8px var(--color-wh-purple-shadow-12);
}

.workspace-home__float-lounge-icon {
  font-size: 20px;
  line-height: 1;
}

.workspace-home__float-lounge-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--wh-slate-700);
  white-space: nowrap;
}

.workspace-home__float-lounge-value {
  font-size: 9px;
  color: var(--wh-slate-400);
  white-space: nowrap;
}

/* AI 운영 센터 바 */
.workspace-home__float-ai-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.workspace-home__float-ai-row::-webkit-scrollbar {
  display: none;
}

.workspace-home__float-ai-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--wh-border);
  background: var(--color-wh-white-glow-70);
  cursor: pointer;
  flex-shrink: 0;
  text-align: left;
  transition: background 0.15s, box-shadow 0.15s;
  font: inherit;
}

.workspace-home__float-ai-btn:hover {
  background: var(--color-wh-purple-hover-bg);
  box-shadow: 0 2px 8px var(--color-wh-purple-shadow-10);
}

.workspace-home__float-ai-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.workspace-home__float-ai-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--wh-slate-700);
  white-space: nowrap;
  display: block;
}

.workspace-home__float-ai-value {
  font-size: 9px;
  color: var(--wh-slate-400);
  white-space: nowrap;
  display: block;
}

/* =========================
   Info grid (Quick cards)
========================= */

.workspace-home__quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workspace-home__quick-card {
  position: relative;
  padding: 20px 20px 18px;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-lg);
  background: var(--wh-slate-0);
  box-shadow: var(--wh-shadow-xs);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  overflow: hidden;
}

.workspace-home__quick-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wh-indigo-200), transparent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.workspace-home__quick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wh-shadow-md);
  border-color: var(--wh-border-strong);
}

.workspace-home__quick-card:hover::before {
  opacity: 1;
}

.workspace-home__quick-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--wh-radius-sm);
  background: var(--wh-indigo-50);
  border: 1px solid var(--wh-indigo-100);
  margin-bottom: 14px;
  color: var(--wh-indigo-600);
  font-size: 16px;
}

.workspace-home__quick-card h3 {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--wh-slate-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.workspace-home__quick-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--wh-slate-800);
  font-weight: 700;
  word-break: keep-all;
}

/* =========================
   Section layout
========================= */

.workspace-home__grid {
  display: grid;
  gap: 18px;
}

.workspace-home__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-home__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.workspace-home__section-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: var(--wh-slate-900);
  letter-spacing: -0.025em;
}

.workspace-home__section-caption {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-slate-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--wh-slate-500);
}

/* =========================
   Member cards
========================= */

.workspace-home__members {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workspace-home__member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-lg);
  background: var(--wh-slate-0);
  box-shadow: var(--wh-shadow-xs);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease;
}

.workspace-home__member-card:hover {
  transform: translateY(-1px);
  border-color: var(--wh-border-strong);
  box-shadow: var(--wh-shadow-sm);
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-wh-hero-grad-1) 100%);
}

.workspace-home__member-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.workspace-home__member-avatar-button,
.workspace-home__member-avatar.static {
  width: 48px;
  height: 48px;
  border-radius: var(--wh-radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}

.workspace-home__member-avatar-button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--wh-slate-0), 0 0 0 3px var(--wh-border);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}

.workspace-home__member-avatar-button:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 0 2px var(--wh-slate-0),
    0 0 0 3px var(--wh-indigo-400),
    0 6px 16px var(--color-wh-indigo-glow-20);
}

.workspace-home__member-avatar.static {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wh-slate-100);
  box-shadow: 0 0 0 2px var(--wh-slate-0), 0 0 0 3px var(--wh-border);
}

.workspace-home__member-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workspace-home__member-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-home__member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-home__member-name-row strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--wh-slate-900);
  letter-spacing: -0.01em;
}

.workspace-home__member-info p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wh-slate-500);
  font-weight: 600;
}

.workspace-home__role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-slate-100);
  border: 1px solid var(--wh-slate-200);
  color: var(--wh-slate-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.workspace-home__role-badge.owner {
  background: var(--color-wh-amber-soft);
  border-color: var(--color-wh-amber-border);
  color: var(--color-wh-amber-800);
}

.workspace-home__role-badge.modifier {
  background: var(--color-wh-cyan-soft);
  border-color: var(--color-wh-cyan-border);
  color: var(--color-wh-cyan-text);
}

.workspace-home__member-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =========================
   Action buttons
========================= */

.workspace-home__profile-button,
.workspace-home__role-select,
.workspace-home__owner-transfer-button,
.workspace-home__kick-button,
.workspace-home__leave-button,
.workspace-home__delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--wh-radius-md);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    opacity 0.14s ease;
}

.workspace-home__role-select {
  min-width: 112px;
  background: var(--color-wh-cyan-soft);
  border-color: var(--color-wh-cyan-border);
  color: var(--color-wh-cyan-text);
  appearance: auto;
}

.workspace-home__role-select:focus {
  outline: 2px solid var(--color-wh-cyan-focus-ring);
  outline-offset: 2px;
}

.workspace-home__profile-button {
  background: var(--wh-slate-50);
  border-color: var(--wh-border);
  color: var(--wh-slate-700);
}

.workspace-home__profile-button:hover:not(:disabled) {
  background: var(--wh-slate-100);
  border-color: var(--wh-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--wh-shadow-xs);
}

.workspace-home__owner-transfer-button {
  background: var(--color-wh-blue-soft);
  border-color: var(--color-wh-blue-border);
  color: var(--color-wh-blue-text);
}

.workspace-home__owner-transfer-button:hover:not(:disabled) {
  background: var(--color-wh-blue-hover-bg);
  border-color: var(--color-wh-blue-hover-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-wh-blue-shadow);
}

.workspace-home__profile-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workspace-home__kick-button {
  background: var(--color-danger-soft);
  border-color: var(--color-wh-rose-border);
  color: var(--color-wh-rose-text);
}

.workspace-home__kick-button:hover:not(:disabled) {
  background: var(--color-wh-rose-hover-bg);
  border-color: var(--color-wh-rose-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-wh-rose-shadow);
}

.workspace-home__leave-button {
  width: 100%;
  background: var(--color-wh-solid-cta);
  color: var(--color-text-on-brand);
  box-shadow: 0 4px 16px var(--color-wh-shadow-18);
}

.workspace-home__leave-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--color-wh-shadow-24);
}

.workspace-home__delete-button {
  width: 100%;
  background: var(--color-danger);
  color: var(--color-text-on-brand);
  box-shadow: 0 4px 16px var(--color-wh-danger-shadow-20);
}

.workspace-home__delete-button:hover:not(:disabled) {
  background: var(--color-danger-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--color-wh-danger-shadow-28);
}

.workspace-home__profile-button:disabled,
.workspace-home__role-select:disabled,
.workspace-home__owner-transfer-button:disabled,
.workspace-home__kick-button:disabled,
.workspace-home__leave-button:disabled,
.workspace-home__delete-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* =========================
   Empty / error
========================= */

.workspace-home__empty {
  padding: 36px 20px;
  border: 1.5px dashed var(--wh-slate-200);
  border-radius: var(--wh-radius-lg);
  background: var(--wh-slate-50);
  text-align: center;
  color: var(--wh-slate-400);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 600;
}

.workspace-home__error-text {
  margin: 8px 0 0;
  color: var(--wh-slate-500);
  font-size: 14px;
  line-height: 1.65;
}

/* =========================
   Loading skeleton
========================= */

.workspace-home__hero--loading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
}

.workspace-home__loading-block,
.workspace-home__loading-stat {
  border-radius: 14px;
  background: linear-gradient(90deg, var(--color-bg-soft) 25%, var(--color-wh-loading-bg) 50%, var(--color-bg-soft) 75%);
  background-size: 400% 100%;
  animation: workspace-home-skeleton 1.5s ease infinite;
}

.workspace-home__loading-block {
  width: 100%;
  height: 110px;
}

.workspace-home__loading-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.workspace-home__loading-stat {
  height: 80px;
}

@keyframes workspace-home-skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* =========================
   Manage panel
========================= */

.workspace-home__manage-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-xl);
  background: var(--wh-slate-0);
  box-shadow: var(--wh-shadow-xs);
}

.workspace-home__manage-toggle {
  width: 100%;
  min-height: 58px;
  border: 0;
  background: transparent;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--wh-slate-800);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.workspace-home__manage-toggle:hover {
  background: var(--wh-slate-50);
}

.workspace-home__manage-toggle.open {
  border-bottom: 1px solid var(--wh-border);
}

.workspace-home__manage-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--wh-radius-pill);
  background: var(--wh-slate-100);
  border: 1px solid var(--wh-border);
  color: var(--wh-slate-500);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.14s ease, transform 0.2s ease;
}

.workspace-home__manage-toggle.open .workspace-home__manage-toggle-icon {
  background: var(--wh-indigo-50);
  border-color: var(--wh-indigo-200);
  color: var(--wh-indigo-700);
}

.workspace-home__manage-panel {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workspace-home__manage-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--wh-radius-md);
  background: var(--wh-slate-50);
  border: 1px solid var(--wh-border);
}

.workspace-home__manage-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--wh-slate-400);
  font-weight: 600;
}

/* =========================
   Card inner padding utility
========================= */

.workspace-home__grid--single .card {
  padding: 24px 22px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1080px) {
  .workspace-home__hero-badges {
    gap: 6px;
  }
}

@media (max-width: 900px) {
  .workspace-home__quick-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .workspace-home__loading-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .workspace-home__hero-badges--desktop {
    display: flex;
    width: auto;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .workspace-home {
    gap: 14px;
  }

  .workspace-home__hero-inner {
    padding: 24px 20px 20px;
    gap: 20px;
  }


  .workspace-home__hero-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .workspace-home__hero-badges--desktop {
    display: none;
  }

  .workspace-home__hero-badges--mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .workspace-home__hero-badge {
    min-width: 0;
    justify-content: center;
    padding: 7px 8px;
    border-radius: var(--wh-radius-sm);
  }

  .workspace-home__hero-badge-label,
  .workspace-home__hero-badge-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-home__hero-badge-label {
    font-size: 10.5px;
  }

  .workspace-home__hero-badge-value {
    font-size: 12px;
  }

  .workspace-home__title {
    font-size: 24px;
  }

  .workspace-home__title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-home__title-input {
    min-height: 46px;
    font-size: 15px;
  }

  .workspace-home__quick-card {
    padding: 16px;
    border-radius: var(--wh-radius-md);
  }

  .workspace-home__member-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .workspace-home__member-right {
    width: 100%;
    justify-content: stretch;
  }

  .workspace-home__profile-button,
.workspace-home__role-select,
.workspace-home__owner-transfer-button,
.workspace-home__kick-button,
.workspace-home__leave-button,
.workspace-home__delete-button,
  .workspace-home__title-save-button,
  .workspace-home__title-cancel-button,
  .workspace-home__view-project-button {
    width: 100%;
  }

  .workspace-home__title-edit-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-home__manage-toggle {
    min-height: 54px;
    padding: 0 18px;
  }

  .workspace-home__manage-panel {
    padding: 16px 18px 20px;
  }

  .workspace-home__grid--single .card {
    padding: 20px 18px;
  }
}

@media (max-width: 480px) {
  .workspace-home__hero-inner {
    padding: 20px 16px 18px;
  }


  .workspace-home__hero-badges--mobile {
    grid-template-columns: 1fr;
  }

  .workspace-home__hero-badge {
    justify-content: flex-start;
  }

  .workspace-home__member-left {
    gap: 12px;
  }

  .workspace-home__member-avatar-button,
  .workspace-home__member-avatar.static {
    width: 44px;
    height: 44px;
  }

  .workspace-home__member-name-row strong {
    font-size: 14px;
  }

  .workspace-home__section-head h3 {
    font-size: 16px;
  }

  .workspace-home__grid--single .card {
    padding: 18px 16px;
  }

  .workspace-home__quick-card-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* =========================
   Team Map 헤더
========================= */

/* Header 44px 고정 높이, 배경 85% 투명도 */
.workspace-home__teammap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 10px 20px;
  gap: 16px;
  background: var(--color-wh-white-glow-85);
  backdrop-filter: blur(6px);
}

.workspace-home__teammap-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.workspace-home__teammap-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-wh-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workspace-home__teammap-header-icon svg {
  color: var(--color-accent);
}

.workspace-home__teammap-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--wh-slate-900);
  margin: 0 0 2px;
}

.workspace-home__teammap-subtitle {
  font-size: 12px;
  color: var(--wh-slate-400);
  margin: 0;
}

.workspace-home__teammap-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.workspace-home__teammap-online {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workspace-home__teammap-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-wh-green);
  flex-shrink: 0;
}

.workspace-home__teammap-online-label {
  font-size: 13px;
  color: var(--wh-slate-600);
  white-space: nowrap;
}

.workspace-home__teammap-online-avatars {
  display: flex;
  flex-direction: row-reverse;
}

.workspace-home__teammap-online-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-white);
  object-fit: cover;
  margin-left: -8px;
  background: var(--wh-slate-100);
}

.workspace-home__teammap-online-avatar:last-child {
  margin-left: 0;
}

.workspace-home__teammap-online-more {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-white);
  background: var(--wh-slate-200);
  font-size: 10px;
  font-weight: 600;
  color: var(--wh-slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
}

/* Item 20: invite 버튼 → 테두리만 있는 투명 스타일 */
.workspace-home__teammap-invite-btn {
  padding: 5px 13px;
  border-radius: var(--wh-radius-pill);
  background: transparent;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-wh-purple-ring-35);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.workspace-home__teammap-invite-btn:hover {
  background: var(--color-wh-purple-hover-bg-2);
  border-color: var(--color-wh-purple-ring-60);
}

/* =========================
   하단 허브 그리드
========================= */

.workspace-home__hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.workspace-home__hub-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--wh-slate-800);
  margin: 0 0 14px;
}

/* 공용 라운지 */

.workspace-home__lounge-hub {
  padding: 20px 20px 18px;
}

.workspace-home__lounge-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.workspace-home__lounge-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1px solid var(--wh-border);
  background: var(--wh-slate-50);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  text-align: center;
}

.workspace-home__lounge-link-card:hover {
  background: var(--color-wh-purple-soft);
  box-shadow: 0 2px 8px var(--color-wh-purple-shadow-10);
}

/* 13. Lounge 아이콘 24px */
.workspace-home__lounge-link-icon {
  font-size: 24px;
  line-height: 1;
}

.workspace-home__lounge-link-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--wh-slate-700);
}

.workspace-home__lounge-link-value {
  font-size: 10px;
  color: var(--wh-slate-400);
}

/* AI 운영 센터 */

.workspace-home__ai-hub {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
}

.workspace-home__ai-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}

/* 12. AI 카드 padding 16→20 */
.workspace-home__ai-hub-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  border-radius: 10px;
  background: var(--wh-slate-50);
  border: 1px solid var(--wh-border);
}

.workspace-home__ai-hub-item-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.workspace-home__ai-hub-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-home__ai-hub-item-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--wh-slate-700);
}

.workspace-home__ai-hub-item-value {
  font-size: 10px;
  color: var(--wh-slate-400);
  line-height: 1.4;
}

/* 14. AI 상세 보기 버튼 — 보라 덜하게, 투명 테두리 스타일 */
.workspace-home__ai-hub-more {
  margin-top: 14px;
  width: 100%;
  padding: 9px;
  border-radius: 10px;
  background: var(--color-wh-purple-hover-bg-3);
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--color-wh-purple-ring-20);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}

.workspace-home__ai-hub-more:hover {
  background: var(--color-wh-purple-hover-bg-4);
  border-color: var(--color-wh-purple-ring-35);
}

/* ── 모바일 라운지 팝업 ── */
.wh-lounge-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-wh-lounge-backdrop);
  display: flex;
  align-items: flex-end;
  animation: wh-fade-in 0.18s ease both;
}

@keyframes wh-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wh-lounge-popup {
  width: 100%;
  height: 78vh;
  background: var(--color-bg-white);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wh-slide-up 0.22s ease both;
}

@keyframes wh-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.wh-lounge-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--color-wh-slate-100);
  flex-shrink: 0;
}

.wh-lounge-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
}

.wh-lounge-popup-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: var(--color-wh-slate-100);
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wh-lounge-popup .workspace-sidebar {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.wh-zone-popup {
  /* 높이는 .wh-lounge-popup과 동일한 60vh 사용 */
}

.wh-zone-popup-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 768px) {
  .wh-sidebar {
    display: none;
  }
  .workspace-home__canvas-host {
    inset: 0;
    border-left: 0;
  }
  /* ── 좁은 화면: 캔버스와 채팅을 한 번에 하나씩 본다 ──────────────────
     데스크톱은 캔버스 위에 두 패널이 떠 있는 구조인데, 모바일에서 그대로
     두면 상단 칩과 채팅이 서로 겹친다. */

  /* 상단 칩은 좌우 레일 옆에 붙는다.
     왼쪽 레일: inset 8px + 폭 48px, 오른쪽 접힌 채팅 버튼: inset 8px + 44px.
     각각 8px 간격을 두고 비켜간다. */
  .workspace-home__map-wrapper--canvas,
  .workspace-home__map-wrapper--canvas.is-outline-collapsed,
  .workspace-home__map-wrapper--canvas.is-ai-chat-collapsed {
    --arky-bar-left: 64px;
    --arky-bar-right: 60px;
  }
  /* 사이드바를 펼치면 화면을 덮으므로 상단 바는 숨긴다 (채팅과 동일). */
  .workspace-home__map-wrapper--canvas:not(.is-outline-collapsed) .aic-arky-bar {
    display: none;
  }

  /* 채팅을 열면 화면을 덮는다. 상단 바(z-index 100)보다 위여야 안 겹친다.
     접힌 버튼과 같은 오른쪽 기준으로 고정해야, 펼칠 때 오른쪽 버튼 자리에서
     자연스럽게 넓어진다. (left 기준으로 두면 왼쪽에서 튀어나온다) */
  .workspace-home__ai-dock {
    inset: 0 0 0 auto;
    z-index: 120;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .workspace-home__map-wrapper--canvas:not(.is-ai-chat-collapsed) .aic-arky-bar {
    display: none;
  }

  /* 접으면 오른쪽 위 동그란 버튼 하나만 남고 캔버스가 온전히 보인다. */
  .workspace-home__map-wrapper--canvas.is-ai-chat-collapsed .workspace-home__ai-dock {
    inset: 8px 8px auto auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(28, 30, 38, .16);
  }
  .workspace-home__map-wrapper--canvas.is-ai-chat-collapsed .arky-dock__tabs {
    flex-direction: row;
    padding: 7px;
  }
  .workspace-home__map-wrapper--canvas.is-ai-chat-collapsed .arky-dock__tabs button:not(.arky-dock__collapse) {
    display: none;
  }
  .workspace-home__map-wrapper--canvas.is-ai-chat-collapsed .arky-dock__collapse {
    margin: 0;
  }

  /* 채널 사이드바도 펼칠 때만 덮는다. */
  .arky-outline:not(.arky-outline--collapsed) {
    inset: 8px;
    width: auto;
    z-index: 130;
  }

  /* 터치에서는 드래그로 폭을 바꿀 일이 없다. */
  .arky-dock__resizer { display: none; }

  /* 카드는 화면 폭에 맞춘다 (데스크톱 문서 폭 620px은 너무 넓다). */
  .aic-shell { --aic-card-width: min(88vw, 620px); }
}

@media (max-width: 768px) {
  .workspace-home__hub-grid {
    grid-template-columns: 1fr;
  }

  .workspace-home__lounge-links {
    grid-template-columns: repeat(4, 1fr);
  }

  .workspace-home__teammap-header {
    flex-wrap: wrap;
    gap: 12px;
  }
}


/* ── 활성 칩 강조 ── */
.wh-chip--active {
  background: var(--color-wh-chip-active-bg);
  border-color: var(--color-wh-chip-active-bg);
  color: var(--color-text-on-brand);
}
.wh-chip--active .wh-chip-label { color: var(--color-text-on-brand); }
.wh-chip--active .wh-chip-icon { filter: none; }

/* ── 게스트 초대 패널 위치 ── */
.wh-guest-panel-wrap {
  position: absolute;
  top: 52px;
  right: 16px;
  z-index: 200;
}

/* ── 팀공간 개설 환영 모달 ── */
.wh-welcome-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-wh-black-glow-45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.wh-welcome-modal {
  position: relative;
  background: var(--color-bg-white);
  border-radius: 20px;
  padding: 40px 32px 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 40px var(--color-wh-black-glow-18);
}
.wh-welcome-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--color-wh-welcome-close);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.wh-welcome-close:hover { color: var(--color-wh-welcome-close-hover); }
.wh-welcome-icon { font-size: 44px; margin-bottom: 4px; }
.wh-welcome-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-wh-welcome-title);
  margin: 0;
  text-align: center;
}
.wh-welcome-sub {
  font-size: 13px;
  color: var(--color-wh-welcome-sub);
  margin: 0 0 8px;
  text-align: center;
}
.wh-welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.wh-welcome-btn {
  width: 100%;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.wh-welcome-btn--recruit {
  border: none;
  background: var(--color-danger);
  color: var(--color-text-on-brand);
  box-shadow: 0 2px 10px var(--color-wh-danger-shadow-20);
}
.wh-welcome-btn--recruit:hover { background: var(--color-danger-strong); }
.wh-welcome-btn--skip {
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-wh-welcome-sub);
  font-size: 13px;
}
.wh-welcome-btn--skip:hover { background: var(--color-bg-soft); }

/* DARK MODE — 컴포넌트 고유 오버라이드 (6-B2 WS-5, dark.css 흡수분) */
[data-theme="dark"] .wh-map-area,
[data-theme="dark"] .workspace-home__map-wrapper,
[data-theme="dark"] .workspace-home {
  background: var(--color-bg-soft);
}
[data-theme="dark"] .wh-chips-bar {
  background: var(--color-wh-chipsbar-bg);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wh-chip {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-main);
}
[data-theme="dark"] .wh-chip:hover { background: var(--color-bg-elevated-dark); }
[data-theme="dark"] .wh-chip-label { color: var(--color-wh-chip-label-dark); }
[data-theme="dark"] .wh-chip-icon { color: var(--wh-chip-icon-color, var(--color-text-muted)); }
[data-theme="dark"] .wh-chips-divider { background: var(--color-wh-white-glow-12); }
[data-theme="dark"] .wh-sidebar {
  background: var(--color-bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .wh-sidebar-head { border-bottom-color: var(--color-border); }
[data-theme="dark"] .wh-sidebar-title,
[data-theme="dark"] .wh-online-label,
[data-theme="dark"] .wh-member-name {
  color: var(--color-text-main);
}
[data-theme="dark"] .wh-online-bar { border-bottom-color: var(--color-border); }
[data-theme="dark"] .wh-member-row:hover { background: var(--color-bg-elevated-dark); }
[data-theme="dark"] .wh-member-presence { border-color: var(--color-bg-white); }
[data-theme="dark"] .wh-member-kick { color: var(--color-text-muted); }
[data-theme="dark"] .wh-member-kick:hover { color: var(--color-danger); }
[data-theme="dark"] .wh-sidebar-section-label { color: var(--color-text-muted); }
[data-theme="dark"] .wh-badge--status {
  background: var(--color-wh-badge-status-bg-dark);
  border-color: var(--color-wh-green-border);
  color: var(--color-wh-vote-done-text);
}
[data-theme="dark"] .wh-invite-btn {
  color: var(--color-wh-indigo-glow-invite);
  border-color: var(--color-wh-invite-border-dark);
}
.workspace-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workspace-board__empty-button {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.workspace-board__empty-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.24);
}

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

.workspace-board__heading {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    flex-basis 0.16s ease,
    max-width 0.16s ease;
}

.workspace-board__heading-title {
  margin: 0;
  color: #0f172a;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.25;
}

.workspace-board__heading-meta {
  margin: 5px 0 0;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.workspace-board__search {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  min-width: 44px;
}

.workspace-board__search.is-open {
  flex: 1 1 360px;
  max-width: 420px;
  min-width: 0;
}

.workspace-board__search-toggle {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.workspace-board__search-toggle:hover {
  border-color: rgba(79, 70, 229, 0.26);
  background: #ffffff;
  color: #4338ca;
  transform: translateY(-1px);
}

.workspace-board__search-toggle svg {
  font-size: 20px;
}

.workspace-board__search.is-open .workspace-board__search-toggle {
  display: none;
}

.workspace-board__search:not(.is-open) .workspace-board__search-box {
  display: none;
}

.workspace-board__search-box {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

@keyframes workspace-board-search-slide-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.workspace-board__search-box:focus-within {
  border-color: rgba(79, 70, 229, 0.36);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

.workspace-board__search-box svg {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: 19px;
}

.workspace-board__search-box input {
  width: 100%;
  height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
}

.workspace-board__search-box input::placeholder {
  color: #94a3b8;
}

.workspace-board__search-clear {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.workspace-board__search-clear:hover {
  background: #f1f5f9;
  color: #475569;
}

.workspace-board__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workspace-board__item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.workspace-board__item:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.24);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
}

.workspace-board__item-main {
  min-width: 0;
  flex: 1;
}

.workspace-board__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.workspace-board__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.workspace-board__badge--pinned {
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.workspace-board__badge--notice {
  background: rgba(79, 70, 229, 0.1);
  color: #4338ca;
}

.workspace-board__category {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.workspace-board__item-title {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  word-break: break-word;
}

.workspace-board__item-meta {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
}

.workspace-board__item-date {
  flex-shrink: 0;
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}

.workspace-board__state,
.workspace-board__empty {
  padding: 32px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.workspace-board__state {
  color: #475569;
  font-size: 14px;
}

.workspace-board__state--error {
  color: #dc2626;
}

.workspace-board__empty {
  text-align: center;
}

.workspace-board__empty-title {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
}

.workspace-board__empty-description {
  margin: 10px 0 18px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.workspace-board__floating-write {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 30;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #4965ff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 18px 36px rgba(73, 101, 255, 0.28);
  transition:
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.workspace-board__floating-write:hover {
  background: #4057e6;
  transform: translateY(-2px);
  box-shadow: 0 22px 42px rgba(73, 101, 255, 0.34);
}

@media (max-width: 768px) {
  .workspace-board {
    gap: 14px;
  }

  .workspace-board__toolbar {
    min-height: 48px;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .workspace-board__toolbar.is-search-open {
    flex-wrap: nowrap;
    gap: 0;
  }

  .workspace-board__heading {
    flex: 1 1 0;
  }

  .workspace-board__toolbar.is-search-open .workspace-board__heading {
    display: none;
  }

  .workspace-board__heading-title {
    font-size: 19px;
  }

  .workspace-board__search.is-open {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    order: 0;
  }

  .workspace-board__search.is-open .workspace-board__search-box {
    animation: workspace-board-search-slide-in 0.18s ease both;
  }

  .workspace-board__search-box {
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    box-shadow: none;
  }

  .workspace-board__search-box input {
    height: 44px;
    font-size: 15px;
  }

  .workspace-board__item {
    flex-direction: column;
    align-items: flex-start;
  }

  .workspace-board__item-date {
    white-space: normal;
  }

  .workspace-board__floating-write {
    right: 18px;
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
    height: 50px;
    padding: 0 18px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .workspace-board__floating-write {
    width: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .workspace-board__floating-write span {
    display: none;
  }
}
.workspace-finance-transactions {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.finance-transactions__panel {
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e8edf5;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.finance-transactions__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.finance-transactions__back {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5365f6;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.finance-transactions__header h1 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.finance-transactions__header p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
}

.finance-transactions__add-button {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: #4965ff;
  color: #ffffff;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  box-shadow: 0 12px 24px rgba(73, 101, 255, 0.22);
}

.finance-transactions__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  margin-bottom: 12px;
}

.finance-transactions__search {
  height: 46px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 9px;
}

.finance-transactions__search svg {
  flex-shrink: 0;
  color: #94a3b8;
}

.finance-transactions__search input {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-size: 14px;
  font-weight: 650;
  font-family: inherit;
}

.finance-transactions__search input::placeholder {
  color: #9aa3b2;
  font-weight: 500;
}

.finance-transactions__search button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.finance-transactions__toolbar select {
  height: 46px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 750;
  font-family: inherit;
  outline: 0;
}

.finance-transactions__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.finance-transactions__filters button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  font-family: inherit;
  cursor: pointer;
}

.finance-transactions__filters button.is-active {
  border-color: #5365f6;
  background: #f1f5ff;
  color: #5365f6;
}

.finance-transactions__list {
  display: flex;
  flex-direction: column;
}

.finance-transactions__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 140px 34px;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid #eef2f7;
}

.finance-transactions__item:first-child {
  border-top: 0;
}

.finance-transactions__item-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.finance-transactions__item-icon.is-income {
  background: #e4f8ee;
  color: #12a66a;
}

.finance-transactions__item-icon.is-expense {
  background: #ffe7eb;
  color: #ef3f5f;
}

.finance-transactions__item-main {
  min-width: 0;
}

.finance-transactions__item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.finance-transactions__type {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 850;
}

.finance-transactions__item h2 {
  margin: 0;
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-transactions__item p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.finance-transactions__memo {
  display: block;
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-transactions__amount {
  text-align: right;
  font-size: 15px;
  font-weight: 850;
}

.finance-transactions__more {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.is-income {
  color: #12a66a !important;
}

.is-expense {
  color: #ef3f5f !important;
}

.finance-transactions__empty {
  padding: 48px 20px;
  border-top: 1px solid #eef2f7;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.finance-transactions__floating-add {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 1301;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #4965ff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 850;
  font-family: inherit;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 32px rgba(73, 101, 255, 0.24);
}

@media (max-width: 1024px) {
  .finance-transactions__panel {
    padding: 20px;
    border-radius: 22px;
  }

  .finance-transactions__header {
    margin-bottom: 16px;
  }

  .finance-transactions__header h1 {
    font-size: 22px;
  }

  .finance-transactions__add-button {
    display: none;
  }

  .finance-transactions__toolbar {
    grid-template-columns: 1fr;
  }

  .finance-transactions__item {
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: flex-start;
    gap: 12px;
  }

  .finance-transactions__amount {
    grid-column: 2 / 4;
    text-align: left;
  }

  .finance-transactions__floating-add {
    right: 18px;
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
    height: 50px;
    padding: 0 18px;
    font-size: 14px;
    display: inline-flex;
  }
}

@media (max-width: 420px) {
  .finance-transactions__floating-add {
    width: 52px;
    padding: 0;
    border-radius: 50%;
  }

  .finance-transactions__floating-add span {
    display: none;
  }
}
.workspace-board-write-page {
  width: min(820px, calc(100% - 24px));
  margin: 0 auto;
  padding: 24px 0 64px;
  color: #111827;
}

.workspace-board-write-header {
  margin-bottom: 24px;
}

.workspace-board-write-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.workspace-board-write-header p {
  margin: 10px 0 0;
  color: #6b7280;
  font-size: 15px;
}

.workspace-board-write-form {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 24px;
  padding: 26px 24px 24px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}

.workspace-board-form-group {
  display: flex;
  flex-direction: column;
}

.workspace-board-form-group + .workspace-board-form-group {
  margin-top: 20px;
}

.workspace-board-form-group > label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.workspace-board-form-group > input,
.workspace-board-form-group > select,
.workspace-board-form-group > textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  font-size: 16px;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workspace-board-form-group > input::placeholder,
.workspace-board-form-group > textarea::placeholder {
  color: #9ca3af;
}

.workspace-board-form-group > input:focus,
.workspace-board-form-group > select:focus,
.workspace-board-form-group > textarea:focus {
  border-color: #c7d2fe;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.workspace-board-form-group > textarea {
  min-height: 260px;
  resize: vertical;
}

.workspace-board-option-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  margin-bottom: 20px;
}

.workspace-board-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #111827;
  cursor: pointer;
  user-select: none;
}

.workspace-board-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #111827;
  cursor: pointer;
}

.workspace-board-form-error {
  margin: 16px 0 0;
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
}

.workspace-board-file-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workspace-board-file-input {
  display: none;
}

.workspace-board-file-button {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.workspace-board-file-button:hover {
  background: #f3f4f6;
}

.workspace-board-file-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.workspace-board-file-help {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
}

.workspace-board-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.workspace-board-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #f8fafc;
  color: #374151;
  font-size: 14px;
}

.workspace-board-file-list li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-board-file-list li button {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.workspace-board-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.workspace-board-form-actions button {
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 12px;
  background: #111827;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.15s ease;
}

.workspace-board-form-actions button:active {
  transform: scale(0.97);
}

.workspace-board-form-actions button.ghost {
  background: #f3f4f6;
  color: #374151;
}

.workspace-board-form-actions button.ghost:hover {
  background: #e5e7eb;
}

.workspace-board-form-actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.workspace-board-empty {
  padding: 32px 20px;
  border-radius: 20px;
  border: 1px dashed #d1d5db;
  background: #ffffff;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

@media (max-width: 820px) {
  .workspace-board-write-page {
    width: min(100%, calc(100% - 20px));
    padding: 20px 0 56px;
  }

  .workspace-board-write-header {
    margin-bottom: 20px;
  }

  .workspace-board-write-header h1 {
    font-size: 28px;
  }

  .workspace-board-write-form {
    padding: 20px 18px 18px;
    border-radius: 20px;
  }

  .workspace-board-option-row {
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
  }

  .workspace-board-file-box {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-board-file-button {
    width: 100%;
  }
}.workspace-board-detail-page {
  width: min(960px, calc(100% - 24px));
  margin: 0 auto;
  padding: 24px 0 64px;
  color: #111827;
}

.workspace-board-back-btn {
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}

.workspace-board-detail-card,
.workspace-comment-section {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}

.workspace-board-detail-card {
  padding: 28px;
}

.workspace-board-detail-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.workspace-board-detail-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-board-category {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
}

.workspace-board-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
}

.workspace-board-badge.notice {
  background: #eef2ff;
  color: #4338ca;
}

.workspace-board-detail-card h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  font-weight: 800;
}

.workspace-board-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: #6b7280;
  font-size: 14px;
}

.workspace-author-link {
  color: #374151;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.workspace-author-link:hover {
  color: #111827;
  text-decoration: underline;
}

.workspace-comment-section {
  margin-top: 20px;
  padding: 24px;
}

.workspace-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.workspace-comment-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.workspace-comment-header span {
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
}

.workspace-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-comment-form textarea,
.workspace-reply-form textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

.workspace-comment-form textarea:focus,
.workspace-reply-form textarea:focus {
  border-color: #c7d2fe;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.workspace-comment-form-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.workspace-comment-form button,
.workspace-reply-form button {
  align-self: flex-end;
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.workspace-comment-form button:disabled,
.workspace-reply-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.workspace-comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.workspace-comment-item {
  border: 1px solid #eef2f7;
  background: #f8fafc;
  border-radius: 18px;
  padding: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.workspace-comment-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  align-items: flex-start;
}

.workspace-comment-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workspace-comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.workspace-comment-meta span {
  font-size: 13px;
  color: #6b7280;
}

.workspace-comment-item p,
.workspace-reply-item p {
  margin: 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  white-space: pre-wrap;
}

.workspace-comment-bottom {
  margin-top: 12px;
}

.workspace-reply-toggle-btn {
  border: none;
  background: transparent;
  color: #4f46e5;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.workspace-reply-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.workspace-reply-form textarea {
  min-height: 88px;
}

.workspace-reply-form-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.workspace-reply-list {
  margin-top: 14px;
  padding-left: 18px;
  border-left: 2px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.workspace-reply-item {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.workspace-board-empty {
  padding: 32px 20px;
  border-radius: 20px;
  border: 1px dashed #d1d5db;
  background: #fff;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.workspace-comment-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.workspace-comment-edit-cancel-btn {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.comment-highlight {
  animation: workspaceCommentHighlight 2s ease;
}

.workspace-board-detail-content {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  color: #374151;
  font-size: 15px;
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.workspace-board-detail-content p {
  margin: 0 0 10px;
  color: #374151;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
}

.workspace-board-detail-content p:empty::before {
  content: "\00a0";
}

.workspace-board-detail-content h2 {
  margin: 24px 0 10px;
  color: #111827;
  font-size: 22px;
  line-height: 1.35;
}

.workspace-board-detail-content ul,
.workspace-board-detail-content ol {
  margin: 10px 0;
  padding-left: 24px;
}

.workspace-board-detail-content ul {
  list-style: disc outside;
}

.workspace-board-detail-content ol {
  list-style: decimal outside;
}

.workspace-board-detail-content li {
  margin: 4px 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.8;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.workspace-board-detail-content li > ul {
  list-style-type: circle;
}

.workspace-board-detail-content li > ol,
.workspace-board-detail-content li > ul {
  margin: 6px 0;
}

.workspace-board-detail-content blockquote {
  margin: 14px 0;
  padding-left: 14px;
  border-left: 4px solid #c7d2fe;
  color: #4b5563;
}

.workspace-board-detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
  border-radius: 14px;
}

.workspace-board-attachments {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  background: #f8fafc;
}

.workspace-board-attachments h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
}

.workspace-board-attachments ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-board-attachments li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.workspace-board-attachments a {
  min-width: 0;
  color: #2563eb;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-board-attachments a:hover {
  text-decoration: underline;
}

.workspace-board-attachments span {
  flex-shrink: 0;
  color: #6b7280;
  font-size: 12px;
  font-weight: 700;
}

.workspace-board-post-list-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #e5e7eb;
}

.workspace-board-post-list-header {
  margin-bottom: 18px;
}

.workspace-board-post-list-header h2 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  font-weight: 900;
}

.workspace-board-post-list {
  border-top: 1px solid #eef2f7;
}

.workspace-board-post-list-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 120px;
  align-items: center;
  gap: 18px;
  padding: 0 8px;
  border-bottom: 1px solid #eef2f7;
  color: inherit;
  text-decoration: none;
}

.workspace-board-post-list-row:hover {
  background: #f8fafc;
}

.workspace-board-post-list-row.is-current {
  background: #f7f7f8;
}

.workspace-board-post-list-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-board-post-list-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

.workspace-board-post-list-title span {
  flex-shrink: 0;
  color: #f43f5e;
  font-size: 14px;
  font-weight: 900;
}

.workspace-board-post-list-author,
.workspace-board-post-list-date {
  color: #4b5563;
  font-size: 14px;
  white-space: nowrap;
}

.workspace-board-post-list-date {
  text-align: right;
}

.workspace-board-post-list-footer {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.workspace-board-post-list-pages {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 18px;
}

.workspace-board-post-list-pages span {
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
}

.workspace-board-post-list-pages span.is-active {
  background: #e5e7eb;
}

.workspace-board-post-list-all {
  justify-self: end;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.workspace-board-post-list-all:hover {
  text-decoration: underline;
}

@keyframes workspaceCommentHighlight {
  0% {
    background-color: rgba(99, 102, 241, 0.16);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.14);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

@media (max-width: 820px) {
  .workspace-board-detail-page {
    width: min(100%, calc(100% - 20px));
    padding: 20px 0 56px;
  }

  .workspace-board-detail-card,
  .workspace-comment-section {
    padding: 18px;
    border-radius: 20px;
  }

  .workspace-board-post-list-section {
    margin-top: 24px;
    padding-top: 24px;
  }

  .workspace-board-post-list-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 10px 8px;
  }

  .workspace-board-post-list-author,
  .workspace-board-post-list-date {
    font-size: 13px;
  }

  .workspace-board-post-list-date {
    text-align: left;
  }

  .workspace-board-post-list-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-top: 12px;
  }

  .workspace-board-post-list-pages {
    grid-column: auto;
  }

  .workspace-board-post-list-all {
    justify-self: center;
  }

  .workspace-board-detail-card h1 {
    font-size: 24px;
  }

  .workspace-board-detail-top-row {
    align-items: flex-start;
  }

  .workspace-comment-top {
    flex-direction: column;
  }

  .workspace-reply-list {
    padding-left: 12px;
  }

  .workspace-comment-form-bottom {
    align-items: stretch;
  }

  .workspace-comment-form button {
    align-self: stretch;
  }

  .workspace-comment-form textarea,
  .workspace-reply-form textarea {
    font-size: 16px;
  }
}
/* ────────────────────────────────────────────────────
   AI Task Manager — WorkspaceTodoPage
──────────────────────────────────────────────────── */
.tp {
  --tp-border:   #e6e7ea;
  --tp-card:     #ffffff;
  --tp-bg:       #f3f3f2;
  --tp-text:     #24262c;
  --tp-muted:    #6f727b;
  --tp-hint:     #9a9da5;
  --tp-primary:  #7c5cd6;
  --tp-primary-s:#ede9fb;
  --tp-green:    #2f7d5d;
  --tp-green-s:  #eaf5ef;
  --tp-red:      #c0453c;
  --tp-red-s:    #fdeaea;
  --tp-amber:    #d97706;
  --tp-amber-s:  #fffbeb;
  --tp-purple:   #7c3aed;
  --tp-purple-s: #f5f3ff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--tp-text);
}

/* ── 헤더 ── */
.tp__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tp__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 750;
  color: var(--tp-text);
}
.tp__heading-icon { color: var(--tp-primary); }
.tp__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  background: var(--tp-card);
  color: var(--tp-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.tp__add-btn:hover { background: var(--tp-bg); }

/* ── 로드맵 진행도 ── */
.tp__roadmap {
  padding: 22px 24px;
  border: 1px solid var(--tp-border);
  border-radius: 20px;
  background: var(--tp-card);
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tp__rm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tp__rm-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tp__rm-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tp-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tp__rm-total {
  font-size: 12px;
  color: var(--tp-hint);
}
.tp__rm-right {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tp__rm-pct {
  font-size: 30px;
  font-weight: 750;
  color: var(--tp-primary);
  line-height: 1;
}
.tp__rm-done-text {
  font-size: 13px;
  color: var(--tp-muted);
  font-weight: 600;
}
.tp__rm-overdue-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--tp-red);
  background: var(--tp-red-s);
  border: 1px solid #fca5a5;
  border-radius: 999px;
  padding: 2px 8px;
}

/* 트랙 + 노드 컨테이너 */
.tp__rm-track-wrap {
  position: relative;
}

/* 배경 트랙 선 (노드 행 뒤에 절대 위치) */
.tp__rm-track {
  position: absolute;
  top: 11px;
  left: calc(100% / 6);
  width: calc(100% * 2 / 3);
  height: 4px;
  background: var(--tp-border);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.tp__rm-track-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tp-primary), var(--tp-green));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* 노드 행 */
.tp__rm-nodes {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.tp__rm-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: default;
}

/* 노드 원 */
.tp__rm-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--tp-bg);
  border: 3px solid var(--tp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tp-hint);
  transition: all 0.2s;
}
.tp__rm-node--pending.has-items .tp__rm-dot {
  border-color: #94a3b8;
  background: var(--tp-bg);
  color: var(--tp-muted);
}
.tp__rm-node--active.has-items .tp__rm-dot {
  border-color: var(--tp-primary);
  background: var(--tp-primary-s);
  color: var(--tp-primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}
.tp__rm-node--done.has-items .tp__rm-dot {
  border-color: var(--tp-green);
  background: var(--tp-green-s);
  color: var(--tp-green);
}

/* 노드 텍스트 */
.tp__rm-node-count {
  font-size: 20px;
  font-weight: 750;
  color: var(--tp-muted);
  line-height: 1;
}
.tp__rm-node--active.has-items .tp__rm-node-count { color: var(--tp-primary); }
.tp__rm-node--done.has-items .tp__rm-node-count   { color: var(--tp-green); }

.tp__rm-node-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tp-hint);
  white-space: nowrap;
  text-align: center;
}

/* 구역별 세부 진행도 */
.tp__rm-zones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--tp-border);
  padding-top: 16px;
}
.tp__rm-zone {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp__rm-zone-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--tp-muted);
  width: 80px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp__rm-zone-bar {
  flex: 1;
  height: 6px;
  background: var(--tp-border);
  border-radius: 3px;
  overflow: hidden;
}
.tp__rm-zone-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tp-primary), #818cf8);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.tp__rm-zone-stat {
  font-size: 11px;
  font-weight: 700;
  color: var(--tp-hint);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 할 일 추가 폼 ── */
.tp__form-wrap {
  padding: 22px;
  border: 1px solid var(--tp-border);
  border-radius: 20px;
  background: var(--tp-card);
  box-shadow: 0 12px 32px rgba(15,23,42,.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp__form-input {
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--tp-border);
  border-radius: 12px;
  background: var(--tp-bg);
  color: var(--tp-text);
  width: 100%;
  font-weight: 600;
}
.tp__form-input:focus { outline: none; border-color: var(--tp-primary); background: #fff; }
.tp__form-row { display: flex; gap: 8px; }
.tp__form-sel, .tp__form-date {
  flex: 1;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--tp-border);
  border-radius: 10px;
  background: var(--tp-bg);
  color: var(--tp-text);
}

/* 날짜 입력 디자인 */
.tp__form-date {
  color-scheme: light;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
.tp__form-date:hover { border-color: #c7d2fe; background: #fff; }
.tp__form-date:focus {
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.tp__form-date::-webkit-calendar-picker-indicator {
  width: 15px; height: 15px;
  padding: 2px; border-radius: 4px;
  cursor: pointer; opacity: 0.55;
  filter: invert(30%) sepia(80%) saturate(500%) hue-rotate(215deg);
  transition: opacity 0.14s;
}
.tp__form-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.tp__form-date::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.tp__form-date::-webkit-datetime-edit { padding: 0; }
.tp__form-date::-webkit-datetime-edit-year-field { color: #4f46e5; font-weight: 600; }
.tp__form-date::-webkit-datetime-edit-month-field,
.tp__form-date::-webkit-datetime-edit-day-field { font-weight: 500; }
.tp__form-date::-webkit-datetime-edit-text { color: #cbd5e1; }
.tp__form-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.tp__form-cancel {
  padding: 0 16px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  background: var(--tp-bg);
  color: var(--tp-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tp__form-submit {
  padding: 0 20px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--tp-primary);
  background: var(--tp-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.tp__form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 필터 탭 ── */
.tp__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
  background: var(--tp-card);
  color: var(--tp-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tp__filter-btn:hover { background: var(--tp-bg); }
.tp__filter-btn.active { background: var(--tp-primary-s); border-color: #c7d2fe; color: var(--tp-primary); }
.tp__filter-btn.has-alert { border-color: #fca5a5; color: var(--tp-red); }
.tp__filter-btn.has-alert.active { background: var(--tp-red-s); border-color: #fca5a5; }
.tp__filter-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.tp__filter-btn.active .tp__filter-count { background: rgba(79,70,229,.15); }
.tp__filter-btn.has-alert .tp__filter-count { background: rgba(220,38,38,.12); }

/* ── 할 일 목록 ── */
.tp__list {
  border: 1px solid var(--tp-border);
  border-radius: 20px;
  background: var(--tp-card);
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
  overflow: hidden;
}

.tp__item {
  padding: 14px 20px;
  border-bottom: 1px solid var(--tp-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.1s;
}
.tp__item:last-child { border-bottom: none; }
.tp__item:hover { background: var(--tp-bg); }
.tp__item--done { opacity: 0.55; }
.tp__item--overdue { border-left: 3px solid var(--tp-red); }
.tp__item--editing {
  padding: 16px 20px;
  gap: 10px;
  background: var(--tp-bg);
}

/* 행 1 */
.tp__item-row1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp__check {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  background: var(--tp-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s;
}
.tp__check.checked { background: var(--tp-green); border-color: var(--tp-green); }
.tp__title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--tp-text);
  min-width: 0;
  word-break: break-word;
}
.tp__item--done .tp__title { text-decoration: line-through; color: var(--tp-hint); }

/* 우선순위 뱃지 */
.tp__priority {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.priority--urgent { background: var(--tp-red-s);   color: var(--tp-red);   border: 1px solid #fca5a5; }
.priority--high   { background: var(--tp-amber-s); color: var(--tp-amber); border: 1px solid #fcd34d; }

/* 액션 버튼 */
.tp__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.tp__item:hover .tp__actions { opacity: 1; }
.tp__btn-edit, .tp__btn-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tp-hint);
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}
.tp__btn-edit:hover { color: var(--tp-primary); background: var(--tp-primary-s); }
.tp__btn-del:hover  { color: var(--tp-red);     background: var(--tp-red-s); }

/* 행 2: 칩 */
.tp__item-row2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 30px; }
.tp__description { margin: 5px 0 0; padding-left: 30px; color: var(--tp-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.tp__chip--tool { border-color: #cfd9ee; background: #f2f5fb; color: #536ba5; font-weight: 700; }
.tp__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--tp-border);
}
.tp__chip--assignee { color: var(--tp-muted); background: var(--tp-bg); }
.tp__chip--zone     { color: var(--tp-purple); background: var(--tp-purple-s); border-color: #ddd6fe; }
.tp__chip--dday     { color: var(--tp-hint);   background: var(--tp-bg); }
.tp__chip--dday.soon    { color: var(--tp-amber); background: var(--tp-amber-s); border-color: #fcd34d; font-weight: 700; }
.tp__chip--dday.overdue { color: var(--tp-red);   background: var(--tp-red-s);   border-color: #fca5a5; font-weight: 700; }

/* 행 3 공통 */
.tp__item-row3 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding-left: 30px;
}
.tp__workers { color: var(--tp-primary); font-weight: 600; }
.tp__workers-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tp-green);
  flex-shrink: 0;
  animation: tp-pulse 1.5s ease infinite;
}
@keyframes tp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}
.tp__insight { color: var(--tp-amber); font-weight: 500; }
.tp__insight svg { color: var(--tp-amber); flex-shrink: 0; }

/* ── 빈 상태 / 로딩 ── */
.tp__empty { text-align: center; padding: 60px 20px; color: var(--tp-muted); font-size: 14px; }
.tp__loading { padding: 60px; text-align: center; color: var(--tp-muted); font-size: 14px; }

/* ── 다크모드 ── */
[data-theme="dark"] .tp {
  --tp-border:   #1e293b;
  --tp-card:     #0f172a;
  --tp-bg:       #070e1b;
  --tp-text:     #f1f5f9;
  --tp-muted:    #64748b;
  --tp-hint:     #334155;
  --tp-primary-s:#1e1b4b;
  --tp-green-s:  #022c22;
  --tp-red-s:    #2b0a0a;
  --tp-amber-s:  #1c1204;
  --tp-purple-s: #1a0b3d;
}
[data-theme="light"] .tp {
  --tp-border:   #e2e8f0;
  --tp-card:     #ffffff;
  --tp-bg:       #f8fafc;
  --tp-text:     #0f172a;
  --tp-muted:    #64748b;
  --tp-hint:     #94a3b8;
  --tp-primary-s:#eef2ff;
  --tp-green-s:  #ecfdf5;
  --tp-red-s:    #fef2f2;
  --tp-amber-s:  #fffbeb;
  --tp-purple-s: #f5f3ff;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .tp { gap: 16px; }
  .tp__top { align-items: flex-start; }
  .tp__heading { font-size: 16px; line-height: 40px; }
  .tp__add-btn { height: 38px; padding: 0 12px; font-size: 13px; }
  .tp__roadmap { padding: 16px; gap: 16px; }
  .tp__rm-pct { font-size: 24px; }
  .tp__rm-node-count { font-size: 16px; }
  .tp__filters { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; flex-wrap: nowrap; }
  .tp__filters::-webkit-scrollbar { display: none; }
  .tp__filter-btn { flex: 0 0 auto; font-size: 12px; padding: 5px 10px; }
  .tp__form-wrap { padding: 16px; border-radius: 16px; }
  .tp__form-row { flex-direction: column; }
  .tp__form-sel, .tp__form-date { width: 100%; min-height: 42px; }
  .tp__form-btns { justify-content: stretch; }
  .tp__form-cancel, .tp__form-submit { flex: 1; }
  .tp__list { border-radius: 16px; }
  .tp__item { padding: 12px 14px; }
  .tp__item-row2, .tp__item-row3 { padding-left: 30px; }
  .tp__actions { opacity: 1; }
}
/* ═══════════════════════════════════
   PAGE SHELL
═══════════════════════════════════ */
.mwp-page {
  min-height: 100vh;
  background: var(--color-accent-soft);
  padding: 40px 20px 80px;
}

.mwp-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.mwp-hero {
  padding: 32px 36px;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  background: var(--color-bg-white);
  box-shadow: 0 12px 40px var(--color-shadow-base);
}

.mwp-eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.1em;
  color: var(--color-brand-icon);
}

.mwp-hero-title {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-text-main);
}

/* ═══════════════════════════════════
   TOOLBAR / FILTER
═══════════════════════════════════ */
.mwp-toolbar {
  display: flex;
  justify-content: flex-start;
}

.mwp-filter {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-white);
}

.mwp-filter button {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}

.mwp-filter button:hover { background: var(--color-accent-soft); color: var(--color-text-sub); }
.mwp-filter button.is-active { background: var(--color-brand-soft); color: var(--color-brand); }

/* ═══════════════════════════════════
   STATE / EMPTY
═══════════════════════════════════ */
.mwp-state {
  padding: 56px 20px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}
.mwp-state--error { color: var(--color-danger-hover); }

.mwp-empty {
  padding: 60px 20px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  text-align: center;
}

.mwp-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.mwp-empty h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-text-main); }
.mwp-empty p  { margin: 8px 0 0; font-size: 14px; color: var(--color-text-muted); }

/* ═══════════════════════════════════
   SECTION
═══════════════════════════════════ */
.mwp-section { display: flex; flex-direction: column; gap: 12px; }

.mwp-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mwp-section-label {
  font-size: 13px;
  font-weight: 750;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.mwp-section-count {
  height: 22px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════
   ACTIVE GRID
═══════════════════════════════════ */
.mwp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* ═══════════════════════════════════
   CARD
═══════════════════════════════════ */
.mwp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 140px;
}

.mwp-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 16px 42px var(--color-shadow-strong);
}

.mwp-card:focus-visible {
  outline: 3px solid var(--color-brand-glow);
  outline-offset: 3px;
}

.mwp-card--done {
  background: var(--color-bg-white);
  border-color: var(--color-border);
  opacity: 0.82;
}

.mwp-card--done:hover {
  opacity: 1;
  border-color: var(--color-brand-soft-hover);
}

.mwp-card--compact {
  min-height: unset;
  flex-direction: row;
  align-items: center;
  padding: 14px 18px;
  gap: 14px;
}

/* ── 카드 상단 (아이콘 + 배지 + 삭제 버튼) ── */
.mwp-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mwp-card--compact .mwp-card-top { flex-shrink: 0; align-items: center; }

.mwp-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.mwp-card-icon--study { background: var(--color-success-soft); color: var(--color-type-study); }
.mwp-card-icon--done  { background: var(--color-bg-soft); color: var(--color-text-placeholder); }

.mwp-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
  align-items: center;
  padding-top: 2px;
}

/* ── 배지 ── */
.mwp-badge {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

.mwp-badge--type             { background: var(--color-brand-soft); color: var(--color-brand); }
.mwp-badge--type.study       { background: var(--color-success-soft); color: var(--color-type-study); }
.mwp-badge--type.small_group { background: var(--color-primary-soft); color: var(--color-accent); }

.mwp-badge--owner { background: var(--color-status-pending-soft); color: var(--color-status-pending); }

/* 상태 배지 */
.mwp-badge--status { background: var(--color-bg-soft); color: var(--color-text-muted); }
.mwp-badge--status.status--recruiting  { background: var(--color-success-soft); color: var(--color-success); }
.mwp-badge--status.status--inprogress  { background: var(--color-brand-soft); color: var(--color-brand); }
.mwp-badge--status.status--completed   { background: var(--color-bg-soft); color: var(--color-text-placeholder); }
.mwp-badge--status.status--closing     { background: var(--color-danger-soft); color: var(--color-danger); }
.mwp-badge--status.status--closed      { background: var(--color-danger-soft); color: var(--color-danger-strong); }

/* ── 카드 이름 ── */
.mwp-card-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text-main);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mwp-card--compact .mwp-card-name {
  flex: 1;
  font-size: 15px;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.mwp-card--done .mwp-card-name { color: var(--color-text-muted); }

/* ── 요약 ── */
.mwp-card-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-placeholder);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* ── 카드 하단 정보 ── */
.mwp-card-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg-soft);
}

.mwp-card--done .mwp-card-footer { border-color: var(--color-border); }

.mwp-card--compact .mwp-card-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.mwp-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--color-text-placeholder);
  font-weight: 500;
}

.mwp-card-meta--date { margin-left: auto; }

/* ── 삭제 버튼 ── */
.mwp-delete-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--color-danger-soft);
  border-radius: 9px;
  background: var(--color-danger-soft);
  color: var(--color-danger-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s, background 0.14s;
}

.mwp-card:hover .mwp-delete-btn { opacity: 1; }
.mwp-delete-btn:hover { background: var(--color-danger); color: var(--color-text-on-brand); border-color: var(--color-danger); }

/* ═══════════════════════════════════
   COMPLETED SECTION
═══════════════════════════════════ */
.mwp-section--done {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg-white);
  overflow: hidden;
  gap: 0;
}

.mwp-done-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 0.14s;
}

.mwp-done-toggle:hover { background: var(--color-bg-soft); }

.mwp-done-icon {
  color: var(--color-text-placeholder);
  flex-shrink: 0;
}

.mwp-section--done .mwp-section-count {
  background: var(--color-border);
  color: var(--color-text-placeholder);
}

.mwp-done-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 12px 12px;
}

.mwp-done-list .mwp-card {
  border-radius: 14px;
}

/* ═══════════════════════════════════
   DELETE MODAL
═══════════════════════════════════ */
.mwp-delete-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--color-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mwp-delete-modal {
  width: 100%;
  max-width: 380px;
  border-radius: 20px;
  background: var(--color-bg-white);
  box-shadow: 0 24px 64px var(--color-backdrop-strong);
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: mwpModalIn 0.2s ease both;
}

@keyframes mwpModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mwp-delete-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.mwp-delete-title  { margin: 0 0 10px; font-size: 20px; font-weight: 800; color: var(--color-text-main); letter-spacing: -0.03em; }
.mwp-delete-desc   { margin: 0 0 24px; font-size: 14px; line-height: 1.65; color: var(--color-text-muted); }
.mwp-delete-desc strong { color: var(--color-text-main); font-weight: 700; }

.mwp-delete-footer { display: flex; gap: 10px; width: 100%; }

.mwp-delete-btn {
  flex: 1;
  padding: 11px 0;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
}

.mwp-delete-btn--cancel  { opacity: 1; border: 1.5px solid var(--color-border); background: var(--color-bg-white); color: var(--color-text-muted); }
.mwp-delete-btn--cancel:hover:not(:disabled)  { background: var(--color-bg-white); }
.mwp-delete-btn--confirm { opacity: 1; border: none; background: var(--color-danger); color: var(--color-text-on-brand); box-shadow: 0 2px 8px var(--color-danger-glow); }
.mwp-delete-btn--confirm:hover:not(:disabled) { background: var(--color-danger-strong); }
.mwp-delete-btn--confirm:disabled,
.mwp-delete-btn--cancel:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media (max-width: 1024px) {
  .mwp-page { padding: 14px 14px 76px; }

  .mwp-hero { display: none; }

  .mwp-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-bottom: 12px;
    background: var(--color-accent-soft);
    margin-top: -6px;
    padding-top: 6px;
  }

  .mwp-filter { width: 100%; }
  .mwp-filter button { flex: 1; height: 44px; border-radius: 13px; }

  .mwp-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .mwp-grid { grid-template-columns: 1fr; }

  .mwp-card--compact { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mwp-card--compact .mwp-card-footer { border-top: 1px solid var(--color-border); padding-top: 8px; width: 100%; }
  .mwp-card-meta--date { margin-left: 0; }
}

/* ================================================
   DARK MODE — 와일드카드([class*="-card"] 등) 우선순위 보정
   (6-B1.7, 신규 토큰화) 이 파일은 dark.css에 규칙이 원래 없었다.
   토큰만으로는 일부가 와일드카드의 제네릭 다크값에 덮여 의도한
   값이 반영되지 않아, 그 지점만 명시적으로 재선언한다.
   ================================================ */

[data-theme="dark"] .mwp-card:hover {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .mwp-card--done:hover {
  border-color: var(--color-brand-soft-hover);
}

[data-theme="dark"] .mwp-card-icon {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

[data-theme="dark"] .mwp-card-icon--study {
  background: var(--color-success-soft);
  color: var(--color-type-study);
}

[data-theme="dark"] .mwp-card-icon--done {
  background: var(--color-bg-soft);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .mwp-card--done .mwp-card-name {
  color: var(--color-text-muted);
}

[data-theme="dark"] .mwp-card-summary {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .mwp-card-meta {
  color: var(--color-text-placeholder);
}
/* 이 파일 전용 로컬 토큰(6-B2.2) - colors.css 공유 토큰과 거리가
   있는(Δ>12) 값 보존을 위해 파일 내부에 스코프. 다크값은
   [data-theme="dark"] 블록에서 개별 재정의. */
:root {
  --color-clp-muted-2: rgb(75, 85, 99);
  --color-clp-primary-glow-08: rgba(73, 101, 255, 0.08);
  --color-clp-navy-shadow-04: rgba(26, 38, 90, 0.04);
  --color-clp-navy-shadow-06: rgba(26, 38, 90, 0.06);
  --color-clp-navy-shadow-05: rgba(26, 38, 90, 0.05);
  --color-clp-navy-shadow-08: rgba(26, 38, 90, 0.08);
  --color-clp-interest-text: rgb(207, 88, 138);
  --color-clp-black-glow-08: rgba(0, 0, 0, 0.08);
  --color-clp-hero-border: rgba(229, 234, 255, 0.95);
  --color-clp-hero-text-shadow: rgba(255, 255, 255, 0.9);
  --color-clp-hero-subtext: rgb(179, 186, 199);
  --color-clp-host-link: rgb(37, 99, 235);
  --color-clp-host-link-hover: rgb(38, 58, 194);
  --color-clp-tabs-border: rgba(148, 163, 184, 0.18);
  --color-clp-tabs-bg: rgba(255, 255, 255, 0.92);
  --color-clp-tab-active-text: rgb(67, 56, 202);
  --color-clp-tab-active-glow: rgba(79, 70, 229, 0.16);
  --color-clp-search-icon: rgb(123, 136, 177);
  --color-clp-interest-hover-border: rgb(239, 207, 223);
  --color-clp-interest-hover-text: rgb(201, 68, 126);
  --color-clp-interest-active-border: rgb(239, 191, 215);
  --color-clp-interest-active-text: rgb(217, 50, 124);
  --color-clp-black-glow-10: rgba(0, 0, 0, 0.1);
  --color-clp-interest-border: rgb(241, 220, 231);
  --color-clp-interest-bg: rgb(255, 250, 253);
}

/* 다크 전용(라이트 대응 없음) - dark.css 흡수 과정에서 필요한 값만 최소로 추가 */
[data-theme="dark"] {
  --color-clp-hero-bg-gradient-dark: linear-gradient(180deg, rgb(13, 20, 40) 0%, rgb(11, 17, 32) 100%);
  --color-clp-hero-card-gradient-dark: linear-gradient(135deg, rgb(22, 32, 53) 0%, rgb(26, 38, 68) 100%);
  --color-clp-hero-border-dark: rgba(79, 142, 247, 0.12);
  --color-clp-hero-badge-bg-dark: rgba(107, 159, 255, 0.12);
  --color-clp-card-border-dark: rgba(79, 142, 247, 0.1);
  --color-clp-card-hover-border-dark: rgba(107, 159, 255, 0.25);
  --color-clp-card-hover-shadow-dark: 0 16px 40px rgba(0, 0, 0, 0.35);
  --color-clp-interest-text: rgb(244, 114, 182);
  --color-clp-interest-bg: rgb(30, 41, 59);
  --color-clp-interest-border: rgb(51, 65, 85);

  /* 6-B2.2 Step6: 다크 명도 검사 - 아래는 다크에서도 라이트와 같은
     값이라 안 보이거나(텍스트) 그대로 밝게 남던(배경) 것을 재정의.
     강조/링크 텍스트 → 밝은 톤, 보조 텍스트 → 회색. */
  --color-clp-host-link-hover: rgb(147, 197, 253);
  --color-clp-tab-active-text: rgb(165, 180, 252);
  --color-clp-muted-2: rgb(148, 163, 184);
  --color-clp-tabs-bg: rgb(22, 32, 53);
}

.contest-page {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-white);
  color: var(--color-text-main);
}

.contest-page * {
  box-sizing: border-box;
}

.contest-page button,
.contest-page input,
.contest-page select {
  font-family: inherit;
}

/* =========================
   HERO
========================= */

.contest-hero-wrap {
  padding: 30px 20px 22px;
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg-white) 100%);
}

.contest-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 42px;
  border: 1px solid var(--color-clp-hero-border);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-accent-soft) 100%);
  box-shadow: 0 18px 46px var(--color-clp-navy-shadow-06);
  position: relative;
}

.contest-hero-copy {
  min-width: 0;
}

.contest-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.contest-hero-badge svg {
  flex: 0 0 auto;
  font-size: 15px;
}

.contest-hero-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  color: var(--color-text-main);
  font-size: 44px;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.contest-hero-title span {
  position: relative;
  top: -2px;
  color: var(--color-clp-hero-subtext);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 var(--color-clp-hero-text-shadow);
}

.contest-host-link {
  position: absolute;
  right: 42px;
  bottom: 34px;
  width: fit-content;
  min-width: 178px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  box-shadow: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.contest-host-link__eyebrow {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.contest-host-link__label {
  color: var(--color-clp-host-link);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.contest-host-link:hover {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-accent-soft);
  color: var(--color-clp-host-link-hover);
  transform: translateY(-1px);
}

/* =========================
   CONTENT
========================= */

.contest-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

.contest-type-tabs {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  border: 1px solid var(--color-clp-tabs-border);
  border-radius: 14px;
  background: var(--color-clp-tabs-bg);
  box-shadow: 0 10px 26px var(--color-shadow-base);
}

.contest-type-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.contest-type-tab:hover,
.contest-type-tab.is-active {
  background: var(--color-brand-soft);
  color: var(--color-clp-tab-active-text);
}

.contest-type-tab.is-active {
  box-shadow: inset 0 0 0 1px var(--color-clp-tab-active-glow);
}

.contest-search-card {
  padding: 22px;
  border: 1px solid var(--color-accent-soft-hover);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-clp-navy-shadow-05);
}

/* =========================
   SEARCH
========================= */

.contest-search-row {
  margin-top: 18px;
}

.contest-search-box {
  width: 100%;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.contest-search-box:focus-within {
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 0 0 4px var(--color-clp-primary-glow-08);
}

.contest-search-box > svg {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--color-clp-search-icon);
}

.contest-search-box input {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 52px;
  appearance: none;
  -webkit-appearance: none;
}

.contest-search-box input::placeholder {
  color: var(--color-text-placeholder);
  font-size: 16px;
  font-weight: 650;
}

.contest-search-clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.contest-search-clear:hover {
  background: var(--color-bg-soft);
  color: var(--color-clp-muted-2);
}

.contest-search-clear svg {
  flex: 0 0 auto;
  font-size: 16px;
}

/* =========================
   FILTERS
========================= */

.contest-filter-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.contest-filter-row select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--color-clp-muted-2);
  font-size: 14px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.contest-filter-row select:hover {
  border-color: var(--color-border-strong);
}

.contest-filter-row select:focus {
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 0 0 4px var(--color-clp-primary-glow-08);
}

.contest-result-row {
  margin-top: 14px;
}

.contest-result-row p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 800;
}

.contest-result-row strong {
  color: var(--color-brand-strong);
}

/* =========================
   CONTEST GRID
========================= */

.contest-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* =========================
   CONTEST CARD
========================= */

.contest-card {
  min-width: 0;
  min-height: 248px;
  padding: 18px;
  border: 1px solid var(--color-accent-soft-hover);
  border-radius: 22px;
  background: var(--color-bg-white);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 12px 32px var(--color-clp-navy-shadow-04);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.contest-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-brand-soft-hover);
  box-shadow: 0 20px 44px var(--color-clp-navy-shadow-08);
}

.contest-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.contest-dday {
  min-width: 68px;
  height: 31px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.contest-dday.is-open {
  background: var(--color-brand-soft);
  color: var(--color-brand-deep);
}

.contest-dday.is-closed {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}

/* =========================
   INTEREST BUTTON
========================= */

.contest-interest-btn {
  flex: 0 0 auto;
  min-width: 68px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-clp-interest-border);
  border-radius: 999px;
  background: var(--color-clp-interest-bg);
  color: var(--color-clp-interest-text);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.contest-interest-btn:hover:not(:disabled) {
  border-color: var(--color-clp-interest-hover-border);
  background: var(--color-danger-soft);
  color: var(--color-clp-interest-hover-text);
}

.contest-interest-btn.is-active {
  border-color: var(--color-clp-interest-active-border);
  background: var(--color-danger-soft);
  color: var(--color-clp-interest-active-text);
}

.contest-interest-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.contest-interest-btn svg {
  flex: 0 0 auto;
}

.contest-interest-btn span {
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
}

/* =========================
   CARD BODY
========================= */

.contest-card__body {
  min-width: 0;
  min-height: auto;
}

.contest-card h2 {
  min-height: auto;
  margin: 0;
  color: var(--color-text-main);
  font-size: 19px;
  line-height: 1.4;
  font-weight: 950;
  letter-spacing: -0.038em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contest-card p {
  min-height: auto;
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contest-card__meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.contest-card__meta span {
  min-width: 0;
  min-height: 29px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.contest-card__meta svg {
  flex: 0 0 auto;
  color: var(--color-brand-icon);
}

.contest-card__tags {
  margin-top: auto;
  padding-top: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.contest-card__tags span {
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
}

/* =========================
   PAGINATION
========================= */

.contest-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contest-pagination-btn,
.contest-pagination-number {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-clp-muted-2);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.contest-pagination-btn:hover:not(:disabled),
.contest-pagination-number:hover:not(.is-active) {
  border-color: var(--color-brand-soft-hover);
  background: var(--color-accent-soft);
  color: var(--color-brand-strong);
}

.contest-pagination-number.is-active {
  border-color: var(--color-brand-icon);
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
}

.contest-pagination-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* =========================
   FLOATING SUBMIT BUTTON
========================= */

.contest-floating-submit {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 56px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow:
    0 10px 30px var(--color-brand-glow-fab),
    0 2px 8px var(--color-clp-black-glow-08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.contest-floating-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px var(--color-brand-glow-fab-hover),
    0 6px 18px var(--color-clp-black-glow-10);
}

.contest-floating-submit svg {
  flex: 0 0 auto;
  font-size: 20px;
}

/* =========================
   EMPTY STATE
========================= */

.contest-empty {
  min-height: 220px;
  margin-top: 16px;
  padding: 48px 20px;
  border: 1px solid var(--color-accent-soft-hover);
  border-radius: 22px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  text-align: center;
  font-size: 14px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   SKELETON
========================= */

.contest-skeleton {
  min-height: 248px;
  padding: 18px;
  border: 1px solid var(--color-accent-soft-hover);
  border-radius: 22px;
  background: var(--color-bg-white);
  box-shadow: 0 12px 32px var(--color-clp-navy-shadow-04);
}

.contest-skeleton__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.contest-skeleton__top span:first-child {
  width: 74px;
  height: 31px;
  border-radius: 999px;
  background: var(--color-bg-soft);
}

.contest-skeleton__top span:last-child {
  width: 68px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-bg-soft);
}

.contest-skeleton__title,
.contest-skeleton__line,
.contest-skeleton__meta {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-bg-soft) 0%, var(--color-accent-soft) 50%, var(--color-bg-soft) 100%);
  background-size: 220% 100%;
  animation: contestSkeleton 1.2s ease-in-out infinite;
}

.contest-skeleton__title {
  width: 82%;
  height: 20px;
  margin-bottom: 15px;
}

.contest-skeleton__line {
  width: 100%;
  height: 13px;
  margin-bottom: 10px;
}

.contest-skeleton__line.is-short {
  width: 68%;
}

.contest-skeleton__meta {
  width: 74%;
  height: 29px;
  margin-top: 25px;
}

@keyframes contestSkeleton {
  0% {
    background-position: 220% 0;
  }

  100% {
    background-position: -220% 0;
  }
}

/* =========================
   TABLET
========================= */

@media (max-width: 1120px) {
  .contest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .contest-floating-submit {
    bottom: calc(
      var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
    );
  }
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .contest-page {
    background: var(--color-accent-soft);
  }

  .contest-hero-wrap {
    padding: 14px 14px 16px;
    background: var(--color-accent-soft);
  }

  .contest-hero {
    padding: 24px 20px 22px;
    border-radius: 22px;
    background: var(--color-bg-white);
    box-shadow: none;
  }

  .contest-hero-badge {
    margin-bottom: 14px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .contest-hero-title {
    gap: 10px;
    font-size: 34px;
    line-height: 1.12;
  }

  .contest-hero-title span {
    top: -1px;
    font-size: 13px;
    letter-spacing: 0.18em;
  }

  .contest-host-link {
    position: static;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    margin-top: 18px;
    padding: 12px 14px;
  }

  .contest-host-link__eyebrow {
    font-size: 12px;
  }

  .contest-host-link__label {
    font-size: 14px;
  }

  .contest-content {
    padding: 0 14px 96px;
  }

  .contest-search-card {
    padding: 16px;
    border-radius: 20px;
    box-shadow: none;
  }


  .contest-search-row {
    margin-top: 14px;
  }

  .contest-search-box {
    height: 50px;
    min-height: 50px;
    padding: 0 13px;
    border-radius: 14px;
  }

  .contest-search-box input {
    height: 50px;
    min-height: 50px;
    font-size: 16px;
    line-height: 50px;
  }

  .contest-filter-row {
    margin-top: 12px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contest-filter-row select {
    height: 45px;
    border-radius: 13px;
  }

  .contest-result-row {
    margin-top: 12px;
  }

  .contest-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contest-card {
    min-height: 214px;
    padding: 17px;
    border-radius: 20px;
    box-shadow: none;
  }

  .contest-card:hover {
    transform: none;
    border-color: var(--color-accent-soft-hover);
    box-shadow: none;
  }

  .contest-card__head {
    margin-bottom: 12px;
  }

  .contest-card h2 {
    font-size: 18px;
    line-height: 1.4;
  }

  .contest-card p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
  }

  .contest-card__meta {
    margin-top: 11px;
  }

  .contest-card__meta span {
    min-height: 28px;
    line-height: 1.25;
  }

  .contest-card__tags {
    padding-top: 12px;
  }

  .contest-interest-btn {
    min-width: 62px;
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .contest-interest-btn:hover:not(:disabled) {
    border-color: var(--color-clp-interest-border);
    background: var(--color-clp-interest-bg);
    color: var(--color-clp-interest-text);
  }

  .contest-pagination-btn,
  .contest-pagination-number {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .contest-floating-submit {
  right: 16px;
  bottom: calc(
    var(--mobile-bottom-nav-height, 68px) + 18px + env(safe-area-inset-bottom)
  );

    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 18px;
    justify-content: center;
    align-items: center;
  }

  .contest-floating-submit:hover {
    transform: none;
    box-shadow:
      0 10px 30px var(--color-brand-glow-fab),
      0 2px 8px var(--color-clp-black-glow-08);
  }

  .contest-floating-submit span {
    display: none;
  }

  .contest-floating-submit svg {
    width: 24px;
    height: 24px;
    font-size: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .contest-empty {
    min-height: 190px;
    border-radius: 20px;
    box-shadow: none;
  }

  .contest-skeleton {
    min-height: 214px;
    padding: 17px;
    border-radius: 20px;
    box-shadow: none;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 420px) {
  .contest-hero-wrap,
  .contest-content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .contest-hero {
    padding: 22px 18px 20px;
  }

  .contest-hero-title {
    gap: 8px;
    font-size: 31px;
  }

  .contest-hero-title span {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .contest-search-card {
    padding: 14px;
  }

  .contest-card {
    padding: 16px;
  }
}

/* ================================================
   DARK MODE — 컴포넌트 고유 오버라이드 (6-B2.2, dark.css 흡수분)
   토큰 재정의로 정확히 커버되지 않는 값만 여기 남긴다.
   ================================================ */

[data-theme="dark"] .contest-hero-title span,
[data-theme="dark"] .contest-hero-title h1 {
  color: var(--color-text-main);
}

[data-theme="dark"] .contest-result-row p,
[data-theme="dark"] .contest-result-row strong {
  color: var(--color-text-muted);
}

[data-theme="dark"] .contest-page {
  background: var(--app-bg);
}

[data-theme="dark"] .contest-hero-wrap {
  background: var(--color-clp-hero-bg-gradient-dark);
}

[data-theme="dark"] .contest-hero {
  background: var(--color-clp-hero-card-gradient-dark);
  border-color: var(--color-clp-hero-border-dark);
  box-shadow: 0 18px 46px var(--color-shadow-base);
}

[data-theme="dark"] .contest-hero-badge {
  background: var(--color-clp-hero-badge-bg-dark);
  color: var(--color-brand-strong);
}

[data-theme="dark"] .contest-type-tabs {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-bg-white);
}

[data-theme="dark"] .contest-type-tab {
  color: var(--color-text-placeholder);
  background: transparent;
}

[data-theme="dark"] .contest-type-tab:hover,
[data-theme="dark"] .contest-type-tab.is-active {
  background: var(--color-bg-white);
  color: var(--color-brand-strong);
}

[data-theme="dark"] .contest-search-card {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-clp-card-border-dark);
}

[data-theme="dark"] .contest-search-box {
  border-color: var(--color-border);
}

[data-theme="dark"] .contest-search-box:focus-within {
  border-color: var(--color-primary);
}

[data-theme="dark"] .contest-filter-row select {
  background-color: var(--color-bg-white);
  border-color: var(--color-border);
  color: var(--color-text-sub);
}

[data-theme="dark"] .contest-card {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-clp-card-border-dark);
}

[data-theme="dark"] .contest-card:hover {
  border-color: var(--color-clp-card-hover-border-dark);
  box-shadow: var(--color-clp-card-hover-shadow-dark);
}

[data-theme="dark"] .contest-dday.is-closed {
  background: var(--color-bg-white);
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .contest-card__meta span {
  color: var(--color-text-placeholder);
}

[data-theme="dark"] .contest-card__tags span {
  background: var(--color-bg-white);
}

[data-theme="dark"] .contest-pagination-btn,
[data-theme="dark"] .contest-pagination-number {
  background: var(--color-bg-sunken-dark);
  border-color: var(--color-border);
  color: var(--color-text-sub);
}
:root {
  --color-ctdp-page-glow: rgba(124, 58, 237, 0.12);
  --color-ctdp-page-bg-1: rgb(247, 247, 251);
  --color-ctdp-muted-2: rgb(75, 85, 99);
  --color-ctdp-card-shadow: rgba(15, 23, 42, 0.045);
  --color-ctdp-link-shadow: rgba(16, 54, 125, 0.2);
  --color-ctdp-link-hover-shadow: rgba(16, 54, 125, 0.26);
  --color-ctdp-success-text: rgb(4, 120, 87);
}

.contest-detail-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, var(--color-ctdp-page-glow), transparent 30%),
    linear-gradient(180deg, var(--color-ctdp-page-bg-1) 0%, var(--color-bg-soft) 48%, var(--color-bg-white) 100%);
  color: var(--color-text-main);
}

.contest-detail-page__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.contest-detail-back {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin-bottom: 18px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--color-text-sub);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.contest-detail-back:hover {
  color: var(--color-primary);
  border-color: var(--color-border-focus);
  background: var(--color-accent-soft);
}

.contest-detail-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background:
    radial-gradient(circle at top right, var(--color-ctdp-page-glow), transparent 34%),
    var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 14px 40px var(--color-shadow-base);
}

.contest-detail-hero__header {
  flex: 1;
  min-width: 0;
}

.contest-detail-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.contest-detail-type-badge,
.contest-detail-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.contest-detail-type-badge {
  background: var(--color-primary);
  color: var(--color-bg-white);
}

.contest-detail-badge {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.contest-detail-badge.is-closed {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}

.contest-detail-hero h1 {
  margin: 0 0 14px;
  color: var(--color-text-main);
  font-size: 32px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.contest-detail-hero__organizer {
  margin: 0 0 14px;
  color: var(--color-ctdp-muted-2);
  font-size: 15px;
  font-weight: 700;
}

.contest-detail-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 650;
}

.contest-detail-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

.interest-button,
.official-link-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.interest-button {
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  color: var(--color-primary);
  cursor: pointer;
}

.interest-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--color-accent-soft);
  border-color: var(--color-border-focus);
}

.interest-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.interest-button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-white);
  box-shadow: 0 10px 22px var(--color-shadow-primary-active);
}

.official-link-button {
  border: none;
  background: var(--color-primary);
  color: var(--color-bg-white);
  box-shadow: 0 10px 22px var(--color-ctdp-link-shadow);
}

.official-link-button:hover {
  transform: translateY(-1px);
  background: var(--color-primary-hover);
  box-shadow: 0 14px 28px var(--color-ctdp-link-hover-shadow);
}

.contest-detail-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 320px;
  gap: 20px;
}

.contest-project-space {
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg-white);
}

.contest-project-space__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.contest-project-space__head h2 { margin: 0 0 6px; font-size: 23px; }
.contest-project-space__head p { margin: 0; color: var(--color-text-muted); }

.contest-project-space__create {
  flex: none;
  padding: 13px 17px;
  border-radius: 13px;
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-weight: 850;
  text-decoration: none;
}

.contest-project-space__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.contest-project-space__card {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 17px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  text-decoration: none;
}

.contest-project-space__card > div { display: flex; justify-content: space-between; }
.contest-project-space__card span { color: var(--color-ctdp-success-text); font-size: 12px; font-weight: 900; }
.contest-project-space__card small { color: var(--color-accent); }
.contest-project-space__card h3 { margin: 13px 0 8px; font-size: 17px; }
.contest-project-space__card p { min-height: 42px; margin: 0 0 15px; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
.contest-project-space__card b { color: var(--color-primary); font-size: 13px; }
.contest-project-space__empty { padding: 28px; border: 1px dashed var(--color-border-focus); border-radius: 16px; color: var(--color-text-muted); text-align: center; }

.contest-detail-main,
.contest-detail-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contest-detail-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 14px 40px var(--color-ctdp-card-shadow);
}

.contest-detail-card h2 {
  margin: 0 0 16px;
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.contest-detail-info {
  display: grid;
  gap: 14px;
  margin: 0;
}

.contest-detail-info.compact {
  gap: 12px;
}

.contest-detail-info div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
}

.contest-detail-info.compact div {
  grid-template-columns: 72px 1fr;
}

.contest-detail-info dt {
  color: var(--color-text-muted);
  font-weight: 800;
}

.contest-detail-info dd {
  margin: 0;
  color: var(--color-text-main);
  word-break: break-word;
}

.contest-detail-info a {
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
}

.contest-detail-info a:hover {
  text-decoration: underline;
}

.contest-detail-description {
  color: var(--color-text-sub);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-line;
  word-break: break-word;
}

.contest-detail-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contest-detail-categories span {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 850;
}

.contest-detail-categories p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.contest-detail-empty {
  padding: 40px 20px;
  border: 1px dashed var(--color-border-muted);
  border-radius: 20px;
  background: var(--color-bg-white);
  color: var(--color-text-muted);
  text-align: center;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .contest-detail-hero {
    flex-direction: column;
  }

  .contest-detail-hero__actions {
    min-width: auto;
  }

  .contest-detail-content {
    grid-template-columns: 1fr;
  }

  .contest-project-space__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .contest-detail-page__inner {
    padding: 24px 16px 56px;
  }

  .contest-detail-hero {
    padding: 20px;
  }

  .contest-detail-hero h1 {
    font-size: 26px;
  }

  .contest-detail-info div,
  .contest-detail-info.compact div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .contest-project-space { padding: 20px; }
  .contest-project-space__head { flex-direction: column; }
  .contest-project-space__create { width: 100%; text-align: center; }
  .contest-project-space__grid { grid-template-columns: 1fr; }
}

[data-theme="dark"] {
  --color-ctdp-page-glow: rgba(167, 139, 250, 0.18);
  --color-ctdp-page-bg-1: rgb(15, 23, 42);
  --color-ctdp-muted-2: var(--color-text-muted);
  --color-ctdp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-ctdp-link-shadow: rgba(0, 0, 0, 0.3);
  --color-ctdp-link-hover-shadow: rgba(0, 0, 0, 0.4);
  --color-ctdp-success-text: rgb(110, 231, 183);
}
:root {
  --color-ctsp-page-bg: rgb(248, 250, 252);
}

.contest-submit-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, var(--color-ctdp-page-glow), transparent 30%),
    var(--color-ctsp-page-bg);
}

.contest-submit-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 20px;
}

.back-button {
  margin-bottom: 20px;
  border: none;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text-sub);
}

h1 {
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 900;
}

.submit-form {
  background: var(--color-bg-white);
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  font-size: 14px;
}

.field textarea {
  height: 120px;
  padding: 12px;
  resize: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.submit-btn {
  height: 48px;
  margin-top: 10px;
  border: none;
  border-radius: 14px;
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-weight: 900;
  cursor: pointer;
}

.submit-btn:hover {
  background: var(--color-primary-hover);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contest-form-error {
  margin-top: 12px;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 500;
}

[data-theme="dark"] {
  --color-ctsp-page-bg: rgb(15, 23, 42);
}
:root {
  --color-smrf-border: rgb(207, 215, 228);
  --color-smrf-title-border: rgb(41, 53, 72);
  --color-smrf-input-border: rgb(217, 223, 232);
  --color-smrf-input-text: rgb(31, 41, 55);
  --color-smrf-cell-border: rgb(226, 230, 237);
  --color-smrf-label-text: rgb(75, 85, 99);
  --color-smrf-member-head-bg: rgb(245, 246, 248);
  --color-smrf-member-head-text: rgb(89, 101, 121);
  --color-smrf-menu-border: rgb(220, 226, 235);
  --color-smrf-menu-shadow: rgba(15, 23, 42, 0.12);
  --color-smrf-menu-item-text: rgb(51, 65, 85);
  --color-smrf-menu-item-hover-bg: rgb(243, 245, 248);
  --color-smrf-options-border: rgb(217, 224, 234);
  --color-smrf-options-text: rgb(93, 104, 121);
}

.startup-monthly-form {
  grid-column: 1 / -1;
  border: 1px solid var(--color-smrf-border);
  background: var(--color-bg-white);
}

.startup-monthly-form__title {
  padding: 18px;
  border-bottom: 2px solid var(--color-smrf-title-border);
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.startup-monthly-form input,
.startup-monthly-form textarea {
  width: 100%;
  border: 1px solid var(--color-smrf-input-border);
  border-radius: 6px;
  background: var(--color-bg-white);
  color: var(--color-smrf-input-text);
  font: inherit;
}

.startup-monthly-form input {
  min-height: 38px;
  padding: 8px 10px;
}

.startup-monthly-form textarea {
  min-height: 130px;
  padding: 12px;
  line-height: 1.6;
  resize: vertical;
}

.startup-monthly-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.startup-monthly-form__grid > label,
.startup-monthly-form__grid > fieldset,
.startup-monthly-form__period {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--color-smrf-cell-border);
  border-bottom: 1px solid var(--color-smrf-cell-border);
}

.startup-monthly-form__grid > label:nth-child(even),
.startup-monthly-form__grid > fieldset:nth-child(even) {
  border-right: 0;
}

.startup-monthly-form__grid span,
.startup-monthly-form__grid legend {
  color: var(--color-smrf-label-text);
  font-size: 12px;
  font-weight: 750;
}

.startup-monthly-form__grid fieldset {
  display: flex;
  gap: 14px;
}

.startup-monthly-form__grid fieldset legend {
  float: left;
  width: 120px;
}

.startup-monthly-form__grid fieldset label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.startup-monthly-form__grid fieldset input {
  width: auto;
  min-height: auto;
}

.startup-monthly-form__grid .is-wide {
  grid-column: 1 / -1;
  border-right: 0;
}

.startup-monthly-form__period {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-right: 1px solid var(--color-smrf-cell-border);
}

.startup-monthly-form__period label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.startup-monthly-form__progress {
  display: flex;
  align-items: center;
  gap: 7px;
}

.startup-monthly-form__progress b {
  font-size: 12px;
}

.startup-monthly-form__members {
  padding: 16px 12px;
  border-bottom: 1px solid var(--color-smrf-cell-border);
  overflow-x: auto;
}

.startup-monthly-form__members h4 {
  margin: 0 0 10px;
  font-size: 13px;
}

.startup-monthly-form__member-head,
.startup-monthly-form__member {
  display: grid;
  grid-template-columns: 75px 100px minmax(160px, 1.5fr) repeat(3, minmax(110px, 1fr));
  min-width: 760px;
}

.startup-monthly-form__member-head span {
  padding: 8px;
  border: 1px solid var(--color-smrf-input-border);
  border-right: 0;
  background: var(--color-smrf-member-head-bg);
  color: var(--color-smrf-member-head-text);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.startup-monthly-form__member-head span:last-child {
  border-right: 1px solid var(--color-smrf-input-border);
}

.startup-monthly-form__member input {
  border-radius: 0;
  border-top: 0;
  border-right: 0;
}

.startup-monthly-form__member input:last-child {
  border-right: 1px solid var(--color-smrf-input-border);
}

.startup-monthly-form__activities {
  display: grid;
  gap: 16px;
  padding: 16px 12px;
}

.startup-monthly-form__activities label {
  display: grid;
  gap: 8px;
}

.startup-monthly-form__activities span {
  font-size: 13px;
  font-weight: 750;
}

.contest-operations__monthly-options {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.contest-operations__monthly-options details {
  position: relative;
}

.contest-operations__monthly-options summary {
  padding: 7px 10px;
  border: 1px solid var(--color-smrf-options-border);
  border-radius: 7px;
  color: var(--color-smrf-options-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.contest-operations__monthly-options summary::-webkit-details-marker {
  display: none;
}

.contest-operations__monthly-options-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  right: 0;
  width: 230px;
  padding: 6px;
  border: 1px solid var(--color-smrf-menu-border);
  border-radius: 9px;
  background: var(--color-bg-white);
  box-shadow: 0 8px 24px var(--color-smrf-menu-shadow);
}

.contest-operations__monthly-options-menu button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-smrf-menu-item-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.contest-operations__monthly-options-menu button:hover {
  background: var(--color-smrf-menu-item-hover-bg);
}

.contest-operations__template-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.contest-operations__template-actions button {
  padding: 8px 10px;
  border: 1px solid var(--color-smrf-options-border);
  border-radius: 7px;
  background: var(--color-bg-white);
  color: var(--color-smrf-options-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 760px) {
  .startup-monthly-form__grid {
    grid-template-columns: 1fr;
  }

  .startup-monthly-form__grid > label,
  .startup-monthly-form__grid > fieldset,
  .startup-monthly-form__period {
    border-right: 0;
  }

  .startup-monthly-form__grid .is-wide {
    grid-column: auto;
  }

  .startup-monthly-form__period {
    grid-template-columns: 1fr;
  }

  .startup-monthly-form__grid > label {
    grid-template-columns: 1fr;
  }

  .startup-monthly-form__grid fieldset {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .startup-monthly-form__grid fieldset legend {
    width: 100%;
  }
}

[data-theme="dark"] {
  --color-smrf-border: rgb(51, 65, 85);
  --color-smrf-title-border: rgb(71, 85, 105);
  --color-smrf-input-border: rgb(51, 65, 85);
  --color-smrf-input-text: var(--color-text-sub);
  --color-smrf-cell-border: rgb(51, 65, 85);
  --color-smrf-label-text: var(--color-text-muted);
  --color-smrf-member-head-bg: var(--color-bg-elevated-dark);
  --color-smrf-member-head-text: var(--color-text-muted);
  --color-smrf-menu-border: rgb(51, 65, 85);
  --color-smrf-menu-shadow: rgba(0, 0, 0, 0.35);
  --color-smrf-menu-item-text: var(--color-text-sub);
  --color-smrf-menu-item-hover-bg: var(--color-bg-elevated-dark);
  --color-smrf-options-border: rgb(51, 65, 85);
  --color-smrf-options-text: var(--color-text-muted);
}
:root {
  --color-smrp-dropzone-border: rgb(185, 196, 213);
  --color-smrp-dropzone-bg: rgb(248, 249, 251);
  --color-smrp-dropzone-text: rgb(101, 114, 135);
  --color-smrp-caption-bg: rgba(255, 255, 255, 0.92);
  --color-smrp-caption-text: rgb(52, 65, 88);
  --color-smrp-error-text: rgb(182, 68, 68);
  --color-smrp-img-border: rgb(217, 223, 232);
}

.startup-monthly-form__photos {
  display: grid;
  gap: 9px;
}

.startup-monthly-form__photos h4 {
  margin: 0;
  font-size: 13px;
}

.startup-monthly-form__photos > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.startup-monthly-form__photos label {
  position: relative;
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 150px;
  padding: 10px;
  border: 1px dashed var(--color-smrp-dropzone-border);
  border-radius: 8px;
  background: var(--color-smrp-dropzone-bg);
  color: var(--color-smrp-dropzone-text);
  cursor: pointer;
  overflow: hidden;
}

.startup-monthly-form__photos label.has-image {
  align-content: end;
}

.startup-monthly-form__photos label img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.startup-monthly-form__photos label strong {
  position: relative;
  z-index: 1;
  padding: 4px 7px;
  border-radius: 5px;
  background: var(--color-smrp-caption-bg);
  color: var(--color-smrp-caption-text);
  font-size: 11px;
}

.startup-monthly-form__photos label > span {
  font-size: 11px;
}

.startup-monthly-form__photos input {
  display: none;
}

.startup-monthly-form__photos > p {
  margin: 0;
  color: var(--color-smrp-error-text);
  font-size: 11px;
}

.startup-monthly-report-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.startup-monthly-report-photos figure {
  display: grid;
  gap: 5px;
  margin: 0;
}

.startup-monthly-report-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-smrp-img-border);
  object-fit: cover;
}

.startup-monthly-report-photos figcaption {
  color: var(--color-smrp-dropzone-text);
  font-size: 10px;
  text-align: center;
}

@media (max-width: 760px) {
  .startup-monthly-form__photos > div,
  .startup-monthly-report-photos {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] {
  --color-smrp-dropzone-border: rgb(71, 85, 105);
  --color-smrp-dropzone-bg: var(--color-bg-elevated-dark);
  --color-smrp-dropzone-text: var(--color-text-muted);
  --color-smrp-caption-bg: rgba(15, 23, 42, 0.82);
  --color-smrp-caption-text: var(--color-text-sub);
  --color-smrp-error-text: rgb(248, 113, 113);
  --color-smrp-img-border: rgb(51, 65, 85);
}
/* 이 파일 전용 로컬 토큰 - colors.css 공유 토큰과 정확히 일치하지 않는
   값 보존을 위해 파일 내부에 스코프. 다크값은 [data-theme="dark"] 블록에서 재정의. */
:root {
  --color-cop-border: rgb(223, 229, 239);
  --color-cop-shadow: rgba(15, 23, 42, 0.045);
  --color-cop-brand: rgb(49, 87, 213);
  --color-cop-subtext: rgb(104, 117, 138);
  --color-cop-tabs-bg: rgb(241, 243, 247);
  --color-cop-tab-text: rgb(109, 120, 138);
  --color-cop-tab-shadow: rgba(25, 40, 67, 0.08);
  --color-cop-article-border: rgb(227, 231, 238);
  --color-cop-request-border: rgb(207, 217, 247);
  --color-cop-request-bg: rgb(251, 252, 255);
  --color-cop-meta-bg: rgb(238, 242, 248);
  --color-cop-meta-text: rgb(95, 108, 128);
  --color-cop-meta-muted: rgb(138, 149, 165);
  --color-cop-body-text: rgb(88, 101, 121);
  --color-cop-submission-border: rgb(229, 234, 242);
  --color-cop-deadline-text: rgb(156, 86, 40);
  --color-cop-submitted-bg: rgb(241, 246, 255);
  --color-cop-submitted-warn: rgb(154, 91, 49);
  --color-cop-dash-border: rgb(185, 196, 213);
  --color-cop-label-text: rgb(101, 114, 135);
  --color-cop-inquiry-border: rgb(225, 230, 239);
  --color-cop-inquiry-bg: rgb(248, 249, 252);
  --color-cop-open-bg: rgb(255, 240, 229);
  --color-cop-open-text: rgb(182, 91, 36);
  --color-cop-answer-bg: rgb(242, 246, 255);
  --color-cop-answer-text: rgb(72, 86, 109);
  --color-cop-empty-border: rgb(216, 222, 234);
  --color-cop-empty-text: rgb(116, 128, 150);
  --color-cop-message-bg: rgb(238, 247, 242);
  --color-cop-message-text: rgb(40, 121, 87);
}

.contest-operations {
  margin: 24px 0;
  padding: 28px;
  border: 1px solid var(--color-cop-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 40px var(--color-cop-shadow);
}

.contest-operations__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.contest-operations__heading > div:first-child {
  display: grid;
  gap: 5px;
}

.contest-operations__heading > div:first-child > span {
  color: var(--color-cop-brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.contest-operations__heading h2 {
  margin: 0;
  font-size: 22px;
}

.contest-operations__heading p {
  margin: 0;
  color: var(--color-cop-subtext);
  font-size: 13px;
}

.contest-operations__tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 11px;
  background: var(--color-cop-tabs-bg);
}

.contest-operations__tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-cop-tab-text);
  font-weight: 800;
  cursor: pointer;
}

.contest-operations__tabs button.is-active {
  background: var(--color-bg-white);
  color: var(--color-cop-brand);
  box-shadow: 0 3px 9px var(--color-cop-tab-shadow);
}

.contest-operations__posts,
.contest-operations__inquiries {
  display: grid;
  gap: 12px;
}

.contest-operations__posts > article,
.contest-operations__inquiries > article {
  padding: 20px;
  border: 1px solid var(--color-cop-article-border);
  border-radius: 14px;
  background: var(--color-bg-white);
}

.contest-operations__posts > article.is-request {
  border-color: var(--color-cop-request-border);
  background: var(--color-cop-request-bg);
}

.contest-operations__post-meta,
.contest-operations__inquiries > article > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contest-operations__post-meta span,
.contest-operations__inquiries > article > div:first-child span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 20px;
  background: var(--color-cop-meta-bg);
  color: var(--color-cop-meta-text);
  font-size: 10px;
  font-weight: 850;
}

.contest-operations__post-meta small,
.contest-operations__inquiries small {
  color: var(--color-cop-meta-muted);
  font-size: 10px;
}

.contest-operations__posts h3,
.contest-operations__inquiries h3 {
  margin: 13px 0 7px;
  font-size: 16px;
}

.contest-operations__posts article > p,
.contest-operations__inquiries article > p {
  margin: 0;
  color: var(--color-cop-body-text);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.contest-operations__submission {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-cop-submission-border);
}

.contest-operations__deadline {
  display: flex;
  gap: 8px;
  color: var(--color-cop-deadline-text);
  font-size: 11px;
}

.contest-operations__submitted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px;
  border-radius: 9px;
  background: var(--color-cop-submitted-bg);
  color: var(--color-cop-brand);
}

.contest-operations__submitted > div {
  display: grid;
  gap: 2px;
}

.contest-operations__submitted strong {
  font-size: 11px;
}

.contest-operations__submitted span {
  font-size: 9px;
}

.contest-operations__submitted p {
  width: 100%;
  margin: 0;
  color: var(--color-cop-submitted-warn);
  font-size: 10px;
}

.contest-operations__submitted a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-cop-brand);
  font-size: 10px;
  text-decoration: none;
}

.contest-operations__submission form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.contest-operations__submission form textarea,
.contest-operations__submission form select {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid var(--color-com-input-border);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
}

.contest-operations__submission form textarea {
  min-height: 75px;
  resize: vertical;
}

.contest-operations__submission form label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--color-cop-dash-border);
  border-radius: 8px;
  color: var(--color-cop-label-text);
  font-size: 11px;
  cursor: pointer;
}

.contest-operations__submission form label input {
  display: none;
}

.contest-operations__submission form button,
.contest-operations__inquiry-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--color-cop-brand);
  color: var(--color-text-on-brand);
  font-weight: 850;
}

.contest-operations__inquiry-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
}

.contest-operations__inquiry-form {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--color-cop-inquiry-border);
  border-radius: 14px;
  background: var(--color-cop-inquiry-bg);
}

.contest-operations__inquiry-form h3 {
  margin: 0 0 3px;
}

.contest-operations__inquiry-form input,
.contest-operations__inquiry-form textarea,
.contest-operations__inquiry-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-com-input-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  font: inherit;
  font-size: 12px;
}

.contest-operations__inquiry-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contest-operations__inquiry-form button {
  min-height: 39px;
}

.contest-operations__inquiries > article > div:first-child span.is-open {
  background: var(--color-cop-open-bg);
  color: var(--color-cop-open-text);
}

.contest-operations__answer {
  display: grid !important;
  gap: 5px !important;
  margin-top: 14px;
  padding: 12px;
  border-radius: 9px;
  background: var(--color-cop-answer-bg);
}

.contest-operations__answer strong {
  color: var(--color-cop-brand);
  font-size: 11px;
}

.contest-operations__answer p {
  margin: 0;
  color: var(--color-cop-answer-text);
  font-size: 12px;
  white-space: pre-wrap;
}

.contest-operations__empty,
.contest-operations__access {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 140px;
  border: 1px dashed var(--color-cop-empty-border);
  border-radius: 12px;
  color: var(--color-cop-empty-text);
  text-align: center;
}

.contest-operations__access small {
  font-size: 11px;
}

.contest-operations__message {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--color-cop-message-bg);
  color: var(--color-cop-message-text);
  font-size: 12px;
}

@media (max-width: 760px) {
  .contest-operations {
    padding: 20px;
  }

  .contest-operations__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .contest-operations__inquiry-layout {
    grid-template-columns: 1fr;
  }

  .contest-operations__submission form {
    grid-template-columns: 1fr;
  }

  .contest-operations__submission form > * {
    grid-column: auto !important;
  }
}

/* ================================================
   DARK MODE — 이 파일에서 새로 민팅한 로컬 토큰만 재정의
   ================================================ */

[data-theme="dark"] {
  --color-cop-border: rgb(51, 65, 85);
  --color-cop-shadow: rgba(0, 0, 0, 0.3);
  --color-cop-brand: rgb(129, 155, 235);
  --color-cop-subtext: rgb(148, 163, 184);
  --color-cop-tabs-bg: rgb(30, 41, 59);
  --color-cop-tab-text: rgb(148, 163, 184);
  --color-cop-tab-shadow: rgba(0, 0, 0, 0.35);
  --color-cop-article-border: rgb(51, 65, 85);
  --color-cop-request-border: rgb(71, 85, 135);
  --color-cop-request-bg: rgb(30, 41, 59);
  --color-cop-meta-bg: rgb(51, 65, 85);
  --color-cop-meta-text: rgb(203, 213, 225);
  --color-cop-meta-muted: rgb(148, 163, 184);
  --color-cop-body-text: rgb(203, 213, 225);
  --color-cop-submission-border: rgb(51, 65, 85);
  --color-cop-deadline-text: rgb(230, 160, 110);
  --color-cop-submitted-bg: rgb(30, 41, 59);
  --color-cop-submitted-warn: rgb(224, 168, 122);
  --color-cop-dash-border: rgb(71, 85, 105);
  --color-cop-label-text: rgb(148, 163, 184);
  --color-cop-inquiry-border: rgb(51, 65, 85);
  --color-cop-inquiry-bg: rgb(30, 41, 59);
  --color-cop-open-bg: rgb(69, 40, 20);
  --color-cop-open-text: rgb(240, 160, 105);
  --color-cop-answer-bg: rgb(30, 41, 59);
  --color-cop-answer-text: rgb(203, 213, 225);
  --color-cop-empty-border: rgb(71, 85, 105);
  --color-cop-empty-text: rgb(148, 163, 184);
  --color-cop-message-bg: rgb(20, 55, 40);
  --color-cop-message-text: rgb(110, 211, 163);
}
/* 이 파일 전용 로컬 토큰 - colors.css 공유 토큰과 정확히 일치하지 않는
   값 보존을 위해 파일 내부에 스코프. 다크값은 [data-theme="dark"] 블록에서 재정의. */
:root {
  --color-com-heading: rgb(23, 36, 58);
  --color-com-muted: rgb(123, 135, 152);
  --color-com-badge-bg: rgb(238, 243, 251);
  --color-com-badge-text: rgb(82, 99, 125);
  --color-com-border: rgb(223, 229, 238);
  --color-com-current-border: rgb(174, 191, 229);
  --color-com-current-shadow: rgba(35, 71, 132, 0.08);
  --color-com-editing-border: rgb(141, 168, 223);
  --color-com-month-bg: rgb(238, 242, 247);
  --color-com-month-text: rgb(52, 68, 91);
  --color-com-brand: rgb(36, 74, 124);
  --color-com-brand-hover: rgb(29, 63, 109);
  --color-com-brand-glow: rgba(36, 74, 124, 0.42);
  --color-com-title: rgb(24, 38, 60);
  --color-com-meta-muted: rgb(120, 134, 154);
  --color-com-status-bg: rgb(241, 243, 246);
  --color-com-status-text: rgb(118, 130, 150);
  --color-com-status-warn-bg: rgb(255, 240, 232);
  --color-com-status-warn-text: rgb(165, 83, 37);
  --color-com-status-pending-bg: rgb(255, 247, 221);
  --color-com-status-pending-text: rgb(134, 96, 31);
  --color-com-status-ok-bg: rgb(234, 247, 240);
  --color-com-status-ok-text: rgb(38, 112, 79);
  --color-com-input-border: rgb(219, 225, 235);
  --color-com-subtle-bg: rgb(248, 250, 252);
  --color-com-detail-border: rgb(229, 234, 241);
  --color-com-detail-text: rgb(82, 97, 119);
  --color-com-composer-border: rgb(215, 224, 237);
  --color-com-composer-bg: rgb(251, 252, 254);
  --color-com-dash-border: rgb(174, 187, 208);
  --color-com-label-text: rgb(95, 110, 132);
  --color-com-tool-border: rgb(212, 220, 231);
  --color-com-tool-text: rgb(91, 104, 124);
  --color-com-menu-border: rgb(220, 226, 235);
  --color-com-menu-shadow: rgba(15, 23, 42, 0.12);
  --color-com-menu-text: rgb(51, 65, 85);
  --color-com-menu-hover-bg: rgb(243, 245, 248);
  --color-com-closed-text: rgb(135, 147, 164);
}

.contest-operations__monthly {
  display: grid;
  gap: 12px;
}

.contest-operations__monthly-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 10px;
}

.contest-operations__monthly-intro > div {
  display: grid;
  gap: 3px;
}

.contest-operations__monthly-intro strong {
  color: var(--color-com-heading);
  font-size: 14px;
  font-weight: 800;
}

.contest-operations__monthly-intro p,
.contest-operations__monthly-upcoming {
  margin: 0;
  color: var(--color-com-muted);
  font-size: 11px;
}

.contest-operations__monthly-intro > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--color-com-badge-bg);
  color: var(--color-com-badge-text);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.contest-operations__monthly-card {
  overflow: visible;
  border: 1px solid var(--color-com-border);
  border-radius: 14px;
  background: var(--color-bg-white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contest-operations__monthly-card.is-current {
  border-color: var(--color-com-current-border);
  box-shadow: 0 8px 24px var(--color-com-current-shadow);
}

.contest-operations__monthly-card.is-editing {
  border-color: var(--color-com-editing-border);
}

.contest-operations__monthly-card-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 14px 16px;
}

.contest-operations__month-mark {
  display: grid;
  place-items: center;
  align-content: center;
  width: 54px;
  height: 58px;
  border-radius: 11px;
  background: var(--color-com-month-bg);
  color: var(--color-com-month-text);
}

.contest-operations__monthly-card.is-current .contest-operations__month-mark {
  background: var(--color-com-brand);
  color: var(--color-text-on-brand);
}

.contest-operations__month-mark b {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.contest-operations__month-mark span {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

.contest-operations__monthly-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.contest-operations__monthly-meta > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.contest-operations__monthly-meta h3 {
  margin: 0;
  color: var(--color-com-title);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.contest-operations__monthly-meta p {
  margin: 0;
  overflow: hidden;
  color: var(--color-com-meta-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contest-operations__monthly-status {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--color-com-status-bg);
  color: var(--color-com-status-text);
  font-size: 9px;
  font-weight: 800;
}

.contest-operations__monthly-status.is-required,
.contest-operations__monthly-status.is-needs_revision {
  background: var(--color-com-status-warn-bg);
  color: var(--color-com-status-warn-text);
}

.contest-operations__monthly-status.is-submitted {
  background: var(--color-com-status-pending-bg);
  color: var(--color-com-status-pending-text);
}

.contest-operations__monthly-status.is-confirmed {
  background: var(--color-com-status-ok-bg);
  color: var(--color-com-status-ok-text);
}

.contest-operations__monthly-write {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 9px;
  background: var(--color-com-brand);
  color: var(--color-text-on-brand);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contest-operations__monthly-write:hover {
  background: var(--color-com-brand-hover);
}

.contest-operations__monthly-write:focus-visible,
.contest-operations__monthly-detail summary:focus-visible {
  outline: 2px solid var(--color-com-brand-glow);
  outline-offset: 2px;
}

.contest-operations__monthly-card > select {
  width: calc(100% - 32px);
  margin: 0 16px 14px;
  padding: 10px;
  border: 1px solid var(--color-com-input-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  font: inherit;
  font-size: 12px;
}

.contest-operations__monthly-card .contest-operations__submission-post {
  margin: 0 16px 16px;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--color-com-subtle-bg);
}

.contest-operations__monthly-detail {
  border-top: 1px solid var(--color-com-detail-border);
}

.contest-operations__monthly-detail summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
  color: var(--color-com-detail-text);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.contest-operations__monthly-detail summary::-webkit-details-marker {
  display: none;
}

.contest-operations__monthly-detail[open] summary svg {
  transform: rotate(180deg);
}

.contest-operations__monthly-detail .contest-operations__submission-content {
  margin-top: 10px;
}

.contest-operations__monthly-card form.contest-operations__composer {
  margin: 0 16px 16px;
  border-color: var(--color-com-composer-border);
  background: var(--color-com-composer-bg);
}

.contest-operations__monthly-card form.contest-operations__composer > label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px dashed var(--color-com-dash-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-com-label-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.contest-operations__monthly-card form.contest-operations__composer > label input {
  display: none;
}

.contest-operations__monthly-card form.contest-operations__composer > button[type="submit"] {
  border: 0;
  border-radius: 8px;
  background: var(--color-com-brand);
  color: var(--color-text-on-brand);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.contest-operations__monthly-card form.contest-operations__composer > button[type="submit"]:hover:not(:disabled) {
  background: var(--color-com-brand-hover);
}

.contest-operations__monthly-card form.contest-operations__composer > button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.contest-operations__monthly-composer-tools {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contest-operations__monthly-composer-tools > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-com-tool-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-com-tool-text);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.contest-operations__monthly-options {
  position: relative;
  display: flex;
}

.contest-operations__monthly-options details {
  position: relative;
}

.contest-operations__monthly-options-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  left: 0;
  width: 230px;
  padding: 6px;
  border: 1px solid var(--color-com-menu-border);
  border-radius: 9px;
  background: var(--color-bg-white);
  box-shadow: 0 8px 24px var(--color-com-menu-shadow);
}

.contest-operations__monthly-options-menu button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-com-menu-text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.contest-operations__monthly-options-menu button:hover {
  background: var(--color-com-menu-hover-bg);
}

.contest-operations__monthly-closed {
  margin: 0 16px 14px 84px;
  color: var(--color-com-closed-text);
  font-size: 10px;
}

.contest-operations__monthly-upcoming {
  padding: 8px 2px 0;
  text-align: center;
}

@media (max-width: 760px) {
  .contest-operations__monthly-intro {
    align-items: flex-start;
  }

  .contest-operations__monthly-card-head {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .contest-operations__month-mark {
    width: 46px;
    height: 52px;
  }

  .contest-operations__month-mark b {
    font-size: 19px;
  }

  .contest-operations__monthly-write {
    grid-column: 1 / -1;
    width: 100%;
  }

  .contest-operations__monthly-card .contest-operations__submission-post,
  .contest-operations__monthly-card form.contest-operations__composer {
    margin-right: 13px;
    margin-left: 13px;
  }

  .contest-operations__monthly-composer-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .contest-operations__monthly-composer-tools > button,
  .contest-operations__monthly-options,
  .contest-operations__monthly-options details,
  .contest-operations .contest-operations__monthly-options summary {
    width: 100%;
  }

  .contest-operations__monthly-options-menu {
    right: auto;
    left: 0;
    width: 100%;
  }

  .contest-operations__monthly-closed {
    margin-left: 13px;
  }
}

/* ================================================
   DARK MODE — 이 파일에서 새로 민팅한 로컬 토큰만 재정의
   ================================================ */

[data-theme="dark"] {
  --color-com-heading: rgb(226, 232, 240);
  --color-com-muted: rgb(148, 163, 184);
  --color-com-badge-bg: rgb(30, 41, 59);
  --color-com-badge-text: rgb(148, 163, 184);
  --color-com-border: rgb(51, 65, 85);
  --color-com-current-border: rgb(86, 120, 178);
  --color-com-current-shadow: rgba(0, 0, 0, 0.35);
  --color-com-editing-border: rgb(96, 130, 190);
  --color-com-month-bg: rgb(30, 41, 59);
  --color-com-month-text: rgb(203, 213, 225);
  --color-com-brand: rgb(79, 142, 247);
  --color-com-brand-hover: rgb(59, 120, 215);
  --color-com-brand-glow: rgba(79, 142, 247, 0.42);
  --color-com-title: rgb(226, 232, 240);
  --color-com-meta-muted: rgb(148, 163, 184);
  --color-com-status-bg: rgb(51, 65, 85);
  --color-com-status-text: rgb(203, 213, 225);
  --color-com-status-warn-bg: rgb(63, 35, 20);
  --color-com-status-warn-text: rgb(251, 165, 118);
  --color-com-status-pending-bg: rgb(66, 55, 20);
  --color-com-status-pending-text: rgb(250, 204, 108);
  --color-com-status-ok-bg: rgb(20, 55, 40);
  --color-com-status-ok-text: rgb(110, 211, 163);
  --color-com-input-border: rgb(51, 65, 85);
  --color-com-subtle-bg: rgb(30, 41, 59);
  --color-com-detail-border: rgb(51, 65, 85);
  --color-com-detail-text: rgb(148, 163, 184);
  --color-com-composer-border: rgb(51, 65, 85);
  --color-com-composer-bg: rgb(30, 41, 59);
  --color-com-dash-border: rgb(71, 85, 105);
  --color-com-label-text: rgb(148, 163, 184);
  --color-com-tool-border: rgb(51, 65, 85);
  --color-com-tool-text: rgb(148, 163, 184);
  --color-com-menu-border: rgb(51, 65, 85);
  --color-com-menu-shadow: rgba(0, 0, 0, 0.45);
  --color-com-menu-text: rgb(226, 232, 240);
  --color-com-menu-hover-bg: rgb(51, 65, 85);
  --color-com-closed-text: rgb(148, 163, 184);
}
/* 이 파일 전용 로컬 토큰 - colors.css 공유 토큰과 정확히 일치하지 않는
   값 보존을 위해 파일 내부에 스코프. 다크값은 [data-theme="dark"] 블록에서 재정의. */
:root {
  --color-copo-select-border: rgb(203, 212, 224);
  --color-copo-text: rgb(52, 65, 88);
  --color-copo-border-active: rgb(158, 171, 192);
  --color-copo-bg-active: rgb(245, 247, 250);
  --color-copo-panel-border: rgb(224, 229, 237);
  --color-copo-panel-bg: rgb(247, 248, 250);
  --color-copo-hover-bg: rgb(241, 244, 248);
  --color-copo-cancel-text: rgb(89, 101, 121);
  --color-copo-strong-text: rgb(38, 52, 73);
  --color-copo-action-border: rgb(212, 218, 228);
  --color-copo-action-hover-border: rgb(174, 184, 199);
  --color-copo-open-bg: rgb(244, 246, 248);
  --color-copo-menu-border: rgb(223, 228, 236);
  --color-copo-menu-shadow: rgba(28, 39, 60, 0.12);
  --color-copo-delete-border: rgb(237, 240, 244);
  --color-copo-delete-hover-bg: rgb(255, 242, 241);
  --color-copo-disabled-bg: rgb(226, 232, 240);
  --color-copo-disabled-text: rgb(148, 163, 184);
  --color-copo-para-text: rgb(83, 96, 117);
  --color-copo-table-border: rgb(217, 223, 232);
  --color-copo-table-head-bg: rgb(245, 246, 248);
  --color-copo-table-head-text: rgb(75, 85, 99);
  --color-copo-review-border: rgb(209, 139, 88);
  --color-copo-review-bg: rgb(255, 248, 242);
  --color-copo-review-text: rgb(138, 81, 46);
  --color-copo-manager-border: rgb(216, 224, 235);
  --color-copo-manager-bg: rgb(246, 248, 251);
  --color-copo-manager-muted: rgb(115, 128, 149);
  --color-copo-title-border: rgb(231, 235, 241);
  --color-copo-title-text: rgb(31, 43, 61);
  --color-copo-title-muted: rgb(124, 135, 152);
  --color-copo-editor-hover-bg: rgb(240, 240, 255);
  --color-copo-editor-active-bg: rgb(230, 224, 255);
  --color-copo-editor-active-text: rgb(91, 61, 245);
}

.contest-operations__submission-post {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-com-border);
  border-radius: 12px;
  background: var(--color-bg-white);
}

.contest-operations .contest-operations__monthly-options summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border-color: var(--color-copo-select-border);
  background: var(--color-bg-white);
  color: var(--color-copo-text);
  font-size: 12px;
  font-weight: 750;
}

.contest-operations .contest-operations__monthly-options details[open] summary {
  border-color: var(--color-copo-border-active);
  background: var(--color-copo-bg-active);
}

.contest-operations .contest-operations__monthly-options summary svg:last-child {
  margin-left: 2px;
  transition: transform 150ms ease;
}

.contest-operations .contest-operations__monthly-options details[open] summary svg:last-child {
  transform: rotate(180deg);
}

.contest-operations .contest-operations__template-actions {
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-copo-panel-border);
  border-radius: 9px;
  background: var(--color-copo-panel-bg);
}

.contest-operations .contest-operations__template-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-color: var(--color-copo-select-border);
  background: var(--color-bg-white);
  color: var(--color-copo-text);
  font-size: 12px;
  font-weight: 750;
}

.contest-operations .contest-operations__template-actions button:hover {
  border-color: var(--color-copo-border-active);
  background: var(--color-copo-hover-bg);
}

.contest-operations .contest-operations__template-actions button.is-cancel {
  color: var(--color-copo-cancel-text);
}

.contest-operations .contest-operations__template-actions button:focus-visible,
.contest-operations .contest-operations__monthly-options summary:focus-visible {
  outline: 2px solid var(--color-cop-brand);
  outline-offset: 2px;
}

.contest-operations__submission-post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.contest-operations__submission-post-identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.contest-operations__submission-post-head strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-copo-strong-text);
  font-size: 12px;
}

.contest-operations__submission-post-head span {
  color: var(--color-cop-meta-muted);
  font-size: 10px;
}

.contest-operations__submission-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.contest-operations__submission-actions > a,
.contest-operations__submission-actions > button,
.contest-operations__submission-more > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-copo-action-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-copo-text);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.contest-operations__submission-actions > a:hover {
  border-color: var(--color-copo-action-hover-border);
  background: var(--color-copo-panel-bg);
}

.contest-operations__submission-more {
  position: relative;
}

.contest-operations__submission-more > summary {
  width: 36px;
  padding: 0;
  list-style: none;
}

.contest-operations__submission-more > summary::-webkit-details-marker {
  display: none;
}

.contest-operations__submission-more[open] > summary {
  border-color: var(--color-copo-action-hover-border);
  background: var(--color-copo-open-bg);
}

.contest-operations__submission-more > div {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  right: 0;
  min-width: 142px;
  padding: 5px;
  border: 1px solid var(--color-copo-menu-border);
  border-radius: 9px;
  background: var(--color-bg-white);
  box-shadow: 0 8px 24px var(--color-copo-menu-shadow);
}

.contest-operations__submission-more > div button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-copo-text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.contest-operations__submission-more > div button:hover:not(:disabled) {
  background: var(--color-copo-open-bg);
}

.contest-operations__submission-more > div button.is-delete {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-copo-delete-border);
  border-radius: 0 0 6px 6px;
  color: var(--color-danger-strong);
}

.contest-operations__submission-more > div button.is-delete:hover:not(:disabled) {
  background: var(--color-copo-delete-hover-bg);
}

.contest-operations__submission-actions > a:focus-visible,
.contest-operations__submission-actions > button:focus-visible,
.contest-operations__submission-more > summary:focus-visible {
  outline: 2px solid var(--color-cop-brand);
  outline-offset: 2px;
}

.contest-operations__submission-actions > button:disabled {
  border-color: var(--color-border-strong);
  background: var(--color-copo-disabled-bg);
  color: var(--color-copo-disabled-text);
  cursor: not-allowed;
}

.contest-operations__submission-post > p {
  margin: 0;
  color: var(--color-copo-para-text);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.contest-operations__submission-content {
  color: var(--color-copo-para-text);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.contest-operations__submission-content > :first-child {
  margin-top: 0;
}

.contest-operations__submission-content > :last-child {
  margin-bottom: 0;
}

.contest-operations__submission-content img {
  max-width: 100%;
  height: auto;
}

.contest-operations__submission-content table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.contest-operations__submission-content th,
.contest-operations__submission-content td {
  padding: 8px;
  border: 1px solid var(--color-copo-table-border);
  font-size: 11px;
  text-align: left;
  vertical-align: middle;
}

.contest-operations__submission-content th {
  background: var(--color-copo-table-head-bg);
  color: var(--color-copo-table-head-text);
  font-weight: 750;
}

.contest-operations__submission-content h2 {
  margin: 0 0 14px;
  color: var(--color-text-main);
  font-size: 18px;
  text-align: center;
}

.contest-operations__submission-content h3 {
  margin: 18px 0 8px;
  font-size: 14px;
}

.contest-operations__submission-content h4 {
  margin: 12px 0 5px;
  font-size: 12px;
}

.contest-operations__submission-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contest-operations__submission-files:empty {
  display: none;
}

.contest-operations__submission-files a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-cop-brand);
  font-size: 11px;
  text-decoration: none;
}

.contest-operations__submission-files button {
  padding: 5px 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-bg-white);
  color: var(--color-cop-brand);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.contest-operations__submission-files button:disabled {
  color: var(--color-copo-disabled-text);
  cursor: not-allowed;
  opacity: 0.65;
}

.contest-operations__review-note {
  padding: 10px;
  border-left: 3px solid var(--color-copo-review-border);
  background: var(--color-copo-review-bg);
  color: var(--color-copo-review-text);
  font-size: 11px;
}

.contest-operations__manager-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-copo-manager-border);
  border-radius: 10px;
  background: var(--color-copo-manager-bg);
}

.contest-operations__manager-action > div {
  display: grid;
  gap: 4px;
}

.contest-operations__manager-action strong {
  color: var(--color-copo-strong-text);
  font-size: 13px;
  font-weight: 650;
}

.contest-operations__manager-action span {
  color: var(--color-copo-manager-muted);
  font-size: 11px;
}

.contest-operations__manager-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 8px;
  background: var(--color-com-brand);
  color: var(--color-text-on-brand);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.contest-operations__manager-action a:hover {
  background: var(--color-com-brand-hover);
}

.contest-operations__manager-action a:focus-visible {
  outline: 2px solid var(--color-com-brand-glow);
  outline-offset: 2px;
}

.contest-operations__access--compact {
  min-height: 76px;
  font-size: 12px;
}

.contest-operations__inquiry-layout {
  grid-template-columns: 1fr;
}

.contest-operations__composer,
.contest-operations__inquiry-form.contest-operations__composer,
.contest-operations__monthly form.contest-operations__composer,
.contest-operations__submission form.contest-operations__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--color-com-border);
  border-radius: 12px;
  background: var(--color-bg-white);
}

.contest-operations__composer-title {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-copo-title-border);
}

.contest-operations__composer-title strong {
  color: var(--color-copo-title-text);
  font-size: 15px;
}

.contest-operations__composer-title span {
  color: var(--color-copo-title-muted);
  font-size: 11px;
}

.contest-operations__composer > input,
.contest-operations__composer > select,
.contest-operations__composer > .rich-editor {
  grid-column: 1 / -1;
}

.contest-operations__composer > input,
.contest-operations__composer > select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-com-input-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  font: inherit;
  font-size: 13px;
}

.contest-operations__composer > label {
  min-height: 42px;
}

.contest-operations__composer > button {
  min-height: 42px;
  padding: 0 18px;
}

.contest-operations__composer .rich-editor-toolbar button,
.contest-operations__composer .rich-editor-toolbar .image-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-weight: 400;
}

.contest-operations__composer .rich-editor-toolbar button:hover,
.contest-operations__composer .rich-editor-toolbar .image-button:hover {
  background: var(--color-copo-editor-hover-bg);
}

.contest-operations__composer .rich-editor-toolbar button.is-active {
  background: var(--color-copo-editor-active-bg);
  color: var(--color-copo-editor-active-text);
}

.contest-operations__composer .rich-editor-content {
  min-height: 180px;
  max-height: 420px;
}

.contest-operations__message {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .contest-operations__manager-action {
    align-items: stretch;
    flex-direction: column;
  }

  .contest-operations__manager-action a {
    width: 100%;
  }

  .contest-operations__composer,
  .contest-operations__inquiry-form.contest-operations__composer,
  .contest-operations__monthly form.contest-operations__composer,
  .contest-operations__submission form.contest-operations__composer {
    grid-template-columns: 1fr;
  }

  .contest-operations__composer > * {
    grid-column: auto !important;
  }

  .contest-operations__composer-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .contest-operations__submission-post-head {
    flex-direction: column;
  }

  .contest-operations__submission-actions {
    width: 100%;
  }

  .contest-operations__submission-actions > a,
  .contest-operations__submission-actions > button {
    flex: 1;
    height: 40px;
  }

  .contest-operations__submission-more > summary {
    width: 40px;
    height: 40px;
  }

  .contest-operations .contest-operations__monthly-options summary {
    min-height: 40px;
  }

  .contest-operations .contest-operations__template-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .contest-operations .contest-operations__template-actions button {
    width: 100%;
    min-height: 40px;
  }
}

/* ================================================
   DARK MODE — 이 파일에서 새로 민팅한 로컬 토큰만 재정의
   ================================================ */

[data-theme="dark"] {
  --color-copo-select-border: rgb(71, 85, 105);
  --color-copo-text: rgb(226, 232, 240);
  --color-copo-border-active: rgb(100, 116, 139);
  --color-copo-bg-active: rgb(51, 65, 85);
  --color-copo-panel-border: rgb(51, 65, 85);
  --color-copo-panel-bg: rgb(30, 41, 59);
  --color-copo-hover-bg: rgb(51, 65, 85);
  --color-copo-cancel-text: rgb(148, 163, 184);
  --color-copo-strong-text: rgb(226, 232, 240);
  --color-copo-action-border: rgb(71, 85, 105);
  --color-copo-action-hover-border: rgb(100, 116, 139);
  --color-copo-open-bg: rgb(51, 65, 85);
  --color-copo-menu-border: rgb(51, 65, 85);
  --color-copo-menu-shadow: rgba(0, 0, 0, 0.4);
  --color-copo-delete-border: rgb(51, 65, 85);
  --color-copo-delete-hover-bg: rgb(69, 30, 28);
  --color-copo-disabled-bg: rgb(51, 65, 85);
  --color-copo-disabled-text: rgb(100, 116, 139);
  --color-copo-para-text: rgb(203, 213, 225);
  --color-copo-table-border: rgb(51, 65, 85);
  --color-copo-table-head-bg: rgb(30, 41, 59);
  --color-copo-table-head-text: rgb(203, 213, 225);
  --color-copo-review-border: rgb(209, 139, 88);
  --color-copo-review-bg: rgb(63, 40, 22);
  --color-copo-review-text: rgb(230, 175, 135);
  --color-copo-manager-border: rgb(51, 65, 85);
  --color-copo-manager-bg: rgb(30, 41, 59);
  --color-copo-manager-muted: rgb(148, 163, 184);
  --color-copo-title-border: rgb(51, 65, 85);
  --color-copo-title-text: rgb(226, 232, 240);
  --color-copo-title-muted: rgb(148, 163, 184);
  --color-copo-editor-hover-bg: rgb(51, 55, 85);
  --color-copo-editor-active-bg: rgb(60, 50, 110);
  --color-copo-editor-active-text: rgb(167, 149, 251);
}
:root {
  --color-epp-message-border: rgb(216, 227, 251);
  --color-epp-message-bg: rgb(245, 248, 255);
  --color-epp-message-text: rgb(56, 90, 157);
  --color-epp-card-shadow: rgba(24, 44, 78, 0.035);
  --color-epp-icon-bg: rgb(237, 243, 255);
  --color-epp-faint-text: rgb(137, 150, 170);
  --color-epp-revision-bg: rgb(255, 240, 230);
  --color-epp-revision-text: rgb(231, 101, 27);
  --color-epp-progress-border: rgb(175, 196, 242);
  --color-epp-tag-bg: rgb(242, 245, 249);
  --color-epp-completed-bg: rgb(232, 248, 242);
  --color-epp-completed-text: rgb(37, 147, 107);
  --color-epp-closed-bg: rgb(241, 243, 246);
  --color-epp-label-text: rgb(86, 101, 124);
  --color-epp-revision-feedback-bg: rgb(255, 248, 242);
}

.education-participant {
  display: grid;
  gap: 16px;
  color: var(--pc-text);
}

.education-participant__state,
.education-participant__empty {
  display: grid;
  min-height: 140px;
  place-items: center;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--color-bg-white);
  color: var(--pc-muted);
  font-size: 12px;
}

.education-participant__message {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-epp-message-border);
  border-radius: 10px;
  background: var(--color-epp-message-bg);
  color: var(--color-epp-message-text);
  font-size: 12px;
}

.education-participant__home-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.education-participant__home-metrics article {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 3px 12px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 7px 24px var(--color-epp-card-shadow);
}

.education-participant__home-metrics article > span,
.education-participant__home-tasks article > span,
.education-participant__assignments header > span,
.education-participant__form-title > span,
.education-participant__item-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--color-epp-icon-bg);
  color: var(--pc-blue);
}

.education-participant__home-metrics article > span { grid-row: 1 / 4; }
.education-participant__home-metrics svg { width: 21px; }
.education-participant__home-metrics small { color: var(--pc-muted); font-size: 11px; }
.education-participant__home-metrics strong { grid-row: 1 / 3; grid-column: 3; font-size: 24px; }
.education-participant__home-metrics p { margin: 1px 0 0; color: var(--color-epp-faint-text); font-size: 11px; }

.education-participant__home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.education-participant__home-focus,
.education-participant__home-tasks,
.education-participant__assignments > article,
.education-participant__mentoring-form,
.education-participant__mentoring-list {
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 7px 24px var(--color-epp-card-shadow);
}

.education-participant__home-focus { padding: 22px; }
.education-participant__home-focus header { display: flex; justify-content: space-between; }
.education-participant__home-focus header > svg { color: var(--pc-blue); }
.education-participant__home-focus small { color: var(--pc-muted); }
.education-participant__home-focus h2 { margin: 6px 0 0; font-size: 18px; }
.education-participant__home-focus > p { min-height: 40px; margin: 16px 0; color: var(--pc-muted); font-size: 13px; }
.education-participant__home-focus time { display: flex; gap: 7px; align-items: center; color: var(--pc-blue); font-size: 12px; }
.education-participant__home-focus time svg { width: 15px; }

.education-participant__home-tasks { padding: 22px; }
.education-participant__home-tasks > header,
.education-participant__mentoring-list > header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.education-participant__home-tasks > header h2,
.education-participant__mentoring-list > header h2 { margin: 0; font-size: 18px; }
.education-participant__home-tasks > header span,
.education-participant__mentoring-list > header span { color: var(--pc-muted); font-size: 12px; }
.education-participant__home-tasks > article {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid var(--pc-line);
}
.education-participant__home-tasks > article > span { width: 38px; height: 38px; }
.education-participant__home-tasks > article > span.is-needs_revision { background: var(--color-epp-revision-bg); color: var(--color-epp-revision-text); }
.education-participant__home-tasks small,
.education-participant__home-tasks time { color: var(--pc-muted); font-size: 11px; }
.education-participant__home-tasks strong { display: block; margin: 3px 0; font-size: 14px; }
.education-participant__home-tasks p { max-width: 580px; margin: 0; overflow: hidden; color: var(--pc-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.education-participant__home-tasks .education-participant__empty { min-height: 100px; border: 0; box-shadow: none; }

.education-participant__curriculum,
.education-participant__assignments { display: grid; gap: 12px; }
.education-participant__curriculum article {
  display: grid;
  grid-template-columns: 62px 42px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 7px 24px var(--color-epp-card-shadow);
}
.education-participant__curriculum article.is-in_progress { border-color: var(--color-epp-progress-border); }
.education-participant__curriculum article.is-completed { opacity: .72; }
.education-participant__week { display: grid; place-items: center; padding-right: 16px; border-right: 1px solid var(--pc-line); }
.education-participant__week span { color: var(--pc-text); font-size: 24px; font-weight: 750; }
.education-participant__week small { color: var(--pc-muted); font-size: 9px; letter-spacing: .12em; }
.education-participant__item-copy > div { display: flex; gap: 8px; align-items: center; }
.education-participant__item-copy em,
.education-participant__item-copy b { padding: 4px 8px; border-radius: 6px; background: var(--color-epp-tag-bg); color: var(--pc-muted); font-size: 11px; font-style: normal; }
.education-participant__item-copy h2 { margin: 8px 0 4px; font-size: 17px; }
.education-participant__item-copy p { margin: 0; color: var(--pc-muted); font-size: 13px; }
.education-participant__item-copy time { display: flex; gap: 5px; align-items: center; margin-top: 9px; color: var(--pc-muted); font-size: 12px; }
.education-participant__item-copy time svg { width: 14px; }

.education-participant__assignments > article { padding: 22px; }
.education-participant__assignments header { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; }
.education-participant__assignments h2 { margin: 3px 0 0; font-size: 18px; }
.education-participant__assignments header small { color: var(--pc-muted); }
.education-participant__assignments header > b,
.education-participant__request-head b { padding: 6px 10px; border-radius: 99px; background: var(--color-epp-completed-bg); color: var(--color-epp-completed-text); font-size: 11px; }
.education-participant__assignments header > b.is-needs_revision { background: var(--color-epp-revision-bg); color: var(--color-epp-revision-text); }
.education-participant__assignments header > b.is-reviewed { background: var(--color-epp-icon-bg); color: var(--pc-blue); }
.education-participant__assignments header > b.is-closed { background: var(--color-epp-closed-bg); color: var(--pc-muted); }
.education-participant__assignments > article > p { margin: 18px 0; color: var(--pc-muted); font-size: 14px; line-height: 1.65; }
.education-participant__assignment-meta { display: flex; gap: 18px; padding: 11px 0; border-block: 1px solid var(--pc-line); color: var(--pc-muted); font-size: 12px; }
.education-participant__assignment-meta span { display: flex; gap: 6px; align-items: center; }
.education-participant__assignment-meta svg { width: 14px; }
.education-participant__assignment-meta strong { margin-left: auto; color: var(--pc-blue); }
.education-participant__feedback { margin-top: 14px; padding: 13px 15px; border-radius: 10px; background: var(--color-epp-message-bg); }
.education-participant__feedback.is-needs_revision { background: var(--color-epp-revision-feedback-bg); }
.education-participant__feedback strong { color: var(--color-epp-message-text); font-size: 12px; }
.education-participant__feedback p { margin: 5px 0 0; color: var(--pc-muted); font-size: 13px; }
.education-participant__submit-box { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 15px; }

.education-participant textarea,
.education-participant input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--pc-line);
  border-radius: 10px;
  background: var(--color-bg-white);
  color: var(--pc-text);
  outline: none;
}
.education-participant textarea { min-height: 84px; padding: 12px; resize: vertical; }
.education-participant input { height: 42px; padding: 0 12px; }
.education-participant textarea:focus,
.education-participant input:focus { border-color: var(--pc-blue); }
.education-participant button { display: inline-flex; gap: 7px; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--pc-blue); color: var(--color-bg-white); font-weight: 700; cursor: pointer; }
.education-participant button:disabled { opacity: .55; }
.education-participant__submit-box button { align-self: end; height: 42px; padding: 0 17px; }
.education-participant button svg { width: 15px; }

.education-participant--mentoring { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.education-participant--mentoring > .education-participant__message { grid-column: 1 / -1; }
.education-participant__mentoring-form,
.education-participant__mentoring-list { padding: 22px; }
.education-participant__form-title { display: flex; gap: 12px; margin-bottom: 20px; }
.education-participant__form-title h2 { margin: 0; font-size: 18px; }
.education-participant__form-title p { margin: 5px 0 0; color: var(--pc-muted); font-size: 12px; }
.education-participant__mentoring-form label { display: grid; gap: 7px; margin-top: 13px; color: var(--color-epp-label-text); font-size: 12px; }
.education-participant__mentoring-form > div:last-child { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.education-participant__mentoring-form > div:last-child button { height: 42px; padding: 0 17px; }
.education-participant__mentoring-list article { padding: 16px 0; border-top: 1px solid var(--pc-line); }
.education-participant__request-head { display: flex; justify-content: space-between; }
.education-participant__request-head b.is-scheduled { background: var(--color-epp-icon-bg); color: var(--pc-blue); }
.education-participant__request-head b.is-completed { background: var(--color-epp-closed-bg); color: var(--pc-muted); }
.education-participant__request-head time { color: var(--pc-muted); font-size: 11px; }
.education-participant__mentoring-list h3 { margin: 13px 0 5px; font-size: 15px; }
.education-participant__mentoring-list article > p { margin: 0; color: var(--pc-muted); font-size: 13px; line-height: 1.55; }
.education-participant__schedule-confirm { display: flex; gap: 9px; margin-top: 12px; padding: 11px; border-radius: 10px; background: var(--color-epp-message-bg); color: var(--pc-blue); }
.education-participant__schedule-confirm > span { display: flex; gap: 10px; align-items: center; color: var(--pc-muted); font-size: 12px; }
.education-participant__schedule-confirm svg { width: 17px; }
.education-participant__schedule-confirm a { color: var(--pc-blue); }
.education-participant__operator-note { display: block; margin-top: 10px; color: var(--pc-muted); }

@media (max-width: 900px) {
  .education-participant__home-metrics,
  .education-participant__home-grid,
  .education-participant--mentoring { grid-template-columns: 1fr; }
  .education-participant__curriculum article { grid-template-columns: 52px 1fr; }
  .education-participant__item-icon { display: none; }
}

@media (max-width: 600px) {
  .education-participant__curriculum article { padding: 16px; }
  .education-participant__home-tasks > article { grid-template-columns: 36px 1fr; }
  .education-participant__home-tasks > article > time { grid-column: 2; }
  .education-participant__assignments header { grid-template-columns: 38px 1fr; }
  .education-participant__assignments header > b { grid-column: 2; justify-self: start; }
  .education-participant__submit-box,
  .education-participant__mentoring-form > div:last-child { grid-template-columns: 1fr; }
  .education-participant__schedule-confirm > span { align-items: flex-start; flex-direction: column; gap: 3px; }
}

[data-theme="dark"] {
  --color-epp-message-border: rgba(129, 140, 248, 0.3);
  --color-epp-message-bg: rgba(129, 140, 248, 0.1);
  --color-epp-message-text: rgb(165, 180, 252);
  --color-epp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-epp-icon-bg: rgba(129, 140, 248, 0.16);
  --color-epp-faint-text: var(--color-text-placeholder);
  --color-epp-revision-bg: rgba(251, 146, 60, 0.16);
  --color-epp-revision-text: rgb(253, 186, 116);
  --color-epp-progress-border: rgba(129, 140, 248, 0.5);
  --color-epp-tag-bg: var(--color-bg-elevated-dark);
  --color-epp-completed-bg: rgba(52, 211, 153, 0.14);
  --color-epp-completed-text: rgb(110, 231, 183);
  --color-epp-closed-bg: var(--color-bg-elevated-dark);
  --color-epp-label-text: var(--color-text-muted);
  --color-epp-revision-feedback-bg: rgba(251, 146, 60, 0.1);
}
.participant-console {
  --pc-navy: var(--color-primary-active);
  --pc-blue: var(--color-brand-strong);
  --pc-text: var(--color-text-main);
  --pc-muted: var(--color-text-muted);
  --pc-line: var(--color-border);
  --pc-topbar-bg: rgba(255, 255, 255, 0.96);
  --pc-navy-deep: rgb(9, 29, 60);
  /* 사이드바는 테마와 무관하게 항상 짙은 남색 - 그 위 텍스트도 항상 밝게 고정 */
  --pc-sidebar-text: rgba(203, 213, 225, 1);
  --pc-sidebar-text-muted: rgb(170, 185, 208);
  min-height: 100vh;
  background: var(--color-accent-soft);
  color: var(--pc-text);
}

.participant-console * { box-sizing: border-box; }

.participant-console--competition {
  --pc-navy: rgb(16, 33, 63);
  --pc-blue: rgb(36, 74, 124);
  --pc-navy-deep: rgb(9, 29, 60);
}

.participant-console__sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 270px;
  padding: 22px 17px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 0 100%, var(--color-admin-highlight-bg), transparent 42%),
    linear-gradient(180deg, var(--pc-navy-deep), var(--pc-navy));
  color: var(--color-text-on-brand);
  transition: width 160ms ease, padding 160ms ease;
}

.participant-console__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin: 0 9px 22px;
  color: var(--pc-sidebar-text);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}


.participant-console__contest-summary {
  display: grid;
  gap: 8px;
  padding: 15px 10px 18px;
  border-top: 1px solid var(--color-overlay-white);
  border-bottom: 1px solid var(--color-overlay-white);
}

.participant-console__contest-summary > strong {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.02em;
}

.participant-console__contest-summary > small { color: var(--pc-sidebar-text-muted); font-size: 11px; }
.participant-console__sidebar nav {
  display: grid;
  gap: 10px;
  margin-top: 19px;
}

.participant-console__nav-group {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--color-overlay-white);
}

.participant-console__nav-group:first-child { padding-top: 0; border-top: 0; }
.participant-console__nav-group > span {
  padding: 0 11px 5px;
  color: var(--color-text-placeholder);
  font-size: 10px;
  font-weight: 850;
}

.participant-console__nav-group button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 43px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pc-sidebar-text);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.participant-console__nav-group button:hover,
.participant-console__nav-group button.is-active {
  background: linear-gradient(90deg, var(--color-overlay-white), var(--color-overlay-white));
  color: var(--color-text-on-brand);
}

.participant-console__nav-group button b {
  margin-left: auto;
  min-width: 23px;
  padding: 3px 7px;
  border-radius: 15px;
  background: var(--color-primary);
  color: var(--color-text-on-brand);
  font-size: 10px;
  text-align: center;
}

.participant-console__sidebar--competition {
  width: 264px;
  padding: 22px 18px;
  background: var(--pc-navy);
}

.participant-console__sidebar--competition .participant-console__back {
  margin: 0 0 24px;
  color: rgb(174, 187, 210);
  font-size: 13px;
  font-weight: 700;
}

.participant-console__sidebar--competition .participant-console__contest-summary {
  gap: 8px;
  padding: 16px 10px 18px;
  border-color: rgba(255,255,255,.09);
}

.participant-console__sidebar--competition .participant-console__contest-summary > strong {
  font-size: 15px;
  line-height: 1.45;
}

.participant-console__sidebar--competition .participant-console__contest-summary > small {
  color: rgb(173, 187, 209);
  font-size: 13px;
}

.participant-console__sidebar--competition nav.is-competition {
  display: grid;
  gap: 13px;
  margin-top: 24px;
}

.participant-console__sidebar--competition .participant-console__nav-group {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.participant-console__sidebar--competition .participant-console__nav-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.participant-console__sidebar--competition .participant-console__nav-group:last-child {
  margin-top: 5px;
  padding-top: 18px;
}

.participant-console__sidebar--competition .participant-console__nav-group > span {
  padding: 0 12px 5px;
  color: rgb(130, 147, 175);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .07em;
}

.participant-console__sidebar--competition .participant-console__nav-group button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgb(174, 187, 210);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.participant-console__sidebar--competition .participant-console__nav-group button > svg {
  color: rgb(117, 135, 166);
}

.participant-console__sidebar--competition .participant-console__nav-group button:hover {
  background: rgba(255,255,255,.07);
  color: rgb(238, 243, 255);
}

.participant-console__sidebar--competition .participant-console__nav-group button:hover > svg {
  color: rgb(174, 189, 221);
}

.participant-console__sidebar--competition .participant-console__nav-group button.is-active {
  background: color-mix(in srgb, var(--pc-blue) 20%, transparent);
  color: color-mix(in srgb, var(--pc-blue) 40%, rgb(255, 255, 255));
  font-weight: 700;
}

.participant-console__sidebar--competition .participant-console__nav-group button.is-active::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--pc-blue) 62%, rgb(255, 255, 255));
  content: "";
}

.participant-console__sidebar--competition .participant-console__nav-group button.is-active > svg {
  color: inherit;
}

.participant-console__sidebar--competition .participant-console__nav-group button:focus-visible {
  outline: 2px solid rgb(140, 179, 255);
  outline-offset: 2px;
}

.participant-console__sidebar--competition .participant-console__nav-group button b {
  margin-left: auto;
  min-width: 21px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgb(230, 237, 255);
  color: rgb(41, 79, 196);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.participant-console__sidebar-toggle {
  position: absolute;
  top: 17px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgb(159, 176, 201);
  cursor: pointer;
}

.participant-console__sidebar-toggle:hover {
  background: rgba(255,255,255,.07);
  color: rgb(255, 255, 255);
}

.participant-console__sidebar-toggle:focus-visible {
  outline: 2px solid rgb(140, 179, 255);
  outline-offset: 2px;
}

.participant-console__drawer .participant-console__sidebar-toggle { display: none; }

.participant-console--competition .participant-console__main {
  margin-left: 264px;
  transition: margin-left 160ms ease;
}

.participant-console--sidebar-collapsed .participant-console__sidebar {
  width: 72px;
  padding: 17px 14px;
  overflow-x: hidden;
}

.participant-console--sidebar-collapsed .participant-console__sidebar-toggle {
  position: static;
  width: 44px;
  height: 42px;
  margin: 0 auto 14px;
}

.participant-console--sidebar-collapsed .participant-console__back,
.participant-console--sidebar-collapsed .participant-console__contest-summary {
  display: none;
}

.participant-console--sidebar-collapsed .participant-console__sidebar nav.is-competition {
  margin-top: 0;
}

.participant-console--sidebar-collapsed .participant-console__nav-group {
  gap: 3px;
  margin: 0;
  padding: 0;
  border: 0;
}

.participant-console--sidebar-collapsed .participant-console__nav-group > span {
  display: none;
}

.participant-console--sidebar-collapsed .participant-console__nav-group button {
  display: flex;
  width: 44px;
  padding: 0;
  justify-content: center;
}

.participant-console--sidebar-collapsed .participant-console__nav-group button > span,
.participant-console--sidebar-collapsed .participant-console__nav-group button > b {
  display: none;
}

.participant-console--sidebar-collapsed .participant-console__nav-group button.is-active::before {
  top: 9px;
  bottom: 9px;
}

.participant-console--sidebar-collapsed .participant-console__main { margin-left: 72px; }

.participant-console__sidebar-foot {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding: 15px 11px 2px;
  border-top: 1px solid var(--color-overlay-white);
}

.participant-console__sidebar-foot span,
.participant-console__sidebar-foot small { color: var(--color-text-placeholder); font-size: 10px; }
.participant-console__sidebar-foot strong { font-size: 12px; }

.participant-console__main {
  min-height: inherit;
  margin-left: 270px;
}

.participant-console__topbar {
  position: sticky;
  top: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 0 38px;
  border-bottom: 1px solid var(--pc-line);
  background: var(--pc-topbar-bg);
  backdrop-filter: blur(12px);
}

.participant-console__topbar strong {
  overflow: hidden;
  max-width: min(600px, 65vw);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-console__topbar span { color: var(--color-text-muted); }
.participant-console__topbar b { color: var(--color-text-muted); font-size: 13px; }

.participant-console__content {
  display: grid;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 34px 60px;
}

.participant-console__heading {
  display: block;
}

.participant-console__heading > div { display: grid; gap: 3px; }

.participant-console__heading h1 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.035em;
}

.participant-console__heading p {
  margin: 0;
  color: var(--pc-muted);
  font-size: 11px;
}

.participant-console__alert {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--color-status-pending-soft);
  border-radius: 13px;
  background: var(--color-bg-white);
}

.participant-console__alert > span {
  display: grid;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-status-pending-soft);
  color: var(--color-danger-hover);
}

.participant-console__alert > span svg { width: 20px; }
.participant-console__alert > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.participant-console__alert > div:nth-child(2) strong { font-size: 13px; }
.participant-console__alert p {
  overflow: hidden;
  margin: 0;
  color: var(--pc-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-console__alert.is-clear { border-color: var(--color-border); }
.participant-console__alert.is-clear > span { background: var(--color-success-soft); color: var(--color-success); }

.participant-console__deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 22px;
  border-left: 1px solid var(--pc-line);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.participant-console__deadline span { font-size: 10px; }
.participant-console__deadline strong { color: var(--color-text-sub); font-size: 12px; }

.participant-console__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.participant-console__metrics article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--pc-line);
  border-radius: 13px;
  background: var(--color-bg-white);
}

.participant-console__metrics article > span {
  display: grid;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
}

.participant-console__metrics article > span svg { width: 21px; }
.participant-console__metrics .is-blue { background: var(--color-brand-soft); color: var(--color-brand-strong); }
.participant-console__metrics .is-orange { background: var(--color-status-pending-soft); color: var(--color-danger-hover); }
.participant-console__metrics .is-green { background: var(--color-success-soft); color: var(--color-success); }
.participant-console__metrics .is-violet { background: var(--color-primary-soft); color: var(--color-accent); }
.participant-console__metrics article > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 12px; width: 100%; min-width: 0; }
.participant-console__metrics small { color: var(--color-text-muted); font-size: 11px; font-weight: 750; }
.participant-console__metrics strong { display: flex; align-items: baseline; gap: 3px; font-size: 25px; line-height: 1; }
.participant-console__metrics strong i { color: var(--color-text-placeholder); font-size: 10px; font-style: normal; }
.participant-console__metrics p { grid-column: 1 / -1; margin: 0; color: var(--color-text-placeholder); font-size: 10px; }

.participant-console__home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 14px;
}

.participant-console__panel {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--pc-line);
  border-radius: 14px;
  background: var(--color-bg-white);
  box-shadow: 0 7px 24px var(--color-shadow-base);
}

.participant-console__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.participant-console__panel-head h2 { margin: 0; font-size: 16px; letter-spacing: -.025em; }
.participant-console__panel-head > span {
  padding: 4px 8px;
  border-radius: 20px;
  background: var(--color-brand-soft);
  color: var(--pc-blue);
  font-size: 10px;
  font-weight: 850;
}

.participant-console__panel-head button {
  border: 0;
  background: transparent;
  color: var(--pc-blue);
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.participant-console__task-list { display: grid; gap: 8px; }
.participant-console__task-list > :is(button, article) {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
  min-height: 105px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: var(--color-bg-white);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.participant-console__task-list > :is(button, article) > span {
  display: grid;
  place-items: center;
  background: var(--color-brand-soft);
  color: var(--pc-blue);
}

.participant-console__task-list > :is(button, article) > span svg { width: 25px; }
.participant-console__task-list > :is(button, article) > span.is-orange { background: var(--color-status-pending-soft); color: var(--color-danger-hover); }
.participant-console__task-list > :is(button, article) > span.is-violet { background: var(--color-primary-soft); color: var(--color-accent); }
.participant-console__task-list > :is(button, article) > div { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 13px 15px; }
.participant-console__task-list small { width: max-content; padding: 3px 7px; border-radius: 12px; background: var(--color-status-pending-soft); color: var(--color-status-pending); font-size: 9px; font-weight: 850; }
.participant-console__task-list strong { font-size: 13px; }
.participant-console__task-list p { overflow: hidden; margin: 0; color: var(--color-text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.participant-console__task-list time { color: var(--color-text-placeholder); font-size: 10px; }
.participant-console__task-list em { display: flex; align-items: center; align-self: center; gap: 5px; padding: 0 14px; color: var(--pc-blue); font-size: 10px; font-style: normal; font-weight: 850; white-space: nowrap; }
.participant-console__task-list em svg { width: 14px; }

.participant-console__timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.participant-console__timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 48px;
}

.participant-console__timeline li::before {
  content: "";
  position: absolute;
  top: -11px;
  bottom: -11px;
  left: 14px;
  width: 1px;
  background: var(--color-border);
}

.participant-console__timeline li:first-child::before { top: 50%; }
.participant-console__timeline li:last-child::before { bottom: 50%; }
.participant-console__timeline li b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 10px;
}

.participant-console__timeline li.is-current b { background: var(--pc-blue); color: var(--color-text-on-brand); }
.participant-console__timeline li.is-past { opacity: .55; }
.participant-console__timeline li strong { font-size: 11px; }
.participant-console__timeline li time { color: var(--color-text-muted); font-size: 10px; font-weight: 750; }

.participant-console__notices { display: grid; }
.participant-console__notices > button {
  display: grid;
  grid-template-columns: 30px minmax(160px, .45fr) minmax(200px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  border-top: 1px solid var(--color-bg-soft);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.participant-console__notices > button > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--color-brand-soft);
  color: var(--pc-blue);
}

.participant-console__notices svg { width: 14px; }
.participant-console__notices strong { font-size: 11px; }
.participant-console__notices p {
  overflow: hidden;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.participant-console__notices time { color: var(--color-text-muted); font-size: 10px; }

.participant-console__empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 150px;
  color: var(--color-text-placeholder);
  text-align: center;
}

.participant-console__empty svg { color: var(--color-success); }
.participant-console__empty strong { color: var(--color-text-sub); font-size: 12px; }
.participant-console__empty span { font-size: 11px; }
.participant-console__empty--short { display: flex; justify-content: center; min-height: 70px; }

.participant-console__info { max-width: 900px; }
.participant-console__info dl { display: grid; margin: 0; border-top: 1px solid var(--pc-line); }
.participant-console__info dl > div { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 16px 5px; border-bottom: 1px solid var(--color-bg-soft); }
.participant-console__info dt { color: var(--pc-muted); font-size: 11px; font-weight: 800; }
.participant-console__info dd { margin: 0; color: var(--color-text-sub); font-size: 12px; font-weight: 700; }
.participant-console__info > p { margin: 18px 0 0; padding: 16px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-text-muted); font-size: 12px; line-height: 1.7; }

.participant-console__schedule { max-width: 900px; }
.participant-console__schedule article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 67px;
  border-bottom: 1px solid var(--color-bg-soft);
}
.participant-console__schedule article > b { color: var(--color-text-placeholder); font-size: 11px; }
.participant-console__schedule article > div { display: flex; align-items: center; gap: 8px; }
.participant-console__schedule article strong { font-size: 12px; }
.participant-console__schedule article span { padding: 3px 7px; border-radius: 12px; background: var(--color-brand-soft); color: var(--pc-blue); font-size: 9px; font-weight: 800; }
.participant-console__schedule article time { color: var(--color-text-muted); font-size: 11px; }

.participant-console__operations .contest-operations {
  margin: 0;
  border-radius: 14px;
  box-shadow: none;
}
.participant-console__operations .contest-operations__heading.is-hidden { display: none; }

.participant-console__mobile-header,
.participant-console__drawer { display: none; }

.participant-console--state {
  display: grid;
  place-items: center;
}

.participant-state {
  display: grid;
  place-items: center;
  gap: 10px;
  width: min(520px, calc(100% - 32px));
  padding: 50px 28px;
  border: 1px solid var(--pc-line);
  border-radius: 18px;
  background: var(--color-bg-white);
  text-align: center;
}
.participant-state > svg { width: 38px; height: 38px; color: var(--pc-blue); }
.participant-state h1 { margin: 5px 0 0; font-size: 20px; }
.participant-state p { margin: 0; color: var(--pc-muted); font-size: 12px; }
.participant-state a,
.participant-state button { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--pc-blue); color: var(--color-text-on-brand); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; }

@media (max-width: 1120px) {
  .participant-console__metrics { grid-template-columns: 1fr 1fr; }
  .participant-console__home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .participant-console { padding-top: 58px; }
  .participant-console__sidebar { display: none; }
  .participant-console__main,
  .participant-console--competition .participant-console__main,
  .participant-console--sidebar-collapsed .participant-console__main { margin-left: 0; }
  .participant-console__mobile-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 18;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 8px 15px;
    background: var(--pc-navy);
    color: var(--color-text-on-brand);
  }
  .participant-console__mobile-header > div { display: grid; gap: 2px; min-width: 0; }
  .participant-console__mobile-header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .participant-console__mobile-header button,
  .participant-console__drawer-close { display: grid; width: 38px; height: 38px; place-items: center; border: 0; background: transparent; color: var(--color-text-on-brand); cursor: pointer; }
  .participant-console__drawer { position: fixed; inset: 0; z-index: 40; display: block; }
  .participant-console__backdrop { position: absolute; inset: 0; border: 0; background: var(--color-backdrop-strong); }
  .participant-console__drawer > aside { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(310px, 88vw); padding: 18px 17px; overflow-y: auto; background: var(--pc-navy); color: var(--color-text-on-brand); }
  .participant-console__drawer-close { align-self: flex-end; }
  .participant-console__topbar { top: 58px; min-height: 50px; padding: 0 15px; }
  .participant-console__topbar strong { max-width: 58vw; font-size: 11px; }
  .participant-console__content { padding: 18px 14px 45px; }
  .participant-console__heading h1 { font-size: 19px; }
  .participant-console__heading p { font-size: 10px; }
  .participant-console__alert { align-items: flex-start; flex-wrap: wrap; }
  .participant-console__deadline { width: 100%; margin: 3px 0 0 52px; padding: 10px 0 0; border-top: 1px solid var(--pc-line); border-left: 0; }
  .participant-console__metrics { grid-template-columns: 1fr; }
  .participant-console__task-list > :is(button, article) { grid-template-columns: 58px minmax(0, 1fr); }
  .participant-console__task-list em { display: none; }
  .participant-console__notices > button { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .participant-console__notices p { display: none; }
  .participant-console__info dl > div { grid-template-columns: 1fr; gap: 5px; }
  .participant-console__schedule article { grid-template-columns: 28px minmax(0, 1fr); }
  .participant-console__schedule article time { grid-column: 2; }
  .participant-console__operations .contest-operations { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .participant-console__sidebar,
  .participant-console--competition .participant-console__main { transition: none; }
}

/* 참여 운영공간 전용 UI 기본 규칙 */
.participant-console {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-12: 48px;
  font-size: 16px;
  line-height: 1.5;
}

.participant-console :where(p, li, td, dd) { line-height: 1.5; }

.participant-console :where(span, p, li, td, dd, dt, label, a, em) {
  font-size: 14px !important;
}

.participant-console :where(small, time, figcaption, th, code) {
  font-size: 12px !important;
  line-height: 1.4;
}

.participant-console :where(button, [role="button"], summary) {
  min-width: 40px;
  min-height: 40px;
  font-size: 14px !important;
  line-height: 1.2;
}

.participant-console :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 40px;
  font-size: 16px !important;
  line-height: 1.4;
}

.participant-console :where(button, [role="button"], summary, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pc-blue) 55%, rgb(255, 255, 255));
  outline-offset: 2px;
}

.participant-console__metrics strong { font-size: 25px !important; }
.participant-console__metrics strong i,
.participant-console__nav-group button b,
.participant-console__timeline li b { font-size: 12px !important; }
.participant-console__timeline li strong,
.participant-console__notices strong { font-size: 14px !important; }
.participant-console__topbar strong,
.participant-console__schedule article > b,
.participant-console .contest-operations__submitted strong,
.participant-console .contest-operations__answer strong,
.participant-console .education-participant__item-copy b,
.participant-console .education-participant__request-head b { font-size: 12px !important; }

@media (max-width: 760px) {
  .participant-console__content { padding-inline: 16px; }
}

/* ================================================
   DARK MODE — 와일드카드([class*="-card"] 등) 우선순위 보정
   (6-B1.7, 신규 토큰화) 이 파일은 dark.css에 규칙이 원래 없었다.
   토큰만으로는 일부가 와일드카드의 제네릭 다크값에 덮여 의도한
   값이 반영되지 않아, 그 지점만 명시적으로 재선언한다.
   ================================================ */

[data-theme="dark"] .participant-console {
  --pc-topbar-bg: rgba(15, 23, 42, 0.92);
}

[data-theme="dark"] .participant-console__panel-head > span {
  background: var(--color-brand-soft);
}

[data-theme="dark"] .participant-console__panel-head button {
  background: transparent;
}
:root {
  --color-rmo-page-glow: rgba(109, 85, 255, 0.12);
  --color-rmo-page-bg: rgb(247, 247, 251);
  --color-rmo-progress-bg: rgb(233, 233, 242);
  --color-rmo-accent: rgb(109, 85, 255);
  --color-rmo-grad-2: rgb(146, 126, 255);
  --color-rmo-nav-border: rgb(229, 229, 239);
  --color-rmo-nav-bg: rgba(255, 255, 255, 0.92);
  --color-rmo-hover-border: rgb(215, 208, 255);
  --color-rmo-icon-bg-1: rgb(241, 239, 255);
  --color-rmo-muted: rgb(102, 102, 119);
  --color-rmo-active-text: rgb(76, 54, 214);
  --color-rmo-text: rgb(17, 17, 17);
  --color-rmo-badge-bg: rgb(236, 232, 255);
  --color-rmo-card-border: rgb(236, 236, 243);
  --color-rmo-card-bg: rgba(255, 255, 255, 0.94);
  --color-rmo-shadow-10: rgba(109, 85, 255, 0.1);
  --color-rmo-selected-grad: rgba(109, 85, 255, 0.07);
  --color-rmo-shadow-15: rgba(109, 85, 255, 0.15);
  --color-rmo-form-shadow: rgba(17, 17, 17, 0.04);
  --color-rmo-field-text: rgb(34, 34, 34);
  --color-rmo-optional-label: rgb(154, 160, 180);
  --color-rmo-input-border: rgb(228, 228, 238);
  --color-rmo-select-disabled-text: rgb(153, 153, 170);
  --color-rmo-select-disabled-bg: rgb(244, 244, 248);
  --color-rmo-selected-bg-2: rgb(242, 239, 255);
  --color-rmo-selected-text-2: rgb(86, 61, 255);
  --color-rmo-checkbox-border: rgb(216, 216, 229);
  --color-rmo-badge-stable-bg: rgb(238, 248, 242);
  --color-rmo-badge-stable-text: rgb(29, 143, 85);
  --color-rmo-badge-challenge-bg: rgb(255, 242, 230);
  --color-rmo-badge-challenge-text: rgb(217, 106, 0);
  --color-rmo-badge-explore-bg: rgb(238, 241, 255);
  --color-rmo-badge-explore-text: rgb(78, 99, 216);
  --color-rmo-duration: rgb(119, 119, 136);
  --color-rmo-icon-bg-2: rgb(240, 237, 255);
  --color-rmo-preview-text: rgb(51, 51, 68);
  --color-rmo-chapter-bg: rgb(248, 247, 255);
  --color-rmo-chapter-span: rgb(132, 146, 166);
  --color-rmo-mission-border: rgb(238, 238, 245);
  --color-rmo-dashboard-bar-bg: rgb(227, 227, 237);
  --color-rmo-ai-orbit-2: rgb(165, 180, 252);
  --color-rmo-ai-msg: rgb(95, 104, 122);
  --color-rmo-ai-dot: rgb(223, 229, 242);
  --color-rmo-banner-bg: rgb(240, 244, 255);
  --color-rmo-banner-border: rgb(199, 211, 255);
  --color-rmo-banner-strong: rgb(58, 78, 204);
  --color-rmo-fallback-bg: rgb(255, 248, 225);
  --color-rmo-fallback-border: rgb(255, 224, 130);
  --color-rmo-fallback-text: rgb(122, 92, 0);
}

.rmo-page,
.rmo-page * {
  box-sizing: border-box;
}

.rmo-page {
  min-height: 100vh;
  padding: 48px 20px 80px;
  background:
    radial-gradient(circle at top left, var(--color-rmo-page-glow), transparent 34%),
    var(--color-rmo-page-bg);
}

.rmo-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.rmo-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-rmo-progress-bg);
  overflow: hidden;
  margin-bottom: 22px;
}

.rmo-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-rmo-accent), var(--color-rmo-grad-2));
  transition: width 0.28s ease;
}

.rmo-step-navigation {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 38px;
}

.rmo-step-navigation-item {
  width: 100%;
  min-height: 72px;
  border-radius: 18px;
  border: 1px solid var(--color-rmo-nav-border);
  background: var(--color-rmo-nav-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: inherit;
  animation: rmoFadeUp 0.34s ease both;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.rmo-step-navigation-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-rmo-hover-border);
}

.rmo-step-navigation-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.rmo-step-navigation-item span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-rmo-icon-bg-1);
  color: var(--color-rmo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
}

.rmo-step-navigation-item p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-rmo-muted);
}

.rmo-step-navigation-item.is-active {
  border-color: var(--color-rmo-accent);
  background: var(--color-rmo-selected-bg-2);
  box-shadow: 0 14px 32px var(--color-rmo-shadow-10);
}

.rmo-step-navigation-item.is-active span {
  background: var(--color-rmo-accent);
  color: var(--color-text-on-brand);
}

.rmo-step-navigation-item.is-active p {
  color: var(--color-rmo-active-text);
}

.rmo-step-navigation-item.is-completed span {
  background: var(--color-rmo-text);
  color: var(--color-text-on-brand);
}

.rmo-step-body {
  animation: rmoFadeUp 0.34s ease both;
}

.rmo-header {
  text-align: center;
  margin-bottom: 38px;
}

.rmo-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-rmo-badge-bg);
  color: var(--color-rmo-accent);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;
}

.rmo-header h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.28;
  letter-spacing: -0.045em;
  color: var(--color-rmo-text);
  font-weight: 850;
  word-break: keep-all;
}

.rmo-header p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-rmo-muted);
  word-break: keep-all;
}

.rmo-user-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.rmo-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.rmo-goal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rmo-select-card {
  position: relative;
  width: 100%;
  min-height: 168px;
  border: 1px solid var(--color-rmo-card-border);
  background: var(--color-rmo-card-bg);
  border-radius: 26px;
  padding: 24px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  animation: rmoFadeUp 0.36s ease both;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.rmo-user-type-card {
  min-height: 220px;
}

.rmo-goal-card {
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rmo-select-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-rmo-hover-border);
  box-shadow: 0 16px 42px var(--color-rmo-shadow-10);
}

.rmo-select-card.is-selected {
  border-color: var(--color-rmo-accent);
  background: linear-gradient(180deg, var(--color-rmo-selected-grad) 0%, var(--color-bg-white) 100%);
  box-shadow: 0 20px 48px var(--color-rmo-shadow-15);
}

.rmo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.rmo-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--color-rmo-icon-bg-1);
  color: var(--color-rmo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex: 0 0 auto;
}

.rmo-selected-badge {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-rmo-accent);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.rmo-select-card h2 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.035em;
  color: var(--color-rmo-text);
}

.rmo-goal-card h2 {
  margin: 0;
  font-size: 20px;
}

.rmo-select-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-rmo-muted);
  word-break: keep-all;
}

.rmo-form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-bg-white);
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 18px 46px var(--color-rmo-form-shadow);
}

.rmo-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rmo-field span {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-rmo-field-text);
}

.rmo-field-optional {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-rmo-optional-label);
  font-style: normal;
  margin-left: 4px;
}

.rmo-field input,
.rmo-field select {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--color-rmo-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  padding: 0 16px;
  font-size: 16px;
  color: var(--color-rmo-text);
  outline: none;
  font-family: inherit;
  appearance: auto;
}

.rmo-field input:focus,
.rmo-field select:focus {
  border-color: var(--color-rmo-accent);
  box-shadow: 0 0 0 4px var(--color-rmo-shadow-10);
}

.rmo-field select:disabled {
  background: var(--color-rmo-select-disabled-bg);
  color: var(--color-rmo-select-disabled-text);
}

.rmo-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.rmo-chip {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 18px;
  background: var(--color-bg-white);
  color: var(--color-rmo-field-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 18px;
  animation: rmoFadeUp 0.36s ease both;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.rmo-chip svg {
  color: var(--color-rmo-accent);
  font-size: 20px;
  flex: 0 0 auto;
}

.rmo-chip:hover {
  transform: translateY(-2px);
  border-color: var(--color-rmo-hover-border);
}

.rmo-chip.is-selected {
  border-color: var(--color-rmo-accent);
  background: var(--color-rmo-selected-bg-2);
  color: var(--color-rmo-selected-text-2);
  box-shadow: 0 12px 28px var(--color-rmo-shadow-10);
}

.rmo-check-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rmo-check-item {
  width: 100%;
  min-height: 62px;
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 18px;
  background: var(--color-bg-white);
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-rmo-field-text);
  text-align: left;
  animation: rmoFadeUp 0.36s ease both;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.rmo-check-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-rmo-hover-border);
}

.rmo-check-item.is-selected {
  border-color: var(--color-rmo-accent);
  background: var(--color-rmo-selected-bg-2);
  color: var(--color-rmo-selected-text-2);
  box-shadow: 0 12px 28px var(--color-rmo-shadow-10);
}

.rmo-check-box {
  width: 25px;
  height: 25px;
  border-radius: 9px;
  border: 1px solid var(--color-rmo-checkbox-border);
  background: var(--color-bg-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-rmo-accent);
  font-size: 17px;
  font-weight: 900;
  flex: 0 0 auto;
}

.rmo-check-item.is-selected .rmo-check-box {
  border-color: var(--color-rmo-accent);
}

.rmo-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.rmo-result-card {
  width: 100%;
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 28px;
  background: var(--color-bg-white);
  padding: 24px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: inherit;
  animation: rmoFadeUp 0.36s ease both;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.rmo-result-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-rmo-hover-border);
  box-shadow: 0 16px 42px var(--color-rmo-shadow-10);
}

.rmo-result-card.is-selected {
  border-color: var(--color-rmo-accent);
  box-shadow: 0 20px 48px var(--color-rmo-shadow-15);
}

.rmo-result-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rmo-result-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.rmo-result-badge.stable {
  background: var(--color-rmo-badge-stable-bg);
  color: var(--color-rmo-badge-stable-text);
}

.rmo-result-badge.challenge {
  background: var(--color-rmo-badge-challenge-bg);
  color: var(--color-rmo-badge-challenge-text);
}

.rmo-result-badge.explore {
  background: var(--color-rmo-badge-explore-bg);
  color: var(--color-rmo-badge-explore-text);
}

.rmo-result-duration {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-rmo-duration);
}

.rmo-result-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.035em;
  font-weight: 850;
  color: var(--color-rmo-text);
  word-break: keep-all;
}

.rmo-result-card > p {
  margin: -8px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-rmo-muted);
  word-break: keep-all;
}

.rmo-analysis-box {
  border-radius: 18px;
  background: var(--color-rmo-page-bg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rmo-analysis-box strong {
  font-size: 13px;
  color: var(--color-rmo-duration);
}

.rmo-analysis-box span {
  font-size: 16px;
  font-weight: 850;
  color: var(--color-rmo-text);
}

.rmo-step-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rmo-step-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rmo-step-preview-item span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-rmo-icon-bg-2);
  color: var(--color-rmo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 850;
  flex: 0 0 auto;
}

.rmo-step-preview-item p {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--color-rmo-preview-text);
}

/* 챕터 미리보기 */
.rmo-chapter-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rmo-chapter-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-rmo-chapter-bg);
  border-radius: 8px;
}

.rmo-ch-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-rmo-accent); color: var(--color-text-on-brand);
  font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.rmo-chapter-preview-item > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rmo-chapter-preview-item strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-rmo-text);
}

.rmo-chapter-preview-item span {
  font-size: 11px;
  color: var(--color-rmo-chapter-span);
  font-weight: 700;
}

.rmo-first-mission {
  border-top: 1px solid var(--color-rmo-mission-border);
  padding-top: 16px;
}

.rmo-first-mission strong {
  display: block;
  font-size: 13px;
  color: var(--color-rmo-duration);
  margin-bottom: 6px;
}

.rmo-first-mission p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-rmo-preview-text);
  word-break: keep-all;
}

.rmo-result-select-button {
  width: 100%;
  min-height: 50px;
  margin-top: auto;
  border-radius: 15px;
  background: var(--color-rmo-text);
  color: var(--color-text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 850;
}

.rmo-result-card.is-selected .rmo-result-select-button {
  background: var(--color-rmo-accent);
}

.rmo-dashboard-preview {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rmo-dashboard-main-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 28px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
}

.rmo-dashboard-main-card h2 {
  margin: 18px 0 10px;
  font-size: 28px;
  letter-spacing: -0.04em;
  color: var(--color-rmo-text);
}

.rmo-dashboard-main-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-rmo-muted);
}

.rmo-dashboard-progress-box {
  background: var(--color-rmo-page-bg);
  border-radius: 22px;
  padding: 22px;
}

.rmo-dashboard-progress-box span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-rmo-duration);
  margin-bottom: 8px;
}

.rmo-dashboard-progress-box strong {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--color-rmo-text);
  margin-bottom: 18px;
}

.rmo-dashboard-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--color-rmo-dashboard-bar-bg);
  overflow: hidden;
}

.rmo-dashboard-progress-bar div {
  height: 100%;
  border-radius: 999px;
  background: var(--color-rmo-accent);
}

.rmo-dashboard-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rmo-dashboard-step-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-rmo-card-border);
  border-radius: 24px;
  padding: 22px;
  display: flex;
  gap: 16px;
  animation: rmoFadeUp 0.36s ease both;
}

.rmo-dashboard-step-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-rmo-icon-bg-2);
  color: var(--color-rmo-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  flex: 0 0 auto;
}

.rmo-dashboard-step-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--color-rmo-text);
  letter-spacing: -0.03em;
}

.rmo-dashboard-step-card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-rmo-muted);
}

.rmo-dashboard-step-card strong {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-rmo-accent);
}

.rmo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}

.rmo-actions .rmo-action-button:only-child {
  grid-column: 1 / -1;
}

.rmo-action-button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  border-radius: 18px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.rmo-action-button.primary {
  border: none;
  background: var(--color-rmo-accent);
  color: var(--color-text-on-brand);
  box-shadow: 0 18px 38px var(--color-rmo-shadow-15);
}

.rmo-action-button.secondary {
  border: 1px solid var(--color-rmo-input-border);
  background: var(--color-bg-white);
  color: var(--color-rmo-preview-text);
}

.rmo-action-button:hover {
  transform: translateY(-2px);
}

.rmo-action-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.rmo-animate-up {
  animation: rmoFadeUp 0.36s ease both;
}

.rmo-animate-list > *:nth-child(1) {
  animation-delay: 0.02s;
}

.rmo-animate-list > *:nth-child(2) {
  animation-delay: 0.06s;
}

.rmo-animate-list > *:nth-child(3) {
  animation-delay: 0.1s;
}

.rmo-animate-list > *:nth-child(4) {
  animation-delay: 0.14s;
}

.rmo-animate-list > *:nth-child(5) {
  animation-delay: 0.18s;
}

.rmo-animate-list > *:nth-child(6) {
  animation-delay: 0.22s;
}

.rmo-animate-list > *:nth-child(7) {
  animation-delay: 0.26s;
}

.rmo-animate-list > *:nth-child(8) {
  animation-delay: 0.3s;
}

.rmo-animate-list > *:nth-child(9) {
  animation-delay: 0.34s;
}

.rmo-animate-list > *:nth-child(10) {
  animation-delay: 0.38s;
}

@keyframes rmoFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .rmo-result-grid {
    grid-template-columns: 1fr;
  }

  .rmo-dashboard-main-card {
    grid-template-columns: 1fr;
  }

  .rmo-dashboard-step-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .rmo-page {
    padding: 28px 16px 48px;
  }

  .rmo-progress {
    margin-bottom: 18px;
  }

  .rmo-step-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 28px;
  }

  .rmo-step-navigation-item {
    min-height: 66px;
    border-radius: 16px;
  }

  .rmo-step-navigation-item p {
    font-size: 12px;
  }

  .rmo-header {
    margin-bottom: 28px;
  }

  .rmo-header h1 {
    font-size: 30px;
  }

  .rmo-header p {
    font-size: 14px;
  }

  .rmo-user-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .rmo-user-type-card {
    min-height: 190px;
    padding: 18px;
  }

  .rmo-user-type-card h2 {
    font-size: 20px;
  }

  .rmo-user-type-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .rmo-card-grid,
  .rmo-goal-grid,
  .rmo-chip-grid {
    grid-template-columns: 1fr;
  }

  .rmo-select-card {
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
  }

  .rmo-select-card h2 {
    font-size: 21px;
  }

  .rmo-goal-card {
    min-height: 90px;
  }

  .rmo-form-card {
    padding: 20px;
    border-radius: 22px;
  }

  .rmo-field input,
  .rmo-field select {
    font-size: 16px;
    min-height: 54px;
  }

  .rmo-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .rmo-action-button {
    min-height: 56px;
    height: auto;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 16px;
  }
}

/* ═══════════════════════════════
   AI 로딩 화면
═══════════════════════════════ */
.rmo-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  gap: 20px;
  text-align: center;
  padding: 40px 20px;
}
.rmo-ai-spinner {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rmo-ai-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--color-brand-icon);
  animation: rmoOrbit 1.2s linear infinite;
}
.rmo-ai-orbit--2 {
  inset: 10px;
  border-top-color: var(--color-rmo-ai-orbit-2);
  animation-duration: 0.8s;
  animation-direction: reverse;
}
@keyframes rmoOrbit {
  to { transform: rotate(360deg); }
}
.rmo-ai-bolt {
  font-size: 24px;
  color: var(--color-brand-icon);
  position: relative;
  z-index: 1;
}
.rmo-ai-loading-title {
  margin: 0;
  font-size: 20px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
}
.rmo-ai-loading-msg {
  margin: 0;
  font-size: 14px;
  color: var(--color-rmo-ai-msg);
  font-weight: 650;
  min-height: 22px;
  transition: opacity 0.4s;
}
.rmo-ai-dots {
  display: flex;
  gap: 6px;
}
.rmo-ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-rmo-ai-dot);
  transition: background 0.3s;
}
.rmo-ai-dot.is-active {
  background: var(--color-brand-icon);
}

/* AI 배너 (스펙 단계) */
.rmo-ai-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-rmo-banner-bg);
  border: 1px solid var(--color-rmo-banner-border);
  border-radius: 14px;
  margin-bottom: 18px;
}
.rmo-ai-banner-icon {
  font-size: 20px;
  color: var(--color-brand-icon);
  flex-shrink: 0;
}
.rmo-ai-banner strong {
  display: block;
  font-size: 13px;
  font-weight: 950;
  color: var(--color-rmo-banner-strong);
  margin-bottom: 2px;
}
.rmo-ai-banner span {
  font-size: 12px;
  color: var(--color-rmo-ai-msg);
  font-weight: 600;
}

/* AI 결과 폴백 알림 */
.rmo-ai-fallback-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-rmo-fallback-bg);
  border: 1px solid var(--color-rmo-fallback-border);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-rmo-fallback-text);
  font-weight: 700;
}

/* 스핀 아이콘 */
.rmo-spin {
  animation: rmoOrbit 0.8s linear infinite;
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-rmo-page-glow: rgba(167, 139, 250, 0.16);
  --color-rmo-page-bg: rgb(15, 23, 42);
  --color-rmo-progress-bg: rgb(51, 65, 85);
  --color-rmo-accent: rgb(167, 139, 250);
  --color-rmo-grad-2: rgb(196, 181, 253);
  --color-rmo-nav-border: rgb(51, 65, 85);
  --color-rmo-nav-bg: rgba(30, 41, 59, 0.85);
  --color-rmo-hover-border: rgba(167, 139, 250, 0.5);
  --color-rmo-icon-bg-1: rgba(167, 139, 250, 0.16);
  --color-rmo-muted: rgb(148, 163, 184);
  --color-rmo-active-text: rgb(196, 181, 253);
  --color-rmo-text: rgb(241, 245, 249);
  --color-rmo-badge-bg: rgba(167, 139, 250, 0.18);
  --color-rmo-card-border: rgb(51, 65, 85);
  --color-rmo-card-bg: rgba(30, 41, 59, 0.85);
  --color-rmo-shadow-10: rgba(167, 139, 250, 0.18);
  --color-rmo-selected-grad: rgba(167, 139, 250, 0.1);
  --color-rmo-shadow-15: rgba(167, 139, 250, 0.26);
  --color-rmo-form-shadow: rgba(0, 0, 0, 0.3);
  --color-rmo-field-text: rgb(226, 232, 240);
  --color-rmo-optional-label: rgb(100, 116, 139);
  --color-rmo-input-border: rgb(51, 65, 85);
  --color-rmo-select-disabled-text: var(--color-text-placeholder);
  --color-rmo-select-disabled-bg: var(--color-bg-elevated-dark);
  --color-rmo-selected-bg-2: rgba(167, 139, 250, 0.14);
  --color-rmo-selected-text-2: rgb(196, 181, 253);
  --color-rmo-checkbox-border: rgb(71, 85, 105);
  --color-rmo-badge-stable-bg: rgba(29, 143, 85, 0.18);
  --color-rmo-badge-stable-text: rgb(74, 222, 128);
  --color-rmo-badge-challenge-bg: rgba(217, 106, 0, 0.18);
  --color-rmo-badge-challenge-text: rgb(251, 146, 60);
  --color-rmo-badge-explore-bg: rgba(78, 99, 216, 0.2);
  --color-rmo-badge-explore-text: rgb(165, 180, 252);
  --color-rmo-duration: rgb(148, 163, 184);
  --color-rmo-icon-bg-2: rgba(167, 139, 250, 0.16);
  --color-rmo-preview-text: rgb(203, 213, 225);
  --color-rmo-chapter-bg: rgba(167, 139, 250, 0.1);
  --color-rmo-chapter-span: rgb(148, 163, 184);
  --color-rmo-mission-border: rgb(51, 65, 85);
  --color-rmo-dashboard-bar-bg: rgb(51, 65, 85);
  --color-rmo-ai-orbit-2: rgb(165, 180, 252);
  --color-rmo-ai-msg: rgb(148, 163, 184);
  --color-rmo-ai-dot: rgb(51, 65, 85);
  --color-rmo-banner-bg: rgba(73, 101, 255, 0.14);
  --color-rmo-banner-border: rgba(73, 101, 255, 0.35);
  --color-rmo-banner-strong: rgb(165, 180, 252);
  --color-rmo-fallback-bg: rgba(217, 119, 6, 0.14);
  --color-rmo-fallback-border: rgba(217, 119, 6, 0.35);
  --color-rmo-fallback-text: rgb(252, 211, 77);
}
:root {
  --color-odp-page-bg: rgb(247, 247, 251);
  --color-odp-card-border: rgb(236, 236, 243);
  --color-odp-accent: rgb(109, 85, 255);
  --color-odp-text: rgb(17, 17, 17);
  --color-odp-muted: rgb(102, 102, 119);
  --color-odp-duration: rgb(119, 119, 136);
  --color-odp-insight-bg: rgb(245, 245, 252);
  --color-odp-insight-text: rgb(68, 68, 90);
  --color-odp-icon-bg: rgb(240, 237, 255);
  --color-odp-dashboard-bar-bg: rgb(227, 227, 237);
  --color-odp-badge-stable-bg: rgb(238, 248, 242);
  --color-odp-badge-stable-text: rgb(29, 143, 85);
  --color-odp-badge-challenge-bg: rgb(255, 242, 230);
  --color-odp-badge-challenge-text: rgb(217, 106, 0);
  --color-odp-badge-explore-bg: rgb(238, 241, 255);
  --color-odp-badge-explore-text: rgb(78, 99, 216);
  --color-odp-step-current-border: rgb(207, 199, 255);
  --color-odp-step-current-shadow: rgba(109, 85, 255, 0.08);
  --color-odp-step-done-border: rgb(216, 240, 226);
  --color-odp-step-done-bg: rgb(251, 255, 253);
  --color-odp-toggle-icon: rgb(153, 153, 170);
  --color-odp-preview-text: rgb(51, 51, 68);
  --color-odp-submit-bg: rgb(246, 248, 255);
  --color-odp-submit-border: rgb(221, 225, 255);
  --color-odp-submit-text: rgb(26, 29, 35);
  --color-odp-submit-border-2: rgb(221, 225, 245);
  --color-odp-submit-shadow: rgba(73, 101, 255, 0.3);
  --color-odp-submission-bg: rgb(240, 253, 244);
  --color-odp-submission-border: rgb(167, 243, 208);
  --color-odp-submission-label: rgb(5, 150, 105);
  --color-odp-submission-text: rgb(55, 65, 81);
  --color-odp-active-bg: rgb(243, 244, 246);
  --color-odp-active-text: rgb(55, 65, 81);
  --color-odp-current-hover: rgb(91, 68, 237);
  --color-odp-reco-section-border: rgb(233, 237, 246);
  --color-odp-reco-section-shadow: rgba(26, 38, 90, 0.04);
  --color-odp-reco-subtitle: rgb(95, 104, 122);
  --color-odp-reco-toggle-bg: rgb(243, 244, 248);
  --color-odp-reco-toggle-text: rgb(132, 146, 166);
  --color-odp-reco-toggle-shadow: rgba(0, 0, 0, 0.08);
  --color-odp-reco-card-bg: rgb(249, 250, 255);
  --color-odp-reco-card-border: rgb(238, 240, 248);
  --color-odp-reco-card-hover-border: rgb(194, 204, 255);
  --color-odp-reco-card-hover-shadow: rgba(73, 101, 255, 0.08);
  --color-odp-reco-open-bg: rgb(237, 242, 255);
  --color-odp-reco-open-text: rgb(77, 93, 222);
  --color-odp-reco-closed-bg: rgb(242, 243, 245);
  --color-odp-reco-type-bg: rgb(240, 242, 255);
  --color-odp-reco-study-bg: rgb(232, 250, 240);
  --color-odp-reco-study-text: rgb(26, 127, 83);
  --color-odp-reco-view-border: rgb(223, 229, 242);
  --color-odp-reco-view-text: rgb(102, 112, 133);
  --color-odp-reco-sk-grad-1: rgb(238, 241, 247);
  --color-odp-reco-sk-grad-2: rgb(247, 248, 251);
  --color-odp-reco-empty-icon: rgb(194, 204, 255);
  --color-odp-next-phase-grad-1: rgb(240, 237, 255);
  --color-odp-next-phase-grad-2: rgb(232, 240, 255);
  --color-odp-next-phase-border: rgb(208, 201, 255);
  --color-odp-next-phase-card-border: rgb(228, 224, 255);
  --color-odp-next-phase-hover-border: rgb(150, 136, 255);
  --color-odp-next-phase-hover-shadow: rgba(109, 85, 255, 0.12);
  --color-odp-next-phase-primary-grad-1: rgb(245, 242, 255);
  --color-odp-next-phase-secondary-border: rgb(221, 225, 236);
  --color-odp-next-phase-secondary-bg: rgb(249, 250, 251);
  --color-odp-next-phase-icon-muted: rgb(132, 146, 166);
  --color-odp-chip-border: rgb(232, 234, 240);
  --color-odp-chip-text: rgb(85, 85, 85);
  --color-odp-chip-hover-border: rgb(179, 170, 255);
  --color-odp-chip-num-bg: rgb(232, 234, 240);
  --color-odp-chip-progress: rgb(170, 170, 170);
  --color-odp-total-meta: rgb(153, 153, 153);
  --color-odp-chapter-done-border: rgb(52, 199, 131);
  --color-odp-chapter-done-bg: rgb(240, 255, 246);
  --color-odp-chapter-done-text: rgb(30, 168, 100);
  --color-odp-chapter-num-bg: rgb(232, 234, 240);
  --color-odp-chapter-locked-bg: rgb(248, 248, 252);
  --color-odp-chapter-hover-bg: rgb(250, 250, 254);
  --color-odp-chapter-badge-done-bg: rgb(208, 242, 229);
  --color-odp-chapter-badge-current-bg: rgb(237, 233, 255);
  --color-odp-chapter-badge-locked-bg: rgb(243, 244, 248);
  --color-odp-chapter-badge-locked-text: rgb(187, 187, 187);
  --color-odp-chapter-meta: rgb(132, 146, 166);
  --color-odp-chapter-right-icon: rgb(170, 170, 170);
  --color-odp-chapter-progress-mini-bg: rgb(238, 240, 248);
  --color-odp-chapter-body-border: rgb(243, 244, 248);
  --color-odp-step-card-bg: rgb(249, 250, 255);
  --color-odp-step-card-border: rgb(238, 240, 248);
  --color-odp-step-done-bg-2: rgb(245, 255, 249);
  --color-odp-step-current-border-2: rgb(196, 184, 255);
  --color-odp-step-hover-bg: rgb(243, 244, 252);
  --color-odp-step-body-text: rgb(85, 85, 85);
  --color-odp-mission-bg: rgb(245, 242, 255);
  --color-odp-ai-history-border: rgb(237, 233, 255);
  --color-odp-ai-history-item-bg: rgb(247, 245, 255);
  --color-odp-ai-history-text: rgb(34, 34, 34);
  --color-odp-popup-overlay: rgba(0, 0, 0, 0.4);
  --color-odp-popup-shadow: rgba(0, 0, 0, 0.18);
  --color-odp-popup-shadow-2: rgba(0, 0, 0, 0.2);
  --color-odp-popup-border: rgb(240, 240, 248);
  --color-odp-popup-close: rgb(136, 136, 136);
  --color-odp-popup-text: rgb(51, 51, 51);
  --color-odp-popup-empty: rgb(170, 170, 170);
  --color-odp-popup-ai-bg: rgb(245, 243, 255);
  --color-odp-chat-result-border: rgb(179, 170, 255);
  --color-odp-chat-result-grad-1: rgb(245, 243, 255);
  --color-odp-chat-result-grad-2: rgb(238, 240, 255);
  --color-odp-chat-result-title: rgb(74, 58, 219);
  --color-odp-chat-result-desc: rgb(68, 68, 68);
  --color-odp-chat-result-min: rgb(34, 34, 34);
  --color-odp-popup-meta-bg: rgb(245, 243, 255);
  --color-odp-popup-section-bg: rgb(248, 247, 255);
  --color-odp-popup-competitor-border: rgb(237, 233, 255);
  --color-odp-popup-competitor-pink: rgb(224, 70, 138);
  --color-odp-error-bg: rgb(255, 240, 240);
  --color-odp-error-text: rgb(211, 47, 47);
  --color-odp-save-hover-bg: rgb(228, 223, 255);
  --color-odp-saved-bg: rgb(240, 255, 244);
  --color-odp-saved-text: rgb(46, 164, 79);
  --color-odp-preview-avatar-text: rgb(68, 68, 68);
  --color-odp-tip-border: rgb(212, 206, 255);
  --color-odp-tip-item-desc: rgb(102, 102, 102);
  --color-odp-confirm-text: rgb(51, 51, 51);
  --color-odp-confirm-hint-bg: rgb(245, 243, 255);
  --color-odp-confirm-hint-text: rgb(68, 68, 68);
  --color-odp-confirm-hint-span: rgb(102, 102, 102);
  --color-odp-confirm-no-bg: rgb(245, 245, 248);
  --color-odp-confirm-no-text: rgb(102, 102, 102);
  --color-odp-confirm-no-hover: rgb(235, 235, 240);
  --color-odp-welcome-overlay: rgba(15, 20, 40, 0.55);
  --color-odp-welcome-shadow: rgba(15, 20, 60, 0.18);
  --color-odp-welcome-badge-bg: rgb(238, 240, 255);
  --color-odp-welcome-accent: rgb(91, 94, 244);
  --color-odp-welcome-accent-hover: rgb(69, 71, 224);
  --color-odp-welcome-roadmap-text: rgb(68, 68, 68);
  --color-odp-welcome-intro: rgb(102, 102, 102);
  --color-odp-welcome-list-text: rgb(34, 34, 34);
  --color-odp-welcome-list-bg: rgb(250, 251, 255);
  --color-odp-welcome-list-border: rgb(238, 240, 248);
  --color-odp-welcome-image-bg: rgb(245, 245, 252);
  --color-odp-welcome-loading-text: rgb(136, 136, 170);
  --color-odp-welcome-spinner-border: rgb(221, 221, 221);

  /* 신문 목업/스토리 카드 - 다크모드 무관 불변 값 */
  --color-odp-story-grad-1: rgb(244, 240, 255);
  --color-odp-story-grad-2: rgb(238, 243, 255);
  --color-odp-story-border: rgb(224, 217, 255);
  --color-odp-story-label: rgb(124, 111, 224);
  --color-odp-story-text: rgb(59, 51, 89);
  --color-odp-news-bg: rgb(253, 252, 247);
  --color-odp-news-border: rgb(212, 201, 168);
  --color-odp-news-name: rgb(26, 26, 26);
  --color-odp-news-date: rgb(122, 110, 90);
  --color-odp-news-divider: rgb(26, 26, 26);
  --color-odp-news-divider-thin: rgb(200, 191, 160);
  --color-odp-news-headline: rgb(17, 17, 17);
  --color-odp-news-subheadline: rgb(68, 68, 68);
  --color-odp-news-body: rgb(34, 34, 34);
}

.onboarding-dashboard-page,
.onboarding-dashboard-page * {
  box-sizing: border-box;
}

.onboarding-dashboard-page {
  min-height: 100vh;
  padding: 44px 20px 80px;
  background: var(--color-odp-page-bg);
}

.onboarding-dashboard-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.onboarding-dashboard-loading,
.onboarding-dashboard-empty {
  min-height: 420px;
  border-radius: 28px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-dashboard-empty {
  flex-direction: column;
  text-align: center;
  padding: 40px;
}

.onboarding-dashboard-empty svg {
  font-size: 44px;
  color: var(--color-odp-accent);
  margin-bottom: 18px;
}

.onboarding-dashboard-empty h1 {
  margin: 0;
  font-size: 30px;
  color: var(--color-odp-text);
}

.onboarding-dashboard-empty p {
  margin: 12px 0 24px;
  color: var(--color-odp-muted);
}

.onboarding-dashboard-empty a {
  height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  background: var(--color-odp-accent);
  color: var(--color-text-on-brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
}

.onboarding-dashboard-hero {
  border-radius: 32px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-card-border);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: stretch;
  animation: onboardingDashboardFadeUp 0.35s ease both;
}

.onboarding-dashboard-badge {
  display: inline-flex;
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 18px;
}

.onboarding-dashboard-badge.stable {
  background: var(--color-odp-badge-stable-bg);
  color: var(--color-odp-badge-stable-text);
}

.onboarding-dashboard-badge.challenge {
  background: var(--color-odp-badge-challenge-bg);
  color: var(--color-odp-badge-challenge-text);
}

.onboarding-dashboard-badge.explore {
  background: var(--color-odp-badge-explore-bg);
  color: var(--color-odp-badge-explore-text);
}

.onboarding-dashboard-hero h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.28;
  letter-spacing: -0.045em;
  color: var(--color-odp-text);
  word-break: keep-all;
}

.onboarding-dashboard-hero p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-odp-muted);
}

.onboarding-dashboard-insight {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--color-odp-insight-bg);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-dashboard-insight p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-odp-insight-text);
}

.onboarding-dashboard-progress-card {
  border-radius: 24px;
  background: var(--color-odp-page-bg);
  padding: 24px;
}

.onboarding-dashboard-progress-card span {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-odp-duration);
  margin-bottom: 8px;
}

.onboarding-dashboard-progress-card strong {
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: var(--color-odp-text);
  margin-bottom: 20px;
}

.onboarding-dashboard-progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-odp-dashboard-bar-bg);
}

.onboarding-dashboard-progress-bar div {
  height: 100%;
  border-radius: 999px;
  background: var(--color-odp-accent);
}

.onboarding-dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.onboarding-dashboard-summary-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-card-border);
  border-radius: 24px;
  padding: 22px;
  animation: onboardingDashboardFadeUp 0.35s ease both;
}

.onboarding-dashboard-summary-card svg {
  font-size: 24px;
  color: var(--color-odp-accent);
  margin-bottom: 16px;
}

.onboarding-dashboard-summary-card span {
  display: block;
  font-size: 13px;
  color: var(--color-odp-duration);
  font-weight: 800;
  margin-bottom: 8px;
}

.onboarding-dashboard-summary-card strong {
  display: block;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-odp-text);
  word-break: keep-all;
}

.onboarding-dashboard-content {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}

.onboarding-dashboard-main,
.onboarding-dashboard-side {
  min-width: 0;
}

.onboarding-dashboard-section-title {
  margin-bottom: 14px;
}

.onboarding-dashboard-section-title h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.035em;
  color: var(--color-odp-text);
}

.onboarding-dashboard-step-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-dashboard-step-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-card-border);
  border-radius: 22px;
  overflow: hidden;
  animation: onboardingDashboardFadeUp 0.35s ease both;
}

.onboarding-dashboard-step-card.is-current {
  border-color: var(--color-odp-step-current-border);
  box-shadow: 0 12px 34px var(--color-odp-step-current-shadow);
}

.onboarding-dashboard-step-card.is-completed {
  border-color: var(--color-odp-step-done-border);
  background: var(--color-odp-step-done-bg);
}

.onboarding-dashboard-step-header {
  width: 100%;
  padding: 18px 20px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.onboarding-dashboard-step-number {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--color-odp-icon-bg);
  color: var(--color-odp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.onboarding-dashboard-step-card.is-completed .onboarding-dashboard-step-number {
  background: var(--color-odp-badge-stable-bg);
  color: var(--color-odp-badge-stable-text);
}

.onboarding-dashboard-step-title-wrap {
  flex: 1;
  min-width: 0;
}

.onboarding-dashboard-step-title-wrap strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--color-odp-text);
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.onboarding-dashboard-step-meta {
  display: block;
  font-size: 12px;
  font-weight: 850;
  color: var(--color-odp-duration);
}

.onboarding-dashboard-step-toggle-icon {
  color: var(--color-odp-toggle-icon);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onboarding-dashboard-step-body {
  padding: 0 20px 20px 70px;
}

.onboarding-dashboard-step-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-odp-muted);
}

.onboarding-dashboard-mission {
  margin-top: 14px;
  border-radius: 16px;
  background: var(--color-odp-page-bg);
  padding: 14px;
}

.onboarding-dashboard-mission span {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-odp-duration);
  margin-bottom: 6px;
}

.onboarding-dashboard-mission strong {
  font-size: 14px;
  color: var(--color-odp-preview-text);
  line-height: 1.5;
}

.onboarding-dashboard-step-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.onboarding-dashboard-action-link,
.onboarding-dashboard-step-link {
  text-decoration: none;
}

.onboarding-dashboard-step-link {
  height: 42px;
  padding: 0 14px;
  border-radius: 13px;
  background: var(--color-odp-icon-bg);
  color: var(--color-odp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
}

.onboarding-dashboard-complete-button {
  height: 42px;
  padding: 0 14px;
  border: none;
  border-radius: 13px;
  background: var(--color-odp-text);
  color: var(--color-text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.onboarding-dashboard-complete-button:hover {
  background: rgb(42, 42, 42);
}

.onboarding-dashboard-complete-button.is-completed {
  background: var(--color-odp-badge-stable-bg);
  color: var(--color-odp-badge-stable-text);
}

.onboarding-dashboard-complete-button.is-completed:hover {
  background: rgb(223, 243, 232);
}

.onboarding-dashboard-complete-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── 제출 폼 ── */
.onboarding-dashboard-submit-form {
  margin-top: 16px;
  padding: 16px;
  background: var(--color-odp-submit-bg);
  border: 1.5px solid var(--color-odp-submit-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-dashboard-submit-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand-icon);
}

.onboarding-dashboard-submit-textarea {
  border: 1.5px solid var(--color-odp-submit-border-2);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: var(--color-odp-submit-text);
  background: var(--color-bg-white);
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.onboarding-dashboard-submit-textarea:focus {
  border-color: var(--color-brand-icon);
}

.onboarding-dashboard-submit-btn {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--color-brand-icon), var(--color-odp-chat-result-border));
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.onboarding-dashboard-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--color-odp-submit-shadow);
}
.onboarding-dashboard-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.onboarding-dashboard-submission-view {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--color-odp-submission-bg);
  border: 1px solid var(--color-odp-submission-border);
  border-radius: 10px;
}
.onboarding-dashboard-submission-view span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-odp-submission-label);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.onboarding-dashboard-submission-view p {
  font-size: 13px;
  color: var(--color-odp-submission-text);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

.onboarding-dashboard-complete-button.is-active {
  background: var(--color-odp-active-bg);
  color: var(--color-odp-active-text);
}

.onboarding-dashboard-step-link.is-highlight {
  background: linear-gradient(135deg, var(--color-brand-icon), var(--color-odp-chat-result-border));
  color: var(--color-text-on-brand);
  border-color: transparent;
  font-weight: 600;
}
.onboarding-dashboard-step-link.is-highlight:hover {
  opacity: 0.9;
}

.onboarding-dashboard-ai-button {
  height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--color-brand-icon), var(--color-odp-chat-result-border));
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.onboarding-dashboard-ai-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--color-odp-submit-shadow);
}

.onboarding-dashboard-step-ai-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-brand-icon), var(--color-odp-chat-result-border));
  color: var(--color-text-on-brand);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.onboarding-dashboard-current-card {
  position: sticky;
  top: 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-card-border);
  border-radius: 28px;
  padding: 26px;
  color: var(--color-odp-text);
  animation: onboardingDashboardFadeUp 0.35s ease both;
}

.onboarding-dashboard-current-card.is-finished {
  border-color: var(--color-odp-step-done-border);
  background: var(--color-odp-step-done-bg);
}

.onboarding-dashboard-current-label {
  display: inline-flex;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-odp-icon-bg);
  color: var(--color-odp-accent);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 16px;
}

.onboarding-dashboard-current-card.is-finished .onboarding-dashboard-current-label {
  background: var(--color-odp-badge-stable-bg);
  color: var(--color-odp-badge-stable-text);
}

.onboarding-dashboard-current-status {
  font-size: 13px;
  font-weight: 850;
  color: var(--color-odp-duration);
  margin-bottom: 10px;
}

.onboarding-dashboard-current-card h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.035em;
  color: var(--color-odp-text);
  word-break: keep-all;
}

.onboarding-dashboard-current-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.onboarding-dashboard-current-complete-button,
.onboarding-dashboard-current-link {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}

.onboarding-dashboard-current-complete-button {
  border: none;
  background: var(--color-odp-accent);
  color: var(--color-text-on-brand);
  cursor: pointer;
}

.onboarding-dashboard-current-complete-button:hover {
  background: var(--color-odp-current-hover);
}

.onboarding-dashboard-current-card.is-finished
  .onboarding-dashboard-current-complete-button {
  background: var(--color-odp-badge-stable-text);
  color: var(--color-text-on-brand);
}

.onboarding-dashboard-current-card.is-finished
  .onboarding-dashboard-current-complete-button:hover {
  background: rgb(22, 120, 73);
}

.onboarding-dashboard-current-complete-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.onboarding-dashboard-current-link {
  border: 1px solid var(--color-odp-card-border);
  background: var(--color-bg-white);
  color: var(--color-odp-preview-text);
}

.onboarding-dashboard-current-link:hover {
  background: var(--color-odp-page-bg);
}

@keyframes onboardingDashboardFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .onboarding-dashboard-hero,
  .onboarding-dashboard-content {
    grid-template-columns: 1fr;
  }

  .onboarding-dashboard-summary-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-dashboard-current-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .onboarding-dashboard-page {
    padding: 28px 16px 48px;
  }

  .onboarding-dashboard-hero {
    padding: 24px;
    border-radius: 26px;
  }

  .onboarding-dashboard-hero h1 {
    font-size: 28px;
  }

  .onboarding-dashboard-step-header {
    padding: 16px;
    gap: 12px;
  }

  .onboarding-dashboard-step-body {
    padding: 0 16px 18px;
  }

  .onboarding-dashboard-step-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .onboarding-dashboard-step-link,
  .onboarding-dashboard-complete-button,
  .onboarding-dashboard-ai-button {
    width: 100%;
    justify-content: center;
  }

  .onboarding-dashboard-current-card {
    padding: 22px;
  }
}

/* ═══════════════════════════════
   AI 로드맵 추천 섹션
═══════════════════════════════ */
.reco-section {
  margin-top: 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-odp-reco-section-border);
  border-radius: 24px;
  padding: 28px 28px 20px;
  box-shadow: 0 4px 20px var(--color-odp-reco-section-shadow);
}
.reco-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.reco-section__title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.reco-section__icon {
  font-size: 22px;
  color: var(--color-brand-icon);
  margin-top: 2px;
  flex-shrink: 0;
}
.reco-section__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.04em;
}
.reco-section__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--color-odp-reco-subtitle);
  font-weight: 600;
  line-height: 1.5;
  max-width: 400px;
}
.reco-type-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--color-odp-reco-toggle-bg);
  border-radius: 12px;
  flex-shrink: 0;
}
.reco-type-toggle button {
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--color-odp-reco-toggle-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.reco-type-toggle button.is-active {
  background: var(--color-bg-white);
  color: var(--color-brand-icon);
  box-shadow: 0 1px 4px var(--color-odp-reco-toggle-shadow);
}

/* 추천 카드 그리드 */
.reco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.reco-card {
  background: var(--color-odp-reco-card-bg);
  border: 1px solid var(--color-odp-reco-card-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.reco-card:hover {
  border-color: var(--color-odp-reco-card-hover-border);
  box-shadow: 0 6px 20px var(--color-odp-reco-card-hover-shadow);
  transform: translateY(-2px);
}
.reco-card__badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.reco-badge {
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.reco-badge.is-open { background: var(--color-odp-reco-open-bg); color: var(--color-odp-reco-open-text); }
.reco-badge.is-closed { background: var(--color-odp-reco-closed-bg); color: var(--color-text-muted); }
.reco-badge--type { background: var(--color-odp-reco-type-bg); color: var(--color-brand-icon); }
.reco-badge--study { background: var(--color-odp-reco-study-bg); color: var(--color-odp-reco-study-text); }
.reco-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 950;
  color: var(--color-text-main);
  letter-spacing: -0.03em;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reco-card__summary {
  margin: 0;
  font-size: 12px;
  color: var(--color-prp-muted);
  line-height: 1.55;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.reco-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-odp-reco-card-border);
}
.reco-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-odp-next-phase-icon-muted);
  font-weight: 700;
}
.reco-card__meta svg { font-size: 12px; }
.reco-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.reco-card__view-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--color-odp-reco-view-border);
  border-radius: 8px;
  background: var(--color-bg-white);
  color: var(--color-odp-reco-view-text);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s, color 0.15s;
}
.reco-card__view-btn:hover { border-color: var(--color-odp-reco-card-hover-border); color: var(--color-brand-icon); }
.reco-card__apply-btn {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: var(--color-brand-icon);
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, transform 0.15s;
}
.reco-card__apply-btn:hover { background: rgb(58, 84, 238); transform: translateY(-1px); }
.reco-card__apply-btn svg { font-size: 11px; }

/* 스켈레톤 */
.reco-skeleton-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.reco-skeleton {
  background: var(--color-odp-reco-card-bg);
  border: 1px solid var(--color-odp-reco-card-border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}
.reco-sk__badge, .reco-sk__title, .reco-sk__line {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--color-odp-reco-sk-grad-1) 0%, var(--color-odp-reco-sk-grad-2) 50%, var(--color-odp-reco-sk-grad-1) 100%);
  background-size: 220% 100%;
  animation: recoSkAnim 1.2s ease-in-out infinite;
}
.reco-sk__badge { height: 18px; width: 80px; }
.reco-sk__title { height: 16px; width: 85%; }
.reco-sk__line { height: 12px; width: 100%; }
.reco-sk__line--short { width: 65%; }
@keyframes recoSkAnim {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* 빈 상태 */
.reco-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px;
  background: var(--color-odp-reco-card-bg);
  border-radius: 16px;
  text-align: center;
}
.reco-empty svg { font-size: 28px; color: var(--color-odp-reco-empty-icon); }
.reco-empty p { margin: 0; font-size: 14px; color: var(--color-odp-next-phase-icon-muted); font-weight: 700; }
.reco-empty a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-brand-icon);
  text-decoration: none;
}
.reco-empty a:hover { text-decoration: underline; }

/* 푸터 */
.reco-section__footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--color-odp-reco-toggle-bg);
}
.reco-more-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-brand-icon);
  text-decoration: none;
}
.reco-more-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .reco-grid, .reco-skeleton-row { grid-template-columns: repeat(2, 1fr); }
  .reco-section { padding: 20px; }
}
@media (max-width: 600px) {
  .reco-grid, .reco-skeleton-row { grid-template-columns: 1fr; }
  .reco-section__header { flex-direction: column; gap: 10px; }
}

/* ─── 로드맵 완료 후 다음 단계 패널 ─── */
.onboarding-dashboard-next-phase {
  margin-top: 28px;
  background: linear-gradient(135deg, var(--color-odp-next-phase-grad-1) 0%, var(--color-odp-next-phase-grad-2) 100%);
  border: 1.5px solid var(--color-odp-next-phase-border);
  border-radius: 20px;
  padding: 28px 28px 24px;
}

.onboarding-dashboard-next-phase-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.onboarding-dashboard-next-phase-icon {
  font-size: 22px;
  color: var(--color-odp-accent);
  flex-shrink: 0;
}

.onboarding-dashboard-next-phase-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-odp-text);
}

.onboarding-dashboard-next-phase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.onboarding-dashboard-next-phase-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-odp-next-phase-card-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}

.onboarding-dashboard-next-phase-card:hover {
  border-color: var(--color-odp-next-phase-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--color-odp-next-phase-hover-shadow);
}

.onboarding-dashboard-next-phase-card.is-primary {
  border-color: var(--color-odp-accent);
  background: linear-gradient(135deg, var(--color-odp-next-phase-primary-grad-1), var(--color-bg-white));
}

.onboarding-dashboard-next-phase-card.is-secondary {
  border-color: var(--color-odp-next-phase-secondary-border);
  background: var(--color-odp-next-phase-secondary-bg);
}

.onboarding-dashboard-next-phase-card svg {
  font-size: 18px;
  color: var(--color-odp-accent);
  margin-bottom: 4px;
}

.onboarding-dashboard-next-phase-card.is-secondary svg {
  color: var(--color-odp-next-phase-icon-muted);
}

.onboarding-dashboard-next-phase-card strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-odp-text);
}

.onboarding-dashboard-next-phase-card span {
  font-size: 12px;
  color: var(--color-odp-muted);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .onboarding-dashboard-next-phase-grid {
    grid-template-columns: 1fr;
  }
  .onboarding-dashboard-next-phase {
    padding: 20px 16px;
  }
}

/* ─── 챕터 개요 칩 ─── */
.od-chapter-overview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.od-chapter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-odp-chip-border);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-odp-chip-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.od-chapter-chip:hover { border-color: var(--color-odp-chip-hover-border); }
.od-chapter-chip.current { border-color: var(--color-odp-accent); background: var(--color-odp-mission-bg); color: var(--color-odp-accent); }
.od-chapter-chip.done { border-color: var(--color-odp-chapter-done-border); background: var(--color-odp-chapter-done-bg); color: var(--color-odp-chapter-done-text); }
.od-chip-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-odp-chip-num-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
}
.od-chapter-chip.current .od-chip-num { background: var(--color-odp-accent); color: var(--color-text-on-brand); }
.od-chip-progress { font-size: 11px; color: var(--color-odp-chip-progress); }

/* ─── 전체 단계 수 메타 ─── */
.od-total-meta {
  font-size: 12px;
  color: var(--color-odp-total-meta);
  font-weight: 700;
  margin-left: 10px;
}

/* ─── 챕터 카드 ─── */
.onboarding-dashboard-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.od-chapter {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-odp-chip-border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.18s;
}
.od-chapter.is-current { border-color: var(--color-odp-chip-hover-border); }
.od-chapter.is-done { border-color: var(--color-odp-step-done-border); }
.od-chapter.is-locked { opacity: 0.55; background: var(--color-odp-chapter-locked-bg); }
.od-chapter.is-locked .od-chapter-header { cursor: not-allowed; }
.od-chapter.is-locked .od-chapter-header:hover { background: transparent; }

.od-chapter-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.od-chapter-header:hover { background: var(--color-odp-chapter-hover-bg); }

.od-chapter-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.od-chapter-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.od-chapter-badge.done { background: var(--color-odp-chapter-badge-done-bg); color: var(--color-odp-chapter-done-text); }
.od-chapter-badge.current { background: var(--color-odp-chapter-badge-current-bg); color: var(--color-odp-accent); }
.od-chapter-badge.locked { background: var(--color-odp-chapter-badge-locked-bg); color: var(--color-odp-chapter-badge-locked-text); }

.od-chapter-info { min-width: 0; }
.od-chapter-title {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--color-odp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.od-chapter-meta {
  font-size: 12px;
  color: var(--color-odp-chapter-meta);
  font-weight: 700;
}

.od-chapter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--color-odp-chapter-right-icon);
  font-size: 16px;
}

.od-chapter-progress-mini {
  width: 60px; height: 4px;
  background: var(--color-odp-chapter-progress-mini-bg);
  border-radius: 99px;
  overflow: hidden;
}
.od-chapter-progress-mini > div {
  height: 100%;
  background: linear-gradient(90deg, var(--color-odp-accent), var(--color-brand-icon));
  border-radius: 99px;
  transition: width 0.3s;
}
.od-chapter.is-done .od-chapter-progress-mini > div { background: var(--color-odp-chapter-done-border); }

.od-chapter-body {
  border-top: 1px solid var(--color-odp-chapter-body-border);
  padding: 16px 20px 20px;
}

.od-chapter-summary {
  font-size: 13px;
  color: var(--color-odp-muted);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ─── 스텝 카드 (챕터 내부) ─── */
.od-step-list { display: flex; flex-direction: column; gap: 8px; }

.od-step-card {
  background: var(--color-odp-step-card-bg);
  border: 1.5px solid var(--color-odp-step-card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.od-step-card.is-completed { background: var(--color-odp-step-done-bg-2); border-color: var(--color-odp-step-done-border); }
.od-step-card.is-current { border-color: var(--color-odp-step-current-border-2); }

.od-step-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.od-step-header:hover { background: var(--color-odp-step-hover-bg); }

.od-step-number {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-odp-chapter-badge-current-bg); color: var(--color-odp-accent);
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.od-step-card.is-completed .od-step-number { background: var(--color-odp-chapter-badge-done-bg); color: var(--color-odp-chapter-done-text); }

.od-step-title-wrap { flex: 1; min-width: 0; }
.od-step-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--color-odp-next-phase-icon-muted); font-weight: 700; margin-bottom: 2px;
}
.od-step-ai-badge {
  display: inline-block; padding: 1px 6px;
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); font-size: 10px; font-weight: 900; border-radius: 4px;
}
.od-step-title-wrap > strong {
  display: block; font-size: 14px; font-weight: 800; color: var(--color-odp-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.od-step-body { padding: 0 16px 16px; }
.od-step-body > p { font-size: 13px; color: var(--color-odp-step-body-text); line-height: 1.6; margin: 0 0 12px; }

.od-mission-box {
  background: var(--color-odp-mission-bg);
  border-left: 3px solid var(--color-odp-accent);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.od-mission-box span { font-size: 11px; font-weight: 800; color: var(--color-odp-accent); text-transform: uppercase; }
.od-mission-box strong { font-size: 13px; color: var(--color-odp-text); font-weight: 700; line-height: 1.5; }

.od-submission-view {
  background: var(--color-odp-chapter-done-bg); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}
.od-submission-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.od-submission-view-header span { font-size: 11px; font-weight: 800; color: var(--color-odp-chapter-done-text); }
.od-submission-view-btn { background: none; border: none; font-size: 11px; font-weight: 800; color: var(--color-odp-accent); cursor: pointer; padding: 0; }
.od-submission-view p { margin: 0; font-size: 13px; color: var(--color-odp-popup-text); line-height: 1.5; }

.od-step-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.od-ai-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--color-bg-white);
  color: var(--color-odp-accent); font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--color-odp-step-current-border-2); border-radius: 9px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.od-ai-button:hover { background: var(--color-odp-mission-bg); border-color: rgb(160, 143, 255); }

.od-step-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px;
  background: var(--color-bg-white); color: var(--color-odp-chip-text);
  font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--color-odp-submit-border-2);
  border-radius: 9px; text-decoration: none; transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.od-step-link:hover { background: var(--color-odp-page-bg); border-color: rgb(191, 196, 216); }
.od-step-link.is-highlight {
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon)); color: var(--color-text-on-brand);
  border: none;
}
.od-step-link.is-highlight:hover { opacity: 0.88; }

.od-complete-button {
  margin-left: auto;
  padding: 8px 16px;
  background: var(--color-odp-reco-toggle-bg); color: var(--color-odp-chip-text);
  font-size: 13px; font-weight: 800;
  border: 1.5px solid var(--color-odp-next-phase-card-border); border-radius: 9px; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.od-complete-button:hover { border-color: var(--color-odp-accent); color: var(--color-odp-accent); }
.od-complete-button.is-completed { background: var(--color-odp-chapter-done-bg); color: var(--color-odp-chapter-done-text); border-color: rgb(198, 240, 216); }
.od-complete-button.is-active { border-color: var(--color-odp-accent); color: var(--color-odp-accent); background: var(--color-odp-mission-bg); }
.od-complete-button:disabled { opacity: 0.5; cursor: not-allowed; }

.od-submit-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.od-submit-label { font-size: 13px; font-weight: 800; color: var(--color-odp-popup-text); }
.od-submit-textarea {
  width: 100%; resize: vertical;
  padding: 12px 14px; font-size: 14px;
  background: var(--color-bg-white); border: 1.5px solid var(--color-odp-submit-border-2); border-radius: 10px;
  font-family: inherit; color: var(--color-odp-text); transition: border-color 0.15s;
}
.od-submit-textarea:focus { outline: none; border-color: var(--color-odp-accent); }
.od-submit-btn {
  padding: 12px;
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); font-size: 14px; font-weight: 800;
  border: none; border-radius: 10px; cursor: pointer; transition: opacity 0.18s;
}
.od-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.od-chapter-complete-banner {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-odp-chapter-done-bg), rgb(232, 255, 243));
  border: 1.5px solid rgb(198, 240, 216); border-radius: 12px;
  font-size: 13px; font-weight: 700; color: var(--color-odp-chapter-done-text);
}
.od-chapter-complete-banner svg { font-size: 18px; flex-shrink: 0; }
.od-chapter-complete-banner span { flex: 1; }
.od-chapter-complete-banner button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px;
  background: var(--color-odp-chapter-done-text); color: var(--color-text-on-brand);
  font-size: 13px; font-weight: 800;
  border: none; border-radius: 8px; cursor: pointer;
  white-space: nowrap; transition: opacity 0.15s;
}
.od-chapter-complete-banner button:hover { opacity: 0.88; }

.od-current-chapter-label {
  font-size: 11px; font-weight: 900; color: var(--color-odp-accent);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}

@media (max-width: 900px) {
  .od-chapter-overview { gap: 6px; }
  .od-chapter-chip { font-size: 12px; padding: 6px 12px; }
}

/* ── AI 도와드린 내용 ── */
.od-ai-history {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-odp-ai-history-border);
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 24px;
}
.od-ai-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.od-ai-history-header strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-odp-text);
}
.od-ai-history-icon { color: var(--color-odp-accent); font-size: 17px; }

.od-ai-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.od-ai-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-odp-ai-history-item-bg);
  border-radius: 10px;
}
.od-ai-history-item-icon { color: var(--color-odp-accent); flex-shrink: 0; font-size: 15px; }
.od-ai-history-item span {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-odp-ai-history-text);
}
.od-ai-history-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-odp-accent);
  cursor: pointer;
  white-space: nowrap;
}
.od-ai-history-view-btn:hover { opacity: 0.7; }

.od-ai-history-more {
  margin-top: 12px;
  background: none;
  border: 1.5px solid var(--color-odp-submit-border-2);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-odp-chip-text);
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.od-ai-history-more:hover { border-color: var(--color-odp-accent); color: var(--color-odp-accent); }

/* ── 공통 팝업 오버레이 ── */
.od-popup-overlay {
  position: fixed; inset: 0;
  background: var(--color-odp-popup-overlay);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.od-popup {
  background: var(--color-bg-white); border-radius: 18px;
  width: 100%; max-width: 500px;
  box-shadow: 0 12px 40px var(--color-odp-popup-shadow);
  overflow: hidden; max-height: 80vh; display: flex; flex-direction: column;
}
.od-popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1.5px solid var(--color-odp-popup-border); flex-shrink: 0;
}
.od-popup-header strong { font-size: 15px; font-weight: 900; color: var(--color-odp-text); }
.od-popup-header button { background: none; border: none; font-size: 16px; color: var(--color-odp-popup-close); cursor: pointer; }
.od-popup-body { padding: 16px 20px 20px; overflow-y: auto; }
.od-popup-text { font-size: 14px; color: var(--color-odp-popup-text); line-height: 1.7; white-space: pre-wrap; margin: 0; }
.od-popup-row { margin-bottom: 12px; }
.od-popup-row span { font-size: 11px; font-weight: 800; color: var(--color-odp-popup-close); text-transform: uppercase; display: block; margin-bottom: 2px; }
.od-popup-row p { margin: 0; font-size: 14px; color: var(--color-odp-ai-history-text); font-weight: 600; }
.od-popup-empty { font-size: 14px; color: var(--color-odp-popup-empty); text-align: center; padding: 20px 0; }
.od-popup-row--ai { background: var(--color-odp-popup-ai-bg); border-radius: 10px; padding: 10px 12px; }
.od-popup-row--ai span { color: var(--color-odp-accent) !important; }
.od-popup-row--ai p { color: var(--color-odp-popup-text); line-height: 1.7; }

/* ── AI 채팅 팝업 ── */
.od-chat-popup {
  background: var(--color-bg-white); border-radius: 18px;
  width: 100%; max-width: 560px; height: 600px;
  box-shadow: 0 12px 40px var(--color-odp-popup-shadow-2);
  display: flex; flex-direction: column;
}
/* ── 채팅 내 결과 카드 ── */
.od-chat-result-card {
  border: 1.5px solid var(--color-odp-chat-result-border); border-radius: 14px;
  background: linear-gradient(135deg, var(--color-odp-chat-result-grad-1), var(--color-odp-chat-result-grad-2));
  padding: 14px 16px; margin-top: 4px;
}
.od-chat-result-title { font-size: 14px; font-weight: 900; color: var(--color-odp-chat-result-title); margin-bottom: 6px; }
.od-chat-result-desc { font-size: 13px; color: var(--color-odp-chat-result-desc); margin: 0 0 10px; line-height: 1.5; }
.od-chat-result-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.od-chat-result-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
.od-chat-result-row span { color: var(--color-odp-popup-close); min-width: 44px; flex-shrink: 0; }
.od-chat-result-row strong { color: var(--color-odp-chat-result-min); font-weight: 700; }
.od-chat-result-keywords { display: flex; flex-wrap: wrap; gap: 4px; }
.od-chat-result-keywords span {
  background: var(--color-odp-chapter-badge-current-bg); color: var(--color-odp-accent); border-radius: 20px;
  font-size: 11px; font-weight: 700; padding: 2px 8px;
}

/* ── 팝업 와이드 (보기 팝업) ── */
.od-popup--wide { max-width: 640px; max-height: 85vh; }
.od-popup-summary { font-size: 15px; font-weight: 700; color: var(--color-odp-ai-history-text); margin: 0 0 14px; line-height: 1.5; }
.od-popup-meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.od-popup-meta-item { background: var(--color-odp-popup-meta-bg); border-radius: 10px; padding: 8px 12px; min-width: 0; flex: 1; }
.od-popup-meta-item span { display: block; font-size: 11px; font-weight: 800; color: var(--color-odp-popup-close); margin-bottom: 2px; }
.od-popup-meta-item strong { font-size: 13px; color: var(--color-odp-ai-history-text); }
.od-popup-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.od-popup-keyword { background: var(--color-odp-chapter-badge-current-bg); color: var(--color-odp-accent); border-radius: 20px; font-size: 12px; font-weight: 700; padding: 3px 10px; }
.od-popup-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.od-popup-section { background: var(--color-odp-popup-section-bg); border-radius: 12px; padding: 12px 14px; }
.od-popup-section-title { font-size: 12px; font-weight: 900; color: var(--color-odp-accent); margin-bottom: 8px; }
.od-popup-section-list { margin: 0; padding: 0 0 0 16px; }
.od-popup-section-list li { font-size: 13px; color: var(--color-odp-popup-text); line-height: 1.6; margin-bottom: 2px; }
.od-popup-competitor { background: var(--color-bg-white); border-radius: 8px; border: 1px solid var(--color-odp-popup-competitor-border); padding: 8px 10px; margin-bottom: 6px; }
.od-popup-competitor strong { display: block; font-size: 13px; color: var(--color-odp-ai-history-text); margin-bottom: 2px; }
.od-popup-competitor span { display: block; font-size: 12px; color: var(--color-odp-chip-text); }
.od-popup-competitor em { display: block; font-size: 11px; color: var(--color-odp-popup-competitor-pink); margin-top: 2px; font-style: normal; }
@media (max-width: 560px) { .od-popup-sections { grid-template-columns: 1fr; } }

.od-chat-popup-sub { display: block; font-size: 12px; color: var(--color-odp-popup-close); font-weight: 500; margin-top: 1px; }
.od-chat-popup-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.od-chat-popup-msg { display: flex; align-items: flex-start; gap: 8px; }
.od-chat-popup-msg--user { flex-direction: row-reverse; }
.od-chat-popup-avatar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.od-chat-popup-bubble {
  max-width: 75%; padding: 9px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; color: var(--color-odp-ai-history-text);
  background: var(--color-odp-chat-result-grad-1); white-space: pre-wrap;
}
.od-chat-popup-msg--user .od-chat-popup-bubble {
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon)); color: var(--color-text-on-brand);
}
.od-chat-popup-loading { display: flex; gap: 4px; align-items: center; }
.od-chat-popup-loading span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-odp-chat-result-border);
  animation: od-bounce 1.2s infinite;
}
@keyframes od-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
.od-chat-popup-loading span:nth-child(2) { animation-delay: 0.2s; }
.od-chat-popup-loading span:nth-child(3) { animation-delay: 0.4s; }
.od-chat-popup-error {
  margin: 0 12px 4px; padding: 10px 12px; background: var(--color-odp-error-bg); color: var(--color-odp-error-text);
  border-radius: 8px; font-size: 12px; font-weight: 600;
}
.od-chat-popup-save-btn {
  margin: 0 12px 4px; padding: 10px; background: var(--color-odp-icon-bg); color: var(--color-odp-accent);
  border: none; border-radius: 10px; font-size: 13px; font-weight: 800;
  cursor: pointer; transition: background 0.15s;
}
.od-chat-popup-save-btn:hover { background: var(--color-odp-save-hover-bg); }
.od-chat-popup-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.od-chat-popup-saved {
  padding: 12px 16px; background: var(--color-odp-saved-bg); color: var(--color-odp-saved-text);
  font-size: 14px; font-weight: 700; text-align: center;
}
.od-chat-popup-input {
  display: flex; gap: 8px; padding: 12px;
  border-top: 1.5px solid var(--color-odp-popup-border);
}
.od-chat-popup-input input {
  flex: 1; padding: 9px 13px; border: 1.5px solid var(--color-odp-submit-border-2);
  border-radius: 10px; font-size: 13px; outline: none;
}
.od-chat-popup-input input:focus { border-color: var(--color-odp-accent); }
.od-chat-popup-input button {
  padding: 9px 16px; background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); border: none; border-radius: 10px; font-size: 13px;
  font-weight: 800; cursor: pointer;
}
.od-chat-popup-input button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── AI 단계 도우미 하단 섹션 ── */
.od-ai-assistant {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  background: var(--color-bg-white); border: 1.5px solid var(--color-odp-ai-history-border); border-radius: 18px;
  padding: 24px; margin-top: 24px;
}
.od-ai-assistant-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 15px; flex-wrap: wrap;
}
.od-ai-assistant-header strong { font-weight: 900; color: var(--color-odp-text); }
.od-ai-assistant-header span { font-size: 12px; color: var(--color-odp-popup-close); }
.od-ai-preview { margin-bottom: 14px; }
.od-ai-preview-msg { display: flex; gap: 8px; align-items: flex-start; }
.od-ai-preview-avatar {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.od-ai-preview-msg p {
  margin: 0; font-size: 13px; color: var(--color-odp-preview-avatar-text); line-height: 1.6;
  background: var(--color-odp-chat-result-grad-1); padding: 9px 13px; border-radius: 12px; flex: 1;
}
.od-ai-assistant-chat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; background: linear-gradient(135deg, var(--color-odp-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand); border: none; border-radius: 12px; font-size: 14px;
  font-weight: 800; cursor: pointer; transition: opacity 0.15s;
}
.od-ai-assistant-chat-btn:hover { opacity: 0.88; }
.od-ai-assistant-right { border-left: 1.5px solid var(--color-odp-popup-border); padding-left: 20px; }
.od-ai-assistant-right-title { display: block; font-size: 14px; font-weight: 800; color: var(--color-odp-text); margin-bottom: 12px; }
.od-ai-assistant-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--color-odp-ai-history-item-bg); border-radius: 10px; margin-bottom: 8px;
}
.od-ai-assistant-item-icon { color: var(--color-odp-accent); flex-shrink: 0; }
.od-ai-assistant-item span { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-odp-ai-history-text); }
.od-ai-assistant-view-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; font-size: 12px; font-weight: 700;
  color: var(--color-odp-accent); cursor: pointer; white-space: nowrap;
}
.od-ai-assistant-empty { font-size: 13px; color: var(--color-odp-popup-empty); line-height: 1.6; }
@media (max-width: 700px) { .od-ai-assistant { grid-template-columns: 1fr; } }

/* ── AI 조언 모달 ── */
.od-tip-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.od-tip-modal {
  background: var(--color-bg-white);
  border-radius: 18px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 12px 40px var(--color-odp-popup-shadow);
  overflow: hidden;
}
.od-tip-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1.5px solid var(--color-odp-popup-border);
}
.od-tip-modal-header strong { font-size: 16px; font-weight: 900; color: var(--color-odp-text); }
.od-tip-modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--color-odp-popup-close);
  cursor: pointer;
  padding: 4px;
}
.od-tip-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.od-tip-modal-item { display: flex; gap: 12px; align-items: flex-start; }
.od-tip-modal-icon { font-size: 20px; flex-shrink: 0; }
.od-tip-modal-item strong { display: block; font-size: 14px; font-weight: 800; color: var(--color-odp-ai-history-text); margin-bottom: 3px; }
.od-tip-modal-item p { margin: 0; font-size: 13px; color: var(--color-odp-tip-item-desc); line-height: 1.5; }

/* AI 조언 버튼 팁 스타일 */
.od-ai-button--tip {
  background: var(--color-odp-mission-bg) !important;
  color: var(--color-odp-accent) !important;
  border-color: var(--color-odp-tip-border) !important;
}

/* ── 프로젝트 생성 확인 모달 ── */
.od-project-confirm { max-width: 420px; }
.od-project-confirm-body { padding: 20px; }
.od-project-confirm-desc { font-size: 15px; color: var(--color-odp-confirm-text); line-height: 1.7; margin: 0 0 14px; }
.od-project-confirm-hint {
  background: var(--color-odp-confirm-hint-bg); border-radius: 12px; padding: 10px 14px;
  font-size: 13px; color: var(--color-odp-confirm-hint-text); margin-bottom: 20px; line-height: 1.5;
}
.od-project-confirm-hint strong { color: var(--color-odp-accent); }
.od-project-confirm-hint span { color: var(--color-odp-confirm-hint-span); }
.od-project-confirm-actions { display: flex; flex-direction: column; gap: 8px; }
.od-project-confirm-yes {
  background: var(--color-odp-accent); color: var(--color-text-on-brand); border: none; border-radius: 12px;
  padding: 13px 20px; font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background 0.15s;
}
.od-project-confirm-yes:hover { background: rgb(90, 66, 224); }
.od-project-confirm-no {
  background: var(--color-odp-confirm-no-bg); color: var(--color-odp-confirm-no-text); border: none; border-radius: 12px;
  padding: 12px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.od-project-confirm-no:hover { background: var(--color-odp-confirm-no-hover); }

.od-project-confirm-yes, .od-project-confirm-no { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.od-project-confirm-sub { font-size: 12px; font-weight: 400; opacity: 0.75; }

/* ── 첫 온보딩 환영 팝업 ── */
.od-welcome-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-odp-welcome-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  padding: 20px;
}

.od-welcome-modal {
  background: var(--color-bg-white);
  border-radius: 28px;
  padding: 40px 36px 36px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 32px 80px var(--color-odp-welcome-shadow);
  animation: od-welcome-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes od-welcome-in {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.od-welcome-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.od-welcome-emoji {
  font-size: 28px;
  line-height: 1;
}

.od-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-odp-welcome-badge-bg);
  color: var(--color-odp-welcome-accent);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.od-welcome-greeting {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-odp-text);
  letter-spacing: -0.04em;
  margin: 0 0 12px;
  line-height: 1.3;
}

.od-welcome-roadmap {
  font-size: 14px;
  color: var(--color-odp-welcome-roadmap-text);
  margin: 0 0 20px;
  line-height: 1.6;
  background: var(--color-odp-welcome-badge-bg);
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--color-odp-welcome-accent);
}

.od-welcome-intro {
  font-size: 13px;
  color: var(--color-odp-welcome-intro);
  margin: 0 0 10px;
}

.od-welcome-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.od-welcome-list li {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-odp-welcome-list-text);
  padding: 10px 14px;
  background: var(--color-odp-welcome-list-bg);
  border: 1px solid var(--color-odp-welcome-list-border);
  border-radius: 12px;
  line-height: 1.4;
}

.od-welcome-end {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-odp-welcome-accent);
  margin: 0 0 24px;
  text-align: center;
  letter-spacing: -0.02em;
}

.od-welcome-btn {
  width: 100%;
  padding: 14px;
  background: var(--color-odp-welcome-accent);
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: -0.02em;
  transition: background 0.15s;
}

.od-welcome-btn:hover {
  background: var(--color-odp-welcome-accent-hover);
}

.od-welcome-image-wrap {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-odp-welcome-image-bg);
  margin: 4px 0 20px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.od-welcome-story {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--color-odp-story-grad-1) 0%, var(--color-odp-story-grad-2) 100%);
  border-top: 1px solid var(--color-odp-story-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.od-welcome-story-label {
  font-size: 10px;
  font-weight: 900;
  color: var(--color-odp-story-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.od-welcome-story p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-odp-story-text);
  font-weight: 700;
  word-break: keep-all;
}

.od-welcome-news {
  width: 100%;
  padding: 16px 18px 14px;
  background: var(--color-odp-news-bg);
  border-top: 1px solid var(--color-odp-news-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Georgia", serif;
}

.od-welcome-news__masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.od-welcome-news__name {
  font-size: 12px;
  font-weight: 900;
  color: var(--color-odp-news-name);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.od-welcome-news__date {
  font-size: 11px;
  color: var(--color-odp-news-date);
  font-family: sans-serif;
  font-weight: 600;
}

.od-welcome-news__divider {
  border: none;
  border-top: 2px solid var(--color-odp-news-divider);
  margin: 0;
}

.od-welcome-news__divider--thin {
  border-top-width: 1px;
  border-color: var(--color-odp-news-divider-thin);
}

.od-welcome-news__headline {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-odp-news-headline);
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.od-welcome-news__subheadline {
  margin: 0;
  font-size: 13px;
  color: var(--color-odp-news-subheadline);
  line-height: 1.5;
  font-style: italic;
  word-break: keep-all;
}

.od-welcome-news__reporter {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-odp-news-date);
  font-family: sans-serif;
  letter-spacing: 0.03em;
}

.od-welcome-news__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-odp-news-body);
  word-break: keep-all;
}

.od-welcome-image {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.od-welcome-image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 20px;
  color: var(--color-odp-welcome-loading-text);
  font-size: 14px;
}

.od-welcome-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-odp-welcome-spinner-border);
  border-top-color: var(--color-odp-welcome-accent);
  border-radius: 50%;
  animation: od-spin 0.8s linear infinite;
}

@keyframes od-spin {
  to { transform: rotate(360deg); }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-odp-page-bg: rgb(15, 23, 42);
  --color-odp-card-border: rgb(51, 65, 85);
  --color-odp-accent: rgb(167, 139, 250);
  --color-odp-text: rgb(241, 245, 249);
  --color-odp-muted: rgb(148, 163, 184);
  --color-odp-duration: rgb(148, 163, 184);
  --color-odp-insight-bg: rgba(167, 139, 250, 0.1);
  --color-odp-insight-text: rgb(203, 213, 225);
  --color-odp-icon-bg: rgba(167, 139, 250, 0.16);
  --color-odp-dashboard-bar-bg: rgb(51, 65, 85);
  --color-odp-badge-stable-bg: rgba(29, 143, 85, 0.18);
  --color-odp-badge-stable-text: rgb(74, 222, 128);
  --color-odp-badge-challenge-bg: rgba(217, 106, 0, 0.18);
  --color-odp-badge-challenge-text: rgb(251, 146, 60);
  --color-odp-badge-explore-bg: rgba(78, 99, 216, 0.2);
  --color-odp-badge-explore-text: rgb(165, 180, 252);
  --color-odp-step-current-border: rgba(167, 139, 250, 0.4);
  --color-odp-step-current-shadow: rgba(167, 139, 250, 0.2);
  --color-odp-step-done-border: rgba(52, 199, 131, 0.3);
  --color-odp-step-done-bg: rgba(52, 199, 131, 0.08);
  --color-odp-toggle-icon: rgb(100, 116, 139);
  --color-odp-preview-text: rgb(203, 213, 225);
  --color-odp-submit-bg: rgba(73, 101, 255, 0.1);
  --color-odp-submit-border: rgba(73, 101, 255, 0.3);
  --color-odp-submit-text: rgb(226, 232, 240);
  --color-odp-submit-border-2: rgb(51, 65, 85);
  --color-odp-submit-shadow: rgba(73, 101, 255, 0.4);
  --color-odp-submission-bg: rgba(5, 150, 105, 0.12);
  --color-odp-submission-border: rgba(5, 150, 105, 0.35);
  --color-odp-submission-label: rgb(52, 211, 153);
  --color-odp-submission-text: rgb(203, 213, 225);
  --color-odp-active-bg: var(--color-bg-elevated-dark);
  --color-odp-active-text: rgb(203, 213, 225);
  --color-odp-current-hover: rgb(129, 108, 245);
  --color-odp-reco-section-border: rgb(51, 65, 85);
  --color-odp-reco-section-shadow: rgba(0, 0, 0, 0.3);
  --color-odp-reco-subtitle: var(--color-text-muted);
  --color-odp-reco-toggle-bg: var(--color-bg-elevated-dark);
  --color-odp-reco-toggle-text: var(--color-text-placeholder);
  --color-odp-reco-toggle-shadow: rgba(0, 0, 0, 0.3);
  --color-odp-reco-card-bg: var(--color-bg-elevated-dark);
  --color-odp-reco-card-border: rgb(51, 65, 85);
  --color-odp-reco-card-hover-border: rgba(129, 140, 248, 0.5);
  --color-odp-reco-card-hover-shadow: rgba(73, 101, 255, 0.2);
  --color-odp-reco-open-bg: rgba(77, 93, 222, 0.2);
  --color-odp-reco-open-text: rgb(165, 180, 252);
  --color-odp-reco-closed-bg: var(--color-bg-soft);
  --color-odp-reco-type-bg: rgba(73, 101, 255, 0.18);
  --color-odp-reco-study-bg: rgba(26, 127, 83, 0.2);
  --color-odp-reco-study-text: rgb(74, 222, 128);
  --color-odp-reco-view-border: rgb(51, 65, 85);
  --color-odp-reco-view-text: var(--color-text-muted);
  --color-odp-reco-sk-grad-1: rgb(51, 65, 85);
  --color-odp-reco-sk-grad-2: rgb(71, 85, 105);
  --color-odp-reco-empty-icon: rgba(129, 140, 248, 0.5);
  --color-odp-next-phase-grad-1: rgba(167, 139, 250, 0.14);
  --color-odp-next-phase-grad-2: rgba(129, 140, 248, 0.14);
  --color-odp-next-phase-border: rgba(167, 139, 250, 0.3);
  --color-odp-next-phase-card-border: rgba(167, 139, 250, 0.25);
  --color-odp-next-phase-hover-border: rgba(150, 136, 255, 0.6);
  --color-odp-next-phase-hover-shadow: rgba(167, 139, 250, 0.25);
  --color-odp-next-phase-primary-grad-1: rgba(167, 139, 250, 0.16);
  --color-odp-next-phase-secondary-border: rgb(51, 65, 85);
  --color-odp-next-phase-secondary-bg: var(--color-bg-elevated-dark);
  --color-odp-next-phase-icon-muted: var(--color-text-placeholder);
  --color-odp-chip-border: rgb(51, 65, 85);
  --color-odp-chip-text: rgb(203, 213, 225);
  --color-odp-chip-hover-border: rgba(179, 170, 255, 0.5);
  --color-odp-chip-num-bg: rgb(51, 65, 85);
  --color-odp-chip-progress: var(--color-text-placeholder);
  --color-odp-total-meta: var(--color-text-placeholder);
  --color-odp-chapter-done-border: rgb(52, 199, 131);
  --color-odp-chapter-done-bg: rgba(52, 199, 131, 0.14);
  --color-odp-chapter-done-text: rgb(74, 222, 128);
  --color-odp-chapter-num-bg: rgb(51, 65, 85);
  --color-odp-chapter-locked-bg: var(--color-bg-soft);
  --color-odp-chapter-hover-bg: var(--color-bg-elevated-dark);
  --color-odp-chapter-badge-done-bg: rgba(52, 199, 131, 0.2);
  --color-odp-chapter-badge-current-bg: rgba(167, 139, 250, 0.2);
  --color-odp-chapter-badge-locked-bg: var(--color-bg-elevated-dark);
  --color-odp-chapter-badge-locked-text: var(--color-text-placeholder);
  --color-odp-chapter-meta: var(--color-text-placeholder);
  --color-odp-chapter-right-icon: var(--color-text-placeholder);
  --color-odp-chapter-progress-mini-bg: rgb(51, 65, 85);
  --color-odp-chapter-body-border: rgb(51, 65, 85);
  --color-odp-step-card-bg: var(--color-bg-elevated-dark);
  --color-odp-step-card-border: rgb(51, 65, 85);
  --color-odp-step-done-bg-2: rgba(52, 199, 131, 0.1);
  --color-odp-step-current-border-2: rgba(196, 184, 255, 0.5);
  --color-odp-step-hover-bg: rgb(51, 65, 85);
  --color-odp-step-body-text: rgb(203, 213, 225);
  --color-odp-mission-bg: rgba(167, 139, 250, 0.14);
  --color-odp-ai-history-border: rgba(167, 139, 250, 0.25);
  --color-odp-ai-history-item-bg: rgba(167, 139, 250, 0.1);
  --color-odp-ai-history-text: rgb(226, 232, 240);
  --color-odp-popup-overlay: rgba(0, 0, 0, 0.6);
  --color-odp-popup-shadow: rgba(0, 0, 0, 0.4);
  --color-odp-popup-shadow-2: rgba(0, 0, 0, 0.45);
  --color-odp-popup-border: rgb(51, 65, 85);
  --color-odp-popup-close: var(--color-text-placeholder);
  --color-odp-popup-text: rgb(203, 213, 225);
  --color-odp-popup-empty: var(--color-text-placeholder);
  --color-odp-popup-ai-bg: rgba(167, 139, 250, 0.12);
  --color-odp-chat-result-border: rgba(179, 170, 255, 0.5);
  --color-odp-chat-result-grad-1: rgba(167, 139, 250, 0.14);
  --color-odp-chat-result-grad-2: rgba(129, 140, 248, 0.14);
  --color-odp-chat-result-title: rgb(196, 181, 253);
  --color-odp-chat-result-desc: rgb(203, 213, 225);
  --color-odp-chat-result-min: rgb(226, 232, 240);
  --color-odp-popup-meta-bg: rgba(167, 139, 250, 0.12);
  --color-odp-popup-section-bg: var(--color-bg-elevated-dark);
  --color-odp-popup-competitor-border: rgba(167, 139, 250, 0.25);
  --color-odp-popup-competitor-pink: rgb(244, 114, 182);
  --color-odp-error-bg: rgba(211, 47, 47, 0.14);
  --color-odp-error-text: rgb(248, 113, 113);
  --color-odp-save-hover-bg: rgba(167, 139, 250, 0.24);
  --color-odp-saved-bg: rgba(46, 164, 79, 0.14);
  --color-odp-saved-text: rgb(74, 222, 128);
  --color-odp-preview-avatar-text: rgb(203, 213, 225);
  --color-odp-tip-border: rgba(167, 139, 250, 0.4);
  --color-odp-tip-item-desc: var(--color-text-muted);
  --color-odp-confirm-text: rgb(203, 213, 225);
  --color-odp-confirm-hint-bg: rgba(167, 139, 250, 0.12);
  --color-odp-confirm-hint-text: rgb(203, 213, 225);
  --color-odp-confirm-hint-span: var(--color-text-muted);
  --color-odp-confirm-no-bg: var(--color-bg-elevated-dark);
  --color-odp-confirm-no-text: var(--color-text-muted);
  --color-odp-confirm-no-hover: var(--color-border);
  --color-odp-welcome-overlay: rgba(2, 6, 16, 0.7);
  --color-odp-welcome-shadow: rgba(0, 0, 0, 0.5);
  --color-odp-welcome-badge-bg: rgba(91, 94, 244, 0.18);
  --color-odp-welcome-accent: rgb(129, 132, 250);
  --color-odp-welcome-accent-hover: rgb(105, 108, 240);
  --color-odp-welcome-roadmap-text: rgb(203, 213, 225);
  --color-odp-welcome-intro: var(--color-text-muted);
  --color-odp-welcome-list-text: rgb(226, 232, 240);
  --color-odp-welcome-list-bg: var(--color-bg-elevated-dark);
  --color-odp-welcome-list-border: rgb(51, 65, 85);
  --color-odp-welcome-image-bg: rgba(167, 139, 250, 0.1);
  --color-odp-welcome-loading-text: var(--color-text-muted);
  --color-odp-welcome-spinner-border: rgb(51, 65, 85);

  /* 신문 목업/스토리 카드는 다크모드에서도 값 불변 */
}

/* dark.css의 전역 안전망 규칙([data-theme="dark"] h3/p 색상 지정)이
   태그 선택자(h3/p)라서 클래스 하나짜리 규칙보다 명시도가 높아 이겨버림 -
   종이 질감 고정용 색을 다시 명시도 높게 재선언해서 되찾아온다 */
[data-theme="dark"] .od-welcome-news__headline {
  color: var(--color-odp-news-headline);
}

[data-theme="dark"] .od-welcome-news__subheadline {
  color: var(--color-odp-news-subheadline);
}

[data-theme="dark"] .od-welcome-news__reporter {
  color: var(--color-odp-news-date);
}

[data-theme="dark"] .od-welcome-news__body {
  color: var(--color-odp-news-body);
}
:root {
  --color-rmw-glow-1: rgba(109, 85, 255, 0.13);
  --color-rmw-glow-2: rgba(146, 126, 255, 0.08);
  --color-rmw-page-bg: rgb(247, 247, 251);
  --color-rmw-progress-bg: rgb(233, 233, 242);
  --color-rmw-grad-1: rgb(109, 85, 255);
  --color-rmw-grad-2: rgb(146, 126, 255);
  --color-rmw-badge-bg: rgb(236, 232, 255);
  --color-rmw-accent: rgb(109, 85, 255);
  --color-rmw-text: rgb(17, 17, 17);
  --color-rmw-text-muted: rgb(102, 102, 119);
  --color-rmw-item-border: rgb(236, 236, 243);
  --color-rmw-item-bg: rgba(255, 255, 255, 0.76);
  --color-rmw-item-text: rgb(51, 51, 68);
  --color-rmw-item-shadow: rgba(17, 17, 17, 0.035);
  --color-rmw-btn-shadow: rgba(109, 85, 255, 0.22);
  --color-rmw-btn-shadow-hover: rgba(109, 85, 255, 0.26);
  --color-rmw-btn-shadow-active: rgba(109, 85, 255, 0.2);
  --color-rmw-focus-ring: rgba(109, 85, 255, 0.24);
  --color-rmw-skip-text: rgb(139, 139, 153);
}

.rmw-page,
.rmw-page * {
  box-sizing: border-box;
}

.rmw-page {
  min-height: 100vh;
  padding: 48px 20px 80px;
  background:
    radial-gradient(circle at top left, var(--color-rmw-glow-1), transparent 34%),
    radial-gradient(circle at bottom right, var(--color-rmw-glow-2), transparent 28%),
    var(--color-rmw-page-bg);
}

.rmw-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.rmw-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--color-rmw-progress-bg);
  overflow: hidden;
  margin-bottom: 96px;
}

.rmw-progress-fill {
  width: 14%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-rmw-grad-1), var(--color-rmw-grad-2));
}

.rmw-hero {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  animation: rmwFadeUp 0.42s ease both;
}

.rmw-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--color-rmw-badge-bg);
  color: var(--color-rmw-accent);
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 22px;
}

.rmw-hero h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.052em;
  color: var(--color-rmw-text);
  font-weight: 900;
  word-break: keep-all;
}

.rmw-description {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-rmw-text-muted);
  word-break: keep-all;
}

.rmw-summary {
  max-width: 620px;
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rmw-summary-item {
  min-height: 54px;
  border: 1px solid var(--color-rmw-item-border);
  border-radius: 16px;
  background: var(--color-rmw-item-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--color-rmw-item-text);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 30px var(--color-rmw-item-shadow);
}

.rmw-summary-item svg {
  color: var(--color-rmw-accent);
  font-size: 17px;
  flex: 0 0 auto;
}

.rmw-actions {
  margin-top: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rmw-next-button {
  width: 100%;
  max-width: 360px;
  min-height: 62px;
  border: none;
  border-radius: 18px;
  background: var(--color-rmw-accent);
  color: var(--color-text-on-brand);
  box-shadow: 0 18px 38px var(--color-rmw-btn-shadow);
  font-family: inherit;
  font-size: 16px;
  font-weight: 850;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

.rmw-next-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px var(--color-rmw-btn-shadow-hover);
}

.rmw-next-button:active {
  transform: translateY(0);
  box-shadow: 0 14px 30px var(--color-rmw-btn-shadow-active);
}

.rmw-next-button:focus-visible {
  outline: 3px solid var(--color-rmw-focus-ring);
  outline-offset: 3px;
}

.rmw-skip-button {
  margin-top: 16px;
  border: none;
  background: transparent;
  color: var(--color-rmw-skip-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.16s ease,
    opacity 0.16s ease;
}

.rmw-skip-button:hover {
  color: var(--color-rmw-text-muted);
}

.rmw-skip-button:focus-visible {
  outline: none;
  color: var(--color-rmw-accent);
}

@keyframes rmwFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .rmw-page {
    padding: 28px 16px 48px;
  }

  .rmw-progress {
    margin-bottom: 72px;
  }

  .rmw-hero h1 {
    font-size: 34px;
  }

  .rmw-description {
    font-size: 15px;
  }

  .rmw-summary {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .rmw-summary-item {
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 18px;
  }

  .rmw-next-button {
    max-width: none;
    min-height: 58px;
    font-size: 15px;
    border-radius: 16px;
  }

  .rmw-skip-button {
    margin-top: 14px;
    font-size: 14px;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-rmw-glow-1: rgba(167, 139, 250, 0.16);
  --color-rmw-glow-2: rgba(167, 139, 250, 0.1);
  --color-rmw-page-bg: rgb(15, 23, 42);
  --color-rmw-progress-bg: rgb(51, 65, 85);
  --color-rmw-grad-1: rgb(129, 140, 248);
  --color-rmw-grad-2: rgb(167, 139, 250);
  --color-rmw-badge-bg: rgba(167, 139, 250, 0.18);
  --color-rmw-accent: rgb(167, 139, 250);
  --color-rmw-text: rgb(241, 245, 249);
  --color-rmw-text-muted: rgb(148, 163, 184);
  --color-rmw-item-border: rgb(51, 65, 85);
  --color-rmw-item-bg: rgba(30, 41, 59, 0.76);
  --color-rmw-item-text: rgb(226, 232, 240);
  --color-rmw-item-shadow: rgba(0, 0, 0, 0.3);
  --color-rmw-btn-shadow: rgba(129, 140, 248, 0.3);
  --color-rmw-btn-shadow-hover: rgba(129, 140, 248, 0.36);
  --color-rmw-btn-shadow-active: rgba(129, 140, 248, 0.28);
  --color-rmw-focus-ring: rgba(167, 139, 250, 0.35);
  --color-rmw-skip-text: rgb(100, 116, 139);
}
:root {
  --color-sai-page-bg: rgb(247, 248, 252);
  --color-sai-border: rgb(237, 233, 255);
  --color-sai-border-2: rgb(221, 225, 236);
  --color-sai-text-sub: rgb(85, 85, 85);
  --color-sai-accent: rgb(109, 85, 255);
  --color-sai-text: rgb(17, 17, 17);
  --color-sai-text-muted: rgb(136, 136, 136);
  --color-sai-text-strong: rgb(34, 34, 34);
  --color-sai-text-muted-2: rgb(102, 102, 102);
  --color-sai-mission-bg: rgb(245, 242, 255);
  --color-sai-text-body: rgb(51, 51, 51);
  --color-sai-bubble-bg: rgb(245, 243, 255);
  --color-sai-loading-dot: rgb(196, 184, 255);
  --color-sai-result-border: rgb(179, 170, 255);
  --color-sai-result-bg: rgb(249, 248, 255);
  --color-sai-competitor-pink: rgb(224, 70, 138);
  --color-sai-success: rgb(46, 164, 79);
  --color-sai-bottom-border: rgb(240, 240, 248);
  --color-sai-complete-bg: rgb(240, 237, 255);
  --color-sai-complete-hover-bg: rgb(228, 223, 255);
  --color-sai-saved-bar-bg: rgb(240, 255, 244);
}

.sai-page, .sai-page * { box-sizing: border-box; }

.sai-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-sai-page-bg);
}

/* ── 헤더 ── */
.sai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--color-bg-white);
  border-bottom: 1.5px solid var(--color-sai-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.sai-back {
  background: none;
  border: 1.5px solid var(--color-sai-border-2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sai-text-sub);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sai-back:hover { border-color: var(--color-sai-accent); color: var(--color-sai-accent); }

.sai-header-center {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sai-header-emoji { font-size: 22px; }
.sai-header-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--color-sai-text);
  display: block;
}
.sai-header-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-sai-text-muted);
}
.sai-header-right { width: 100px; }

/* ── 바디 (좌측 팁 + 우측 채팅) ── */
.sai-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  flex: 1;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 20px;
  align-items: start;
  gap: 20px;
}

/* ── 참고사항 패널 ── */
.sai-tips {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-sai-border);
  border-radius: 16px;
  padding: 20px;
  position: sticky;
  top: 80px;
}
.sai-tips-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-sai-accent);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.sai-tip-item {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.sai-tip-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.sai-tip-item strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-sai-text-strong);
  margin-bottom: 2px;
}
.sai-tip-item p {
  margin: 0;
  font-size: 12px;
  color: var(--color-sai-text-muted-2);
  line-height: 1.5;
}

.sai-mission-box {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--color-sai-mission-bg);
  border-radius: 10px;
  border-left: 3px solid var(--color-sai-accent);
}
.sai-mission-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-sai-accent);
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.sai-mission-box p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-sai-text-body);
  line-height: 1.4;
}

/* ── 채팅 영역 ── */
.sai-chat {
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-sai-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
}

.sai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sai-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.sai-msg--user { flex-direction: row-reverse; }

.sai-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-sai-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sai-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-sai-text-strong);
  background: var(--color-sai-bubble-bg);
}
.sai-msg--user .sai-bubble {
  background: linear-gradient(135deg, var(--color-sai-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
}
.sai-bubble--loading {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 14px 18px;
}
.sai-bubble--loading span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-sai-loading-dot);
  animation: sai-bounce 1.2s infinite;
}
.sai-bubble--loading span:nth-child(2) { animation-delay: 0.2s; }
.sai-bubble--loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sai-bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

.sai-text p { margin: 0 0 4px; }
.sai-text br { display: block; margin: 2px 0; }

/* ── 결과 카드 ── */
.sai-result-card {
  border: 1.5px solid var(--color-sai-result-border);
  border-radius: 14px;
  background: var(--color-sai-result-bg);
  padding: 18px;
  margin-top: 4px;
}
.sai-result-head {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-sai-accent);
  margin-bottom: 12px;
}
.sai-result-body { display: flex; flex-direction: column; gap: 10px; }
.sai-result-row span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-sai-text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.sai-result-row p { margin: 0; font-size: 13px; color: var(--color-sai-text-strong); font-weight: 600; }

.sai-competitors { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sai-competitor {
  background: var(--color-bg-white);
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-sai-border);
}
.sai-competitor strong { font-size: 13px; color: var(--color-sai-text-body); display: block; margin-bottom: 2px; }
.sai-competitor p { margin: 0; font-size: 12px; color: var(--color-sai-text-sub); }
.sai-competitor small { display: block; font-size: 11px; color: var(--color-sai-competitor-pink); margin-top: 2px; }

.sai-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.sai-save-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--color-sai-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sai-save-btn:hover { opacity: 0.9; }
.sai-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sai-retry-btn {
  padding: 10px 16px;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-sai-border-2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sai-text-sub);
  cursor: pointer;
}
.sai-retry-btn:hover { border-color: var(--color-sai-accent); color: var(--color-sai-accent); }

.sai-saved-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sai-success);
  flex-wrap: wrap;
}
.sai-saved-msg button {
  background: none;
  border: none;
  color: var(--color-sai-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

/* ── 하단 ── */
.sai-bottom {
  border-top: 1.5px solid var(--color-sai-bottom-border);
}
.sai-complete-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-sai-complete-bg);
  color: var(--color-sai-accent);
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}
.sai-complete-btn:hover:not(:disabled) { background: var(--color-sai-complete-hover-bg); }
.sai-complete-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sai-saved-bar {
  padding: 12px 16px;
  background: var(--color-sai-saved-bar-bg);
  color: var(--color-sai-success);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sai-saved-bar button {
  background: none;
  border: none;
  color: var(--color-sai-accent);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

/* ── 입력 ── */
.sai-input-row {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
}
.sai-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--color-sai-border-2);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.sai-input:focus { border-color: var(--color-sai-accent); }
.sai-send-btn {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--color-sai-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sai-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sai-send-btn:not(:disabled):hover { opacity: 0.9; }

/* ── 반응형 ── */
@media (max-width: 800px) {
  .sai-body { grid-template-columns: 1fr; }
  .sai-tips { position: static; }
  .sai-chat { height: 60vh; }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-sai-page-bg: rgb(15, 23, 42);
  --color-sai-border: rgb(51, 65, 85);
  --color-sai-border-2: rgb(51, 65, 85);
  --color-sai-text-sub: rgb(203, 213, 225);
  --color-sai-accent: rgb(167, 139, 250);
  --color-sai-text: rgb(241, 245, 249);
  --color-sai-text-muted: rgb(148, 163, 184);
  --color-sai-text-strong: rgb(226, 232, 240);
  --color-sai-text-muted-2: rgb(148, 163, 184);
  --color-sai-mission-bg: rgba(167, 139, 250, 0.14);
  --color-sai-text-body: rgb(203, 213, 225);
  --color-sai-bubble-bg: rgb(30, 41, 59);
  --color-sai-loading-dot: rgb(129, 140, 248);
  --color-sai-result-border: rgba(167, 139, 250, 0.4);
  --color-sai-result-bg: rgba(167, 139, 250, 0.1);
  --color-sai-competitor-pink: rgb(244, 114, 182);
  --color-sai-success: rgb(74, 222, 128);
  --color-sai-bottom-border: rgb(51, 65, 85);
  --color-sai-complete-bg: rgba(167, 139, 250, 0.16);
  --color-sai-complete-hover-bg: rgba(167, 139, 250, 0.24);
  --color-sai-saved-bar-bg: rgba(34, 197, 94, 0.14);
}
:root {
  --color-ng-page-bg: rgb(247, 247, 251);
  --color-ng-muted: rgb(136, 136, 136);
  --color-ng-border: rgb(221, 225, 236);
  --color-ng-text-sub: rgb(85, 85, 85);
  --color-ng-accent: rgb(109, 85, 255);
  --color-ng-text: rgb(17, 17, 17);
  --color-ng-muted-2: rgb(102, 102, 119);
  --color-ng-card-border: rgb(232, 234, 240);
  --color-ng-progress-label: rgb(170, 170, 170);
  --color-ng-prev-value-bg: rgb(242, 240, 255);
  --color-ng-hover-border: rgb(196, 184, 255);
  --color-ng-shadow-10: rgba(109, 85, 255, 0.1);
  --color-ng-selected-bg: rgb(245, 242, 255);
  --color-ng-shadow-14: rgba(109, 85, 255, 0.14);
  --color-ng-icon-grad-1: rgb(240, 237, 255);
  --color-ng-icon-grad-2: rgb(232, 240, 255);
  --color-ng-chip-text: rgb(51, 51, 51);
  --color-ng-shadow-16: rgba(109, 85, 255, 0.16);
  --color-ng-roadmap-selected-bg: rgb(249, 248, 255);
  --color-ng-badge-stable-bg: rgb(238, 242, 255);
  --color-ng-badge-challenge-bg: rgb(255, 240, 246);
  --color-ng-badge-challenge-text: rgb(224, 70, 138);
  --color-ng-badge-explore-bg: rgb(240, 255, 244);
  --color-ng-badge-explore-text: rgb(46, 164, 79);
  --color-ng-preview-border: rgb(240, 240, 248);
  --color-ng-preview-item-bg: rgb(240, 237, 255);
  --color-ng-text-body: rgb(68, 68, 68);
  --color-ng-chapter-bg: rgb(245, 243, 255);
  --color-ng-ch-num-bg: rgb(124, 92, 246);
  --color-ng-chapter-strong: rgb(45, 31, 110);
  --color-ng-chapter-span: rgb(155, 137, 232);
  --color-ng-dot-inactive: rgb(212, 207, 255);
}

.ng-page,
.ng-page * { box-sizing: border-box; }

.ng-page {
  min-height: 100vh;
  padding: 40px 20px 80px;
  background: var(--color-ng-page-bg);
}

.ng-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.ng-loading {
  text-align: center;
  padding: 60px;
  color: var(--color-ng-muted);
  font-size: 15px;
}

/* ── Top bar ── */
.ng-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}

.ng-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid var(--color-ng-border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ng-text-sub);
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.ng-back-btn:hover { border-color: var(--color-ng-accent); color: var(--color-ng-accent); }

.ng-top-info h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 900;
  color: var(--color-ng-text);
}
.ng-top-info p {
  margin: 0;
  font-size: 14px;
  color: var(--color-ng-muted-2);
}

/* ── Progress ── */
.ng-progress-wrap { margin-bottom: 36px; }

.ng-progress-bar {
  height: 6px;
  background: var(--color-ng-card-border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}
.ng-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-ng-accent), var(--color-brand-icon));
  border-radius: 99px;
  transition: width 0.35s ease;
}

.ng-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-ng-progress-label);
  font-weight: 700;
}
.ng-progress-labels .is-done { color: var(--color-ng-accent); }

/* ── Step ── */
.ng-step { animation: ng-fade-up 0.25s ease; }
@keyframes ng-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ng-step-header { margin-bottom: 24px; }
.ng-step-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-ng-text);
}
.ng-step-header p {
  margin: 0;
  font-size: 14px;
  color: var(--color-ng-muted-2);
}

.ng-prev-value {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-ng-muted);
  background: var(--color-ng-prev-value-bg);
  border-radius: 8px;
  padding: 3px 10px;
}

/* ── Goal grid ── */
.ng-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.ng-goal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 16px 18px;
  background: var(--color-bg-white);
  border: 2px solid var(--color-ng-card-border);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.ng-goal-card:hover {
  border-color: var(--color-ng-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--color-ng-shadow-10);
}
.ng-goal-card.is-selected {
  border-color: var(--color-ng-accent);
  background: var(--color-ng-selected-bg);
  box-shadow: 0 4px 18px var(--color-ng-shadow-14);
}
.ng-goal-card strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-ng-text);
}

.ng-goal-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-ng-icon-grad-1), var(--color-ng-icon-grad-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-ng-accent);
}

.ng-goal-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-ng-accent);
  color: var(--color-text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* ── Interest chips ── */
.ng-interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.ng-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-bg-white);
  border: 2px solid var(--color-ng-card-border);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ng-chip-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ng-interest-chip:hover { border-color: var(--color-ng-hover-border); }
.ng-interest-chip.is-selected {
  border-color: var(--color-ng-accent);
  background: var(--color-ng-selected-bg);
  color: var(--color-ng-accent);
}

/* ── Roadmap grid ── */
.ng-roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.ng-roadmap-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--color-bg-white);
  border: 2px solid var(--color-ng-card-border);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, transform 0.15s, box-shadow 0.18s;
}
.ng-roadmap-card:hover {
  border-color: var(--color-ng-hover-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-ng-shadow-10);
}
.ng-roadmap-card.is-selected {
  border-color: var(--color-ng-accent);
  background: var(--color-ng-roadmap-selected-bg);
  box-shadow: 0 6px 24px var(--color-ng-shadow-16);
}

.ng-roadmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ng-roadmap-badge {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
}
.ng-roadmap-badge.stable  { background: var(--color-ng-badge-stable-bg); color: var(--color-brand-icon); }
.ng-roadmap-badge.challenge { background: var(--color-ng-badge-challenge-bg); color: var(--color-ng-badge-challenge-text); }
.ng-roadmap-badge.explore { background: var(--color-ng-badge-explore-bg); color: var(--color-ng-badge-explore-text); }

.ng-roadmap-duration {
  font-size: 12px;
  color: var(--color-ng-muted);
  font-weight: 700;
}

.ng-roadmap-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--color-ng-text);
  line-height: 1.3;
}

.ng-roadmap-card > p {
  margin: 0;
  font-size: 13px;
  color: var(--color-ng-muted-2);
  line-height: 1.5;
}

/* Step preview list */
.ng-step-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--color-ng-preview-border);
  padding-top: 12px;
}

.ng-step-preview-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ng-step-preview-item span {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-ng-preview-item-bg);
  color: var(--color-ng-accent);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ng-step-preview-item p {
  margin: 0;
  font-size: 12px;
  color: var(--color-ng-text-body);
  font-weight: 700;
  line-height: 1.4;
  padding-top: 2px;
}

.ng-chapter-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.ng-chapter-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-ng-chapter-bg);
  border-radius: 8px;
  padding: 6px 10px;
}

.ng-ch-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-ng-ch-num-bg);
  color: var(--color-text-on-brand);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng-chapter-preview-item div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ng-chapter-preview-item strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ng-chapter-strong);
  line-height: 1.3;
}

.ng-chapter-preview-item span {
  font-size: 11px;
  color: var(--color-ng-chapter-span);
  font-weight: 500;
}

.ng-roadmap-select-btn {
  margin-top: 8px;
  padding: 10px;
  background: linear-gradient(135deg, var(--color-ng-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.ng-roadmap-card.is-selected .ng-roadmap-select-btn { opacity: 1; }
.ng-roadmap-card:hover .ng-roadmap-select-btn { opacity: 0.6; }

/* ── Actions ── */
.ng-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}

.ng-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 26px;
  background: linear-gradient(135deg, var(--color-ng-accent), var(--color-brand-icon));
  color: var(--color-text-on-brand);
  font-size: 15px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.15s;
}
.ng-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ng-btn-primary:not(:disabled):hover { opacity: 0.9; transform: translateY(-1px); }

.ng-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 20px;
  background: var(--color-bg-white);
  color: var(--color-ng-text-body);
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid var(--color-ng-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ng-btn-secondary:hover { border-color: var(--color-ng-accent); color: var(--color-ng-accent); }

/* ── AI Loading ── */
.ng-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 20px;
  text-align: center;
}

.ng-ai-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng-ai-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--color-ng-accent);
  animation: ng-orbit 1s linear infinite;
}
.ng-ai-orbit--2 {
  inset: 10px;
  border-top-color: var(--color-brand-icon);
  animation-duration: 0.7s;
  animation-direction: reverse;
}

@keyframes ng-orbit { to { transform: rotate(360deg); } }

.ng-ai-bolt {
  font-size: 26px;
  color: var(--color-ng-accent);
  animation: ng-pulse 1.4s ease-in-out infinite;
}
@keyframes ng-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ng-ai-loading h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: var(--color-ng-text);
}
.ng-ai-loading p {
  margin: 0;
  font-size: 15px;
  color: var(--color-ng-muted-2);
  min-height: 22px;
}

.ng-ai-dots {
  display: flex;
  gap: 8px;
}
.ng-ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ng-dot-inactive);
  transition: background 0.3s;
}
.ng-ai-dot.is-active { background: var(--color-ng-accent); }

/* ── Responsive ── */
@media (max-width: 720px) {
  .ng-goal-grid { grid-template-columns: repeat(2, 1fr); }
  .ng-roadmap-grid { grid-template-columns: 1fr; }
  .ng-actions { flex-direction: column-reverse; }
  .ng-btn-primary, .ng-btn-secondary { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .ng-goal-grid { grid-template-columns: 1fr; }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-ng-page-bg: rgb(15, 23, 42);
  --color-ng-muted: rgb(148, 163, 184);
  --color-ng-border: rgb(51, 65, 85);
  --color-ng-text-sub: rgb(203, 213, 225);
  --color-ng-accent: rgb(167, 139, 250);
  --color-ng-text: rgb(241, 245, 249);
  --color-ng-muted-2: rgb(148, 163, 184);
  --color-ng-card-border: rgb(51, 65, 85);
  --color-ng-progress-label: rgb(100, 116, 139);
  --color-ng-prev-value-bg: rgba(167, 139, 250, 0.14);
  --color-ng-hover-border: rgba(167, 139, 250, 0.5);
  --color-ng-shadow-10: rgba(167, 139, 250, 0.16);
  --color-ng-selected-bg: rgba(167, 139, 250, 0.14);
  --color-ng-shadow-14: rgba(167, 139, 250, 0.22);
  --color-ng-icon-grad-1: rgba(167, 139, 250, 0.16);
  --color-ng-icon-grad-2: rgba(129, 140, 248, 0.16);
  --color-ng-chip-text: rgb(226, 232, 240);
  --color-ng-shadow-16: rgba(167, 139, 250, 0.26);
  --color-ng-roadmap-selected-bg: rgba(167, 139, 250, 0.1);
  --color-ng-badge-stable-bg: rgba(73, 101, 255, 0.18);
  --color-ng-badge-challenge-bg: rgba(224, 70, 138, 0.18);
  --color-ng-badge-challenge-text: rgb(244, 114, 182);
  --color-ng-badge-explore-bg: rgba(46, 164, 79, 0.18);
  --color-ng-badge-explore-text: rgb(74, 222, 128);
  --color-ng-preview-border: rgb(51, 65, 85);
  --color-ng-preview-item-bg: rgba(167, 139, 250, 0.16);
  --color-ng-text-body: rgb(203, 213, 225);
  --color-ng-chapter-bg: rgba(167, 139, 250, 0.1);
  --color-ng-ch-num-bg: rgb(124, 92, 246);
  --color-ng-chapter-strong: rgb(196, 181, 253);
  --color-ng-chapter-span: rgb(167, 139, 250);
  --color-ng-dot-inactive: rgb(71, 85, 105);
}
:root {
  --color-sgp-gradient-soft: rgb(247, 248, 255);
  --color-sgp-gradient-end: rgb(246, 247, 255);
  --color-sgp-hero-border: rgba(229, 234, 255, 0.95);
  --color-sgp-hero-shadow: rgba(26, 38, 90, 0.06);
  --color-sgp-hero-heading: rgb(15, 23, 42);
  --color-sgp-body-text: rgb(95, 104, 122);
  --color-sgp-card-border: rgb(233, 237, 246);
  --color-sgp-search-shadow: rgba(26, 38, 90, 0.05);
  --color-sgp-placeholder: rgb(152, 162, 179);
  --color-sgp-input-border: rgb(223, 229, 242);
  --color-sgp-focus-border: rgb(207, 216, 255);
  --color-sgp-icon-muted: rgb(123, 136, 177);
  --color-sgp-result-text: rgb(105, 115, 134);
  --color-sgp-status-closed-bg: rgb(242, 243, 245);
  --color-sgp-neutral-bg: rgb(247, 248, 252);
  --color-sgp-meta-text: rgb(104, 113, 132);
  --color-sgp-like-hover-bg: rgb(255, 240, 247);
  --color-sgp-card-shadow: rgba(26, 38, 90, 0.04);
  --color-sgp-card-shadow-hover: rgba(26, 38, 90, 0.08);
  --color-sgp-fab-shadow-base: rgba(0, 0, 0, 0.08);
  --color-sgp-fab-shadow-hover: rgba(0, 0, 0, 0.1);
  --color-sgp-skeleton-a: rgb(238, 241, 247);
}

.small-groups-page {
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-white);
  color: var(--color-text-main);
}

.small-groups-page * {
  box-sizing: border-box;
}

.small-groups-page button,
.small-groups-page input {
  font-family: inherit;
}

.small-groups-hero-wrap {
  padding: 30px 20px 22px;
  background: linear-gradient(180deg, var(--color-sgp-gradient-soft) 0%, var(--color-bg-white) 100%);
}

.small-groups-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 42px;
  border: 1px solid var(--color-sgp-hero-border);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-sgp-gradient-end) 100%);
  box-shadow: 0 18px 46px var(--color-sgp-hero-shadow);
}

.small-groups-hero-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--color-brand-badge-bg);
  color: var(--color-brand-badge);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  gap:6px;
}

.small-groups-hero h1 {
  margin: 0;
  color: var(--color-sgp-hero-heading);
  font-size: 42px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.065em;
  word-break: keep-all;
}

.small-groups-hero h1 strong {
  color: var(--color-brand-icon);
}

.small-groups-hero p {
  margin: 14px 0 0;
  color: var(--color-sgp-body-text);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 650;
}

.small-groups-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

.small-groups-search-card {
  padding: 22px;
  border: 1px solid var(--color-sgp-card-border);
  border-radius: 24px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-sgp-search-shadow);
}

.small-groups-categories {
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.small-groups-categories::-webkit-scrollbar {
  display: none;
}

.small-groups-category {
  position: relative;
  flex: 0 0 auto;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-sgp-placeholder);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.small-groups-category::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text-main);
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: center;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.small-groups-category:hover,
.small-groups-category.is-active {
  color: var(--color-text-main);
}

.small-groups-category.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.small-groups-search-row {
  margin-top: 18px;
  display: flex;
  align-items: center;
}

.small-groups-search-box {
  flex: 1;
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-sgp-input-border);
  border-radius: 15px;
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.small-groups-search-box:focus-within {
  border-color: var(--color-sgp-focus-border);
  box-shadow: 0 0 0 4px var(--color-sgdp-focus-glow);
}

.small-groups-search-box svg {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--color-sgp-icon-muted);
}

.small-groups-search-box input {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 52px;
  appearance: none;
  -webkit-appearance: none;
}

.small-groups-search-box input::placeholder {
  color: var(--color-sgp-placeholder);
  font-size: 16px;
  font-weight: 650;
}

.small-groups-result-row {
  margin-top: 14px;
}

.small-groups-result-row p {
  margin: 0;
  color: var(--color-sgp-result-text);
  font-size: 14px;
  font-weight: 800;
}

.small-groups-result-row strong {
  color: var(--color-brand-strong);
}

.small-groups-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.small-group-card {
  position: relative;
  min-height: 168px;
  padding: 24px;
  border: 1px solid var(--color-sgp-card-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  box-shadow: 0 12px 32px var(--color-sgp-card-shadow);
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 20px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.small-group-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-sgp-focus-border);
  box-shadow: 0 20px 44px var(--color-sgp-card-shadow-hover);
}

.small-group-card__main {
  min-width: 0;
}

.small-group-card__badges {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}

.small-group-status,
.small-group-category-label {
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.small-group-status.is-open {
  color: var(--color-brand-deep);
  background: var(--color-sgdp-category-bg);
}

.small-group-status.is-closed {
  color: var(--color-text-muted);
  background: var(--color-sgp-status-closed-bg);
}

.small-group-category-label {
  color: var(--color-sgnp-sub-text);
  background: var(--color-sgp-neutral-bg);
}

.small-group-card h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 21px;
  line-height: 1.42;
  font-weight: 950;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.small-group-card p {
  margin: 10px 0 0;
  color: var(--color-sgp-body-text);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 650;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.small-group-card__meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.small-group-card__meta span {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--color-sgp-neutral-bg);
  color: var(--color-sgp-meta-text);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.small-group-card__meta svg {
  color: var(--color-brand-icon);
}

.small-group-card__side {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.small-group-like-button {
  min-width: 78px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--color-sgdp-interest-border);
  border-radius: 999px;
  background: var(--color-sgdp-interest-bg);
  color: var(--color-sgdp-interest-text);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.small-group-like-button:hover {
  background: var(--color-sgp-like-hover-bg);
  border-color: var(--color-sgdp-interest-active-border);
}

.small-group-like-button.is-active {
  background: var(--color-sgdp-interest-active-bg);
  border-color: var(--color-sgdp-interest-active-border);
  color: var(--color-sgdp-interest-active-text);
}

.small-group-like-button.is-active svg {
  fill: currentColor;
}

.small-group-like-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.small-groups-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.small-groups-pagination-button,
.small-groups-pagination-number {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-sgp-input-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-sgnp-back-text);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.small-groups-pagination-button:hover:not(:disabled),
.small-groups-pagination-number:hover {
  transform: translateY(-2px);
  border-color: var(--color-sgp-focus-border);
  background: var(--color-sgdp-join-bg);
  color: var(--color-brand-strong);
}

.small-groups-pagination-number.is-active {
  border-color: var(--color-brand-icon);
  background: var(--color-brand-icon);
  color: var(--color-text-inverse);
}

.small-groups-pagination-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.small-groups-floating-write {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  height: 56px;
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-icon));
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow:
    0 10px 30px var(--color-brand-glow-fab),
    0 2px 8px var(--color-sgp-fab-shadow-base);
}

.small-groups-floating-write:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px var(--color-brand-glow-fab-hover),
    0 6px 18px var(--color-sgp-fab-shadow-hover);
}

.small-groups-floating-write svg {
  font-size: 20px;
}

.small-group-skeleton {
  min-height: 168px;
  padding: 24px;
  border: 1px solid var(--color-sgp-card-border);
  border-radius: 22px;
  background: var(--color-bg-white);
}

.small-group-skeleton__title,
.small-group-skeleton__line,
.small-group-skeleton__meta span {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-sgp-skeleton-a) 0%, var(--color-sgnp-page-bg) 50%, var(--color-sgp-skeleton-a) 100%);
  background-size: 220% 100%;
  animation: smallGroupSkeleton 1.2s ease-in-out infinite;
}

.small-group-skeleton__title {
  width: 42%;
  height: 22px;
}

.small-group-skeleton__line {
  width: 78%;
  height: 13px;
  margin-top: 18px;
}

.small-group-skeleton__line.is-short {
  width: 54%;
  margin-top: 10px;
}

.small-group-skeleton__meta {
  margin-top: 22px;
  display: flex;
  gap: 8px;
}

.small-group-skeleton__meta span {
  width: 92px;
  height: 30px;
}

@keyframes smallGroupSkeleton {
  0% {
    background-position: 220% 0;
  }

  100% {
    background-position: -220% 0;
  }
}

.small-groups-empty {
  min-height: 220px;
  padding: 48px 20px;
  border: 1px solid var(--color-sgp-card-border);
  border-radius: 22px;
  background: var(--color-bg-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.small-groups-empty strong {
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 950;
}

.small-groups-empty p {
  margin: 10px 0 0;
  color: var(--color-sgp-result-text);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .small-groups-floating-write {
    bottom: calc(
      var(--mobile-nav-height, 76px) + 18px + env(safe-area-inset-bottom)
    );
  }
}

@media (max-width: 768px) {
  .small-groups-page {
    background: var(--color-sgp-neutral-bg);
  }

  .small-groups-hero-wrap {
    padding: 14px 14px 16px;
    background: var(--color-sgp-neutral-bg);
  }

  .small-groups-hero {
    padding: 24px 20px 22px;
    border-radius: 22px;
    background: var(--color-bg-white);
    box-shadow: none;
  }

  .small-groups-hero-badge {
    margin-bottom: 14px;
    padding: 7px 10px;
    font-size: 11px;
  }

  .small-groups-hero h1 {
    font-size: 31px;
    line-height: 1.18;
    letter-spacing: -0.07em;
  }

  .small-groups-hero p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
  }

  .small-groups-content {
    padding: 0 14px 96px;
  }

  .small-groups-search-card {
    padding: 16px;
    border-radius: 20px;
    box-shadow: none;
  }

  .small-groups-categories {
    gap: 24px;
  }

  .small-groups-category {
    height: 38px;
    font-size: 15px;
  }

  .small-groups-search-box,
  .small-groups-search-box input {
    height: 52px;
    min-height: 52px;
    font-size: 16px;
    line-height: 52px;
  }

  .small-group-card {
    min-height: auto;
    padding: 20px 92px 20px 18px;
    border-radius: 20px;
    box-shadow: none;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .small-group-card h2 {
    font-size: 18px;
    line-height: 1.42;
  }

  .small-group-card p {
    font-size: 14px;
    line-height: 1.6;
  }

  .small-group-card__side {
    position: absolute;
    top: 18px;
    right: 18px;
  }

  .small-group-like-button {
    min-width: 64px;
    height: 36px;
    padding: 0 11px;
    font-size: 12px;
  }

  .small-groups-pagination-button,
  .small-groups-pagination-number {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .small-groups-floating-write {
    right: 16px;
    bottom: calc(
      var(--mobile-nav-height, 76px) + 18px + env(safe-area-inset-bottom)
    );
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 18px;
    justify-content: center;
  }

  .small-groups-floating-write span {
    display: none;
  }

  .small-groups-floating-write svg {
    font-size: 24px;
  }

  .small-group-skeleton {
    min-height: 150px;
    padding: 20px 18px;
    border-radius: 20px;
    box-shadow: none;
  }

  .small-groups-empty {
    min-height: 190px;
    border-radius: 20px;
  }
}

[data-theme="dark"] {
  --color-sgp-gradient-soft: rgb(15, 23, 42);
  --color-sgp-gradient-end: rgb(30, 41, 59);
  --color-sgp-hero-border: rgba(51, 65, 85, 0.8);
  --color-sgp-hero-shadow: rgba(0, 0, 0, 0.3);
  --color-sgp-hero-heading: rgb(241, 245, 249);
  --color-sgp-body-text: rgb(148, 163, 184);
  --color-sgp-card-border: rgb(51, 65, 85);
  --color-sgp-search-shadow: rgba(0, 0, 0, 0.25);
  --color-sgp-placeholder: rgb(100, 116, 139);
  --color-sgp-input-border: rgb(51, 65, 85);
  --color-sgp-focus-border: rgb(71, 85, 132);
  --color-sgp-icon-muted: rgb(148, 163, 184);
  --color-sgp-result-text: rgb(148, 163, 184);
  --color-sgp-status-closed-bg: rgb(51, 65, 85);
  --color-sgp-neutral-bg: rgb(30, 41, 59);
  --color-sgp-meta-text: rgb(148, 163, 184);
  --color-sgp-like-hover-bg: rgba(219, 67, 136, 0.18);
  --color-sgp-card-shadow: rgba(0, 0, 0, 0.25);
  --color-sgp-card-shadow-hover: rgba(0, 0, 0, 0.35);
  --color-sgp-fab-shadow-base: rgba(0, 0, 0, 0.35);
  --color-sgp-fab-shadow-hover: rgba(0, 0, 0, 0.45);
  --color-sgp-skeleton-a: rgb(51, 65, 85);
}
:root {
  --color-sgnp-page-bg: rgb(247, 248, 251);
  --color-sgnp-border: rgb(223, 229, 240);
  --color-sgnp-back-text: rgb(75, 85, 99);
  --color-sgnp-sub-text: rgb(102, 112, 133);
  --color-sgnp-card-border: rgb(232, 236, 243);
}

.small-group-write-page {
  min-height: 100vh;
  background: var(--color-sgnp-page-bg);
  padding: 36px 20px 96px;
  color: var(--color-text-main);
}

.small-group-write-page * {
  box-sizing: border-box;
}

.small-group-write-shell {
  width: min(900px, 100%);
  margin: 0 auto;
}

.small-group-write-back {
  border: 1px solid var(--color-sgnp-border);
  background: var(--color-bg-white);
  color: var(--color-sgnp-back-text);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
}

.small-group-write-header {
  margin: 28px 0 22px;
}

.small-group-write-header p {
  margin: 0 0 8px;
  color: var(--color-brand-icon);
  font-size: 12px;
  font-weight: 950;
}

.small-group-write-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 950;
}

.small-group-write-header span {
  display: block;
  margin-top: 10px;
  color: var(--color-sgnp-sub-text);
  font-size: 15px;
  font-weight: 700;
}

.small-group-write-form {
  display: grid;
  gap: 16px;
}

.small-group-write-card {
  border: 1px solid var(--color-sgnp-card-border);
  border-radius: 18px;
  background: var(--color-bg-white);
  padding: 22px;
  display: grid;
  gap: 16px;
}

.small-group-write-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.small-group-write-grid--compact {
  margin-top: -2px;
}

.small-group-write-field {
  display: grid;
  gap: 8px;
}

.small-group-write-field label,
.small-group-write-editor-head h2 {
  margin: 0;
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 900;
}

.small-group-write-field input,
.small-group-write-field select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-sgnp-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  padding: 0 14px;
  color: var(--color-text-main);
  font: inherit;
  font-weight: 700;
}

.small-group-write-field input:focus,
.small-group-write-field select:focus {
  outline: none;
  border-color: var(--color-brand-icon);
  box-shadow: 0 0 0 4px var(--color-brand-focus-ring);
}

.small-group-write-editor-head p {
  margin: 6px 0 0;
  color: var(--color-sgnp-sub-text);
  font-size: 14px;
  font-weight: 700;
}

.small-group-write-error {
  margin: 0;
  color: var(--color-sgdp-alert-error-text);
  font-size: 14px;
  font-weight: 800;
}

.small-group-write-submit {
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--color-brand-icon);
  color: var(--color-text-inverse);
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

.small-group-write-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.small-group-write-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.small-group-write-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--color-brand-icon);
}

@media (max-width: 640px) {
  .small-group-write-page {
    padding: 24px 14px 84px;
  }

  .small-group-write-header h1 {
    font-size: 28px;
  }

  .small-group-write-grid {
    grid-template-columns: 1fr;
  }

  .small-group-write-card {
    padding: 18px;
  }
}

[data-theme="dark"] {
  --color-sgnp-page-bg: rgb(15, 23, 42);
  --color-sgnp-border: rgb(51, 65, 85);
  --color-sgnp-back-text: rgb(148, 163, 184);
  --color-sgnp-sub-text: rgb(148, 163, 184);
  --color-sgnp-card-border: rgb(51, 65, 85);
}
:root {
  --color-sgdp-page-bg: rgb(246, 247, 251);
  --color-sgdp-ambient-glow: rgba(73, 101, 255, 0.06);
  --color-sgdp-back-link: rgb(95, 100, 114);
  --color-sgdp-card-bg: rgba(255, 255, 255, 0.94);
  --color-sgdp-card-border: rgb(235, 237, 244);
  --color-sgdp-shadow-sm: rgba(15, 23, 42, 0.04);
  --color-sgdp-shadow-xs: rgba(15, 23, 42, 0.03);
  --color-sgdp-hero-border: rgb(228, 232, 255);
  --color-sgdp-hero-glow: rgba(73, 101, 255, 0.07);
  --color-sgdp-category-bg: rgb(237, 242, 255);
  --color-sgdp-open-bg: rgb(235, 255, 243);
  --color-sgdp-open-text: rgb(23, 138, 77);
  --color-sgdp-closed-bg: rgb(241, 243, 247);
  --color-sgdp-closed-text: rgb(111, 119, 133);
  --color-sgdp-heading: rgb(17, 17, 17);
  --color-sgdp-interest-border: rgb(244, 217, 231);
  --color-sgdp-interest-bg: rgb(255, 247, 251);
  --color-sgdp-interest-text: rgb(219, 67, 136);
  --color-sgdp-interest-active-bg: rgb(255, 234, 244);
  --color-sgdp-interest-active-border: rgb(239, 191, 215);
  --color-sgdp-interest-active-text: rgb(217, 50, 124);
  --color-sgdp-stat-bg: rgb(250, 251, 255);
  --color-sgdp-stat-border: rgb(236, 239, 245);
  --color-sgdp-stat-label: rgb(138, 144, 160);
  --color-sgdp-stat-value: rgb(20, 22, 26);
  --color-sgdp-join-bg: rgb(248, 250, 255);
  --color-sgdp-join-border: rgb(230, 235, 255);
  --color-sgdp-muted-text: rgb(122, 127, 140);
  --color-sgdp-textarea-border: rgb(230, 233, 241);
  --color-sgdp-focus-glow: rgba(73, 101, 255, 0.08);
  --color-sgdp-primary-grad-start: rgb(79, 70, 229);
  --color-sgdp-primary-grad-end: rgb(37, 99, 235);
  --color-sgdp-primary-shadow: rgba(79, 70, 229, 0.2);
  --color-sgdp-secondary-bg: rgb(242, 243, 247);
  --color-sgdp-secondary-text: rgb(51, 51, 51);
  --color-sgdp-danger-btn-bg: rgb(255, 245, 246);
  --color-sgdp-danger-btn-text: rgb(211, 60, 60);
  --color-sgdp-danger-btn-border: rgb(241, 201, 207);
  --color-sgdp-alert-success-bg: rgb(236, 253, 245);
  --color-sgdp-alert-success-text: rgb(4, 120, 87);
  --color-sgdp-alert-error-bg: rgb(254, 242, 242);
  --color-sgdp-alert-error-text: rgb(185, 28, 28);
  --color-sgdp-section-head: rgb(16, 17, 20);
  --color-sgdp-content-text: rgb(49, 52, 60);
  --color-sgdp-item-border: rgb(237, 240, 246);
  --color-sgdp-item-bg: rgb(252, 252, 255);
  --color-sgdp-disabled-text: rgb(138, 143, 156);
  --color-sgdp-role-badge-bg: rgb(242, 244, 248);
  --color-sgdp-action-border: rgb(221, 226, 236);
  --color-sgdp-action-text: rgb(31, 41, 55);
  --color-sgdp-action-hover-bg: rgb(248, 249, 252);
  --color-sgdp-action-hover-border: rgb(207, 214, 226);
  --color-sgdp-action-disabled-bg: rgb(244, 245, 248);
  --color-sgdp-action-danger-border: rgb(255, 208, 204);
  --color-sgdp-action-danger-bg: rgb(255, 246, 245);
  --color-sgdp-action-danger-hover-bg: rgb(255, 241, 240);
  --color-sgdp-action-danger-hover-border: rgb(255, 184, 176);
  --color-sgdp-reply-border: rgb(231, 232, 241);
  --color-sgdp-empty-text: rgb(123, 127, 137);
  --color-sgdp-edit-panel-bg: rgb(251, 252, 255);
}

.small-group-detail-page {
  min-height: 100vh;
  padding: 40px 20px 88px;
  background:
    radial-gradient(circle at top, var(--color-sgdp-ambient-glow), transparent 24%),
    var(--color-sgdp-page-bg);
  color: var(--color-text-main);
}

.small-group-detail-page * {
  box-sizing: border-box;
}

.small-group-detail-shell {
  max-width: 980px;
  margin: 0 auto;
}

.small-group-detail-back {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--color-sgdp-back-link);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.small-group-detail-card,
.small-group-detail-section {
  background: var(--color-sgdp-card-bg);
  border: 1px solid var(--color-sgdp-card-border);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 10px 30px var(--color-sgdp-shadow-sm),
    0 2px 8px var(--color-sgdp-shadow-xs);
}

.small-group-detail-section {
  margin-top: 20px;
}

.small-group-hero-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-color: var(--color-sgdp-hero-border);
  box-shadow:
    0 14px 36px var(--color-sgdp-hero-glow),
    0 2px 8px var(--color-sgdp-shadow-xs);
}

.small-group-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.small-group-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.small-group-detail-category,
.small-group-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
}

.small-group-detail-category {
  background: var(--color-sgdp-category-bg);
  color: var(--color-brand-icon);
}

.small-group-status-badge.is-open {
  background: var(--color-sgdp-open-bg);
  color: var(--color-sgdp-open-text);
}

.small-group-status-badge.is-closed {
  background: var(--color-sgdp-closed-bg);
  color: var(--color-sgdp-closed-text);
}

.small-group-detail-header h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.22;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: var(--color-sgdp-heading);
}

.small-group-detail-header p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-sgdp-back-link);
  font-weight: 650;
}

.small-group-detail-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.small-group-interest-button {
  height: 42px;
  padding: 0 15px;
  border: 1px solid var(--color-sgdp-interest-border);
  border-radius: 999px;
  background: var(--color-sgdp-interest-bg);
  color: var(--color-sgdp-interest-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.small-group-interest-button.is-active {
  background: var(--color-sgdp-interest-active-bg);
  border-color: var(--color-sgdp-interest-active-border);
  color: var(--color-sgdp-interest-active-text);
}

.small-group-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.small-group-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--color-sgdp-stat-bg);
  border: 1px solid var(--color-sgdp-stat-border);
  border-radius: 18px;
}

.small-group-summary-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-sgdp-stat-label);
}

.small-group-summary-value {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 850;
  color: var(--color-sgdp-stat-value);
  word-break: keep-all;
}

.small-group-join-panel {
  padding: 20px;
  border-radius: 20px;
  background: var(--color-sgdp-join-bg);
  border: 1px solid var(--color-sgdp-join-border);
  display: flex;
  align-items: center;
  gap: 14px;
}

.small-group-join-panel > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.small-group-join-panel strong {
  color: var(--color-sgdp-heading);
  font-size: 16px;
  font-weight: 850;
}

.small-group-join-panel span {
  color: var(--color-sgdp-muted-text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}

.small-group-join-panel textarea,
.small-group-comment-form textarea,
.small-group-edit-panel input,
.small-group-edit-panel textarea,
.small-group-reply-form textarea,
.small-group-inline-editor textarea {
  width: 100%;
  border: 1px solid var(--color-sgdp-textarea-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  padding: 15px 16px;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-main);
  resize: vertical;
  outline: none;
}

.small-group-join-panel textarea:focus,
.small-group-comment-form textarea:focus,
.small-group-edit-panel input:focus,
.small-group-edit-panel textarea:focus,
.small-group-reply-form textarea:focus,
.small-group-inline-editor textarea:focus {
  border-color: var(--color-brand-icon);
  box-shadow: 0 0 0 4px var(--color-sgdp-focus-glow);
}

.small-group-primary-button,
.small-group-secondary-button,
.small-group-danger-button {
  height: 46px;
  padding: 0 18px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.small-group-primary-button {
  background: linear-gradient(135deg, var(--color-sgdp-primary-grad-start) 0%, var(--color-sgdp-primary-grad-end) 100%);
  color: var(--color-text-inverse);
  box-shadow: 0 10px 20px var(--color-sgdp-primary-shadow);
}

.small-group-secondary-button {
  background: var(--color-sgdp-secondary-bg);
  color: var(--color-sgdp-secondary-text);
}

.small-group-danger-button {
  background: var(--color-sgdp-danger-btn-bg);
  color: var(--color-sgdp-danger-btn-text);
  border: 1px solid var(--color-sgdp-danger-btn-border);
}

.small-group-primary-button:disabled,
.small-group-secondary-button:disabled,
.small-group-danger-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.small-group-detail-alert {
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 800;
}

.small-group-detail-alert.success {
  background: var(--color-sgdp-alert-success-bg);
  color: var(--color-sgdp-alert-success-text);
}

.small-group-detail-alert.error {
  background: var(--color-sgdp-alert-error-bg);
  color: var(--color-sgdp-alert-error-text);
}

.small-group-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.small-group-section-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 850;
  color: var(--color-sgdp-section-head);
  letter-spacing: -0.02em;
}

.small-group-section-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-sgdp-muted-text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 800;
}

.small-group-detail-content {
  margin: 0;
  color: var(--color-sgdp-content-text);
  font-size: 15px;
  line-height: 1.95;
  font-weight: 500;
  white-space: pre-line;
}

.small-group-detail-content img {
  max-width: 100%;
  border-radius: 16px;
}

.small-group-member-list,
.small-group-application-list,
.small-group-comment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.small-group-member,
.small-group-application,
.small-group-comment {
  border: 1px solid var(--color-sgdp-item-border);
  border-radius: 18px;
  background: var(--color-sgdp-item-bg);
}

.small-group-member {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.small-group-member-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.small-group-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--color-sgdp-category-bg);
  color: var(--color-brand-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex-shrink: 0;
}

.small-group-member-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.small-group-member-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.small-group-member-name-button,
.small-group-member-name {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-sgdp-heading);
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.small-group-member-name-button:hover {
  color: var(--color-brand-icon);
}

.small-group-member-name.disabled {
  color: var(--color-sgdp-disabled-text);
}

.small-group-role-badge {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--color-sgdp-role-badge-bg);
  color: var(--color-sgdp-back-link);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
}

.small-group-role-badge.is-owner {
  background: var(--color-sgdp-category-bg);
  color: var(--color-brand-icon);
}

.small-group-member-desc {
  color: var(--color-sgdp-muted-text);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 650;
}

.small-group-member-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.small-group-member-profile-button,
.small-group-member-action-button {
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--color-sgdp-action-border);
  border-radius: 12px;
  background: var(--color-bg-white);
  color: var(--color-sgdp-action-text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.small-group-member-profile-button:hover {
  background: var(--color-sgdp-action-hover-bg);
  border-color: var(--color-sgdp-action-hover-border);
}

.small-group-member-profile-button.disabled {
  color: var(--color-sgdp-disabled-text);
  background: var(--color-sgdp-action-disabled-bg);
  cursor: not-allowed;
}

.small-group-member-action-button.danger {
  border-color: var(--color-sgdp-action-danger-border);
  background: var(--color-sgdp-action-danger-bg);
  color: var(--color-danger-strong);
}

.small-group-member-action-button.danger:hover:not(:disabled) {
  background: var(--color-sgdp-action-danger-hover-bg);
  border-color: var(--color-sgdp-action-danger-hover-border);
}

.small-group-member-profile-button:disabled,
.small-group-member-action-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.small-group-application {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.small-group-application a,
.small-group-comment-head a {
  color: var(--color-sgdp-heading);
  font-size: 15px;
  font-weight: 850;
  text-decoration: none;
}

.small-group-application span,
.small-group-comment-head span {
  color: var(--color-sgdp-disabled-text);
  font-size: 12px;
  font-weight: 750;
}

.small-group-application p,
.small-group-comment p {
  margin: 8px 0 0;
  color: var(--color-sgdp-secondary-text);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
  white-space: pre-line;
}

.small-group-application-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.small-group-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.small-group-comment-form .small-group-primary-button {
  align-self: flex-end;
}

.small-group-comment {
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.small-group-comment > div {
  flex: 1;
  min-width: 0;
}

.small-group-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.small-group-comment-actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.small-group-comment-actions button,
.small-group-reply-form button,
.small-group-inline-editor button {
  border: none;
  background: transparent;
  color: var(--color-sgdp-back-link);
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.small-group-comment-actions button:hover,
.small-group-reply-form button:hover,
.small-group-inline-editor button:hover {
  color: var(--color-sgdp-heading);
}

.small-group-comment-actions button:first-child,
.small-group-inline-editor button:first-of-type,
.small-group-reply-form button:first-of-type {
  color: var(--color-brand-icon);
}

.small-group-comment-actions button.danger {
  color: var(--color-sgdp-danger-btn-text);
}

.small-group-reply-form,
.small-group-inline-editor {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.small-group-inline-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.small-group-reply-list {
  margin-top: 14px;
  margin-left: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--color-sgdp-reply-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.small-group-reply {
  background: var(--color-bg-white);
}

.small-group-empty {
  margin: 0;
  color: var(--color-sgdp-empty-text);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 650;
}

.small-group-edit-panel {
  border: 1px solid var(--color-sgdp-item-border);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-sgdp-edit-panel-bg);
}

.small-group-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.small-group-edit-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 800;
}

.small-group-edit-check input {
  accent-color: var(--color-brand-icon);
}

.small-group-edit-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .small-group-detail-page {
    padding: 24px 16px 88px;
  }

  .small-group-detail-card,
  .small-group-detail-section {
    padding: 22px;
    border-radius: 20px;
  }

  .small-group-detail-header {
    flex-direction: column;
  }

  .small-group-detail-header-actions {
    justify-content: flex-start;
  }

  .small-group-detail-header h1 {
    font-size: 28px;
  }

  .small-group-summary-stats {
    grid-template-columns: 1fr;
  }

  .small-group-join-panel,
  .small-group-application,
  .small-group-member {
    flex-direction: column;
    align-items: stretch;
  }

  .small-group-member-main {
    align-items: flex-start;
  }

  .small-group-member-actions {
    width: 100%;
    justify-content: stretch;
  }

  .small-group-member-profile-button,
  .small-group-member-action-button {
    flex: 1;
  }

  .small-group-primary-button,
  .small-group-secondary-button,
  .small-group-danger-button {
    width: 100%;
  }

  .small-group-comment {
    padding: 16px;
  }

  .small-group-comment-form .small-group-primary-button {
    align-self: stretch;
  }

  .small-group-edit-grid {
    grid-template-columns: 1fr;
  }

  .small-group-edit-actions {
    flex-direction: column;
  }
}

[data-theme="dark"] {
  --color-sgdp-page-bg: rgb(15, 23, 42);
  --color-sgdp-ambient-glow: rgba(73, 101, 255, 0.12);
  --color-sgdp-back-link: rgb(148, 163, 184);
  --color-sgdp-card-bg: rgba(30, 41, 59, 0.94);
  --color-sgdp-card-border: rgb(51, 65, 85);
  --color-sgdp-shadow-sm: rgba(0, 0, 0, 0.25);
  --color-sgdp-shadow-xs: rgba(0, 0, 0, 0.2);
  --color-sgdp-hero-border: rgb(51, 65, 108);
  --color-sgdp-hero-glow: rgba(73, 101, 255, 0.15);
  --color-sgdp-category-bg: rgba(73, 101, 255, 0.18);
  --color-sgdp-open-bg: rgba(23, 138, 77, 0.18);
  --color-sgdp-open-text: rgb(52, 211, 153);
  --color-sgdp-closed-bg: rgb(51, 65, 85);
  --color-sgdp-closed-text: rgb(148, 163, 184);
  --color-sgdp-heading: rgb(241, 245, 249);
  --color-sgdp-interest-border: rgba(219, 67, 136, 0.35);
  --color-sgdp-interest-bg: rgba(219, 67, 136, 0.12);
  --color-sgdp-interest-text: rgb(244, 114, 182);
  --color-sgdp-interest-active-bg: rgba(219, 67, 136, 0.22);
  --color-sgdp-interest-active-border: rgba(219, 67, 136, 0.45);
  --color-sgdp-interest-active-text: rgb(249, 168, 212);
  --color-sgdp-stat-bg: rgb(30, 41, 59);
  --color-sgdp-stat-border: rgb(51, 65, 85);
  --color-sgdp-stat-label: rgb(148, 163, 184);
  --color-sgdp-stat-value: rgb(226, 232, 240);
  --color-sgdp-join-bg: rgb(30, 41, 59);
  --color-sgdp-join-border: rgb(51, 65, 85);
  --color-sgdp-muted-text: rgb(148, 163, 184);
  --color-sgdp-textarea-border: rgb(51, 65, 85);
  --color-sgdp-focus-glow: rgba(73, 101, 255, 0.18);
  --color-sgdp-primary-grad-start: rgb(99, 102, 241);
  --color-sgdp-primary-grad-end: rgb(59, 130, 246);
  --color-sgdp-primary-shadow: rgba(99, 102, 241, 0.35);
  --color-sgdp-secondary-bg: rgb(51, 65, 85);
  --color-sgdp-secondary-text: rgb(226, 232, 240);
  --color-sgdp-danger-btn-bg: rgba(220, 38, 38, 0.12);
  --color-sgdp-danger-btn-text: rgb(248, 113, 113);
  --color-sgdp-danger-btn-border: rgba(220, 38, 38, 0.35);
  --color-sgdp-alert-success-bg: rgba(16, 185, 129, 0.15);
  --color-sgdp-alert-success-text: rgb(52, 211, 153);
  --color-sgdp-alert-error-bg: rgba(220, 38, 38, 0.15);
  --color-sgdp-alert-error-text: rgb(248, 113, 113);
  --color-sgdp-section-head: rgb(241, 245, 249);
  --color-sgdp-content-text: rgb(203, 213, 225);
  --color-sgdp-item-border: rgb(51, 65, 85);
  --color-sgdp-item-bg: rgb(30, 41, 59);
  --color-sgdp-disabled-text: rgb(100, 116, 139);
  --color-sgdp-role-badge-bg: rgb(51, 65, 85);
  --color-sgdp-action-border: rgb(71, 85, 105);
  --color-sgdp-action-text: rgb(226, 232, 240);
  --color-sgdp-action-hover-bg: rgb(51, 65, 85);
  --color-sgdp-action-hover-border: rgb(100, 116, 139);
  --color-sgdp-action-disabled-bg: rgb(51, 65, 85);
  --color-sgdp-action-danger-border: rgba(220, 38, 38, 0.4);
  --color-sgdp-action-danger-bg: rgba(220, 38, 38, 0.12);
  --color-sgdp-action-danger-hover-bg: rgba(220, 38, 38, 0.2);
  --color-sgdp-action-danger-hover-border: rgba(220, 38, 38, 0.5);
  --color-sgdp-reply-border: rgb(51, 65, 85);
  --color-sgdp-empty-text: rgb(148, 163, 184);
  --color-sgdp-edit-panel-bg: rgb(30, 41, 59);
}
:root {
  --color-uvp-page-bg: rgb(247, 248, 252);
  --color-uvp-card-border: rgb(233, 237, 246);
  --color-uvp-card-shadow: rgba(26, 38, 90, 0.06);
  --color-uvp-muted: rgb(102, 112, 133);
  --color-uvp-border-2: rgb(228, 233, 245);
  --color-uvp-active-border: rgb(207, 216, 255);
  --color-uvp-active-bg: rgb(248, 251, 255);
  --color-uvp-disabled-bg: rgb(250, 251, 255);
  --color-uvp-icon-bg: rgb(238, 244, 255);
  --color-uvp-disabled-badge-bg: rgb(241, 244, 249);
  --color-uvp-disabled-badge-text: rgb(123, 132, 150);
  --color-uvp-label: rgb(52, 64, 84);
  --color-uvp-input-border: rgb(208, 213, 221);
  --color-uvp-focus-accent: rgb(99, 102, 241);
  --color-uvp-focus-ring: rgba(99, 102, 241, 0.12);
  --color-uvp-clear-btn-bg: rgb(241, 244, 249);
  --color-uvp-clear-btn-hover-bg: rgb(232, 237, 246);
  --color-uvp-message-bg: rgb(248, 250, 252);
  --color-uvp-message-text: rgb(71, 84, 103);
  --color-uvp-email-domain-border: rgb(237, 241, 248);
  --color-uvp-complete-border: rgb(187, 247, 208);
  --color-uvp-complete-bg: rgb(240, 253, 244);
  --color-uvp-complete-text: rgb(22, 101, 52);
  --color-uvp-complete-desc: rgb(21, 128, 61);
  --color-uvp-edit-btn-border: rgb(134, 239, 172);
  --color-uvp-edit-btn-text: rgb(4, 120, 87);
  --color-uvp-edit-btn-hover-bg: rgb(247, 254, 231);
}

.university-verification-page {
  min-height: 100vh;
  padding: 56px 20px 120px;
  background: var(--color-uvp-page-bg);
}

.university-verification-card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid var(--color-uvp-card-border);
  border-radius: 28px;
  background: var(--color-bg-white);
  box-shadow: 0 14px 36px var(--color-uvp-card-shadow);
}

.university-verification-header span {
  color: var(--color-brand-strong);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.university-verification-header h1 {
  margin: 10px 0 0;
  color: var(--color-text-main);
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.university-verification-header p {
  margin: 12px 0 0;
  max-width: 560px;
  color: var(--color-uvp-muted);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
}

.verification-type-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.verification-type-card {
  width: 100%;
  padding: 18px;
  border: 1px solid var(--color-uvp-border-2);
  border-radius: 20px;
  background: var(--color-bg-white);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.verification-type-card.is-active {
  border-color: var(--color-uvp-active-border);
  background: var(--color-uvp-active-bg);
}

.verification-type-card.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
  background: var(--color-uvp-disabled-bg);
}

.verification-type-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--color-uvp-icon-bg);
  color: var(--color-brand-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.verification-type-icon svg {
  width: 21px;
  height: 21px;
}

.verification-type-card strong {
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 950;
}

.verification-type-card p {
  margin: 5px 0 0;
  color: var(--color-uvp-muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

.verification-type-card > span {
  flex-shrink: 0;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--color-uvp-icon-bg);
  color: var(--color-brand-strong);
  font-size: 12px;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
}

.verification-type-card.is-disabled > span {
  background: var(--color-uvp-disabled-badge-bg);
  color: var(--color-uvp-disabled-badge-text);
}

.university-verification-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verification-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.verification-field > span {
  color: var(--color-uvp-label);
  font-size: 14px;
  font-weight: 850;
}

.verification-field input,
.verification-input-wrapper input {
  width: 100%;
  min-height: 54px;
  padding: 0 46px 0 16px;
  border: 1px solid var(--color-uvp-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  color: var(--color-text-main);
  font-size: 16px;
  outline: none;
}

.verification-field input:focus,
.verification-input-wrapper input:focus {
  border-color: var(--color-uvp-focus-accent);
  box-shadow: 0 0 0 5px var(--color-uvp-focus-ring);
}

.verification-input-wrapper {
  position: relative;
}

.verification-clear-button {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: var(--color-uvp-clear-btn-bg);
  color: var(--color-uvp-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.verification-clear-button:hover {
  background: var(--color-uvp-clear-btn-hover-bg);
  color: var(--color-text-main);
}

.verification-clear-button svg {
  width: 18px;
  height: 18px;
}

.university-result-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--color-uvp-border-2);
  border-radius: 18px;
  background: var(--color-uvp-active-bg);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.university-result-list button {
  width: 100%;
  border: 1px solid var(--color-uvp-border-2);
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--color-bg-white);
  cursor: pointer;
  text-align: left;
}

.university-result-list button:hover {
  border-color: var(--color-uvp-active-border);
  background: var(--color-uvp-active-bg);
}

.university-result-list button.is-selected {
  border-color: var(--color-brand-strong);
  background: var(--color-uvp-icon-bg);
}

.university-result-list strong {
  display: block;
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 900;
}

.university-result-list p {
  margin: 0;
  padding: 18px;
  color: var(--color-uvp-muted);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.selected-university-box {
  padding: 14px 16px;
  border: 1px solid var(--color-uvp-active-border);
  border-radius: 16px;
  background: var(--color-uvp-icon-bg);
  color: var(--color-brand-strong);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.selected-university-box svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.selected-university-box strong {
  color: var(--color-text-main);
  font-size: 14px;
  font-weight: 950;
}

.verification-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--color-uvp-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  overflow: hidden;
}

.verification-email-row:focus-within {
  border-color: var(--color-uvp-focus-accent);
  box-shadow: 0 0 0 5px var(--color-uvp-focus-ring);
}

.verification-email-input-wrap {
  position: relative;
}

.verification-email-input-wrap input {
  min-height: 54px;
  padding: 0 46px 0 16px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.verification-email-input-wrap input:focus {
  border-color: transparent;
  box-shadow: none;
}

.verification-email-domain {
  padding: 0 16px;
  color: var(--color-brand-strong);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.verification-message {
  margin: 0;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--color-uvp-message-bg);
  color: var(--color-uvp-message-text);
  font-size: 14px;
  font-weight: 800;
}

.verification-submit-button,
.verification-back-button {
  min-height: 52px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.verification-submit-button {
  border: none;
  background: var(--color-text-main);
  color: var(--color-bg-white);
}

.verification-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.verification-back-button {
  border: 1px solid var(--color-uvp-input-border);
  background: var(--color-bg-white);
  color: var(--color-uvp-label);
}

.verification-guide-box {
  margin-top: 2px;
  padding: 16px;
  border: 1px solid var(--color-uvp-border-2);
  border-radius: 18px;
  background: var(--color-uvp-disabled-bg);
}

.verification-guide-box p {
  margin: 0;
  color: var(--color-uvp-muted);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 700;
}

.verification-guide-box p + p {
  margin-top: 8px;
}

.verification-guide-box a {
  color: var(--color-brand-strong);
  font-weight: 950;
  text-decoration: none;
}

@media (max-width: 768px) {
  .university-verification-page {
    padding: 28px 14px 90px;
  }

  .university-verification-card {
    padding: 22px;
    border-radius: 24px;
    box-shadow: none;
  }

  .university-verification-header h1 {
    font-size: 28px;
  }

  .verification-type-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .verification-type-card > span {
    grid-column: 2;
    width: fit-content;
  }
}

@media (max-width: 480px) {
  .verification-email-row {
    grid-template-columns: 1fr;
  }

  .verification-email-domain {
    min-height: 42px;
    padding: 0 14px;
    background: var(--color-uvp-active-bg);
    display: flex;
    align-items: center;
    border-top: 1px solid var(--color-uvp-email-domain-border);
  }
}

.verification-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.verification-resend-button {
  min-height: 52px;
  border: 1px solid var(--color-uvp-input-border);
  border-radius: 16px;
  background: var(--color-bg-white);
  color: var(--color-uvp-label);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

.verification-resend-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.verification-resend-button:hover:not(:disabled),
.verification-back-button:hover:not(:disabled) {
  background: var(--color-uvp-message-bg);
}

.verification-complete-box {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--color-uvp-complete-border);
  border-radius: 20px;
  background: var(--color-uvp-complete-bg);
  color: var(--color-uvp-complete-text);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.verification-complete-box svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.verification-complete-box strong {
  display: block;
  color: var(--color-uvp-complete-text);
  font-size: 16px;
  font-weight: 950;
}

.verification-complete-box p {
  margin: 7px 0 0;
  color: var(--color-uvp-complete-desc);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.verification-edit-button {
  margin-top: 14px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--color-uvp-edit-btn-border);
  border-radius: 999px;
  background: var(--color-bg-white);
  color: var(--color-uvp-edit-btn-text);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

.verification-edit-button:hover {
  background: var(--color-uvp-edit-btn-hover-bg);
}

@media (max-width: 480px) {
  .verification-secondary-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================= */
/* dark mode */
/* ============================= */

[data-theme="dark"] {
  --color-uvp-page-bg: rgb(15, 23, 42);
  --color-uvp-card-border: rgb(51, 65, 85);
  --color-uvp-card-shadow: rgba(0, 0, 0, 0.3);
  --color-uvp-muted: var(--color-text-muted);
  --color-uvp-border-2: rgb(51, 65, 85);
  --color-uvp-active-border: rgba(129, 140, 248, 0.4);
  --color-uvp-active-bg: rgba(129, 140, 248, 0.1);
  --color-uvp-disabled-bg: var(--color-bg-elevated-dark);
  --color-uvp-icon-bg: rgba(129, 140, 248, 0.16);
  --color-uvp-disabled-badge-bg: var(--color-bg-elevated-dark);
  --color-uvp-disabled-badge-text: var(--color-text-muted);
  --color-uvp-label: var(--color-text-sub);
  --color-uvp-input-border: var(--color-border);
  --color-uvp-focus-accent: rgb(129, 140, 248);
  --color-uvp-focus-ring: rgba(129, 140, 248, 0.22);
  --color-uvp-clear-btn-bg: var(--color-bg-elevated-dark);
  --color-uvp-clear-btn-hover-bg: var(--color-border);
  --color-uvp-message-bg: var(--color-bg-soft);
  --color-uvp-message-text: var(--color-text-muted);
  --color-uvp-email-domain-border: var(--color-border);
  --color-uvp-complete-border: rgba(74, 222, 128, 0.35);
  --color-uvp-complete-bg: rgba(22, 163, 74, 0.14);
  --color-uvp-complete-text: rgb(134, 239, 172);
  --color-uvp-complete-desc: rgb(74, 222, 128);
  --color-uvp-edit-btn-border: rgba(74, 222, 128, 0.4);
  --color-uvp-edit-btn-text: rgb(74, 222, 128);
  --color-uvp-edit-btn-hover-bg: rgba(74, 222, 128, 0.12);
}
.competition-host-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - 64px, 1180px);
  min-height: 86px;
  margin: 0 auto;
  padding: 24px 0;
}

.competition-host-header__brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}

.competition-host-header__brand img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.competition-host-header__brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-host-header__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 8px;
}

.competition-host-header__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px solid rgba(180, 202, 235, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #d8e5ff;
  padding: 0 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    color var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.competition-host-header__button:hover {
  border-color: rgba(121, 168, 255, 0.55);
  background: rgba(121, 168, 255, 0.12);
  color: #ffffff;
  transform: translateY(var(--organizer-hover-lift));
}

.competition-host-header__button--admin {
  border-color: rgba(121, 168, 255, 0.42);
  background: rgba(121, 168, 255, 0.14);
  color: #ffffff;
}

.competition-host-header__button--code {
  border-color: rgba(244, 196, 108, 0.42);
  background: rgba(244, 196, 108, 0.12);
  color: #ffffff;
}

.competition-host-header__button--hackathon {
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-text-on-brand);
}

.competition-host-header__button--hackathon:hover {
  border-color: color-mix(in srgb, var(--color-accent) 62%, transparent);
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

@media (max-width: 640px) {
  .competition-host-header {
    width: min(100% - 28px, 720px);
    min-height: 76px;
    gap: 12px;
    padding: 18px 0;
  }

  .competition-host-header__brand {
    font-size: 15px;
  }

  .competition-host-header__brand img {
    width: 34px;
    height: 34px;
  }

  .competition-host-header__actions {
    gap: 6px;
  }

  .competition-host-header__button {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }
}
.competition-host-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100% - 64px, 1180px);
  margin: 0 auto;
  padding: 28px 0 38px;
  border-top: 1px solid rgba(180, 202, 235, 0.16);
  color: #aebbd0;
}

.competition-host-footer__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.competition-host-footer__copyright {
  margin: 0;
  color: rgba(218, 226, 240, 0.58);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.competition-host-footer__links a {
  color: rgba(218, 226, 240, 0.72);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.competition-host-footer__links a:hover {
  color: #ffffff;
}

@media (max-width: 720px) {
  .competition-host-footer {
    width: min(100% - 32px, 560px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 32px;
    text-align: left;
  }

  .competition-host-footer__copyright {
    width: 100%;
  }

  .competition-host-footer__links {
    justify-content: flex-start;
    gap: 12px 14px;
  }
}
.organizer-landing {
  --organizer-bg: #101827;
  --organizer-surface: #161f31;
  --organizer-surface-soft: #1b263b;
  --organizer-line: rgba(180, 202, 235, 0.11);
  --organizer-line-strong: rgba(180, 202, 235, 0.19);
  --organizer-text: #f5f8ff;
  --organizer-muted: #a9b6ca;
  --organizer-dim: #71809a;
  --organizer-accent: #79a8ff;
  --organizer-accent-strong: #4f7fe8;
  --organizer-accent-soft: rgba(121, 168, 255, 0.12);
  --organizer-warning: #f4c46c;
  --organizer-success: #79dca8;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 69% 4%, rgba(104, 150, 255, 0.17), transparent 25%),
    radial-gradient(circle at 11% 42%, rgba(84, 125, 218, 0.12), transparent 29%),
    var(--organizer-bg);
  color: var(--organizer-text);
}

.organizer-landing *,
.organizer-landing *::before,
.organizer-landing *::after {
  box-sizing: border-box;
}

.organizer-landing__background-glow {
  position: absolute;
  top: 70px;
  left: 50%;
  z-index: -2;
  width: 850px;
  height: 650px;
  border-radius: 999px;
  background: rgba(102, 148, 255, 0.12);
  filter: blur(85px);
  transform: translateX(-35%);
  pointer-events: none;
}

.organizer-landing__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(209, 224, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 224, 255, 0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    rgba(0, 0, 0, 0.32) 26%,
    transparent 60%
  );
  pointer-events: none;
}

.organizer-landing__reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--organizer-motion-enter) var(--organizer-ease-out),
    transform var(--organizer-motion-enter) var(--organizer-ease-out);
  will-change: opacity, transform;
}

.organizer-landing__reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.organizer-landing__header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 64px, 1260px);
  margin: 0 auto;
  padding: 24px 0;
}

.organizer-landing__shared-header {
  width: min(100% - 64px, 1180px);
}

.organizer-landing > .organizer-landing__header:not(.competition-host-header) {
  display: none;
}

.organizer-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--organizer-text);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.organizer-landing__brand-logo {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.organizer-landing__brand-text {
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.organizer-landing__brand-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 21px;
  height: 21px;
  padding: 3px;
  border: 1px solid rgba(121, 168, 255, 0.5);
  border-radius: 6px;
  background: rgba(121, 168, 255, 0.13);
}

.organizer-landing__brand-mark span {
  width: 3px;
  border-radius: 10px;
  background: var(--organizer-accent);
}

.organizer-landing__brand-mark span:nth-child(1) {
  height: 6px;
}

.organizer-landing__brand-mark span:nth-child(2) {
  height: 10px;
}

.organizer-landing__brand-mark span:nth-child(3) {
  height: 14px;
}

.organizer-landing__nav {
  display: none;
  align-items: center;
  gap: 30px;
}

.organizer-landing__nav a,
.organizer-landing__auth-button,
.organizer-landing__footer-links a {
  color: var(--organizer-muted);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-landing__nav a:hover,
.organizer-landing__auth-button:hover,
.organizer-landing__footer-links a:hover {
  color: var(--organizer-text);
}

.organizer-landing__auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.organizer-landing__auth-button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 9px 14px;
  font-weight: 650;
  cursor: pointer;
}

.organizer-landing__auth-button--admin {
  border-color: rgba(121, 168, 255, 0.38);
  background: rgba(121, 168, 255, 0.12);
  color: #ffffff;
}

.organizer-landing__auth-button--code {
  border-color: rgba(244, 196, 108, 0.42);
  background: rgba(244, 196, 108, 0.12);
  color: #ffffff;
}

.organizer-landing__hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: 30px;
  width: min(100% - 64px, 1260px);
  min-height: 715px;
  margin: 0 auto;
  padding: 84px 0 92px;
}

.organizer-landing__hero-copy {
  position: relative;
  z-index: 2;
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) both;
}

.organizer-landing__eyebrow,
.organizer-landing__section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bec9da;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.13em;
}

.organizer-landing__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--organizer-accent);
  box-shadow: 0 0 0 6px rgba(121, 168, 255, 0.11);
}

.organizer-landing__hero-title,
.organizer-landing__section-intro h2,
.organizer-landing__insight-copy h2,
.organizer-landing__process-header h2,
.organizer-landing__closing-content h2 {
  margin: 21px 0 0;
  color: var(--organizer-text);
  font-weight: 770;
  letter-spacing: -0.072em;
  line-height: 1.08;
}

.organizer-landing__hero-title {
  font-size: clamp(43px, 4.45vw, 71px);
}

.organizer-landing__title-desktop,
.organizer-landing__title-mobile {
  display: block;
}

.organizer-landing__title-mobile {
  display: none;
}

.organizer-landing__hero-title em,
.organizer-landing__insight-copy em,
.organizer-landing__closing-content em {
  color: var(--organizer-accent);
  font-style: normal;
}

.organizer-landing__hero-description {
  margin: 24px 0 0;
  color: var(--organizer-muted);
  font-size: 16px;
  letter-spacing: -0.025em;
  line-height: 1.75;
}

.organizer-landing__hero-actions {
  display: flex;
  align-items: center;
  margin-top: 34px;
}

.organizer-landing__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
  transition:
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-landing__button--primary {
  background: var(--organizer-accent);
  color: #0d1b32;
  box-shadow: 0 10px 30px rgba(79, 127, 232, 0.28);
}

.organizer-landing__button--primary:hover {
  background: #98bdff;
  box-shadow: 0 14px 36px rgba(79, 127, 232, 0.36);
  transform: translateY(var(--organizer-hover-lift));
}

.organizer-landing__button--hero {
  min-width: 226px;
  min-height: 61px;
  padding: 0 27px;
  font-size: 17px;
  font-weight: 780;
}

.organizer-landing__hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
}

.organizer-landing__hero-meta-item {
  display: grid;
  gap: 5px;
}

.organizer-landing__hero-meta-item strong {
  color: #e0e8f5;
  font-size: 12px;
  font-weight: 700;
}

.organizer-landing__hero-meta-item span {
  color: var(--organizer-dim);
  font-size: 11px;
}

.organizer-landing__hero-meta-divider {
  width: 1px;
  height: 27px;
  background: var(--organizer-line-strong);
}

.organizer-landing__hero-visual {
  position: relative;
  align-self: center;
  min-width: 0;
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) var(--organizer-motion-stagger) both;
}

.organizer-landing__dashboard-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(189, 211, 247, 0.17);
  border-radius: 18px;
  background: #151e2e;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(121, 168, 255, 0.07) inset;
}

.organizer-landing__dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 53px;
  padding: 0 19px;
  border-bottom: 1px solid rgba(224, 236, 255, 0.08);
  background: rgba(255, 255, 255, 0.018);
}

.organizer-landing__dashboard-brand,
.organizer-landing__dashboard-topbar-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

.organizer-landing__dashboard-brand {
  color: #e9f1ff;
  font-size: 11px;
  font-weight: 700;
}

.organizer-landing__dashboard-logo {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 6px;
  background: var(--organizer-accent);
  color: #10203b;
  font-size: 9px;
  font-weight: 850;
}

.organizer-landing__dashboard-status {
  padding: 5px 7px;
  border: 1px solid rgba(121, 220, 168, 0.26);
  border-radius: 999px;
  background: rgba(121, 220, 168, 0.09);
  color: #b7efd0;
  font-size: 9px;
  font-weight: 750;
}

.organizer-landing__dashboard-avatar {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #2e4161;
  color: #e3eeff;
  font-size: 10px;
  font-weight: 780;
}

.organizer-landing__dashboard-layout {
  display: grid;
  grid-template-columns: 163px minmax(0, 1fr);
  min-height: 455px;
}

.organizer-landing__dashboard-sidebar {
  display: flex;
  flex-direction: column;
  padding: 19px 12px 14px;
  border-right: 1px solid rgba(224, 236, 255, 0.07);
  background: rgba(8, 14, 25, 0.42);
}

.organizer-landing__dashboard-event {
  display: grid;
  gap: 5px;
  padding: 0 8px 18px;
  border-bottom: 1px solid rgba(224, 236, 255, 0.06);
}

.organizer-landing__dashboard-event span,
.organizer-landing__dashboard-heading span,
.organizer-landing__dashboard-section-header span,
.organizer-landing__insight-panel-header span {
  color: #8292aa;
  font-size: 8px;
  font-weight: 780;
  letter-spacing: 0.1em;
}

.organizer-landing__dashboard-event strong {
  color: #e0e9f8;
  font-size: 10px;
  font-weight: 700;
}

.organizer-landing__dashboard-menu {
  display: grid;
  gap: 4px;
  margin-top: 18px;
}

.organizer-landing__dashboard-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 7px;
  color: #93a2b7;
  font-size: 10px;
  font-weight: 620;
}

.organizer-landing__dashboard-menu-item--active {
  background: rgba(121, 168, 255, 0.13);
  color: #dbeaff;
}

.organizer-landing__dashboard-sidebar-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 8px 1px;
  color: #73839a;
  font-size: 9px;
}

.organizer-landing__dashboard-content {
  padding: 24px;
}

.organizer-landing__dashboard-heading,
.organizer-landing__dashboard-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.organizer-landing__dashboard-heading h2,
.organizer-landing__dashboard-section-header h3 {
  margin: 5px 0 0;
  color: #f0f5ff;
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -0.045em;
}

.organizer-landing__dashboard-heading button {
  padding: 7px 9px;
  border: 1px solid rgba(224, 236, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #b8c7da;
  font-size: 9px;
}

.organizer-landing__metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 20px;
}

.organizer-landing__metric-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 11px;
  border: 1px solid rgba(224, 236, 255, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
}

.organizer-landing__metric-card > span,
.organizer-landing__metric-card small {
  color: #8898ad;
  font-size: 8px;
}

.organizer-landing__metric-card strong {
  color: #f0f5ff;
  font-size: 22px;
  font-weight: 730;
  letter-spacing: -0.05em;
}

.organizer-landing__metric-positive {
  color: #a9e9c7 !important;
}

.organizer-landing__metric-warning {
  color: #ebc976 !important;
}

.organizer-landing__dashboard-section-header {
  margin-top: 28px;
}

.organizer-landing__dashboard-section-header h3 {
  font-size: 14px;
}

.organizer-landing__dashboard-section-link {
  color: #b8d2ff !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.organizer-landing__team-table {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid rgba(224, 236, 255, 0.08);
  border-radius: 10px;
}

.organizer-landing__team-table-header,
.organizer-landing__team-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) minmax(100px, 0.95fr) minmax(98px, 0.82fr);
  align-items: center;
  gap: 13px;
}

.organizer-landing__team-table-header {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.028);
  color: #8291a6;
  font-size: 8px;
  font-weight: 730;
}

.organizer-landing__team-row {
  min-height: 62px;
  padding: 9px 12px;
  border-top: 1px solid rgba(224, 236, 255, 0.055);
}

.organizer-landing__team-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.organizer-landing__team-icon {
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #314b7b, #1b2c4b);
  color: #d9e9ff;
  font-size: 10px;
  font-weight: 800;
}

.organizer-landing__team-info > div:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.organizer-landing__team-info strong {
  overflow: hidden;
  color: #e9f0fb;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-landing__team-info span,
.organizer-landing__progress-area small,
.organizer-landing__status-area small {
  overflow: hidden;
  color: #8493a7;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-landing__progress-area {
  display: grid;
  gap: 6px;
}

.organizer-landing__progress-bar {
  overflow: hidden;
  height: 5px;
  border-radius: 999px;
  background: rgba(224, 236, 255, 0.1);
}

.organizer-landing__progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--organizer-accent);
}

.organizer-landing__status-area {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.organizer-landing__status {
  width: fit-content;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 720;
}

.organizer-landing__status--good {
  background: rgba(121, 220, 168, 0.11);
  color: #afefd0;
}

.organizer-landing__status--warning {
  background: rgba(244, 196, 108, 0.12);
  color: #f6d78f;
}

.organizer-landing__status-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.organizer-landing__status-signals span {
  padding: 3px 4px;
  border: 1px solid rgba(244, 196, 108, 0.16);
  border-radius: 4px;
  background: rgba(244, 196, 108, 0.08);
  color: #eac676;
  font-size: 7px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.organizer-landing__floating-badge {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid rgba(198, 217, 247, 0.18);
  border-radius: 10px;
  background: rgba(22, 32, 48, 0.9);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
  color: #e7f1ff;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(12px);
}

.organizer-landing__floating-badge--top {
  top: 36px;
  right: -18px;
  color: #b8efd1;
  animation: organizer-landing-float-up 4.2s ease-in-out infinite;
}

.organizer-landing__floating-badge--bottom {
  bottom: 36px;
  left: -22px;
  animation: organizer-landing-float-down 4.7s 0.4s ease-in-out infinite;
}

.organizer-landing__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #79dca8;
  box-shadow: 0 0 0 5px rgba(121, 220, 168, 0.12);
}

.organizer-landing__proof-strip {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--organizer-line);
  border-bottom: 1px solid var(--organizer-line);
  background: rgba(255, 255, 255, 0.018);
}

.organizer-landing__proof-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: min(100% - 64px, 1260px);
  margin: 0 auto;
  padding: 38px 0;
}

.organizer-landing__proof-strip-inner > div {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.organizer-landing__proof-strip-inner > div > svg {
  flex: 0 0 auto;
  color: var(--organizer-accent);
}

.organizer-landing__proof-strip-inner span {
  display: grid;
  gap: 6px;
}

.organizer-landing__proof-strip-inner strong {
  color: #e1eaf8;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.organizer-landing__proof-strip-inner small {
  color: var(--organizer-dim);
  font-size: 13px;
  line-height: 1.45;
}

.organizer-landing__solution-section,
.organizer-landing__insight-section,
.organizer-landing__process-section,
.organizer-landing__closing-section {
  width: min(100% - 64px, 1260px);
  margin: 0 auto;
}

.organizer-landing__solution-section {
  padding: 144px 0;
}

.organizer-landing__section-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 70px;
}

.organizer-landing__section-intro h2,
.organizer-landing__insight-copy h2,
.organizer-landing__process-header h2,
.organizer-landing__closing-content h2 {
  font-size: clamp(34px, 3.6vw, 53px);
}

.organizer-landing__section-intro > p {
  width: min(100%, 440px);
  margin: 0 0 5px;
  color: var(--organizer-muted);
  font-size: 16px;
  letter-spacing: -0.03em;
  line-height: 1.85;
}

.organizer-landing__feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 56px;
}

.organizer-landing__feature-card {
  position: relative;
  min-height: 293px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--organizer-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.026);
  transition:
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-landing__feature-card:hover {
  border-color: rgba(121, 168, 255, 0.48);
  background: rgba(121, 168, 255, 0.07);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);
  transform: translateY(var(--organizer-hover-lift));
}

.organizer-landing__feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(121, 168, 255, 0.23);
  border-radius: 10px;
  background: rgba(121, 168, 255, 0.1);
  color: var(--organizer-accent);
}

.organizer-landing__feature-card > span {
  display: block;
  margin-top: 28px;
  color: #8190a6;
  font-size: 9px;
  font-weight: 790;
  letter-spacing: 0.13em;
}

.organizer-landing__feature-card h3 {
  margin: 11px 0 0;
  color: #eef4ff;
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -0.05em;
  line-height: 1.35;
}

.organizer-landing__feature-card p {
  margin: 12px 0 0;
  color: #95a4b9;
  font-size: 13px;
  line-height: 1.72;
}

.organizer-landing__feature-arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: #7f91ab;
  transition:
    color var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.organizer-landing__feature-card:hover .organizer-landing__feature-arrow {
  color: var(--organizer-accent);
  transform: translateX(4px);
}

.organizer-landing__insight-section {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(440px, 1.02fr);
  align-items: center;
  gap: 78px;
  padding: 138px 0;
  border-top: 1px solid var(--organizer-line);
}

.organizer-landing__insight-copy h2 {
  font-size: clamp(36px, 3.3vw, 50px);
  letter-spacing: -0.068em;
}

.organizer-landing__insight-copy h2 > span {
  display: block;
  white-space: nowrap;
}

.organizer-landing__insight-copy p {
  max-width: 560px;
  margin: 25px 0 0;
  color: var(--organizer-muted);
  font-size: 17px;
  letter-spacing: -0.03em;
  line-height: 1.82;
}

.organizer-landing__outcome-list {
  display: grid;
  gap: 16px;
  margin-top: 38px;
}

.organizer-landing__outcome-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d9e5f6;
  font-size: 15px;
  font-weight: 680;
}

.organizer-landing__outcome-list svg {
  flex: 0 0 auto;
  color: var(--organizer-accent);
}

.organizer-landing__insight-panel {
  padding: 24px;
  border: 1px solid var(--organizer-line-strong);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(121, 168, 255, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}

.organizer-landing__insight-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--organizer-line);
}

.organizer-landing__insight-panel-header > div {
  display: grid;
  gap: 6px;
}

.organizer-landing__insight-panel-header strong {
  color: #edf4ff;
  font-size: 17px;
  font-weight: 730;
  letter-spacing: -0.045em;
}

.organizer-landing__insight-panel-header > svg {
  color: var(--organizer-accent);
}

.organizer-landing__signal-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding: 14px;
  border: 1px solid rgba(224, 236, 255, 0.08);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.028);
}

.organizer-landing__signal-card--warning {
  border-color: rgba(244, 196, 108, 0.25);
  background: rgba(244, 196, 108, 0.055);
}

.organizer-landing__signal-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: rgba(121, 168, 255, 0.12);
  color: var(--organizer-accent);
}

.organizer-landing__signal-card--warning .organizer-landing__signal-icon {
  background: rgba(244, 196, 108, 0.13);
  color: #f4c46c;
}

.organizer-landing__signal-card > div:nth-child(2) {
  min-width: 0;
}

.organizer-landing__signal-card strong {
  color: #e9f1ff;
  font-size: 12px;
  font-weight: 720;
}

.organizer-landing__signal-card p {
  margin: 5px 0 0;
  color: #94a3b8;
  font-size: 10px;
  line-height: 1.55;
}

.organizer-landing__signal-card button {
  padding: 7px 9px;
  border: 1px solid rgba(121, 168, 255, 0.25);
  border-radius: 7px;
  background: rgba(121, 168, 255, 0.1);
  color: #cfe1ff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.organizer-landing__insight-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 14px 1px 0;
  border-top: 1px solid var(--organizer-line);
}

.organizer-landing__insight-summary span {
  color: #8292a8;
  font-size: 10px;
}

.organizer-landing__insight-summary strong {
  color: #cfe0ff;
  font-size: 11px;
  font-weight: 720;
}

.organizer-landing__process-section {
  padding: 138px 0;
  border-top: 1px solid var(--organizer-line);
}

.organizer-landing__process-header {
  text-align: center;
}

.organizer-landing__process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 62px;
}

.organizer-landing__process-step {
  padding: 30px;
  border: 1px solid var(--organizer-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
}

.organizer-landing__process-step > span {
  color: var(--organizer-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.organizer-landing__process-step h3 {
  margin: 30px 0 0;
  color: #edf4ff;
  font-size: 20px;
  font-weight: 730;
  letter-spacing: -0.045em;
}

.organizer-landing__process-step p {
  margin: 13px 0 0;
  color: #9aa9bd;
  font-size: 13px;
  letter-spacing: -0.025em;
  line-height: 1.75;
}

.organizer-landing__closing-section {
  padding: 18px 0 118px;
}

.organizer-landing__closing-content {
  padding: 74px clamp(30px, 7vw, 92px);
  overflow: hidden;
  border: 1px solid rgba(121, 168, 255, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 18%, rgba(121, 168, 255, 0.22), transparent 31%),
    linear-gradient(135deg, #172441, #101a2c 62%);
}

.organizer-landing__closing-content p {
  max-width: 570px;
  margin: 25px 0 0;
  color: #b4c2d7;
  font-size: 15px;
  line-height: 1.8;
}

.organizer-landing__footer {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.4fr) auto;
  align-items: center;
  gap: 30px;
  width: min(100% - 64px, 1260px);
  margin: 0 auto;
  padding: 30px 0 42px;
  border-top: 1px solid var(--organizer-line);
}

.organizer-landing__footer > p {
  margin: 0;
  color: #7f8ea4;
  font-size: 11px;
  line-height: 1.6;
}

.organizer-landing__footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}

@keyframes organizer-landing-float-up {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes organizer-landing-float-down {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

@media (max-width: 1060px) {
  .organizer-landing__header,
  .organizer-landing__hero,
  .organizer-landing__proof-strip-inner,
  .organizer-landing__solution-section,
  .organizer-landing__insight-section,
  .organizer-landing__process-section,
  .organizer-landing__closing-section,
  .organizer-landing__footer {
    width: min(100% - 42px, 760px);
  }

  .organizer-landing__nav {
    display: none;
  }

  .organizer-landing__hero {
    grid-template-columns: 1fr;
    gap: 54px;
    min-height: auto;
    padding: 74px 0 76px;
  }

  .organizer-landing__hero-copy {
    max-width: 650px;
  }

  .organizer-landing__hero-visual {
    width: min(100%, 720px);
    margin: 0 auto;
  }

  .organizer-landing__proof-strip-inner {
    grid-template-columns: repeat(2, 1fr);
    padding: 30px 0;
  }

  .organizer-landing__section-intro,
  .organizer-landing__insight-section {
    grid-template-columns: 1fr;
  }

  .organizer-landing__section-intro {
    align-items: flex-start;
  }

  .organizer-landing__section-intro > p {
    width: min(100%, 570px);
    margin: 22px 0 0;
  }

  .organizer-landing__feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .organizer-landing__insight-section {
    gap: 52px;
  }

  .organizer-landing__footer {
    grid-template-columns: 1fr;
  }

  .organizer-landing__footer-links {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .organizer-landing__header,
  .organizer-landing__hero,
  .organizer-landing__proof-strip-inner,
  .organizer-landing__solution-section,
  .organizer-landing__insight-section,
  .organizer-landing__process-section,
  .organizer-landing__closing-section,
  .organizer-landing__footer {
    width: min(100% - 32px, 560px);
  }

  .organizer-landing__header {
    padding: 18px 0;
  }

  .organizer-landing__auth-button {
    font-size: 12px;
  }

  .organizer-landing__hero {
    gap: 40px;
    padding: 58px 0 62px;
  }

  .organizer-landing__hero-visual {
    display: none;
  }

  .organizer-landing__title-desktop {
    display: none;
  }

  .organizer-landing__title-mobile {
    display: block;
  }

  .organizer-landing__hero-title {
    font-size: clamp(38px, 11vw, 51px);
  }

  .organizer-landing__hero-description {
    font-size: 14px;
  }

  .organizer-landing__hero-description br {
    display: none;
  }

  .organizer-landing__button--hero {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    font-size: 16px;
  }

  .organizer-landing__hero-meta {
    align-items: flex-start;
    gap: 13px;
    margin-top: 35px;
  }

  .organizer-landing__dashboard-layout {
    grid-template-columns: 1fr;
  }

  .organizer-landing__dashboard-sidebar {
    display: none;
  }

  .organizer-landing__dashboard-content {
    padding: 17px;
  }

  .organizer-landing__dashboard-topbar {
    height: 47px;
    padding: 0 13px;
  }

  .organizer-landing__dashboard-brand > span:last-child {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .organizer-landing__metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .organizer-landing__team-table-header,
  .organizer-landing__team-row {
    grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.7fr);
  }

  .organizer-landing__team-table-header > span:last-child,
  .organizer-landing__team-row > .organizer-landing__status-area {
    display: none;
  }

  .organizer-landing__floating-badge--top {
    top: -15px;
    right: 4px;
  }

  .organizer-landing__floating-badge--bottom {
    bottom: -17px;
    left: 4px;
  }

  .organizer-landing__proof-strip-inner,
  .organizer-landing__feature-grid,
  .organizer-landing__process-grid {
    grid-template-columns: 1fr;
  }

  .organizer-landing__proof-strip-inner {
    gap: 21px;
    padding: 30px 0;
  }

  .organizer-landing__proof-strip-inner > div {
    gap: 13px;
  }

  .organizer-landing__proof-strip-inner > div > svg {
    width: 23px;
    height: 23px;
  }

  .organizer-landing__proof-strip-inner strong {
    font-size: 15px;
  }

  .organizer-landing__proof-strip-inner small {
    font-size: 12px;
  }

  .organizer-landing__solution-section,
  .organizer-landing__insight-section,
  .organizer-landing__process-section {
    padding: 88px 0;
  }

  .organizer-landing__feature-grid,
  .organizer-landing__process-grid {
    margin-top: 38px;
  }

  .organizer-landing__feature-card {
    min-height: 250px;
  }

  .organizer-landing__insight-copy h2 {
    font-size: clamp(35px, 10.4vw, 47px);
  }

  .organizer-landing__insight-copy h2 > span {
    white-space: normal;
  }

  .organizer-landing__insight-copy p {
    font-size: 15px;
  }

  .organizer-landing__outcome-list > div {
    font-size: 14px;
  }

  .organizer-landing__signal-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .organizer-landing__signal-card button {
    grid-column: 2;
    justify-self: start;
  }

  .organizer-landing__closing-section {
    padding: 0 0 76px;
  }

  .organizer-landing__closing-content {
    padding: 48px 24px;
  }

  .organizer-landing__footer {
    gap: 18px;
    padding: 28px 0 34px;
  }

  .organizer-landing__footer-links {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .organizer-landing__grid-overlay,
  .organizer-landing__background-glow {
    opacity: 0.45;
  }

  .organizer-landing__header,
  .organizer-landing__hero,
  .organizer-landing__proof-strip-inner,
  .organizer-landing__solution-section,
  .organizer-landing__insight-section,
  .organizer-landing__process-section,
  .organizer-landing__closing-section,
  .organizer-landing__footer {
    width: min(100% - 28px, 420px);
  }

  .organizer-landing__header {
    padding: 14px 0;
  }

  .organizer-landing__brand {
    gap: 8px;
  }

  .organizer-landing__brand-logo {
    width: 30px;
    height: 30px;
  }

  .organizer-landing__brand-text {
    font-size: 15px;
  }

  .organizer-landing__auth-button {
    padding: 8px 12px;
    font-size: 12px;
  }

  .organizer-landing__hero {
    gap: 30px;
    padding: 34px 0 44px;
  }

  .organizer-landing__hero-copy {
    text-align: center;
  }

  .organizer-landing__eyebrow {
    justify-content: center;
    width: 100%;
    font-size: 10px;
  }

  .organizer-landing__hero-title {
    margin-top: 16px;
    font-size: clamp(31px, 9.4vw, 40px);
    letter-spacing: -0.045em;
    line-height: 1.12;
  }

  .organizer-landing__hero-description {
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.7;
  }

  .organizer-landing__hero-actions {
    margin-top: 24px;
  }

  .organizer-landing__button--hero {
    min-height: 52px;
    font-size: 14px;
  }

  .organizer-landing__hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 24px;
  }

  .organizer-landing__hero-meta-item {
    padding: 13px 14px;
    border: 1px solid var(--organizer-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
  }

  .organizer-landing__hero-meta-divider,
  .organizer-landing__floating-badge {
    display: none;
  }

  .organizer-landing__dashboard-preview {
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  }

  .organizer-landing__dashboard-topbar {
    height: 43px;
  }

  .organizer-landing__dashboard-brand > span:last-child {
    max-width: 190px;
  }

  .organizer-landing__dashboard-status,
  .organizer-landing__dashboard-avatar,
  .organizer-landing__dashboard-heading button,
  .organizer-landing__dashboard-section-link {
    display: none;
  }

  .organizer-landing__dashboard-heading {
    align-items: flex-start;
  }

  .organizer-landing__dashboard-heading h2 {
    font-size: 16px;
  }

  .organizer-landing__metric-grid {
    gap: 7px;
    margin-top: 15px;
  }

  .organizer-landing__metric-card {
    padding: 10px;
  }

  .organizer-landing__metric-card strong {
    font-size: 20px;
  }

  .organizer-landing__team-table {
    margin-top: 10px;
    border-radius: 9px;
  }

  .organizer-landing__team-table-header {
    display: none;
  }

  .organizer-landing__team-row {
    grid-template-columns: 1fr;
    gap: 9px;
    min-height: auto;
    padding: 12px;
  }

  .organizer-landing__progress-area {
    gap: 6px;
  }

  .organizer-landing__proof-strip-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 22px 0;
  }

  .organizer-landing__proof-strip-inner > div {
    align-items: flex-start;
    flex-direction: column;
    min-height: 122px;
    padding: 15px;
    border: 1px solid var(--organizer-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
  }

  .organizer-landing__proof-strip-inner strong {
    font-size: 13px;
    line-height: 1.35;
  }

  .organizer-landing__proof-strip-inner small {
    font-size: 11px;
    line-height: 1.45;
  }

  .organizer-landing__solution-section,
  .organizer-landing__insight-section,
  .organizer-landing__process-section {
    padding: 64px 0;
  }

  .organizer-landing__section-intro h2,
  .organizer-landing__insight-copy h2,
  .organizer-landing__process-header h2 {
    max-width: 100%;
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.22;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .organizer-landing__section-intro {
    display: block;
  }

  .organizer-landing__section-intro > div,
  .organizer-landing__section-intro > p {
    width: 100%;
    max-width: none;
  }

  .organizer-landing__section-intro > p,
  .organizer-landing__insight-copy p {
    width: 100%;
    margin-top: 18px;
    font-size: 13px;
    line-height: 1.72;
    word-break: keep-all;
  }

  .organizer-landing__feature-grid,
  .organizer-landing__process-grid {
    gap: 11px;
    margin-top: 28px;
  }

  .organizer-landing__feature-card,
  .organizer-landing__process-step {
    min-height: auto;
    padding: 20px;
    border-radius: 14px;
  }

  .organizer-landing__feature-card h3,
  .organizer-landing__process-step h3 {
    font-size: 18px;
  }

  .organizer-landing__insight-section {
    gap: 34px;
  }

  .organizer-landing__outcome-list {
    gap: 10px;
    margin-top: 23px;
  }

  .organizer-landing__outcome-list > div {
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
  }

  .organizer-landing__insight-panel {
    border-radius: 15px;
  }

  .organizer-landing__insight-panel-header {
    padding: 18px;
  }

  .organizer-landing__signal-card {
    margin: 0 12px 10px;
    padding: 13px;
    border-radius: 12px;
  }

  .organizer-landing__signal-card p {
    white-space: normal;
  }

  .organizer-landing__insight-summary {
    padding: 15px 18px 18px;
  }

  .organizer-landing__process-header {
    text-align: left;
  }

  .organizer-landing__closing-section {
    padding: 0 0 56px;
  }

  .organizer-landing__closing-content {
    padding: 34px 20px;
    border-radius: 18px;
  }

  .organizer-landing__closing-content h2 {
    font-size: clamp(29px, 8.6vw, 38px);
  }

  .organizer-landing__closing-content p {
    font-size: 13px;
  }

  .organizer-landing__footer {
    justify-items: center;
    gap: 16px;
    padding: 24px 0 30px;
    text-align: center;
  }

  .organizer-landing__footer p {
    max-width: 260px;
    line-height: 1.55;
  }

  .organizer-landing__footer-links {
    justify-content: center;
    gap: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .organizer-landing__reveal {
    opacity: 1;
    transform: none;
  }

  .organizer-landing *,
  .organizer-landing *::before,
  .organizer-landing *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.organizer-landing > .organizer-landing__footer {
  display: none !important;
}

.organizer-landing__host-footer {
  margin-top: 18px;
}
.organizer-dashboard {
  --organizer-dashboard-bg: #151d36;
  --organizer-dashboard-deep: #10172b;
  --organizer-dashboard-panel: #1a2441;
  --organizer-dashboard-line: rgba(255, 255, 255, 0.09);
  --organizer-dashboard-text: #f2f5ff;
  --organizer-dashboard-muted: #98a5c5;
  --organizer-dashboard-blue: #7180ff;
  --organizer-dashboard-green: #81e8b0;
  --organizer-dashboard-yellow: #ffd07d;

  overflow: hidden;
  border: 1px solid rgba(57, 73, 140, 0.23);
  border-radius: 22px;
  background: var(--organizer-dashboard-bg);
  box-shadow: 0 26px 70px rgba(34, 47, 100, 0.2);
  color: var(--organizer-dashboard-text);
}

.organizer-dashboard *,
.organizer-dashboard *::before,
.organizer-dashboard *::after {
  box-sizing: border-box;
}

.organizer-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 0 21px;
  border-bottom: 1px solid var(--organizer-dashboard-line);
  background: rgba(255, 255, 255, 0.025);
}

.organizer-dashboard__product,
.organizer-dashboard__topbar-actions,
.organizer-dashboard__profile {
  display: flex;
  align-items: center;
}

.organizer-dashboard__product {
  gap: 9px;
}

.organizer-dashboard__product-mark {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: var(--organizer-dashboard-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}

.organizer-dashboard__product > div {
  display: grid;
  gap: 2px;
}

.organizer-dashboard__product strong {
  color: #f1f4ff;
  font-size: 11px;
  font-weight: 750;
}

.organizer-dashboard__product span:last-child {
  color: #8e9bbd;
  font-size: 9px;
}

.organizer-dashboard__topbar-actions {
  gap: 10px;
}

.organizer-dashboard__period-button,
.organizer-dashboard__notification-button,
.organizer-dashboard__report-button,
.organizer-dashboard__panel-heading button,
.organizer-dashboard__alert-item button,
.organizer-dashboard__row-more {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.organizer-dashboard__period-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #b4bfd9;
  font-size: 10px;
}

.organizer-dashboard__notification-button {
  position: relative;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #bdc7df;
}

.organizer-dashboard__notification-button > span {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff8b88;
}

.organizer-dashboard__profile {
  gap: 7px;
}

.organizer-dashboard__profile > span {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(83, 221, 147, 0.12);
  color: #90ebb8;
  font-size: 9px;
  font-weight: 750;
}

.organizer-dashboard__profile > strong {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #53628d;
  color: #fff;
  font-size: 10px;
}

.organizer-dashboard__layout {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  min-height: 650px;
}

.organizer-dashboard__sidebar {
  display: flex;
  flex-direction: column;
  padding: 21px 13px 15px;
  border-right: 1px solid var(--organizer-dashboard-line);
  background: rgba(8, 14, 31, 0.31);
}

.organizer-dashboard__event-summary {
  display: grid;
  gap: 5px;
  padding: 0 9px 19px;
  border-bottom: 1px solid var(--organizer-dashboard-line);
}

.organizer-dashboard__event-summary > span,
.organizer-dashboard__page-heading > div > span,
.organizer-dashboard__panel-heading > div > span {
  color: #8c99b9;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.organizer-dashboard__event-summary strong {
  color: #e8ecfa;
  font-size: 11px;
}

.organizer-dashboard__event-summary small {
  color: #7885a5;
  font-size: 9px;
}

.organizer-dashboard__menu {
  display: grid;
  gap: 4px;
  margin-top: 19px;
}

.organizer-dashboard__menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a3afc8;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    color var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-dashboard__menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e7ebf8;
}

.organizer-dashboard__menu-item--active {
  background: rgba(113, 128, 255, 0.2);
  color: #e2e6ff;
}

.organizer-dashboard__sidebar-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding: 9px;
  color: #7785a6;
  font-size: 9px;
}

.organizer-dashboard__content {
  padding: 29px;
}

.organizer-dashboard__page-heading,
.organizer-dashboard__panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.organizer-dashboard__page-heading h2,
.organizer-dashboard__panel-heading h3 {
  margin: 5px 0 0;
  color: #f1f4ff;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.055em;
}

.organizer-dashboard__page-heading p {
  margin: 8px 0 0;
  color: #93a0be;
  font-size: 11px;
}

.organizer-dashboard__report-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #c0cae2;
  font-size: 10px;
  font-weight: 700;
}

.organizer-dashboard__stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 24px;
}

.organizer-dashboard__stat-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 15px 13px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.organizer-dashboard__stat-card > span,
.organizer-dashboard__stat-card small {
  color: #94a1c0;
  font-size: 9px;
}

.organizer-dashboard__stat-card strong {
  color: #fff;
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -0.065em;
}

.organizer-dashboard__stat-description--positive {
  color: var(--organizer-dashboard-green) !important;
}

.organizer-dashboard__stat-description--warning {
  color: var(--organizer-dashboard-yellow) !important;
}

.organizer-dashboard__main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(265px, 0.58fr);
  gap: 12px;
  margin-top: 25px;
}

.organizer-dashboard__lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 12px;
  margin-top: 12px;
}

.organizer-dashboard__panel {
  padding: 18px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}

.organizer-dashboard__panel-heading {
  align-items: flex-end;
}

.organizer-dashboard__panel-heading h3 {
  font-size: 14px;
}

.organizer-dashboard__panel-heading > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 196, 102, 0.14);
  color: #ffd37f;
  font-size: 12px;
}

.organizer-dashboard__panel-heading button {
  padding: 0;
  background: transparent;
  color: #9eabff;
  font-size: 9px;
  font-weight: 700;
}

.organizer-dashboard__team-table {
  overflow: hidden;
  margin-top: 15px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 10px;
}

.organizer-dashboard__team-table-head,
.organizer-dashboard__team-row {
  display: grid;
  grid-template-columns: minmax(135px, 1.2fr) minmax(112px, 0.95fr) minmax(90px, 0.7fr) 25px;
  align-items: center;
  gap: 13px;
}

.organizer-dashboard__team-table-head {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #8d9aba;
  font-size: 8px;
  font-weight: 760;
}

.organizer-dashboard__team-row {
  min-height: 67px;
  padding: 10px 12px;
  border-top: 1px solid var(--organizer-dashboard-line);
}

.organizer-dashboard__team-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.organizer-dashboard__team-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(145deg, #6677ee, #364574);
  color: #fff;
  font-size: 10px;
  font-weight: 820;
}

.organizer-dashboard__team-info > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.organizer-dashboard__team-info strong {
  overflow: hidden;
  color: #edf1fd;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-dashboard__team-info span,
.organizer-dashboard__team-progress small,
.organizer-dashboard__team-state small {
  overflow: hidden;
  color: #8f9dbc;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-dashboard__team-progress {
  display: grid;
  gap: 6px;
}

.organizer-dashboard__progress-track {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.organizer-dashboard__progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--organizer-dashboard-blue);
  box-shadow: 0 0 11px rgba(113, 128, 255, 0.48);
}

.organizer-dashboard__team-state {
  display: grid;
  gap: 6px;
}

.organizer-dashboard__state-pill {
  width: fit-content;
  padding: 4px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 760;
}

.organizer-dashboard__state-pill--good {
  background: rgba(86, 225, 151, 0.13);
  color: #93eebc;
}

.organizer-dashboard__state-pill--warning {
  background: rgba(255, 192, 94, 0.15);
  color: #ffd486;
}

.organizer-dashboard__row-more {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: #93a0bd;
}

.organizer-dashboard__row-more:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.organizer-dashboard__alert-list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.organizer-dashboard__alert-item {
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--organizer-dashboard-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.organizer-dashboard__alert-icon {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 192, 94, 0.13);
  color: #ffd27f;
}

.organizer-dashboard__alert-item > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.organizer-dashboard__alert-item strong {
  color: #edf1fc;
  font-size: 10px;
}

.organizer-dashboard__alert-item p,
.organizer-dashboard__alert-item small {
  overflow: hidden;
  margin: 0;
  color: #94a1be;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organizer-dashboard__alert-item small {
  color: #7785a4;
}

.organizer-dashboard__alert-item button {
  padding: 6px 7px;
  border-radius: 6px;
  background: rgba(113, 128, 255, 0.15);
  color: #b8c0ff;
  font-size: 8px;
  font-weight: 750;
}

.organizer-dashboard__checkpoint-list,
.organizer-dashboard__activity-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.organizer-dashboard__checkpoint-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  padding: 11px 0;
  border-top: 1px solid var(--organizer-dashboard-line);
}

.organizer-dashboard__checkpoint-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.organizer-dashboard__checkpoint-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 145px;
}

.organizer-dashboard__checkpoint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.organizer-dashboard__checkpoint-dot--active {
  background: var(--organizer-dashboard-blue);
  box-shadow: 0 0 0 5px rgba(113, 128, 255, 0.11);
}

.organizer-dashboard__checkpoint-dot--upcoming {
  background: #8491b2;
}

.organizer-dashboard__checkpoint-main > div {
  display: grid;
  gap: 3px;
}

.organizer-dashboard__checkpoint-main strong {
  color: #eaf0fd;
  font-size: 10px;
}

.organizer-dashboard__checkpoint-main span {
  color: #8c9ab8;
  font-size: 8px;
}

.organizer-dashboard__checkpoint-progress {
  flex: 1;
}

.organizer-dashboard__checkpoint-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #95a2c0;
  font-size: 8px;
}

.organizer-dashboard__checkpoint-progress small {
  color: #aeb8d3;
}

.organizer-dashboard__checkpoint-track {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.organizer-dashboard__checkpoint-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7584ff;
}

.organizer-dashboard__activity-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid var(--organizer-dashboard-line);
}

.organizer-dashboard__activity-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.organizer-dashboard__activity-icon {
  display: grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 8px;
  background: rgba(113, 128, 255, 0.14);
  color: #aeb7ff;
}

.organizer-dashboard__activity-item > div {
  display: grid;
  gap: 4px;
}

.organizer-dashboard__activity-item p {
  margin: 0;
  color: #c6cee2;
  font-size: 9px;
  line-height: 1.45;
}

.organizer-dashboard__activity-item strong {
  margin-right: 4px;
  color: #eef2ff;
}

.organizer-dashboard__activity-item span {
  color: #818ead;
  font-size: 8px;
}

.organizer-dashboard--preview {
  border-radius: 20px;
}

.organizer-dashboard--preview .organizer-dashboard__topbar {
  min-height: 53px;
}

.organizer-dashboard--preview .organizer-dashboard__layout {
  min-height: 455px;
  grid-template-columns: 155px minmax(0, 1fr);
}

.organizer-dashboard--preview .organizer-dashboard__sidebar {
  padding: 17px 11px 13px;
}

.organizer-dashboard--preview .organizer-dashboard__content {
  padding: 23px;
}

.organizer-dashboard--preview .organizer-dashboard__page-heading h2 {
  font-size: 18px;
}

.organizer-dashboard--preview .organizer-dashboard__page-heading p {
  display: none;
}

.organizer-dashboard--preview .organizer-dashboard__stats-grid {
  margin-top: 19px;
}

.organizer-dashboard--preview .organizer-dashboard__stat-card {
  padding: 12px 10px;
}

.organizer-dashboard--preview .organizer-dashboard__stat-card strong {
  font-size: 22px;
}

.organizer-dashboard--preview .organizer-dashboard__main-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(220px, 0.58fr);
  margin-top: 22px;
}

.organizer-dashboard--preview .organizer-dashboard__panel {
  padding: 15px;
}

.organizer-dashboard--preview .organizer-dashboard__team-table-head,
.organizer-dashboard--preview .organizer-dashboard__team-row {
  grid-template-columns: minmax(115px, 1.2fr) minmax(90px, 0.95fr) minmax(75px, 0.7fr);
}

.organizer-dashboard--preview .organizer-dashboard__team-row {
  min-height: 59px;
}

.organizer-dashboard--preview .organizer-dashboard__alert-item {
  grid-template-columns: 31px minmax(0, 1fr);
}

.organizer-dashboard--preview .organizer-dashboard__alert-item p {
  font-size: 8px;
}

.organizer-dashboard--preview .organizer-dashboard__panel-heading > b {
  width: 25px;
  height: 25px;
}

.organizer-dashboard--preview button {
  cursor: default;
}

.organizer-dashboard--preview button:disabled {
  opacity: 1;
}

@media (max-width: 980px) {
  .organizer-dashboard__main-grid,
  .organizer-dashboard__lower-grid {
    grid-template-columns: 1fr;
  }

  .organizer-dashboard--preview .organizer-dashboard__main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .organizer-dashboard__layout,
  .organizer-dashboard--preview .organizer-dashboard__layout {
    grid-template-columns: 1fr;
  }

  .organizer-dashboard__sidebar {
    display: none;
  }

  .organizer-dashboard__content,
  .organizer-dashboard--preview .organizer-dashboard__content {
    padding: 17px;
  }

  .organizer-dashboard__stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .organizer-dashboard__team-table-head,
  .organizer-dashboard__team-row,
  .organizer-dashboard--preview .organizer-dashboard__team-table-head,
  .organizer-dashboard--preview .organizer-dashboard__team-row {
    grid-template-columns: minmax(110px, 1fr) minmax(88px, 0.78fr);
  }

  .organizer-dashboard__team-table-head span:nth-child(3),
  .organizer-dashboard__team-table-head span:nth-child(4),
  .organizer-dashboard__team-state,
  .organizer-dashboard__row-more {
    display: none;
  }

  .organizer-dashboard__topbar {
    padding: 0 13px;
  }

  .organizer-dashboard__product > div > span {
    display: none;
  }

  .organizer-dashboard__period-button {
    display: none;
  }
}

@media (max-width: 460px) {
  .organizer-dashboard__topbar-actions {
    gap: 6px;
  }

  .organizer-dashboard__profile > span {
    display: none;
  }

  .organizer-dashboard__page-heading {
    align-items: flex-end;
  }

  .organizer-dashboard__page-heading h2 {
    font-size: 19px;
  }

  .organizer-dashboard__report-button {
    padding: 8px;
    font-size: 0;
  }

  .organizer-dashboard__report-button svg {
    margin: 0;
  }

  .organizer-dashboard__alert-item {
    grid-template-columns: 33px minmax(0, 1fr);
  }

  .organizer-dashboard__alert-item button {
    display: none;
  }

  .organizer-dashboard__checkpoint-item {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .organizer-dashboard__checkpoint-progress {
    width: 100%;
  }
}
.organizer-demo-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 83% 0%, rgba(103, 118, 255, 0.1), transparent 26%),
    #f7f8ff;
  color: #1c2843;
}

.organizer-demo-page *,
.organizer-demo-page *::before,
.organizer-demo-page *::after {
  box-sizing: border-box;
}

.organizer-demo-page__container {
  width: min(100% - 64px, 1280px);
  margin: 0 auto;
}

.organizer-demo-page__top {
  border-bottom: 1px solid #e1e6f4;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

.organizer-demo-page__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 59px;
  gap: 18px;
}

.organizer-demo-page__back-link,
.organizer-demo-page__top-right,
.organizer-demo-page__demo-badge,
.organizer-demo-page__notice-inner {
  display: flex;
  align-items: center;
}

.organizer-demo-page__back-link {
  gap: 7px;
  color: #5f6d88;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.organizer-demo-page__back-link:hover {
  color: #5061f5;
}

.organizer-demo-page__top-right {
  gap: 15px;
}

.organizer-demo-page__demo-badge {
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eef0ff;
  color: #5061f5;
  font-size: 11px;
  font-weight: 750;
}

.organizer-demo-page__inquiry-link {
  color: #5061f5;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.organizer-demo-page__hero {
  padding: 81px 0 55px;
}

.organizer-demo-page__eyebrow {
  color: #5061f5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.organizer-demo-page__hero h1 {
  margin: 18px 0 0;
  color: #17213a;
  font-size: clamp(38px, 4vw, 59px);
  font-weight: 810;
  letter-spacing: -0.077em;
  line-height: 1.08;
}

.organizer-demo-page__hero h1 span {
  color: #5061f5;
}

.organizer-demo-page__hero p {
  max-width: 560px;
  margin: 22px 0 0;
  color: #63718c;
  font-size: 15px;
  line-height: 1.78;
}

.organizer-demo-page__dashboard-section {
  padding-bottom: 75px;
}

.organizer-demo-page__notice {
  border-top: 1px solid #e2e6f2;
  background: #fff;
}

.organizer-demo-page__notice-inner {
  min-height: 83px;
  gap: 11px;
  color: #6d7890;
  font-size: 12px;
}

.organizer-demo-page__notice-inner svg {
  flex: 0 0 auto;
  color: #5061f5;
}

.organizer-demo-page__notice-inner p {
  margin: 0;
}

.organizer-demo-page__notice-inner a {
  margin-left: auto;
  color: #5061f5;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .organizer-demo-page__container {
    width: min(100% - 36px, 1280px);
  }

  .organizer-demo-page__hero {
    padding: 55px 0 38px;
  }

  .organizer-demo-page__top-right {
    gap: 10px;
  }

  .organizer-demo-page__demo-badge {
    display: none;
  }

  .organizer-demo-page__notice-inner {
    align-items: flex-start;
    min-height: auto;
    padding: 20px 0;
  }

  .organizer-demo-page__notice-inner a {
    display: none;
  }
}.organizer-apply {
  --apply-bg: #0d1727;
  --apply-panel: #121f33;
  --apply-panel-soft: #16253b;
  --apply-line: rgba(163, 190, 229, 0.16);
  --apply-line-strong: rgba(121, 168, 255, 0.5);
  --apply-text: #f5f8ff;
  --apply-muted: #a5b2c7;
  --apply-dim: #74849d;
  --apply-blue: #699bff;
  --apply-blue-strong: #3f73e7;

  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 16%, rgba(72, 121, 223, 0.18), transparent 27%),
    linear-gradient(118deg, #0c1625 0%, #0d1829 46%, #101b2d 100%);
  color: var(--apply-text);
}

.organizer-apply *,
.organizer-apply *::before,
.organizer-apply *::after {
  box-sizing: border-box;
}

.organizer-apply__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(206, 223, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 223, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
  pointer-events: none;
}

.organizer-apply__layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  width: min(100% - 64px, 1180px);
  min-height: 660px;
  margin: 18px auto 96px;
  border: 1px solid var(--apply-line);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(11, 22, 38, 0.72);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.organizer-apply__rail {
  display: flex;
  flex-direction: column;
  padding: 42px 26px 48px;
  border-right: 1px solid var(--apply-line);
  background:
    linear-gradient(180deg, rgba(26, 45, 72, 0.72), rgba(13, 26, 45, 0.86)),
    radial-gradient(circle at 10% 5%, rgba(105, 155, 255, 0.2), transparent 34%);
}

.organizer-apply__heading > span,
.organizer-apply__success > span {
  color: var(--apply-blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.11em;
}

.organizer-apply__rail h1 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.35;
}

.organizer-apply__rail > p {
  margin: 0;
  color: var(--apply-muted);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}

.organizer-apply__steps {
  display: grid;
  gap: 0;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
}

.organizer-apply__steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  color: var(--apply-dim);
  font-size: 14px;
  transition: color var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-apply__steps li:not(:last-child)::after {
  position: absolute;
  top: 47px;
  bottom: -15px;
  left: 17px;
  width: 1px;
  background: var(--apply-line);
  content: "";
}

.organizer-apply__steps li > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  border: 1px solid var(--apply-line);
  border-radius: 50%;
  background: #152238;
  font-size: 12px;
  font-weight: 850;
}

.organizer-apply__steps li.is-current,
.organizer-apply__steps li.is-complete {
  color: #fff;
}

.organizer-apply__steps li.is-current > span {
  border-color: var(--apply-blue);
  background: linear-gradient(145deg, #548aff, #3265d7);
  box-shadow: 0 0 0 5px rgba(105, 155, 255, 0.09);
}

.organizer-apply__steps li.is-complete > span {
  border-color: rgba(105, 155, 255, 0.42);
  background: rgba(105, 155, 255, 0.14);
  color: var(--apply-blue);
}

.organizer-apply__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 56px 38px;
  background: rgba(15, 29, 48, 0.66);
}

.organizer-apply__content form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.organizer-apply__panel {
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) both;
}

.organizer-apply__heading h2 {
  margin: 14px 0 10px;
  font-size: clamp(25px, 2.65vw, 34px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.25;
}

.organizer-apply__heading p {
  margin: 0;
  color: var(--apply-muted);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}

.organizer-apply__heading p strong {
  color: #dce8ff;
}

.organizer-apply__type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 34px;
}

.organizer-apply__type-grid > button {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 290px;
  flex-direction: column;
  padding: 24px 17px 20px;
  border: 1px solid var(--apply-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(25, 42, 67, 0.9), rgba(17, 32, 53, 0.82));
  color: var(--apply-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-apply__type-grid > button:hover {
  border-color: rgba(105, 155, 255, 0.4);
  transform: translateY(var(--organizer-hover-lift));
}

.organizer-apply__type-grid > button:focus-visible {
  outline: 2px solid rgba(105, 155, 255, 0.96);
  outline-offset: 3px;
}

.organizer-apply__type-grid > button:focus:not(:focus-visible) {
  outline: none;
}

.organizer-apply__type-grid > button.is-selected {
  border-color: var(--apply-blue);
  background:
    radial-gradient(circle at 50% 10%, rgba(75, 125, 231, 0.28), transparent 42%),
    linear-gradient(145deg, rgba(29, 53, 89, 0.98), rgba(17, 32, 53, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(120, 166, 255, 0.08),
    0 14px 34px rgba(46, 96, 197, 0.13);
}

.organizer-apply__type-grid > button.is-selected::after {
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--apply-blue), transparent);
  box-shadow: 0 -5px 16px rgba(105, 155, 255, 0.4);
  content: "";
}

.organizer-apply__type-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(105, 155, 255, 0.11);
  color: var(--apply-blue);
}

.organizer-apply__type-icon svg {
  width: 24px;
  height: 24px;
}

.organizer-apply__type-grid > button:nth-child(2) .organizer-apply__type-icon {
  background: rgba(152, 117, 255, 0.12);
  color: #9c82ff;
}

.organizer-apply__type-grid > button:nth-child(3) .organizer-apply__type-icon {
  background: rgba(78, 204, 206, 0.1);
  color: #58ced0;
}

.organizer-apply__type-grid strong {
  font-size: 19px;
  letter-spacing: -0.025em;
}

.organizer-apply__type-grid p {
  margin: 10px 0 14px;
  color: var(--apply-muted);
  font-size: 14px;
  line-height: 1.65;
  word-break: keep-all;
}

.organizer-apply__type-grid small {
  display: grid;
  gap: 7px;
  margin-top: auto;
  color: #8f9db2;
  font-size: 12px;
  line-height: 1.5;
}

.organizer-apply__type-grid small em {
  justify-self: center;
  padding: 3px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.055);
  color: #aebbd0;
  font-style: normal;
}

.organizer-apply__check {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--apply-line);
  border-radius: 50%;
  color: transparent;
}

.organizer-apply__type-grid .is-selected .organizer-apply__check {
  border-color: var(--apply-blue);
  background: linear-gradient(145deg, #5f94ff, #3266d8);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(105, 155, 255, 0.1);
}

@keyframes organizer-apply-card-dock {
  from {
    opacity: 0.62;
    transform: translateX(96px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes organizer-apply-feature-reveal {
  from {
    opacity: 0;
    transform: translateX(18px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.organizer-apply__selection-detail {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 25px;
  margin-top: 30px;
}

.organizer-apply__selected-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.organizer-apply__selected-type-card {
  position: relative;
  display: flex;
  align-items: center;
  height: 256px;
  min-height: 256px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px 16px 18px;
  border: 1px solid var(--apply-blue);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 12%, rgba(75, 125, 231, 0.28), transparent 43%),
    linear-gradient(145deg, rgba(29, 53, 89, 0.98), rgba(17, 32, 53, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(120, 166, 255, 0.08),
    0 14px 34px rgba(46, 96, 197, 0.13);
  text-align: center;
  animation: organizer-apply-card-dock 540ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.organizer-apply__selected-type-card::after {
  position: absolute;
  right: 16px;
  bottom: -1px;
  left: 16px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--apply-blue), transparent);
  box-shadow: 0 -5px 16px rgba(105, 155, 255, 0.4);
  content: "";
}

.organizer-apply__selected-type-card .organizer-apply__type-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
}

.organizer-apply__selected-type-card .organizer-apply__type-icon svg {
  width: 22px;
  height: 22px;
}

.organizer-apply__selected-type-card[data-type="education"] .organizer-apply__type-icon {
  background: rgba(152, 117, 255, 0.12);
  color: #9c82ff;
}

.organizer-apply__selected-type-card[data-type="organization"] .organizer-apply__type-icon {
  background: rgba(78, 204, 206, 0.1);
  color: #58ced0;
}

.organizer-apply__selected-type-card > strong {
  font-size: 20px;
  letter-spacing: -0.035em;
}

.organizer-apply__selected-type-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin: 13px 0 0;
  color: var(--apply-muted);
  font-size: 13px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.organizer-apply__selected-type-card .organizer-apply__check {
  top: 14px;
  right: 14px;
  width: 21px;
  height: 21px;
  border-color: var(--apply-blue);
  background: linear-gradient(145deg, #4f7fdc, #315fbf);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(105, 155, 255, 0.07);
}

.organizer-apply__change-type {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  margin-top: 15px;
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid rgba(166, 188, 222, 0.35);
  background: transparent;
  color: #aebdd3;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.organizer-apply__change-type:hover,
.organizer-apply__change-type:focus-visible {
  color: #fff;
}

.organizer-apply__feature-preview {
  min-width: 0;
  padding: 3px 0 0;
  animation: organizer-apply-feature-reveal 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.organizer-apply__feature-preview > span {
  color: var(--apply-blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.organizer-apply__feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.organizer-apply__feature-list article {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--apply-line);
  border-radius: 11px;
  outline: none;
  background: rgba(14, 29, 49, 0.72);
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.organizer-apply__feature-list article:hover {
  border-color: rgba(105, 155, 255, 0.42);
  background: rgba(21, 40, 66, 0.96);
  transform: translateY(-1px);
}

.organizer-apply__feature-list article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(105, 155, 255, 0.11);
  color: var(--apply-blue);
}

.organizer-apply__feature-list article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.organizer-apply__feature-list article strong {
  min-width: 0;
  color: #eaf1ff;
  font-size: 14px;
  line-height: 1.35;
}

.organizer-apply__feature-list article small {
  color: #a6b3c7;
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

.organizer-apply__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin-top: 40px;
}

.organizer-apply__support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.organizer-apply__support-grid article {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 90px;
  padding: 14px;
  border: 1px solid var(--apply-line);
  border-radius: 12px;
  background: rgba(14, 29, 49, 0.7);
}

.organizer-apply__scale-field {
  max-width: 320px;
  margin-top: 18px;
}

.organizer-apply__support-grid article > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(105, 155, 255, 0.11);
  color: var(--apply-blue);
}

.organizer-apply__support-grid article div {
  display: grid;
  gap: 6px;
}

.organizer-apply__support-grid article strong {
  color: #edf3ff;
  font-size: 15px;
}

.organizer-apply__support-grid article p {
  margin: 0;
  color: var(--apply-muted);
  font-size: 13px;
  line-height: 1.55;
  word-break: keep-all;
}

.organizer-apply__support-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(105, 155, 255, 0.17);
  border-radius: 10px;
  background: rgba(105, 155, 255, 0.07);
  color: var(--apply-blue);
}

.organizer-apply__support-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.organizer-apply__support-note p {
  margin: 0;
  color: #9dacbf;
  font-size: 13px;
  line-height: 1.6;
}

.organizer-apply__support-note strong {
  color: #dbe7fb;
}

.organizer-apply__field {
  display: grid;
  gap: 9px;
  color: #dce5f5;
  font-size: 13px;
  font-weight: 760;
}

.organizer-apply__field--wide {
  grid-column: 1 / -1;
}

.organizer-apply__field span b,
.organizer-apply__consent b {
  color: #7da8ff;
}

.organizer-apply__field input,
.organizer-apply__field select,
.organizer-apply__field textarea {
  width: 100%;
  border: 1px solid var(--apply-line);
  border-radius: 10px;
  outline: none;
  background: rgba(8, 19, 34, 0.58);
  color: #f5f8ff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-apply__field input,
.organizer-apply__field select {
  height: 48px;
  padding: 0 14px;
}

.organizer-apply__field textarea {
  min-height: 110px;
  padding: 13px 14px;
  line-height: 1.6;
  resize: vertical;
}

.organizer-apply__field input:focus,
.organizer-apply__field select:focus,
.organizer-apply__field textarea:focus {
  border-color: var(--apply-blue);
  background: rgba(10, 23, 41, 0.9);
  box-shadow: 0 0 0 3px rgba(105, 155, 255, 0.1);
}

.organizer-apply__field input::placeholder,
.organizer-apply__field textarea::placeholder {
  color: #66778f;
}

.organizer-apply__field select {
  color-scheme: dark;
}

.organizer-apply__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--apply-muted);
  font-size: 12px;
  line-height: 1.55;
  cursor: pointer;
}

.organizer-apply__consent input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--apply-blue-strong);
}

.organizer-apply__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.organizer-apply__error {
  margin: 22px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 135, 135, 0.2);
  border-radius: 9px;
  background: rgba(170, 57, 57, 0.1);
  color: #ffb1b1;
  font-size: 13px;
}

.organizer-apply__actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 16px;
  margin-top: auto;
  padding-top: 38px;
}

.organizer-apply__primary-button,
.organizer-apply__secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    opacity var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.organizer-apply__primary-button {
  border: 1px solid #6798ff;
  background: linear-gradient(135deg, #315fc9, #4d82ef);
  box-shadow: 0 12px 28px rgba(47, 98, 207, 0.22);
  color: #fff;
}

.organizer-apply__secondary-button {
  border: 1px solid var(--apply-line);
  background: rgba(15, 29, 49, 0.68);
  color: #c0cce0;
}

.organizer-apply__primary-button:hover:not(:disabled),
.organizer-apply__secondary-button:hover:not(:disabled) {
  transform: translateY(var(--organizer-hover-lift));
}

.organizer-apply__secondary-button:hover:not(:disabled) {
  border-color: rgba(105, 155, 255, 0.35);
}

.organizer-apply__primary-button:disabled,
.organizer-apply__secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.organizer-apply__inquiry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 30px;
  color: #7f8da4;
  font-size: 12px;
}

.organizer-apply__inquiry--rail {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--apply-line);
  line-height: 1.5;
}

.organizer-apply__inquiry--rail > span {
  flex: 1 1 calc(100% - 24px);
}

.organizer-apply__inquiry--rail a {
  margin-left: 22px;
}

.organizer-apply__inquiry--mobile {
  display: none;
}

.organizer-apply__inquiry a {
  border-bottom: 1px solid rgba(166, 188, 222, 0.42);
  color: #b5c5dd;
  font-weight: 750;
  text-decoration: none;
}

.organizer-apply__inquiry a:hover {
  color: #fff;
}

.organizer-apply__mobile-progress {
  display: none;
}

.organizer-apply__success {
  display: flex;
  align-items: center;
  width: min(100% - 40px, 660px);
  min-height: 650px;
  margin: 30px auto 80px;
  flex-direction: column;
  justify-content: center;
  padding: 64px;
  border: 1px solid var(--apply-line);
  border-radius: 24px;
  background: rgba(16, 31, 52, 0.8);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.organizer-apply__success-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 25px;
  border-radius: 50%;
  background: rgba(105, 155, 255, 0.13);
  color: var(--apply-blue);
  box-shadow: 0 0 0 10px rgba(105, 155, 255, 0.045);
}

.organizer-apply__success h1 {
  margin: 14px 0 14px;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.05em;
}

.organizer-apply__success > p {
  margin: 0;
  color: var(--apply-muted);
  font-size: 14px;
  line-height: 1.8;
}

.organizer-apply__receipt {
  display: grid;
  width: min(100%, 380px);
  gap: 5px;
  margin: 32px 0 28px;
  padding: 18px;
  border: 1px solid var(--apply-line);
  border-radius: 12px;
  background: rgba(7, 17, 31, 0.44);
}

.organizer-apply__receipt span,
.organizer-apply__receipt small {
  color: var(--apply-dim);
  font-size: 11px;
}

.organizer-apply__receipt strong {
  color: #eaf0fb;
  font-size: 15px;
}

.organizer-apply__success .organizer-apply__primary-button {
  min-width: 230px;
  padding: 0 22px;
}

@media (max-width: 980px) {
  .organizer-apply__layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .organizer-apply__rail {
    padding: 40px 26px 45px;
  }

  .organizer-apply__content {
    padding: 40px 34px 30px;
  }

  .organizer-apply__type-grid {
    gap: 10px;
  }

  .organizer-apply__type-grid > button {
    min-height: 310px;
    padding-inline: 14px;
  }

  .organizer-apply__selection-detail {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
  }

  .organizer-apply__selected-type-card {
    height: 260px;
    min-height: 260px;
  }

  .organizer-apply__feature-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .organizer-apply__layout {
    display: block;
    width: min(100% - 28px, 620px);
    min-height: 0;
    margin: 10px auto 50px;
  }

  .organizer-apply__rail {
    display: none;
  }

  .organizer-apply__content {
    padding: 30px 20px 24px;
  }

  .organizer-apply__mobile-progress {
    display: grid;
    gap: 9px;
    margin-bottom: 35px;
  }

  .organizer-apply__mobile-progress > span {
    color: var(--apply-blue);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.1em;
  }

  .organizer-apply__mobile-progress > div {
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--apply-line);
  }

  .organizer-apply__mobile-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--apply-blue);
    transition: width var(--organizer-motion-base) var(--organizer-ease-out);
  }

  .organizer-apply__heading h2 {
    font-size: 26px;
  }

  .organizer-apply__type-grid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .organizer-apply__type-grid > button {
    align-items: flex-start;
    min-height: 0;
    padding: 20px 20px 20px 83px;
    text-align: left;
  }

  .organizer-apply__type-icon {
    position: absolute;
    top: 20px;
    left: 18px;
    width: 49px;
    height: 49px;
    margin: 0;
  }

  .organizer-apply__type-grid p {
    margin: 7px 0 11px;
  }

  .organizer-apply__type-grid small {
    display: block;
    margin: 0;
  }

  .organizer-apply__type-grid small em {
    display: inline-block;
    margin-right: 5px;
  }

  .organizer-apply__selection-detail {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .organizer-apply__selected-type-card {
    align-items: flex-start;
    height: auto;
    min-height: 0;
    padding: 23px 48px 23px 84px;
    text-align: left;
  }

  .organizer-apply__selected-type-card .organizer-apply__type-icon {
    position: absolute;
    top: 23px;
    left: 20px;
    width: 49px;
    height: 49px;
    margin: 0;
  }

  .organizer-apply__selected-type-card > p {
    margin-top: 8px;
  }

  .organizer-apply__change-type {
    align-self: flex-start;
  }

  .organizer-apply__feature-list {
    grid-template-columns: 1fr;
  }

  .organizer-apply__form-grid {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .organizer-apply__support-grid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .organizer-apply__support-grid article {
    min-height: 0;
  }

  .organizer-apply__field--wide {
    grid-column: auto;
  }

  .organizer-apply__actions {
    grid-template-columns: 0.75fr 1.4fr;
    padding-top: 34px;
  }

  .organizer-apply__inquiry--mobile {
    display: flex;
    flex-wrap: wrap;
  }

  .organizer-apply__success {
    min-height: 560px;
    padding: 42px 22px;
  }
}
.competition-code-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(121, 168, 255, 0.18), transparent 28%),
    #101827;
  color: #f5f8ff;
}

.competition-code-page *,
.competition-code-page *::before,
.competition-code-page *::after {
  box-sizing: border-box;
}

.competition-code-page__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(209, 224, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 224, 255, 0.035) 1px, transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}

.competition-code-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100% - 64px, 1180px);
  margin: 0 auto;
  padding: 24px 0;
}

.competition-code-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
}

.competition-code-page__brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.competition-code-page__panel {
  width: min(100% - 40px, 520px);
  margin: 86px auto 78px;
  padding: 40px;
  border: 1px solid rgba(180, 202, 235, 0.16);
  border-radius: 8px;
  background: rgba(18, 28, 45, 0.86);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) both;
}

.competition-code-page__footer {
  width: min(100% - 40px, 1040px);
}

.competition-code-page__eyebrow {
  margin: 0 0 16px;
  color: #79a8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.competition-code-page__panel h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.06;
  letter-spacing: 0;
}

.competition-code-page__description {
  margin: 18px 0 30px;
  color: #b9c5d8;
  font-size: 16px;
  line-height: 1.7;
}

.competition-code-page__form {
  display: grid;
  gap: 12px;
}

.competition-code-page__form label {
  color: #dce7f8;
  font-size: 14px;
  font-weight: 700;
}

.competition-code-page__form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(180, 202, 235, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.competition-code-page__form input:focus {
  border-color: rgba(121, 168, 255, 0.8);
  box-shadow: 0 0 0 4px rgba(121, 168, 255, 0.16);
}

.competition-code-page__error {
  border: 1px solid rgba(255, 132, 132, 0.3);
  border-radius: 8px;
  background: rgba(255, 132, 132, 0.12);
  color: #ffd6d6;
  padding: 12px 14px;
  font-size: 14px;
}

.competition-code-page__form button {
  min-height: 54px;
  border: 0;
  border-radius: 8px;
  background: #79a8ff;
  color: #08111f;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    opacity var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.competition-code-page__form button:not(:disabled):hover {
  transform: translateY(var(--organizer-hover-lift));
}

.competition-code-page__form button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

@media (max-width: 640px) {
  .competition-code-page__header {
    align-items: center;
    flex-direction: row;
    width: min(100% - 28px, 720px);
    gap: 12px;
    padding: 18px 0;
  }

  .competition-code-page__brand {
    min-width: 0;
    font-size: 15px;
  }

  .competition-code-page__brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .competition-code-page__panel {
    margin-top: 48px;
    padding: 28px 22px;
  }
}
.hackathon-office-canvas {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 24px auto 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-soft);
}

.hackathon-office-canvas__stage {
  width: 100%;
}

.hackathon-office-canvas__stage canvas {
  display: block;
  width: 100%;
  height: auto;
}

.hackathon-office-canvas__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}

.hackathon-office-canvas__zoom button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.hackathon-office-canvas__zoom button:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.hackathon-layout-editor__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  font-size: 13px;
  color: var(--color-text-sub);
}

.hackathon-layout-editor__bar button {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-layout-editor__bar button:last-child {
  background: transparent;
  color: var(--color-text-main);
}

.hackathon-layout-editor__bar button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hackathon-qr-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.hackathon-qr-modal {
  position: relative;
  width: min(100%, 320px);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.hackathon-qr-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.hackathon-qr-modal__hint {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 8px 0 16px;
}

.hackathon-qr-modal__image {
  width: 240px;
  height: 240px;
  border-radius: 8px;
}

.hackathon-qr-modal__loading {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.hackathon-qr-modal__url {
  margin: 16px 0 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  word-break: break-all;
}

.hackathon-qr-modal__copy {
  border: 1px solid var(--color-border-strong);
  background: transparent;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}
.hackathon-chat-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
}

.hackathon-chat-popup {
  width: min(100%, 420px);
  height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: 16px;
  overflow: hidden;
}

.hackathon-chat-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-strong);
}

.hackathon-chat-popup__header h2 {
  margin: 0;
  font-size: 16px;
}

.hackathon-chat-popup__close {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.hackathon-chat-popup__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.hackathon-chat-popup__empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  margin: auto 0;
}

.hackathon-chat-popup__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hackathon-chat-popup__msg--mine {
  flex-direction: row-reverse;
}

.hackathon-chat-popup__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.hackathon-chat-popup__bubble-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 72%;
}

.hackathon-chat-popup__msg--mine .hackathon-chat-popup__bubble-wrap {
  align-items: flex-end;
}

.hackathon-chat-popup__name {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-left: 2px;
}

.hackathon-chat-popup__bubble {
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  border: 1px solid var(--color-border-strong);
}

.hackathon-chat-popup__msg--mine .hackathon-chat-popup__bubble {
  background: var(--color-text-main);
  color: var(--color-bg-page);
  border-color: var(--color-text-main);
}

.hackathon-chat-popup__time {
  font-size: 10px;
  color: var(--color-text-muted);
  padding: 0 2px;
}

.hackathon-chat-popup__input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-strong);
}

.hackathon-chat-popup__input {
  flex: 1;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  resize: none;
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  overflow-y: auto;
}

.hackathon-chat-popup__send {
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-soft);
  color: var(--color-text-main);
  border-radius: 10px;
  padding: 0 16px;
  height: 38px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-chat-popup__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.hackathon-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  color: var(--color-text-main);
}

.hackathon-page__nav-right {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 500;
  padding: 4px;
  border-radius: 16px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 4px 16px var(--color-shadow-base, rgba(0, 0, 0, 0.12));
}

.hackathon-page__inner {
  width: min(100% - 48px, 960px);
  margin: 0 auto;
  padding: 48px 0 96px;
}

.hackathon-page__back {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.hackathon-page__back:hover {
  color: var(--color-text-main);
}

.hackathon-page__header {
  margin-top: 24px;
}

.hackathon-page__eyebrow {
  margin: 0 0 8px;
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hackathon-page__header h1 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
}

.hackathon-page__description {
  margin: 0;
  color: var(--color-text-sub);
  font-size: 15px;
  line-height: 1.6;
}

.hackathon-page__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  margin-top: 32px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 600;
}

[data-theme="dark"] .hackathon-page__placeholder {
  box-shadow: inset 0 0 0 1px rgba(79, 142, 247, 0.08);
}

.hackathon-page__event-name {
  margin: 32px 0 0;
  color: var(--color-text-sub);
  font-size: 14px;
  font-weight: 700;
}

.hackathon-page__event-name a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.hackathon-page__code-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  margin-top: 32px;
}

.hackathon-page__code-form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

.hackathon-page__code-form input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-page);
  color: var(--color-text-main);
  font-size: 14px;
}

.hackathon-page__code-form button {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  cursor: pointer;
}

.hackathon-page__code-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hackathon-page__error {
  margin: 0;
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 600;
}

.hackathon-page__seat-mode-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.hackathon-page__seat-mode-toggle {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-page__seat-mode-hint {
  color: var(--color-text-muted);
  font-size: 13px;
}

.hackathon-page__admin-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.hackathon-page__admin-toggle {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.hackathon-page__admin-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.networking-chat-trigger {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--onsite-line, #dfe3ea);
  border-radius: 7px;
  background: var(--onsite-surface, #fff);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.networking-chat-backdrop {
  position: fixed;
  z-index: 280;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, .32);
  backdrop-filter: blur(2px);
}

.networking-chat-drawer {
  position: fixed;
  z-index: 281;
  top: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  width: min(410px, calc(100% - 24px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce2ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  color: #182235;
}

.networking-chat-heading {
  display: grid;
  min-height: 76px;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border-bottom: 1px solid #e5e9ef;
  background: #fff;
}

.networking-chat-heading__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #eef3ff;
  color: #4265cf;
}

.networking-chat-heading > div { display: grid; gap: 4px; }
.networking-chat-heading strong { font-size: 17px; letter-spacing: 0; }
.networking-chat-heading > div > span { display: flex; align-items: center; gap: 6px; color: #778195; font-size: 11px; }
.networking-chat-heading i { width: 7px; height: 7px; border-radius: 50%; background: #34ad78; box-shadow: 0 0 0 3px rgba(52, 173, 120, .12); }
.networking-chat-heading > button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #748095; cursor: pointer; }
.networking-chat-heading > button:hover { background: #f2f4f7; color: #263247; }

.networking-chat-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 22px 16px 28px;
  background: #f6f8fb;
  scrollbar-color: #cbd3df transparent;
  scrollbar-width: thin;
}

.networking-chat-message { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px; }
.networking-chat-message.is-mine { flex-direction: row-reverse; }
.networking-chat-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #dce2eb; border-radius: 50%; background: #e9eef8; color: #53657f; font-size: 12px; font-weight: 800; }
.networking-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.networking-chat-message__body { display: grid; max-width: 78%; justify-items: start; gap: 5px; }
.networking-chat-message.is-mine .networking-chat-message__body { justify-items: end; }
.networking-chat-message__body > header { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.networking-chat-message.is-mine .networking-chat-message__body > header { flex-direction: row-reverse; }
.networking-chat-message__body > header strong { color: #354155; font-size: 11px; }
.networking-chat-message__body > header span { padding: 2px 6px; border-radius: 999px; background: #e7edff; color: #3e5fbd; font-size: 9px; font-weight: 800; }
.networking-chat-message__body time { color: #9aa3b2; font-size: 9px; }
.networking-chat-message__body > p { max-width: 100%; margin: 0; padding: 10px 12px; border: 1px solid #e2e6ec; border-radius: 7px; background: #fff; color: #263247; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 2px 5px rgba(15, 23, 42, .035); }
.networking-chat-message.is-mine .networking-chat-message__body > p { border-color: #dbe4ff; background: #e8eeff; color: #1f326c; }

.networking-chat-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 28px; color: #8a95a6; text-align: center; }
.networking-chat-empty__icon { display: grid; width: 46px; height: 46px; margin-bottom: 3px; place-items: center; border-radius: 50%; background: #e9eef7; color: #6d7d95; }
.networking-chat-empty__icon svg { width: 20px; }
.networking-chat-empty strong { color: #566174; font-size: 13px; }
.networking-chat-empty p { margin: 0; font-size: 11px; line-height: 1.5; }
.networking-chat-empty button { min-height: 34px; padding: 0 13px; border: 1px solid #d7deea; border-radius: 6px; background: #fff; color: #405cc5; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }

.networking-chat-drawer > form { display: flex; align-items: flex-end; gap: 10px; padding: 13px 14px 14px; border-top: 1px solid #e3e7ed; background: #fff; }
.networking-chat-drawer > form > div { min-width: 0; flex: 1; display: grid; gap: 4px; padding: 9px 11px 7px; border: 1px solid #d8dee8; border-radius: 7px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.networking-chat-drawer > form > div:focus-within { border-color: #6680dd; box-shadow: 0 0 0 3px rgba(82, 107, 194, .1); }
.networking-chat-drawer textarea { width: 100%; min-height: 24px; max-height: 96px; padding: 0; resize: none; border: 0; outline: none; background: transparent; color: #202b3d; field-sizing: content; font: inherit; font-size: 13px; line-height: 1.45; }
.networking-chat-drawer textarea::placeholder { color: #9aa3b1; }
.networking-chat-drawer form small { color: #9ba4b2; font-size: 9px; }
.networking-chat-drawer form > button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #4265cf; color: #fff; cursor: pointer; box-shadow: 0 6px 15px rgba(66, 101, 207, .22); }
.networking-chat-drawer form > button:hover:not(:disabled) { background: #3455bd; }
.networking-chat-drawer form > button:disabled { background: #d8deeb; box-shadow: none; cursor: default; }

[data-theme="dark"] .networking-chat-drawer { border-color: #2c3b51; background: #101c30; color: #f5f8ff; }
[data-theme="dark"] .networking-chat-heading,
[data-theme="dark"] .networking-chat-drawer > form { border-color: #2a3a50; background: #101c30; }
[data-theme="dark"] .networking-chat-heading__icon { background: rgba(105, 165, 255, .12); color: #82b4ff; }
[data-theme="dark"] .networking-chat-heading > div > span,
[data-theme="dark"] .networking-chat-message__body time,
[data-theme="dark"] .networking-chat-drawer form small { color: #91a5c1; }
[data-theme="dark"] .networking-chat-heading > button { color: #91a5c1; }
[data-theme="dark"] .networking-chat-heading > button:hover { background: rgba(105, 165, 255, .09); color: #fff; }
[data-theme="dark"] .networking-chat-list { background: #091629; }
[data-theme="dark"] .networking-chat-avatar { border-color: #32435b; background: #1c2a40; color: #c7d6e9; }
[data-theme="dark"] .networking-chat-message__body > header strong { color: #dce7f7; }
[data-theme="dark"] .networking-chat-message__body > p { border-color: #2d3d54; background: #17253a; color: #edf3fc; box-shadow: none; }
[data-theme="dark"] .networking-chat-message.is-mine .networking-chat-message__body > p { border-color: #365b91; background: #1d477b; color: #fff; }
[data-theme="dark"] .networking-chat-drawer > form > div { border-color: #34445b; background: #142238; }
[data-theme="dark"] .networking-chat-drawer textarea { color: #f5f8ff; }

@media (max-width: 640px) {
  .networking-chat-trigger span { display: none; }
  .networking-chat-backdrop { display: none; }
  .networking-chat-drawer { inset: 0; width: auto; border: 0; border-radius: 0; }
  .networking-chat-heading { min-height: calc(68px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .networking-chat-list { padding: 18px 13px 24px; }
  .networking-chat-drawer > form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .networking-chat-drawer form small { display: none; }
}
.onsite-visit {
  --ov-bg: #071426;
  --ov-panel: #101c30;
  --ov-line: rgba(157, 194, 239, .18);
  --ov-line-strong: rgba(157, 194, 239, .3);
  --ov-primary: #69a5ff;
  --ov-primary-hover: #82b4ff;
  --ov-primary-soft: rgba(105, 165, 255, .1);
  --ov-text: #f5f8ff;
  --ov-sub: #d9e5f5;
  --ov-muted: #91a5c1;
  min-height: 100dvh;
  background: var(--ov-bg);
  color: var(--ov-text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
}

.onsite-visit * { box-sizing: border-box; }
.onsite-visit--joined { height: 100dvh; overflow: hidden; }

.onsite-visit__theme-toggle {
  position: fixed;
  z-index: 22;
  top: 18px;
  right: 20px;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--ov-line);
  border-radius: 999px;
  background: rgba(16, 28, 48, .82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  color: var(--ov-sub);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.onsite-visit__theme-toggle:hover { border-color: var(--ov-line-strong); color: #fff; }
.onsite-visit__theme-toggle:focus-visible { outline: 2px solid var(--ov-primary); outline-offset: 3px; }
.onsite-visit__header-actions .onsite-visit__theme-toggle { position: static; width: auto; min-height: 40px; padding: 0 11px; box-shadow: none; background: transparent; }

.onsite-visit--center {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.onsite-visit--center h1,
.onsite-visit--center p { margin: 0; }
.onsite-visit--center h1 { color: #fff; }
.onsite-visit--center p { color: #c8d4e5; }
.onsite-visit__spin { animation: ov-spin 1s linear infinite; }

.onsite-visit__header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  width: 100%;
  height: 64px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 clamp(18px, 3vw, 32px);
  border-bottom: 1px solid var(--ov-line);
  background: rgba(7, 20, 38, .88);
  backdrop-filter: blur(14px);
}

.onsite-visit__header--viewer { grid-template-columns: minmax(0, 1fr) auto; }

.onsite-visit__brand { display: flex; min-width: 0; align-items: center; gap: 11px; }
.onsite-visit__live-dot { position: relative; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #35b37e; box-shadow: 0 0 0 5px rgba(53, 179, 126, .11); }
.onsite-visit__brand > div { display: grid; min-width: 0; gap: 2px; }
.onsite-visit__brand strong { overflow: hidden; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.onsite-visit__brand span:not(.onsite-visit__live-dot) { color: var(--ov-muted); font-size: 10px; font-weight: 650; }

.onsite-visit__header-actions { display: flex; align-items: center; gap: 8px; }
.onsite-visit__header-actions > button,
.onsite-visit__notifications > button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--ov-line);
  border-radius: 10px;
  background: transparent;
  color: var(--ov-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.onsite-visit__header-actions > button:not(.onsite-visit__header-login),
.onsite-visit__notifications > button { width: 40px; padding: 0; }
.onsite-visit__header-actions > button:hover,
.onsite-visit__notifications > button:hover { border-color: var(--ov-line-strong); color: #fff; }
.onsite-visit__header-actions .onsite-visit__theme-toggle { width: 40px; padding: 0; }
.onsite-visit__header-actions .onsite-visit__theme-toggle span,
.onsite-visit__header-actions .networking-chat-trigger span { display: none; }
.onsite-visit__header-actions .networking-chat-trigger { width: 40px; height: 40px; justify-content: center; padding: 0; border-color: var(--ov-line); border-radius: 10px; background: transparent; color: var(--ov-muted); }
.onsite-visit__header-actions .networking-chat-trigger:hover { border-color: var(--ov-line-strong); color: #fff; }
.onsite-visit__header-actions .onsite-visit__header-login { border-color: var(--ov-line); background: transparent; color: var(--ov-sub); }
.onsite-visit__header-actions .onsite-visit__header-login svg { color: var(--ov-muted); }
.onsite-visit__header-actions .onsite-visit__header-login:hover { border-color: var(--ov-line-strong); background: var(--ov-primary-soft); color: #fff; }

.onsite-visit__notifications { position: relative; }
.onsite-visit__notification-trigger { position: relative; }
.onsite-visit__notification-trigger.is-open { border-color: var(--ov-line-strong); background: var(--ov-primary-soft); color: #fff; }
.onsite-visit__notification-trigger > span { position: absolute; top: -5px; right: -5px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 5px; border: 2px solid #071426; border-radius: 999px; background: #e75b68; color: #fff; font-size: 10px; font-weight: 850; line-height: 1; }
.onsite-visit__notification-panel { position: absolute; top: calc(100% + 9px); right: 0; width: min(360px, calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--ov-line); border-radius: 14px; background: #0a182a; box-shadow: 0 22px 55px rgba(0, 0, 0, .42); color: #fff; text-align: left; }
.onsite-visit__notification-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 16px 13px; border-bottom: 1px solid var(--ov-line); }
.onsite-visit__notification-panel > header strong { font-size: 17px; }
.onsite-visit__notification-panel > header small { color: var(--ov-muted); font-size: 12px; }
.onsite-visit__notification-retention { margin: 0; padding: 11px 16px; border-bottom: 1px solid rgba(105, 165, 255, .16); background: rgba(105, 165, 255, .08); color: #aac5e7; font-size: 13px; line-height: 1.5; }
.onsite-visit__notification-list { max-height: min(430px, 60dvh); overflow-y: auto; }
.onsite-visit__notification-list > button { position: relative; display: block; width: 100%; padding: 16px 40px 15px 16px; border: 0; border-bottom: 1px solid rgba(147, 174, 208, .1); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.onsite-visit__notification-list > button:last-child { border-bottom: 0; }
.onsite-visit__notification-list > button:hover { background: rgba(105, 165, 255, .07); }
.onsite-visit__notification-list > button.is-unread::after { position: absolute; top: 20px; right: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--ov-primary); content: ""; }
.onsite-visit__notification-list strong { display: block; margin-top: 8px; color: #f5f8fc; font-size: 14px; line-height: 1.45; }
.onsite-visit__notification-list p { margin: 5px 0 0; color: var(--ov-sub); font-size: 13px; line-height: 1.55; }
.onsite-visit__notification-list time { display: block; margin-top: 8px; color: var(--ov-muted); font-size: 11px; }
.onsite-visit__notification-kind { display: inline-flex; min-height: 20px; align-items: center; padding: 0 8px; border: 1px solid #34455d; border-radius: 999px; color: #93a5bd; font-size: 10px; font-weight: 800; }
.onsite-visit__notification-kind.is-onsite { border-color: rgba(105, 165, 255, .35); background: rgba(105, 165, 255, .1); color: #9fc4f4; }
.onsite-visit__notification-empty { margin: 0; padding: 38px 18px; color: var(--ov-muted); font-size: 13px; text-align: center; }

.onsite-visit__header > button,
.onsite-visit__profile-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ov-line);
  border-radius: 10px;
  background: var(--ov-panel);
  color: var(--ov-muted);
  cursor: pointer;
  touch-action: manipulation;
}

.onsite-visit__header > button {
  border-color: var(--ov-line);
  background: transparent;
  color: var(--ov-muted);
}

.onsite-visit__header > button:hover { border-color: var(--ov-line-strong); color: #fff; }

.onsite-visit__gate {
  width: min(520px, calc(100% - 40px));
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(56px, 11vh, 104px) 0 64px;
}

.onsite-visit__gate-copy { margin-bottom: 34px; }

.onsite-visit__eyebrow {
  display: block;
  color: var(--ov-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.onsite-visit__gate-copy .onsite-visit__eyebrow,
.onsite-visit__viewer-head .onsite-visit__eyebrow { color: var(--ov-primary); }

.onsite-visit__gate-copy h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.035em;
  color: #fff;
}

.onsite-visit__gate-copy > p {
  margin: 10px 0 0;
  color: #aabdd5;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.onsite-visit__form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.onsite-visit__fields { display: grid; gap: 22px; }

.onsite-visit__form label,
.onsite-visit__profile-editor label {
  display: grid;
  gap: 8px;
  color: var(--ov-sub);
  font-size: 13px;
  font-weight: 750;
}

.onsite-visit__form label > span { display: flex; align-items: baseline; gap: 4px; justify-content: flex-start; }
.onsite-visit__form label i { color: #ff9c9c; font-style: normal; }
.onsite-visit__profile-editor label i { margin-left: 3px; color: #ff9c9c; font-style: normal; }
.onsite-visit__form label small,
.onsite-visit__profile-editor label small { color: var(--ov-muted); font-size: 12px; font-weight: 500; }

.onsite-visit__form input,
.onsite-visit__form textarea,
.onsite-visit__profile-editor input,
.onsite-visit__profile-editor textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--ov-line-strong);
  border-radius: 10px;
  outline: 0;
  background: #09172a;
  color: var(--ov-text);
  font: inherit;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.5;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.onsite-visit__form input::placeholder,
.onsite-visit__form textarea::placeholder,
.onsite-visit__profile-editor input::placeholder,
.onsite-visit__profile-editor textarea::placeholder { color: #7388a4; }

.onsite-visit__form input:focus,
.onsite-visit__form textarea:focus,
.onsite-visit__profile-editor input:focus,
.onsite-visit__profile-editor textarea:focus {
  border-color: var(--ov-primary);
  box-shadow: 0 0 0 2px rgba(105, 165, 255, .08);
}

.onsite-visit__form textarea,
.onsite-visit__profile-editor textarea {
  min-height: 96px;
  resize: vertical;
}

.onsite-visit__form > button,
.onsite-visit__profile-editor > button[type="submit"] {
  width: 100%;
  min-height: 52px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ov-primary);
  color: #071426;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.onsite-visit__form > button { margin-top: 20px; }

.onsite-visit__form > button:hover,
.onsite-visit__profile-editor > button[type="submit"]:hover {
  background: var(--ov-primary-hover);
  box-shadow: 0 12px 28px rgba(40, 104, 198, .2);
  transform: translateY(-1px);
}

.onsite-visit__form > button:disabled,
.onsite-visit__profile-editor > button[type="submit"]:disabled { cursor: wait; opacity: .62; transform: none; }

.onsite-visit__error {
  margin: 16px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 130, 130, .25);
  border-radius: 8px;
  background: rgba(255, 90, 90, .08);
  color: #ffaaaa;
  font-size: 12px;
  line-height: 1.5;
}

.onsite-visit__viewer {
  display: flex;
  width: 100%;
  height: calc(100dvh - 64px);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.onsite-visit__gate--member-card { width: min(560px, calc(100% - 40px)); }
.onsite-visit .business-card-carousel .onsite-visit__member-card { height:100%; margin-bottom:0; }
.onsite-visit .business-card-carousel--dialog .business-card-carousel__side { position:relative; top:auto; left:auto; width:min(200px, 42%); margin:16px 0 0 auto; transform:none; }
.onsite-visit__member-card,
.onsite-visit__guest-card-preview { width: 100%; margin: 0 auto 28px; }
.onsite-visit__card-flip { position: relative; display: block; width: 100%; aspect-ratio: 9 / 5; padding: 0; border: 0; background: transparent; text-align: left; cursor: grab; perspective: 1200px; }
.onsite-visit__card-flip-hint:focus-visible { outline: 3px solid var(--ov-primary); outline-offset: 3px; }
.onsite-visit__card-flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s ease; }
.onsite-visit__card-flip.is-flipped .onsite-visit__card-flip-inner { transform: rotateY(180deg); }
.onsite-visit__card-face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.onsite-visit__card-face--back { transform: rotateY(180deg); }
.onsite-visit__card-image { box-sizing: border-box; display: block; width: 100%; height: 100%; border: 1px solid var(--ov-line); background: #fff; object-fit: contain; box-shadow: 0 14px 38px rgba(0, 0, 0, .18); }
.onsite-visit__card-flip-hint { position: absolute; left: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #dce2ed; border-radius: 5px; background: rgba(255, 255, 255, .95); color: #38465c; font:inherit; font-size: 11px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); cursor:pointer; }
.onsite-visit__card-flip:hover .onsite-visit__card-flip-hint { border-color: var(--ov-primary); }
.onsite-visit__card-face .bcard { height: 100%; }
.onsite-visit__guest-card-preview .bcard,
.onsite-visit__member-card .bcard { max-width: none; }
.onsite-visit__guest-card-preview { padding: 12px; border: 1px solid var(--ov-line); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.onsite-visit__card-empty { display: grid; min-height: 210px; place-items: center; align-content: center; gap: 9px; margin-bottom: 24px; border: 1px dashed var(--ov-line-strong); border-radius: 10px; color: var(--ov-muted); text-align: center; }
.onsite-visit__card-empty svg { width: 28px; height: 28px; color: var(--ov-primary); }
.onsite-visit__card-empty strong { color: var(--ov-sub); font-size: 15px; }
.onsite-visit__card-empty span { font-size: 12px; }
.onsite-visit__member-card-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
.onsite-visit__member-card-actions > button:only-child { grid-column:1 / -1; }
.onsite-visit__member-card-actions button,
.onsite-visit__card-edit-action { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border: 1px solid var(--ov-primary); border-radius: 9px; background: var(--ov-primary); color: #071426; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.onsite-visit__member-card-actions button.is-secondary { border-color: var(--ov-line-strong); background: transparent; color: var(--ov-sub); }
.onsite-visit__member-card-actions button:disabled { cursor: wait; opacity: .6; }
@media (prefers-reduced-motion: reduce) {
  .onsite-visit__card-flip-inner { transition: none; }
}

.onsite-visit__viewer-head { margin-bottom: 12px; }
.onsite-visit__viewer-head h1 { margin: 0; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }

.onsite-visit__checkin-summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  padding: 10px 12px;
  border: 1px solid rgba(76, 213, 159, .25);
  border-radius: 10px;
  background: rgba(41, 116, 89, .12);
  color: #78dfb8;
}

.onsite-visit__checkin-summary > svg { width: 19px; height: 19px; }
.onsite-visit__checkin-summary > div { display: grid; gap: 2px; }
.onsite-visit__checkin-summary strong { color: #eafff7; font-size: 12px; }
.onsite-visit__checkin-summary span { color: #a9c4bb; font-size: 10px; }
.onsite-visit__checkin-summary button { display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 9px; border: 1px solid rgba(125, 229, 189, .16); border-radius: 7px; background: transparent; color: #91b7a8; font-size: 10px; font-weight: 650; cursor: pointer; }
.onsite-visit__checkin-summary button:hover { border-color: rgba(125, 229, 189, .28); color: #bcebd8; }

.onsite-visit__map-shell { position: relative; min-width: 0; flex: 1; height: 100%; overflow: hidden; background: #091629; }
.onsite-visit__agent { display: flex; width: 360px; min-width: 0; flex: 0 0 360px; flex-direction: column; border-left: 1px solid var(--ov-line); background: var(--ov-panel); color: var(--ov-text); }
.onsite-visit__agent > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--ov-line); }
.onsite-visit__agent > header > div { display: flex; align-items: center; gap: 9px; font-size: 15px; }
.onsite-visit__agent > header svg { color: var(--ov-primary); }
.onsite-visit__agent > header button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ov-muted); cursor: pointer; }
.onsite-visit__agent-content { min-height: 0; flex: 1; overflow-y: auto; padding: 22px 20px; }
.onsite-visit__agent-intro { margin: 0 0 20px; color: var(--ov-sub); font-size: 13px; line-height: 1.6; }
.onsite-visit__agent-suggestions { display: grid; gap: 8px; }
.onsite-visit__agent-suggestions button { width: 100%; padding: 12px; border: 1px solid var(--ov-line); border-radius: 7px; background: transparent; color: var(--ov-text); font: inherit; font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer; }
.onsite-visit__agent-suggestions button:hover { border-color: var(--ov-primary); background: var(--ov-primary-soft); }
.onsite-visit__agent-question { margin: 0 0 20px; padding: 12px; border-radius: 7px; background: var(--ov-primary-soft); color: var(--ov-text); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.onsite-visit__agent-feedback { margin: 20px 0; color: var(--ov-muted); font-size: 12px; line-height: 1.6; }
.onsite-visit__agent-feedback.is-error { color: #db777e; }
.onsite-visit__agent-feedback button { margin-left: 9px; border: 0; background: transparent; color: var(--ov-primary); font: inherit; font-weight: 750; cursor: pointer; }
.onsite-visit__agent-results h3 { margin: 0 0 10px; font-size: 12px; color: var(--ov-muted); }
.onsite-visit__agent-results article { padding: 16px 0; border-top: 1px solid var(--ov-line); }
.onsite-visit__agent-person { display: flex; width: 100%; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--ov-text); font: inherit; text-align: left; cursor: pointer; }
.onsite-visit__agent-person > span:nth-child(2) { display: grid; min-width: 0; flex: 1; gap: 2px; }
.onsite-visit__agent-person strong, .onsite-visit__agent-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onsite-visit__agent-person strong { font-size: 13px; }
.onsite-visit__agent-person small { color: var(--ov-muted); font-size: 11px; }
.onsite-visit__agent-view { color: var(--ov-primary); font-size: 10px; white-space: nowrap; }
.onsite-visit__agent-results article > p { margin: 11px 0 0; color: var(--ov-sub); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.onsite-visit__agent-icebreaker { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--ov-primary); }
.onsite-visit__agent-icebreaker span { color: var(--ov-muted); font-size: 10px; }
.onsite-visit__agent-icebreaker p { margin: 4px 0 0; color: var(--ov-sub); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.onsite-visit__agent-form { padding: 14px 20px 20px; border-top: 1px solid var(--ov-line); }
.onsite-visit__agent-form label { display: block; margin-bottom: 8px; color: var(--ov-muted); font-size: 11px; font-weight: 700; }
.onsite-visit__agent-form > div { display: flex; align-items: flex-end; gap: 8px; padding: 8px; border: 1px solid var(--ov-line-strong); border-radius: 8px; }
.onsite-visit__agent-form > div:focus-within { border-color: var(--ov-primary); }
.onsite-visit__agent-form textarea { min-width: 0; flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--ov-text); font: inherit; font-size: 12px; line-height: 1.5; }
.onsite-visit__agent-form button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 6px; background: var(--ov-primary); color: white; cursor: pointer; }
.onsite-visit__agent-form button:disabled { opacity: .45; cursor: default; }
.onsite-visit__seat-status {
  position: absolute;
  z-index: 9;
  top: 24px;
  left: 24px;
  display: grid;
  min-width: 250px;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--ov-line);
  border-radius: 8px;
  background: rgba(11, 25, 44, .92);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .2);
  backdrop-filter: blur(16px);
}
.onsite-visit__seat-status-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 7px; background: var(--ov-primary-soft); color: var(--ov-primary); }
.onsite-visit__seat-status.is-confirmed .onsite-visit__seat-status-icon { background: rgba(52, 179, 126, .12); color: #65d3a7; }
.onsite-visit__seat-status > div { display: grid; min-width: 0; gap: 2px; }
.onsite-visit__seat-status > div > span { color: var(--ov-muted); font-size: 10px; font-weight: 700; }
.onsite-visit__seat-status strong { overflow: hidden; color: var(--ov-text); font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.onsite-visit__seat-status > button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--ov-muted); cursor: pointer; }
.onsite-visit__seat-status > button:hover { background: var(--ov-primary-soft); color: var(--ov-primary); }
.onsite-visit__map-error { position: absolute; z-index: 10; top: 96px; left: 24px; max-width: min(420px, calc(100% - 48px)); margin: 0; padding: 10px 12px; border: 1px solid rgba(255, 130, 130, .25); border-radius: 7px; background: rgba(53, 18, 29, .92); color: #ffb3ba; font-size: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.onsite-visit__map-guide { position: absolute; z-index: 8; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; border: 1px solid var(--ov-line); border-radius: 7px; background: rgba(11, 25, 44, .88); color: var(--ov-muted); font-size: 11px; font-weight: 650; pointer-events: none; backdrop-filter: blur(14px); }
.onsite-visit__map-hint-mobile { display:none; }
.onsite-visit__map-scroll { position: absolute; inset: 0; overflow: auto; max-height: none; padding: 88px 72px 104px; border: 0; border-radius: 0; background: #091629; box-shadow: none; overscroll-behavior: contain; touch-action: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onsite-visit__map-scroll::-webkit-scrollbar { display: none; }
.onsite-visit__map-scroll:focus-visible { outline: 2px solid var(--ov-primary); outline-offset: 3px; }
.onsite-visit__map-stage { position: relative; margin: 100vh 100vw; }
.onsite-visit__map { position: relative; width: 1000px; height: 620px; transform-origin: left top; background-color: #0b1a2e; background-image: linear-gradient(rgba(105, 165, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 165, 255, .07) 1px, transparent 1px); background-size: 40px 40px; }
.onsite-visit__map-controls { position: absolute; z-index: 9; bottom: 24px; left: 50%; display: flex; height: 46px; align-items: center; gap: 3px; padding: 5px; border: 1px solid var(--ov-line); border-radius: 9px; background: rgba(11, 25, 44, .92); box-shadow: 0 12px 36px rgba(0, 0, 0, .24); transform: translateX(-50%); backdrop-filter: blur(16px); }
.onsite-visit__map-controls button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--ov-muted); cursor: pointer; }
.onsite-visit__map-controls button:hover:not(:disabled) { background: var(--ov-primary-soft); color: var(--ov-primary); }
.onsite-visit__map-controls button:disabled { cursor: default; opacity: .35; }
.onsite-visit__map-controls output { min-width: 52px; color: var(--ov-sub); font-size: 11px; font-weight: 800; text-align: center; }
.onsite-visit__table-jump { display: inline-flex; height: 34px; align-items: center; gap: 5px; padding: 0 7px; color: var(--ov-sub); }
.onsite-visit__table-jump select { width: 110px; border: 0; outline: 0; background: transparent; color: var(--ov-sub); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.onsite-visit__table-jump select option { color: #1d2939; }
.onsite-visit__table-jump:focus-within { border-radius: 5px; outline: 2px solid var(--ov-primary); }
.onsite-visit__map-controls-divider { width: 1px; height: 20px; margin: 0 3px; background: var(--ov-line); }
.onsite-visit__map-legend { position: absolute; z-index: 8; top: 24px; right: 24px; display: flex; min-height: 36px; align-items: center; gap: 7px; margin: 0; padding: 0 11px; border: 1px solid var(--ov-line); border-radius: 7px; background: rgba(11, 25, 44, .88); color: var(--ov-muted); font-size: 10px; font-weight: 650; pointer-events: none; backdrop-filter: blur(14px); }
.onsite-visit__map-legend i,
.onsite-visit__map-legend span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.onsite-visit__map-legend i { background: var(--ov-primary); }
.onsite-visit__map-legend span { margin-left: 5px; background: #35b37e; }
.onsite-visit__participants { position:absolute; z-index:12; top:0; right:0; bottom:0; display:flex; width:min(380px, 100%); flex-direction:column; border-left:1px solid var(--ov-line); background:var(--ov-panel); box-shadow:-16px 0 40px rgba(0, 0, 0, .18); }
.onsite-visit__participants > header { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:12px; padding:0 20px; border-bottom:1px solid var(--ov-line); }
.onsite-visit__participants > header div { display:grid; gap:2px; }
.onsite-visit__participants > header strong { font-size:16px; }
.onsite-visit__participants > header span { color:var(--ov-muted); font-size:11px; }
.onsite-visit__participants > header button { display:grid; width:32px; height:32px; place-items:center; border:0; background:transparent; color:var(--ov-muted); cursor:pointer; }
.onsite-visit__participants-search { display:flex; min-height:40px; align-items:center; gap:9px; margin:16px 20px 8px; padding:0 11px; border:1px solid var(--ov-line-strong); border-radius:6px; color:var(--ov-muted); }
.onsite-visit__participants-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ov-text); font:inherit; font-size:12px; }
.onsite-visit__participants-list { min-height:0; overflow-y:auto; padding:0 20px 20px; }
.onsite-visit__participants-list > button { display:flex; width:100%; min-height:70px; align-items:center; gap:11px; padding:10px 0; border:0; border-bottom:1px solid var(--ov-line); background:transparent; color:var(--ov-text); text-align:left; cursor:pointer; }
.onsite-visit__participants-list > button:hover { color:var(--ov-primary); }
.onsite-visit__participants-avatar { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; overflow:hidden; border-radius:50%; background:var(--ov-primary-soft); color:var(--ov-primary); font-size:14px; font-weight:800; }
.onsite-visit__participants-avatar img { width:100%; height:100%; object-fit:cover; }
.onsite-visit__participants-info { display:grid; min-width:0; flex:1; gap:2px; }
.onsite-visit__participants-info strong,.onsite-visit__participants-info > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.onsite-visit__participants-info strong { font-size:13px; }
.onsite-visit__participants-info strong small { margin-left:5px; color:var(--ov-primary); font-size:10px; }
.onsite-visit__participants-info > span { color:var(--ov-muted); font-size:11px; }
.onsite-visit__participants-list em { color:var(--ov-muted); font-size:10px; font-style:normal; white-space:nowrap; }
.onsite-visit__participants-list > p { padding:24px 0; color:var(--ov-muted); font-size:12px; text-align:center; }
.onsite-visit__table,
.onsite-visit__element,
.onsite-visit__seat { position: absolute; }
.onsite-visit__table { display: grid; place-items: center; padding: 0; border: 1px solid #527fac; border-radius: 9px; background: #193a5f; color: #dcecff; font: inherit; font-size: 12px; cursor: pointer; }
.onsite-visit__table:hover, .onsite-visit__table:focus-visible { outline: 3px solid var(--ov-primary); outline-offset: 2px; }
.onsite-visit__table--round { border-radius: 50%; }
.onsite-visit__element { display: grid; place-items: center; color: #bbcae0; font-size: 11px; }
.onsite-visit__element--wall { background: #87a1bf; }
.onsite-visit__element--stage { border: 1px solid #a49be8; background: #6258a9; color: #fff; }
.onsite-visit__element--entrance { border: 1px dashed var(--ov-primary); color: var(--ov-primary); }
.onsite-visit__element--text { background: transparent; }
.onsite-visit__element--aisle { z-index: 1; border: 1px dashed rgba(105, 165, 255, .55); background: repeating-linear-gradient(135deg, rgba(105, 165, 255, .09) 0 10px, rgba(105, 165, 255, .025) 10px 20px); color: #9bbce6; }
.onsite-visit__table > strong,
.onsite-visit__element > span,
.onsite-visit__seat-content { transform: rotate(var(--content-rotation, 0deg)); }

.onsite-visit__seat { z-index: 3; display: grid; width: 76px; min-height: 72px; translate: -20px -18px; justify-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--ov-muted); touch-action: manipulation; }
.onsite-visit__seat.is-occupied { translate: -20px -40px; }
.onsite-visit__seat:disabled { cursor: default; opacity: 1; pointer-events: none; }
.onsite-visit__seat-content { display: grid; justify-items: center; gap: 2px; }
.onsite-visit__avatar { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid #6f91b8; border-radius: 50%; background: #1d456f; color: #d6e8ff; font-size: 11px; font-weight: 850; }
.onsite-visit__avatar img,
.onsite-visit__profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.onsite-visit__seat-person-name { max-width: 76px; overflow: hidden; padding: 1px 5px; border-radius: 4px; background: rgba(4, 13, 25, .72); color: #e8f2ff; font-size: 10px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.onsite-visit__seat-code { margin-top: 1px; color: #8fa4bf; font-size: 9px; font-weight: 700; line-height: 1.2; }
.onsite-visit__seat:not(.is-occupied) .onsite-visit__avatar { border-color: rgba(111, 145, 184, .38); background: rgba(29, 69, 111, .22); }
.onsite-visit__seat:not(.is-occupied) { cursor: pointer; }
.onsite-visit__seat:not(.is-occupied):hover .onsite-visit__avatar { border-color: var(--ov-primary); background: rgba(105, 165, 255, .18); box-shadow: 0 0 0 5px rgba(105, 165, 255, .1); }
.onsite-visit__seat.is-occupied .onsite-visit__avatar { border-color: #718dab; box-shadow: none; }
.onsite-visit__seat.is-mine { z-index: 5; }
.onsite-visit__seat.is-mine .onsite-visit__avatar { border: 2px solid #7de5bd; box-shadow: 0 0 0 5px rgba(74, 211, 158, .2); }
.onsite-visit__legend { color: var(--ov-muted); font-size: 11px; }
.onsite-visit__legend i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--ov-primary); }

.onsite-visit__modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: var(--color-backdrop, rgba(10, 12, 30, .48)); backdrop-filter: blur(5px); }
.onsite-visit__modal-backdrop--confirm { z-index: 60; }
.onsite-visit__profile,
.onsite-visit__login-choice,
.onsite-visit__profile-editor,
.onsite-visit__card-dialog { position: relative; width: min(420px, 100%); padding: 34px; border: 1px solid var(--ov-line); border-radius: 16px; background: var(--ov-panel); box-shadow: var(--shadow-lg); }
.onsite-visit__profile { width: min(520px, 100%); max-height:calc(100dvh - 40px); overflow-y:auto; text-align: left; }
.onsite-visit__profile-close { position: absolute; top: 12px; right: 12px; }
.onsite-visit__profile-avatar { display: grid; width: 84px; height: 84px; place-items: center; overflow: hidden; margin: 0 0 22px; border: 2px solid var(--ov-primary); border-radius: 50%; background: var(--ov-primary-soft); color: var(--ov-primary); font-size: 22px; font-weight: 850; }
.onsite-visit__profile h2 { margin: 8px 0 5px; font-weight: 800; }
.onsite-visit__profile p,
.onsite-visit__profile small { color: var(--ov-muted); }
.onsite-visit__profile-affiliation { margin: 0; }
.onsite-visit__profile-seat { display:inline-flex; margin-top:9px; padding:4px 7px; border:1px solid var(--ov-line); border-radius:4px; color:var(--ov-muted); font-size:11px; }
.onsite-visit__profile-card { margin-top:20px; padding-top:18px; border-top:1px solid var(--ov-line); }
.onsite-visit__profile-card h3 { margin:0 0 10px; color:var(--ov-sub); font-size:12px; }
.onsite-visit__profile-card img { display:block; width:100%; aspect-ratio:9 / 5; object-fit:contain; background:#fff; }
.onsite-visit__profile-card .bcard { max-width:none; box-shadow:none; }
.onsite-visit__profile-card > a { color:var(--ov-primary); font-size:12px; font-weight:700; }
.onsite-visit__profile-edit { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; border: 1px solid var(--ov-line); border-radius: 9px; background: #0b192c; color: #fff; font: inherit; font-size: 13px; font-weight: 750; text-decoration: none; cursor: pointer; }
.onsite-visit__profile-edit:hover { border-color: rgba(105, 165, 255, .48); background: var(--ov-primary-soft); }
.onsite-visit__profile-edit:focus-visible { outline: 2px solid var(--ov-primary); outline-offset: 2px; }
.onsite-visit__profile-edit svg { color: var(--ov-primary); }
.onsite-visit__profile-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 22px; }
.onsite-visit__profile-actions button { display: grid; min-width: 0; min-height: 72px; place-items: center; align-content: center; gap: 7px; padding: 9px 5px; border: 1px solid var(--ov-line); border-radius: 9px; background: #0b192c; color: var(--ov-sub); font: inherit; font-size: 10px; font-weight: 700; line-height: 1.25; cursor: pointer; }
.onsite-visit__profile-actions button:hover:not(:disabled) { border-color: rgba(105, 165, 255, .48); background: var(--ov-primary-soft); color: #fff; }
.onsite-visit__profile-actions button:focus-visible { outline: 2px solid var(--ov-primary); outline-offset: 2px; }
.onsite-visit__profile-actions button:disabled { cursor: default; opacity: .48; }
.onsite-visit__profile-actions svg { width: 19px; height: 19px; color: var(--ov-primary); }
.onsite-visit__profile-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ov-line); }
.onsite-visit__profile-section--encounters { margin-top: 18px; }
.onsite-visit__profile-section h3 { margin: 0 0 9px; color: var(--ov-sub); font-size: 12px; }
.onsite-visit__profile-section > strong { display: block; margin-bottom: 5px; font-size: 14px; }
.onsite-visit__profile-section p { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.onsite-visit__profile-section { overflow-wrap: anywhere; }
.onsite-visit__profile-section > a { display: inline-block; margin-top: 10px; color: var(--ov-primary); font-size: 12px; font-weight: 750; }
.onsite-visit__profile-feedback { margin: 18px 0 0; color: var(--ov-muted); font-size: 12px; line-height: 1.5; }
.onsite-visit__profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.onsite-visit__profile-tags span { padding: 4px 8px; border: 1px solid var(--ov-line); border-radius: 5px; color: var(--ov-sub); font-size: 11px; line-height: 1.4; }
.onsite-visit__profile-history article { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--ov-line); }
.onsite-visit__profile-history article:last-child { border-bottom: 0; }
.onsite-visit__profile-history article > span { color: var(--ov-primary); font-size: 10px; font-weight: 750; }
.onsite-visit__profile-history article > strong { color: var(--ov-text); font-size: 13px; }
.onsite-visit__profile-history article > small,
.onsite-visit__profile-history article > time { color: var(--ov-muted); font-size: 11px; }
.onsite-visit__profile-history article > p { margin-top: 5px; font-size: 12px; }
.onsite-visit__profile-history .onsite-visit__profile-tags { margin-top: 5px; }

.onsite-visit__login-choice-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: var(--ov-primary-soft); color: var(--ov-primary); }
.onsite-visit__login-choice h2,
.onsite-visit__profile-editor h2 { margin: 10px 0 8px; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.035em; }
.onsite-visit__login-choice > p,
.onsite-visit__profile-editor > p:not(.onsite-visit__error) { margin: 0 0 22px; color: var(--ov-muted); font-size: 13px; line-height: 1.65; }
.onsite-visit__login-choice-actions { display: grid; gap: 9px; }
.onsite-visit__login-choice-actions button { min-height: 48px; border: 1px solid var(--ov-line-strong); border-radius: 8px; background: var(--ov-panel); color: var(--ov-sub); font-size: 14px; font-weight: 700; cursor: pointer; }
.onsite-visit__login-choice-actions button:first-child { border-color: var(--ov-primary); background: var(--ov-primary); color: #071426; }
.onsite-visit__login-required .onsite-visit__login-choice-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onsite-visit__login-required .onsite-visit__login-choice-actions button:first-child { border-color: var(--ov-line-strong); background: var(--ov-panel); color: var(--ov-sub); }
.onsite-visit__login-required .onsite-visit__login-choice-actions button:last-child { border-color: var(--ov-primary); background: var(--ov-primary); color: #071426; }
.onsite-visit__login-choice > small { display: block; margin-top: 15px; color: var(--ov-muted); font-size: 11px; line-height: 1.5; }
.onsite-visit__profile-editor { width: min(460px, 100%); }
.onsite-visit__card-dialog { width: min(560px, 100%); }
.onsite-visit__card-dialog-heading { display: flex; align-items: center; gap: 12px; margin: 2px 44px 24px 0; }
.onsite-visit__card-dialog-heading > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--ov-primary-soft); color: var(--ov-primary); }
.onsite-visit__card-dialog-heading h2 { margin: 0; font-size: 22px; letter-spacing: 0; }
.onsite-visit__card-dialog-heading p { margin: 4px 0 0; color: var(--ov-muted); font-size: 12px; }
.onsite-visit__member-card--dialog { margin-bottom: 18px; }
.onsite-visit__card-edit-action { width: 100%; }
.onsite-visit__guest-card-preview--dialog { margin: 18px 0 22px; padding: 8px; }
.onsite-visit__profile-editor-fields { display: grid; gap: 18px; margin-top: 24px; }
.onsite-visit__profile-editor-fields label > span { display: flex; align-items: baseline; gap: 3px; }
.onsite-visit__profile-editor > button[type="submit"] { margin-top: 18px; }

@keyframes ov-spin { to { transform: rotate(360deg); } }

[data-theme="light"] .onsite-visit {
  --ov-bg: #f4f7fb;
  --ov-panel: #ffffff;
  --ov-line: rgba(41, 72, 112, .14);
  --ov-line-strong: rgba(41, 72, 112, .27);
  --ov-primary: #286fd1;
  --ov-primary-hover: #1f61bb;
  --ov-primary-soft: rgba(40, 111, 209, .09);
  --ov-text: #18253a;
  --ov-sub: #344760;
  --ov-muted: #718198;
}

[data-theme="light"] .onsite-visit--center h1,
[data-theme="light"] .onsite-visit__brand strong,
[data-theme="light"] .onsite-visit__gate-copy h1,
[data-theme="light"] .onsite-visit__viewer-head h1 { color: #18253a; }
[data-theme="light"] .onsite-visit--center p { color: #66778e; }
[data-theme="light"] .onsite-visit__theme-toggle { background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(40, 67, 103, .1); }
[data-theme="light"] .onsite-visit__theme-toggle:hover,
[data-theme="light"] .onsite-visit__header-actions > button:hover,
[data-theme="light"] .onsite-visit__notifications > button:hover,
[data-theme="light"] .onsite-visit__notification-trigger.is-open,
[data-theme="light"] .onsite-visit__header-actions .onsite-visit__header-login:hover { color: #174f99; }
[data-theme="light"] .onsite-visit__header { background: rgba(255, 255, 255, .94); }
[data-theme="light"] .onsite-visit__header-actions .networking-chat-trigger:hover { color: #174f99; }
[data-theme="light"] .onsite-visit__header-actions .onsite-visit__header-login { color: var(--ov-sub); }
[data-theme="light"] .onsite-visit__notification-trigger > span { border-color: #f4f7fb; }
[data-theme="light"] .onsite-visit__notification-panel { background: #fff; box-shadow: 0 22px 55px rgba(40, 67, 103, .18); color: var(--ov-text); }
[data-theme="light"] .onsite-visit__notification-retention { border-bottom-color: rgba(40, 111, 209, .14); background: rgba(40, 111, 209, .07); color: #496b96; }
[data-theme="light"] .onsite-visit__notification-list > button { border-bottom-color: rgba(41, 72, 112, .09); }
[data-theme="light"] .onsite-visit__notification-list > button:hover { background: rgba(40, 111, 209, .055); }
[data-theme="light"] .onsite-visit__notification-list strong { color: #203149; }
[data-theme="light"] .onsite-visit__notification-kind { border-color: #d4dce7; color: #65758b; }
[data-theme="light"] .onsite-visit__notification-kind.is-onsite { border-color: rgba(40, 111, 209, .25); background: rgba(40, 111, 209, .07); color: #2867b9; }
[data-theme="light"] .onsite-visit__gate-copy > p { color: #62748b; }
[data-theme="light"] .onsite-visit__guest-card-preview { background: #f5f7fa; }
[data-theme="light"] .onsite-visit__member-card-actions button,
[data-theme="light"] .onsite-visit__card-edit-action { color: #fff; }
[data-theme="light"] .onsite-visit__member-card-actions button.is-secondary { color: var(--ov-sub); }
[data-theme="light"] .onsite-visit__form input,
[data-theme="light"] .onsite-visit__form textarea,
[data-theme="light"] .onsite-visit__profile-editor input,
[data-theme="light"] .onsite-visit__profile-editor textarea { background: #fff; color: var(--ov-text); }
[data-theme="light"] .onsite-visit__form input::placeholder,
[data-theme="light"] .onsite-visit__form textarea::placeholder,
[data-theme="light"] .onsite-visit__profile-editor input::placeholder,
[data-theme="light"] .onsite-visit__profile-editor textarea::placeholder { color: #97a4b5; }
[data-theme="light"] .onsite-visit__form > button,
[data-theme="light"] .onsite-visit__profile-editor > button[type="submit"],
[data-theme="light"] .onsite-visit__login-choice-actions button:first-child,
[data-theme="light"] .onsite-visit__login-required .onsite-visit__login-choice-actions button:last-child { color: #fff; }
[data-theme="light"] .onsite-visit__login-required .onsite-visit__login-choice-actions button:first-child { color: var(--ov-sub); }
[data-theme="light"] .onsite-visit__error { border-color: rgba(194, 60, 72, .2); background: rgba(209, 66, 79, .07); color: #b23946; }
[data-theme="light"] .onsite-visit__checkin-summary { border-color: rgba(28, 151, 107, .22); background: rgba(30, 166, 116, .08); color: #16825c; }
[data-theme="light"] .onsite-visit__checkin-summary strong { color: #176d50; }
[data-theme="light"] .onsite-visit__checkin-summary span { color: #5d7c70; }
[data-theme="light"] .onsite-visit__checkin-summary button { border-color: rgba(25, 128, 91, .18); color: #38745d; }
[data-theme="light"] .onsite-visit__checkin-summary button:hover { border-color: rgba(25, 128, 91, .34); color: #176d50; }
[data-theme="light"] .onsite-visit__map-hint { color: #53677f; }
[data-theme="light"] .onsite-visit__map-shell,
[data-theme="light"] .onsite-visit__map-scroll { background: #eef2f6; }
[data-theme="light"] .onsite-visit__seat-status,
[data-theme="light"] .onsite-visit__map-guide,
[data-theme="light"] .onsite-visit__map-controls,
[data-theme="light"] .onsite-visit__map-legend { border-color: rgba(42, 63, 91, .13); background: rgba(255, 255, 255, .92); box-shadow: 0 12px 34px rgba(42, 63, 91, .12); }
[data-theme="light"] .onsite-visit__seat-status.is-confirmed .onsite-visit__seat-status-icon { background: rgba(25, 151, 105, .1); color: #19825f; }
[data-theme="light"] .onsite-visit__map-error { border-color: rgba(194, 60, 72, .2); background: rgba(255, 248, 249, .96); color: #b23946; }
[data-theme="light"] .onsite-visit__map { background-color: #f9fbfd; background-image: linear-gradient(rgba(52, 103, 165, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(52, 103, 165, .09) 1px, transparent 1px); }
[data-theme="light"] .onsite-visit__table { border-color: #83a4ca; background: #d9e8f7; color: #294d73; }
[data-theme="light"] .onsite-visit__element { color: #536a84; }
[data-theme="light"] .onsite-visit__element--wall { background: #aebdcd; }
[data-theme="light"] .onsite-visit__element--stage { border-color: #8b83c9; background: #dedaf7; color: #51498c; }
[data-theme="light"] .onsite-visit__element--aisle { background: repeating-linear-gradient(135deg, rgba(40, 111, 209, .08) 0 10px, rgba(40, 111, 209, .018) 10px 20px); color: #4c72a2; }
[data-theme="light"] .onsite-visit__avatar { border-color: #89a4c3; background: #dce9f7; color: #294f78; }
[data-theme="light"] .onsite-visit__seat-person-name { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 5px rgba(40, 67, 103, .12); color: #243b57; }
[data-theme="light"] .onsite-visit__seat-code { color: #687c94; }
[data-theme="light"] .onsite-visit__seat:not(.is-occupied) .onsite-visit__avatar { border-color: rgba(72, 111, 157, .3); background: rgba(205, 221, 239, .55); }
[data-theme="light"] .onsite-visit__seat.is-occupied .onsite-visit__avatar { border-color: #829ab5; }
[data-theme="light"] .onsite-visit__modal-backdrop { --color-backdrop: rgba(31, 45, 66, .32); }
[data-theme="light"] .onsite-visit__profile-edit,
[data-theme="light"] .onsite-visit__profile-actions button { background: #f7f9fc; color: var(--ov-sub); }
[data-theme="light"] .onsite-visit__profile-edit:hover,
[data-theme="light"] .onsite-visit__profile-actions button:hover:not(:disabled) { border-color: rgba(40, 111, 209, .35); color: #174f99; }

@media (hover: hover) and (pointer: fine) {
  .onsite-visit__map-scroll { cursor: grab; }
  .onsite-visit__map-scroll.is-panning,
  .onsite-visit__map-scroll.is-panning * { cursor: grabbing !important; user-select: none; }
}

@media (max-width: 1099px) {
  .onsite-visit__viewer { position: relative; }
  .onsite-visit__agent { position: absolute; z-index: 13; top: 0; right: 0; bottom: 0; width: min(400px, 100%); flex-basis: auto; box-shadow: -16px 0 40px rgba(0, 0, 0, .2); }
}

@media (max-width: 760px) {
  .onsite-visit__theme-toggle { top: calc(12px + env(safe-area-inset-top)); right: 12px; min-height: 36px; padding: 0 10px; }
  .onsite-visit__header-actions .onsite-visit__theme-toggle { width: 36px; min-height: 36px; padding: 0; }
  .onsite-visit__header-actions .onsite-visit__theme-toggle span { display: none; }
  .onsite-visit__header { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; }
  .onsite-visit__brand { gap: 8px; }
  .onsite-visit__brand strong { font-size: 12px; }
  .onsite-visit__brand span:not(.onsite-visit__live-dot) { display: none; }
  .onsite-visit__live-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(53, 179, 126, .11); }
  .onsite-visit__header-actions { gap: 6px; }
  .onsite-visit__header-actions > button,
  .onsite-visit__notifications > button { min-height: 36px; height: 36px; }
  .onsite-visit__header-actions > button:not(.onsite-visit__header-login),
  .onsite-visit__notifications > button { width: 36px; }
  .onsite-visit__header-actions .networking-chat-trigger,
  .onsite-visit__header-actions .onsite-visit__theme-toggle { width: 36px; height: 36px; min-height: 36px; }
  .onsite-visit__notification-panel { position: fixed; top: calc(58px + env(safe-area-inset-top)); right: 12px; left: 12px; width: auto; }
  .onsite-visit__gate { width: calc(100% - 28px); min-height: 100dvh; padding: 48px 6px calc(28px + env(safe-area-inset-bottom)); }
  .onsite-visit__gate-copy { margin-bottom: 30px; }
  .onsite-visit__gate-copy h1 { font-size: 28px; }
  .onsite-visit__viewer { width: 100%; height: calc(100dvh - 56px - env(safe-area-inset-top)); padding: 0; }
  .onsite-visit__map-hint-desktop { display:none; }
  .onsite-visit__map-hint-mobile { display:inline; }
  .onsite-visit__map-scroll { width: 100%; max-height: none; margin: 0; padding: 76px 20px 118px; border-radius: 0; }
  .onsite-visit__seat-status { top: 12px; left: 12px; min-width: 0; width: calc(100% - 24px); grid-template-columns: 34px minmax(0, 1fr) 34px; padding: 8px; }
  .onsite-visit__seat-status-icon { width: 34px; height: 34px; }
  .onsite-visit__map-error { top: 76px; left: 12px; max-width: calc(100% - 24px); }
  .onsite-visit__map-guide { bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; min-height: 34px; padding: 0 10px; }
  .onsite-visit__map-controls { bottom: calc(14px + env(safe-area-inset-bottom)); height: 44px; }
  .onsite-visit__map-controls { max-width: calc(100% - 20px); }
  .onsite-visit__table-jump { padding: 0 3px; }
  .onsite-visit__table-jump select { width: 65px; }
  .onsite-visit__map-controls button { width: 30px; flex: 0 0 auto; }
  .onsite-visit__map-controls output { min-width: 38px; }
  .onsite-visit__map-controls-divider { margin: 0 1px; }
  .onsite-visit__map-legend { display: none; }
  .onsite-visit__participants { width:100%; }
  .onsite-visit__modal-backdrop { place-items: end center; padding: 0; }
  .onsite-visit__profile,
  .onsite-visit__login-choice,
  .onsite-visit__profile-editor,
  .onsite-visit__card-dialog { width: 100%; max-height: 88dvh; overflow-y: auto; padding: 30px 20px calc(22px + env(safe-area-inset-bottom)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 20px 20px 0 0; }
  .onsite-visit__member-card-actions { grid-template-columns: 1fr; }
  .onsite-visit__guest-card-preview { padding: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .onsite-visit__spin { animation: none; }
  .onsite-visit__form > button,
  .onsite-visit__profile-editor > button[type="submit"] { transition: none; }
}
.competition-admin-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(91, 140, 255, 0.18), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(58, 113, 255, 0.1), transparent 34%),
    linear-gradient(180deg, #101827 0%, #111c31 54%, #0c1423 100%);
  color: #f6f8ff;
}

.competition-admin-page *,
.competition-admin-page *::before,
.competition-admin-page *::after {
  box-sizing: border-box;
}

.competition-admin-page__grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(213, 226, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213, 226, 255, 0.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    rgba(0, 0, 0, 0.76) 62%,
    transparent 100%
  );
  pointer-events: none;
}

.competition-admin-page__glow {
  position: absolute;
  z-index: -2;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}

.competition-admin-page__glow--left {
  top: 250px;
  left: 20%;
  width: 360px;
  height: 360px;
  background: rgba(77, 124, 255, 0.11);
}

.competition-admin-page__glow--right {
  right: 18%;
  bottom: 12%;
  width: 320px;
  height: 320px;
  background: rgba(121, 168, 255, 0.1);
}

.competition-admin-page__top,
.competition-admin-page__hero {
  width: min(100% - 64px, 1180px);
  margin: 0 auto;
}

.competition-admin-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 86px;
  gap: 20px;
}

.competition-admin-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.competition-admin-page__brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.competition-admin-page__guide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(180, 202, 235, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #d8e5ff;
  padding: 0 19px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(12px);
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    color var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.competition-admin-page__guide:hover {
  border-color: rgba(121, 168, 255, 0.55);
  background: rgba(121, 168, 255, 0.12);
  color: #ffffff;
  transform: translateY(var(--organizer-hover-lift));
}

.competition-admin-page__hero {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 86px);
  padding: 74px 0 86px;
}

.competition-admin-page__console {
  width: min(100%, 720px);
  overflow: hidden;
  border: 1px solid rgba(180, 202, 235, 0.22);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(27, 39, 62, 0.95), rgba(14, 24, 40, 0.97));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(16px);
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) both;
}

.competition-admin-page__console-bar {
  display: flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid rgba(180, 202, 235, 0.16);
  padding: 0 22px;
  background: rgba(255, 255, 255, 0.015);
}

.competition-admin-page__console-title {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: #eef4ff;
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) var(--organizer-motion-stagger) both;
}

.competition-admin-page__console-title strong {
  overflow: hidden;
  font-size: 16px;
  font-weight: 850;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-admin-page__console-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #79a8ff;
  color: #08111f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.competition-admin-page__panel {
  padding: 26px 30px;
}

.competition-admin-page__panel--room {
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) calc(var(--organizer-motion-stagger) * 2) both;
}

.competition-admin-page__panel--code {
  border-top: 1px solid rgba(180, 202, 235, 0.14);
  background: rgba(5, 13, 25, 0.18);
  padding-top: 22px;
  padding-bottom: 24px;
  animation: organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) calc(var(--organizer-motion-stagger) * 3) both;
}

.competition-admin-page__panel-head {
  margin-bottom: 17px;
}

.competition-admin-page__panel-head span,
.competition-admin-page__code-head span {
  display: block;
  margin-bottom: 8px;
  color: #8ea9dc;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.competition-admin-page__panel-head h1 {
  margin: 0;
  color: #f8fbff;
  font-size: 24px;
  font-weight: 880;
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.competition-admin-page__room-list {
  display: grid;
  gap: 10px;
}

.competition-admin-page__room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(180, 202, 235, 0.18);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.034));
  padding: 17px 18px;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.competition-admin-page__room:hover {
  border-color: rgba(121, 168, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  transform: translateY(var(--organizer-hover-lift));
}

.competition-admin-page__room-main {
  min-width: 0;
}

.competition-admin-page__room-main small {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(121, 168, 255, 0.11);
  color: #8fb4fa;
  font-size: 10px;
  font-weight: 800;
}

.competition-admin-page__room-main strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-admin-page__room-main span {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #aebbd0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competition-admin-page__enter,
.competition-admin-page__code-row button {
  border: 0;
  border-radius: 12px;
  background: #79a8ff;
  color: #07111f;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.025em;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(121, 168, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.competition-admin-page__enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 43px;
  padding: 0 17px;
  text-decoration: none;
  white-space: nowrap;
}

.competition-admin-page__enter:hover,
.competition-admin-page__code-row button:not(:disabled):hover {
  background: #8db6ff;
  transform: translateY(var(--organizer-hover-lift));
  box-shadow:
    0 14px 28px rgba(121, 168, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.competition-admin-page__empty {
  border: 1px dashed rgba(180, 202, 235, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  padding: 20px 18px;
}

.competition-admin-page__empty strong {
  display: block;
  color: #aebbd0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.competition-admin-page__code-head {
  display: grid;
  gap: 0;
  margin-bottom: 14px;
  opacity: 0.78;
}

.competition-admin-page__code-head h2 {
  margin: 0;
  color: #dce8ff;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.competition-admin-page__code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 10px;
}

.competition-admin-page__code-row input {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid rgba(180, 202, 235, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  outline: none;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard);
}

.competition-admin-page__code-row input::placeholder {
  color: #8492aa;
}

.competition-admin-page__code-row input:focus {
  border-color: rgba(121, 168, 255, 0.62);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 0 0 4px rgba(121, 168, 255, 0.11);
}

.competition-admin-page__code-row button {
  height: 46px;
  padding: 0 14px;
  white-space: nowrap;
}

.competition-admin-page__code-row button:disabled {
  cursor: not-allowed;
  background: rgba(121, 168, 255, 0.34);
  color: rgba(7, 17, 31, 0.62);
  box-shadow: none;
  transform: none;
}

.competition-admin-page__feedback {
  margin-top: 12px;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

.competition-admin-page__feedback--success {
  border: 1px solid rgba(88, 210, 132, 0.28);
  background: rgba(88, 210, 132, 0.1);
  color: #b8f8cf;
}

.competition-admin-page__feedback--error {
  border: 1px solid rgba(255, 126, 126, 0.28);
  background: rgba(255, 126, 126, 0.1);
  color: #ffd3d3;
}

.competition-admin-page__loading-room,
.competition-admin-page__loading-code {
  display: grid;
  gap: 10px;
}

.competition-admin-page__loading-room {
  border: 1px solid rgba(180, 202, 235, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
  padding: 17px 18px;
}

.competition-admin-page__loading-code {
  grid-template-columns: minmax(0, 1fr) 122px;
}

.competition-admin-page__loading-room span,
.competition-admin-page__loading-code span {
  display: block;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.07),
    rgba(121, 168, 255, 0.18),
    rgba(255, 255, 255, 0.07)
  );
  background-size: 220% 100%;
  animation: competitionAdminLoading 1.15s ease-in-out infinite;
}

.competition-admin-page__loading-room span:first-child {
  width: min(72%, 360px);
}

.competition-admin-page__loading-room span:last-child {
  width: min(40%, 220px);
}

.competition-admin-page__loading-code span {
  height: 46px;
  border-radius: 12px;
}

@keyframes competitionAdminLoading {
  0% {
    background-position: 220% 0;
  }

  100% {
    background-position: -220% 0;
  }
}

@media (max-width: 860px) {
  .competition-admin-page {
    overflow: auto;
  }

  .competition-admin-page__top,
  .competition-admin-page__hero {
    width: min(100% - 40px, 720px);
  }

  .competition-admin-page__hero {
    min-height: auto;
    padding: 58px 0 72px;
  }

  .competition-admin-page__panel {
    padding: 24px 22px;
  }

  .competition-admin-page__panel--code {
    padding-top: 20px;
  }
}

@media (max-width: 640px) {
  .competition-admin-page__top,
  .competition-admin-page__hero {
    width: min(100% - 28px, 720px);
  }

  .competition-admin-page__top {
    gap: 12px;
    min-height: 76px;
  }

  .competition-admin-page__brand {
    min-width: 0;
    font-size: 18px;
  }

  .competition-admin-page__brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .competition-admin-page__brand img {
    width: 34px;
    height: 34px;
  }

  .competition-admin-page__guide {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }

  .competition-admin-page__hero {
    padding: 38px 0 48px;
  }

  .competition-admin-page__console {
    border-radius: 18px;
  }

  .competition-admin-page__console-bar {
    min-height: 56px;
    padding: 0 18px;
  }

  .competition-admin-page__panel {
    padding: 22px 18px;
  }

  .competition-admin-page__panel-head h1 {
    font-size: 22px;
  }

  .competition-admin-page__code-head h2 {
    font-size: 19px;
  }

  .competition-admin-page__room {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 17px;
  }

  .competition-admin-page__room-main strong,
  .competition-admin-page__room-main span {
    white-space: normal;
  }

  .competition-admin-page__enter {
    width: 100%;
  }

  .competition-admin-page__code-row {
    grid-template-columns: 1fr;
  }

  .competition-admin-page__loading-code {
    grid-template-columns: 1fr;
  }

  .competition-admin-page__code-row button {
    width: 100%;
  }
}

.competition-admin-page__footer {
  width: min(100% - 64px, 1180px);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .competition-admin-page__footer {
    width: min(100% - 28px, 720px);
  }
}
.submission-management { display: grid; gap: 16px; min-width: 0; color: #273247; }
.submission-management button,.submission-management input,.submission-management select,.submission-management textarea { font: inherit; }
.submission-management__heading,.submission-management__detail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.submission-management__heading h2,.submission-management__detail-head h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.submission-management__heading p,.submission-management__detail-head p { margin: 4px 0 0; color: var(--muted,#68758a); font-size: 12px; }
.submission-management__heading > button,.submission-management__detail-head > button { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 13px; border: 1px solid var(--blue,#3157d5); border-radius: 9px; background: var(--blue,#3157d5); color: #fff; font-weight: 800; cursor: pointer; }
.submission-management__heading svg,.submission-management__detail-head svg { width: 16px; }
.submission-management__message { margin: 0; padding: 11px 13px; border-radius: 9px; background: #f2f6ff; color: var(--blue,#3157d5); font-size: 12px; }
.submission-management__create { display: grid; grid-template-columns: 1fr 280px; gap: 13px; padding: 20px; border: 1px solid var(--line,#dfe5ef); border-radius: 14px; background: #fff; }
.submission-management__create > label { display: grid; gap: 7px; color: #657187; font-size: 11px; font-weight: 800; }
.submission-management__create > label:nth-child(2) { grid-column: 1 / -1; }
.submission-management__create input,.submission-management__tools input,.submission-management__tools select,.submission-management__modal input,.submission-management__modal select,.submission-management__modal textarea { width: 100%; border: 1px solid #dbe1eb; border-radius: 8px; background: #fff; color: #18243a; outline: none; }
.submission-management__create input { height: 40px; padding: 0 11px; }
.submission-management__file { display: flex!important; align-items: center; justify-content: center; min-height: 40px; border: 1px dashed #b9c4d5; border-radius: 8px; cursor: pointer; }
.submission-management__file svg { width: 15px; }
.submission-management__file input { display: none; }
.submission-management__create > small { grid-column: 1 / -1; color: #7c899b; }
.submission-management__create footer,.submission-management__modal footer { display: flex; grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.submission-management__create footer button,.submission-management__modal footer button { min-height: 38px; padding: 0 14px; border: 1px solid #dbe1eb; border-radius: 8px; background: #fff; font-weight: 800; cursor: pointer; }
.submission-management__create footer button:last-child,.submission-management__modal footer button:last-child { border-color: var(--blue,#3157d5); background: var(--blue,#3157d5); color: #fff; }
.submission-management__summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line,#dfe5ef); border-radius: 12px; background: #fff; }
.submission-management__summary button { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; min-width: 0; padding: 17px 19px; border: 0; border-right: 1px solid var(--line,#dfe5ef); border-radius: 0; background: #fff; color: var(--muted,#68758a); text-align: left; cursor: pointer; }
.submission-management__summary button:last-child { border-right: 0; }
.submission-management__summary button:hover { background: #fafbfe; }
.submission-management__summary span { align-self: center; font-size: 11px; font-weight: 800; }
.submission-management__summary strong { color: #273247; font-size: 21px; text-align: right; }
.submission-management__summary small { margin-left: 2px; color: #8490a1; font-size: 10px; }
.submission-management__request-filters,.submission-management__quick-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.submission-management__request-filters button,.submission-management__quick-filters button { min-height: 34px; padding: 0 12px; border: 1px solid #dfe4ed; border-radius: 20px; background: #fff; color: #69758a; font-size: 11px; font-weight: 800; cursor: pointer; }
.submission-management__request-filters button.is-active,.submission-management__quick-filters button.is-active { border-color: var(--blue,#3157d5); background: #edf2ff; color: var(--blue,#3157d5); }
.submission-management__quick-filters button b { margin-left: 4px; }
.submission-management__requests { display: grid; gap: 10px; }
.submission-management__requests > article { position: relative; padding: 18px 20px; border: 1px solid var(--line,#dfe5ef); border-radius: 12px; background: #fff; }
.submission-management__request-copy { min-width: 0; padding-right: 42px; }
.submission-management__request-copy > span { display: inline-flex; padding: 4px 7px; border-radius: 12px; background: #edf2ff; color: var(--blue,#3157d5); font-size: 9px; font-weight: 850; }
.submission-management__request-copy h3 { margin: 8px 0 5px; font-size: 16px; }
.submission-management__request-copy p { margin: 0; color: #748096; font-size: 11px; }
.submission-management__request-menu { position: absolute; top: 15px; right: 16px; }
.submission-management__request-menu > button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #738095; cursor: pointer; }
.submission-management__request-menu > div { position: absolute; top: 38px; right: 0; z-index: 4; width: 140px; padding: 5px; border: 1px solid #dfe5ef; border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(27,41,69,.12); }
.submission-management__request-menu > div button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px; border: 0; background: transparent; color: #b24e4e; font-size: 11px; cursor: pointer; }
.submission-management__request-menu svg { width: 16px; }
.submission-management__request-footer { display: grid; grid-template-columns: minmax(180px,1fr) auto; align-items: center; gap: 24px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #edf0f5; }
.submission-management__progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.submission-management__progress i { height: 7px; flex: 1; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.submission-management__progress i span { display: block; height: 100%; border-radius: inherit; background: var(--blue,#3157d5); transition: width .25s ease; }
.submission-management__progress b { color: #627087; font-size: 10px; }
.submission-management__open { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid var(--blue,#3157d5); border-radius: 8px; background: var(--blue,#3157d5); color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.submission-management__open:hover { filter: brightness(.96); }
.submission-management__open svg { width: 14px; }
.submission-management__empty { display: grid; min-height: 150px; place-items: center; border: 1px dashed #d8deea; border-radius: 12px; color: #748096; font-size: 12px; }
.submission-management__back { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 0; border: 0; background: transparent; color: #657287; font-size: 11px; font-weight: 800; cursor: pointer; }
.submission-management__back svg { width: 15px; }
.submission-management__detail-head { align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e0e6ef; }
.submission-management__detail-head > button:disabled { opacity: .45; cursor: not-allowed; }
.submission-management__tools { display: flex; gap: 8px; }
.submission-management__tools label { position: relative; min-width: 260px; }
.submission-management__tools label svg { position: absolute; top: 10px; left: 10px; width: 15px; color: #8995a6; }
.submission-management__tools input { height: 38px; padding: 0 11px 0 33px; }
.submission-management__tools select { width: 150px; height: 38px; padding: 0 9px; }
.submission-management__bulk { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #cfd9f1; border-radius: 9px; background: #f6f8fe; }
.submission-management__bulk strong { margin-right: auto; font-size: 11px; }
.submission-management__bulk button { padding: 7px 10px; border: 1px solid #cfd8e9; border-radius: 7px; background: #fff; color: #40506a; font-size: 10px; font-weight: 800; cursor: pointer; }
.submission-management__table-wrap { overflow: auto; border: 1px solid var(--line,#dfe5ef); border-radius: 11px; background: #fff; }
.submission-management__table-wrap table { width: 100%; min-width: 900px; border-collapse: collapse; }
.submission-management__table-wrap th { padding: 12px 14px; background: #f8f9fc; color: #6f7c90; font-size: 11px; font-weight: 850; text-align: left; }
.submission-management__table-wrap td { padding: 14px; border-top: 1px solid #edf0f5; border-bottom: 0; color: #536075; font-size: 12px; vertical-align: middle; }
.submission-management__table-wrap tr:last-child td { border-bottom: 0; }
.submission-management__table-wrap td strong,.submission-management__table-wrap td small { display: block; }
.submission-management__table-wrap td strong { color: #253047; font-size: 13px; }
.submission-management__table-wrap td small { margin-top: 4px; color: #8994a5; font-size: 10px; }
.submission-management__table-wrap td > span { display: inline-flex; padding: 5px 8px; border-radius: 20px; background: #edf2ff; color: var(--blue,#3157d5); font-size: 10px; font-weight: 850; }
.submission-management__table-wrap td > span.is-missing { background: #f1f3f6; color: #727e91; }
.submission-management__table-wrap td > span.is-needs_revision { background: #fff0e6; color: #d86520; }
.submission-management__table-wrap td > span.is-confirmed { background: #e8f8f2; color: #258365; }
.submission-management__table-wrap td > span.is-late { background: #fff4e8; color: #b66b22; }
.submission-management__table-wrap td button { padding: 7px 9px; border: 1px solid #d7dfec; border-radius: 7px; background: #fff; color: var(--blue,#3157d5); font-size: 10px; font-weight: 800; cursor: pointer; }
.submission-management__table-wrap .submission-management__empty { border: 0; }
.submission-management__modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.submission-management__backdrop { position: absolute; inset: 0; border: 0; background: rgba(12,24,45,.5); }
.submission-management__modal form { position: relative; z-index: 1; display: grid; gap: 14px; width: min(540px, 100%); max-height: min(760px, 92vh); padding: 22px; overflow-y: auto; border-radius: 15px; background: #fff; box-shadow: 0 24px 60px rgba(13,28,54,.2); }
.submission-management__modal header { display: flex; align-items: flex-start; justify-content: space-between; }
.submission-management__modal header small { color: #778397; }
.submission-management__modal h3 { margin: 4px 0 0; font-size: 19px; }
.submission-management__modal header > button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; background: transparent; color: #68758a; cursor: pointer; }
.submission-management__modal header svg { width: 17px; }
.submission-management__modal label { display: grid; gap: 6px; color: #657187; font-size: 11px; font-weight: 800; }
.submission-management__modal select,.submission-management__modal input { height: 40px; padding: 0 10px; }
.submission-management__modal textarea { min-height: 100px; padding: 10px; resize: vertical; }
.submission-management__submission-note { padding: 13px; border-radius: 9px; background: #f7f8fa; }
.submission-management__submission-note strong { font-size: 11px; }
.submission-management__submission-note p,.submission-management__submission-note div { margin: 6px 0 0; color: #657287; font-size: 11px; line-height: 1.6; }
.submission-management__files { display: flex; flex-wrap: wrap; gap: 7px; }
.submission-management__files a { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 7px; background: #f1f4f8; color: var(--blue,#3157d5); font-size: 10px; text-decoration: none; }
.submission-management__files svg { width: 13px; }
.submission-management__notify { display: flex!important; align-items: center; gap: 7px; }
.submission-management__notify input { width: auto; height: auto; }
.submission-management :is(button,input,select,textarea):focus-visible { outline: 2px solid color-mix(in srgb,var(--blue,#3157d5) 42%,transparent); outline-offset: 2px; }
@media (max-width: 900px) { .submission-management__summary { grid-template-columns: 1fr 1fr; } .submission-management__summary button:nth-child(2){border-right:0}.submission-management__summary button:nth-child(-n+2){border-bottom:1px solid var(--line,#dfe5ef)} .submission-management__create { grid-template-columns: 1fr; } .submission-management__create > label:nth-child(2),.submission-management__create footer { grid-column: auto; } }
@media (max-width: 620px) { .submission-management__heading,.submission-management__detail-head { align-items: flex-start; flex-direction: column; } .submission-management__summary { grid-template-columns: 1fr; } .submission-management__summary button,.submission-management__summary button:nth-child(2){border-right:0;border-bottom:1px solid var(--line,#dfe5ef)}.submission-management__summary button:last-child{border-bottom:0} .submission-management__tools { flex-direction: column; } .submission-management__tools label,.submission-management__tools select { width: 100%; min-width: 0; } .submission-management__request-footer { grid-template-columns: 1fr; gap: 12px; } .submission-management__open { width: 100%; } }
.competition-ops-admin{display:grid;gap:18px}.competition-ops-admin__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.competition-ops-admin__heading>div{display:grid;gap:5px}.competition-ops-admin__heading h2{margin:0;font-size:22px}.competition-ops-admin__heading p{margin:0;color:#68758a;font-size:12px}.competition-ops-admin__heading>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border:0;border-radius:9px;background:#3157d5;color:#fff;font-weight:850;cursor:pointer}.competition-ops-admin__heading>strong{padding:7px 10px;border-radius:20px;background:#fff0e5;color:#b65b24;font-size:11px}.competition-ops-admin__form{display:grid;gap:12px;padding:20px;border:1px solid #dfe5ef;border-radius:14px;background:#fff}.competition-ops-admin__form>input,.competition-ops-admin__form label input{width:100%;padding:11px 12px;border:1px solid #dbe1eb;border-radius:8px;font:inherit}.competition-ops-admin__form label{display:grid;gap:6px;color:#657187;font-size:11px;font-weight:800}.competition-ops-admin__form>div:last-child{display:flex;justify-content:flex-end;gap:8px}.competition-ops-admin__form>div:last-child button{padding:9px 14px;border:1px solid #dbe1eb;border-radius:8px;background:#fff;font-weight:800}.competition-ops-admin__form>div:last-child button:last-child{border-color:#3157d5;background:#3157d5;color:#fff}.competition-ops-admin__form>div:last-child button:disabled{cursor:not-allowed;opacity:.5}.competition-ops-admin__attachment-picker{display:grid;gap:7px;padding:12px;border:1px solid #e3e8f1;border-radius:10px;background:#fafbfe}.competition-ops-admin__attachment-picker>label{display:inline-flex;justify-self:start;align-items:center;gap:6px;padding:7px 10px;border:1px solid #d5ddeb;border-radius:7px;background:#fff;color:#3157d5;cursor:pointer}.competition-ops-admin__attachment-picker input{display:none}.competition-ops-admin__attachment-picker p{margin:0;color:#7a8697;font-size:11px}.competition-ops-admin__attachment-picker ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.competition-ops-admin__attachment-picker li{display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 7px;border-radius:6px;background:#edf2ff;color:#3557b5;font-size:11px}.competition-ops-admin__attachment-picker li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.competition-ops-admin__attachment-picker li button{display:grid;place-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}.competition-ops-admin__posts,.competition-ops-admin__inquiries{display:grid;gap:12px}.competition-ops-admin__posts>article,.competition-ops-admin__inquiries>article{padding:20px;border:1px solid #e1e6ef;border-radius:14px;background:#fff}.competition-ops-admin__post-top,.competition-ops-admin__inquiry-meta{display:flex;align-items:center;gap:9px}.competition-ops-admin__post-top>span,.competition-ops-admin__inquiry-meta>span{display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:20px;background:#eef2f8;color:#647087;font-size:10px;font-weight:850}.competition-ops-admin__post-top>span.is-request{background:#eef1ff;color:#3157d5}.competition-ops-admin__post-top small,.competition-ops-admin__inquiry-meta small{color:#8792a3;font-size:10px}.competition-ops-admin__post-top>button{margin-left:auto;border:0;background:transparent;color:#9aa4b3;cursor:pointer}.competition-ops-admin__posts h3,.competition-ops-admin__inquiries h3{margin:13px 0 7px;font-size:16px}.competition-ops-admin__inquiries article>p{margin:0;color:#59667a;font-size:13px;line-height:1.7;white-space:pre-wrap}.competition-ops-admin__post-content{color:#59667a;font-size:13px;line-height:1.7;word-break:break-word}.competition-ops-admin__post-content>:first-child{margin-top:0}.competition-ops-admin__post-content>:last-child{margin-bottom:0}.competition-ops-admin__post-content h2{margin:18px 0 8px;color:#27364b;font-size:17px}.competition-ops-admin__post-content p{margin:0 0 10px}.competition-ops-admin__post-content ul,.competition-ops-admin__post-content ol{margin:0 0 10px;padding-left:21px}.competition-ops-admin__post-content blockquote{margin:12px 0;padding:9px 12px;border-left:3px solid #9eb4f8;background:#f6f8ff;color:#647187}.competition-ops-admin__post-content img{display:block;max-width:min(100%,900px);height:auto;margin:14px 0;border-radius:8px}.competition-ops-admin__post-files{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid #edf0f5}.competition-ops-admin__post-files a{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:7px;background:#f1f5ff;color:#3157d5;font-size:11px;font-weight:750;text-decoration:none}.competition-ops-admin__request-meta{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:13px;border-top:1px solid #edf0f5}.competition-ops-admin__request-meta>span{color:#a15b2d;font-size:11px;font-weight:800}.competition-ops-admin__request-meta button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:#3157d5;font-weight:850;cursor:pointer}.competition-ops-admin__submissions{display:grid;gap:8px;margin-top:12px}.competition-ops-admin__submissions>div{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,1fr) minmax(180px,1fr) 120px;align-items:center;gap:12px;padding:12px;border-radius:9px;background:#f7f8fb}.competition-ops-admin__submissions>div>div:first-child{display:grid;gap:3px}.competition-ops-admin__submissions strong{font-size:12px}.competition-ops-admin__submissions span,.competition-ops-admin__submissions p{margin:0;color:#7b8798;font-size:10px}.competition-ops-admin__files{display:flex;flex-wrap:wrap;gap:5px}.competition-ops-admin__files a{display:flex;align-items:center;gap:4px;color:#3157d5;font-size:10px;text-decoration:none}.competition-ops-admin__submissions select{padding:7px;border:1px solid #dbe1eb;border-radius:7px;background:#fff;font-size:10px}.competition-ops-admin__inquiry-meta>span.is-open{background:#fff0e5;color:#b65b24}.competition-ops-admin__answer{display:grid;gap:5px;margin-top:15px;padding:14px;border-radius:9px;background:#f2f6ff}.competition-ops-admin__answer strong{color:#3157d5;font-size:11px}.competition-ops-admin__answer p{margin:0;color:#46536a;font-size:12px;white-space:pre-wrap}.competition-ops-admin__answer small{color:#8a95a6;font-size:10px}.competition-ops-admin__answer-form{display:grid;gap:8px;margin-top:15px}.competition-ops-admin__answer-form textarea{min-height:90px;padding:10px;border:1px solid #dbe1eb;border-radius:8px;font:inherit}.competition-ops-admin__answer-form button{justify-self:end;padding:8px 12px;border:0;border-radius:8px;background:#3157d5;color:#fff;font-weight:800}.competition-ops-admin__empty{display:grid;place-items:center;gap:8px;min-height:180px;border:1px dashed #d8deea;border-radius:12px;background:#fff;color:#7b8798}.competition-ops-admin__error{padding:10px;border-radius:8px;background:#fff0f0;color:#b64444;font-size:12px}@media(max-width:900px){.competition-ops-admin__submissions>div{grid-template-columns:1fr}.competition-ops-admin__heading{align-items:flex-start;flex-direction:column}}@media(max-width:560px){.competition-ops-admin__form,.competition-ops-admin__posts>article,.competition-ops-admin__inquiries>article{padding:14px}.competition-ops-admin__heading>button{width:100%;justify-content:center}.competition-ops-admin__post-files a{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.competition-review{display:grid;gap:12px}.competition-review__list{display:grid;gap:10px}.competition-review__list>article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid #e1e6ef;border-radius:11px;background:#fff}.competition-review__main{display:grid;gap:6px}.competition-review__main h3{margin:0;font-size:15px}.competition-review__main p{margin:0;color:#788498;font-size:11px}.competition-review__state{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.competition-review__state>span{width:max-content;padding:4px 8px;border-radius:999px;background:#fff4e8;color:#b56428;font-size:10px;font-weight:850}.competition-review__state>span.is-approved{background:#e9f8f1;color:#217c59}.competition-review__state>span.is-needs_revision{background:#fff2dc;color:#a96416}.competition-review__state>span.is-rejected,.competition-review__state>span.is-withdrawn{background:#f4f5f7;color:#737d8b}.competition-review__main code{width:max-content;padding:4px 7px;border-radius:6px;background:#eef2f8;color:#3157d5;font-size:10px}.competition-review__note{max-width:560px;color:#a06434;font-size:11px;line-height:1.5}.competition-review__actions{display:flex;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end;gap:6px}.competition-review__actions label{display:grid;gap:4px}.competition-review__actions label>span{color:#7c8799;font-size:9px;font-weight:800}.competition-review__actions select{height:34px;padding:0 28px 0 9px;border:1px solid #dce2ec;border-radius:8px;background:#fff;color:#4e5b70;font:inherit;font-size:11px;font-weight:750}.competition-review__actions button{display:flex;align-items:center;gap:5px;height:34px;padding:0 10px;border:1px solid #dce2ec;border-radius:8px;background:#fff;color:#68758a;font-size:11px;font-weight:800;cursor:pointer}.competition-review__actions button:disabled,.competition-review__actions select:disabled{cursor:not-allowed;opacity:.55}.competition-review__actions button.is-favorite{border-color:#e6b54d;background:#fff9e9;color:#af7911}.competition-review__empty{display:grid;place-items:center;min-height:180px;border:1px dashed #d8deea;border-radius:12px;color:#7c8799}@media(max-width:760px){.competition-review__list>article{align-items:flex-start;flex-direction:column}.competition-review__actions{justify-content:flex-start}}
.competition-team-codes { display:grid; gap:18px; }
.competition-team-codes .contest-admin-v2__panel-head p { margin:0; color:var(--muted); font-size:12px; }
.competition-team-codes > form { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:16px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#f8f9fc; }
.competition-team-codes label { display:grid; align-content:start; gap:7px; color:#475569; font-size:12px; font-weight:800; }
.competition-team-codes textarea,.competition-team-codes input { width:100%; padding:11px 12px; border:1px solid #d8deea; border-radius:9px; outline:0; background:#fff; color:#263147; font:inherit; resize:vertical; }
.competition-team-codes textarea:focus,.competition-team-codes input:focus { border-color:var(--blue); }
.competition-team-codes label small { color:#8490a2; font-size:10px; font-weight:600; }
.competition-team-codes__form-side { display:grid; align-content:space-between; gap:16px; }
.competition-team-codes__form-side > button,.competition-team-codes__issued-head > button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 14px; border:0; border-radius:9px; background:var(--blue); color:#fff; font:inherit; font-size:12px; font-weight:850; cursor:pointer; }
.competition-team-codes__form-side > button:disabled { opacity:.5; cursor:not-allowed; }
.competition-team-codes__issued { display:grid; gap:12px; padding:17px; border:1px solid #dbe3f5; border-radius:12px; background:#f2f6ff; }
.competition-team-codes__issued-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.competition-team-codes__issued-head > div { display:grid; gap:3px; }
.competition-team-codes__issued-head small { color:var(--muted); font-size:10px; }
.competition-team-codes__issued-list { display:grid; border:1px solid #dbe1eb; border-radius:9px; background:#fff; }
.competition-team-codes__issued-list > div { display:grid; grid-template-columns:minmax(120px,1fr) minmax(180px,1fr) 32px; align-items:center; gap:12px; padding:11px 13px; border-top:1px solid #edf0f5; }
.competition-team-codes__issued-list > div:first-child { border-top:0; }
.competition-team-codes__issued-list code { color:#253047; font-weight:850; }
.competition-team-codes__issued-list button { display:grid; width:30px; height:30px; place-items:center; border:1px solid #dbe1eb; border-radius:7px; background:#fff; color:#536075; cursor:pointer; }
.competition-team-codes__list-head { margin:6px 0 -4px; padding-top:18px; border-top:1px solid var(--line); }
.competition-team-codes__list { display:grid; gap:8px; }
.competition-team-codes__list article { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.competition-team-codes__list article > div { display:flex; align-items:center; gap:12px; }
.competition-team-codes__list span { padding:4px 7px; border-radius:12px; background:#f0f3fa; color:#657187; font-size:10px; font-weight:850; }
.competition-team-codes__list span.is-unused { background:#edf2ff; color:var(--blue); }
.competition-team-codes__list span.is-used { background:#e9f8f1; color:#217c59; }
.competition-team-codes__list article button { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:#b44646; cursor:pointer; }
.competition-team-codes__empty { display:grid; min-height:130px; place-items:center; margin:0; border:1px dashed #d8deea; border-radius:10px; color:#7c8799; font-size:12px; }
.competition-team-codes__error { margin:0; color:#b42323; font-size:12px; }
@media(max-width:760px){
  .competition-team-codes > form { grid-template-columns:1fr; }
  .competition-team-codes__issued-head,.competition-team-codes__list article { align-items:stretch; flex-direction:column; }
  .competition-team-codes__issued-list > div { grid-template-columns:1fr auto; }
  .competition-team-codes__issued-list > div strong { grid-column:1 / -1; }
  .competition-team-codes__list article > div { flex-wrap:wrap; }
}
.competition-ai-reports{display:grid;gap:18px}.competition-ai-reports>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.competition-ai-reports>header>div{display:grid;gap:5px}.competition-ai-reports>header span{color:#3157d5;font-size:10px;font-weight:900;letter-spacing:.1em}.competition-ai-reports>header h2{margin:0;font-size:22px}.competition-ai-reports>header p{margin:0;color:#68758a;font-size:12px}.competition-ai-reports>header>strong{padding:7px 10px;border-radius:20px;background:#edf2ff;color:#3157d5;font-size:11px}.competition-ai-reports__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.competition-ai-reports__list>article{display:grid;gap:14px;padding:20px;border:1px solid #dfe5ef;border-radius:14px;background:#fff}.competition-ai-reports__list>article.is-empty{background:#f8f9fb}.competition-ai-reports__team{display:flex;gap:11px}.competition-ai-reports__team>svg{padding:8px;width:37px;height:37px;border-radius:10px;background:#edf2ff;color:#3157d5}.competition-ai-reports__team>div{display:grid;gap:3px}.competition-ai-reports__team span{color:#3157d5;font-size:9px;font-weight:850}.competition-ai-reports__team h3{margin:0;font-size:14px}.competition-ai-reports__team small{display:flex;align-items:center;gap:4px;color:#8792a3;font-size:9px}.competition-ai-reports__stats{display:flex;flex-wrap:wrap;gap:7px}.competition-ai-reports__stats span{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:20px;background:#f2f4f8;color:#647087;font-size:9px}.competition-ai-reports__stats svg{width:12px;height:12px}.competition-ai-reports article>p{max-height:220px;margin:0;overflow:auto;color:#4f5c71;font-size:12px;line-height:1.7;white-space:pre-wrap}.competition-ai-reports__empty{display:grid;place-items:center;min-height:180px;border:1px dashed #d8deea;border-radius:12px;color:#7c8799}.competition-ai-reports__error{padding:10px;border-radius:8px;background:#fff0f0;color:#b64444}@media(max-width:900px){.competition-ai-reports__list{grid-template-columns:1fr}.competition-ai-reports>header{align-items:flex-start;flex-direction:column}}
.competition-contribution{display:grid;gap:18px;color:#172033}
.competition-contribution__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.competition-contribution__heading>div{display:grid;gap:5px}.competition-contribution__heading>div>span{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.04em}.competition-contribution__heading h2{margin:0;font-size:24px;letter-spacing:-.04em}.competition-contribution__heading p{margin:0;color:#68758a;font-size:14px;line-height:1.6}.competition-contribution__heading>button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid #dce2ec;border-radius:9px;background:#fff;color:#536075;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.competition-contribution__toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 18px;border:1px solid #e2e7ef;border-radius:13px;background:#fff}.competition-contribution__toolbar label{display:grid;gap:7px}.competition-contribution__toolbar label>span{color:#748095;font-size:10px;font-weight:850}.competition-contribution__toolbar select{min-width:260px;height:40px;padding:0 34px 0 12px;border:1px solid #d9e0ea;border-radius:9px;background:#fff;color:#273247;font:inherit;font-size:13px;font-weight:750}.competition-contribution__periods{display:flex;gap:5px;padding:4px;border-radius:10px;background:#f1f4f8}.competition-contribution__periods button{min-height:32px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:#738096;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.competition-contribution__periods button.is-active{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(30,47,78,.09)}
.competition-contribution__team-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.competition-contribution__team-head>div{display:grid;gap:3px}.competition-contribution__team-head span,.competition-contribution__team-head small{color:#7b8799;font-size:10px}.competition-contribution__team-head strong{font-size:17px}
.competition-contribution__summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid #e2e7ef;border-radius:13px;background:#fff}.competition-contribution__summary article{display:flex;align-items:center;gap:12px;padding:17px;border-right:1px solid #e8ecf2}.competition-contribution__summary article:last-child{border-right:0}.competition-contribution__summary svg{flex:0 0 18px;color:var(--blue)}.competition-contribution__summary article>div{display:grid;gap:4px}.competition-contribution__summary span{color:#748095;font-size:10px;font-weight:750}.competition-contribution__summary strong{font-size:20px;letter-spacing:-.03em}.competition-contribution__summary strong small{margin-left:3px;color:#8a95a6;font-size:10px}
.competition-contribution__list{overflow:hidden;border:1px solid #e2e7ef;border-radius:13px;background:#fff}.competition-contribution__list-head,.competition-contribution__list>article{display:grid;grid-template-columns:minmax(190px,1.15fr) minmax(130px,.8fr) minmax(130px,.8fr) minmax(230px,1.4fr) minmax(100px,.65fr);align-items:center;gap:18px}.competition-contribution__list-head{padding:11px 18px;background:#f7f9fb;color:#7a8698;font-size:10px;font-weight:850}.competition-contribution__list>article{padding:16px 18px;border-top:1px solid #edf0f4}.competition-contribution__member{display:flex;align-items:center;gap:10px;min-width:0}.competition-contribution__avatar{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#e9f5f4;color:#167b80;font-size:13px;font-weight:900}.competition-contribution__member>div,.competition-contribution__evidence,.competition-contribution__rate{display:grid;gap:4px;min-width:0}.competition-contribution__member strong,.competition-contribution__evidence strong,.competition-contribution__rate strong{overflow:hidden;color:#273247;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.competition-contribution__member small,.competition-contribution__evidence small,.competition-contribution__rate small{overflow:hidden;color:#8792a3;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.competition-contribution__evidence strong{display:flex;align-items:center;gap:5px}.competition-contribution__share{display:grid;gap:6px}.competition-contribution__share strong{font-size:18px}.competition-contribution__share strong small{margin-left:2px;color:#8290a3;font-size:10px}.competition-contribution__share>span{display:block;height:5px;overflow:hidden;border-radius:10px;background:#e9edf3}.competition-contribution__share i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.competition-contribution__notice{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid #dbe6e5;border-radius:11px;background:#f2f8f7;color:#536b6d}.competition-contribution__notice svg{flex:0 0 auto;margin-top:2px;color:var(--blue)}.competition-contribution__notice p{margin:0;font-size:11px;line-height:1.65}.competition-contribution__notice strong{color:#254449}.competition-contribution__empty{display:grid;min-height:180px;place-items:center;border:1px dashed #d8deea;border-radius:12px;background:#fff;color:#7c8799;font-size:13px}.competition-contribution__empty.is-error{color:#b5573e}
@media(max-width:1100px){.competition-contribution__summary{grid-template-columns:1fr 1fr}.competition-contribution__summary article:nth-child(2){border-right:0}.competition-contribution__summary article:nth-child(-n+2){border-bottom:1px solid #e8ecf2}.competition-contribution__list{overflow-x:auto}.competition-contribution__list-head,.competition-contribution__list>article{min-width:960px}}
@media(max-width:680px){.competition-contribution__heading,.competition-contribution__toolbar{align-items:stretch;flex-direction:column}.competition-contribution__toolbar select{width:100%;min-width:0}.competition-contribution__summary{grid-template-columns:1fr}.competition-contribution__summary article,.competition-contribution__summary article:nth-child(2){border-right:0;border-bottom:1px solid #e8ecf2}.competition-contribution__summary article:last-child{border-bottom:0}}
.competition-contribution__toolbar label>span,.competition-contribution__team-head span,.competition-contribution__team-head small,.competition-contribution__summary span,.competition-contribution__summary strong small,.competition-contribution__member small,.competition-contribution__evidence small,.competition-contribution__rate small,.competition-contribution__share strong small{font-size:11px}.competition-contribution__list-head{font-size:11px}.competition-contribution__member strong,.competition-contribution__evidence strong,.competition-contribution__rate strong{font-size:13px}
.competition-schedule-admin{display:grid;gap:20px;color:#172033}.competition-schedule-admin>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.competition-schedule-admin>header>div{display:grid;gap:6px}.competition-schedule-admin h2{margin:0;font-size:24px;letter-spacing:-.04em}.competition-schedule-admin header p{margin:0;color:#68758a;font-size:14px}.competition-schedule-admin header>button{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border:0;border-radius:9px;background:var(--blue);color:#fff;font:inherit;font-size:13px;font-weight:850;cursor:pointer}
.competition-schedule-admin__form{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px;border:1px solid #dfe4ed;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(30,47,78,.05)}.competition-schedule-admin__form-head{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between}.competition-schedule-admin__form-head strong{font-size:16px}.competition-schedule-admin__form-head button{display:grid;place-items:center;border:0;background:transparent;color:#7b8798;cursor:pointer}.competition-schedule-admin__form label{display:grid;gap:7px}.competition-schedule-admin__form label.is-wide{grid-column:1/-1}.competition-schedule-admin__form label span{color:#59677b;font-size:12px;font-weight:800}.competition-schedule-admin__form input,.competition-schedule-admin__form textarea{width:100%;padding:0 12px;border:1px solid #d9e0ea;border-radius:9px;color:#263147;font:inherit;font-size:13px;outline:none}.competition-schedule-admin__form input{height:42px}.competition-schedule-admin__form textarea{min-height:90px;padding-top:11px;resize:vertical}.competition-schedule-admin__form input:focus,.competition-schedule-admin__form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 12%,transparent)}.competition-schedule-admin__form-actions{display:flex;grid-column:1/-1;justify-content:flex-end;gap:8px}.competition-schedule-admin__form-actions button{min-height:39px;padding:0 15px;border:1px solid #d9e0ea;border-radius:8px;background:#fff;color:#59677b;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.competition-schedule-admin__form-actions button:last-child{border-color:var(--blue);background:var(--blue);color:#fff}
.competition-schedule-admin__groups{display:grid;gap:24px}.competition-schedule-admin__groups>section{display:grid;gap:10px}.competition-schedule-admin__groups h3{margin:0;color:#69768a;font-size:12px;font-weight:900}.competition-schedule-admin__timeline{overflow:hidden;border:1px solid #e2e7ef;border-radius:14px;background:#fff}.competition-schedule-admin__timeline>article{display:grid;grid-template-columns:46px 40px 1fr auto;align-items:center;gap:14px;padding:18px 20px;border-top:1px solid #edf0f4}.competition-schedule-admin__timeline>article:first-child{border-top:0}.competition-schedule-admin__timeline time{display:grid;place-items:center}.competition-schedule-admin__timeline time strong{font-size:22px;line-height:1}.competition-schedule-admin__timeline time span{margin-top:4px;color:#8792a3;font-size:11px}.competition-schedule-admin__marker{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#efedfb;color:var(--blue)}.competition-schedule-admin__timeline article>div:nth-child(3){display:grid;gap:5px}.competition-schedule-admin__timeline small{color:var(--blue);font-size:11px;font-weight:850}.competition-schedule-admin__timeline article>div>strong{font-size:14px}.competition-schedule-admin__timeline p{display:flex;align-items:center;gap:6px;margin:0;color:#738095;font-size:12px}.competition-schedule-admin__timeline article>div>span{color:#59677b;font-size:12px;line-height:1.6}.competition-schedule-admin__actions{display:flex;gap:4px}.competition-schedule-admin__actions button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #e0e5ed;border-radius:8px;background:#fff;color:#738095;cursor:pointer}.competition-schedule-admin__timeline article.is-past{background:#fafbfc}.competition-schedule-admin__timeline article.is-past .competition-schedule-admin__marker{background:#f0f2f5;color:#8a95a5}.competition-schedule-admin__error{margin:0;padding:12px 14px;border-radius:9px;background:#fff0ec;color:#ad513c;font-size:12px}.competition-schedule-admin__empty{display:grid;min-height:200px;place-items:center;align-content:center;gap:8px;border:1px dashed #d8deea;border-radius:12px;background:#fff;color:#7c8799;font-size:13px}.competition-schedule-admin__empty svg{color:var(--blue)}.competition-schedule-admin__empty strong{color:#344158;font-size:14px}.competition-schedule-admin__empty span{font-size:12px}
@media(max-width:700px){.competition-schedule-admin>header{align-items:stretch;flex-direction:column}.competition-schedule-admin__form{grid-template-columns:1fr}.competition-schedule-admin__form label.is-wide,.competition-schedule-admin__form-head,.competition-schedule-admin__form-actions{grid-column:1}.competition-schedule-admin__timeline>article{grid-template-columns:38px 1fr;padding:16px}.competition-schedule-admin__marker{display:none}.competition-schedule-admin__actions{grid-column:2}.competition-schedule-admin__timeline time{align-self:start}}
.competition-monthly-admin { display:grid; gap:16px; }
.competition-monthly-admin > header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.competition-monthly-admin > header > div { display:grid; gap:5px; }
.competition-monthly-admin h2 { margin:0; font-size:22px; }
.competition-monthly-admin header p { margin:0; color:#68758a; font-size:12px; }
.competition-monthly-admin header label { display:flex; align-items:center; gap:8px; color:#68758a; font-size:11px; font-weight:800; }
.competition-monthly-admin header select,
.competition-monthly-admin td select { padding:8px 10px; border:1px solid #dbe1eb; border-radius:8px; background:#fff; color:#344158; font:inherit; }
.competition-monthly-admin__period { display:flex; align-items:end; gap:10px; padding:14px 16px; border:1px solid #e1e6ef; border-radius:10px; background:#fff; }
.competition-monthly-admin__period > label { display:grid; flex:1; gap:6px; color:#68758a; font-size:10px; font-weight:800; }
.competition-monthly-admin__period input { width:100%; padding:9px 10px; border:1px solid #dbe1eb; border-radius:8px; color:#344158; font:inherit; }
.competition-monthly-admin__period > div { display:flex; gap:7px; }
.competition-monthly-admin__period button { min-height:36px; padding:0 11px; border:1px solid #dbe1eb; border-radius:8px; background:#fff; color:#59667a; font-weight:800; cursor:pointer; }
.competition-monthly-admin__period button.is-primary { border-color:#3157d5; background:#3157d5; color:#fff; }
.competition-monthly-admin__period button:disabled { opacity:.5; }
.competition-monthly-admin__summary { display:flex; align-items:baseline; gap:5px; padding:14px 16px; border:1px solid #e1e6ef; border-radius:10px; background:#fff; }
.competition-monthly-admin__summary strong { font-size:23px; }
.competition-monthly-admin__summary span { color:#748096; font-size:12px; }
.competition-monthly-admin__table-wrap { overflow-x:auto; border:1px solid #e1e6ef; border-radius:12px; background:#fff; }
.competition-monthly-admin table { width:100%; min-width:850px; border-collapse:collapse; }
.competition-monthly-admin th { padding:11px 14px; background:#f8f9fc; color:#7a8699; font-size:10px; text-align:left; }
.competition-monthly-admin td { padding:14px; border-top:1px solid #edf0f5; color:#536075; font-size:11px; vertical-align:top; }
.competition-monthly-admin td:first-child { display:grid; gap:4px; }
.competition-monthly-admin td strong { color:#253047; font-size:12px; }
.competition-monthly-admin td small,
.competition-monthly-admin .is-muted { color:#939dac; font-size:10px; }
.competition-monthly-admin td p { max-width:380px; margin:0; line-height:1.6; white-space:pre-wrap; }
.competition-monthly-admin__content { max-width:560px; color:#536075; font-size:11px; line-height:1.6; }
.competition-monthly-admin__content > :first-child { margin-top:0; }
.competition-monthly-admin__content > :last-child { margin-bottom:0; }
.competition-monthly-admin__content h2 { margin:0 0 10px; font-size:15px; text-align:center; }
.competition-monthly-admin__content h3 { margin:12px 0 6px; font-size:12px; }
.competition-monthly-admin__content h4 { margin:9px 0 4px; font-size:11px; }
.competition-monthly-admin__content table { width:100%; min-width:0; margin:8px 0; border-collapse:collapse; table-layout:fixed; }
.competition-monthly-admin__content th,
.competition-monthly-admin__content td { display:table-cell; padding:6px; border:1px solid #dce2eb; color:#536075; font-size:10px; vertical-align:middle; }
.competition-monthly-admin__content th { background:#f5f6f8; color:#4b5563; font-weight:800; }
.competition-monthly-admin__content p { max-width:none; margin:0; }
.competition-monthly-admin__content figure { display:inline-grid; width:31%; min-width:120px; gap:4px; margin:6px 1%; vertical-align:top; }
.competition-monthly-admin__content figure img { width:100%; aspect-ratio:4/3; border:1px solid #d9dfe8; object-fit:cover; }
.competition-monthly-admin__content figcaption { color:#7a8699; font-size:9px; text-align:center; }
.competition-monthly-admin__word { width:max-content; margin-top:8px; padding:5px 7px; border:1px solid #d7dfeb; border-radius:6px; background:#fff; font-weight:800; }
.competition-monthly-admin td a { display:flex; align-items:center; gap:4px; margin-bottom:5px; color:#3157d5; text-decoration:none; }
.competition-monthly-admin__missing { color:#a06b4b; font-weight:800; }
.competition-monthly-admin__empty { display:grid; min-height:150px; place-items:center; color:#7b8798; }
.competition-monthly-admin__empty.is-error { color:#b64444; }

@media(max-width:700px) {
  .competition-monthly-admin > header { align-items:flex-start; flex-direction:column; }
  .competition-monthly-admin header label { width:100%; }
  .competition-monthly-admin header select { flex:1; }
  .competition-monthly-admin__period { align-items:stretch; flex-direction:column; }
  .competition-monthly-admin__period > div { justify-content:flex-end; }
}
.onsite-admin { --navy: #071426; --panel: #101c30; --panel-2: #13243b; --line: rgba(158, 190, 228, .18); --muted: #8ca4c4; --text: #f5f8ff; --blue: #69a5ff; --blue-strong: #3f86ef; --violet: #8175d9; min-height: 100%; color: var(--text); background: var(--navy); font-family: Inter, Pretendard, "Noto Sans KR", sans-serif; }
.onsite-admin *, .onsite-admin *::before, .onsite-admin *::after { box-sizing: border-box; }
.onsite-admin button, .onsite-admin input { font: inherit; }
.onsite-admin button { cursor: pointer; }
.onsite-admin:not(.onsite-admin--immersive) :is(.onsite-admin__toolbox, .onsite-admin__inspector).is-closed { display:none; }
.onsite-admin__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 34px 38px 28px; border-bottom: 1px solid var(--line); }
.onsite-admin__eyebrow, .onsite-admin__label, .onsite-admin__panel-heading small { margin: 0; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.onsite-admin h1 { margin: 8px 0 7px; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; line-height: 1; }
.onsite-admin__lede { margin: 0; color: var(--muted); font-size: 13px; }
.onsite-admin__event-button { margin-top: 13px; border: 1px solid rgba(105,165,255,.55); border-radius: 5px; background: rgba(105,165,255,.1); color: var(--blue); padding: 8px 11px; font-size: 11px; font-weight: 700; }
.onsite-admin__header-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.onsite-admin__save-state { max-width: 230px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.onsite-admin__save-state.success { color: #8be2bf; }.onsite-admin__save-state.error { color: #ff9d9d; }
.onsite-admin__primary, .onsite-admin__add-button { border: 0; border-radius: 6px; background: var(--blue); color: #071426; font-weight: 800; }
.onsite-admin__primary { padding: 12px 19px; }.onsite-admin__primary:disabled { opacity: .6; cursor: wait; }
.onsite-admin__workspace { display: grid; grid-template-columns: 236px minmax(480px, 1fr) 264px; min-height: 690px; }
.onsite-admin__toolbox, .onsite-admin__inspector { background: var(--panel); }
.onsite-admin__toolbox { border-right: 1px solid var(--line); }.onsite-admin__inspector { border-left: 1px solid var(--line); }
.onsite-admin__panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 19px 18px 16px; border-bottom: 1px solid var(--line); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.onsite-admin__panel-heading small { color: var(--muted); font-size: 9px; }
.onsite-admin__tool-section { padding: 20px 16px; border-bottom: 1px solid var(--line); }.onsite-admin__label { display: block; margin-bottom: 11px; color: var(--muted); font-size: 9px; }
.onsite-admin__preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.onsite-admin__preset-grid button { min-height: 53px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: #d4e2f7; font-size: 12px; text-align: left; padding: 9px; }.onsite-admin__preset-grid button:hover, .onsite-admin__preset-grid button.is-active { border-color: var(--blue); background: rgba(105,165,255,.1); color: #fff; }.onsite-admin__preset-grid small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.onsite-admin__inline-fields, .onsite-admin__field-row { display: flex; gap: 8px; }.onsite-admin__inline-fields { margin-top: 9px; }.onsite-admin__inline-fields label, .onsite-admin__field { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }.onsite-admin__inline-fields label { flex: 1; }.onsite-admin input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 4px; outline: none; background: #0a172a; color: #fff; padding: 8px 9px; font-size: 12px; }.onsite-admin input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(105,165,255,.18); }
.onsite-admin__add-button { width: 100%; margin-top: 10px; padding: 10px; font-size: 12px; }.onsite-admin__object-button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: #dce8fa; padding: 11px; font-size: 12px; text-align: left; }.onsite-admin__object-button:hover, .onsite-admin__object-grid button:hover { border-color: var(--blue); color: #fff; }.onsite-admin__object-button small { color: var(--muted); font-size: 9px; }.onsite-admin__object-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }.onsite-admin__object-grid button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 4px; padding: 9px 7px; font-size: 11px; }.onsite-admin__shape { width: 15px; height: 12px; display: inline-block; border: 1px solid currentColor; }.onsite-admin__shape--wall { height: 4px; margin-top: 4px; }.onsite-admin__shape--stage { border-radius: 2px; background: var(--violet); }.onsite-admin__shape--entrance { border-style: dashed; }.onsite-admin__shape--text { border: 0; width: 13px; }.onsite-admin__shape--text::after { content: "T"; font-weight: 900; }
.onsite-admin__preset-save { display: flex; gap: 5px; }.onsite-admin__preset-save button { border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: #dce8fa; padding: 0 10px; }.onsite-admin__saved-preset { display: flex; justify-content: space-between; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #dce8fa; padding: 11px 2px; font-size: 11px; text-align: left; }.onsite-admin__saved-preset span:last-child { color: var(--blue); font-size: 10px; }.onsite-admin__empty { color: var(--muted); font-size: 11px; line-height: 1.5; }
.onsite-admin__canvas-area { min-width: 0; background-color: #0a1729; background-image: linear-gradient(rgba(105,165,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(105,165,255,.06) 1px, transparent 1px); background-size: 32px 32px; padding: 24px clamp(16px, 3vw, 38px); }.onsite-admin__canvas-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }.onsite-admin__canvas-top strong { display: block; font-size: 14px; }.onsite-admin__canvas-top span { color: var(--muted); font-size: 11px; }.onsite-admin__canvas-top strong + span { margin-left: 12px; }.onsite-admin__canvas-size { padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font-size: 9px !important; letter-spacing: .1em; }
.onsite-admin__canvas-wrap { overflow: auto; border: 1px solid rgba(158,190,228,.22); box-shadow: 0 20px 50px rgba(0,0,0,.18); }.onsite-admin__canvas { position: relative; width: auto; min-width: 0; aspect-ratio: auto; overflow: hidden; background-color: rgba(8,22,40,.78); background-image: linear-gradient(rgba(105,165,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(105,165,255,.08) 1px, transparent 1px); background-size: 40px 40px; }
.onsite-admin__item { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; color: #fff; transition: box-shadow .15s, border-color .15s; touch-action: none; }.onsite-admin__item:focus-visible, .onsite-admin__item.is-selected { z-index: 5; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(105,165,255,.2); outline: none; }.onsite-admin__item--table { border-color: #5b86b7; border-radius: 8px; background: rgba(38,76,119,.7); padding: 8px; }.onsite-admin__item--table b { font-size: 11px; }.onsite-admin__item--table small { margin-top: 3px; color: #b5cbea; font-size: 9px; }.onsite-admin__seat-dots { display: grid; grid-template-columns: repeat(var(--columns, 4), 7px); gap: 3px; margin-top: 6px; }.onsite-admin__seat-dots i { width: 7px; height: 7px; border: 1px solid #9dc2ef; border-radius: 2px; background: #315e91; }
.onsite-admin__item--seat { border-color: #9dc2ef; border-radius: 50%; background: #17375e; color: #c9ddf8; font-size: 9px; }.onsite-admin__item--element { border-radius: 3px; background: rgba(95,117,148,.4); color: #d3e1f3; font-size: 10px; }.onsite-admin__item--wall { background: #8fa9c8; border-color: #d7e5f8; }.onsite-admin__item--stage { background: var(--violet); border-color: #b1a9f3; }.onsite-admin__item--entrance { border: 1px dashed var(--blue); background: rgba(105,165,255,.14); color: var(--blue); }.onsite-admin__item--text { border-style: dashed; background: rgba(255,255,255,.05); }
.onsite-admin__north { position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font-size: 10px; font-weight: 800; }
.onsite-admin__hint { margin: 12px 0 0; color: var(--muted); font-size: 10px; }.onsite-admin__inspector { padding-bottom: 20px; }.onsite-admin__selected-name { display: flex; align-items: center; gap: 7px; padding: 17px 18px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }.onsite-admin__selected-name button { margin-left: auto; border: 0; background: transparent; color: #ff9191; font-size: 10px; }.onsite-admin__selected-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }.onsite-admin__field { padding: 0 18px; margin-top: 16px; }.onsite-admin__field-row .onsite-admin__field { flex: 1; padding: 0; }.onsite-admin__field-row { padding: 0 18px; }.onsite-admin__inspector-empty { min-height: 188px; display: grid; place-content: center; text-align: center; color: var(--muted); }.onsite-admin__inspector-empty span { display: block; margin-bottom: 8px; color: var(--blue); font-size: 24px; }.onsite-admin__inspector-empty p { margin: 0; font-size: 11px; line-height: 1.6; }.onsite-admin__share { margin-top: 22px; border-top: 1px solid var(--line); }.onsite-admin__share > p { padding: 0 18px; color: var(--muted); font-size: 10px; line-height: 1.5; }.onsite-admin__qr-layout { display: flex; gap: 12px; padding: 0 18px; }.onsite-admin__qr { display: grid; grid-template-columns: repeat(8, 4px); grid-auto-rows: 4px; gap: 1px; padding: 5px; flex: 0 0 auto; width: 47px; height: 47px; background: #fff; }.onsite-admin__qr i.is-filled { background: #071426; }.onsite-admin__qr-layout code { display: block; max-width: 150px; overflow: hidden; color: #a9c4e7; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.onsite-admin__qr-layout button { margin-top: 8px; border: 0; background: transparent; color: var(--blue); padding: 0; font-size: 10px; }.onsite-admin__loading { display: grid; min-height: 280px; place-items: center; color: var(--muted); font-size: 13px; }
@media (max-width: 1080px) { .onsite-admin__workspace { grid-template-columns: 210px minmax(430px, 1fr); }.onsite-admin__inspector { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; display: grid; grid-template-columns: 1fr 1fr; }.onsite-admin__inspector > .onsite-admin__panel-heading { grid-column: 1 / -1; }.onsite-admin__share { margin-top: 0; border-top: 0; border-left: 1px solid var(--line); } }
@media (max-width: 720px) { .onsite-admin__header { align-items: flex-start; flex-direction: column; padding: 24px 18px; }.onsite-admin__header-actions { justify-content: flex-start; }.onsite-admin__workspace { display: block; }.onsite-admin__toolbox, .onsite-admin__inspector { border: 0; border-bottom: 1px solid var(--line); }.onsite-admin__toolbox { display: grid; grid-template-columns: 1fr 1fr; }.onsite-admin__toolbox > .onsite-admin__panel-heading { grid-column: 1 / -1; }.onsite-admin__tool-section { min-width: 0; }.onsite-admin__canvas-area { padding: 20px 14px; }.onsite-admin__inspector { display: block; }.onsite-admin__share { border-top: 1px solid var(--line); margin-top: 20px; }.onsite-admin__canvas-top strong + span { display: block; margin: 4px 0 0; } }
@media (prefers-reduced-motion: reduce) { .onsite-admin__item { transition: none; } }
.onsite-admin__qr { display:block; width:62px; height:62px; padding:4px; object-fit:contain; }
.onsite-admin__qr--empty { display:grid; place-items:center; color:#071426; font-size:9px; font-weight:900; }

/* 공모전 관리자 대시보드의 밝은 콘텐츠 표면과 이어지는 현장 관리 테마 */
.onsite-admin { --navy:#f6f8fc; --panel:#ffffff; --panel-2:#f1f5fb; --line:#dce4ef; --muted:#66758b; --text:#182235; --blue:#397eea; --blue-strong:#2768cf; --violet:#7167c7; overflow:hidden; border:1px solid #e0e7f0; border-radius:14px; background:#f6f8fc; color:var(--text); box-shadow:0 10px 34px rgba(32,55,87,.06); }
.onsite-admin__toolbar { display:flex; align-items:center; gap:14px; min-height:62px; padding:9px 12px 9px 16px; border-bottom:1px solid var(--line); background:#fff; }
.onsite-admin__toolbar-title { display:grid; gap:2px; min-width:150px; }
.onsite-admin__toolbar-title strong { overflow:hidden; color:#182235; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.onsite-admin__toolbar-title span { color:#7a889c; font-size:10px; }
.onsite-admin__view-tools { display:flex; align-items:center; gap:7px; margin-right:auto; }
.onsite-admin__tool-toggle,.onsite-admin__zoom-control { display:flex; align-items:center; overflow:hidden; border:1px solid #d8e1ed; border-radius:7px; background:#f8fafd; }
.onsite-admin__tool-toggle button,.onsite-admin__zoom-control button { display:inline-flex; align-items:center; justify-content:center; gap:5px; height:34px; padding:0 9px; border:0; border-right:1px solid #d8e1ed; background:transparent; color:#64738a; font-size:10px; font-weight:750; }
.onsite-admin__tool-toggle button:last-child,.onsite-admin__zoom-control button:last-child { border-right:0; }
.onsite-admin__tool-toggle button:hover,.onsite-admin__zoom-control button:hover { background:#edf4ff; color:#1e5db9; }
.onsite-admin__tool-toggle button.is-active { background:#397eea; color:#fff; }
.onsite-admin__zoom-control output { min-width:46px; color:#34445b; font-size:10px; font-variant-numeric:tabular-nums; font-weight:800; text-align:center; }
.onsite-admin__toolbar-actions { display:flex; align-items:center; gap:8px; }
.onsite-admin__fullscreen { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 12px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#35445a; font-size:11px; font-weight:750; }
.onsite-admin__fullscreen:hover,.onsite-admin__fullscreen[aria-pressed="true"] { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin h1,.onsite-admin__panel-heading,.onsite-admin__selected-name { color:#182235; }
.onsite-admin__eyebrow { color:#397eea; }
.onsite-admin__save-state.success { color:#16845b; }.onsite-admin__save-state.error { color:#c84949; }
.onsite-admin__primary,.onsite-admin__add-button { background:#397eea; color:#fff; box-shadow:0 5px 14px rgba(57,126,234,.18); }
.onsite-admin__event-button { background:#edf4ff; color:#286fd9; }
.onsite-admin__mode { display:flex; align-items:center; gap:9px; min-width:190px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#f8fafd; cursor:pointer; }
.onsite-admin__mode input { position:relative; width:34px; height:19px; flex:0 0 auto; padding:0; border:0; border-radius:20px; appearance:none; background:#c5cfdd; transition:background .16s; }
.onsite-admin__mode input::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .16s; }
.onsite-admin__mode input:checked { background:#397eea; }.onsite-admin__mode input:checked::after { transform:translateX(15px); }
.onsite-admin__mode span { display:grid; gap:2px; }.onsite-admin__mode b { color:#233044; font-size:11px; }.onsite-admin__mode small { color:#7a889c; font-size:9px; font-weight:500; }
.onsite-admin__toolbox,.onsite-admin__inspector { background:#fff; }
.onsite-admin__preset-grid button,.onsite-admin__object-button,.onsite-admin__object-grid button { border-color:#dce4ef; background:#fff; color:#35445a; }
.onsite-admin__preset-grid button:hover,.onsite-admin__preset-grid button.is-active,.onsite-admin__object-button:hover,.onsite-admin__object-grid button:hover,.onsite-admin__object-grid button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__preset-grid small,.onsite-admin__object-button small { color:#7b899d; }
.onsite-admin input { border-color:#d8e1ed; background:#fff; color:#243146; }
.onsite-admin__preset-save button { border-color:#d8e1ed; background:#f4f7fb; color:#35445a; }
.onsite-admin__saved-preset { color:#35445a; }
.onsite-admin__canvas-area { background-color:#eef3f9; background-image:linear-gradient(rgba(57,126,234,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(57,126,234,.06) 1px,transparent 1px); }
.onsite-admin__canvas-wrap { border-color:#cfd9e7; border-radius:8px; background:#fff; box-shadow:0 16px 38px rgba(55,78,109,.1); }
.onsite-admin__canvas { background-color:#fbfdff; background-image:linear-gradient(rgba(57,126,234,.095) 1px,transparent 1px),linear-gradient(90deg,rgba(57,126,234,.095) 1px,transparent 1px); }
.onsite-admin__canvas-stage { position:relative; min-width:0; min-height:0; }
.onsite-admin__canvas { min-width:0; aspect-ratio:auto; transform-origin:0 0; user-select:none; touch-action:none; }
.onsite-admin__canvas.is-select { cursor:default; }
.onsite-admin__canvas.is-pan { cursor:grab; }
.onsite-admin__canvas.is-pan .onsite-admin__item { cursor:grab; }
.onsite-admin__canvas.is-panning,.onsite-admin__canvas.is-panning .onsite-admin__item { cursor:grabbing; }
.onsite-admin__canvas.is-placing,.onsite-admin__canvas.is-placing .onsite-admin__item { cursor:crosshair; }
.onsite-admin__marquee { position:absolute; z-index:20; border:1px solid #397eea; background:rgba(57,126,234,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); pointer-events:none; }
.onsite-admin__item--table { border-color:#6d91bc; background:#dfeafa; color:#213b5b; box-shadow:0 5px 12px rgba(45,76,111,.1); }.onsite-admin__item--table small { color:#536f91; }
.onsite-admin__item-label { display:flex; align-items:center; justify-content:center; transform:rotate(var(--content-rotation,0deg)); transform-origin:center; }
.onsite-admin__item--table .onsite-admin__item-label { flex-direction:column; }
.onsite-admin__item--seat { border-color:#7195bd; background:#fff; color:#31557b; box-shadow:0 2px 6px rgba(45,76,111,.12); }.onsite-admin__item--seat.is-connected { cursor:grab; }.onsite-admin__item--seat.is-connected::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(57,126,234,.13); border-radius:50%; pointer-events:none; }
.onsite-admin__item--element { color:#42536a; }
.onsite-admin__item--wall { min-width:0; min-height:0; overflow:hidden; padding:0; background:#8496aa; line-height:1; }
.onsite-admin__item--stage { border-color:#5547ae; background:#7567c7; color:#fff; }
.onsite-admin__item--board { border:4px solid #244b3c; background:#315f4c; color:#f0fff8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.onsite-admin__item--entrance { background:#edf5ff; }
.onsite-admin__item--text { background:rgba(255,255,255,.82); }
.onsite-admin__object-choice--stage .onsite-admin__shape { color:#7567c7; background:#7567c7; }
.onsite-admin__object-choice--board .onsite-admin__shape { border:3px solid #315b49; border-radius:2px; background:#3d735d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.onsite-admin__object-choice--seat .onsite-admin__shape { width:13px; height:13px; border-color:#7195bd; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(45,76,111,.14); }
.onsite-admin__shape--aisle { width:18px; height:8px; border-style:dashed; background:repeating-linear-gradient(135deg,rgba(57,126,234,.22) 0 2px,transparent 2px 5px); }
.onsite-admin__item--aisle:not(.is-selected) { z-index:1; }
.onsite-admin__item--aisle { border:1px dashed #7698c2; background:repeating-linear-gradient(135deg,rgba(57,126,234,.09) 0 9px,rgba(57,126,234,.025) 9px 18px); color:#4f6f96; }
.onsite-admin__north { border-color:#cdd8e7; background:#fff; color:#397eea; }
.onsite-admin__selected-name button { color:#c84949; }.onsite-admin__share { background:#fbfcfe; }
.onsite-admin__qr-layout code { color:#52657f; }
.onsite-admin__qr-layout > div { min-width:0; }
.onsite-admin__qr-layout code { max-width:100%; overflow:visible; overflow-wrap:anywhere; line-height:1.45; text-overflow:clip; white-space:normal; word-break:break-word; }
.onsite-admin__object-button:disabled { cursor:not-allowed; opacity:.48; background:#f4f6f9; }
.onsite-admin:fullscreen { display:flex; flex-direction:column; width:100vw; height:100vh; border:0; border-radius:0; background:#f6f8fc; box-shadow:none; }
.onsite-admin:fullscreen .onsite-admin__workspace { flex:1; min-height:0; overflow:hidden; }
.onsite-admin:fullscreen .onsite-admin__toolbox,.onsite-admin:fullscreen .onsite-admin__inspector { min-height:0; overflow:auto; }
.onsite-admin:fullscreen .onsite-admin__canvas-area { display:flex; min-height:0; flex-direction:column; overflow:auto; }
.onsite-admin:fullscreen .onsite-admin__canvas-wrap { flex:1; min-height:0; }
@media (max-width: 900px) { .onsite-admin__toolbar { flex-wrap:wrap; }.onsite-admin__view-tools { order:3; width:100%; }.onsite-admin__save-state { margin-left:auto; }.onsite-admin__tool-toggle { margin-right:auto; } }
@media (max-width: 720px) { .onsite-admin__toolbar { align-items:flex-start; flex-wrap:wrap; }.onsite-admin__toolbar-title { flex:1; }.onsite-admin__save-state { order:2; width:auto; max-width:120px; }.onsite-admin__view-tools { order:4; }.onsite-admin__toolbar-actions { margin-left:auto; }.onsite-admin__mode { min-width:0; }.onsite-admin__mode small,.onsite-admin__fullscreen span,.onsite-admin__tool-toggle span { display:none; } }
@media print { .onsite-admin__toolbar, .onsite-admin__toolbox, .onsite-admin__inspector, .onsite-admin__hint { display: none; }.onsite-admin__workspace { display: block; }.onsite-admin__canvas-area { padding: 20px; }.onsite-admin__canvas { min-width: 0; } }

.onsite-admin__inspector-presets {
  padding: 18px 14px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.onsite-admin__inspector-presets .onsite-admin__label {
  margin-bottom: 12px;
  text-align: center;
}

.onsite-admin__inspector-presets .onsite-admin__preset-save {
  justify-content: center;
}

.onsite-admin__inspector-presets .onsite-admin__saved-preset {
  text-align: center;
}

.onsite-admin__inspector-presets .onsite-admin__empty {
  margin: 8px auto 0;
  text-align: center;
}

.onsite-admin__inspector-presets + .onsite-admin__share {
  margin-top: 0;
}

/* 넓은 도면과 얇은 조작계를 중심으로 한 현장 배치 편집기 */
.onsite-admin { height:clamp(740px,calc(100vh - 176px),940px); min-height:740px; border-color:#dbe3ed; border-radius:12px; background:#eef2f7; box-shadow:0 12px 32px rgba(37,54,77,.07); }
.onsite-admin__commandbar { position:relative; z-index:30; display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:8px 10px 8px 16px; border-bottom:1px solid #dce3ec; background:rgba(255,255,255,.96); }
.onsite-admin__commandbar > div { display:flex; align-items:center; gap:8px; }
.onsite-admin__commandbar > div:first-child { display:grid; gap:2px; }
.onsite-admin__commandbar strong { color:#1d293a; font-size:13px; letter-spacing:-.01em; }
.onsite-admin__commandbar .onsite-admin__save-state { max-width:360px; font-size:10px; }
.onsite-admin__command-divider { width:1px; height:24px; margin:0 2px; background:#dce3ec; }
.onsite-admin__icon-action { position:relative; display:grid; width:36px; height:36px; place-items:center; border:1px solid #d8e0ea; border-radius:8px; background:#fff; color:#536278; }
.onsite-admin__icon-action:hover,.onsite-admin__icon-action:focus-visible { border-color:#9cb9e8; background:#f0f6ff; color:#2368d1; outline:none; }
.onsite-admin__icon-action--save { border-color:#397eea; background:#397eea; color:#fff; }
.onsite-admin__icon-action--save:hover,.onsite-admin__icon-action--save:focus-visible { border-color:#2768cf; background:#2768cf; color:#fff; }
.onsite-admin__icon-action:disabled { border-color:#e1e6ec; background:#fff; color:#aab4c1; cursor:default; opacity:.62; }
.onsite-admin__icon-action--save:disabled { cursor:wait; opacity:.58; }
.onsite-admin__workspace { display:grid; grid-template-columns:196px minmax(0,1fr) 216px; gap:10px; height:calc(100% - 54px); min-height:0; padding:10px; background:#eef2f7; }
.onsite-admin__workspace.is-toolbox-closed { grid-template-columns:minmax(0,1fr) 216px; }
.onsite-admin__workspace.is-inspector-closed { grid-template-columns:196px minmax(0,1fr); }
.onsite-admin__workspace.is-toolbox-closed.is-inspector-closed { grid-template-columns:minmax(0,1fr); }
.onsite-admin__toolbox,.onsite-admin__inspector { min-height:0; overflow:auto; border:1px solid #dce3ec; border-radius:10px; background:rgba(255,255,255,.96); box-shadow:0 4px 15px rgba(39,57,81,.045); }
.onsite-admin__toolbox { border-right:1px solid #dce3ec; }
.onsite-admin__inspector { display:block; grid-column:auto; padding-bottom:14px; border-left:1px solid #dce3ec; }
.onsite-admin__inspector-tools { margin-top:14px; border-top:1px solid #e3e9f1; }
.onsite-admin__inspector-tools .onsite-admin__slot-presets { margin-top:0; border-top:0; }
.onsite-admin__sidebar-qr { text-align:center; }
.onsite-admin__sidebar-qr .onsite-admin__label { margin:0; text-align:left; }
.onsite-admin__qr-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.onsite-admin__qr-heading > span:last-child { color:#8794a6; font-size:8px; font-weight:750; }
.onsite-admin__sidebar-qr > button { display:grid; width:112px; height:112px; place-items:center; margin:0 auto; padding:7px; border:1px solid #d8e1ed; border-radius:9px; background:#fff; color:#8a98aa; }
.onsite-admin__sidebar-qr > button:hover:not(:disabled) { border-color:#8fb2e7; box-shadow:0 4px 14px rgba(43,76,119,.1); }
.onsite-admin__sidebar-qr > button:disabled { cursor:default; background:#f7f9fc; }
.onsite-admin__sidebar-qr img { display:block; width:96px; height:96px; object-fit:contain; }
.onsite-admin__sidebar-qr small { display:block; margin-top:7px; color:#8794a6; font-size:8px; }
.onsite-admin__qr-details { margin-top:10px; text-align:left; }
.onsite-admin__qr-details > span { display:block; margin-bottom:5px; color:#8794a6; font-size:8px; font-weight:750; }
.onsite-admin__qr-details > div { display:grid; grid-template-columns:minmax(0,1fr) 27px; gap:5px; align-items:center; }
.onsite-admin__qr-details code { min-width:0; overflow:hidden; padding:7px 8px; border:1px solid #e0e6ee; border-radius:6px; background:#f7f9fc; color:#26354d; font-family:inherit; font-size:11px; font-weight:800; letter-spacing:.12em; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.onsite-admin__qr-details button { display:grid; width:27px; height:27px; place-items:center; padding:0; border:1px solid #d7e0eb; border-radius:6px; background:#fff; color:#617087; }
.onsite-admin__qr-details button:hover { border-color:#8fb2e7; background:#edf4ff; color:#1e5db9; }
.onsite-admin__qr-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.onsite-admin__qr-actions > button,.onsite-admin__qr-modal-actions > button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:31px; padding:0 8px; border:1px solid #d7e0eb; border-radius:7px; background:#fff; color:#536278; font-size:9px; font-weight:750; }
.onsite-admin__qr-actions > button:hover:not(:disabled),.onsite-admin__qr-modal-actions > button:hover { border-color:#8fb2e7; background:#edf4ff; color:#1e5db9; }
.onsite-admin__qr-actions > button:disabled { color:#aeb8c5; cursor:default; background:#f7f9fc; }
.onsite-admin__qr-modal-actions { display:flex; justify-content:center; gap:7px; margin-top:16px; }
.onsite-admin__qr-modal-actions > button { width:36px; min-width:36px; height:36px; min-height:36px; padding:0; }
.onsite-admin__panel-heading { position:sticky; top:0; z-index:2; padding:14px 14px 12px; border-bottom:1px solid #e6ebf1; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); font-size:11px; }
.onsite-admin__tool-section { padding:15px 13px; border-bottom:1px solid #edf0f4; }
.onsite-admin__preset-grid { gap:7px; }
.onsite-admin__preset-grid button { min-height:50px; border-radius:8px; padding:9px; }
.onsite-admin__add-button,.onsite-admin__object-button,.onsite-admin__object-grid button,.onsite-admin__preset-save button { border-radius:7px; }
.onsite-admin__table-actions { display:grid; gap:7px; margin-top:10px; }
.onsite-admin__table-actions .onsite-admin__add-button { margin-top:0; }
.onsite-admin__table-actions .onsite-admin__add-button.is-active { background:#245fb9; box-shadow:0 0 0 3px rgba(57,126,234,.16); }
.onsite-admin__auto-button { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:9px; border:1px solid #a9c2e8; border-radius:7px; background:#eef5ff; color:#235fae; font-size:10px; font-weight:800; }
.onsite-admin__auto-button:hover { border-color:#397eea; background:#e4efff; color:#174e9c; }
.onsite-admin__template-trigger { display:flex; align-items:center; gap:8px; width:100%; min-height:38px; padding:0 10px; border:1px solid #d8e1ed; border-radius:8px; background:#fff; color:#526177; text-align:left; }
.onsite-admin__template-trigger:hover,.onsite-admin__template-trigger[aria-expanded="true"] { border-color:#8fb2e7; background:#edf4ff; color:#1e5db9; }
.onsite-admin__template-trigger > span { font-size:10px; font-weight:800; }
.onsite-admin__template-choice { display:flex; align-items:center; gap:8px; padding:9px; border-bottom:1px solid #e8edf3; color:#35445a; }
.onsite-admin__template-choice > div { display:grid; gap:2px; }
.onsite-admin__template-choice strong { font-size:10px; }
.onsite-admin__template-choice small { color:#7b899d; font-size:8px; }
.onsite-admin__classroom-settings { padding:9px; background:#fafbfd; }
.onsite-admin__classroom-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.onsite-admin__classroom-settings label { display:grid; gap:4px; color:#6d7b90; font-size:8px; font-weight:800; text-align:center; }
.onsite-admin__classroom-settings input { height:30px; padding:4px; text-align:center; }
.onsite-admin__door-side { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:8px; }
.onsite-admin__door-side > span { color:#6d7b90; font-size:8px; font-weight:800; }
.onsite-admin__door-side > div { display:flex; gap:4px; }
.onsite-admin__door-side button { min-height:27px; padding:0 8px; border:1px solid #d8e1ed; border-radius:6px; background:#fff; color:#65748a; font-size:8px; font-weight:800; }
.onsite-admin__door-side button:hover,.onsite-admin__door-side button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__classroom-summary { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px; }
.onsite-admin__classroom-summary span { color:#748198; font-size:8px; font-weight:750; }
.onsite-admin__classroom-summary button { min-height:30px; padding:0 9px; border:1px solid #397eea; border-radius:6px; background:#397eea; color:#fff; font-size:9px; font-weight:800; }
.onsite-admin__classroom-summary button:hover { border-color:#2768cf; background:#2768cf; }
.onsite-admin__template-modal,.onsite-admin__qr-modal { width:min(460px,100%); overflow:hidden; border:1px solid #d8e0ea; border-radius:13px; background:#fff; box-shadow:0 24px 70px rgba(28,43,64,.24); }
.onsite-admin__template-modal { max-height:calc(100dvh - 32px); overflow-y:auto; }
.onsite-admin__template-modal > header,.onsite-admin__qr-modal > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px 16px; border-bottom:1px solid #e7ecf2; }
.onsite-admin__template-modal h2,.onsite-admin__qr-modal h2 { margin:0; color:#202d40; font-size:16px; font-weight:750; letter-spacing:-.02em; }
.onsite-admin__template-modal header p,.onsite-admin__qr-modal header p { margin:5px 0 0; color:#718096; font-size:10px; line-height:1.5; }
.onsite-admin__template-modal header > button,.onsite-admin__qr-modal header > button { display:grid; flex:0 0 auto; width:30px; height:30px; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:#77869a; }
.onsite-admin__template-modal header > button:hover,.onsite-admin__qr-modal header > button:hover { background:#eef3f8; color:#34445a; }
.onsite-admin__template-modal .onsite-admin__template-choice { margin:16px 22px 0; border:1px solid #9cb9e8; border-radius:9px; background:#edf4ff; color:#1e5db9; }
.onsite-admin__template-modal .onsite-admin__template-choice small { color:#687f9f; }
.onsite-admin__classroom-preview { position:relative; height:170px; margin:10px 22px 0; overflow:hidden; border:1px solid #dce4ee; border-radius:9px; background-color:#f8fafc; background-image:linear-gradient(#edf1f6 1px,transparent 1px),linear-gradient(90deg,#edf1f6 1px,transparent 1px); background-size:16px 16px; }
.onsite-admin__preview-board { position:absolute; top:13px; left:27%; width:46%; height:9px; border:1px solid #7e8ba0; border-radius:2px; background:#aeb9c8; }
.onsite-admin__preview-doors { position:absolute; z-index:2; top:44px; bottom:20px; display:flex; flex-direction:column; justify-content:space-between; }
.onsite-admin__classroom-preview.has-door-left .onsite-admin__preview-doors { left:0; }
.onsite-admin__classroom-preview.has-door-right .onsite-admin__preview-doors { right:0; }
.onsite-admin__preview-doors i { display:block; width:7px; height:28px; border:1px solid #397eea; background:#e6effd; }
.onsite-admin__preview-sets { position:absolute; top:39px; right:20px; bottom:16px; left:20px; display:grid; gap:14px; }
.onsite-admin__classroom-preview.has-door-left .onsite-admin__preview-sets { left:25px; }
.onsite-admin__classroom-preview.has-door-right .onsite-admin__preview-sets { right:25px; }
.onsite-admin__preview-set { display:grid; min-width:0; grid-auto-rows:minmax(5px,1fr); gap:5px; padding:3px; border-right:1px dashed #c7d2e0; border-left:1px dashed #c7d2e0; }
.onsite-admin__preview-set > i { position:relative; display:block; min-width:0; min-height:5px; border:1px solid #9db3ce; border-radius:2px; background:#dbe6f4; box-shadow:0 2px 0 #eef3f8; }
.onsite-admin__preview-set > i::after { position:absolute; right:2px; bottom:0; color:#537096; content:attr(data-capacity); font-size:6px; font-style:normal; font-weight:900; line-height:1; }
.onsite-admin__preview-set.is-empty { display:grid; place-items:center; border-color:#dde4ed; background:rgba(239,243,248,.65); }
.onsite-admin__preview-set.is-empty > span { color:#9aa6b6; font-size:7px; font-weight:800; }
.onsite-admin__template-modal .onsite-admin__classroom-settings { margin:10px 22px 0; padding:14px; border:1px solid #e0e6ee; border-radius:9px; }
.onsite-admin__template-modal .onsite-admin__classroom-grid { gap:10px; }
.onsite-admin__template-modal .onsite-admin__classroom-settings label { gap:6px; font-size:9px; }
.onsite-admin__template-modal .onsite-admin__classroom-settings input { height:36px; font-size:12px; }
.onsite-admin__template-modal .onsite-admin__door-side { margin-top:13px; }
.onsite-admin__template-modal .onsite-admin__door-side > span { font-size:9px; }
.onsite-admin__template-modal .onsite-admin__door-side button { min-height:30px; padding:0 12px; font-size:9px; }
.onsite-admin__desk-setting { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.onsite-admin__desk-setting > span { color:#6d7b90; font-size:9px; font-weight:800; }
.onsite-admin__desk-setting > div { display:flex; gap:5px; }
.onsite-admin__desk-setting button { min-height:31px; padding:0 10px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#65748a; font-size:9px; font-weight:800; }
.onsite-admin__desk-setting button:hover,.onsite-admin__desk-setting button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__desk-capacity { position:relative; display:grid!important; grid-template-columns:1fr 92px; align-items:center; gap:10px!important; margin-bottom:12px; color:#536278!important; text-align:left!important; }
.onsite-admin__desk-capacity input { padding-right:28px!important; text-align:center; }
.onsite-admin__desk-capacity > span { position:absolute; right:10px; bottom:11px; color:#8794a6; font-size:9px; }
.onsite-admin__classroom-advanced { margin:14px -14px -14px; border-top:1px solid #e4e9f0; }
.onsite-admin__advanced-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 14px; border:0; background:#f8fafc; color:#34445a; text-align:left; }
.onsite-admin__advanced-trigger > span { display:grid; gap:3px; }
.onsite-admin__advanced-trigger b { font-size:10px; }
.onsite-admin__advanced-trigger small { color:#8491a3; font-size:8px; }
.onsite-admin__advanced-trigger > i { color:#397eea; font-size:8px; font-style:normal; font-weight:850; }
.onsite-admin__advanced-body { padding:12px 14px 14px; border-top:1px solid #e8edf3; }
.onsite-admin__set-tabs { display:flex; gap:5px; overflow-x:auto; padding-bottom:9px; }
.onsite-admin__set-tabs button { position:relative; flex:0 0 auto; min-height:29px; padding:0 10px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#68778b; font-size:8px; font-weight:800; }
.onsite-admin__set-tabs button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__set-tabs button > i { position:absolute; top:4px; right:4px; width:4px; height:4px; border-radius:50%; background:#397eea; }
.onsite-admin__set-reset { display:block; margin:10px 0 0 auto; padding:0; border:0; background:transparent; color:#397eea; font-size:8px; font-weight:800; }
.onsite-admin__set-reset:disabled { color:#aab4c1; }
.onsite-admin__template-modal > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 20px; }
.onsite-admin__template-modal > footer > span { color:#718096; font-size:10px; font-weight:750; }
.onsite-admin__template-modal > footer > div { display:flex; gap:7px; }
.onsite-admin__template-modal > footer button { min-height:35px; padding:0 14px; border:1px solid #d7e0eb; border-radius:7px; background:#fff; color:#536278; font-size:10px; font-weight:750; }
.onsite-admin__template-modal > footer button:last-child { border-color:#397eea; background:#397eea; color:#fff; }
.onsite-admin__qr-modal { width:min(350px,100%); padding-bottom:22px; text-align:center; }
.onsite-admin__qr-modal > header { text-align:left; }
.onsite-admin__qr-modal > img { display:block; width:190px; height:190px; margin:22px auto 14px; object-fit:contain; }
.onsite-admin__qr-modal > code { display:block; width:calc(100% - 44px); margin:0 auto; overflow-wrap:anywhere; color:#65758b; font-size:9px; line-height:1.55; text-align:left; white-space:normal; word-break:break-word; }
.onsite-admin__qr-modal-empty { display:grid; width:190px; height:190px; place-items:center; margin:22px auto 14px; background:#f3f6fa; color:#7d8a9d; font-size:10px; }
.onsite-admin__qr-print { min-height:36px; margin-top:16px; padding:0 16px; border:1px solid #397eea; border-radius:7px; background:#397eea; color:#fff; font-size:10px; font-weight:800; }
.onsite-admin__canvas-area { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; padding:0; background:none; }
.onsite-admin__canvas-top { min-height:42px; margin:0; padding:8px 10px 10px 12px; }
.onsite-admin__canvas-top strong { color:#28374c; font-size:12px; }
.onsite-admin__canvas-top span { font-size:9px; }
.onsite-admin__canvas-meta { display:flex; align-items:center; gap:7px; }
.onsite-admin__canvas-dimensions { display:inline-flex; align-items:center; gap:5px; height:27px; padding:0 8px; border:1px solid #d6dfe9; border-radius:7px; background:#fff; color:#506178; font-size:9px; font-variant-numeric:tabular-nums; font-weight:750; }
.onsite-admin__canvas-dimensions:hover,.onsite-admin__canvas-dimensions[aria-expanded="true"] { border-color:#8fb2e7; background:#eff5ff; color:#2368d1; }
.onsite-admin__canvas-settings { position:absolute; z-index:40; top:45px; right:8px; display:flex; align-items:flex-end; gap:7px; padding:12px; border:1px solid #d4dde8; border-radius:10px; background:rgba(255,255,255,.98); box-shadow:0 14px 34px rgba(27,44,68,.18); }
.onsite-admin__canvas-settings strong { align-self:center; margin-right:3px; color:#26354a; font-size:10px; white-space:nowrap; }
.onsite-admin__canvas-settings label { display:grid; gap:4px; color:#718096; font-size:8px; font-weight:700; }
.onsite-admin__canvas-settings input { width:76px; padding:6px 7px; font-size:10px; font-variant-numeric:tabular-nums; }
.onsite-admin__canvas-settings > span { padding-bottom:8px; color:#9aa7b7; font-size:10px; }
.onsite-admin__canvas-settings > button { height:29px; padding:0 9px; border:1px solid #d8e0ea; border-radius:6px; background:#fff; color:#536278; font-size:9px; font-weight:750; }
.onsite-admin__canvas-settings > button[type="submit"] { border-color:#397eea; background:#397eea; color:#fff; }
.onsite-admin__ratio-settings { align-items:center; flex-wrap:wrap; max-width:min(720px,calc(100% - 8px)); }
.onsite-admin__ratio-options { display:flex; flex-wrap:wrap; gap:4px; }
.onsite-admin__ratio-options button { height:29px; padding:0 9px; border:1px solid #d8e0ea; border-radius:6px; background:#fff; color:#536278; font-size:9px; font-weight:750; }
.onsite-admin__ratio-options button:hover,.onsite-admin__ratio-options button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__custom-ratio { display:flex; align-items:center; gap:5px; padding-left:4px; }
.onsite-admin__custom-ratio label { display:block; }
.onsite-admin__custom-ratio input { width:54px; height:29px; padding:5px 7px; text-align:center; }
.onsite-admin__custom-ratio > span { color:#7a8799; font-size:11px; font-weight:800; }
.onsite-admin__canvas-wrap { flex:1; min-height:0; padding:18px; border:1px solid #d5dde8; border-radius:10px; background:#f8fafc; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 8px 24px rgba(44,64,91,.06); scrollbar-width:none; touch-action:none; }
.onsite-admin__canvas-wrap::-webkit-scrollbar { display:none; }
.onsite-admin__canvas-wrap:has(.onsite-admin__canvas.is-pan) { cursor:grab; }
.onsite-admin__canvas-wrap:has(.onsite-admin__canvas.is-panning) { cursor:grabbing; }
.onsite-admin__canvas { box-shadow:0 0 0 1px #ced8e5; }
.onsite-admin__canvas.is-canvas-selected { overflow:visible; box-shadow:inset 0 0 0 1px #176bd8,0 0 0 1px #ced8e5; }
.onsite-admin__canvas-selection { position:absolute; z-index:18; inset:0; pointer-events:none; }
.onsite-admin .onsite-admin__canvas-handle { position:absolute; width:14px !important; min-width:0 !important; height:14px !important; min-height:0 !important; padding:0 !important; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:0 !important; line-height:0; appearance:none; pointer-events:auto; transform:translate(-50%,-50%) scale(var(--handle-scale,1)); transform-origin:center; }
.onsite-admin__canvas-handle::before { position:absolute; inset:4px; border:1px solid #176bd8; border-radius:0; background:#fff; content:""; }
.onsite-admin__canvas-handle--nw { left:0; top:0; cursor:nwse-resize !important; }.onsite-admin__canvas-handle--n { left:50%; top:0; cursor:ns-resize !important; }.onsite-admin__canvas-handle--ne { left:100%; top:0; cursor:nesw-resize !important; }
.onsite-admin__canvas-handle--w { left:0; top:50%; cursor:ew-resize !important; }.onsite-admin__canvas-handle--e { left:100%; top:50%; cursor:ew-resize !important; }
.onsite-admin__canvas-handle--sw { left:0; top:100%; cursor:nesw-resize !important; }.onsite-admin__canvas-handle--s { left:50%; top:100%; cursor:ns-resize !important; }.onsite-admin__canvas-handle--se { left:100%; top:100%; cursor:nwse-resize !important; }
.onsite-admin__item.is-selected { z-index:12; border-color:#176bd8 !important; outline:2px solid #176bd8; outline-offset:2px; box-shadow:none !important; }
.onsite-admin__item.is-selected::before { position:absolute; z-index:2; right:-7px; bottom:-7px; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#176bd8; box-shadow:0 1px 3px rgba(20,73,142,.22); content:""; pointer-events:none; }
.onsite-admin__item--table.is-selected::before,.onsite-admin__item--element.is-selected::before { display:none; }
.onsite-admin__item--seat.is-selected { background:#fff; color:#31557b; }
.onsite-admin__item-resize-selection { position:absolute; z-index:14; pointer-events:none; transform-origin:center; }
.onsite-admin__placement-preview { position:absolute; z-index:13; border:1px dashed #176bd8; border-radius:3px; background:rgba(57,126,234,.14); pointer-events:none; }
.onsite-admin__placement-preview--seat { border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 2px 6px rgba(45,76,111,.16); }
.onsite-admin__placement-preview--table { border:1px solid #5f85b3; border-radius:8px; background:rgba(223,234,250,.82); box-shadow:0 5px 12px rgba(45,76,111,.12); }
.onsite-admin__placement-preview--wall { border-color:#65768a; border-radius:1px; background:#8496aa; }
.onsite-admin__placement-preview--stage { border-color:#5547ae; background:rgba(117,103,199,.5); }
.onsite-admin__placement-preview--board { border-color:#244b3c; background:rgba(49,95,76,.58); }
.onsite-admin__placement-preview--entrance { border-color:#397eea; background:rgba(237,245,255,.82); }
.onsite-admin__placement-preview--aisle { border-color:#7698c2; background:repeating-linear-gradient(135deg,rgba(57,126,234,.09) 0 9px,rgba(57,126,234,.025) 9px 18px); }
.onsite-admin__group-selection { position:absolute; z-index:11; border:1px dashed #176bd8; background:rgba(57,126,234,.035); pointer-events:none; }
.onsite-admin__snap-guide { position:absolute; z-index:20; background:#d946ef; box-shadow:0 0 0 1px rgba(255,255,255,.62); pointer-events:none; }
.onsite-admin__snap-guide--vertical { top:0; bottom:0; width:1px; transform:translateX(-.5px); }
.onsite-admin__snap-guide--horizontal { left:0; right:0; height:1px; transform:translateY(-.5px); }
.onsite-admin .onsite-admin__resize-handle { position:absolute; width:14px !important; min-width:0 !important; height:14px !important; min-height:0 !important; padding:0 !important; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:0 !important; line-height:0; appearance:none; touch-action:none; pointer-events:auto; transform:translate(-50%,-50%) scale(var(--handle-scale,1)); transform-origin:center; }
.onsite-admin__resize-handle::before { position:absolute; inset:4px; border:1px solid #176bd8; background:#fff; content:""; }
.onsite-admin__resize-handle--nw { left:0; top:0; cursor:nwse-resize !important; }.onsite-admin__resize-handle--n { left:50%; top:0; cursor:ns-resize !important; }.onsite-admin__resize-handle--ne { left:100%; top:0; cursor:nesw-resize !important; }
.onsite-admin__resize-handle--w { left:0; top:50%; cursor:ew-resize !important; }.onsite-admin__resize-handle--e { left:100%; top:50%; cursor:ew-resize !important; }
.onsite-admin__resize-handle--sw { left:0; top:100%; cursor:nesw-resize !important; }.onsite-admin__resize-handle--s { left:50%; top:100%; cursor:ns-resize !important; }.onsite-admin__resize-handle--se { left:100%; top:100%; cursor:nwse-resize !important; }
.onsite-admin__selected-name { margin:0; padding:14px 18px; border-bottom:1px solid var(--line); background:#fff; }
.onsite-admin__selected-dot { width:8px; height:8px; box-shadow:none; }
.onsite-admin__multi-selection { padding:16px 18px 18px; border-bottom:1px solid var(--line); }
.onsite-admin__multi-selection > strong { display:block; color:#243146; font-size:13px; }
.onsite-admin__multi-selection > p { margin:5px 0 14px; color:#768499; font-size:10px; line-height:1.5; }
.onsite-admin__multi-selection > span { display:block; margin:11px 0 6px; color:#66758b; font-size:9px; font-weight:800; letter-spacing:.04em; }
.onsite-admin__multi-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.onsite-admin__multi-actions button,.onsite-admin__multi-delete { min-height:34px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#425168; font-size:10px; font-weight:750; }
.onsite-admin__multi-actions button:hover { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__multi-delete { width:100%; margin-top:8px; border-color:#f0d1d1; color:#bf4646; }
.onsite-admin__multi-delete:hover { background:#fff3f3; }
.onsite-admin__alignment-control { display:flex; align-items:center; justify-content:space-between; padding:13px 18px 0; }
.onsite-admin__multi-selection .onsite-admin__alignment-control { padding:0; }
.onsite-admin__alignment-control > span { color:#66758b; font-size:9px; font-weight:800; letter-spacing:.04em; }
.onsite-admin__alignment-control > div { display:flex; gap:5px; }
.onsite-admin__alignment-control button { position:relative; display:grid; width:34px; height:32px; place-items:center; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#526177; }
.onsite-admin__alignment-control button:hover,.onsite-admin__alignment-control button:focus-visible { border-color:#397eea; background:#edf4ff; color:#1e5db9; outline:none; }
.onsite-admin__canvas-inspector { padding:18px; border-bottom:1px solid var(--line); }
.onsite-admin__canvas-inspector > strong { color:#243146; font-size:13px; }
.onsite-admin__canvas-inspector > p { margin:6px 0 14px; color:#718096; font-size:10px; line-height:1.55; }
.onsite-admin__canvas-inspector > div { display:flex; align-items:center; justify-content:space-between; padding:10px; border:1px solid #e0e7f0; border-radius:7px; background:#f8fafc; }
.onsite-admin__canvas-inspector span { color:#738197; font-size:9px; }.onsite-admin__canvas-inspector b { color:#2868c5; font-size:12px; }
.onsite-admin__property-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px 18px 2px; }
.onsite-admin__property-summary > div { padding:10px; border:1px solid #e2e8f0; border-radius:7px; background:#f8fafc; }
.onsite-admin__property-summary span { display:block; margin-bottom:4px; color:#7b889b; font-size:9px; }
.onsite-admin__property-summary strong { color:#26364c; font-size:12px; }
.onsite-admin__rotation-control { padding:16px 18px 0; }
.onsite-admin__rotation-control > span { display:block; margin-bottom:7px; color:#66758b; font-size:10px; font-weight:700; letter-spacing:.04em; }
.onsite-admin__rotation-actions { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:6px; }
.onsite-admin__rotation-actions.has-flips { grid-template-columns:36px 36px 36px minmax(58px,1fr) auto; }
.onsite-admin__rotation-actions button { position:relative; min-height:34px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#526177; font-size:10px; font-weight:750; }
.onsite-admin__rotation-actions button:hover,.onsite-admin__rotation-actions button.is-active { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__rotation-actions button[aria-pressed="true"] { border-color:#397eea; background:#edf4ff; color:#1e5db9; }
.onsite-admin__rotation-actions output { min-width:36px; color:#617087; font-size:10px; font-variant-numeric:tabular-nums; font-weight:800; text-align:right; }
.onsite-admin__rotate-left { display:grid; width:36px; padding:0; place-items:center; }
.onsite-admin__flip-button { display:grid; width:36px; padding:0; place-items:center; }
.onsite-admin__rotation-custom { display:grid; grid-template-columns:minmax(0,1fr) 64px; align-items:center; gap:9px; margin-top:9px; padding:10px; border:1px solid #e0e7f0; border-radius:8px; background:#f8fafc; }
.onsite-admin__rotation-custom > input[type="range"] { height:4px; padding:0; border:0; accent-color:#397eea; }
.onsite-admin__rotation-custom label { position:relative; }
.onsite-admin__rotation-custom label input { padding-right:21px; font-variant-numeric:tabular-nums; }
.onsite-admin__rotation-custom label span { position:absolute; right:8px; top:50%; color:#77859a; font-size:10px; transform:translateY(-50%); pointer-events:none; }
.onsite-admin__advanced { margin:17px 18px 0; border-top:1px solid #e3e9f1; }
.onsite-admin__advanced summary { padding:12px 0 4px; color:#78869a; cursor:pointer; font-size:10px; font-weight:700; }
.onsite-admin__advanced .onsite-admin__field-row { padding:0; }
.onsite-admin__unit-input { position:relative; display:block; }
.onsite-admin__unit-input input { padding-right:26px; }
.onsite-admin__unit-input i { position:absolute; right:8px; top:50%; color:#8995a7; font-size:9px; font-style:normal; font-weight:700; transform:translateY(-50%); pointer-events:none; }
.onsite-admin__canvas-dock { position:absolute; z-index:25; left:50%; bottom:18px; display:flex; align-items:center; gap:3px; padding:5px; border:1px solid rgba(202,212,224,.9); border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 12px 32px rgba(30,48,73,.18); backdrop-filter:blur(14px); transform:translateX(-50%); }
.onsite-admin__canvas-dock > button { position:relative; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:8px; background:transparent; color:#5c6b80; }
.onsite-admin__canvas-dock > button:hover,.onsite-admin__canvas-dock > button:focus-visible { background:#eef4fc; color:#2368d1; outline:none; }
.onsite-admin__canvas-dock > button:disabled { background:transparent; color:#b9c3d0; cursor:default; opacity:.62; }
.onsite-admin__canvas-dock > button.is-active { background:#397eea; color:#fff; box-shadow:0 3px 9px rgba(57,126,234,.25); }
.onsite-admin__canvas-dock > i { width:1px; height:22px; margin:0 3px; background:#dce3ec; }
.onsite-admin__canvas-dock .onsite-admin__zoom-value { width:52px; color:#34445a; font-size:10px; font-variant-numeric:tabular-nums; font-weight:800; }
.onsite-admin [data-tooltip]::after { position:absolute; z-index:100; left:50%; top:calc(100% + 9px); padding:6px 8px; border-radius:6px; background:#172236; color:#fff; content:attr(data-tooltip); font-size:10px; font-weight:650; line-height:1; pointer-events:none; opacity:0; transform:translate(-50%,-3px); transition:opacity .12s,transform .12s; white-space:nowrap; }
.onsite-admin [data-tooltip]:hover::after,.onsite-admin [data-tooltip]:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.onsite-admin__canvas-dock [data-tooltip]::after { top:auto; bottom:calc(100% + 9px); transform:translate(-50%,3px); }
.onsite-admin__canvas-dock [data-tooltip]:hover::after,.onsite-admin__canvas-dock [data-tooltip]:focus-visible::after { transform:translate(-50%,0); }
.onsite-admin__rail-toggle { position:absolute; z-index:28; top:7px; display:grid; width:32px; height:30px; place-items:center; padding:0; border:1px solid #d5deea; border-radius:7px; background:rgba(255,255,255,.96); color:#607086; box-shadow:0 3px 10px rgba(36,53,77,.07); }
.onsite-admin__rail-toggle:hover,.onsite-admin__rail-toggle:focus-visible { border-color:#92afe0; background:#edf4ff; color:#2768cf; outline:none; }
.onsite-admin__rail-toggle--left { left:8px; }
.onsite-admin__rail-toggle--right { right:8px; }
.onsite-admin__canvas-area > .onsite-admin__canvas-top { padding-right:50px; padding-left:50px; }
.onsite-admin:fullscreen { height:100vh; min-height:0; }
.onsite-admin:fullscreen .onsite-admin__workspace { height:auto; }
.onsite-admin:fullscreen .onsite-admin__canvas-area { overflow:visible; }
@media (max-width:1080px) { .onsite-admin__workspace { grid-template-columns:184px minmax(0,1fr) 204px; }.onsite-admin__workspace.is-toolbox-closed { grid-template-columns:minmax(0,1fr) 204px; }.onsite-admin__workspace.is-inspector-closed { grid-template-columns:184px minmax(0,1fr); }.onsite-admin__workspace.is-toolbox-closed.is-inspector-closed { grid-template-columns:minmax(0,1fr); }.onsite-admin__inspector { display:block; grid-column:auto; border-top:1px solid #dce3ec; }.onsite-admin__share { margin-top:20px; border-top:1px solid var(--line); border-left:0; } }
@media (max-width:760px) { .onsite-admin { height:auto; min-height:0; }.onsite-admin__commandbar { position:sticky; top:0; }.onsite-admin__commandbar .onsite-admin__save-state { display:none; }.onsite-admin__workspace { display:flex; height:auto; flex-direction:column; }.onsite-admin__toolbox,.onsite-admin__inspector { overflow:visible; }.onsite-admin__canvas-area { order:-1; min-height:68vh; }.onsite-admin__canvas-dock { position:fixed; bottom:14px; }.onsite-admin__canvas-dock > button { width:34px; }.onsite-admin__canvas-dock > i { margin:0 1px; } }
@media print { .onsite-admin__commandbar,.onsite-admin__canvas-dock,.onsite-admin__toolbox,.onsite-admin__inspector { display:none; }.onsite-admin { height:auto; min-height:0; }.onsite-admin__workspace { display:block; height:auto; padding:0; } }

/* Five fixed layout slots live at the bottom of the element rail. */
.onsite-admin__toolbox {
  display: flex;
  flex-direction: column;
}

.onsite-admin__slot-presets {
  margin-top: auto;
  border-top: 1px solid #e3e9f1;
  border-bottom: 0;
}

.onsite-admin__slot-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.onsite-admin__slot-heading .onsite-admin__label {
  margin: 0;
}

.onsite-admin__slot-heading > button {
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #d7e0eb;
  border-radius: 6px;
  background: #fff;
  color: #617087;
  font-size: 9px;
  font-weight: 750;
}

.onsite-admin__slot-heading > button.is-active {
  border-color: #397eea;
  background: #edf4ff;
  color: #1e5db9;
}

.onsite-admin__slot-grid {
  display: grid;
  grid-template-columns: repeat(5, 26px);
  justify-content: center;
  gap: 4px;
}

.onsite-admin__slot-grid > button {
  position: relative;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #f8fafc;
  color: #758398;
  font-size: 11px;
  font-weight: 800;
}

.onsite-admin__slot-grid > button:hover,
.onsite-admin__slot-grid > button:focus-visible {
  border-color: #79a4e8;
  background: #eef5ff;
  color: #2468ce;
  outline: none;
}

.onsite-admin__slot-grid > button.is-filled {
  border-color: #cbd6e4;
  background: #fff;
  color: #43536a;
}

.onsite-admin__slot-grid > button.is-active {
  border-color: #397eea;
  background: #397eea;
  color: #fff;
}

.onsite-admin__slot-grid > button:disabled {
  border-color: #e5eaf0;
  background: #f8fafc;
  color: #b4becb;
  cursor: default;
}

.onsite-admin__slot-grid.is-saving > button {
  border-style: dashed;
  color: #526b8d;
  cursor: pointer;
  opacity: 1;
}

.onsite-admin__preset-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(23, 34, 54, .42);
  backdrop-filter: blur(3px);
}

.onsite-admin__preset-confirm {
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(28, 43, 64, .22);
}

.onsite-admin__preset-confirm h2 {
  margin: 0;
  color: #202d40;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.onsite-admin__preset-confirm p {
  margin: 9px 0 22px;
  color: #69788d;
  font-size: 12px;
}

.onsite-admin__preset-confirm > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.onsite-admin__preset-confirm button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  background: #fff;
  color: #536278;
  font-size: 11px;
  font-weight: 750;
}

.onsite-admin__preset-confirm button:last-child {
  border-color: #397eea;
  background: #397eea;
  color: #fff;
}

.onsite-admin__preset-confirm.is-danger button:last-child {
  border-color: #c84848;
  background: #c84848;
}

.onsite-admin__preset-confirm button:disabled {
  cursor: wait;
  opacity: .58;
}

.onsite-admin__participant-tool > button {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #d8e1ed;
  border-radius: 8px;
  background: #fff;
  color: #526177;
  font-size: 10px;
  font-weight: 800;
}

.onsite-admin__participant-tool > button:hover:not(:disabled) {
  border-color: #8fb2e7;
  background: #edf4ff;
  color: #1e5db9;
}

.onsite-admin__participant-tool > button:disabled {
  cursor: default;
  opacity: .48;
}

.onsite-admin__participant-tool b {
  min-width: 34px;
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #edf4ff;
  color: #286fd9;
  font-size: 9px;
  text-align: center;
}

.onsite-admin__participant-modal {
  width: min(560px, 100%);
  max-height: min(680px, calc(100dvh - 40px));
  overflow: hidden;
  border: 1px solid #d8e0ea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(28, 43, 64, .24);
}

.onsite-admin__participant-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e7ecf2;
}

.onsite-admin__participant-modal h2 {
  margin: 0;
  color: #202d40;
  font-size: 17px;
  letter-spacing: -.02em;
}

.onsite-admin__participant-modal header p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 11px;
}

.onsite-admin__participant-modal header > button {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #77869a;
}

.onsite-admin__participant-modal header > button:hover {
  background: #eef3f8;
  color: #34445a;
}

.onsite-admin__participant-list {
  max-height: 440px;
  overflow-y: auto;
  padding: 8px 0;
}

.onsite-admin__participant-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 22px;
  border-bottom: 1px solid #edf1f5;
}

.onsite-admin__participant-row:last-child { border-bottom: 0; }
.onsite-admin__participant-avatar { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #bed2ef; border-radius: 50%; background: #edf4ff; color: #286fd9; font-size: 13px; font-weight: 850; }
.onsite-admin__participant-row > div { min-width: 0; }
.onsite-admin__participant-row strong { display: block; overflow: hidden; color: #26354a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.onsite-admin__participant-row p { overflow: hidden; margin: 3px 0 0; color: #6f7f94; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.onsite-admin__participant-row small { display: block; margin-top: 5px; color: #8a97a8; font-size: 10px; }
.onsite-admin__participant-row > button { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #e4c5c5; border-radius: 7px; background: #fff; color: #b84646; font-size: 10px; font-weight: 750; }
.onsite-admin__participant-row > button:hover { border-color: #d36a6a; background: #fff2f2; }
.onsite-admin__participant-empty { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 8px; color: #8896a8; }
.onsite-admin__participant-empty p { margin: 0; font-size: 12px; }
.onsite-admin__participant-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid #e7ecf2; background: #fafbfd; }
.onsite-admin__participant-modal > footer span { color: #7b899b; font-size: 10px; line-height: 1.4; }
.onsite-admin__participant-modal > footer button { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #e0b4b4; border-radius: 7px; background: #fff; color: #b64040; font-size: 10px; font-weight: 800; }
.onsite-admin__participant-modal > footer button:hover:not(:disabled) { border-color: #cc6262; background: #fff1f1; }
.onsite-admin__participant-modal > footer button:disabled { cursor: wait; opacity: .55; }

@media (max-width: 560px) {
  .onsite-admin__participant-row { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 16px; }
  .onsite-admin__participant-row > button { grid-column: 2; justify-self: start; }
  .onsite-admin__participant-modal > footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .onsite-admin__toolbox {
    display: flex;
  }
}

@media print {
  .onsite-admin:has(.onsite-admin__qr-modal-backdrop) .onsite-admin__workspace { display:none; }
  .onsite-admin__qr-modal-backdrop { position:static; display:grid; min-height:100vh; padding:0; background:#fff; }
  .onsite-admin__qr-modal { border:0; box-shadow:none; }
  .onsite-admin__qr-modal > header,.onsite-admin__qr-modal > code,.onsite-admin__qr-print,.onsite-admin__qr-modal-actions { display:none; }
  .onsite-admin__qr-modal > img { width:72mm; height:72mm; margin:auto; }
}

/* ── 전체 화면 모드 (immersive) ─────────────────────────────────────────
   캔버스처럼 화면 전체가 배치도이고, 양옆 패널은 여닫는다.
   맨 위 안내 바는 없애고 그 내용(로고·행사 이름·저장 상태)은 왼쪽 바 머리로 옮긴다. */
.onsite-admin.onsite-admin--immersive { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; }
.onsite-admin--immersive .onsite-admin__workspace { flex:1; height:auto; min-height:0; }
.onsite-admin--immersive .onsite-admin__canvas-wrap { flex:1; min-height:0; }
.onsite-admin__rail-brand { display:flex; align-items:center; gap:9px; padding:10px 12px; border-bottom:1px solid #e6ebf1; }
.onsite-admin__rail-brand > div { display:grid; min-width:0; gap:2px; }
.onsite-admin__rail-brand strong { overflow:hidden; color:#1d293a; font-size:12.5px; text-overflow:ellipsis; white-space:nowrap; }
.onsite-admin__rail-brand .onsite-admin__save-state { overflow:hidden; max-width:none; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.onsite-admin__rail-event { margin:10px 12px 0; }
.onsite-admin__canvas-top > div:first-child { display:flex; align-items:center; gap:8px; }
.onsite-admin__floating-brand { display:inline-flex; }

@media (max-width:760px) {
  .onsite-admin.onsite-admin--immersive { height:100dvh; }
  .onsite-admin--immersive .onsite-admin__workspace { position:relative; display:block; flex:1; height:auto; padding:0; }
  .onsite-admin--immersive .onsite-admin__canvas-area { position:absolute; inset:0; min-height:0; }
  .onsite-admin--immersive .onsite-admin__canvas-wrap { border:0; border-radius:0; }
  /* 휴대폰에서는 패널이 배치도 위로 떠서 열린다. 여닫는 단추는 가리지 않게 그 아래부터. */
  .onsite-admin--immersive .onsite-admin__toolbox,
  .onsite-admin--immersive .onsite-admin__inspector { position:absolute; z-index:35; top:50px; bottom:8px; width:min(300px, calc(100% - 24px)); overflow:auto; box-shadow:0 18px 40px rgba(30,48,73,.22); }
  .onsite-admin--immersive .onsite-admin__toolbox { left:8px; }
  .onsite-admin--immersive .onsite-admin__inspector { right:8px; border-top:1px solid #dce3ec; }
  .onsite-admin--immersive .onsite-admin__canvas-dock { position:absolute; bottom:max(14px, env(safe-area-inset-bottom)); }
}

/* Canvas workspace visual parity */
.onsite-admin.onsite-admin--immersive {
  --canvas-ground: #f3f3f2;
  --canvas-paper: #fff;
  --canvas-ink: #171922;
  --canvas-muted: #737783;
  --canvas-hair: #e8e8e6;
  background: var(--canvas-ground);
  color: var(--canvas-ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

.onsite-admin--immersive :where(button, input, textarea, select) {
  font-family: inherit;
  letter-spacing: 0;
}

.onsite-admin--immersive .onsite-admin__workspace {
  grid-template-columns: 292px minmax(0, 1fr) 380px;
  gap: 10px;
  padding: 10px;
  background: var(--canvas-ground);
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.onsite-admin--immersive .onsite-admin__workspace.is-inspector-closed {
  grid-template-columns: 292px minmax(0, 1fr);
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed.is-inspector-closed {
  grid-template-columns: minmax(0, 1fr);
}

.onsite-admin--immersive .onsite-admin__toolbox,
.onsite-admin--immersive .onsite-admin__inspector {
  border: 1px solid var(--canvas-hair);
  border-radius: 18px;
  background: var(--canvas-paper);
  box-shadow: 0 16px 44px rgba(28, 30, 38, .08);
  color: var(--canvas-ink);
  scrollbar-width: none;
}

.onsite-admin--immersive .onsite-admin__toolbox::-webkit-scrollbar,
.onsite-admin--immersive .onsite-admin__inspector::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.onsite-admin--immersive .onsite-admin__rail-brand {
  min-height: 58px;
  gap: 10px;
  padding: 10px 14px;
  border-color: var(--canvas-hair);
}

.onsite-admin--immersive .onsite-admin__rail-brand strong {
  color: var(--canvas-ink);
  font-size: 13px;
  font-weight: 750;
}

.onsite-admin--immersive .onsite-admin__rail-brand .onsite-admin__save-state {
  color: var(--canvas-muted);
  font-size: 11px;
}

.onsite-admin--immersive .onsite-admin__panel-heading {
  min-height: 52px;
  padding: 14px 16px;
  border-color: var(--canvas-hair);
  background: rgba(255, 255, 255, .96);
  color: var(--canvas-ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
}

.onsite-admin--immersive .onsite-admin__panel-heading small,
.onsite-admin--immersive .onsite-admin__label {
  color: var(--canvas-muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.onsite-admin--immersive .onsite-admin__tool-section {
  padding: 16px;
  border-color: #efefed;
}

.onsite-admin--immersive :is(.onsite-admin__preset-grid button, .onsite-admin__object-button, .onsite-admin__object-grid button) {
  min-height: 42px;
  border-color: #e1e1df;
  border-radius: 9px;
  color: #4a4a52;
  font-size: 12px;
}

.onsite-admin--immersive :is(.onsite-admin__preset-grid small, .onsite-admin__object-button small) {
  color: #8b8b91;
  font-size: 10.5px;
}

.onsite-admin--immersive :is(.onsite-admin__add-button, .onsite-admin__auto-button, .onsite-admin__template-trigger) {
  min-height: 38px;
  border-radius: 9px;
  font-size: 12px;
}

.onsite-admin--immersive .onsite-admin__canvas-area {
  overflow: hidden;
  background: var(--canvas-ground);
}

.onsite-admin--immersive .onsite-admin__canvas-top {
  position: absolute;
  z-index: 24;
  top: 9px;
  right: 10px;
  left: 10px;
  min-height: 0;
  padding: 0 42px;
  pointer-events: none;
}

.onsite-admin--immersive .onsite-admin__canvas-top > div {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 6px 18px rgba(20, 20, 25, .06);
  pointer-events: auto;
}

.onsite-admin--immersive .onsite-admin__canvas-top strong {
  color: var(--canvas-ink);
  font-size: 13px;
  font-weight: 750;
}

.onsite-admin--immersive .onsite-admin__canvas-meta {
  gap: 6px;
}

.onsite-admin--immersive .onsite-admin__canvas-dimensions,
.onsite-admin--immersive .onsite-admin__canvas-size {
  height: 30px;
  padding: 0 9px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #66666d;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0;
}

.onsite-admin--immersive .onsite-admin__canvas-wrap {
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--canvas-ground);
  background-image: radial-gradient(circle, rgba(39, 44, 57, .14) .8px, transparent .9px);
  background-size: 22px 22px;
  box-shadow: none;
  overscroll-behavior: contain;
}

.onsite-admin--immersive .onsite-admin__rail-toggle {
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #737783;
  box-shadow: none;
}

.onsite-admin--immersive .onsite-admin__rail-toggle:hover,
.onsite-admin--immersive .onsite-admin__rail-toggle:focus-visible {
  border-color: transparent;
  background: #f2f2f0;
  color: #34343a;
  box-shadow: none;
}

.onsite-admin--immersive .onsite-admin__rail-toggle--left { left: 12px; }
.onsite-admin--immersive .onsite-admin__rail-toggle--right { right: 12px; }

.onsite-admin--immersive .onsite-admin__canvas-dock {
  bottom: 16px;
  gap: 2px;
  padding: 5px;
  border: 0;
  border-radius: 13px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 3px rgba(20, 20, 25, .09), 0 12px 34px rgba(20, 20, 25, .15);
}

.onsite-admin--immersive .onsite-admin__canvas-dock > button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #6b6b72;
}

.onsite-admin--immersive .onsite-admin__canvas-dock > button:hover:not(:disabled) {
  background: #f2f2f0;
  color: var(--canvas-ink);
}

.onsite-admin--immersive .onsite-admin__canvas-dock > button.is-active {
  background: #ede9fb;
  color: #6b4fc4;
  box-shadow: none;
}

.onsite-admin--immersive .onsite-admin__canvas-dock > i {
  height: 20px;
  margin: 0 3px;
  background: var(--canvas-hair);
}

.onsite-admin--immersive .onsite-admin__canvas-dock .onsite-admin__zoom-value {
  width: 52px;
  color: #55555c;
  font-size: 11px;
  font-weight: 750;
}

.onsite-admin--immersive .onsite-admin__view-actions {
  position: absolute;
  z-index: 26;
  bottom: 72px;
  left: 50%;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 38, 61, .1);
  transform: translateX(-50%);
}
.onsite-admin--immersive .onsite-admin__view-actions button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #455269;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.onsite-admin--immersive .onsite-admin__view-actions button:hover,
.onsite-admin--immersive .onsite-admin__view-actions button:focus-visible { background: #edf2fa; color: #2e53a1; }

@media (max-width: 1180px) {
  .onsite-admin--immersive .onsite-admin__workspace {
    grid-template-columns: 248px minmax(0, 1fr) 300px;
  }
  .onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .onsite-admin--immersive .onsite-admin__workspace.is-inspector-closed {
    grid-template-columns: 248px minmax(0, 1fr);
  }
}

/* Keep the rails compact and place their close controls inside the panels. */
.onsite-admin.onsite-admin--immersive {
  font-size: 12px;
}

.onsite-admin--immersive .onsite-admin__canvas-area {
  overflow: visible;
}

.onsite-admin--immersive .onsite-admin__rail-brand strong {
  font-size: 12px;
}

.onsite-admin--immersive .onsite-admin__rail-brand {
  padding-right: 52px;
}

.onsite-admin--immersive .onsite-admin__rail-brand .onsite-admin__save-state {
  font-size: 10px;
}

.onsite-admin--immersive .onsite-admin__panel-heading {
  font-size: 12px;
}

.onsite-admin--immersive .onsite-admin__inspector > .onsite-admin__panel-heading {
  padding-left: 52px;
}

.onsite-admin--immersive .onsite-admin__panel-heading small,
.onsite-admin--immersive .onsite-admin__label {
  font-size: 9px;
}

.onsite-admin--immersive :is(.onsite-admin__preset-grid button, .onsite-admin__object-button, .onsite-admin__object-grid button) {
  font-size: 10px;
}

.onsite-admin--immersive :is(.onsite-admin__preset-grid small, .onsite-admin__object-button small) {
  font-size: 9px;
}

.onsite-admin--immersive :is(.onsite-admin__add-button, .onsite-admin__auto-button, .onsite-admin__template-trigger) {
  font-size: 10px;
}

.onsite-admin--immersive .onsite-admin__canvas-top strong {
  font-size: 12px;
}

.onsite-admin--immersive .onsite-admin__canvas-top {
  justify-content: flex-end;
}

.onsite-admin--immersive .onsite-admin__canvas-top > div:first-child {
  display: none;
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed .onsite-admin__canvas-top {
  justify-content: space-between;
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed .onsite-admin__canvas-top > div:first-child {
  display: flex;
}

.onsite-admin--immersive .onsite-admin__canvas-top > div:first-child > strong {
  display: none;
}

.onsite-admin--immersive .onsite-admin__rail-toggle--left {
  left: -48px;
}

.onsite-admin--immersive .onsite-admin__rail-toggle--right {
  right: -48px;
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed .onsite-admin__rail-toggle--left {
  left: 12px;
}

.onsite-admin--immersive .onsite-admin__workspace.is-inspector-closed .onsite-admin__rail-toggle--right {
  right: 12px;
}

.onsite-admin--immersive .onsite-admin__workspace.is-toolbox-closed .onsite-admin__rail-toggle--left,
.onsite-admin--immersive .onsite-admin__workspace.is-inspector-closed .onsite-admin__rail-toggle--right {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 1px 2px rgba(20, 20, 25, .06), 0 6px 18px rgba(20, 20, 25, .06);
}

@media (max-width: 760px) {
  .onsite-admin--immersive .onsite-admin__canvas-area {
    overflow: hidden;
  }

  .onsite-admin--immersive .onsite-admin__rail-toggle--left {
    left: 12px;
  }

  .onsite-admin--immersive .onsite-admin__rail-toggle--right {
    right: 12px;
  }
}

/* Canvas dimensions are contextual: edit them from the inspector, not over the map. */
.onsite-admin__canvas-top,
.onsite-admin__canvas-settings {
  display: none !important;
}

.onsite-admin__canvas-dimension-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.onsite-admin__canvas-dimension-fields label {
  display: grid;
  gap: 6px;
  color: #737783;
  font-size: 10px;
  font-weight: 700;
}

.onsite-admin__canvas-dimension-fields input {
  height: 34px;
  padding: 0 9px;
  border: 1px solid #dededb;
  border-radius: 8px;
  background: #fff;
  color: #2d2d33;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.onsite-admin__canvas-ratio-control {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 9px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.onsite-admin__canvas-ratio-control button {
  min-height: 32px;
  border: 1px solid #dededb;
  border-radius: 8px;
  background: #fff;
  color: #66666d;
  font-size: 10px;
  font-weight: 750;
}

.onsite-admin__canvas-reflow-note {
  display: block;
  margin-top: 9px;
  color: #7b7f89;
  font-size: 9px;
  line-height: 1.5;
}

.onsite-admin__canvas-ratio-control button:hover,
.onsite-admin__canvas-ratio-control button.is-active {
  border-color: #8f7bdc;
  background: #f1edfc;
  color: #6249bd;
}

/* Match the workspace canvas type scale. */
.onsite-admin.onsite-admin--immersive {
  font-size: 13px;
}

.onsite-admin--immersive .onsite-admin__rail-brand strong,
.onsite-admin--immersive .onsite-admin__panel-heading {
  font-size: 13px;
}

.onsite-admin--immersive .onsite-admin__rail-brand .onsite-admin__save-state,
.onsite-admin--immersive .onsite-admin__panel-heading small,
.onsite-admin--immersive .onsite-admin__label {
  font-size: 11px;
}

.onsite-admin--immersive :is(
  .onsite-admin__preset-grid button,
  .onsite-admin__object-button,
  .onsite-admin__object-grid button,
  .onsite-admin__add-button,
  .onsite-admin__auto-button,
  .onsite-admin__template-trigger,
  .onsite-admin__slot-heading > button
) {
  font-size: 12px;
}

.onsite-admin--immersive :is(
  .onsite-admin__preset-grid small,
  .onsite-admin__object-button small,
  .onsite-admin__qr-heading > span:last-child,
  .onsite-admin__qr-details > span,
  .onsite-admin__sidebar-qr small
) {
  font-size: 10.5px;
}

.onsite-admin--immersive .onsite-admin__qr-details code {
  font-size: 12px;
}

/* Venue-first workflow: configure, generate, then validate. */
.onsite-admin__section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.onsite-admin__section-title .onsite-admin__label { margin:0; }
.onsite-admin__section-title small { color:#8a96a7; font-size:9px; line-height:1.35; text-align:right; }
.onsite-admin__table-builder .onsite-admin__preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.onsite-admin__table-builder .onsite-admin__preset-grid button { display:grid; align-content:center; gap:4px; min-height:58px; }
.onsite-admin__table-builder .onsite-admin__preset-grid button strong { overflow:hidden; font-size:10.5px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.onsite-admin__table-builder .onsite-admin__preset-grid button small { margin:0; font-size:8.5px; line-height:1.2; }
.onsite-admin__batch-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.onsite-admin__batch-row > span { color:#5f6e82; font-size:9px; font-weight:800; }
.onsite-admin__quantity-control { display:grid; grid-template-columns:28px 42px 28px; align-items:center; overflow:hidden; border:1px solid #d8e1ed; border-radius:7px; background:#fff; }
.onsite-admin__quantity-control button { display:grid; width:28px; height:29px; place-items:center; padding:0; border:0; background:#fff; color:#56667d; }
.onsite-admin__quantity-control button:hover { background:#edf4ff; color:#1e5db9; }
.onsite-admin__quantity-control input,.onsite-admin__quantity-control output { display:block; width:42px; min-width:0; height:29px; padding:0; border:0; border-right:1px solid #e3e8ef; border-left:1px solid #e3e8ef; border-radius:0; background:#f8fafc; color:#26354a; font-size:10px; font-style:normal; font-weight:800; line-height:29px; text-align:center; }
.onsite-admin__quantity-control input:focus { border-color:#e3e8ef; box-shadow:none; }
.onsite-admin__table-actions { grid-template-columns:1fr 1fr; }
.onsite-admin__table-actions :is(.onsite-admin__add-button,.onsite-admin__auto-button) { display:flex; align-items:center; justify-content:center; gap:5px; min-height:36px; padding:7px 6px; font-size:9px; }
.onsite-admin__rearrange-button { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; min-height:31px; margin-top:7px; padding:0 8px; border:0; background:transparent; color:#62738a; font-size:9px; font-weight:750; }
.onsite-admin__rearrange-button:hover { color:#1e5db9; }
.onsite-admin__item--table.onsite-admin__item--round { border-radius:50%; }

.onsite-admin__venue-overview { padding:16px; border-bottom:1px solid #e5eaf1; }
.onsite-admin__overview-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.onsite-admin__overview-title > div { display:grid; gap:3px; }
.onsite-admin__overview-title strong { color:#253349; font-size:12px; }
.onsite-admin__overview-title span { color:#7a8798; font-size:9px; }
.onsite-admin__overview-title i { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; font-style:normal; }
.onsite-admin__overview-title i.is-ready { background:#e8f6ee; color:#23784a; }
.onsite-admin__overview-title i.has-issues { background:#fff3df; color:#a8610c; }
.onsite-admin__overview-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }
.onsite-admin__overview-stats > div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid #e2e8f0; border-radius:7px; background:#f8fafc; }
.onsite-admin__overview-stats span { color:#748196; font-size:8.5px; font-weight:700; }
.onsite-admin__overview-stats strong { color:#263a56; font-size:12px; font-variant-numeric:tabular-nums; }
.onsite-admin__check-list { display:grid; gap:6px; margin-top:12px; }
.onsite-admin__check-list > div { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:6px; padding:8px; border-radius:6px; font-size:9px; line-height:1.45; }
.onsite-admin__check-list .is-success { background:#edf8f1; color:#286f4a; }
.onsite-admin__check-list .is-info { background:#eef4fc; color:#496987; }
.onsite-admin__check-list :is(.is-warning,.is-error) { background:#fff5e7; color:#8b570f; }
.onsite-admin__overview-arrange { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:34px; margin-top:11px; border:1px solid #b9cbea; border-radius:7px; background:#f1f6ff; color:#245fae; font-size:9px; font-weight:800; }
.onsite-admin__table-property-actions { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; padding:12px 18px 3px; }
.onsite-admin__table-property-actions > span { color:#738197; font-size:9px; font-weight:750; }
.onsite-admin__table-property-actions > button { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; border:1px solid #d8e1ed; border-radius:7px; background:#fff; color:#4c5e75; font-size:9px; font-weight:750; }

.onsite-admin__template-modal { width:min(720px,calc(100% - 28px)); }
.onsite-admin__venue-template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:16px 22px 0; }
.onsite-admin__venue-template-grid > button { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:9px; min-height:58px; padding:10px; border:1px solid #dce4ee; border-radius:8px; background:#fff; color:#607087; text-align:left; }
.onsite-admin__venue-template-grid > button:hover,.onsite-admin__venue-template-grid > button.is-active { border-color:#6e98dd; background:#edf4ff; color:#1f5fae; }
.onsite-admin__venue-template-grid span { display:grid; gap:3px; }
.onsite-admin__venue-template-grid strong { color:#2d3b50; font-size:10px; }
.onsite-admin__venue-template-grid small { color:#7b899c; font-size:8.5px; line-height:1.35; }
.onsite-admin__venue-preview { position:relative; height:164px; margin:12px 22px 0; overflow:hidden; border:1px solid #dce4ee; border-radius:9px; background-color:#f8fafc; background-image:linear-gradient(#edf1f6 1px,transparent 1px),linear-gradient(90deg,#edf1f6 1px,transparent 1px); background-size:16px 16px; }
.onsite-admin__venue-preview-stage { position:absolute; z-index:2; top:12px; left:50%; display:flex; align-items:center; justify-content:center; width:112px; height:23px; border:1px solid #8e86ca; border-radius:4px; background:#dedaf5; color:#6258ac; transform:translateX(-50%); }
.onsite-admin__venue-preview.is-expo .onsite-admin__venue-preview-stage { display:none; }
.onsite-admin__venue-preview-items { position:absolute; inset:47px 34px 18px; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-content:space-around; gap:9px 12px; }
.onsite-admin__venue-preview-items i { display:block; height:11px; border:1px solid #97aecb; border-radius:3px; background:#dce7f5; }
.onsite-admin__venue-preview.is-mixer .onsite-admin__venue-preview-items i,.onsite-admin__venue-preview.is-rounds .onsite-admin__venue-preview-items i { width:17px; height:17px; justify-self:center; border-radius:50%; }
.onsite-admin__venue-preview.is-workshop .onsite-admin__venue-preview-items { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 28px; }
.onsite-admin__venue-preview.is-workshop .onsite-admin__venue-preview-items i { height:20px; border-radius:5px; }
.onsite-admin__venue-preview.is-theater .onsite-admin__venue-preview-items { grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px 8px; }
.onsite-admin__venue-preview.is-theater .onsite-admin__venue-preview-items i { width:10px; height:10px; justify-self:center; border-radius:50% 50% 3px 3px; }
.onsite-admin__venue-preview.is-expo .onsite-admin__venue-preview-items { inset:20px 34px; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px 18px; }
.onsite-admin__venue-preview-aisle { position:absolute; z-index:1; top:42px; bottom:12px; left:50%; width:34px; border-right:1px dashed #b7c2d0; border-left:1px dashed #b7c2d0; background:rgba(255,255,255,.72); transform:translateX(-50%); }
.onsite-admin__venue-preview-door { position:absolute; bottom:0; width:46px; height:8px; border:1px dashed #4c83d3; background:#e7f0ff; }
.onsite-admin__venue-preview-door.is-left { left:12px; }.onsite-admin__venue-preview-door.is-right { right:12px; }
.onsite-admin__venue-template-settings { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 22px 0; padding:13px; border:1px solid #e0e6ee; border-radius:9px; background:#fafbfd; }
.onsite-admin__venue-template-settings > label { display:grid; gap:6px; color:#65748a; font-size:9px; font-weight:800; }
.onsite-admin__venue-template-settings input { height:34px; border-color:#d8e1ed; background:#fff; color:#26354a; font-size:11px; }
.onsite-admin__venue-template-settings .onsite-admin__door-side { margin:0; }

@media (max-width:760px) {
  .onsite-admin__venue-template-grid,.onsite-admin__venue-template-settings { grid-template-columns:1fr; }
  .onsite-admin__venue-preview { height:138px; }
  .onsite-admin__table-actions { grid-template-columns:1fr; }
}
.operation-feature-settings{display:grid;gap:18px;padding:22px;border:1px solid #dce3ef;border-radius:14px;background:#fff}.operation-feature-settings>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.operation-feature-settings>header span{color:#3566d3;font-size:10px;font-weight:900;letter-spacing:.08em}.operation-feature-settings>header h2{margin:4px 0 0;color:#1f2937;font-size:20px}.operation-feature-settings>header p{margin:5px 0 0;color:#6b778c;font-size:12px}.operation-feature-settings>header button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:0;border-radius:8px;background:#315fd1;color:#fff;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.operation-feature-settings>header button:disabled{cursor:not-allowed;opacity:.55}.operation-feature-settings__list{display:grid;border-top:1px solid #e8edf4}.operation-feature-settings__list>label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:68px;padding:12px 2px;border-bottom:1px solid #e8edf4;cursor:pointer}.operation-feature-settings__list input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.operation-feature-settings__switch{display:flex;align-items:center;width:34px;height:20px;padding:2px;border-radius:999px;background:#cbd3df;transition:background .2s ease}.operation-feature-settings__switch i{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(27,39,61,.22);transition:transform .2s ease}.operation-feature-settings__list label.is-enabled .operation-feature-settings__switch{background:#3566d3}.operation-feature-settings__list label.is-enabled .operation-feature-settings__switch i{transform:translateX(14px)}.operation-feature-settings__copy{display:grid;gap:3px}.operation-feature-settings__copy strong{color:#253044;font-size:13px}.operation-feature-settings__copy small{color:#7a8597;font-size:11px}.operation-feature-settings__pair{display:flex;align-items:center;gap:5px;color:#7a8597;font-size:9px;font-weight:800}.operation-feature-settings__pair svg{color:#3566d3}.operation-feature-settings__message{margin:0;color:#35634f;font-size:11px;font-weight:750}@media(max-width:680px){.operation-feature-settings>header{flex-direction:column}.operation-feature-settings__pair{display:none}.operation-feature-settings__list>label{grid-template-columns:auto minmax(0,1fr)}}
.education-ops{display:grid;gap:18px}.education-ops__heading{display:flex;align-items:center;justify-content:space-between;gap:18px}.education-ops__heading>div{display:flex;align-items:center;gap:12px}.education-ops__heading>div>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#eeeafd;color:#6550c7}.education-ops__heading svg{width:19px;height:19px}.education-ops__heading h2{margin:0;color:#211d35;font-size:22px;letter-spacing:-.035em}.education-ops__heading p{margin:4px 0 0;color:#746f86;font-size:12px}.education-ops__heading>button,.education-ops__queue{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:0;border-radius:9px;background:#6550c7;color:#fff;font:inherit;font-size:12px;font-weight:850;white-space:nowrap}.education-ops__queue{background:#f0ecff;color:#5a45bc}.education-ops__progress{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:18px 20px;border:1px solid #ddd7f3;border-radius:13px;background:#fff}.education-ops__progress>div{display:flex;align-items:baseline;gap:9px}.education-ops__progress strong{font-size:14px}.education-ops__progress span{color:#7c768c;font-size:11px}.education-ops__progress>b{color:#6550c7;font-size:21px}.education-ops__progress>i{grid-column:1/-1;height:7px;overflow:hidden;border-radius:999px;background:#eeeaf7}.education-ops__progress>i>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6550c7,#8a75df);transition:width .35s ease}.education-ops__form{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:20px;border:1px solid #dcd5f2;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(63,46,120,.06)}.education-ops__form-title{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between}.education-ops__form-title strong{font-size:15px}.education-ops__form-title button{display:grid;place-items:center;border:0;background:transparent;color:#777184;cursor:pointer}.education-ops__form label,.education-ops__mentoring-plan label{display:grid;gap:6px}.education-ops__form label>span,.education-ops__mentoring-plan label>span{color:#716b80;font-size:10px;font-weight:800}.education-ops__form .is-wide,.education-ops__mentoring-plan .is-wide{grid-column:1/-1}.education-ops__form input,.education-ops__form select,.education-ops__form textarea,.education-ops__mentoring-plan input,.education-ops__mentoring-plan select,.education-ops__mentoring-plan textarea{width:100%;border:1px solid #ddd9e8;border-radius:8px;background:#fff;color:#29243a;font:inherit;font-size:12px;outline:0}.education-ops__form input,.education-ops__form select,.education-ops__mentoring-plan input,.education-ops__mentoring-plan select{height:39px;padding:0 10px}.education-ops__form textarea,.education-ops__mentoring-plan textarea{min-height:86px;padding:10px;line-height:1.55;resize:vertical}.education-ops__form input:focus,.education-ops__form select:focus,.education-ops__form textarea:focus,.education-ops__mentoring-plan input:focus,.education-ops__mentoring-plan select:focus,.education-ops__mentoring-plan textarea:focus{border-color:#8b78db;box-shadow:0 0 0 3px rgba(101,80,199,.1)}.education-ops__form-actions{display:flex;grid-column:1/-1;justify-content:flex-end;gap:7px}.education-ops__form-actions button,.education-ops__mentoring-plan>button{min-height:36px;padding:0 13px;border:1px solid #ddd8e9;border-radius:8px;background:#fff;color:#6d667d;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.education-ops__form-actions button:last-child,.education-ops__mentoring-plan>button{border-color:#6550c7;background:#6550c7;color:#fff}.education-ops__error{margin:0;padding:11px 13px;border-radius:9px;background:#fff0ee;color:#b64d45;font-size:12px}.education-ops__curriculum{display:grid;gap:10px}.education-ops__curriculum>article{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:16px;padding:17px;border:1px solid #e2ddee;border-radius:12px;background:#fff}.education-ops__week{display:grid;align-content:center;justify-items:center;border-right:1px solid #ebe7f1}.education-ops__week b{color:#6550c7;font-size:23px}.education-ops__week span{color:#9891a6;font-size:9px;font-weight:900;letter-spacing:.08em}.education-ops__curriculum-body{display:grid;gap:6px}.education-ops__curriculum-body>div{display:flex;align-items:center;gap:8px}.education-ops__curriculum-body>div>span,.education-ops__mentoring-request>span,.education-ops__submissions>div>div:last-child>span{padding:4px 7px;border-radius:999px;background:#eeeafd;color:#604bbd;font-size:9px;font-weight:850}.education-ops__curriculum-body small{color:#8d8799;font-size:10px}.education-ops__curriculum-body h3,.education-ops__assignment-head h3,.education-ops__mentoring-request h3{margin:0;font-size:14px}.education-ops__curriculum-body p,.education-ops__assignment-head p,.education-ops__mentoring-request p{margin:0;color:#716b7e;font-size:11px;line-height:1.55}.education-ops__row-actions{display:flex;align-items:center;gap:6px}.education-ops__row-actions select{height:34px;border:1px solid #ddd8e7;border-radius:8px;background:#fff;color:#645d72;font-size:11px}.education-ops__row-actions button{display:grid;place-items:center;width:34px;height:34px;border:1px solid #eee0e0;border-radius:8px;background:#fff;color:#b46161;cursor:pointer}.education-ops__assignments{display:grid;gap:12px}.education-ops__assignments>article{padding:18px;border:1px solid #e1ddeb;border-radius:13px;background:#fff}.education-ops__assignments>article.is-open{border-color:#b9ace7;box-shadow:0 8px 24px rgba(79,60,150,.06)}.education-ops__assignment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.education-ops__assignment-head>div{display:grid;gap:6px}.education-ops__assignment-head>div>span{width:max-content;padding:4px 7px;border-radius:6px;background:#f2effa;color:#6550c7;font-size:9px;font-weight:850}.education-ops__assignment-head select{height:34px;border:1px solid #dcd7e7;border-radius:8px;background:#fff;font-size:11px}.education-ops__assignments dl{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0;border-top:1px solid #eeeaf2;border-bottom:1px solid #eeeaf2}.education-ops__assignments dl>div{display:grid;gap:4px;padding:12px;border-right:1px solid #eeeaf2}.education-ops__assignments dl>div:last-child{border-right:0}.education-ops__assignments dt{color:#8a8495;font-size:9px}.education-ops__assignments dd{margin:0;color:#332d41;font-size:12px;font-weight:800}.education-ops__open-submissions{padding:0;border:0;background:transparent;color:#6550c7;font-size:11px;font-weight:850;cursor:pointer}.education-ops__submissions{display:grid;gap:8px;margin-top:15px;padding-top:15px;border-top:1px dashed #ddd7e8}.education-ops__submissions>div{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:13px;border-radius:9px;background:#f9f8fc}.education-ops__submissions>div>div{display:grid;gap:4px}.education-ops__submissions strong{font-size:12px}.education-ops__submissions span,.education-ops__submissions p{margin:0;color:#7e778c;font-size:10px}.education-ops__submissions>div>div:last-child{justify-items:end}.education-ops__submissions button{display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid #dcd7e7;border-radius:7px;background:#fff;color:#665e76;font-size:10px;font-weight:800}.education-ops__mentoring{display:grid;gap:12px}.education-ops__mentoring>article{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr);gap:20px;padding:18px;border:1px solid #e1ddec;border-radius:13px;background:#fff}.education-ops__mentoring-request{display:grid;align-content:start;gap:8px;padding-right:20px;border-right:1px solid #ebe7f0}.education-ops__mentoring-request>span{width:max-content}.education-ops__mentoring-request dl{display:grid;gap:7px;margin:8px 0 0}.education-ops__mentoring-request dl>div{display:grid;grid-template-columns:70px 1fr;gap:8px}.education-ops__mentoring-request dt{color:#918a9d;font-size:9px}.education-ops__mentoring-request dd{margin:0;font-size:11px;font-weight:750}.education-ops__mentoring-plan{display:grid;grid-template-columns:1fr 1fr;gap:10px}.education-ops__mentoring-plan>button{display:inline-flex;grid-column:1/-1;align-items:center;justify-content:center;gap:6px}.education-ops__empty{display:grid;place-items:center;gap:7px;min-height:220px;border:1px dashed #d9d3e7;border-radius:12px;color:#8b8498;text-align:center}.education-ops__empty svg{color:#8a75d5}.education-ops__empty strong{color:#4c455b;font-size:13px}.education-ops__empty span{font-size:11px}.education-ops__inline-empty{margin:0;color:#8b8497;font-size:11px}.education-ops button:focus-visible,.education-ops select:focus-visible{outline:2px solid rgba(101,80,199,.4);outline-offset:2px}@media(max-width:900px){.education-ops__mentoring>article{grid-template-columns:1fr}.education-ops__mentoring-request{padding:0 0 16px;border-right:0;border-bottom:1px solid #ebe7f0}}@media(max-width:680px){.education-ops__heading{align-items:flex-start;flex-direction:column}.education-ops__form,.education-ops__mentoring-plan{grid-template-columns:1fr}.education-ops__form .is-wide,.education-ops__mentoring-plan .is-wide{grid-column:auto}.education-ops__curriculum>article{grid-template-columns:48px 1fr}.education-ops__row-actions{grid-column:1/-1;justify-content:flex-end}.education-ops__assignment-head{flex-direction:column}.education-ops__assignments dl{grid-template-columns:1fr 1fr}.education-ops__assignments dl>div:nth-child(2){border-right:0}.education-ops__assignments dl>div:nth-child(-n+2){border-bottom:1px solid #eeeaf2}.education-ops__submissions>div{flex-direction:column}.education-ops__submissions>div>div:last-child{justify-items:start}}
.contest-admin-v2 { --navy:#10213f; --blue:#244a7c; --line:#e4e9f2; --muted:#68758a; min-height:100vh; background:#f5f7fb; color:#172033; }
.contest-admin-v2 * { box-sizing:border-box; }
.contest-admin-v2__sidebar { position:fixed; inset:0 auto 0 0; z-index:10; display:flex; flex-direction:column; width:264px; padding:22px 18px; overflow-y:auto; background:var(--navy); color:#fff; }
.contest-admin-v2__back { display:inline-flex; align-items:center; gap:7px; width:max-content; margin-bottom:24px; color:#aebbd2; font-size:13px; font-weight:700; text-decoration:none; }
.contest-admin-v2__brand { display:flex; align-items:center; gap:11px; margin:25px 0; }
.contest-admin-v2__brand > span { display:grid; place-items:center; width:39px; height:39px; border-radius:11px; background:#fff; color:var(--navy); font-size:13px; font-weight:950; }
.contest-admin-v2__brand div { display:grid; gap:2px; }.contest-admin-v2__brand strong{font-size:15px}.contest-admin-v2__brand small{color:#8fa0bd;font-size:11px;letter-spacing:.04em}
.contest-admin-v2__contest-summary { display:grid; gap:8px; padding:16px 10px 18px; border-top:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); }
.contest-admin-v2__contest-summary > strong { font-size:15px; line-height:1.45; }.contest-admin-v2__contest-summary > small{color:#adbbd1}
.contest-admin-v2__sidebar nav { display:grid; gap:13px; margin-top:24px; }
.contest-admin-v2__nav-group { display:grid; gap:3px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.contest-admin-v2__nav-group:first-child { padding-top:0; border-top:0; }
.contest-admin-v2__nav-group-title { padding:0 12px 5px; color:#8293af; font-size:11px; font-weight:850; letter-spacing:.07em; }
.contest-admin-v2__sidebar nav button { position:relative; display:flex; align-items:center; gap:11px; min-height:42px; padding:0 12px; border:0; border-radius:9px; background:transparent; color:#aebbd2; font:inherit; font-size:14px; font-weight:650; cursor:pointer; text-align:left; transition:background var(--organizer-motion-fast) var(--organizer-ease-standard),color var(--organizer-motion-fast) var(--organizer-ease-standard),transform var(--organizer-motion-fast) var(--organizer-ease-out); }
.contest-admin-v2__sidebar nav button svg{color:#7587a6;transition:color var(--organizer-motion-fast) var(--organizer-ease-standard)}
.contest-admin-v2__sidebar nav button:hover{background:rgba(255,255,255,.07);color:#eef3ff}.contest-admin-v2__sidebar nav button:hover svg{color:#aebddd}
.contest-admin-v2__sidebar nav button.is-active{background:color-mix(in srgb,var(--blue) 20%,transparent);color:color-mix(in srgb,var(--blue) 40%,#fff);font-weight:700}.contest-admin-v2__sidebar nav button.is-active::before{position:absolute;top:8px;bottom:8px;left:0;width:3px;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--blue) 62%,#fff);content:""}.contest-admin-v2__sidebar nav button.is-active svg{color:inherit}.contest-admin-v2__sidebar nav button b{margin-left:auto;min-width:21px;padding:2px 6px;border-radius:10px;background:#e6edff;color:#294fc4;font-size:11px;font-weight:850;text-align:center}
.contest-admin-v2__nav-group:last-child{margin-top:5px;padding-top:18px}
.contest-admin-v2__sidebar-foot { display:grid; gap:5px; margin-top:auto; padding:14px 12px; border-top:1px solid rgba(255,255,255,.1); }.contest-admin-v2__sidebar-foot span,.contest-admin-v2__sidebar-foot small{color:#8fa0bd;font-size:11px}.contest-admin-v2__sidebar-foot strong{font-size:13px}
.contest-admin-v2__main { min-height:100vh; margin-left:264px; }
.contest-admin-v2__topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:11px 34px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.contest-admin-v2__topbar h1{margin:0;font-size:20px;letter-spacing:-.035em}
.contest-admin-v2__top-actions{display:flex;gap:9px}.contest-admin-v2__top-actions button,.contest-admin-v2__top-actions a{display:inline-flex;align-items:center;gap:7px;min-height:39px;padding:0 13px;border:1px solid #d9e0ec;border-radius:9px;background:#fff;color:#344158;font:inherit;font-size:13px;font-weight:800;text-decoration:none;cursor:pointer}.contest-admin-v2__top-actions a{border-color:var(--blue);background:var(--blue);color:#fff}
.contest-admin-v2__content { display:grid; gap:18px; max-width:1440px; margin:0 auto; padding:24px 34px 60px; animation:organizer-motion-enter var(--organizer-motion-enter) var(--organizer-ease-out) both; }
.contest-admin-v2__overview-status{display:flex;align-items:center;gap:12px;min-height:64px;padding:13px 16px;border:1px solid #dfe5ee;border-radius:12px;background:#fff}.contest-admin-v2__overview-status-icon{display:grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border-radius:9px;background:#fff2e8;color:#c45f23}.contest-admin-v2__overview-status.is-clear .contest-admin-v2__overview-status-icon{background:#eaf8f2;color:#278261}.contest-admin-v2__overview-status>div:nth-child(2){display:grid;gap:3px;min-width:0}.contest-admin-v2__overview-status>div:nth-child(2)>strong{color:#273247;font-size:13px}.contest-admin-v2__overview-status>div:nth-child(2)>span{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.contest-admin-v2__overview-deadline{display:flex;align-items:center;gap:7px;margin-left:auto;padding-left:18px;border-left:1px solid var(--line);color:#667286;white-space:nowrap}.contest-admin-v2__overview-deadline svg{color:#8190a5}.contest-admin-v2__overview-deadline span{font-size:11px}.contest-admin-v2__overview-deadline strong{color:#273247;font-size:12px}
.contest-admin-v2__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.contest-admin-v2__metrics article { display:grid; grid-template-columns:1fr auto; gap:5px 16px; min-width:0; padding:18px 20px; border-right:1px solid var(--line); }
.contest-admin-v2__metrics article:last-child { border-right:0; }
.contest-admin-v2__metric-head { display:flex; align-items:center; gap:7px; min-width:0; }
.contest-admin-v2__metric-head > span { display:grid; place-items:center; color:#8a95a6; }
.contest-admin-v2__metric-head svg { width:15px; height:15px; stroke-width:2; }
.contest-admin-v2__metric-head > strong { overflow:hidden; color:#68758a; font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.contest-admin-v2__metric-value { display:flex; grid-row:1 / 4; grid-column:2; align-items:baseline; align-self:center; gap:4px; }
.contest-admin-v2__metric-value b { color:#172033; font-size:27px; line-height:1; letter-spacing:-.04em; }
.contest-admin-v2__metric-value span { color:#8a95a6; font-size:10px; font-weight:700; }
.contest-admin-v2__metrics article > p { overflow:hidden; margin:0; color:#98a1af; font-size:10px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.contest-admin-v2__metrics article > p i { display:none; }
.contest-admin-v2__metric-link{width:max-content;padding:0;border:0;background:transparent;color:var(--blue);font:inherit;font-size:10px;font-weight:850;cursor:pointer}.contest-admin-v2__metric-link:hover{text-decoration:underline}.contest-admin-v2__metric-link:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 42%,transparent);outline-offset:3px;border-radius:3px}
.contest-admin-v2__metrics article.is-warning .contest-admin-v2__metric-head > span,
.contest-admin-v2__metrics article.is-warning .contest-admin-v2__metric-value b { color:#c85f28; }
.contest-admin-v2__overview-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:20px; }
.contest-admin-v2__panel { min-width:0; padding:22px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 8px 24px rgba(30,47,78,.035); }
.contest-admin-v2__panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:18px; }.contest-admin-v2__panel-head>div{display:grid;gap:4px}.contest-admin-v2__panel-head h2,.contest-admin-v2__projects-head h2{margin:0;font-size:17px;letter-spacing:-.025em}.contest-admin-v2__panel-head button,.contest-admin-v2__panel-head>a{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:850;text-decoration:none;cursor:pointer}
.contest-admin-v2__panel-head--actions{justify-content:flex-end;margin-bottom:12px}
.contest-admin-v2__attention-list{display:grid;gap:9px}.contest-admin-v2__attention-list a{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #f0dfd3;border-radius:11px;background:#fffaf7;color:#2e3748;text-decoration:none}.contest-admin-v2__attention-list a>svg:first-child{color:#d46a27}.contest-admin-v2__attention-list a>svg:last-child{margin-left:auto;color:#8994a5}.contest-admin-v2__attention-list div{display:grid;gap:3px}.contest-admin-v2__attention-list strong{font-size:13px}.contest-admin-v2__attention-list span{color:#7a8494;font-size:11px}
.contest-admin-v2__all-clear{display:grid;place-items:center;gap:7px;min-height:180px;color:#738095;text-align:center}.contest-admin-v2__all-clear svg{color:#2b9a6e}.contest-admin-v2__all-clear strong{color:#273247;font-size:14px}.contest-admin-v2__all-clear span{font-size:12px}
.contest-admin-v2__guide ol{display:grid;gap:14px;margin:0;padding:0;list-style:none}.contest-admin-v2__guide li{display:flex;gap:11px}.contest-admin-v2__guide li>b{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:8px;background:#edf2ff;color:var(--blue);font-size:11px}.contest-admin-v2__guide li div{display:grid;gap:3px}.contest-admin-v2__guide li strong{font-size:13px}.contest-admin-v2__guide li span{color:var(--muted);font-size:11px;line-height:1.5}
.contest-admin-v2__table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:11px}.contest-admin-v2__table{width:100%;min-width:860px;border-collapse:collapse}.contest-admin-v2__table th{padding:12px 14px;background:#f8f9fc;color:#6f7c90;font-size:11px;font-weight:850;text-align:left}.contest-admin-v2__table td{padding:15px 14px;border-top:1px solid #edf0f5;color:#536075;font-size:13px;vertical-align:middle}.contest-admin-v2__project-cell,.contest-admin-v2__leader-cell{display:grid;gap:5px}.contest-admin-v2__project-cell strong,.contest-admin-v2__leader-cell strong{color:#253047;font-size:13px}.contest-admin-v2__project-cell span{width:max-content;padding:3px 7px;border-radius:12px;background:#f0f3fa;color:#657187;font-size:11px}.contest-admin-v2__leader-cell a{display:flex;align-items:center;gap:4px;color:#78859a;font-size:11px;text-decoration:none}.contest-admin-v2__status-stack{display:grid;gap:4px}.contest-admin-v2__status{width:max-content;padding:5px 8px;border-radius:20px;background:#fff0e5;color:#b65b24;font-size:11px;font-weight:850}.contest-admin-v2__status.is-ready{background:#e9f8f1;color:#217c59}.contest-admin-v2__status-stack small{color:#8994a5;font-size:11px}.contest-admin-v2__detail-link{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font-weight:850;text-decoration:none;white-space:nowrap}.contest-admin-v2__empty{display:grid;place-items:center;min-height:180px;border:1px dashed #d8deea;border-radius:11px;color:#7c8799;font-size:13px}
.contest-admin-v2__projects-head{display:flex;justify-content:flex-end;margin-bottom:14px}.contest-admin-v2__search{display:flex;align-items:center;gap:8px;width:min(360px,100%);padding:0 12px;border:1px solid #dbe1eb;border-radius:9px}.contest-admin-v2__search svg{color:#8490a2}.contest-admin-v2__search input{width:100%;height:40px;border:0;outline:0;color:#263147;font:inherit;font-size:12px}.contest-admin-v2__filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}.contest-admin-v2__filters button{padding:8px 11px;border:1px solid #dfe4ed;border-radius:20px;background:#fff;color:#69758a;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.contest-admin-v2__filters button.is-active{border-color:var(--blue);background:#edf2ff;color:var(--blue)}.contest-admin-v2__filters b{margin-left:3px}
.contest-admin-v2__access-intro{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid #dbe3f5;border-radius:12px;background:#f2f6ff}.contest-admin-v2__access-intro>svg{color:var(--blue)}.contest-admin-v2__access-intro>div{display:grid;gap:4px}.contest-admin-v2__access-intro p{margin:0;color:var(--muted);font-size:12px}.contest-admin-v2__access-intro dl{display:flex;gap:24px;margin:0 0 0 auto}.contest-admin-v2__access-intro dl div{display:grid;gap:3px}.contest-admin-v2__access-intro dt{color:var(--muted);font-size:10px}.contest-admin-v2__access-intro dd{margin:0;font-size:18px;font-weight:900}.contest-admin-v2__access .organizer-code-manager{padding-top:0;padding-bottom:0}
.contest-admin-v2__info-panel{max-width:900px}.contest-admin-v2__info-list{display:grid;margin:0;border-top:1px solid var(--line)}.contest-admin-v2__info-list>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:17px 4px;border-bottom:1px solid #edf0f5}.contest-admin-v2__info-list dt{color:var(--muted);font-size:12px;font-weight:800}.contest-admin-v2__info-list dd{display:flex;align-items:center;gap:7px;margin:0;color:#2d384d;font-size:13px;font-weight:700}.contest-admin-v2__info-list dd small{color:#8994a5;font-size:10px;font-weight:500}.contest-admin-v2__info-list a{display:inline-flex;align-items:center;gap:5px;color:var(--blue);text-decoration:none}.contest-admin-v2__info-list code{padding:4px 7px;border-radius:5px;background:#eef1f6}.contest-admin-v2__info-note{display:flex;gap:10px;margin-top:18px;padding:14px;border-radius:10px;background:#f7f8fb;color:#667286}.contest-admin-v2__info-note p{margin:0;font-size:11px;line-height:1.6}
.contest-admin-v2__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-height:100vh;background:#f5f7fb;color:#596579;font-size:14px}.contest-admin-v2__loading button{padding:9px 13px;border:0;border-radius:8px;background:var(--blue,#3157d5);color:#fff;font-weight:800;cursor:pointer}
@media(max-width:1100px){.contest-admin-v2__metrics{grid-template-columns:1fr 1fr}.contest-admin-v2__metrics article:nth-child(2){border-right:0}.contest-admin-v2__metrics article:nth-child(-n+2){border-bottom:1px solid var(--line)}.contest-admin-v2__overview-grid{grid-template-columns:1fr}.contest-admin-v2__projects-head{align-items:stretch;flex-direction:column}.contest-admin-v2__access-intro{align-items:flex-start;flex-wrap:wrap}.contest-admin-v2__access-intro dl{margin-left:38px}}
@media(max-width:760px){.contest-admin-v2__sidebar{position:static;width:100%;padding:16px}.contest-admin-v2__brand,.contest-admin-v2__contest-summary,.contest-admin-v2__sidebar-foot{display:none}.contest-admin-v2__sidebar nav{display:flex;overflow-x:auto;margin-top:14px}.contest-admin-v2__nav-group{display:flex;flex:0 0 auto;gap:4px;padding:0;border:0}.contest-admin-v2__nav-group-title{display:none}.contest-admin-v2__sidebar nav button{flex:0 0 auto}.contest-admin-v2__main{margin-left:0}.contest-admin-v2__topbar{padding:10px 16px}.contest-admin-v2__top-actions button{display:none}.contest-admin-v2__content{padding:16px 14px 45px}.contest-admin-v2__overview-status{align-items:flex-start;flex-wrap:wrap}.contest-admin-v2__overview-deadline{width:100%;margin:2px 0 0 46px;padding:10px 0 0;border-top:1px solid var(--line);border-left:0}.contest-admin-v2__metrics{grid-template-columns:1fr}.contest-admin-v2__metrics article,.contest-admin-v2__metrics article:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.contest-admin-v2__metrics article:last-child{border-bottom:0}.contest-admin-v2__panel{padding:16px}.contest-admin-v2__access-intro dl{width:100%;margin:5px 0 0 38px}.contest-admin-v2__info-list>div{grid-template-columns:1fr;gap:7px}.contest-admin-v2__info-list dd{align-items:flex-start;flex-direction:column}}
.contest-admin-v2__metric-value span,.contest-admin-v2__metrics article>p,.contest-admin-v2__access-intro dt,.contest-admin-v2__info-list dd small{font-size:11px}

/* 운영 대시보드 전용 UI 기본 규칙 */
.contest-admin-v2 {
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-space-12: 48px;
  --muted: #5f6b7e;
  font-size: 16px;
  line-height: 1.5;
}

.contest-admin-v2 :where(p, li, td, dd) { line-height: 1.5; }

.contest-admin-v2 :where(span, p, li, td, dd, dt, label, a, em) {
  font-size: 14px !important;
}

.contest-admin-v2 :where(small, time, figcaption, th, code) {
  font-size: 12px !important;
  line-height: 1.4;
}

.contest-admin-v2 :where(button, [role="button"], summary) {
  min-width: 40px;
  min-height: 40px;
  font-size: 14px !important;
  line-height: 1.2;
}

.contest-admin-v2 :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  min-height: 40px;
  font-size: 16px !important;
  line-height: 1.4;
}

.contest-admin-v2 :where(button, [role="button"], summary, a, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 55%, #fff);
  outline-offset: 2px;
}

.contest-admin-v2__metric-value b { font-size: 27px !important; }
.contest-admin-v2__nav-group-title,
.contest-admin-v2__guide li > b,
.contest-admin-v2__sidebar nav button b { font-size: 12px !important; }

.contest-admin-v2 .competition-ops-admin__submitted strong,
.contest-admin-v2 .competition-ops-admin__answer strong,
.contest-admin-v2 .competition-ops-admin__submissions strong { font-size: 12px !important; }

@media (max-width: 760px) {
  .contest-admin-v2__content { padding-inline: 16px; }
}
.contest-admin-v2__mobile-header,
.contest-admin-v2__mobile-drawer {
  display: none;
}

/* Dashboard action typography: compact, calm, and consistent across operation tools. */
.contest-admin-v2 :is(
  .contest-admin-v2__top-actions > button,
  .contest-admin-v2__top-actions > a,
  .contest-admin-v2__page-actions > button,
  .contest-admin-v2__page-actions > a,
  .competition-ops-admin__heading > button,
  .submission-management__heading > button,
  .submission-management__detail-head > button,
  .competition-schedule-admin > header > button,
  .education-ops__heading > button,
  .competition-team-codes__form-side > button,
  .competition-team-codes__issued-head > button,
  .organizer-code-manager__form > button,
  .operation-feature-settings > header button,
  .competition-contribution__heading > button
) {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.012em;
}

.contest-admin-v2 :is(
  .competition-ops-admin__heading,
  .submission-management__heading,
  .submission-management__detail-head,
  .competition-schedule-admin > header,
  .education-ops__heading,
  .organizer-code-manager__form
) > button svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
}

.contest-admin-v2 :is(
  .contest-admin-v2__page-actions > a,
  .competition-ops-admin__heading > button,
  .submission-management__heading > button,
  .submission-management__detail-head > button,
  .organizer-code-manager__form > button
) {
  box-shadow: 0 4px 12px rgba(41, 79, 194, 0.14);
}

.contest-admin-v2__topbar {
  min-height: 60px;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.contest-admin-v2__breadcrumb {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  gap: 9px;
  white-space: nowrap;
}

.contest-admin-v2__breadcrumb strong {
  overflow: hidden;
  max-width: min(42vw, 460px);
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contest-admin-v2__breadcrumb > span {
  color: #a5afbe;
  font-size: 13px;
}

.contest-admin-v2__breadcrumb h1 {
  flex: 0 0 auto;
  margin: 0;
  color: #68758a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.contest-admin-v2__page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 6px 2px 7px;
}

.contest-admin-v2__projects-head,
.competition-ops-admin__heading,
.competition-ai-reports > header,
.competition-review > header {
  min-height: 66px;
  padding: 6px 2px 7px;
}

.contest-admin-v2__page-heading h2 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.contest-admin-v2__page-heading p,
.contest-admin-v2__panel-head p {
  margin: 8px 0 0;
  color: #748096;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.competition-ops-admin,
.competition-ai-reports,
.competition-review {
  gap: 18px;
}

.competition-ops-admin__heading,
.competition-ai-reports > header,
.competition-review > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
  padding: 6px 2px 7px;
}

.competition-ops-admin__heading > div,
.competition-ai-reports > header > div,
.competition-review > header > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.competition-ops-admin__heading h2,
.competition-ai-reports > header h2,
.competition-review > header h2 {
  margin: 0;
  color: #172033;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.competition-ops-admin__heading p,
.competition-ai-reports > header p,
.competition-review > header p {
  margin: 0;
  color: #748096;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.competition-ai-reports > header > strong,
.competition-review > header > strong,
.competition-ops-admin__heading > strong {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.competition-ai-reports > header > strong {
  background: #eaf0ff;
  color: var(--blue);
}

.competition-review > header > strong,
.competition-ops-admin__heading > strong {
  background: #fff0e5;
  color: #b65b24;
}

.competition-ops-admin__posts,
.competition-ops-admin__inquiries,
.competition-ai-reports__list,
.competition-review__list {
  gap: 10px;
}

.competition-ops-admin__posts > article,
.competition-ops-admin__inquiries > article,
.competition-ai-reports__list > article,
.competition-review__list > article {
  border-color: #e1e6ef;
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(31, 48, 79, 0.035);
}

.competition-ops-admin__empty,
.competition-ai-reports__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  border: 1px dashed #d8deea;
  border-radius: 12px;
  background: #fff;
  color: #7c8799;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.competition-ai-reports__empty--error {
  border-color: #f0c9c9;
  background: #fffafa;
  color: #b64444;
}

.contest-admin-v2__projects-head {
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 0;
}

.contest-admin-v2__projects-head > div:first-child {
  display: grid;
  gap: 5px;
}

.contest-admin-v2__projects-head h2 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.contest-admin-v2__projects-head p {
  margin: 0;
  color: #68758a;
  font-size: 12px;
  font-weight: 500;
}

.contest-admin-v2__heading-tools,
.contest-admin-v2__page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.contest-admin-v2__heading-tools > strong {
  color: #7b8798;
  font-size: 12px;
  white-space: nowrap;
}

.contest-admin-v2__page-actions button,
.contest-admin-v2__page-actions a,
.competition-ops-admin__heading > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(27, 43, 74, 0.04);
  color: #435069;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--organizer-motion-fast) var(--organizer-ease-standard),
    background var(--organizer-motion-fast) var(--organizer-ease-standard),
    box-shadow var(--organizer-motion-fast) var(--organizer-ease-standard),
    transform var(--organizer-motion-fast) var(--organizer-ease-out);
}

.contest-admin-v2__page-actions a,
.competition-ops-admin__heading > button {
  border-color: #18365f;
  background: #244a7c;
  box-shadow: 0 5px 14px rgba(16, 33, 63, 0.18);
  color: #fff;
}

.contest-admin-v2__page-actions button:hover,
.contest-admin-v2__page-actions a:hover,
.competition-ops-admin__heading > button:hover {
  transform: translateY(var(--organizer-hover-lift));
}

.contest-admin-v2__page-actions button:hover {
  border-color: #b9c6d9;
  background: #f8faff;
}

.contest-admin-v2__page-actions a:hover,
.competition-ops-admin__heading > button:hover {
  background: #1d3f6d;
  box-shadow: 0 7px 18px rgba(16, 33, 63, 0.22);
}

.contest-admin-v2__heading-stats {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
}

.contest-admin-v2__heading-stats > div {
  display: grid;
  gap: 3px;
}

.contest-admin-v2__heading-stats dt {
  color: #8a95a6;
  font-size: 10px;
  font-weight: 700;
}

.contest-admin-v2__heading-stats dd {
  margin: 0;
  color: #273247;
  font-size: 17px;
  font-weight: 850;
}

.contest-admin-v2__access-intro {
  min-height: 52px;
  padding: 12px 15px;
}

.organizer-code-manager__form > button {
  min-height: 42px;
  border: 1px solid #18365f;
  border-radius: 10px;
  background: #244a7c;
  box-shadow: 0 5px 14px rgba(16, 33, 63, 0.18);
  color: #fff;
}

.organizer-code-manager__actions button,
.organizer-code-manager__issued button,
.organizer-code-manager__form-title button {
  border-color: #d7deea;
  border-radius: 9px;
  background: #fff;
  color: #536075;
}

.organizer-code-manager__actions button:hover,
.organizer-code-manager__issued button:hover,
.organizer-code-manager__form-title button:hover {
  border-color: #b8c5da;
  background: #f5f8ff;
  color: #294fc2;
}

/* One operational identity: education and organization tools use the same navy accent. */
.contest-admin-v2 .education-ops__heading > div > span,
.contest-admin-v2 .education-ops__week,
.contest-admin-v2 .education-ops__curriculum-body > div > span,
.contest-admin-v2 .education-ops__mentoring-request > span,
.contest-admin-v2 .education-ops__submissions > div > div:last-child > span,
.contest-admin-v2 .education-ops__assignment-head > div > span,
.contest-admin-v2 .education-ops__queue {
  background: #eaf0f8;
  color: var(--blue);
}

.contest-admin-v2 .education-ops__heading > button,
.contest-admin-v2 .education-ops__form-actions button:last-child,
.contest-admin-v2 .education-ops__mentoring-plan > button,
.contest-admin-v2 .operation-feature-settings > header button {
  border-color: #18365f;
  background: var(--blue);
  color: #fff;
}

.contest-admin-v2 .education-ops__progress > b,
.contest-admin-v2 .education-ops__open-submissions,
.contest-admin-v2 .education-ops__empty svg,
.contest-admin-v2 .operation-feature-settings > header span,
.contest-admin-v2 .operation-feature-settings__pair svg {
  color: var(--blue);
}

.contest-admin-v2 .education-ops__progress > i > span {
  background: var(--blue);
}

.contest-admin-v2 .education-ops__form input:focus,
.contest-admin-v2 .education-ops__form select:focus,
.contest-admin-v2 .education-ops__form textarea:focus,
.contest-admin-v2 .education-ops__mentoring-plan input:focus,
.contest-admin-v2 .education-ops__mentoring-plan select:focus,
.contest-admin-v2 .education-ops__mentoring-plan textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 74, 124, 0.1);
}

.contest-admin-v2 .education-ops button:focus-visible,
.contest-admin-v2 .education-ops select:focus-visible {
  outline-color: rgba(36, 74, 124, 0.42);
}

.contest-admin-v2 .competition-contribution__avatar {
  background: #eaf0f8;
  color: var(--blue);
}

.contest-admin-v2 .competition-contribution__notice {
  border-color: #d9e2ee;
  background: #f3f6fa;
  color: #536075;
}

.contest-admin-v2 .competition-contribution__notice strong {
  color: #273247;
}

.contest-admin-v2 .organizer-code-manager__form > button,
.contest-admin-v2 .operation-feature-settings__list label.is-enabled .operation-feature-settings__switch {
  background: var(--blue);
}

.competition-review__actions button {
  border-color: #d7deea;
  border-radius: 9px;
  background: #fff;
  color: #5b687d;
}

.competition-review__actions button.is-approve {
  border-color: #257b5b;
  background: #257b5b;
  box-shadow: 0 5px 12px rgba(37, 123, 91, 0.14);
}

.contest-admin-v2__filters button {
  border-radius: 9px;
}

.contest-admin-v2__filters button.is-active {
  border-color: #c8d4f5;
  background: #eaf0ff;
  color: #294fc2;
}

@keyframes contestAdminDrawerIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 960px) {
  .contest-admin-v2__sidebar--desktop {
    display: none !important;
  }

  .contest-admin-v2__main {
    margin-left: 0;
  }

  .contest-admin-v2__topbar {
    display: none;
  }

  .contest-admin-v2__mobile-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 6px;
    height: 58px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    transition:
      transform var(--organizer-motion-base) var(--organizer-ease-out),
      opacity var(--organizer-motion-fast) var(--organizer-ease-standard);
  }

  .contest-admin-v2__mobile-header.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  .contest-admin-v2__mobile-back,
  .contest-admin-v2__mobile-menu-button,
  .contest-admin-v2__mobile-panel-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #263147;
    text-decoration: none;
    cursor: pointer;
  }

  .contest-admin-v2__mobile-back,
  .contest-admin-v2__mobile-menu-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .contest-admin-v2__mobile-back:hover,
  .contest-admin-v2__mobile-menu-button:hover,
  .contest-admin-v2__mobile-panel-head button:hover {
    background: #f0f3f8;
  }

  .contest-admin-v2__mobile-back svg,
  .contest-admin-v2__mobile-menu-button svg {
    width: 21px;
    height: 21px;
  }

  .contest-admin-v2__mobile-title {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
  }

  .contest-admin-v2__mobile-title strong,
  .contest-admin-v2__mobile-title span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contest-admin-v2__mobile-title strong {
    color: #172033;
    font-size: 15px;
    font-weight: 800;
  }

  .contest-admin-v2__mobile-title span {
    margin-top: 3px;
    color: #8a95a6;
    font-size: 10px;
  }

  .contest-admin-v2__mobile-menu-button {
    justify-self: end;
  }

  .contest-admin-v2__mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: block;
  }

  .contest-admin-v2__mobile-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.44);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }

  .contest-admin-v2__mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(86vw, 360px);
    height: 100dvh;
    flex-direction: column;
    overflow: hidden;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    background: #fff;
    box-shadow: -18px 0 42px rgba(15, 23, 42, 0.2);
    animation: contestAdminDrawerIn var(--organizer-motion-base) var(--organizer-ease-out);
  }

  .contest-admin-v2__mobile-panel-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    gap: 12px;
    padding: 13px 14px 12px 18px;
    border-bottom: 1px solid #edf0f5;
  }

  .contest-admin-v2__mobile-panel-head > div {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .contest-admin-v2__mobile-panel-head strong {
    color: #172033;
    font-size: 16px;
    font-weight: 850;
  }

  .contest-admin-v2__mobile-panel-head span {
    overflow: hidden;
    color: #8a95a6;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contest-admin-v2__mobile-panel-head button {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
  }

  .contest-admin-v2__mobile-contest {
    display: grid;
    flex-shrink: 0;
    gap: 7px;
    margin: 14px 16px 8px;
    padding: 14px;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    background: #f8f9fc;
  }

  .contest-admin-v2__mobile-contest > strong {
    color: #263147;
    font-size: 13px;
    line-height: 1.4;
  }

  .contest-admin-v2__mobile-contest > small {
    color: #7b8798;
    font-size: 10px;
  }

  .contest-admin-v2__mobile-nav {
    display: grid;
    gap: 13px;
    padding: 8px 14px 20px;
    overflow-y: auto;
  }

  .contest-admin-v2__mobile-nav-group {
    display: grid;
    gap: 3px;
    padding-top: 12px;
    border-top: 1px solid #edf0f5;
  }

  .contest-admin-v2__mobile-nav-group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .contest-admin-v2__mobile-nav-group > span {
    padding: 0 10px 5px;
    color: #98a2b2;
    font-size: 10px;
    font-weight: 800;
  }

  .contest-admin-v2__mobile-nav-group > button {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #657187;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
  }

  .contest-admin-v2__mobile-nav-group > button:hover {
    background: #f2f4f8;
    color: #273247;
  }

  .contest-admin-v2__mobile-nav-group > button.is-active {
    background: #eaf0ff;
    color: #294fc2;
  }

  .contest-admin-v2__mobile-nav-group > button b {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e1e8fb;
    color: #294fc2;
    font-size: 10px;
  }

  .contest-admin-v2__mobile-panel-foot {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 14px 18px;
    border-top: 1px solid #edf0f5;
    background: #fafbfc;
  }

  .contest-admin-v2__mobile-panel-foot span {
    color: #536075;
    font-size: 11px;
    font-weight: 800;
  }

  .contest-admin-v2__mobile-panel-foot small {
    color: #929dac;
    font-size: 9px;
  }
}

.competition-ai-reports > header span,
.competition-review > header span,
.competition-ops-admin__heading span {
  display: none;
}

@media (max-width: 760px) {
  .contest-admin-v2__breadcrumb {
    gap: 8px;
  }

  .contest-admin-v2__breadcrumb strong {
    max-width: 34vw;
  }

  .contest-admin-v2__page-heading h2 {
    font-size: 21px;
  }

  .contest-admin-v2__projects-head {
    align-items: stretch;
    flex-direction: column;
  }

  .contest-admin-v2__page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .contest-admin-v2__page-actions,
  .contest-admin-v2__heading-tools {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .contest-admin-v2__heading-stats {
    gap: 20px;
  }

  .competition-ops-admin__heading,
  .competition-ai-reports > header,
  .competition-review > header {
    align-items: flex-start;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding-top: 2px;
  }

  .competition-ops-admin__heading > button {
    width: 100%;
  }
}
.easytask-demo,
.easytask-demo-setup {
  --color-et-blue: rgb(45, 166, 244);
  --color-et-blue-strong: rgb(20, 143, 224);
  --color-et-blue-soft: rgb(234, 247, 255);
  --color-et-ink: rgb(21, 40, 58);
  --color-et-muted: rgb(126, 142, 158);
  --color-et-line: rgb(226, 232, 239);
  --color-et-surface: rgb(255, 255, 255);
  --color-et-canvas: rgb(247, 249, 252);
  --color-et-gather: rgb(108, 99, 255);
  --color-et-shadow: rgba(20, 42, 67, 0.12);
  --color-et-blue-shadow: rgba(45, 166, 244, 0.2);
  --color-et-surface-glass: rgba(255, 255, 255, 0.9);
}

.easytask-demo {
  --easytask-rail-width: 92px;
  --easytask-chat-list-width: clamp(330px, 19vw, 390px);
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  color: var(--color-et-ink);
  background: var(--color-et-canvas);
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
}

.easytask-demo__header {
  position: relative;
  z-index: 1200;
  height: 72px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 0 24px 0 22px;
  border-bottom: 1px solid var(--color-et-line);
  background: var(--color-et-surface);
}

.easytask-demo__brand-group,
.easytask-demo__header-actions,
.easytask-demo__location {
  display: flex;
  align-items: center;
}

.easytask-demo__brand-group {
  gap: 26px;
}

.easytask-demo__brand {
  color: var(--color-et-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1.8px;
}

.easytask-demo__icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--color-et-ink);
  background: transparent;
  cursor: pointer;
}

.easytask-demo__icon-button:hover {
  background: var(--color-et-canvas);
}

.easytask-demo__icon-button:focus-visible,
.easytask-demo__request-button:focus-visible,
.easytask-demo__rail-button:focus-visible,
.easytask-demo__leave-button:focus-visible,
.easytask-demo-setup button:focus-visible,
.easytask-demo-setup input:focus-visible {
  outline: 3px solid var(--color-et-blue-soft);
  outline-offset: 2px;
}

.easytask-demo__header-actions {
  justify-content: flex-end;
  gap: 16px;
}

.easytask-demo__notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--color-et-surface);
  border-radius: 50%;
  background: var(--color-et-blue);
}

.easytask-demo__request-button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  color: var(--color-et-surface);
  background: var(--color-et-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 5px 14px var(--color-et-blue-shadow);
  transition: transform 160ms ease, background 160ms ease;
}

.easytask-demo__request-button:hover {
  background: var(--color-et-blue-strong);
  transform: translateY(-1px);
}

.easytask-demo__body {
  height: calc(100dvh - 72px);
  display: grid;
  grid-template-columns: var(--easytask-rail-width) minmax(0, 1fr);
  min-height: 0;
  transition: grid-template-columns 220ms ease;
}

.easytask-demo__rail {
  position: relative;
  z-index: 110;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 10px 16px;
  border-right: 1px solid var(--color-et-line);
  background: var(--color-et-surface);
  overflow-y: auto;
  scrollbar-width: none;
}

.easytask-demo__rail::-webkit-scrollbar {
  display: none;
}

.easytask-demo__rail-content,
.easytask-demo__rail-section,
.easytask-demo__rail-footer,
.easytask-demo__rail-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.easytask-demo__rail-content {
  gap: 24px;
}

.easytask-demo__rail-items {
  gap: 9px;
}

.easytask-demo__rail-section {
  gap: 10px;
}

.easytask-demo__rail-heading {
  width: 100%;
  padding-left: 6px;
  color: rgb(119, 137, 154);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
}

.easytask-demo__rail-footer {
  gap: 7px;
}

.easytask-demo__rail-button,
.easytask-demo__leave-button {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--color-et-muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.easytask-demo__rail-label {
  display: none;
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easytask-demo__rail-badge {
  display: none;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--color-et-surface);
  background: var(--color-et-blue);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.easytask-demo__rail-button:hover,
.easytask-demo__leave-button:hover {
  color: var(--color-et-ink);
  background: var(--color-et-canvas);
}

.easytask-demo__rail-button.is-active {
  color: var(--color-et-blue-strong);
  background: transparent;
}

.easytask-demo__rail-button.is-profile {
  color: rgb(145, 158, 174);
  background: rgb(246, 248, 251);
}

.easytask-demo.is-rail-expanded {
  --easytask-rail-width: 360px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail {
  align-items: stretch;
  justify-content: flex-start;
  padding: 22px 24px 16px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-content,
.easytask-demo.is-rail-expanded .easytask-demo__rail-section,
.easytask-demo.is-rail-expanded .easytask-demo__rail-footer,
.easytask-demo.is-rail-expanded .easytask-demo__rail-items {
  align-items: stretch;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-content {
  gap: 28px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-items {
  gap: 5px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-heading {
  padding-left: 16px;
  font-size: 14px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-footer {
  flex: 0 0 auto;
  margin-top: 28px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-button,
.easytask-demo.is-rail-expanded .easytask-demo__leave-button {
  width: 100%;
  height: 52px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 18px;
  padding: 0 16px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-button.is-profile {
  height: 68px;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-label {
  display: block;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-badge {
  display: inline-flex;
}

.easytask-demo.is-rail-expanded .easytask-demo__rail-button.is-active {
  background: var(--color-et-blue-soft);
}

.easytask-demo__workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-et-canvas);
}

.easytask-demo__integration-badge {
  position: absolute;
  z-index: 500;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--color-et-line);
  border-radius: 999px;
  color: var(--color-et-muted);
  background: var(--color-et-surface-glass);
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 5px 18px var(--color-et-shadow);
  pointer-events: none;
}

.easytask-demo__integration-badge svg {
  color: var(--color-et-gather);
}

/* 기존 팀공간 런타임은 그대로 두고, 이지태스크가 제공하는 화면 크기만 채운다. */
.easytask-demo__workspace .workspace-layout,
.easytask-demo__workspace .workspace-layout:has(.wh-naver-layout) {
  position: relative;
  height: 100%;
  min-height: 0;
}

.easytask-demo__workspace .workspace-mobile-header {
  display: none;
}

.easytask-demo__workspace .wh-sidebar {
  top: 68px;
  bottom: 18px;
  border-color: var(--color-et-line);
  box-shadow: 0 10px 35px var(--color-et-shadow);
}

.workspace-home--partner-easytask .wh-vote-banner,
.workspace-home--partner-easytask .wh-contest-entry,
.workspace-home--partner-easytask .wh-chips-scroll > * {
  display: none;
}

.workspace-home--partner-easytask .wh-chips-scroll > [data-partner-feature="board"],
.workspace-home--partner-easytask .wh-chips-scroll > [data-partner-feature="chat"],
.workspace-home--partner-easytask .wh-chips-scroll > [data-partner-feature="todo"],
.workspace-home--partner-easytask .wh-chips-scroll > [data-partner-feature="calendar"],
.workspace-home--partner-easytask .wh-chips-scroll > [data-partner-feature="meeting"] {
  display: inline-flex;
}

.workspace-home--partner-easytask .wh-chips-bar {
  min-height: 62px;
  background: var(--color-et-surface);
  border-color: var(--color-et-line);
}

.workspace-home--partner-easytask .wh-chips-scroll {
  gap: 10px;
  padding-block: 11px;
}

.workspace-home--partner-easytask .wh-chip {
  min-height: 38px;
  padding-inline: 14px;
  border-color: transparent;
  color: var(--color-et-muted);
  background: transparent;
  box-shadow: none;
}

.workspace-home--partner-easytask .wh-chip:hover {
  color: var(--color-et-blue-strong);
  border-color: var(--color-et-blue-soft);
  background: var(--color-et-blue-soft);
}

.workspace-home--partner-easytask .wh-chip--partner-chat-icon {
  width: 38px;
  min-width: 38px;
  padding: 0;
  justify-content: center;
}

.workspace-home--partner-easytask .wh-chips-scroll > .wh-chip--partner-chat-icon {
  display: none;
}

.workspace-home--partner-easytask .wh-chip--partner-chat-icon[aria-pressed="true"] {
  color: var(--color-et-blue-strong);
  border-color: var(--color-et-blue-soft);
  background: var(--color-et-blue-soft);
}

@media (min-width: 961px) {
  .easytask-demo .workspace-home--partner-easytask .wh-sidebar.is-partner-chat-hidden {
    display: none;
  }
}

@media (max-width: 960px) {
  .workspace-home--partner-easytask .wh-chips-scroll > .wh-chip--partner-chat-icon {
    display: inline-flex;
  }
}

.easytask-demo-setup {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--color-et-ink);
  background:
    linear-gradient(90deg, var(--color-et-line) 1px, transparent 1px),
    linear-gradient(var(--color-et-line) 1px, transparent 1px),
    var(--color-et-canvas);
  background-size: 36px 36px;
}

.easytask-demo-setup__card {
  width: min(520px, 100%);
  padding: 42px;
  border: 1px solid var(--color-et-line);
  border-radius: 24px;
  background: var(--color-et-surface);
  box-shadow: 0 24px 70px var(--color-et-shadow);
}

.easytask-demo-setup__brand {
  margin-bottom: 34px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1.8px;
}

.easytask-demo-setup__eyebrow {
  color: var(--color-et-blue-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.easytask-demo-setup h1 {
  margin: 9px 0 10px;
  font-size: clamp(26px, 5vw, 36px);
  letter-spacing: -0.04em;
}

.easytask-demo-setup p {
  margin: 0 0 28px;
  color: var(--color-et-muted);
  line-height: 1.65;
}

.easytask-demo-setup label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 750;
}

.easytask-demo-setup__field {
  display: flex;
  gap: 9px;
}

.easytask-demo-setup input {
  min-width: 0;
  flex: 1;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--color-et-line);
  border-radius: 12px;
  color: var(--color-et-ink);
  background: var(--color-et-surface);
  font: inherit;
}

.easytask-demo-setup button {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  color: var(--color-et-surface);
  background: var(--color-et-blue);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.easytask-demo-setup button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.easytask-demo-setup small {
  display: block;
  margin-top: 14px;
  color: var(--color-et-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .easytask-demo {
    --easytask-rail-width: 64px;
  }

  .easytask-demo.is-rail-expanded {
    --easytask-rail-width: min(300px, calc(100vw - 64px));
  }
  .easytask-demo__header {
    grid-template-columns: 1fr auto;
    padding: 0 14px;
  }

  .easytask-demo__location {
    display: none;
  }

  .easytask-demo__brand-group {
    gap: 12px;
  }

  .easytask-demo__rail {
    padding-inline: 6px;
  }

  .easytask-demo__rail-heading,
  .easytask-demo__rail-section.is-payment {
    display: none;
  }

  .easytask-demo__rail-button,
  .easytask-demo__leave-button {
    height: 44px;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .easytask-demo__rail {
    padding-block: 10px;
  }

  .easytask-demo__rail-content {
    gap: 12px;
  }

  .easytask-demo__rail-section,
  .easytask-demo__rail-footer {
    gap: 5px;
  }

  .easytask-demo__rail-items {
    gap: 3px;
  }

  .easytask-demo__rail-button,
  .easytask-demo__leave-button {
    width: 44px;
    height: 44px;
  }

  .easytask-demo__rail-section .easytask-demo__rail-button {
    height: 38px;
  }
}

@media (max-width: 640px) {
  .easytask-demo {
    --easytask-rail-width: 52px;
    min-height: 0;
  }

  .easytask-demo.is-rail-expanded {
    --easytask-rail-width: min(280px, calc(100vw - 44px));
  }

  .easytask-demo__header {
    height: 60px;
  }

  .easytask-demo__brand {
    font-size: 23px;
  }

  .easytask-demo__request-button {
    width: auto;
    height: 34px;
    justify-content: center;
    padding: 0 10px;
    font-size: 11px;
  }

  .easytask-demo__body {
    height: calc(100dvh - 60px);
  }

  .easytask-demo__rail {
    padding-top: 10px;
  }

  .easytask-demo__rail-items {
    gap: 1px;
  }

  .easytask-demo__rail-button {
    height: 40px;
  }

  .easytask-demo__rail-button.is-mobile-secondary {
    display: none;
  }

  .easytask-demo__integration-badge {
    display: none;
  }

  .easytask-demo-setup__card {
    padding: 30px 22px;
  }

  .easytask-demo-setup__field {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .easytask-demo__request-button {
    transition: none;
  }
}
.easytask-chat-page {
  --color-et-chat-blue-08: rgba(45, 166, 244, 0.08);
  --color-et-chat-blue-14: rgba(45, 166, 244, 0.14);
  --color-et-chat-blue-24: rgba(45, 166, 244, 0.24);
  --color-et-chat-overlay: rgba(21, 40, 58, 0.34);
  --color-et-chat-violet-soft: rgb(244, 241, 255);
  --color-et-chat-violet: rgb(125, 92, 224);
  --color-et-chat-green-soft: rgb(235, 249, 241);
  --color-et-chat-green: rgb(36, 166, 97);
  --color-et-chat-orange-soft: rgb(255, 246, 232);
  --color-et-chat-orange: rgb(224, 139, 35);
  --color-et-chat-slate-soft: rgb(240, 244, 248);
  --color-et-chat-slate: rgb(91, 108, 126);
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--easytask-chat-list-width, 520px) minmax(0, 1fr);
  overflow: hidden;
  background: var(--color-et-surface);
}

.easytask-demo__workspace .workspace-layout:has(.easytask-chat-page) {
  height: 100%;
  min-height: 0;
  background: var(--color-et-surface);
}

.easytask-demo__workspace .workspace-layout__body:has(.easytask-chat-page) {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
  align-items: stretch;
}

.easytask-demo__workspace .workspace-layout__body:has(.easytask-chat-page) .workspace-layout__sidebar-wrap {
  display: none;
}

.easytask-demo__workspace .workspace-layout__content:has(.easytask-chat-page) {
  height: 100%;
  min-height: 0;
}

.easytask-demo__workspace:has(.easytask-chat-page) .easytask-demo__integration-badge {
  display: none;
}

.easytask-chat-page__list {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-et-line);
  background: var(--color-et-surface);
}

.easytask-chat-page__list-head {
  height: 76px;
  flex: 0 0 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid var(--color-et-line);
}

.easytask-chat-page__list-head div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.easytask-chat-page__list-head span {
  color: var(--color-et-muted);
  font-size: 11px;
  font-weight: 700;
}

.easytask-chat-page__list-head strong {
  color: var(--color-et-ink);
  font-size: 20px;
  letter-spacing: -0.04em;
}

.easytask-chat-page__list-head button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-et-line);
  border-radius: 11px;
  color: var(--color-et-blue-strong);
  background: var(--color-et-surface);
  cursor: pointer;
}

.easytask-chat-page__search {
  height: 42px;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 16px 10px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--color-et-muted);
  background: var(--color-et-canvas);
}

.easytask-chat-page__search:focus-within {
  border-color: var(--color-et-chat-blue-24);
  background: var(--color-et-surface);
  box-shadow: 0 0 0 3px var(--color-et-chat-blue-08);
}

.easytask-chat-page__search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--color-et-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.easytask-chat-page__search input::placeholder {
  color: var(--color-et-muted);
}

.easytask-chat-page__channels {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 18px;
}

.easytask-chat-page__channel {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 0;
  border-radius: 14px;
  color: var(--color-et-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.easytask-chat-page__channel:hover {
  background: var(--color-et-canvas);
}

.easytask-chat-page__channel.is-active {
  background: var(--color-et-blue-soft);
}

.easytask-chat-page__avatar {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--color-et-blue-strong);
  background: var(--color-et-chat-blue-14);
}

.easytask-chat-page__avatar.is-ai {
  color: var(--color-et-chat-violet);
  background: var(--color-et-chat-violet-soft);
}

.easytask-chat-page__channel-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.easytask-chat-page__channel-copy strong,
.easytask-chat-page__channel-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.easytask-chat-page__channel-copy strong {
  font-size: 14px;
  font-weight: 750;
}

.easytask-chat-page__channel-copy small {
  color: var(--color-et-muted);
  font-size: 11px;
}

.easytask-chat-page__unread {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  color: var(--color-et-surface);
  background: var(--color-et-blue);
  font-size: 10px;
  font-weight: 800;
}

.easytask-chat-page__conversation {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-et-surface);
}

.easytask-chat-page__conversation .workspace-chat {
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--color-et-surface);
}

.easytask-chat-page__conversation .workspace-chat__channel-header {
  min-height: 76px;
  border-bottom-color: var(--color-et-line);
  background: var(--color-et-surface);
}

.easytask-chat-page__conversation .workspace-chat__messages {
  min-height: 0;
  max-height: none;
  border-top: 0;
  background: var(--color-et-canvas);
}

.easytask-chat-page__conversation .workspace-chat__form {
  position: relative;
  margin: 0;
  padding: 12px 18px 16px;
  border: 0;
  border-top: 1px solid var(--color-et-line);
  border-radius: 0;
  background: var(--color-et-surface);
  box-shadow: none;
}

.easytask-chat-page__conversation .workspace-chat__input {
  border-color: var(--color-et-line);
  border-radius: 14px;
  background: var(--color-et-canvas);
}

.easytask-chat-page__conversation .workspace-chat__input:focus {
  border-color: var(--color-et-chat-blue-24);
  box-shadow: 0 0 0 3px var(--color-et-chat-blue-08);
}

.easytask-chat-page__conversation .workspace-chat__submit {
  border-radius: 13px;
  background: var(--color-et-blue);
}

.easytask-chat-actions {
  position: relative;
  flex: 0 0 auto;
}

.easytask-chat-actions__trigger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-et-line);
  border-radius: 14px;
  color: var(--color-et-muted);
  background: var(--color-et-surface);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.easytask-chat-actions__trigger:hover,
.easytask-chat-actions__trigger.is-open {
  border-color: var(--color-et-chat-blue-24);
  color: var(--color-et-blue-strong);
  background: var(--color-et-blue-soft);
}

.easytask-chat-actions__trigger.is-open svg {
  transform: rotate(45deg);
}

.easytask-chat-actions__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.easytask-chat-actions__trigger:focus-visible,
.easytask-chat-actions__item:focus-visible,
.easytask-chat-page__channel:focus-visible,
.easytask-chat-page__list-head button:focus-visible {
  outline: 3px solid var(--color-et-chat-blue-14);
  outline-offset: 2px;
}

.easytask-chat-actions__backdrop {
  position: fixed;
  z-index: 1040;
  top: 72px;
  right: 0;
  bottom: 0;
  left: calc(var(--easytask-rail-width, 128px) + var(--easytask-chat-list-width, 520px));
  padding: 0;
  border: 0;
  background: var(--color-et-chat-overlay);
  cursor: default;
  animation: easytask-chat-backdrop-in 180ms ease-out;
}

.easytask-chat-actions__menu {
  position: fixed;
  z-index: 1050;
  right: 0;
  bottom: 0;
  left: calc(var(--easytask-rail-width, 128px) + var(--easytask-chat-list-width, 520px));
  width: auto;
  min-height: 168px;
  padding: 16px clamp(20px, 4vw, 52px) 18px;
  border: 1px solid var(--color-et-line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--color-et-surface);
  box-shadow: 0 -16px 48px var(--color-et-shadow);
  animation: easytask-chat-actions-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.easytask-chat-actions__content {
  width: min(880px, 100%);
  margin: 0 auto;
}

.easytask-chat-actions__group-labels {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  padding: 0 0 6px;
}

.easytask-chat-actions__group-labels span {
  padding-left: 8px;
  color: var(--color-et-muted);
  font-size: 11px;
  font-weight: 750;
}

.easytask-chat-actions__group-labels span:first-child {
  grid-column: 1 / span 3;
}

.easytask-chat-actions__group-labels span:last-child {
  grid-column: 4 / span 5;
  padding-left: 14px;
  border-left: 1px solid var(--color-et-line);
}

.easytask-chat-actions__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}

.easytask-chat-actions__item {
  min-width: 0;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 3px;
  border: 0;
  border-radius: 14px;
  color: var(--color-et-ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.easytask-chat-actions__item:nth-child(4) {
  position: relative;
  margin-left: 8px;
}

.easytask-chat-actions__item:nth-child(4)::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -8px;
  width: 1px;
  background: var(--color-et-line);
}

.easytask-chat-actions__item:hover {
  background: var(--color-et-canvas);
  transform: translateY(-1px);
}

.easytask-chat-actions__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--color-et-blue-strong);
  background: var(--color-et-blue-soft);
}

.easytask-chat-actions__icon.is-violet,
.easytask-chat-actions__icon.is-purple,
.easytask-chat-actions__icon.is-indigo {
  color: var(--color-et-chat-violet);
  background: var(--color-et-chat-violet-soft);
}

.easytask-chat-actions__icon.is-green {
  color: var(--color-et-chat-green);
  background: var(--color-et-chat-green-soft);
}

.easytask-chat-actions__icon.is-orange {
  color: var(--color-et-chat-orange);
  background: var(--color-et-chat-orange-soft);
}

.easytask-chat-actions__icon.is-slate {
  color: var(--color-et-chat-slate);
  background: var(--color-et-chat-slate-soft);
}

.easytask-chat-actions__drag-handle,
.easytask-chat-actions__mobile-groups {
  display: none;
}

@keyframes easytask-chat-actions-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes easytask-chat-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) and (min-width: 841px) {
  .easytask-chat-actions__backdrop,
  .easytask-chat-actions__menu {
    left: 374px;
  }
}

@media (max-width: 840px) {
  .easytask-chat-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .easytask-chat-page__list {
    display: none;
  }

  .easytask-chat-page__conversation .workspace-chat__channel-header {
    min-height: 60px;
  }

  .easytask-chat-actions__backdrop,
  .easytask-chat-actions__menu {
    left: 64px;
  }
}

@media (max-width: 640px) {
  .easytask-chat-page__conversation .workspace-chat__form {
    padding: 9px 8px calc(10px + env(safe-area-inset-bottom));
  }

  .easytask-chat-actions__menu {
    left: 52px;
    min-height: 240px;
    max-height: calc(100dvh - 86px);
    padding: 0 8px calc(10px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    overflow: hidden;
  }

  .easytask-chat-actions__backdrop {
    top: 60px;
    left: 52px;
  }

  .easytask-chat-actions__content {
    display: none;
  }

  .easytask-chat-actions__drag-handle {
    width: 100%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
  }

  .easytask-chat-actions__drag-handle span {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-et-line);
  }

  .easytask-chat-actions__mobile-groups {
    height: calc(100% - 34px);
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 4px 8px;
    -webkit-overflow-scrolling: touch;
  }

  .easytask-chat-actions__mobile-groups section.is-work {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-et-line);
  }

  .easytask-chat-actions__mobile-label {
    display: block;
    padding: 4px 10px 7px;
    color: var(--color-et-muted);
    font-size: 11px;
    font-weight: 750;
  }

  .easytask-chat-actions__mobile-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .easytask-chat-actions__mobile-list .easytask-chat-actions__item {
    width: 100%;
    min-height: 48px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    text-align: left;
  }

  .easytask-chat-actions__mobile-list .easytask-chat-actions__item:nth-child(4) {
    margin-left: 0;
  }

  .easytask-chat-actions__mobile-list .easytask-chat-actions__item:nth-child(4)::before {
    display: none;
  }

  .easytask-chat-actions__mobile-list .easytask-chat-actions__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .easytask-chat-actions__menu {
    animation: none;
  }

  .easytask-chat-actions__backdrop {
    animation: none;
  }

  .easytask-chat-actions__trigger,
  .easytask-chat-actions__item {
    transition: none;
  }
}
.easytask-demo__workspace .workspace-layout:has(.easytask-project-find),
.easytask-demo__workspace .workspace-layout__content:has(.easytask-project-find) {
  height: 100%;
  min-height: 0;
}

.easytask-demo__workspace .workspace-layout__body:has(.easytask-project-find) {
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  gap: 0;
  align-items: stretch;
}

.easytask-demo__workspace .workspace-layout__body:has(.easytask-project-find) .workspace-layout__sidebar-wrap {
  display: none;
}

.easytask-demo__workspace:has(.easytask-project-find) .easytask-demo__integration-badge {
  display: none;
}

.easytask-project-find {
  --color-et-project-blue-08: rgba(45, 166, 244, 0.08);
  --color-et-project-blue-16: rgba(45, 166, 244, 0.16);
  --color-et-project-green: rgb(30, 157, 89);
  --color-et-project-green-soft: rgb(233, 249, 240);
  --color-et-project-skeleton: rgb(237, 242, 247);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 34px clamp(24px, 4vw, 62px) 54px;
  color: var(--color-et-ink);
  background: var(--color-et-canvas);
}

.easytask-project-find__hero {
  max-width: 1420px;
  min-height: 154px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 0 auto;
  padding: 26px 30px;
  border: 1px solid var(--color-et-line);
  border-left: 5px solid var(--color-et-blue);
  background: var(--color-et-surface);
}

.easytask-project-find__hero-copy {
  min-width: 0;
}

.easytask-project-find__hero-copy > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-et-blue-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.easytask-project-find__hero h1 {
  margin: 8px 0 7px;
  color: var(--color-et-ink);
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.easytask-project-find__hero p {
  margin: 0;
  color: var(--color-et-muted);
  font-size: 14px;
  line-height: 1.55;
}

.easytask-project-find__summary {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 26px;
  border-left: 1px solid var(--color-et-line);
}

.easytask-project-find__summary strong {
  color: var(--color-et-blue-strong);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.easytask-project-find__summary span {
  margin-top: 7px;
  color: var(--color-et-muted);
  font-size: 11px;
  font-weight: 700;
}

.easytask-project-find__controls {
  max-width: 1420px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  margin: 18px auto 0;
  padding: 16px;
  border: 1px solid var(--color-et-line);
  background: var(--color-et-surface);
}

.easytask-project-find__search,
.easytask-project-find__sort {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--color-et-line);
  color: var(--color-et-muted);
  background: var(--color-et-canvas);
}

.easytask-project-find__search:focus-within,
.easytask-project-find__sort:focus-within {
  border-color: var(--color-et-project-blue-16);
  box-shadow: 0 0 0 3px var(--color-et-project-blue-08);
}

.easytask-project-find__search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--color-et-ink);
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.easytask-project-find__search input::placeholder {
  color: var(--color-et-muted);
}

.easytask-project-find__sort select {
  border: 0;
  outline: 0;
  color: var(--color-et-ink);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.easytask-project-find__categories {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.easytask-project-find__categories::-webkit-scrollbar {
  display: none;
}

.easytask-project-find__categories button {
  min-width: max-content;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--color-et-line);
  color: var(--color-et-muted);
  background: var(--color-et-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.easytask-project-find__categories button:hover,
.easytask-project-find__categories button.is-active {
  border-color: var(--color-et-blue);
  color: var(--color-et-blue-strong);
  background: var(--color-et-blue-soft);
}

.easytask-project-find__result-head {
  max-width: 1420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 28px auto 13px;
}

.easytask-project-find__result-head div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-et-blue-strong);
}

.easytask-project-find__result-head strong {
  color: var(--color-et-ink);
  font-size: 17px;
}

.easytask-project-find__result-head > span {
  color: var(--color-et-muted);
  font-size: 12px;
  font-weight: 700;
}

.easytask-project-find__grid {
  max-width: 1420px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto;
}

.easytask-project-card {
  min-width: 0;
  min-height: 278px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--color-et-line);
  background: var(--color-et-surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.easytask-project-card:hover {
  border-color: var(--color-et-project-blue-16);
  box-shadow: 0 12px 28px var(--color-et-shadow);
  transform: translateY(-2px);
}

.easytask-project-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.easytask-project-card__topline span,
.easytask-project-card__topline small {
  font-size: 10px;
  font-weight: 800;
}

.easytask-project-card__topline span {
  color: var(--color-et-blue-strong);
}

.easytask-project-card__topline small {
  padding: 4px 7px;
  color: var(--color-et-project-green);
  background: var(--color-et-project-green-soft);
}

.easytask-project-card h2 {
  margin: 15px 0 7px;
  color: var(--color-et-ink);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.easytask-project-card > p {
  min-height: 42px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-et-muted);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.easytask-project-card__roles {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 13px;
  overflow: hidden;
}

.easytask-project-card__roles span {
  min-width: max-content;
  padding: 5px 8px;
  color: var(--color-et-blue-strong);
  background: var(--color-et-blue-soft);
  font-size: 10px;
  font-weight: 700;
}

.easytask-project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--color-et-muted);
  font-size: 10px;
}

.easytask-project-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.easytask-project-card > button {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 0 12px;
  border: 1px solid var(--color-et-line);
  color: var(--color-et-ink);
  background: var(--color-et-surface);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.easytask-project-card > button:hover {
  border-color: var(--color-et-blue);
  color: var(--color-et-blue-strong);
  background: var(--color-et-blue-soft);
}

.easytask-project-card.is-loading {
  min-height: 278px;
  border-color: transparent;
  background: var(--color-et-project-skeleton);
  animation: easytask-project-pulse 1.2s ease-in-out infinite alternate;
}

.easytask-project-find__state {
  max-width: 1420px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 1px solid var(--color-et-line);
  color: var(--color-et-ink);
  background: var(--color-et-surface);
  text-align: center;
}

.easytask-project-find__state p {
  margin: 7px 0 0;
  color: var(--color-et-muted);
  font-size: 12px;
}

.easytask-project-find button:focus-visible,
.easytask-project-find input:focus-visible,
.easytask-project-find select:focus-visible {
  outline: 3px solid var(--color-et-project-blue-16);
  outline-offset: 2px;
}

@keyframes easytask-project-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (max-width: 1120px) {
  .easytask-project-find__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .easytask-project-find {
    padding: 18px 14px 38px;
  }

  .easytask-project-find__hero {
    min-height: 0;
    align-items: flex-start;
    padding: 20px 18px;
  }

  .easytask-project-find__hero p {
    font-size: 12px;
  }

  .easytask-project-find__summary {
    min-width: 84px;
    padding-left: 16px;
  }

  .easytask-project-find__summary strong {
    font-size: 30px;
  }

  .easytask-project-find__summary span {
    max-width: 74px;
    text-align: right;
  }

  .easytask-project-find__controls {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .easytask-project-find__sort {
    grid-row: 2;
  }

  .easytask-project-find__categories {
    grid-column: 1;
  }

  .easytask-project-find__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .easytask-project-card,
  .easytask-project-card.is-loading {
    animation: none;
    transition: none;
  }
}
:root {
  --organizer-motion-fast: 160ms;
  --organizer-motion-base: 240ms;
  --organizer-motion-enter: 480ms;
  --organizer-motion-stagger: 70ms;
  --organizer-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --organizer-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --organizer-hover-lift: -2px;
}

@keyframes organizer-motion-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes organizer-motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .organizer-landing *,
  .organizer-apply *,
  .competition-admin-page *,
  .competition-code-page *,
  .contest-admin-v2 *,
  .organizer-dashboard * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* 네트워킹 화면들.
 *
 * 행사장에서 폰으로 쓰는 게 기본이라 좁은 화면부터 잡았다 — 손가락으로 누를
 * 단추는 40px 이상, 입력칸 글자는 16px(아이폰이 화면을 확대하지 않는 크기).
 * 색은 앱 토큰을 그대로 쓴다. 여기만 다른 색이면 붙여 넣은 화면처럼 보인다.
 *
 * 색으로 뜻을 나눈 곳:
 *   초록  = 나에게 들어온 것(명함 받음, 만남)
 *   주황  = 연 사람이 처리해야 할 것(승인 대기)
 *   보라  = AI */

/* 대화상자·하단 단추는 body 로 빼내므로(.nk-portal) 같은 토큰을 거기에도 둔다. */
.nk-page,
.nk-portal {
  --nk-ink: var(--color-text-main, #1b1c20);
  --nk-sub: var(--color-text-muted, #737780);
  --nk-line: var(--color-border, #e4e5e9);
  --nk-card: var(--color-bg-white, #fff);
  --nk-soft: var(--color-bg-soft, #f3f4f6);
  --nk-accent: var(--color-primary, #10367d);
  /* 앱 기본 강조색은 어두운 모드에서도 진한 남색이라, 어두운 바탕 위 글자로 쓰면
     읽히지 않는다(대비 4.2). 글자에만 쓰는 강조색을 따로 둔다. */
  --nk-accent-text: var(--nk-accent);
  --nk-green: #146c47;
  --nk-green-soft: #e6f4ec;
  --nk-amber: #8a4f07;
  --nk-amber-soft: #fdf1e1;
  --nk-ai: #6a4fd1;
  --nk-ai-soft: #f1edfd;
}

.nk-page {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 28px 32px 120px;
  box-sizing: border-box;
  color: var(--nk-ink);
}
.nk-page--narrow { max-width: 520px; }
.nk-page *, .nk-page *::before, .nk-page *::after { box-sizing: border-box; }

[data-theme="dark"] .nk-page,
[data-theme="dark"] .nk-portal {
  --nk-green-soft: rgba(31, 138, 91, .18);
  --nk-amber-soft: rgba(180, 105, 14, .2);
  --nk-ai-soft: rgba(106, 79, 209, .2);
  --nk-green: #5fcf98;
  --nk-amber: #f0b060;
  --nk-ai: #b3a2ff;
  --nk-accent-text: #9bbcff;
}

.nk-muted { margin: 0; color: var(--nk-sub); font-size: 13.5px; line-height: 1.6; }
.nk-center { padding: 24px 0; text-align: center; }

.nk-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  color: var(--nk-sub);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
}
.nk-back svg { width: 16px; height: 16px; }

/* ── 단추 ─────────────────────────────────────────────────────────── */
.nk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--nk-line);
  border-radius: 12px;
  background: var(--nk-card);
  color: var(--nk-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.nk-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.nk-btn:hover:not(:disabled) { border-color: var(--nk-accent); }
.nk-btn:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }
.nk-btn:disabled { opacity: .5; cursor: default; }
.nk-btn--primary { border-color: transparent; background: var(--nk-accent); color: #fff; }
.nk-btn--primary:hover:not(:disabled) { border-color: transparent; filter: brightness(1.08); }
.nk-btn--dark { border-color: transparent; background: var(--nk-ink); color: var(--nk-card); }
.nk-btn--sm { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.nk-btn--block { width: 100%; }
.nk-btn.is-on { border-color: var(--nk-green); background: var(--nk-green-soft); color: var(--nk-green); }

.nk-icon-btn {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nk-sub);
  cursor: pointer;
}
.nk-icon-btn svg { width: 20px; height: 20px; }
.nk-icon-btn:hover { background: var(--nk-soft); color: var(--nk-ink); }
.nk-icon-btn--ok { color: var(--nk-green); }

.nk-link-btn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--nk-accent-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.nk-link-btn.is-on { color: var(--nk-sub); }
.nk-plan-tag {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--nk-soft);
  color: var(--nk-accent-text);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

/* ── 첫 화면 ──────────────────────────────────────────────────────── */
.nk-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  width: min(820px, 100%);
  margin-left: max(0px, calc((100% - 1174px) / 2));
  margin-bottom: 18px;
}
.nk-hero h1 {
  margin: 0 0 6px;
  font-size: clamp(26px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.nk-hero p { max-width: 440px; margin: 0; color: var(--nk-sub); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.nk-hero--compact { margin-bottom: 14px; }

.nk-code {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--nk-line);
  border-radius: 14px;
  background: var(--nk-card);
}
.nk-code > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--nk-sub); }
.nk-code input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  letter-spacing: .02em;
}

.nk-entry-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 26px;
}
.nk-create-button { flex: 0 0 auto; padding-inline: 20px; }

.nk-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(250px, 290px);
  justify-content: center;
  gap: clamp(44px, 5vw, 64px);
  align-items: start;
}
.nk-home-main { min-width: 0; }
.nk-card-panel {
  position: sticky;
  top: 92px;
  width: 100%;
  max-width: 290px;
  justify-self: end;
}
.nk-card-preview {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nk-card-preview:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 4px; }
.nk-card-panel .bcard { max-width: none; }
.nk-card-preview__image {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 5;
  object-fit: contain;
}
.nk-card-empty {
  display: grid;
  min-height: 188px;
  place-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--nk-sub);
  text-align: center;
}
.nk-card-empty > svg { width: 28px; height: 28px; }
.nk-card-empty strong { color: var(--nk-ink); font-size: 14px; }
.nk-chevron { width: 18px; height: 18px; flex: 0 0 auto; color: var(--nk-sub); }

/* ── 구역 ─────────────────────────────────────────────────────────── */
.nk-section { margin-bottom: 26px; }
.nk-section > h2,
.nk-section__head h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 800;
}
.nk-section > h2 small { color: var(--nk-sub); font-size: 12.5px; font-weight: 600; }
.nk-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nk-section__head h2 { margin: 0; }
.nk-section__head h2 span,
.nk-section > h2 span {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--nk-soft);
  color: var(--nk-sub);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nk-space-list,
.nk-list,
.nk-contacts,
.nk-ai-results { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nk-list + .nk-list { margin-top: 8px; }
.nk-space-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}
.nk-space-list > li { min-width: 0; }

.nk-space {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  padding: 16px 12px 18px;
  background: transparent;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: transform .15s ease;
}
.nk-space:hover { transform: translateY(-3px); }
.nk-space:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 3px; border-radius: 26px; }
.nk-space__icon {
  display: grid;
  width: 118px;
  height: 118px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--nk-accent) 12%, var(--nk-line));
  border-radius: 34px;
  background: color-mix(in srgb, var(--nk-accent) 7%, var(--nk-card));
  color: var(--nk-accent-text);
  box-shadow: 0 12px 28px rgba(34, 50, 84, .08);
  transition: box-shadow .15s ease, transform .15s ease;
}
.nk-space--onsite .nk-space__icon {
  background: var(--nk-green-soft);
  color: var(--nk-green);
  border-color: color-mix(in srgb, var(--nk-green) 15%, var(--nk-line));
}
.nk-space__icon svg { width: 40px; height: 40px; stroke-width: 1.6; }
.nk-space:hover .nk-space__icon { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(34, 50, 84, .13); }
.nk-space__main { display: flex; width: 100%; min-width: 0; flex-direction: column; align-items: center; gap: 7px; }
.nk-space__main strong { display: -webkit-box; overflow: hidden; max-width: 100%; font-size: 16px; font-weight: 780; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nk-space__facts { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--nk-sub); font-size: 12.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.nk-space__facts span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nk-space__facts .is-muted { color: var(--nk-sub); font-weight: 700; }
.nk-space__facts .is-waiting { color: var(--nk-amber); font-weight: 750; }
.nk-space__notice {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--nk-amber-soft);
  color: var(--nk-amber);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.nk-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--nk-soft);
  color: var(--nk-sub);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.nk-chip svg { width: 12px; height: 12px; }
.nk-chip--alert { background: var(--nk-amber-soft); color: var(--nk-amber); }
.nk-chip--muted { background: var(--nk-soft); color: var(--nk-sub); }

.nk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--nk-line);
  border-radius: 14px;
  background: var(--nk-card);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.nk-row--link { transition: border-color .15s ease; }
.nk-row--link:hover { border-color: var(--nk-accent); }
.nk-row__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--nk-soft);
  color: var(--nk-accent);
}
.nk-row__icon svg { width: 18px; height: 18px; }
.nk-row__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.nk-row__text strong { overflow: hidden; font-size: 14.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.nk-row__text small { overflow: hidden; color: var(--nk-sub); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

.nk-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
}
.nk-avatar--initial {
  background: color-mix(in srgb, var(--nk-accent) 12%, transparent);
  color: var(--nk-accent-text);
  font-weight: 800;
}

.nk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  border: 1px dashed var(--nk-line);
  border-radius: 18px;
  text-align: center;
}
.nk-empty > svg { width: 32px; height: 32px; color: var(--nk-sub); }
.nk-empty strong { font-size: 16px; }
.nk-empty p { max-width: 360px; margin: 0; color: var(--nk-sub); font-size: 13.5px; line-height: 1.65; word-break: keep-all; }

/* ── 대화상자 · 시트 ──────────────────────────────────────────────── */
.nk-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 17, 22, .45);
}
.nk-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(460px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 20px;
  border-radius: 20px;
  background: var(--color-bg-white, #fff);
  color: var(--color-text-main, #1b1c20);
  box-shadow: 0 24px 60px rgba(15, 17, 22, .25);
}
.nk-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nk-dialog__head h2 { margin: 0; font-size: 18px; font-weight: 800; }

/* 폰에서는 아래에서 올라오는 시트가 엄지에 닿기 쉽다. */
@media (max-width: 640px) {
  .nk-dialog-backdrop { align-items: flex-end; padding: 0; }
  .nk-dialog {
    width: 100%;
    max-height: 88dvh;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
  }
}

.nk-field { display: flex; flex-direction: column; gap: 6px; }
.nk-field > span { font-size: 13px; font-weight: 750; }
.nk-field em { margin-left: 4px; color: var(--color-text-muted, #737780); font-size: 12px; font-style: normal; font-weight: 600; }
.nk-field input,
.nk-field textarea,
.nk-note-edit textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border, #e4e5e9);
  border-radius: 12px;
  background: var(--color-bg-white, #fff);
  color: inherit;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}
.nk-field input:focus,
.nk-field textarea:focus,
.nk-note-edit textarea:focus { outline: none; border-color: var(--color-primary, #10367d); }

.nk-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #e4e5e9);
  border-radius: 12px;
  cursor: pointer;
}
.nk-toggle input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--color-primary, #10367d); }
.nk-toggle span { display: flex; flex-direction: column; gap: 3px; }
.nk-toggle strong { font-size: 14px; }
.nk-toggle small { color: var(--color-text-muted, #737780); font-size: 12.5px; line-height: 1.5; }

.nk-format-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.nk-format-picker legend { grid-column: 1 / -1; margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 750; }
.nk-format-picker button { min-width: 0; min-height: 76px; padding: 12px; border: 1px solid var(--color-border, #e4e5e9); border-radius: 12px; background: var(--color-bg-white, #fff); color: inherit; display: flex; align-items: flex-start; gap: 9px; font: inherit; text-align: left; cursor: pointer; }
.nk-format-picker button.is-active { border-color: var(--color-primary, #10367d); background: color-mix(in srgb, var(--color-primary, #10367d) 8%, var(--color-bg-white, #fff)); box-shadow: inset 0 0 0 1px var(--color-primary, #10367d); }
.nk-format-picker button > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--nk-accent-text); }
.nk-format-picker button span { min-width: 0; display: grid; gap: 3px; }
.nk-format-picker button strong { font-size: 14px; }
.nk-format-picker button small { color: var(--color-text-muted, #737780); font-size: 11.5px; line-height: 1.4; word-break: keep-all; }
.nk-create-venue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 12px; background: var(--color-bg-soft, #f3f4f6); }

@media (max-width: 640px) {
  .nk-create-venue { grid-template-columns: 1fr; }
}

/* 초대 */
.nk-qr {
  display: grid;
  aspect-ratio: 1;
  width: min(260px, 100%);
  margin: 0 auto;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--color-border, #e4e5e9);
  border-radius: 16px;
  background: #fff; /* QR은 흰 바탕이어야 카메라가 읽는다 — 어두운 테마에서도. */
}
.nk-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.nk-invite-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 12px;
  background: var(--color-bg-soft, #f3f4f6);
}
.nk-invite-code span { color: var(--color-text-muted, #737780); font-size: 12.5px; font-weight: 700; }
.nk-invite-code strong {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .14em;
}

/* 사람 상세 */
.nk-person-sheet__head { display: flex; align-items: center; gap: 12px; }
.nk-person-sheet__head > div { flex: 1 1 auto; min-width: 0; }
.nk-person-sheet__head h2 { margin: 0 0 2px; font-size: 19px; font-weight: 800; }
.nk-person-sheet__head p { margin: 0; color: var(--color-text-muted, #737780); font-size: 13.5px; }
.nk-history {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--nk-green-soft, #e6f4ec);
  color: var(--nk-green, #1f8a5b);
  font-size: 13px;
  font-weight: 650;
}
.nk-history svg { width: 15px; height: 15px; flex: 0 0 auto; }
.nk-detail { display: flex; flex-direction: column; gap: 5px; }
.nk-detail > span { color: var(--color-text-muted, #737780); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.nk-detail > p { margin: 0; font-size: 14px; line-height: 1.6; word-break: keep-all; white-space: pre-wrap; }
.nk-person-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nk-person-sheet__actions .nk-btn:last-child { grid-column: 1 / -1; }
.nk-person-sheet__profile {
  align-self: center;
  color: var(--color-text-muted, #737780);
  font-size: 13px;
  font-weight: 650;
}

.nk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.nk-tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color-bg-soft, #f3f4f6);
  color: var(--color-text-main, #1b1c20);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 650;
}
.nk-tag--want {
  background: color-mix(in srgb, var(--color-primary, #10367d) 10%, transparent);
  color: var(--nk-accent-text, var(--color-primary, #10367d));
}

/* ── 한 네트워킹 ──────────────────────────────────────────────────── */
.nk-space-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.nk-space-head__text { min-width: 0; }
.nk-space-head h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 4.6vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  word-break: keep-all;
}
.nk-space-head p { margin: 0 0 8px; color: var(--nk-sub); font-size: 14px; line-height: 1.6; word-break: keep-all; }
.nk-space-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--nk-sub); font-size: 13px; font-weight: 650; }
.nk-space-head__meta span { display: inline-flex; align-items: center; gap: 4px; }
.nk-space-head__meta svg { width: 14px; height: 14px; }

.nk-panel {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--nk-line);
  border-radius: 18px;
  background: var(--nk-card);
}
.nk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.nk-panel__head h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 800; }
.nk-panel__head h2 svg { width: 17px; height: 17px; }
/* 찾는 사람이 비어 있으면 눈에 띄게 — 모든 찾기 기능이 여기서 시작한다. */
.nk-panel--attention { border-color: var(--nk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nk-accent) 12%, transparent); }
.nk-panel--host { border-color: var(--nk-amber); background: var(--nk-amber-soft); }
.nk-panel--ai { border-color: color-mix(in srgb, var(--nk-ai) 35%, var(--nk-line)); }
.nk-panel--ai .nk-panel__head h2 { color: var(--nk-ai); }

.nk-host-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nk-host-row__label { margin-right: auto; color: var(--nk-amber); font-size: 13px; font-weight: 800; }
.nk-panel--host .nk-list { margin-top: 10px; }

.nk-mine-form { display: flex; flex-direction: column; gap: 10px; }
.nk-mine-summary { display: flex; flex-direction: column; gap: 8px; }
.nk-mine-summary p { margin: 0; color: var(--nk-sub); font-size: 13.5px; line-height: 1.6; }
.nk-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

.nk-ai-form { display: flex; gap: 8px; }
.nk-ai-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--nk-line);
  border-radius: 12px;
  background: var(--nk-card);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.nk-ai-form input:focus { outline: none; border-color: var(--nk-ai); }
.nk-panel--ai .nk-btn--primary { background: var(--nk-ai); }
.nk-ai-results { margin-top: 12px; }
.nk-ai-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: var(--nk-ai-soft);
}
.nk-ai-card__person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nk-ai-card__person span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nk-ai-card__person strong { font-size: 15px; font-weight: 800; }
.nk-ai-card__person small { color: var(--nk-sub); font-size: 12.5px; }
.nk-ai-card__reason { margin: 0; font-size: 14px; line-height: 1.6; word-break: keep-all; }
.nk-ai-card__ice {
  padding: 10px 12px;
  border-left: 3px solid var(--nk-ai);
  border-radius: 0 10px 10px 0;
  background: var(--nk-card);
}
.nk-ai-card__ice span { display: block; margin-bottom: 3px; color: var(--nk-ai); font-size: 11.5px; font-weight: 800; }
.nk-ai-card__ice p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.nk-ai-card__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 찾기 · 거르기 */
.nk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 0 14px;
  border: 1px solid var(--nk-line);
  border-radius: 12px;
  background: var(--nk-card);
}
.nk-search svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--nk-sub); }
.nk-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}

/* 필터는 가로로 밀어 본다. 줄바꿈하면 목록이 아래로 한참 밀린다. */
.nk-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nk-filter-row::-webkit-scrollbar { display: none; }
.nk-pill {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--nk-line);
  border-radius: 999px;
  background: var(--nk-card);
  color: var(--nk-sub);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.nk-pill.is-on { border-color: var(--nk-ink); background: var(--nk-ink); color: var(--nk-card); }
.nk-pill--tag.is-on {
  border-color: var(--nk-accent);
  background: color-mix(in srgb, var(--nk-accent) 10%, transparent);
  color: var(--nk-accent-text);
}
.nk-select-all { display: block; margin: 2px 0 8px; }

.nk-person {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--nk-line);
  border-radius: 14px;
  background: var(--nk-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.nk-person:hover { border-color: color-mix(in srgb, var(--nk-accent) 50%, var(--nk-line)); }
.nk-person.is-selected {
  border-color: var(--nk-accent);
  background: color-mix(in srgb, var(--nk-accent) 6%, var(--nk-card));
}
.nk-person__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
.nk-person__body strong { font-size: 15px; font-weight: 800; }
.nk-person__body small { overflow: hidden; color: var(--nk-sub); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nk-person__wants { overflow: hidden; color: var(--nk-accent-text); font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nk-person__history {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--nk-green);
  font-size: 12.5px;
  font-weight: 700;
}
.nk-person__history svg { width: 13px; height: 13px; }
.nk-person__badges { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; }
.nk-badge {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--nk-soft);
  color: var(--nk-sub);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}
.nk-badge--in,
.nk-badge--met { background: var(--nk-green-soft); color: var(--nk-green); }

.nk-check {
  display: grid;
  width: 22px;
  height: 22px;
  margin-top: 9px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--nk-line);
  border-radius: 6px;
  color: #fff;
}
.nk-check svg { width: 14px; height: 14px; stroke-width: 3; }
.nk-check.is-on { border-color: var(--nk-accent); background: var(--nk-accent); }
/* 이미 건넨 사람은 고를 수 없다 — 흐린 체크로 "끝난 일"을 보여 준다. */
.nk-check.is-disabled { border-color: var(--nk-soft); background: var(--nk-soft); color: var(--nk-sub); }

/* 여러 명을 고르면 화면 아래에 붙는 단추. 목록을 끝까지 내려도 보여야 한다. */
.nk-actionbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(460px, calc(100% - 32px));
  padding: 10px 10px 10px 18px;
  border-radius: 16px;
  background: var(--nk-ink);
  color: var(--nk-card);
  box-shadow: 0 16px 40px rgba(15, 17, 22, .3);
  transform: translateX(-50%);
}
.nk-actionbar span { flex: 1 1 auto; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* ── 초대 받는 화면 ───────────────────────────────────────────────── */
.nk-invite {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8vh;
  padding: 28px 22px;
  border: 1px solid var(--nk-line);
  border-radius: 22px;
  background: var(--nk-card);
}
.nk-invite__eyebrow { color: var(--nk-accent-text); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.nk-invite h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; word-break: keep-all; }
.nk-invite__desc { margin: 0; color: var(--nk-sub); font-size: 14.5px; line-height: 1.65; word-break: keep-all; }
.nk-invite__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 4px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--nk-soft);
  font-size: 14px;
}
.nk-invite__facts dt { color: var(--nk-sub); font-weight: 700; }
.nk-invite__facts dd { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 700; }
.nk-invite__facts svg { width: 14px; height: 14px; }
.nk-invite__hint { margin: 0; color: var(--nk-sub); font-size: 12.5px; text-align: center; }
.nk-invite__hint a { color: var(--nk-accent-text); font-weight: 700; }
.nk-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--nk-amber-soft);
  color: var(--nk-amber);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.nk-notice svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ── 내 인맥 ──────────────────────────────────────────────────────── */
.nk-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--nk-line);
  border-radius: 18px;
  background: var(--nk-card);
}
.nk-contact__top { display: flex; align-items: center; gap: 12px; }
.nk-contact__who { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.nk-contact__who strong { font-size: 16px; font-weight: 800; }
.nk-contact__who small { overflow: hidden; color: var(--nk-sub); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.nk-meet-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--nk-green-soft);
  color: var(--nk-green);
  font-size: 12.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.nk-meet-count svg { width: 14px; height: 14px; }

.nk-contact__lines { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nk-contact__lines li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.nk-contact__lines svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--nk-sub); }
.nk-contact__lines a { overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.nk-contact__lines a:hover { color: var(--nk-accent-text); }
.nk-contact__nocard { margin: 0; color: var(--nk-sub); font-size: 13px; }

.nk-contact__image summary { color: var(--nk-accent-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.nk-contact__image img { display: block; width: 100%; max-width: 360px; margin-top: 8px; border: 1px solid var(--nk-line); border-radius: 8px; }

.nk-timeline { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--nk-soft); list-style: none; }
.nk-timeline li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.nk-timeline svg { width: 13px; height: 13px; flex: 0 0 auto; color: var(--nk-sub); }
.nk-timeline a { flex: 1 1 auto; overflow: hidden; color: inherit; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.nk-timeline time { flex: 0 0 auto; color: var(--nk-sub); font-size: 12px; font-variant-numeric: tabular-nums; }

.nk-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--nk-line);
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
  white-space: pre-wrap;
  cursor: text;
}
.nk-note svg { width: 15px; height: 15px; margin-top: 3px; flex: 0 0 auto; color: var(--nk-sub); }
.nk-note-edit { display: flex; flex-direction: column; gap: 8px; }
.nk-contact__actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 560px) {
  .nk-page { padding: 20px 14px 120px; }
  .nk-entry-actions { flex-direction: column; }
  .nk-create-button { width: 100%; }
  .nk-space-list { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 12px; }
  .nk-space { min-height: 196px; gap: 12px; padding: 12px 8px 14px; }
  .nk-space__icon { width: 104px; height: 104px; border-radius: 29px; }
  .nk-space__icon svg { width: 34px; height: 34px; }
  .nk-space__main strong { font-size: 15px; }
  .nk-space__facts { font-size: 12px; }
  .nk-space-head { flex-direction: column; }
  .nk-space-head .nk-btn { width: 100%; }
  .nk-ai-form { flex-direction: column; }
  .nk-ai-form .nk-btn { width: 100%; }
}

@media (max-width: 1080px) {
  .nk-page { max-width: 780px; }
  .nk-hero { width: 100%; margin-left: 0; }
  .nk-home-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .nk-card-panel { position: static; width: min(100%, 320px); max-width: 320px; margin: 0 auto 22px; justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nk-page *, .nk-dialog * { transition: none !important; }
}
.nk-supporter-view {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #f3f4f7;
}

.nk-supporter-view iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.nk-space-head__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
/* 배치 편집기가 화면 전체를 쓴다 (CompetitionOnsiteAdmin 의 immersive 모드). */
.networking-venue-page {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #f3f3f2;
}

.networking-venue-page__editor,
.networking-venue-page__field {
  position: absolute;
  inset: 62px 0 0;
}

.networking-venue-page__topbar {
  position: relative;
  z-index: 3;
  display: grid;
  height: 62px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid #e0e5ed;
  background: #fff;
  color: #1d2939;
}

.networking-venue-page__identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.networking-venue-page__identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.networking-venue-page__identity > span:last-child, .networking-venue-page__topbar-end { color: #7b8494; font-size: 12px; white-space: nowrap; }
.networking-venue-page__live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #38a477; }
.networking-venue-page__topbar-end { justify-self: end; }
.networking-venue-page .onsite-admin.onsite-admin--immersive { position: absolute; inset: 0; height: 100%; }

.networking-venue-page__editor {
  z-index: 1;
  visibility: visible;
}

.networking-venue-page__editor.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.networking-venue-page__field {
  z-index: 2;
  visibility: hidden;
  background: #f4f5f7;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.networking-venue-page__field.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.networking-venue-page__field iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.networking-venue-page__field-empty {
  display: grid;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #7a8290;
}

.networking-venue-page__field-empty svg { width: 30px; height: 30px; color: #5b75d4; }
.networking-venue-page__field-empty strong { color: #1d2535; font-size: 16px; }
.networking-venue-page__field-empty span { font-size: 12px; }

.networking-venue-switch {
  display: flex;
  height: 40px;
  padding: 3px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #f3f5f8;
}
.networking-venue-switch button { display: inline-flex; min-width: 104px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 0; border-radius: 5px; background: transparent; color: #6c7585; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.networking-venue-switch button.is-active { background: #fff; color: #243f91; box-shadow: 0 1px 4px rgba(21, 36, 65, .12); }
.networking-venue-switch button:hover:not(.is-active, :disabled) { color: #243f91; }
.networking-venue-switch button:focus-visible { outline: 2px solid #4e68ca; outline-offset: -2px; }
.networking-venue-switch button:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 760px) {
  .networking-venue-page__topbar { height: 56px; grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; }
  .networking-venue-page__editor, .networking-venue-page__field { top: 56px; }
  .networking-venue-page__identity > span:last-child, .networking-venue-page__topbar-end { display: none; }
  .networking-venue-switch button { min-width: 74px; padding: 0 8px; font-size: 11px; }
}

.networking-venue-permissions-backdrop { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(19, 29, 48, .42); }
.networking-venue-permissions { width: min(480px, 100%); max-height: min(700px, calc(100dvh - 40px)); overflow-y: auto; border: 1px solid #dfe4ed; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(19, 29, 48, .2); color: #202a3d; }
.networking-venue-permissions > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px; border-bottom: 1px solid #e6eaf0; }
.networking-venue-permissions h2 { margin: 0 0 6px; font-size: 20px; }
.networking-venue-permissions > header p { margin: 0; color: #68758a; font-size: 12px; line-height: 1.5; }
.networking-venue-permissions > header button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: #68758a; cursor: pointer; }
.networking-venue-permissions form { padding: 22px 24px 20px; }
.networking-venue-permissions form label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 750; }
.networking-venue-permissions form > div { display: flex; gap: 8px; }
.networking-venue-permissions input { min-width: 0; height: 42px; flex: 1; padding: 0 11px; border: 1px solid #cfd7e5; border-radius: 6px; outline: 0; font: inherit; font-size: 13px; }
.networking-venue-permissions input:focus { border-color: #5470c7; }
.networking-venue-permissions form button { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 6px; background: #405fc1; color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.networking-venue-permissions form button:disabled { opacity: .5; cursor: default; }
.networking-venue-permissions-error { margin: 0 24px 18px; color: #bf3e4d; font-size: 12px; }
.networking-venue-permissions-list { padding: 0 24px 24px; }
.networking-venue-permissions-list h3 { margin: 0; padding: 14px 0 8px; border-top: 1px solid #e6eaf0; font-size: 12px; }
.networking-venue-permissions-row { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f4; }
.networking-venue-permissions-row > span { display: grid; min-width: 0; gap: 2px; }
.networking-venue-permissions-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.networking-venue-permissions-row small { overflow: hidden; color: #738096; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.networking-venue-permissions-row em { color: #738096; font-size: 11px; font-style: normal; }
.networking-venue-permissions-row button { border: 0; background: transparent; color: #9b4b58; font: inherit; font-size: 11px; cursor: pointer; }
.networking-venue-permissions-row button:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
  .networking-venue-permissions-backdrop { padding: 12px; }
  .networking-venue-permissions > header, .networking-venue-permissions form { padding-right: 18px; padding-left: 18px; }
  .networking-venue-permissions-list { padding-right: 18px; padding-left: 18px; }
}

.networking-venue-page .onsite-admin__workspace {
  position: relative;
  display: block;
  padding: 10px;
}

.networking-venue-page .onsite-admin__canvas-area {
  position: absolute;
  z-index: auto;
  inset: 10px;
}

.networking-venue-page .onsite-admin__toolbox,
.networking-venue-page .onsite-admin__inspector {
  position: absolute;
  z-index: 30;
  top: 10px;
  bottom: 10px;
  width: 292px;
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(28, 30, 38, .08);
  opacity: 1;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  will-change: transform;
}

.networking-venue-page .onsite-admin__toolbox {
  left: 10px;
}

.networking-venue-page .onsite-admin__inspector {
  right: 10px;
  width: 380px;
}

.networking-venue-page .onsite-admin__toolbox.is-closed {
  transform: translateX(calc(-100% - 20px));
  opacity: 0;
  pointer-events: none;
}

.networking-venue-page .onsite-admin__inspector.is-closed {
  transform: translateX(calc(100% + 20px));
  opacity: 0;
  pointer-events: none;
}

.networking-venue-page .onsite-admin__rail-toggle {
  z-index: 50;
  transition: left .28s cubic-bezier(.22, 1, .36, 1), right .28s cubic-bezier(.22, 1, .36, 1), background .14s ease, color .14s ease, box-shadow .14s ease;
}

.networking-venue-page .onsite-admin__rail-toggle--left {
  left: 248px !important;
}

.networking-venue-page .onsite-admin__rail-toggle--right {
  right: 336px !important;
}

.networking-venue-page .onsite-admin__workspace.is-toolbox-closed .onsite-admin__rail-toggle--left {
  left: 12px !important;
}

.networking-venue-page .onsite-admin__workspace.is-inspector-closed .onsite-admin__rail-toggle--right {
  right: 12px !important;
}

@media (max-width: 1180px) {
  .networking-venue-page .onsite-admin__toolbox {
    width: 248px;
  }

  .networking-venue-page .onsite-admin__inspector {
    width: 300px;
  }

  .networking-venue-page .onsite-admin__rail-toggle--left {
    left: 204px !important;
  }

  .networking-venue-page .onsite-admin__rail-toggle--right {
    right: 256px !important;
  }
}

@media (max-width: 760px) {
  .networking-venue-page .onsite-admin__workspace,
  .networking-venue-page .onsite-admin__workspace.is-toolbox-closed,
  .networking-venue-page .onsite-admin__workspace.is-inspector-closed {
    padding: 0;
  }

  .networking-venue-page .onsite-admin__canvas-area {
    inset: 0;
  }

  .networking-venue-page .onsite-admin__toolbox,
  .networking-venue-page .onsite-admin__inspector {
    top: 50px;
    bottom: 8px;
    width: min(300px, calc(100% - 24px));
  }

  .networking-venue-page .onsite-admin__toolbox { left: 8px; }
  .networking-venue-page .onsite-admin__inspector { right: 8px; }
  .networking-venue-page .onsite-admin__rail-toggle--left,
  .networking-venue-page .onsite-admin__workspace.is-toolbox-closed .onsite-admin__rail-toggle--left { left: 12px !important; }
  .networking-venue-page .onsite-admin__rail-toggle--right,
  .networking-venue-page .onsite-admin__workspace.is-inspector-closed .onsite-admin__rail-toggle--right { right: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .networking-venue-page .onsite-admin__toolbox,
  .networking-venue-page .onsite-admin__inspector,
  .networking-venue-page .onsite-admin__rail-toggle {
    transition: none;
  }
}

/* ── 로고 메뉴 (캔버스 왼쪽 바와 같은 방식) ─────────────────────────── */
.venue-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 6px 0 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #5b6678;
  cursor: pointer;
}

.venue-brand:hover,
.venue-brand:focus-visible,
.venue-brand[aria-expanded="true"] {
  border-color: #dde3ec;
  background: #f6f8fb;
  outline: none;
}

.venue-brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.venue-brand svg {
  width: 14px;
  height: 14px;
}

.venue-brand-menu {
  position: fixed;
  z-index: 1100;
  display: grid;
  min-width: 170px;
  padding: 5px;
  border: 1px solid #dde3ec;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(27, 44, 68, .18);
}

.venue-brand-menu button {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #1d293a;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.venue-brand-menu button:hover,
.venue-brand-menu button:focus-visible {
  background: #eef4ff;
  color: #2768cf;
  outline: none;
}

.venue-brand-menu svg {
  width: 16px;
  height: 16px;
}

.networking-ops-trigger {
  position: fixed;
  z-index: 91;
  top: 20px;
  right: 20px;
  display: inline-flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #dce2eb;
  border-radius: 8px;
  background: #fff;
  color: #172033;
  box-shadow: 0 8px 24px rgba(20, 28, 45, .12);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.networking-ops-trigger > b {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #e9efff;
  color: #365ccb;
  font-size: 11px;
  line-height: 20px;
}

.networking-ops-trigger.is-open { right: 404px; }

.networking-ops {
  position: fixed;
  z-index: 100;
  top: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  width: 380px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce2eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(20, 28, 45, .18);
  opacity: 0;
  transform: translateX(calc(100% + 20px));
  transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
  pointer-events: none;
}

.networking-ops.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }

.networking-ops__header {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid #e7eaf0;
}

.networking-ops__header > div { display: grid; gap: 3px; min-width: 0; }
.networking-ops__header span { color: #768093; font-size: 11px; font-weight: 700; }
.networking-ops__header strong { overflow: hidden; color: #131b2d; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.networking-ops__header button,
.networking-ops__person > button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 7px; background: transparent; color: #697386; cursor: pointer; }
.networking-ops__header button:hover,
.networking-ops__person > button:hover { background: #f1f3f7; color: #bd3345; }

.networking-ops__tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 12px; border-bottom: 1px solid #e7eaf0; }
.networking-ops__tabs button { height: 48px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #778094; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.networking-ops__tabs button.is-active { border-bottom-color: #5875db; color: #243d91; }

.networking-ops__body { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; }
.networking-ops__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.networking-ops__metrics > div { display: grid; min-height: 98px; place-items: center; align-content: center; gap: 4px; border: 1px solid #e2e6ed; border-radius: 8px; background: #fafbfc; }
.networking-ops__metrics svg { width: 17px; color: #5772d4; }
.networking-ops__metrics span { color: #7b8494; font-size: 11px; }
.networking-ops__metrics strong { color: #162039; font-size: 22px; }

.networking-ops__status-block,
.networking-ops__live-list { margin-top: 14px; padding: 15px; border: 1px solid #e2e6ed; border-radius: 8px; }
.networking-ops__status-block > header,
.networking-ops__live-list > header,
.networking-ops__people section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.networking-ops__status-block > header strong,
.networking-ops__live-list > header strong,
.networking-ops__people section > header strong { font-size: 13px; }
.networking-ops__status-block > header span { padding: 3px 7px; border-radius: 7px; background: #f0f2f5; color: #778094; font-size: 10px; font-weight: 700; }
.networking-ops__status-block > header span.is-live { background: #e8f6ed; color: #257341; }
.networking-ops__status-block dl { display: grid; gap: 8px; margin: 0 0 13px; }
.networking-ops__status-block dl > div { display: flex; justify-content: space-between; }
.networking-ops__status-block dt { color: #778094; font-size: 12px; }
.networking-ops__status-block dd { margin: 0; color: #182137; font-size: 12px; font-weight: 750; }
.networking-ops__status-block a { display: flex; height: 38px; align-items: center; justify-content: center; gap: 7px; border-radius: 7px; background: #253b88; color: #fff; font-size: 12px; font-weight: 750; text-decoration: none; }
.networking-ops__status-block > p,
.networking-ops__live-list > p { margin: 0; color: #7b8494; font-size: 12px; line-height: 1.55; }

.networking-ops__live-list > header span,
.networking-ops__people section > header span { color: #7b8494; font-size: 11px; }
.networking-ops__live-list > div,
.networking-ops__person { display: flex; min-height: 52px; align-items: center; gap: 10px; border-top: 1px solid #eef0f4; }
.networking-ops__live-list i,
.networking-ops__person > i { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #edf1fb; color: #3d579f; font-size: 12px; font-style: normal; font-weight: 750; }
.networking-ops__live-list div > span,
.networking-ops__person > span { display: grid; min-width: 0; flex: 1; gap: 2px; }
.networking-ops__live-list div > span strong,
.networking-ops__person > span strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.networking-ops__live-list small,
.networking-ops__person small { color: #81899a; font-size: 10px; }
.networking-ops__live-list div > b,
.networking-ops__person > b { color: #667085; font-size: 10px; }
.networking-ops__live-list div > b.is-online { color: #27804a; }

.networking-ops__chat { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.networking-ops__messages { min-height: 0; flex: 1; overflow-y: auto; padding: 16px; }
.networking-ops__messages article { margin-bottom: 14px; }
.networking-ops__messages article header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.networking-ops__messages article header strong { font-size: 11px; }
.networking-ops__messages article header span { padding: 2px 5px; border-radius: 5px; background: #e9efff; color: #3e5cb1; font-size: 9px; font-weight: 750; }
.networking-ops__messages article header time { margin-left: auto; color: #a0a7b4; font-size: 9px; }
.networking-ops__messages article p { display: inline-block; max-width: 90%; margin: 0; padding: 9px 11px; border-radius: 7px; background: #f1f3f6; color: #232c3e; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.networking-ops__messages article.is-mine { text-align: right; }
.networking-ops__messages article.is-mine header { flex-direction: row-reverse; }
.networking-ops__messages article.is-mine header time { margin-right: auto; margin-left: 0; }
.networking-ops__messages article.is-mine p { background: #e8edff; text-align: left; }
.networking-ops__chat-empty { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 10px; color: #929aab; }
.networking-ops__chat-empty svg { width: 26px; }
.networking-ops__chat-empty strong { font-size: 12px; }
.networking-ops__chat form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e7eaf0; }
.networking-ops__chat textarea { min-height: 42px; flex: 1; resize: none; border: 1px solid #dce2eb; border-radius: 7px; padding: 10px; color: #172033; font: inherit; font-size: 12px; outline: none; }
.networking-ops__chat textarea:focus { border-color: #6d85df; box-shadow: 0 0 0 3px rgba(88, 117, 219, .1); }
.networking-ops__chat form button { width: 42px; border: 0; border-radius: 7px; background: #405cc5; color: #fff; cursor: pointer; }
.networking-ops__chat form button:disabled { opacity: .45; cursor: default; }

.networking-ops__role-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; padding: 10px; border-radius: 7px; background: #f2f5fc; color: #52617e; font-size: 11px; line-height: 1.45; }
.networking-ops__role-note svg { flex: 0 0 auto; }
.networking-ops__person select { max-width: 82px; height: 30px; border: 1px solid #dce2eb; border-radius: 6px; background: #fff; color: #354159; font-size: 10px; }
.networking-ops__person > button { width: 30px; height: 30px; }
.networking-ops__pending { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid #e7eaf0; }
.networking-ops__decision { display: flex; gap: 4px; }
.networking-ops__decision button { height: 28px; padding: 0 8px; border: 1px solid #dce2eb; border-radius: 6px; background: #fff; color: #697386; font-size: 10px; font-weight: 700; cursor: pointer; }
.networking-ops__decision button:last-child { border-color: #637bda; background: #637bda; color: #fff; }

.networking-ops-backdrop { display: none; }
.networking-ops-confirm { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 45, .38); }
.networking-ops-confirm section { width: min(360px, calc(100% - 32px)); padding: 22px; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px rgba(20, 28, 45, .22); }
.networking-ops-confirm h2 { margin: 0 0 8px; font-size: 17px; }
.networking-ops-confirm p { margin: 0 0 20px; color: #717a8c; font-size: 12px; }
.networking-ops-confirm section > div { display: flex; justify-content: flex-end; gap: 8px; }
.networking-ops-confirm button { min-width: 76px; height: 36px; border: 1px solid #dce2eb; border-radius: 7px; background: #fff; color: #3a4458; font-weight: 700; cursor: pointer; }
.networking-ops-confirm button:last-child { border-color: #bd3345; background: #bd3345; color: #fff; }

@media (max-width: 760px) {
  .networking-ops-trigger { top: 8px; right: 8px; }
  .networking-ops-trigger.is-open { right: 8px; opacity: 0; pointer-events: none; }
  .networking-ops { inset: 6px; width: auto; }
  .networking-ops-backdrop { position: fixed; z-index: 95; inset: 0; display: block; border: 0; background: rgba(20, 28, 45, .28); }
}

@media (prefers-reduced-motion: reduce) {
  .networking-ops { transition: none; }
}