/* collabo 앱 레이아웃 — 키트 치수 준수(사이드바 248·톱바 60·본문패딩 28). */
.hidden{display:none!important}
.mono{font-family:var(--mono);font-feature-settings:'tnum' 1}
.ey{font-family:var(--mono);font-size:var(--au-fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--sub);font-size:var(--au-fs-sm)}

/* ── 버튼 ── */
/* ⚠ white-space:nowrap 은 선택이 아니다 — 한글은 기본(word-break:normal)에서 **글자 사이 어디서나** 줄바꿈된다.
   버튼이 좁은 칸(드로어 등)에 들어가면 '회사 검색' 이 '회사 검 / 색' 으로 쪼개진다. 라벨은 통째로 유지하고,
   넘치는 것은 컨테이너가 flex-wrap 으로 다음 줄에 내린다.
   ⚠ display 를 반드시 준다 — .btn 은 <button>(기본 inline-block)뿐 아니라 <a> 에도 붙는다.
      <a> 는 인라인이라 상하 padding 이 줄 높이를 못 밀어 윗줄과 겹치고, width:100% 도 먹지 않는다.
      (그래서 예전엔 호출부에서 style="display:inline-block" 으로 땜질하고 있었다.) */
.btn{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:100%;padding:12px;border:0;border-radius:var(--au-radius-sm);font-weight:700;font-size:var(--au-fs-body);
  background:var(--au-primary);color:var(--au-primary-ink);white-space:nowrap}
.btn:hover{background:var(--brand-d)}
.btn.line{background:var(--surface);border:1px solid var(--line2);color:var(--ink)}
.btn.line:hover{background:var(--surface2)}
.btn.sm{width:auto;padding:8px 14px;font-size:var(--au-fs-sm)}

/* ── 로그인 게이트 ── */
#auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{background:var(--au-primary);color:var(--on-brand);padding:56px 52px;
  display:flex;flex-direction:column;justify-content:space-between}
.auth-brand .wm{font-size:26px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center}
/* ⚠ .wm 에 gap 을 주면 안 된다 — 텍스트노드('콜라보')와 <b>스테이션</b> 이 각각 flex 아이템이 되어
   상호명이 '콜라보 스테이션' 으로 벌어진다. 간격은 마크와 글자 사이에만 margin 으로 준다. */
/* 로고 마크 — 오렌지 라운드 사각 + 두 점(favicon·og 카드와 같은 형태로 통일) */
.mark{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--au-accent);margin-right:11px;
  display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.mark>i{width:10px;height:10px;border-radius:50%;background:#fff;font-style:normal;
  box-shadow:15px 0 0 -1px rgba(255,255,255,.6)}
.side .wm .mark{width:26px;height:26px;border-radius:8px;margin-right:9px}
.side .wm .mark>i{width:8px;height:8px;box-shadow:11px 0 0 -1px rgba(255,255,255,.6)}
.auth-brand .wm b{border-bottom:3px solid var(--au-accent);padding-bottom:2px}
/* ⚠ max-width 에 ch 를 쓰지 않는다 — ch 는 '숫자 0 의 폭'(Pretendard ≈0.55em)이라 한글 기준으로 한참 좁다.
   15ch ≈ 247px 인데 '게임기업과 허브센터를' 은 30px×10자 ≈ 300px → 모두가 처음 보는 문장이 글자 중간에서 접혔다.
   줄바꿈은 마크업의 <br> 이 이미 지정한다. */
.auth-brand .lead{font-size:30px;line-height:1.28;font-weight:700;max-width:none;margin:0}
.auth-brand .lead span{color:var(--au-accent)}
.auth-brand .foot{font-family:var(--mono);font-size:var(--au-fs-xs);letter-spacing:.08em;color:var(--on-brand-soft);text-transform:uppercase}
.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.auth-form{width:360px;max-width:100%}
.auth-form .ey{margin-bottom:14px}
.auth-form h1{font-size:23px;font-weight:800;margin:0 0 4px}
.auth-form .sub{color:var(--sub);font-size:var(--au-fs-sm);margin:0 0 24px}
.orline{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:var(--au-fs-xs);margin:18px 0;
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.orline::before,.orline::after{content:'';flex:1;height:1px;background:var(--line)}
.f{margin-bottom:14px}
.f label{display:block;font-family:var(--mono);font-size:var(--au-fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-bottom:6px}
/* ⚠ input 만 꾸미면 안 된다 — 같은 폼 안의 select·textarea 가 브라우저 기본 위젯으로 남아
   바로 옆 칸과 높이·테두리·라운드가 전부 다르게 보인다(폼 19곳에서 발생하고 있었다). */
.f input,.f select,.f textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);
  border-radius:var(--au-radius-sm);font-size:var(--au-fs-body);background:var(--surface);outline:none}
