/* =========================================================
   📦 워크업 디자인 토큰 — 값의 «단일 출처»
   =========================================================
   기준: .orca/drops → docs/design-guide.md 「워크업 디자인 · UI · 모바일 대응 가이드」 §2 (2026-10-15).
   이 파일 하나가 색·글자 크기·모서리·간격·그림자의 정본이다. 화면 코드(app.css·템플릿)는
   헥사값을 직접 쓰지 않고 반드시 var(--bg) · var(--text) · var(--radius-card) 처럼 여기 변수를 쓴다.
   다크모드는 <html data-theme="dark"> 를 붙이면 아래 [data-theme="dark"] 블록이 덮어쓴다.

   슈퍼크롤링 전용(2026-10-15 사용자 결정, CLAUDE.md 「슈퍼크롤링 예외」):
     · 강조색은 가이드 그대로 보라(#5e6ad2 / 다크 #6169c4).
     · 왼쪽 남색 사이드바만 이 프로젝트 토큰(--sidebar-*)으로 둔다.
     · 디자인 스타일 3종(보라 채움 · 검정 채움 · 테두리)은 <html data-style> 로 고르고
       주요 단추·켜진 칩·탭이 --active-* 를 따라 같이 바뀐다.
   ========================================================= */

/* 폰트 — Pretendard 가변 글꼴. @import 는 다른 규칙보다 앞에 와야 한다 (CSS 명세) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ───────────── 라이트모드 (기본) ───────────── */
:root {
  /* 바탕 */
  --bg: #fafafa;              /* 페이지 배경 */
  --bg-card: #ffffff;         /* 카드 배경 */
  --bg-hover: #f5f5f5;        /* 마우스 올림 배경 */
  --bg-track: #ededed;        /* 세그먼트(붙은 알약) 홈 — 페이지 배경 위에서도 모양이 보이게 */
  --bg-active: #efefef;       /* 눌림 배경 */
  --shade: #f0f0f0;           /* 묶음 머리줄 음영 1단계 */
  --shade-weak: #f7f7f7;      /* 묶음 안 묶음 음영 2단계 (더 연하게) */

  /* 강조 (보라) */
  --bg-accent: #5e6ad2;
  --bg-accent-hover: #4f5bc0;

  /* 강조색 옅은 톤 3단계 — rgba 를 코드에 직접 적지 말고 «세기» 로 고른다.
     ⚠️ 다크에서는 같은 % 가 사실상 투명이라 아래 dark 블록에서 값을 따로 잡는다 */
  --tint-weak: rgba(94, 106, 210, 0.05);     /* 마우스 올린 줄처럼 아주 옅게 */
  --tint: rgba(94, 106, 210, 0.10);          /* 안읽음 띠 · 멘션 강조 */
  --tint-strong: rgba(94, 106, 210, 0.18);   /* 선택된 칩 */
  --tint-warn: rgba(242, 153, 74, 0.20);     /* 주황 — 보라와 일부러 갈라야 하는 자리 */
  --tint-success: rgba(77, 165, 99, 0.12);   /* 초록 — 성공 알림 상자 배경 */
  --tint-danger: rgba(239, 68, 68, 0.10);    /* 빨강 — 오류 알림 상자 배경 */

  /* 말풍선 (내 글 / 남의 글 / 댓글 묶음) — 목록·카드에서 '내 것 / 남의 것' 을 나눌 때도 같은 값 */
  --bubble-mine: rgba(94, 106, 210, 0.12);
  --bubble-other: #f1f1f1;
  --bubble-thread: rgba(94, 106, 210, 0.06);

  /* 글자 */
  --text: #1a1a1a;            /* 메인 */
  --text-secondary: #666666;  /* 보조 */
  --text-muted: #767676;      /* 비활성 — #999 는 대비 2.85 로 접근성 미달, 이 값이 4.54 */
  --text-white: #ffffff;      /* 강조 바탕 위 흰 글자 */

  /* 상태 · 우선순위 */
  --status-todo: #999999;
  --status-progress: #5e6ad2;
  --status-done: #4da563;     /* 성공 · 완료 */
  --priority-urgent: #eb5757;
  --priority-high: #f2994a;   /* 경고 · 높음 */
  --priority-normal: #999999;
  --priority-low: #d4d4d4;
  --danger: #EF4444;          /* 위험 «점·테두리» 색(가이드 값). 글자·채움 바탕으로는 쓰지 않는다 — 흰 바탕·흰 글자 대비 3.76 */
  --danger-solid: #DC2626;    /* 위험 «채움» 바탕(위험 단추·건수 배지) — 가이드 #EF4444 와 다름: 흰 글자 대비 4.83(4.5 이상, 2026-10-15 검토 D1) */
  --text-danger: #991B1B;     /* 위험 «글자» — 가이드에 없음: #EF4444 는 대비 3.76 이라 배지 에러 글자 값(흰 8.3·옅은 빨강 6.8) */
  --text-accent: #4f5bc0;     /* 보라 «글자»(링크·글자 단추·옅은 보라 위 켜진 표시) — #5e6ad2 는 옅은 보라 위 대비 4.15 로 미달. 가이드 강조 호버 값 */
  --text-success: #065F46;    /* 성공 «글자» — #4da563 은 흰 바탕 대비 3.05 라 글자로는 미달(점·테두리·채움에만). 배지 성공 글자와 같은 값 */
  --text-warn: #92400E;       /* 경고 «글자» — #f2994a 는 대비 2.23. 배지 경고 글자와 같은 값 */

  /* 테두리 */
  --border: #e8e8e8;
  --border-light: #f0f0f0;

  /* 모서리 — Material Design 3(2026-10-21, 가이드 §0): 단추 알약 · 입력·칩·배지 8 · 카드 12 · 큰 카드·대화창 24 */
  --radius-badge: 8px;
  --radius-btn: 999px;
  --radius-input: 8px;
  --radius-chip: 8px;
  --radius-card: 12px;
  --radius-card-lg: 24px;
  --radius-pill: 999px;

  /* 간격 — 4의 배수만. 6px·11px·13px 같은 어정쩡한 값 금지 */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* 글자 크기 단계(MD3 — 가이드 §0) · 누르는 크기 */
  --font-page: 24px;     /* 페이지 제목 = Headline Small (폰·PC 같음, D2) */
  --font-section: 22px;  /* 구역 제목 = Title Large (D9) */
  --font-card: 16px;     /* 카드 제목 */
  --font-body: 14px;     /* 본문 */
  --font-sub: 13px;      /* 보조 */
  --font-label: 12px;    /* 라벨 */
  --tap: 44px;           /* 입력칸 · 켬끔 줄 높이 */
  --btn-h: 40px;         /* 단추 · 글자 단추 · 아이콘 단추 보이는 높이(MD3 Button S) */
  --btn-h-xs: 32px;      /* PC 표 줄 안 단추(MD3 Button XS) */
  --chip-h: 32px;        /* 칩 보이는 높이(MD3 Chip) */
  --hit: 48px;           /* 손가락 영역 — 보이는 크기 밖으로 ::before 를 넓혀 채운다(D1) */

  /* 그림자 — 거의 안 쓴다. 이 4개 외 추가 금지 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-modal: 0 10px 40px rgba(0,0,0,0.12);

  --transition: 150ms ease;
  --overlay: rgba(0,0,0,0.4);   /* 모달 뒤 어둡게 */
  --bg-inverse: #313033;        /* 스낵바 바탕(MD3 inverse surface) */
  --text-inverse: #f4eff4;      /* 스낵바 글자 — 대비 12.4 */

  /* 아이폰 상태바(시계) 높이 — 홈 화면 앱으로 띄울 때 그만큼 비켜 그린다 */
  --safe-top: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

/* ───────────── 다크모드 ───────────── */
[data-theme="dark"] {
  --bg: #111111;
  --bg-card: #191919;         /* 순검정 카드 금지 */
  --bg-hover: #222222;
  --bg-track: #262626;
  --bg-active: #2a2a2a;
  --shade: #242424;           /* 어두운 화면에서는 「조금 밝게」 가 음영이 된다 */
  --shade-weak: #1e1e1e;

  --bg-accent: #6169c4;       /* 📌 흰 글씨 대비 4.85 가 되도록 맞춘 값 */
  --bg-accent-hover: #7b80d4;
  /* 📌 다크에서는 같은 % 가 사실상 투명 → 값을 따로 올려 잡는다 */
  --tint-weak: rgba(97, 105, 196, 0.14);
  --tint: rgba(97, 105, 196, 0.22);
  --tint-strong: rgba(97, 105, 196, 0.34);
  --tint-warn: rgba(242, 153, 74, 0.30);
  --tint-success: rgba(77, 165, 99, 0.22);
  --tint-danger: rgba(239, 68, 68, 0.22);

  --bubble-mine: rgba(97, 105, 196, 0.22);
  --bubble-other: #232323;
  --bubble-thread: rgba(97, 105, 196, 0.16);   /* 다크는 6% 면 안 보인다 — 올려 잡음 */

  --text: #eeeeee;            /* 순백 #fff 금지 — 눈부심 */
  --text-secondary: #aaaaaa;
  --text-muted: #8a8a8a;      /* #191919 카드 위 대비 5.09 */
  --text-white: #ffffff;

  --danger: #FCA5A5;          /* 다크 위험 점·테두리는 밝은 빨강 */
  --danger-solid: #DC2626;    /* 📌 #FCA5A5 바탕에 흰 글자는 대비 1.9 → 채움은 이 색 */
  --text-danger: #FCA5A5;     /* 다크 위험 «글자» — 카드 위 대비 9.3 */
  --text-accent: #A5B4FC;     /* 다크 보라 «글자» — #6169c4 는 카드 위 3.6·옅은 보라 위 2.9 로 미달. 다크 배지 인디고 글자 값 */
  --text-success: #6EE7B7;    /* 다크 배지 성공 글자와 같은 값 */
  --text-warn: #FCD34D;       /* 다크 배지 경고 글자와 같은 값 */

  --border: #2a2a2a;
  --border-light: #222222;

  /* 다크모드는 그림자 대신 테두리로 구분 — 값만 진하게 맞춤 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-modal: 0 10px 40px rgba(0,0,0,0.5);
  --overlay: rgba(0,0,0,0.6);
  --bg-inverse: #e6e1e5;
  --text-inverse: #313033;      /* 다크 스낵바 — 대비 11.0 */
  color-scheme: dark;
}

/* 👤 이름 동그라미(사진 없는 사람) 색 14종 — 사람 아이디를 해시해 하나를 고르면
   같은 사람은 언제나 같은 색. 전부 흰 글씨가 읽히는 어두운 계열. 라이트·다크 공통 */
:root, [data-theme="dark"] {
  --avatar-1: #C43D4B;   /* 장미 */
  --avatar-2: #BA5F1D;   /* 주황 */
  --avatar-3: #96721B;   /* 황금 */
  --avatar-4: #5E7F22;   /* 올리브 */
  --avatar-5: #2E8348;   /* 초록 */
  --avatar-6: #148577;   /* 청록 */
  --avatar-7: #1F7FA8;   /* 하늘 */
  --avatar-8: #4A63C9;   /* 파랑 */
  --avatar-9: #6A51C4;   /* 보라 */
  --avatar-10: #9440AC;  /* 자주 */
  --avatar-11: #B8408F;  /* 자홍 */
  --avatar-12: #C24B6E;  /* 분홍 */
  --avatar-13: #587082;  /* 청회 */
  --avatar-14: #7A6A52;  /* 갈색 */
}

/* =========================================================
   슈퍼크롤링 전용 토큰 — 왼쪽 남색 사이드바 (2026-10-15 사용자 결정 ⑤ 유지)
   ========================================================= */
:root {
  --sidebar-bg: #0f172a;
  --sidebar-fg: #cbd5e1;       /* 남색 위 대비 9.8 */
  --sidebar-fg-strong: #ffffff;
  --sidebar-muted: #94a3b8;    /* 남색 위 대비 5.9 — WORKSPACE 라벨 */
  --sidebar-active: #1e293b;   /* 선택된 메뉴의 밝은 남색 알약 */
  --sidebar-hover: #182234;
  --sidebar-border: #1e293b;
}

[data-theme="dark"] {
  --sidebar-bg: #0b0f1a;
  --sidebar-fg: #cbd5e1;
  --sidebar-fg-strong: #ffffff;
  --sidebar-muted: #94a3b8;
  --sidebar-active: #1b2435;
  --sidebar-hover: #131b2b;
  --sidebar-border: #1b2435;
}

/* =========================================================
   🎛️ 디자인 스타일 3종 (가이드 §5) — 켜진 알약 · 주요 단추 · 켜진 세그먼트 칸 · 탭 밑줄이
   <html data-style="accent|black|outline"> 한 값을 따라 같이 바뀐다. 화면 코드는 색을 적지 않고
   부품(.btn-primary · .chip-active · .tabbar-link-active …)이 --active-* 만 쓴다.
   ========================================================= */
:root {
  --active-bg: var(--bg-accent);          /* 🟣 보라 채움 (기본) */
  --active-bg-hover: var(--bg-accent-hover);
  --active-border: var(--bg-accent);
  --active-fg: var(--text-white);
  --active-line: var(--text-accent);      /* 탭 밑줄 · 숫자처럼 채우지 않는 강조(글자로도 쓰여 글자용 보라) */
}

[data-style="black"] {
  --active-bg: var(--text);               /* ⚫ 검정 채움 (다크에선 밝은 회색 바탕이 된다) */
  --active-bg-hover: var(--text-secondary);
  --active-border: var(--text);
  --active-fg: var(--bg-card);
  --active-line: var(--text);
}

[data-style="outline"] {
  --active-bg: var(--tint);               /* ◻️ 테두리 + 옅은 보라 */
  --active-bg-hover: var(--tint-strong);
  --active-border: var(--bg-accent);
  --active-fg: var(--text);
  --active-line: var(--text-accent);
}

/* =========================================================
   배지 색 (가이드 §2-1) — 상태 5종 + 분류 10색. 라이트는 파스텔 바탕 + 진한 글씨,
   다크는 반투명 바탕 + 밝은 글씨. 모양(모서리·여백·글자 크기)은 app.css 의 .badge 가 준다.
   헥사값이 허용되는 곳은 이 파일뿐이다(tests/web/test_design.py).
   ========================================================= */
.badge-success { background: #D1FAE5; color: #065F46; }
.badge-info    { background: #DBEAFE; color: #1E3A8A; }
.badge-warn    { background: #FEF3C7; color: #92400E; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-muted   { background: #F1F5F9; color: #475569; }
.badge-red     { background: #FEE2E2; color: #991B1B; }
.badge-amber   { background: #FEF3C7; color: #92400E; }
.badge-yellow  { background: #FEF9C3; color: #854D0E; }
.badge-green   { background: #D1FAE5; color: #065F46; }
.badge-teal    { background: #CCFBF1; color: #115E59; }
.badge-blue    { background: #DBEAFE; color: #1E3A8A; }
.badge-indigo  { background: #E0E7FF; color: #3730A3; }
.badge-purple  { background: #EDE9FE; color: #5B21B6; }
.badge-rose    { background: #FFE4E6; color: #9F1239; }
.badge-gray    { background: #F1F5F9; color: #475569; }

[data-theme="dark"] .badge-success { background: rgba(16,185,129,0.15);  color: #6EE7B7; }
[data-theme="dark"] .badge-info    { background: rgba(59,130,246,0.15);  color: #93C5FD; }
[data-theme="dark"] .badge-warn    { background: rgba(245,158,11,0.15);  color: #FCD34D; }
[data-theme="dark"] .badge-danger  { background: rgba(239,68,68,0.15);   color: #FCA5A5; }
[data-theme="dark"] .badge-muted   { background: rgba(148,163,184,0.15); color: #CBD5E1; }
[data-theme="dark"] .badge-red     { background: rgba(239,68,68,0.15);   color: #FCA5A5; }
[data-theme="dark"] .badge-amber   { background: rgba(245,158,11,0.15);  color: #FCD34D; }
[data-theme="dark"] .badge-yellow  { background: rgba(234,179,8,0.15);   color: #FDE047; }
[data-theme="dark"] .badge-green   { background: rgba(16,185,129,0.15);  color: #6EE7B7; }
[data-theme="dark"] .badge-teal    { background: rgba(20,184,166,0.15);  color: #5EEAD4; }
[data-theme="dark"] .badge-blue    { background: rgba(59,130,246,0.15);  color: #93C5FD; }
[data-theme="dark"] .badge-indigo  { background: rgba(99,102,241,0.15);  color: #A5B4FC; }
[data-theme="dark"] .badge-purple  { background: rgba(139,92,246,0.15);  color: #C4B5FD; }
[data-theme="dark"] .badge-rose    { background: rgba(244,63,94,0.15);   color: #FDA4AF; }
[data-theme="dark"] .badge-gray    { background: rgba(148,163,184,0.15); color: #CBD5E1; }

/* ───────────── 기본 글꼴·바탕 ───────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-body);
  line-height: 1.5;   /* MD3 Body 14/20 에 가깝게(한글은 1.5) — 문단·도움말은 부품이 24 로 */
  letter-spacing: -0.01em;
  /* 📌 한글은 낱말 단위로 줄바꿈, 긴 주소·영문은 넘칠 때만 끊는다 — 화면마다 따로 걸지 않는다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background 0.2s, color 0.2s;
}

/* 제목 — 자간 타이트, 무게감. 크기는 부품(.page-header-title · .section-title · .card-title)이 준다 */
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.3; font-weight: 700; }

/* 📌 가로 넘침 전역 차단 — hidden 이 아니라 clip (hidden 은 sticky 사이드바를 망가뜨린다) */
html, body, #root {
  max-width: 100vw;
  overflow-x: hidden;  /* 구형 브라우저용 */
  overflow-x: clip;
}

button { cursor: pointer; }
input, textarea { font-family: inherit; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 움직임을 싫어하는 설정이면 장식 애니메이션 끄기 — 로딩 회전은 아주 느리게만 남는다 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}