/* ER ONE UI 글꼴 - SUIT Variable (self-hosted)
   =====================================================================
   OS 에 무엇이 깔려 있느냐에 기대지 않는다. 앱이 글꼴을 직접 들고 있어야
   Windows·macOS·Linux 에서 같은 화면이 나온다. 외부 CDN 도 쓰지 않는다 -
   사내망·NAS 에서 도는 앱이라 외부망이 끊겨도 화면이 같아야 한다.

   가변축(wght 100~900) 하나짜리 파일 한 개다. 굵기마다 파일을 두면 400 과
   700 을 오갈 때마다 새 요청이 생긴다. 자산 출처·라이선스·수록 글리프는
   public/assets/fonts/README.md 에 적어 두었다.

   font-display: swap 을 쓴다.
   - block  : 최대 3초 글자가 안 보인다. 업무 앱에서 빈 화면은 고장으로 읽힌다.
   - optional/fallback : 늦게 오면 그 페이지에서는 영영 대체 글꼴로 남는다.
                         대체 글꼴은 안전장치이지 정상 경로가 아니다.
   - swap   : 글자는 바로 보이고, 글꼴이 도착하면 반드시 바뀐다.
   바뀌는 순간의 흔들림은 index.html 의 preload 로 줄인다. */
@font-face {
  font-family: "SUIT Variable";
  src: url("assets/fonts/SUIT-Variable.woff2?v=aa894a204d") format("woff2");
  /* 이 파일의 기본 인스턴스는 Thin(100) 이다. 범위를 적지 않으면 어떤
     굵기를 지정해도 가늘게 나온다. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* SF-031 - ER ONE 디자인 토큰.
     ---------------------------------------------------------------------
     고치기 전 실측: font-size 21종(8~32px, 70%가 12px 이하) · 색 리터럴
     543개 · border-radius 12종 · breakpoint 19종. 값이 많은 것이 문제가
     아니라 규칙이 없는 것이 문제였다. 화면마다 다른 시기에 생겨서, 같은
     뜻을 가진 것이 화면마다 다른 크기와 색으로 그려지고 있었다.

     그래서 여기서 정하는 것은 "쓸 수 있는 값의 목록"이다. 이 목록 밖의
     값을 쓰려면 이유가 있어야 한다. */

  /* 글꼴 스택 - 맨 앞이 우리가 직접 싣는 것이고, 나머지는 안전장치다.
     ---------------------------------------------------------------------
     SUIT 에는 한자가 없고 전각 물결표(～)·로마 숫자(Ⅰ) 같은 것도 빠져 있다.
     그런 글자만 뒤쪽 글꼴로 넘어간다. 그래서 뒤도 한글이 제대로 나오는
     순서로 둔다. 스택 전체가 대체로 쓰이는 것은 글꼴 로딩이 실패했을 때뿐이다. */
  --font-sans: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 글자 크기 - 여덟 단.
     2차에서 위쪽 세 단을 올렸다. 화면 제목이 15px, 섹션 제목이 13px 이라
     본문과 구분되지 않았고, 그래서 화면이 "표만 잔뜩 있는 관리자 페이지"
     처럼 보였다. 위계는 굵기가 아니라 크기가 만든다. */
  /* 11px 은 "읽는 글" 이 아니다. 사이드바 그룹 머리(HOME/SALES)처럼
     한 번 보고 마는 라벨에만 쓴다. 문장이 들어가면 안 된다. */
  --text-2xs: 11px;   /* 그룹 머리 - 여기만 하한 아래다 */
  /* 사이드바 그룹 머리 전용. 읽는 글이 아니라 구역 표시라 메뉴 라벨(13px)
     과 확실히 달라야 한다. 읽는 글의 하한(11.5px)보다 작은 유일한 값이고,
     여기 말고 다른 곳에 쓰지 않는다. */
  --text-xs: 12px;    /* 표 머리·메타·보조 라벨 (읽는 글의 하한) */
  --text-sm: 13px;    /* 표 셀·본문 보조 */
  --text-base: 14px;  /* 본문 */
  --text-md: 15px;    /* 섹션 제목 */
  --text-lg: 17px;    /* 큰 섹션 제목 */
  --text-xl: 20px;    /* 화면 제목 */
  --text-2xl: 25px;   /* KPI 값 */

  /* 굵기 - 네 단만 쓴다. 450·550·650 처럼 중간값을 섞기 시작하면
     같은 뜻의 글자가 화면마다 다른 굵기로 그려진다. */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 행간 - 한글은 영문보다 촘촘해 보여서 조금 넉넉히 준다. */
  --leading-tight: 1.25;  /* 제목·KPI 값 */
  --leading-snug: 1.4;    /* 표 셀·칩 */
  --leading: 1.55;        /* 본문 */
  /* 한글에 자간을 넓게 주면 글자가 흩어져 읽기 어려워진다. 라벨에만 아주 조금. */
  --tracking-label: 0.01em;

  /* 여백 - 여덟 칸 */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* SF-075: 프로젝트 색.

     목록과 머리줄에서 프로젝트를 눈으로 가르는 가장 빠른 길이 색이다.
     여섯 가지를 두고 이름에서 늘 같은 것을 뽑아 쓴다. 규칙 안에 색을
     직접 적지 않으려고 여기서 토큰으로 선언한다. */
  --project-sky: #9ec9f7;
  --project-mint: #8fd9c0;
  --project-grape: #b9a6f5;
  --project-amber: #f6cf8d;
  --project-rose: #f3a8bd;
  --project-slate: #aab4c6;

  /* SF-048: 라벨/값 두 칸짜리 줄의 왼쪽 열 너비.
     ---------------------------------------------------------------------
     자리마다 72px·76px 로 다르게 적혀 있었다. 각 화면만 보면 괜찮은데,
     화면을 옮기면 값이 시작하는 세로선이 달라져 어긋나 보인다. "열이
     안 맞는다" 는 말의 실제 원인이 이것이었다.

     한 군데서 정한다. 한글 라벨 네 글자("다음 할 일")가 들어가는 너비다. */
  --label-column: 76px;

  /* 바탕 */
  /* 색 사용 규칙 (SF-031 최종차)
     ---------------------------------------------------------------------
     같은 뜻은 같은 색으로, 같은 색은 같은 뜻으로 쓴다. 화면마다 새 파랑과
     새 회색을 만들지 않는다. 색은 정보 위계 다음이다 - 색으로만 말하는
     것은 없어야 하고, 상태색을 장식으로 쓰지 않는다.

       --primary-*   주요 버튼 · 현재 메뉴 · 초점 · 고른 행 · 링크.
                     카드 배경, 모든 아이콘, 모든 제목에는 쓰지 않는다.
       --indigo-*    보조 강조. Primary 를 대신하지 않는다.
       --success-*   수주 · 완료 · 정상
       --warning-*   주의 · 예정 지연
       --hold-*      멈춰 둔 것 (지연이 아니다)
       --danger-*    삭제 · 실패 · 오류 · 실주
       --info-*      안내
       --text-*      중립 · 메타. 강조가 필요 없는 것은 전부 여기.

     상태색은 언제나 세 쌍으로 쓴다: 옅은 바탕(-soft) + 읽히는 글자(기본)
     + 필요하면 얇은 선(-border). 진한 색을 배경으로 깔지 않는다.
     한 화면에 강한 accent 는 두세 종까지다. */
  /* 면(Surface) 네 단 - SF-032
     ---------------------------------------------------------------------
     어느 면에 무엇을 올리는지가 정해져 있어야 화면이 "흰 상자 모음" 으로
     보이지 않는다. 위로 갈수록 앞에 있는 것이다.

       --bg              앱 바탕. 이 위에 모든 것이 놓인다
       --surface         기본 면. 카드·표·패널의 바탕이자 떠 있는 것(dropdown·
                         modal·tooltip·toast)의 바탕이기도 하다
       --surface-soft    한 단 눌린 면. 구역을 나누되 상자를 만들지 않을 때
       --surface-strong  더 눌린 면. 칩·머리글·비활성 바탕

     떠 있는 것은 색이 아니라 그림자로 구분한다. 그래서 별도의 "떠 있는 색"
     을 두지 않는다 - 흰색을 두 이름으로 부르면 다음 사람이 둘을 다르게
     바꾼다. 카드는 그림자 없이 선으로 충분하다. */
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-soft: #f8fafd;
  --surface-strong: #eef1f7;

  /* 글자 - 네이비 계열. 순수 회색을 쓰면 화면이 차갑고 싸 보인다. */
  --text: #16203a;
  --text-soft: #4d5a75;
  /* 4.5:1 을 넘기려고 한 단 어둡게 잡았다. 앞서 #7b879e 는 페이지 바탕
     (--bg) 위에서 3.35:1 이라 본문 설명과 날짜가 읽기 어려웠다. */
  --text-muted: #647087;
  --text-onDark: #eef2fa;

  /* 선 */
  --border: #e2e7f0;
  --border-strong: #cfd6e4;
  --border-soft: #edf0f6;

  /* Primary - 강조색. SF-047 에서 사람마다 고를 수 있게 했다.
     ---------------------------------------------------------------------
     기본은 보라다. 바꾸는 것은 **이 일곱 값뿐**이고 바탕·글자·선은 공통이라,
     어떤 색을 골라도 화면이 무너지지 않는다. 고른 색은 :root 의
     data-accent 속성으로 들어온다(아래 블록). 여기 적힌 값이 그 속성이
     없을 때의 기본이자 violet 과 같은 값이다 - 설정을 못 읽어도 화면은
     제 색으로 뜬다.

     색을 자유롭게 고르게 하지 않는다. 색상환에서 아무 값이나 받으면 흰
     바탕의 글자가 안 읽히는 조합이 나오고, 그걸 쓰는 사람이 맞출 수는
     없다. 아래 여섯은 흰 바탕 대비 4.5:1(WCAG AA)을 넘는 것만 골랐다. */
  --primary: #7a5af5;
  --primary-dark: #5f3fd9;
  --primary-hover: #6d4bea;
  --primary-soft: #f1ecfe;
  --primary-softer: #f8f5ff;
  --primary-ring: rgba(122, 90, 245, 0.28);
  --primary-border: #ddd1fb;

  /* 강조색 고르기 칩이 자기 동그라미 색을 싣는 자리. 칩마다 style 로
     덮어쓰지만 기본을 여기 둔다 - 선언이 없으면 어디서 오는 값인지
     읽는 사람도 검사도 알 수 없다. */
  --accent-swatch: var(--primary);

  /* 보조 강조 - Primary 를 대신하지 않는다. 가리키는 대상이 다를 때만 쓴다. */
  --indigo: #6355d9;
  --indigo-soft: #eeecfc;
  --indigo-border: #d6d1f5;

  /* 어두운 바탕 위의 글자. Primary 버튼 글자도 이것을 쓴다. */
  --text-inverse: #ffffff;

  /* 덮개. 패널·모달 뒤를 가리는 한 겹. */
  --scrim: rgba(21, 30, 54, 0.36);

  /* 사이드바 - SF-054 부터 고른 강조색을 따라간다.
     값은 눈으로 고르지 않았다. 바탕은 강조색의 색상(hue)을 어둡게 깐 것이고,
     글자·흐린 글자·막대는 그 바탕에 대고 대비를 계산해 뽑았다. 그러지 않으면
     어떤 색을 골랐을 때 왼쪽 글자가 안 읽히는지 전부 열어 보기 전에는 모른다.
     tests/accent-theme.test.cjs T9 가 여섯 색 모두를 다시 잰다. */
  --sidebar-bg: #191429;
  --sidebar-surface: #272140;
  --sidebar-border: #372f56;
  --sidebar-text: #d6d2e5;
  --sidebar-muted: #8981a7;
  --sidebar-active: #7a5af5;
  --sidebar-hover: rgba(255, 255, 255, 0.06);

  /* 상태 - 진한 색을 배경으로 쓰지 않는다. 옅은 바탕 + 읽히는 글자. */
  --success: #1b7a55;
  --success-soft: #e6f6ee;
  --success-border: #bfe6d3;
  --warning: #9e6008;
  --warning-soft: #fdf3e0;
  --warning-border: #f0dcb4;
  --hold: #7a6a3f;
  --hold-soft: #f6f2e6;
  --hold-border: #e4dcc5;
  --danger: #c53648;
  --danger-soft: #fdecef;
  --danger-border: #f4ccd3;
  --info: #2060b8;
  --info-soft: #e8f1fd;
  --info-border: #c5dbf7;

  /* 업무 상태 일곱 단계의 색. 역할 토큰 다섯으로는 모자라 따로 둔다.
     화면은 이 이름만 쓰고, 값은 여기서만 정한다. */
  --tone-sky: #0271b1;
  --tone-sky-soft: #e4f4fb;
  --tone-blue: #215fbd;
  --tone-blue-soft: #e6efff;
  --tone-green: #1b7c5a;
  --tone-amber: #936609;
  --tone-violet: #5542b0;
  --tone-violet-soft: #ece9fb;
  --tone-gray: #62666d;

  /* 예전 이름. 아직 이것을 가리키는 규칙이 많아 함께 둔다. */
  --teal: var(--success);
  --teal-soft: var(--success-soft);
  --orange: var(--warning);
  --orange-soft: var(--warning-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --yellow: var(--warning);
  --yellow-soft: var(--warning-soft);

  /* 그림자 - 카드는 그림자로 띄우지 않는다. 뜨는 것만 뜬다. */
  /* 그림자는 두 단뿐이다 - SF-032
     ---------------------------------------------------------------------
     카드마다 그림자를 주면 화면이 종이 더미처럼 보인다. 평면에 놓인 것은
     선으로 나누고, 정말 떠 있는 것(dropdown·modal·tooltip·toast)에만
     그림자를 준다. 그 사이 한 단은 hover 때만 잠깐 쓴다.

       --shadow-hover    누를 수 있는 것이 hover 때 아주 살짝 뜬다
       --shadow-float    실제로 떠 있는 것 */
  --shadow-hover: 0 1px 3px rgba(18, 31, 56, 0.07), 0 2px 8px rgba(18, 31, 56, 0.05);
  --shadow-float: 0 8px 28px rgba(18, 31, 56, 0.13), 0 1px 3px rgba(18, 31, 56, 0.06);

  /* 예전 이름. 아직 가리키는 규칙이 많아 두 단으로 접어 둔다.
     (--shadow-xs 는 "그림자 없음" 이라는 뜻의 그림자였다. 부르는 곳이
      없어져 SF-032 에서 지웠다 - 없는 것에 이름을 주면 다시 쓰인다.) */
  --shadow-sm: var(--shadow-hover);
  --shadow-md: var(--shadow-float);
  --shadow-lg: var(--shadow-float);

  /* 모서리 - 다섯 단뿐이다. SF-032
     ---------------------------------------------------------------------
     둥글기가 여러 종류면 같은 화면 안에서 요소들이 서로 다른 시대에서
     온 것처럼 보인다. 쓰임을 하나씩 못박아 둔다.

       --radius-xs    칩·뱃지·아주 작은 표식
       --radius-sm    입력칸·버튼·목록 행
       --radius       카드·구역·표
       --radius-lg    모달·패널처럼 떠 있는 큰 면
       --radius-pill  둥근 토글과 진행 막대

     여기에 없는 값을 규칙에 직접 적지 않는다. 필요하면 이 표를 먼저 고친다.
     (--radius-xl 은 아무 데서도 쓰이지 않아 SF-032 에서 지웠다.) */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* 움직임 - SF-032
     ---------------------------------------------------------------------
     눈에 띄면 실패다. 무엇이 바뀌었는지 알아차릴 만큼만 움직인다.
     120ms 는 "즉각" 으로 느껴지는 상한, 180ms 는 "부드럽다" 의 상한이다.
     그보다 길면 앱이 느리다고 느껴진다. */
  --motion-fast: 120ms;
  --motion-normal: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* 모달 - 세 단. 작은 것은 확인/한 줄 입력, 보통은 등록/수정 폼,
     넓은 것은 표나 편집기가 든 것. */
  --modal-small: 440px;
  --modal-normal: 580px;
  --modal-wide: 920px;

  /* 뼈대 */
  /* 아이콘 크기 - 다섯 단.
     ---------------------------------------------------------------------
     자리마다 13px·15px·19px·34px 이 섞여 있었다. 아이콘이 글자보다 커지거나
     반대로 너무 작으면, 같은 뜻을 가진 것이 화면마다 다른 무게로 읽힌다.
     기본은 md(18px) 다. 이 목록 밖의 크기를 쓰려면 이유가 있어야 한다. */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  --sidebar-width: 228px;
  --topbar-height: 60px;
  --control-height: 38px;
  --control-height-sm: 32px;
  /* SF-036: 큰 버튼도 체계 안에 둔다. 토큰이 없으면 숫자가 남는다. */
  --control-height-lg: 46px;
  /* SF-036: 손가락으로 누르는 자리. 좁은 화면에서 마우스용 38px 은 작다.
     숫자로 적혀 있던 것을 이름으로 바꿨다 - 이름이 있어야 의도가 남는다. */
  --control-height-touch: 40px;
  --row-height: 44px;

  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* SF-047: 강조색 테마.
   ---------------------------------------------------------------------
   화면 설정에서 고른 값이 <html data-accent="..."> 로 들어온다. 서버는
   user_preferences 의 theme.accent 키 하나만 들고 있고, Migration 은 없다.

   violet 은 위 :root 기본과 같은 값이라 여기 다시 적지 않는다 - 두 군데에
   같은 색을 적으면 한쪽만 고치는 날이 온다.

   흰 바탕 대비(실측): blue 4.55 · green 5.32 · orange 5.18 · rose 6.04 ·
   slate 9.48. 전부 4.5:1 을 넘는다. 색을 더할 때도 이 줄을 먼저 넘겨야 한다. */
:root[data-accent="blue"] {
  --primary: #2f6fed;
  --primary-dark: #2257c9;
  --primary-hover: #2a63d8;
  --primary-soft: #eaf1fe;
  --primary-softer: #f4f8ff;
  --primary-ring: rgba(47, 111, 237, 0.28);
  --primary-border: #c3d8fb;

  --sidebar-bg: #141b29;
  --sidebar-surface: #212b40;
  --sidebar-border: #2f3c56;
  --sidebar-text: #d2d8e5;
  --sidebar-muted: #818ea7;
  --sidebar-active: #2f6fed;
}

:root[data-accent="green"] {
  --primary: #0e7a5a;
  --primary-dark: #0a6149;
  --primary-hover: #0c6e51;
  --primary-soft: #e7f6ef;
  --primary-softer: #f3fbf7;
  --primary-ring: rgba(14, 122, 90, 0.28);
  --primary-border: #bfe3d3;

  --sidebar-bg: #142923;
  --sidebar-surface: #214037;
  --sidebar-border: #2f564a;
  --sidebar-text: #d2e5df;
  --sidebar-muted: #81a79c;
  --sidebar-active: #0f805f;
}

:root[data-accent="orange"] {
  --primary: #c2410c;
  --primary-dark: #9a340a;
  --primary-hover: #ae3a0b;
  --primary-soft: #fdeee6;
  --primary-softer: #fff7f3;
  --primary-ring: rgba(194, 65, 12, 0.28);
  --primary-border: #f6d2c0;

  --sidebar-bg: #291a14;
  --sidebar-surface: #402a21;
  --sidebar-border: #563a2f;
  --sidebar-text: #e5d7d2;
  --sidebar-muted: #a78c81;
  --sidebar-active: #c2410c;
}

:root[data-accent="rose"] {
  --primary: #be185d;
  --primary-dark: #98124a;
  --primary-hover: #ab1554;
  --primary-soft: #fdecf3;
  --primary-softer: #fff5f9;
  --primary-ring: rgba(190, 24, 93, 0.28);
  --primary-border: #f5c9dc;

  --sidebar-bg: #29141d;
  --sidebar-surface: #40212e;
  --sidebar-border: #562f3f;
  --sidebar-text: #e5d2da;
  --sidebar-muted: #a78191;
  --sidebar-active: #cc1a64;
}

:root[data-accent="slate"] {
  --primary: #3f4654;
  --primary-dark: #2d3341;
  --primary-hover: #353b49;
  --primary-soft: #eef0f4;
  --primary-softer: #f7f8fa;
  --primary-ring: rgba(63, 70, 84, 0.28);
  --primary-border: #cfd4dd;

  --sidebar-bg: #161c27;
  --sidebar-surface: #242c3d;
  --sidebar-border: #323d52;
  --sidebar-text: #d2d8e5;
  --sidebar-muted: #818da7;
  --sidebar-active: #606b80;
}

* {
  box-sizing: border-box;
}

/* HTML 의 hidden 속성은 UA 스타일시트의 display:none 으로만 동작한다.
   우리가 display:grid / display:flex 를 직접 선언한 요소에서는 그것이 져서,
   접혀 있어야 할 것이 늘 펼쳐진 채로 남는다. 실제로 영업활동 입력 폼이
   항상 열려 있어 담당자·영업기회 섹션을 화면 밖으로 밀어냈고,
   사이드바의 접힌 메뉴 그룹도 같은 이유로 닫히지 않았다.
   hidden 은 '지금 이 요소는 없는 것으로 친다'는 뜻이므로 레이아웃 선언보다 앞선다. */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  /* background 를 적지 않으면 Chromium 의 buttonface(연회색)가 그대로 나온다.
     실제로 달력 옆 "다가오는 일정" 항목이 이유 없는 회색 상자로 보였다. */
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

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

svg {
  display: block;
}

img,
video {
  max-width: 100%;
}

.svg-sprite {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 아이콘 한 벌. 선 아이콘만 쓰고, 색은 글자색을 따라간다(currentColor).
   그래야 같은 아이콘이 사이드바에서도 버튼 안에서도 제자리 색으로 보인다. */
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  transform: translateY(-150%);
  border-radius: var(--radius-sm);
  background: var(--text);
  color: #fff;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

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

.text-soft {
  color: var(--text-soft);
}

.text-danger {
  color: var(--red);
}

.text-success {
  color: var(--green);
}

.nowrap {
  white-space: nowrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.wrap {
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background:
    radial-gradient(circle at 52% 43%, rgba(49, 87, 213, 0.1), transparent 28%),
    var(--bg);
}

.boot-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.boot-copy strong {
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
}

.boot-copy span {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(49, 87, 213, 0.16);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #4168e4, #263fa8);
  box-shadow: 0 8px 18px rgba(49, 87, 213, 0.23);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-mark--large {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
}

/* Authentication */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.93fr) minmax(470px, 1.07fr);
  background: var(--surface);
}

.auth-visual {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 52px clamp(36px, 5vw, 80px);
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(34, 60, 159, 0.98), rgba(47, 82, 200, 0.95) 52%, rgba(67, 97, 212, 0.92)),
    #3157d5;
  color: #fff;
}

.auth-visual::before,
.auth-visual::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 42px;
  content: "";
  transform: rotate(-11deg);
}

.auth-visual::before {
  width: 540px;
  height: 540px;
  right: -270px;
  top: -180px;
}

.auth-visual::after {
  width: 440px;
  height: 440px;
  left: -250px;
  bottom: -180px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-xl);
  font-weight: 700;
}

.auth-brand .brand-mark {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.auth-message {
  max-width: 540px;
  margin-top: clamp(100px, 18vh, 188px);
}

.auth-eyebrow {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.auth-message h1 {
  max-width: 510px;
  margin: 0;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.055em;
}

.auth-message p {
  max-width: 460px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-lg);
  line-height: 1.8;
}

.auth-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 520px;
  margin-top: 52px;
}

.auth-proof-item {
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.auth-proof-item strong,
.auth-proof-item span {
  display: block;
}

.auth-proof-item strong {
  font-size: var(--text-md);
}

.auth-proof-item span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
}

.auth-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px clamp(28px, 6vw, 96px);
}

.auth-form-wrap {
  width: min(100%, 430px);
}

.auth-form-wrap h2 {
  margin: 0;
  font-size: var(--text-2xl);
  letter-spacing: -0.045em;
}

.auth-intro {
  margin: 9px 0 31px;
  color: var(--text-soft);
  line-height: 1.7;
}

.auth-security {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  padding: 13px 14px;
  border: 1px solid #dfe5f4;
  border-radius: var(--radius);
  background: #f8faff;
  color: var(--text-soft);
  font-size: var(--text-sm);
}

/* App shell */
.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 40;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  transition: transform var(--motion-normal) var(--ease-standard);
}

.sidebar-head {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 21px;
  border-bottom: 1px solid var(--border);
}

.sidebar-head strong {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.sidebar-head small {
  display: block;
  margin-top: -2px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-nav {
  flex: 1;
  padding: 14px 12px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-group + .nav-group {
  margin-top: 19px;
}

.nav-group-label {
  margin: 0 10px 7px;
  color: #a2a9b8;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-item {
  position: relative;
  width: 100%;
  min-height: 41px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #59647a;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-standard), color 140ms ease;
}

.nav-item:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 700;
}

.nav-item.is-active::before {
  position: absolute;
  left: -12px;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--primary);
  content: "";
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0 5px;
  border-radius: var(--radius);
  background: #eef0f5;
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.nav-item.is-active .nav-badge {
  background: #dce4ff;
  color: var(--primary);
}

.sidebar-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 13px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #dce5ff, #cad7fb);
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--border);
}

.avatar--teal { background: #d7f3ec; color: #17745d; }
.avatar--orange { background: #fde8d4; color: #a65c18; }
.avatar--violet { background: #ece6ff; color: #6549c1; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--xs { width: 23px; height: 23px; border-width: 1px; font-size: var(--text-xs); }

.sidebar-user-copy {
  min-width: 0;
  flex: 1;
}

.sidebar-user-copy strong,
.sidebar-user-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-copy strong {
  font-size: var(--text-sm);
}

.sidebar-user-copy span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.app-main {
  min-width: 0;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(20px, 3vw, 38px);
  border-bottom: 1px solid rgba(221, 225, 235, 0.9);
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(14px);
}

.mobile-menu {
  display: none;
}

.global-search {
  position: relative;
  width: min(380px, 38vw);
}

.global-search .icon {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.global-search input {
  width: 100%;
  height: var(--control-height);
  padding: 0 44px 0 40px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  outline: 0;
  background: #f3f5f9;
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--motion-fast) var(--ease-standard), background 150ms ease, box-shadow 150ms ease;
}

.global-search input:focus {
  border-color: #bfcaf0;
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(49, 87, 213, 0.09);
}

.search-shortcut {
  position: absolute;
  top: 50%;
  right: 9px;
  padding: 2px 6px;
  transform: translateY(-50%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.realtime-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #dfe4ed;
  border-radius: var(--radius-pill);
  background: #f7f8fb;
  color: #717b8f;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.realtime-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ba3b3;
  content: "";
}

.realtime-status--online { border-color: #c7eadc; background: #effaf5; color: #23745c; }
.realtime-status--online::before { background: #22a77a; box-shadow: 0 0 0 3px rgba(34, 167, 122, 0.12); }
.realtime-status--connecting::before { background: #e3a327; animation: realtime-pulse 1s ease-in-out infinite; }
.realtime-status--pending { border-color: #f2d79b; background: #fff8e9; color: #8c6413; }
.realtime-status--pending::before { background: #d9930d; }

@keyframes realtime-pulse {
  50% { opacity: 0.35; }
}

.icon-button {
  position: relative;
  width: var(--control-height);
  height: var(--control-height);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #667086;
  transition: all var(--motion-fast) var(--ease-standard);
}

.icon-button:hover {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text);
}

.notification-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--red);
}

.content {
  min-height: calc(100vh - var(--topbar-height));
  padding: 28px clamp(20px, 3vw, 38px) 52px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 23px;
}

.page-title h1 {
  margin: 0;
  font-size: clamp(23px, 2.4vw, 29px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.page-title p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: var(--text-sm);
}

/* 제목 없이 설명 한 줄만 남는 머리. 이름은 상단 막대가 말한다 - SF-032 §5.
 * 제목이 빠진 만큼 위아래 여백을 줄인다. 그러지 않으면 한 줄짜리 글이
 * 제목이 있던 자리만큼 자리를 차지해 목록이 아래로 밀린다. */
.page-head--lead { align-items: center; margin-bottom: var(--space-5); }
.page-head--lead .page-title p { margin: 0; }

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Controls */
.button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: #3f4a61;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  transition: all var(--motion-fast) var(--ease-standard);
}

.button:hover {
  border-color: #c1c8d8;
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.button--primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 5px 13px rgba(49, 87, 213, 0.2);
}

.button--primary:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.button--soft {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: none;
}

.button--soft:hover { background: #dfe7ff; }
.button--danger { border-color: #f1ccd1; color: var(--red); }

/* SF-133: 되돌리기 어려운 쪽의 **마지막 한 번**. 테두리만 붉은 단추와
   나란히 두면 어느 것이 진짜 지우는 단추인지 눈으로 가려지지 않는다 -
   목업에서 이 자리를 꽉 찬 붉은 단추로 그렸다. 그 자리에만 쓴다
   (프로젝트 삭제 확인 · 삭제 요청 승인). */
.button--danger-solid {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--text-inverse);
  font-weight: var(--weight-bold);
}

.button--danger-solid:hover { background: #ad2d3e; border-color: #ad2d3e; }
.button--ghost { border-color: transparent; background: transparent; box-shadow: none; }
.button--block { width: 100%; }
.button--large { min-height: var(--control-height-lg); padding: 11px 17px; border-radius: var(--radius); font-size: var(--text-sm); }
.button--small { min-height: var(--control-height-sm); padding: 6px 9px; border-radius: var(--radius-sm); font-size: var(--text-xs); }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 세로 간격은 쌓임 리듬과 같게 둔다. 좁은 화면에서 행이 1열로 접히면
     이 row-gap 이 곧 세로 리듬이 되므로, 두 값이 다르면 폭에 따라 간격이 튄다.
     SF-061: 가로도 같은 값으로 모았다. 줄마다 열이 다른 자리에서 시작하면
     글자는 멀쩡해도 폼 전체가 어긋나 보인다. */
  row-gap: var(--space-5);
  column-gap: var(--space-5);
}

/* 폼의 세로 리듬.
   블록이 "위아래로 쌓일 때"만 간격을 준다.
   .field-row 안의 두 필드는 형제이지만 같은 줄의 좌·우 칸이다. 여기에 위 여백을
   주면 오른쪽 칸만 격자 칸 안에서 15px 내려앉아, 좌우 label/input 이 어긋난다.
   그래서 쌓임 규칙에서 행 내부를 빼 둔다 — 개별 필드를 보정하지 않는다.
   행 안의 간격은 격자의 gap 이 담당한다(줄바꿈된 칸의 세로 간격 포함). */
.field + .field,
.field-row + .field-row,
.field-row + .field,
.field + .field-row {
  margin-top: var(--space-5);
}

/* 칸을 **가로로** 늘어놓는 자리. 여기서는 쌓임 여백을 주지 않는다.
   세로 간격은 격자의 gap 이 담당한다(줄바꿈된 칸 포함).

   전에는 위 규칙에 :not(.field-row) 만 붙여 두었다. 그래서 .field-row 말고
   가로로 늘어놓는 격자가 생길 때마다 같은 일이 되풀이됐다 - 첫 칸만
   제자리에 있고 둘째 칸부터 16px 씩 내려앉아 한 줄의 라벨이 층이 졌다.
   활동 기록 폼과 업무 폼의 영업 B2B 필드 둘 다 그랬고, 브라우저로 재서야
   알았다(첫 칸 margin=0px, 나머지 margin=16px 0px 0px).

   가로로 늘어놓는 자리를 **여기 한 곳에** 모은다. 새로 만들거든 여기에
   더한다. tests/field-row-margin.test.cjs 가 빠진 것을 찾아낸다. */
.field-row > .field + .field,
.erone-activity-form-row > .field + .field,
.task-sales-fields-grid > .field + .field,
.quote-item-grid > .field + .field,
.analysis-edit-grid > .field + .field {
  margin-top: 0;
}

.field label,
.field-label {
  color: #4d576c;
  font-size: var(--text-sm);
  font-weight: 700;
}

.required::after {
  margin-left: 3px;
  color: var(--red);
  content: "*";
}

.input,
.select,
.textarea {
  width: 100%;
  /* SF-074: 칸은 제가 놓인 자리의 너비를 따른다.

     width:100% 만으로는 모자랐다. 격자 칸 안에서 입력칸의 min-width 는
     auto 이고, 그 값은 **브라우저가 정한 최소 너비**다. 날짜·시각 칸
     (datetime-local)은 그 값이 223px 이라, 201px 짜리 칸에 넣어도 거기까지
     줄지 않고 옆 칸을 밀어냈다. 활동 기록 폼에서 실제로 그랬다 - 첫 칸만
     22px 비져나오고, 덩달아 라벨 높이까지 26px 로 틀어져(다른 칸은 18px)
     한 줄의 글자가 층이 졌다.

     0 으로 풀면 width:100% 가 제 일을 한다. */
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow 140ms ease;
}

.input,
.select {
  /* SF-036: 41px 이었다. 같은 화면의 버튼(38px)·.erone-input(38px)과
     3px 어긋나 있었고, 그 차이가 모든 모달에 걸려 있었다.
     화살표 위치(17px)는 그대로 둔다 - 그 값이 원래 38px 기준이다
     (.erone-select 와 같다). 높이만 맞추면 둘이 같은 그림이 된다. */
  height: var(--control-height);
  padding: 0 12px;
}

.select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #7e8798 50%), linear-gradient(135deg, #7e8798 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 11px) 17px;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px;
}

.textarea {
  min-height: 94px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.6;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: #90a5e7;
  box-shadow: 0 0 0 3px rgba(49, 87, 213, 0.09);
}

.input::placeholder,
.textarea::placeholder {
  color: #adb4c3;
}

.field-help {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}

.check-row input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.segment {
  min-height: var(--control-height-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.segment.is-active {
  background: #eef1f6;
  color: var(--text);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.toolbar-search {
  position: relative;
  width: min(290px, 100%);
}

.toolbar-search .icon {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.toolbar-search .input {
  padding-left: 36px;
}

.filter-select {
  width: auto;
  min-width: 130px;
}

/* Shared cards, badges and table */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 19px;
  border-bottom: 1px solid var(--border);
}

.card-head h2,
.card-head h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card-head p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.card-body {
  padding: 19px;
}

.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  background: #f0f2f6;
  color: #667086;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.badge::before,
.status-badge::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.72;
}

.badge--plain::before { display: none; }
.status--lead { background: #eef1f6; color: #647087; }
.status--qualify { background: #eef3ff; color: #4261c5; }
.status--proposal { background: #f1edff; color: #7253c7; }
.status--negotiation { background: var(--orange-soft); color: #bb6a1f; }
.status--won, .status--active, .status--complete, .status--approved { background: var(--green-soft); color: var(--green); }
.status--lost, .status--urgent, .status--rejected, .status--overdue { background: var(--red-soft); color: var(--red); }
.status--pending, .status--review, .status--progress { background: var(--yellow-soft); color: var(--yellow); }
.status--draft, .status--paused { background: #f0f2f6; color: #6e7789; }

.priority {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 700;
}

.priority::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aeb4c0;
  content: "";
}

.priority--high { color: var(--red); }
.priority--high::before { background: var(--red); }
.priority--medium { color: var(--orange); }
.priority--medium::before { background: var(--orange); }
.priority--low { color: var(--green); }
.priority--low::before { background: var(--green); }

.table-card {
  overflow: hidden;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #eceef3;
  vertical-align: middle;
}

.data-table th {
  background: var(--surface-soft);
  color: #788195;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  color: #465168;
  font-size: var(--text-sm);
}

.data-table tbody tr {
  transition: background var(--motion-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
  background: #fafbfe;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.cell-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 155px;
}

.cell-title strong,
.cell-title span {
  display: block;
}

.cell-title strong {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cell-title span {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 3px;
  opacity: 0.25;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.data-table tr:hover .row-actions,
.row-actions:focus-within {
  opacity: 1;
}

/* SF-036: 29px 이었다. 표 안이라 작아야 하지만 29 는 체계 밖 값이다.
   작은 컨트롤은 32px 하나로 모은다. */
.row-actions .icon-button {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-sm);
}

.empty-state {
  display: grid;
  min-height: 250px;
  place-items: center;
  padding: 36px;
  text-align: center;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
}

.empty-state h3 {
  margin: 0;
  font-size: var(--text-md);
}

.empty-state p {
  max-width: 350px;
  margin: 7px auto 15px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(285px, 0.55fr);
  gap: 16px;
}

.kpi-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.kpi-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
}

.kpi-card::after {
  position: absolute;
  top: -24px;
  right: -20px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: var(--kpi-color, #eef2ff);
  content: "";
  opacity: 0.42;
}

.kpi-label {
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.kpi-value {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.trend-up {
  color: var(--green);
  font-weight: 700;
}

.pipeline-chart {
  height: 244px;
  display: flex;
  align-items: flex-end;
  gap: clamp(7px, 1.4vw, 16px);
  padding: 17px 6px 4px;
}

.pipeline-bar-wrap {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.pipeline-value {
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.pipeline-bar-track {
  width: min(42px, 75%);
  height: calc(var(--height, 30) * 1%);
  min-height: 16px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: linear-gradient(180deg, #6482e9, #355bd6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.24);
  transition: height var(--motion-normal) var(--ease-standard);
}

.pipeline-bar-label {
  max-width: 75px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list,
.activity-list {
  display: flex;
  flex-direction: column;
}

.mini-task {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.mini-task:last-child { border-bottom: 0; }

.task-check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border: 1.5px solid #c6ccd8;
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: #fff;
}

.task-check.is-complete {
  border-color: var(--green);
  background: var(--green);
}

.mini-task strong {
  display: block;
  color: #364057;
  font-size: var(--text-xs);
  font-weight: 600;
}

.mini-task small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-action {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: #536078;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: left;
  transition: all var(--motion-fast) var(--ease-standard);
}

.quick-action:hover {
  border-color: #bac7ed;
  background: #f8faff;
  color: var(--primary-dark);
  transform: translateY(-1px);
}

.quick-action .icon { color: var(--primary); }

/* Sales board */
.board-scroll {
  margin-right: calc(clamp(20px, 3vw, 38px) * -1);
  padding-right: clamp(20px, 3vw, 38px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.kanban {
  min-width: 1050px;
  display: grid;
  grid-template-columns: repeat(5, minmax(195px, 1fr));
  gap: 11px;
  align-items: start;
}

.kanban-column {
  min-height: 460px;
  padding: 10px;
  border: 1px solid #e5e8ef;
  border-radius: var(--radius);
  background: #eef1f6;
}

.kanban-column.is-dragover {
  border-color: var(--primary);
  background: #e9eeff;
}

.kanban-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 3px 11px;
}

.stage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-color, #7180a1);
}

.kanban-head strong {
  font-size: var(--text-xs);
}

.kanban-count {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-left: 2px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.75);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.kanban-total {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.deal-card {
  padding: 13px;
  border: 1px solid #e0e4ec;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(18, 27, 48, 0.035);
  cursor: grab;
  transition: border-color var(--motion-fast) var(--ease-standard), transform 140ms ease, box-shadow 140ms ease;
}

.deal-card + .deal-card { margin-top: 8px; }

.deal-card:hover {
  border-color: #c6cfeb;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.deal-card.is-dragging { opacity: 0.45; }

.deal-card-company {
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.deal-card h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.45;
}

.deal-value {
  margin-top: 11px;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.deal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar + .avatar {
  margin-left: -7px;
}

/* Customers and projects */
.company-logo {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.project-card {
  padding: 17px;
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow 140ms ease, border-color 140ms ease;
}

.project-card:hover {
  border-color: #cbd3e8;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-code {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.project-card h3 {
  margin: 6px 0 0;
  font-size: var(--text-base);
  line-height: 1.45;
}

.project-client {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.progress-row {
  margin-top: 19px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: #e8ebf1;
}

.progress-fill {
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #6685e7);
}

.project-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Collaboration */
.collab-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 15px;
  align-items: start;
}

.collab-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.collab-tab {
  min-height: var(--control-height-sm);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.collab-tab:hover { background: var(--surface-soft); color: var(--text); }
.collab-tab.is-active { background: var(--primary-soft); color: var(--primary-dark); }

.composer {
  padding: 15px;
  margin-bottom: 11px;
}

.composer-row {
  display: flex;
  gap: 10px;
}

.composer-input {
  flex: 1;
  min-height: var(--control-height);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: 0;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: var(--text-sm);
  text-align: left;
}

.composer-input:hover {
  border-color: #c8d0e1;
  background: var(--surface);
}

.composer-actions {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  padding-left: 44px;
}

.post-card {
  padding: 17px;
}

.post-card + .post-card { margin-top: 10px; }

.post-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.post-author strong,
.post-author span { display: block; }
.post-author strong { font-size: var(--text-xs); }
.post-author span { color: var(--text-muted); font-size: var(--text-xs); }

.post-content {
  margin: 13px 0;
  color: #3f4960;
  font-size: var(--text-sm);
  line-height: 1.75;
  white-space: pre-line;
}

.mention {
  color: var(--primary);
  font-weight: 700;
}

.post-context {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--radius-xs);
  background: #f2f4f8;
  color: var(--text-soft);
  font-size: var(--text-xs);
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.post-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.post-action:hover { background: var(--surface-soft); color: var(--text); }

.comment-list {
  margin-top: 10px;
  padding-left: 42px;
}

.comment {
  position: relative;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: #4e596f;
  font-size: var(--text-xs);
}

.comment + .comment { margin-top: 6px; }
.comment strong { color: var(--text); }
.comment-reply { margin-top: 6px; color: var(--primary); font-size: var(--text-xs); font-weight: 600; }

.side-panel-card + .side-panel-card { margin-top: 11px; }

.side-list {
  display: flex;
  flex-direction: column;
}

.side-list-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.side-list-item:last-child { border-bottom: 0; }

.side-list-item-copy {
  min-width: 0;
  flex: 1;
}

.side-list-item-copy strong,
.side-list-item-copy span { display: block; }
.side-list-item-copy strong { font-size: var(--text-xs); font-weight: 600; }
.side-list-item-copy span { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }

.notification-item {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background var(--motion-fast) var(--ease-standard);
}

.notification-item.is-unread { background: #f7f9ff; }

.notification-item.is-unread::before {
  position: absolute;
  top: 18px;
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  content: "";
}

.notification-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.notification-copy { min-width: 0; flex: 1; }
.notification-copy p { margin: 0; color: #465168; font-size: var(--text-xs); line-height: 1.55; }
.notification-copy time { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); }

/* AI documents */
.ai-notice {
  display: flex;
  gap: 11px;
  margin-bottom: 15px;
  padding: 14px 16px;
  border: 1px solid #d7def4;
  border-radius: var(--radius);
  background: linear-gradient(100deg, #f8faff, #f5f2ff);
  color: #47536d;
}

.ai-notice .icon { color: var(--indigo); }
.ai-notice strong { display: block; color: #343d55; font-size: var(--text-sm); }
.ai-notice p { margin: 3px 0 0; color: #69738a; font-size: var(--text-xs); line-height: 1.55; }

.document-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: 15px;
}

.dropzone {
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 28px;
  border: 1.5px dashed #bfc8dc;
  border-radius: var(--radius-lg);
  background: #fafbfe;
  text-align: center;
  transition: all var(--motion-fast) var(--ease-standard);
}

.dropzone.is-dragover,
.dropzone:hover {
  border-color: var(--primary);
  background: #f5f7ff;
}

.dropzone-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  color: var(--primary);
}

.dropzone h3 { margin: 0; font-size: var(--text-base); }
.dropzone p { margin: 6px 0 14px; color: var(--text-muted); font-size: var(--text-xs); }
.dropzone-hint { display: block; margin-top: 12px; color: #9aa2b2; font-size: var(--text-xs); }

.capture-actions {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}

.analysis-preview {
  min-height: 230px;
}

.analysis-placeholder {
  min-height: 190px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--text-muted);
  text-align: center;
}

.analysis-placeholder .icon {
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin: 0 auto 9px;
  color: var(--text-muted);
}

.analysis-section + .analysis-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.analysis-section h4 {
  margin: 0 0 8px;
  font-size: var(--text-xs);
}

.analysis-kv {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 7px 10px;
  font-size: var(--text-xs);
}

.analysis-kv dt { color: var(--text-muted); }
.analysis-kv dd { margin: 0; color: #404a60; font-weight: 600; }

.risk-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.risk-item {
  display: flex;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: #8f581f;
  font-size: var(--text-xs);
}

.review-gate {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid #eadca8;
  border-radius: var(--radius);
  background: #fffbee;
}

.review-gate strong { display: block; font-size: var(--text-xs); }
.review-gate p { margin: 3px 0 10px; color: #7e7250; font-size: var(--text-xs); }

.camera-view {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #151922;
  aspect-ratio: 4 / 3;
}

.camera-view video,
.camera-view canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-guide {
  position: absolute;
  inset: 16%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.32);
}

/* Quotes */
.revision-stack {
  display: flex;
  align-items: center;
  gap: 4px;
}

.revision-chip {
  display: inline-flex;
  min-width: 25px;
  height: 21px;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  background: #eef1f6;
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.revision-chip.is-current { background: var(--primary-soft); color: var(--primary); }

/* Calendar */
.calendar-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 15px;
}

.calendar-card { overflow: hidden; }

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 15px;
  border-bottom: 1px solid var(--border);
}

.calendar-toolbar h2 {
  min-width: 145px;
  margin: 0;
  font-size: var(--text-md);
  text-align: center;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays div {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  /* 숫자가 왼쪽에서 시작하므로 요일도 왼쪽에서 시작한다. 가운데 정렬이면
     열마다 요일과 날짜가 어긋나 보인다. */
  padding-left: 12px;
}

.calendar-weekdays .is-sun { color: #c2453f; }
.calendar-weekdays .is-sat { color: #2f5fbf; }

.calendar-day {
  min-height: 92px;
  padding: 5px 6px 6px;
  /* 칸을 나누는 선은 읽는 것을 돕는 만큼만 있으면 된다. 진한 격자는 표를
     스프레드시트처럼 보이게 만들고, 정작 봐야 할 일정보다 먼저 눈에 띈다. */
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.calendar-day:nth-child(7n) { border-right: 0; }
/* 마지막 주 아래 선은 카드 테두리와 겹쳐 두 줄로 보인다. */
.calendar-grid > .calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-day.is-sun .day-mark { color: #c2453f; }
.calendar-day.is-sat .day-mark { color: #2f5fbf; }
.calendar-day.is-outside { background: var(--surface-soft); }
.calendar-day.is-outside .day-mark { color: #b8beca; }

/* 버튼은 칸 전체를 덮는다 - 빈 날 아무 데나 눌러 일정을 넣을 수 있어야 한다.
   눈에 보이는 동그라미는 안쪽의 표식이 맡는다. */
.day-number {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.day-mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.day-number:hover .day-mark { background: var(--surface-strong); }

/* 오늘. 달력에서 가장 먼저 찾는 칸이다. */
.calendar-day.is-today { background: var(--primary-soft); }
.calendar-day.is-today .day-mark,
.calendar-day.is-today.is-sun .day-mark,
.calendar-day.is-today.is-sat .day-mark {
  background: var(--primary);
  color: #fff;
  font-weight: var(--weight-bold);
}

.calendar-event {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 4px 5px;
  overflow: hidden;
  border-left: 2px solid var(--event-color, var(--primary));
  border-radius: var(--radius-xs);
  background: #f0f3ff;
  color: #43547e;
  font-size: var(--text-xs);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-date {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.agenda-date:last-child { border-bottom: 0; }

.agenda-day {
  width: 35px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.agenda-copy {
  min-width: 0;
  flex: 1;
  padding: 0;
  text-align: left;
}

.agenda-copy strong,
.agenda-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-copy strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.agenda-copy span { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }

/* Activity and settings */
.timeline {
  position: relative;
  max-width: 880px;
}

.timeline::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 16px;
  width: 1px;
  background: #dfe3eb;
  content: "";
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 33px minmax(0, 1fr);
  gap: 13px;
  padding-bottom: 17px;
}

.timeline-icon {
  z-index: 1;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 4px solid var(--bg);
  border-radius: 50%;
  background: #e4e9f8;
  color: var(--primary);
}

.timeline-content {
  padding: 12px 14px;
}

.timeline-content p { margin: 0; color: #465168; font-size: var(--text-xs); }
.timeline-content time { display: block; margin-top: 5px; color: var(--text-muted); font-size: var(--text-xs); }

.settings-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.settings-menu {
  padding: 7px;
}

.settings-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--text-xs);
  text-align: left;
}

.settings-menu button:hover { background: var(--surface-soft); color: var(--text); }
.settings-menu button.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }

.settings-section {
  padding: 20px;
}

.settings-section + .settings-section { border-top: 1px solid var(--border); }
.settings-section h3 { margin: 0; font-size: var(--text-base); }
.settings-section > p { margin: 5px 0 17px; color: var(--text-muted); font-size: var(--text-xs); }

.backup-panel {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.backup-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
}

/* Popover and modal */
.popover {
  position: fixed;
  z-index: 80;
  top: 59px;
  right: 27px;
  width: min(350px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: pop-in 130ms ease-out;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.985); }
}

.popover-head {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
}

.popover-head strong { font-size: var(--text-sm); }
.popover-body { max-height: min(470px, 70vh); overflow-y: auto; }
.popover-foot { padding: 9px; border-top: 1px solid var(--border); }

.modal-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow-y: auto;
  background: rgba(18, 26, 45, 0.54);
  backdrop-filter: blur(3px);
  animation: fade-in 130ms ease-out;
}

@keyframes fade-in { from { opacity: 0; } }

/* SF-031 2차: 모달 폭은 세 단뿐이다.
   값을 규칙마다 따로 적어 두면 다음 사람이 네 번째를 만든다. */
.modal {
  width: min(var(--modal-normal), 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modal-in 160ms ease-out;
}

.modal--wide { width: min(var(--modal-wide), 100%); }
.modal--narrow { width: min(var(--modal-small), 100%); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
}

.modal-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* 부제목이 있든 없든 머리 높이가 같아야 한다. 닫기 버튼(32px)과 제목 한 줄이
   * 들어가는 높이를 하한으로 둔다 - 모달을 연달아 열 때 머리가 들썩이지 않는다. */
  min-height: 60px;
  padding: var(--space-5) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.modal.is-dragging { animation: none; }
.modal.is-dragging .modal-head { cursor: grabbing; }
.modal-drag-grip {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 26px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: #cbd1dc;
  opacity: .75;
  pointer-events: none;
}

.modal-title { min-width: 0; display: flex; align-items: center; gap: 9px; flex: 1; }
.modal-title-copy { min-width: 0; }
.modal-title h2 { margin: 0; font-size: var(--text-md); font-weight: 700; letter-spacing: -0.02em; }
.modal-title p { margin: 3px 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.modal-head .icon-button { width: var(--control-height-sm); height: var(--control-height-sm); margin-top: -4px; }

.modal-body {
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

/* SF-041: 창 바닥의 왼쪽 자리. 비밀번호 재설정처럼 "저장" 과 성격이 다른
 * 동작을 반대편에 둔다 - [취소] 옆에 붙이면 실수로 누른다. */
.modal-foot-spacer { flex: 1; }

.modal-note {
  margin-bottom: 15px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: #4f6094;
  font-size: var(--text-xs);
}

/* SF-031 2차: 긴 폼은 성격별로 묶는다.
   field 스무 개를 한 덩어리로 두면 어디까지가 "기본 정보" 이고 어디부터가
   "금액" 인지 사람이 매번 라벨을 읽어 가늠해야 한다. */
.form-section + .form-section { margin-top: var(--space-6); }
.form-section > h3 {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.detail-item dt { margin-bottom: 3px; color: var(--text-muted); font-size: var(--text-xs); }
.detail-item dd { margin: 0; color: #374157; font-size: var(--text-sm); font-weight: 600; }

/* Tooltip - SF-032
   ---------------------------------------------------------------------
   그림만 있는 단추는 aria-label 로 이름을 갖고 있지만, 눈으로 보는 사람에게는
   그 이름이 보이지 않는다. 작고 빠른 말풍선 하나로 그것을 보여 준다.

   모든 단추에 붙이지 않는다 - 글자가 함께 있는 단추에는 군더더기다.
   붙일 곳에 data-tooltip 을 적는다. 자바스크립트를 쓰지 않는다. */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 400;
  top: calc(100% + 6px);
  left: 50%;
  padding: 5px var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--text);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -2px);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
  /* 기다리게 하지 않는다. 다만 스쳐 지나갈 때 뜨지는 않게 조금 늦춘다. */
  transition-delay: 240ms;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* 화면 오른쪽 끝에 붙은 것은 말풍선이 잘린다. 그쪽은 오른쪽에 맞춘다. */
[data-tooltip][data-tooltip-align="end"]::after { left: auto; right: 0; transform: translate(0, -2px); }
[data-tooltip][data-tooltip-align="end"]:hover::after,
[data-tooltip][data-tooltip-align="end"]:focus-visible::after { transform: translate(0, 0); }

.toast-region {
  position: fixed;
  z-index: 300;
  right: 20px;
  bottom: 20px;
  width: min(340px, calc(100vw - 30px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  pointer-events: none;
}

/* SF-031 2차: 알림은 중립 표면 + 상태 악센트다.
   어두운 색 덩어리가 본문 위에 떠 있으면 그 자체가 경고처럼 읽힌다 -
   "저장했습니다" 같은 평범한 말에도 사람이 멈칫한다. */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: toast-in 180ms ease-out;
}

.toast--success { border-left-color: var(--success); }
.toast--success > .icon { color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--error > .icon { color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--warning > .icon { color: var(--warning); }
.toast--info { border-left-color: var(--info); }
.toast--info > .icon { color: var(--info); }
.toast button { color: var(--text-muted); }
.toast span { flex: 1; min-width: 0; }

.toast-close {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: none;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  place-items: center;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.toast-close:hover { background: var(--surface-strong); color: var(--text); }
.toast-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.toast-close .icon { width: var(--icon-xs); height: var(--icon-xs); }

/* 정상 상태 토스트는 스스로 사라진다. 사라질 때 튀지 않게 한 번 접어 준다. */
.toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--motion-normal) var(--ease-standard), transform 160ms ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

.sidebar-scrim {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: none;
  background: rgba(20, 28, 44, 0.45);
}

/* Responsive */
@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) 270px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .auth-page { grid-template-columns: minmax(300px, 0.8fr) minmax(420px, 1.2fr); }
  .auth-visual { padding-inline: 36px; }
  .auth-proof { grid-template-columns: 1fr; max-width: 240px; }
  .auth-proof-item:nth-child(n + 3) { display: none; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim.is-open { display: block; }
  .app-main { margin-left: 0; }
  .mobile-menu { display: grid; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid > .card { grid-column: 1; }
  .collab-layout { grid-template-columns: minmax(0, 1fr); }
  .collab-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .side-panel-card + .side-panel-card { margin-top: 0; }
  .calendar-shell { grid-template-columns: minmax(0, 1fr); }
  .calendar-agenda { display: none; }
}

@media (max-width: 760px) {
  :root { --topbar-height: 60px; }
  .auth-page { display: block; background: #f6f7fb; }
  .auth-visual { min-height: 230px; padding: 28px 24px; }
  .auth-message { margin-top: 50px; }
  .auth-message h1 { max-width: 390px; font-size: var(--text-2xl); }
  .auth-message p { display: none; }
  .auth-proof { display: none; }
  .auth-panel { min-height: auto; padding: 35px 20px 48px; }
  .auth-form-wrap { padding: 25px 21px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
  .topbar { gap: 8px; padding-inline: 14px; }
  .global-search { width: auto; flex: 1; }
  .search-shortcut { display: none; }
  .topbar .button--primary { width: 38px; padding: 0; }
  .topbar .button--primary span { display: none; }
  .content { padding: 21px 14px 42px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-start; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: var(--text-xl); }
  .project-grid { grid-template-columns: 1fr; }
  .document-workspace { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-menu { display: flex; overflow-x: auto; }
  .settings-menu button { width: auto; flex: 0 0 auto; white-space: nowrap; }
  .calendar-day { min-height: 75px; padding: 4px; }
  .calendar-event { padding: 3px; font-size: 0; }
  .calendar-event::after { display: block; width: 6px; height: 6px; margin: auto; border-radius: 50%; background: var(--event-color, var(--primary)); content: ""; }
  .field-row,
  .detail-grid { grid-template-columns: 1fr; }
  .modal-overlay { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal--wide,
  .modal--narrow { width: 100%; }
  .popover { top: 55px; right: 12px; }
  .collab-side { grid-template-columns: 1fr; }
  .backup-panel { align-items: flex-start; flex-wrap: wrap; }
  .backup-panel .button { width: 100%; }
}

@media (max-width: 460px) {
  .global-search input { padding-right: 10px; }
  .topbar-actions { gap: 2px; }
  .realtime-status { width: 8px; min-height: 8px; padding: 0; overflow: hidden; border: 0; background: transparent; color: transparent; }
  .realtime-status::before { flex: 0 0 auto; }
  .topbar-actions .icon-button:first-of-type { display: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card:nth-child(n + 4) { display: none; }
  .page-actions .segmented { order: 2; }
  .toolbar .filter-select { width: calc(50% - 5px); min-width: 0; }
  .toolbar-search { width: 100%; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-action { min-height: 56px; flex-direction: row; align-items: center; }
  .calendar-toolbar h2 { min-width: 112px; font-size: var(--text-sm); }
  .calendar-day { min-height: 62px; }
  .sidebar { width: min(86vw, 294px); }
}

.collab-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}

.collab-overview > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.collab-overview strong { font-size: var(--text-lg); }
.collab-overview span { color: var(--text-muted); font-size: var(--text-xs); }
.collab-overview .has-alert strong { color: var(--red); }

.work-agenda {
  margin-bottom: 13px;
  overflow: visible;
}

.work-agenda.is-completed { border-color: #dfe7e3; }

.agenda-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}

.agenda-author > div strong,
.agenda-author > div time { display: block; }
.agenda-author > div strong { font-size: var(--text-sm); }
.agenda-author > div time { margin-top: 1px; color: var(--text-muted); font-size: var(--text-xs); }

.agenda-project {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  padding: 5px 8px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-main { padding: 22px 28px 18px; }

.agenda-title-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.agenda-title-row > button:first-child {
  min-width: 0;
  flex: 1;
  padding: 0;
  background: transparent;
  text-align: left;
}

.agenda-title-row h2 {
  margin: 0;
  color: #222a38;
  font-size: var(--text-xl);
  letter-spacing: -0.035em;
}

.agenda-title-row > button:first-child:hover h2 { color: var(--primary); }

.agenda-fields {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px minmax(0, 1fr);
  gap: 13px 18px;
  align-items: center;
  margin-top: 22px;
}

.agenda-fields > span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.agenda-fields > div { color: #30394d; font-size: var(--text-xs); }

.participant-chips {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}

.participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 2px 7px 2px 3px;
  border: 1px solid #e1e5ec;
  border-radius: var(--radius-sm);
  background: #f5f6f8;
  color: #30394d;
  font-size: var(--text-xs);
  font-weight: 600;
}

.participant-more,
.task-unassigned {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.agenda-progress,
.detail-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agenda-progress > span,
.detail-progress > span {
  display: block;
  width: min(150px, 75%);
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: #edf0f4;
}

.agenda-progress i,
.detail-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.agenda-progress strong,
.detail-progress strong { font-size: var(--text-xs); }

.agenda-description,
.task-detail-description {
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: #3f485b;
  font-size: var(--text-xs);
  line-height: 1.75;
  white-space: pre-line;
}

.agenda-attachments { display: grid; gap: 7px; margin-top: 12px; }

.agenda-subtasks {
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}

.agenda-section-head,
.task-detail-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.agenda-section-head > div,
.task-detail-section > header > div { display: flex; align-items: center; gap: 7px; }
.agenda-section-head strong,
.task-detail-section h3 { margin: 0; font-size: var(--text-sm); }
.agenda-section-head span,
.task-detail-section > header span { color: var(--text-muted); font-size: var(--text-xs); }

.agenda-empty-subtask {
  width: 100%;
  padding: 14px;
  border: 1px dashed #d9dee8;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.agenda-empty-subtask:hover { border-color: #aebbe2; background: #f5f7ff; color: var(--primary); }

.task-tree,
.task-tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.task-tree-children { position: relative; }
.task-tree-children::before {
  position: absolute;
  top: 0;
  bottom: 7px;
  left: 20px;
  width: 1px;
  background: #dfe4ec;
  content: "";
}

.task-tree-row {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(180px, 1fr) 42px 105px minmax(70px, auto) minmax(110px, auto);
  gap: 8px;
  align-items: center;
  min-height: 47px;
  padding: 6px 8px 6px calc(8px + var(--tree-depth, 0) * 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.task-tree-node + .task-tree-node > .task-tree-row,
.task-tree-children > .task-tree-node > .task-tree-row { margin-top: 6px; }
.task-tree-row:hover { border-color: #c9d1df; }
.task-tree-row.is-completed { background: var(--surface-soft); }
.task-tree-row.is-completed .task-tree-title strong { color: #6b7485; }

.task-tree-toggle,
.task-tree-leaf {
  position: relative;
  z-index: 1;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xs);
  background: #f3f5f8;
  color: var(--text-muted);
}

.task-tree-toggle .icon { transition: transform var(--motion-fast) var(--ease-standard); }
.task-tree-toggle.is-expanded .icon { transform: rotate(90deg); }
.task-tree-leaf::after { width: 5px; height: 5px; border-radius: 50%; background: #a9b1bf; content: ""; }

.task-tree-title {
  min-width: 0;
  padding: 3px;
  background: transparent;
  text-align: left;
}

.task-tree-title strong,
.task-tree-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-tree-title strong { color: #2a3242; font-size: var(--text-xs); }
.task-tree-title span { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.task-tree-title:hover strong { color: var(--primary); }

.task-tree-comments,
.task-tree-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.task-tree-date.is-overdue { color: var(--red); font-weight: 600; }

.task-status-control { position: relative; display: inline-flex; justify-self: start; }
.task-status-control.is-open { z-index: 30; }

.task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 5px 9px;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.task-status-pill.is-compact { min-height: 25px; padding: 4px 7px; font-size: var(--text-xs); }
.task-status-pill .icon { width: var(--icon-xs); height: var(--icon-xs); transform: rotate(90deg); }
.task-status-pill:hover { filter: brightness(0.97); }
.task-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }

.task-status--sky { background: #dff3fb; color: #0877b7; }
.task-status--blue { background: #dceaff; color: #215fbd; }
.task-status--green { background: #dcefc9; color: #18712e; }
.task-status--amber { background: #faecbb; color: #95680b; }
.task-status--violet { background: #dedaf6; color: #5542b0; }
.task-status--gray { background: #e4e5e7; color: #62666d; }
.task-status--red { background: #ffd9dc; color: #a31e2b; }

.task-status-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  width: 188px;
  padding: 7px;
  border: 1px solid #dce1e9;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(25, 32, 48, 0.18);
}

.task-tree-row .task-status-menu { right: 0; left: auto; }

/* 좁은 화면에서는 오른쪽에 붙인다. 왼쪽 정렬이면 목록 오른쪽 열에서 열릴 때
   메뉴가 화면 밖으로 잘려 항목을 고를 수 없다. */
@media (max-width: 700px) {
  .task-status-menu { right: 0; left: auto; width: min(188px, calc(100vw - 32px)); }
}

/* 지금 상태 · 안내 · 사유 필요 표시. 메뉴는 서버가 준 목록만 그린다. */
.task-status-current { padding: 4px 7px 7px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }
.task-status-current strong { color: #3f485b; }
.task-status-empty { padding: 10px 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; text-align: left; }
.task-status-empty.is-error { color: #a31e2b; }
.task-status-hint { margin-left: auto; padding: 1px 5px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.65); font-size: var(--text-xs); font-weight: 700; }
.task-status-group + .task-status-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.task-status-group > span { display: block; padding: 3px 7px 5px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.task-status-option { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 31px; padding: 6px 8px; border-radius: var(--radius-xs); background: transparent; color: #3f485b; font-size: var(--text-xs); text-align: left; }
.task-status-option:hover { background: #f4f6f9; }
.task-status-option .task-status-dot { color: inherit; }
.task-status-option .icon { margin-left: auto; }
.task-status-option.is-current { font-weight: 700; }
.task-status-option + .task-status-option { margin-top: 3px; }
.task-status-option.task-status--sky { background: #dff3fb; color: #0877b7; }
.task-status-option.task-status--blue { background: #dceaff; color: #215fbd; }
.task-status-option.task-status--green { background: #dcefc9; color: #18712e; }
.task-status-option.task-status--amber { background: #faecbb; color: #95680b; }
.task-status-option.task-status--violet { background: #dedaf6; color: #5542b0; }
.task-status-option.task-status--gray { background: #e4e5e7; color: #62666d; }
.task-status-option.task-status--red { background: #ffd9dc; color: #a31e2b; }

/* 알 수 없는 상태. 색으로 뜻을 주장하지 않고 중립으로 둔다.
 * (상태 Core: 모르는 값을 임의로 완료·보류로 칠하지 않는다) */
.task-status--neutral,
.task-status-option.task-status--neutral {
  background: #eceef1;
  color: #4a515d;
  box-shadow: inset 0 0 0 1px #c6cbd4;
}

/* 대시보드 '내 업무' 의 상태 표기. 색만으로 구분하지 않고 항상 문구가 함께 있다. */
.erone-task-list .erone-task-status {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.task-status-option:hover { filter: brightness(0.97); }

.agenda-footer { border-top: 1px solid var(--border); background: var(--surface-soft); }
.agenda-comment-summary { padding: 6px 18px; }
.agenda-comment-summary > p { margin: 9px 0; color: var(--text-muted); font-size: var(--text-xs); }
.agenda-comment { display: flex; gap: 9px; padding: 10px 0; }
.agenda-comment + .agenda-comment { border-top: 1px solid var(--border); }
.agenda-comment > div { min-width: 0; flex: 1; }
.agenda-comment p { display: flex; align-items: baseline; gap: 7px; margin: 0 0 3px; }
.agenda-comment strong { font-size: var(--text-xs); }
.agenda-comment time { color: var(--text-muted); font-size: var(--text-xs); }
.agenda-comment > div > div { color: #4b5568; font-size: var(--text-xs); white-space: pre-line; }
.agenda-footer-actions { display: flex; justify-content: space-between; padding: 9px 18px; border-top: 1px solid var(--border); }
.agenda-footer-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-xs); }
.agenda-footer-actions button:hover { background: #f0f2f6; color: var(--text); }

.task-attachment {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.task-attachment-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-sm); background: #e7eefc; color: #3157a6; }
.task-attachment > a:not(.icon-button) { min-width: 0; flex: 1; }
.task-attachment strong,
.task-attachment span { display: block; }
.task-attachment strong { overflow: hidden; color: #30394d; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.task-attachment a > span { color: var(--text-muted); font-size: var(--text-xs); }

.standalone-posts { margin-top: 24px; }
.standalone-posts > h2 { margin: 0 0 10px; color: var(--text-soft); font-size: var(--text-sm); }

.collab-task-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 11px;
}
.collab-task-toolbar .toolbar-search { flex: 1; }

.collab-tree-card { overflow: visible; }
.collab-tree-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.collab-tree-head > div { flex: 1; }
.collab-tree-head h2,
.collab-tree-head p { margin: 0; }
.collab-tree-head h2 { font-size: var(--text-base); }
.collab-tree-head p { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.collab-tree-head > span { color: var(--text-muted); font-size: var(--text-xs); }
.task-tree--workspace { padding: 11px; }

.collab-files { overflow: hidden; }
.collab-file-head,
.collab-file-row { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(180px, 1fr) 110px 80px; gap: 12px; align-items: center; }
.collab-file-head { padding: 10px 15px; border-bottom: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.collab-file-row { padding: 10px 15px; border-bottom: 1px solid var(--border); }
.collab-file-row:last-child { border-bottom: 0; }
.collab-file-row > button { overflow: hidden; background: transparent; color: var(--primary); font-size: var(--text-xs); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.collab-file-row > time,
.collab-file-row > span { color: var(--text-muted); font-size: var(--text-xs); }

.mini-task-open { min-width: 0; padding: 0; background: transparent; text-align: left; }
.mini-task-open strong, .mini-task-open small { display: block; }

.mini-task-open { flex: 1; }

.modal-overlay--drawer {
  justify-content: flex-end;
  justify-items: end;
  align-items: stretch;
  padding: 0;
}

.modal--drawer {
  width: min(740px, 100vw);
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  animation: drawer-in 170ms ease-out;
}

@keyframes drawer-in {
  from { opacity: 0.75; transform: translateX(18px); }
}

.modal--drawer .modal-head { min-height: 44px; align-items: center; padding: var(--space-3) var(--space-5); }
.modal--drawer .modal-title h2 { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.modal--drawer .modal-title p { display: none; }
.modal--drawer .modal-head .icon-button { margin-top: 0; }
.drawer-context-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-xs); background: #7550d5; color: #fff; }
.modal--drawer .modal-body { padding: 0; }

/* SF-049: 머리줄이 제목이 아니라 경로("프로젝트 › 업무")인 창. 제목은 본문
   첫 줄에 크게 한 번 나오므로 여기서는 작게 깐다. 본문 칸들이 제 안쪽
   여백을 가지고 있어 modal-body 의 여백은 없앤다 - 두 번 주면 두 배가 된다. */
.modal--crumb .modal-head { min-height: 44px; align-items: center; padding: var(--space-3) var(--space-5); }
.modal--crumb .modal-title h2 { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.modal--crumb .modal-title p { display: none; }
.modal--crumb .modal-head .icon-button { margin-top: 0; }
.modal--crumb .modal-body { padding: 0; }

.task-detail-summary { padding: var(--space-6) var(--space-7) var(--space-7); border-bottom: 1px solid var(--border); }
.task-detail-author { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.task-detail-author strong,
.task-detail-author time { display: block; }
.task-detail-author strong { color: #2f3542; font-size: var(--text-sm); }
.task-detail-author time { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.task-detail-title-row { min-height: 45px; display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.task-detail-title-row h2 { min-width: 0; flex: 1; margin: 0; color: #272c36; font-size: var(--text-xl); letter-spacing: -.02em; }
.task-detail-fields { display: grid; grid-template-columns: 1fr; gap: 0; margin: var(--space-4) 0 0; }
.task-detail-fields > div { min-width: 0; display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 31px; padding: var(--space-1) 0; }
.task-detail-fields dt { margin: 0; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.task-detail-fields dd { margin: 0; color: #30394d; font-size: var(--text-sm); }
.task-detail-status-value { min-width: 0; display: flex; align-items: center; gap: 8px; }
.task-detail-status-value .task-status-pill { min-height: 30px; font-size: var(--text-xs); }
.task-detail .participant-chip { min-height: 30px; font-size: var(--text-xs); }
.task-detail-empty-copy { margin: var(--space-5) 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.task-detail-date { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.task-detail-date.is-overdue { color: var(--danger); font-weight: 700; }
/* 비어 있는 것과 넣을 수 없는 것을 구분한다. 넣을 수 있으면 넣을 자리처럼
   보이고, 넣을 수 없으면 글자로 답한다. */
.task-detail-blank { color: var(--text-muted); font-size: var(--text-xs); }
.task-detail-add-field { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-xs); }
.task-detail-add-field:hover { border-color: var(--primary-border); color: var(--primary); }
.task-detail-add-field .icon { width: var(--icon-xs); height: var(--icon-xs); }
.task-detail-extra { margin-top: var(--space-3); }
.task-detail-extra-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.task-detail-extra-toggle:hover { color: var(--primary); }
.task-detail-extra-toggle .icon { width: var(--icon-xs); height: var(--icon-xs); transition: transform var(--motion-fast) var(--ease-standard); }
.task-detail-extra-toggle.is-open .icon { transform: rotate(180deg); }
/* SF-085: 이력과 댓글이 한 줄기다.
 *
 * 상태 줄은 댓글과 "같은 자리" 에 서야 한 줄기로 읽힌다 - 아바타 열도,
 * 머리줄(이름 · 시각)도 댓글과 똑같이 둔다. 다른 것은 본문 자리에 글 대신
 * 상태 뱃지 두 개가 오는 것뿐이다. */
.task-timeline-event { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; }
.task-timeline-event + .task-timeline-event,
.task-timeline-event + .task-timeline-comment,
.task-timeline-comment + .task-timeline-event { border-top: 1px solid var(--border); }
.task-timeline-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0 0; }
.task-timeline-status > span[aria-hidden] { color: var(--text-muted); font-size: var(--text-xs); }
.task-timeline-status-text { color: var(--text-muted); font-size: var(--text-xs); }

/* 토글. 지금 무엇을 가려 두었는지가 숫자로 보여야 한다 - "댓글 0" 이면
 * 눌러 보지 않고도 넘어간다. */
.task-stream-tabs { display: inline-flex; margin-bottom: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.task-stream-tab { padding: 5px 12px; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.task-stream-tab + .task-stream-tab { border-left: 1px solid var(--border); }
.task-stream-tab b { font-weight: 700; }
.task-stream-tab:hover { background: var(--surface-soft); color: var(--text-soft); }
.task-stream-tab.is-active { background: var(--primary); color: #fff; }
.task-stream-tab.is-active:hover { background: var(--primary); color: #fff; }
.task-stream-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.task-status-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }

.task-detail-section { padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border); }
.task-detail-section:last-child { border-bottom: 0; }
.task-tree--detail .task-tree-row { grid-template-columns: 25px minmax(160px, 1fr) 38px 92px minmax(54px, auto) minmax(105px, auto); }
.task-detail-files { display: grid; gap: var(--space-3); }
.task-detail-files > p { margin: 0; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); text-align: center; }
.task-attachment-section > header { align-items: center; }
.task-upload-button { position: relative; overflow: hidden; cursor: pointer; }
.task-upload-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }

.task-status-history > div:not(:first-child) { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; }
.task-history-dot { width: 7px; height: 7px; border-radius: 50%; background: #a8b1c1; }
.task-status-history p { margin: 0; color: var(--text-soft); font-size: var(--text-xs); }
.task-status-history time { color: var(--text-muted); font-size: var(--text-xs); }

.task-comments-section { padding-bottom: 0; }
.task-comment-timeline { padding-bottom: 16px; }
.task-timeline-comment { display: flex; align-items: flex-start; gap: 10px; padding: 13px 0; }
.task-timeline-comment + .task-timeline-comment { border-top: 1px solid var(--border); }
.task-timeline-copy { min-width: 0; flex: 1; }
.task-timeline-copy > header { display: flex; align-items: baseline; gap: 7px; }
.task-timeline-copy > header strong { font-size: var(--text-xs); }
.task-timeline-copy > header time,
.task-timeline-copy > header span { color: var(--text-muted); font-size: var(--text-xs); }
.task-comment-body { margin-top: 5px; color: #424c60; font-size: var(--text-xs); line-height: 1.65; white-space: pre-line; }
.task-comment-files { display: grid; gap: 6px; margin-top: 9px; }
.task-timeline-comment.is-deleted .task-comment-body { color: var(--text-muted); font-style: italic; }
.task-reply-button { margin-top: 6px; padding: 3px 0; background: transparent; color: var(--primary); font-size: var(--text-xs); font-weight: 700; }
.task-replies { margin-top: 9px; padding-left: 16px; border-left: 2px solid #e8ebf1; }
.task-replies .task-timeline-comment { padding: 9px 0; }
.task-comments-empty { padding: 20px; border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); text-align: center; }

.task-inline-composer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  /* N2: 작성줄은 자기를 담은 구역의 좌우 여백을 **되돌려** 양끝까지 붙는다.
   * 그래서 이 음수 여백은 그 구역의 padding 과 같은 값이어야 한다.
   *
   * -26px 이 박혀 있었다. 담는 구역(.task-detail-section)의 좌우 padding 은
   * var(--space-7) = 24px 이다. 2px 이 남아 좌우로 각각 1px 씩 삐져나갔고,
   * .modal-body 는 overflow-y: auto 라 CSS 가 overflow-x 도 auto 로 올린다 -
   * 2px 때문에 업무 상세 창 아래에 가로 스크롤바가 생겼다(실측 2px).
   *
   * 숫자를 다시 적지 않고 같은 토큰을 부른다. 구역 padding 이 바뀌면 여기도
   * 함께 따라간다 - 그러지 않으면 같은 어긋남이 다시 생긴다. 아래 좁은 화면
   * 규칙(.task-inline-composer margin-inline)과 패널 쪽
   * (.erone-panel-composer)도 각자 담는 구역에 맞춰 둔 같은 짝이다. */
  margin: 0 calc(var(--space-7) * -1);
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -6px 18px rgba(26, 33, 49, 0.05);
}
/* SF-036: 42px 이었다. 38 도 32 도 아닌 한 번만 쓰이는 값이라
   같은 줄의 「파일」과 층이 졌다. */
.task-inline-composer .textarea { min-height: var(--control-height); max-height: 120px; flex: 1; resize: vertical; }
.task-inline-composer .button { min-height: var(--control-height); }
.task-comment-compose-body { min-width: 0; flex: 1; }
.task-comment-file { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 5px; border-radius: var(--radius-xs); color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.task-comment-file:hover { background: #f1f3f7; color: var(--text); }
.task-comment-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.composer { width: min(850px, calc(100% - 36px)); margin-inline: auto; }
.flow-unified-feed { width: min(850px, calc(100% - 36px)); display: grid; gap: 14px; margin: 14px auto 0; }
.flow-unified-feed > .work-agenda,
.flow-unified-feed > .post-card { margin: 0; }
.flow-feed-post.is-pinned { border-color: #d8c8ff; box-shadow: inset 3px 0 #7952d6; }
.post-open { display: block; width: 100%; padding: 0; background: transparent; text-align: left; }
.post-open h2,
.post-detail-main h2 { margin: 18px 0 8px; color: #252b3a; font-size: var(--text-lg); line-height: 1.35; }
.post-open .post-content { pointer-events: none; }
.post-pinned-label { display: inline-flex !important; align-items: center; gap: 4px; padding: 4px 7px; border-radius: var(--radius-xs); background: #f1ebff; color: #6d43c4 !important; font-size: var(--text-xs) !important; font-weight: 700; }
.post-attachments,
.post-editor-files { display: grid; gap: 7px; margin-top: 12px; }
.post-comment-preview { margin-top: 4px; padding: 0 2px; border-top: 1px solid var(--border); }
.post-comment-preview .task-timeline-comment { padding: 11px 0; }
.previous-comments { margin-top: 10px; padding: 4px 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.previous-comments:hover { color: var(--primary); }
.post-detail-main { padding: 22px 26px; border-bottom: 1px solid var(--border); }
.post-detail-main .post-content { margin: 16px 0; min-height: 70px; font-size: var(--text-sm); }
.post-upload-action { position: relative; overflow: hidden; cursor: pointer; }
.post-upload-action input,
.post-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.post-pin-option,
.post-file-picker { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.post-pin-option:has(input:checked) { border-color: #b7a2e9; background: #f5f0ff; color: #6540b8; }
.post-file-picker { position: relative; margin-left: 6px; }

.task-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 7px; }

/* SF-052: 이모지 반응. 달린 것만 알약으로 보이고, ＋ 로 고른다.
   담은 자리(.task-comment-actions button / .post-actions)가 button 을
   통째로 물들이고 있어서, 선택자를 한 단 더 들어가게 적는다. */
.erone-reactions { position: relative; display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.erone-reactions .erone-reaction {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-soft);
  font-size: var(--text-xs); line-height: 1.2;
}
.erone-reactions .erone-reaction b { font-weight: 700; font-variant-numeric: tabular-nums; }
.erone-reactions .erone-reaction:hover { border-color: var(--border-strong); }
/* 내가 누른 것. 숫자만 보고는 내가 들어 있는지 알 수 없다. */
.erone-reactions .erone-reaction.is-mine {
  border-color: var(--primary-border); background: var(--primary-soft); color: var(--primary-dark);
}
.erone-reactions .erone-reaction-pick {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-height-sm); height: var(--control-height-sm);
  padding: 0; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted);
}
.erone-reactions .erone-reaction-pick:hover { border-color: var(--primary-border); color: var(--primary); }
/* SF-065: 글쓰기. 바는 **트리거**이고, 누르면 가운데 큰 팝업이 뜬다.
   흐름 안에 입력칸을 박아 두면 긴 글을 쓸 자리가 없고, 업무·일정처럼 칸이
   여럿인 것은 아예 들어가지 않는다. */
.erone-composer-bar {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.erone-composer-trigger {
  display: block; width: 100%; padding: var(--space-4);
  background: transparent; color: var(--text-muted); font-size: var(--text-sm); text-align: left;
}
.erone-composer-trigger:hover { color: var(--text-soft); }

/* SF-072: 파일철 라벨.
   "기능 키들은 걍 덩그러니 텍스트만 두지말고, 화일철 라벨처럼 생긴
   레이아웃에서 고를때마다 그 화일철 라벨이 강조되는 그런 느낌" 이라는
   말에서 나왔다.

   밑줄 하나로는 어디가 켜졌는지 멀리서 안 보였다. 고른 라벨만 흰 종이가
   되어 아래 내용과 **이어지고**, 위쪽에 색 선이 하나 더 붙는다. 바탕을
   한 단 어둡게 두는 것이 요점이다 - 그래야 라벨이 꽂혀 있는 것으로 읽힌다.

   한 곳에 두는 이유: 같은 모양을 쓰는 줄이 세 군데다(흐름 바, 글쓰기 팝업,
   영업기회 큰 창). 따로 적으면 곧 서로 달라진다. */
.erone-filetabs {
  display: flex; align-items: flex-end; gap: var(--space-1); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-strong);
}
.erone-filetab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  /* 아래로 1px 내려서 경계선을 덮는다. 고른 라벨이 아래 종이와 이어져 보이는
     것은 이 한 줄이다. */
  margin-bottom: -1px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent; color: var(--text-soft);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.erone-filetab:hover { background: var(--surface-soft); color: var(--text); }
.erone-filetab.is-active { border-color: var(--border); background: var(--surface); color: var(--text); }
.erone-filetab.is-active::after {
  position: absolute; top: -1px; right: -1px; left: -1px; height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--primary); content: "";
}
.erone-filetab.is-soon { color: var(--text-muted); opacity: 0.55; }
.erone-filetab .icon { color: currentColor; }
.erone-filetab em { font-style: normal; color: var(--text-muted); font-size: var(--text-xs); }
.erone-filetab.is-active em { color: var(--primary); }

/* 파일철 줄은 창 좌우 끝까지 간다. 폼 안쪽 여백만큼 도로 빼낸다 - 가운데에
   네모 블록으로 떠 있으면 "라벨이 꽂힌 파일철" 이 아니라 그냥 상자다.
   라벨 자체는 본문과 같은 세로선에서 시작한다. */
#composer-form > .erone-filetabs {
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) 0;
  padding-right: var(--space-7); padding-left: var(--space-7);
}

/* 팝업 안쪽 */
/* SF-072: 업무 큰 창과 값이 같은 세로선에서 시작한다.
   재어 보니 12px 어긋나 있었다 - 업무 큰 창은 crumb 라 본문 여백이 0 이고
   안쪽이 24px 을 가지는데, 글쓰기 팝업은 본문 20 + 폼 16 = 36 이었다.
   본문 여백을 0 으로 두고 폼이 같은 24px 을 가진다. */
#composer-form { display: grid; gap: var(--space-5); padding: var(--space-7); }
.modal--flush .modal-body { padding: 0; }
.erone-composer-title {
  width: 100%; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-soft);
  background: transparent; color: var(--text); font-family: inherit; font-size: var(--text-xl); font-weight: 600;
}
.erone-composer-title::placeholder { color: var(--text-muted); font-weight: 500; }
.erone-composer-title:focus-visible { outline: 0; border-bottom-color: var(--primary); }
/* 라벨 열은 업무 상세 창과 같은 자리에서 값이 시작한다. */
.erone-composer-fields { display: grid; gap: var(--space-2); margin: 0; }

/* SF-073: 맥락 없이 들어왔을 때만 나오는 "담을 곳" 줄.

   제목 위에 둔다. 어디에 담길지 모르는 채로 쓰기 시작하면, 다 적고 나서
   되돌아와 고르게 된다. 아래에 선을 하나 그어 "여기까지가 담을 곳" 임을
   읽지 않고 알게 한다. */
.erone-composer-home {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}
.erone-composer-home .select { max-width: 320px; }
.erone-composer-newhome { max-width: 320px; }
.erone-composer-fields .frow {
  display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr);
  gap: var(--space-3); align-items: center; font-size: var(--text-sm);
}
.erone-composer-fields dt { color: var(--text-muted); font-size: var(--text-xs); }
.erone-composer-fields dd { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.erone-composer-fields .select, .erone-composer-fields .input { max-width: 240px; }
/* 상태는 Flow 처럼 **알약**이다. 칸을 꽉 채우면 상자로 보인다 - 목업을
   찍어 보니 270px 짜리 흰 상자였고, 그게 "빽빽하다" 의 절반이었다. */
.erone-composer-fields .erone-picker { min-width: 0; }
.erone-composer-fields .erone-picker-button {
  width: auto; min-height: var(--control-height-sm); padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
}
.erone-composer-fields .erone-picker-button > span:nth-child(2) { flex: none; }
.erone-composer-fields .erone-picker-menu { right: auto; min-width: 180px; }
.erone-composer-dash { color: var(--text-muted); }
.erone-composer-body {
  width: 100%; min-height: 120px; padding: 0;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: var(--text-sm); line-height: 1.8; resize: vertical;
}
.erone-composer-body::placeholder { color: var(--text-muted); }
.erone-composer-body:focus-visible { outline: 0; }

/* 값이 없는 칸은 "담당자 추가" 처럼 **글자**로만 둔다. 상자로 그리면 아직
   아무것도 안 넣었는데 화면이 이미 꽉 찬다 - Flow 와 상자 수를 세어 보니
   1 대 5 였고, 그 차이가 "심플해 보인다" 의 실체였다. */
.erone-add-field { display: inline-flex; align-items: center; gap: var(--space-2); }
.erone-add-field-open {
  padding: 0; background: transparent; color: var(--text-muted);
  font-size: var(--text-sm); transition: color var(--motion-fast), border-color var(--motion-fast);
}
.erone-add-field-open:hover { color: var(--primary); }
/* 날짜는 밑줄 글자, 담당자는 테두리 조각. Flow 가 그렇게 나눠 두었다 -
   사람을 고르는 일이 날짜보다 먼저 눈에 든다. */
.erone-add-field-open--link { text-decoration: underline; text-underline-offset: 3px; }
.erone-add-field-open--chip {
  display: inline-flex; align-items: center; height: var(--control-height-sm);
  padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
}
.erone-add-field-open--chip:hover { border-color: var(--primary-border); }
.erone-composer-more > summary {
  cursor: pointer; padding: var(--space-2) 0;
  color: var(--text-muted); font-size: var(--text-sm); list-style: none;
}
.erone-composer-more > summary::-webkit-details-marker { display: none; }
.erone-composer-more > summary:hover { color: var(--primary); }
.erone-composer-more[open] > summary { margin-bottom: var(--space-3); }

/* SF-067: Flow 와 자리별로 맞춘 나머지.

   창 제목은 하는 일("게시물 작성"), 작은 조각은 어디에 쓰는지다. 둘을
   "영업기회 › 한빛산업" 처럼 한 줄로 이어 붙이면 제목이 길어지고 하는 일이
   안 보인다. */
.modal-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: 240px; padding: 3px var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--text-soft); font-size: var(--text-xs);
  overflow: hidden; white-space: nowrap;
}
.modal-chip .icon { flex: none; color: var(--text-muted); }
/* 말줄임은 **글자를 감싼 칸**에 건다.
   이 이름표는 flex 상자다. flex 상자의 맨 글자는 이름 없는 flex 항목이 되고,
   text-overflow 는 거기에 걸리지 않는다 - 그래서 '...' 없이 글자가 그냥
   잘려 나갔다(실측 329px 를 238px 에 욱여넣고 끝). 사용자 말로
   "프로젝트 이름이 잘려".

   글자를 span 으로 감싸 그 span 에 건다. 전체 이름은 title 로 남긴다. */
.modal-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 할일·투표는 담을 표가 없다. 탭은 Flow 와 같이 다섯을 두되, 아직 안 되는
   것은 흐리게 두고 누르면 말해 준다. 칸만 그려 두면 적고 나서 사라진다. */
.erone-composer-soon {
  margin: 0; padding: var(--space-6) 0;
  color: var(--text-soft); font-size: var(--text-sm); line-height: 1.8;
}

/* 임시저장을 꺼내 왔다고 알려 주는 한 줄. 모르고 지나가면 "내가 안 쓴 글이
   들어 있다" 가 된다. */
.erone-composer-draft {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--surface-soft);
  color: var(--text-soft); font-size: var(--text-xs);
}
.erone-composer-draft button {
  padding: 0; background: transparent; color: var(--text-muted);
  font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px;
}
.erone-composer-draft button:hover { color: var(--primary); }

/* 하위업무. tasks 의 parent_task_id 로 담으므로 Migration 이 없다. */
.erone-composer-sub { display: grid; gap: var(--space-2); }
.erone-composer-sub-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--border-soft);
}
.erone-composer-sub-title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-soft); font-size: var(--text-xs); font-weight: 600;
}
.erone-composer-sub-title .icon { color: var(--text-muted); }
.erone-composer-sub-add {
  padding: 0; background: transparent; color: var(--text-muted); font-size: var(--text-xs);
  transition: color var(--motion-fast);
}
.erone-composer-sub-add:hover { color: var(--primary); }
.erone-composer-sub-list { display: grid; gap: var(--space-2); }
.erone-composer-sub-row { display: flex; align-items: center; gap: var(--space-2); }
.erone-composer-sub-row .input { flex: 1; min-width: 0; }

/* SF-123: 한 줄에 상태·이름·기한·우선순위·담당자.
   이름만 늘어나고 나머지는 제 글자만큼만 차지한다 - 고르개가 늘어나면
   정작 이름 칸이 좁아져서, 적는 동안 글자가 가려진다. */
.erone-composer-sub-row--full { flex-wrap: wrap; }
.erone-composer-sub-row--full > .erone-picker { flex: 0 0 auto; }
.erone-composer-sub-row--full .input[name="subtask"] { flex: 1 1 180px; min-width: 0; }
.erone-subtask-pick-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-height-sm); padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
  font-size: var(--text-xs); white-space: nowrap;
}
.erone-subtask-pick-button .icon { width: var(--icon-xs); height: var(--icon-xs); }
/* 고른 것은 색으로 말한다. 안 고른 것과 같은 회색이면 "비워 둔 것" 과
   "고른 것" 이 똑같이 보인다. */
.erone-subtask-pick-button.is-on { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.erone-subtask-date-menu { display: grid; gap: var(--space-2); padding: var(--space-3); }
.erone-subtask-date-menu .input { width: 100%; }

/* 좁은 폭: 이름이 한 줄을 다 쓰고 알약과 고르개가 아래로 내려온다.
   가로로 밀지 않는다. */
@media (max-width: 680px) {
  .erone-composer-sub-row--full .input[name="subtask"] { flex: 1 1 100%; order: -1; }
}

/* SF-069: 하위업무 카드는 상위 이름을 달고 나온다. 보드에서 상위와 떨어져
   서 있으면 각각 따로 할 일처럼 보인다. */
.erone-task-card-parent {
  display: block; margin-bottom: var(--space-1);
  color: var(--text-muted); font-size: var(--text-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 비어 있는 영업 항목은 접어 둔다. 없는 것을 줄줄이 적는 것은 정보가 아니라
   소음이다 - 큰 창에서 11줄 중 9줄이 "미등록" 이었다. */
.sales-context-block { display: grid; gap: var(--space-3); }
.sales-context-blank > summary {
  cursor: pointer; padding: var(--space-2) 0; list-style: none;
  color: var(--text-muted); font-size: var(--text-xs);
  transition: color var(--motion-fast);
}
.sales-context-blank > summary::-webkit-details-marker { display: none; }
.sales-context-blank > summary:hover { color: var(--primary); }

/* SF-070: 프로젝트 종류.
   모든 일이 프로젝트에 속하게 되면, 목록에서 "이게 영업 건인가 그냥 일인가"
   를 한눈에 갈라 봐야 한다. 색은 네 가지뿐이고, 영업만 눈에 띄게 둔다 -
   KPI 가 세는 것이 그것이기 때문이다. */
/* SF-073: 종류 표시는 상태 뱃지와 **같은 몸**을 쓴다.

   SF-070 에서 종류 뱃지를 따로 만들었다. 그랬더니 카드 머리줄에서 [영업]
   과 [진행중] 이 나란히 섰을 때 다섯 가지가 달랐다 - 높이(지정 없음 vs
   min-height 22px), 안쪽 여백(4px vs 3px), 모서리(999px vs 6px), 테두리
   (있음 vs 없음), 앞의 점(없음 vs 있음). 사진으로 보고서야 알았다.
   탭에서 겪은 것(SF-072)과 같은 일이다 - 같은 자리에 서는 것을 두 모습으로
   만들면 반드시 어긋난다.
   
   그래서 모양은 .badge 가 가지고, 여기서는 **색만** 말한다. 점은
   .badge--plain 이 끈다 - 종류는 상태가 아니라서 진행을 뜻하는 점을
   달면 안 된다.
   
   영업이 아닌 종류(기술지원·계약이행·일반)에는 규칙을 두지 않는다.
   .badge 의 기본 회색을 그대로 쓴다 - KPI 가 세는 것은 영업뿐이고,
   넷 다 색을 달면 영업이 눈에 띄지 않는다. */
/* 영업만 눈에 띄게 둔다 - KPI 가 세는 것이 그것이다.

   바탕색을 칠하지 않고 **글자만** 색을 준다. 바탕을 칠하면 바로 옆
   [진행중](is-active) 과 같은 연보라가 되어 둘이 한 덩어리로 읽힌다.
   색을 칠한 알약은 상태, 글자만 색인 알약은 종류 - 규칙이 하나다. */
.erone-kind--sales { color: var(--primary-dark); font-weight: 700; }
.erone-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-soft); }

/* SF-064: 영업기회 큰 창.
   가운데는 흐름, 오른쪽은 사람과 내 차례. 열었을 때 "나는 무엇을 해야 하나"
   가 스크롤 없이 보이는 자리가 오른쪽이다. */
.erone-deal-window { display: grid; }
.erone-deal-window-head { padding: var(--space-5) var(--space-5) var(--space-3); }
.erone-deal-window-head h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.erone-deal-window-meta { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-deal-window-grid { display: grid; }
@media (min-width: 860px) { .erone-deal-window-grid { grid-template-columns: minmax(0, 1fr) 236px; } }
/* SF-074: 윗단만 한 칸 넓힌다.

   SF-072 에서 탭 줄이 아랫선을 가진 구분선이 됐다. 그 선 바로 16px 아래에
   [활동 기록] 버튼이 붙어 있어 탭에 얹힌 것처럼 보였다. 가운데와 오른쪽을
   **같이** 내린다 - 한쪽만 내리면 "흐름" 과 "담당" 이 다른 높이에서 시작한다. */
.erone-deal-window-grid > main { min-width: 0; padding: var(--space-7) var(--space-5) var(--space-5); }
/* 흐름 묶음은 패널 안에서 쓰라고 만든 것이라 위에 선을 하나 긋는다. 창에서는
   그것이 첫 줄이라, 아무것도 없는 위에 선만 떠 있게 된다. */
.erone-deal-window-grid > main > .erone-panel-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.erone-deal-window-grid > aside { border-left: 1px solid var(--border-soft); padding: var(--space-7) var(--space-5) var(--space-5); }
@media (max-width: 859px) { .erone-deal-window-grid > aside { border-left: 0; border-top: 1px solid var(--border-soft); } }

.erone-deal-rail { display: grid; gap: var(--space-5); align-content: start; }
.erone-rail-head { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; }
.erone-rail-person { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.erone-rail-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); }
.erone-rail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.erone-rail-list button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
  background: var(--surface-soft); color: var(--text); font-size: var(--text-xs); text-align: left;
}
.erone-rail-list button:hover { background: var(--primary-soft); color: var(--primary-dark); }
.erone-rail-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-rail-kind { flex: none; color: var(--text-muted); font-weight: 700; }

/* SF-063: 대시보드 맨 위의 「내 차례」.
   흩어져 있던 내 업무·검토·멘션을 한 띠로 모은다. 강조색 띠를 두르는 이유는
   하나다 - 이 화면에서 **내가 손대야 하는 것**은 여기뿐이고, 나머지는 보는
   것이다. 색이 그 둘을 가른다. */
.erone-turn {
  border: 1px solid var(--primary-border); border-radius: var(--radius);
  background: var(--primary-softer); padding: var(--space-4) var(--space-5);
  display: grid; gap: var(--space-3);
}
.erone-turn-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.erone-turn-head h2 { margin: 0; font-size: var(--text-md); font-weight: 700; }
.erone-turn-count { color: var(--primary-dark); font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.erone-turn-spacer { flex: 1; }
.erone-turn-list { display: grid; gap: var(--space-2); }
.erone-turn-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs); background: var(--surface); font-size: var(--text-sm);
}
.erone-turn-status {
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.erone-turn-title { min-width: 0; padding: 0; background: transparent; text-align: left; }
.erone-turn-title strong { display: block; overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.erone-turn-title small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-turn-title:hover strong { color: var(--primary); }
.erone-turn-when { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.erone-turn-when.is-urgent { color: var(--danger); font-weight: 700; }
.erone-turn-more { padding: var(--space-2); background: transparent; color: var(--primary-dark); font-size: var(--text-xs); font-weight: 600; }
@media (max-width: 640px) {
  .erone-turn-row { grid-template-columns: auto minmax(0, 1fr); }
  .erone-turn-when, .erone-turn-act { grid-column: 2; justify-self: start; }
}

/* 첫날. "없습니다" 를 네 번 말하는 대신 무엇을 하면 되는지를 놓는다. */
.erone-start { border: 1px solid var(--primary-border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.erone-start > header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-soft); background: var(--primary-softer); }
.erone-start > header h2 { margin: 0; font-size: var(--text-md); font-weight: 700; }
.erone-start > header p { margin: var(--space-1) 0 0; color: var(--text-soft); font-size: var(--text-xs); }
.erone-start ol { margin: 0; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 18px); display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.erone-start li b { font-weight: 600; }
.erone-start li span { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-start > footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: var(--text-xs); }

/* SF-062: 폼의 상태 고르기. <select> 의 펼친 목록은 브라우저가 그려서
   CSS 가 닿지 않는다 - 상태마다 있는 색이 사라지고 글자만 남았다.
   직접 그린다. 값은 숨은 input 에 담기므로 폼이 보내는 것은 전과 같다. */
.erone-picker { position: relative; }
.erone-picker-button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: var(--control-height); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: var(--text-sm); text-align: left;
}
.erone-picker-button > span:nth-child(2) { flex: 1; min-width: 0; }
/* 스프라이트의 chevron 은 오른쪽(›)을 가리킨다. 펼치는 단추에 그대로 쓰면
   "옆으로 넘어간다" 로 읽힌다 - 아래로 돌려 둔다. */
.erone-picker-button .icon {
  width: var(--icon-xs); height: var(--icon-xs); color: var(--text-muted);
  transform: rotate(90deg);
}
.erone-picker-button:hover { border-color: var(--primary-border); }
.erone-picker-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.erone-picker-menu {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 60;
  max-height: 288px; overflow-y: auto; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.erone-picker-group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--text-muted); font-size: var(--text-xs); font-weight: 700;
}
.erone-picker-option {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
  background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left;
}
.erone-picker-option:hover { background: var(--surface-soft); }
.erone-picker-option.is-on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.erone-picker-option:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* 점은 상태의 **진한** 색이어야 한다. task-status--톤 은 배경을 옅게 칠하려고
   만든 것이라, 그대로 두면 점까지 옅어져 무슨 색인지 안 보인다. */
.erone-picker .task-status-dot { background: currentColor; flex: none; }

.erone-reaction-menu {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 60;
  min-width: 148px; display: grid; gap: 2px; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.erone-reaction-menu .erone-reaction-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs);
  background: transparent; color: var(--text); font-size: var(--text-xs); text-align: left;
}
.erone-reaction-menu .erone-reaction-option:hover { background: var(--surface-soft); }
.erone-reaction-menu .erone-reaction-option.is-mine { background: var(--primary-soft); color: var(--primary-dark); }
/* SF-046 과 같은 문제를 미리 막는다. 고르는 창이 다음 댓글·다음 글 아래로
   깔리면 반쯤 가려진다. 창이 열린 동안만 그 칸을 위로 올린다. */
.task-timeline-comment:has(.erone-reaction-menu:not([hidden])),
.post-card:has(.erone-reaction-menu:not([hidden])) { position: relative; z-index: 50; }
.task-comment-actions button { padding: 3px 5px; border-radius: var(--radius-xs); background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.task-comment-actions button:hover,
.task-comment-actions button.is-active { background: #f0ebff; color: #6844bd; }
.comment-inline-edit { display: grid; gap: 7px; }
.comment-inline-edit .textarea { min-height: 70px; }
.comment-inline-edit > div { display: flex; justify-content: flex-end; gap: 5px; }
.task-timeline-comment.is-system { padding: 9px 10px; border-radius: var(--radius-sm); background: #f7f8fb; }
.task-timeline-comment.is-system > .avatar { width: 24px; height: 24px; background: #e5e8ef; color: #6f788b; font-size: var(--text-xs); }
.task-timeline-comment.is-system .task-comment-body { color: #70798c; font-size: var(--text-xs); }
.task-replies .task-replies { margin-left: 3px; padding-left: 12px; }

.task-detail-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 11px 26px; border-bottom: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); }
.task-detail-breadcrumb button { padding: 2px 0; background: transparent; color: #5d69a8; }
.task-detail-breadcrumb .icon { width: var(--icon-xs); height: var(--icon-xs); transform: rotate(-90deg); }
.task-detail-breadcrumb strong { color: var(--text); }
.task-number { margin-left: 9px; padding: 4px 7px; border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.task-dependency-list { display: grid; gap: 7px; }
.task-dependency-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 28px; gap: 7px; align-items: center; padding: 8px 9px; border: 1px solid #e7eaf0; border-radius: var(--radius-sm); }
.task-dependency-row > span { color: #6e4dc1; font-size: var(--text-xs); font-weight: 700; }
.task-dependency-row > button:not(.icon-button) { overflow: hidden; padding: 0; background: transparent; color: #313a4d; font-size: var(--text-xs); font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.task-dependency-row small { color: var(--text-muted); font-size: var(--text-xs); }
.task-change-history > summary { cursor: pointer; color: #3d4658; font-size: var(--text-xs); font-weight: 700; list-style: none; }
.task-change-history > summary span { margin-left: 5px; color: var(--text-muted); }
.task-change-history > div { display: grid; grid-template-columns: 86px 104px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); font-size: var(--text-xs); }
.task-change-history > div:first-of-type { margin-top: 10px; }
.task-change-history p { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text-soft); }
.task-change-history time { color: var(--text-muted); }
.notification-copy { min-width: 0; flex: 1; padding: 0; background: transparent; text-align: left; }
.mention-host { position: relative; }
.mention-suggestions { position: absolute; z-index: 120; right: 0; bottom: calc(100% + 4px); left: 0; max-height: 250px; overflow: auto; padding: 5px; border: 1px solid #d8dce5; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 10px 28px rgba(31,36,51,.18); }
/* SF-119: 글쓰기 창에서는 떠 있지 않고 자리를 밀어낸다. 본문 칸이 창
   한가운데라, 띄우면 목록이 창 밖으로 나가 잘린다(사용자 결정). */
.mention-suggestions.is-inline { position: static; margin-top: 6px; max-height: 208px; box-shadow: none; }
.mention-suggestions > button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-xs); background: var(--surface); text-align: left; }
.mention-suggestions > button:hover,
.mention-suggestions > button.is-active { background: #f2edff; }
.mention-suggestions > button > span:last-child { min-width: 0; }
.mention-suggestions strong,
.mention-suggestions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-suggestions strong { color: #30384a; font-size: var(--text-xs); }
.mention-suggestions small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }

.flow-view-toolbar,
.flow-file-toolbar { position: relative; z-index: 26; min-height: 46px; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #e0e3e8; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface); }
/* 기본 chevron 은 오른쪽(다음)을 가리킨다. 돌려야 하는 쪽은 "이전" 이다.
   그동안 next 를 돌리고 prev 를 두어서 두 화살표가 서로 반대를 가리켰다. */
.icon-button.is-back .icon { transform: rotate(180deg); }

.collab-calendar-area, .collab-files-area { padding: 18px; background: #f2f3f6; }
.collab-calendar-area .flow-toolbar-panel { margin: -1px 0 8px; }

.gantt-track-grid { display: grid; grid-template-columns: repeat(var(--gantt-days), minmax(32px, 1fr)); }

.gantt-track-grid { position: relative; min-height: 48px; border-bottom: 1px solid var(--border); background: var(--surface); }
.gantt-drop-day { grid-row: 1; min-width: 0; border-right: 1px solid #f0f2f5; background: transparent; }
.gantt-drop-day.is-today { background: rgba(117, 80, 218, 0.055); }
.gantt-drop-day.is-dragover { background: rgba(117, 80, 218, 0.18); }
.gantt-grid-bar { position: relative; z-index: 3; grid-row: 1; align-self: center; min-width: 14px; height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 2px; padding: 0 9px; overflow: hidden; border-radius: var(--radius-xs); box-shadow: 0 1px 2px rgba(35, 24, 69, 0.2); cursor: grab; color: #253046; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.gantt-grid-bar:active { cursor: grabbing; }
.gantt-grid-bar.is-dragging { opacity: .48; }

/* 취소 업무. 기록은 남기되 지연(빨강)과 헷갈리지 않게 눌러 둔다.
 * 숨기지 않는 이유: 왜 비어 있는 기간인지 설명하는 게 취소 막대다. */
.gantt-grid-bar.is-cancelled { opacity: .42; box-shadow: none; }

.gantt-grid-bar.is-resizing { cursor: ew-resize; opacity: .8; box-shadow: 0 0 0 2px rgba(118,80,218,.25); }

.gantt-grid-bar b { min-width: 14px; height: 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.65); font-size: var(--text-xs); line-height: 14px; text-align: center; }

.flow-month-calendar { overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }
.flow-month-calendar > header { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.flow-month-calendar > header h2,
.flow-month-calendar > header p { margin: 0; }
.flow-month-calendar > header h2 { font-size: var(--text-base); }
.flow-month-calendar > header p { color: var(--text-muted); font-size: var(--text-xs); }
.calendar-view-toggle { display: inline-flex; padding: 2px; border: 1px solid #d9dde5; border-radius: var(--radius-xs); background: var(--surface); }
.calendar-view-toggle button { min-width: 30px; height: var(--control-height-sm); border-radius: var(--radius-xs); background: transparent; color: #727a89; font-size: var(--text-xs); }
.calendar-view-toggle button.is-active { background: #eee8ff; color: #6941c6; font-weight: 700; }
.flow-calendar-weekdays,
.flow-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); min-width: 840px; }
.flow-calendar-weekdays { background: var(--surface-soft); }
.flow-calendar-weekdays span { padding: 8px; border-right: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.flow-calendar-grid { grid-template-rows: repeat(6, minmax(112px, 1fr)); }
.flow-month-calendar.is-week .flow-calendar-grid { grid-template-rows: minmax(420px, 1fr); }
.flow-month-calendar.is-week .flow-calendar-cell { min-height: 420px; }
.flow-calendar-cell { min-width: 0; min-height: 112px; padding: 5px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--surface); }
.flow-calendar-cell.is-outside { background: var(--surface-soft); }
.flow-calendar-cell.is-dragover { background: #eee8ff; box-shadow: inset 0 0 0 2px #8562da; }
.flow-calendar-cell > header { display: flex; align-items: center; justify-content: space-between; min-height: 25px; }
.flow-calendar-cell > header button { width: 23px; height: 23px; border-radius: 50%; background: transparent; color: #596173; font-size: var(--text-xs); }
.flow-calendar-cell.is-today > header button { background: #7650da; color: #fff; font-weight: 700; }
.flow-calendar-cell.is-outside > header button { color: #b5bbc6; }
.flow-calendar-cell > header span { color: var(--text-muted); font-size: var(--text-xs); }
.flow-calendar-event { width: 100%; min-height: 22px; display: flex; align-items: center; gap: 3px; margin-top: 3px; padding: 3px 5px; overflow: hidden; border-radius: var(--radius-xs); color: #293247; text-align: left; cursor: grab; }
.flow-calendar-event.is-dragging { opacity: .45; }
.flow-calendar-event:not(.is-range-start) { border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.flow-calendar-event:not(.is-range-end) { border-top-right-radius: 1px; border-bottom-right-radius: 1px; }
.flow-calendar-event strong { min-width: 0; flex: 1; overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.flow-calendar-event .avatar-stack { transform: scale(.78); transform-origin: right center; }
.calendar-more { width: 100%; margin-top: 3px; padding: 2px 4px; background: transparent; color: #7650da; font-size: var(--text-xs); text-align: left; }
.calendar-day-modal-list { display: grid; gap: 6px; }
.calendar-day-modal-list > button { display: grid; grid-template-columns: auto minmax(0,1fr) 15px; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.calendar-day-modal-list strong,
.calendar-day-modal-list small { display: block; }
.calendar-day-modal-list small { margin-top: 3px; }

.flow-file-toolbar .flow-work-search { width: min(320px, 34vw); }
.flow-file-toolbar > .select { width: 108px; height: var(--control-height-sm); padding-block: 0; font-size: var(--text-xs); }
.flow-file-toolbar .file-upload-target { width: min(270px, 28vw); }

/* SF-124: 「파일 올리기」 가 줄에서 혼자 크게 보이던 것.
   원인은 아이콘이 아니라 **글자가 접힌 것**이었다. 이 단추만 flex 기본값이라
   자리가 모자라면 줄어들었고, 「파일 / 올리기」 로 두 줄이 되면서 줄 높이가
   44px 로 커졌다. 옆의 고르개들은 32px 다. 두 줄짜리 반 높이 글자 옆에 선
   16px 아이콘이 그래서 커 보였다.
   줄지 않게 하고(flex 0 0 auto) 줄바꿈을 막은 뒤, 이 줄의 눈금에 맞춘다. */
.flow-file-toolbar .task-upload-button {
  flex: 0 0 auto;
  min-height: var(--control-height-sm);
  height: var(--control-height-sm);
  padding: 0 11px;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.flow-file-toolbar .task-upload-button .icon { width: var(--icon-xs); height: var(--icon-xs); }
.collab-files-area .collab-files { border-radius: 0 0 var(--radius) var(--radius); }
.collab-file-head,
.collab-file-row { grid-template-columns: minmax(300px, 1.8fr) minmax(180px, 1fr) 95px 105px 72px; }

.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label-row > span,
.field-label-row > output { color: var(--text-muted); font-size: var(--text-xs); }
.task-participant-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.task-participant-option { position: relative; display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.task-participant-option:hover { border-color: #bfc9de; }
.task-participant-option:has(input:checked) { border-color: #91a6df; background: var(--primary-soft); }
.task-participant-option > input { position: absolute; opacity: 0; pointer-events: none; }
.task-participant-option { display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 6px; }
.task-participant-option > label { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.task-participant-option > label > input { position: absolute; opacity: 0; pointer-events: none; }
.task-participant-option > label > span:nth-of-type(2) { min-width: 0; flex: 1; }
.task-participant-option > label > .icon { opacity: 0; color: var(--primary); }
.task-participant-option:has(input:checked) > label > .icon { opacity: 1; }
/* SF-036: 29px 이었다. 같은 모달 안에서 .select 가 29 와 41 두 값이라
   선택 상자 크기가 서로 달랐다. 참여자 줄 안이라 작은 쪽이다. */
.task-participant-option > .select { height: var(--control-height-sm); padding: 0 22px 0 6px; font-size: var(--text-xs); }
.project-member-editor { display: grid; gap: 7px; }
.project-member-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.project-member-row > label { min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.project-member-row > label > input { accent-color: var(--primary); }
.project-member-row > label > span:nth-of-type(2) { min-width: 0; flex: 1; }
.project-member-row strong,
.project-member-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-member-row strong { font-size: var(--text-xs); }
.project-member-row small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.task-comment-readonly { margin: 0 -26px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); text-align: center; }
.task-participant-option > span:nth-of-type(2) { min-width: 0; flex: 1; }
.task-participant-option strong,
.task-participant-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-participant-option strong { font-size: var(--text-xs); }
.task-participant-option small { color: var(--text-muted); font-size: var(--text-xs); }
.task-participant-option > .icon { visibility: hidden; color: var(--primary); }
.task-participant-option:has(input:checked) > .icon { visibility: visible; }
/* margin:0 이 필요하다. 브라우저 기본 스타일이 range 에 좌우 2px 을 주는데,
   width:100% 와 겹쳐 폼 밖으로 2px 씩 비져나온다(실측). */
.task-progress-input { width: 100%; margin: 0; accent-color: var(--primary); }

.sales-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 18px;
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.sales-context > div { min-width: 0; }
.sales-context dt { margin-bottom: 3px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.sales-context dd { margin: 0; overflow: hidden; color: #30394d; font-size: var(--text-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.prospect-grade { display: inline-flex; padding: 3px 6px; border-radius: var(--radius-xs); background: #dcefc9; color: #18712e; font-size: var(--text-xs); }
.sales-context--detail {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 12px;
  padding: 10px 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--surface);
}
.sales-context--detail > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  min-height: 43px;
  padding: 3px 2px;
}
.sales-context--detail dt { margin: 0; font-size: var(--text-xs); }
.sales-context--detail dd { font-size: var(--text-sm); font-weight: 500; }
.task-detail-summary .task-detail-description {
  margin-top: 18px;
  padding: 18px 2px 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-sm);
  line-height: 1.8;
}

.pipeline-summary {
  margin-bottom: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.pipeline-summary > header { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.pipeline-summary > header > div { min-width: 0; flex: 1; }
.pipeline-summary h2,
.pipeline-summary p { margin: 0; }
.pipeline-summary h2 { font-size: var(--text-sm); }
.pipeline-summary p { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }

.pipeline-stage { position: relative; display: grid; grid-template-columns: 9px 1fr auto; gap: 4px 6px; align-items: center; min-width: 112px; padding: 12px 11px; border-right: 1px solid var(--border); background: var(--surface); text-align: left; }
.pipeline-stage:last-child { border-right: 0; }
.pipeline-stage:hover,
.pipeline-stage.is-active { background: #f5f7ff; }
.pipeline-stage.is-active::after { position: absolute; right: 9px; bottom: 0; left: 9px; height: 2px; background: var(--primary); content: ""; }
.pipeline-stage-dot { width: 8px; height: 8px; border-radius: 50%; }
.pipeline-stage > span:nth-child(2) { color: var(--text-soft); font-size: var(--text-xs); }
.pipeline-stage strong { font-size: var(--text-sm); text-align: right; }
.pipeline-stage small { grid-column: 2 / 4; color: var(--text-muted); font-size: var(--text-xs); }

.gantt-scale { display: grid; grid-template-columns: 240px 1fr 1fr; padding: 9px 18px 9px 258px; border-bottom: 1px solid var(--border); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); }
.gantt-scale span:nth-child(2) { text-align: center; }
.gantt-scale span:last-child { text-align: right; }
.gantt-row { display: grid; grid-template-columns: 240px minmax(360px, 1fr); gap: 18px; align-items: center; min-height: 52px; padding: 7px 18px; border-bottom: 1px solid var(--border); }
.gantt-row:last-child { border-bottom: 0; }
.gantt-row > button:first-child { min-width: 0; padding: 0; background: transparent; text-align: left; }
.gantt-row > button strong,
.gantt-row > button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-row > button strong { font-size: var(--text-xs); }
.gantt-row > button span { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.gantt-track { position: relative; height: 26px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: #f4f6f9; }
.gantt-bar { position: absolute; top: 4px; left: var(--gantt-left); width: var(--gantt-width); min-width: 12px; height: 18px; overflow: hidden; border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.gantt-bar span { padding: 0 6px; }

.collab-calendar { display: grid; gap: 10px; }
.collab-calendar-day { overflow: hidden; }
.collab-calendar-day > header { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.collab-calendar-day > header time { flex: 1; font-size: var(--text-xs); font-weight: 700; }
.collab-calendar-day > header span { color: var(--text-muted); font-size: var(--text-xs); }
.collab-calendar-task { display: grid; grid-template-columns: 8px minmax(180px, 1fr) auto 18px; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 9px 15px; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; }
.collab-calendar-task:last-child { border-bottom: 0; }
.collab-calendar-task:hover { background: #fbfcff; }
.calendar-task-status { width: 7px; height: 32px; border-radius: var(--radius-xs); }
.collab-calendar-task > span:nth-child(2) { min-width: 0; }
.collab-calendar-task strong,
.collab-calendar-task small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-calendar-task strong { font-size: var(--text-xs); }
.collab-calendar-task small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.collab-calendar-task > .icon { color: var(--text-muted); }

/* Flow B2B collaboration shell */
.flow-global-shell { min-height: 100vh; background: #f2f3f6; }
.flow-global-bar {
  position: sticky;
  z-index: 80;
  top: 0;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #8b28b8;
  color: #fff;
  box-shadow: 0 1px 0 rgba(71, 16, 91, 0.22);
}
.flow-global-brand,
.flow-global-actions,
.flow-user-chip { display: flex; align-items: center; }
.flow-global-brand { gap: 7px; background: transparent; color: #fff; font-size: var(--text-xl); letter-spacing: -0.5px; }
.flow-global-mark { width: 25px; height: 25px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); color: #8b28b8; font-size: var(--text-md); font-weight: 700; }
.flow-global-actions { gap: 6px; }
.flow-global-icon,
.flow-user-chip { min-height: 30px; border: 0; border-radius: var(--radius-xs); background: transparent; color: #fff; }
.flow-global-icon { position: relative; width: 31px; display: grid; place-items: center; }
.flow-global-icon:hover,
.flow-user-chip:hover { background: rgba(255,255,255,0.14); }
.flow-global-icon > span { position: absolute; top: 0; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: var(--radius-sm); background: #ff4d62; color: #fff; font-size: var(--text-xs); line-height: 15px; }
.flow-user-chip { gap: 6px; padding: 0 8px; font-size: var(--text-xs); }
.flow-global-bar .realtime-status { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; }
.flow-global-main { min-width: 0; }

/* SF-036: 29px 이었다. 죽은 코드인 줄 알았는데 「소식」·「파일」 탭이
   아직 그린다. 작은 컨트롤은 32px 하나로 모은다. */
.flow-view-select, .flow-tool-button { height: var(--control-height-sm); border: 1px solid transparent; border-radius: var(--radius-xs); background: var(--surface); color: #3c414a; font-size: var(--text-xs); font-weight: 600; }
.flow-view-select { min-width: 98px; padding: 0 27px 0 9px; border-color: #d9dde5; }
.flow-tool-button { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; }
.flow-tool-button:hover,
.flow-tool-button.is-active { border-color: #ddd5f3; background: #f5f1ff; color: #6941c6; }
.flow-tool-button b { min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--radius-sm); background: #7950d5; color: #fff; font-size: var(--text-xs); line-height: 15px; }
.flow-work-search { width: 190px; height: 29px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #d9dde5; border-radius: var(--radius-xs); background: var(--surface); color: #888f9d; }
.flow-work-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: var(--text-xs); }

.flow-toolbar-panel { position: relative; z-index: 25; margin: -1px 17px 8px; border: 1px solid #dcdfe6; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); box-shadow: 0 8px 22px rgba(34,40,58,0.12); }
.flow-filter-panel { display: grid; gap: 10px; padding: 12px; }
.flow-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.flow-filter-panel label { min-width: 0; display: grid; gap: 5px; }
.flow-filter-panel label > span { color: #737b89; font-size: var(--text-xs); font-weight: 700; }
.flow-filter-mode { display: flex; align-items: center; gap: 5px; }
.flow-filter-mode strong { margin-right: 4px; color: #626a78; font-size: var(--text-xs); }
.flow-filter-mode button { min-height: var(--control-height-sm); padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: #687080; font-size: var(--text-xs); }
.flow-filter-mode button.is-selected { border-color: #cfc2f4; background: #f3efff; color: #6941c6; font-weight: 700; }
.flow-choice-panel { width: 220px; display: grid; gap: 3px; padding: 9px; }
.flow-choice-panel > strong { padding: 5px 7px; font-size: var(--text-xs); }
.flow-choice-panel button { min-height: var(--control-height-sm); display: flex; align-items: center; gap: 7px; padding: 0 8px; border-radius: var(--radius-xs); background: transparent; color: #454b57; font-size: var(--text-xs); text-align: left; }
.flow-choice-panel button.is-selected { background: #f2edff; color: #6941c6; font-weight: 700; }
.flow-column-panel { width: 280px; max-height: 390px; overflow: auto; padding: 8px; }
.flow-column-panel > div:first-child { position: sticky; top: -8px; z-index: 2; display: flex; justify-content: space-between; padding: 9px 7px; background: var(--surface); font-size: var(--text-xs); }
.flow-column-panel label { min-height: 29px; display: flex; align-items: center; gap: 8px; padding: 0 7px; border-radius: var(--radius-xs); font-size: var(--text-xs); }
.flow-column-panel label:hover { background: #f6f7f9; }
.flow-column-option { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-xs); }
.flow-column-option > label { min-width: 0; flex: 1; }
.flow-column-option > span { display: flex; opacity: 0; }
.flow-column-option:hover { background: #f6f7f9; }
.flow-column-option:hover > span { opacity: 1; }
.flow-column-option .icon-button { width: 23px; height: 23px; font-size: var(--text-xs); }
.flow-column-option.is-required { color: #8b91a0; }
.task-bulk-options { display: grid; gap: 8px; margin-bottom: 16px; }
.task-bulk-option { min-height: 48px; display: grid; grid-template-columns: 18px 105px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.task-bulk-option > span { font-size: var(--text-xs); font-weight: 700; }
.task-bulk-option > small { grid-column: 3; color: #7f8795; font-size: var(--text-xs); }
.collaboration-detail-error { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 35px; color: #697283; text-align: center; }
.collaboration-detail-error > .icon { width: var(--icon-xl); height: var(--icon-xl); color: var(--indigo); }
.collaboration-detail-error h3,
.collaboration-detail-error p { margin: 0; }
.collaboration-detail-error h3 { color: #313744; font-size: var(--text-base); }
.collaboration-detail-error p { max-width: 360px; font-size: var(--text-xs); line-height: 1.6; }
.collaboration-detail-error > div { display: flex; gap: 7px; }
.feed-load-more { width: 100%; min-height: 40px; border: 1px solid #dedfe5; border-radius: var(--radius-sm); background: var(--surface); color: #6744c2; font-size: var(--text-xs); font-weight: 700; }
.task-status-note { display: grid; gap: 4px; padding: 8px 9px 9px; border-top: 1px solid #eceef2; }
.task-status-note > span { color: #7a8190; font-size: var(--text-xs); font-weight: 700; }
.task-status-note textarea { width: 100%; min-height: 42px; resize: vertical; padding: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); outline: 0; font: inherit; font-size: var(--text-xs); }
.task-status-note textarea:focus { border-color: #9274df; box-shadow: 0 0 0 2px rgba(118,80,218,.1); }

.flow-work-row:hover td { background: #faf8ff; }
.flow-work-row.is-selected td { background: #f4f0ff; }
.flow-work-row.is-completed td { color: #8a909c; }
.flow-work-row.is-dragging td { opacity: 0.45; }
.flow-work-row.is-dragover td { box-shadow: inset 0 2px #7650da; }
.flow-work-row.is-dragover.is-child-target td { background: #eee8ff; box-shadow: inset 0 0 0 1px #7650da; }
.flow-work-row.is-dragover.is-child-target td:first-child::after { content: "하위업무로 이동"; float: right; margin-left: 7px; padding: 2px 5px; border-radius: var(--radius-sm); background: #7650da; color: #fff; font-size: var(--text-xs); }

.flow-task-name { min-width: 0; display: flex; align-items: center; gap: 4px; padding-left: calc(var(--task-depth, 0) * 21px); }
.flow-task-select { width: 14px; height: 14px; flex: 0 0 auto; accent-color: #7650da; }
.flow-tree-toggle,
.flow-tree-leaf { width: 18px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; }
.flow-tree-toggle { border-radius: var(--radius-xs); background: transparent; color: #8b92a0; }
.flow-tree-toggle:hover { background: #efebfa; color: #6b46c1; }
.flow-tree-toggle .icon { transition: transform var(--motion-fast) var(--ease-standard); }
.flow-tree-toggle.is-expanded .icon { transform: rotate(90deg); }
.flow-tree-leaf::before { width: 5px; height: 5px; border-radius: 50%; background: #d1d5dd; content: ""; }
.flow-task-link { min-width: 0; display: block; overflow: hidden; background: transparent; color: #292e37; text-align: left; }
.flow-task-link strong,
.flow-task-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-task-link strong { font-size: var(--text-xs); }
.flow-task-link small { margin-top: 2px; color: #969da9; font-size: var(--text-xs); font-weight: 500; }
.flow-progress { display: flex; align-items: center; gap: 7px; }
.flow-progress > span { width: 60px; height: 5px; overflow: hidden; border-radius: var(--radius-xs); background: #e8ebf0; }
.flow-progress i { width: var(--progress); height: 100%; display: block; border-radius: inherit; background: #7351d3; }
.flow-progress strong { color: #6f7785; font-size: var(--text-xs); }

.task-sales-fields { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.task-sales-fields summary { padding: 11px 13px; cursor: pointer; color: #4d5564; font-size: var(--text-xs); font-weight: 700; }
.task-sales-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-1) var(--space-5) var(--space-5); }
.task-sales-fields-grid .field { margin: 0; }
.task-sales-notes { grid-column: 1 / -1; }
.task-quote-check { min-height: 38px; display: flex; align-items: center; align-self: end; }
.task-quote-check input { position: absolute; opacity: 0; }
.task-quote-check span { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: #697181; font-size: var(--text-xs); }
.task-quote-check input:checked + span { border-color: #cbbcf2; background: #f2edff; color: #6941c6; }
.sales-context-wide { grid-column: 1 / -1; }

@media (max-width: 900px) {

  .flow-work-search { min-width: 180px; flex: 1; }
  .flow-filter-panel { align-items: stretch; flex-wrap: wrap; }
  .flow-filter-panel label { min-width: calc(50% - 5px); flex: 1; }
  .task-sales-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-fields { grid-template-columns: 78px minmax(0, 1fr); }
  .task-tree-row,
  .task-tree--detail .task-tree-row { grid-template-columns: 25px minmax(160px, 1fr) 38px minmax(105px, auto); }
  .task-tree-date,
  .task-tree-row > .participant-chips { display: none; }
  .collab-file-head,
  .collab-file-row { grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.8fr) 90px; }
  .collab-file-head > :last-child,
  .collab-file-row > :last-child { display: none; }
  .sales-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gantt-scale, .gantt-rows { min-width: 720px; }
}

@media (max-width: 680px) {
  .flow-global-bar { padding-inline: 8px; }
  .flow-global-brand strong { font-size: var(--text-lg); }
  .flow-user-chip span:last-child,
  .flow-global-bar .realtime-status { display: none; }

  .flow-view-select { min-width: 88px; }
  .flow-tool-button { font-size: 0; }
  .flow-tool-button .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .flow-work-search { order: 3; min-width: calc(100% - 75px); }

  .flow-toolbar-panel { margin-inline: 9px; }
  .flow-filter-panel label { min-width: 100%; }
  .flow-choice-panel,
  .flow-column-panel { width: calc(100% - 18px); }
  .task-sales-fields-grid { grid-template-columns: 1fr; }
  .task-detail .sales-context--detail { grid-template-columns: 1fr; }
  .task-detail .sales-context--detail > div,
  .task-detail-fields > div { grid-template-columns: 102px minmax(0, 1fr); }
  .task-sales-notes { grid-column: auto; }
  .collab-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-main { padding: 18px 16px; }
  .agenda-title-row { flex-direction: column; }
  .agenda-title-row h2 { font-size: var(--text-lg); }
  .agenda-project { display: none; }
  .task-tree-row,
  .task-tree--detail .task-tree-row { grid-template-columns: 25px minmax(130px, 1fr) minmax(100px, auto); }
  .task-tree-comments { display: none; }
  .collab-task-toolbar { flex-wrap: wrap; }
  .collab-task-toolbar .toolbar-search { width: 100%; flex-basis: 100%; }
  .collab-task-toolbar .filter-select { width: calc(50% - 4px); }
  .modal--drawer { border-radius: 0; }
  .modal-head { cursor: default; touch-action: auto; user-select: auto; }
  .modal-drag-grip { display: none; }
  .task-detail-summary,
  .task-detail-section { padding-inline: 17px; }
  .task-detail-fields { grid-template-columns: 1fr; }
  .task-inline-composer { margin-inline: -17px; }
  .task-inline-composer .button span { display: none; }
  .task-participant-picker { grid-template-columns: 1fr; }
  /* SF-124: 좁은 폭에서는 표를 끌지 않는다.
     여기서는 옆으로 620px 를 깔고 앉아, 등록자와 용량을 보려면 밀어야 했다.
     같은 폭에서 업무 표는 이미 카드로 접힌다 - 파일만 표를 끌고 있었다. */
  .collab-files { overflow-x: visible; }
  /* 머리줄은 치운다. 카드 안에 이름이 이미 붙어 있어 같은 말을 두 번 한다. */
  .collab-file-head { display: none; }
  .collab-file-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    min-width: 0;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4) var(--space-4);
  }
  /* 파일 이름은 한 줄을 다 쓴다. 나머지 넷은 두 줄로 - 위치·등록자,
     그 아래 날짜·용량. */
  .collab-file-row > :first-child { grid-column: 1 / -1; }
  /* 1100 이하에서 숨겼던 용량을 다시 보인다. 카드에는 자리가 있다. */
  .collab-file-row > :last-child { display: block; }
  /* 카드 안의 카드는 테두리를 두르지 않는다. 상자가 겹쳐 보인다. */
  .collab-file-row .task-attachment { border: 0; padding: 0; background: none; }
  /* 긴 이름을 … 으로 자르지 않고 접는다. 휴대폰에서 파일을 찾는 사람은
     이름 끝자리(3차 · 최종 · 수정본)를 보고 고른다 - 끝을 자르면 그
     단서가 사라진다. */
  .collab-file-row .task-attachment strong {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  }

  /* 도구 줄은 세 층으로 나눈다. 여기서 113px 넘쳐 고르개 글자가 잘려
     나가고 올리기 단추는 28px 로 눌려 글자가 세로로 섰다.
     DOM 순서는 그대로 두고 자리만 바꾼다 - 넓은 화면은 손대지 않는다. */
  .flow-file-toolbar { flex-wrap: wrap; }
  .flow-file-toolbar > .spacer { display: none; }
  .flow-file-toolbar > .select[data-file-type],
  .flow-file-toolbar > .select[data-file-sort] { order: 1; width: auto; flex: 1 1 calc(50% - 3px); }
  .flow-file-toolbar .flow-work-search { order: 2; width: 100%; min-width: 0; flex-basis: 100%; }
  .flow-file-toolbar .file-upload-target { order: 3; width: 100%; flex-basis: 100%; }
  /* 올리기는 이 화면에서 가장 큰 일이다. 한 줄을 다 쓰고, 손가락이
     닿을 만큼 키운다. */
  .flow-file-toolbar .task-upload-button {
    order: 4; flex-basis: 100%; height: auto; min-height: var(--control-height);
    padding: var(--space-3); font-size: var(--text-sm);
  }
  .flow-file-toolbar .task-upload-button .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .sales-context { grid-template-columns: 1fr 1fr; }
  .gantt-scale { padding-left: 218px; }
  .gantt-row { grid-template-columns: 180px minmax(360px, 1fr); }
}

/* Quote revision editor */
.quote-editor-head,
.quote-item-head,
.quote-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quote-editor-head { margin: 22px 0 10px; }
.quote-editor-head h3,
.quote-editor-head p { margin: 0; }
.quote-editor-head p { margin-top: 3px; color: var(--text-soft); font-size: var(--text-xs); }
.quote-items { display: grid; gap: 11px; }
.quote-item-row {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft, #f8f9fc);
}
.quote-item-head { margin-bottom: 10px; }
.quote-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 1fr));
  gap: 9px;
}
.quote-item-name,
.quote-item-spec,
.quote-item-notes { grid-column: span 2; }
.quote-calculated {
  display: flex;
  align-items: center;
  min-height: 37px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 700;
}
.quote-summary {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 12px 0 17px;
  padding: 13px;
  border-radius: var(--radius);
  background: #eef3ff;
}
.quote-summary span { display: inline-flex; gap: 6px; }
.quote-grand-total { color: var(--primary); font-size: var(--text-sm); }
.quote-vat { align-self: end; min-height: 38px; }

@media (max-width: 900px) {
  .quote-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .quote-item-grid { grid-template-columns: 1fr; }
  .quote-item-name,
  .quote-item-spec,
  .quote-item-notes { grid-column: auto; }
}

/* Verified document review controls */
.source-review {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft, #f7f9fc);
}
.source-review summary {
  padding: 11px 13px;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-xs);
}
.source-review pre {
  max-height: 260px;
  margin: 0;
  padding: 13px;
  overflow: auto;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
  font: 10px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text-soft);
  background: var(--surface);
}
.analysis-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.analysis-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.analysis-heading-row h4 { margin: 0; }
.document-actions {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}
.document-actions .check-row {
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.reply-draft { line-height: 1.65; }
.document-text-card { margin-top: 14px; }

@media (max-width: 720px) {
  .analysis-edit-grid { grid-template-columns: 1fr; }
}

/* 움직임을 줄여 달라고 한 사람에게는 줄인다.
   시간만 0 으로 만들면 "뜨는" 상태가 그대로 남으므로 이동도 함께 끈다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

@media print {
  .sidebar,
  .topbar,
  .page-actions,
  .toolbar,
  .row-actions,
  .toast-region { display: none !important; }
  .app-main { margin: 0; }
  .content { padding: 0; }
  .card { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   ER ONE 셸 (Phase 2-A)
   기존 :root 토큰만 사용한다. 새 색상 값을 도입하지 않는다.
   1280px 이상: 우측 패널 도킹 / 미만: 오버레이 드로어.
   ========================================================================== */

.erone-shell {
  --erone-panel-width: 460px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg);
}

.erone-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.erone-content {
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

/* --- 사이드바 --- */

/* SF-031: 사이드바는 진한 네이비 고정.
   밝은 사이드바는 본문과 같은 무게라 눈이 매번 "여기가 메뉴구나" 를 다시
   찾는다. 어두운 기둥 하나를 세워 두면 본문이 어디서 시작하는지 묻지
   않아도 된다. */
.erone-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-right: 0;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}

.erone-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
}

/* ER ONE 마크. 별도 이미지 자산 없이 글자만으로 만든다.
   "E1" 은 임시 약어처럼 보여서 "ER" 로 바꾸고, 파란 사각형 대신
   테두리를 준 네이비 타일로 둔다 - 사이드바 위에서 튀지 않는다. */
.erone-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  background: var(--sidebar-surface);
  color: var(--text-onDark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  place-items: center;
}

.erone-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.erone-brand-copy strong { color: var(--text-onDark); font-size: var(--text-md); letter-spacing: -0.01em; }
.erone-brand-copy small { color: var(--sidebar-muted); font-size: var(--text-xs); }

.erone-sidebar-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  background: var(--sidebar-surface);
  color: var(--sidebar-muted);
  cursor: pointer;
  font-size: var(--text-sm);
  text-align: left;
}

.erone-sidebar-search:hover { border-color: var(--sidebar-active); color: var(--sidebar-text); }
.erone-sidebar-search:focus-visible { outline: 2px solid var(--sidebar-active); outline-offset: 1px; }
.erone-sidebar-search span { flex: 1; }
.erone-sidebar-search kbd {
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-xs);
  background: var(--sidebar-hover);
  color: var(--sidebar-muted);
  font-size: var(--text-xs);
  padding: 1px 5px;
}

.erone-nav {
  display: flex;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

/* SF-078: 머리글이 없는 묶음(맨 위 "내 프로젝트 · 대시보드").
   늘 보여야 하는 입구라 접는 손잡이를 두지 않는다. 아래 묶음과 사이만
   띄운다. */
.erone-nav-group.is-bare { margin-bottom: var(--space-2); }

/* 그룹 머리(모아보기/영업/SYSTEM)는 그룹을 접는 손잡이다. 한 단 눌러서
   배경으로 물러나게 한다 - 메뉴 이름과 같은 무게로 보이면 안 된다. */
.erone-nav-group-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-3) var(--space-2);
  border: 0;
  background: none;
  color: var(--sidebar-muted);
  cursor: pointer;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.erone-nav-group-head:hover { opacity: 1; }
.erone-nav-group-head:focus-visible { outline: 2px solid var(--sidebar-active); outline-offset: 1px; }

.erone-nav-chevron {
  width: 0;
  height: 0;
  border-top: 4px solid currentColor;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.erone-nav-group:not(.is-open) .erone-nav-chevron { transform: rotate(-90deg); }

.erone-nav-items { display: flex; flex-direction: column; gap: 1px; }

.erone-nav-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-4);
  min-height: 34px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--sidebar-text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: left;
}

/* hover 는 active 보다 약하게. 둘이 비슷하면 지금 어디에 있는지 흐려진다. */
.erone-nav-item { transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.erone-nav-item:hover { background: var(--sidebar-hover); }
.erone-nav-item:focus-visible { outline: 2px solid var(--sidebar-active); outline-offset: -2px; }

/* 지금 있는 곳 - SF-032
   ---------------------------------------------------------------------
   파란 칠을 깔면 그 칸이 "눌린 버튼" 처럼 보인다. 사이드바는 버튼 줄이
   아니라 지금 위치를 알려 주는 곳이다. 면은 한 단 들린 남색으로 두고,
   파랑은 왼쪽 막대 하나에만 남긴다. 글자를 밝게 해서 대비로 말한다. */
.erone-nav-item.is-active {
  background: var(--sidebar-surface);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
}

.erone-nav-item.is-active .erone-nav-icon { opacity: 1; }

.erone-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--sidebar-active);
}

.erone-nav-icon { width: var(--icon-md); height: var(--icon-md); flex: none; opacity: 0.85; }
.erone-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 숫자 배지 - SF-032
   ---------------------------------------------------------------------
   "내 업무 4" 와 "알림 4" 는 오류가 아니라 개수다. 빨강은 삭제·실패·오류에
   쓰기로 정했는데(색 사용 규칙), 사이드바에 빨간 알약이 둘이면 매일 무언가
   잘못된 것처럼 보인다. 어두운 바탕 위에서 읽히는 중립 알약으로 둔다. */
.erone-nav-badge {
  min-width: 18px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--sidebar-border);
  color: var(--sidebar-text);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.erone-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2) var(--space-1);
  border-top: 1px solid var(--sidebar-border);
}

.erone-sidebar-user-copy strong { overflow: hidden; color: var(--text-onDark); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.erone-sidebar-user-copy small { color: var(--sidebar-muted); font-size: var(--text-xs); }

/* 로그아웃은 여기서 가장 덜 중요한 버튼이다. 눈에 먼저 띄면 안 된다. */
.erone-sidebar-user .erone-icon-button {
  border-color: transparent;
  background: none;
  color: var(--sidebar-muted);
}

.erone-sidebar-user .erone-icon-button:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

/* 사용자 블록 전체가 프로필 진입점이다. 클릭 대상임을 알 수 있게 hover 를 준다. */
.erone-sidebar-user-button {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
  padding: 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.erone-sidebar-user-button:hover { background: var(--sidebar-hover); }
.erone-sidebar-user-button:focus-visible { outline: 2px solid var(--sidebar-active); outline-offset: 1px; }

/* 헤더 우측 현재 사용자. 좁은 화면에서 사이드바가 접혀도 프로필로 갈 수 있다. */
.erone-header-user {
  display: inline-flex;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.erone-header-user:hover .erone-avatar { box-shadow: 0 0 0 2px var(--primary-soft); }
.erone-header-user:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- 사람 Avatar (공통) ---
 *
 * 사진이 있으면 사진, 없으면 이니셜. 둘 다 같은 원 안에서 같은 크기로 보인다.
 * 크기는 아래 5개 토큰만 쓴다. 화면마다 새 크기를 만들지 않는다.
 *
 * 사진이 늦게 와도 자리가 움직이지 않도록 크기를 미리 잡는다(레이아웃 이동 없음).
 * 회사 mark(.erone-panel-avatar, .company-logo)는 사람이 아니라서 사각형이고
 * 이 규칙에 포함되지 않는다. */
.erone-avatar {
  position: relative;
  display: grid;
  width: var(--avatar-size, 32px);
  height: var(--avatar-size, 32px);
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  /* 이니셜은 사진의 대체물이지 흐린 자리표시자가 아니다. 배경보다 확실히
     읽히는 대비를 준다. 작은 크기(20px)에서도 글자가 사라지지 않아야 한다. */
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: calc(var(--avatar-size, 32px) * 0.36);
  font-weight: 700;
  line-height: 1;
  place-items: center;
  user-select: none;
}

.erone-avatar--xs { --avatar-size: 20px; }
.erone-avatar--sm { --avatar-size: 24px; }
.erone-avatar--md { --avatar-size: 32px; }
.erone-avatar--lg { --avatar-size: 40px; }
.erone-avatar--xl { --avatar-size: 64px; }

.erone-avatar-initials {
  display: block;
  overflow: hidden;
  max-width: 100%;
  padding: 0 1px;
  text-overflow: clip;
  white-space: nowrap;
}

/* 사진은 이니셜 위에 덮는다. 로드에 실패하면 <img> 가 제거되고
 * 아래 이니셜이 그대로 드러난다. 깨진 이미지 아이콘은 보이지 않는다. */
.erone-avatar-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface-strong);
  object-fit: cover;
}

.erone-avatar.has-photo { background: var(--surface-strong); }

/* 이름을 옆에 붙인 형태 */
.erone-person {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: var(--text-xs);
}

.erone-person.is-empty { color: var(--text-muted); font-size: var(--text-xs); }

.erone-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 여러 명 겹쳐 보이기. 과하게 겹치지 않는다 - 얼굴이 4분의 1 이상 남는다. */
.erone-avatar-stack {
  display: inline-flex;
  align-items: center;
}

.erone-avatar-stack.is-empty { color: var(--text-muted); font-size: var(--text-xs); }

.erone-avatar-stack .erone-avatar {
  box-shadow: 0 0 0 2px var(--surface);
}

.erone-avatar-stack .erone-avatar + .erone-avatar {
  margin-left: calc(var(--avatar-size, 32px) * -0.28);
}

.erone-avatar-rest {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: calc(var(--avatar-size, 32px) * 0.34);
}

.erone-sidebar-user-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }

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

/* SF-031: 얇은 상단 막대. 반투명 + blur 를 걷어냈다 - 스크롤할 때 본문이
   비쳐서 글자가 겹쳐 읽히는 구간이 있었고, 그 효과가 주는 것도 없었다. */
.erone-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-7);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* 화면 표식 - SF-032
   ---------------------------------------------------------------------
   모든 화면이 똑같아 보이지 않게 아주 약한 identity 를 준다. 새 색 체계를
   만들지 않고, 사이드바가 이미 쓰는 그 화면의 아이콘을 작은 타일로 한 번 더
   보여 주는 정도다. 화면 배경은 건드리지 않는다.

   묶음(HOME/SALES/PROJECT/SYSTEM)마다 옅은 색을 달리하되, 전부 이미
   정해 둔 역할 토큰에서 가져온다. */
.erone-header-title { display: flex; min-width: 0; flex: none; align-items: center; gap: var(--space-3); }
.erone-header-heading { min-width: 0; }

.erone-page-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text-soft);
  place-items: center;
}

.erone-page-mark.is-home { background: var(--surface-strong); color: var(--text-soft); }
.erone-page-mark.is-sales { background: var(--primary-soft); color: var(--primary); }
.erone-page-mark.is-project { background: var(--indigo-soft); color: var(--indigo); }
.erone-page-mark.is-collaboration { background: var(--info-soft); color: var(--info); }
.erone-page-mark.is-system { background: var(--surface-strong); color: var(--text-soft); }
.erone-header-title h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}
/* 설명 한 줄은 상단 막대의 일이 아니다. 좁은 화면에서는 줄이 두 줄이 되며
   막대를 키우기만 한다. 화면 안내는 본문이 맡는다. */
.erone-header-title p { display: none; }

.erone-search {
  display: flex;
  min-width: 0;
  max-width: 460px;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-muted);
}

.erone-search:focus-within {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-ring);
}

.erone-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--text-sm);
  outline: none;
}

.erone-header-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

/* 상단 막대의 "새로 만들기" - SF-032
   ---------------------------------------------------------------------
   화면마다 제 CTA 가 따로 있다. 둘 다 진한 파랑이면 어느 쪽이 지금 할
   일인지 알 수 없다. 여기는 보조 단계로 두되, 눌러야 할 것임은 남긴다. */
.erone-header-create {
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border-color: var(--border);
  color: var(--text-soft);
  font-size: var(--text-xs);
}

.erone-header-create:hover { border-color: var(--border-strong); background: var(--surface-strong); color: var(--text); }
.erone-header-create .icon { color: var(--primary); }

/* 실시간 표시와 새로고침은 평소에 할 일이 없다. 배경으로 물러나 있다가
   무언가 어긋났을 때만(연결 끊김·변경 대기) 눈에 들어오면 된다. */
.erone-realtime {
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.erone-realtime.is-online { background: transparent; color: var(--text-muted); }
.erone-realtime.is-connecting { background: var(--warning-soft); color: var(--warning); }
.erone-realtime.is-pending { background: var(--warning-soft); color: var(--warning); }
.erone-realtime.is-offline { background: var(--danger-soft); color: var(--danger); }

.erone-header-actions [data-action="refresh"] {
  border-color: transparent;
  background: none;
  color: var(--text-muted);
}

.erone-header-actions [data-action="refresh"]:hover {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--text-soft);
}

/* 데스크톱에서는 사이드바가 항상 보이므로 햄버거를 숨긴다.
   .erone-icon-button 규칙보다 뒤에서 다시 이기도록 클래스 두 개로 특정한다. */
.erone-header .erone-menu-toggle { display: none; }

/* --- 공통 컨트롤 --- */

/* SF-031: 컨트롤 높이를 하나로 맞춘다. 버튼·입력·선택이 같은 줄에
   있을 때 높이가 1~3px 씩 어긋나 있었고, 그것이 화면을 조잡해 보이게
   하는 가장 흔한 원인이었다. */
.erone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* 버튼 위계 다섯 - SF-032
   ---------------------------------------------------------------------
     primary    이 화면에서 하려는 일 하나. 화면당 하나가 원칙이다
     secondary  (기본) 같이 있을 법한 다른 동작
     ghost      곁들이는 동작. 테두리 없이 글자만
     danger     되돌릴 수 없는 일. 절대 primary 처럼 보이지 않는다
     icon-only  자리가 없는 곳. 이름(aria-label)이 반드시 있다

   hover 는 한 단 어두워지고, 누르는 동안 한 단 더 어두워진다.
   비활성은 흐리게만 만들지 않는다 - 바탕·선·글자를 함께 바꿔야
   "지금 못 누른다" 가 분명해진다. */
.erone-button {
  transition: border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.erone-button:hover { border-color: var(--text-muted); background: var(--surface-soft); }
.erone-button:active { background: var(--surface-strong); }
.erone-button--small { height: var(--control-height-sm); padding: 0 var(--space-4); font-size: var(--text-xs); }

.erone-button--primary { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }
.erone-button--primary:hover { border-color: var(--primary-dark); background: var(--primary-hover); }
.erone-button--primary:active { border-color: var(--primary-dark); background: var(--primary-dark); }

/* 곁들이는 동작. 테두리를 없애 주변과 경쟁하지 않는다. */
.erone-button--ghost {
  border-color: transparent;
  background: none;
  color: var(--text-soft);
  font-weight: var(--weight-semibold);
}

.erone-button--ghost:hover { border-color: transparent; background: var(--surface-strong); color: var(--text); }
.erone-button--ghost:active { background: var(--border); }

/* 지우는 버튼은 primary 처럼 보이지 않는다. 가장 눈에 띄는 버튼이
   되돌릴 수 없는 일을 하면, 사람은 습관으로 그것을 누른다. */
.erone-button--danger { border-color: var(--danger-border); background: var(--surface); color: var(--danger); }
.erone-button--danger:hover { border-color: var(--danger); background: var(--danger-soft); }
.erone-button--danger:active { background: var(--danger-soft); border-color: var(--danger); }

.erone-button:disabled,
.erone-button[aria-disabled="true"] {
  border-color: var(--border);
  background: var(--surface-strong);
  color: var(--text-muted);
  opacity: 1;
  cursor: not-allowed;
}

.erone-button:disabled:hover,
.erone-button[aria-disabled="true"]:hover {
  border-color: var(--border);
  background: var(--surface-strong);
}

.erone-icon-button {
  display: inline-grid;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: var(--text-xs);
  place-items: center;
}

.erone-icon-button {
  transition: background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.erone-icon-button:hover { background: var(--surface-strong); color: var(--text); }
.erone-icon-button:active { background: var(--border); }
.erone-icon-button:disabled { color: var(--text-muted); cursor: not-allowed; }
.erone-icon-button:disabled:hover { background: none; }
.erone-icon-button:focus-visible,
.erone-nav-item:focus-visible,
.erone-button:focus-visible,
.erone-cell-link:focus-visible,
.erone-tab:focus-visible,
.erone-segment:focus-visible,
.erone-chip:focus-visible { border-radius: var(--radius-sm); outline: 2px solid var(--primary); outline-offset: 2px; }

.erone-input,
.erone-select {
  height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
}

.erone-input:focus,
.erone-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-ring);
  outline: none;
}

.erone-input::placeholder { color: var(--text-muted); }

/* 브라우저 기본 화살표는 화면마다 달라 보인다. 같은 그림을 쓴다. */
.erone-select {
  padding-right: var(--space-8);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
}

.erone-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.erone-spacer { flex: 1; }

.erone-field-search { display: flex; min-width: 200px; align-items: center; }
.erone-field-search .erone-input { width: 100%; }

/* 필터 묶음 - 넓은 화면에서는 그냥 줄 안의 한 덩어리다.
   ---------------------------------------------------------------------
   좁은 화면에서만 접힌다(아래 max-width: 640px). 접는 판단을 CSS 가 하므로
   자바스크립트 상태가 어긋나도 넓은 화면에서 필터가 사라지지 않는다. */
.erone-toolbar-filters { display: contents; }

/* 접기 단추도 좁은 화면에만 나온다. */
.erone-filter-toggle { display: none; }

.erone-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-strong); }

.erone-tab,
.erone-segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}

.erone-tab:hover, .erone-segment:hover { color: var(--text); }
.erone-tab.is-active,
.erone-segment.is-active { background: var(--surface); color: var(--primary-dark); }
.erone-tab b { color: var(--text-muted); font-weight: 600; }
.erone-tab.is-active b { color: var(--primary); }

.erone-segmented { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-strong); }

.erone-chip.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }

.erone-link { border: 0; background: none; color: var(--primary); cursor: pointer; font-size: var(--text-sm); }
.erone-muted { color: var(--text-muted); font-size: var(--text-sm); }
.erone-stale { display: inline-flex; align-items: center; margin-left: 5px; color: var(--warning); vertical-align: -2px; }

.erone-status { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; }
.erone-status.is-open { background: var(--primary-soft); color: var(--primary-dark); }
.erone-status.is-won { background: var(--green-soft); color: var(--green); }
.erone-status.is-lost { background: var(--red-soft); color: var(--red); }
.erone-status.is-on_hold { background: var(--yellow-soft); color: var(--yellow); }
.erone-status.is-dropped { background: var(--surface-strong); color: var(--text-muted); }

.erone-badge { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; }

.erone-inline-warning {
  margin: 8px 0 0;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--orange-soft);
  color: var(--orange);
  font-size: var(--text-sm);
}

/* --- 3상태 (Loading / Empty / Error) --- */

.erone-skeleton, .erone-skeleton-cards { display: flex; flex-direction: column; gap: 8px; }
.erone-skeleton-cards { flex-direction: row; overflow: hidden; }

.erone-skeleton-row,
.erone-skeleton-card {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-strong) 25%, var(--surface-soft) 50%, var(--surface-strong) 75%);
  background-size: 400% 100%;
  animation: erone-shimmer 1.4s ease infinite;
}

.erone-skeleton-row { height: 42px; }
.erone-skeleton-card { min-width: 200px; height: 230px; flex: 1; }

@keyframes erone-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.erone-empty,
.erone-error {
  padding: var(--space-8) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.erone-empty h3, .erone-error h3 { margin: 0 0 5px; font-size: var(--text-base); }
.erone-empty p, .erone-error p { margin: 0 0 14px; color: var(--text-muted); font-size: var(--text-sm); }
/* 버튼이 없으면 마지막 문단 아래 여백은 그냥 빈 자리다. */
.erone-empty > p:last-child, .erone-error > p:last-child { margin-bottom: 0; }
.erone-error { border-color: var(--red); }

/* 카드 안에서는 테두리도 큰 여백도 빼앗아 간다.
   ---------------------------------------------------------------------
   비어 있다는 말 한 줄을 하려고 카드 안에 또 점선 상자를 그리면, 대시보드의
   작은 칸 하나가 180px 을 쓴다. 실측으로 "검토 필요"·"나를 멘션한 항목" 이
   각각 184px / 187px 이었다. 카드가 이미 경계를 그리고 있으니 안쪽 상자는
   지우고, 할 말만 남긴다.

   상세 패널의 묶음(.erone-panel-section)도 같다. 패널이 이미 면이고 묶음마다
   구분선이 있다 - SF-032 캡처에서 고객사 패널의 영업활동 자리에 점선 상자가
   그대로 남아 있는 것을 보고 함께 넣었다.

   패널 안쪽은 바로 위 부모가 무엇이든(.task-comment-timeline 처럼 중간에
   감싸는 것이 있다) 같은 규칙을 받아야 해서 자손 선택자로 하나 더 단다. */
:is(.card, .erone-card, .erone-section, .erone-panel-section, .erone-task-panel-section) > .erone-empty,
.erone-panel-body .erone-empty {
  display: grid;
  align-items: start;
  gap: 0 var(--space-3);
  padding: var(--space-2) 0 var(--space-1);
  border: 0;
  background: none;
  text-align: left;
  grid-template-areas: "glyph title" "glyph message" "glyph action";
  grid-template-columns: auto minmax(0, 1fr);
}

:is(.card, .erone-card, .erone-section, .erone-panel-section, .erone-task-panel-section) > .erone-empty h3,
.erone-panel-body .erone-empty h3 { grid-area: title; margin: 0 0 2px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
:is(.card, .erone-card, .erone-section, .erone-panel-section, .erone-task-panel-section) > .erone-empty p,
.erone-panel-body .erone-empty p { grid-area: message; margin: 0; font-size: var(--text-xs); }
:is(.card, .erone-card, .erone-section, .erone-panel-section, .erone-task-panel-section) > .erone-empty .erone-button,
.erone-panel-body .erone-empty .erone-button { grid-area: action; margin-top: var(--space-3); justify-self: start; }

/* 그림은 장식이 아니라 "여기가 원래 무엇을 담는 자리인가" 를 말한다.
   그래서 글자보다 눈에 띄면 안 된다 - 중립색에 한 단 물러난 면이다. */
.erone-empty-glyph {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text-muted);
  place-items: center;
}

:is(.card, .erone-card, .erone-section, .erone-panel-section, .erone-task-panel-section) > .erone-empty .erone-empty-glyph,
.erone-panel-body .erone-empty .erone-empty-glyph { grid-area: glyph; margin: 0; }

/* 화면 전체가 비었을 때는 가운데에 세로로 쌓는다. */
.erone-empty > .erone-empty-glyph { margin: 0 auto var(--space-3); }

/* --- 표 --- */

/* SF-031: 공통 표.
   줄무늬(zebra)는 쓰지 않는다 - 행이 많을 때 눈이 줄을 따라가는 것을
   돕지 못하고 화면만 어지럽힌다. 대신 구분선을 아주 연하게 두고
   hover 를 분명하게 준다. */
.erone-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.erone-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.erone-table th, .erone-table td {
  height: var(--row-height);
  padding: var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: middle;
}

/* 머리글은 바탕을 깔지 않는다 - SF-032
   ---------------------------------------------------------------------
   머리글에 회색 띠를 두르면 그 줄이 제일 먼저 읽힌다. 정작 읽어야 할 것은
   내용이다. 글자를 한 단 작고 흐리게 두고, 아래 선 하나로만 가른다. */
.erone-table thead th {
  height: 38px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}

/* 표 안의 보조 정보. 속성은 칩으로 감싸지 않는다 - 모든 칸이 알약이 되면
   정작 상태를 말하는 칩이 묻힌다. */
.erone-cell-meta { color: var(--text-soft); }
.erone-cell-dash { color: var(--border-strong); }

.erone-table thead th button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0; }
.erone-table thead th button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 줄에 마우스가 오면 중립으로 살짝 눌린다. 파랗게 물들이면 "고른 줄"과
   구분되지 않는다. 고른 줄만 primary 를 쓴다. */
.erone-table tbody tr { transition: background-color var(--motion-fast) var(--ease-standard); }
.erone-table tbody tr:hover { background: var(--surface-soft); }
.erone-table tbody tr.is-selected { background: var(--primary-softer); box-shadow: inset 2px 0 0 var(--primary); }
.erone-table tbody tr:last-child td { border-bottom: 0; }
.erone-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.erone-sort { margin-left: 3px; color: var(--primary); font-size: var(--text-xs); }

/* 행의 작업 버튼은 평소에 물러나 있다가 그 줄에 왔을 때 드러난다. */
.erone-row-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.erone-row-actions .erone-icon-button { opacity: 0.55; }
.erone-table tbody tr:hover .erone-row-actions .erone-icon-button,
.erone-row-actions .erone-icon-button:focus-visible { opacity: 1; }

/* 이름 칸은 링크처럼 읽혀야 누를 수 있다는 것이 보인다. */
.erone-cell-link {
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
  text-align: left;
}

.erone-cell-link:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.erone-cell-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- 대시보드 --- */

/* 대시보드는 넓은 화면에서 폭을 무한정 늘리지 않는다. 한 줄이 너무 길어지면
   숫자와 라벨의 시선 이동이 멀어지고 화면이 비어 보인다. */
.erone-dashboard { display: flex; max-width: 1560px; flex-direction: column; gap: var(--space-6); }
/* 420px 에서도 두 칸이 들어가게 한다. 한 칸씩 쌓으면 KPI 넉 장이
   화면 하나를 다 먹고, 정작 오늘 할 일은 스크롤 아래로 밀린다. */
.erone-kpi-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

/* 카드를 두 열로 명시한다. auto-fit 은 넓은 화면에서 마지막 카드를 혼자
   다음 줄에 떨어뜨린다. 열 안에서는 세로로 쌓아 아래쪽 여백을 줄인다. */
.erone-dashboard-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.erone-dashboard-col { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }

/* SF-035: 두 열 아래 전체 폭 칸.
   min-width: 0 이 없으면 안쪽 목록이 칸을 밀어 가로 스크롤을 만든다. */
.erone-dashboard-wide { min-width: 0; }

/* 감사 로그 한 줄은 「아바타 · 대상 · 동작 · 시각」 뿐이라 짧다. 전체 폭에
   한 줄씩 깔면 가운데가 텅 비어 오히려 성겨 보인다 - 열을 내리자마자 그게
   눈에 띄었다. 그래서 줄을 나란히 흘린다. 화면이 넓어질수록 열이 늘고,
   좁으면 한 열로 되돌아간다.

   줄 하나가 열 경계에서 잘리면 아바타와 시각이 갈라지므로 끊기를 막는다. */
@media (min-width: 1080px) {
  .erone-dashboard-wide .erone-activity { columns: 2; column-gap: var(--space-6); }
}

@media (min-width: 1560px) {
  .erone-dashboard-wide .erone-activity { columns: 3; }
}

.erone-dashboard-wide .erone-activity li { break-inside: avoid; }

@media (min-width: 1080px) {
  .erone-dashboard-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); }
}

@media (min-width: 1560px) {
  .erone-dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); }
}

/* SF-031: 아이콘 타일 + 값. 카드 높이를 맞추고 여백을 줄였다.
   예전 카드는 높이가 120px 이 넘는데 든 것은 숫자 하나와 라벨 둘이었다. */
.erone-kpi {
  display: flex;
  min-height: 84px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* 타일은 기본이 중립이다 - SF-032
   ---------------------------------------------------------------------
   네 장이 모두 파란 타일이면 그 파랑이 아무것도 뜻하지 않는다. 이 화면의
   머릿수 하나만 primary 로 두고, 나머지는 물러나 있는다. */
.erone-kpi-glyph {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  color: var(--text-soft);
  place-items: center;
}

.erone-kpi--primary .erone-kpi-glyph { background: var(--primary-soft); color: var(--primary); }

.erone-kpi-glyph .icon { width: var(--icon-md); height: var(--icon-md); }
.erone-kpi-body { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.erone-kpi-label { color: var(--text-soft); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.erone-kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.erone-kpi-foot { color: var(--text-muted); font-size: var(--text-xs); }

/* 지연이 있을 때만 붉게. 0 일 때도 붉으면 매일 경고가 켜져 있는 셈이다. */
.erone-kpi--alert .erone-kpi-glyph { background: var(--danger-soft); color: var(--danger); }
.erone-kpi--alert .erone-kpi-value { color: var(--danger); }

/* 인사말 한 줄 */
.erone-dash-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.erone-dash-intro h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.erone-dash-intro p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-dash-date { color: var(--text-muted); font-size: var(--text-sm); }

/* 구역(Section) - SF-032
   ---------------------------------------------------------------------
   모든 것을 카드로 감싸면 화면이 "흰 상자 모음" 이 된다. 안에 이미 카드가
   든 묶음은 바깥을 상자로 두르지 않는다. 아주 옅게 눌린 면과 제목,
   그리고 여백만으로 구역을 만든다.

   카드를 쓸 곳: 그 자체가 하나의 덩어리이고 따로 읽히는 것
   구역을 쓸 곳: 안에 이미 카드·표·목록이 들어 있는 묶음 */
.erone-section {
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.erone-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.erone-section > header h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* --- 파이프라인 칸 (SF-031) ---------------------------------------------
   단계마다 한 칸. 머리에만 단계색을 옅게 쓴다 - 카드까지 물들이면 화면이
   다섯 가지 색으로 나뉘고, 그 색들이 무언가를 뜻한다고 읽힌다. */
.erone-stage-board {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.erone-stage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

/* 단계 머리 - SF-032
   ---------------------------------------------------------------------
   칸마다 다른 빛깔로 칠하면 다섯 가지 색이 각각 무언가를 뜻한다고 읽힌다.
   실제로 색이 말하는 것은 "여기서 저기까지가 한 단계" 뿐이다.
   그래서 면은 중립으로 두고, 색은 점 하나와 위쪽 실선으로만 남긴다. */
.erone-stage-head {
  position: relative;
  display: grid;
  gap: 1px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-top: 2px solid var(--stage-color, var(--primary));
  border-radius: var(--radius-sm);
  background: var(--surface);
  grid-template-areas: "dot name" ". count" ". amount";
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-2);
}

.erone-stage-head .erone-stage-dot {
  grid-area: dot;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage-color, var(--primary));
}

.erone-stage-head .erone-stage-name { grid-area: name; }
.erone-stage-head .erone-stage-count { grid-area: count; }
.erone-stage-head .erone-stage-amount { grid-area: amount; }

/* 좁은 화면에서는 한 단계씩 한 줄을 쓴다. 두 칸으로 나누면 단계 머리와
   그 아래 카드가 옆 단계의 것과 섞여 어디까지가 한 단계인지 읽기 어렵다. */
@media (max-width: 560px) {
  .erone-stage-board { grid-template-columns: minmax(0, 1fr); }
}

.erone-stage-name { font-size: var(--text-sm); font-weight: 600; }
.erone-stage-count { color: var(--text-soft); font-size: var(--text-xs); }
.erone-stage-amount { color: var(--text-muted); font-size: var(--text-xs); }

.erone-stage-card {
  display: grid;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.erone-stage-card:hover { border-color: var(--primary); background: var(--primary-softer); }
.erone-stage-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.erone-stage-card strong {
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erone-stage-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.erone-stage-card-prob { color: var(--primary); font-weight: 600; }
.erone-stage-empty, .erone-stage-more {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* SF-031 2차: 카드를 그림자로 띄우지 않는다. 한 화면에 카드가 여덟 장
   있으면 그림자 여덟 개가 겹쳐 화면이 부옇게 뜬다. 테두리 하나면 충분하다. */
/* 카드 - SF-032
   ---------------------------------------------------------------------
   평면에 놓인 것은 선으로 나눈다. 그림자는 주지 않는다 - 카드마다 그림자가
   있으면 화면이 종이 더미처럼 보이고, 정작 떠 있는 것(dropdown·modal)이
   떠 보이지 않는다.

   hover 반응은 "누를 수 있는 것" 에만 준다. 누를 수 없는 카드가 hover 에
   반응하면 사람은 눌러 보고 아무 일도 없는 것을 겪는다. */
.erone-card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* 누를 수 있는 카드. 눌리는 것과 아닌 것이 한눈에 갈려야 한다. */
.erone-card--interactive,
.erone-deal,
.erone-project-card,
.erone-task-card {
  transition: border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.erone-card--interactive:hover,
.erone-deal:hover,
.erone-project-card:hover,
.erone-task-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  /* 1px 이다. 더 움직이면 목록 전체가 출렁이는 것처럼 보인다. */
  transform: translateY(-1px);
}

.erone-card--interactive:active,
.erone-deal:active,
.erone-project-card:active,
.erone-task-card:active { transform: translateY(0); }

/* 고른 것은 뜨는 것이 아니라 물드는 것이다. */
.erone-card--interactive.is-selected,
.erone-deal.is-selected,
.erone-project-card.is-selected,
.erone-task-card.is-selected {
  border-color: var(--primary);
  background: var(--primary-softer);
  box-shadow: none;
  transform: none;
}

.erone-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* 섹션 제목이 본문과 같은 13px 이면 위계가 없다. 위계는 굵기가 아니라
   크기가 만든다 - 굵게만 하면 화면이 온통 진해진다. */
.erone-card h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.erone-card h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.erone-pipeline, .erone-task-list, .erone-followup-list, .erone-activity, .erone-mini-list { list-style: none; margin: 0; padding: 0; }
.erone-pipeline li, .erone-task-list li, .erone-followup-list li, .erone-activity li, .erone-mini-list li {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm);
}
.erone-pipeline li:last-child, .erone-task-list li:last-child, .erone-followup-list li:last-child,
.erone-activity li:last-child, .erone-mini-list li:last-child { border-bottom: 0; }

.erone-pipeline-label { width: 108px; flex: none; color: var(--text-soft); font-size: var(--text-sm); }
.erone-pipeline-bar { height: 8px; flex: 1; border-radius: var(--radius-pill); background: var(--surface-strong); }
.erone-pipeline-bar > span { display: block; height: 100%; min-width: 3px; border-radius: var(--radius-pill); }
.erone-pipeline-count { width: 26px; flex: none; text-align: right; font-weight: 600; }
.erone-pipeline-amount { width: 74px; flex: none; color: var(--text-muted); text-align: right; font-size: var(--text-xs); }

.erone-task-list button, .erone-followup-list button, .erone-mini-list button {
  display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0; text-align: left;
}
.erone-task-list small, .erone-followup-list small { color: var(--text-muted); font-size: var(--text-xs); }
.erone-due.is-late { color: var(--red); font-weight: 600; }
.erone-flag { flex: none; color: var(--orange); font-size: var(--text-xs); }
.erone-activity-action { font-weight: 600; }
.erone-activity-entity { color: var(--text-soft); }
.erone-activity time { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }

/* --- 영업기회 칸반 --- */

/* --- 칸반 가로 스크롤 --- */

.erone-kanban-viewport { position: relative; }

/* 보드 높이를 화면 안으로 가둔다. 그래야 가장자리 페이드·스크롤 안내·
   종료 요약 칩이 항상 눈에 들어오고, 툴바를 잃지 않고 카드를 훑을 수 있다.
   세로로 넘치는 카드는 보드 안에서 스크롤된다. */
.erone-kanban-scroll {
  overflow: auto;
  max-height: calc(100vh - 210px);
  min-height: 320px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

.erone-kanban-scroll:focus-visible { border-radius: var(--radius); outline: 2px solid var(--primary); outline-offset: 2px; }

/* 스크롤바를 항상 보이게 둔다. 가로로 더 있다는 첫 번째 단서다. */
.erone-kanban-scroll::-webkit-scrollbar { height: 8px; }
.erone-kanban-scroll::-webkit-scrollbar-track { border-radius: var(--radius-pill); background: var(--surface-strong); }
.erone-kanban-scroll::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--border-strong); }
.erone-kanban-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* 가장자리 페이드. 마지막 컬럼이 잘린 게 아니라 이어진다는 신호다.
   data-scroll="none"(스크롤 불필요)일 때는 어느 쪽도 켜지 않는다. */
.erone-kanban-viewport::before,
.erone-kanban-viewport::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 14px;
  width: 40px;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.erone-kanban-viewport::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.erone-kanban-viewport::after { right: 10px; background: linear-gradient(to left, var(--bg), transparent); }

.erone-kanban-viewport[data-scroll="start"]::after,
.erone-kanban-viewport[data-scroll="middle"]::after,
.erone-kanban-viewport[data-scroll="end"]::before,
.erone-kanban-viewport[data-scroll="middle"]::before { opacity: 1; }

/* 컬럼이 화면 높이만큼 늘어나면 보드 아래 안내는 스크롤 밖으로 밀린다.
   가장자리 페이드 위에 떠 있는 작은 알약으로 둬 항상 보이게 한다. */
.erone-kanban-hint {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 16px;
  display: none;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.erone-kanban-viewport[data-scroll="start"] .erone-kanban-hint,
.erone-kanban-viewport[data-scroll="middle"] .erone-kanban-hint { display: block; }

/* 컬럼은 자기 내용만큼만 높다. stretch 로 두면 빈 컬럼이 가장 긴 컬럼을
   따라 늘어나, 카드 한 장 없는 칸이 화면 아래까지 회색으로 이어진다.
   끌어다 놓을 자리는 남겨야 하므로 최소 높이만 준다. */
.erone-kanban { display: flex; align-items: flex-start; min-height: 220px; gap: 12px; }

/* 마지막 컬럼 뒤에 여백을 둬 화면 끝에 딱 붙어 잘린 것처럼 보이지 않게 한다. */
.erone-kanban::after { width: 4px; flex: none; content: ""; }

/* 컬럼은 카드보다 한 단계 뒤로 물러난다. 페이지 배경(--bg)보다 약간 어두운
   --surface-strong 를 써서, 흰 카드가 전면 콘텐츠로 읽히게 한다.
   테두리를 없애 '박스 안의 박스'로 보이지 않게 했다. */
.erone-kanban-column {
  display: flex;
  width: 288px;
  min-width: 288px;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.erone-kanban-column.is-dragover { border-color: var(--stage-color, var(--primary)); background: var(--primary-soft); }
.erone-kanban-column.is-closed { opacity: 0.94; }

/* 헤더 한 줄: 색상 dot · 단계명 · 건수 · (밀어서) 합계 금액 */
.erone-kanban-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 12px 9px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-strong);
  font-size: var(--text-sm);
}

.erone-stage-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--stage-color, var(--text-muted)); }
.erone-kanban-name { min-width: 0; overflow: hidden; color: var(--text); font-size: var(--text-sm); font-weight: 700; letter-spacing: -0.01em; text-overflow: ellipsis; white-space: nowrap; }

.erone-kanban-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.erone-kanban-total { margin-left: auto; color: var(--text-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.erone-kanban-body { display: flex; min-height: 72px; flex: 1; flex-direction: column; gap: 8px; padding: 2px 10px 10px; }

/* --- 카드 --- */

.erone-deal {
  position: relative;
  padding: 11px 12px 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow 0.12s ease, transform 0.12s ease;
}

/* 단계 색은 왼쪽 얇은 악센트로만 쓴다. 카드 전체를 물들이지 않는다. */
.erone-deal::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--stage-color, var(--border-strong));
  content: "";
}

.erone-deal:focus-within { border-color: var(--primary); }
.erone-deal:has(.erone-deal-title:focus-visible) { box-shadow: 0 0 0 2px var(--primary-soft); }
.erone-deal-title:focus-visible { border-radius: var(--radius-xs); outline: 2px solid var(--primary); outline-offset: 2px; }

.erone-deal.is-dragging { opacity: 0.5; }
.erone-deal[draggable="true"] { cursor: grab; }

/* 1) 고객사 — 보조 정보. 메뉴 버튼과 같은 줄에 둬 제목과 부딪히지 않게 한다. */
.erone-deal-head { display: flex; min-height: 20px; align-items: flex-start; gap: 6px; }

.erone-deal-company {
  min-width: 0;
  flex: 1;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2) 기회명 — 카드의 핵심 제목 */
.erone-deal-title {
  display: block;
  width: 100%;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
}

.erone-deal-title:hover { color: var(--primary); }

/* 3) 예상금액 — 제목 다음 단계의 강조 */
.erone-deal-amount {
  margin: 6px 0 0;
  color: var(--text);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 4) 확률 · 담당자 */
.erone-deal-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }

.erone-deal-prob {
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--stage-color, var(--primary)) 13%, var(--surface));
  color: color-mix(in srgb, var(--stage-color, var(--primary)) 78%, var(--text));
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* 담당자 칩은 공통 .erone-person 을 쓴다. 여기서는 폭 제한만 얹는다. */
.erone-deal-owner { max-width: 100%; }
.erone-deal-owner.is-empty { color: var(--text-muted); font-size: var(--text-xs); }

.erone-deal-owner.is-empty { color: var(--text-muted); font-style: normal; }
.erone-deal-owner.is-empty::before { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); content: ""; }

/* 5) 예상 수주일 + 6) 주의 상태 */
.erone-deal-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

.erone-deal-due { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.erone-deal-due-icon { width: var(--icon-xs); height: var(--icon-xs); flex: none; }
.erone-deal-due b { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); }
.erone-deal-due.is-soon { color: var(--orange); }
.erone-deal-due.is-soon b { background: var(--orange-soft); color: var(--orange); }
.erone-deal-due.is-over { color: var(--red); }
.erone-deal-due.is-over b { background: var(--red-soft); color: var(--red); }
.erone-deal-foot .erone-status { margin-left: auto; }

/* 6) 카드 메뉴 — 고객사 줄과 같은 높이에 두고 제목·금액과 겹치지 않게 한다. */
.erone-card-menu { position: relative; flex: none; margin-top: -2px; }
.erone-card-menu .erone-icon-button { width: 24px; height: 24px; color: var(--text-muted); }
.erone-deal:hover .erone-card-menu .erone-icon-button { color: var(--text-soft); }
.erone-card-menu .erone-nav-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* 메뉴가 열린 카드를 형제보다 위로 올린다.

   .erone-deal:hover 에 transform 이 있다(위 .erone-card--interactive 묶음).
   transform 은 쌓임 맥락을 새로 만들므로, 아래 카드에 마우스가 닿는 순간
   그 카드가 새 맥락이 되어 **문서 순서상 뒤** 라는 이유만으로 위 카드의
   메뉴를 덮는다. 메뉴에 적힌 z-index 는 그 바깥에서는 아무 힘이 없다 -
   다른 맥락끼리의 순서는 맥락을 만든 요소의 z-index 가 정한다.

   그래서 메뉴가 아니라 **카드**를 올린다. :has 를 못 읽는 브라우저를 위해
   :focus-within 도 같이 둔다 - 메뉴는 버튼을 눌러서 여는 것이라 그때
   포커스가 카드 안에 있다. */
.erone-deal:focus-within,
.erone-deal:has(.erone-menu:not([hidden])),
.erone-task-card:focus-within,
.erone-task-card:has(.erone-menu:not([hidden])),
.erone-project-card:focus-within,
.erone-project-card:has(.erone-menu:not([hidden])) { z-index: 50; }

.erone-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  min-width: 168px;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.erone-menu-label { margin: 5px 7px 2px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; }
.erone-menu button { padding: 6px 8px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); cursor: pointer; font-size: var(--text-sm); text-align: left; }
.erone-menu button:hover { background: var(--surface-strong); }

.erone-closed-summary { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }

/* --- 우측 상세 패널 --- */

.erone-panel {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.erone-panel-scrim { display: none; }

/* 머리는 본문과 함께 흐르지 않는다. 본문만 스크롤하고 대상 이름은 늘 보인다.
 * 높이를 고정해 대상이 바뀌어도 아래 내용이 위아래로 흔들리지 않게 한다. */
.erone-panel-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* 종류(작게)와 대상 이름(읽을 수 있게)을 한 줄에 둔다. 이름이 길면 줄바꿈이
 * 아니라 말줄임으로 자른다 - 바 높이가 대상마다 달라지면 아래 본문이 흔들린다. */
.erone-panel-bar-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.erone-panel-bar-kind { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; }
.erone-panel-bar-subject {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erone-panel-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: var(--space-5); }
.erone-panel-head h2 { margin: 4px 0 6px; font-size: var(--text-lg); }
.erone-panel-identity { display: flex; align-items: flex-start; gap: 11px; }
.erone-panel-identity-copy { min-width: 0; flex: 1; }
.erone-panel-identity-copy h2 { margin: 0 0 5px; }

.erone-panel-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  place-items: center;
}

/* 세부 목록 전에 규모를 먼저 읽히는 한 줄 요약. */
.erone-panel-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.erone-panel-stats span { display: flex; flex-direction: column; color: var(--text-muted); font-size: var(--text-xs); gap: 1px; }
.erone-panel-stats b { color: var(--text); font-size: var(--text-sm); }

.erone-badge--warn { background: var(--orange-soft); color: var(--orange); }
.erone-field dd a { color: var(--primary); text-decoration: none; }
.erone-field dd a:hover { text-decoration: underline; }
.erone-panel-context { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-panel-badges { display: flex; gap: 6px; margin: 0 0 10px; }
.erone-panel-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.erone-panel-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.erone-panel-section h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: var(--text-sm); }
.erone-panel-section h3 b {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}
.erone-panel-section p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); }

/* 패널 안에서는 카드가 카드가 아니다 - SF-032 §12
 * ---------------------------------------------------------------------
 * 패널 자체가 이미 하나의 면이다. 그 안에서 또 상자를 그리면 테두리가 두
 * 겹으로 보이고, 묶음마다 여백이 달라 리듬이 깨진다. 어떤 조각이 패널로
 * 들어오든(영업활동·견적·앞으로 들어올 것들) 같은 방식으로 앉힌다.
 *
 * 규칙을 쓰는 쪽(component)이 아니라 담는 쪽(panel)에 둔다. 조각은 자기가
 * 어디에 그려지는지 모르는 편이 낫다 - 영업기회 패널과 프로젝트 작업공간
 * 양쪽에 그려지는 견적 묶음이 그래서 카드로 남아 있었다.
 *
 * 안쪽의 개별 항목(.erone-quote-card 등)은 그대로 둔다. 그것들은 묶음이
 * 아니라 낱개이고, 낱개는 경계가 있어야 센다. */
.erone-panel-body .erone-card,
.erone-panel-body > .card {
  margin-top: var(--space-5);
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* --- 연결된 견적 (Phase 2-D-0B) ---
 *
 * 카드는 ER ONE 셸 디자인을 따른다. 다만 견적 편집기(견적 자동화)로 넘어갈 때
 * 이질감이 크지 않도록 여백과 모서리는 그쪽 파스텔 카드와 맞춰 둔다. */
.erone-quote-section { margin-top: 14px; }
.erone-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.erone-quote-head h3 { margin: 0; font-size: var(--text-sm); }
.erone-quote-list { display: grid; gap: 10px; margin-top: 10px; }

.erone-quote-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.erone-quote-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.erone-quote-card-title { display: grid; gap: 2px; min-width: 0; }
.erone-quote-card-title strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.erone-quote-card-title span { color: var(--text-muted); font-size: var(--text-xs); }
.erone-quote-card-total { flex: none; font-size: var(--text-base); text-align: right; }

/* 가려진 금액. 0 원처럼 보이면 안 되므로 숫자 자리를 점으로 채운다. */
.erone-quote-masked { color: var(--text-muted); letter-spacing: 2px; }

.erone-quote-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin: 0; }
.erone-quote-card-meta div { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.erone-quote-card-meta dt { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
.erone-quote-card-meta dd { overflow: hidden; margin: 0; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }

.erone-quote-flag { color: var(--text-muted); font-size: var(--text-xs); }
.erone-quote-flag.is-ready { color: var(--success, var(--success)); }

.erone-quote-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erone-quote-card-actions .erone-button { text-decoration: none; }

/* 서비스가 죽었거나 설정되지 않았을 때. 카드는 그대로 두고 위에 얹는다. */
.erone-quote-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-sm);
}
.erone-quote-notice.is-error { background: var(--danger-soft, var(--danger-soft)); color: var(--danger, var(--danger)); }

/* 좁은 화면에서는 한 줄에 하나씩. 두 칸으로 두면 값이 잘린다. */
@media (max-width: 640px) {
  .erone-quote-card-meta { grid-template-columns: minmax(0, 1fr); }
  .erone-quote-card-actions .erone-button { flex: 1 1 auto; text-align: center; }
}

/* --- 영업활동 (SF-021) ---
 *
 * 영업사원이 매일 보는 자리다. 그래서 여기서 아끼는 것은 픽셀이 아니라
 * 시선이다. 활동 한 건에서 눈이 먼저 닿아야 하는 것은 "언제 · 무엇을" 이고,
 * 그 다음이 본문이다. 라벨은 작고 조용하게 둔다.
 */
/* 패널의 다른 묶음과 같은 간격으로 앉는다(.erone-panel-section 이 준다).
 * 여기서 margin 을 따로 주면 이 묶음만 다른 리듬으로 떨어진다. */
.erone-activity-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.erone-activity-head-bar h3 { margin: 0; font-size: var(--text-sm); }

/* 등록 폼. 모달이 아니라 자리에 그대로 펼친다. */
.erone-activity-form {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
/* 폼 자신의 너비로 줄을 정한다.
   화면 너비(@media)로 재면 안 된다. 이 폼은 우측 상세 패널 안에서도 열리는데,
   창은 넓고 패널은 좁다. auto-fit 은 그 좁은 폭에서 두 칸을 만들고, 칸이 셋인
   줄은 마지막 하나가 반쪽으로 혼자 남았다 - 화면이 깨진 것처럼 보였다.
   좁으면 한 줄에 하나씩 쌓는다. */
.erone-activity-form { container-type: inline-size; }
.erone-activity-form-row {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@container (max-width: 540px) {
  .erone-activity-form-row { grid-template-columns: minmax(0, 1fr); }
}
.erone-activity-form .field { display: grid; gap: 4px; min-width: 0; }
.erone-activity-form .field > span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
/* 내용 칸은 넉넉해야 한다. 좁으면 한 줄로 끝내고 만다. */
.erone-activity-textarea { min-height: 96px; resize: vertical; }

/* 묶음 안쪽 간격. 폼 전체가 쓰는 10px 과 같은 값이다. */
.erone-activity-group { display: grid; gap: 10px; }

/* 묶음 사이 간격은 gap 이 아니라 각자의 padding 5px 으로 만든다(5+5=10px).
 *
 * 전에는 접힘 영역이 gap: 10px 이었고 summary 만 padding: 4px 0 을 더 갖고
 * 있었다. 그래서 같은 10px 을 줬는데 접기 줄 위아래만 14px 이 됐다 - 칸
 * 간격이 안 맞아 보인 이유다. 간격을 gap 과 padding 두 군데서 정하면
 * 반드시 어긋나므로, 여기서는 padding 한 쪽으로만 정한다.
 *
 * summary 는 눌러야 하는 줄이므로 그 5px 이 클릭 영역으로도 쓰인다. */
.erone-activity-more[open] { display: grid; gap: 0; }
.erone-activity-more > summary,
.erone-activity-more > .erone-activity-group { padding: 5px 0; }
.erone-activity-more > .erone-activity-group:last-child { padding-bottom: 0; }
.erone-activity-more > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }

/* 옅은 구분선. 기본 · 고객 반응 · 다음 할 일 세 묶음을 눈으로 나눈다.
 * 선 위아래로 5px 씩 남으므로 선이 두 묶음 가운데에 선다. */
.erone-activity-more { border-top: 1px solid var(--border-soft); padding-top: 5px; }
.erone-activity-group + .erone-activity-group { border-top: 1px solid var(--border-soft); }
.erone-activity-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* 유형 칩. 고객사 화면에서 "전화만" 보고 싶은 때가 실제로 있다. */
.erone-activity-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.erone-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}
.erone-chip.is-on { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); }

.erone-activity-list { display: grid; gap: 10px; margin-top: 10px; }
.erone-activity-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.erone-activity-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-xs); }
.erone-activity-head time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.erone-activity-head .spacer { flex: 1 1 auto; }
.erone-activity-who { color: var(--text); font-weight: 700; }

/* 유형 배지. 색으로 가르되 채도를 낮춘다 - 목록이 알록달록하면 본문이 묻힌다. */
.erone-activity-type {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
/* 유형이 여섯인데 색도 여섯이면, 그 색들이 각각 무언가를 뜻한다고 읽힌다.
   실제 구분은 "만나서 / 말로 / 글로" 정도라 세 갈래면 충분하다.
   새 색을 만들지 않고 이미 뜻이 정해진 역할 토큰에 얹는다. */
.erone-activity-type.is-visit,
.erone-activity-type.is-online_meeting { background: var(--success-soft); color: var(--success); }
.erone-activity-type.is-phone { background: var(--warning-soft); color: var(--warning); }
.erone-activity-type.is-proposal,
.erone-activity-type.is-technical_support { background: var(--info-soft); color: var(--info); }
.erone-activity-type.is-email,
.erone-activity-type.is-other { background: var(--surface-strong); color: var(--text-muted); }

.erone-activity-parent { color: var(--text-muted); font-size: var(--text-xs); }
.erone-activity-subject { font-size: var(--text-sm); }
.erone-activity-content { margin: 0; font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* SF-044: 본문과 메모 묶음, 그리고 메모 줄끼리를 옅은 선으로 나눈다.
   간격만으로는 "고객 반응" 과 "다음 할 일" 이 한 덩어리로 읽힌다 - 둘은
   성격이 다른 정보이고, 다음 할 일은 내일의 할 일이 되는 줄이다.
   입력 폼(.erone-activity-group)에 쓴 것과 같은 선이다. */
.erone-activity-notes { display: grid; gap: 0; margin: 5px 0 0; border-top: 1px solid var(--border-soft); }
.erone-activity-note { display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; }
.erone-activity-note:last-child { padding-bottom: 0; }
.erone-activity-note + .erone-activity-note { border-top: 1px solid var(--border-soft); }
.erone-activity-note dt { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.erone-activity-note dd { margin: 0; font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
/* 다음 할 일은 한 칸 도드라지게. 이 줄이 내일의 할 일이 된다. */
.erone-activity-note.is-next dd { font-weight: 600; }

/* SF-044: 쌓인 견적을 접는다. 활동 기록의 .erone-activity-more 와 같은 모양이라
   사용자가 두 번 배우지 않는다. */
.erone-quote-more { margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 8px; }

/* SF-055: 아직 내용이 없는 견적은 카드가 아니라 한 줄.
   자리를 거의 안 먹으면서 "여기 하나 더 있다" 는 사실과 할 수 있는 일은
   그대로 남긴다. 좁아지면 버튼 줄이 아래로 내려간다. */
.erone-quote-rows { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

/* SF-056: 한 줄기 흐름. 영업활동 카드와 나란히 서므로 같은 리듬을 쓰되,
   글·업무 줄은 더 얇다 - 본문이 아니라 "이런 것이 있었다" 는 표시다. */
.erone-stream-entry { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border-soft); }
.erone-stream-entry > header { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.erone-stream-entry > header strong { font-weight: 600; }
.erone-stream-entry > header time { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.erone-stream-kind { padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-dark); font-size: var(--text-xs); font-weight: 600; }
.erone-stream-entry[data-stream-kind="task"] .erone-stream-kind { background: var(--surface-strong); color: var(--text-muted); }
.erone-stream-title { padding: 0; background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: 600; text-align: left; }
.erone-stream-title:hover { color: var(--primary); }
.erone-stream-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-quote-row {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface-soft); font-size: var(--text-xs);
}
.erone-quote-row > strong { font-weight: 600; }
.erone-quote-row-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.erone-quote-more > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }
.erone-quote-more[open] > summary { margin-bottom: 8px; }

.erone-activity-files { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--text-sm); }
.erone-activity-actions { display: flex; justify-content: flex-end; gap: 8px; }
.erone-activity-more-row { display: flex; justify-content: center; margin-top: 10px; }

/* 후속조치 상태 배지. 지연은 눈에 띄어야 하고, 완료는 조용해야 한다.
   이름이 .erone-followup-list(대시보드의 <ul>)와 겹치지 않게 주의한다 -
   겹쳤을 때 이 배지의 둥근 모서리가 목록 전체에 걸려 카드 뒤에 커다란
   회색 덩어리가 비쳤다. */
.erone-followup {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.erone-followup.is-today { background: var(--warning-soft); color: var(--warning); }
.erone-followup.is-overdue { background: var(--danger-soft); color: var(--danger); }
.erone-followup.is-done { background: var(--success-soft); color: var(--success); }
.erone-followup.is-cancelled { background: var(--surface-strong); color: var(--text-muted); }

/* --- 대시보드 카드 (후속조치 · 보류 · 최근 영업활동) ---
   SF-035: 이 셋과 오늘 일정은 여백 없는 옛 .card 를 쓰면서 <h3> 을 바로
   넣고 있었다. .card 는 .card-head/.card-body 자식이 여백을 주는 구조라,
   그 자식이 없으면 제목이 테두리에서 1px 지점에 붙는다. 같은 대시보드의
   다른 카드(.erone-card, 안쪽 여백 16px)와 나란히 놓이니 눈에 띄었다.
   이제 넷 다 .erone-card 를 쓴다 - 제목 크기·여백 규칙을 그것이 갖고
   있으므로 여기서 h3 를 따로 손볼 필요가 없다. */
.erone-followup-card ul,
.erone-hold-card ul,
.erone-recent-activity-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.erone-followup-group + .erone-followup-group { margin-top: 12px; }
.erone-followup-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--text-xs); color: var(--text-muted); }
.erone-followup-group h4 span {
  padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--surface-strong); font-size: var(--text-xs);
}
.erone-followup-group.is-overdue h4 span { background: var(--danger-soft); color: var(--danger); }
.erone-followup-group.is-today h4 span { background: var(--warning-soft); color: var(--warning); }

.erone-followup-row,
.erone-hold-row,
.erone-recent-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.erone-followup-main {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.erone-followup-main strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-followup-main span { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-followup-date { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.erone-followup-date.is-overdue { color: var(--danger); font-weight: 700; }

@media (max-width: 640px) {
  /* 모바일에서는 한 줄에 하나씩. 영업활동 등록은 이동 중에 가장 많이 쓴다. */
  .erone-activity-form-row { grid-template-columns: minmax(0, 1fr); }
  .erone-activity-note { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .erone-activity-textarea { min-height: 120px; }
  /* 저장 버튼은 엄지로 닿는 자리에 넓게 둔다. */
  .erone-activity-form-actions { flex-direction: column-reverse; }
  .erone-activity-form-actions .button { width: 100%; }
  .erone-activity-head-bar .button { flex: none; }
}

/* 연결된 계약·프로젝트. 종류 라벨은 작게, 항목은 누를 수 있게. */
.erone-linked-kind { margin: 10px 0 5px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.erone-linked-kind:first-of-type { margin-top: 0; }
.erone-linked-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.erone-linked-list .erone-link { text-align: left; }

/* --- 패널 안의 댓글·첨부·이력 ---
 *
 * 모달과 같은 렌더러를 쓰지만 폭이 400px 이라 여백과 글자를 조금 줄인다.
 * 조작 방식은 그대로다 - 같은 화면을 두 가지로 배우게 하지 않는다.
 */
.erone-panel-activity { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.erone-panel-activity-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 9px;
}
.erone-panel-activity-head:first-child { margin-top: 0; }
.erone-panel-activity-head h3 { margin: 0; font-size: var(--text-sm); }
.erone-panel-activity-head span {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.erone-panel-activity-head .button { margin-left: auto; }

.task-stream.is-compact .task-timeline-comment,
.task-stream.is-compact .task-timeline-event { gap: 8px; }
.task-stream.is-compact .task-comment-body { font-size: var(--text-sm); }
.task-stream.is-compact .task-replies { --reply-depth: 1; }

/* 작성줄은 모달과 같은 .task-inline-composer 를 그대로 쓴다. 다만 그쪽의
 * margin: 0 -26px 은 모달 본문 padding(26px)에 맞춰 둔 값이다. 패널 본문은
 * padding 이 16px 이라 그대로 두면 좌우로 각각 10px 씩 삐져나가고,
 * 패널 본문에 가로 스크롤이 10px 생긴다(실측). 패널 padding 에 맞춘다. */
.erone-panel-composer { margin-top: 10px; margin-inline: calc(var(--space-5) * -1); }
.erone-panel-composer .textarea { font-size: var(--text-sm); }

.erone-panel-files { display: grid; gap: 6px; }

.erone-fields { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.erone-field dt { color: var(--text-muted); font-size: var(--text-xs); }
.erone-field dd { margin: 2px 0 0; font-size: var(--text-sm); }

.erone-mini-list li { flex-wrap: wrap; }
.erone-mini-list span, .erone-mini-list time { color: var(--text-muted); font-size: var(--text-xs); }

.erone-scrim { display: none; }

/* 패널을 본문 옆에 도킹할지, 위에 띄울지는 "도킹하고 남는 폭" 으로 정한다.
 *
 * 예전 기준은 1280px 이었다. 그런데 1440 에서 도킹하면 본문에 남는 폭이
 *   1440 - 252(사이드바) - 400(패널) = 788px
 * 이라 업무 상태 컬럼 7개 중 3개만 보였다. 상세를 보려고 열었는데 정작
 * 목록을 잃는다.
 *
 * 1600 부터 도킹하면 남는 폭이 948px 로 4~5개가 남는다. 1440 은 오버레이가
 * 되어 보드가 눌리지 않는다. 실측으로 정한 값이다.
 */
@media (min-width: 1600px) {
  .erone-shell.has-panel { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--erone-panel-width); }
  .erone-panel { position: sticky; top: 0; height: 100vh; }
}

/* 1600px 미만: 오버레이 드로어. 같은 DOM 을 CSS 로만 바꾼다. */
@media (max-width: 1599px) {
  .erone-panel {
    position: fixed;
    z-index: 60;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    animation: erone-slide-in 0.18s ease;
    box-shadow: var(--shadow-lg);
  }

  .erone-panel-scrim {
    position: fixed;
    z-index: 55;
    inset: 0;
    display: block;
    border: 0;
    background: var(--scrim);
  }
}

@keyframes erone-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* 태블릿 이하: 사이드바를 드로어로 전환한다. */
@media (max-width: 980px) {
  .erone-shell { grid-template-columns: minmax(0, 1fr); }

  .erone-sidebar {
    position: fixed;
    z-index: 70;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--motion-normal) var(--ease-standard);
  }

  .erone-shell.is-nav-open .erone-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .erone-shell.is-nav-open .erone-scrim { position: fixed; z-index: 65; inset: 0; display: block; border: 0; background: var(--scrim); }
  .erone-header .erone-menu-toggle { display: inline-grid; }
  /* 좁은 화면에서는 제목이 가장 먼저 읽혀야 한다. 표식은 자리만 차지한다. */
  .erone-page-mark { display: none; }
  .erone-header { padding: 10px 16px; }
  .erone-content { padding: 16px; }
  .erone-header-title p { display: none; }
}

/* 모바일: 표를 카드로 바꾼다. 조회와 간단 업데이트를 우선한다. */
@media (max-width: 720px) {
  /* 헤더가 한 줄에 다 들어가지 않는다. 검색을 아래 줄로 내려 온전한 폭을 준다. */
  .erone-header { flex-wrap: wrap; padding: 10px 14px; }
  .erone-header-title { flex: 1; }
  .erone-search { order: 3; max-width: none; flex-basis: 100%; }
  .erone-header-actions { margin-left: auto; }
  /* 좁은 화면에서는 주 버튼을 아이콘만 남긴다.
     화면 제목이 가장 먼저 읽혀야 하므로, + 가 제목보다 커 보이면 안 된다. */
  .erone-header-actions .erone-header-create span { display: none; }
  .erone-header-actions .erone-header-create {
    width: var(--control-height-sm);
    padding: 0;
    justify-content: center;
  }

  .erone-toolbar { gap: 7px; }
  .erone-field-search { width: 100%; min-width: 0; }
  /* 좁은 화면에서는 기간 필터가 눌려 등록 버튼과 겹친다.
     기간(시작 ~ 종료)을 한 줄로 내려 온전한 폭을 주고, 주 버튼도 제 줄을 갖게 한다. */
  /* 한 줄에 전부 밀어 넣으면 날짜 칸이 아이콘만 남을 만큼 눌린다.
     선택 상자는 나눠 쓰고, 기간 필터는 통째로 제 줄을 갖는다. */
  .erone-toolbar .erone-select { flex: 1 1 44%; min-width: 0; max-width: 100%; }
  .erone-toolbar-range { display: flex; flex: 0 0 100%; width: 100%; }
  .erone-field-range { flex: 1 1 0; min-width: 0; }
  .erone-field-range .erone-datefield { width: 100%; min-width: 0; }
  .erone-field-range .erone-input { width: 100%; min-width: 0; }
  /* 주 버튼은 제 줄을 갖는다. 기간 필터와 겹치지 않는다. */
  .erone-spacer { flex-basis: 100%; height: 0; }
  .erone-toolbar > .erone-button--primary { width: 100%; }

  .erone-table-wrap { border: 0; background: none; }
  .erone-table, .erone-table tbody, .erone-table tr, .erone-table td { display: block; width: 100%; }
  .erone-table thead { display: none; }

  .erone-table tr {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .erone-table td { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px solid var(--border); text-align: right; }
  .erone-table td:last-child { border-bottom: 0; }
  /* 값이 없는 칸은 카드에서 줄만 차지한다. 라벨만 남기지 않고 숨긴다. */
  .erone-table td:empty { display: none; }
  .erone-table td::before { content: attr(data-label); color: var(--text-muted); font-size: var(--text-xs); text-align: left; }
  .erone-table .is-numeric { text-align: right; }

  /* 예전 화면이 쓰는 .data-table 도 같은 방식으로 펼친다.
   *
   * .table-wrap 에 overflow-x: auto 가 있는데도 문서 전체가 가로로 밀렸다.
   * 420 에서 사용자 관리 표가 642px 라 +163px 넘쳤다. 조상에 min-width: 0 을
   * 줘도 해결되지 않는다(실측). 표를 줄이면 글자가 읽을 수 없게 되므로
   * 위 .erone-table 과 똑같이 한 행을 한 장의 카드로 펼친다. */
  .table-wrap { overflow-x: visible; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }

  .data-table tr {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .data-table tbody tr:last-child { margin-bottom: 0; }

  .data-table td {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }
  .data-table tr td:last-child { border-bottom: 0; }
  .data-table td:empty { display: none; }
  .data-table td::before {
    flex: none;
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: left;
  }
  /* 라벨이 없는 칸(사용자 이름·작업 버튼)은 한 줄을 통째로 쓴다. */
  .data-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .data-table td:not([data-label])::before { display: none; }
  .data-table .row-actions { justify-content: flex-end; width: 100%; }
  .data-table .cell-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .data-table .cell-title span { min-width: 0; }
  .data-table .cell-title strong, .data-table .cell-title span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 좁은 화면에서는 컬럼이 화면에 한 장씩 맞아 떨어지게 스냅한다.
     오른쪽을 조금 남겨 다음 컬럼이 있다는 것을 보이게 한다. */
  .erone-kanban-scroll { max-height: calc(100vh - 260px); scroll-snap-type: x proximity; }
  .erone-kanban-column { width: 82vw; min-width: 82vw; scroll-snap-align: start; }
  .erone-kanban-viewport::before, .erone-kanban-viewport::after { width: 24px; }

  /* 좁은 화면에서 힌트가 카드 위에 떠 있으면 우선순위·D-day 배지를 가린다.
     보드 아래 한 줄로 내린다. 겹치지 않으면 반투명으로 숨길 이유도 없다. */
  .erone-kanban-viewport { position: relative; padding-bottom: 22px; }
  .erone-kanban-hint {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media print {
  .erone-sidebar, .erone-header, .erone-toolbar, .erone-panel, .erone-panel-scrim, .erone-scrim { display: none !important; }
  .erone-shell { display: block; }
  .erone-content { padding: 0; }
  .erone-card, .erone-kpi { box-shadow: none; break-inside: avoid; }
}

.erone-kanban-column.is-closed { background: var(--surface-strong); }
.erone-board-note { margin: 0 0 10px; color: var(--text-muted); font-size: var(--text-sm); }

.erone-select--inline { padding: 4px 6px; border-color: transparent; background: transparent; font-size: var(--text-sm); }
.erone-select--inline:hover, .erone-select--inline:focus { border-color: var(--border); background: var(--surface); }

/* 목록 보기의 행 액션은 카드 메뉴와 위치 기준이 다르다. */
.erone-row-actions { position: relative; }
.erone-table .erone-card-menu { margin: 0; }

/* ==========================================================================
   ER ONE 계약 · 프로젝트 (Phase 2-B)
   Phase 2-A 와 같은 토큰만 쓴다. 새 색상 값을 도입하지 않는다.
   ========================================================================== */

/* --- 공통 --- */

.erone-cell-sub { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-toolbar-range { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.erone-field-range { display: inline-flex; align-items: center; min-width: 0; }
.erone-field-range .erone-input { padding: 6px 8px; font-size: var(--text-sm); }
.erone-range-sep { flex: 0 0 auto; color: var(--text-muted); font-size: var(--text-xs); }

/* --- 날짜 입력 ---------------------------------------------------------------
   브라우저 기본 날짜 입력은 표시 형식을 브라우저 언어가 정한다(mm/dd/yyyy 등).
   ER ONE 은 어디서나 YYYY-MM-DD 로 보여야 하므로, 네이티브 입력의 숫자만
   투명하게 감추고 그 위에 우리가 만든 텍스트를 겹친다.
   달력 아이콘과 선택기는 그대로 살아 있다 - 값 자체는 건드리지 않는다.

   지원 기준(ER ONE Beta): Chrome 최신 / Edge 최신 / Android Chrome.

   Graceful fallback
     숫자를 감추는 규칙에 :has(+ .erone-datefield-text) 조건을 건다. 즉
     "겹쳐 놓을 글자가 실제로 옆에 있을 때만" 네이티브 숫자를 감춘다.
       - :has() 를 모르는 브라우저  -> 규칙이 통째로 무시된다.
                                      네이티브 형식(mm/dd/yyyy 등)이 그대로 보이고 입력은 정상이다.
       - 겹침 span 이 없는 경우     -> 역시 감추지 않는다.
     어느 쪽이든 "글자가 안 보여 값을 못 읽는 칸"이 생기지 않는다.
     최악의 경우가 "형식이 우리 표준과 다르게 보인다" 이지 "쓸 수 없다" 가 아니다. */

.erone-datefield { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.erone-datefield-input { width: 100%; }
/* 숫자 부분만 숨긴다. 달력 아이콘은 color 를 따르지 않으므로 그대로 보인다. */
.erone-datefield-input:has(+ .erone-datefield-text) { color: transparent; }
.erone-datefield-input:has(+ .erone-datefield-text)::-webkit-datetime-edit { color: transparent; }
.erone-datefield-input:focus-visible { outline-offset: 1px; }

.erone-datefield-text {
  position: absolute;
  left: 9px;
  /* 달력 아이콘 자리를 비워 두고, 남는 폭 안에서만 그린다.
     좁은 화면에서 겹쳐 놓은 글자가 입력 칸 밖으로 삐져나가면 안 된다. */
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.erone-datefield-text.is-empty { color: var(--text-muted); }
.field .erone-datefield { width: 100%; }
.field .erone-datefield-text { left: 11px; right: 30px; font-size: var(--text-sm); }

.erone-due { display: inline-flex; align-items: center; flex: none; gap: 5px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.erone-due b { padding: 1px 5px; border-radius: var(--radius-xs); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); }
.erone-due.is-soon { color: var(--orange); }
.erone-due.is-soon b { background: var(--orange-soft); color: var(--orange); }
.erone-due.is-over { color: var(--red); }
.erone-due.is-over b { background: var(--red-soft); color: var(--red); }

.erone-link-list li { justify-content: flex-start; }
.erone-link-label { min-width: 62px; flex: none; color: var(--text-muted); font-size: var(--text-xs); }
/* --- SF-112: 연결 잇기 --------------------------------------------------------
   떠 있는 창이 아니라 **그 줄이 펼쳐진다.** 카드가 overflow: hidden 이라
   떠 있는 창은 모서리에서 잘린다(목업에서 실제로 잘렸다). 좁은 화면에서도
   자리가 어긋나지 않는 쪽이다. */
/* 줄 자체도 목록 규칙(.erone-mini-list li { display: flex })에 눌린다.
   눌리면 안쪽 줄이 글자 너비만큼만 차지해서 단추가 가운데에 떠 있는다. */
.erone-link-list .erone-link-row { display: block; }
.erone-link-line { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height-sm); }
.erone-link-value { flex: 1 1 auto; min-width: 0; }
/* **`.erone-mini-list button` 이 먼저 이긴다.** 연결 칸도 mini-list 라,
   그 규칙이 display:flex / flex-direction:column / border:0 / padding:0 을
   덮어쓴다 - 단추가 테두리 없이 두 줄로 접혔다(브라우저로 보고 알았다).
   그래서 여기 셋은 목록 이름을 앞에 달아 더 구체적으로 적는다. */
.erone-link-list .erone-link-pick { flex: none; flex-direction: row; margin-left: auto; height: var(--control-height-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); color: var(--primary-dark); font: inherit; font-size: var(--text-xs); display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.erone-link-list .erone-link-pick:hover { background: var(--primary-softer); }
.erone-link-list .erone-link-pick.is-open { border-color: var(--primary-border); background: var(--primary-soft); }
.erone-link-list .erone-link-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-link-picker { margin: var(--space-2) 0 var(--space-3) 62px; padding: var(--space-3); border: 1px solid var(--primary-border); border-radius: var(--radius-sm); background: var(--primary-softer); }
.erone-link-picker .erone-input { width: 100%; }
.erone-link-options { margin-top: var(--space-2); }
.erone-link-list .erone-link-option { display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.erone-link-list .erone-link-option:hover { background: var(--surface); }
.erone-link-list .erone-link-option:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.erone-link-list .erone-link-option strong { display: block; font-weight: var(--weight-medium); }
.erone-link-list .erone-link-option small { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); }
.erone-link-none { margin: var(--space-3) var(--space-3) 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.7; }
.erone-link-note { margin: 0 0 var(--space-2); color: var(--text-soft); font-size: var(--text-xs); line-height: 1.6; }
/* 끊는 길은 고르는 자리 **안**에 둔다. 밖에 두면 「바꾸기」 옆에 늘 붙어
   있어, 누르려던 것을 잘못 누른다. */
.erone-link-list .erone-link-unlink { margin-top: var(--space-3); padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-xs); background: none; color: var(--danger); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-link-list .erone-link-unlink:hover { background: var(--danger-soft); }
.erone-link-list .erone-link-unlink:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

/* --- 카드 머리줄의 알약 (종류 / 계약 상태 / 프로젝트 상태) ---

   셋이 같은 줄에 나란히 선다. 그러니 몸은 하나다.

   SF-070 에서 종류 알약을 따로 만들었다가 사진으로 보고 알았다 - 테두리가
   있고 안쪽 여백이 달라서, 같은 줄에 서면 아랫선이 어긋났다. SF-072 에서
   탭을 두고 겪은 것과 같은 일이다. 그때는 탭에만 검사를 달았고 알약에는
   안 달았다. 그래서 한 번 더 했다.

   display 를 inline-flex 로 두는 이유: 그냥 inline 이면 글자 상자가
   글꼴에 따라 흔들려서 세로 가운데가 알약마다 조금씩 다르다. */

.erone-pill,
.erone-contract-status,
.erone-project-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.erone-contract-status.is-ready, .erone-project-status.is-ready { background: var(--surface-strong); color: var(--text-soft); }
.erone-contract-status.is-review, .erone-project-status.is-review { background: var(--yellow-soft); color: var(--yellow); }
.erone-contract-status.is-active, .erone-project-status.is-active { background: var(--primary-soft); color: var(--primary-dark); }
.erone-contract-status.is-done, .erone-project-status.is-done { background: var(--green-soft); color: var(--green); }
.erone-contract-status.is-hold, .erone-project-status.is-hold { background: var(--orange-soft); color: var(--orange); }
.erone-contract-status.is-void, .erone-project-status.is-void { background: var(--red-soft); color: var(--red); }

/* --- 진행률 --- */

.erone-progress {
  display: inline-block;
  width: 84px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  vertical-align: middle;
}

.erone-progress > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.erone-progress-value { margin-left: 7px; color: var(--text-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 600; }
.erone-progress-cell { display: inline-flex; align-items: center; }

/* --- 프로젝트 카드 ---
 *
 * SF-078 에서 카드를 다시 짜면서 이 자리의 규칙이 전부 죽었다. 지금 모습은
 * 이 파일 끝의 "SF-078: 내 프로젝트" 에 있다.
 *
 * 지우지 않고 두었더니 .erone-project-foot 의 border-top 이 새 카드에
 * 가로줄 하나를 그렸다 - 아무도 안 쓰는 줄 알았는데 이름이 같았다.
 * 쓰지 않는 규칙은 지운다.
 *
 * 함께 사라진 것: -company · -meta · -no · -stage · -progress · -pm · -period.
 * 고객사·번호·단계·진행률·PM·기간은 프로젝트 안에서 본다.
 */

/* --- 프로젝트 워크스페이스 --- */

.erone-workspace { display: flex; max-width: 1560px; flex-direction: column; }

/* SF-075: 머리줄은 얇다.

   전에는 진행률·PM·구성원·기간·D-day 를 큰 블록으로 머리에 깔았다. 그
   블록이 화면 위를 차지해 정작 일하는 자리가 아래로 밀렸다. 숫자는 개요
   탭으로 내리고, 여기는 **여기가 어디인지**만 말한다.

   한 줄이다. 돌아가기 · 색 · 이름/설명 · 참여자. */
/* --- SF-110: 수주 / 수주 취소 ------------------------------------------------
   초록은 여기 하나뿐이다. "이겼다" 는 이 화면에서 한 번만 쓰는 뜻이라
   상태색(success)을 그대로 빌린다 - 새 색을 만들지 않는다. */
.erone-button--win { border-color: var(--success); background: var(--success); color: var(--text-inverse); font-weight: var(--weight-bold); }
.erone-button--win:hover { filter: brightness(0.94); }
/* SF-121: 계약 여부 램프 셋.
   「실주」·「수주」 단추와 제목 옆 꼬리표(.erone-workspace-tag)와 개요의
   되돌리기 줄(.erone-workspace-undo)이 여기 있었다. 셋이 같은 것을 서로
   다른 자리에서 말하고 있어서 한 줄로 모았다.

   머리줄 **아래** 제 줄이다. 오른쪽에 욱여넣으면 참여자·초대하기와 자리를
   다투다가 좁은 화면에서 줄이 접힌다. */
.erone-lamps {
  /* 머리줄은 네 칸 격자다. 그냥 두면 다섯 번째 칸에 들어가 제목을 옆으로
     민다 - 줄 전체를 차지하게 하고, 머리줄의 좌우 여백 밖까지 늘려
     제 띠처럼 보이게 한다. */
  grid-column: 1 / -1;
  position: relative;
  display: flex; align-items: stretch; gap: var(--space-2);
  margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-soft);
}
/* 램프 넷은 같은 폭이다 - 하나가 커 보이면 그것이 더 중한 뜻으로 읽힌다. */
.erone-lamp {
  /* 넷이 같은 크기다 - 하나가 커 보이면 그것이 더 중한 뜻으로 읽힌다.
     넓은 화면에서 끝까지 늘리면 한 칸이 360px 가 되어 글자 둘이 허허벌판에
     놓인다. 폭을 묶고, 남는 자리는 [선택] 앞의 빈 틈으로 둔다. */
  flex: 1 1 0; min-width: 0; max-width: 180px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-soft); color: var(--text-muted);
  font-size: var(--text-sm); white-space: nowrap;
}
.erone-lamp-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--border-strong); }
.erone-lamp.is-on { font-weight: var(--weight-bold); }
/* 색은 이미 쓰는 상태색을 빌린다. 새 색을 만들지 않는다. */
.erone-lamp.is-on.is-sales { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-soft); }
.erone-lamp.is-on.is-won { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }
.erone-lamp.is-on.is-lost { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }
.erone-lamp.is-on.is-sales .erone-lamp-dot { background: var(--warning); }
.erone-lamp.is-on.is-won .erone-lamp-dot { background: var(--success); }
.erone-lamp.is-on.is-lost .erone-lamp-dot { background: var(--danger); }
.erone-lamp-dot.is-sales { background: var(--warning); }
.erone-lamp-dot.is-won { background: var(--success); }
.erone-lamp-dot.is-lost { background: var(--danger); }

.erone-lamp-pick {
  flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); height: auto;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
}
.erone-lamp-pick:hover { border-color: var(--primary); color: var(--primary); }
.erone-lamp-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-lamp-pick.is-open { border-color: var(--primary); color: var(--primary); }
.erone-lamp-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.erone-lamp-pick.is-open .erone-lamp-caret { border-top: 0; border-bottom: 5px solid currentColor; }

/* 메뉴는 고르개 아래에 붙는다. 머리줄은 넘침을 자르지 않으므로 떠도 안전하다. */
.erone-lamp-menu {
  position: absolute; z-index: 60; top: calc(100% - var(--space-2)); right: var(--space-5);
  min-width: 220px; padding: var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.erone-lamp-now {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: var(--text-sm);
}
.erone-lamp-now em { margin-left: auto; font-style: normal; font-size: var(--text-xs); color: var(--text-muted); }
.erone-lamp-menu button {
  display: flex; width: 100%; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--text); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer;
}
.erone-lamp-menu button:hover { background: var(--primary-soft); color: var(--primary); }
.erone-lamp-menu button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.erone-will { margin: var(--space-2) 0 0; padding-left: var(--space-5); line-height: 1.8; }
.modal-note.is-keep { background: var(--success-soft); color: var(--success); }

.erone-workspace-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
}

/* 프로젝트 색. 목록과 머리줄에서 프로젝트를 눈으로 가르는 가장 빠른 길이다.
   목록 카드(.erone-project-card::before)와 **같은 4px 띠**다 - SF-116. */
.erone-workspace-color {
  width: 4px; height: 36px;
  flex: none;
  border-radius: 2px;
  background: var(--primary-soft);
}
.erone-workspace-color.is-sky { background: var(--project-sky); }
.erone-workspace-color.is-mint { background: var(--project-mint); }
.erone-workspace-color.is-grape { background: var(--project-grape); }
.erone-workspace-color.is-amber { background: var(--project-amber); }
.erone-workspace-color.is-rose { background: var(--project-rose); }
.erone-workspace-color.is-slate { background: var(--project-slate); }

.erone-workspace-name { min-width: 0; }
.erone-workspace-name h2 {
  overflow: hidden; margin: 0; color: var(--text);
  font-size: var(--text-lg); letter-spacing: -0.01em;
  text-overflow: ellipsis; white-space: nowrap;
}
.erone-workspace-name p {
  overflow: hidden; margin: 2px 0 0; color: var(--text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis; white-space: nowrap;
}

/* 참여자는 겹친 아바타로. 세로 패널로 늘 띄우면 본문이 좁아지는데,
   사람 목록을 그렇게 자주 보지는 않는다. 누르면 그때 펼친다. */
.erone-workspace-people { display: flex; align-items: center; gap: var(--space-3); }
.erone-workspace-stack {
  display: inline-flex; align-items: center;
  padding: var(--space-1); border: 0; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer;
  transition: background var(--motion-fast);
}
.erone-workspace-stack:hover { background: var(--surface-soft); }
.erone-workspace-stack.is-flat { cursor: default; }
.erone-workspace-stack.is-flat:hover { background: transparent; }

.erone-invite {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 32px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-soft);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.erone-invite:hover { border-color: var(--primary); color: var(--primary); }
.erone-invite span { font-size: var(--text-sm); line-height: 1; }

.erone-workspace-back {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: var(--text-md); cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.erone-workspace-back:hover { text-decoration: underline; }
.erone-workspace-actions { display: flex; align-items: flex-start; gap: 6px; }

.erone-workspace-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  grid-column: 1 / -1;
}

.erone-workspace-stats span { display: flex; flex-direction: column; gap: 1px; color: var(--text-muted); font-size: var(--text-xs); }
.erone-workspace-stats b { color: var(--text); font-size: var(--text-sm); font-weight: 700; }
.erone-workspace-stats.is-inline { padding-top: 0; border-top: 0; }

.erone-workspace-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-top: 0;
  background: var(--surface-soft);
  scrollbar-width: none;
}

.erone-workspace-tabs::-webkit-scrollbar { display: none; }

.erone-workspace-tab {
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.erone-workspace-tab:hover { color: var(--text); }
.erone-workspace-tab.is-active { border-bottom-color: var(--primary); color: var(--primary-dark); }

.erone-workspace-body {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-soft);
}

/* --- 인사이트 탭 (SF-100/101, 10단계) ---------------------------------------
   그릴 것이 세로 막대와 가로 막대뿐이라 차트 라이브러리를 들이지 않는다
   (사용자 결정 ㉡). 간트·파이프라인·진행률 막대가 쓰는 규칙과 같다. */
.erone-insight { display: flex; flex-direction: column; gap: var(--space-5); }
.erone-insight-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.erone-insight-kpi { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.erone-insight-kpi > span { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-insight-kpi > strong { display: block; margin: var(--space-1) 0 0; font-size: var(--text-2xl); letter-spacing: -0.5px; }
.erone-insight-kpi > em { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-style: normal; }
.erone-insight-kpi.is-alert > strong, .erone-insight-kpi.is-alert > em { color: var(--red); }
.erone-insight-card > header { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.erone-insight-card > header h3 { margin: 0; font-size: var(--text-sm); }
.erone-insight-card > header p { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-insight-body { padding: var(--space-5); }
.erone-insight-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }

/* 주차별 흐름 */
.erone-wflow-legend { display: flex; gap: var(--space-4); color: var(--text-soft); font-size: var(--text-xs); }
.erone-wflow-legend i { display: inline-block; width: 9px; height: 9px; margin-right: var(--space-1); border-radius: var(--radius-xs); vertical-align: -1px; }
/* 두 막대는 **모양**이 다르다. 하나는 테두리만 있고 하나는 꽉 찼다.
   색조만 바꾸면(연보라/진보라) 색을 구분하기 어려운 사람에게 같은 막대
   둘로 보인다 - 밝기 차이만으로는 모자라서 윤곽을 함께 준다. */
.erone-wflow-legend i.is-new, .erone-wflow-bar.is-new { background: var(--primary-soft); border: 1px solid var(--primary); }
.erone-wflow-legend i.is-done, .erone-wflow-bar.is-done { background: var(--primary-dark); }
.erone-seg { display: flex; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.erone-seg-item { height: var(--control-height-sm); padding: 0 var(--space-4); border: 0; background: var(--surface); color: var(--text-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-seg-item.is-on { background: var(--primary); color: var(--text-inverse); font-weight: var(--weight-medium); }
.erone-seg-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.erone-wflow { display: flex; gap: var(--space-4); height: 196px; }
.erone-wflow-axis { display: flex; flex-direction: column; justify-content: space-between; width: 26px; flex: none; padding-bottom: var(--space-6); color: var(--text-muted); font-size: var(--text-xs); text-align: right; }
.erone-wflow-weeks { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-4); flex: 1 1 auto; min-width: 0; border-left: 1px solid var(--border-soft); padding-left: var(--space-4); }
.erone-wflow-week { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; }
.erone-wflow-count { font-size: var(--text-xs); white-space: nowrap; }
.erone-wflow-count b { font-weight: var(--weight-bold); }
.erone-wflow-count b.is-new { color: var(--text-muted); }
.erone-wflow-count b.is-done { color: var(--primary-dark); }
.erone-wflow-count i { margin: 0 var(--space-1); color: var(--border-strong); font-style: normal; }
.erone-wflow-pair { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-1); width: 100%; flex: 1 1 auto; min-height: 0; }
/* 폭을 못 박지 않는다. 26주에서는 칸이 좁아져 17px 짜리 막대 둘이 서로를
   밀고 겹쳤다. 자리가 넓으면 17px 까지 굵어지고 좁으면 같이 가늘어진다. */
.erone-wflow-bar { flex: 1 1 auto; min-width: 3px; max-width: 17px; }
/* 빽빽할 때는 칸 사이도 좁힌다. 간격이 그대로면 막대가 설 자리가 없다. */
.erone-wflow.is-dense .erone-wflow-weeks { gap: var(--space-1); }
.erone-wflow.is-dense .erone-wflow-pair { gap: 1px; }
.erone-wflow-week small { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.erone-wflow-week small.is-now { color: var(--text); font-weight: var(--weight-bold); }

/* 진행 상태별 · 담당자별 */
.erone-insight-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.erone-insight-srow, .erone-insight-prow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.erone-insight-sname { width: 72px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-insight-track { flex: 1 1 auto; height: 8px; border-radius: var(--radius-pill); background: var(--surface-strong); overflow: hidden; }
.erone-insight-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--tone, var(--primary)); }
.erone-insight-snum, .erone-insight-pnum { flex: none; text-align: right; color: var(--text-muted); font-size: var(--text-xs); }
.erone-insight-snum { width: 72px; }
.erone-insight-pnum { width: 92px; }
.erone-insight-snum b, .erone-insight-pnum b { color: var(--text); font-size: var(--text-sm); }
.erone-insight-pnum i { color: var(--red); font-style: normal; font-weight: var(--weight-medium); }
.erone-insight-pname { width: 72px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-insight-nobody { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text-muted); font-size: var(--text-xs); flex: none; }
.erone-insight-pbar { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; height: 18px; }
.erone-insight-pseg { height: 18px; border-radius: var(--radius-xs); }
/* 여기도 같다. 남은 업무는 테두리, 지난 것은 꽉 찬 빨강이다. */
.erone-insight-pseg.is-open { background: var(--primary-soft); border: 1px solid var(--primary); }
.erone-insight-pseg.is-late { background: var(--red); }
.erone-insight-legend { display: flex; gap: var(--space-4); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-soft); color: var(--text-soft); font-size: var(--text-xs); }
.erone-insight-legend i { display: inline-block; width: 9px; height: 9px; margin-right: var(--space-1); border-radius: var(--radius-xs); vertical-align: -1px; }
.erone-insight-legend i.is-open { background: var(--primary-soft); border: 1px solid var(--primary); }
.erone-insight-legend i.is-late { background: var(--red); }
.erone-insight-more { margin-left: auto; color: var(--text-muted); }

/* 좁은 화면에서는 한 줄씩 내린다. KPI 넷을 가로로 두면 숫자가 접힌다. */
@media (max-width: 1023px) {
  .erone-insight-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erone-insight-pair { grid-template-columns: minmax(0, 1fr); }
  .erone-wflow { height: 168px; }
}

.erone-workspace-overview { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.erone-workspace-overview .erone-card { background: var(--surface); }
.erone-workspace-overview h3 { margin: 0; font-size: var(--text-sm); }
.erone-workspace-note { margin: 10px 0 0; color: var(--text-soft); font-size: var(--text-sm); }

/* 워크스페이스 안에서 기존 협업 렌더러가 그대로 자리 잡게 한다. */
.erone-workspace-body > .collab-files-area,
.erone-workspace-body > .card,
.erone-workspace-body > section { max-width: 100%; }

/* --- 구성원 --- */

.erone-member-list { list-style: none; margin: 0; padding: 0; }
.erone-member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.erone-member-row:last-child { border-bottom: 0; }
.erone-member-name { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.erone-member-name strong { font-size: var(--text-sm); }
.erone-member-name small { color: var(--text-muted); font-size: var(--text-xs); }
.erone-member-role { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); font-weight: 600; }

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

@media (max-width: 980px) {
  .erone-workspace-head { grid-template-columns: minmax(0, 1fr); }
  .erone-workspace-actions { grid-row: 3; }
  /* SF-121: 램프 셋과 [선택] 이 한 줄에 다 들어가지 않는다. 억지로 두면
     줄이 화면 밖으로 밀려 가로로 스크롤된다 - 접어서 두 줄로 쓴다. */
  .erone-lamps { flex-wrap: wrap; }
  .erone-lamp { flex: 1 1 28%; max-width: none; }
  .erone-lamp-pick { flex: 1 1 100%; justify-content: center; padding-block: var(--space-3); }
  .erone-lamp-menu { right: var(--space-4); left: var(--space-4); min-width: 0; }
  /* 한 칸으로 접히면 띠가 제 줄에 혼자 선다. 세로로 세워 두면 길 잃은
     막대처럼 보이므로, 제목 위에 눕혀 밑줄 하나로 만든다 - 색은 그대로
     남고 자리만 눕는다(SF-116). */
  .erone-workspace-color { width: 100%; height: 4px; }
}

@media (max-width: 720px) {
  .erone-project-grid { grid-template-columns: minmax(0, 1fr); }
  .erone-workspace-head { padding: 12px 13px; }
  .erone-workspace-title h2 { font-size: var(--text-lg); }
  .erone-workspace-body { padding: 12px; }
  .erone-workspace-stats { gap: 12px; }
  .erone-field-range { flex: 1; min-width: 0; }
  .erone-field-range .erone-input { width: 100%; }
  .erone-field-range .erone-datefield { width: 100%; }
}

/* 계약 표의 날짜·기간·금액은 줄바꿈하지 않는다. 좁아지면 표가 가로로 스크롤된다. */
.erone-table td.is-date, .erone-table th.is-date { white-space: nowrap; }
.erone-table .is-numeric { white-space: nowrap; }

@media (max-width: 720px) {
  /* 카드로 바뀌면 다시 줄바꿈을 허용한다. */
  .erone-table td.is-date { white-space: normal; }
}

/* --- 프로필 사진 창 ---
 *
 * 계정 설정 깊숙이 들어가지 않고 아바타 한 번으로 닿는 자리다.
 * 좁은 화면에서는 세로로 쌓여 버튼이 눌리기 쉬운 크기를 유지한다. */
.erone-profile-photo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.erone-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.erone-profile-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.erone-profile-copy strong { font-size: var(--text-md); }
.erone-profile-copy span { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.erone-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* SF-041: 비밀번호 변경 진입점. 사진 바꾸기와는 다른 종류의 일이라
 * 옅은 선으로 한 칸 떼어 놓는다. */
/* SF-047: 강조색 고르기. 프로필 창 안에 있다.
   누르는 즉시 화면 전체가 그 색이 되므로, 고른 것이 무엇인지 테두리와
   고리로 분명히 보여 준다 - 색만으로 표시하면 색맹인 사람은 못 읽는다. */
.erone-accent { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); display: grid; gap: 8px; }
.erone-accent-label { margin: 0; font-size: var(--text-sm); font-weight: 700; }
.erone-accent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.erone-accent-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-soft);
  font-family: inherit; font-size: var(--text-xs); cursor: pointer;
}
.erone-accent-chip > span {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent-swatch); flex: none;
}
.erone-accent-chip:hover { border-color: var(--accent-swatch); }
.erone-accent-chip.is-active {
  border-color: var(--accent-swatch); color: var(--accent-swatch); font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-swatch) 18%, transparent);
}
.erone-accent-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.erone-profile-password {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

/* label 을 버튼처럼 쓴다. 안의 file 입력은 숨기되 키보드 초점은 살려 둔다. */
.erone-profile-pick { position: relative; cursor: pointer; }
.erone-profile-pick input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.erone-profile-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

.erone-profile-hint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-profile-status { margin: 0; color: var(--primary-dark); font-size: var(--text-sm); }

@media (max-width: 480px) {
  .erone-profile-identity { flex-direction: column; align-items: flex-start; }
  .erone-profile-actions { flex-direction: column; align-items: stretch; }
  .erone-profile-actions .erone-button { justify-content: center; }
}

/* ===========================================================================
   Phase 2-C-4 — 업무 화면
   ---------------------------------------------------------------------------
   상태별 보기의 골격(뷰포트 · 스크롤 · 가장자리 페이드 · 컬럼)은 영업기회
   단계별 보기와 같은 class 를 그대로 쓴다. 여기에는 업무에만 필요한 것,
   즉 상태 색 · 카드 · 상태 메뉴 · 사유 입력 · 모바일 카드만 더한다.
   =========================================================================== */

/* 상태 색. Core 의 tone 이름을 그대로 class 로 받는다.
   같은 값을 pill · dot · 컬럼 악센트가 함께 쓴다. */
.erone-task-column.is-sky, .erone-status-pill.is-sky, .erone-status-option.is-sky, .erone-feed-chip.is-sky, .erone-insight-srow .is-sky { --tone: var(--tone-sky); --tone-soft: var(--tone-sky-soft); }
.erone-task-column.is-blue, .erone-status-pill.is-blue, .erone-status-option.is-blue, .erone-feed-chip.is-blue, .erone-insight-srow .is-blue { --tone: var(--tone-blue); --tone-soft: var(--tone-blue-soft); }
.erone-task-column.is-green, .erone-status-pill.is-green, .erone-status-option.is-green, .erone-feed-chip.is-green, .erone-insight-srow .is-green { --tone: var(--tone-green); --tone-soft: var(--green-soft); }
.erone-task-column.is-amber, .erone-status-pill.is-amber, .erone-status-option.is-amber, .erone-feed-chip.is-amber, .erone-insight-srow .is-amber { --tone: var(--tone-amber); --tone-soft: var(--yellow-soft); }
.erone-task-column.is-violet, .erone-status-pill.is-violet, .erone-status-option.is-violet, .erone-feed-chip.is-violet, .erone-insight-srow .is-violet { --tone: var(--tone-violet); --tone-soft: var(--tone-violet-soft); }
.erone-task-column.is-gray, .erone-status-pill.is-gray, .erone-status-option.is-gray, .erone-feed-chip.is-gray, .erone-insight-srow .is-gray { --tone: var(--tone-gray); --tone-soft: var(--surface-strong); }
.erone-task-column.is-red, .erone-status-pill.is-red, .erone-status-option.is-red, .erone-feed-chip.is-red, .erone-insight-srow .is-red { --tone: var(--red); --tone-soft: var(--red-soft); }
.erone-task-column.is-neutral, .erone-status-pill.is-neutral, .erone-status-option.is-neutral, .erone-feed-chip.is-neutral, .erone-insight-srow .is-neutral { --tone: var(--text-soft); --tone-soft: var(--surface-strong); }

/* 7개 컬럼이 1920 에서 한 화면에 들어오도록 영업기회(288px)보다 좁게 잡는다.
   7 x 216 + 6 x 12 = 1,584px < 1920 에서 쓸 수 있는 본문 폭. 그보다 좁은
   화면에서는 가로로 넘겨 보고, 가장자리 페이드와 안내가 그 사실을 알린다. */
.erone-task-column { --stage-color: var(--tone, var(--text-muted)); width: 216px; min-width: 216px; }
.erone-task-column-body { display: flex; flex-direction: column; gap: 7px; padding: 0 8px 10px; }
.erone-task-column-empty { margin: 4px 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }

/* 재분류 대기 컬럼은 정식 상태가 아니다. 점선으로 구분해 둔다. */
.erone-task-column[data-status-column="needs-reclassification"] { border: 1px dashed var(--border-strong); }

/* --- 업무 카드 ------------------------------------------------------------
   읽는 순서: 프로젝트(보조) → 업무명 → 담당자 → 마감 · 우선순위 */
.erone-task-card {
  position: relative;
  padding: 10px 11px 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow 0.12s ease;
}

.erone-task-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--stage-color, var(--border-strong));
  content: "";
}

.erone-task-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.erone-task-card-project {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erone-task-card-title {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.erone-task-card-open:hover .erone-task-card-title { color: var(--primary); }
.erone-task-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.erone-task-card-owner { max-width: 100%; }
.erone-task-card-owner.is-empty { color: var(--text-muted); font-size: var(--text-xs); }
.erone-task-card-meta .erone-avatar-stack { margin-left: auto; }

.erone-task-card-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}

/* 상태 pill 이 먼저 오고, 우선순위 · 남은 날 · 검토 표시가 오른쪽에 붙는다. */
.erone-task-card-foot .erone-status-control { margin-right: auto; }

.erone-task-priority { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); font-weight: 700; }
.erone-task-priority.is-high { background: var(--red-soft); color: var(--red); }
.erone-task-priority.is-low { background: var(--surface-strong); color: var(--text-muted); }

.erone-task-due { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-strong); color: var(--text-soft); font-size: var(--text-xs); font-variant-numeric: tabular-nums; font-weight: 700; }
.erone-task-due.is-soon { background: var(--orange-soft); color: var(--orange); }
.erone-task-due.is-late { background: var(--red-soft); color: var(--red); }

.erone-task-flag { padding: 1px 6px; border-radius: var(--radius-pill); background: var(--yellow-soft); color: var(--yellow); font-size: var(--text-xs); font-weight: 700; }

/* --- 상태 pill 과 메뉴 ---------------------------------------------------- */
.erone-status-control { position: relative; display: inline-block; }

.erone-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--tone-soft, var(--surface-strong));
  color: var(--tone, var(--text-soft));
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
}

.erone-status-pill[aria-label]:hover { filter: brightness(0.97); }
.erone-status-pill.is-compact { font-size: var(--text-xs); }
.erone-status-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentcolor; }
/* 스프라이트의 chevron 은 오른쪽(›)이다. 펼치는 단추이므로 아래를 본다
   - SF-068 에서 폼 쪽만 돌렸고, 보드 카드가 남아 있었다. */
.erone-status-caret { width: 12px; height: 12px; flex: none; opacity: 0.65; transform: rotate(90deg); }

.erone-status-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  display: flex;
  width: 208px;
  max-width: calc(100vw - 32px);
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* 아래로 넘칠 때는 위로 편다. 칸반 스크롤 상자(overflow:auto) 안에서 열리는
   메뉴라, 아래쪽 카드에서 펴면 상자 밖으로 나가 잘린다. */
.erone-status-menu.is-up { top: auto; bottom: calc(100% + 5px); }

/* 메뉴에 z-index 를 주는 것만으로는 부족하다. 메뉴는 카드 안에 있고 카드는
   position:relative 라, 뒤에 오는 카드가 메뉴 위에 그려진다. 실제로 메뉴가
   옆 카드 뒤로 숨었다. 카드와 칸을 함께 올려야 그 안의 메뉴도 올라간다. */
.erone-task-card.has-open-menu { z-index: 50; }
.erone-task-column.has-open-menu { position: relative; z-index: 50; }

.erone-status-current { margin: 0 2px 4px; color: var(--text-muted); font-size: var(--text-xs); }
.erone-status-current strong { color: var(--text-soft); }
/* SF-084: 상태 묶음 머리글. 고를 수 있는 것이 아니라 가르는 글자라,
 * 선택지보다 작고 흐리게 둔다. 첫 묶음 위에는 틈을 더 주지 않는다. */
.erone-status-group {
  margin: 8px 2px 2px; color: var(--text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.erone-status-current + .erone-status-group { margin-top: 2px; }
.erone-status-note { margin: 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.55; }
.erone-status-note.is-error { color: var(--red); }

.erone-status-option {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--tone-soft, transparent);
  color: var(--tone, var(--text-soft));
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: left;
}

.erone-status-option:hover { filter: brightness(0.97); }
.erone-status-hint { margin-left: auto; color: inherit; font-size: var(--text-xs); font-weight: 700; opacity: 0.75; }

/* --- 사유 입력 ------------------------------------------------------------
   되돌리거나 멈추는 변경은 저장 전에 이유를 묻는다. */
.erone-note-scrim { position: fixed; z-index: 90; inset: 0; background: var(--scrim); }

.erone-note-prompt {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
}

.erone-note-prompt h3 { margin: 0 0 4px; font-size: var(--text-md); }
.erone-note-prompt > p { margin: 0 0 12px; color: var(--text-muted); font-size: var(--text-sm); }
.erone-note-prompt .erone-field { display: block; }
.erone-note-prompt .erone-field > span { display: block; margin-bottom: 5px; color: var(--text-soft); font-size: var(--text-xs); font-weight: 700; }
.erone-note-prompt textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  resize: vertical;
}
.erone-note-prompt textarea:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px var(--primary-soft); }
.erone-note-error { margin: 8px 0 0; color: var(--red); font-size: var(--text-xs); }
.erone-note-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }

/* --- 목록 보기 ------------------------------------------------------------
   영업용 상세 필드를 목록에 넣지 않는다. 그것 때문에 예전 표가 3,000px 을
   넘겼다. 핵심 열만 두고 나머지는 상세 패널에서 본다. */
.erone-table tr.is-selected { background: var(--primary-soft); }
.erone-table .erone-status-control { display: inline-block; }
.erone-task-cardlist { display: none; }

/* --- 내 업무 요약 --------------------------------------------------------- */
.erone-task-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.erone-task-stat {
  display: flex;
  min-width: 104px;
  flex: 1 1 104px;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.erone-task-stat small { color: var(--text-muted); font-size: var(--text-xs); }
.erone-task-stat strong { color: var(--text); font-size: var(--text-md); letter-spacing: -0.02em; }

/* --- 상세 패널 ------------------------------------------------------------ */
.erone-task-panel-project { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.erone-task-panel-head h2 { margin: 3px 0 8px; font-size: var(--text-lg); line-height: 1.35; }
.erone-task-panel-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.erone-task-review-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  cursor: pointer;
}
.erone-task-review-toggle input { margin-top: 2px; }
.erone-task-review-toggle strong { display: block; font-size: var(--text-sm); }
.erone-task-review-toggle small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; }

.erone-panel-list { display: grid; gap: 9px; margin: 0; }
.erone-panel-row { display: grid; align-items: baseline; gap: var(--space-1) var(--space-4); grid-template-columns: var(--label-column) minmax(0, 1fr); }
.erone-panel-row dt { color: var(--text-muted); font-size: var(--text-xs); }
.erone-panel-row dd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--text-sm); }

.erone-task-panel-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.erone-task-panel-section h3 { margin: 0 0 7px; font-size: var(--text-sm); }
.erone-task-panel-section p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); line-height: 1.6; white-space: pre-wrap; }

.erone-panel-foot { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* --- 좁은 화면 ------------------------------------------------------------ */

/* 1100 이하: 컬럼을 조금 좁혀 한 화면에 더 담는다. */
@media (max-width: 1100px) {
  .erone-task-column { width: 212px; min-width: 212px; }
}

/* 820 이하: 상태 메뉴가 화면 밖으로 나가지 않게 오른쪽에 붙인다. */
/* 목록 보기의 상태 열은 표 가운데에 있어 왼쪽 정렬이면 오른쪽으로 넘친다.
   카드의 상태 pill 은 카드 왼쪽에 붙으므로 왼쪽 정렬 그대로가 맞다.
   두 자리를 같은 규칙으로 묶으면 어느 한쪽이 반드시 화면 밖으로 나간다. */
.erone-table .erone-status-menu { right: 0; left: auto; }

@media (max-width: 820px) {
  .erone-task-column { width: 210px; min-width: 210px; }
}

/* 420: 표를 억지로 줄이지 않는다. 카드로 바꾼다.
   상태별 보기는 화면 폭에 맞춘 카드 한 장씩 넘겨 본다. */
@media (max-width: 640px) {
  /* 필터를 옆으로 넘겨 보게 두었더니 첫 화면에 검색과 select 한 개 반만
     보였다. 안 보이는 필터는 없는 필터다. 그렇다고 세로로 쌓으면 5줄이라
     화면 절반이 필터가 된다.
     두 칸 격자로 접는다. 검색과 등록 버튼만 한 줄을 통째로 쓴다.
     세로 5줄 -> 3줄, 가로 스크롤 없음, 다섯 개가 전부 첫 화면에 보인다. */
  .erone-task-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow-x: visible;
  }
  .erone-task-toolbar > * { min-width: 0; }
  .erone-task-toolbar .erone-field-search { grid-column: 1 / -1; }
  .erone-task-toolbar .erone-select { min-width: 0; max-width: none; width: 100%; }
  /* 보기 이름이 두 줄로 접히면 탭 줄이 두 배로 높아진다. 한 줄로 두고
     좁으면 옆으로 넘겨 본다. */
  .erone-task-views { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }
  .erone-task-views .erone-segment { flex: none; white-space: nowrap; }

  /* 카드가 한두 장일 때 컬럼이 화면 절반을 빈 채로 차지하지 않게 한다. */
  .erone-task-board-viewport .erone-kanban,
  .erone-task-board-viewport .erone-kanban-scroll { min-height: 0; }
  .erone-task-column-body { min-height: 44px; }
  /* 필터 단추와 등록 단추가 한 줄을 나눠 쓴다. 각각 한 줄씩 쓰면 업무가
     보이기 전에 줄 하나를 더 밀어내는데, 둘 다 반 줄로 충분히 크다. */
  .erone-task-toolbar > .erone-button--primary { grid-column: auto; width: 100%; min-height: var(--control-height-touch); }
  .erone-task-toolbar .erone-spacer { display: none; }

  /* 필터를 "필터" 뒤로 접는다.
     -------------------------------------------------------------------
     420px 에서 검색 + select 다섯 + 등록 버튼이 세로 약 230px 를 먹어,
     정작 업무가 한 건도 첫 화면에 없었다. 보이지 않는 업무는 없는 업무다.
     접어도 고른 값은 그대로 남는다(값은 state.filters 에 있다).
     몇 개를 걸어 두었는지는 단추 옆 숫자로 알린다 - 접힌 채로 결과만
     달라지면 "왜 이것만 나오지" 가 된다. */
  .erone-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* 손가락으로 누르는 단추다. */
    min-height: var(--control-height-touch);
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }

  .erone-filter-toggle[aria-expanded="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-dark);
  }

  .erone-filter-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

  .erone-filter-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--text-inverse);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    line-height: 18px;
    text-align: center;
  }

  .erone-toolbar-filters {
    display: none;
    grid-column: 1 / -1;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .erone-toolbar-filters.is-open { display: grid; }
  /* 이 파일 뒤쪽에 .erone-task-toolbar .erone-select { min-width: 108px;
     max-width: 148px } 가 있다. 무게가 같아 나중에 온 그쪽이 이기므로,
     여기서는 한 단 더 좁혀 잡는다. 그러지 않으면 좁은 화면에서 select 가
     칸을 못 채우고 오른쪽에 빈 자리가 남는다(실제로 그랬다). */
  .erone-task-toolbar .erone-toolbar-filters .erone-select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: var(--control-height-touch);
  }

  .erone-task-board-viewport .erone-kanban-scroll { scroll-snap-type: x mandatory; }
  .erone-task-column {
    width: calc(100vw - 44px);
    min-width: calc(100vw - 44px);
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* 목록 보기는 표 대신 카드. 가로 스크롤이 생기지 않는다. */
  .erone-task-body .erone-table-wrap,
  /* SF-076: Flow 표도 좁은 화면에서는 카드에 자리를 내준다. 열한 개를
     가로로 미는 것은 읽는 길이 아니다. */
  .erone-task-body .erone-flow-table-wrap,
  .erone-task-body .erone-flow-groupadd { display: none; }
  .erone-task-cardlist { display: flex; flex-direction: column; gap: 8px; }

  .erone-task-summary .erone-task-stat { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .erone-note-prompt { width: calc(100vw - 24px); }
}

/* 업무 툴바는 필터가 여섯이라 그대로 두면 1440 에서도 두 줄이 된다.
   각 선택 상자에 상한을 둬 한 줄에 들어오게 하고, 좁아지면 자연스럽게 접힌다. */
.erone-task-toolbar .erone-select { min-width: 108px; max-width: 148px; flex: 0 1 auto; }
.erone-task-toolbar .erone-field-search { min-width: 170px; flex: 1 1 170px; max-width: 260px; }
.erone-task-views { margin-bottom: 14px; }
.erone-task-views .erone-segment { padding: 6px 12px; font-size: var(--text-sm); }

/* 상태를 확인해야 하는 업무의 원래 값. 정식 상태처럼 보이지 않게 중립으로 둔다. */
.erone-task-legacy { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-xs); }

/* 재분류 대기 영역. 정식 상태 보드와 눈에 띄게 구분한다. */
.erone-task-attention {
  margin-top: 16px;
  padding: 12px 14px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.erone-task-attention header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.erone-task-attention header strong { font-size: var(--text-sm); }
.erone-task-attention header p { width: 100%; margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-task-attention-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}
.erone-task-attention-body { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }

/* Phase 2-C-5 — 알림 한 줄.
   종류 · 제목 · 본문 · 시각 순으로 읽힌다. 색은 거들 뿐이고 무슨 일인지는
   반드시 문구로 드러난다. */
.notification-copy { display: grid; gap: 2px; text-align: left; }
.notification-kind {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.notification-headline {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.notification-copy[disabled] { cursor: default; }
.notification-icon.is-primary { color: var(--primary); }
.notification-icon.is-good { color: var(--green); }
.notification-icon.is-warn { color: var(--orange); }
.notification-icon.is-danger { color: var(--red); }
.notification-icon.is-muted { color: var(--text-muted); }

/* 420 에서 알림 팝오버가 화면 밖으로 나가지 않게 한다. */
@media (max-width: 640px) {
  .popover { right: 8px; left: 8px; width: auto; max-width: none; }
  .notification-headline { white-space: normal; }
}

/* 더 보기. 목록 아래에 조용히 놓인다 - 주된 행동이 아니라
   "아직 더 있다" 는 사실을 알리는 자리다. */
.erone-list-more {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.erone-list-more .erone-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.erone-list-more span {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* 최근 활동. 한 줄에 사람·대상·무엇이 어떻게 바뀌었는지가 들어간다. */
.erone-activity-feed {
  padding: 4px 0;
}
.erone-activity-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
.erone-activity-row:last-child { border-bottom: 0; }
.erone-activity-copy { min-width: 0; }
.erone-activity-copy p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  /* 긴 고객사·프로젝트 이름이 카드를 밀지 않게 한다. */
  overflow-wrap: anywhere;
}
.erone-activity-copy time {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* 지난 업무 안내. 경고가 아니라 사실 안내다 - 색을 세게 쓰지 않는다. */
.erone-task-older {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.erone-task-older span { flex: 1; min-width: 200px; }

/* --- SF-022: 후속조치 ↔ 업무 연결 -----------------------------------------
 *
 * 이 줄이 하는 말은 하나다. "이 후속조치가 업무가 되었는가."
 * 그래서 눈에 띄되 후속조치 내용보다 크지 않게 둔다 - 주인공은 할 일이다.
 */
.erone-followup-task {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-xs);
}
.erone-followup-task strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.erone-followup-task-meta { display: inline-flex; gap: 6px; color: var(--text-muted); }
.erone-followup-task-meta span { white-space: nowrap; }
/* 연결된 업무가 끝났다는 사실만 말한다. 후속조치까지 끝난 것처럼 보이면
 * 사람이 후속조치를 닫지 않고 지나간다. */
.erone-followup-task-done {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-muted);
  font-style: normal;
  font-size: var(--text-xs);
}
.erone-followup-task.is-hidden,
.erone-followup-task.is-deleted { color: var(--text-muted); }
.erone-followup-task-slot { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

/* 업무 상세의 출처. 안내이지 경고가 아니라 색을 세게 쓰지 않는다. */
.erone-task-origin {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.erone-task-origin h3 { margin: 0 0 6px; font-size: var(--text-xs); color: var(--text-muted); }
.erone-task-origin dl { display: grid; gap: 2px; margin: 0 0 6px; }
.erone-task-origin dl > div { display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr); gap: var(--space-3); }
.erone-task-origin dt { color: var(--text-muted); font-size: var(--text-xs); }
.erone-task-origin dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.erone-task-origin p { margin: 0 0 8px; font-size: var(--text-xs); }

@media (max-width: 640px) {
  /* 좁은 화면에서는 업무 줄이 후속조치 아래로 내려간다. 한 줄에 우겨넣으면
   * 제목이 글자 두어 개로 잘려 무슨 업무인지 알 수 없게 된다. */
  .erone-followup-row { flex-wrap: wrap; }
  .erone-followup-task-slot { flex-basis: 100%; }
  .erone-followup-task { max-width: 100%; }
  .erone-activity-actions { flex-wrap: wrap; }
  .erone-task-origin dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --- SF-024: 일정 · 통합 캘린더 --------------------------------------------
 *
 * 색만으로 종류를 구분하지 않는다. 범례에 이름이 함께 있고, 카드에는 시각과
 * 제목이 글자로 남는다 - 색을 못 보는 사람에게도 읽혀야 한다.
 */
.erone-cal-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
/* SF-036: 높이 규칙이 없어 글자+여백으로 28px 이 나왔다. 체계 밖이다. */
.erone-cal-chip,
.erone-cal-scope {
  height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}
.erone-cal-chip.is-on,
.erone-cal-scope.is-on { color: var(--text); border-color: var(--text-muted); font-weight: 600; }
.erone-cal-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.erone-cal-chip.is-visit .erone-cal-dot { background: var(--primary); }
.erone-cal-chip.is-task .erone-cal-dot { background: var(--warning); }
.erone-cal-chip.is-followup .erone-cal-dot { background: var(--success); }
.erone-cal-chip.is-project .erone-cal-dot { background: var(--indigo); }

/* 캘린더 한 칸의 항목. 종류는 왼쪽 띠로, 내용은 글자로. */
.erone-cal-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  width: 100%;
  margin: 1px 0 0;
  padding: 2px 4px 2px 6px;
  border: 0;
  border-left: 3px solid var(--cal-color, var(--primary));
  border-radius: var(--radius-xs);
  background: var(--surface-strong);
  color: var(--text);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.erone-cal-item.is-event { --cal-color: var(--primary); }
.erone-cal-item.is-task { --cal-color: var(--warning); }
.erone-cal-item.is-followup { --cal-color: var(--success); }
.erone-cal-item.is-project { --cal-color: var(--indigo); }
/* 취소된 일정은 지우지 않는다. 있었다는 사실은 남기되 지나간 것으로 보인다. */
.erone-cal-item.is-cancelled { opacity: 0.55; text-decoration: line-through; }
.erone-cal-time { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.erone-cal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-cal-more { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }

/* 사람 고르기. 긴 체크박스 표를 만들지 않는다 - 20~30명이면 표가 화면을
 * 가득 채우고, 좁은 폭에서는 스크롤만 남는다. */
.erone-people { display: grid; gap: 6px; }
.erone-people-label { font-size: var(--text-xs); color: var(--text-muted); }
.erone-people-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; }
.erone-people-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  font-size: var(--text-xs);
}
.erone-people-chip button {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}
.erone-people-chip.is-static { padding-right: 8px; }
.erone-people-options {
  display: grid;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.erone-people-option {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  cursor: pointer;
}
.erone-people-option:hover { background: var(--surface-strong); }
.erone-people-option.is-on { background: var(--surface-strong); font-weight: 600; }
.erone-people-option span { color: var(--text-muted); font-size: var(--text-xs); }

.erone-schedule-more { margin-top: 10px; }
.erone-schedule-more > summary { cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); }
.erone-schedule-detail dl { display: grid; gap: 4px; margin: 0 0 12px; }
.erone-schedule-detail dl > div { display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr); gap: var(--space-3); }
.erone-schedule-detail dt { color: var(--text-muted); font-size: var(--text-xs); }
.erone-schedule-detail dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.erone-schedule-detail h4 { margin: 12px 0 5px; font-size: var(--text-xs); color: var(--text-muted); }
.erone-schedule-people { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.erone-schedule-activities { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.erone-schedule-activities button {
  padding: 0; border: 0; background: none; color: var(--text);
  font-size: var(--text-sm); text-align: left; text-decoration: underline; cursor: pointer;
}

/* 대시보드 - 오늘 일정. 아침에 가장 먼저 묻는 것이라 맨 위에 둔다. */
.erone-today-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.erone-today-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.erone-today-time { flex: none; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.erone-today-main {
  display: grid; gap: 1px; flex: 1 1 auto; min-width: 0;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.erone-today-main strong { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-today-main span { font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  /* 좁은 폭에서는 참석자 목록이 화면을 다 먹지 않게 줄인다. 다섯 명을 골라도
   * 칩은 줄바꿈으로 흐르고, 가로로 밀리지 않는다. */
  .erone-people-options { max-height: 132px; }
  .erone-people-chips { max-height: 92px; overflow-y: auto; }
  .erone-cal-item { font-size: var(--text-xs); padding-left: 4px; }
  .erone-cal-time { display: none; }
  .erone-schedule-detail dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .erone-cal-legend { gap: 4px; }
}

/* --- SF-025: 일정 충돌 경고 ------------------------------------------------
 *
 * 경고이지 차단이 아니다. 붉은 테두리로 막아선 것처럼 보이지 않게, 노란 쪽에
 * 가깝게 둔다 - 사용자는 이것을 읽고 그대로 저장할 수 있다.
 */
.erone-conflict {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--warning-border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--warning-soft);
  font-size: var(--text-sm);
}
.erone-conflict strong { display: block; margin-bottom: 6px; font-size: var(--text-sm); }
.erone-conflict ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.erone-conflict li { display: grid; grid-template-columns: var(--label-column) minmax(0, 1fr); gap: var(--space-3); }
.erone-conflict-who { color: var(--text-muted); font-size: var(--text-xs); }
.erone-conflict-what { font-size: var(--text-xs); overflow-wrap: anywhere; }
/* 볼 수 없는 일정은 제목 대신 이 한마디뿐이다. */
.erone-conflict-what em { color: var(--text-muted); font-style: normal; }
.erone-conflict-note { margin: 6px 0 0; color: var(--text-muted); font-size: var(--text-xs); }

@media (max-width: 640px) {
  /* 경고가 커져서 저장 버튼을 화면 밖으로 밀지 않게 한다. 참석자가 여럿이고
   * 제목이 길어도 세로로만 자란다. */
  .erone-conflict li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .erone-conflict { max-height: 160px; overflow-y: auto; }
}

/* --- SF-076: 업무 표 (Flow 모양) -------------------------------------------
 *
 * docs/flow-reference/01_WORKSPACE_LAYOUT.md §4.
 *
 * 색은 ER ONE 토큰 그대로 쓰되, 표 자체는 회색 쪽으로 눌러 둔다. 열한 개
 * 열에 색이 섞이면 어디를 봐야 할지 알 수 없다. 색을 쓰는 것은 셋뿐이다 -
 * 상태 칩, 지난 마감일, 진척도 막대.
 *
 * 줄 높이 36px. 40px 로 두면 1280 화면에 열다섯 줄밖에 안 들어가고, 묶어서
 * 보는 뜻이 없어진다.
 */

.erone-flow-toolbar {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.erone-flow-toolbar-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 조건 고르는 줄은 "필터" 를 켤 때만 나온다.
 *
 * 공용 규칙은 .erone-toolbar-filters { display: contents } 라 부모가 flex
 * 한 줄일 때만 맞는다. 여기는 세로 grid 라서 그대로 두면 select 여섯 개가
 * 한 줄씩 차지해 화면 절반을 먹는다(실제로 그랬다). 이 자리에서는 따로 잡는다. */
.erone-flow-toolbar .erone-toolbar-filters { display: none; }
.erone-flow-toolbar .erone-toolbar-filters.is-open {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.erone-flow-toolbar .erone-toolbar-filters .erone-select {
  height: var(--control-height-sm);
  min-width: 132px;
  max-width: 180px;
  font-size: var(--text-xs);
}

/* 보기 전환. 칩들과 같은 높이에 두어 한 줄로 읽히게 한다. */
.erone-flow-views {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.erone-flow-view {
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}
.erone-flow-view.is-active {
  background: var(--surface);
  color: var(--text);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-hover);
}

/* 켜진 것에는 × 가 붙는다. 끄는 길이 켠 자리와 같은 곳에 있다. */
.erone-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.erone-flow-chip:hover { border-color: var(--border-strong); }
.erone-flow-chip.is-on {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: var(--weight-semibold);
}
.erone-flow-chip .icon { width: var(--icon-sm); height: var(--icon-sm); }
.erone-flow-badge {
  min-width: 16px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-align: center;
}
.erone-flow-chip-off {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--primary-border);
  color: inherit;
  cursor: pointer;
}
.erone-flow-chip-off .icon { width: var(--icon-xs); height: var(--icon-xs); }

.erone-flow-search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  min-width: 0;
  flex: 0 1 220px;
}
.erone-flow-search input {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text);
  min-width: 0;
  width: 100%;
  outline: none;
}
.erone-flow-new { height: var(--control-height-sm); font-size: var(--text-xs); }

/* 열 고르기. 떠 있는 것은 색이 아니라 그림자로 구분한다. */
.erone-flow-menu-anchor { position: relative; display: inline-flex; }
.erone-flow-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: var(--space-1);
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.erone-flow-menu-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
}

/* 걸린 조건. 무엇이 걸렸는지 숨기지 않는다. */
.erone-flow-applied { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.erone-flow-chip-applied {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-xs);
}
.erone-flow-chip-key { color: var(--text-muted); }
.erone-flow-chip-applied b { font-weight: var(--weight-semibold); color: var(--text); }
.erone-flow-chip-applied button {
  display: inline-flex;
  border: 0;
  padding: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.erone-flow-chip-applied .icon { width: var(--icon-xs); height: var(--icon-xs); }
.erone-flow-clear {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

/* --- 표 ------------------------------------------------------------------ */

.erone-flow-table-wrap { overflow-x: auto; }
table.erone-flow-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.erone-flow-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
  text-align: left;
  white-space: nowrap;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
}
.erone-flow-table th button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}
.erone-flow-sort { color: var(--border-strong); }
.erone-flow-sort.is-on { color: var(--primary); }

.erone-flow-table td {
  height: 36px;
  padding: 0 var(--space-4);
  white-space: nowrap;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}
.erone-flow-cell-name { color: var(--text); width: 34%; min-width: 300px; }
.erone-flow-row:hover td { background: var(--primary-softer); }
.erone-flow-row.is-selected td { background: var(--primary-soft); }

/* 묶음 머리. 2단 접기의 1단. */
.erone-flow-group td {
  height: 34px;
  padding: 0;
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
}
.erone-flow-group-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text);
  padding: 0 var(--space-4);
  height: 34px;
  cursor: pointer;
}
.erone-flow-count { color: var(--text-muted); font-weight: var(--weight-medium); }

/* 접기 표시는 CSS 로 그린다. SUIT 에 ▾ 가 없어 뒤쪽 글꼴로 넘어가면
 * 자리마다 다른 모양이 된다. */
.erone-flow-caret { position: relative; display: inline-block; width: 12px; height: 12px; flex: none; }
.erone-flow-caret.is-open::before {
  content: '';
  position: absolute;
  left: 2px;
  top: var(--space-1);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
}
.erone-flow-caret.is-shut::before {
  content: '';
  position: absolute;
  left: var(--space-1);
  top: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--text-muted);
}

/* 업무 이름. 하위업무는 들여쓴다. */
.erone-flow-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.erone-flow-indent { width: var(--space-6); flex: none; }
.erone-flow-subline { width: var(--space-3); flex: none; border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); height: 7px; align-self: flex-start; margin-top: var(--space-3); }
.erone-flow-title {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.erone-flow-title:hover { color: var(--primary-dark); text-decoration: underline; }
.erone-flow-flag {
  flex: none;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.erone-flow-person { display: inline-flex; align-items: center; gap: var(--space-2); }
.erone-flow-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.erone-flow-blank { color: var(--border-strong); }
.erone-flow-no { color: var(--text-muted); }

/* 마감일이 지났으면 빨강. 판정은 Core 가 한다 - 보류·완료·취소는 지연이 아니다. */
.erone-flow-date.is-late { color: var(--danger); font-weight: var(--weight-semibold); }

.erone-flow-priority { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.erone-flow-tri { display: inline-block; width: 0; height: 0; flex: none; }
.erone-flow-priority.is-high { color: var(--danger); }
.erone-flow-priority.is-high .erone-flow-tri {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--danger);
}
.erone-flow-priority.is-medium { color: var(--text-muted); }
.erone-flow-priority.is-medium .erone-flow-tri { width: 7px; border-top: 2px solid var(--text-muted); }
.erone-flow-priority.is-low { color: var(--text-muted); }
.erone-flow-priority.is-low .erone-flow-tri {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text-muted);
}

.erone-flow-progress { display: inline-flex; align-items: center; gap: var(--space-2); }
.erone-flow-bar { width: 54px; height: 4px; flex: none; border-radius: var(--radius-pill); background: var(--surface-strong); overflow: hidden; }
.erone-flow-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.erone-flow-bar.is-done > span { background: var(--success); }
.erone-flow-pct { color: var(--text-muted); font-size: var(--text-xs); min-width: 30px; }

/* 줄 안에서 바로 더한다. */
.erone-flow-add td { height: 34px; }
.erone-flow-add button,
.erone-flow-groupadd button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.erone-flow-add button:hover,
.erone-flow-groupadd button:hover { color: var(--primary-dark); }
.erone-flow-groupadd { padding: var(--space-3) var(--space-4) var(--space-5); }
.erone-flow-groupadd button { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.erone-flow-groupadd { display: flex; align-items: center; gap: var(--space-2); }
.erone-flow-groupname { max-width: 240px; height: var(--control-height-sm); font-size: var(--text-sm); }
.erone-flow-groupadd .erone-button { height: var(--control-height-sm); font-size: var(--text-xs); }

/* --- SF-078: 내 프로젝트 ----------------------------------------------------
 *
 * 들어오면 가장 먼저 보이는 화면이다. 여기서 할 일은 고르는 것 하나뿐이라,
 * 카드에 적는 것을 넷으로 줄였다 - 색 띠 · 이름 · 영업 여부 · 인원수.
 */

.erone-project-toolbar { gap: var(--space-2); }

.erone-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}
.erone-scope-chip:hover { border-color: var(--border-strong); }
.erone-scope-chip b { color: var(--text-muted); font-weight: var(--weight-semibold); }
.erone-scope-chip.is-on {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: var(--weight-semibold);
}
.erone-scope-chip.is-on b { color: var(--primary-dark); }

.erone-project-section {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.erone-project-section > span { color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--text-sm); }

.erone-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: var(--space-4);
}

/* 왼쪽 세로 색 띠. 프로젝트를 눈으로 가르는 가장 빠른 길이다. */
.erone-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 112px;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.erone-project-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--project-slate);
}
.erone-project-card.is-sky::before { background: var(--project-sky); }
.erone-project-card.is-mint::before { background: var(--project-mint); }
.erone-project-card.is-grape::before { background: var(--project-grape); }
.erone-project-card.is-amber::before { background: var(--project-amber); }
.erone-project-card.is-rose::before { background: var(--project-rose); }
.erone-project-card.is-slate::before { background: var(--project-slate); }
.erone-project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.erone-project-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.erone-project-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.erone-project-title {
  flex: 1;
  border: 0;
  padding: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-align: left;
  cursor: pointer;
}
.erone-project-title:hover { color: var(--primary-dark); }

.erone-project-star { flex: none; border: 0; padding: 0; background: none; color: var(--border-strong); cursor: pointer; }
.erone-project-star .icon { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 1.6; }
.erone-project-star:hover { color: var(--warning); }
.erone-project-star.is-on { color: var(--warning); }
.erone-project-star.is-on .icon { fill: currentColor; }

.erone-project-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.erone-project-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  color: var(--text-soft);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.erone-project-tag.is-sales { background: var(--primary-soft); color: var(--primary-dark); }
.erone-project-tag.is-won { background: var(--success-soft); color: var(--success); }
/* --- SF-111: 실주 ------------------------------------------------------------
   진 것은 **조용하다.** 빨강으로 칠하면 목록에서 지연 업무보다 눈에
   띄는데, 이미 끝난 일이라 더 볼 것이 없다. */
.erone-project-tag.is-lost { background: var(--surface-strong); color: var(--text-muted); }
.erone-project-tag.is-why { background: none; border: 1px solid var(--border); color: var(--text-muted); }
.erone-project-card.is-lost-card { background: var(--surface-soft); border-style: dashed; }
.erone-project-card.is-lost-card .erone-project-title { color: var(--text-soft); }
.erone-project-grid.is-lost { margin-top: var(--space-4); }
.erone-lost-fold { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin-top: var(--space-6); padding: var(--space-4); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--text-soft); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.erone-lost-fold:hover { border-color: var(--text-muted); color: var(--text); }
.erone-lost-fold:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-lost-fold b { font-weight: var(--weight-bold); }
.erone-lost-fold span { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }
/* 스프라이트의 chevron 은 오른쪽(›)이다. 펼치면 아래를 본다. */
.erone-lost-fold .icon { flex: none; transition: transform var(--motion-fast) var(--ease-standard); }
.erone-lost-fold.is-open .icon { transform: rotate(90deg); }

.erone-project-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.erone-project-people {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --- SF-078: 프로젝트를 만들 때 고르는 칸 ------------------------------------
 *
 * 모두 "한 번 고르고 마는" 값이다. select 로 접어 두면 무엇을 고를 수
 * 있는지가 안 보인다 - 열어 봐야 아는 것은 고르는 데 한 단계가 더 든다.
 */

.erone-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.erone-pick {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
/* 고른 표시는 **지금 체크된 것**을 본다. 처음 그릴 때 붙인 class 로 두면
   눌러도 테두리가 안 옮겨간다 - 값은 바뀌는데 눈에는 그대로다. */
.erone-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-softer); box-shadow: 0 0 0 1px var(--primary); }
.erone-pick input { margin-top: 3px; accent-color: var(--primary); }
.erone-pick b { display: block; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.erone-pick small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-snug); }

.erone-swatch { display: flex; gap: var(--space-2); }
.erone-swatch-dot {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--project-slate);
  cursor: pointer;
  display: block;
}
.erone-swatch-dot.is-sky { background: var(--project-sky); }
.erone-swatch-dot.is-mint { background: var(--project-mint); }
.erone-swatch-dot.is-grape { background: var(--project-grape); }
.erone-swatch-dot.is-amber { background: var(--project-amber); }
.erone-swatch-dot.is-rose { background: var(--project-rose); }
.erone-swatch-dot.is-slate { background: var(--project-slate); }
.erone-swatch-dot input { position: absolute; opacity: 0; width: 0; height: 0; }
.erone-swatch-dot:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }

.erone-pick-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.erone-pick-tab {
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* `.field label { font-weight: 700 }` 이 이 <label> 까지 잡는다. 그대로
   두면 **안 고른 쪽이 더 굵게** 보여 어느 것이 골라졌는지 거꾸로 읽힌다.
   같은 무게로 이기도록 .field 를 앞에 둔다. */
.field .erone-pick-tab { font-weight: var(--weight-normal); }
.field .erone-pick { font-weight: var(--weight-normal); }
.field .erone-toggle-row { font-weight: var(--weight-normal); }
.field .erone-pick-tab:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); font-weight: var(--weight-semibold); }
.erone-pick-tab input { position: absolute; opacity: 0; width: 0; height: 0; }

.erone-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
}
.erone-toggle-row .t { font-size: var(--text-sm); color: var(--text); }
.erone-toggle-row small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
.erone-toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.erone-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background var(--motion-fast) var(--ease-standard);
}
.erone-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  transition: left var(--motion-fast) var(--ease-standard);
}
.erone-toggle-row:has(input:checked) .erone-toggle { background: var(--primary); }
.erone-toggle-row:has(input:checked) .erone-toggle::after { left: 19px; }

/* --- SF-083 업무 표 4단 ----------------------------------------------------
 *
 * 프로젝트 → 그룹 → 상위업무 → 하위업무. 글자 크기와 정렬은 지금 표 그대로
 * 두고 들여쓰기와 줄 종류만 더한다 - 바꾸면 쓰던 사람이 다시 익혀야 한다.
 */
.erone-flow-project td {
  background: var(--surface-strong);
  border-bottom: 1px solid var(--border);
}
.erone-flow-project-head { display: flex; align-items: center; gap: var(--space-2); }
.erone-flow-project-dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none;
  background: var(--project-slate);
}
/* 프로젝트 색은 목록 카드·작업공간 머리와 같은 값을 쓴다(core/projects colorOf).
 * 여기서 색을 안 칠하면 점이 보이지 않아, 표에서 프로젝트를 색으로 못 가린다. */
.erone-flow-project-dot.is-sky { background: var(--project-sky); }

.erone-flow-project-dot.is-mint { background: var(--project-mint); }
.erone-flow-project-dot.is-grape { background: var(--project-grape); }
.erone-flow-project-dot.is-amber { background: var(--project-amber); }
.erone-flow-project-dot.is-rose { background: var(--project-rose); }
.erone-flow-project-dot.is-slate { background: var(--project-slate); }
.erone-flow-project-name { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.erone-flow-goto {
  border: 0; background: none; padding: 0;
  font-size: var(--text-xs); color: var(--primary-dark); font-weight: var(--weight-semibold);
}
.erone-flow-goto:hover { text-decoration: underline; }

/* 묶음 머리줄: 이름·개수는 왼쪽, ＋ 는 오른쪽 끝. */
.erone-flow-group-line { display: flex; align-items: center; gap: var(--space-2); }
.erone-flow-group-line .erone-flow-group-head { flex: 1; min-width: 0; }
.erone-flow-group-plus {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text-muted);
}
.erone-flow-group-plus:hover { border-color: var(--primary); color: var(--primary-dark); }

/* 걸러져 나갔지만 자리를 지키는 부모.
 *
 * 글자만 흐리게 한다 - 배경까지 바꾸면 새 묶음처럼 보인다.
 * 셀 안쪽 글자는 저마다 제 색을 들고 있어서 상속만으로는 안 흐려진다.
 * 줄 전체를 반투명하게 깔고, 그 위에 색을 덮는다. */
.erone-flow-row.is-faded > td { color: var(--text-muted); opacity: 0.6; }
.erone-flow-row.is-faded > td * { color: inherit; }
/* 지난 마감 빨강만은 덮지 않는다 - 흐려도 "늦었다" 는 남아야 한다. */
.erone-flow-row.is-faded > td .erone-flow-date.is-late { color: var(--danger); }

/* 프로젝트 칸이 생기면 그 아래가 한 단 더 들어간다. */
.erone-flow-table:has(.erone-flow-project) .erone-flow-group td { padding-left: var(--space-5); }
.erone-flow-table:has(.erone-flow-project) .erone-flow-cell-name { padding-left: var(--space-6); }
.erone-flow-table:has(.erone-flow-project) .erone-flow-row.is-sub .erone-flow-cell-name {
  padding-left: calc(var(--space-6) + var(--space-5));
}

/* --- SF-079 프로젝트 피드 ------------------------------------------------
 *
 * docs/flow-reference/05_BUILD_PLAN.md §3. 한 프로젝트에 쌓인 글·업무·일정이
 * 한 줄기로 선다. 카드는 흰 면 하나에 테두리 한 겹뿐이다 - 종류마다 다른
 * 장식을 붙이면 같은 피드로 안 읽힌다.
 */

/* 본문과 참여자 패널. 패널은 탭이 아니라 늘 서 있다. */
.erone-workspace-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--space-5); align-items: start;
}
.erone-workspace-main > .erone-workspace-body { min-width: 0; }

.erone-people {
  position: sticky; top: var(--space-5);
  display: grid; gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.erone-people h3 { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.erone-people h3 span { color: var(--text-muted); font-weight: var(--weight-medium); }
.erone-people-group { display: grid; gap: var(--space-1); }
.erone-people-role {
  margin: 0; font-size: var(--text-xs); color: var(--text-muted);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label);
}
.erone-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.erone-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0; }
.erone-person-name { display: grid; min-width: 0; }
.erone-person-name strong { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.erone-person-name small { font-size: var(--text-xs); color: var(--text-muted); }
.erone-people-more {
  border: 0; background: none; padding: 0; text-align: left;
  font-size: var(--text-xs); color: var(--primary-dark); font-weight: var(--weight-semibold);
}
.erone-people-invite { justify-content: center; }

/* 글쓰기 상자. 누르면 기존 만들기 창이 열린다. */
.erone-feedbox {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--space-4);
}
.erone-feedbox-tabs { display: flex; border-bottom: 1px solid var(--border-soft); }
.erone-feedbox-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border: 0; background: none; padding: var(--space-4) 0;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-soft);
}
.erone-feedbox-tab:hover { background: var(--surface-soft); color: var(--primary-dark); }
.erone-feedbox-line {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  border: 0; background: none; padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm); color: var(--text-muted); text-align: left;
}
.erone-feedbox-line:hover { background: var(--surface-soft); }

.erone-feed-bar {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); font-size: var(--text-xs);
}
.erone-feed-spacer { flex: 1; }
.erone-feed-seg {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.erone-feed-density {
  border: 0; background: var(--surface); padding: var(--space-1) var(--space-3);
  color: var(--text-muted); display: inline-flex;
}
.erone-feed-density.is-on { background: var(--primary-soft); color: var(--primary-dark); }

/* 피드는 가운데 720px 까지다(목업 m3·m8).
 *
 * 폭을 안 잡으면 본문 칸 전체(900px 가까이)로 늘어나 한 줄이 길어진다.
 * 긴 줄은 눈이 다음 줄 첫 글자를 못 찾는다 - 피드는 훑는 화면이라 더 그렇다.
 * 글쓰기 상자·바·더 보기도 같은 폭에 맞춘다. 카드만 좁히면 어긋나 보인다. */
.erone-workspace-body > .erone-feedbox,
.erone-workspace-body > .erone-feed-bar,
.erone-workspace-body > .erone-feed-list,
.erone-workspace-body > .erone-feed-more,
.erone-workspace-body > .erone-feed-status,
.erone-workspace-body > .erone-empty { max-width: 720px; margin-left: auto; margin-right: auto; }

/* SF-121: 칸을 minmax(0, 1fr) 로 잡는다. grid 의 기본 칸은 max-content 라
   안의 카드가 **담는 칸보다 넓어진다** - 390px 에서 피드가 16px 만큼 가로로
   스크롤됐다. 램프 줄을 좁은 화면에서 재다가 걸렸다(SF-121 과는 무관하게
   원래 있던 것이다). */
.erone-feed-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.erone-feed-card {
  display: grid; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.erone-feed-card.is-pinned { border-color: var(--primary-soft); background: var(--primary-softer); }

.erone-feed-head { display: flex; align-items: center; gap: var(--space-3); }
.erone-feed-who { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.erone-feed-who strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.erone-feed-who small { font-size: var(--text-xs); color: var(--text-muted); }
.erone-feed-pin, .erone-feed-scope {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs);
}
.erone-feed-pin { color: var(--primary-dark); font-weight: var(--weight-semibold); }
.erone-feed-scope {
  color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0 var(--space-2);
}

.erone-feed-edit {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0;
  font-size: var(--text-xs); color: var(--text-muted);
}
.erone-feed-edit:hover { color: var(--primary-dark); text-decoration: underline; }

.erone-feed-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.erone-feed-title.is-link { border: 0; background: none; padding: 0; text-align: left; color: inherit; }
.erone-feed-title.is-link:hover { color: var(--primary-dark); text-decoration: underline; }
.erone-feed-titlerow { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.erone-feed-body {
  margin: 0; font-size: var(--text-sm); color: var(--text-soft); line-height: var(--leading);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.erone-feed-meta { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-soft); }
.erone-feed-meta > div { display: flex; align-items: center; gap: var(--space-2); }

/* SF-149 댓글에서 올라온 파일임을 적는다. 한 목록에 모으면 어디서 온
   것인지 보여야 한다. */
.task-attachment-from { display: inline-flex; align-items: center;
  font-size: var(--text-xs); color: var(--text-soft);
  background: var(--surface-soft); border-radius: var(--radius-sm);
  padding: 0 var(--space-1); margin-left: var(--space-1); }

/* SF-151 누가 참석하고 누가 불참인지. 숫자만으로는 회의를 다시 잡을지
   정할 수 없다. */
.erone-rsvp-names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--text-xs); }
.erone-rsvp-group { display: inline-flex; gap: var(--space-1); align-items: baseline;
  color: var(--text-soft); }
.erone-rsvp-group b { font-weight: var(--weight-semibold); }
.erone-rsvp-group.is-yes b { color: var(--success); }
.erone-rsvp-group.is-no b { color: var(--danger); }

/* SF-150 작성 모달과 피드 댓글칸의 첨부. 글·업무·일정 어디서든 파일을
   붙일 수 있어야 한다는 사용자 요청. */
.composer-attach-button { position: relative; overflow: hidden; margin-right: auto; }
.composer-attach-button input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.erone-feed-attach { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-soft); position: relative; overflow: hidden; flex: 0 0 auto; }
.erone-feed-attach:hover { background: var(--surface-soft); color: var(--primary-dark); }
.erone-feed-attach input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.erone-feed-reply .erone-picked-files { flex-basis: 100%; }

/* SF-148 고른 파일을 보여 준다.
   예전에는 파일을 골라도 아무 표시가 없어서, 골라졌는지 알 수 없었고
   등록이 거부되면 조용히 사라졌다. */
.erone-picked-files { display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; margin-top: var(--space-2); }
.erone-picked-file { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-soft);
  background: var(--surface-soft); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); max-width: 20rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-picked-clear { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-xs); color: var(--text-soft); }
.erone-picked-clear:hover { color: var(--primary-dark); text-decoration: underline; }

/* 끌어다 놓을 수 있다는 표시. 화면이 그렇게 안내해 놓고 받지 않던 것을
   SF-148 에서 실제로 받게 했다. */
[data-file-drop].is-dragover { outline: 2px dashed var(--primary); outline-offset: 3px;
  background: var(--primary-softer); }

/* SF-146 (R4) 목록에서 눌러 들어온 카드를 잠깐 강조한다.
   피드 맨 위로만 보내면 사람이 그 업무를 또 찾아야 한다. 강조는 2초만
   둔다 - 계속 두면 "선택된 상태" 로 읽힌다. */
.erone-feed-card.is-feed-focus { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .erone-feed-card.is-feed-focus { transition: outline-color var(--motion-normal) var(--ease-standard); }
}

/* SF-145 피드 카드 안의 하위업무·댓글.
   예전에는 "하위업무 1" "댓글 3" 글자만 있었다. 카드에서 일이 끝나야
   한다는 것이 이번 요청의 핵심이라, 목록을 카드 안에 들인다. */
.erone-feed-subtasks { margin-top: var(--space-3); border-top: 1px solid var(--border-soft); padding-top: var(--space-3); }
.erone-feed-subhead { font-size: var(--text-xs); color: var(--text-soft); margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* SF-147 카드에서 바로 더한다. 하나도 없을 때도 보여야 "여기서는 못 만드나"
   로 읽히지 않는다. */
.erone-feed-subadd { display: inline-flex; align-items: center; gap: var(--space-1);
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--text-xs); color: var(--text-soft); }
.erone-feed-subadd:hover { color: var(--primary-dark); text-decoration: underline; }
.erone-feed-reply-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--text-xs); color: var(--text-soft); margin-top: var(--space-1); }
.erone-feed-reply-link:hover { color: var(--primary-dark); text-decoration: underline; }
.erone-feed-subtasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.erone-feed-subtask { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.erone-feed-subtask:hover { background: var(--surface-soft); }
.erone-feed-subtask-title { background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-feed-subtask-title:hover { text-decoration: underline; }
.erone-feed-subtask-meta { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto;
  font-size: var(--text-xs); color: var(--text-soft); }

.erone-feed-comments { margin-top: var(--space-3); border-top: 1px solid var(--border-soft); padding-top: var(--space-3); }
.erone-feed-comments ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.erone-feed-comment { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
.erone-feed-comment > div { min-width: 0; }
.erone-feed-comment strong { margin-right: var(--space-2); }
.erone-feed-comment p { margin: var(--space-1) 0 0; white-space: pre-wrap; word-break: break-word; }
.erone-feed-commentfiles { display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-xs); color: var(--text-soft); margin-top: var(--space-1); }
.erone-feed-morecomments { background: none; border: 0; padding: 0 0 var(--space-2); cursor: pointer;
  font: inherit; font-size: var(--text-xs); color: var(--text-soft); }
.erone-feed-morecomments:hover { text-decoration: underline; }
.erone-feed-late { color: var(--danger); font-weight: var(--weight-semibold); }

.erone-feed-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  height: var(--control-height-sm); padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--tone-soft); color: var(--tone);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.erone-feed-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }

.erone-feed-event { display: flex; align-items: flex-start; gap: var(--space-4); }
.erone-feed-date {
  width: 56px; flex: none; text-align: center; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.erone-feed-date b {
  display: block; padding: 2px 0; background: var(--surface-strong); color: var(--text-muted);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.erone-feed-date i {
  display: block; padding: var(--space-1) 0; font-style: normal;
  font-size: var(--text-xl); font-weight: var(--weight-bold);
}
.erone-feed-eventbody { display: grid; gap: 2px; min-width: 0; }
.erone-feed-when { font-size: var(--text-sm); color: var(--text-soft); }

.erone-feed-foot {
  display: flex; align-items: center; gap: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--border-soft);
  font-size: var(--text-xs); color: var(--text-muted);
}
.erone-feed-stat { display: inline-flex; align-items: center; gap: var(--space-2); }
.erone-feed-read {
  margin-left: auto; border: 0; background: none; padding: 0;
  font-size: var(--text-xs); color: var(--text-muted);
}
/* 내가 이미 본 것은 진하게. 안 본 것과 한눈에 갈린다. */
.erone-feed-read.is-mine { color: var(--primary-dark); font-weight: var(--weight-semibold); }
.erone-feed-read:hover { text-decoration: underline; }

/* 영업과 납품의 경계. 피드를 가르는 것이 아니라 줄 하나를 긋는 것이다. */
.erone-feed-won {
  display: flex; align-items: center; gap: var(--space-4);
  color: var(--success); font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.erone-feed-won::before, .erone-feed-won::after {
  content: ''; flex: 1; height: 1px; background: var(--success-border);
}

.erone-feed-more {
  width: 100%; margin-top: var(--space-4); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--text-sm); color: var(--text-soft);
}
.erone-feed-more:hover { background: var(--surface-soft); color: var(--primary-dark); }
.erone-feed-status { font-size: var(--text-sm); color: var(--text-muted); }
.erone-feed-status.is-error { color: var(--danger); }

/* 붙은 파일. 피드에서 파일이 붙은 줄을 알 수 있어야 한다. */
.erone-feed-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.erone-feed-file {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-soft); font-size: var(--text-xs); color: var(--text-soft);
}
.erone-feed-file span { color: var(--text-muted); }
a.erone-feed-file:hover { border-color: var(--primary); color: var(--primary-dark); }

/* 카드 안 댓글. 다른 화면으로 넘어가지 않는다. */
/* 줄바꿈을 켠다. 아래 .erone-picked-files 의 flex-basis:100% 는 **줄바꿈이
   켜져 있어야** 제 일을 한다 - nowrap 이면 아랫줄로 내려가지 못하고 같은 줄에서
   100% 를 달라고 버틴다. 그러면 글칸이 밀려 찌그러진다.

   실측: 파일 하나를 고르면 글칸이 572px -> 26px 이 됐다. 사용자 말로
   "첨부파일 올려봤는데, 댓글창이 줄어들어서 글을 쓸수가 없네". */
.erone-feed-reply { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); }
.erone-feed-replybox {
  flex: 1; min-height: var(--control-height); resize: vertical;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-soft); font: inherit; font-size: var(--text-sm); color: var(--text);
}
.erone-feed-replybox::placeholder { color: var(--text-muted); font-size: var(--text-xs); }
.erone-feed-replybox:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; background: var(--surface); }
.erone-feed-send {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-height); height: var(--control-height);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted);
}
.erone-feed-send:hover { border-color: var(--primary); color: var(--primary-dark); }

/* --- SF-080 할 일 · 투표 · 참석 여부 --------------------------------------
 *
 * 셋 다 카드 안에서 눌린다. 체크 하나 켜자고 화면을 옮기면 아무도 안 켠다.
 */
.erone-todo-sum { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--text-sm); }
.erone-todo-sum b { color: var(--primary-dark); font-size: var(--text-md); }
.erone-todo-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-strong); overflow: hidden; }
.erone-todo-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--primary); }

.erone-todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.erone-todo-hit {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: var(--text-sm); color: var(--text);
}
button.erone-todo-hit:hover { border-color: var(--primary); background: var(--surface-soft); }
.erone-todo-tick {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text-inverse);
}
.erone-todo-row.is-done .erone-todo-tick { background: var(--primary); border-color: var(--primary); }
.erone-todo-text { flex: 1; min-width: 0; }
.erone-todo-row.is-done .erone-todo-text { color: var(--text-muted); text-decoration: line-through; }
.erone-todo-when { font-size: var(--text-xs); color: var(--text-muted); }

/* SF-082: 내 업무의 "나에게 온 할 일". */
.erone-mytodos { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.erone-mytodos header h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.erone-mytodos header h3 b { color: var(--primary-dark); }
.erone-mytodos .erone-todo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.erone-todo-where {
  border: 0; background: none; padding: 0; text-align: right;
  font-size: var(--text-xs); color: var(--text-muted); max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.erone-todo-where:hover { color: var(--primary-dark); text-decoration: underline; }
.erone-todo-when.is-late { color: var(--danger); font-weight: var(--weight-semibold); }

.erone-poll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.erone-poll-hit {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; overflow: hidden;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font: inherit; font-size: var(--text-sm); color: var(--text);
}
button.erone-poll-hit:hover { border-color: var(--primary); }
.erone-poll-row.is-on .erone-poll-hit { border-color: var(--primary); }
/* 막대는 글자 뒤에 깔린다. 다른 자식만 위로 올린다 - 전부 올리면 막대가
 * 흐름에 끼어 오른쪽으로 밀려난다(목업에서 한 번 겪었다). */
.erone-poll-hit > *:not(.erone-poll-fill) { position: relative; }
.erone-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary-softer); }
.erone-poll-tick {
  flex: none; width: 16px; height: 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); background: var(--surface);
}
.erone-poll-row.is-on .erone-poll-tick { border-color: var(--primary); background: var(--primary); }
.erone-poll-label { flex: 1; min-width: 0; }
.erone-poll-count { font-size: var(--text-xs); color: var(--text-muted); }
.erone-poll-foot { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.erone-rsvp-tally { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.erone-rsvp-tally b { color: var(--success); }
.erone-rsvp { display: flex; gap: var(--space-2); }
.erone-rsvp-button {
  flex: 1; height: var(--control-height);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--text-soft);
}
.erone-rsvp-button:hover { border-color: var(--primary); color: var(--primary-dark); }
.erone-rsvp-button.is-on { border-color: var(--success); background: var(--success-soft); color: var(--success); }

/* 할 일 줄 · 투표 보기 · 공개범위 (글쓰기 팝업) */
.erone-composer-sub-row.is-todo {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px auto; gap: var(--space-2); align-items: center;
}
.erone-composer-sub-row.is-poll {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center;
}
.erone-composer-scope { max-width: 220px; margin-right: auto; }
.erone-composer-picked {
  display: grid; gap: var(--space-2);
  padding-top: var(--space-4); border-top: 1px solid var(--border-soft);
}
.erone-composer-pickgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2);
  max-height: 180px; overflow: auto;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

@media (max-width: 1100px) {
  .erone-workspace-main { grid-template-columns: minmax(0, 1fr); }
  .erone-people { position: static; }
}

/* SF-087: 일정 상세 패널.
 *
 * 업무 패널과 같은 틀이다. 머리줄 왼쪽의 날짜 도장만 일정에만 있는 것이고,
 * 나머지(이름표 + 값, 댓글, 쓰는 칸)는 업무 쪽 모습을 그대로 쓴다. */
.erone-event-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.erone-event-head-copy { flex: 1; min-width: 0; }
.erone-event-head h2 { margin: 0 0 var(--space-1); font-size: var(--text-md); line-height: 1.35; }
.erone-event-head p { margin: 0; color: var(--text-soft); font-size: var(--text-xs); }
.erone-event-head .erone-icon-button { flex: none; }

/* 달과 일을 따로 읽게 둔다. 목록에서 패널로 넘어왔을 때 "며칠 것을 보고
 * 있나" 가 제목보다 먼저 눈에 들어와야 한다. */
.erone-event-stamp {
  flex: none;
  width: 52px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.erone-event-stamp span { display: block; padding: var(--space-1) 0; background: var(--surface-strong); color: var(--text-muted); font-size: var(--text-2xs); font-weight: 700; }
.erone-event-stamp b { display: block; padding: var(--space-1) 0; font-size: var(--text-md); font-weight: 700; }

/* 이름표 + 값. 업무 패널의 라벨 열과 같은 폭으로 맞춘다. */
.erone-event-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-soft); font-size: var(--text-sm); }
.erone-event-row-label { flex: none; width: 58px; color: var(--text-muted); font-size: var(--text-xs); }
.erone-event-row-body { flex: 1; min-width: 0; }
.erone-event-rsvp-count { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-event-rsvp-count b { color: var(--tone-green); }
.erone-event-rsvp-count i { color: var(--danger); font-style: normal; }
.erone-event-tag { display: inline-flex; padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--tone-violet-soft); color: var(--tone-violet); font-size: var(--text-xs); font-weight: 700; }
.erone-event-link { background: transparent; border: 0; padding: 0; color: var(--primary); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; text-decoration: none; }
.erone-event-body { padding: var(--space-4) 0; border-top: 1px solid var(--border-soft); color: var(--text-soft); font-size: var(--text-sm); line-height: 1.7; white-space: pre-line; }
.erone-event-more { padding: var(--space-4) 0; border-top: 1px solid var(--border); }

/* 참석 여부. 셋을 같은 넓이로 둬서 "고르는 것" 으로 보이게 한다. */
.erone-event-rsvp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.erone-event-rsvp { padding: var(--space-2) 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.erone-event-rsvp:hover { background: var(--surface-soft); }
.erone-event-rsvp.is-on { background: var(--tone-green); border-color: var(--tone-green); color: var(--text-onDark); }
.erone-event-rsvp.is-on:hover { background: var(--tone-green); }
.erone-event-rsvp:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.erone-event-rsvp-none { margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); }

/* SF-089: 간트 (6단계).
 *
 * 왼쪽 표와 오른쪽 타임라인은 따로 그리지만 **줄이 1:1 로 맞아야** 한다.
 * 높이를 두 군데서 따로 적으면 하나를 고칠 때 반드시 어긋나므로, 종류마다
 * 한 번만 적고 양쪽이 그 값을 함께 쓴다. */
.erone-gantt {
  --gantt-row: 36px;      /* 업무 줄 */
  --gantt-band: 34px;     /* 프로젝트·그룹 머리줄 */
  --gantt-add: 32px;      /* "새 업무 추가" 줄 */
  --gantt-head: 38px;     /* 머리줄 */
  --gantt-left: 474px;
  display: grid;
  grid-template-columns: var(--gantt-left) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.erone-gantt-left { border-right: 2px solid var(--border); }
.erone-gantt-right { overflow-x: auto; }

.erone-gantt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 86px 86px;
  align-items: center;
  height: var(--gantt-row);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--text-sm);
}
.erone-gantt-row > * { padding: 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-gantt-row.is-head { height: var(--gantt-head); background: var(--surface-soft); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; }
.erone-gantt-row.is-dim { opacity: .55; }
.erone-gantt-row.is-sub .erone-gantt-title { padding-left: var(--space-5); }
.erone-gantt-date { color: var(--text-muted); font-size: var(--text-xs); }
.erone-gantt-title { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-gantt-title:hover { color: var(--primary); }

/* 머리줄 둘은 한 칸을 통째로 쓴다. */
.erone-gantt-row.is-project,
.erone-gantt-row.is-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--gantt-band);
  border-bottom: 1px solid var(--border);
}
.erone-gantt-row.is-project { background: var(--surface-strong); font-weight: 700; }
.erone-gantt-row.is-group { background: var(--surface-strong); }
.erone-gantt-row.is-group > * { padding: 0; }
.erone-gantt-row.is-project > * { padding: 0; }
.erone-gantt-row.is-project { padding: 0 var(--space-3); }
/* 프로젝트 줄과 그룹 줄은 **같은 색**이다(표도 그렇다). 가르는 것은
 * 색이 아니라 들여쓰기와 프로젝트의 색 점이다. */
.erone-gantt-row.is-group { padding: 0 var(--space-3) 0 var(--space-5); }
.erone-gantt-group-head { display: inline-flex; align-items: center; gap: var(--space-2); border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.erone-gantt-project-name { font-size: var(--text-sm); }
.erone-gantt-row.is-add { display: flex; align-items: center; height: var(--gantt-add); background: var(--surface); }
.erone-gantt-row.is-add button { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-gantt-row.is-add button:hover { color: var(--primary); }

/* 오른쪽. 칸 수는 --gantt-days 가 정하고, 한 칸은 최소 28px 이다 -
 * 8주를 고르면 가로로 넘겨 본다(줄여서 뭉개지 않는다). */
.erone-gantt-days,
.erone-gantt-track {
  display: grid;
  grid-template-columns: repeat(var(--gantt-days), minmax(28px, 1fr));
}
.erone-gantt-days { height: var(--gantt-head); background: var(--surface-soft); border-bottom: 1px solid var(--border); }
/* 11px(--text-2xs)은 쓸 수 있는 자리가 셋으로 묶여 있고 이미 다 찼다.
 * 요일 한 글자는 12px 이어도 28px 칸에 들어간다. */
.erone-gantt-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-left: 1px solid var(--border-soft); color: var(--text-muted); font-size: var(--text-xs); line-height: 1.15; }
.erone-gantt-day b { color: var(--text-soft); font-size: var(--text-xs); }
.erone-gantt-day.is-weekend { background: var(--surface); }
.erone-gantt-day.is-today b { background: var(--primary); color: var(--text-onDark); border-radius: var(--radius-pill); padding: 0 var(--space-1); }

/* 칸과 막대가 같은 격자의 형제다. 둘 다 1행에 놓아 겹치게 한다. */
.erone-gantt-track { position: relative; height: var(--gantt-row); border-bottom: 1px solid var(--border-soft); }
.erone-gantt-track.is-project,
.erone-gantt-track.is-group { height: var(--gantt-band); border-bottom: 1px solid var(--border); }
.erone-gantt-track.is-project { background: var(--surface-strong); }
.erone-gantt-track.is-group { background: var(--surface-strong); }
.erone-gantt-track.is-add { height: var(--gantt-add); }
.erone-gantt-cell { grid-row: 1; border-left: 1px solid var(--border-soft); }
.erone-gantt-cell.is-weekend { background: var(--surface-soft); }
.erone-gantt-cell.is-today { background: var(--primary-softer); }

.erone-gantt-bar,
.erone-gantt-rollup { grid-row: 1; grid-column: var(--from) / span var(--span); align-self: center; }

.erone-gantt-bar {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.erone-gantt-bar > span { overflow: hidden; text-overflow: ellipsis; }
/* 창 밖으로 이어지는 쪽은 모서리를 펴서 "더 있다" 를 알린다. */
/* 취소는 끝난 일이다. tone 이 red 라 그대로 두면 지연 막대와 같은 빨강으로
   보여 급한 일로 읽힌다. **숨기지는 않는다** - 기록은 남아야 한다. 눌러 둔다.
   (옛 간트에 있던 규칙이다. 새 간트로 옮기면서 빠져 있었다.) */
.erone-gantt-bar.is-cancelled { opacity: 0.45; }
.erone-gantt-bar.is-clipped-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.erone-gantt-bar.is-clipped-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* 묶음 막대. 업무 막대보다 눌러 둔다 - 묶음은 거드는 정보다. */
.erone-gantt-rollup { height: 8px; border-radius: var(--radius-pill); background: var(--border-strong); }

/* 막대 색은 상태 색판 그대로다. 간트만의 색을 새로 만들지 않는다. */
.erone-gantt-bar.is-sky { background: var(--tone-sky-soft); color: var(--tone-sky); box-shadow: inset 3px 0 0 var(--tone-sky); }
.erone-gantt-bar.is-blue { background: var(--tone-blue-soft); color: var(--tone-blue); box-shadow: inset 3px 0 0 var(--tone-blue); }
.erone-gantt-bar.is-green { background: var(--green-soft); color: var(--tone-green); box-shadow: inset 3px 0 0 var(--tone-green); }
.erone-gantt-bar.is-amber { background: var(--yellow-soft); color: var(--tone-amber); box-shadow: inset 3px 0 0 var(--tone-amber); }
.erone-gantt-bar.is-violet { background: var(--tone-violet-soft); color: var(--tone-violet); box-shadow: inset 3px 0 0 var(--tone-violet); }
.erone-gantt-bar.is-gray,
.erone-gantt-bar.is-neutral { background: var(--surface-strong); color: var(--text-soft); box-shadow: inset 3px 0 0 var(--tone-gray); }
.erone-gantt-bar.is-red { background: var(--red-soft); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }

/* 툴바의 기간 고르개. 글자가 잘리지 않을 만큼만 준다. */
.erone-flow-span .erone-select { width: auto; min-width: 72px; height: var(--control-height-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }

/* 간트의 "이전 기간". 스프라이트 chevron 은 오른쪽이라 뒤집는다. */
.erone-icon-button.is-back .icon { transform: rotate(180deg); }

/* SF-090: 캘린더 보조 패널 (7단계).
 *
 * 달력 위에 떠 있던 거르개 칩들을 왼쪽으로 모은다. 칩이 내려간 만큼 달력이
 * 넓어진다. 좁은 화면에서는 패널을 위로 접어 가로로 눕힌다 - 세 칸을 그대로
 * 두면 달력 한 칸이 글자 폭보다 좁아진다. */
.calendar-shell.has-side { grid-template-columns: 232px minmax(0, 1fr) 260px; }

.erone-cal-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* 미니 달력. 달을 건너뛰고, 어느 날에 뭐가 있는지 점으로 본다. */
.erone-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--text-xs); }
.erone-mini-head strong { font-size: var(--text-sm); }
.erone-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
/* 11px(--text-2xs)은 쓸 자리가 셋으로 묶여 있고 이미 찼다. 미니 달력
 * 한 칸이 28px 남짓이라 12px 요일 한 글자는 들어간다. */
.erone-mini-wd { padding: var(--space-1) 0; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.erone-mini-day {
  position: relative;
  padding: var(--space-1) 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.erone-mini-day:hover { background: var(--surface-strong); }
.erone-mini-day.is-outside { color: var(--border-strong); }
.erone-mini-day.is-today { background: var(--primary); color: var(--text-onDark); font-weight: 700; }
.erone-mini-day.is-selected { box-shadow: inset 0 0 0 1px var(--primary); }
/* 점은 "그날 뭔가 있다" 는 표시다. 오늘 칸에서는 바탕이 진하므로 흰 점으로 뒤집는다. */
.erone-mini-day.has-items::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--primary);
}
.erone-mini-day.is-today.has-items::after { background: var(--text-onDark); }

.erone-cal-mine { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; }
.erone-cal-mine input { margin-left: auto; }

.erone-cal-block h3 { display: flex; align-items: center; min-height: var(--control-height-sm); margin: 0 0 var(--space-2); color: var(--text-soft); font-size: var(--text-xs); font-weight: 700; }
.erone-cal-opt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; color: var(--text-soft); font-size: var(--text-sm); cursor: pointer; }
.erone-cal-opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-cal-count { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); }
.erone-cal-swatch { width: 9px; height: 9px; border-radius: var(--radius-xs); flex: none; }
.erone-cal-swatch.is-visit { background: var(--tone-violet); }
.erone-cal-swatch.is-task { background: var(--tone-sky); }
.erone-cal-swatch.is-followup { background: var(--tone-green); }
.erone-cal-swatch.is-project { background: var(--primary); }

/* SF-092 분류 관리. 목록은 모두가 보고, 더하기·지우기 단추 만 관리자에게 뜬다.
   지우기 단추는 hover 에서만 드러내지 않는다 - 손가락에는 hover 가 없다. */
.erone-cal-add { margin-left: auto; }
.erone-cal-row { display: flex; align-items: center; gap: var(--space-1); }
.erone-cal-row .erone-cal-opt { flex: 1; min-width: 0; }
.erone-cal-del { flex: none; color: var(--text-muted); }
.erone-cal-del-gap { flex: none; width: var(--control-height-sm); }
.erone-cal-del:hover, .erone-cal-del:focus-visible { color: var(--danger); }
.erone-cal-newcat { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.erone-cal-newcat .erone-input { flex: 1; min-width: 0; height: var(--control-height-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }
.erone-cal-newcat .erone-button { flex: none; height: var(--control-height-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }

/* 1440 아래에서는 세 칸이 안 된다. 보조 패널을 위로 올려 가로로 눕힌다. */
@media (max-width: 1439px) {
  .calendar-shell.has-side { grid-template-columns: minmax(0, 1fr) 260px; }
  .erone-cal-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .erone-cal-side .erone-mini { width: 220px; }
  .erone-cal-side .erone-cal-block { min-width: 150px; }
}
@media (max-width: 1023px) {
  .calendar-shell.has-side { grid-template-columns: minmax(0, 1fr); }
}

/* SF-091: 주·일 보기 (7단계).
 *
 * 한 시간 칸의 높이는 화면(calendar-week.mjs HOUR_PX)이 --hour-px 로 내려
 * 준다. CSS 에 숫자를 또 적으면 막대가 눈금에서 반 칸씩 어긋난다. */
.erone-wk {
  --row: calc(var(--hour-px) * 1px);
  display: block;
}
.erone-wk-head,
.erone-wk-allday { display: grid; grid-template-columns: 54px repeat(var(--wk-days), minmax(0, 1fr)); }
.erone-wk-head { background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.erone-wk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) 0;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}
.erone-wk-day b { color: var(--text-soft); font-size: var(--text-md); }
.erone-wk-day.is-today b { background: var(--primary); color: var(--text-onDark); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.erone-wk-corner { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: var(--text-xs); }

/* 종일 줄. 업무·후속조치처럼 시각이 없는 것이 여기 선다. */
.erone-wk-allday { min-height: 30px; border-bottom: 2px solid var(--border); }
.erone-wk-allday-cell { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-left: 1px solid var(--border-soft); }
.erone-wk-chip {
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erone-wk-body { position: relative; display: grid; grid-template-columns: 54px repeat(var(--wk-days), minmax(0, 1fr)); }
.erone-wk-gutter { border-right: 1px solid var(--border); }
/* 눈금 글자는 그 시간 **칸의 맨 위**에 붙는다. 칸 경계를 아래(border-bottom)
 * 에 두고 글자를 반 줄 올리면, 첫 글자가 본문 밖으로 밀려 올라가 종일 줄과
 * 겹친다(실제로 그랬다). 경계를 위에 두고 글자도 위에 붙인다. */
.erone-wk-hour {
  display: block;
  height: var(--row);
  padding: 2px var(--space-2) 0 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1;
  text-align: right;
}
.erone-wk-col { position: relative; border-left: 1px solid var(--border-soft); }
.erone-wk-slot { display: block; height: var(--row); border-top: 1px solid var(--border-soft); }
/* 업무시간 밖은 **눌러만** 둔다. 접어서 없애면 그 시간에 잡힌 일정이
 * 통째로 안 보이고, 사람은 일정이 사라진 줄 안다. */
.erone-wk-slot.is-off { background: var(--surface-soft); }

/* 막대는 겹친 만큼 나란히 선다. 폭과 왼쪽은 Core 가 센 열 수가 정한다. */
.erone-wk-ev {
  position: absolute;
  top: calc(var(--top) * var(--row));
  height: calc(var(--height) * var(--row) - 2px);
  /* 열 안에서만 눕는다. --left/--width 는 겹친 만큼 나눈 비율이고,
   * 거기서 양옆 여백을 뺀다 - 안 빼면 마지막 칸이 옆 칸을 넘어간다. */
  left: calc(var(--left) + 2px);
  width: calc(var(--width) - 4px);
  padding: 2px var(--space-2);
  border: 0;
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  /* 한 줄로 자른다. 한 시간짜리 막대가 34px 인데 두 줄이 되면 아랫줄이
   * 글자 가운데서 잘려 읽을 수도 없고 깨져 보인다. 전체 문구는 title 로 남긴다. */
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.erone-wk-ev b { font-weight: 700; }
.erone-wk-ev.is-event, .erone-wk-chip.is-event { background: var(--tone-violet-soft); color: var(--tone-violet); box-shadow: inset 2px 0 0 var(--tone-violet); }
.erone-wk-ev.is-task, .erone-wk-chip.is-task { background: var(--tone-sky-soft); color: var(--tone-sky); box-shadow: inset 2px 0 0 var(--tone-sky); }
.erone-wk-ev.is-followup, .erone-wk-chip.is-followup { background: var(--green-soft); color: var(--tone-green); box-shadow: inset 2px 0 0 var(--tone-green); }
.erone-wk-ev.is-project, .erone-wk-chip.is-project { background: var(--primary-soft); color: var(--primary); box-shadow: inset 2px 0 0 var(--primary); }

/* 지금 시각. 오늘이 보이는 기간 안에 있을 때만 긋는다. */
.erone-wk-now {
  position: absolute;
  left: 54px;
  right: 0;
  top: calc(var(--at) * var(--row));
  height: 0;
  border-top: 2px solid var(--danger);
  pointer-events: none;
}
.erone-wk-now::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--danger);
}

/* 월·주·일 전환과 업무시간 고르개. */
.erone-cal-views { display: inline-flex; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.erone-cal-views button { padding: var(--space-1) var(--space-3); border: 0; background: var(--surface); color: var(--text-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-cal-views button + button { border-left: 1px solid var(--border); }
.erone-cal-views button.is-active { background: var(--primary); color: var(--text-onDark); font-weight: 700; }
.erone-cal-hours { display: flex; align-items: center; gap: var(--space-2); }
.erone-cal-hours .erone-select { flex: 1; height: var(--control-height-sm); padding: 0 var(--space-2); font-size: var(--text-xs); }
.erone-cal-hint { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.55; }

/* --- 모아보기 (SF-093, 8단계) ----------------------------------------------
   다섯 화면이 이 한 벌을 돌려 쓴다. 화면마다 따로 적지 않는다 - 그러면
   같은 줄이 화면마다 조금씩 다르게 보인다. */
.erone-collect { display: flex; flex-direction: column; }
.erone-collect-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); }
.erone-collect-find { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: var(--space-2); height: var(--control-height-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); }
.erone-collect-find input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--text-sm); }
.erone-collect-find input:focus { outline: none; }
.erone-collect-find:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.erone-collect-pick .erone-select { height: var(--control-height-sm); font-size: var(--text-xs); }
.erone-collect-kinds { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.erone-collect-kinds .erone-chip span { opacity: 0.7; }

.erone-collect-count { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); background: var(--surface-soft); color: var(--text-muted); font-size: var(--text-xs); }
.erone-collect-count strong { color: var(--text); font-size: var(--text-sm); }
.erone-collect-count-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); }
.erone-collect-chk { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* 줄. 네 칸이다 - 종류 · 제목 · 작성자 · 시각. 줄 끝 단추는 화면이 넣는다. */
.erone-collect-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-soft); }
.erone-collect-row:last-child { border-bottom: 0; }
.erone-collect-row.is-on { background: var(--primary-softer); box-shadow: inset 3px 0 0 var(--primary); }
.erone-collect-row:hover { background: var(--surface-soft); }
.erone-collect-open { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px 132px; align-items: start; gap: var(--space-4); padding: var(--space-4); border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.erone-collect-open:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.erone-collect-kind { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); }
.erone-collect-kind.is-post { color: var(--tone-blue); }
.erone-collect-kind.is-task { color: var(--tone-sky); }
.erone-collect-kind.is-event { color: var(--tone-amber); }
.erone-collect-kind.is-todo { color: var(--tone-green); }
.erone-collect-kind.is-poll { color: var(--tone-violet); }
.erone-collect-kind.is-comment { color: var(--tone-gray); }
/* SF-133: 휴지통의 프로젝트 줄. */
.erone-collect-kind.is-project { color: var(--tone-violet); font-weight: var(--weight-bold); }

.erone-collect-title { min-width: 0; }
.erone-collect-title b { display: block; font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-collect-row.is-unread .erone-collect-title b { font-weight: var(--weight-bold); }
.erone-collect-cmt { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-normal); }
.erone-collect-where { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-collect-who { color: var(--text-soft); font-size: var(--text-xs); }
.erone-collect-when { color: var(--text-muted); font-size: var(--text-xs); text-align: right; }

/* 안 읽은 멘션은 왼쪽에 점 하나. 굵기만으로 가르면 한 줄만 있을 때 알 수 없다. */
.erone-collect-row.is-unread { background: var(--primary-softer); }
.erone-collect-row.is-unread .erone-collect-kind::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--primary); flex: none; }

/* 좁은 화면에서는 네 칸이 안 된다. 종류·제목 위에 작성자·시각을 내린다. */
@media (max-width: 767px) {
  .erone-collect-open { grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .erone-collect-who { grid-column: 2; }
  .erone-collect-when { grid-column: 2; text-align: left; }
}

/* 북마크 단추 (SF-094). 피드·댓글·패널·모아보기 줄이 같은 단추를 쓴다. */
.erone-bookmark { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-height-sm); padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-bookmark:hover { background: var(--surface-strong); color: var(--text-soft); }
.erone-bookmark:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-bookmark.is-on { color: var(--primary-dark); }
.erone-bookmark.is-on:hover { background: var(--primary-soft); }
.erone-bookmark.is-on .icon { fill: currentColor; }
.erone-collect-end { display: flex; align-items: center; padding-right: var(--space-3); }
.erone-task-panel-mark { margin-left: auto; }

/* 휴지통 줄 끝 (SF-095). 남은 기간 · 되살리기 · 완전 삭제. */
.erone-trash-end { gap: var(--space-2); }
.erone-trash-left { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.erone-trash-left b { color: var(--text-soft); font-weight: var(--weight-medium); }
.erone-trash-left.is-over { color: var(--danger); }
/* 휴지통 줄은 열 곳이 없다. 눌러도 되는 것처럼 보이지 않게 둔다. */
.erone-collect-row .erone-trash-end + * { margin-left: 0; }
.erone-collect-warn { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--danger-border); background: var(--danger-soft); color: var(--danger); font-size: var(--text-xs); }
.erone-draft-end { gap: var(--space-2); }

/* --- 대시보드 위젯 2×2 (SF-097, 9단계) -------------------------------------
   네 위젯이 같은 틀을 쓴다. 머리는 어디나 같고 몸통만 다르다. */
.erone-widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.erone-widget { display: flex; flex-direction: column; min-height: 268px; }
.erone-widget.is-empty { align-items: center; justify-content: center; border-style: dashed; background: var(--surface-soft); }
.erone-widget-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-soft); }
.erone-widget-title { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: var(--text-md); font-weight: var(--weight-bold); cursor: pointer; }
.erone-widget-title .icon { color: var(--text-muted); }
.erone-widget-title:hover { color: var(--primary-dark); }
.erone-widget-title:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }
.erone-widget-title.is-plain { cursor: default; }
.erone-widget-pick { margin-left: auto; }
/* SF-120: padding 을 한 줄로 덮어써서 오른쪽 여백이 6px 로 줄었다. 화살표는
   .erone-select 가 배경 그림으로 그리는데, 그 자리가 글자 위로 올라와
   "이번 주" 가 "이번쥬" 로 보였다. 화살표 세로 위치도 큰 칸(17px) 기준이라
   낮은 칸에서는 가운데가 아니었다. 둘 다 이 칸 높이에 맞춰 다시 잡는다. */
.erone-widget-pick .erone-select {
  height: var(--control-height-sm);
  padding: 0 var(--space-6) 0 var(--space-2);
  font-size: var(--text-xs);
  background-position: calc(100% - 13px) calc(50% + 1px), calc(100% - 8px) calc(50% + 1px);
}
.erone-widget-body { flex: 1 1 auto; min-height: 0; padding: var(--space-4); }

/* 내 프로젝트 */
.erone-widget-projects { display: grid; gap: var(--space-2); }
.erone-widget-proj { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.erone-widget-proj:hover { background: var(--surface-soft); }
.erone-widget-proj:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-widget-proj-bar { width: 4px; align-self: stretch; border-radius: var(--radius-pill); flex: none; }
.erone-widget-proj-bar.is-sky { background: var(--project-sky); }
.erone-widget-proj-bar.is-mint { background: var(--project-mint); }
.erone-widget-proj-bar.is-grape { background: var(--project-grape); }
.erone-widget-proj-bar.is-amber { background: var(--project-amber); }
.erone-widget-proj-bar.is-rose { background: var(--project-rose); }
.erone-widget-proj-bar.is-slate { background: var(--project-slate); }
.erone-widget-proj-copy { flex: 1 1 auto; min-width: 0; }
.erone-widget-proj-copy strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-widget-proj-copy span { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); }
.erone-widget-star { color: var(--primary); flex: none; }
.erone-widget-proj-new { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: none; color: var(--primary-dark); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.erone-widget-proj-new:hover { background: var(--primary-softer); }

/* 내 업무 */
.erone-widget-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.erone-widget-tab { height: var(--control-height-sm); padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-widget-tab.is-on { border-color: var(--primary); background: var(--primary); color: var(--text-inverse); font-weight: var(--weight-medium); }
.erone-widget-tab b { font-weight: var(--weight-bold); }
.erone-widget-tasks { display: grid; }
.erone-widget-task { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-soft); background: none; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.erone-widget-task:last-child { border-bottom: 0; }
.erone-widget-task:hover .erone-widget-task-name { color: var(--primary-dark); }
.erone-widget-task-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 일정 */
.erone-widget-cal { display: flex; gap: var(--space-4); height: 100%; }
.erone-widget-mini { width: 196px; flex: none; }
.erone-widget-mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.erone-widget-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; text-align: center; }
.erone-widget-mini-grid span { padding: var(--space-1) 0; color: var(--text-muted); font-size: var(--text-xs); }
.erone-widget-day { position: relative; padding: var(--space-1) 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.erone-widget-day:hover { background: var(--surface-strong); }
.erone-widget-day.is-outside { color: var(--border-strong); }
.erone-widget-day.is-picked { background: var(--primary-soft); color: var(--primary-dark); font-weight: var(--weight-bold); }
.erone-widget-day.is-today { background: var(--primary); color: var(--text-onDark); font-weight: var(--weight-bold); }
.erone-widget-day.has-items::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: var(--radius-pill); background: var(--primary); }
.erone-widget-day.is-today.has-items::after { background: var(--text-onDark); }
/* 그날 목록은 이 칸 안에서 굴린다. 전에는 다섯 건에서 잘라 버려 여섯
   번째 약속이 대시보드에서 사라졌다. 전부 그리되 위젯 높이는 그대로 둔다 -
   2×2 가 날마다 들쭉날쭉하면 아침에 보던 자리가 매번 옮겨 간다. */
.erone-widget-dayside { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; border-left: 1px solid var(--border-soft); padding-left: var(--space-4); }
.erone-widget-dayside h4 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-medium); flex: none; }
.erone-widget-dayside h4 b { margin-left: auto; color: var(--text-soft); font-weight: var(--weight-bold); }
/* 바깥은 자리만 잡고, 안쪽이 그 자리에 깔려 굴러간다. 안쪽을 띄워 두면
   줄이 몇 개든 높이에 보태지 않아서, 위젯 키를 **왼쪽 달력이 혼자 정한다** -
   숫자를 찍어 두지 않아도 5주 달과 6주 달이 알아서 맞는다. */
.erone-widget-evs { position: relative; flex: 1 1 auto; min-height: 132px; }
.erone-widget-ev-list { position: absolute; inset: 0; overflow-y: auto; }
.erone-widget-ev { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); }
.erone-widget-ev:last-child { border-bottom: 0; }
.erone-widget-ev time { flex: none; width: 44px; color: var(--text-muted); font-size: var(--text-xs); }
.erone-widget-ev span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-widget-ev-dot { width: 3px; align-self: stretch; border-radius: var(--radius-pill); flex: none; }
.erone-widget-ev-dot.is-violet { background: var(--tone-violet); }
.erone-widget-ev-dot.is-sky { background: var(--tone-sky); }
.erone-widget-ev-dot.is-green { background: var(--tone-green); }
.erone-widget-ev-dot.is-primary { background: var(--primary); }

/* 나를 언급 */
.erone-widget-mentions { display: grid; }
.erone-widget-men { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border-soft); background: none; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.erone-widget-men:last-child { border-bottom: 0; }
.erone-widget-men:hover b { color: var(--primary-dark); }
.erone-widget-men-copy { flex: 1 1 auto; min-width: 0; }
.erone-widget-men-copy b { display: block; font-weight: var(--weight-normal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-widget-men.is-unread .erone-widget-men-copy b { font-weight: var(--weight-bold); }
.erone-widget-men-copy span { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erone-widget-men-who { flex: none; color: var(--text-muted); font-size: var(--text-xs); }

/* 1024 아래에서는 두 칸이 안 된다. 한 줄에 하나씩 쌓는다. */
@media (max-width: 1023px) {
  .erone-widget-grid { grid-template-columns: minmax(0, 1fr); }
  .erone-widget-cal { flex-direction: column; }
  .erone-widget-mini { width: 100%; }
  .erone-widget-dayside { border-left: 0; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: var(--space-3); }
  /* 좁은 화면에서는 달력 아래로 내려가 세로로 길어질 자리가 있다.
     거기서까지 안쪽을 굴리면 손가락이 어느 것을 굴리는지 헷갈린다. */
  .erone-widget-evs { position: static; min-height: 0; }
  .erone-widget-ev-list { position: static; overflow-y: visible; }
}

/* 위젯 설정 (SF-098). 네 자리를 고르고, 후보를 빈 자리에 놓는다. */
.erone-widget-more { margin-left: auto; flex: none; }
.erone-widget-more.is-loose { position: absolute; top: var(--space-3); right: var(--space-3); }
.erone-widget-card { position: relative; display: flex; flex-direction: column; min-height: 268px; }
.erone-widget-card > .erone-card, .erone-widget-card > .card { flex: 1 1 auto; margin: 0; }
.erone-widget-fill { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border: 0; background: none; color: var(--primary-dark); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.erone-wset h3 { margin: 0 0 var(--space-3); color: var(--text-soft); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.erone-wset-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }
.erone-wset-slot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--primary-border); border-radius: var(--radius-sm); background: var(--primary-softer); }
.erone-wset-slot.is-empty { border-color: var(--border-strong); border-style: dashed; background: var(--surface-soft); }
/* 자리 번호는 숫자 한 자다. 11px(--text-2xs)은 사이드바 그룹 머리 전용이고
   쓸 자리가 이미 찼다 - 12px 로도 20px 원 안에 들어간다. */
.erone-wset-no { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--primary); color: var(--text-inverse); font-size: var(--text-xs); font-weight: var(--weight-bold); flex: none; }
.erone-wset-slot.is-empty .erone-wset-no { background: var(--border-strong); }
.erone-wset-pick { flex: 1 1 auto; min-width: 0; }
.erone-wset-pick .erone-select { width: 100%; height: var(--control-height-sm); font-size: var(--text-xs); }
.erone-wset-cands { display: grid; gap: var(--space-2); }
.erone-wset-cand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.erone-wset-cand.is-used { background: var(--surface-soft); }
.erone-wset-copy { flex: 1 1 auto; min-width: 0; }
.erone-wset-copy strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.erone-wset-cand.is-used .erone-wset-copy strong { font-weight: var(--weight-normal); color: var(--text-soft); }
.erone-wset-copy span { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); }
.erone-wset-note { margin: var(--space-5) 0 0; padding: var(--space-3); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: var(--text-xs); line-height: 1.6; }

/* --- SF-125 (1단계): 좁은 폭의 홈과 아래 탭 ------------------------------- */

/* 아래 탭은 좁은 폭에서만 선다. 넓은 화면에는 왼쪽 사이드바가 이미 있고,
   둘을 같이 두면 같은 자리로 가는 길이 둘이 된다. */
.erone-tabbar { display: none; }

.erone-home { display: grid; gap: var(--space-4); padding: var(--space-4); }
.erone-home-hello {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.erone-home-hello-copy { flex: 1; min-width: 0; }
.erone-home-hello-copy small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-home-hello-copy b { font-size: var(--text-md); }
.erone-home-cog {
  flex: 0 0 auto; width: var(--control-height-sm); height: var(--control-height-sm);
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); background: var(--primary); color: var(--text-inverse); cursor: pointer;
}

/* 바로가기 격자. 네 칸씩 두 줄이 기본이고, 줄 수는 개수가 정한다. */
.erone-home-shortcuts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-2);
  padding: var(--space-4) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.erone-home-shortcut {
  display: grid; justify-items: center; gap: var(--space-1);
  border: 0; background: none; color: var(--text-soft); font-size: var(--text-xs);
  line-height: 1.4; cursor: pointer; text-align: center;
}
.erone-home-shortcut-glyph {
  position: relative; width: var(--control-height); height: var(--control-height);
  display: grid; place-items: center;
  border-radius: var(--radius); background: var(--primary-soft); color: var(--primary);
}
.erone-home-shortcut-badge,
.erone-tab-badge {
  position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-2) * -1);
  min-width: 18px; padding: 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--danger); color: var(--text-inverse);
  font-size: var(--text-xs); line-height: 18px; font-weight: 700;
}
.erone-home-shortcut:hover .erone-home-shortcut-glyph,
.erone-home-shortcut:focus-visible .erone-home-shortcut-glyph { outline: 2px solid var(--primary); }
.erone-more-head {
  margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
}

@media (max-width: 680px) {
  .erone-tabbar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-1); padding: var(--space-2) var(--space-1);
    /* 바닥에 붙여 둔다. 그냥 두면 문서 맨 끝에 서서, 끝까지 내려야만
       보인다 - 재 보고 알았다(탭이 창 밖 1666px 에 있었다).
       fixed 가 아니라 sticky 다. fixed 는 본문 마지막 줄을 덮으므로
       body 아래쪽에 빈 자리를 따로 만들어 줘야 한다. */
    position: sticky; bottom: 0; z-index: 30;
    /* 홈 버튼 띠(iOS)가 가리지 않게 아래를 띄운다. 그 띠가 없는 기기에서는
       0 이라 아무 일도 일어나지 않는다. */
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border); background: var(--surface);
  }
  .erone-tab {
    display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-1) 0;
    border: 0; background: none; color: var(--text-muted);
    font-size: var(--text-xs); line-height: 1.5; cursor: pointer;
  }
  .erone-tab-glyph { position: relative; display: grid; place-items: center; }
  .erone-tab.is-on { color: var(--primary); font-weight: 700; }
  /* 본문이 탭 뒤로 숨지 않게 한다. 탭은 흐르지 않고 바닥에 붙는다. */
  .erone-main { display: flex; flex-direction: column; min-height: 0; }
  .erone-main > .erone-content { flex: 1; min-height: 0; }
  .erone-home-shortcuts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- SF-125 (2단계): 홈 화면 설정 ------------------------------------------ */

.erone-pref-body { display: grid; gap: var(--space-5); }
.erone-pref-group { display: grid; gap: var(--space-3); }
.erone-pref-group h3 {
  margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
  color: var(--text-muted);
}
.erone-pref-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.erone-pref-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
}
.erone-pref-row.is-dragging { opacity: .5; }
.erone-pref-row.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
/* 손잡이. 끌 수 있다는 것을 손가락에 알려 주는 표식이고, 이것만으로는
   못 옮기는 사람이 있어 옆에 위·아래 단추를 같이 둔다(저장소 규칙 §7). */
.erone-pref-grip { flex: 0 0 auto; color: var(--text-muted); cursor: grab; }
.erone-pref-name { flex: 1; min-width: 0; font-size: var(--text-sm); }
.erone-pref-name small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.erone-pref-move { display: flex; gap: var(--space-1); flex: 0 0 auto; }
.erone-pref-move .erone-icon-button { width: 26px; height: 26px; font-size: var(--text-xs); }
.erone-pref-move .erone-icon-button[disabled] { opacity: .35; cursor: default; }
.erone-pref-note { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }

/* 켬·끔. <input> 은 숨기고 네모를 그린다 - 브라우저 기본 체크박스는
   "보인다/안 보인다" 처럼 읽히지 않는다. */
.erone-switch { position: relative; flex: 0 0 auto; display: inline-flex; cursor: pointer; }
.erone-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.erone-switch > span[aria-hidden] {
  width: 38px; height: 22px; border-radius: var(--radius-pill);
  background: var(--border-strong); transition: background var(--motion-fast) var(--ease-standard);
}
.erone-switch > span[aria-hidden]::after {
  content: ''; display: block; width: 18px; height: 18px; margin: 2px;
  border-radius: 50%; background: var(--surface);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.erone-switch input:checked + span[aria-hidden] { background: var(--primary); }
.erone-switch input:checked + span[aria-hidden]::after { transform: translateX(16px); }
.erone-switch input:focus-visible + span[aria-hidden] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 홈의 위젯은 네 자리가 아니라 켠 것을 쌓는다. */
.erone-widget-grid--stack { grid-template-columns: minmax(0, 1fr); }

/* --- SF-125 (3단계): 홈의 업무 묶음 ---------------------------------------- */

.erone-bucket-rows { display: grid; gap: var(--space-2); }
.erone-bucket-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-3); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: var(--surface);
  text-align: left; cursor: pointer;
}
.erone-bucket-row:hover { border-color: var(--border-strong); }
.erone-bucket-name { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text); }
.erone-bucket-name small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
/* 숫자는 줄에서 가장 먼저 읽히는 것이다. 자리를 고정해 눈이 흔들리지 않게 한다. */
.erone-bucket-count {
  flex: 0 0 auto; min-width: 26px; text-align: right;
  font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums;
}
.erone-bucket-row .icon { color: var(--text-muted); }

/* 설정 줄에 범위 고르개가 하나 더 붙는다. 줄 높이가 늘어난다. */
.erone-pref-row--bucket { align-items: flex-start; }
.erone-pref-row--bucket .erone-pref-move,
.erone-pref-row--bucket .erone-switch,
.erone-pref-row--bucket .erone-pref-grip { margin-top: var(--space-1); }
.erone-bucket-scope {
  width: 100%; max-width: 190px; margin-top: var(--space-2);
  height: var(--control-height-sm); padding-block: 0; font-size: var(--text-xs);
}

/* --- SF-125 (4단계): 화면 설정 -------------------------------------------- */

/* 글씨 크기. 화면마다 따로 손대지 않고 **토큰만 바꿔 건다** - 한 군데는
   반드시 빠지기 때문이다. 뿌리의 표식 하나로 화면 전체가 같이 움직인다.
   --text-2xs 는 그룹 머리라 하한 아래인데, 키울 때는 같이 올린다. */
:root[data-font-scale="large"] {
  --text-2xs: 12px; --text-xs: 13px; --text-sm: 15px; --text-base: 16px;
  --text-md: 17px; --text-lg: 19px; --text-xl: 22px; --text-2xl: 28px;
}
:root[data-font-scale="xlarge"] {
  --text-2xs: 13px; --text-xs: 15px; --text-sm: 16px; --text-base: 18px;
  --text-md: 19px; --text-lg: 21px; --text-2xl: 31px; --text-xl: 24px;
}

.erone-screen-prefs { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.erone-pref-head {
  margin: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .05em; color: var(--text-muted);
}
.erone-pref-head:first-child { margin-top: 0; }

/* 첫 화면 고르기. 고르면 아래 탭이 어떻게 서는지 카드 안에 미리 보여 준다 -
   글로만 적어 두면 눌러 보고서야 안다. */
.erone-start-picks { display: grid; gap: var(--space-2); }
.erone-start-pick {
  display: grid; gap: var(--space-2); padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
.erone-start-pick.is-on { border-color: var(--primary); background: var(--primary-soft); }
.erone-start-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.erone-start-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.erone-start-copy b { display: block; font-size: var(--text-sm); }
.erone-start-copy small { color: var(--text-muted); font-size: var(--text-xs); }
.erone-start-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.erone-start-tab {
  flex: 1 1 auto; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs); background: var(--surface);
  /* 읽는 글의 하한은 --text-xs 다. 탭 이름은 사람이 읽는 낱말이라
     --text-2xs(11px, 그룹 머리 전용) 를 쓰지 않는다. */
  font-size: var(--text-xs); color: var(--text-muted); text-align: center; white-space: nowrap;
}
.erone-start-tab.is-first { border-color: var(--primary); color: var(--primary); font-weight: 700; }

/* 글씨 크기 고르기. 보기가 곧 샘플이다 - 「크게」 가 얼마나 큰지 글자로
   설명하는 것보다 그 크기로 보여 주는 편이 빠르다. */
.erone-font-picks { display: flex; gap: var(--space-2); }
.erone-font-pick {
  flex: 1; display: grid; justify-items: center; gap: var(--space-1);
  padding: var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text-soft); font-size: var(--text-xs); cursor: pointer;
}
.erone-font-pick.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.erone-font-pick [data-font-sample="normal"] { font-size: var(--text-base); }
.erone-font-pick [data-font-sample="large"] { font-size: var(--text-lg); }
.erone-font-pick [data-font-sample="xlarge"] { font-size: var(--text-xl); }

/* --- SF-125 (5단계): 처음 들어올 때 묻는 화면 ----------------------------- */

/* 셸 위를 전부 덮는다. 뒤가 비쳐 보이는 반투명 막이 아니라 **불투명한 한
   화면**이다 - 아직 아무것도 고르지 않은 사람에게 뒤의 화면을 보여 주면
   그쪽을 누르려 한다. 모달(z-index 200)보다는 아래다. 묻는 동안 모달이
   열릴 일은 없지만, 열린다면 모달이 위에 와야 맞다. */
.erone-start-ask {
  position: fixed; z-index: 150; inset: 0;
  overflow-y: auto; background: var(--surface);
}
.erone-start-ask-body {
  display: grid; gap: var(--space-5);
  max-width: 420px; margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}
.erone-start-ask-head b { display: block; font-size: var(--text-xl); font-weight: 700; }
.erone-start-ask-head p {
  margin: var(--space-2) 0 0; color: var(--text-muted);
  font-size: var(--text-sm); line-height: 1.7;
}
/* 고르는 카드는 설정 화면의 것을 그대로 쓴다(.erone-start-pick). 묻는
   화면에서만 글귀가 두 줄이라 줄 간격만 늘려 준다. */
.erone-start-ask .erone-start-copy small { line-height: 1.7; }
.erone-start-ask-go { width: 100%; justify-content: center; }
/* --- SF-126: 전체 업무 가독성 ---------------------------------------------- */

/* 기본 다섯 열일 때는 표 폭을 묶는다.
   전에는 여덟 열이 1900px 를 가로질러 업무명과 상태 사이가 600px 비었다 -
   한 줄을 눈으로 따라가다 중간에서 길을 잃는다. 열을 더 켜면 이 폭 제한을
   풀어(그 때는 is-tight 가 붙지 않는다) 지금까지처럼 넓게 쓴다. */
table.erone-flow-table.is-tight { max-width: 940px; }

/* 줄 사이를 조금 더 또렷하게. 줄이 많을수록 어디까지가 한 줄인지가 먼저다. */
.erone-flow-table.is-tight td { border-bottom-color: var(--border); }

/* 기간 한 칸. 「09-20 → 09-25」 */
.erone-flow-period { display: inline-flex; align-items: center; gap: var(--space-2); }
.erone-flow-period-to { color: var(--text-muted); }

/* 우선순위 배지. 기본값(보통)이 아닌 것만 업무명 옆에 붙는다. */
.erone-flow-pri-badge {
  flex: none;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  /* 읽는 글의 하한은 --text-xs 다. --text-2xs(11px) 는 그룹 머리 전용이고,
     「높음」 은 사람이 읽는 낱말이다. */
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.8;
}
.erone-flow-pri-badge.is-high { background: var(--danger-soft); color: var(--danger); }
.erone-flow-pri-badge.is-low { background: var(--surface-strong); color: var(--text-muted); }

/* 0% 는 막대를 안 그리고 숫자만 흐리게 남긴다. */
.erone-flow-pct.is-zero { color: var(--border-strong); }

/* 묶음이 「그룹 미지정」 하나뿐일 때, 프로젝트 머리줄이 접는 단추를 겸한다. */
.erone-flow-project-fold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* --- SF-128: 줄을 세울 줄 아는 열에만 ⇅ 를 단다 -------------------------- */

/* 비교할 값을 모르는 열의 머리글. 단추처럼 보이지 않아야 한다 -
   눌러도 아무 일이 없는 단추가 지금까지의 문제였다. */
.erone-flow-th-plain {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
}

/* --- SF-130 「참여중 / 전체」 ------------------------------------------------

   토글 하나가 늘었다. 프로젝트 목록과 전체 업무가 같은 것을 쓴다
   (components/scope-toggle.mjs).

   참여하지 않은 것은 **점선**과 「읽기 전용」 으로 그린다. 색만 흐리게 하면
   "아직 안 불러온 것" 으로 읽히고, 선을 지우면 카드가 아닌 것이 된다.
   점선은 "있지만 내 것은 아니다" 를 한 눈에 말한다.                        */

.erone-scope-switch {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.erone-scope-seg {
  display: inline-flex;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
}

.erone-scope-seg__btn {
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.erone-scope-seg__btn:hover { color: var(--text); }

.erone-scope-seg__btn.is-on {
  background: var(--surface);
  box-shadow: 0 1px 3px var(--primary-ring);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.erone-scope-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.erone-scope-error {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.erone-scope-none {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* 「읽기 전용」 뱃지. 카드·표 머리줄에서 같은 모양이어야 한다. */
.erone-readonly-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* 참여하지 않은 프로젝트 카드 */
.erone-project-card.is-readonly {
  border: 1px dashed var(--border-strong);
  border-left: 1px dashed var(--border-strong);
  background: var(--surface-soft);
}

.erone-project-card.is-readonly .erone-project-title { color: var(--text-soft); }

/* 표: 참여하지 않은 프로젝트의 머리줄과 줄 */
.erone-flow-project.is-readonly .erone-flow-project-name { color: var(--text-soft); }
.erone-flow-row.is-readonly .erone-flow-name { color: var(--text-soft); }

/* 상태 칩의 읽기 전용 모양. 누를 수 있는 것과 생김새가 같아서는 안 된다 -
   caret 이 없고 테두리가 눌리지 않는다. */
.erone-status-pill.is-static {
  cursor: default;
  background: transparent;
  border-color: transparent;
}

/* 프로젝트 안의 읽기 전용 안내 줄 */
.erone-readonly-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.erone-readonly-bar__icon {
  display: inline-flex;
  color: var(--text-muted);
}

.erone-readonly-bar__text {
  flex-grow: 1;
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--text-soft);
}

.erone-readonly-bar__join {
  flex-shrink: 0;
  border-color: var(--primary-border);
  color: var(--primary-dark);
}

@media (max-width: 680px) {
  .erone-readonly-bar { align-items: flex-start; flex-wrap: wrap; }
  .erone-readonly-bar__text { flex-basis: 100%; }
}

/* --- SF-133 프로젝트 삭제 · 승인 ---------------------------------------------

   삭제는 「⋯ 더보기」 안에만 둔다. 목록 카드에 두면 지나가다 눌린다.      */

.erone-workspace-more {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1;
  color: var(--text-soft);
  cursor: pointer;
}

.erone-workspace-more:hover { background: var(--surface-soft); color: var(--text); }
.erone-workspace-more.is-open { background: var(--surface-strong); color: var(--text); }

.erone-workspace-morewrap { position: relative; flex-shrink: 0; }

.erone-project-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 20;
  min-width: 190px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 20px var(--primary-ring);
  display: flex;
  flex-direction: column;
}

.erone-project-menu > button {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.erone-project-menu > button:hover { background: var(--surface-soft); }

.erone-project-menu > button.is-danger { color: var(--danger); font-weight: var(--weight-bold); }
.erone-project-menu > button.is-danger:hover { background: var(--danger-soft); }

.erone-project-menu__rule {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--border-soft);
}

/* 삭제·요청 창 */
.erone-del { display: flex; flex-direction: column; gap: var(--space-4); }

.erone-del-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.erone-del-head > b { font-size: var(--text-base); color: var(--text); }

.erone-del-counts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.erone-del-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--text-soft);
}

.erone-del-count > b { color: var(--text); }

.erone-del-copy, .erone-del-linked {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--text-soft);
}

.erone-del-linked {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
  background: var(--warning-soft);
}

.erone-del-field { display: flex; flex-direction: column; gap: var(--space-3); }

.erone-del-field > span {
  font-size: var(--text-sm);
  color: var(--text-soft);
}

/* 승인 대기 줄 */
.erone-del-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--warning-soft);
}

.erone-del-bar__icon { display: inline-flex; color: var(--warning); }

.erone-del-bar__text {
  flex-grow: 1;
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--text-soft);
}

.erone-del-bar__cancel { flex-shrink: 0; }

.erone-del-linkedmark {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--warning);
}

/* 휴지통의 프로젝트 줄 */
.erone-trash-note {
  flex-basis: 100%;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 680px) {
  .erone-del-bar { align-items: flex-start; flex-wrap: wrap; }
  .erone-del-bar__text { flex-basis: 100%; }
}