.f textarea{line-height:1.7;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--au-primary)}
/* §4: 읽는 텍스트는 dim(--sub) 이상. faint 는 라벨 전용 — 본문을 faint 로 깔면 안 읽힌다. */
.fine{color:var(--sub);font-size:var(--au-fs-sm);line-height:1.7;margin-top:20px}
/* 계정 버튼 — 로그아웃 바로 위. 누르면 '내 계정'(계정 설정) */
.acct{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--au-radius-sm);padding:7px 9px}
.acct:hover{background:var(--surface);border-color:var(--line)}
.acct-ic{flex:0 0 auto;font-size:var(--au-fs-xs);font-weight:700;color:var(--brand-d);
  background:var(--au-primary-weak);border-radius:var(--au-radius-pill);padding:2px 7px}
.acct-mail{flex:1;min-width:0;font-family:var(--mono);font-size:var(--au-fs-sm);color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 사이드바 섹션 — 아코디언 */
.nav-group{margin-top:10px}
.nav-sec-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:8px 12px;background:none;border:0;border-radius:var(--au-radius-sm);
  font-size:var(--au-fs-xs);font-weight:800;letter-spacing:.05em;color:var(--sub);text-align:left}
.nav-sec-btn:hover{background:var(--surface);color:var(--ink2)}
.nav-sec-btn .caret{transition:transform .15s;font-size:var(--au-fs-body);line-height:1}
.nav-group.open .nav-sec-btn{color:var(--brand-d)}
.nav-group.open .nav-sec-btn .caret{transform:rotate(90deg)}
/* ⚠ display:none ↔ block 은 전환이 안 된다(애니메이션 대상이 아니다) — 그래서 딱딱했다.
   max-height + opacity 로 편다. 하위 항목이 늘어도 잘리지 않게 여유를 크게 잡는다. */
.nav-sub{padding-left:6px;border-left:2px solid var(--line);margin-left:12px;
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
.nav-group.open .nav-sub{max-height:520px;opacity:1}
@media (prefers-reduced-motion:reduce){ .nav-sub{transition:none} }

/* 키-값 줄
   ⚠ 라벨 칸이 flex:0 0 110px 이면 grow·shrink 가 둘 다 꺼진다. 한글은 min-content 바닥이 낮아서
      (글자 사이 어디서나 끊긴다) **넘치지 않고 조용히 두 줄로 접힌다** — 그래서 더 눈에 안 띈다.
      값 <b> 에는 min-width:0 이 없어 반대로 긴 URL·마스킹 메일이 칸을 밀어냈다.
   ⚠ .kv 는 '라벨:값' 전용이다. '회사명:금액' 같은 **데이터 행**에 쓰면 회사명이 라벨 칸에 갇힌다
      → 그런 행은 .kv.pair 를 쓴다(왼쪽이 늘어나고 값이 오른쪽에 붙는다). */
.kv{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-sm)}
.kv:last-child{border-bottom:0}
.kv>span{flex:0 0 110px;min-width:0;color:var(--sub)}
.kv>b{min-width:0;overflow-wrap:anywhere}
.kv.pair>span{flex:1 1 auto;color:var(--ink)}
.kv.pair>b{flex:0 0 auto;text-align:right;color:var(--ink2)}

/* 구성원 행의 승인/거절 버튼 */
.row-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:0 0 auto}

/* ── 인력관리 ── */
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs.sub{margin:8px 0 0}
.tab{padding:8px 14px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--au-radius-pill);font-size:var(--au-fs-sm);font-weight:700;color:var(--ink2)}
.tab:hover{border-color:var(--line2)}
.tab.on{background:var(--au-primary);border-color:var(--au-primary);color:#fff}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius);padding:14px 16px}
.stat>span{display:block;font-size:var(--au-fs-xs);color:var(--sub);margin-bottom:4px}
.stat>b{font-size:20px;font-weight:800}

.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}

/* ⚠ `.tbl`/`.thead`/`.trow`(손으로 짠 격자 표)는 제거했다 — 인력 명부가 마지막 사용처였고,
   그 표에는 §9-1 필수 3종(검색·정렬·헤더고정)이 없었다. 공용 dataTable() 로 옮겼다.
   새 표를 만들 때 이 격자를 되살리지 말 것. 표는 dataTable() 하나로 통일한다. */

/* ⚠ .tag 를 `.trow .tag` 로 가둬두면 안 된다 — hr.js 연차 탭은 다른 조상 아래에서 <i class="tag">법정</i> 을 쓴다.
   조상이 없으면 <i> 기본값이 살아나 배경 없는 **기울임꼴 평문**이 된다(같은 화면의 다른 '법정'과 달라 보인다). */
