/* =========================================================
   theme.css — 기존 화면의 팔레트/형태를 변수로 정리해 승계
   (하드코딩된 색값이 index.php 안에 흩어지지 않게 하는 것이 목적)
   ========================================================= */
:root{
  --bg:#f5f5f0;
  --surface:#ffffff;
  --surface-2:#fafaf7;
  --line:#e0dfd8;
  --line-soft:#f0efe8;
  --ink:#1a1a1a;
  --ink-2:#666666;
  --ink-3:#888888;
  /* 곁들이 글씨 — 옵션 메뉴의 구분 라벨처럼 "있지만 앞에 나서지 않는" 자리 */
  --ink-4:#a8a8a2;
  --accent:#a32d2d;
  --ok-bg:#eaf3de;
  --ok-fg:#3b6d11;
  --warn-bg:#fdf3d8;
  --warn-fg:#8a6100;

  --r-sm:6px;  --r-md:8px;  --r-lg:12px;  --r-xl:16px;
  --shadow:0 4px 16px rgba(0,0,0,.10);

  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
}
a{color:inherit}

/* ── 버튼 / 입력 ─────────────────────────────────────── */
.btn{
  padding:8px 14px;border:1px solid #ddd;border-radius:var(--r-md);
  font:inherit;font-size:13px;cursor:pointer;
  background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  text-decoration:none;transition:background .16s,border-color .16s;
}
.btn:hover{background:#f0efea}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#000}
.btn.danger{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.icon{padding:8px 10px}
.btn.block{width:100%;justify-content:center;padding:13px}

/* 지금은 할 수 없는 단추 (099) — 감추지 않고 흐리게.
   `disabled` 로 두지 않는다: 눌러야 까닭을 읽을 수 있어야 한다.
   풍선은 지나가면 사라지고, 마우스를 못 대는 화면도 있다. */
.btn.off{opacity:.5}
.btn.off:hover{background:var(--surface)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}
.btn[disabled]{opacity:.5;cursor:not-allowed}

input,select,textarea{
  font:inherit;padding:9px 11px;border:1px solid #ddd;border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);width:100%;
}
.fg{display:flex;flex-direction:column;gap:5px}
.fg > span{font-size:12px;color:var(--ink-2)}
.stack{display:flex;flex-direction:column;gap:12px}

/* ── 로그인 ──────────────────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh}
.auth-box{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:2.5rem 2rem;width:90%;max-width:400px;
}
.auth-title{font-size:20px;margin:0 0 .35rem}
.auth-sub{font-size:12px;color:var(--ink-3);margin:0 0 1.6rem}
.auth-err{color:var(--accent);font-size:13px;margin:1rem 0 0}

/* ── 로그인 유지 — 폰에서만 나온다 (132-19-81 · 104) ──────────────
   ★ 여태 이 칸에는 **스타일이 없었다.** `.stack` 이 세로로 쌓는 통이라
     체크상자가 글 위에 홀로 떠 있었다. 폰 전용이 되면서 눈에 띄었다.
   ★ 손가락으로 누르는 자리라 상자를 키우고(18px), 글까지 누르는 자리가
     되게 label 을 가로로 편다.                                        */
.keepbox{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; line-height:1.5; cursor:pointer; text-align:left;
}
.keepbox input[type="checkbox"]{
  width:18px; height:18px; flex:0 0 auto; margin:1px 0 0;
}
.keepbox small{ display:block; color:var(--ink-3); font-size:11px; margin-top:2px }
/* 데모 「체험하기」 단추 줄 (132-19-199) */
.demo-try-row{ display:flex; flex-wrap:wrap; gap:6px }
.demo-try-row .btn{ flex:1 1 30% }
/* 데모 띠 — 화면 맨 위 (132-19-199) */
/* 246 — 도움말 자리 아이콘 · 메뉴 */
.help-spot{background:none;border:0;cursor:pointer;color:#1d4ed8;opacity:.28;font-size:16px;padding:2px 4px;line-height:1;transition:opacity .15s}
.help-spot:hover{opacity:1}
.help-spot.linked{opacity:.65}
.help-spot.page{position:absolute;top:6px;right:8px;z-index:5}
.help-spot.modal{margin-left:auto;order:5}
.help-spot.opt{margin-left:6px;font-size:14px;vertical-align:middle}
.help-menu{position:fixed;z-index:400;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;min-width:240px;display:flex;flex-direction:column;gap:2px}
.help-menu .hm-t{font-size:12px;padding:4px 8px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.help-menu button{background:none;border:0;text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;font:inherit;font-size:13px}
.help-menu button:hover{background:var(--surface-2)}
.demo-band{ background:#fff3cd; color:#664d03; font-size:12px; text-align:center; padding:4px 10px; border-bottom:1px solid #ffe69c }
/* 235 — 사무실 IP 띠 */
.ip-band{ background:#e8f0fe; color:#1e3a8a; font-size:12px; text-align:center; padding:5px 10px; border-bottom:1px solid #c7d7fb; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap }
.ip-band .btn.xs{ padding:2px 8px; font-size:12px }

/* ── 상단바 ──────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand{font-weight:600}
a.brand{display:inline-flex;align-items:center;text-decoration:none}

/* 로고 — 머리줄 높이에 맞춘다.
   가로는 재지 않는다. 가로세로 비가 제각각이라 늘이면 찌그러진다. */
.brand-logo{height:22px;width:auto;max-width:180px;display:block}
@media (max-width:600px){ .brand-logo{max-width:120px} }
.who{font-size:13px;color:var(--ink-2)}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
}
.chip.role{border-color:var(--ink);color:var(--ink);font-weight:600}
.chip.role-admin{background:var(--ink);color:#fff}
.chip.role-org{background:#1d4e89;color:#fff;border-color:#1d4e89}
.chip.role-manager{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip.term.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:#e8d9a8}
.chip.term.over{background:var(--accent);color:#fff;border-color:var(--accent)}

/* 누르면 연장하러 간다 — 단추임을 알린다 */
button.chip.term{font-family:inherit;cursor:pointer}
button.chip.term:hover{border-color:var(--ink-3)}
button.chip.term.warn:hover{background:#f5e9c8}
button.chip.term.over:hover{opacity:.9}

.banner{padding:9px 16px;font-size:13px;text-align:center}
.banner.warn{background:var(--warn-bg);color:var(--warn-fg)}
.banner.over{background:var(--accent);color:#fff}

/* ── 내비 / 본문 ─────────────────────────────────────── */
.mainnav{
  display:flex;gap:6px;padding:10px 16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.navbtn{
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.navbtn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-empty{font-size:12px;color:var(--ink-3)}

/* ── 탭 묶음 「팀 운영」 (132-19-123) — 단추 하나, 누르면 아래로 펼친다 ── */
.navgroup{position:relative;display:inline-flex}
.navgroup-caret{font-size:12px;margin-left:2px;opacity:.7}
.navgroup-cur{font-weight:600}
.navgroup.active .navgroup-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.navgroup.active .navgroup-btn .navbadge{background:#fff;color:var(--accent)}
.navmenu{
  display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:40;
  flex-direction:column;gap:4px;min-width:180px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.navgroup.open .navmenu{display:flex}
.navmenu .navbtn{width:100%;justify-content:flex-start;border-color:transparent}
.navmenu .navbtn:hover{border-color:var(--line);background:var(--surface-2)}
.navmenu .navbtn.active{border-color:var(--ink)}

.content{padding:20px 16px;max-width:1280px;margin:0 auto}

.empty-state{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem;max-width:640px;
}
.empty-state h2{margin:0 0 .5rem;font-size:17px}
.empty-state p{margin:0 0 1.4rem;color:var(--ink-2);font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;font-size:13px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:600}

/* ── 모달 ────────────────────────────────────────────── */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;padding:16px;z-index:100;
}
.modal-bg.open{display:flex}
.modal{
  background:var(--surface);border-radius:var(--r-lg);padding:1.5rem;
  width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);
}
.modal-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1.2rem}
.modal-hd h3{margin:0;font-size:16px;display:flex;align-items:center;gap:6px}

/* ── 토스트 ──────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  padding:11px 18px;border-radius:var(--r-md);font-size:13px;
  background:var(--ink);color:#fff;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:400;
  max-width:min(90vw,460px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--ok-fg)}
.toast.err{background:var(--accent)}

/* 권한이 없는 요소.
   숨기지 않고 희미하게 남긴다 — 무엇을 살 수 있는지 알아야 살 수 있다.
   미사용(tier none)만 완전히 감춘다.

   ★ 클래스만으로 건다. [data-feature] 로 좁히지 않는다.
     좁혀 두었더니 「자료로 채우기」 처럼 JS 가 클래스만 붙이는 단추가
     **아무 표시 없이 멀쩡해 보였다** — 눌러야 막힌 줄 알았다.
     navbtn·optnav-btn 이 따로 규칙을 갖고 있던 것도 같은 이유였다. */
.feature-off{display:none !important}

.feature-locked{
  opacity:.45;
  position:relative;
  cursor:not-allowed;
}
.feature-locked:hover{opacity:.6}

/* 자물쇠 표시 — 왜 눌러지지 않는지 알 수 있게 */
.feature-locked::after{
  content:'\ea9d';               /* ti-lock */
  font-family:'tabler-icons';
  position:absolute;top:2px;right:3px;
  font-size:10px;line-height:1;color:var(--accent);
  pointer-events:none;
}
.navbtn.feature-locked::after{top:50%;right:8px;transform:translateY(-50%)}

/* 목록 안에서는 자물쇠를 찍지 않는다.
   행마다 한 개씩 찍히면 목록이 자물쇠로 뒤덮인다 —
   머리글(th)에 한 번 찍히므로 그 열이 왜 흐린지는 알 수 있다. */
td.feature-locked::after,
.tag.feature-locked::after{content:none}

/* 잠긴 탭 — 글자를 회색으로.
   opacity 만으로는 활성 탭과 구분이 약하다.
   색을 바꿔 "지금 쓸 수 없다" 가 분명히 보이게 한다. */
.navbtn.feature-locked{
  color:var(--ink-3);
  opacity:.7;
}
.navbtn.feature-locked .ti{color:var(--ink-3)}
.navbtn.feature-locked:hover{
  color:var(--ink-2);background:transparent;
}

/* 배분 좌측 메뉴의 잠긴 그룹 */
.optnav-grp.locked{color:var(--ink-3);opacity:.7}
.optnav-btn.feature-locked{
  color:var(--ink-3);opacity:.7;cursor:not-allowed;position:relative;
}
.optnav-btn.feature-locked::after{
  content:'\ea9d';font-family:'tabler-icons';
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:10px;color:var(--accent);
}
.optnav-btn.feature-locked:hover{background:transparent}
.feature-locked.runact::after{top:6px;right:6px;font-size:12px}

@media (max-width:600px){
  .content{padding:14px 12px}
  .modal{padding:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ── Phase 2: 목록 화면 ───────────────────────────────── */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.page-title{font-size:17px;margin:0}

.tablewrap{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;
}
table.grid{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
/**
 * 칸이 몇 개뿐인 표 — 760px 을 강요하지 않는다.
 *
 * min-width 는 칸이 열 개 넘는 **목록 화면**을 위한 것이다. 그런데 창 안의
 * 작은 표(신청자 넷)까지 760px 이 되어, 520px 창 안에서 좌우로 밀렸다 —
 * 이름 넉 줄을 보려고 가로로 끌어야 했다.
 */
table.grid.fit{min-width:0}
table.grid th,table.grid td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
table.grid th{background:var(--surface-2);color:var(--ink-2);font-weight:600;font-size:12px}
table.grid tbody tr:last-child td{border-bottom:0}
table.grid tbody tr:hover{background:var(--surface-2)}
table.grid td.num,table.grid th.num{text-align:right}
table.grid td.right{text-align:right}
table.grid td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
table.grid td .btn{padding:5px 9px}
/* 회사이름으로 팀을 묶어 보여주는 줄 (132-19-29) */
table.grid tr.grouphead td{background:var(--surface-2);color:var(--ink-2);
  font-size:12px;padding:7px 12px}
table.grid tr.grouphead:hover{background:var(--surface-2)}

.muted{color:var(--ink-3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
     background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tag.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:#cfe3b4}
.tag.warn{background:var(--warn-bg);color:var(--warn-fg);border-color:#e8d9a8}
.tag.err{background:#fbe9e9;color:var(--accent);border-color:#f0cccc}
/* 공휴일 — 휴업·연차와 한눈에 갈리게 (132-19-137) */
.tag.info{background:#e8f0fb;color:#1d4e89;border-color:#c5d7f0}

/* 눌러서 정렬하는 머리글 (112) — 어디를 누를 수 있는지 보여야 한다 */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
th.sortable::after{content:'';font-size:10px;margin-left:4px;opacity:.5}
th.sortable.on{color:var(--accent)}
th.sortable.on[data-dir="asc"]::after{content:'▲';opacity:1}
th.sortable.on[data-dir="desc"]::after{content:'▼';opacity:1}

/* 요청 3종 — 방문·자료·전화 (110)

   기업목록에서 이 셋만 **손님이 부른 것**이다. 나머지 진행사항은 우리 쪽
   상태다. 같은 회색 알약으로 두면 스무 줄 사이에서 안 보인다 —
   놓치면 약속을 어긴다.

   그래서 ① 알약을 채우고 ② 그 줄 왼쪽에 색 띠를 둔다.
   띠까지 두는 까닭 — 진행사항 칸은 표 가운데라 가로로 훑을 때 지나친다. */
.tag.req{background:var(--accent);color:#fff;border-color:var(--accent)}
.tag.req i{font-size:11px;margin-right:2px;vertical-align:-1px}
/* 방문·전화는 서로 색을 맞바꿨다 — 방문을 빨간색으로 (131-4) */
.tag.req-visit{background:#a32d2d;border-color:#a32d2d}
.tag.req-phone{background:#1d4e89;border-color:#1d4e89}
.tag.req-file{background:#3f7a12;border-color:#3f7a12}
/* 「대표 연락처」 에는 색을 두지 않는다 (132-19-32) — 알약도 띠도 없이
   글자만 나간다(company.js 의 REQ 에 plain). 아직 정해진 약속이 없는
   건이라, 물들이면 목록에서 진짜 약속 셋을 가린다. */

tr.req-row>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.req-row.req-visit-row>td:first-child{box-shadow:inset 3px 0 0 #a32d2d}
tr.req-row.req-phone-row>td:first-child{box-shadow:inset 3px 0 0 #1d4e89}
tr.req-row.req-file-row>td:first-child{box-shadow:inset 3px 0 0 #3f7a12}

/* 표 안의 작은 글씨 단추 (099) — 「담당 없음」 옆의 「지정」 같은 것.
   .btn 은 표 칸에 넣기엔 크다. 줄 높이를 밀지 않게 둔다. */
.linkbtn{
  border:0;background:none;padding:0 2px;margin-left:4px;
  font:inherit;font-size:11px;color:var(--accent);
  cursor:pointer;text-decoration:underline;
}
.linkbtn:hover{opacity:.75}

/* 진행관리의 「내 담당자」 (100) — 보여주기만 하고, 고치러 가는 길만 낸다 */
.qmine{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;margin-left:4px;white-space:nowrap;
}
.qmine strong{color:var(--ink)}
.tag.role-admin{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 회사관리자 — 팀관리자(붉은색)와 층이 다르므로 색으로 구분한다 */
.tag.role-org{background:#1d4e89;color:#fff;border-color:#1d4e89}
.tag.role-manager{background:var(--accent);color:#fff;border-color:var(--accent)}
.tag.role-leader{background:#e8eef7;color:#1d4e89;border-color:#cfdcee}
/*
  실장 — DB 를 생산하는 자리라 계정 목록에서 가장 자주 세는 역할이다.
  옅은 회색이라 이름 옆에서 눈에 걸리지 않아, 몇 명인지 보려면
  한 줄씩 읽어야 했다. 채운 초록으로 바꿔 매니저(붉은색)·팀장(옅은 파랑)과
  한눈에 갈리게 한다.

  상태의 「사용」 딱지도 초록이지만 그쪽은 옅은 바탕이라 섞이지 않는다.
*/
.tag.role-ta{background:#3f7a12;color:#fff;border-color:#3f7a12}

.toast.warn{background:var(--warn-fg)}

@media (max-width:600px){ .row2{grid-template-columns:1fr} }

/* ── crypto 모듈 ─────────────────────────────────────── */
.notice{
  padding:12px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.6;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
}
.notice strong{color:var(--ink)}
.notice ul{margin:.5rem 0 0;padding-left:1.2rem}
.notice li{margin-bottom:.25rem}
.notice.ok{background:var(--ok-bg);border-color:#cfe3b4;color:var(--ok-fg)}
.notice.ok strong{color:var(--ok-fg)}
.notice.warn{background:var(--warn-bg);border-color:#e8d9a8;color:var(--warn-fg)}
.notice.warn strong{color:var(--warn-fg)}
.notice.err{background:#fbe9e9;border-color:#f0cccc;color:var(--accent)}
.notice.err strong{color:var(--accent)}

.codes{list-style:decimal;padding-left:1.6rem;margin:0}
.codes li{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;letter-spacing:.06em;padding:7px 0;
  border-bottom:1px dashed var(--line);
}
.codes li:last-child{border-bottom:0}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}



/* 공유받지 않아 내용이 가려진 행 */
table.grid tr.masked td{background:var(--surface-2);color:var(--ink-3)}
table.grid tr.masked:hover td{background:var(--line-soft)}
table.grid tr.masked .ti-lock{color:var(--ink-3);margin-right:4px}

/* 계정 목록의 팀 구분 행 */
table.grid tr.grouphd td{
  background:var(--ink);color:#fff;font-size:12px;padding:8px 12px;
  position:sticky;top:0;
}
/* 회사 단위 헤더 — 팀(검정)과 층이 달라 색으로 구분한다 */
table.grid tr.grouphd.org td{background:#1d4e89}

table.grid tr.grouphd strong{font-size:13px}
table.grid tr.grouphd .muted{color:rgba(255,255,255,.65);margin-left:8px}
table.grid tr.grouphd:hover td{background:var(--ink)}

/*
  펼치고 접는 팀 줄.

  회사에 팀이 여럿이면 전부 펼쳐진 목록은 수십 줄이 되어,
  찾는 사람이 어느 팀인지 보려면 위로 올라가 검은 줄을 세어야 했다.
*/
table.grid tr.grouphd.fold td{cursor:pointer}
table.grid tr.grouphd.fold:hover td{background:#2b2b2b}
table.grid tr.grouphd.org.fold:hover td{background:#24619f}
.foldmark{margin-right:5px;opacity:.75}

/* 계정 목록 — 조직 계층 표시 */
table.grid tr.child td:first-child{color:var(--ink-2)}
table.grid .treeline{color:var(--line);font-family:monospace}
table.grid tr.grouphd.sub td{
  background:var(--warn-bg);color:var(--warn-fg);position:static;
}
table.grid tr.grouphd.sub .muted{color:var(--warn-fg);opacity:.75}
table.grid tr.grouphd.sub:hover td{background:var(--warn-bg)}

/* 계정 목록에서 본인 행 */
table.grid tr.self td{background:var(--surface-2)}
table.grid tr.self:hover td{background:var(--line-soft)}

/* 클릭 가능한 목록 행 */
table.grid tr.clickable{cursor:pointer}
table.grid tr.clickable:hover td{background:var(--surface-2)}
table.grid tr.clickable:active td{background:var(--line-soft)}

/* ── 기업정보 수정화면 2단 ───────────────────────────── */
.form2col{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
.form2col .fcol{display:flex;flex-direction:column;gap:12px}
.form2col .fg.wide{grid-column:auto}
.fg .req{color:var(--accent);margin-left:2px}
.fg .ti-lock{font-size:11px;color:var(--ink-3);margin-left:3px}

/* 할일 */
.todolist{list-style:none;padding:0;margin:0 0 12px}
.todolist li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border-bottom:1px solid var(--line-soft);font-size:13px;
}
.todolist li:last-child{border-bottom:0}
.todolist li.done .todo-body{text-decoration:line-through;color:var(--ink-3)}
.todolist label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer;margin:0}
.todolist input[type=checkbox]{width:auto;margin:0}
.todo-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.todo-meta .btn{padding:4px 7px}
.todo-add{display:flex;gap:8px;flex-wrap:wrap}
.todo-add #td_content{flex:1;min-width:200px}

/* DB상태 색 구분 */
.tag.st-신규등록{background:var(--surface-2)}
.tag.st-배분대기,.tag.st-배분중{background:var(--warn-bg);color:var(--warn-fg);border-color:#e8d9a8}
.tag.st-컨설팅진행,.tag.st-협업진행{background:#e8eef7;color:#1d4e89;border-color:#cfdcee}
.tag.st-청약고객{background:var(--ok-bg);color:var(--ok-fg);border-color:#cfe3b4}
.tag.st-진행종료{background:var(--ink);color:#fff;border-color:var(--ink)}

@media (max-width:760px){ .form2col{grid-template-columns:1fr} }

/* 필드 배치 — TA 열 구분 */
table.grid th.grp{text-align:center;font-size:11px;border-bottom:1px solid var(--line)}
table.grid th.ta,table.grid td.ta{background:var(--surface-2)}
table.grid th.grp.ta{background:var(--surface-2);color:var(--ink)}
table.grid td.ta{text-align:center}
.fg.required > span{font-weight:500}

/* ── 배분 ────────────────────────────────────────────── */
.distgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.distcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:13px;
}
.distcard.mine{border-color:var(--ok-fg);background:var(--ok-bg)}
.dc-hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dc-hd strong{font-size:14px}
.dc-act{display:flex;gap:6px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.dc-act .btn{padding:5px 10px;font-size:12px}
.remain{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.remain.urgent{color:var(--accent);font-weight:500}
.targetlist{display:flex;gap:12px;flex-wrap:wrap}
.targetlist label{display:flex;gap:6px;align-items:center;font-size:13px;margin:0;
  padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.targetlist label:has(input:checked){background:var(--ok-bg);border-color:var(--ok-fg)}

/* ── 배분 확장 ───────────────────────────────────────── */
.distcard.own{border-left:3px solid var(--ok-fg)}
.distcard.waiting{border-style:dashed;background:var(--warn-bg)}
.dist-card-body{display:flex;flex-direction:column;gap:3px;font-size:12px}
.dc-row{display:flex;gap:6px;align-items:flex-start}
.dc-k{color:var(--ink-3);flex-shrink:0;width:62px}
.dc-v{color:var(--ink);word-break:break-all;white-space:pre-wrap}

/* 배분 탭 배지 — 놓치면 소득 손실이므로 눈에 띄어야 한다 */
.navbtn.has-new{border-color:var(--accent);font-weight:600}
.navbadge{
  display:inline-block;margin-left:5px;min-width:16px;height:16px;line-height:16px;
  padding:0 4px;border-radius:8px;background:var(--accent);color:#fff;
  font-size:10px;font-weight:700;text-align:center;
}
.navbtn.active .navbadge{background:#fff;color:var(--accent)}

.pager{display:flex;gap:4px;align-items:center;margin-top:10px;flex-wrap:wrap}
.pager .btn{padding:4px 10px;font-size:12px}
table.grid tr.notready td{opacity:.5}
table.grid tr.own td:first-child{font-weight:600}

/* 기업 목록 — 배분·공유 표시 */
table.grid tr.distributed td:nth-child(2) strong{color:var(--accent)}
table.grid tr.shared td:nth-child(2) strong{color:#1d4e89}
.btn.shared-on{background:#e8eef7;border-color:#cfdcee;color:#1d4e89;font-weight:600}

/* 공유 선택 */
.memberlist{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.memberlist label{
  display:flex;gap:8px;align-items:center;font-size:13px;margin:0;
  padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;
}
.memberlist label:hover{background:var(--surface-2)}
.memberlist label:has(input:checked){background:var(--ok-bg)}
.memberlist label.locked{opacity:.6;cursor:not-allowed}

/* 「대상 아님」 (098) — 지난 공유가 남아 있는 줄.
   잠근 것(.locked)과 달리 **풀 수는 있어야** 하므로 흐리게만 둔다.
   잠그면 영영 못 푼다 — 감추기와 흐리게의 규칙이 여기에도 그대로 적용된다. */
.memberlist label.legacy{opacity:.75}
.memberlist label.legacy .tag{background:var(--surface-2);color:var(--ink-2)}

/* 일괄 실행 툴바 */
.bulkbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;font-size:13px;
  background:var(--ink);color:#fff;border-radius:var(--r-md);
}
.bulkbar .btn{padding:5px 11px;font-size:12px}

/* 날짜·시각 입력 — 24시간제 10분 단위 */
.dtinput{display:inline-flex;gap:4px;align-items:center}
.dtinput input[type=date]{width:auto;min-width:132px}
.dtinput select{width:auto;min-width:58px;padding-right:22px}
/* ★ 공용 시간 고르개 (132-19-146) — 단추 하나, 누르면 시 15개 · 분 6개 판 */
.tpk{display:inline-flex}
.tpk-btn{padding:6px 10px;font-size:13px;white-space:nowrap}
.tpk-btn b{font-weight:600;font-variant-numeric:tabular-nums}
.tpk-btn.empty b{font-weight:400;color:var(--ink-3)}
.tpk-panel{position:absolute;z-index:1000;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.14);padding:10px;width:320px}
.tpk-row{display:grid;gap:4px;margin-bottom:8px}
.tpk-h{grid-template-columns:repeat(5,1fr)}
.tpk-m{grid-template-columns:repeat(6,1fr)}
.tpk-row button{padding:8px 0;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);cursor:pointer}
.tpk-row button:hover{border-color:var(--ink-3)}
.tpk-row button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tpk-foot{display:flex;gap:6px;align-items:center;font-size:12px}
.tpk-foot .muted{margin-right:auto}
.tpk-foot .btn{padding:4px 8px;font-size:12px}
body.mo .tpk-panel{position:fixed;left:8px!important;right:8px;width:auto;top:auto!important;bottom:12px}
body.mo .tpk-row button{padding:12px 0;font-size:15px}
.dtcolon{color:var(--ink-3);font-weight:600}

/* ── 옵션 설정 — 좌우 분할 ────────────────────────────── */
.optlayout{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start}
.optnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}
.optnav-btn{
  text-align:left;padding:9px 12px;font-size:13px;border:0;border-radius:var(--r-md);
  background:transparent;color:var(--ink-2);cursor:pointer;font-family:inherit;
}
.optnav-btn:hover{background:var(--surface-2);color:var(--ink)}
.optnav-btn.active{background:var(--ink);color:#fff;font-weight:500}

/* 성격이 다른 메뉴 — 「옵션 메뉴 구성」.
   설정을 담는 자리가 아니라 **이 목록 자체를 손보는 자리**다.
   같은 모양으로 두면 다른 설정인 줄 알고 들어왔다가 헤맨다.

   위에 실선을 그어 떼어 놓고, 글자를 눌러 앉히고, 톱니를 붙인다. */
.optnav-btn.meta{
  margin-top:10px;padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--ink-3);font-size:12px;
}
.optnav-btn.meta::before{
  content:'\ea9c';                /* ti-settings */
  font-family:'tabler-icons';font-size:12px;margin-right:6px;opacity:.8;
}
.optnav-btn.meta:hover{color:var(--ink-2)}
.optnav-btn.meta.active{
  background:var(--surface-2);color:var(--ink);
  border-top-color:var(--line);font-weight:600;
}
.optbody{min-width:0}
.opt-sec > h3{font-size:15px;margin:0 0 .3rem}
.opt-sec > p.muted,.opt-sec > div > p.muted{font-size:12px;margin:0 0 1rem;line-height:1.6}

/* 필드 배치 빌더 */
.fieldbuilder{display:grid;grid-template-columns:190px 1fr;gap:16px;align-items:start}
.fb-hd{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.fb-col-hd{font-size:11px;color:var(--ink-3);margin-bottom:4px;text-align:center}
.fb-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-drop{
  min-height:120px;padding:8px;border:1px dashed var(--line);border-radius:var(--r-md);
  background:var(--surface-2);display:flex;flex-direction:column;gap:4px;
}
.fb-drop.over{border-color:var(--ok-fg);background:var(--ok-bg)}
.fb-pool .fb-drop{min-height:660px;max-height:none}
.fb-preview .fb-drop{min-height:660px}
.fb-empty{font-size:11px;color:var(--ink-3);text-align:center;padding:16px 4px}
.fb-chip{
  display:flex;align-items:center;gap:5px;padding:6px 9px;font-size:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:grab;user-select:none;
}
.fb-chip:hover{border-color:var(--ink-3)}
.fb-chip.dragging{opacity:.4}
.fb-chip.locked{cursor:default;background:var(--surface-2);color:var(--ink-2)}
.fb-chip.panel{background:#eef3fa;border-color:#cfdcee;color:#1d4e89}
.fb-chip.req{border-left:2px solid var(--accent)}
.fb-chip .req{color:var(--accent);font-weight:700}
.fb-chip .ti{font-size:12px;color:var(--ink-3)}
.fb-panel{
  margin-top:16px;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface-2);
}
.fb-panel-hd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}

@media (max-width:900px){
  .optlayout{grid-template-columns:1fr}
  .optnav{position:static;flex-direction:row;overflow-x:auto}
  .fieldbuilder{grid-template-columns:1fr}
}

/* 기업정보 수정 — 담당 관계 정보바 */
.infobar{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  padding:10px 12px;background:var(--surface-2);border-radius:var(--r-md);font-size:12px;
}
.infobar:empty{display:none}
.infobar .ic{display:flex;gap:5px;align-items:center}
.infobar .ic + .ic{padding-left:8px;border-left:1px solid var(--line)}
.infobar .ic-k{color:var(--ink-3)}
.infobar .ic strong{color:var(--ink)}
.infobar .ic.dist strong{color:var(--accent)}
/* 진행 단계 — 정보바에서 가장 자주 보는 값이라 한 칸 도드라지게 */
.infobar .ic.prog strong{color:var(--accent)}

/* 할일 목록 — 등록일시는 흐리게, 기한은 진하게 */
.todo-when{
  color:var(--ink-3);font-size:11px;flex-shrink:0;
  font-variant-numeric:tabular-nums;min-width:104px;
}
.todo-due{
  color:var(--ink);font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.todolist li.done .todo-due{color:var(--ink-3);font-weight:400}

/* ── 기업정보 수정 — 파일 미리보기 확장 ────────────────── */
/* 모달 자체는 세로 흐름을 유지한다. 헤더가 본문 옆으로 밀리면 안 된다.
   본문과 미리보기만 .coedit-flex 안에서 나란히 놓인다. */
.modal.coedit{transition:max-width .18s ease}
.modal.coedit.viewing{max-width:1280px}
/* ★ 기업자료 창 (사용자: 「왼쪽 자료명이 다 안 보인다 — 왼쪽은 충분히 확보하고 오른쪽을 늘려야」)
   여태 창에 인라인 max-width:720px 이 있어 미리보기가 열려도 창이 안 넓어졌고, 460px 미리보기가
   목록을 220px 로 짓눌렀다. 인라인을 걷고: 목록은 늘 380px 이상, 미리보기가 나머지를 다 쓴다 */
#coFileBox{max-width:720px}
#coFileBox.viewing{max-width:1280px}
#coFileBox.viewing .coedit-main{flex:0 0 380px;min-width:380px}
#coFileBox.viewing .coedit-view{flex:1 1 auto}
/* 미리보기가 열리면 왼쪽엔 파일명만 — 날짜·올린 사람은 감춘다 (사용자: 「날짜와 이름 제거」) */
#coFileBox.viewing .fl-when,#coFileBox.viewing .fl-who{display:none}
.coedit-flex{display:flex;gap:0;align-items:stretch}
.coedit-main{flex:1;min-width:0}
.coedit-view{
  display:none;flex:0 0 460px;margin-left:18px;padding-left:18px;
  border-left:1px solid var(--line);flex-direction:column;min-width:0;
}
.modal.coedit.viewing .coedit-view{display:flex}
.cv-hd{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px;
}
.cv-hd strong{font-size:13px;word-break:break-all}
.cv-body{flex:1;overflow:auto;min-height:400px}
.cv-body img{max-width:100%;height:auto;display:block}
.cv-body iframe{width:100%;height:100%;min-height:520px;border:0;background:#fff}

/* 첨부 목록 */
.filelist{list-style:none;padding:0;margin:0}
.filelist li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px;
}
.filelist li:last-child{border-bottom:0}
.fl-name{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  background:0;border:0;padding:0;font:inherit;color:var(--ink);
  cursor:pointer;text-align:left;
}
.fl-name:disabled{cursor:default;color:var(--ink-2)}
.fl-name:not(:disabled):hover span{text-decoration:underline}
.fl-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-name .ti{color:var(--ink-3);flex-shrink:0}
.fl-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:11px}
.fl-meta .btn{padding:4px 7px}

@media (max-width:1100px){
  .modal.coedit.viewing{max-width:820px}
  #coFileBox.viewing .coedit-main{flex:1 1 auto;min-width:0}
  .coedit-flex{flex-direction:column}
  .coedit-view{flex:1 1 auto;margin:14px 0 0;padding:14px 0 0;
    border-left:0;border-top:1px solid var(--line)}
}

/* ── 지원정책 ────────────────────────────────────────── */
.polgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.polcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13px;
}
.polcard.off{opacity:.55}
.polcard.mine{border-left:3px solid var(--ok-fg)}
.pc-hd{display:flex;gap:5px;flex-wrap:wrap}
.pc-title{font-size:14px;line-height:1.4}
.pc-body{
  margin:0;color:var(--ink-2);font-size:12px;line-height:1.6;white-space:pre-wrap;
  max-height:92px;overflow:hidden;
}
.pc-ft{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;
  padding-top:8px;border-top:1px solid var(--line-soft);font-size:11px;
}
.pc-ft .btn{padding:4px 8px;margin-left:auto}
.pc-ft .btn + .btn{margin-left:0}

/* 영역 요약 줄 — 할일·첨부. 수정 화면을 짧게 유지하기 위한 표시 */
.panelchip{
  display:flex;align-items:center;gap:8px;padding:9px 11px;font-size:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  cursor:pointer;transition:border-color .12s;
}
.panelchip:hover{border-color:var(--ink-3);background:var(--line-soft)}
.pk-k{color:var(--ink-3);flex-shrink:0;display:flex;align-items:center;gap:4px}
.pk-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-v strong{color:var(--ink)}
.pk-go{color:var(--ink-3);flex-shrink:0}
.fb-chip.panel{background:#eef3fa;border-color:#cfdcee;color:#1d4e89}
/* 헤더의 할일·첨부 버튼 — 내용이 있으면 강조 */
.modal-hd .btn.has-data{border-color:var(--ink-3);font-weight:500}

/* 기능 권한 — 사용자별 탭·기능 on/off */
.ftgroup{margin-bottom:14px}
.ftgroup-hd{
  font-size:12px;font-weight:600;color:var(--ink-2);
  padding-bottom:5px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.ftitem{
  display:flex;align-items:center;gap:8px;font-size:13px;margin:0;
  padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;
}
.ftitem:hover{background:var(--surface-2)}
.ftitem.core{cursor:default;color:var(--ink-2)}
.ftitem.core:hover{background:transparent}
.ftitem .ti-lock{font-size:12px;color:var(--ink-3)}
.ftitem .muted{margin-left:auto;font-size:11px}

/* 기능 권한 격자 — 팀원(행) × 기능(열)
   기능은 5~10개 선에서 멈추지만 팀원은 계속 늘어난다.
   팀원을 세로로 두면 스크롤이 자연스럽고 이름을 찾기도 쉽다. */
table.permgrid{font-size:12px}
table.permgrid th.pg-name,table.permgrid td.pg-name{
  text-align:left;min-width:150px;position:sticky;left:0;
  background:var(--surface);z-index:1;white-space:nowrap;
}
table.permgrid td.pg-name{cursor:pointer}
table.permgrid td.pg-name:hover{background:var(--surface-2)}
table.permgrid td.pg-name strong{margin-right:5px}
table.permgrid th.pg-mod{
  text-align:center;font-size:10px;font-weight:600;color:var(--ink-3);
  padding:4px 6px;border-bottom:1px solid var(--line);
}
table.permgrid th.pg-col{
  text-align:center;min-width:62px;max-width:82px;cursor:pointer;
  padding:7px 5px;line-height:1.3;vertical-align:bottom;font-size:11px;
}
table.permgrid th.pg-col:hover{background:var(--surface-2)}
table.permgrid th.pg-col span{display:block;word-break:keep-all}
table.permgrid th.pg-col .muted{font-size:9px;font-weight:400}
table.permgrid td.pg-cell{text-align:center;padding:6px 5px}
table.permgrid td.pg-cell.na{color:var(--line)}
table.permgrid .sep{border-left:1px solid var(--line)}
table.permgrid tr.pg-modrow th{background:var(--surface-2)}

/* 선택 항목 — 단계별 구분 (전체 공용 / 팀 공용 / 내 항목) */
.optscope{margin-bottom:12px}
.optscope-hd{
  font-size:11px;font-weight:600;color:var(--ink-2);
  padding:5px 0 4px;border-bottom:1px solid var(--line);margin-bottom:2px;
}
.optscope-hd .muted{font-weight:400;margin-left:6px}
.optscope table.grid{font-size:12px}
.optscope tr.off td{opacity:.55}

/* [선택] 버튼이 붙는 입력란 */
.pickwrap{display:flex;gap:6px}
.pickwrap input{flex:1;min-width:0}
.pickwrap .btn{flex-shrink:0;padding:6px 11px;font-size:12px}

/* 목록 선택 창 */
.picklist{display:flex;flex-direction:column;gap:3px;max-height:380px;overflow:auto}
.pickitem{
  text-align:left;padding:9px 12px;font-size:13px;font-family:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
.pickitem:hover{background:var(--surface-2);border-color:var(--ink-3)}
.pickitem.on{background:var(--ok-bg);border-color:var(--ok-fg);font-weight:500}

/* 데이터 보안 지침 */
.guidebox{
  margin-top:1.8rem;padding:16px;background:var(--surface-2);
  border-radius:var(--r-md);border-left:3px solid var(--ink-3);
}
.guidebox h4{font-size:13px;margin:0 0 12px}
.guideitem{margin-bottom:12px}
.guideitem:last-child{margin-bottom:0}
.guideitem strong{font-size:12px;display:block;margin-bottom:3px}
.guideitem p{margin:0;font-size:12px;color:var(--ink-2);line-height:1.65}

/* 컨설팅 진행 — 진행 기능 버튼 */
.runacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.runact{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 14px;font-family:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.runact:hover{border-color:var(--ink-3);background:var(--surface-2)}
.runact .ti{font-size:17px;color:var(--ink-2);margin-bottom:2px}
.runact span{font-size:13px;font-weight:500;color:var(--ink)}
.runact em{font-size:11px;color:var(--ink-3);font-style:normal}

/* 기업정보 보기 */
.viewbox{margin-top:4px;border:1px solid var(--line);border-radius:var(--r-md)}
.viewbox summary{
  padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;
  color:var(--ink-2);
}
.viewbox[open] summary{border-bottom:1px solid var(--line-soft)}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:12px 14px}
.vcol{display:flex;flex-direction:column}
.vrow{display:flex;gap:10px;padding:5px 0;font-size:12px;align-items:baseline}
.vk{color:var(--ink-3);flex-shrink:0;width:88px}
.vv{color:var(--ink);word-break:break-all;white-space:pre-wrap}

/* 약속일시 — 이 칸만 「누군가에게 한 약속」 이다 (132-19-53).
   나머지는 적어 둔 사실이라 같은 색으로 두면 지나친다. */
.vv.vv-due{color:var(--accent);font-weight:600}

/* 공유팀장 행 */
.infobar.shared{background:#eef3fa;margin-top:-8px}
.infobar.shared .ic-k{color:#1d4e89}
.infobar.shared strong{color:#1d4e89}

@media (max-width:760px){ .vgrid{grid-template-columns:1fr} }

/* 좌측 메뉴 — 그룹 머리와 건수
   배분받기·배분하기는 성격이 반대인 흐름이라 뚜렷이 갈라 보여야 한다.
   흐릿한 소제목으로는 지금 어느 쪽을 보고 있는지 놓치기 쉽다. */
.optnav-grp{
  font-size:13px;font-weight:700;color:var(--ink);
  padding:9px 12px;margin:14px 0 5px;
  background:var(--surface-2);border-radius:var(--r-sm);
  border-left:3px solid var(--ink-2);letter-spacing:-0.01em;
}
.optnav-grp:first-child{margin-top:0}

/* 그룹 사이 구분선 — 두 흐름의 경계를 분명히 한다 */
.optnav-grp + .optnav-btn{margin-top:0}
.optnav-btn + .optnav-grp{
  margin-top:18px;padding-top:9px;
  border-top:0;position:relative;
}
.optnav-btn + .optnav-grp::before{
  content:'';position:absolute;top:-9px;left:0;right:0;
  border-top:1px solid var(--line);
}
/* 좌측 메뉴의 안 읽은 수 — 「게시판 (1)」
   동그란 배지는 좁은 메뉴에서 눈에 안 띈다. */
/* 좌측 메뉴의 안 읽은 수 — 「게시판 (1)」
   메뉴가 선택되면 검은 바탕이라 붉은 글씨가 묻힌다. */
.navnum{
  display:inline;margin-left:3px;
  color:var(--accent);font-size:12px;font-weight:700;
}
.navbtn.active .navnum{color:#fff}
.optnav-btn.active .navnum{color:#fff}

/* 배분 흐름별 색 — 받기와 하기를 한눈에 가른다 */
.optnav-grp{display:flex;align-items:center;gap:6px}
.optnav-grp .ti{font-size:15px}
.optnav-grp.recv{
  background:#e8eef7;color:#1d4e89;border-left-color:#1d4e89;
}
.optnav-grp.give{
  background:var(--ok-bg);color:var(--ok-fg);border-left-color:var(--ok-fg);
}

/* 배분 카드 — 상세내용 버튼과 신청자 표시 */
.dc-detail{padding:3px 8px;font-size:11px}
.dc-apply{
  display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-3);
}
.dc-apply.on{color:var(--accent);font-weight:600}
.dc-apply.on .ti{color:var(--accent)}

/* 신청자 버튼 — 신청이 들어오면 눈에 띄게 */
.dc-act .btn.has-apply{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.dc-act .btn.has-apply .ti{color:#fff}
.dc-act .btn:disabled{opacity:.45;cursor:default}

/* 제한시간 방식 선택 */
.moderadio{display:flex;flex-direction:column;gap:6px}
.moderadio label{
  display:flex;gap:9px;align-items:flex-start;margin:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:13px;
}
.moderadio label:hover{background:var(--surface-2)}
.moderadio label:has(input:checked){background:var(--ok-bg);border-color:var(--ok-fg)}
.moderadio input{margin-top:2px}
.moderadio span{display:flex;flex-direction:column;gap:2px}
.moderadio em{font-size:11px;color:var(--ink-3);font-style:normal;line-height:1.5}

/* 체크박스 목록 (내 자동배분 등) */
.modecheck{
  display:flex;gap:9px;align-items:center;margin:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:13px;
}
.modecheck:hover{background:var(--surface-2)}
.modecheck:has(input:checked){background:var(--ok-bg);border-color:var(--ok-fg)}

/* 진행 기능 버튼 — 권한·잠금으로 막힌 상태 */
.runact.off{opacity:.5;cursor:default;background:var(--surface-2)}
.runact.off:hover{border-color:var(--line);background:var(--surface-2)}
.runact.off em{color:var(--accent)}

/* 첨부 미리보기 전체화면 */
.modal.coedit.full{
  max-width:none;width:calc(100vw - 32px);height:calc(100vh - 32px);
}
.modal.coedit.full .coedit-flex{height:100%}
.modal.coedit.full .coedit-main{display:none}
.modal.coedit.full .coedit-view{
  flex:1;margin:0;padding:0;border-left:0;
}
.modal.coedit.full .cv-body{min-height:0;height:100%}

/* 목록 색 구분 (132-19-11) — 받은 기업만 물들인다. 내 소유는 그대로 검다.
   배분받은 것 = 붉게 (소득 분배가 얽혀 있어 눈에 띄어야 한다)
   공유받은 것 = 파랗게 */
table.grid tr.mark-dist  td{color:var(--accent)}
table.grid tr.mark-dist  td .muted{color:#c07a7a}
table.grid tr.mark-share td{color:#1d4e89}
table.grid tr.mark-share td .muted{color:#6b8cb5}
.tag.sh{background:#e8eef7;color:#1d4e89;border-color:#cfdcee}

/* 업데이트 알림 */
.btn.upd-on{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.btn.upd-on .ti{color:#fff}
.updlist{list-style:none;padding:0;margin:0}
.updlist li{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12px;
}
.updlist li:last-child{border-bottom:0}
.upd-note{flex:1;min-width:120px}

/* 공유 상태 보기 */
.stpeople{display:flex;flex-direction:column;gap:4px}
.stperson{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;
  padding:8px 10px;background:var(--surface-2);border-radius:var(--r-sm);
}

/* 여신신청서 */
.lnsec{
  font-size:12px;font-weight:600;color:var(--ink-2);margin:1.4rem 0 .6rem;
  padding-bottom:5px;border-bottom:1px solid var(--line);
}
.lnsec:first-child{margin-top:0}
table.lntable{font-size:12px}
table.lntable input{padding:4px 7px;font-size:12px}
table.lntable td{padding:3px 4px}
.lnsales{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lnsales > div{display:flex;flex-direction:column;gap:4px}
.lnsales .lnyear{font-weight:600;text-align:center}
@media (max-width:640px){ .lnsales{grid-template-columns:1fr} }

/* AI 자료 선택 */
.aisel{
  padding:10px 12px;background:var(--surface-2);border-radius:var(--r-md);
  display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:42px;
}
.aisel-hd{
  width:100%;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:2px;
}
.filelist label.fl-name{display:flex;align-items:center;gap:7px}

/* AI 추출 결과 — 저장 전이라는 점이 분명해야 한다 */
.airesult{
  border:1px solid var(--ok-fg);border-radius:var(--r-md);
  background:var(--ok-bg);overflow:hidden;
}
.airesult-hd{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;font-size:13px;border-bottom:1px solid rgba(0,0,0,.06);
}
.airesult-hd .ti-sparkles{color:var(--ok-fg)}
.airesult-hd .muted{font-size:11px;flex:1}
.airesult-hd .btn{padding:3px 7px}
.airesult-body{padding:10px 12px;background:var(--surface)}
.airesult-body .vrow{padding:4px 0;font-size:12px}
.airesult-body .vk{width:76px}
.airesult-warn{
  margin:0;padding:9px 12px;font-size:11px;
  background:var(--warn-bg,#fff8e6);color:var(--warn-fg,#8a6100);
  display:flex;align-items:center;gap:6px;
}

/* 실행 중 표시 */
.btn .ti-loader{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 여신신청서 — 단위 안내 */
.lnunit{
  font-size:11px;font-weight:400;color:var(--ink-3);margin-left:8px;
}

/* 미저장 변경 표시 — 엑셀이 저장된 값으로 만들어지므로 눈에 띄어야 한다 */
#ln_save.dirty{
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,60,60,0)}
  50%{box-shadow:0 0 0 3px rgba(220,60,60,.25)}
}
.dlwarn{color:var(--accent);font-size:14px;line-height:1;margin-left:2px}

/* 문자 양식 */
.tpllist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.tplitem{
  padding:10px 12px;background:var(--surface-2);
  border-radius:var(--r-md);border:1px solid var(--line);
}
.tpl-hd{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:13px}
.tpl-hd strong{flex:1}
.tpl-hd .btn{padding:3px 7px}
.tpl-body{
  margin:0;font-size:12px;color:var(--ink-2);line-height:1.6;white-space:pre-wrap;
}
.tplform{
  display:flex;flex-direction:column;gap:8px;max-width:560px;
  padding:12px;border:1px dashed var(--line);border-radius:var(--r-md);
}

/**
 * 공용설비 예약 (132-19-73).
 *
 * 방 하나가 한 상자, 그 안에 그날 예약이 줄줄이 놓인다.
 * ★ 내 예약은 왼쪽에 색 띠를 둔다 — 회사 사람 것이 모두 보이는 목록에서
 *   내 것을 찾으려고 이름을 하나씩 읽게 하지 않는다.
 */
.rvroom{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;margin-bottom:10px;background:var(--surface);
}
.rvroom-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rvslot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;padding:5px 8px;margin-bottom:4px;
  border-radius:var(--r-sm);background:var(--surface-2);
  border-left:3px solid transparent;
}
.rvslot:last-child{margin-bottom:0}
.rvslot.mine{border-left-color:var(--accent);background:var(--surface)}
.rvslot strong{font-variant-numeric:tabular-nums}

/**
 * 시간 격자 (2단계, 132-19-76).
 *
 * 가로축이 시간이다. 일 보기는 줄이 방, 주 보기는 줄이 날짜 —
 * 같은 그림을 쓰므로 보기를 바꿔도 눈이 옮겨 다니기 쉽다.
 *
 * ★ 좁은 화면에서는 옆으로 민다. 칸을 줄여 욱여넣으면 30분이 5px 이 되어
 *   무엇이 언제인지 못 읽는다 — 페이지 전체가 옆으로 밀리는 것보다
 *   이 표만 미는 편이 낫다.
 */
.rvgrid-wrap{overflow-x:auto;margin-bottom:12px}
.rvgrid{border-collapse:collapse;font-size:12px;white-space:nowrap}
.rvgrid th,.rvgrid td{border:1px solid var(--line);height:34px}
.rvgrid thead th{
  font-weight:500;color:var(--ink-2);font-size:11px;padding:2px 0;
  min-width:34px;font-variant-numeric:tabular-nums;
}
/* 30분 칸은 눈금만 — 글자를 다 넣으면 머리글이 배로 빽빽해진다 */
.rvgrid thead th.half{border-left-style:dotted}
.rvgrid .rowhd{
  position:sticky;left:0;z-index:1;background:var(--surface);
  text-align:left;padding:4px 10px;min-width:132px;font-weight:400;
}
.rvgrid .rowhd .muted{margin-left:5px;font-size:11px}
.rvgrid td.free{background:var(--surface);cursor:pointer}
.rvgrid td.free:hover{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--accent)}
/**
 * ★ 찬 칸은 **한눈에** 찬 것으로 보여야 한다.
 *   처음엔 `--surface-2` 로 칠했더니 빈 칸과 거의 같은 색이라,
 *   격자를 훑어도 어디가 비었는지 읽히지 않았다. 격자를 만든 뜻이 없다.
 */
.rvgrid td.busy{
  background:var(--ink-3);color:#fff;
  padding:0 6px;overflow:hidden;text-overflow:ellipsis;max-width:0;
  font-size:11px;
}
/* 내 예약 — 눌러서 무를 수 있다 */
.rvgrid td.busy.mine{background:var(--accent);color:#fff;cursor:pointer}
.rvgrid td.busy.mine:hover{opacity:.85}

/* 사용 통계 (3단계) */
.rvstat{border-collapse:collapse;font-size:13px;width:100%;min-width:420px}
.rvstat th,.rvstat td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left}
.rvstat thead th{font-size:11px;color:var(--ink-2);font-weight:500}
.rvstat .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rvstat .muted{color:var(--ink-2)}
.rvstat td.bar{width:34%;padding-left:12px}
.rvstat td.bar span{display:block;height:8px;border-radius:4px;background:var(--accent)}

/**
 * 양식 안의 치환자 묶음 (132-19-71).
 *
 * 내용 칸 바로 밑에 붙는다. 바탕을 한 겹 깔아 **이 칸에 넣는 것**임을
 * 보이게 한다 — 안 그러면 아래 저장 단추와 한 덩어리로 읽힌다.
 */
.tplvars{
  padding:10px;border-radius:var(--r-sm);background:var(--surface-2);
}

/* 게시판 */
.bdtabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.bdtab{
  padding:8px 16px;font-size:13px;font-family:inherit;cursor:pointer;
  background:0;border:0;border-bottom:2px solid transparent;color:var(--ink-2);
}
.bdtab:hover{color:var(--ink)}
.bdtab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
/**
 * 안 읽은 글 (132-19-65).
 *
 *   「게시판 읽지 않은 글은 bold로」
 *
 * ★ **제목**을 굵게 한다. 여태 둘째 칸(구분)만 굵었다 — 목록을 훑을 때
 *   눈이 가는 곳은 제목이라, 구분만 굵어서는 읽은 것과 구별되지 않았다.
 *
 * 작성자·날짜는 그대로 흐리게 둔다. 다 굵히면 굵은 것이 기본이 되어
 * 아무것도 튀지 않는다.
 */
table#bdGrid tr.unread td:nth-child(2),
table#bdGrid tr.unread td:nth-child(3){font-weight:700;color:var(--ink)}
.bdbody{
  font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word;
  min-height:80px;padding:4px 0;
}
.bdreaders{
  margin-top:1rem;padding-top:12px;border-top:1px solid var(--line);
}
.bdreaders summary{font-size:12px;color:var(--ink-2);cursor:pointer}
.bdreaders .rlist{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;font-size:11px;
}

/* 게시판 — 답장 */
.bdreplies{margin-top:1rem;padding-top:12px;border-top:1px solid var(--line)}
.bdreplies h4{font-size:12px;margin:0 0 8px;color:var(--ink-2)}
.bdreply{
  display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  padding:9px 11px;margin-bottom:5px;font-family:inherit;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.bdreply:hover{border-color:var(--ink-3)}
.bdreply strong{font-size:13px}
.bdreply .muted{font-size:11px}

/* 게시판 탭 — 종류를 색으로 가른다 */
.bdtab{display:inline-flex;align-items:center;gap:5px}
.bdtab .ti{font-size:15px}
.bdtab.k-notice.active{border-bottom-color:var(--accent);color:var(--accent)}
.bdtab.k-message.active{border-bottom-color:#1d4e89;color:#1d4e89}
.bdtab.k-file.active{border-bottom-color:var(--ok-fg);color:var(--ok-fg)}
/* 탭의 안 읽은 수 — 「공지 (2)」
   동그란 배경을 쓰던 때의 규칙이다.
   지금은 글자만 쓰므로 배경을 지우고 색으로 가른다. */
.bdtab .navnum{background:0;color:var(--accent)}
.bdtab.k-message .navnum{background:0;color:#1d4e89}

/* 목록 — 종류별 좌측 띠 */
table#bdGrid tr.k-notice td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table#bdGrid tr.k-message td:first-child{box-shadow:inset 3px 0 0 #1d4e89}
table#bdGrid tr.k-file td:first-child{box-shadow:inset 3px 0 0 var(--ok-fg)}

/* 올릴 파일 목록 — 저장 전 상태 */
.pendlist{
  display:flex;flex-direction:column;gap:4px;margin-top:6px;
}
.penditem{
  display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;
  background:var(--warn-bg,#fff8e6);border:1px dashed var(--line);border-radius:var(--r-sm);
}
.penditem span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.penditem .btn{padding:2px 6px}

/* 수신 그룹 선택 */
/* 받는 사람 그룹 — 한 행에 셋.
   세로로 쌓으면 화면을 길게 차지해 아래 내용이 밀린다. */
.grouppick{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.grouppick > label{
  padding:9px 11px;font-size:12px;
}
.grouppick > label strong{font-size:12px}
.grouppick > label em{font-size:10px;display:block;margin-top:1px}

@media (max-width:720px){
  .grouppick{grid-template-columns:repeat(2,1fr)}
}
.groupitem{
  display:flex;gap:9px;align-items:flex-start;margin:0;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:13px;
}
.groupitem:hover{background:var(--surface-2)}
.groupitem:has(input:checked){background:var(--ok-bg);border-color:var(--ok-fg)}
.groupitem input{margin-top:2px}
.groupitem span{display:flex;flex-direction:column;gap:1px}
.groupitem em{font-size:11px;color:var(--ink-3);font-style:normal}

/* 기능 등급 — 보기 전환 */
.tiermodes{display:flex;gap:6px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.tiermodes .btn.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* 탭별 보기 */
.tabgroup{
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;
}
.tabgroup-hd{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:var(--surface-2);border-bottom:1px solid var(--line);font-size:13px;
}
.tabgroup-hd strong{flex:1}
.tabgroup-hd select{width:auto;font-size:12px;padding:4px 6px}
.tabrow{
  display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12px;
  border-bottom:1px solid var(--line-soft);
}
.tabrow:last-child{border-bottom:0}
.tabrow .fname{flex:1}
.tabrow .fkey{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.tabrow.dep{padding-left:32px;position:relative}
.tabrow.dep::before{
  content:'';position:absolute;left:18px;top:0;bottom:50%;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);width:8px;
}
.tabrow select{width:auto;font-size:12px;padding:3px 6px}

/* 등급별 보기 — 가로축 */
/* 등급별 보기 — 왼쪽에 기능, 오른쪽에 등급 칸.
   예전에는 등급이 세로 칸이고 기능을 끌어 옮겼다.
   기능이 쉰 개가 넘어가면서 끄는 것보다 줄을 찾아 체크하는 편이 빨라졌다. */
table.tiermatrix th.tm-cell,
table.tiermatrix td.tm-cell{text-align:center;width:92px}
table.tiermatrix td.tm-cell input{cursor:pointer}

/* 1차 줄 — 기본메뉴. 여기를 누르면 그 탭 전체가 옮겨진다 */
table.tiermatrix tr.tm-mod td{
  background:var(--surface-2);font-weight:600;font-size:12px;
  border-top:1px solid var(--line);
}
table.tiermatrix tr.tm-mod td .ti{font-size:13px;margin-right:2px}

/* 2차 줄 — 그 탭의 기능. 왼쪽에 단을 내어 매달린 것을 보인다 */
table.tiermatrix td.tm-name{padding-left:0}
table.tiermatrix td.tm-name::before{
  content:'';display:inline-block;width:14px;margin:0 8px 0 10px;
  border-bottom:1px solid var(--line);vertical-align:middle;
}
table.tiermatrix tr.tm-item:hover td{background:var(--surface-2)}
table.tiermatrix .fkey{
  color:var(--ink-3);font-size:10px;margin-left:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* 정한 자리와 따라온 자리를 가른다.
   등급은 누적이라 오른쪽 칸이 함께 켜지는데,
   똑같이 그리면 「어디서 정한 것인지」 를 알 수 없다. */
table.tiermatrix td.tm-cell.own{background:var(--ok-bg)}
table.tiermatrix td.tm-cell.inherit input{opacity:.4}

/* 지불선 */
.floorbox{display:flex;gap:10px;flex-wrap:wrap;margin:1rem 0}
.flooritem{
  flex:1;min-width:230px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-md);
}
.flooritem-hd{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;
}
.flooritem-hd strong{flex:1}
.flooritem select{width:100%;font-size:12px}
.flooritem .fnote{font-size:11px;color:var(--ink-3);margin-top:6px;display:block}
.flooritem.pending{border-color:#993C1D;background:var(--warn-bg,#fff8e6)}

/* 기능 권한 격자 — 기능이 행, 팀원이 열 */
table.permgrid th.pm-user{
  writing-mode:initial;text-align:center;font-size:11px;line-height:1.3;
  min-width:64px;padding:6px 4px;
}
table.permgrid th.pm-user small{display:block;color:var(--ink-3);font-weight:400}
table.permgrid td.pm-cell{text-align:center;padding:4px}
table.permgrid td.pm-off{background:var(--surface-2)}
table.permgrid tr.pm-mod td{
  background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink-2);
}
table.permgrid .pm-fname{font-size:12px;min-width:150px}
table.permgrid .pm-tier{font-size:10px;color:var(--ink-3);display:block}
.pm-grouprow{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.pm-grouprow .btn{padding:3px 8px;font-size:11px}

/* 팀 청구서 — 지불선별 예상 */
table.tbprev td.tb-cur{background:var(--ok-bg);font-weight:600}
table.tbprev td{text-align:center}
table.tbprev td:first-child{text-align:left}
/* 금액 칸은 오른쪽 정렬 — 자릿수를 눈으로 맞춘다 */
table.tbprev td.num,table.tbprev th.num{text-align:right}
table.tbprev tfoot td:first-child{text-align:left}

/* 입금 확인 카드 */
.paycard{
  border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:8px;overflow:hidden;
}
.paycard-hd{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:9px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:13px;
}
.paycard-body{
  display:flex;gap:14px;flex-wrap:wrap;padding:9px 12px;font-size:12px;
}
.paycard-act{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:9px 12px;border-top:1px solid var(--line-soft);
}
.paycard-act input{flex:1;min-width:120px;font-size:12px}

/* 그룹 일괄 버튼 */
.pm-grouprow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pm-groupset{
  display:flex;gap:5px;align-items:center;font-size:11px;
  padding:5px 9px;background:var(--surface-2);border-radius:var(--r-sm);
}
.pm-groupset .btn{padding:3px 8px;font-size:11px}

/* 지불선 위 기능 — 무엇을 열 수 있는지 보여준다 */
table.permgrid tr.pm-upper td{background:var(--surface-2);opacity:.75}
table.permgrid tr.pm-upper .tag{font-size:10px;margin-left:4px}
table.permgrid td.pm-paid{text-align:center;color:var(--ok-fg)}
table.permgrid td.pm-paid .ti{font-size:14px}

/* 등급을 팔까 말까 — 「사용 / 준비 중」 (086) */
.sellrow{display:flex;gap:8px;flex-wrap:wrap;margin:.6rem 0 1rem}
.sellitem{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:12px;cursor:pointer;background:var(--surface);
}
.sellitem .nm{font-weight:600}
.sellitem .st{color:var(--ok-fg);font-size:11px}
.sellitem.off{background:var(--surface-2);color:var(--ink-3)}
.sellitem.off .st{color:var(--ink-3)}

/* 준비 중인 등급 칸 — 기능 등급 표에서 놓을 수 없다 */
table.tiermatrix th.tm-cell.off,
table.tiermatrix td.tm-cell.off{background:var(--surface-2);color:var(--ink-3)}
table.tiermatrix th.tm-cell.off .tag{font-size:9px;padding:0 4px;font-weight:400}
table.tiermatrix td.tm-cell.off input{opacity:.3;cursor:not-allowed}

/* 메뉴 사용 — 줄을 끌어 탭 차례를 바꾼다 */
tr.mu-row td.mu-grip{cursor:grab}   /* 손 모양은 손잡이에만 — 줄 전체가 grab 이면 체크박스가 안 눌리는 줄 안다 */
tr.mu-row.dragging{opacity:.4}
td.mu-grip{color:var(--ink-3);text-align:center;padding-right:0}
tr.mu-row:hover td.mu-grip{color:var(--ink-2)}

/* 기능 설명 풍선 — 마우스를 대면 「어디에 있고 무엇을 하는지」.
   body 에 붙인다. 칸 안에 두면 스크롤 영역에 잘린다.
   title 속성으로는 줄을 나눌 수 없고 뜨기까지 한참 걸린다. */
.feat-tip{
  position:fixed;z-index:9999;display:none;
  max-width:290px;padding:10px 12px;
  background:var(--ink);color:#fff;
  border-radius:var(--r-md);box-shadow:var(--shadow);
  font-size:12px;line-height:1.6;pointer-events:none;
}
.feat-tip strong{display:block;font-size:12.5px;margin-bottom:5px}
.feat-tip p{margin:6px 0 0;color:#e6e4de}
.feat-tip .ft-where{
  display:flex;gap:5px;align-items:flex-start;
  font-size:11.5px;color:#f0cfcf;
}
.feat-tip .ft-where .ti{font-size:13px;flex-shrink:0;margin-top:1px}
.feat-tip .ft-req{
  margin-top:7px;font-size:11px;color:#d9d7d0;
  display:flex;gap:5px;align-items:center;
}
.feat-tip .ft-key{
  margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);
  font-size:10.5px;color:#a8a5a0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* 관계자 열 — 아이콘으로 배분·공유를 가른다.
   색만으로는 직관적이지 않고 색맹인 사람도 있다. */
.ptcell{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.ptcell .ti{font-size:14px;flex-shrink:0}
.pt-dist{color:var(--accent)}
.pt-share{color:#1d4e89}

/* 좌석 현황 */
.seatbox{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;margin:1rem 0;
  background:var(--ok-bg);border:1px solid var(--ok-fg);border-radius:var(--r-md);
}
.seatbox.full{background:var(--warn-bg,#fff8e6);border-color:#993C1D}
.seatnum{font-size:26px;line-height:1;font-weight:600}
.seatnum .muted{font-size:16px;font-weight:400}
.seatinfo{display:flex;flex-direction:column;gap:2px;font-size:13px}
.seatinfo .muted{font-size:11px}

/* 좌석 잔량 태그 */
.seattag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;font-size:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.seattag.full{background:var(--warn-bg,#fff8e6);border-color:#993C1D}
.seattag .btn{padding:2px 8px;font-size:11px}

/* 계정 목록 — 팀 헤더 */
tr.grouphd .thsep{color:var(--ink-3);margin:0 5px}

/* 소속 인원 — TA 를 몇 명 고용했는지 */
.subtag{
  display:inline-flex;align-items:center;gap:2px;
  padding:1px 6px;margin-left:5px;font-size:11px;
  background:var(--ok-bg);color:var(--ok-fg);
  border:1px solid var(--ok-fg);border-radius:10px;
}
.subtag .ti{font-size:12px}

/* 계정 목록 — 직속 실장 구역 */
tr.subhd td{
  padding:5px 12px;font-size:11px;color:var(--ink-3);
  background:var(--surface-2);border-bottom:1px solid var(--line-soft);
}
tr.subhd .ti{font-size:12px;vertical-align:-1px}

/* 옵션 메뉴 구성 */
.menulist{display:flex;flex-direction:column;gap:4px}
.menurow{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;font-size:13px;cursor:grab;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.menurow:active{cursor:grabbing}
.menurow.dragging{opacity:.4}
.menurow.off{opacity:.5;background:var(--surface-2)}
.menurow.sep{background:var(--surface-2);border-style:dashed}
/* 다른 역할의 화면 — 순서만 여기서 정한다 */
.menurow.away{background:var(--surface-2)}
.menurow.away input:not([type=checkbox]){color:var(--ink-2)}
.menurow .mnaway{
  flex-shrink:0;padding:2px 8px;font-size:11px;white-space:nowrap;
  color:var(--ink-3);background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
}
/* 안 보일 구분선 — 왜 안 보이는지 그 줄에 적는다 */
.menurow.sep.warn{border-color:var(--warn-fg,#B45309)}
.menurow .mnwhy{
  flex-shrink:0;font-size:11px;color:var(--warn-fg,#B45309);white-space:nowrap;
}
.menurow .grip{color:var(--ink-3);flex-shrink:0}
.menurow input[type=text],.menurow input:not([type]){flex:1;font-size:12px;padding:4px 8px}
.menurow .mnvis{margin:0;flex-shrink:0}
.menurow .mnvis input{width:auto}
.menurow .mnkey{
  font-size:10px;color:var(--ink-3);font-family:var(--mono);flex-shrink:0;
}
.menurow .btn{padding:2px 6px;flex-shrink:0}

/* 좌측 메뉴 구분선 */
.optnav-sep{
  padding:9px 12px 3px;font-size:9px;font-weight:600;
  color:var(--ink-4,#9AA0A6);letter-spacing:.06em;
}
.optnav-line{height:1px;background:var(--line);margin:6px 10px}

/* 할일 및 경과 — 자주 쓰는 화면 */
.todo-form{
  display:flex;flex-direction:column;gap:10px;
  padding:12px 14px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.todo-form textarea{
  width:100%;resize:vertical;min-height:64px;font-size:13px;line-height:1.6;
}
.todo-form-row{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;align-items:end;
}
.todo-form-row .fg{margin:0}
.todo-form-row input[type=file]{font-size:11px;padding:5px}
@media (max-width:720px){ .todo-form-row{grid-template-columns:1fr} }

/* 할일 목록 — 첨부 링크 */
.td-files{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.td-file{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;font-size:11px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
}
.td-file:hover{border-color:var(--ink-3)}

/* 진행사항 변경 표시 */
.td-prog{
  display:inline-flex;align-items:center;gap:4px;
  padding:1px 7px;margin-left:6px;font-size:11px;
  background:var(--ok-bg);color:var(--ok-fg);border-radius:10px;
}

/* 할일 — 현재 진행사항 표시 */
.td-now{color:var(--accent);font-weight:600}

/* 첨부 — 파일 이름이 보여야 한다. 아이콘만으로는 무엇인지 모른다. */
.todolist .td-files{margin:4px 0 0 28px}
.td-file{
  font-family:inherit;max-width:220px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.td-file.locked{opacity:.5;cursor:not-allowed}

/* 기능 권한 — 사람별 카드.
   한 사람의 권한이 한 곳에 모여 개인별 조정이 쉽다. */
.permcards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;
}
.permcard{
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;
}
.permcard-hd{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:13px;
}
.permcard-hd .pc-count{
  margin-left:auto;font-size:11px;color:var(--ink-3);
}
.permcard-body{padding:8px 12px;flex:1}
.permcard-ft{
  padding:8px 12px;border-top:1px solid var(--line-soft);
}
.permcard-ft .btn{padding:3px 9px;font-size:11px;width:100%}

.pc-group{margin-bottom:9px}
.pc-group:last-child{margin-bottom:0}
.pc-group-hd{
  font-size:10px;font-weight:600;color:var(--ink-3);
  padding:0 0 3px;letter-spacing:.03em;
}
.pc-item{
  display:flex;align-items:center;gap:7px;margin:0 0 2px;
  padding:4px 7px;font-size:12px;cursor:pointer;border-radius:var(--r-sm);
}
.pc-item:hover{background:var(--surface-2)}
.pc-item input{width:auto;margin:0}
.pc-item.off{color:var(--ink-3)}
.pc-item.paid{
  cursor:default;color:var(--ok-fg);background:var(--ok-bg);
}
.pc-item.paid:hover{background:var(--ok-bg)}
.pc-item.paid .ti{font-size:13px}

/* 이 그룹의 지불선 위 (098) — 흐리게 남긴다.
   감추면 「왜 이 기능이 없나」 가 되고, 지불선을 올리면 열린다는 것도 모른다.
   `.paid` 와 달리 바탕색을 주지 않는다 — 저건 「이미 열려 있다」는 뜻이다. */
.pc-item.locked{
  cursor:not-allowed;color:var(--ink-3);opacity:.65;
}
.pc-item.locked:hover{background:transparent}
.pc-item.locked .ti{font-size:12px;margin-left:2px}

/* 보기 전환 */
.permmodes{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.permmodes .btn.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* 권한 그룹 — 소속 인원 */
.pc-members{
  display:flex;flex-wrap:wrap;gap:5px;
  padding:8px 12px;border-bottom:1px solid var(--line-soft);
  background:var(--surface);
}
.pc-mem{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 4px 2px 8px;font-size:11px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
}
.pc-mem button{
  padding:1px 3px;font-size:10px;line-height:1;cursor:pointer;
  background:0;border:0;color:var(--ink-3);
}
.pc-mem button:hover{color:var(--ink)}
.permcard-ft{display:flex;gap:5px}
.permcard-ft .btn{flex:1}
.permcard-ft .btn:not(:first-child){flex:0 0 auto}

/* 권한 그룹 — 개인 결제 구역 */
.pc-paid{
  padding:8px 12px;border-top:1px solid var(--line-soft);
  background:var(--ok-bg);
}
.pc-paid-hd{
  display:flex;align-items:center;gap:5px;
  font-size:10px;font-weight:600;color:var(--ok-fg);margin-bottom:5px;
}
.pc-paid-hd .muted{font-weight:400;font-size:10px}
.pc-paid-row{
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  font-size:11px;margin-bottom:4px;
}
.pc-paid-row:last-child{margin-bottom:0}
.pc-paid-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 7px;font-size:10px;
  background:var(--surface);border:1px solid var(--ok-fg);border-radius:10px;
}

/* 그룹 카드 헤더 — 편집·삭제 */
.pc-hd-act{display:flex;gap:2px;margin-left:4px}
.pc-hd-act button{
  padding:2px 5px;font-size:12px;line-height:1;cursor:pointer;
  background:0;border:0;color:var(--ink-3);border-radius:var(--r-sm);
}
.pc-hd-act button:hover{color:var(--ink);background:var(--surface)}

/* 지불선 비교표 */
table.tbprev td.tb-now{
  background:var(--surface-2);text-align:center;font-size:12px;
}
table.tbprev td.tb-next{text-align:center;font-size:12px}
table.tbprev td.tb-next select{
  width:100%;max-width:180px;font-size:11px;padding:3px 6px;margin-bottom:3px;
}
/* 지불선 창 안에서는 폭이 좁다 — 차액 딱지가 줄을 바꿔 잘리지 않게 한다 */
#fl_body table.tbprev td.tb-next .tb-diff{display:block;margin:3px auto 0;width:fit-content}
table.tbprev tfoot td{
  border-top:2px solid var(--line);padding-top:10px;
}
.tb-diff{
  display:inline-block;margin-left:5px;padding:1px 6px;
  font-size:11px;font-weight:600;border-radius:10px;
}
.tb-diff.up{background:var(--warn-bg,#fff8e6);color:#993C1D}
.tb-diff.down{background:var(--ok-bg);color:var(--ok-fg)}

/* 묶음 단위 입력 — 무엇을 사는지 분명히 */
.bundlepick{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;margin-bottom:8px;max-width:460px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
}
.bundlepick .bp-unit{
  padding:3px 10px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.bundlepick .bp-x{color:var(--ink-3);font-size:13px}
.bundlepick input{width:70px;text-align:center;font-size:13px}
.bundlepick .bp-lab{font-size:13px}
.bundlepick .bp-eq{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--ok-fg);
}

/* 좌석 셈 — 기존 N명 + 추가 K명 = 총 M명
   총 인원만 받으면 「지금 몇 명인지」 를 스스로 빼서 알아내야 한다. */
.seatsum{
  display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
  padding:9px 11px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
}
.seatsum .ss-part{display:flex;flex-direction:column;gap:2px}
.seatsum em{font-style:normal;font-size:11px;color:var(--ink-3)}
.seatsum .ss-have{
  padding:4px 10px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.seatsum input{width:72px;text-align:center;font-size:13px}
.seatsum .ss-op{padding-bottom:6px;color:var(--ink-3);font-size:13px}
.seatsum .ss-eq{display:flex;flex-direction:column;gap:2px}
.seatsum .ss-eq strong{font-size:15px;color:var(--ok-fg)}

/* 기업 진행 — 관계 표기 */
.relrow{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:7px 12px;margin-top:6px;font-size:12px;
  border-radius:var(--r-sm);
}
.relrow.dist{background:var(--warn-bg,#fff8e6);color:#993C1D}
.relrow.share{background:#eef3f9;color:#1d4e89}
.relrow .ti{font-size:15px;flex-shrink:0}
.relrow .rel-arrow{font-size:13px;opacity:.6}
.relrow .rel-from,.relrow .rel-to{font-weight:600}

/* 보관 정보 — 삭제가 임박한 것 */
.arch-soon{color:var(--accent);font-weight:600}

/* 담당자 항목 — 「담당자 대표자와 동일」 이면 감춘다.
   감추기는 화면이 하고(display:none), 이 흐림은 잠기기만 하는 자리에 남긴다. */
.fg.off{opacity:.5}
.fg.off input{background:var(--surface-2);cursor:not-allowed}

/* ── 신규등록 화면 ────────────────────────────────── */
.regwrap{
  padding:14px 16px 16px;margin-bottom:1.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
/*
  요청 고르기와 안내를 좌우로 나눈다.

  예전에는 단추 셋이 폭을 다 쓰고 안내가 그 아래 붙었다.
  요청을 고를 때마다 안내가 생겼다 사라지며 아래 입력칸이 통째로
  밀려 내려가, 적던 자리를 눈으로 다시 찾아야 했다.
*/
.reqrow{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start;
        margin:0 0 12px}
/* 안내가 비어 있어도 자리를 지킨다 — 나타날 때 옆이 흔들리지 않는다 */
.reqside{min-width:0}
.reqside .lnsec{margin-top:0}

/* 세 가지 요청 — 무엇을 하려는지부터 고른다 */
.reqpick{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
/* 좌우로 나눈 자리에서는 셋이 반드시 한 줄에 들어간다 */
.reqrow .reqpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.reqbtn{
  flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;
  padding:11px 14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.reqrow .reqbtn{min-width:0;padding:9px 11px}
.reqbtn strong{font-size:14px}
.reqbtn em{font-style:normal;font-size:11px;color:var(--ink-3)}
.reqbtn:hover{border-color:var(--ink-3)}
.reqbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.reqbtn.on em{color:#cfcfc9}

/*
  ★ 라벨을 칸 **왼쪽에** 둔다 — 신규등록 화면에서만.

  기본은 라벨이 칸 위에 오는 형태다(`.fg`). 수정 창처럼 가끔 여는 곳에서는
  그것이 읽기 편하지만, 여기는 하루에 수십 건을 연달아 넣는 자리다.
  라벨 한 줄마다 20px 씩 붙으면 한 화면에 열 칸도 안 들어와
  한 건 넣는 데 스크롤을 여러 번 해야 했다.

  칸이 충분히 길어 라벨을 옆에 두어도 입력 폭이 좁아지지 않는다.
*/
.regform .fg{
  display:grid;grid-template-columns:104px minmax(0,1fr);
  align-items:center;gap:0 10px;
}
/* 라벨을 오른쪽에 붙여 칸의 왼쪽 선과 나란히 세운다 */
.regform .fg > span{text-align:right;line-height:1.4}
/*
  체크칸은 왼쪽에 붙인다.

  체크상자는 `width:auto` 라 칸을 다 채우지 않는데, 격자는 남는 자리를
  가운데로 몰아 놓는다 — 상자만 허공에 떠 있어 어느 라벨의 것인지
  한눈에 안 붙었다.
*/
.regform .fg > input[type="checkbox"],
.regform .fg > .boolcap{justify-self:start}
/* 여러 줄 칸은 라벨이 첫 줄에 걸린다 — 가운데 정렬하면 허공에 뜬다 */
.regform .fg.wide{align-items:start}
.regform .fg.wide > span{padding-top:10px}
/* 라벨이 줄을 안 먹으니 칸 사이도 좁힐 수 있다 */
.regform .form2col .fcol{gap:9px}

@media (max-width:760px){
  .reqrow{grid-template-columns:1fr}
  /* 좁은 화면에서는 라벨을 다시 위로 — 96px 를 떼면 칸이 너무 좁아진다 */
  .regform .fg{grid-template-columns:1fr}
  .regform .fg > span{text-align:left}
  .regform .fg.wide > span{padding-top:0}
}

.regsave{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:1rem}

/* 방금 저장한 것 */
.savedline{display:flex;gap:14px;flex-wrap:wrap;margin-top:5px;font-size:12px}
.savedline .sv em{font-style:normal;color:var(--ink-3);margin-right:4px}

/*
  체크상자와 그 옆말 — 「담당자 | ☑ 대표자와 동일」.

  상자만 덩그러니 있으면 무엇에 대한 답인지 라벨까지 눈을 옮겨야 한다.
  `<label>` 로 감싸 옆말을 눌러도 켜지게 한다 — 상자는 작아서 잘 안 눌린다.
*/
.boolcap{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.boolcap > input{width:auto;margin:0}
.boolcap > span{font-size:13px;color:var(--ink-2)}

/* ── 게시판: 문자 · 메일 보내기 (094) ───────────────────────────
   왼쪽에서 받는 사람을 고르고 오른쪽에서 내용을 적는다.
   위아래로 쌓으면 고른 사람이 화면 밖으로 밀려나, 몇 곳에 보내는지
   보지 못한 채 보내기를 누르게 된다. */
.sendwrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
          gap:16px;align-items:start;margin:0 0 1.4rem}
.sendbox{
  padding:14px 16px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.sendbox .lnsec:first-child{margin-top:0}

/* 어디서 고르는가 — 팀원 · 기업 · 직접 입력 */
.sendpick{display:flex;gap:6px;margin:0 0 10px}
.sendpick .btn{flex:1;padding:6px 8px;font-size:12px}
.sendpick .btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.sendsrc input,.sendsrc textarea{margin:0 0 8px}

/* 고를 수 있는 사람 목록 — 길어지면 그 안에서만 구른다 */
.picklist{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto}
.picklist .pickitem{
  display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:baseline;
  padding:7px 10px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.picklist .pickitem .muted{font-size:11px}
.picklist .pickitem em{
  grid-column:2;grid-row:1/3;font-style:normal;font-size:11px;color:var(--ink-3);
}
.picklist .pickitem.on{background:var(--ink);border-color:var(--ink);color:#fff}
.picklist .pickitem.on .muted,.picklist .pickitem.on em{color:#cfcfc9}
/* 보낼 수단이 없는 사람 — 고르지 못한다는 것이 보여야 한다 */
.picklist .pickitem.off{opacity:.45;cursor:not-allowed}

/* 고른 사람 — 여기 있는 사람에게만 나간다 */
.chosenlist{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chosenlist:empty{display:none}
.chosen{
  display:inline-flex;align-items:center;gap:5px;padding:4px 9px;cursor:pointer;
  font-size:12px;border-radius:999px;
  background:var(--ok-bg);color:var(--ok-fg);border:1px solid #cfe3b4;
}
.chosen.off{background:#fbe9e9;color:var(--accent);border-color:#f0cccc}
.chosen .ti{font-size:12px;opacity:.6}

.sendform{display:flex;flex-direction:column;gap:10px}
.sendmeta{display:flex;gap:12px;align-items:end;font-size:12px}
.sendmeta .fg{gap:4px}
.sendmeta #sn_method{width:auto}
/* 장문이 되면 요금이 달라진다 — 눈에 걸려야 한다 */
#sn_len.warn{color:var(--warn-fg);font-weight:600}

@media (max-width:860px){ .sendwrap{grid-template-columns:1fr} }

/*
  청약 진행 기록 — 한 줄에 담는다.

  단계 사이에 있었던 일을 적는 자리다. 자주 쓰는 만큼 짧아야 한다 —
  창을 따로 열면 「그냥 안 적고 만다」 가 된다.
*/
.ofnote{
  display:grid;grid-template-columns:150px 150px 1fr auto;
  gap:8px;align-items:end;margin:0 0 .8rem;
}
.ofnote .fg{gap:4px}
@media (max-width:760px){ .ofnote{grid-template-columns:1fr} }

/* 정해진 것 중 하나 — 둘뿐이라 펼치지 않고 나란히 둔다 */
.choiceset{display:flex;gap:6px}
.choicebtn{
  display:flex;align-items:center;justify-content:center;margin:0;
  flex:1;padding:6px 10px;font-size:13px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.choicebtn input{position:absolute;opacity:0;width:0;height:0}
.choicebtn.on{
  background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;
}
.choicebtn:has(input:disabled){opacity:.5;cursor:not-allowed}

/* 진행 로그 — 문자·메일 발송 */
tr.hist-send{background:var(--surface-2)}
.histbody summary{
  font-size:11px;color:var(--ink-2);cursor:pointer;padding:3px 0;
}
.histbody > div{
  margin-top:5px;padding:8px 10px;font-size:12px;line-height:1.6;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  white-space:pre-wrap;max-height:240px;overflow:auto;
}

/* 메일 편집기 */
.edtools{
  display:flex;gap:2px;align-items:center;flex-wrap:wrap;
  padding:5px 7px;background:var(--surface-2);
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.edtools button{
  padding:4px 7px;font-size:14px;line-height:1;cursor:pointer;
  background:0;border:0;color:var(--ink-2);border-radius:var(--r-sm);
}
.edtools button:hover{background:var(--surface);color:var(--ink)}
.edsep{width:1px;height:16px;background:var(--line);margin:0 3px}
.edbody{
  min-height:220px;max-height:420px;overflow:auto;
  padding:12px 14px;font-size:13px;line-height:1.7;
  background:var(--surface);border:1px solid var(--line);
  border-radius:0 0 var(--r-sm) var(--r-sm);
}
.edbody:focus{outline:2px solid var(--accent);outline-offset:-2px}
.edbody ul{margin:.5em 0;padding-left:1.4em}

/* 메일 첨부 목록 — 132-19-3, 은행에 보낼 자료가 한눈에 들어오도록 한 줄에 하나씩 */
.mailfiles{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.mailfile{
  display:flex;align-items:center;gap:4px;width:fit-content;max-width:100%;
  padding:3px 8px;font-size:11px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
}
.mailfile button{
  padding:0 2px;background:0;border:0;cursor:pointer;color:var(--ink-3);
}
.mailfile button:hover{color:var(--accent)}

/* 목록 페이지 이동 */
.pagerbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 2px;font-size:12px;
}
.pagerbtns{display:flex;gap:3px;align-items:center}
.pagerbtns .btn{padding:4px 9px;font-size:12px;min-width:32px}
.pagerbtns .btn[disabled]{opacity:.35;cursor:not-allowed}
.pagerbar select{font-size:12px;padding:4px 8px}
@media (max-width:600px){
  .pagerbar{justify-content:center}
  .pagerbtns .btn{padding:4px 7px;min-width:28px}
}

/* 계정관리 — 회사 고르기 */
.orgpick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;padding:1rem 0;
}
.orgcard{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding:16px 18px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  font-family:inherit;font-size:14px;
}
.orgcard:hover{border-color:var(--ink-3);background:var(--surface-2)}
.orgcard .muted{font-size:11px}

/* 입금 확인 — 계정 청구 · 서비스 청구 탭 */
.subtabs{
  display:flex;gap:4px;margin:1rem 0 1.2rem;
  border-bottom:1px solid var(--line);
}
.subtab{
  padding:8px 16px;font-size:13px;font-family:inherit;cursor:pointer;
  background:0;border:0;border-bottom:2px solid transparent;
  color:var(--ink-3);margin-bottom:-1px;
}
.subtab:hover{color:var(--ink-2)}
.subtab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}

/* 리더보드 — 오늘 처리할 것이 얼마나 되는지 */
.payboard{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;margin:1rem 0;
}
.paycard{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:14px 16px;text-align:left;cursor:pointer;font-family:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.paycard:hover{border-color:var(--ink-3)}
.paycard .pc-n{font-size:26px;font-weight:700;line-height:1.1}
.paycard .pc-l{font-size:13px;font-weight:600}
.paycard .pc-a{font-size:12px;color:var(--ink-2)}
.paycard .pc-note{font-size:11px;color:var(--ink-3);margin-top:3px}

/* 계정 청구는 확인 전에 로그인조차 못 하므로 눈에 띄게 */
.paycard.urgent{border-color:var(--accent);background:#fff8f6}
.paycard.urgent .pc-n{color:var(--accent)}
.paycard.zero{opacity:.55}
.paycard.zero .pc-n{color:var(--ink-3)}

/* 로그인 — 어느 입구인지 */
.auth-sub{
  margin:-.4rem 0 1.2rem;font-size:12px;color:var(--ink-3);text-align:center;
}

/* 게시판 — 받는 사람 단계 선택 */
.pickrow{display:flex;gap:8px;flex-wrap:wrap}
.pickrow select{width:auto;min-width:150px;font-size:12px}

/* 게시판 구분 막대 */
.catbar{
  display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  padding:8px 2px 12px;
}
.catbtn{
  padding:5px 12px;font-size:12px;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  color:var(--ink-2);
}
.catbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.catbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.catbtn.edit{padding:5px 9px;color:var(--ink-3)}

/* 게시판 탭 — 팀·내 게시판 */
.bdtab.k-team.active{border-bottom-color:#1d4e89}
.bdtab.k-mine.active{border-bottom-color:var(--ok-fg)}

/* 구분 막대의 글쓰기 — 오른쪽 끝으로 */
.catbtn.write{
  margin-left:auto;background:var(--ink);color:#fff;border-color:var(--ink);
  font-weight:600;
}
.catbtn.write:hover{opacity:.9;color:#fff}

/* 글쓰기 — 구분 고르기 */
.catpick{display:flex;gap:5px;flex-wrap:wrap;padding-top:4px}
.catpick .catbtn{padding:6px 13px}

/* 글쓰기 — 구분은 넓게, 고정은 오른쪽 끝 */
.writerow{display:flex;gap:14px;align-items:flex-start}
.writerow > #be_cat_wrap{flex:1;min-width:0}
.writerow > #be_pin_wrap{flex:0 0 auto;margin-left:auto}

/* 받는 사람 — 고른 것을 모아 보여준다 */
.pickedbox{margin:0 0 8px}
.pickedlist{display:flex;flex-wrap:wrap;gap:5px}
.pchip{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 6px 4px 10px;font-size:12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
}
.pchip.grp{background:#e8eef7;border-color:#cfdcee;color:#1d4e89}
.pchip button{
  padding:0 2px;background:0;border:0;cursor:pointer;color:var(--ink-3);
  font-size:12px;line-height:1;
}
.pchip button:hover{color:var(--accent)}

/* 글 보기 — 제목 앞의 작성자 */
.bvwho{
  display:inline-block;margin-right:8px;padding:2px 8px;
  font-size:12px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink-2);vertical-align:middle;
}

/* 기업 목록 색 구분은 900번 줄 부근 mark-dist/mark-share 로 옮겼다(132-19-11). */

/* 사람·진행사항 고르개 (132-19-35) — 검색창과 한 덩이로 읽히게 좁게 둔다.
   좁은 화면에서는 줄바꿈해 내려간다. */
.cofilters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 .9rem}
.cofilters select{width:auto;min-width:120px;max-width:180px;font-size:12px;padding:5px 8px}
/* 진행완료 함께 보기 — 필터 줄의 오른쪽 끝으로 민다 (133) */
.codone{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
        font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.codone input{margin:0;cursor:pointer}
/* 고르개의 「시스템」 딱지 — 팀이 못 고치는 전체 공용 값 (133) */
.picksys{margin-left:6px;font-size:11px;color:var(--ink-3);font-weight:400}
/* 고른 진행사항이 무슨 일을 하는지 — 지금은 진행완료뿐 (133) */
.td-prog-note{display:block;margin-top:4px;font-size:11px;color:var(--ink-3);line-height:1.5}
/* 받는 사람 고르기 — 대표·담당자 (132-19-107) */
.whopick{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
/* ★ 한 줄씩 왼쪽부터 (사용자) — 전역 input{width:100%} 이 체크박스를 한 줄 가득 차지하게 해
   글자가 오른쪽으로 밀려 있었다. 체크박스는 제 크기만, 이름·번호는 왼쪽에 이어서 */
.whopick label{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:12px;cursor:pointer;width:100%}
.whopick input{margin:0;cursor:pointer;width:auto;flex:0 0 auto}
.whopick label > span{flex:0 0 auto;white-space:nowrap}
.whopick .wp-v{color:var(--ink-3);font-size:11px}

/* 진행사항 필터 카드 (132-19-55).
   고르개 줄 위에 둔다 — 자주 쓰는 길이 위에 있어야 손이 먼저 간다. */
.cocards{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch;margin:0 0 .7rem}
.cocard{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  min-width:88px;padding:7px 12px;font-family:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);
}
.cocard:hover{background:var(--surface-2);border-color:var(--ink-3)}
.cocard .cc-k{font-size:11px;color:var(--ink-3);white-space:nowrap}
.cocard .cc-n{font-size:17px;font-weight:700;line-height:1.1;color:var(--ink)}
/* 고른 카드 — 아래 고르개와 같은 값을 가리키므로 한눈에 보여야 한다 */
.cocard.on{background:var(--accent);border-color:var(--accent)}
.cocard.on .cc-k,.cocard.on .cc-n{color:#fff}

/* 카드 고르기 창 */
.ccpicks{display:flex;flex-direction:column;gap:2px}
.ccpick{display:flex;gap:8px;align-items:center;padding:6px 4px;font-size:13px;cursor:pointer}
.ccpick input{width:auto;margin:0}
.ccpick input:disabled + span{color:var(--ink-3)}

/* 기업 범위 — 전체 · 등록 · 공유 */
.scopebar{display:flex;gap:5px;margin:0 0 .8rem}
.scopebtn{
  padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:15px;
  color:var(--ink-2);
}
.scopebtn:hover{border-color:var(--ink-3);color:var(--ink)}
.scopebtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 진행관리 — 파일과 기록 */
.filelist{display:flex;flex-wrap:wrap;gap:6px}
.fileitem{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;font-size:12px;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);
}
.fileitem:hover{border-color:var(--ink-3);color:var(--ink)}

/* 쪽으로 나누므로 안쪽 스크롤을 두지 않는다 —
   스크롤과 쪽 넘기기가 겹치면 어느 쪽을 써야 할지 헷갈린다. */
.loglist{border:1px solid var(--line);border-radius:var(--r-sm)}
.logitem{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 11px;font-size:12px;border-bottom:1px solid var(--line);
}
.logitem:last-child{border-bottom:0}
.logitem .muted{flex:0 0 78px;font-size:11px}
.logitem strong{flex:0 0 68px}

/* 상신 — 자료 고르기 */
.filepicks{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow:auto}
.filepick{
  display:flex;gap:8px;align-items:center;padding:6px 9px;font-size:12px;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
.filepick:hover{background:var(--surface-2)}

/* 은행 보내기 — 기관 찾기 */
.aghits{display:flex;flex-direction:column;gap:3px;margin:-.4rem 0 .6rem}
.aghit{
  display:flex;gap:8px;align-items:baseline;
  padding:7px 11px;font-size:12px;font-family:inherit;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.aghit:hover{background:var(--surface-2);border-color:var(--ink-3)}
.aghit strong{font-size:12px}

/* 이미 진행 중인 은행 — 흐리게 보이되 눌린다. 눌러야 까닭을 읽는다 (132-19-51) */
.aghit.busy{opacity:.55}
.aghit.busy strong{text-decoration:line-through;text-decoration-thickness:1px}
.aghit .tag{margin-left:auto}

/* 진행관리 — 자료 빼기 */
.btn.xs{padding:3px 6px;font-size:11px;line-height:1}

/* 팀양식·회사양식 관리 — 탭 단추 높이를 옆의 「저장」 과 맞춘다 (132-19-15).
   가로 폭·글자 크기는 xs 그대로 두고 위아래 폭만 기본 .btn 과 같게 한다. */
.tftabs .btn.xs{padding-top:8px;padding-bottom:8px;line-height:normal}
.filelist{align-items:center}

/* 진행 기록 — 소통이 중심.
   쪽으로 나누므로 스크롤이 필요 없다. */
#qd_logs{max-height:none}
.logitem{align-items:flex-start}
.logitem span:last-child{flex:1;white-space:pre-wrap;word-break:break-word}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* 쪽 넘기기 */
.pager{display:flex;gap:3px;align-items:center;margin:.6rem 0 0;flex-wrap:wrap}
.pgbtn{
  min-width:26px;padding:4px 7px;font-size:12px;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);
}
.pgbtn:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.pgbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pgbtn:disabled{opacity:.35;cursor:default}
.pgdot{padding:0 2px;font-size:12px;color:var(--ink-3)}
.pager .muted{margin-left:auto;font-size:11px}

/* 진행 기록 — 구분 */
.logitem .logprog{
  flex:0 0 74px;font-size:11px;color:var(--ink-3);
}
.logitem .logprog:not(:empty){
  color:#1d4e89;font-weight:600;
}

/* 동시진행 — 어느 은행 이야기인지 (132-19-51).
   본문 앞에 붙이므로 글줄을 끊지 않게 작고 낮은 대비로 둔다. */
.logitem .logbank{
  display:inline-block;margin-right:5px;padding:1px 6px;
  font-size:11px;font-weight:600;line-height:1.5;
  color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;white-space:nowrap;
}

/* 옵션 분류 — 갈래 탭 */
.grptabs{display:flex;gap:4px;margin:0 0 .8rem}
.grptab{
  padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:15px;
  color:var(--ink-2);
}
.grptab:hover{border-color:var(--ink-3);color:var(--ink)}
.grptab.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 구분 막대 오른쪽 단추 묶음 */
.catgap{display:inline-flex;gap:5px;margin-left:auto}

/* 탭별 안내글 (097) — 「여기 쓴 글을 누가 보는가」.
   margin-left:auto 로 오른쪽으로 민다. .catgap 도 auto 이므로
   남는 자리를 둘이 나눠 가져 안내글이 단추 왼쪽에 붙는다.
   좁은 창에서는 감춘다 — 안내글이 단추를 밀어내면 글을 못 쓴다. */
.catnote{
  margin-left:auto;font-size:12px;line-height:1.4;
  align-self:center;text-align:right;
}
@media (max-width:760px){ .catnote{display:none} }

/* 은행 이력 — 한 화면에.
   표는 내용이 길면 창을 넘는다. 첫 칸을 줄이고 나머지를 고정한다. */
/* min-width:760px 를 푼다 — 창이 그보다 좁으면 오른쪽이 잘린다 */
table.grid.tries{width:100%;min-width:0;table-layout:fixed}
table.grid.tries td{
  padding:7px 8px;font-size:12px;vertical-align:top;
  overflow:hidden;text-overflow:ellipsis;
  /* 기본 규칙의 nowrap 을 푼다 — 한 줄로 두면 칸이 벌어진다 */
  white-space:normal;
}
table.grid.tries td:first-child{
  white-space:normal;word-break:break-all;
}
table.grid.tries td.nw{white-space:nowrap;text-align:right}
table.grid.tries td.d-sent{width:58px}
table.grid.tries td.d-res{width:96px}
table.grid.tries td.d-act{width:52px}
table.grid.tries .muted{font-size:11px}
table.grid.tries .ct{margin-left:6px}

/* 창 안에서 표가 넘치지 않게.
   안쪽 요소가 창보다 넓으면 오른쪽이 잘려 보인다. */
#qDetailModal .modal{overflow-x:hidden;max-width:100%}
#qDetailModal .stack{min-width:0}
#qd_tries{max-width:100%;overflow:hidden}

/* 쪽 넘기기 — 개수 선택 */
.pgper{
  width:auto;padding:3px 6px;font-size:11px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink-2);
}

/* 팀 요금 — 무엇을 살지 고른다 */
.paymode{display:flex;gap:8px;margin:0 0 1rem}
.pmbtn{
  flex:1;padding:11px 14px;text-align:left;font-family:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.pmbtn:hover{border-color:var(--ink-3)}
.pmbtn.on{border-color:var(--ink);background:var(--surface-2)}
.pmbtn strong{display:block;font-size:13px;color:var(--ink)}
.pmbtn em{display:block;margin-top:2px;font-size:11px;color:var(--ink-3);font-style:normal}
.pmbtn.on strong{color:var(--ink)}

/* 선납 할인 — 표 안에서 고친다 */
table.grid.disc{min-width:0}
table.grid.disc td{padding:6px 8px}
table.grid.disc input[type=number]{width:70px}
table.grid.disc input:not([type]){width:100%}

/* 메일 첨부 용량 */
#cm_size .warn{color:var(--warn-fg);font-weight:600}
#cm_size .err{color:var(--accent);font-weight:600}

/* 쿠폰 고르기 */
.cplist{display:flex;flex-direction:column;gap:4px;margin:0 0 .8rem}
.cpitem{
  display:flex;gap:9px;align-items:flex-start;padding:8px 11px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;
}
.cpitem:hover{background:var(--surface-2)}
.cpitem.off{opacity:.5;cursor:default}
.cpitem strong{display:block;font-size:12px}
.cpitem em{display:block;margin-top:1px;font-size:11px;color:var(--ink-3);font-style:normal}

/* 내 쿠폰 — 기한이 임박하면 눈에 띄게 */
.cpitem.soon{border-color:var(--accent);background:#fdf4f4}
.cpitem .err{color:var(--accent);font-weight:600;margin-left:3px}

/* 진행관리 — 담당자별 */
.whobar{display:flex;gap:5px;flex-wrap:wrap}

/* 팀관리 옵션 */
.tsgroup{display:flex;flex-direction:column;gap:6px;margin:0 0 1.2rem}
.tsitem{
  display:flex;gap:10px;align-items:flex-start;padding:10px 13px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.tsitem:hover{background:var(--surface-2)}
.tsitem strong{display:inline;font-size:13px}
.tsitem em{
  display:inline-block;margin-left:6px;padding:1px 7px;
  font-size:10px;font-style:normal;color:var(--ink-3);
  background:var(--surface-2);border-radius:9px;
}
.tsitem .muted{display:block;margin-top:3px;font-size:11px;line-height:1.5}

/* 여신 진행 — 긴 건명이 제목 줄을 밀지 않게 */
#qDetailModal .modal-hd h3{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 여신 진행 — 승인 */
.okbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:.8rem 0 0;padding:11px 13px;
  background:var(--ok-bg);border:1px solid #cfe3d0;border-radius:var(--r-sm);
}
.okbar .muted{font-size:11px}
.btn.ok{
  background:var(--ok-fg);color:#fff;border-color:var(--ok-fg);font-weight:600;
}
.btn.ok:hover{opacity:.9}

/* ── 청약관리 ──────────────────────────────────────── */

/* 단계별 건수 — 어디에 쌓였는지 한눈에.
 *
 * 청약 흐름은 파랑, 실효·무산은 붉게.
 * 계약승인은 다 끝난 것이라 색이 없다.
 * 0 건은 흐리게 — 자리는 지키되 눈에 안 걸린다.
 */
.stepbar{display:flex;gap:5px;flex-wrap:wrap}

.stepbar .catbtn.zero{opacity:.4}

/* 청약 흐름 — 손이 가야 하는 곳 */
.stepbar .catbtn.st-ready,
.stepbar .catbtn.st-signed,
.stepbar .catbtn.st-paid,
.stepbar .catbtn.st-happy{
  border-color:#b8cde0;background:#f2f7fb;color:#1d4e89;font-weight:600;
}

/* 실효·무산 — 보이면 바로 봐야 한다 */
.stepbar .catbtn.st-lapsing,
.stepbar .catbtn.st-lapsed,
.stepbar .catbtn.st-dropped{
  border-color:#e8c4bc;background:#fdf4f3;color:var(--accent);font-weight:600;
}

/* 고른 것은 진하게 */
.stepbar .catbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 진행관리 단계 탭 (175) — 진행중·단계들 │ 승인·거절·철회 │ 전체보기 사이의 세로선 */
.stepbar .stepsep{display:inline-block;width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}
.stepbar .catbtn.st-stage{border-style:dashed}
.stepbar .catbtn.st-stage.on{border-style:solid}

/* 다음 단계로 — 이 흐름의 중심 */
.nextbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:11px 13px;margin:0 0 1rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.ofjump{width:auto;font-size:12px;padding:5px 8px;margin-left:auto}

/* 실적 나누기 */
.sharelist{display:flex;flex-direction:column;gap:5px}
.shareitem{
  display:flex;gap:10px;align-items:center;padding:8px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;
}
.shareitem .nm{flex:1;min-width:0}
.shareitem .nm .muted{margin-left:6px;font-size:11px}
.shareitem .sh-v{width:64px;text-align:center}
.shareitem .pct{width:52px;text-align:right;font-size:11px;color:var(--ink-3)}

/* 여신신청서 양식 */
.lflist{display:flex;flex-direction:column;gap:5px}
.lfitem{
  display:flex;gap:8px;align-items:center;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:12px;
}
.lfitem .nm{flex:1;min-width:0}
.lfitem .nm .muted{margin-left:6px;font-size:11px}
.lfitem em{
  display:block;margin-top:2px;font-size:11px;font-style:normal;color:var(--ink-3);
}
.lfitem em.base{color:var(--ink-3);opacity:.7}

/* 청약 — 지금 상태 */
.nextbar .nowis{font-size:12px;color:var(--ink-2);margin-right:4px}
.nextbar .nowis strong{color:var(--ink)}

/* 쪽지 받는 사람 — 운영자 */
.admwrap{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.admlabel{
  font-size:11px;color:var(--ink-3);padding:2px 8px;
  background:var(--surface-2);border-radius:9px;
}
.gchip.adm{border-color:#b8cde0;background:#f2f7fb}
.gchip.adm:hover{border-color:#1d4e89}

/* 관리자 게시판 — 운영 이야기 */
.bdtab.k-admin.active{border-bottom-color:#7b5ea7;color:#7b5ea7}
.bdtab.k-admin .navnum{background:0;color:#7b5ea7}

/* 메일 서명 — 명함 */
.sgimg{
  display:inline-block;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
}
.sgimg img{display:block;max-width:100%;max-height:180px;height:auto}
.sgmeta{display:flex;gap:8px;align-items:center;margin-top:8px}
.sgmeta .muted{font-size:11px;margin-right:auto}

/* 알림 문자 — 위에서 꺼서 내가 켤 수 없는 줄.
   감추지 않고 흐리게 남긴다. 그런 알림이 있다는 것은 알아야 한다. */
.nsoff{opacity:.5}
.nsoff .tag{font-size:9px;padding:0 4px;font-weight:400;margin-left:4px}

/* 개인 결제 기능 — 이름 옆 「사용기능」 단추.
   목록은 접어 둔다. 늘 펼쳐 두면 팀관리자가 손댈 체크박스가 아래로 밀린다. */
.pc-mem .pc-paidbtn{
  padding:1px 6px;font-size:10px;line-height:1.5;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
}
.pc-mem .pc-paidbtn:hover{background:var(--surface-2);color:var(--ink)}
.pc-paid-chip .muted{margin-left:3px;font-size:9px}