/* ── [hidden] 은 무조건 숨긴다 ───────────────────────────────────────────
   브라우저 기본값은 `[hidden] { display: none }` 이지만 속성 선택자라 우선순위가 낮다.
   `.pick-card { display: flex }` 처럼 클래스로 display 를 지정하면 그쪽이 이겨서
   JS 로 `el.hidden = true` 를 해도 그대로 보인다 — 실제로 기업 검색 필터가
   이것 때문에 아무 것도 걸러내지 못했다. 검색·필터·탭이 전부 el.hidden 에 기대고
   있으므로 개별 클래스마다 예외를 다는 대신 여기서 한 번에 못 박는다. */
[hidden] { display: none !important; }

/* Pretendard local bundle (FEATURE_SPEC §0.1 — 본문 폰트 단일 통일) */
@font-face {
  font-family: "Pretendard Variable";
  src: url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}
:root {
  --font-body: "Pretendard Variable", Pretendard, "Malgun Gothic",
    -apple-system, "Apple SD Gothic Neo", sans-serif;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --ink: #1c2530;
  --muted: #6b7684;
  --line: #e3e6ea;
  --brand: #2f6df6;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --gray: #9aa4b0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body, button, input, select, textarea, table {
  font-family: var(--font-body);
  color: var(--ink);
}
body { background: var(--bg); font-size: 14px; line-height: 1.5; }
.tabular { font-variant-numeric: tabular-nums; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout: 200px fixed sidebar + content */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 200px; flex: 0 0 200px; background: #10151d; color: #e6e9ee;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { font-size: 20px; font-weight: 800; padding: 18px 18px 2px; }
.brand-sub { font-size: 11px; color: #8b95a3; padding: 0 18px 14px; }
.menu { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; flex: 1; }
.menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px; color: #c7cdd6; font-weight: 600;
  font-size: 13px;
}
.menu-item:hover { background: #1b2330; text-decoration: none; color: #fff; }
.menu-item.active { background: var(--brand); color: #fff; }
.menu-badge { font-size: 10px; background: #2a3342; color: #9aa7b8; border-radius: 6px; padding: 1px 6px; }
.menu-item.active .menu-badge { background: rgba(255,255,255,.25); color: #fff; }
.sidebar-foot { padding: 12px; border-top: 1px solid #232c39; }
/* 개발용 사용자 전환 (정식 로그인은 다음 스프린트) */
.user-switch { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.user-switch label { font-size: 10px; color: #8b95a3; text-transform: none; }
.user-switch select { width: 100%; padding: 5px 6px; font-size: 12px; border-radius: 6px;
                      border: 1px solid #2a3342; background: #1b2330; color: #e6e9ee; }
.switch-note { font-size: 10px; color: #6f7987; margin: 0 0 10px; line-height: 1.4; }
.agent-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.agent-badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gray); }
.agent-badge.on { color: #7ee2a8; } .agent-badge.on .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.agent-badge.off { color: #9aa4b0; } .agent-badge.off .dot { background: var(--gray); }

.content { flex: 1; padding: 24px 28px; min-width: 0; }
.page-head h1 { margin: 0 0 4px; font-size: 22px; }
.page-head .muted, .muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); }

/* Panels / deal grid */
.deal-grid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 16px; margin-top: 18px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.panel-title { font-size: 14px; margin: 0 0 9px; display: flex; align-items: center; justify-content: space-between; }
.panel-title .hint { font-weight: 400; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.field input, input[type=text] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: var(--ink); }

.card-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.pick-card { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }

.pick-card:hover { border-color: var(--brand); }
.pick-card input { margin-top: 3px; }
.pick-body { min-width: 0; }
.pick-name { font-weight: 700; }
.pick-sub { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.pick-room { margin-top: 4px; }
.tag { font-size: 11px; background: #eef2ff; color: var(--brand); border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.star { color: var(--amber); margin-right: 3px; }
.room-badge { font-size: 11px; border-radius: 6px; padding: 2px 6px; }
.room-badge.ok { background: #eafaf0; color: var(--green); }
.room-badge.warn { background: #fdeeee; color: var(--red); }

/* Preview */
.preview-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.preview-tab { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.preview-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.preview-area { background: #eef1f6; border-radius: 12px; padding: 12px; min-height: 200px; max-height: 460px; overflow-y: auto; }
.bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 14px; white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 13px; }
.bubble-meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.charcount { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: right; }
.charcount.over { color: var(--red); font-weight: 700; }

.warn-box { background: #fff7ed; border: 1px solid #fed7aa; color: var(--amber); border-radius: 8px; padding: 10px; font-size: 12px; margin: 10px 0; }

/* Buttons */
.primary-btn { width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.primary-btn:disabled { background: #b8c4d8; cursor: not-allowed; }
.secondary-btn { padding: 8px 14px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 600; }
.danger-btn { padding: 8px 14px; border: 1px solid #f3b4b4; background: #fff; color: var(--red); border-radius: 8px; cursor: pointer; font-weight: 600; }
.linkbtn { border: 0; background: none; color: var(--brand); cursor: pointer; font-size: 12px; font-weight: 600; }

/* Progress */
.counters { display: flex; gap: 14px; margin: 18px 0; }
.counter { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 22px; text-align: center; min-width: 96px; }
.counter .c-num { display: block; font-size: 30px; font-weight: 800; }
.counter .c-label { font-size: 12px; color: var(--muted); }
.counter.sending .c-num { color: var(--amber); }
.counter.ok .c-num { color: var(--green); }
.counter.fail .c-num { color: var(--red); }
.progress-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
/* 배지는 한 덩어리다 — inline 인 채로 두면 좁은 칸에서 글자 사이가 끊겨
   알약 모양이 두 줄로 잘린다. */
.status-badge { display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: var(--brand); }
/* 상태 + 언제. 나란히 두면 둘이 엉키므로 날짜를 아랫줄로 내린다.
   (td 에는 flex 를 걸지 않는다 — 표 레이아웃이 깨진다) */
.status-cell .status-when { display: block; font-size: 11.5px; margin-top: 3px;
  white-space: nowrap; }

.log-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.log-table th, .log-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.log-table th { background: #f7f8fa; font-size: 12px; color: var(--muted); }
.st { font-weight: 700; font-size: 12px; }
.st-sent { color: var(--green); } .st-failed { color: var(--red); }
.st-sending { color: var(--amber); } .st-pending { color: var(--gray); } .st-canceled { color: var(--gray); }

.placeholder-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 40px; text-align: center; margin-top: 24px; }
.ph-emoji { font-size: 40px; margin: 0 0 8px; }

/* ── 에이전트 설치 화면 (/setup) ───────────────────────────── */
.dl-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.whoami { background: #eef2ff; border: 1px solid #c7d7fb; color: #1f3f8f; border-radius: 8px;
          padding: 8px 12px; font-size: 13px; margin: 0 0 10px; }
.steps { margin: 6px 0 0 18px; padding: 0; line-height: 1.9; }
.steps li { margin-bottom: 4px; }
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; width: 160px; padding: 8px 10px; color: var(--muted);
         font-weight: 600; vertical-align: top; }
.kv td { padding: 8px 10px; }
code { background: var(--code-bg, #f1f3f5); border: 1px solid var(--line, #e5e7eb);
       border-radius: 4px; padding: 1px 6px; font-size: 12.5px;
       font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
code.token { word-break: break-all; }
pre.code { background: var(--code-bg, #f1f3f5); border: 1px solid var(--line, #e5e7eb);
           border-radius: 6px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px;
           line-height: 1.7; margin: 6px 0 0; }
.warn-panel { border-left: 3px solid var(--warn, #d97706); }

/* ── 내 투자사: 한 페이지 표 (FEATURE_SPEC §3, 피드백 #3) ─────────────────
   table-layout:fixed + colgroup % 폭 + 셀 말줄임 → 1280px 에서 가로 스크롤 0.
   광폭 모니터에서는 % 가 그대로 늘어나 여백이 낭비되지 않는다. */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; }
.toolbar-right { display: flex; align-items: center; gap: 8px; }
.quick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
        background: #fff; cursor: pointer; font-weight: 600; color: var(--muted); }
.chip:hover { border-color: var(--brand); color: var(--brand); }
/* 고른 칩이 안 고른 칩과 똑같이 생기면 무엇을 보고 있는지 알 수 없다.
   (딜 소싱 갈래 필터 · 주간 업무 주차 · 대시보드 10/20/30 이 함께 쓴다) */
.chip.active { background: #e6efff; border-color: var(--brand); color: var(--brand); }
.chip b { font-variant-numeric: tabular-nums; }

/* 미팅 후기 · 결과 문의 기록.
   결과 한 칸(진행/보류/거절)만으로는 왜 그런지가 남지 않는다 — 다음 회차에
   이 투자사를 어떻게 대할지는 거기서 나온다. */
.followup-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 4px; }
.followup-form select, .followup-form input {
  font: inherit; font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--line); border-radius: 6px; }
.followup-form input { flex: 1; min-width: 110px; }
/* 미팅 후기 표는 다른 표보다 낮다 — 화면 절반을 먹을 이유가 없다. */
#review-table { min-width: 1010px; }
.panel #review-table { }
.table-wrap.wide:has(#review-table) { max-height: 460px; min-height: 0; }
.followup-log { margin-top: 4px; font-size: 11.5px; color: var(--ink);
  background: #f7f8fa; border-radius: 6px; padding: 4px 6px; }
/* 빈 칸은 눌러야 할 자리인지 알 수 없다 */
.cell[data-placeholder]:empty::before {
  content: attr(data-placeholder); color: var(--muted); font-size: 11.5px; }

/* 참고 자료 고치기 — 보기만 되던 자료를 화면에서 다듬는다 */
.ref-cell { cursor: text; }
.ref-cell:hover { background: #f4f7ff; }
.ref-text-edit { width: 100%; font: inherit; font-size: 13px; line-height: 1.6;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); resize: vertical; }
.ref-text-edit:focus { border-color: var(--brand); outline: none; }
.ref-body-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

/* 기본 문구 미리보기 — 진짜 사람에게 갈 문구로 읽히면 안 된다 */
.bubble-meta.sample { color: var(--brand); font-weight: 600;
  background: #f4f7ff; border-radius: 8px; padding: 6px 10px; }

/* 참고 탭 이름 바꾸기 — 제목 자리에서 바로 고친다.
   따로 화면을 열게 하면 이름 하나 바꾸려고 두 번 이동한다. */
.ref-rename { display: inline-flex; align-items: center; gap: 6px; }
.ref-rename input { font: inherit; font-size: 15px; font-weight: 700;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px;
  min-width: 260px; max-width: 100%; color: var(--ink); }
.ref-rename input:focus { border-color: var(--brand); outline: none; }
/* 명단 이름은 표 위에 한 줄로 뜬다 — 제목 자리가 따로 없다. */
.sheet-rename { margin: 10px 0 4px; }

/* 딜 소싱 필터(갈래 · 담당) — 검색창에 이름을 치는 대신 누른다.
   줄마다 무엇을 거르는지 앞에 적는다. 칩만 두 줄 있으면 아래 줄이 무엇인지
   모른다. */
.pick-filters { margin: 8px 0 6px; }
.filter-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 6px; }
.filter-label { font-size: 11px; font-weight: 700; color: var(--muted);
  min-width: 30px; }
.density-toggle { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.primary-btn.inline { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0; }
.filter-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
               border: 1px solid #c7d7fb; background: #eef2ff; color: var(--brand); font-weight: 600; }
.filter-chip.reset { border-color: var(--line); background: #fff; color: var(--muted); }

.table-wrap { position: relative; }
/* 칸이 많은 표(스타트업DB 19칸)는 가로로 민다. width:100% + table-layout:fixed
   에서는 폭 합이 화면을 넘으면 **폭을 안 준 칸부터 0 으로 짜부라진다** —
   실제로 사업분야 칸이 사라졌다. 짜부라뜨리느니 미는 편이 낫다. */
/* 넓은 표는 **화면 높이에 맞춰 자른다.**
   그냥 두면 표가 페이지만큼 길어져서 가로 스크롤바가 문서 맨 아래로 밀린다 —
   가로로 밀려면 끝까지 내려갔다가 다시 올라와야 했다. 높이를 잘라 두면
   스크롤바가 표 바로 아래에 붙어 한 화면에서 같이 보인다.

   `--head` 는 위쪽 고정 영역(머리말·툴바) 몫. 화면이 작을수록 표에 남는
   자리가 줄지만, 최소 높이는 지켜 준다. */
.table-wrap.wide { --head: 320px;
  overflow: auto; max-height: calc(100vh - var(--head)); min-height: 320px; }
/* 세로로 밀 때 컬럼 이름이 사라지면 어느 칸을 보고 있는지 알 수 없다. */
.table-wrap.wide thead th { position: sticky; top: 0; z-index: 2; }
/* 컬럼 폭 합(1,922px)보다 넉넉하게. 모자라면 다시 짜부라진다. */
.table-wrap.wide .grid-table { min-width: 2030px; }
/* 투자사 관리 현황은 시트 컬럼 18개를 그대로 세운다 — 더 넓다.
   폭은 th 에서 잡고, 여기서는 표가 줄어들지 않게만 막는다.

   **th 폭 합계와 맞춰 둔다(현재 2,566px).** table-layout: fixed 는 표가
   합계보다 좁아지면 칸을 비율대로 눌러 버린다 — 그러면 머리글이 한 줄 더
   접힌다. 2,420px 으로 모자랐던 것이 그랬다. th 폭을 고치면 여기도 같이. */
#contacts-table { min-width: 2804px; }
.grid-table { width: 100%; table-layout: fixed; border-collapse: collapse;
              background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
/* 표 밀도. 8px/10px 이던 것을 6px/9px 로 — 글자 수 대비 자리가 남는 칸이
   많았다(초대완료여부·진행 단계 같은 짧은 배지 칸). 줄 사이가 붙지 않을
   만큼만 줄인다. */
/* 머리글은 **위**를 기준으로 맞춘다. 길이가 제각각이라(`NO` 두 글자,
   `라운드 사이즈(투자운영금액)` 열세 글자) 가운데 정렬이면 짧은 이름이
   아래로 처져 줄이 들쭉날쭉해 보인다.

   높이는 **고정하지 않는다.** 두 줄로 묶어 두었더니 한 줄짜리 머리글이
   대부분인 표(주간 업무·업무 보고)에서 칸마다 25px 씩 비었고, 세 줄이 필요한
   이름은 말없이 잘렸다. 제 높이대로 두고, 대신 **칸 폭을 데이터 길이로**
   잡아 애초에 길게 접히지 않게 한다.

   (`display` 는 건드리지 않는다. th/td 에 flex·-webkit-box 를 걸면 표
    레이아웃이 깨진다 — tests/test_ui_layout.py) */
.grid-table th { text-align: left; vertical-align: top; line-height: 1.35;
                 padding: 6px 9px; font-size: 12px; color: var(--muted);
                 background: #f7f8fa; border-bottom: 1px solid var(--line); position: relative; }

/* ── 표 머리글: 다 보이게 · 가운데 · 위 기준 ─────────────────────
   한 줄로 눌러 놓고 넘치면 `…` 로 잘랐었다. 컬럼 이름을 원본 시트에서 그대로
   가져오는 표(투자사 관리 현황·스타트업DB)라 이름이 길고, 잘리고 나면 서로
   구별이 되지 않았다 — `근무처 전…` 이 전화인지 팩스인지 알 수가 없다.
   전문을 `title` 에 넣어 두어도 마우스를 올려야만 보인다.

   그래서 **자르지 않고 접는다.** 대신 두 가지로 줄을 가지런히 맞춘다:

     · 폭은 이름이 **두 줄 안에** 들어가게 th 에서 잡는다. 세 줄부터는
       머리글이 표를 아래로 밀어내 첫 행이 화면 밖으로 나간다.
       (두 줄 상한은 tests/test_ui_layout.py 가 지킨다)
     · 두 줄 안에 들어오니 줄 수 차이가 한 줄뿐이다. **가로·세로 모두
       가운데**로 모아 이름이 칸 한복판에 선다.

   (`display` 는 건드리지 않는다. th/td 에 flex·-webkit-box 를 걸면 그 칸이
    테이블 레이아웃에서 빠져 행이 어긋난다 — tests/test_ui_layout.py) */
.grid-table thead th {
  text-align: center; vertical-align: middle;
  white-space: normal;
}
/* 필터 칩·설명도 머리글 아래에 붙는다 — 같이 가운데로 모아야 축이 맞는다. */
.grid-table thead .th-filters { justify-content: center; }
.grid-table thead .th-note { text-align: center; }
/* 숫자 칸만은 오른쪽을 지킨다 — 자릿수를 세로로 맞춰 보는 칸이다. */
.grid-table thead th.num { text-align: right; }
.grid-table td { padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: top;
                 overflow: hidden; }
.grid-table tbody tr:hover { background: #f8faff; cursor: pointer; }
.grid-table.dense td { padding: 3px 9px; }
.grid-table.dense .cell-sub { display: none; }
.cell-main, .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 11.5px; margin-top: 2px; }
.cell-sub.row-actions { display: flex; gap: 10px; }
.memo { font-weight: 400; }
.chan { font-size: 14px; letter-spacing: 2px; }
.tag.soft { background: #f1f3f5; color: var(--muted); }
.pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pill.active { background: #eafaf0; color: var(--green); }
.pill.no_response { background: #fdeeee; color: var(--red); }
.pill.paused { background: #f1f3f5; color: var(--muted); }
.room-dot { font-size: 11px; font-weight: 600; }
.room-dot.ok { color: var(--green); }
.room-dot.wait { color: var(--gray); }
.room-dot.warn { color: var(--amber); }
.warn-text { color: var(--amber); font-weight: 600; }
.hint.error { color: var(--red); }

/* 필터 드롭다운 (FEATURE_SPEC §8) */
.th-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.filter-btn { font-size: 11px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line);
              background: #fff; color: var(--muted); cursor: pointer; font-weight: 600; }
.filter-btn.on { border-color: var(--brand); color: var(--brand); background: #eef2ff; }
.filter-panel { position: absolute; z-index: 30; top: 100%; left: 6px; min-width: 200px; max-width: 280px;
                background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px;
                box-shadow: 0 8px 24px rgba(16,21,29,.14); }
.filter-panel-head { display: flex; align-items: center; gap: 8px; justify-content: space-between;
                     padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.filter-search { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
                 margin-bottom: 6px; font-size: 12px; }
.filter-options { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.filter-option { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink);
                 padding: 3px 4px; border-radius: 6px; font-weight: 400; white-space: nowrap; }
.filter-option:hover { background: #f2f5fb; }

/* 우측 슬라이드 상세 패널 */
.detail-panel { position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 40;
                background: #fff; border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(16,21,29,.10);
                display: flex; flex-direction: column; }
.detail-head { display: flex; align-items: center; justify-content: space-between;
               padding: 14px 16px; border-bottom: 1px solid var(--line); }
.detail-tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.detail-tab { border: 0; background: none; padding: 6px 10px; border-radius: 8px 8px 0 0;
              font-weight: 600; color: var(--muted); cursor: pointer; font-size: 13px; }
.detail-tab.active { background: #eef2ff; color: var(--brand); }
.detail-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid .field { margin-bottom: 0; }
.form-grid .field.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; width: 100%; }
.check-row { display: flex; gap: 12px; font-size: 13px; color: var(--ink); }
.detail-actions { display: flex; gap: 8px; margin-top: 16px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 78px 62px 1fr auto; gap: 8px; align-items: start;
           padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.tl-date { color: var(--muted); }
.tl-kind { font-weight: 700; font-size: 11px; color: var(--brand); }
.tl-item.tl-ir_request .tl-kind { color: var(--amber); }
.tl-item.tl-meeting .tl-kind { color: var(--green); }
.tl-body { word-break: break-all; }
.tl-src { font-size: 10px; color: var(--muted); background: #f1f3f5; border-radius: 4px; padding: 1px 5px; }
.tl-month { font-size: 12px; font-weight: 800; color: var(--muted); margin: 14px 0 4px;
            padding-bottom: 3px; border-bottom: 2px solid var(--line); }
.tl-month:first-child { margin-top: 0; }
.tl-week { font-size: 10px; color: var(--muted); background: #f1f3f5; border-radius: 4px; padding: 1px 5px; }
.tl-co { display: inline-block; font-size: 11.5px; border: 1px solid var(--line); border-radius: 5px;
         padding: 0 5px; margin: 1px 0; color: var(--muted); }
/* 딜 기업 DB에 있는 기업만 강조 — 없는 기업이 더 많으므로 '없음'을 오류로 보이게 하지 않는다 */
.tl-co.known { border-color: #c7d7fb; background: #eef2ff; color: var(--brand); font-weight: 600; }

/* ── 테스트 모드 배너 ─────────────────────────────────────── */
.test-banner { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
               border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
               font-size: 13px; line-height: 1.6; }
.test-banner code { background: #ffedd5; border-color: #fdba74; }

/* ── 로그인 / 내 계정 ─────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; background: var(--bg, #f6f7f9); }
.login-card { width: 340px; background: #fff; border: 1px solid var(--line, #e5e7eb);
              border-radius: 12px; padding: 28px 26px; }
.login-card .brand { font-size: 20px; font-weight: 700; }
.login-card .brand-sub { color: var(--muted, #6b7280); font-size: 12.5px; margin-bottom: 18px; }
.login-card label { display: block; font-size: 12.5px; color: var(--muted, #6b7280);
                    margin: 12px 0 4px; }
.login-card input { width: 100%; padding: 9px 10px; border: 1px solid var(--line, #e5e7eb);
                    border-radius: 6px; font-size: 14px; }
.login-btn { width: 100%; margin-top: 18px; }
.login-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
               border-radius: 6px; padding: 8px 10px; font-size: 13px; margin-bottom: 4px; }
.login-hint { margin-top: 14px; }
.me { padding: 10px 12px; border-top: 1px solid var(--line, #e5e7eb); font-size: 12.5px; }
.me-name { font-weight: 600; }
.me-phone { color: var(--muted, #6b7280); font-family: ui-monospace, Menlo, monospace;
            font-size: 11.5px; margin-top: 1px; }
.me-links { margin-top: 6px; display: flex; gap: 10px; }
.me-links a { color: var(--muted, #6b7280); font-size: 11.5px; }

/* ── 기업 검색 (딜소개 보내기) ─────────────────────────────── */
.picker-search { display: flex; gap: 10px; align-items: center; margin: 8px 0 10px; }
.picker-search input[type="search"] {
  flex: 1; padding: 7px 10px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px; font-size: 13px;
}
.only-picked { display: flex; align-items: center; gap: 5px;
               font-size: 12.5px; color: var(--muted, #6b7280); white-space: nowrap; }
#company-list { max-height: 340px; overflow-y: auto; }
#company-filter-note { margin-top: 4px; }


/* ── 문구 선택기 (발송 화면) ───────────────────────────────── */
.tpl-picker { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.tpl-picker label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.tpl-picker select { max-width: 260px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }

/* 미리보기 직접 편집 — 담당자별로 문장을 손봐서 그대로 발송한다. */
.bubble-edit { width: 100%; min-height: 260px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; font: inherit; line-height: 1.6; resize: vertical; background: #fff; }
.bubble-edit:focus { outline: none; border-color: var(--brand); }
.edited-flag { color: var(--brand); font-weight: 600; }

/* ── 문구 관리 화면 ────────────────────────────────────────── */
.tpl-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.tpl-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tpl-head input { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.tpl-item textarea, .tpl-new textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; line-height: 1.6; resize: vertical; }
.tpl-actions { display: flex; gap: 8px; margin-top: 8px; }
.tpl-new { margin-top: 8px; }
.tpl-new summary { cursor: pointer; color: var(--brand); font-size: 13px; }
.tpl-new input[type=text] { width: 100%; padding: 6px 8px; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.kv th { text-align: left; padding: 4px 12px 4px 0; font-weight: 600; white-space: nowrap; }
.kv td { padding: 4px 0; }


/* ── 투자사 현황 업로드 ─────────────────────────────────────── */
.import-panel { margin-bottom: 16px; }
.import-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.inline-field { flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.inline-field input, .inline-field select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.inline-field input[type=number] { width: 90px; }
.import-result { margin-top: 8px; }
.import-summary { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fafbfc; }
.import-stats { list-style: none; margin: 8px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; }
.import-stats li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
  border-bottom: 1px dotted var(--line); padding: 3px 0; }
.import-stats span { color: var(--muted); }
.import-notes { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.import-skipped { margin-top: 8px; font-size: 12px; }
.import-skipped summary { cursor: pointer; color: var(--brand); }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.mini-table th, .mini-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.err { color: #c0392b; }
a.secondary-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ══ 대시보드 ═══════════════════════════════════════════════════════════ */

.brand-link { display: block; text-decoration: none; color: inherit; }
.brand-link:hover .brand { color: var(--brand); }

/* 다음 발송일 — 남은 날이 곧 마감이라 가장 크게 둔다 */
.hero-card { display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, #2f6df6 0%, #1e4fd0 100%); color: #fff;
  border-radius: 14px; padding: 20px 24px; margin-bottom: 16px; }
.hero-card.slim { padding: 14px 20px; margin-bottom: 16px; }
.hero-main { display: flex; flex-direction: column; gap: 2px; }
.hero-label { font-size: 12px; opacity: .8; }
.hero-date { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.hero-weekday { font-size: 12px; opacity: .85; }
.hero-count { display: flex; align-items: baseline; gap: 4px; padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,.3); }
.hero-count b { font-size: 34px; font-weight: 700; line-height: 1; }
.hero-count span { font-size: 13px; opacity: .85; }
.hero-count .today { font-size: 22px; }
.hero-next { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-left: auto; }
.hero-next .muted { color: rgba(255,255,255,.75); }
.hero-next .pill { background: rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; }
.hero-card .primary-btn { background: #fff; color: var(--brand); border: none; font-weight: 600; }
.hero-card .primary-btn:hover { background: #eef3ff; }

/* KPI 타일 */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.kpi-row.slim { margin-bottom: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 2px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.kpi-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.kpi-card.static:hover { border-color: var(--line); transform: none; }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.kpi-value.ok { color: var(--green); }
.kpi-value.warn { color: var(--amber); }
.kpi-sub { font-size: 11px; color: var(--muted); }

.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash-grid .panel { margin: 0; }
.dash-grid .panel.wide { grid-column: 1 / -1; }

/* 막힌 것 목록 — 눌러서 바로 고치러 간다 */
.blocker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocker a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; }
.blocker a:hover { background: #fafbfc; }
.blocker.bad a { border-left-color: var(--red); }
.blocker.warn a { border-left-color: var(--amber); }
.blocker-count { font-size: 22px; font-weight: 700; min-width: 42px; text-align: center; }
.blocker.bad .blocker-count { color: var(--red); }
.blocker.warn .blocker-count { color: var(--amber); }
.blocker-body { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.blocker-body .muted { font-size: 12px; }
.all-clear { color: var(--green); font-weight: 600; }

/* 방 연결 상태 누적 막대 */
.stack-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--line); margin-bottom: 10px; }
.stack-bar .seg.ok { background: var(--green); }
.stack-bar .seg.warn { background: var(--amber); }
.stack-bar .seg.bad { background: var(--red); }
.stack-bar .seg.muted { background: var(--gray); }
.legend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend b { color: var(--ink); }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend .dot.ok { background: var(--green); }
.legend .dot.warn { background: var(--amber); }
.legend .dot.bad { background: var(--red); }
.legend .dot.muted { background: var(--gray); }

/* 반응 */
.react-row { display: flex; gap: 10px; }
.react { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; }
.react b { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; }
.react span { font-size: 12px; color: var(--muted); line-height: 1.35;
              display: block; }
.react.ok b { color: var(--green); }
/* 전화할 곳은 색이 달라야 한다 — 다른 넷은 '지나간 일', 이건 '할 일'이다. */
.react.warn b { color: #b26a00; }
.react.warn { border-color: #f0d18a; background: #fffdf6; }
/* 다섯 칸을 나란히. 라벨 길이가 제각각이라(4자~12자) 글자가 짧은 칸만
   커 보이지 않게 폭을 같게 잡는다. */
.react-row { display: flex; gap: 10px; align-items: stretch; }
.react { display: flex; flex-direction: column; justify-content: center;
         gap: 3px; min-width: 0; }

/* 미니 막대 차트 (라이브러리 없이) */
.mini-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mini-title { font-size: 12px; color: var(--muted); margin: 0 0 6px; font-weight: 600; }
.bar-row { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center;
  gap: 8px; font-size: 12px; margin-bottom: 4px; }
.bar-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { background: var(--line); border-radius: 999px; height: 8px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 팀 현황 */
.warn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.warn-item { border-left: 4px solid var(--line); padding: 6px 0 6px 12px; font-size: 13px;
  display: flex; flex-direction: column; gap: 1px; }
.warn-item.bad { border-left-color: var(--red); }
.warn-item.warn { border-left-color: var(--amber); }
.warn-item.muted { border-left-color: var(--gray); }
.warn-detail { color: var(--ink); }
.warn-item .muted { font-size: 12px; }
.ready-bar { display: inline-block; width: 68px; height: 8px; background: var(--line);
  border-radius: 999px; overflow: hidden; vertical-align: middle; }
.ready-bar > span { display: block; height: 100%; background: var(--green); }
.ready-num { font-size: 11px; color: var(--muted); margin-left: 4px; }
.member-form { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.member-form form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.flash { background: #eef5ff; border: 1px solid #cfe0ff; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 10px; }

/* 딜 기업 DB */
.grid-table.compact td, .grid-table.compact th { padding: 6px 8px; font-size: 12px; }
.ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowno { text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.field.wide { grid-column: 1 / -1; }
.hint.ok { color: var(--green); }
.hint.warn { color: var(--amber); }
.tag.warn { background: #fff4e5; color: var(--amber); }
.tag.bad { background: #fdecec; color: var(--red); }
.linkbtn.danger { color: var(--red); }
#co-search, #vc-search, #sourcing-search {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; min-width: 220px; }

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .mini-charts { grid-template-columns: 1fr; }
}

/* 발송 화면 — 내용이 부족한 기업도 감추지 않고 표시만 다르게 한다 */
.pick-card.thin { background: #fffdf7; border-color: #f0e0c0; }
.pick-warn { font-size: 11px; color: var(--amber); margin-top: 2px; }
.pick-warn a { color: var(--amber); }

/* ── 딜 제안: 보내는 방식 탭 ─────────────────────────────────── */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.mode-tab { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); }
.mode-tab span { font-size: 11px; font-weight: 400; color: var(--muted); }
.mode-tab:hover { border-color: var(--brand); }
.mode-tab.active { border-color: var(--brand); background: #eef3ff; color: var(--brand); }
.mode-tab.active span { color: var(--brand); opacity: .8; }
.panel.dimmed { opacity: .45; }
.panel.dimmed .card-list { pointer-events: none; }

/* 몇 개 / 몇 명 골랐는지 — 발송 직전 가장 궁금한 값이라 크게 띄운다 */
.count-pill { display: inline-flex; align-items: baseline; gap: 2px; margin-left: 8px;
  padding: 2px 10px; border-radius: 999px; background: var(--line); color: var(--muted);
  font-size: 12px; font-weight: 500; }
.count-pill b { font-size: 15px; font-weight: 700; }
.count-pill.on { background: #e6efff; color: var(--brand); }
.send-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: #fafbfc; }
.ss-item { font-size: 13px; color: var(--muted); }
.ss-item b { font-size: 20px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.ss-arrow { color: var(--muted); }
.ss-note { font-size: 12px; margin-left: auto; }

.opening-toggle { flex-direction: row !important; align-items: center; gap: 6px !important;
  color: var(--ink) !important; font-size: 13px !important; padding-bottom: 6px; }

/* ── 상세 패널 보강 (IR 기업현황) ─────────────────────────── */
.detail-panel.wide { width: 520px; }
.panel-backdrop { position: fixed; inset: 0; background: rgba(16,21,29,.28); z-index: 39; }
.form-section { font-size: 12px; font-weight: 700; color: var(--muted); margin: 16px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.form-section:first-child { margin-top: 0; }
.form-section .hint { font-weight: 400; }
.detail-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px;
  border-top: 1px solid var(--line); background: #fafbfc; }
.detail-foot .secondary-btn { margin-left: auto; }
.form-grid input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 보내는 방법(채널) ──────────────────────────────────────── */
.channel-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
.channel-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.channel-opt { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.channel-opt.off { color: var(--muted); cursor: not-allowed; }
.channel-row .hint { margin-left: auto; }

/* 체크박스 칸은 위에 라벨이 없어서 격자 칸 맨 위로 떠오른다 —
   옆 칸의 입력창과 눈높이가 어긋난다. 칸 아래쪽에 붙여 줄을 맞춘다. */
.form-grid .check-row { align-self: end; align-items: center; min-height: 34px; }

/* ── 투자컨설턴트 현황 (시트를 그대로 옮긴 표) ───────────────── */
.wide-scroll { overflow-x: auto; }
.sheet-table { min-width: 1200px; table-layout: fixed; }
.sheet-table th { vertical-align: top; font-size: 11.5px; line-height: 1.35; }
.sheet-table td { vertical-align: top; }
.sheet-table .month-col { position: relative; padding-right: 20px; }
.sheet-table .month-col span { display: block; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.col-del { position: absolute; top: 4px; right: 4px; }
.col-del button { font-size: 11px; padding: 0 2px; }

/* 칸을 눌러 바로 고친다 — 원본이 시트라 그 조작에 익숙하다 */
td.cell { cursor: text; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
td.cell:hover { background: #f7f9fc; box-shadow: inset 0 0 0 1px var(--line); }
td.cell.multi { max-height: 96px; overflow: hidden; }
td.cell.strong { font-weight: 600; }
td.cell.saving { background: #fff8e6; }
td.cell.saved { background: #eaf7ee; transition: background .6s; }
td.cell.save-failed { background: #fdecec; }
.cell-input { width: 100%; border: 1px solid var(--brand); border-radius: 6px;
  padding: 4px 6px; font: inherit; font-size: 12px; line-height: 1.45; resize: vertical; }
.sheet-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.add-col { display: flex; gap: 8px; margin-left: auto; }
.add-col input { min-width: 300px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }

/* IR 자료 전달 — 무엇을 보내야 하는지 그 자리에서 보여준다 */
.ir-attach { border: 1px solid #f0e0c0; background: #fffdf7; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13px; }
.ir-attach ul { margin: 6px 0 0; padding-left: 18px; }
.ir-attach li { margin: 2px 0; }
.warn-text { color: var(--amber); }

/* ── 후속 관리 ──────────────────────────────────────────────── */
.due-group { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.due-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.due-head .primary-btn { margin-left: auto; }
.due-list { list-style: none; margin: 0; padding: 0; }
.due-list li { display: grid; grid-template-columns: 84px 1fr 200px auto; gap: 10px;
  align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.due-list li:first-child { border-top: 0; }
.due-when { font-size: 12px; color: var(--muted); }
.due-list li.overdue .due-when { color: var(--red); font-weight: 600; }
.due-from { font-size: 12px; }
.due-acts { display: flex; gap: 8px; }
.followup-strip { border-left: 4px solid var(--brand); }
/* ── 한 줄 입력 폼(주간 업무·반복 업무·규칙 추가) ──────────────────────
   라벨이 붙은 칸과 안 붙은 버튼을 같은 줄에 세우는 자리다.

   아래를 맞추는 것(flex-end)만으로는 어긋난다 — `.field` 가 아래 여백 12px 을
   달고 오고, 버튼(위아래 8px)과 입력칸(6px)의 높이가 애초에 다르기 때문이다.
   그래서 **칸 높이를 하나로 정하고** 거기에 버튼까지 맞춘다. */
.rule-form { --ctl-h: 34px;
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.rule-form .field { margin-bottom: 0; }
/* 체크박스는 제 크기가 있어야 한다 — 요일 고르는 칸이 여기 들어 있다. */
.rule-form input:not([type=checkbox]):not([type=radio]),
.rule-form select,
.rule-form .weekday-pick,
.rule-form .secondary-btn {
  height: var(--ctl-h); box-sizing: border-box; }
.rule-form .secondary-btn { padding: 0 16px; }
.rule-form .weekday-pick { padding: 0; align-items: center; }
/* 규칙 이름은 칸이 아니라 줄 제목이다 — 칸 높이에 맞춰 가운데에 둔다. */
.rule-form .rule-label { font-size: 13px; font-weight: 600; min-width: 88px;
  height: var(--ctl-h); display: flex; align-items: center; }
.inline-form { display: inline; }

.team-banner { background: #fff8e6; border: 1px solid #f0e0c0; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px; }

/* ── 명단(시트) 탭 ──────────────────────────────────────────── */
.sheet-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px;
  border-bottom: 1px solid var(--line); }
.sheet-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
  text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 600;
  margin-bottom: -1px; }
.sheet-tab span { font-weight: 400; font-size: 11px; background: var(--line);
  color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.sheet-tab:hover { color: var(--ink); background: #f7f9fc; }
.sheet-tab.active { color: var(--brand); background: var(--panel);
  border-color: var(--line); border-bottom-color: var(--panel); }
.sheet-tab.active span { background: #e6efff; color: var(--brand); }
.pipeline-strip { border-left: 4px solid var(--gray); }

.sheet-owner-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; margin-bottom: 10px; }
.sheet-owner-line select { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* 투자사 풀 → 내 명단 할당 */
.assign-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #eef3ff; border: 1px solid #cfe0ff; border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.assign-bar select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }
.assign-bar .hint { margin-left: auto; }
.pool-dot { color: var(--gray); margin-right: 2px; }

/* ── 회차 준비 점검 ─────────────────────────────────────────── */
.hero-card.blocked { background: linear-gradient(135deg, #c0392b 0%, #96281b 100%); }
.ready-mark { background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: 10px; padding: 10px 12px; }
.check.ok { border-left-color: var(--green); }
.check.warn { border-left-color: var(--amber); }
.check.block { border-left-color: var(--red); background: #fffafa; }
.check-mark { font-size: 16px; }
.check-body { display: flex; flex-direction: column; gap: 1px; font-size: 13px; flex: 1; }
.check-body .muted { font-size: 12px; }
.check a { margin-left: auto; }

/* 최근에 소개한 기업 — 또 보내면 지난번을 기억 못 한다고 읽힌다 */
.pick-card.recent-sent { background: #f7f7fa; }
.tag.sent { background: #eee5ff; color: #6b46c1; }
.tag.soft { background: var(--line); color: var(--muted); }

.bulk-paste { width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 12px; line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }

/* IR·미팅 관리 */
.overdue-row { background: #fffafa; }
.row-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* **td 에는 display:flex 를 걸면 안 된다.** 그 칸이 테이블 레이아웃에서 빠져
   행이 통째로 어긋난다 — 소개 문구 칸에서 겪은 것과 같은 원인이다.
   표 안에서는 버튼을 인라인으로 늘어놓는다. */
td.row-acts, th.row-acts { display: table-cell; white-space: nowrap; }
td.row-acts form { display: inline-block; }
td.row-acts form + form { margin-left: 8px; }
.row-acts select { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.member-form textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; }
.ir-strip { border-left: 4px solid var(--amber); }
.send-groups { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

/* ── 오늘 할 일 ─────────────────────────────────────────────── */
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todo a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 11px 13px; }
.todo a:hover { background: #fafbfc; }
.todo.urgent a { border-left-color: var(--red); }
.todo.soon a { border-left-color: var(--amber); }
.todo.info a { border-left-color: var(--gray); }
.todo-mark { font-size: 12px; }
.todo-body { display: flex; flex-direction: column; gap: 1px; font-size: 13px; flex: 1; }
.todo-body .muted { font-size: 12px; }

.mail-fields { border: 1px solid #cfe0ff; background: #f5f8ff; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; }
.mail-fields input { width: 100%; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; }

/* 반응 타일은 눌러서 그 목록으로 간다 */
a.react { text-decoration: none; color: inherit; transition: border-color .12s; }
a.react:hover { border-color: var(--brand); background: #fafbfc; }

/* ── 주간 업무 ──────────────────────────────────────────────── */
.task-done td.cell { color: var(--muted); text-decoration: line-through; }
.task-status { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.weekday-pick { display: flex; gap: 8px; font-size: 13px; color: var(--ink); padding: 6px 0; }
.weekday-pick label { display: flex; align-items: center; gap: 3px; }

/* 다음 딜소개 — 날짜와 요일을 한 덩어리로 크게 */
.hero-date em { font-style: normal; font-size: 16px; font-weight: 600;
  margin-left: 6px; opacity: .9; }
.hero-rule { font-size: 11px; color: rgba(255,255,255,.85); text-decoration: underline;
  text-underline-offset: 2px; }
.hero-rule:hover { color: #fff; }

/* 지난 회차 번호로 고르기 */
.num-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.num-chip { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); font-size: 12px; cursor: pointer; }
.num-chip:hover { border-color: var(--brand); }
.num-chip.picked { background: #e6efff; border-color: var(--brand); color: var(--brand);
  font-weight: 600; }
.num-chip.no-link { border-style: dashed; }
.field.inline-field.wide { flex-basis: 100%; }

.pick-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.pick-tags .tag { font-size: 10.5px; }

/* ── 진행 단계 깔때기 ──────────────────────────────────────
   딜소개 → IR → 미팅 으로 이어지는 사다리. 어디서 끊기는지가 한눈에 보여야
   한다. 0 인 칸도 지우지 않는다 — 0 이 답인 칸이 제일 중요하다. */
.funnel { display:flex; align-items:stretch; gap:2px; flex-wrap:wrap;
          margin:10px 0 6px; }
.funnel-step { display:flex; flex-direction:column; align-items:center; gap:1px;
               min-width:76px; padding:6px 8px; border:1px solid var(--line);
               border-radius:6px; background:var(--bg-soft); cursor:pointer;
               font:inherit; line-height:1.2; }
.funnel-step b { font-size:15px; font-variant-numeric:tabular-nums; }
.funnel-step span { font-size:11px; color:var(--muted); white-space:nowrap; }
.funnel-step:hover { border-color:var(--accent); }
.funnel-step.zero { opacity:.45; }
.funnel-step.all { justify-content:center; min-width:64px; font-size:12px;
                   color:var(--muted); }
.funnel-arrow { align-self:center; color:var(--line); font-size:15px; }
.funnel-step.soft b { color:var(--muted); }
.funnel-step.warn b { color:#b26a00; }
.funnel-step.good b { color:#1f7a3d; }
.funnel-step.done b { color:#1a5fb4; }

/* 표 안의 단계 뱃지 — 깔때기와 같은 색을 쓴다. */
.stage-pill { display:inline-block; padding:1px 7px; border-radius:10px;
              font-size:11.5px; border:1px solid var(--line); white-space:nowrap; }
.stage-pill.muted { color:var(--muted); }
.stage-pill.soft  { background:var(--bg-soft); }
.stage-pill.warn  { background:#fff5e0; border-color:#f0d18a; color:#8a5200; }
.stage-pill.good  { background:#e8f6ec; border-color:#a8d8b8; color:#1f7a3d; }
.stage-pill.done  { background:#e8f0fc; border-color:#a9c4ec; color:#1a5fb4; }

/* 딜 진행 관리 탭 — 급한 건수는 눈에 띄게. */
.flow-tabs { margin-bottom: 12px; }
.flow-tabs .sheet-tab span.warn { background:#f6c344; color:#4a3400; }

/* 눌러서 바로 고치는 칸 — 고칠 수 있다는 것이 보여야 누른다. */
/* 빈 칸도 누를 수 있어야 한다.
   `.clamp2` 는 `-webkit-box` 라 내용이 없으면 **높이가 0** 이 된다 — 누를
   자리가 없어 클릭이 뒤의 행으로 흘러가고, 입력창 대신 [수정] 창이 열린다.
   `TIPS 운영사`(306행 중 303행이 빈칸) 처럼 대부분 비어 있는 칸이 그랬다. */
.cell[data-field] { cursor: text; border-radius: 3px; min-height: 1.35em; }
.cell[data-field]:hover { background: var(--bg-soft); outline: 1px dashed var(--line); }
.cell.saving { opacity: .55; }
.cell.saved { background: #e8f6ec; }
.cell.save-failed { background: #fdecec; }
.room-edit { font-size: 11px; }

/* ── 칸 위에 떠서 고치는 편집창 ────────────────────────────────────────
   한줄소개는 320px 말줄임 칸이다. 그 안에서 한 줄짜리 입력으로 문장을 쓰면
   앞뒤가 안 보여서 어디를 고치는지 모른 채 타이핑하게 된다. */
.cell-pop { position: fixed; z-index: 60; display: flex; flex-direction: column;
            gap: 2px; padding: 6px; border: 1px solid var(--accent);
            border-radius: 6px; background: var(--bg);
            box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.cell-pop-input { width: 100%; min-height: 56px; resize: vertical;
                  font: inherit; line-height: 1.45; padding: 6px 8px;
                  border: 1px solid var(--line); border-radius: 4px;
                  background: var(--bg); color: inherit; }
.cell-pop-input:focus { outline: none; border-color: var(--accent); }
.cell-pop-hint { font-size: 11px; color: var(--muted); text-align: right; }

/* 소개 문구 — 실제로 중앙값 83자다. 한 줄 말줄임이면 20자만 보여서 못 읽는다.
   두 줄까지 보여 주고(약 2배), 전체는 눌러서 뜨는 편집창과 툴팁으로 본다.

   **반드시 td 안쪽 div 에 건다.** `display:-webkit-box` 를 td 에 직접 걸면
   그 칸이 테이블 레이아웃에서 빠져 행이 통째로 어긋난다 — 실제로 깨졌다. */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; white-space: normal; line-height: 1.45;
          font-size: 12.5px; }
.th-note { display: block; font-weight: 400; font-size: 10.5px; opacity: .75; }

/* 값이 정해져 있는 칸(분야·단계) — 쓰고 있는 값에서 고른다.
   새로 타이핑하면 "헬스케어" 와 "헬스 케어" 가 갈라져 필터가 둘로 센다. */
.cell-pop-input.one-line { min-height: 0; height: 32px; resize: none; }
.cell-pop-choices { display: flex; flex-wrap: wrap; gap: 4px;
                    max-height: 132px; overflow-y: auto; padding: 2px 0; }
.cell-pop-choice { font: inherit; font-size: 12px; padding: 2px 9px;
                   border: 1px solid var(--line); border-radius: 999px;
                   background: var(--bg-soft); cursor: pointer; white-space: nowrap; }
.cell-pop-choice:hover { border-color: var(--accent); background: var(--bg); }
.cell-pop-choice.on { border-color: var(--accent); font-weight: 700; }

/* 후속 화면에서 이름을 눌러 IR 요청 기록으로 — 누를 수 있다는 게 보여야 한다. */
.req-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line); }
.req-link:hover { border-bottom-color: var(--accent); }
.req-link:hover b { color: var(--accent); }

/* 자료 전달은 여러 통으로 나간다 — 순서가 보여야 확인할 수 있다. */
.split-notice { margin: 6px 0 8px; padding: 8px 10px; font-size: 12px;
                border: 1px solid var(--line); border-radius: 6px;
                background: var(--bg-soft); }
.split-notice ol { margin: 5px 0 4px 18px; padding: 0; }
.split-notice li { margin: 1px 0; }

/* 지금 돌고 있는 버전. 무엇이 이상하다는 말을 들었을 때 먼저 묻는 숫자다.
   맨 아래에 두면 스크롤해야 보여서, 정작 물어볼 때 아무도 못 찾는다. */
.brand-ver { font-size: 10.5px; font-weight: 400; opacity: .6;
             margin-left: 5px; vertical-align: middle; letter-spacing: 0; }

/* 금액 칸의 단위. 숫자만 있으면 `1,000` 이 천만 원인지 천억인지 알 수 없다. */
.th-unit { font-weight: 400; opacity: .7; margin-left: 3px; font-size: 10.5px; }

/* 핵심/TOP Deal — 눌러서 켜고 끈다. */
.js-top { font-size: 12px; color: var(--muted); }
.js-top.on { color: #c9971a; font-weight: 700; }
.top-on { color: #c9971a; font-weight: 700; }

/* 업무 보고의 다섯 목록 — 한 페이지에서 죽 훑는다. */
.bucket { margin: 14px 0 18px; }
.bucket-head { font-size: 13px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.bucket-empty { font-size: 12px; margin: 0 0 4px; }

/* NO 를 누르면 활동 이력이 열린다 — 월별 딜소개는 옆으로 끝없이 늘어나는 칸이라
   표에 넣지 않고 여기서 본다. */
.rowno.js-detail { cursor: pointer; }
.rowno.js-detail:hover { color: var(--accent); text-decoration: underline; }

/* 업무 보고 — 팀원 골라 보기 */
.chip-select { font: inherit; font-size: 12px; padding: 3px 8px;
               border: 1px solid var(--line); border-radius: 999px;
               background: var(--bg); }

/* 반복 업무 — 요일 옆 오전/오후 토글 */
.tod-pick { font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--line);
            border-radius: 999px; background: var(--bg); color: var(--muted);
            margin-right: 3px; }
.tod-pick.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 내 투자사 선호 — IR 자료를 많이 요청한 순 */
.top-pick { display: flex; gap: 3px; }
/* 10명치 높이까지만 보이고 그 뒤로는 스크롤한다 — 20명을 그대로 늘어놓으면
   옆 칸(연결 진행 중인 명단)과 높이가 안 맞아 화면이 길어진다. */
.req-rank { list-style: none; margin: 0; padding: 0;
            max-height: 430px; overflow-y: auto; }
.req-rank li { border-bottom: 1px solid var(--line); padding: 5px 0; }
.req-rank li:last-child { border-bottom: 0; }
.req-rank a { display: flex; align-items: center; gap: 9px; color: inherit;
              text-decoration: none; }
.req-rank a:hover .req-who b { color: var(--accent); }
.req-no { width: 18px; text-align: right; font-size: 11px; color: var(--muted);
          font-variant-numeric: tabular-nums; }
.req-who { flex: 1; min-width: 0; font-size: 13px; }
.req-who .cell-sub { font-size: 11px; }
.req-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.req-count b { font-size: 14px; color: var(--brand); }
.req-companies { margin: 2px 0 0 27px; display: flex; flex-wrap: wrap; gap: 3px; }

/* 딜 진행 관리 — 구역 이동 바.
   탭이 아니다. 넷 다 같은 페이지의 구역이라 눌러도 페이지가 바뀌지 않는다. */
.jump-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
            margin: 10px 0 12px; padding: 6px 8px;
            border: 1px solid var(--line); border-radius: 8px;
            background: var(--bg-soft); font-size: 13px; }
.jump-bar a { display: flex; align-items: center; gap: 5px; padding: 4px 9px;
              border-radius: 6px; color: inherit; text-decoration: none; }
.jump-bar a:hover { background: var(--bg); }
.jump-bar a span { font-size: 11px; padding: 0 6px; border-radius: 999px;
                   background: var(--line); color: var(--muted); }
.jump-bar a span.warn { background: #f6c344; color: #4a3400; font-weight: 700; }
.jump-arrow { color: var(--line); }
/* 이동 바에서 눌러 내려온 구역이 화면 위에 딱 붙지 않게 */
#requests, #remind, #meetings, #reviews { scroll-margin-top: 14px; }

/* 참고 시트 탭 — 명단 탭과 성격이 달라 구분선 뒤에 둔다. */
.tab-divider { color: var(--line); padding: 0 4px; align-self: center; }
.ref-tab { font-weight: 400; }
.ref-panel { margin: 10px 0 14px; }
.ref-acts { display: flex; gap: 10px; align-items: center; }
/* 줄글은 원문 그대로 — 표로 잘못 나누면 내용이 칸에 잘려 사라진다. */
.ref-text { margin: 0; padding: 10px 12px; background: var(--bg-soft);
            border: 1px solid var(--line); border-radius: 8px;
            font: inherit; font-size: 12.5px; line-height: 1.6;
            white-space: pre-wrap; word-break: break-word;
            max-height: 520px; overflow-y: auto; }
/* 참고 표는 칸마다 글 길이가 들쭉날쭉하다 — 줄바꿈을 허용한다. */
.ref-cell { white-space: pre-wrap; vertical-align: top; font-size: 12px;
            line-height: 1.5; }

/* ── 폰·태블릿에서 보기 ────────────────────────────────────────────────
   **보기 전용**이다. 발송은 PC 의 발송 프로그램이 하므로 폰에서 하지 않는다.
   밖에서 "지금 뭐가 밀렸나" 를 확인하는 용도라, 읽는 것만 편하면 된다.

   1080px 아래 — 좌측 메뉴를 위로 눕힌다(가로로 다 못 넣는다).
   720px 아래  — 카드·표를 한 줄로 세우고, 넓은 표는 가로로 민다. */
@media (max-width: 1080px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; flex: none; height: auto; position: static; }
  .brand { padding: 12px 14px 0; font-size: 17px; }
  .brand-sub { padding: 0 14px 8px; }
  /* 메뉴를 가로로 눕혀 넘치면 밀어서 본다 — 접는 버튼을 만들면 눌러야 보인다 */
  .menu { flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 10px 8px; }
  .menu-item { white-space: nowrap; padding: 7px 11px; }
  .sidebar-foot { display: flex; align-items: center; gap: 12px;
                  padding: 0 14px 10px; flex-wrap: wrap; }
  .content { padding: 14px 14px 40px; }
}

@media (max-width: 720px) {
  /* 여러 칸으로 나뉘던 것을 한 줄로 세운다 */
  .kpi-row, .react-row, .dash-grid, .mini-charts,
  .deal-grid, .form-grid, .import-stats {
    grid-template-columns: 1fr; flex-direction: column;
  }
  .kpi-card, .react { width: auto; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-right { flex-wrap: wrap; }
  .page-head h1 { font-size: 19px; }

  /* 표는 좁히면 못 읽는다 — 폭을 지키고 가로로 민다. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grid-table { min-width: 760px; }
  /* 스타트업DB 처럼 아주 넓은 표도 같은 규칙 — 폰이라고 더 좁히지 않는다 */
  .table-wrap.wide .grid-table { min-width: 2030px; }
  /* 폰은 위쪽 고정 영역이 얕다. 데스크톱 값(320px)을 그대로 쓰면 표에 남는
     자리가 거의 없어진다. */
  .table-wrap.wide { --head: 210px; }

  /* 가로로 늘어선 줄은 밀어서 본다. 접으면 눌러야 보인다. */
  .sheet-tabs, .jump-bar, .funnel, .mode-tabs, .quick-chips, .chip-row,
  .detail-tabs, .weekday-pick {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
  }
  .funnel-step, .sheet-tab, .mode-tab, .chip { flex: 0 0 auto; }

  /* 우측 상세 패널은 폰에서 화면을 다 쓴다 — 420px 은 화면보다 넓다. */
  .detail-panel, .detail-panel.wide { width: 100vw; }

  /* 시간·이름·내용이 칸으로 나뉘던 줄은 세로로 */
  .tl-item { grid-template-columns: 1fr; gap: 2px; }
  .bar-row { grid-template-columns: 72px 1fr 30px; }

  /* 폰에서 뜨는 편집창은 화면을 벗어나면 안 된다 */
  .cell-pop { width: calc(100vw - 24px) !important; left: 12px !important; }

  /* 줄바꿈이 안 되던 것들 — 긴 기업명·주소가 화면을 밀어낸다 */
  .due-list li, .due-head, .req-rank a { flex-wrap: wrap; }
  .memo, .ellipsis { max-width: 100%; }
}

/* 로그인 화면. 카드 폭 340px 이 좁은 폰(360px)에서 여백을 다 먹는다. */
@media (max-width: 400px) {
  .login-card { width: auto; max-width: 100%; margin: 0 12px; padding: 22px 18px; }
}

/* 딜소개 불가 — 더 이상 소개하면 안 되는 기업.
   발송 화면 목록에서는 아예 빠지지만, 여기서는 남겨 두고 눈에 띄게 한다.
   지운 게 아니라 '보내면 안 되는 곳' 이라는 걸 알아야 하기 때문이다. */
.blocked-row { background: #fdf3f3; }
.blocked-row:hover { background: #fbe9e9; }
/* 취소선은 긋지 않는다 — 지운 기업처럼 읽히는데, 실제로는 지금도 관리하는
   곳이고 계약여부만 '딜소개 불가' 일 뿐이다. 붉은 바탕으로 충분하다. */
.blocked-row .co-name b { color: var(--red); }

/* ── 주간 업무 · 설명 글씨 ────────────────────────────────────────────
   아침에 이 화면만 보고 하루를 시작하는데, 정작 "무엇을 하라" 는 설명이
   회색 12px 이라 눈에 안 들어왔다. 제목만큼은 아니어도 읽히게 한다. */
.todo-body .muted { color: var(--ink); font-size: 12.5px; opacity: .82; }
#task-table .cell, #routine-table .cell { font-size: 13px; }
/* 각 구역이 무엇을 하는 곳인지 알려주는 줄 — 여기가 제일 연했다 */
.todo-page .panel-title .hint { color: var(--ink); opacity: .7; font-weight: 500; }
.todo-page .hint { font-size: 12.5px; }
.todo-page .hint b { color: var(--ink); }
/* 회차 준비 점검의 '→ 무엇을 하세요' 줄 */
.todo-page .check-action, .todo-page .todo-list .muted { color: var(--ink); opacity: .8; }

/* 업무 보고 — 월간·연간 고르기 */
.report-picker { display: flex; align-items: center; gap: 8px; }
.seg-toggle { display: flex; gap: 2px; }
.grid-table tfoot th { background: #f7f8fa; border-top: 2px solid var(--line);
                       font-size: 12px; padding: 6px 9px; }
/* ── 숫자 칸 정렬 ─────────────────────────────────────────────
   자릿수가 다른 값이 왼쪽에 붙어 있으면 크기를 눈으로 비교할 수 없다.
   6 과 117 이 같은 자리에서 시작해 버린다.

   **머리글도 같이 민다.** 칸은 오른쪽인데 머리글만 왼쪽이면 어느 머리글이
   어느 칸인지 눈이 매번 다시 맞춰야 한다 — 그동안 `td.num` 규칙이 아예
   없어서(있는 줄 알았다) 숫자가 전부 왼쪽에 붙어 있었다.

   `tabular-nums` 는 숫자 폭을 고르게 해 세로로 자릿수가 맞게 한다. */
.grid-table th.num, .grid-table td.num,
.mini-table th.num, .mini-table td.num,
.grid-table tfoot th.num {
  text-align: right; font-variant-numeric: tabular-nums;
}

/* 내 투자사 선호 — 숫자가 눈에 먼저 들어와야 순위가 읽힌다. */
.req-rank li { padding: 6px 2px; }
.req-rank a { gap: 10px; }
.req-count b { font-size: 15px; }
/* 스크롤이 생겼을 때 잘린 게 아니라 더 있다는 걸 알려 준다 */
.req-rank { scrollbar-width: thin; }
.req-rank::after { content: ""; display: block; height: 2px; }

/* 접어 둔 달 안내 — 지워진 것이 아니라는 걸 알려야 한다. */
.months-folded { background: var(--bg-soft); border: 1px solid var(--line);
                 border-radius: 8px; padding: 7px 10px; margin: 8px 0;
                 display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 필터가 하나뿐인 칸 — 단추가 컬럼 이름 자리를 대신한다.
   이름을 두 번 쓰면 좁은 칸에서 자리만 두 배로 먹는다. */
.grid-table th.filter-only { padding-top: 4px; padding-bottom: 4px; }
.filter-only .filter-btn { font-size: 12px; font-weight: 600; color: var(--muted);
                           padding: 3px 6px; margin: 0; }
.filter-only .filter-btn.on { color: var(--brand); }

/* ── 주간 업무 — 네 패널을 한 규칙으로 ──────────────────────────────
   `시스템이 챙기는 일`·`회차 준비 점검`이 같은 모양의 목록인데 상자 크기와
   글자 크기가 조금씩 달라 눈이 걸렸다. 아침에 위에서 아래로 훑는 화면이라
   줄 높이가 일정해야 읽힌다. */
.todo-page .panel { padding: 14px 16px; }
.todo-page .panel + .panel { margin-top: 12px; }

/* 목록 줄 — 두 패널이 같은 상자를 쓴다 */
.todo-page .todo-list,
.todo-page .check-list { gap: 5px; }
.todo-page .todo a,
.todo-page .check {
  gap: 10px; padding: 9px 12px; border-radius: 8px; border-left-width: 3px;
  min-height: 42px; align-items: center;
}
.todo-page .todo-mark,
.todo-page .check-mark { font-size: 13px; width: 16px; text-align: center; flex: 0 0 16px; }
.todo-page .todo-body,
.todo-page .check-body { font-size: 13px; gap: 2px; line-height: 1.4; }
.todo-page .todo-body .muted,
.todo-page .check-body .muted { font-size: 12px; }

/* 표 두 개(주간 업무·반복 업무)도 같은 밀도로 */
.todo-page .grid-table th,
.todo-page .grid-table td { padding: 7px 10px; }
.todo-page .grid-table td { font-size: 13px; }

/* 제목 줄 — 이름과 설명 사이가 붙어 있었다 */
.todo-page .panel-title { gap: 10px; margin-bottom: 10px; }
.todo-page .panel-title .hint { margin-left: 2px; }
/* 아래쪽 안내문이 목록에 바짝 붙어 있었다 */
.todo-page .panel > .hint:last-child { margin-top: 10px; }

/* 아직 붙이지 않은 방식 — 있다는 것은 보이되 눌리지는 않는다. */
.mode-tab.soon { opacity: .5; cursor: not-allowed; }
.mode-tab.soon:hover { background: none; border-color: var(--line); }