.tag{font-style:normal;font-size:var(--au-fs-xs);font-weight:700;color:var(--brand-d);
  background:var(--au-primary-weak);border-radius:var(--au-radius-pill);padding:1px 6px;white-space:nowrap}

/* 데이터 표 — 필드가 많으면 뭉치지 말고 컬럼으로 편다. 넓으면 가로 스크롤(본문은 절대 안 밀린다).
   ⚠ UI-SPEC §9-1: 표는 **검색·정렬·헤더고정**이 필수다. 셋 다 없으면 100건 넘는 순간 못 쓴다.
   ⚠ §3 타이포: 본문은 14px(body). 표라고 12px 로 줄이지 않는다 — 읽으라고 만든 표다. */
.dt-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.dt-q{flex:1 1 auto;max-width:340px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--au-radius-sm);background:var(--surface);font-size:var(--au-fs-body)}
.dt-q:focus{outline:0;border-color:var(--au-primary);box-shadow:0 0 0 3px var(--au-primary-weak)}
.dt-n{font-size:var(--au-fs-sm);color:var(--sub);font-weight:700;white-space:nowrap}
.dt-wrap{border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow:auto;margin-top:10px;
  max-height:min(620px,68vh)}   /* 헤더고정이 의미를 가지려면 표 자체가 스크롤 컨테이너여야 한다 */
table.dt{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:var(--au-fs-body)}
table.dt th,table.dt td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.dt thead th{position:sticky;top:0;z-index:1;background:var(--surface2);font-weight:800;
  font-size:var(--au-fs-sm);color:var(--ink2);white-space:nowrap;border-bottom:1px solid var(--line2)}
table.dt thead th.srt{cursor:pointer;user-select:none}
table.dt thead th.srt:hover{background:var(--au-primary-weak)}
table.dt thead th.srt>i{font-style:normal;margin-left:4px;color:var(--faint);font-size:var(--au-fs-xs)}
table.dt thead th.srt.on{color:var(--au-primary)}
table.dt thead th.srt.on>i{color:var(--au-primary)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--surface2)}
/* ★ PC 는 가로가 남는다 — 한 행은 **한 줄**로 끝낸다. 줄바꿈으로 행 높이가 들쭉날쭉하면
   눈이 행을 따라가지 못한다. 넘치는 칸만 …로 자르고, 전체는 드로어에서 본다. */
table.dt th,table.dt td{white-space:nowrap;vertical-align:middle}
table.dt td.cut{max-width:280px;overflow:hidden;text-overflow:ellipsis}
table.dt td.nm{font-weight:700}
table.dt td.sm{color:var(--ink2);font-size:var(--au-fs-sm)}   /* §4: 읽는 텍스트에 faint 금지 */
/* ⚠ .tg 는 표 전용이 아니다 — 카드 뷰(.cards .c-t)도 같은 태그를 그린다.
   `table.dt .tg` 로 가둬두면 카드에선 배경·패딩이 전부 사라져 '인디초기투자모바일' 처럼 평문이 이어 붙는다. */
.tg{display:inline-block;font-size:var(--au-fs-xs);color:var(--brand-d);background:var(--au-primary-weak);
  border-radius:var(--au-radius-pill);padding:2px 7px;margin:1px 2px 1px 0;white-space:nowrap}

/* ── 우측 드로어 / 팝업 모달 ──
   표는 좁게 유지하고 상세는 여기서. 관제탑 규약(§0-1): 팝업은 드래그·핀·리사이즈 3동작 필수. */
/* 등장·퇴장을 애니메이션한다. 뚝 나타나는 패널은 '떴다'가 아니라 '튀었다'로 느껴진다.
   cubic-bezier(.2,.8,.2,1) = 빠르게 나가서 부드럽게 안착(감속). */
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes fadeOut  { from{opacity:1} to{opacity:0} }
@keyframes slideIn  { from{transform:translateX(100%)} to{transform:none} }
@keyframes slideOut { from{transform:none} to{transform:translateX(100%)} }
@keyframes popIn    { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }
@keyframes popOut   { from{opacity:1;transform:none} to{opacity:0;transform:translateY(8px) scale(.98)} }

.drawer,.modal{position:fixed;inset:0;z-index:50;background:rgba(22,18,26,.28);
  animation:fadeIn .18s ease both}
.drawer.closing,.modal.closing{animation:fadeOut .18s ease both}
.drawer .p-box{animation:slideIn .24s cubic-bezier(.2,.8,.2,1) both}
.drawer.closing .p-box{animation:slideOut .2s cubic-bezier(.4,0,1,1) both}
.modal .p-box{animation:popIn .2s cubic-bezier(.2,.8,.2,1) both}
.modal.closing .p-box{animation:popOut .16s ease both}
@media (prefers-reduced-motion:reduce){
  .drawer,.modal,.drawer .p-box,.modal .p-box,
  .drawer.closing,.modal.closing,.drawer.closing .p-box,.modal.closing .p-box{animation:none}
}
/* ⚠ 드로어는 오른쪽에 붙어 있어서 CSS `resize:horizontal` 이 무효다(핸들이 오른쪽 = 화면 밖으로만 늘어난다).
   왼쪽 모서리 그립(.p-grip)을 직접 잡아 끌게 한다 — 더블클릭하면 넓게. */
.drawer .p-box{position:absolute;top:0;right:0;height:100%;width:min(460px,92vw);
  background:var(--surface);border-left:1px solid var(--line2);box-shadow:-8px 0 28px rgba(22,18,26,.14);
  display:flex;flex-direction:column;overflow:hidden;min-width:320px}
.p-grip{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:2;
  background:transparent;touch-action:none}
.p-grip:hover,.p-grip:active{background:var(--au-primary-weak)}
.p-grip::after{content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:2px;height:36px;border-radius:2px;background:var(--line2)}
.modal .p-box{position:relative;margin:6vh auto;width:min(560px,92vw);max-height:88vh;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--au-radius);
  box-shadow:0 18px 48px rgba(22,18,26,.22);display:flex;flex-direction:column;
  resize:both;overflow:auto;min-width:320px;min-height:260px}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--line);cursor:move;flex:0 0 auto;
  background:var(--surface2);position:sticky;top:0;z-index:1}
.p-head>b{font-size:var(--au-fs-section)}
.p-act{display:flex;gap:4px;align-items:center}
.p-act button{border:0;background:none;padding:5px 8px;border-radius:6px;font-size:var(--au-fs-sm);line-height:1;
  color:var(--ink2);font-weight:700}
.p-act button:hover{background:var(--au-primary-weak)}
.p-pin.on{background:var(--au-primary);color:#fff}
.p-pin.on:hover{background:var(--brand-d)}
.p-x{font-size:var(--au-fs-body)!important}
.p-body{padding:16px 18px;overflow:auto;flex:1 1 auto}
.p-body .kv>span{flex:0 0 130px}
.p-body .kv.pair>span{flex:1 1 auto}   /* 데이터 행은 고정폭을 다시 풀어준다 */
.p-body h3{margin:20px 0 10px;font-size:var(--au-fs-section);font-weight:800;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.p-body h3:first-child{margin-top:0}

/* 여러 줄 안내문(프로그램 상세 등) — 줄바꿈 보존. 좁은 드로어에서 긴 URL 이 넘치지 않게 끊는다. */
.pre{margin-top:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}

/* 투자 이력 한 건 — 투자사 / 투자일 / 라운드·금액·출처.
   ⚠ .kv 로는 못 담는다: 값이 3층(투자사·날짜·상세)인데 .kv 는 라벨:값 2칸짜리다.
      좁은 드로어에서 3개를 한 줄에 밀어넣으면 반드시 접힌다. */
.rnd{padding:10px 0;border-bottom:1px solid var(--line)}
.rnd:last-child{border-bottom:0}
.rnd-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rnd-h>b{min-width:0;overflow-wrap:anywhere}
/* 투자사 미공개 — '없다'가 아니라 '안 밝혔다'. 이름 자리를 비우면 투자 자체가 없는 걸로 읽힌다. */
.rnd-h>b.unk{font-weight:400;color:var(--sub);font-style:normal}
.rnd-d{flex:0 0 auto;font-family:var(--mono);font-size:var(--au-fs-sm);color:var(--ink2)}
.rnd-m{margin-top:3px;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6;overflow-wrap:anywhere}

/* 기사 목록 */
.news{padding:10px 0;border-bottom:1px solid var(--line)}
.news:last-child{border-bottom:0}
.news a{font-size:var(--au-fs-body);line-height:1.5}
.news>i{display:block;font-style:normal;font-size:var(--au-fs-sm);color:var(--sub);margin-top:2px}
.news>p{margin:5px 0 0;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6}

/* 클릭 가능한 행·카드 */
tr.clk{cursor:pointer}
.cards .c.clk{cursor:pointer}

/* 사이드바 접기 (햄버거)
   ⚠ 접기 버튼은 **접히는 것 위에** 있어야 한다. 본문 제목 옆에 두면 무엇이 접히는지 안 보인다.
      → 평소엔 사이드바 헤더(.wm)에, 접힌 뒤엔 다시 펼 수 있게 톱바에. */
.hamb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--au-radius-sm);
  color:var(--ink2);flex:0 0 auto;transition:background .14s,border-color .14s}
.hamb:hover{background:var(--au-primary-weak);border-color:var(--au-primary)}
.hamb svg{width:17px;height:17px}
.side .wm .hamb{margin-left:auto}
.hamb-out{display:none;margin-right:12px}
#app.side-off .hamb-out{display:inline-flex}

/* display:none 은 전환되지 않는다 — 폭을 줄여서 부드럽게 접는다. */
#app{transition:grid-template-columns .24s cubic-bezier(.2,.8,.2,1)}
#app.side-off{grid-template-columns:0 1fr}
.side{overflow:hidden}
#app.side-off .side{padding-left:0;padding-right:0;border-right:0}
@media (prefers-reduced-motion:reduce){ #app{transition:none} }

/* 표 ↔ 카드 전환 */
.viewsw{display:inline-flex;gap:4px;margin-left:8px}
.viewsw .btn.on{background:var(--au-primary);border-color:var(--au-primary);color:#fff}

/* 카드 뷰 — 훑어보기용(표는 비교용) */
/* ★ 카드는 높이를 맞춘다 — 들쭉날쭉하면 격자가 아니라 잔해로 보인다.
   grid-auto-rows:1fr 로 같은 줄의 카드를 같은 높이로, 내부는 flex 로 아래를 채운다.
   마우스가 지나가는 것이 **손끝에 느껴져야 한다** — 살짝 뜨고, 테두리가 브랜드색으로 물들고,
   '상세 보기' 가 나타난다. 클릭 가능하다는 걸 커서 모양 하나로만 알리지 않는다. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:10px;
  grid-auto-rows:1fr}
.cards .c{border:1px solid var(--line);border-radius:var(--au-radius);padding:16px 18px;background:var(--surface);
  display:flex;flex-direction:column;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s}
.cards .c .c-t{margin-top:auto;padding-top:10px}   /* 태그를 바닥에 붙여 카드 높이를 맞춘다 */
.cards .c.clk:hover{transform:translateY(-3px);border-color:var(--au-primary);
  box-shadow:0 10px 24px rgba(105,29,114,.14)}
.cards .c.clk:active{transform:translateY(-1px)}
.c-more{margin-top:10px;font-size:var(--au-fs-sm);font-weight:700;color:var(--au-primary);
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.cards .c.clk:hover .c-more{opacity:1;transform:none}
/* ⚠ hover 로만 나타나면 터치 기기에선 영영 안 보인다 — 마우스가 없는 환경에선 항상 보인다. */
@media (hover:none){ .c-more{opacity:1;transform:none} }
.c-more::after{content:' →'}
@media (prefers-reduced-motion:reduce){
  .cards .c,.c-more{transition:none}
  .cards .c.clk:hover{transform:none}
}
.cards .c-h{font-size:var(--au-fs-body);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cards .c-s{margin-top:4px;font-size:var(--au-fs-sm);color:var(--ink2)}
.cards .c-r{margin-top:8px;font-size:var(--au-fs-sm);color:var(--ink2);line-height:1.55}
.cards .c-r>span{display:block;font-size:var(--au-fs-xs);font-weight:800;color:var(--sub);letter-spacing:.03em}
.cards .c-n{margin:10px 0 0;font-size:var(--au-fs-sm);color:var(--sub);line-height:1.6}
.cards .c-t{margin-top:10px}
/* ⚠ .c-a 는 카드 전용이 아니다 — 드로어 '바로 가기' 도 이 클래스를 쓴다.
   `.cards .c-a` 로만 정의해 두면 드로어에선 flex 가 안 잡혀 버튼이 인라인으로 흘러 잘린다. */
.c-a{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}

/* IR 공개 페이지 (투자자 — 로그인 없음) */
.ir-wrap{max-width:640px;margin:0 auto;padding:40px 20px}
.ir-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.ir-head .wm{font-size:20px;font-weight:800;letter-spacing:-.02em}
.ir-head .wm b{color:var(--au-primary)}

/* 동의 체크박스 — 큰 결정이라 눈에 띄게 */
.chk{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;
  border:1px solid var(--line2);border-radius:var(--au-radius-sm);background:var(--surface2);cursor:pointer}
.chk input{margin-top:2px;width:16px;height:16px;accent-color:var(--au-primary)}
.chk span{font-size:var(--au-fs-sm);line-height:1.6}

/* 발송 방식별 설정 박스 */
.mode-box{margin:12px 0;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--au-radius-sm);background:var(--surface2)}
.mode-box>p{margin:0 0 10px;font-size:var(--au-fs-sm);line-height:1.6}

/* 운영 가이드 — 산출물 / 놓치면 안 되는 것.
   ⚠ '주의'는 회색으로 죽이지 않는다(§4). 놓치면 사고나는 항목이라 눈에 걸려야 한다. */
.ops-box{margin-top:12px;padding:12px 14px;border-radius:var(--au-radius-sm);
  border:1px solid var(--line);background:var(--surface2);
  font-size:var(--au-fs-body);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.ops-box>span{display:block;font-size:var(--au-fs-xs);font-weight:800;letter-spacing:.04em;
  color:var(--sub);margin-bottom:5px}
.ops-box.warn{border-color:var(--au-warn);background:#fdf6e8}
.ops-box.warn>span{color:var(--au-warn)}

/* 설정 안내(접이식) */
.guide{margin:12px 0;border:1px solid var(--line);border-radius:var(--au-radius-sm);
  background:var(--surface2);padding:10px 14px}
.guide>summary{cursor:pointer;font-weight:700;font-size:var(--au-fs-sm);color:var(--brand-d)}
.guide ol{margin:12px 0 4px;padding-left:20px}
.guide li{margin:8px 0;font-size:var(--au-fs-sm);line-height:1.6}
.guide code{font-family:var(--mono);font-size:var(--au-fs-xs);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* 급여대장 — 행마다 독립 grid 였을 때는 마지막 auto 칸이 저장 전(버튼 1개)·후(버튼 5개)로 달라져서
   **행마다 급여 입력칸의 x 위치가 어긋났다.** 격자를 부모에 한 번만 얹는다. */
.pay-tbl{display:grid;grid-template-columns:1.2fr 150px 130px auto;column-gap:10px}
.pay-row{display:contents}
.pay-row>span{padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-body);
  min-width:0;display:flex;align-items:center;gap:6px}
.pay-row:last-child>span{border-bottom:0}
.pay-row>.row-act{flex-wrap:wrap;justify-content:flex-end}
.pay-tbl>p{grid-column:1/-1}   /* '불러오는 중…' 같은 안내문은 격자를 가로지른다 */
.pay-row input{width:100%;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);
  background:var(--surface);font:inherit;font-family:var(--mono);font-size:var(--au-fs-sm)}
.pay-row input:disabled{background:var(--surface2);color:var(--sub)}
.f-narrow{max-width:200px}

/* 쿼터 관리 표 */
.qtable{margin-top:12px;border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow-x:auto}
.qhead,.qline{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(90px,1fr));
  gap:10px;align-items:center;padding:10px 12px}
.qhead{background:var(--surface2);border-bottom:1px solid var(--line);font-size:var(--au-fs-xs);font-weight:800;color:var(--ink2)}
.qline{border-bottom:1px solid var(--line)}
.qline:last-child{border-bottom:0}
.qname{display:flex;flex-direction:column;font-size:var(--au-fs-sm);font-weight:700}
.qname>i{font-style:normal;font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub);font-weight:400}
.qline input{width:100%;padding:6px 8px;border:1px solid var(--line2);border-radius:var(--au-radius-sm);
  background:var(--surface);font:inherit;font-family:var(--mono);font-size:var(--au-fs-xs)}

/* ── 앱 셸 (키트 치수) ── */
#app{display:grid;grid-template-columns:var(--au-sidebar-w) 1fr;min-height:100vh}
.side{background:var(--surface2);border-right:1px solid var(--line);padding:20px 0;
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.side .wm{font-size:18px;font-weight:800;padding:0 22px 18px;display:flex;align-items:center}
.side .wm b{color:var(--au-primary)}
#nav{flex:1 1 auto;overflow-y:auto;padding:0 12px}
#nav a{padding:9px 12px;border-radius:var(--au-radius-sm);color:var(--ink2);font-size:var(--au-fs-body);margin:2px 0}
#nav a:hover{background:var(--surface)}
#nav a.on{background:var(--au-primary-weak);color:var(--brand-d);font-weight:700}
/* 잠긴 기능(준비 중·권한 없음)도 메뉴에는 보인다.
   ⚠ 흐린 회색으로 죽이지 않는다 — 글자는 본문과 같은 대비로 읽히게 두고, '상태'는 태그가 말한다.
      (UI-SPEC §4: 읽는 텍스트는 dim 이상, faint 는 라벨 전용. 회색조로 상태를 표현하지 않는다.) */
#nav a{display:flex;align-items:center;justify-content:space-between;gap:8px}
#nav a.muted{color:var(--ink2)}
#nav a.muted:hover{background:var(--surface)}
#nav a .tag{flex:0 0 auto;font-style:normal;font-size:var(--au-fs-xs);font-weight:700;letter-spacing:.02em;
  color:var(--brand-d);background:var(--au-primary-weak);border:1px solid transparent;
  border-radius:var(--au-radius-pill);padding:2px 7px;white-space:nowrap}
#nav a[data-k="admin"] .tag{color:#8a4a10;background:var(--accent-t)}  /* 사무국 전용 = 보조색 계열 */
.side-foot{flex:0 0 auto;padding:14px 16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:var(--au-topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:0 var(--au-content-pad);border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h2{margin:0;font-size:20px;font-weight:800}   /* §3: 페이지 제목 전 페이지 동일 20 */
.topbar-right{margin-left:auto;color:var(--sub)}
.content{flex:1 1 auto;overflow-y:auto;padding:var(--au-content-pad);max-width:var(--au-content-max);
  width:100%;margin:0 auto}   /* max-width 만 주면 초광폭에서 본문이 왼쪽에 쏠린다 */

/* ── 상태 배지 (§4 의미색) ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--au-fs-xs);font-weight:700;
  padding:3px 9px;border-radius:var(--au-radius-pill);white-space:nowrap;flex:0 0 auto}
.badge.ok{background:#e4f1ea;color:var(--au-ok)}
.badge.warn{background:#f6ecd7;color:var(--au-warn)}
.badge.danger{background:#f6e3e0;color:var(--au-danger)}
.badge.info{background:#e3ecf7;color:var(--au-info)}
.badge.muted{background:var(--surface2);color:var(--sub)}

/* ── 카드·쿼터 미터 ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--au-radius);padding:16px 18px;margin:0 0 var(--au-gap,20px)}
.card h3{margin:0 0 12px;font-size:var(--au-fs-section);font-weight:800;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}   /* 제목 옆 배지·버튼이 넘치면 다음 줄로 */
.card h3:not(:first-child){margin-top:18px}
.qrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.qrow:last-child{border-bottom:0}
.qrow .qlabel{flex:0 0 140px;font-size:var(--au-fs-sm)}
.qrow .qbar{flex:1;height:8px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.qrow .qbar>i{display:block;height:100%;background:var(--au-primary)}
.qrow .qbar>i.over{background:var(--au-danger)}
.qrow .qnum{flex:0 0 auto;font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub)}

/* ── 블러 미리보기 (잠긴 기능·미합류) ──
   안쪽은 전부 클라이언트가 만든 '예시' 데이터다. 실데이터를 가리는 용도가 아니다
   (권한 없는 사용자에겐 서버가 애초에 데이터를 주지 않는다 — 블러는 보안장치가 아님). */
.peek{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:var(--au-radius-sm);overflow:hidden}
.peek-body{filter:blur(4px);opacity:.55;pointer-events:none;user-select:none;padding:6px 14px;min-height:120px}
.peek-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.85))}
.peek-note{text-align:center;padding:14px 18px}
.peek-note p{margin:8px 0 12px;font-size:var(--au-fs-sm);color:var(--ink);max-width:44em;line-height:1.6}

/* ── 데이터 행 (.row) vs 블러 미리보기 행 (.mock-row) ──
   ⚠ 둘을 같은 클래스로 쓰면 안 된다. .mock-row 는 '흐릿한 예시'로 보이라고 12px·mono·dim 이다.
      그런데 실데이터(잔여 연차·발송 건수·가입일·초대코드 상태)를 여기에 그리고 있었다 —
      그 화면에서 제일 중요한 값이 제일 작고 흐리게 나왔다(§3 본문 14px · §4 회색조로 상태표현 금지 위반). */
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-body)}
.row:last-child{border-bottom:0}
.row>span{min-width:0}
.row b{color:var(--ink)}
/* 반복되는 보조 줄(소속·반려사유·발송건수 등) — 인라인 style 8곳을 대체. 12px+faint 로 죽이지 않는다. */
.sub-line{display:block;font-style:normal;font-size:var(--au-fs-sm);color:var(--ink2)}
.code-line{display:block;font-style:normal;font-family:var(--mono);font-size:var(--au-fs-sm);
  color:var(--ink2);word-break:break-all}

.mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--au-fs-sm)}
.mock-row:last-child{border-bottom:0}
.peek .mock-row b{font-family:var(--mono);font-size:var(--au-fs-xs);color:var(--sub)}

/* 모바일(≤1024px) — 사이드바를 접어서 인라인으로 채우려 했던 예전 방식은 실패였다:
   .side 를 flex-row 로 눕히면 #nav(세로 목록 하나로 설계된)도 같이 눕는 게 아니라
   #nav 자체가 별도로 display:flex;flex-wrap:wrap 였어서 항목 전부가 알약처럼 줄바꿈되며
   화면 전체를 뒤덮었다 — 실제 콘텐츠를 보려면 그 전부를 스크롤해서 지나쳐야 했다(2026-07-24 발견).
   대신 사이드바를 **오프캔버스 드로어**로 만든다: 기본은 화면 밖(translateX)에 숨고,
   햄버거를 누르면 슬라이드 인 + 스크림. 데스크톱의 세로 목록 레이아웃은 그대로 유지된다
   (#nav 의 flex-wrap 오버라이드를 아예 없앤 것 — 그게 사고 원인이었다). */
/* ⚠⚠ .side-scrim 은 반드시 position:fixed 를 **뷰포트 폭과 무관하게 항상** 갖고 있어야 한다.
   #app 은 display:grid;grid-template-columns:2개 인데, .side-scrim 이 포지션 없는 평범한
   블록 자식으로 들어가면 그리드 자동배치가 그걸 2번째 그리드 아이템으로 먹어버리고
   .main 이 3번째 아이템이 되어 **암묵적 2번째 행, 1번째 열**(사이드바 폭·뷰포트 높이 아래)로
   밀려난다 — 데스크톱 포함 전 화면에서 본문이 통째로 사라지는 사고(2026-07-24, 배포 직후 발견).
   position:fixed/absolute 자식은 그리드 자동배치 대상에서 빠지므로, 이 규칙은 미디어 쿼리
   안에 두면 안 된다(그 폭에서만 그리드 흐름을 벗어난다 = 나머지 폭에서는 여전히 사고 남). */
.side-scrim{display:none; position:fixed; inset:0; background:rgba(22,18,26,.4); z-index:54}
#app.side-open .side-scrim{display:block}

@media(max-width:1024px){
  #app{grid-template-columns:1fr}
  .side{
    position:fixed; top:0; left:0; height:100vh; width:min(84vw,320px);
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
    z-index:55; box-shadow:2px 0 24px rgba(22,18,26,.18);
  }
  #app.side-open .side{transform:translateX(0)}
  .hamb-out{display:inline-flex}  /* 모바일은 항상 닫힌 채 시작 — '열기' 버튼이 늘 보여야 한다 */
  #auth{grid-template-columns:1fr}
  .auth-brand{padding:32px 24px}
}
@media(max-width:1024px) and (prefers-reduced-motion:reduce){ .side{transition:none} }

/* 편집 폼의 '찾기' 링크 — 빈 칸을 채우려면 결국 찾아봐야 한다. 찾는 곳으로 가는 길을 옆에 둔다.
   ⚠ 값을 자동으로 넣지는 않는다. 검색 1위가 공식 사이트라는 보장이 없다(위키·채용공고가 흔하다). */
.fnd{float:right;font-family:var(--au-font);font-size:var(--au-fs-xs);font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--au-primary)}
.fnd:hover{text-decoration:underline}

/* ── 회의실 예약 (rooms.js) ──
   그리드 셀은 색+제목(title)으로 상태를 알린다. 색약 대비: 차단은 빗금, 내 예약은 브랜드색으로
   채도까지 달리한다 — 색상만으로 구분하지 않는다(§9 접근성). */
.rooms-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rooms-week{display:flex;align-items:center;gap:10px;white-space:nowrap}
.rooms-grid{table-layout:fixed}
.rooms-grid th{text-align:center}
.rooms-grid .rg-t{font-family:var(--au-font);font-weight:600;color:var(--sub);text-align:right;
  white-space:nowrap;width:52px;font-size:var(--au-fs-xs)}
td.rg{height:26px;border:1px solid var(--line);padding:0}
td.rg.free{background:var(--surface,#fff);cursor:pointer}
td.rg.free:hover{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand)}
td.rg.past{background:var(--surface2);cursor:default}
td.rg.busy{background:#d1cad6}
td.rg.mine{background:var(--brand);cursor:pointer}
td.rg.mine.pend{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand);cursor:pointer}
td.rg.blk{background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 4px,#d1cad6 4px,#d1cad6 8px);cursor:default}
.rg-key{display:inline-block;width:14px;height:14px;vertical-align:-2px;border:1px solid var(--line);margin-left:8px}
.rg-key.free{background:var(--surface,#fff)}
.rg-key.mine{background:var(--brand)}
.rg-key.mine.pend{background:var(--brand-t);box-shadow:inset 0 0 0 1px var(--brand)}
.rg-key.busy{background:#d1cad6}
.rg-key.blk{background:repeating-linear-gradient(45deg,var(--surface2),var(--surface2) 4px,#d1cad6 4px,#d1cad6 8px)}
.book-form{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface2)}
.book-form h3{margin-bottom:10px}
/* 드래그 범위 선택 — 선택 중/선택된 칸. free 규칙보다 뒤에 두어 이긴다 */
.rooms-grid{user-select:none;-webkit-user-select:none}
td.rg.sel{background:var(--brand-t);box-shadow:inset 0 0 0 2px var(--brand)}
/* 층별 도면 오버레이 */
.plan-btn{margin-left:10px;vertical-align:1px}
.plan-ov{position:fixed;inset:0;background:rgba(22,12,26,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.plan-box{background:var(--surface,#fff);border-radius:14px;width:min(1080px,100%);max-height:92vh;overflow:auto;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.plan-box img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:10px}