/* =====================================================================
   src3/styles.css — 3.0 화면
   ★ 2026-09-18 다듬기 시안이 이긴다 — `docs/mock/자문상세-확정-0918.html` ·
     `docs/mock/목록세화면-확정-0918.html`(9/15·9/16 시안·규격과 겹치면 이 둘이 이긴다).
     토큰이 바뀌었다: 본문 15px · 페이지 제목 30px · 회색 글자 14px 이상 ·
     **배경·상자·선 대신 여백**으로 덩어리를 나눈다 · 상태는 색 배지 대신 **점 하나**.
   옛 src/styles.css 를 복사하지 않았다 — 이 화면에 필요한 것만 새로 적는다.
   ===================================================================== */
:root{
  --blue:#0070D2; --red:#D61E24; --orange:#A25F00; --green:#257C53;
  --l1:rgba(0,0,0,.88); --l2:rgba(0,0,0,.56); --l3:rgba(0,0,0,.55);
  --f1:rgba(0,0,0,.10); --f2:rgba(0,0,0,.08); --f3:rgba(0,0,0,.05); --f4:rgba(0,0,0,.03);
  --side:#F7F7F5; --line:rgba(0,0,0,.08);
  --soft:#F7F7F5; --hover:rgba(0,0,0,.04); --dot:#C9CCD1;
}
*{box-sizing:border-box}
/* ★ display 를 따로 준 칸(.modal·.gate·#app…)도 hidden 이면 반드시 숨는다 */
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--l1); background:#fff; -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1{font-size:30px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}
h2{font-size:17px;margin:0}
.muted{color:var(--l2)} .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.rrnnote{font-size:14px;color:var(--l2);margin:4px 0 2px}   /* 주민번호 가림 안내 한 줄(app.js rrnShow · 칸 아래) */
.link{background:none;border:0;color:var(--blue);padding:0;text-decoration:underline}
.sm{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.sm:hover{background:var(--f4)}
.primary{height:34px;padding:0 16px;border:0;border-radius:8px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:600}
.msg{min-height:18px;margin-top:10px;font-size:14px;color:var(--red)}
.one{font-size:14px;color:var(--l2);margin:0 0 10px}

/* ---- 관문 화면(로그인·코드) ---- */
.gate{display:flex;align-items:center;justify-content:center;height:100%;background:var(--side)}
.gate .card{width:320px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.gate input{display:block;width:100%;height:32px;margin-bottom:8px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;min-width:0}
.gate input:focus{outline:none;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
.gate .primary{width:100%;height:32px;border-radius:8px}
.gate .link{display:block;margin:10px auto 0;font-size:13px}
/* 「처음 쓰는 법 ↗」 — 로그인 전 화면 오른쪽 위 모서리 한 개(카드 밖 · 페이지 기준 고정 · 2026-09-29) */
.gguide{position:fixed;top:14px;right:16px;z-index:5;display:inline-flex;align-items:center;height:28px;padding:0 12px;
  border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13px;color:var(--l2);text-decoration:none}
.gguide:hover{background:var(--f4);color:var(--l1)}
/* 로그인 카드 하단 약관·처리방침 한 줄(2026-09-26) — 회색 14px */
.gate .legal{margin-top:14px;text-align:center;font-size:14px;color:var(--l2)}
.gate .legal a{color:inherit;text-decoration:underline}
/* ---- Google 로그인 · 계정 만들기 · 비밀번호 찾기(2026-09-26 · 시안 구글로그인-시안-확정) ---- */
.gate .msg:empty{min-height:0;margin-top:0}
.gate .msg.inl{min-height:0;margin:6px 0 2px}
.gate .fgt{display:flex;justify-content:flex-end;margin:-2px 0 10px}
.gate .fgt button{background:none;border:0;padding:0;font-size:14px;color:var(--l2)}
.gate .fgt button:hover{text-decoration:underline}
.gate .or{display:flex;align-items:center;gap:10px;color:var(--l2);font-size:14px;margin:14px 0}
.gate .or::before,.gate .or::after{content:'';flex:1;border-top:1px solid var(--line)}
.gate .sub{font-size:14px;color:var(--l2);margin:0 0 10px}
.gate .sub.tight{margin-bottom:2px}
.gate .hint{font-size:14px;color:var(--l2);margin:-4px 0 8px}
.gate .msg.inl + .hint{margin-top:0}
.gate .second{display:block;width:100%;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;margin-top:8px}
.gate .second:hover{background:var(--f4)}
.gate input.pre{background:rgba(0,136,255,.04)}
.gate .lock{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:8px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--f4);color:var(--l2);font-size:14px}
.gate .lock .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gate .lock .k{color:var(--l2);white-space:nowrap}
.gate .lock svg{flex:0 0 auto;width:14px;height:14px}
.gate .done{font-size:14px;color:var(--l2);margin:4px 0 12px}
.gate .done b{color:var(--l1);font-weight:600}
/* Google 단추 — Google 표기 규정 그대로(흰 바탕 · #747775 테두리 · 컬러 G · 500 14px · #1F1F1F · 두 줄 금지) */
.gbtn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:32px;padding:0 34px;
  background:#fff;border:1px solid #747775;border-radius:4px;color:#1F1F1F;white-space:nowrap;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:14px;font-weight:500;letter-spacing:.1px}
.gbtn:hover{background:#F8FAFF}
.gbtn .g{position:absolute;left:11px;top:50%;margin-top:-9px;width:18px;height:18px}
.gmark{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* 설정 › 내 계정 「로그인 방법」 한 줄(보기만) */
.meth{display:inline-flex;align-items:center;white-space:nowrap}
.meth + .mdot{margin:0 6px;color:var(--l2)}
/* 2단계 인증 처음 등록 — 기존 코드 카드 안의 그림 한 장 */
.mfaqr{text-align:center;margin:0 0 10px}
.mfaqr img{width:160px;height:160px}
.mfaqr .mono{margin-top:4px;word-break:break-all;color:var(--l2);font-size:14px}
/* 휴대폰(390) — 카드가 폭을 채우고 칸·단추는 44px(시안 -폰) */
@media (max-width:480px){
  .gate{padding:24px 16px}
  .gguide{position:absolute;top:12px;right:16px}    /* 좁으면 카드 위 오른쪽 끝 한 줄 — 카드와 겹치지 않게 위 여백을 늘린다 */
  .gguide:not([hidden]) ~ .gate{padding-top:56px}
  body .gate .card,body .gate .card.wide{width:100%;max-width:400px}
  .gate input,.gate .primary,.gate .second,.gate .gbtn{height:44px;font-size:16px}
  .gate .lock{height:44px}
  .gate .gbtn .g{width:20px;height:20px;margin-top:-10px;left:13px}
}

/* ---- 뼈대 ---- */
#app{display:flex;height:100%}
#side{width:232px;flex:0 0 232px;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px 10px}
#side .brand{font-weight:600;font-size:14px;padding:6px 8px 14px}
/* 제품 이름 뒤 「beta」(화면 사양 v0.14 3절 · 2026-09-27) — 이름과 같은 줄 회색 14px · 굵기 400 · 소문자 · 사이 6px ·
   inline 이라 이름과 기준선이 같다 · 가운뎃점·알약·배경 없음. 사이드바·로그인 카드 공용(좁은 폭에서는 .brand 와 함께 숨는다) */
.brand-beta{font-size:14px;font-weight:400;color:var(--l3);text-transform:lowercase;margin-left:6px;letter-spacing:0}
/* ⌕ 찾기 — 사이드바 맨 위 한 칸(단축키를 모르는 사람이 눈으로 찾는 길) */
.findbox{display:flex;align-items:center;gap:8px;width:100%;height:32px;margin:0 0 12px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;font-size:14px;color:var(--l2)}
.findbox:hover{background:var(--f4)}
.findbox .ic{color:var(--l3)}
.findbox .tx{flex:1;min-width:0}
.findbox .kbd{font-size:14px;color:var(--l3);border:1px solid var(--line);border-radius:4px;padding:0 5px;
  line-height:18px;background:var(--f4)}
.navi{display:flex;align-items:center;width:100%;height:32px;padding:0 10px;margin-bottom:2px;
  border:0;border-radius:6px;background:none;text-align:left;font-size:14px;color:var(--l2)}
.navi.on{background:rgba(0,0,0,.06);color:var(--l1);font-weight:600}
.badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--red);color:#fff;font-size:13px;line-height:18px;text-align:center}
/* 「처음 쓰는 법 ↗」 — 사이드바 맨 아래 한 줄(이름·로그아웃 줄 바로 위 · 새 탭 · 늘 보임) */
#side .sguide{margin-top:auto;padding:8px 8px 0;font-size:13px;color:var(--l3);text-decoration:none}
#side .sguide:hover{color:var(--l1);text-decoration:underline}
#side .who{font-size:14px;color:var(--l2);padding:8px}
#side .who .link{margin-left:8px;font-size:14px}
#main{flex:1;min-width:0;display:flex;flex-direction:column;padding:26px 48px 40px;overflow:auto}
/* 화면 머리 — 큰 제목(30px) + 오른쪽 주 단추 하나. 회색 한 줄 요약은 바로 아래 칸이다 */
#top{display:flex;align-items:flex-end;gap:10px;margin-bottom:6px}
#top h2{font-size:30px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
/* 상세를 열면 큰 제목이 둘이 된다 — 상세의 제목(30px)이 그 자리를 맡으므로 화면 제목은 숨긴다 */
body.csdet #top h2,body.codet #top h2{display:none}
#top .add{margin-left:auto}       /* [＋ 새 항목] — 제목 줄 오른쪽 */
#top .pm{position:relative}

/* ---------------------------------------------------------------------
   ① 홈 요약 한 줄 (2026-09-21 · `docs/mock/홈요약-시안-확정.html`)
   ---------------------------------------------------------------------
   제목 아래 **한 줄**(상자가 아니다). 왼쪽에 숫자 다섯, 오른쪽 끝에 회색 기록 상태.
   줄 전체가 눌려 접히고 펼쳐지고, 펼치면 아래에 묶음 넷이 **들여쓰기로** 딸린다.
   --------------------------------------------------------------------- */
.rec{display:block;padding:0;margin:0 0 14px;border:0;background:none}
.rec .homeline{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 20px;
  font-size:14px;color:var(--l2);padding:6px 8px;border-radius:8px;cursor:pointer}
.rec .homeline:hover{background:var(--hover)}
.rec .sp{flex:1}
.rec b{font-weight:600}
/* 숫자 — 이름은 15px 보통, **숫자만 굵게**. 0 이면 이름까지 회색, 기한 지남 숫자만 빨강 */
.rec .hn{border:0;background:none;padding:0;font-size:15px;color:var(--l1);line-height:1.45}
.rec .hn .n{font-weight:700;margin-left:5px}
.rec .hn:hover{text-decoration:underline}
.rec .hn.z{color:var(--l3)}
.rec .hn.z .n{color:var(--l3)}
.rec .hn.late .n{color:var(--red)}
.rec .hn.z.late .n{color:var(--l3)}
/* 다섯이 모두 0 일 때의 한 줄 · 기록 상태 둘(이상 없음 회색 · 이상 있으면 빨강) */
.rec .calm{font-size:15px;color:var(--l2)}
.rec .recok{font-size:14px;color:var(--l3)}
.rec .recbad,.rec .recbad b{color:var(--red)}
.rec .car{font-size:14px;color:var(--l3)}
/* 펼친 묶음 넷 — 사이는 가는 선 하나, 상자가 없다 */
.rec .homegrp{margin:2px 0 6px;padding:0 12px 4px}
.rec .gp{padding:8px 0;border-top:1px solid var(--line)}
.rec .gp:first-child{border-top:0}
.rec .gh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--l3);padding:2px 0 4px}
.rec .gh .mr{margin-left:auto;border:0;background:none;padding:0;
  font-size:13px;font-weight:600;color:var(--blue)}
.rec .gr{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;
  padding:6px 4px;border-radius:7px;font-size:14.5px;cursor:pointer}
.rec .gr:hover{background:var(--hover)}
.rec .gr.gray,.rec .gr.gray .w{color:var(--l3)}
.rec .gr .ic{text-align:center;font-size:14px;color:var(--l2)}
.rec .gr .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec .gr .tt .at{font-weight:600;color:var(--l2);margin-right:8px}   /* 일정 = 시각 + 제목 */
.rec .gr .co{color:var(--l2)}
.rec .gr .w{font-size:14px;color:var(--l3);text-align:right}
.rec .gr .w.late{color:var(--red);font-weight:600}
.rec .gr .none{color:var(--l3);font-size:14px}
/* 좁은 화면 — 숫자가 두 줄로 접히고 기록 상태는 아래 회색 한 줄(가로 스크롤 없음) */
@media (max-width:640px){
  .rec .homeline{gap:8px 16px;padding:6px 2px}
  .rec .hn{font-size:14.5px}
  .rec .sp{flex:0 0 100%;height:0}
  .rec .homegrp{padding:0 2px 4px}
}
/* 목록 아래 회색 안내 한 줄 — 미분류 칩이 켜졌는데 500줄에 닿았을 때 */
.listnote{padding:10px 2px 0;font-size:14px;color:var(--l3)}
.rec .err{color:var(--red)}
.rec .warn{color:var(--orange)}         /* 메일 연결 오늘·내일 만료 — 끊김(빨강)보다 한 단계 약하게 */
.rec .proc{color:var(--l2)}
/* 알아서 가져오는 중 · 처리하는 중 — 회색 + 작은 회전 표시(단추가 아니다) */
.rec .busy{color:var(--l2)}
.rec .busy::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;
  border:2px solid var(--l3);border-top-color:var(--blue);border-radius:50%;vertical-align:-1px;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rec .busy::before{animation:none}}

/* ---- 보낸 곳별로 모아 정리(옛 화면 28번) — 상자가 아니라 **회색 한 줄** ---- */
.grpbar{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l2);
  padding:0;margin:0 0 14px;border:0;background:none}
/* 창 안 묶음 목록 — 칸을 나누는 것은 줄 하나뿐이다(배경 없이 여백으로) */
.grplist{margin-top:10px;max-height:46vh;overflow:auto}
.grpit{padding:10px 0;border-top:1px solid var(--line)}
.grpit:first-child{border-top:0}
.grpit .hd{display:flex;align-items:baseline;gap:8px;font-size:14px;min-width:0}
.grpit .hd .n{font-size:14px;color:var(--l2);flex:0 0 auto}
.grpit .hd .who{font-size:14px;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grpit .sub{font-size:14px;color:var(--l2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grpit .btns{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.grpit .pkbox{margin-top:8px}
.modal .note.warn{color:var(--orange);background:none;padding:8px 0 0}
.hlp{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border:1px solid var(--l3);border-radius:8px;font-size:14px;color:var(--l2);background:#fff;cursor:help}

/* ---- 칩 ---- */
/* position:relative — 고객사 거르기 창(.dd)이 이 줄을 기준으로 **떠서 겹친다** */
.chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:10px 0}
.chips .grp{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chips .lbl{font-size:14px;color:var(--l2);margin-right:2px}
.chip{height:26px;padding:0 11px;border:1px solid var(--line);border-radius:13px;background:#fff;font-size:13px}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chips .sep{width:1px;height:16px;background:var(--line);margin:0 4px}
.chips .grp.view{margin-left:auto}      /* 보기 전환은 칩 줄 오른쪽 끝 */
.chip .car{font-size:13px;margin-left:5px;opacity:.7}
/* 고른 것이 있는 칩 — 연한 파랑(시안). .on(파랑 채움) 보다 뒤에 두어 둘 다일 때 이것이 이긴다 */
.chip.sel{background:rgba(0,136,255,.10);border-color:var(--blue);color:var(--blue)}

/* ---------------------------------------------------------------------
   ★ 2026-09-18 — 화면 도구줄은 **칩 줄이 아니라 노션식 보기 탭**이다.
   왼쪽 = 보기 탭(`.grp.tabs`, 밑줄로 고른 것을 보인다) · 오른쪽 = 거르기 ▾ 글자 단추.
   칩 부품(`.chip`)은 그대로 두고(새 항목 창·설정 화면이 쓴다) **도구줄 안에서만** 모양을 갈아입힌다.
   --------------------------------------------------------------------- */
#chips,#csChips,#coChips,#coTlChips,#sxChips,#libChips,#tkChips{gap:4px;margin:0 0 6px;border-bottom:1px solid var(--line);flex-wrap:nowrap}
#chips .sp,#csChips .sp,#coChips .sp,#coTlChips .sp,#sxChips .sp,#libChips .sp,#tkChips .sp{flex:1}
#chips .sep,#csChips .sep,#coChips .sep,#coTlChips .sep{display:none}
#chips .lbl,#csChips .lbl,#coChips .lbl,#coTlChips .lbl{font-size:14px;color:var(--l3)}
#chips .chip,#csChips .chip,#coChips .chip,#coTlChips .chip,#sxChips .chip,#libChips .chip,#tkChips .chip{
  height:32px;padding:0 10px;border:0;border-radius:6px;background:none;font-size:14px;color:var(--l2)}
#chips .chip:hover,#csChips .chip:hover,#coChips .chip:hover,#coTlChips .chip:hover,#sxChips .chip:hover,#libChips .chip:hover,#tkChips .chip:hover{background:var(--hover)}
#chips .chip.on,#csChips .chip.on,#coChips .chip.on,#coTlChips .chip.on,#sxChips .chip.on,#libChips .chip.on,#tkChips .chip.on{
  color:var(--l1);font-weight:600;background:var(--f2)}
#chips .chip.sel,#csChips .chip.sel,#coChips .chip.sel,#libChips .chip.sel{color:#0067c2;background:rgba(0,136,255,.10)}
/* [내 담당] — 도구줄에서 **알약 하나**로 선다(다른 탭·거르기와 모양이 다르다) */
#csChips .chip.pillm{height:28px;padding:0 12px;border:1px solid var(--line);border-radius:14px}
#csChips .chip.pillm:hover{background:var(--f4)}
#csChips .chip.pillm.on{background:rgba(0,136,255,.10);border-color:var(--blue);color:#0067c2;font-weight:600}
/* 왼쪽 보기 탭 — 밑줄 하나로 고른 것을 보인다(상자·채움 없음) */
.chips .grp.tabs{gap:2px}
.chips .grp.tabs .chip{height:auto;padding:8px 10px;border-radius:0;margin-bottom:-1px;
  border-bottom:2px solid transparent}
.chips .grp.tabs .chip:hover{background:none;color:var(--l1)}
.chips .grp.tabs .chip.on{background:none;border-bottom-color:var(--l1)}
.chips .grp.tabs .chip .n{color:var(--l3);font-weight:400;margin-left:4px;font-size:14px}
/* [미분류] 칩 — 건수는 **홈 요약의 미분류 숫자와 같은 조건**이다(app.js `unfiledPass`) */
.chips .grp.none .chip .n{color:var(--l3);font-weight:400;margin-left:4px;font-size:14px}
.chips .grp.none .chip.on .n{color:inherit}
.chips .grp.view{margin-left:0}         /* 오른쪽 몰기는 `.sp` 가 한다 */

/* ---- 고객사 거르기 창 — 칩 줄 위에 **떠서 겹친다**(목록을 밀어 내리지 않는다) ---- */
.dd{position:absolute;left:0;top:34px;z-index:30;width:300px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);overflow:hidden}
.dd .in{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.dd .in input{flex:1;border:0;outline:none;font:inherit;min-width:0}
.dd .in .ic{color:var(--l3)}
#coList{max-height:280px;overflow:auto}
.dd .it{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;cursor:pointer}
.dd .it:hover,.dd .it.cur{background:var(--f3)}
.dd .it .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .it .sub{color:var(--l2);font-size:14px;margin-left:2px;white-space:nowrap}
.dd .it .n{margin-left:auto;font-size:14px;color:var(--l2);white-space:nowrap}
.dd .none{padding:10px 12px;font-size:14px;color:var(--l2)}
.dd .mark{background:#fff3c4}
.dd .ft{display:flex;align-items:center;gap:8px;padding:6px 12px;border-top:1px solid var(--line);
  font-size:14px;color:var(--l2);background:var(--f4)}
.dd .ft .link{font-size:13px;margin-left:auto}

/* ---- 여러 줄 고르기 ---- */
.bulkbar{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 10px;
  border:1px solid var(--blue);border-radius:8px;font-size:13px;background:rgba(0,136,255,.06)}
/* [한 대화로 묶기] 는 두 줄 이상 골랐을 때만 눌린다 */
.bulkbar button[disabled]{opacity:.42;cursor:default}
.bulkbar button[disabled]:hover{background:#fff}
/* 「자문에서 빼기」 한 줄(2026-09-29) — 막대 아래로 한 줄 더 */
.bulkbar.wrap{flex-wrap:wrap}
.bulkbar .unl{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* ---- 목록 — 세 화면(수신함·자문·고객사)이 **같은 한 줄**을 쓴다(2026-09-18 시안) ----
   한 줄 = 아이콘 · 고객사 · 제목(+회색 요지) · 상태 점 · 날짜.
   선·상자를 걷어 내고 **여백과 둥근 hover** 로 줄을 나눈다. 덩어리는 날짜 구분줄이 나눈다. */
.list{border-top:0}
/* 시간순 보기의 날짜 구분 줄 — 스레드 보기에는 없다(고객사 개요의 `.list.tl .day` 와 같은 모양) */
#list .day{font-size:14px;color:var(--l3);padding:16px 10px 4px;font-weight:600;border-bottom:0}
.row{display:flex;align-items:center;gap:14px;padding:10px;border-bottom:0;border-radius:8px;
  font-size:15px;color:var(--l2)}
.row:hover{background:var(--hover)}
.row.unread .subj{font-weight:600;color:var(--l1)}
.row.reply{padding-left:44px}
.row.skip .subj,.row.skip .from{text-decoration:line-through;opacity:.55}
.row.open{background:var(--f4)}
.row .sel{margin:0}
.row .ch{width:20px;text-align:center;position:relative;flex:0 0 20px;font-size:15px;opacity:.75}
.row .ch .dot{color:var(--blue);font-size:9px;position:absolute;right:-3px;top:-4px}
.row .from{flex:0 0 108px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .co{flex:0 0 104px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .co.none{color:var(--orange)}
/* 줄의 세 상태(2026-09-19 · 0046) — 미분류 / 고객사+"나만" / 고객사+"넘김" */
.row .co .only{margin-left:5px;font-size:13px;color:var(--l3)}
.row .co .shd{margin-left:5px;font-size:13px;color:var(--blue)}
/* 제목 칸 — **늘어나는 칸**(그 밖은 고정 폭). 2026-09-26 v0.7 점검 — 1150px 에서 70px 남짓으로
   잘리던 것을 고쳤다(고객사·유형 칸을 줄이고, 좁은 폭에서 날짜→유형 순으로 숨긴다) */
.row .subj{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l1)}
.row .go{margin-left:4px;color:var(--blue);text-decoration:none;font-size:13px}
.row .thr{font-size:14px;color:var(--l3);margin-left:8px;font-weight:400}   /* 시간순 보기의 ↩ 답장 */
.row .room{font-size:14px;color:var(--l3);margin-left:8px;font-weight:400}  /* 카톡 대화방 이름 */
.row .tp{font-size:14px;color:var(--l3);margin-left:8px;font-weight:400}    /* 화제 · 이어짐 */
.row .date{flex:0 0 118px;font-size:14px;color:var(--l3);font-weight:400;text-align:right;white-space:nowrap}
/* 상태 = **점 하나 + 낱말**(색 배지가 아니다). 색은 `dotClass()` 한 곳이 정한다 */
.row .kd{flex:0 0 88px;height:auto;padding:0;border:0;border-radius:0;background:none;
  display:flex;align-items:center;gap:6px;font-size:14px;font-weight:400;color:var(--l2);text-align:left}
.row .kd::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:4px;background:var(--dot)}
.row .kd.undec::before{background:none;box-shadow:inset 0 0 0 1.5px var(--l3)}
.row .kd.lock{cursor:default}
.row .more{flex:0 0 24px;width:24px;height:24px;border:0;border-radius:12px;background:none;color:var(--l2)}
.row .more:hover,.row .more.on{background:var(--f2)}
.rowwrap{position:relative}
/* 상태 점 — 세 화면 공통 부품(파랑=할 일 · 빨강=기한 지남 · 초록=끝남 · 회색=그 밖) */
.d-todo::before{background:var(--blue) !important}
.d-late{color:var(--red) !important}
.d-late::before{background:var(--red) !important;box-shadow:none !important}
.d-done::before{background:var(--green) !important}

/* ---- 그 자리에서 뜨는 작은 메뉴 ---- */
.menu{position:absolute;right:0;z-index:30;min-width:190px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:4px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menu.row-menu{top:30px}
#top .menu{top:30px;right:0}
/* 도구줄의 거르기 ▾ 메뉴 — 그 단추 바로 아래에서 뜬다 */
.chips .pm{position:relative}
.menu.kind-menu{top:36px;left:0;right:auto;min-width:140px}
.menu .mi.on{font-weight:600;background:var(--f3)}
.mi{display:block;width:100%;height:28px;padding:0 10px;border:0;border-radius:6px;
  background:none;text-align:left;font-size:13px;font-weight:400;color:var(--l1)}
.mi:hover{background:var(--f3)}
.mi.sepline{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;height:32px}
/* 흐린 메뉴 줄 아래 안내 한 줄(Lv2 끝내기 — 기획 v0.4) */
.menu .mi.mihint{height:auto;padding:0 12px 6px;font-size:14px;color:var(--l2);cursor:default;background:none}
/* 권한이 모자라 누를 수 없는 자리 — 단추가 아니라 회색 글이다 */
.mi.off{height:auto;padding:5px 10px;color:var(--l2);font-size:14px;line-height:1.4;white-space:normal}
.mi.off:hover{background:none}
.mi[disabled]{color:var(--l3)}

/* ---- 줄 펼침(아코디언) ---- */
.det{padding:10px 12px 14px 56px;border-bottom:1px solid var(--line);background:var(--f4);font-weight:400;color:var(--l1)}
/* 본문 칸은 내용을 따라 늘고 준다 — 최소 80px · 최대 화면 높이의 60%(그 위는 칸 안에서 스크롤) */
.det .full pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;max-height:60vh;overflow:auto}
.det iframe{width:100%;height:320px;min-height:80px;max-height:60vh;display:block;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.det .files{margin-top:8px;font-size:14px}
.det .files .link{margin-right:8px}
/* 사람이 만든 줄 — 펼친 자리에서 제목·날짜·내용을 그대로 고친다(0039). 새 항목 창과 같은 칸 모양 */
.det .edit .f{margin-top:10px}
.det .edit .f:first-child{margin-top:0}
.det .edit .lbl{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--l2);margin-bottom:4px}
.det .edit .lbl .st{margin-left:auto;font-weight:400;color:var(--l2)}
.det .edit .row2{display:flex;gap:10px}
.det .edit .row2>*{flex:1;min-width:0}
.det .edit input[type=text],.det .edit input[type=datetime-local]{width:100%;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;min-width:0;background:#fff}
.det .edit textarea{width:100%;min-height:120px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5;background:#fff}
.det .edit .done{font-size:13px;color:var(--green);font-weight:400}
.det .edit .hint{font-size:14px;color:var(--l2);margin-top:6px}
.det .edit .hint.warn{color:var(--orange)}
.det .memo{margin-top:10px;display:flex;gap:6px;align-items:flex-start}
.det .memo textarea{flex:1;min-height:44px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;resize:vertical}
.det .dacts{margin-top:10px;display:flex;gap:6px;align-items:center}
.det .imgs img{max-width:260px;max-height:200px;border:1px solid var(--line);border-radius:6px;margin:6px 6px 0 0}
/* 메일로 받은 줄(녹음·카톡·문자) — **출처** 회색 한 줄(오른쪽 끝에 원래 메일 보기) */
.det .via{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--l2);margin-bottom:8px}
.det .via .link{font-size:14px}
.det .via .lbl{color:var(--l3)}
.det .via .src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det .via .rt{margin-left:auto;white-space:nowrap}
/* 서버가 못 알아본 내 메일 — 왜 지나쳤나. 회색 한 줄이다(붉은 상자가 아니다) */
.det .vsk{margin:0 0 8px}
.det .vdup{margin:0 0 8px}
/* 원문이 그림인 줄 — "캡처에서 읽음" 한 줄 + 보낸 그림(최대 폭 320px · 눌러 원본) */
.det .cap{margin-bottom:8px}
.det .cap .one{margin:0 0 6px}
.det .cap .shots{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.det .cap .shot{padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;line-height:0;overflow:hidden}
.det .cap .shot:hover{border-color:var(--blue)}
.det .cap .shot img{display:block;max-width:320px;max-height:320px;width:auto;height:auto}
/* 녹음 줄 — 글자로 바꾼 결과(또는 회색 안내 한 줄). 붉은 오류 상자를 세우지 않는다 */
.det .stt{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.det .stt .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.det .stt .one{font-size:14px}
.det .stt pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;max-height:40vh;overflow:auto}
.det .stt .talk{max-height:40vh;overflow:auto;font-size:13px}
.det .stt .talk .m{display:flex;gap:8px;padding:2px 0}
.det .stt .talk .m .w{color:var(--l2);flex:0 0 76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det .stt .acts{margin-top:8px;display:flex;gap:6px;align-items:center}

/* ---- 모달 · 토스트 ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;z-index:100}
.modal .box{width:420px;max-width:92vw;background:#fff;border-radius:12px;padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.22)}
/* 표를 함께 보여 주는 창(과거 기록 가져오기) — 넓고 안에서 굴러간다 */
.modal .box.wide{width:860px;max-height:80vh;overflow:auto}
.modal h3{margin:0 0 10px;font-size:16px}
.modal .lbl{font-size:14px;color:var(--l2);margin:10px 0 4px}
.modal select,.modal input,.modal textarea{width:100%;height:32px;padding:0 8px;
  border:1px solid var(--line);border-radius:8px;min-width:0}
.modal textarea{height:80px;padding:6px 8px}
.modal .note{margin:10px 0 0;font-size:14px;color:var(--l2);
  background:var(--f4);border-radius:8px;padding:8px 10px}
.modal .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
.modal .who{font-size:14px;color:var(--l2);margin-bottom:10px}

/* ---- 고르기 창(공용 부품) — 검색칸 하나 + 목록. 시안 그대로 ---- */
.pk{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pk .in{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px}
.modal .pk .in input{flex:1;border:0;outline:none;font:inherit;min-width:0;height:auto;padding:0;width:auto}
.pk .in .ic{color:var(--l3)}
.pk .in .hint{font-size:14px;color:var(--l3);white-space:nowrap}
.pk .hd{font-size:14px;color:var(--l2);padding:8px 12px 4px}
.pk .it{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:14px;cursor:pointer}
.pk .it:hover,.pk .it.on{background:var(--f3)}
.pk .it .ic{width:18px;text-align:center;color:var(--l2);flex:0 0 18px}
.pk .it .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk .it .sub{font-size:14px;color:var(--l2);margin-left:4px;white-space:nowrap}
.pk .it .tag{margin-left:auto;font-size:13px;color:var(--l2);background:var(--f3);border-radius:4px;padding:1px 6px}
.pk .mk{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:14px;background:var(--f4);
  border-top:1px solid var(--line);cursor:pointer;color:var(--l1)}
.pk .mk:hover,.pk .mk.on{background:var(--f3)}
.pk .mk .plus{width:18px;text-align:center;color:var(--l2)}
.pk .mk b{font-weight:600}
.pk .none{padding:10px 12px;font-size:14px;color:var(--l2)}
.pk .mark{background:#fff3c4}
.pk>div:not(.in){max-height:320px;overflow:auto}

/* ---- 찾기 창(find.js) — 고르기 창 껍데기를 넓힌 모양 ---- */
.modal.fdm{align-items:flex-start;padding-top:12vh}       /* 가운데 **위쪽** */
.modal.fdm .box{width:620px;padding:0;background:none;box-shadow:none}
.modal.fdm .pk.fd{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18)}
.pk.fd .in{padding:12px 14px;font-size:15px}
.pk.fd>div:not(.in){max-height:52vh}
.pk.fd .it .tag{background:none;color:var(--l3);font-size:14px}
.pk.fd .it .nm{flex:0 1 auto}
.pk.fd .hd{padding:10px 14px 4px}
.pk.fd .it{padding:8px 14px}
/* 창 바닥 회색 한 줄 — 찾는 범위를 여기 한 줄로만 밝힌다(설명 문단을 두지 않는다) */
.pk.fd .foot{max-height:none;overflow:visible;border-top:1px solid var(--line);
  padding:8px 14px;font-size:14px;color:var(--l3);background:var(--f4)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;
  background:rgba(0,0,0,.82);color:#fff;font-size:13px;padding:8px 14px;border-radius:16px}
/* 무동작 자동 로그아웃 — 만료 5분 전 화면 아래 작은 띠 하나(배경 없이 여백으로) */
.idlebar{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:210;
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:8px 10px 8px 16px;font-size:14px;color:var(--l2);
  box-shadow:0 6px 20px rgba(0,0,0,.10)}
.idlebar .sm{height:28px}
/* 서비스 해지 안내 한 장 — 관문 카드를 그대로 쓰고 글자만 다르다 */
.pgwarn{display:inline-block;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;
  background:rgba(229,72,77,.10);color:var(--red);margin:4px 0 8px}
.pglist{margin:0 0 12px;padding:0;list-style:none;font-size:14px;color:var(--l2)}
.pglist li{margin:4px 0}
.pgacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---- 새 항목 창(④) — 시안 `docs/mock/새항목창-시안.html` 그대로 ---- */
#ni{z-index:90}                       /* 고르기 창(#modal · z 100)이 이 위에 뜬다 */
#ni .box{width:560px;max-height:92vh;overflow:auto}
.ni h3{display:flex;align-items:center;margin:0;font-size:16px}
.ni h3 .st{margin-left:auto;font-size:14px;color:var(--l2);font-weight:400}
.ni .f{margin-top:12px}
.ni .f .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.ni .f input[type=text],.ni .f input[type=datetime-local]{width:100%;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;min-width:0}
.ni .f textarea{width:100%;height:auto;min-height:120px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5}
.ni .row2{display:flex;gap:10px}
.ni .row2>*{flex:1;min-width:0}
.ni .chips{margin:0;gap:4px}
.ni .chip{height:26px;padding:0 10px}
.chip.on.ch{background:#1d7a46;border-color:#1d7a46;color:#fff}   /* 채널 칩 — 시안의 초록 */
.ni .hint{font-size:14px;color:var(--l2);margin-top:4px}
.ni .hint.warn{color:var(--orange)}
.ni .done{font-size:13px;color:var(--green);font-weight:400}
/* 나눈 줄 미리보기 — 새 항목 창과 줄 펼침(고치기)이 **같은 모양**을 쓴다 */
.prev{margin-top:6px;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;
  font-size:13px;background:var(--f4);max-height:200px;overflow:auto}
.prev .m{display:flex;gap:8px;padding:2px 0}
.prev .m .t{color:var(--l3);flex:0 0 52px}
.prev .m .w{color:var(--l2);flex:0 0 66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev .me .w{color:var(--blue)}
.ni .fold{font-size:14px;color:var(--l2);margin-top:12px}
.ni .acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.ni .acts .save{font-size:14px;color:var(--l2)}
.ni .acts .primary{margin-left:auto}
#niCoBox .pk{border-radius:8px}
#niCoBox .pk>div:not(.in){max-height:180px}

/* =====================================================================
   ③ 자문 — 목록 + 상세 (시안 `docs/mock/자문화면-시안2-확정.html`)
   ===================================================================== */
#vCases{display:flex;flex-direction:column;min-height:0;flex:1}
#csList{flex:0 0 auto}
/* ★ v14 — 상세의 두 기둥은 **고정 75vh(최소 480px)** 이고 각자 스크롤한다.
   띠가 길어지면 **페이지 하나만** 스크롤된다(옛 판은 띠 안 스크롤과 겹쳐 보였다). */
body.csdet #vCases{flex:0 0 auto;min-height:0}
#csDet{flex:0 0 auto;display:flex;flex-direction:column}
#csChips .csq{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  width:210px;min-width:0;font-size:14px;background:var(--f4)}
#csChips .csq:focus{outline:none;background:#fff;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}

/* ---- 목록 — 수신함·고객사와 **같은 한 줄**(2026-09-18 시안) ---- */
.csrow{display:flex;align-items:center;gap:14px;padding:10px;border-bottom:0;border-radius:8px;
  font-size:15px;color:var(--l2);cursor:pointer}
.csrow:hover{background:var(--hover)}
/* 여러 건 골라 지우기 — 체크칸은 수신함 줄(`.row .sel`)과 같은 자리·같은 크기다 */
.csrow .sel,.csq .sel{margin:0;flex:0 0 auto}
.csrow .tw{flex:0 0 20px;width:20px;height:20px;border:0;border-radius:10px;background:none;
  color:var(--l3);font-size:14px;padding:0}
.csrow button.tw:hover{background:var(--f2)}
/* 목록 오른쪽 위 ⋯ · 그 단추가 남기는 회색 한 줄(v14) */
#csChips .pmr{position:relative}
.csnote2{flex-basis:100%;font-size:14px;color:var(--l2);padding:4px 2px 0}
.csrow .co{flex:0 0 130px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l1);font-weight:600}
.csrow .nm .sub{margin-left:8px;font-weight:400;color:var(--l3);font-size:14px}
.csrow .nm .n{margin-left:8px;font-weight:400;color:var(--l3);font-size:14px;
  background:none;border-radius:0;padding:0}
.csrow .who{flex:0 0 90px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 담당 — 제목 다음·상태 앞. 작은 동그라미(이름 첫 글자) + 이름, **내 것은 진하게** */
.csrow .adv,.csq .adv{flex:0 0 108px;display:flex;align-items:center;gap:6px;font-size:14px;
  overflow:hidden;white-space:nowrap}
.csrow .adv .av,.csq .adv .av{flex:0 0 20px;width:20px;height:20px;border-radius:10px;background:var(--f2);
  color:var(--l2);font-size:13px;line-height:20px;text-align:center}
.csrow .adv .nm2,.csq .adv .nm2{color:var(--l2);overflow:hidden;text-overflow:ellipsis}
.csrow .adv .nm2.me,.csq .adv .nm2.me{color:var(--l1);font-weight:600}
.csrow .adv .none,.csq .adv .none{color:var(--l3)}
.csrow .date{flex:0 0 118px;font-size:14px;color:var(--l3);text-align:right;white-space:nowrap}
/* 상태 = 점 하나 + 낱말 */
.csrow .stt,.csq .stt{flex:0 0 96px;font-size:14px;display:flex;align-items:center;gap:6px}
.csrow .stt::before,.csq .stt::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:4px;background:var(--dot)}
.csrow .due{flex:0 0 96px;font-size:14px;color:var(--l3);text-align:right}
/* 기한이 지나면 **빨간 알약** */
.over{color:#c4282d;background:rgba(229,72,77,.10);border-radius:10px;padding:1px 8px;
  font-size:12.5px;font-weight:600}
/* ---- ① 녹음 올리기(옛 화면 32) — 수신함 녹취 칸과 같은 모양 ---- */
.csrec{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--l2)}
.csrec>.one,.csrec>.lbl,.csrec>.talk,.csrec>pre,.csrec>.acts{flex-basis:100%}
.csrec .lbl{font-size:14px;color:var(--l2);margin-bottom:0}
.csrec pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;max-height:40vh;overflow:auto}
.csrec .talk{max-height:40vh;overflow:auto;font-size:13px}
.csrec .talk .m{display:flex;gap:8px;padding:2px 0}
.csrec .talk .m .w{color:var(--l2);flex:0 0 76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrec .acts{display:flex;gap:6px;align-items:center}
.csq{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 44px;border-bottom:0;border-radius:8px;
  font-size:14px;color:var(--l2);cursor:pointer;background:none}
.csq:hover{background:var(--hover)}
.csq .qn{flex:0 0 84px;color:var(--l3);font-size:14px}
.csq .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l2)}
.csq .nm .sub{margin-left:8px;color:var(--l3);font-size:14px}
.csq .date{flex:0 0 72px;font-size:14px;color:var(--l3);text-align:right}
.csq .due{flex:0 0 96px;text-align:right;font-size:13px}

/* ---- 상세 ---- */
.csd{display:flex;flex-direction:column;flex:0 0 auto}
.csd-h{flex:0 0 auto}
/* ---- 고정 머리 — 속성 세 줄이 **스크롤 영역**(#main) 위로 나가면 그 영역 맨 위에 붙는다 ----
   보기 전용이다(단추는 [↑ 맨 위] 하나). `position:sticky` 라 두 기둥 배치는 그대로다. */
/* ★ 자리를 **차지하지 않는다**(`margin-bottom:-52px`) — 나타날 때 아래 글이 밀리면
   속성 세 줄이 다시 보였다 사라졌다 하며 깜빡인다. 좌우 음수 여백은 스크롤 영역 폭에 맞추는 것이다. */
/* `top:-26px` 는 `#main` 의 위 안쪽 여백(26px)을 되돌려 **영역 맨 위**에 딱 붙이는 값이다
   (붙는 자리는 스크롤 영역의 안쪽 상자 기준이라 여백만큼 내려간다. #main 의 padding 을 고치면 함께 고친다). */
.csd .csfix{position:sticky;top:-26px;z-index:20;height:52px;display:flex;align-items:center;gap:8px;
  margin:0 -48px -52px;padding:0 48px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.05);font-size:14px;cursor:pointer}
.csd .csfix .ttl{font-weight:700;color:var(--l1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:42%}
.csd .csfix .k{color:var(--l3);font-size:14px}
.csd .csfix .v{color:var(--l1);white-space:nowrap}
.csd .csfix .d{color:var(--l3)}
.csd .csfix .pill.st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;font-size:13px;white-space:nowrap}
.csd .csfix .pill.st::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--dot)}
.csd .csfix .g{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.csd .csfix .top{margin-left:auto;flex:0 0 auto}
/* 좁아지면 담당을 빼고, 더 좁으면 고객사도 뺀다 — 제목·상태·기한은 남는다(사양 2-3) */
@media (max-width:1100px){.csd .csfix .g-adv{display:none}}
@media (max-width:860px){.csd .csfix .g-co{display:none}}
.csd .top{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l2);margin-bottom:8px}
.csd .top .crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd .top .crumb b{color:var(--l1)}
.csd .top .saved{margin-left:auto;font-size:14px;color:var(--l2)}
.csd .top .pm{position:relative}
.csnote{font-size:14px;margin:0 0 8px;padding:6px 10px;border-radius:8px;background:var(--f4)}
.csnote.warn{color:var(--orange)}
/* 저절로 채워진 질의 한 줄 — 회색 안내다(붉은 상자가 아니다 · v15) */
.csnote.auto{color:var(--l2)}
.csnote.auto .link{font-size:14px}
/* 검토 요청 임시 열람 한 줄(0050 · D) — 같은 회색 한 줄이다 */
.csnote.share{color:var(--l2)}
.csnote.share .link{font-size:14px}
.csnote.share .muted{color:var(--l3)}
/* [검토 요청] 창 — 고르기 창(붙박이) + 메모 한 칸 */
.csrv{margin-top:10px}
.csrv textarea{width:100%;min-height:64px;margin-top:10px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}
.csrv .note.warn{color:var(--orange)}
#csRvBox .pk{border-radius:8px}
#csRvBox .pk>div:not(.in){max-height:180px}
/* 머리 첫 줄 — 제목 30px + 상태 배지(점 하나 + 낱말) */
.csd .titleline{display:flex;align-items:center;gap:12px;margin:8px 0 6px}
.csd .title{font-size:30px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--l1)}
.csd .pmw{position:relative;white-space:nowrap}
.csd .tdate{color:var(--l2);font-size:14px;white-space:nowrap}
.csd .tags{display:inline-flex;gap:8px;flex-wrap:wrap}
.csd .tags span{color:#4b5563;font-size:14px;font-weight:600}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:13.5px;
  background:rgba(0,136,255,.12);color:#0067c2;border:0}
.pill.red{background:rgba(229,72,77,.10);color:#c4282d;font-weight:600;font-size:12.5px}
.pill.gray{background:var(--f3);color:var(--l2)}
.pill.ch{background:#eefbf3;color:#1d7a46}
button.pill{cursor:pointer}
/* 제목 옆 상태 배지 — 점 하나가 앞선다 */
.csd .titleline .pill.st{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;font-size:13.5px}
.csd .titleline .pill.st::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--blue)}
.st-menu{top:28px;left:0;right:auto;min-width:120px}
/* 요지 — 제목 아래 한 줄: 회색 「요지」 + 진한 값(칸이지만 상자로 보이지 않는다 · 2026-09-28 머리 시안) */
.csd .aka{font-size:15px;color:var(--l3);margin:0 0 20px;display:flex;align-items:baseline;gap:10px;max-width:776px}
.csd .aka b{font-weight:400;font-size:14px;color:var(--l3);flex:0 0 auto}
.csd .aka input{flex:1;min-width:0;border:1px solid transparent;border-radius:6px;padding:1px 6px;margin-left:-6px;
  background:none;font:inherit;font-size:15px;color:var(--l1)}
.csd .aka input::placeholder{color:var(--l3)}
.csd .aka input:hover{border-color:var(--line)}
.csd .aka input:focus{outline:none;border-color:var(--blue);background:#fff;color:var(--l1)}
/* 속성 — 이름 위(회색 14) · 값 아래(진하게 15/500), 같은 폭 세 칸(240 · 사이 28) × 두 줄.
   본문 폭 776 아래(창 폭 약 1060 아래)는 같은 폭 두 칸 × 세 줄(아래 @media) */
.csd .meta.B{display:grid;grid-template-columns:repeat(3,240px);gap:14px 28px;margin:4px 0 0}
.csd .meta.B .p{min-width:0}
.csd .meta.B .k{display:block;font-size:14px;color:var(--l3);font-weight:400;line-height:1.4}
.csd .meta.B .v{display:flex;align-items:center;gap:6px;min-height:28px;white-space:nowrap;font-size:15px;
  font-weight:500;color:var(--l1)}   /* overflow 는 두지 않는다 — 담당 고르기 창(`csAdvPk`)이 이 칸 아래로 뜬다 */
.csd .meta.B .v a.cogo{color:var(--l1);text-decoration:none;border-bottom:1px dotted var(--l3)}
.csd .meta.B .v .advbtn{font-weight:500}
@media (max-width:1060px){ .csd .meta.B{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px} }
/* 세부 정보 줄 — 「세부 정보 ▸」 뒤 이름 회색 · 값 진하게, 값 있는 항목만 */
.csd .more{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;color:var(--l3);font-size:14px;margin:18px 0 0}
.csd .more .fx{color:var(--l2);font-weight:600}
.csd .more .kv{white-space:nowrap}
.csd .more .kv .k{color:var(--l3);margin-right:6px}
.csd .more .kv .v{color:var(--l1);font-weight:500}
.csd .more .mbox{flex:0 0 100%}
/* 머리가 끝나는 선 — 의견이 있으면 의견 아래, 없으면(협업 꺼짐) 세부 정보 아래 */
.csd .csd-h{border-bottom:1px solid var(--line);padding-bottom:22px}
.fx{border:0;background:none;padding:0;color:inherit;font:inherit}
.fx:hover{text-decoration:underline}
.csd .mbox{margin-top:6px;font-size:14px;color:var(--l2);background:var(--f4);border-radius:8px;padding:8px 10px}
.csd .mbox>div{margin:2px 0}

/* 두 기둥 — **고정 75vh(최소 480px)** · 각자 스크롤(v14) */
/* ★ 2026-09-21 — `position:relative` 는 **⑭ 참고 서랍**(배치 ⓒ)의 기준 칸이다.
   서랍은 이 틀 안에서 왼쪽 질의 기둥 위에 겹치고, 답변 기둥은 폭도 높이도 그대로다. */
.csd .cols{position:relative;flex:0 0 auto;height:75vh;min-height:480px;display:grid;
  grid-template-columns:1fr 1fr;gap:40px;padding-bottom:12px}
/* ★ 2026-09-18 — 기둥을 감싸던 **상자와 배경을 걷어 냈다**. 두 기둥을 가르는 것은 여백뿐이다
   (높이 75vh · 각자 스크롤하는 v14 규칙은 그대로다 — 스크롤바가 하나여야 한다). */
.csd .col{border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column;
  min-height:0;position:relative;background:#fff}
.csd .colh{display:flex;align-items:center;gap:10px;padding:10px 0 10px;background:none; /* 2026-09-28 — 머리가 위 줄에 붙지 않게 위 여백 10px */
  border-bottom:1px solid var(--line);margin-bottom:14px}
.csd .colh h2{font-size:18px;margin:0;font-weight:700}
.csd .colh small{font-weight:400;color:var(--l3);font-size:14px}
/* 답변 카드 머리 「이도현 → 박과장」 — 수신함 보낸 사람 칸과 같은 색(우리 쪽·화살표 회색 · 고객 쪽 진하게) */
.csd .colh .csadir{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 0 auto;max-width:45%}
/* 머리가 좁으면 상태 글자가 먼저 줄어들고(방향 표시는 칸의 45% 까지), 「답변」·단추는 꺾이지 않는다 */
.csd .colh h2,.csd .colh .btns,.csd .colh .btns>*{flex-shrink:0;white-space:nowrap}
.csd .colh small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 100 auto}
.csd .colh .csadir .me,.csd .colh .csadir .ar{color:var(--l3);font-weight:400}
.csd .colh .csadir .ar{margin:0 3px}
.csd .colh .csadir .rc{color:var(--l1);font-weight:600}
.csd .colh .btns{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.btn.pri{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600;padding:0 16px}
/* [검토 요청] — 글자 단추(테두리도 채움도 없다). 서버(0050)가 있으면 임시 열람 창을 연다 */
.btn.gray{color:var(--l2);background:none;border-color:transparent;padding:0 12px}
.btn.gray:hover{background:var(--hover)}
.csd .scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.csd .sec{padding:0;border-bottom:0;margin-bottom:28px}
.csd .sec h6{margin:0 0 6px;font-size:14px;color:var(--l2);font-weight:600}
/* 메일 머리 — 연회색 칸 하나(선 대신 바탕) */
.csd .hdr{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;font-size:14px;color:var(--l3);
  padding:14px 16px;background:var(--soft);border-bottom:0;border-radius:10px;margin-bottom:14px}
.csd .hdr b{color:var(--l1);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.csd .body{font-size:15px;line-height:1.8}
.csd .body pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.csd .imgs img{max-width:260px;max-height:200px;border:1px solid var(--line);border-radius:6px;margin:6px 6px 0 0}
.csd .att{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:14px}
.csd .att span,.csd .att .fl{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;
  color:var(--l2);background:#fff}
.csd .att.files{display:block;margin-top:8px}.csd .att.files .link{margin-right:8px}  /* 2026-09-28 첨부 줄 = 수신함 `.det .files` 와 같은 간격 */
/* 유선 자리 — ① 원문 바로 아래의 큰 단추 둘(v14) */
.csd .phacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:14px}
.csd .phacts .btn{height:34px;padding:0 14px;font-size:14px}
.csd .qt{margin-top:8px;font-size:14px;color:var(--l2)}
.csd .qt pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font:inherit;
  background:var(--f4);border-radius:8px;padding:8px 10px;max-height:30vh;overflow:auto}
.csd .sec textarea{width:100%;min-height:90px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5;background:#fff}
.csd .ai{background:none;border:1px dashed rgba(0,0,0,.14);border-radius:10px;padding:12px 14px;
  font-size:14px;color:var(--l2)}
.csd .ai.none{background:none;border-style:dashed;border-color:rgba(0,0,0,.14);color:var(--l2)}
.csd .ai>div{margin:2px 0}
.csd .ai .foot{display:flex;align-items:center;gap:8px;margin-top:6px}
.csd .ai .foot .sm{margin-left:auto}
.csd .via-in{padding:0 0 10px;background:transparent;border-bottom:0}
/* 사슬 — **항목마다 토글 한 줄**(└ 답변 · 답변 없음 · 유선 자리는 그대로) */
.csd .fold{padding:10px 0;border-bottom:0;background:none;font-size:14px;color:var(--l2)}
.csd .fold .sm2{margin-left:8px;opacity:.75}
/* 사슬 띠 — v11: 왼쪽 기둥 안이 아니라 **자문 이름 아래 · 두 기둥 위** 전체 폭 한 칸.
   ★ v14 — 띠에는 **높이 제한도 스크롤도 없다**. 내용만큼 늘어나고 두 기둥을 아래로 민다.
   길어지면 **페이지가** 스크롤된다 — 그래야 스크롤바가 하나뿐이다. */
/* ★ 2026-09-18 — 띠는 **세로 타임라인**이다. 상자·바탕 대신 왼쪽 선 하나와 점,
   지금 보는 질의는 파랗게 칠한다. 동작(토글·220px 안 스크롤·유선 자리)은 그대로다. */
.csd .chain{padding:0;font-size:14px;background:none}
.csd>.chain.band{flex:0 0 auto;margin:22px 0 4px;border:0;border-radius:0}
.csd>.chain.band[hidden]{display:none}
.csd .chain .sec-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;
  color:var(--l2);margin:0 0 8px}
.csd .chain .sec-h .n{font-weight:400;color:var(--l3)}
.csd .chain .flow{border-left:2px solid var(--line);margin-left:6px;padding-left:18px}
.csd .chain .cq{position:relative;display:flex;align-items:center;gap:12px;padding:7px 10px;
  border-radius:8px;cursor:pointer}
.csd .chain .cq::before{content:"";position:absolute;left:-25px;top:14px;width:10px;height:10px;
  border-radius:5px;background:#fff;border:2px solid var(--dot)}
.csd .chain .cq:hover{background:var(--hover)}
.csd .chain .cq.me{font-weight:400;cursor:default}
.csd .chain .cq.now{background:rgba(0,136,255,.06)}
.csd .chain .cq.now::before{border-color:var(--blue);background:var(--blue)}
.csd .chain .cq.now:hover{background:rgba(0,136,255,.06)}
.csd .chain .cq .tw{flex:0 0 14px;color:var(--l3);text-align:center}
.csd .chain .cq .qn{flex:0 0 74px;color:var(--l2);font-size:14px}
.csd .chain .cq .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.csd .chain .cq .nm .sub{margin-left:6px;font-weight:400;color:var(--l3);font-size:14px}
.csd .chain .cq .say{flex:1;color:var(--orange)}
.csd .chain .cq .date{color:var(--l3);font-size:14px;white-space:nowrap}
.csd .chain .cq .who{flex:0 0 100px;color:var(--l3);font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:right}
.csd .chain .cq.now .who{color:var(--blue);font-weight:600}
.csd .chain .cq .go{flex:0 0 auto;font-size:14px}
.csd .chain .ca{display:flex;align-items:center;gap:12px;padding:4px 10px 4px 32px;color:var(--l2);
  border-radius:8px;cursor:pointer}
.csd .chain .ca:hover{background:var(--hover)}
.csd .chain .ca .tw{flex:0 0 14px;color:var(--l3);text-align:center}
.csd .chain .ca .date{margin-left:8px;font-size:14px;color:var(--l3)}
.csd .chain .cn{padding:0 10px 4px 92px;color:var(--l3);font-size:14px}
.csd .chain .cq.ph .sm{height:26px;padding:0 10px;font-size:13.5px}
/* 토글을 열면 **그 자리에서** 펴진다(다른 화면으로 넘어가지 않는다).
   ★ v15 — 펼친 항목의 글 칸은 **220px 까지**이고 넘치면 **그 칸 안에서** 스크롤한다
   (사용자 지시 2026-09-16 · v14 의 "스크롤 없음" 을 갈음한다). 글자는 12.5px 그대로다.
   띠 자체·페이지 규칙은 v14 그대로이므로 여러 항목을 펴도 저마다 220px 이하라
   다음 항목 줄(`└ 답변(2)`)이 한눈에 남는다. */
.csd .chain .cbody{margin:2px 0 8px 22px;padding:7px 10px;background:#fff;border:1px solid var(--line);
  border-radius:8px;max-height:220px;overflow:auto}
.csd .chain .cbody.ans{margin-left:36px;background:var(--soft)}
/* 펼친 항목의 글자는 **12.5px 그대로**다(v15 사용자 지시) — 여러 항목을 펴도 다음 줄이 한눈에 남아야 한다 */
.csd .chain .cbody .body{font-size:12.5px;line-height:1.55}
.csd .chain .cbody .qimg img{max-width:180px;max-height:140px}
.csd .chain .cbody pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.csd .follow .fq{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.csd .follow .fh{display:flex;align-items:center;gap:8px;font-size:13px}
.csd .follow .fh .sm{margin-left:auto;height:22px;padding:0 8px;font-size:13px}
.csd .follow pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px}
/* 답변 기둥 — 편집칸이 기둥을 채우고 그 안에서 스크롤한다(페이지가 길어지지 않는다) */
.csd .ansed{flex:1;min-height:160px;margin:0 0 8px;padding:18px 20px;border:1px solid var(--line);
  border-radius:12px;resize:none;overflow:auto;line-height:1.8;font:inherit;font-size:15px;background:#fff}
.csd .sent{padding:0 2px;font-size:15px;line-height:1.8;flex:1;overflow:auto}
.csd .sent pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.csd .acts{display:flex;align-items:center;gap:8px;padding:0 0 10px;font-size:14px}
.csd .org{padding:10px 0;border-bottom:0}
.csd .org .f{margin-bottom:8px}
.csd .org .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.csd .org input{width:100%;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;min-width:0}
.csd .org textarea{width:100%;min-height:56px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5}
.csd .org .ai.small{font-size:13px}
.csd .sl{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--l2)}
.csd .sl .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l1)}
.csd .one{padding:8px 0;margin:0;font-size:14px}
/* 발송 서랍 — 답변 기둥 **안**에서 아래에서 올라온다(다른 화면을 덮지 않는다) */
.csd .drawer{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow:auto;z-index:20;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.12);padding:10px 12px 12px}
.csd .drawer .dh{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.csd .drawer .dh .sm{margin-left:auto}
.csd .drawer .f{margin-bottom:8px}
.csd .drawer .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.csd .drawer input{width:100%;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;min-width:0}
.csd .drawer textarea{width:100%;min-height:120px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5}
.csd .drawer .fls{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}
.csd .drawer .acts{padding:0;justify-content:flex-end}
@media (max-width:900px){ .csd .cols{grid-template-columns:1fr} }

/* =====================================================================
   ④ 고객사 — 목록 + 상세 (시안 `docs/mock/고객사화면-시안.html`)
   ===================================================================== */
#vCos{display:flex;flex-direction:column;min-height:0;flex:1}
#coDet{flex:1;min-height:0}
.coq{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  width:210px;min-width:0;font-size:14px;background:var(--f4)}
.coq:focus{outline:none;background:#fff;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
#coChips .grp.add{margin-left:0}
.chips.cotl .grp.find{margin-left:0}

/* ---- 목록 ---- */
.corow{display:flex;align-items:center;gap:14px;padding:10px;border-bottom:0;border-radius:8px;
  font-size:15px;color:var(--l2);cursor:pointer}
.corow:hover{background:var(--hover)}
/* 열 머리(v0.7) — 줄과 같은 칸 폭 · 회색 작은 글자 · 아래 한 줄 */
.corow.cohd{padding:6px 10px 6px;border-radius:0;border-bottom:1px solid var(--line);margin-bottom:4px;cursor:default}
.corow.cohd:hover{background:none}
.corow.cohd>span{font-size:14px;color:var(--l3);font-weight:500}
.corow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l1);font-weight:600}
.corow .nm .sub{margin-left:8px;font-weight:400;color:var(--l3);font-size:14px}
.corow .kinds{flex:0 0 76px;display:flex;gap:4px}
.corow .adv{flex:0 0 90px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「주담당 없음」 으로 걸렀을 때만 — 담당 칸 자리에 [주담당 지정] 한 단추(옛 화면 14 이관) */
.corow.nolead .adv{flex:0 0 98px;overflow:visible}
.corow .adv .lead{height:26px;padding:0 9px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:14px;color:var(--l2);white-space:nowrap}
.corow .adv .lead:hover{background:var(--f4);color:var(--l1)}
.corow .ctn{flex:0 0 110px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 2026-09-28 — 긴 이름(영문 병기)이 두 줄로 꺾여 줄 높이가 달라지던 것 · 한 줄 말줄임 */
.corow .last{flex:0 0 200px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 상태 = 점 하나 + 낱말(세 화면 공통) */
.corow .stt{flex:0 0 76px;font-size:14px;display:flex;align-items:center;gap:6px}
.corow .stt::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:4px;background:var(--dot)}
.pill.g{background:rgba(47,158,106,.12);color:#1d7a46}
/* ---- [＋ 새 메일] 창의 받는 사람 목록(옛 화면 29) ---- */
.comailto{max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px}
.comailto .it{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;font-size:14px}
.comailto .it:hover{background:var(--f4)}
.comailto .it input{width:auto;height:auto;margin:0}
.comailto .it .nm{color:var(--l1)}
.comailto .it .em{color:var(--l3);font-size:14px;margin-left:auto}

/* ---- 상세 머리 ---- */
.cod{display:flex;flex-direction:column;min-height:0}
.cod .top{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l2);margin-bottom:8px}
.cod .top .crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cod .top .crumb b{color:var(--l1)}
.cod .top .saved{margin-left:auto;font-size:14px;color:var(--l2)}
.cohead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 값처럼 보이는 칸 — 누르면 그 자리에서 고쳐진다(저장 단추가 없다).
   `field-sizing:content` 를 아는 판에서는 **글자만큼만** 넓어져 시안과 같아지고,
   모르는 판에서는 아래 width 가 그대로 쓰인다(둘 다 쓸 수 있다). */
.cohead .h1in{font-size:30px;line-height:1.3;font-weight:700;letter-spacing:-.01em;
  border:1px solid transparent;border-radius:8px;
  padding:2px 6px;background:none;flex:0 1 auto;height:auto;
  width:290px;min-width:120px;max-width:520px;field-sizing:content}
.cohead .shin{font-size:15px;color:var(--l2);border:1px solid transparent;border-radius:8px;
  padding:2px 6px;background:none;width:90px;min-width:44px;max-width:140px;field-sizing:content}
.coinfo .vin{field-sizing:content;min-width:100px}
.coinfo .vin.num{min-width:3em}
.coinfo .vin.dt{min-width:140px}
.cohead .h1in:hover,.cohead .shin:hover{border-color:var(--line)}
.cohead .h1in:focus,.cohead .shin:focus{outline:none;border-color:var(--blue);background:#fff}
.cohead .pmw{position:relative;white-space:nowrap}
.cohead .kinds{display:flex;gap:4px}
.cohead .ni{margin-left:auto}
.coinfo{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin:14px 0 6px;font-size:14px}
.coinfo .cell{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0;min-height:32px}
.coinfo .cell.wide{grid-column:1 / -1}
.coinfo .k{color:var(--l2);white-space:nowrap}
.coinfo .k.sla{margin-left:10px}
.coinfo .v{color:var(--l1);font-weight:500}
.coinfo .vin{border:1px solid transparent;border-radius:7px;padding:3px 7px;background:none;
  font:inherit;font-weight:500;min-width:0;width:170px}
.coinfo .vin.grow{flex:1;min-width:120px;width:auto}
.coinfo .vin.dt{width:140px}
.coinfo .vin.num{width:64px}
.coinfo .vin:hover{border-color:var(--line)}
.coinfo .vin:focus{outline:none;border-color:var(--blue);background:#fff}
.coinfo .vbtn{border:1px solid transparent;border-radius:7px;padding:3px 7px;background:none;
  font:inherit;font-weight:500;color:var(--l1)}
.coinfo .vbtn:hover{border-color:var(--line)}

/* ---- 권한자 목록(0046) — 누가 이 고객사를 보나 ---- */
.comem{margin:18px 0 2px;border:1px solid var(--line);border-radius:10px;background:#fff}
.comem .hd{display:flex;align-items:center;padding:8px 14px 6px;font-size:14px}   /* 대비 v1.1 — 회색 이름표·오른쪽 한 줄 14 */
.comem .hd .k{color:var(--l2)}
.comem .hd .rt{margin-left:auto;color:var(--l3)}
.comem .mrow{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);font-size:13.5px}
.comem .mrow .nm{font-weight:500;flex:0 0 100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comem .mrow .em{color:var(--l2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comem .mrow .pmw{position:relative}
.comem .mrow .rl{font-size:13px}
.comem .mrow .at{flex:0 0 140px;text-align:right;color:var(--l3);font-size:14px}
.comem .mrow .menu{top:26px;right:0;min-width:120px}
.comem .none{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);
  color:var(--l2);font-size:14px}
.comem .none button{margin-left:auto}
.comem .ft{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line)}
.comem .ft .hint{color:var(--l3);font-size:14px}

/* ---- 담당자 카드 ---- */
.cocts{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 4px}
.cocts .ct{position:relative;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:14px;min-width:210px;background:#fff;cursor:pointer}
.cocts .ct:hover{border-color:var(--blue)}
.cocts .ct .hd{display:flex;align-items:center;gap:4px}
.cocts .ct b{font-size:15px}
.cocts .ct .ti{color:var(--l2)}
.cocts .ct .star{color:#e0a800;margin-left:4px;font-size:13px;white-space:nowrap}
.cocts .ct .mb{margin-left:auto;width:20px;height:20px;border:0;border-radius:10px;background:none;color:var(--l3)}
.cocts .ct .mb:hover{background:var(--f2)}
.cocts .ct .m{color:var(--l2);margin-top:2px}
.cocts .ct.add{color:var(--l2);display:flex;align-items:center;justify-content:center;
  border-style:dashed;min-width:120px}
.cocts .ct.edit{cursor:default;min-width:340px;border-color:var(--blue)}
.cocts .ct.edit .r2{display:flex;gap:6px;margin-bottom:6px}
.cocts .ct.edit .r3{display:flex;gap:6px;justify-content:flex-end}
.cocts .ct.edit input{height:28px;padding:0 8px;border:1px solid var(--line);border-radius:7px;min-width:0;font:inherit}
.cocts .ct.edit .nm{flex:0 0 96px}
.cocts .ct.edit .ti{flex:0 0 72px;color:inherit}
.cocts .ct.edit .dp{flex:1;min-width:70px}
.cocts .ct.edit .em{flex:1;min-width:120px}
.cocts .ct.edit .ph{flex:0 0 120px}
.cocts .ct .menu{top:24px;min-width:150px}

/* ---- 세부 정보 ▸ — v14: 인라인 칸 → 인사 이슈 표 → 메모(맨 마지막) ---- */
.comore{color:var(--l2);font-size:14px;margin:6px 0 10px}
.comore .sm2{opacity:.7;margin-left:6px}
.comore .mbox{margin-top:8px;background:var(--f4);border-radius:8px;padding:10px 12px;
  display:flex;flex-direction:column;gap:10px}
.comore .mbox .f .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.comore .mbox input{width:100%;height:30px;padding:0 9px;border:1px solid var(--line);
  border-radius:8px;min-width:0;background:#fff}
.comore .mbox textarea{width:100%;min-height:56px;padding:6px 9px;border:1px solid var(--line);
  border-radius:8px;resize:vertical;line-height:1.5;background:#fff}
/* 회사 도메인(0048) — 회색 알약 · 점선 제안 칩 · 칸 옆 빨간 한 줄 */
.comore .codm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.comore .codm .lbl{flex:0 0 auto;font-size:14px;color:var(--l2);white-space:nowrap}
.comore .codm .v{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.comore .codm .dm{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 4px 0 10px;
  border-radius:13px;background:var(--f3);font-size:13.5px}
.comore .codm .dm .x{width:18px;height:18px;border:0;border-radius:9px;background:none;
  color:var(--l3);font-size:14px;line-height:1;padding:0}
.comore .codm .dm .x:hover{background:var(--f2);color:var(--l1)}
.comore .codm .sug{height:26px;padding:0 10px;border:1px dashed rgba(0,0,0,.2);border-radius:13px;
  background:none;color:var(--l2);font-size:14px}
.comore .codm .sug b{color:#0067c2;font-size:13px;font-weight:600}
.comore .codm .sug:hover{border-color:var(--blue)}
.comore .codm .add{border:0;background:none;color:var(--l3);font-size:14px;padding:0 2px}
.comore .codm .add:hover{color:var(--l1)}
.comore .codm .inw{display:inline-flex;align-items:center;gap:6px}
.comore .codm .inw input{width:220px;height:28px}
.comore .codm .inw .sm{height:28px;padding:0 10px;font-size:13px}
.comore .codm .err{color:var(--red);font-size:13px}
.comore .codm .err:empty{display:none}
.comore .codm .none{font-size:14px;color:var(--l3)}
.comore .codm .hint{flex-basis:100%;font-size:14px;color:var(--l3);margin-top:-4px}
/* 답변 기조 — 회사 도메인 다음 · 인라인 칸 위. 여러 줄 칸 + 규칙 한 줄(라이브러리 판) */
.comore .costance{margin:10px 0}
.comore .costance textarea{min-height:76px;line-height:1.7}
.comore .costance .hint{font-size:14px;color:var(--l3);margin-top:4px}
.modal .acts .sm.del{border-color:transparent;background:var(--red);color:#fff;font-weight:600}
/* 작은 인라인 칸 — 한 줄에 둘, 라벨은 회색 작은 글자 */
.comore .inl{display:flex;gap:16px;flex-wrap:wrap}
.comore .if{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0}
.comore .if.wide{flex:1 1 100%}
.comore .if .lbl{flex:0 0 auto;font-size:14px;color:var(--l2);white-space:nowrap}
/* 인사 이슈 표 */
.comore .iss{border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 10px}
.comore .iss .ih{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.comore .iss .ih .lbl{font-size:14px;color:var(--l2)}
.comore .iss .ih .sm{margin-left:auto;height:24px;padding:0 10px;font-size:13px}
.comore .iss .none{font-size:14px;color:var(--l3);padding:4px 2px}
.comore .iss .ir{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:4px 0;border-top:1px solid var(--line)}
.comore .iss .ir.done{color:var(--l3)}
.comore .iss .ir.done .ti,.comore .iss .ir.done .tp{color:var(--l3)}
.comore .iss .ir .ck{width:auto;height:auto;flex:0 0 auto}
.comore .iss .ir .dt{flex:0 0 140px;width:140px}
.comore .iss .ir .ti{flex:1 1 180px;min-width:0}
.comore .iss .ir .tp{flex:0 0 160px;width:160px;color:#4b5563}
.comore .iss .ir .pmw{position:relative;flex:0 0 auto}
.comore .iss .ir .mb{width:20px;height:20px;border:0;border-radius:10px;background:none;color:var(--l3)}
.comore .iss .ir .mb:hover{background:var(--f2)}
.comore .iss .ir .nt{flex-basis:100%;font-size:14px;color:var(--l2);padding:0 0 4px 26px}
.comore .iss .ir .menu{top:22px;min-width:150px}
.comore .iss .old{border-top:1px solid var(--line);padding-top:6px;margin-top:4px;font-size:13px}

/* ---- 유형 탭 ---- */
.cotabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:26px 0 6px;align-items:center}
.cotab{padding:8px 12px;font-size:14px;color:var(--l2);border:0;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:6px}
.cotab.on{color:var(--l1);font-weight:600;border-bottom-color:var(--l1)}
.cotab.dim{color:var(--l3)}
.cotab .n{font-size:14px;background:none;border-radius:0;padding:0;color:var(--l3);font-weight:400}
.cotabs .sp{flex:1}
.cotabs .gear{font-size:14px;color:var(--l2);border:0;background:none;padding:8px 4px}
.cotabs .gear:hover{text-decoration:underline}
.coempty{font-size:15px;color:var(--l2);padding:14px 4px}
.coempty.soon .l1{color:var(--l1)}
.coempty.soon .l2{margin-top:4px;font-size:14px;color:var(--l2)}
/* 개요 타임라인 끝 표시 — 회색 한 줄 + [더 보기] */
.tlend{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l3);padding:10px 10px 16px}
.tlend .sm{height:26px;padding:0 10px;font-size:14px;color:var(--l2)}
.gearlist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.gearlist .gi{display:flex;align-items:center;gap:8px;font-size:14px}
.gearlist .gi input{width:auto;height:auto}

/* ---- 개요 타임라인 — 수신함 줄 규약 그대로 ---- */
.chips.cotl{margin:14px 0 8px} /* 2026-09-28 — 탭 줄 위 여백(위 줄에 붙지 않게) */
.chips.cotl .grp.find{margin-left:auto}
.list.tl .day{font-size:14px;color:var(--l3);padding:16px 10px 4px;font-weight:600;border-bottom:0}
.list.tl .row .subj .sub{color:var(--l3);font-weight:400;margin-left:8px;font-size:14px}
.list.tl .row.plan,.list.tl .row.plan .subj{color:var(--l2)}
.list.tl .row .kd{flex:0 0 96px;text-align:left}
.list.tl .row .kd.pl::before{background:none;box-shadow:inset 0 0 0 1.5px var(--l3)}
.list.tl .det{padding-left:34px}
/* 2026-09-29 화면 묶음 A2 — 펼친 메일 줄의 머리 칸(자문 질의 머리 `.csd .hdr` 와 같은 모양 · 수신함 펼침도 같은 규칙) · 대화 「↩ N ▸」 단추 */
.det .hdr{display:grid;grid-template-columns:72px 1fr;gap:4px 12px;font-size:14px;color:var(--l3);
  padding:12px 16px;background:var(--soft);border-radius:10px;margin:2px 0 12px}
.det .hdr b{color:var(--l1);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list.tl .row .subj .thn{border:0;background:none;color:var(--l3);font:inherit;font-size:13px;height:20px;
  padding:0 6px;margin-left:6px;border-radius:6px;cursor:pointer}
.list.tl .row .subj .thn:hover,.list.tl .row .subj .thn.on{background:var(--f3);color:var(--l1)}
/* 여러 줄 막대 — 도구줄(#coTlChips)과 **격자 한 칸에 겹쳐** 선다(수신함 A1 `#bulk` 와 같은 모양 · 체크해도 목록이 밀리지 않는다) */
.cotlhead{display:grid}
.cotlhead>#coTlChips,.cotlhead>#coTlBulk{grid-area:1/1}
.cotlhead>#coTlBulk{position:relative;z-index:25;margin:0 0 6px;box-sizing:border-box;padding:0 10px;background:#eef5fd;
  align-self:stretch;flex-wrap:nowrap;overflow:visible}
.cotlhead>#coTlBulk.wrap{flex-wrap:wrap;padding:4px 10px;box-shadow:0 6px 16px rgba(0,0,0,.10)}
.cotlhead>#coTlBulk .sm{height:28px;border-radius:14px;padding:0 12px;white-space:nowrap}
.cocs{border-top:0}
/* 고객사 이름 링크 — 수신함 줄·자문 상세에서 고객사 화면으로 */
.cogo{color:inherit;text-decoration:none;border-bottom:1px dotted var(--l3)}
.cogo:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------------------------------------------------------------------
   개요 **달력 보기**(2026-09-19 · 시안 `docs/mock/고객사달력-시안-확정.html`)
   격자 껍데기는 공용 부품(`calgrid.js`)이 만들고 칸 안 모양만 여기서 칠한다.
   --------------------------------------------------------------------- */
.chips .grp.vtabs{gap:2px;flex:none}
@media (max-width:760px){ #coTlChips{flex-wrap:wrap} }
.cocalhd{display:flex;align-items:center;gap:4px;margin:2px 0 8px}
.cocalhd b{font-size:17px;margin-right:6px}
.cocalhd .sm{height:28px;padding:0 10px;border:0;background:none;color:var(--l2)}
.cocalhd .sm:hover{background:var(--f4)}
.cocal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);
  border-radius:10px;overflow:hidden;font-size:13px}
.cocal .dh{font-size:14px;color:var(--l3);padding:6px 10px;border-bottom:1px solid var(--line)}
.cocal .d{min-height:112px;padding:4px 6px 8px;border-top:1px solid var(--line);
  border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;
  min-width:0;position:relative}
.cocal .d:nth-child(7n+1){border-left:0}
.cocal .d.we{background:var(--f4)}                 /* 토·일은 아주 옅은 바탕 */
.cocal .n{font-size:14px;color:var(--l2);height:24px;display:flex;align-items:center;padding:0 2px}
.cocal .n.out{color:var(--l3);opacity:.6}          /* 이번 달 밖의 날은 흐리게 */
.cocal .n.t{width:24px;height:24px;border-radius:12px;background:var(--blue);color:#fff;
  justify-content:center;font-weight:700;padding:0}
.cocal .e,.cgpop .e{display:flex;align-items:center;gap:6px;font-size:13px;padding:2px 6px;
  border-radius:5px;white-space:nowrap;overflow:hidden;min-width:0;cursor:pointer}
.cocal .e:hover,.cgpop .e:hover{background:var(--f3)}
.cocal .e .i,.cgpop .e .i{flex:none;font-size:13px}
.cocal .e .tm,.cgpop .e .tm{flex:none;font-weight:600}
.cocal .e .tx,.cgpop .e .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cocal .e.plan,.cgpop .e.plan{background:rgba(240,140,0,.09);color:#8a4b00}   /* 예정 미팅 */
.cocal .e.busy,.cgpop .e.busy{background:var(--f3);color:var(--l2);cursor:default}
/* 상태 점 — 색 규칙은 `dotClass()` 한 곳이 정한다(수신함·자문 목록과 같은 낱말) */
.cocal .dot,.cgpop .dot,.codays .dot{flex:none;width:7px;height:7px;border-radius:4px;
  background:var(--l3);margin-left:auto}
.cocal .dot.d-todo,.cgpop .dot.d-todo,.codays .dot.d-todo{background:var(--blue)}
.cocal .dot.d-late,.cgpop .dot.d-late,.codays .dot.d-late{background:var(--red)}
.cocal .dot.d-done,.cgpop .dot.d-done,.codays .dot.d-done{background:var(--green)}
.cocal .more{font-size:14px;color:var(--l2);padding:1px 6px;font-weight:600;cursor:pointer}
.cocal .more:hover{color:var(--l1)}
/* [＋] 는 **마우스를 올린 칸**에만 보인다 */
.cocal .plus{position:absolute;right:6px;top:4px;width:22px;height:22px;padding:0;border:0;
  border-radius:6px;background:var(--f2);color:var(--l2);font-size:14px;line-height:1;opacity:0}
.cocal .d:hover .plus,.cocal .plus:focus{opacity:1}
.cocal .plus:hover{background:var(--f1);color:var(--l1)}
/* "+N개 더" 작은 창 — 공용 부품(`calgrid.js`). 바깥을 누르거나 Esc 로 닫는다 */
.cgpop{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 16px);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:10px;
  box-shadow:0 16px 44px rgba(0,0,0,.20)}
.cgpop .ph{display:flex;align-items:center;padding:0 6px 8px;font-weight:600;font-size:15px}
.cgpop .ph small{margin-left:auto;color:var(--l3);font-weight:400;font-size:14px}
.cgpop .e{font-size:14px;padding:6px 8px}
/* 좁은 화면(휴대폰) — 월 격자 대신 날짜별 목록(최근 날짜가 위) */
.codays{border-top:1px solid var(--line)}
.codays .dh{font-size:14px;color:var(--l3);font-weight:600;padding:14px 4px 4px}
.codays .dh.t{color:var(--blue)}
.codays .pr{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;
  padding:9px 4px;font-size:15px;cursor:pointer}
.codays .pr:hover{background:var(--hover)}
.codays .pr.none{grid-template-columns:1fr;color:var(--l3);cursor:default}
.codays .pr.none:hover{background:none}
.codays .pr .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codays .pr .tm{font-size:14px;color:var(--l3)}
.codays .pr.plan .tx{color:#8a4b00}
.codays .pr.busy .tx{color:var(--l2)}
.codays .dot{margin-left:0;width:8px;height:8px}

/* =====================================================================
   본문 속 그림 · 인용 부분 보기 — `quote.js` 가 심는 칸(수신함·자문 공용)
   ===================================================================== */
.qimg{display:inline-block;vertical-align:middle;margin:2px 4px 2px 0}
.qimg img{display:block;max-width:260px;max-height:200px;border:1px solid var(--line);
  border-radius:6px;cursor:zoom-in}
.qimg .ld{font-size:14px;color:var(--l3)}
.qcid{font-size:14px;color:var(--l3)}
.qfold{margin-top:8px;font-size:14px;color:var(--l2)}
.qfold>summary{cursor:pointer;list-style:none;user-select:none}
.qfold>summary::-webkit-details-marker{display:none}
.qfold>summary::before{content:'▸ '}
.qfold[open]>summary::before{content:'▾ '}
.qfold>summary:hover{text-decoration:underline}
.qfold .qx{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font-size:13px;
  background:var(--f4);border-radius:8px;padding:8px 10px;max-height:30vh;overflow:auto}

/* =====================================================================
   설정 화면(⑤) — 시안 `docs/mock/설정화면-시안.html` 그대로.
   이름은 모두 `st` 로 시작한다(수신함·자문·고객사의 `.row`·`.card` 와 부딪히지 않게).
   ===================================================================== */
#vSet{max-width:1100px}
.stwrap{display:grid;grid-template-columns:200px 1fr;gap:28px;margin-top:8px}
.sttoc{display:flex;flex-direction:column;gap:2px;align-self:start}
.sttoc .ti{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:7px;
  background:none;font-size:14px;color:var(--l2)}
.sttoc .ti:hover{background:var(--f4)}
.sttoc .ti.on{background:var(--f2);color:var(--l1);font-weight:600}
.sttoc .ti .s{display:block;font-size:14px;color:var(--l3);font-weight:400}
.sttoc .ti.lv5 .s::after{content:' · 대표만'}
.stsec{position:relative;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  margin-bottom:16px;background:#fff}
.stsec h2{font-size:16px;margin:0 0 4px}
.stone{font-size:14px;color:var(--l2);margin-bottom:12px}
.stsaved{position:absolute;right:20px;top:18px;font-size:14px;color:var(--l2)}
.stf{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;align-items:center;font-size:13.5px}
.stf .k{color:var(--l2);font-size:14px}
#stMyMail{font-size:14px}
.stf .strow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stf input:not([type=checkbox]):not([type=radio]){height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;width:100%;max-width:420px;min-width:0;background:#fff}
.stf input[type=checkbox],.stf input[type=radio]{width:auto;height:auto;margin:0}
.stf input[type=date]{max-width:170px}
.stf input:focus{outline:none;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
.stf input[disabled]{background:var(--f4);color:var(--l2)}
.stf button[disabled]{opacity:.45;cursor:default}
.stf button[disabled]:hover{background:#fff}
.sthint{font-size:14px;color:var(--l2)}
/* 여러 줄 칸 한 줄(법인 기준) — 칸 아래에 규칙 한 줄이 붙는다 */
.stf .strow.col{flex-direction:column;align-items:stretch;gap:4px}
.stf .strow.col textarea{width:100%;min-height:76px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13.5px;line-height:1.7;resize:vertical;background:#fff}
.stf .strow.col textarea:focus{outline:none;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
.stf .strow.col textarea[disabled]{background:var(--f4);color:var(--l2)}
.stnote{min-height:16px;font-size:14px;color:var(--orange)}   /* 규약 v1.1 — 멈춰서 볼 것은 주황 14px(화면 사양 v0.16) */
/* ---- 설정 › 접속 기록(2026-09-27 · 시안 `접속기록-시안-확정` · settings.js ⑩) ----
   차례 파란 점 = 안 읽음 점과 같은 파랑 · 표 열 폭은 시안 그대로(20 / 1fr 최소 96 / 72 72 64 64 96 72 / 72).
   좁아지면 두 단: ≤1320 은 열을 조금 좁힌 같은 표(1150 에서 가로 넘침 없음), ≤1140 은 이름 · 반출 · 삭제 · 담당 밖 · 이유만. */
.sttoc .ti .pt{display:inline-block;width:7px;height:7px;border-radius:4px;background:var(--blue);margin-left:6px;vertical-align:2px}
.stax .stax-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stax .stax-h h2{font-size:20px;margin:0 8px 0 0}
.stax-mon{display:inline-flex;align-items:center;gap:2px}
.stax-mon button{border:0;background:none;width:28px;height:28px;border-radius:6px;color:var(--l2);font-size:14px}
.stax-mon button:hover{background:var(--hover)}
.stax-mon button[disabled]{opacity:.35;cursor:default}
.stax-mon button[disabled]:hover{background:none}
.stax-mon b{font-size:16px;padding:0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stax .stax-h .sp{flex:1}
.stax .sm{white-space:nowrap}
.stax .sm.pri{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.stax .sm[disabled]{opacity:.45;cursor:default}
.stax-ok{font-size:14px;color:var(--l2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stax-ok .ok{color:var(--green);font-weight:600}
.stax-sub{font-size:14px;color:var(--l3);margin:4px 0 14px}
.stax-none{font-size:14px;color:var(--l3);padding:10px}
.stax-hd,.stax-r{display:grid;grid-template-columns:20px minmax(96px,1fr) 72px 72px 64px 64px 96px 72px 72px;
  align-items:center;gap:8px;padding:0 10px}
.stax-hd{font-size:14px;color:var(--l3);height:34px;border-bottom:1px solid var(--line)}
.stax-hd .n,.stax-r .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stax-r{height:44px;border-radius:8px;font-size:15px;cursor:pointer}
.stax-r:hover{background:var(--hover)}
.stax-r.open{background:var(--f4)}
.stax-r .tw{color:var(--l3);font-size:14px;text-align:center}
.stax-r .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stax-r .nm .me{font-weight:400;color:var(--l3);font-size:14px;margin-left:6px}
.stax-r .z{color:var(--l3)}
.stax-r .hot{color:var(--orange);font-weight:700}
.stax-r .why{justify-self:end;font-size:14px;color:var(--orange);font-weight:600;white-space:nowrap}
.stax-x{margin:2px 0 10px 38px;border-left:1px solid var(--line);padding-left:14px}
.stax-xr{display:grid;grid-template-columns:110px 56px 84px minmax(0,1fr);gap:10px;align-items:center;height:36px;
  font-size:15px;padding:0 8px;border-radius:6px}
.stax-xr:hover{background:var(--hover)}
.stax-xr .tm{color:var(--l3);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stax-xr .act{white-space:nowrap}
.stax-xr .act.o{color:var(--orange);font-weight:600}
.stax-xr .kd{color:var(--l2);font-size:14px;white-space:nowrap;overflow:hidden}
.stax-xr .tg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stax-xr .tg .lk{border:0;background:none;padding:0;font:inherit;color:var(--l1);cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.14)}
.stax-xr .tg .go{color:var(--l3);margin-left:4px;font-size:14px}
.stax-xr .tg .none{color:var(--l3)}
.stax-xr .tg .flag{color:var(--orange);font-size:14px;font-weight:600;margin-left:8px}
.stax-more{display:flex;align-items:center;gap:6px;padding:8px 8px 0;font-size:14px;color:var(--l3)}
.stax-more .link{font-size:14px;text-decoration:none}
@media (max-width:1320px){
  .stax-hd,.stax-r{grid-template-columns:16px minmax(64px,1fr) 52px 52px 44px 44px 84px 56px 60px;gap:5px;padding:0 6px}
}
@media (max-width:1140px){
  .stax-hd,.stax-r{grid-template-columns:16px minmax(48px,1fr) 40px 40px 52px 56px;gap:4px;padding:0 4px}
  .stax .c-li,.stax .c-rd,.stax .c-off{display:none}
  .stax-x{margin-left:12px;padding-left:8px}
  .stax-xr{grid-template-columns:88px 36px 52px minmax(0,1fr);gap:6px}
}
.stmsg{min-height:18px;margin-top:8px;font-size:13px;color:var(--red)}
.stok{color:#1d7a46;font-size:13px}
.stwarn{color:var(--orange);font-size:13px}
.stlink{font-size:13px;color:var(--blue)}
.stred{color:#c0392b}
.stacts{margin-top:10px}
.stpick{display:flex;gap:6px;flex-wrap:wrap}
.stpick .chip[disabled]{opacity:.5;cursor:default}
.stchk{display:flex;gap:8px;flex-wrap:wrap}
.stchk label{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:999px;padding:3px 12px;font-size:13px;white-space:nowrap;flex:0 0 auto}
.stchk label input{flex:0 0 auto;margin:0}
.sttbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.sttbl th{text-align:left;color:var(--l2);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.sttbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
.sttbl .me{color:var(--blue);font-size:13px;margin-left:6px}
.sttbl .alt{cursor:text}
.sttbl .alt.none{color:var(--orange)}
.sttbl .alt.lock{color:var(--l3);cursor:default}
.sttbl .alt input{width:100%;height:28px;padding:0 8px;border:1px solid var(--blue);border-radius:6px;font-size:13px}
/* ---- 메일 계정 카드(0047) — 내 메일 계정 · 공용 메일함 ---- */
.stsub{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.stsub h3{font-size:14.5px;margin:0 0 4px}
.stsaved2{font-size:14px;color:var(--l3);font-weight:400;margin-left:8px}
.stacct{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0;background:#fff}
.stacct.open{border-color:var(--blue)}
.stacct.bad{border-color:var(--red)}
.stacct .hd{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.stacct .hd .dot{color:#34C759;font-size:9px}
.stacct .hd .dot.bad{color:var(--red)}
.stacct .hd .dot.off{color:var(--l3)}
.stacct .hd .addr{font-size:14px}
.stacct .hd .kd{font-size:14px;color:var(--l2);border:1px solid var(--line);border-radius:10px;padding:1px 7px}
.stacct .hd .kd.sh{color:var(--blue);border-color:var(--blue)}
/* Microsoft·Google 로그인으로 이어진 계정(2026-09-21 · 옛 화면 31번) */
.stacct .hd .kd.oa{color:var(--green);border-color:var(--green)}
.stacct .hd .rt{margin-left:auto;color:var(--l3);font-size:14px}
.stacct .own{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;font-size:14px}
.stacct .own .k{color:var(--l2);margin-right:2px}
.stacct .ochip{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);border-radius:12px;
  padding:1px 8px;font-size:13px}
.stacct .ochip .x{border:0;background:none;color:var(--l3);padding:0 0 0 2px;font-size:14px}
.stacct .acts{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.stacct .acts .sp{flex:1}
.stacct .stf{margin-top:10px}
.stacct.add{display:block;width:100%;text-align:left;border-style:dashed;color:var(--l2);cursor:pointer}
.stacct.add .m{display:block;font-size:14px;color:var(--l3);margin-top:2px}
/* 카드(2026-09-27 · 시안 `메일연결-시안-확정` ④) — 연결됨 초록 · 연결 끊김 빨강 · ⋯ [다시 연결] */
.stacct .hd{position:relative}
.stacct .hd .rt.ok{color:var(--green)}
.stacct .hd .rt.cut{color:var(--red);font-weight:600}
.stacct.off .hd .addr{color:var(--l2);font-weight:500}   /* 꺼진 계정(연결해제카드-시안-확정) — 글자만 한 단계 흐리게 */
.stacct.off .hd .dot{color:var(--dot)}                    /* 점은 시안의 연한 회색 */
.stacct.off .stoffone{margin-top:4px}
.stacct .hd .mb{width:24px;height:24px;border:0;border-radius:12px;background:none;color:var(--l3);font-size:15px;cursor:pointer}
.stacct .hd .mb:hover{background:var(--f2);color:var(--l1)}
.stacct .stcut{margin-top:8px}
.sthint .stexp.soon{color:var(--orange);font-weight:500}   /* 로그인 연결 내일·오늘 만료 — 홈 D-1 과 같은 주황 */
/* ---- 메일 연결 창(2026-09-27) — 설정 둘 · 온보딩 공용 · 좁은 폭(560 아래)은 전체 화면 한 장 ---- */
.stmc .mchd{display:flex;align-items:center;gap:6px}
.stmc .mchd h3{margin:0;flex:1}
.stmc .mchd .x,.stmc .mchd .bk{width:28px;height:28px;border:0;border-radius:14px;background:none;color:var(--l2);
  font-size:17px;cursor:pointer}
.stmc .mchd .x:hover,.stmc .mchd .bk:hover{background:var(--f2)}
.stmc .mcsub{font-size:14px;color:var(--l2);margin:2px 0 14px}
.stmc .gbtn.mcg{height:40px;margin-bottom:8px}
.stmc .gbtn.ms{border-radius:0;border-color:#8C8C8C;color:#5E5E5E}
.stmc .mcor{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:14px;color:var(--l2)}
.stmc .mcor::before,.stmc .mcor::after{content:"";flex:1;border-top:1px solid var(--line)}
.stmc .mcpick{display:flex;align-items:center;gap:8px;width:100%;height:48px;padding:0 14px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;text-align:left;cursor:pointer}
.stmc .mcpick:hover{background:var(--f4)}
.stmc .mcpick b{flex:1;font-size:15px}
.stmc .mcpick .m{font-size:14px;color:var(--l2)}
.stmc .mcpick .ch{font-size:16px;color:var(--l3)}
.stmc .lbl{display:block}
.stmc input.bad{border-color:var(--red);outline-color:var(--red)}
.stmc .mclock .lk{width:14px;height:14px;margin-right:5px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.4}
.stmc input[readonly]{background:var(--f3);color:var(--l2)}
.stmc .mcerr{margin:6px 0 4px;font-size:14px;font-weight:600;color:var(--red)}
.stmc .mcnosave{display:inline-block;padding:1px 10px;border:1px dashed var(--line);border-radius:12px;
  font-size:14px;color:var(--l2)}
.stmc .mchelp{margin-top:6px;font-size:14px;color:var(--l2)}
.stmc .mcmore{display:block;margin-top:10px;font-size:14px;color:var(--l2);text-decoration:none}
.stmc .mclock{margin-top:12px;font-size:14px;color:var(--l2)}
.stmc .acts .primary{min-width:96px}
@media (max-width:560px){
  .modal .box:has(> .stmc){width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0;overflow:auto}
  .stmc .gbtn.mcg{height:48px;font-size:16px}
  .stmc .mcpick{height:56px}
  .stmc input{height:44px;font-size:16px}
  .stmc .acts .primary,.stmc .acts .sm{flex:1;height:44px}
}
.stsw{margin-top:14px;font-size:13.5px}
.stsw .sthint{display:block;margin-top:2px}
.stcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 12px}
.stcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.stcard b{display:block;font-size:13px;margin-bottom:4px}
.stcard .m{color:var(--l2)}
.stdanger{border-color:#f3c0bb;background:#fff8f7}
.stqr{margin:8px 0}
.stqr img{width:172px;height:172px;border:1px solid var(--line);border-radius:8px;background:#fff}
/* 명단 표 — 이름·메일도 그 자리에서 고친다(대표만) · 상태는 알약 하나 */
.sttbl .nm,.sttbl .em{cursor:text}
.sttbl .nm.lock,.sttbl .em.lock,.sttbl .lv.lock{cursor:default}
.sttbl .lv{cursor:pointer}
.sttbl .nm input,.sttbl .em input{width:100%;height:28px;padding:0 8px;border:1px solid var(--blue);
  border-radius:6px;font-size:13px}
.stbadge{display:inline-block;border-radius:999px;padding:1px 9px;font-size:14px;
  background:var(--f3);color:var(--l2)}
.stbadge.sent{background:rgba(0,136,255,.10);color:var(--blue)}
.stbadge.use{background:rgba(47,158,106,.14);color:var(--green)}
.sttbl .stadd td{border-bottom:0;padding-top:10px}
.sttbl .stadd input{width:100%;height:28px;padding:0 8px;border:1px solid var(--line);
  border-radius:6px;font-size:13px}
/* ---------------------------------------------------------------------
   지난 메일 가져오기(창) · 과거 기록 가져오기(창) — 2026-09-21
   --------------------------------------------------------------------- */
.stacct .stbkline{margin-top:8px}
.stbar{height:6px;border-radius:999px;background:var(--f3);overflow:hidden;margin:10px 0 6px}
.stbar i{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .2s}
.stbknum{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--l2)}
.stbknum b{color:var(--l1);font-weight:600}
.impsteps{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--l3);margin:2px 0 10px}
.impsteps .on{color:var(--blue)}
.impsheet{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.impsheet.off{opacity:.5}
.impsheet .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
.impsheet .hd .n{color:var(--l3);font-size:14px}
.impsheet .hd .kinds{display:flex;gap:6px;margin-left:auto}
.impsheet .mapf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:6px 10px;margin:10px 0;font-size:13px;align-items:center}
.impsheet .mapf .k{color:var(--l2)}
.impsheet .mapf button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impsheet .mapf button.none{color:var(--l3)}
.impprev{overflow-x:auto;border-top:1px solid var(--line);padding-top:8px}
.impprev table{border-collapse:collapse;font-size:13px}
.impprev th,.impprev td{border-bottom:1px solid var(--line);padding:4px 8px;text-align:left;
  white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.impprev th{color:var(--l2);font-weight:500}
.imperr{margin:8px 0;font-size:14px;color:var(--l2)}
.imperr div{padding:2px 0}
/* 과거자료 폴더(2026-09-27 · 시안 과거자료폴더-시안-확정) — 고른 뒤 한 줄 · 폴더 → 고객사 · 파일 표 · 남은 파일 · 진행 */
.impgot{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.impgot b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.impgot .n{color:var(--l2);white-space:nowrap}
.impgot .o{color:var(--orange);font-weight:600;white-space:nowrap}
.sthint.impcol{display:flex;flex-direction:column;gap:2px}
.stnote.imptight{margin:0}
.sthint.impgap{margin-top:8px}
.imp-nc{margin-left:4px}
/* DESIGN 대조 1 — needdir 등 [다음 — 미리보기] disabled 일 때 흐리게(`.stf button[disabled]` 와 같은 값 ·
   이 단추는 `.acts` 안이라 그 선택자 밖이다) · DESIGN 대조 3 — 안내 띠 아래 첫 칸 줄 간격(가져오기 창만) */
#stImpNext[disabled]{opacity:.45;cursor:default}
#stImpOne+.stf,#stImpCheckOne+.stf,#stImpDoneOne+.stf{margin-top:12px}
.impdir .hd .impcnt{margin-left:auto}
.impsub{font-size:14px;color:var(--l2);font-weight:600;margin:12px 0 4px}
.impfh,.impfr{display:grid;grid-template-columns:190px 250px 70px 84px 1fr;gap:10px;align-items:center;padding:0 8px}
.impfh{font-size:14px;color:var(--l3);height:32px;border-bottom:1px solid var(--line)}
.impfr{height:40px;border-bottom:1px solid var(--line);font-size:14px}
.impfh .n,.impfr .n{text-align:right;font-variant-numeric:tabular-nums;color:var(--l2)}
.impfr .fn{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impfr .fn .ic{color:var(--l3);font-weight:400;margin-right:6px}
.impfr.out .fn{font-weight:400;color:var(--l2)}
.impfr .co{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.impfr .co.none{color:var(--l3);border-color:var(--blue)}
.impfr .co.plain{border:0;background:none;padding:0;color:var(--l3);cursor:default;height:auto}
.impfr .co .nw{color:var(--l3);font-size:13px;margin-left:4px}
.impfr .end{justify-self:end}
.impfr.off>*:not(.end){opacity:.45}
.imppkrow{padding:6px 8px 10px 208px;border-bottom:1px solid var(--line)}
.imppkrow .pk{max-width:340px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.10)}
.impfiles table{width:100%;font-size:13.5px}
.impfiles th{font-size:14px}
.impfiles th.z,.impfiles td.z{text-align:right;color:var(--l2);font-variant-numeric:tabular-nums}
.impfiles td.p{max-width:330px}
.impfiles td.p .d{color:var(--l3)}
.impfiles td.w{max-width:250px}
.impfiles td.w .t{color:var(--l3);margin-right:6px}
.impfiles td.w.none{color:var(--l3)}
.impfiles .more td{color:var(--l3);font-size:14px}
.imptag{display:inline-block;font-size:13px;line-height:20px;border-radius:4px;padding:0 6px;background:var(--f3);color:var(--l2)}
.imptag.go{background:rgba(0,112,210,.08);color:var(--blue)}
.imptag.rem{background:rgba(162,95,0,.08);color:var(--orange)}
.imprrn{background:rgba(0,0,0,.05);border-radius:3px;padding:0 2px}
.impleft{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0 0}
.impleft .hd{display:flex;align-items:center;gap:10px;font-size:14px}
.impleft .hd .sp{flex:1}
.impleft .ln{display:grid;grid-template-columns:1fr 60px;gap:10px;font-size:14px;padding:3px 0;color:var(--l2)}
.impleft .ln .n{text-align:right;font-variant-numeric:tabular-nums}
.impleft .ln b{font-weight:500;color:var(--l1)}
.impfp .prog{display:flex;align-items:baseline;gap:12px;font-size:15px;margin-top:4px}
.impfp .prog b{font-variant-numeric:tabular-nums}
.impfp .prog .n{color:var(--l2);font-size:14px;font-variant-numeric:tabular-nums}
.docup .bar.fill{margin-top:10px}
.docup .bar.fill i{animation:none;margin-left:0;transition:width .2s}
.impfail{color:var(--orange);font-weight:600}
@media (max-width:760px){
  .impfh,.impfr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px 64px auto}
  .imppkrow{padding-left:8px}
}

/* =====================================================================
   ⑦ 운영자 — 설정 맨 아래 절 하나(`src3/ops.js` · 운영자에게만 선다)
   표는 명단 표(`.sttbl`)를 그대로 쓰고, 여기서는 제목 줄과 상태 알약만 더한다.
   ===================================================================== */
.opsh{font-size:14px;margin:16px 0 2px;display:flex;align-items:baseline;gap:6px}
.opsh:first-of-type{margin-top:10px}
.opsh .n{font-size:14px;color:var(--l3);font-weight:400}
.opstbl .act{white-space:nowrap;text-align:right}
.opstbl .act button{margin-left:6px}
.opstbl .act .primary{height:30px;padding:0 12px;font-size:14px}
.opstbl .at,.opstbl .adv{color:var(--l2)}
/* 묶음 2(2026-09-21) — 사용량·기록 탭. 숫자는 오른쪽 · 자릿수를 맞춘다 */
.opstbl .num{text-align:right;font-variant-numeric:tabular-nums}
.opstbl .rep{color:var(--l2)}
.stpick .chip .n{margin-left:5px;color:var(--l3);font-size:13px}
.stpick .chip.on .n{color:inherit;opacity:.8}
.stbadge.ops-pending{background:rgba(240,140,0,.12);color:var(--orange)}
.stbadge.ops-active{background:rgba(47,158,106,.14);color:var(--green)}
.stbadge.ops-closed,.stbadge.ops-suspended{background:rgba(229,72,77,.10);color:var(--red)}

/* =====================================================================
   온보딩(⑥) — 시안 `docs/mock/온보딩-시안-확정.html` · `…-추가.html`
   이름은 모두 `ob` 로 시작한다. 토큰은 2026-09-18 다듬기 그대로다.
   ===================================================================== */
/* ---- 가입·승인 대기 카드(관문 화면의 넓은 판) ---- */
.gate .card.wide{width:400px}
.gate .card h1{font-size:22px;margin:0 0 6px}
.obwho{font-size:14px;color:var(--l2);margin:2px 0 8px}
.obagree{margin:10px 0 12px;display:flex;flex-direction:column;gap:6px}
.obagree label{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--l2)}
.obagree input{width:auto;height:auto;margin:0}
.obagree a{color:var(--blue)}
.obstat{display:inline-block;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;
  background:rgba(0,136,255,.10);color:var(--blue);margin:4px 0 8px}
.obstat.shut{background:rgba(229,72,77,.10);color:var(--red)}

/* ---- 처음 세팅 두 장 — 설정 화면과 같은 두 칸 ---- */
#setup{height:100%;background:#fff}
.obsetup{display:grid;grid-template-columns:240px 1fr;height:100%}
.obsteps{background:var(--side);border-right:1px solid var(--line);padding:22px 12px}
.obsteps .ttl{font-size:14px;font-weight:600;margin:0 0 12px 8px}
.obstep{display:flex;gap:8px;align-items:flex-start;width:100%;padding:8px 10px;border:0;border-radius:8px;
  background:none;text-align:left;font-size:14px;color:var(--l2)}
.obstep .n{flex:0 0 20px;height:20px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center}
.obstep .t{flex:1}
.obstep .s{display:block;font-size:14px;color:var(--l3);font-weight:400}
.obstep.on{background:#fff;color:var(--l1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.obstep.on .n{background:var(--blue);border-color:var(--blue);color:#fff}
.obstep.ok .n{background:var(--green);border-color:var(--green);color:#fff}
.obdiv{border-top:1px solid var(--line);margin:12px 6px 8px;padding-top:8px;font-size:14px;color:var(--l3)}
.obopt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;font-size:14px;color:var(--l3);opacity:.7}
.obopt .n{flex:0 0 20px;height:20px;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center}
.obopt .s{display:block;font-size:14px;color:var(--l3)}
/* 메일 연결 걸음 — 누를 수 있는 「나중에」 줄(2026-09-27) */
.obopt.go{width:100%;border:0;border-radius:8px;background:none;font:inherit;text-align:left;cursor:pointer;opacity:1;color:var(--l2)}
.obopt.go.on{background:#fff;color:var(--l1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.obopt.go.on .n{background:var(--blue);border-color:var(--blue);color:#fff}
.obbody{padding:30px 40px;overflow:auto}
.obsec{position:relative;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  background:#fff;max-width:640px}
.obsec h2{font-size:17px;margin:0 0 4px}
.obfoot{display:flex;align-items:center;gap:10px;margin-top:16px;max-width:640px}
.obfoot .sp{flex:1}

/* ---- 시작하기 카드 — 빈 수신함 맨 위 · 설정 맨 위(같은 부품) ---- */
.start{border:1px solid rgba(0,136,255,.35);background:rgba(0,136,255,.04);border-radius:12px;
  padding:14px 16px;margin:10px 0}
.start h4{margin:0 0 8px;font-size:15px}
.start .step{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;
  border-top:1px solid var(--line)}
.start .step:first-of-type{border-top:0}
.start .step .n{flex:0 0 20px;width:20px;height:20px;border-radius:10px;background:#fff;
  border:1px solid var(--line);font-size:13px;display:flex;align-items:center;justify-content:center}
.start .step.now .n{background:var(--blue);border-color:var(--blue);color:#fff}
.start .step.ok .n{background:var(--green);border-color:var(--green);color:#fff}
.start .step.ok .t{color:var(--l2)}
.start .step .t{flex:1}
.start .step .t small{display:block;color:var(--l3);font-size:14px}
.start .later{margin-top:10px;font-size:14px;color:var(--l2)}
.start .later span{display:inline-block;border:1px dashed var(--line);border-radius:12px;
  padding:2px 10px;margin:4px 4px 0 0;color:var(--l3);font-size:14px}
.start .okline{font-size:13px;color:var(--green);margin-bottom:8px}
.start .done{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px}
.start .done .h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.start .done .h .sp{flex:1}
.start .done .h .x{font-weight:400;font-size:14px;color:var(--l3)}
.start .done .h .link{font-size:13px}
.start .todo{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);
  font-size:14px}
.start .todo:first-of-type{border-top:0}
.start .todo .b{flex:0 0 16px;width:16px;height:16px;border:1.5px solid var(--l3);border-radius:4px;
  font-size:13px;line-height:14px;text-align:center;color:var(--green)}
.start .todo.ok .b{border-color:var(--green)}
.start .todo.ok .t{color:var(--l2)}
.start .todo .t{flex:1}
.start .todo .t small{display:block;color:var(--l3);font-size:14px}

/* ---- 빈 수신함 — 안내 한 줄 + 단추 둘(가짜 자료가 없다) ---- */
.obempty{text-align:center;color:var(--l2);padding:36px 0 10px}
.obempty p{margin:0 0 14px;font-size:14px;color:var(--l3)}
.obempty .acts{display:flex;gap:8px;justify-content:center}

@media (max-width:760px){
  .obsetup{grid-template-columns:1fr}
  .obsteps{border-right:0;border-bottom:1px solid var(--line)}
  .obbody{padding:18px}
  #side{width:64px;flex:0 0 64px}
  #side .brand,#side .who span,#side .sguide{display:none}
  #side .who{margin-top:auto}
  .row .from,.row .co{flex:0 0 90px}
  .row .date{flex:0 0 84px}
  .stwrap{grid-template-columns:1fr;gap:12px}
  .stcards{grid-template-columns:1fr 1fr}
}

/* =====================================================================
   ⑧ 통계 — `src3/stats.js` · 확정 시안 `docs/mock/통계-시안.html`
   ---------------------------------------------------------------------
   0918 다듬기 규칙 그대로다 — 배경 없이 여백으로 덩어리, 본문 15px·회색 14px,
   보기 탭(밑줄), 주 단추 하나. 표는 자문 목록 줄(`.csrow`)과 같은 자·같은 높이다.
   ===================================================================== */
/* 채널 다섯 색 — dataviz 기본 팔레트 1~5(시안 확정). 범례·제목말·펼침 표가 숫자를 받친다 */
:root{
  --c-mail:#2a78d6; --c-tel:#eb6834; --c-meet:#1baf7a; --c-kakao:#eda100; --c-sms:#e87ba4;
}
#vStats{display:flex;flex-direction:column;min-height:0}
.sxnote{font-size:14px;color:var(--l2);padding:14px 10px}
.sxnote2{font-size:14px;color:var(--l3);padding:6px 0}
#vStats .sec-t{font-size:14px;font-weight:600;color:var(--l2);margin:6px 0 10px}
#vStats .q{display:inline-flex;width:16px;height:16px;border-radius:8px;border:1px solid var(--l3);
  color:var(--l3);font-size:14px;align-items:center;justify-content:center;margin-left:4px;
  cursor:help;vertical-align:1px}

/* ---- ① 지금 — 숫자 다섯(배경 없이) ---- */
.sxnowgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:26px}
.sxnw{display:flex;flex-direction:column;align-items:flex-start;padding:6px 12px 8px 0;
  border:0;border-radius:8px;background:none;text-align:left;cursor:pointer}
.sxnw:hover{background:var(--hover)}
.sxnw.flat{cursor:default}
.sxnw.flat:hover{background:none}
.sxnw .k{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--l2)}
.sxnw .n{font-size:28px;font-weight:700;line-height:1.3;margin-top:2px}
.sxnw .n small{font-size:14px;font-weight:400;color:var(--l2);margin-left:4px}
.sxnw.zero .n{color:var(--l3);font-weight:500}
.sxnw.hot .n{color:var(--red)}
.sxnw .go{font-size:14px;color:var(--l3)}

/* ---- 탭 옆 자물쇠 글 · 기간 칩 줄 ---- */
.chips .grp.tabs .chip .lock{font-size:14px;color:var(--l3);margin-left:4px;font-weight:400}
.sxper{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.sxper .chip{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:15px;background:#fff}
.sxper .chip:hover{background:var(--f4)}
.sxper .chip.on{background:rgba(0,136,255,.08);border-color:rgba(0,136,255,.35);
  color:#0067c2;font-weight:600}
.sxper .rng{font-size:14px;color:var(--l2);margin-left:8px}
.sxpick{display:flex;align-items:center;gap:6px}
.sxpick input{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.sxpick .tl{color:var(--l3)}

/* ---- ② 고객사 표 ---- */
.sxth,.sxtr{display:grid;grid-template-columns:20px 170px 80px 80px 1fr 150px 110px 140px;
  gap:14px;align-items:center;padding:10px}
.sxth{font-size:14px;color:var(--l2);font-weight:600;border-bottom:1px solid var(--line)}
.sxth .r,.sxtr .r{text-align:right}
.sxtr{border-radius:8px;font-size:15px;color:var(--l2);cursor:pointer}
.sxtr:hover{background:var(--hover)}
.sxtr.open{background:rgba(0,136,255,.05)}
.sxtr .tw{color:var(--l3);font-size:14px}
.sxtr .co{color:var(--l1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxtr .big{color:var(--l1);font-weight:600;font-variant-numeric:tabular-nums}
.sxtr .delta{font-size:14px;font-variant-numeric:tabular-nums}
.sxtr .when{font-size:14px;white-space:nowrap}
#vStats .dim{color:var(--l3)}
.quiet{font-size:14px;color:var(--l2);background:var(--f3);border-radius:10px;padding:1px 8px;margin-left:6px}
/* 채널 막대 하나 — 폭이 곧 통수(2px 틈) */
.sxmix{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.sxmix span{display:block;height:100%}
.sxmix .c-mail,.sxlegend i.c-mail{background:var(--c-mail)}
.sxmix .c-tel,.sxlegend i.c-tel{background:var(--c-tel)}
.sxmix .c-meet,.sxlegend i.c-meet{background:var(--c-meet)}
.sxmix .c-kakao,.sxlegend i.c-kakao{background:var(--c-kakao)}
.sxmix .c-sms,.sxlegend i.c-sms{background:var(--c-sms)}
.sxlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--l2);margin:12px 10px 4px}
.sxlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sxend{font-size:14px;color:var(--l3);padding:14px 10px}

/* ---- 줄 펼침 — 왼쪽 12개월 둘 · 오른쪽 이 기간 ---- */
.sxdet{margin:4px 10px 10px 40px;padding:16px 0 8px;display:grid;
  grid-template-columns:1.3fr 1fr;gap:36px;cursor:default}
.sxdet h4{font-size:14px;color:var(--l2);margin:0 0 8px;font-weight:600}
.sxdet h4.gap{margin-top:16px}
.sxchart{display:grid;grid-template-columns:28px 1fr;gap:6px}
.sxchart .ax{font-size:14px;color:var(--l3);display:flex;flex-direction:column;
  justify-content:space-between;text-align:right;height:64px}
.sxchart .bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;align-items:end;
  height:64px;border-bottom:1px solid var(--line)}
.sxchart .bars span{background:var(--c-mail);border-radius:4px 4px 0 0}
.sxchart .bars.t span{background:#86b6ef}
.sxchart .bars span.cur{background:#184f95}
.sxchart .bars.t span.cur{background:#256abf}
.sxmo{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;font-size:13px;
  color:var(--l3);text-align:center;margin-top:3px;padding-left:34px}
.sxmini{font-size:14px;display:grid;grid-template-columns:130px 1fr;row-gap:8px}
.sxmini .k{color:var(--l2)}
.sxtype{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;margin-top:6px}
.sxtype span{background:#6da7ec}
.sxtype span:nth-child(2){background:#b7d3f6}
.sxtype span:nth-child(3){background:#9ec5f4}
.sxtype span:nth-child(4){background:var(--f1)}
.sxopen{margin-top:16px}

/* ---- ③ 업무 배분 표 — 이름 순 · 순위나 비교 막대는 두지 않는다 ---- */
.sxah,.sxar{display:grid;grid-template-columns:150px repeat(7,1fr);gap:14px;align-items:center;padding:11px 10px}
.sxah{font-size:14px;color:var(--l2);font-weight:600;border-bottom:1px solid var(--line)}
.sxah span:not(:first-child),.sxar span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.sxar{font-size:15px;border-radius:8px;color:var(--l2)}
.sxar:hover{background:var(--hover)}
.sxar .nm{color:var(--l1);font-weight:600}
.sxar .hot{color:var(--red)}

@media (max-width:1100px){
  .sxnowgrid{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .sxth,.sxtr{grid-template-columns:20px 130px 60px 60px 1fr 110px 90px 110px;gap:10px}
  .sxdet{grid-template-columns:1fr;gap:18px}
  .sxah,.sxar{grid-template-columns:110px repeat(7,1fr);gap:8px;font-size:14px}
}

/* =====================================================================
   ⑩ 일정 · 회의록 (2026-09-19 · 시안 docs/mock/일정-시안-확정.html)
   ---------------------------------------------------------------------
   사람 색은 **고정 순서**라 CSS 가 아니라 `schedule.js` 가 인라인으로 준다
   (같은 사람은 늘 같은 색 · 돌려 쓰지 않는다).
   ===================================================================== */
#scChips .scrng{font-size:16px;font-weight:600;margin:0 4px}
#scChips .scwho i{display:inline-block;width:9px;height:9px;border-radius:5px;margin-right:6px}
/* 사람 칩은 **색 점 + 이름**이다 — 칩을 통째로 칠하면 그 사람 색이 보이지 않는다(시안) */
#scChips .scwho.on{background:#fff;border-color:rgba(0,0,0,.2);color:var(--l1);font-weight:600}
#scChips .chip.add{color:var(--l3);font-size:14px}
#scChips .grp.seg .chip{border-radius:0}
#scChips .grp.seg .chip:first-child{border-radius:13px 0 0 13px}
#scChips .grp.seg .chip:last-child{border-radius:0 13px 13px 0}

/* ---- 월 보기 — 일곱 칸 같은 너비(`.cocal` 과 같은 규약 · `minmax(0,1fr)` 없으면 긴 제목이 칸을 넓힌다) ---- */
.scmo{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;
      overflow:hidden;font-size:13px}
.scmo .dh{padding:6px 8px;color:var(--l3);border-bottom:1px solid var(--line)}
.scmo .d{min-height:86px;padding:5px 6px;border-top:1px solid var(--line);border-left:1px solid var(--line);
         min-width:0}
.scmo .d:nth-child(7n+1){border-left:0}
.scmo .d.we{background:var(--f4)}
.scmo .n{font-size:14px;color:var(--l2)}
.scmo .n.out{color:var(--l3)}
.scmo .n.t{display:inline-block;width:22px;height:22px;border-radius:11px;background:var(--blue);color:#fff;
           text-align:center;line-height:22px;font-weight:700}
.scmo .bar{display:block;border-radius:4px;padding:0 5px;margin-top:3px;white-space:nowrap;overflow:hidden;
           text-overflow:ellipsis;cursor:pointer}
.scmo .bar.me{background:rgba(0,136,255,.10);color:var(--l1)}
.scmo .bar.g{background:var(--f3);color:var(--l2)}
.scmo .bar.due{background:#fff;border:1px solid rgba(229,72,77,.35);color:#b3262b;cursor:default}
.scmo .x{color:var(--l3)}

/* ---- 주 보기 — 머리·종일·시간 격자 세 줄이 **같은 열 정의**(`minmax(0,1fr)` 없으면 종일 줄이 내용 길이로 넓어져 줄마다 어긋난다) ---- */
.scwk{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.scwk .wh{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);
          font-size:14px;color:var(--l2)}
.scwk .wh div{padding:8px;text-align:center}
.scwk .wh .today{color:var(--blue);font-weight:700}
.scwk .wh .we{color:var(--l3)}
.scwk .ad{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);
          min-height:34px;font-size:13px}
.scwk .ad>div{padding:4px;border-left:1px solid var(--line);min-width:0}
.scwk .ad .k{border-left:0;color:var(--l3);font-size:14px;padding-top:9px;text-align:right;padding-right:6px}
.scwk .ad .due{display:block;background:#fff;border:1px solid rgba(229,72,77,.35);color:#b3262b;
               border-radius:5px;padding:1px 6px;margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scwk .ad .band{display:block;border-radius:5px;padding:2px 6px;margin:2px 0;background:var(--f3);color:var(--l2);
                cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scwk .grid{position:relative;display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr))}
.scwk .hrs div{height:40px;font-size:14px;color:var(--l3);text-align:right;padding-right:6px;transform:translateY(-7px)}
.scwk .col{position:relative;border-left:1px solid var(--line);min-width:0}
.scwk .col .h{height:40px;border-bottom:1px solid rgba(0,0,0,.04)}
.scwk .col .h.work{background:rgba(0,136,255,.025)}
.scwk .col.we{background:var(--f4)}
.scwk .ev{position:absolute;left:4px;right:4px;border-radius:6px;padding:4px 7px;font-size:13px;line-height:1.35;
          overflow:hidden;background:rgba(0,136,255,.10);border-left:3px solid var(--blue);cursor:pointer}
.scwk .ev b{display:block;font-weight:600;font-size:13px}
.scwk .ev.busy{background:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 6px,rgba(0,0,0,.06) 6px 12px);
               color:var(--l2);cursor:default}
.scwk .nowline{position:absolute;left:0;right:0;height:2px;background:var(--red)}

/* ---- 일정 창 · 빈 시간 찾기 (새 항목 창과 같은 자리·같은 규약) ---- */
#sc{z-index:90}
#sc .box{width:600px;max-height:92vh;overflow:auto}
.scdlg h3{display:flex;align-items:center;margin:0;font-size:16px}
.scdlg h3 .st{margin-left:auto;font-size:14px;color:var(--l2);font-weight:400}
.scdlg .f{margin-top:12px}
.scdlg .f .lbl{font-size:14px;color:var(--l2);margin-bottom:4px}
.scdlg .f input[type=text],.scdlg .f textarea{width:100%;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.scdlg .f textarea{height:auto;min-height:64px;padding:8px 10px}
.scdlg .chips{margin:0;gap:4px}
.scdlg .chip{height:26px;padding:0 10px}
.scwhen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ★ `#sc` 는 `.modal` 이라 `.modal input{width:100%}` 이 먼저 잡힌다 — 시각 칸은 나란히 서야 한다 */
.scwhen input{width:auto;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.scwhen input[type=date]{width:160px}
.scwhen input[type=time]{width:134px}
.scdlg input[type=checkbox]{width:auto;height:auto;margin:0 2px 0 0}
.scwhen .tl{color:var(--l3)}
.scall{font-size:14px;color:var(--l2);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* 보이는 범위 — 라디오 셋 + "고객사 이름 표시"(0050) */
.scvis .v{display:flex;align-items:baseline;gap:6px;padding:3px 0;font-size:14px;cursor:pointer}
.scvis .v input{width:auto;height:auto;margin:0}
.scvis .v .nm{color:var(--l1)}
.scvis .v small{color:var(--l3);font-size:14px}
.scvis .v.off{opacity:.45;cursor:default}
.scvis .v.sub{margin-left:18px}
.scpk{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.scpk .pk1{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:14px;
           background:var(--f3);font-size:14px}
.scpk .pk1 i{display:inline-block;width:8px;height:8px;border-radius:4px}
.scpk .pk1 .x{border:0;background:none;color:var(--l3);padding:0}
.scpk .chip.add{color:var(--l3);border-style:dashed}
.scdlg .hint{font-size:14px;color:var(--l2);margin-top:4px}
.scdlg .hint.warn{color:var(--orange)}
.scdlg .acts{display:flex;align-items:center;gap:8px;margin-top:16px}
.scdlg .acts .sp{flex:1}
.scdlg .acts .del{color:var(--red)}
#scCoBox .pk{border-radius:8px}
#scCoBox .pk>div:not(.in){max-height:180px}
.scslots{margin-top:12px}
.scslots .slot{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);
               border-radius:10px;margin-top:8px;font-size:15px;background:#fff;text-align:left}
.scslots .slot:hover{background:var(--hover)}
.scslots .slot .sp{flex:1}
.scslots .slot small{color:var(--l3);font-size:14px}

/* ---- 일정 상세 = 회의록 칸 ---- */
.scback{font-size:14px;color:var(--l2);margin-bottom:6px}
.schd{display:flex;align-items:center;gap:12px;margin:8px 0 4px}
.schd h1{margin:0}
.sckind{display:inline-flex;align-items:center;font-size:14px;padding:2px 10px;border-radius:12px;
        border:1px solid var(--line);border-left-width:3px;color:var(--l2)}
.scprops{display:grid;grid-template-columns:96px 1fr 96px 1fr;gap:6px 12px;align-items:center;margin:12px 0 4px;
         font-size:15px}
.scprops .p{font-size:14px;color:var(--l2);font-weight:600}
.scprops .p i{font-style:normal;color:var(--l3);margin-right:6px}
.scmemo{font-size:15px;line-height:1.8;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-top:8px}
.scshare{display:flex;align-items:center;gap:12px;margin:18px 0 6px;padding:10px 0;
         border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;color:var(--l2)}
.scshare .sp{flex:1}
.scl3{margin-top:18px}
.scl3 .l3h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--l2);margin-bottom:8px}
.scl3 .l3h small{font-weight:400;color:var(--l3)}
.scl3 .l3h .sp{flex:1}
.scl3 .l3h .st{font-size:14px;font-weight:400;color:var(--l3)}
.sctr{font-size:14.5px;line-height:1.8;background:var(--soft);border-radius:10px;padding:10px 14px}
.sctr .talk .m{display:flex;gap:8px;margin:2px 0}
.sctr .talk .w{color:var(--l2);font-weight:600;white-space:nowrap}
.sctr pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
#scMemoIn{width:100%;min-height:110px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
          font:inherit;line-height:1.8;resize:vertical}
.scai{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scai .c{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14.5px;line-height:1.7}
.scai .c h5{margin:0 0 4px;font-size:14px;color:var(--l2)}
.scai .c ul{margin:0;padding-left:18px}
.scai .todo{display:flex;align-items:center;gap:8px;margin:2px 0}
.scai .todo .sp{flex:1}
.scai .todo .sm.to{height:26px;padding:0 10px;border-color:rgba(0,136,255,.4);color:#0067c2;font-weight:600;
                   border-radius:13px;white-space:nowrap}
.scai .todo .made{font-size:13px;color:var(--green);font-weight:600;white-space:nowrap}
.scask{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--l2)}
.scfrom{font-size:14px;color:var(--l2);margin-top:12px}
.scfrom a{color:var(--blue);text-decoration:none;margin-left:8px}

/* ---- 새 항목 창의 "미래 대면" 한 줄 ---- */
.ni .nifut{display:flex;align-items:center;gap:12px;margin:14px 0 2px;padding:12px 0;
           border-top:1px solid var(--line);font-size:14.5px;color:var(--l2)}
.ni .nifut .sp{flex:1}
.ni .nifut .primary{white-space:nowrap;flex:0 0 auto}
.ni .f.dim{opacity:.4}

/* ---- 설정 › 고급 스위치 ---- */
.stsw{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.stsw .sw{display:grid;grid-template-columns:20px 120px 1fr;align-items:center;gap:10px;font-size:15px}
.stsw .sw .nm{font-weight:600}
.stsw .sw .sthint{font-size:14px;color:var(--l2)}

@media (max-width:1100px){
  .scai{grid-template-columns:1fr}
  .scprops{grid-template-columns:96px 1fr}
}

/* =====================================================================
   ⑪ 협업 — 의견 타래 · @멘션과 [확인] · 검토 요청 · 알림 벨
   (시안 `docs/mock/협업-시안-확정.html` · 0918 톤 그대로: 본문 15px · 회색 14px ·
    배경 대신 여백 · 주 단추 파랑 하나. 타래만 **옅은 회색 한 덩어리**다 — 발송본과 섞이지 않게.)
   ===================================================================== */
/* 화면 머리 오른쪽 묶음 — 벨과 단추가 같은 줄 끝에 모인다 */
#top .sp{flex:1}
.cbbell{position:relative;flex:0 0 auto}
.cbbtn{position:relative;width:32px;height:32px;border:0;background:none;border-radius:6px;font-size:16px}
.cbbtn:hover,.cbbtn.on{background:var(--f2)}
.cbbtn b{position:absolute;top:0;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--red);color:#fff;font-size:13px;line-height:16px;font-weight:700}
/* 벨 펼침 — 최근 30건 · 안 읽은 줄은 옅은 파랑 바탕 + 파란 점 */
.cbpanel{position:absolute;right:0;top:36px;z-index:60;width:420px;max-height:60vh;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.14)}
.cbpanel .h{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:15px}
.cbpanel .h .sp{flex:1}
.cbpanel .h .link{font-size:14px}
.cbpanel .nr{display:grid;grid-template-columns:28px 1fr 62px;gap:10px;align-items:start;
  padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px;cursor:pointer}
.cbpanel .nr:last-child{border-bottom:0}
.cbpanel .nr:hover{background:var(--hover)}
.cbpanel .nr .ic{width:26px;height:26px;border-radius:13px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--l2)}
.cbpanel .nr .t{line-height:1.5;color:var(--l1)}
.cbpanel .nr .t small{display:block;color:var(--l3);font-size:14px;margin-top:2px}
.cbpanel .nr .w{font-size:14px;color:var(--l3);text-align:right;white-space:nowrap}
.cbpanel .nr.un{background:rgba(0,136,255,.04)}
.cbpanel .nr.un .t{font-weight:600}
.cbpanel .nr.un .w::after{content:"";display:inline-block;width:7px;height:7px;border-radius:4px;
  background:var(--blue);margin-left:6px}
.cbpanel .cbnone{padding:16px}

/* 검토 중 — 상태 배지 옆 **주황 점 알약** 하나(자문 상태는 그대로 둔다) */
.pill.rv{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;font-size:13.5px;
  background:rgba(240,140,0,.12);color:#9a5a00}
.pill.rv::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--orange)}
.btn.gray.rv{color:#9a5a00}
.btn.gray.rv[disabled]{color:var(--l3)}
/* 목록 줄의 "검토 요청 · 이름" — 상태 **아래** 회색 한 줄(2026-09-25 v0.5 · 옆 열을 밀지 않는다) */
.cbrv{display:block;margin:1px 0 0;font-size:14px;color:var(--l3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-weight:400}
.cbn{font-size:14px;color:var(--l2);white-space:nowrap}
.csrow .cnt,.row .cnt{flex:0 0 58px;text-align:right;font-size:14px;color:var(--l2)}
.csd .csfix .cbn{margin-left:2px}
/* ---- 의견 타래 — 고객사 소통 줄 펼침 안(자문은 아래 `.cbhd`) ---- */
.cbthr{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.cbthr:empty{display:none}
.det .cbthr{margin-top:12px;border-top:0;padding-top:0}
/* ---- 자문 머리 의견(2026-09-28) — 세부 정보 아래 얇은 선 하나 · 머리·바탕 상자 없음 · 크기만 줄임 ---- */
.csd .cbthr.cbhd{margin-top:20px;max-width:776px;padding-top:12px}
.cbhd .cball{border:0;background:none;padding:0;font-size:14px;color:var(--l2);margin:0 0 6px}
.cbhd .cball:hover{color:var(--l1)}
.cbhd .cbop{grid-template-columns:28px 1fr;padding:8px 0;border-bottom:0}
.cbhd .cbop .av,.cbhd .cbgone .av,.cbhd .cbin-row .av{width:24px;height:24px;border-radius:12px;font-size:13px;margin-top:2px}
.cbhd .cbgone{grid-template-columns:28px 1fr;padding:8px 0;border-bottom:0}
.cbhd .cbop .tx{line-height:1.6}
.cbhd .cbop .tx.clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.cbhd .cbclip{border:0;background:none;padding:0;font-size:14px;color:var(--l2)}
.cbhd .cbclip[hidden]{display:none}
.cbhd .cbsys{border-bottom:0;padding:6px 0 6px 38px}
.cbhd .cbin-wrap{margin-top:6px}
.cbhd .cbin-row{align-items:center}
.cbhd .cbin-row .av{flex:0 0 24px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,112,210,.12);color:var(--blue);margin:0 4px 0 0}
.cbhd .cbin{min-height:36px;padding:6px 10px;border-color:transparent;background:var(--f4);border-radius:8px}
.cbhd .cbin-row .btn{height:30px;padding:0 12px}
.cbhd .cbin-row .btn[disabled]{opacity:.35}
.cbhd .cbat{top:44px;left:32px}
.cbhead{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:10px}
.cbhead .n{font-weight:400;color:var(--l3);font-size:14px}
.cbbox{background:var(--soft);border-radius:12px;padding:6px 18px 14px}
.cbnone{font-size:14px;color:var(--l3);padding:12px 0}
.cbnote{font-size:14px;color:var(--l3);padding:12px 0 4px}
/* 시스템 줄(검토 요청·취소·완료) — 회색 작은 글씨 한 줄. 고칠 수 없다. */
.cbsys{display:flex;gap:8px;font-size:14px;color:var(--l3);padding:10px 0 8px;
  border-bottom:1px solid var(--line)}
.cbsys .ic{width:18px;text-align:center}
.cbsys b{font-weight:600;color:var(--l2)}
/* 의견 한 줄 */
.cbop{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.cbop:last-child{border-bottom:0}
.cbop.hit,.cbgone.hit{background:rgba(0,136,255,.08);border-radius:8px}
.cbop .av,.cbgone .av{width:28px;height:28px;border-radius:14px;background:var(--f2);color:var(--l2);
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.cbop .who{display:flex;align-items:center;font-size:14px;font-weight:600}
.cbop .who small{font-weight:400;color:var(--l3);font-size:14px;margin-left:8px}
.cbop .who .pmw{position:relative;margin-left:auto}
.cbm{border:0;background:none;color:var(--l3);font-size:14px;padding:0 4px;border-radius:6px}
.cbm:hover{background:var(--f2)}
.cbop .tx{font-size:15px;line-height:1.7;margin-top:2px;word-break:break-word}
.cbop .men{color:#0067c2;background:rgba(0,136,255,.08);border-radius:4px;padding:0 3px}
/* 지워진 의견 — 자리와 시각만 남는다 */
.cbgone{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--l3);font-style:italic}
.cbgone .av{opacity:.45}
/* [확인] */
.cback{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:14px;color:var(--l2)}
.cback .done{color:var(--green);font-weight:600}
.cback .pend{text-decoration:underline dotted}
.ackb{height:28px;padding:0 12px;border:1px solid rgba(0,136,255,.4);border-radius:14px;background:#fff;
  color:#0067c2;font-size:13.5px;font-weight:600}
.ackb:hover{background:rgba(0,136,255,.06)}
/* 입력칸 — 한 줄에서 시작해 여섯 줄까지 늘고 그 뒤 칸 안 스크롤 */
.cbin-wrap{position:relative;margin-top:12px}
.cbin-row{display:flex;gap:10px;align-items:flex-start}
.cbin{flex:1;min-width:0;min-height:44px;max-height:166px;padding:10px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font:inherit;font-size:15px;line-height:24px;resize:none;overflow:hidden}
.cbin:focus{outline:none;border-color:rgba(0,136,255,.45);box-shadow:0 0 0 3px rgba(0,136,255,.12)}
.cbin-row .btn{height:44px;flex:0 0 auto}
.cbedit{margin-top:6px}
.cbedit .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
/* @고르기 창 — 입력칸 아래에 뜬다(공용 picker 껍데기 그대로) */
.cbat{position:absolute;left:0;top:52px;z-index:40;width:340px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.12);padding:6px}
.cbat .pk{border:0}
.cbat .pk>div:not(.in){max-height:220px}
.cbatno{font-size:14px;color:var(--l3);padding:8px 10px 6px;border-top:1px solid var(--line);margin-top:4px}
/* [검토 완료] 떠 있는 창 — 답변 기둥 안에서 뜬다 */
.cbpop{position:absolute;right:0;top:46px;z-index:30;width:380px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:16px 18px}
.cbpop .t{font-weight:700;margin-bottom:10px}
.cbpop .seg{display:flex;gap:6px}
.cbpop .seg button{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;
  font-size:14.5px;color:var(--l2)}
.cbpop .seg button.on{border-color:rgba(47,158,106,.5);background:rgba(47,158,106,.08);
  color:#1d6b47;font-weight:600}
.cbpop .lbl{font-size:14px;color:var(--l2);font-weight:600;margin:12px 0 6px}
.cbpop textarea{width:100%;min-height:64px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  font:inherit;resize:vertical}
.cbpop .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.cbpop .note.warn{color:var(--orange)}
#cbRvBox .pk{border-radius:8px}
#cbRvBox .pk>div:not(.in){max-height:180px}
@media (max-width:900px){ .cbpanel{width:min(420px,92vw)} .cbpop{width:min(380px,90vw)} }

/* =====================================================================
   ⑫ 라이브러리 (library.js) — 0918 톤: 배경 없이 여백, 본문 15px·회색 14px,
   주 단추는 파랑 하나, **경고 상자 없음**. 줄 모양은 자문 목록과 같은 결이다.
   ===================================================================== */
#libChips .libq{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  width:210px;min-width:0;font-size:14px;background:var(--f4)}
#libChips .libq:focus{outline:none;background:#fff;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
/* ---- 줄 하나 ---- */
.librow{display:flex;align-items:baseline;gap:14px;padding:11px 10px;border-radius:8px;
  font-size:15px;color:var(--l2);cursor:pointer}
.librow:hover{background:var(--hover)}
.librow.open{background:rgba(0,136,255,.04)}
.librow .ty{flex:0 0 76px;font-size:12.5px;color:#0067c2;background:rgba(0,136,255,.09);
  border-radius:11px;padding:1px 9px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.librow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--l1);font-weight:600}
.librow .nm .sub{margin-left:8px;font-weight:400;color:var(--l3);font-size:14px}
.librow .nm .std{margin-left:8px;font-weight:400;font-size:13px;color:#146b4c;
  background:rgba(47,158,106,.12);border-radius:11px;padding:1px 9px}
.librow .nm .topic{margin-left:8px;font-weight:400;font-size:14px;color:var(--l3)}
.librow .flag{flex:0 0 auto;font-size:13px;color:#8a4b00;background:rgba(240,140,0,.12);
  border-radius:11px;padding:1px 9px;white-space:nowrap}
.librow .flag.e{background:none;padding:0}
.librow .refn{flex:0 0 auto;font-size:14px;color:var(--l3);white-space:nowrap}
.librow .date{flex:0 0 46px;text-align:right;font-size:14px;color:var(--l3)}
/* ---- 펼침 — 왼쪽 파란 실선 한 줄(수신함 펼침과 같은 결) ---- */
.libdet{margin:0 10px 12px 96px;padding:12px 16px;border-left:2px solid rgba(0,136,255,.3);
  font-size:14.5px;line-height:1.75;color:var(--l2)}
.libdet.bk{margin-left:14px}
.libdet .tx{white-space:pre-wrap;word-break:break-word}
.libdet .muted{color:var(--l3)}
.libdet .use{margin-top:10px;font-size:14px;color:var(--l2)}
.libdet .use b{color:var(--l1)}
.libdet .use .link{font-size:14px}
.libdet .acts{display:flex;gap:6px;margin-top:12px;align-items:center;flex-wrap:wrap}
.libdet .acts .sm{height:30px;padding:0 12px;border:1px solid var(--line);background:#fff;
  border-radius:15px;font-size:13.5px;color:var(--l1)}
.libdet .acts .sm.del{color:var(--red)}
.libsaved{font-size:14px;color:var(--l3);margin-top:6px;min-height:16px}
/* 권한 안내 — **단추 옆 회색 한 줄**(경고 상자를 만들지 않는다) */
.libgate{font-size:14px;color:var(--l3);margin-left:6px}
/* ---- 칸(고치기·등록 창 공통) ---- */
.libf{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;margin:8px 0;font-size:15px}
.libf.ta{align-items:start}
.libf .k{font-size:14px;color:var(--l2);font-weight:600}
.libf .k em{font-style:normal;color:var(--red);margin-left:3px}
.libf input,.libf textarea{min-height:34px;border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:15px;background:#fff;width:100%}
.libf textarea{min-height:88px;line-height:1.7;resize:vertical}
.libf input:focus,.libf textarea:focus{outline:none;border-color:rgba(0,136,255,.45);
  box-shadow:0 0 0 3px rgba(0,136,255,.12)}
.libf .v{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.libf .v input{flex:1;min-width:90px}
.pk-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;
  background:var(--f2);font-size:14px}
.pk-chip .x{border:0;background:none;color:var(--l3);font-size:14px;padding:0}
.libf .add{height:28px;padding:0 10px;border:1px dashed var(--line);border-radius:14px;
  background:transparent;color:var(--l3);font-size:14px}
/* ---- 설명 블록의 절(대주제 › 소주제) ---- */
.libsec{padding:14px 10px 4px;font-size:14px;font-weight:600;color:var(--l2);cursor:pointer;
  display:flex;align-items:center;gap:8px}
.libsec:hover{color:var(--l1)}
.libsec .n{font-weight:400;color:var(--l3);font-size:14px}
/* ---- 이전 자문 — 두 기둥(좁으면 위아래) ---- */
.libtwo{display:grid;grid-template-columns:240px 1fr;gap:28px;margin-top:10px}
.libtops{display:flex;flex-direction:column;gap:2px;align-self:start}
.libtp{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;
  background:none;font-size:15px;text-align:left;width:100%;color:var(--l1)}
.libtp:hover{background:var(--hover)}
.libtp.on{background:var(--f2);font-weight:600}
.libtp .n{margin-left:auto;color:var(--l3);font-size:14px}
.libtp .n b{color:var(--l2);font-weight:600}
.libcase{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;font-size:15px;
  color:var(--l2);cursor:pointer}
.libcase:hover{background:var(--hover)}
.libcase .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--l1);font-weight:600}
.libcase .nm small{color:var(--l3);font-size:14px;margin-left:8px;font-weight:400}
.libcase .stt{flex:0 0 96px;font-size:14px;display:flex;align-items:center;gap:6px}
.libcase .stt::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:4px;background:var(--dot)}
.libcase .date{flex:0 0 46px;text-align:right;font-size:14px;color:var(--l3)}
/* ---- 권고 탭 — 줄 하나 = 문장 하나(고객사 · 자문 이름 · 날짜 · [자문 열기 ↗]) ---- */
.libact{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;font-size:15px;color:var(--l2)}
.libact:hover{background:var(--hover)}
.libact .tx{flex:1;min-width:0;color:var(--l1)}
.libact .co{flex:0 0 130px;font-size:14px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libact .nm{flex:0 0 160px;font-size:14px;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libact .date{flex:0 0 46px;text-align:right;font-size:14px;color:var(--l3)}
.libact .go{flex:0 0 auto;font-size:13.5px}
@media (max-width:820px){ .libact{flex-wrap:wrap} .libact .tx{flex-basis:100%} }
/* ---- 회색 한 줄·빈 화면 ---- */
.libnone{font-size:14.5px;color:var(--l2);padding:16px 10px}
.libnote2{font-size:14px;color:var(--l3);padding:10px 10px 0}
.libbar{padding:6px 10px 0}
.libempty{padding:28px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.libempty p{margin:0;font-size:15px;color:var(--l2)}
@media (max-width:820px){ .libtwo{grid-template-columns:1fr;gap:12px} .libdet{margin-left:10px} }

/* =====================================================================
   ④-b 계약 절 (company.js · 0001 `companies.relations`) — 시안 장면 1·1b·2
   ===================================================================== */
.comore .cocon{margin-top:16px}
.comore .cocon .ch{display:flex;align-items:center;gap:8px;padding:4px 0}
.comore .cocon .ch .fx{border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--l1)}
.comore .cocon .ch .cnt{font-size:14px;color:var(--l3)}
.comore .cocon .ch .sp{flex:1}
.comore .cocon .none{display:flex;align-items:center;gap:14px;padding:8px 2px;font-size:14px}
.comore .cocon .msg1{font-size:14px;color:var(--l3);padding:6px 2px}
.corel{display:grid;grid-template-columns:10px 196px 1fr auto;gap:14px;align-items:center;
  padding:10px 8px;border-radius:8px;font-size:15px;cursor:pointer}
.corel:hover{background:var(--hover)}
.corel.open{background:rgba(0,136,255,.04)}
.corel.off{color:var(--l3)}
/* 상태 점 — 진행 파랑 · 갱신일 지남 빨강 · 예정·종료는 회색(`dotClass` 와 같은 낱말) */
.corel .dot{width:8px;height:8px;border-radius:4px;background:var(--dot)}
.corel .dot.d-todo{background:var(--blue)}
.corel .dot.d-late{background:var(--red)}
.corel .dot.d-done{background:var(--green)}
.corel .per{font-size:14.5px;color:var(--l2);white-space:nowrap}
.corel .fee b{font-weight:600}
.corel .fee .ex{font-size:14px;color:var(--l3)}
.corel .tag{font-size:14px;color:var(--l2);background:var(--f2);border-radius:11px;padding:1px 9px;white-space:nowrap}
.corel .tag.e{background:none;padding:0}
.corel .past{font-size:13.5px;color:var(--red);white-space:nowrap}
.comore .cmemo{font-size:14px;color:var(--l2);padding:0 8px 8px 228px}
.coreled{margin:0 8px 12px 228px;padding:8px 0}
.coreled .libf{grid-template-columns:92px 1fr;margin:6px 0}
.coreled .libf input[type=date]{flex:0 0 auto;width:150px;min-width:0}
.coreled .libf input.num{flex:0 0 120px;text-align:right}
.coreled .acts1{display:flex;justify-content:flex-end;padding-top:6px}
.coreled .acts1 .del{height:28px;padding:0 10px;border:0;background:none;color:var(--red);font-size:13.5px}
.coreled .pmw{position:relative}
.cosug{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:var(--f4);margin:6px 0}
.cosug .top{display:grid;grid-template-columns:10px 196px 1fr auto;gap:14px;align-items:center;
  font-size:15px;color:var(--l2)}
.cosug .top .dot{width:8px;height:8px;border-radius:4px;background:var(--l3)}
.cosug .top .per{font-size:14.5px;color:var(--l3)}
.cosug .top .primary.sm{height:28px;padding:0 12px;font-size:13.5px}
.cosug .hint{font-size:14px;color:var(--l3);margin-top:8px}
@media (max-width:820px){
  .corel,.cosug .top{grid-template-columns:10px 1fr;row-gap:4px}
  .comore .cmemo,.coreled{margin-left:8px;padding-left:16px}
}
.modal .acts .sp{flex:1}
.modal .acts .hint{font-size:14px;color:var(--l3)}
.libf .sw1{display:flex;align-items:center;gap:8px}
.libf .sw1 input{flex:0 0 auto;width:auto;min-width:0;min-height:0}
.libf .hint{font-size:14px;color:var(--l3);flex:0 0 auto}
.libf input[type=date]{flex:0 0 auto;width:150px;min-width:0}
.libf input.num{flex:0 0 120px;text-align:right}

/* ---------------------------------------------------------------------
   문서함(2026-09-21 · 묶음 7-5) — 고객사 「문서」 탭 + 세부 정보 "문서함 ▸" 절
   시안 `docs/mock/문서함-시안-확정.html`. 줄 = 알약 · 이름 · 출처 · 날짜.
   --------------------------------------------------------------------- */
.comore .codocsec{margin-top:16px}
.comore .codocsec .ch{display:flex;align-items:center;gap:8px;padding:4px 0}
.comore .codocsec .ch .fx{border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--l1)}
.comore .codocsec .ch .cnt{font-size:14px;color:var(--l3)}
.comore .codocsec .ch .sp{flex:1}
.comore .codocsec .none{padding:8px 2px;font-size:14px}
.chips.codocbar{margin:4px 0 8px}
.codocadd{display:flex;align-items:center;margin:2px 0 4px}
.codocadd .sp{flex:1}
.codoc{position:relative;display:grid;grid-template-columns:104px 1fr auto 22px;gap:14px;
  align-items:baseline;padding:10px 10px;border-radius:8px;font-size:15px;cursor:pointer}
.codoc:hover{background:var(--hover)}
.codoc .ty{justify-self:start;font-size:13px;color:#0067c2;background:rgba(0,136,255,.09);
  border-radius:11px;padding:1px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.codoc .ty.ch{color:var(--l2);background:var(--f2)}
.codoc .ti{min-width:0}
.codoc .ti b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codoc .ti small{display:block;font-size:14px;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codoc .ti small .link{font-size:14px;color:var(--l3);border:0;background:none;padding:0}
.codoc .dt{font-size:14px;color:var(--l3);text-align:right;white-space:nowrap}
.codoc .mb{width:20px;height:20px;border:0;border-radius:10px;background:none;color:var(--l3);
  font-size:14px;line-height:1;padding:0}
.codoc .mb.e{display:inline-block}
.codoc .mb:hover{background:var(--f2);color:var(--l1)}
.codoc.mini{grid-template-columns:104px 1fr auto;padding:7px 10px}
/* 보관 일수를 지난 줄 — **흐리게만** 한다(아직 없어진 것은 아니다) */
.codoc.fade{opacity:.6}
/* 눌러 봤더니 없더라 — 그때 회색으로 굳고 이름에 취소선(세션 메모리 · 저장 없음) */
.codoc.gone{opacity:1;cursor:default}
.codoc.gone .ti b{color:var(--l3);text-decoration:line-through}
.codocmsg{font-size:14px;color:var(--l2);padding:0 10px 8px}
.codocs .row{padding:10px}
.note2{font-size:14px;color:var(--l3);padding:10px 10px 0}
.codocempty{padding:26px 10px;text-align:center}
.codocempty .l1{font-size:15px;color:var(--l2)}
.codocempty .l2{font-size:14px;color:var(--l3);margin:4px 0 14px}
.codoced{margin:0 8px 12px 118px;padding:8px 0}
.codoced .libf{grid-template-columns:92px 1fr;margin:6px 0}
.codoced .acts1{display:flex;justify-content:flex-end;padding-top:6px}
.codocs .msg1,.cobody .msg1{font-size:14px;color:var(--l3);padding:6px 2px}
/* [＋ 문서 올리기] 창 */
.docup .fl{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center;margin:10px 0;font-size:15px}
.docup .fl .k{font-size:14px;color:var(--l2);font-weight:600}
.docup .fl .k em{font-style:normal;color:var(--red);margin-left:3px}
.docup .fl .v{min-width:0}
.docup .fl .v input{width:100%}
.docup .fl .v input[type=date]{width:170px}
.docup .pk1{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;
  border-radius:15px;background:var(--f2);font-size:14px;color:var(--l1)}
.docup .filebox{display:flex;align-items:center;gap:10px;border:1px dashed rgba(0,0,0,.2);
  border-radius:8px;padding:10px 12px;font-size:14.5px;color:var(--l2);width:100%;text-align:left}
.docup .filebox b{color:var(--l1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docup .filebox .sz{color:var(--l3);white-space:nowrap}
.docup .filebox .sp{flex:1}
.docup .filebox.none{justify-content:flex-start;background:none;cursor:pointer;color:var(--l3)}
.docup .filebox .link{border:0;background:none;color:var(--l2);font-size:14px;padding:0}
.docup .bar{height:6px;border-radius:3px;background:var(--f2);overflow:hidden;margin-top:8px}
.docup .bar i{display:block;height:100%;width:40%;border-radius:3px;background:var(--blue);
  animation:docupbar 1.1s ease-in-out infinite}
@keyframes docupbar{0%{margin-left:-40%}100%{margin-left:100%}}
.docup .hint{font-size:14px;color:var(--l3);margin-top:6px;display:block}
.docup .err1{font-size:14px;color:var(--red);margin-top:6px}
@media (max-width:820px){
  /* 좁은 화면 — 줄이 **두 줄**로 접힌다(알약·날짜·⋯ 한 줄, 이름·출처 그 아래) */
  .codoc,.codoc.mini{grid-template-columns:1fr auto auto;row-gap:2px}
  .codoc .ty{grid-column:1;grid-row:1;justify-self:start}
  .codoc .dt{grid-column:2;grid-row:1}
  .codoc .mb{grid-column:3;grid-row:1;justify-self:end}
  .codoc .ti{grid-column:1 / span 3;grid-row:2}
  .codoced{margin-left:8px;padding-left:16px}
  .docup .fl{grid-template-columns:1fr;row-gap:4px}
}

/* =====================================================================
   ⑬ 할 일 (tasks.js) — 0918 톤: 배경 없이 여백, 회색 14px+, 주 단추 파랑 하나,
   경고 상자 없음. 줄 모양은 인사 이슈 표와 같은 결이다(그 자리에서 고친다).
   ===================================================================== */
.tkrow{display:grid;grid-template-columns:22px 1fr 110px 128px 18px 22px;gap:12px;align-items:center;
  padding:8px 10px;border-radius:8px;font-size:15px;color:var(--l1)}
.tkrow:hover{background:var(--hover)}
.tkrow .ck{width:16px;height:16px;margin:0}
.tkrow .ic{font-size:14px;color:var(--l3);text-align:center}
.tkrow .tt{min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--l1);
  padding:4px 4px;border-radius:6px;overflow:hidden;text-overflow:ellipsis}
.tkrow input.tt:hover{background:var(--f4)}
.tkrow input.tt:focus{outline:none;background:#fff;box-shadow:0 0 0 3px rgba(0,136,255,.12)}
.tkrow .tt .tag{font-size:14px;color:var(--l2);background:var(--f2);border-radius:11px;
  padding:1px 9px;margin-left:8px}
.tkrow .who{font-size:14px;color:var(--l2);border:0;background:none;text-align:left;
  padding:4px 6px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkrow button.who:hover{background:var(--f4)}
.tkrow .due{font-size:14px;color:var(--l3);text-align:right;border:0;background:none;
  font:inherit;font-size:13.5px;padding:4px 4px;border-radius:6px;min-width:0}
.tkrow input.due:hover,.tkrow button.due:hover{background:var(--f4)}
/* 기한이 없는 줄 — 자리는 **비워 두고** 손을 얹었을 때만 "기한" 이 비친다 */
.tkrow button.due:empty::after{content:"기한";color:transparent}
.tkrow button.due:empty:hover::after{color:var(--l3)}
.tkrow input.due:focus{outline:none;background:#fff;box-shadow:0 0 0 3px rgba(0,136,255,.12)}
.tkrow .due.late{color:var(--red);font-weight:600}
.tkrow .lk{border:0;background:none;color:var(--l3);font-size:14px;padding:0}
.tkrow button.lk:hover{color:var(--blue)}
.tkrow .pmw{position:relative}
.tkrow .mb{width:20px;height:20px;border:0;border-radius:10px;background:none;color:var(--l3)}
.tkrow .mb:hover{background:var(--f2);color:var(--l1)}
.tkrow.auto{color:var(--l2);cursor:pointer}
.tkrow.auto .tt{color:var(--l2)}
.tkrow.done{color:var(--l3)}
.tkrow.done .tt{color:var(--l3);text-decoration:line-through}
/* 2026-09-29 화면 묶음 A2 — 답할 자문 줄(✉ · 누르면 그 자문 · 체크 없음) */
.tkrow.ans{cursor:pointer}
.tkrow.ans .tt{white-space:nowrap}
.tkrow.ans .lk{text-align:center}
.tkfoot{font-size:14px;color:var(--l2);padding:14px 10px 0;border-top:1px solid var(--line);margin-top:10px}
.tkfoot .link{font-size:14px}
.tknote{font-size:14px;color:var(--l3);padding:10px}
.tknote2{font-size:14px;color:var(--l3);padding:8px 0 0}
.tkempty{padding:28px 10px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tkempty p{margin:0;font-size:15px;color:var(--l2)}
@media (max-width:820px){
  .tkrow{grid-template-columns:22px 1fr 88px 18px 22px}
  .tkrow .who{display:none}
}

/* =====================================================================
   ⑭ 참고 서랍 (drawer.js) — 확정 시안 `docs/mock/참고서랍-시안-확정.html`
   ---------------------------------------------------------------------
   배치 ⓒ — 두 기둥 틀(`.csd .cols`) 안에서 **왼쪽 질의 기둥 위에 같은 폭·같은 높이**로
   겹친다(그림자). 답변 기둥은 손대지 않는다. 기둥 사이 여백이 40px 이므로
   폭은 `calc(50% - 20px)` 이고, 틀의 아래 여백 12px 만큼 바닥을 띄운다.
   ===================================================================== */
.csd .btn.dr{padding:0 12px}
.csd .btn.dr.on{border-color:rgba(0,136,255,.45);color:#0067c2;background:rgba(0,136,255,.06);font-weight:600}
.csd .drw{position:absolute;left:0;top:0;bottom:12px;width:calc(50% - 20px);z-index:30;
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:12px;
  box-shadow:0 18px 44px rgba(20,30,60,.16);display:flex;flex-direction:column;overflow:hidden}
.csd .drw .drh{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:14px}
.csd .drw .drh b{font-size:15px}
.csd .drw .drh .sp{flex:1}
.csd .drw .drh .x{border:0;background:none;color:var(--l3);font-size:15px;padding:2px 4px}
.csd .drw .drh .x:hover{color:var(--l1)}
.csd .drw .drt{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line)}
.csd .drw .drtb{border:0;background:none;padding:8px 10px;font-size:14px;color:var(--l2);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.csd .drw .drtb.on{color:var(--l1);font-weight:600;border-color:var(--l1)}
.csd .drw .drk{display:flex;gap:6px;padding:10px 12px 0}
.csd .drw .drkb{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:13px;
  background:#fff;font-size:13px;color:var(--l1)}
.csd .drw .drkb.on{border-color:rgba(0,136,255,.45);color:#0067c2;background:rgba(0,136,255,.06);font-weight:600}
.csd .drw .drq{margin:10px 12px 4px;border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;font:inherit;font-size:13.5px;background:#fff}
.csd .drw .drq:focus{outline:none;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
/* 서랍 **안에서만** 스크롤한다 — 뒤 화면은 움직이지 않는다 */
.csd .drw .drl{padding:4px 12px 12px;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0}
.csd .drw .drgl{font-size:14px;font-weight:700;color:var(--l3);padding:10px 4px 4px}
.csd .drw .drrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;
  padding:8px 6px;border-radius:8px;font-size:14px;line-height:1.6}
.csd .drw .drrow:hover{background:var(--hover)}
.csd .drw .drrow .tt{min-width:0}
.csd .drw .drrow .tt b{display:block;font-weight:600}
.csd .drw .drrow .tt small{display:block;color:var(--l3);font-size:14px}
.csd .drw .drrow .tt small.pv{white-space:pre-wrap;word-break:break-word}
.csd .drw .drrow .acts{display:flex;align-items:center;gap:6px;white-space:nowrap}
.csd .drw .drins{height:26px;padding:0 10px;border:1px solid rgba(0,136,255,.4);border-radius:13px;
  background:#fff;color:#0067c2;font-size:13px;font-weight:600}
.csd .drw .drins[disabled]{border-color:var(--line);color:var(--l3);background:var(--soft);cursor:default}
.csd .drw .drpin{border:0;background:none;color:var(--l3);font-size:14px;padding:2px 3px;
  filter:grayscale(1);opacity:.55}
.csd .drw .drpin.on{color:var(--orange);filter:none;opacity:1}
.csd .drw .drdone{font-size:14px;color:var(--l3)}
.csd .drw .drtag{font-size:13px;color:#146b4c;background:rgba(47,158,106,.12);border-radius:10px;
  padding:1px 8px;margin-left:6px}
.csd .drw .drtag.o{color:#8a4b00;background:rgba(240,140,0,.12)}
.csd .drw .drmore{border:0;background:none;color:var(--l2);font-size:14px;padding:6px 6px}
.csd .drw .drmore:hover{text-decoration:underline}
.csd .drw .drnone{font-size:14px;color:var(--l3);padding:12px 6px;line-height:1.7}
.csd .drw .drnote{font-size:14px;color:var(--l3);padding:8px 14px;border-top:1px solid var(--line);
  background:var(--soft)}
.csd .drw .link.go{margin-left:2px}
/* 좁은 화면 — 두 기둥이 위아래로 쌓이는 폭에서는 서랍이 **화면을 덮고** 줄이 두 줄로 쌓인다 */
@media (max-width:900px){
  .csd .drw{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;border:0;border-radius:0;z-index:60}
  .csd .drw .drrow{grid-template-columns:1fr}
  .csd .drw .drrow .acts{margin-top:6px}
}
/* =====================================================================
   화면 다듬기 v0.5(2026-09-25) — 묶음 ㄱ: 수신함 한 줄 · 자문 목록 줄 맞춤
   시안 `docs/mock/수신함한줄-시안-확정.png` · `docs/mock/자문목록줄맞춤-시안-확정.png`
   ===================================================================== */
/* ---- 수신함 — 열 머리 한 줄 · 차례 ☐ · 채널 · 보낸 사람 · 제목 · 고객사 · 유형 · 날짜 · 줄 끝 · ⋯ ---- */
.ihead{display:flex;align-items:center;gap:14px;padding:6px 10px 4px;font-size:14px;color:var(--l3);font-weight:500}
.ihead .sel{flex:0 0 13px}
.ihead .ch{flex:0 0 20px}
.ihead .from{flex:0 0 108px}
.ihead .subj{flex:1 1 auto;min-width:0}
.ihead .co{flex:0 0 104px}
.ihead .kd{flex:0 0 88px}
.ihead .date{flex:0 0 118px;text-align:right}
.ihead .more{flex:0 0 24px}
.ihead .act,.row .act{flex:0 0 92px;display:flex;justify-content:flex-end;align-items:center;gap:4px;white-space:nowrap}
.row .act .sm{height:24px;padding:0 10px;font-size:13px}
/* 좁은 폭 — 수신함(#list)도 자문 목록과 같은 방식으로 한 열씩 숨긴다(2026-09-26 v0.7 점검 ·
   날짜 → 유형 순, 제목·고객사는 끝까지 남는다). `#list` 로 묶어 고객사 개요(`#coTl`)의 같은
   `.row .date`·`.row .kd` 는 건드리지 않는다 */
@media (max-width:1150px){ #list .ihead .date,#list .row .date{display:none} }
@media (max-width:900px){ #list .ihead .kd,#list .row .kd{display:none} }
.row .act .go{font-size:13px;color:var(--blue);text-decoration:none;white-space:nowrap}
/* 답장 줄의 한 단 들여쓰기는 보낸 사람 칸 **안에서**(열이 어긋나지 않게) */
.row.reply{padding-left:10px}
.row.reply .from{padding-left:22px}
/* 고객사·유형 칸 = 고르기 단추(테두리 없는 작은 글자) · 비었으면 회색 「고객사 ▾」「유형 ▾」 */
.row .co .cell,.det .dtop .cell{border:0;background:none;padding:0;height:auto;font:inherit;font-size:14px;
  color:var(--l1);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.row .co .cell.blank,.det .dtop .cell.blank{color:var(--l3)}
.row .co .cell:hover,.row .co .cell.on{color:var(--blue)}
.row .co .blank{color:var(--l3)}
.row .kd.undec{color:var(--l3)}
.row .kd.undec::before{display:none}
/* 그 칸 **바로 아래** 고르기 창(검색칸 + 목록 + 만들기 줄 — 공용 `picker()` 를 붙박이로) */
.cellpk{position:absolute;top:42px;left:0;z-index:30;width:320px;background:#fff;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.cellpk .pk{border:1px solid var(--line);border-radius:10px}
.cellpk .pk>div:not(.in){max-height:260px}
.cellpk .hint{margin:0;padding:6px 12px;font-size:14px;color:var(--l2)}
/* 붙박이 창의 검색칸 — `.modal .pk .in input` 과 같은 모양(창 밖이라 그 규칙이 닿지 않는다) */
.cellpk .pk .in input{flex:1;border:0;outline:none;font:inherit;min-width:0;height:auto;padding:0;width:auto;background:none}
.cellpk .pk .in .hint{padding:0;font-size:14px;color:var(--l3)}
.cellpk .mk.clr{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;color:var(--l2);
  border-top:1px solid var(--line);cursor:pointer;background:#fff;border-radius:0 0 10px 10px}
.cellpk .mk.clr:hover{background:var(--f3)}
/* ⋯·막대의 「나만 보기」「공유」 가 빈 줄에 고객사를 물을 때 — 같은 창에 머리 한 줄(v0.7) · 막대는 막대 바로 아래 */
.cellpk .pkt{padding:8px 12px 6px;font-size:14px;font-weight:600;color:var(--l2)}
#bulk{position:relative}
#bulk .cellpk{top:calc(100% + 4px);font-size:14px}
.menu.cellmenu{top:42px;min-width:140px}
/* ⋯ 메뉴 — 지금 상태에 ✓ */
.menu .mi.cur::after{content:"✓";float:right;color:var(--blue);font-weight:600}
/* 펼친 줄 첫 줄 — 고객사 ▾ · 유형 ▾ · 줄 끝 단추 */
.det .dtop{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14px;flex-wrap:wrap}
.det .dtop .d{color:var(--l3)}
.det .dtop .only{margin-left:5px;font-size:13px;color:var(--l3)}
.det .dtop .acts{margin-left:auto;display:flex;gap:6px}
.det .dtop .cogo{color:var(--blue);text-decoration:none;font-size:13px}
/* 메모 — [저장] 없이 저절로 저장 · 오른쪽 아래 회색 한 줄 */
.det .memo{flex-direction:column;align-items:stretch}
.det .memo .mst{align-self:flex-end;font-size:14px;color:var(--l3);min-height:18px}
.det .memo .mst .link{font-size:13px}
/* 알림의 [되돌리기] */
.toast .undo{color:#9fd0ff;font-size:13px;background:none;border:0;padding:0;margin-left:2px;cursor:pointer}
/* 고객사 ▾ 창 맨 위 「고객사 없음」(옛 [미분류] 칩) */
.dd .it.nonep{border-bottom:1px solid var(--line)}

/* 2026-09-29 화면 묶음 A1 */
/* ① 여러 줄 막대는 목록을 밀지 않고 **탭 줄(#chips) 자리에 겹쳐** 선다(Gmail 식 · 높이 변화 0).
     자리·폭·높이는 app.js `inboxBulkPlace` 가 탭 줄에서 옮겨 적는다. 바탕은 불투명(밑의 탭 글자가 비치지 않게) */
#vInbox{position:relative}
#vInbox #bulk{position:absolute;z-index:25;margin:0;box-sizing:border-box;padding:0 10px;background:#eef5fd;
  flex-wrap:nowrap;overflow:visible}
#vInbox #bulk.wrap{flex-wrap:wrap;padding:4px 10px;box-shadow:0 6px 16px rgba(0,0,0,.10)}
#vInbox #bulk .sm{height:28px;border-radius:14px;padding:0 12px;white-space:nowrap}
/* ② 머리 전체 체크칸 · ③ 체크칸 18px · ⋯ 단추 28px 캡슐(누르기 쉬운 크기 — 수신함·고객사 소통 기록 공용 줄) */
.ihead .sel{flex:0 0 18px;display:flex;align-items:center}
.ihead .selall,.row input.sel{width:18px;height:18px;flex:0 0 18px;margin:0;cursor:pointer;accent-color:var(--blue)}
.ihead .more{flex:0 0 28px}
.row .more{flex:0 0 28px;width:28px;height:28px;border-radius:14px;font-size:17px;line-height:1}
/* ⑥ 펼친 줄 첫 줄의 고객사 ▾ · 유형 ▾ 는 줄 머리에 이미 있다 — 넓은 화면에서는 빼고(줄의 유형 칸이 숨는)
     900px 이하에서만 선다. ↗ 는 넓은 화면에서 고객사 이름까지 보인다 */
.det .dtop .dsel{display:none}
.det .dtop .cogo .cgn{color:var(--l1)}
@media (max-width:900px){
  .det .dtop .dsel{display:inline-flex;align-items:center;gap:8px}
  .det .dtop .cogo .cgn{display:none}
}
/* ⑧ [새로 고침] 이 도는 동안 — 흐림 · 다시 못 누름 */
.rec .sm.busyre,.rec .sm.busyre:hover{opacity:.55;cursor:default;background:#fff}
/* ⑨ 보낸 곳별 정리 — 개인 메일은 주소 하나씩(주소는 길 수 있어 말줄임) */
.grpit.addr .hd b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---- 자문 목록 — 열 머리 고정 · 열 폭 고정(제목만 늘어남) ----
   고객사 84 · 상태 132 · 담당 100 · 연락처 92 · 기한 128 · 받은 날 80 · 💬 36 (px) */
.cshead,.csrow,div.csq{display:flex;align-items:center;gap:12px}
.cshead{padding:6px 10px 4px;font-size:14px;color:var(--l3);font-weight:500}
div.csq{padding:8px 10px}
.cshead .sel{flex:0 0 13px}
.cshead .co,.csrow .co,div.csq .co{flex:0 0 84px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cshead .nm,.csrow .nm,div.csq .nm{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.csrow .nm .tw,div.csq .nm .tw{flex:0 0 18px;width:18px;height:18px;margin-right:4px;border:0;border-radius:9px;
  background:none;color:var(--l3);font-size:14px;padding:0}
div.csq .nm{padding-left:20px}                       /* 하위 질의 = 제목 칸 안에서 한 단(20px) */
div.csq .nm .tw{border-left:1px solid var(--line);border-radius:0;height:22px}
.csrow .nm .tt,div.csq .nm .tt{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrow .nm .n{margin-left:auto;padding-left:8px;flex:0 0 auto}
div.csq .qn{flex:0 0 auto;margin-right:8px;color:var(--l3);font-size:14px}
/* 「☎ 내용 미기재」 — 점선 알약(상태가 아니다). 알약·「질의 N」은 줄지 않고 **제목이 먼저 말줄임**(v0.7 수용 기준 ⑧) */
.slotp{flex:0 0 auto;margin-left:8px;overflow:hidden;white-space:nowrap;
  border:1px dashed var(--l3);border-radius:10px;padding:0 8px;font-size:12.5px;line-height:20px;
  color:var(--l2);font-weight:400}
.cshead .stt,.csrow .stt,div.csq .stt{flex:0 0 132px;min-width:0;display:block;position:relative;
  padding-left:13px;font-size:14px;white-space:nowrap;overflow:hidden}
.cshead .stt{padding-left:0}
.csrow .stt::before,div.csq .stt::before{position:absolute;left:0;top:6px}
.csrow .stt .sl,div.csq .stt .sl{display:block;overflow:hidden;text-overflow:ellipsis}
.cshead .adv,.csrow .adv,div.csq .adv{flex:0 0 100px}
.cshead .who,.csrow .who,div.csq .who{flex:0 0 92px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cshead .due,.csrow .due,div.csq .due{flex:0 0 128px;text-align:left;font-size:14px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.cshead .date,.csrow .date,div.csq .date{flex:0 0 80px;text-align:right;font-size:14px;color:var(--l3);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.cshead .cnt,.csrow .cnt,div.csq .cnt{flex:0 0 36px;text-align:right}
.cshead .due{font-size:14px}                        /* 열 머리 「기한」 — 다른 머리와 같은 14(대비 v1.1) */
.csrow .due .over,div.csq .due .over{white-space:nowrap}
/* 좁은 폭 — 받은 날 → 연락처 → 💬 순으로 한 열씩 숨기고, 900px 이하는 담당을 동그라미만 */
/* 2026-09-27 디자인 재대조 — 경계를 올려 제목 칸이 200px 아래로 떨어지는 구간을 없앴다(받은 날 1320 · 연락처 1220) */
@media (max-width:1320px){ .cshead .date,.csrow .date,div.csq .date{display:none} }
@media (max-width:1220px){ .cshead .who,.csrow .who,div.csq .who{display:none} }   /* 1150 에서도 제목 칸 200px 이상(화면 사양 4절) */
@media (max-width:1000px){ .cshead .cnt,.csrow .cnt,div.csq .cnt{display:none} }
@media (max-width:900px){
  .cshead .adv,.csrow .adv,div.csq .adv{flex-basis:28px}
  .csrow .adv .nm2,div.csq .adv .nm2{display:none}
  .slotp .w{display:none}
}
/* 찾기 칸 — 평소엔 좁게, 누르면 펼쳐진다 */
#csChips .csq{width:120px;transition:width .15s}
#csChips .csq:focus,#csChips .csq:not(:placeholder-shown){width:210px}
/* 1200px 아래(2026-09-27 · main 답변 2절 (c)) — 검색칸은 접힌 「⌕」 단추(32px) · 누르거나 글자가 있으면 210px.
   CSS 만으로: 접힌 동안 자리 글자를 감추고 ⌕ 하나를 덮어 보인다.
   그래도 넘치면(펼친 검색칸 등) 칩이 하나씩 흘러내리지 않게 **두 덩어리** — 윗줄 보기 탭 · 아랫줄 오른쪽 정렬 `.csflt`. */
#csChips .csflt{display:flex;align-items:center;gap:4px;flex:0 0 auto}
/* 2026-09-27 재대조 — 탭 묶음은 안에서 꺾이지 않는다(「전체」는 늘 탭 끝). 넘치면 거르기 덩어리가 통째로 아랫줄 오른쪽 끝 */
#csChips{flex-wrap:wrap}
#csChips .grp.tabs{flex-wrap:nowrap;flex:0 0 auto}
#csChips .grp.tabs .chip{white-space:nowrap}
#csChips .csflt{margin-left:auto}            /* 한 줄일 때는 `.sp` 가 빈자리를 먼저 먹어 0 · 꺾이면 오른쪽 끝 */
@media (max-width:1280px){                   /* 검색칸 접힘 경계 = 받은 날 숨김과 같은 줄에서 시작(1200→1280) */
  #csChips .grp.find{position:relative}
  #csChips .csq{width:32px;padding:0;cursor:pointer}
  #csChips .csq:not(:focus)::placeholder{color:transparent}
  #csChips .grp.find::before{content:"⌕";position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:16px;color:var(--l2);pointer-events:none}
  #csChips .csq:focus,#csChips .csq:not(:placeholder-shown){width:210px;padding:0 10px;cursor:text}
  #csChips .grp.find:focus-within::before,#csChips .grp.find:has(.csq:not(:placeholder-shown))::before{content:none}
}

/* ---- 묶음 ㄴ(2026-09-25 · 규칙반영 시안) ---- */
/* A5 담당 고르기 — 누를 수 있으면 점선 밑줄 + ▾, 아래로 고르기 창(`.cellpk` 붙박이) */
.csd .advbtn{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  border-bottom:1px dashed var(--l3);line-height:1.3}
.csd .advbtn:hover{color:var(--blue);border-bottom-color:var(--blue)}
.cellpk.advpk{top:26px;width:360px;white-space:normal}
.cellpk.advpk .hint .link{font-size:13px}
/* B8 끝내기 — 머리의 이유 글자 · 이유 창 */
.csd .titleline .closedhow{font-size:14px;color:var(--l2)}
.csclose{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.csclose .rd{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;cursor:pointer;white-space:nowrap}
/* `.modal input{width:100%;height:32px}` 이 라디오를 칸 가운데로 키운다 — 동그라미는 왼쪽 작게, 글자는 바로 옆 한 줄 */
.modal .csclose .rd input[type=radio]{flex:0 0 auto;width:16px;height:16px;margin:0;padding:0}
.csclose .rd:has(input:checked){border-color:var(--blue);background:rgba(0,136,255,.06)}
.menu .mi:disabled{color:var(--l3);cursor:default;background:none}
#csSendWait{font-size:13px;margin:-4px 0 6px;text-align:right}
/* B18 계약 셋 — 점 + 글자(배경 없음): 계약 중 초록 점 · 계약 예정 초록 테 · 계약 없음 회색 */
.cst{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--l1);white-space:nowrap}
.cst::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--dot)}
.cst.on::before{background:var(--green)}
.cst.soon::before{background:none;box-shadow:inset 0 0 0 1.5px var(--green)}
.cst.none{color:var(--l2)}
.corow .con{flex:0 0 92px}
.cohead .cst{font-size:14px;margin-left:4px}
.cohead .cper{font-size:14px;color:var(--l2);white-space:nowrap}
#coChips .chip .n{margin-left:5px;color:var(--l3);font-size:14px}
#coChips .coarch{font-size:14px;color:var(--l2);margin-right:10px;white-space:nowrap}
#coChips .coarch.on{color:var(--blue)}
#coChips .coarch .n{margin-left:4px}
/* B5 [＋ 새 메일] 회신 기한 */
.comaildue{display:flex;align-items:center;gap:10px}
.comaildue input{width:170px}
.comaildue .hint{font-size:14px;color:var(--l2)}
/* 먼저 한 연락(2026-09-28 · 시안 먼저한연락-시안-확정) — 보낸 쪽 표시 · 새 메일 창 · 「받음 | 먼저 연락」 */
.row .from .me,.row .from .ar{color:var(--l3);font-weight:400}
.row .from .ar{margin:0 3px}
.row .from .rc{color:var(--l1);font-weight:600}
.list.tl .row .from{flex:0 0 190px}
#modalBox:has(#coMailGo){max-height:92vh;overflow:auto}
.modal .cobtn{display:flex;align-items:baseline;gap:8px;width:100%;height:32px;padding:0 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-size:14px;text-align:left;cursor:pointer;line-height:30px}
.modal .cobtn small{color:var(--l3);font-size:14px}
.modal .cobtn .car{margin-left:auto;color:var(--l3)}
.modal .faded{opacity:.4;pointer-events:none}
.modal .chips{display:flex;flex-wrap:wrap;gap:4px}
.modal .dr{padding:4px 6px}
.modal .dr .in{display:flex;align-items:center;gap:6px}
.modal .dr .in.bad input{border-color:var(--red)}
.modal .x{border:0;background:none;color:var(--l3);cursor:pointer;padding:0 4px;font-size:14px}
.modal .dr .sub{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--l2)}
.modal .dr .sub input{width:auto;height:auto;margin:0}
.modal .dr .sub.gray{color:var(--l3)}
.modal .dr .sub.err{color:var(--red)}
.modal .add{border:0;background:none;color:var(--blue);font-size:14px;padding:6px;cursor:pointer}
.modal .add:disabled{color:var(--l3);cursor:default}
.modal .files{border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.modal .files .fl{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}
.modal .files .fl .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .files .z,.modal .files .tot{color:var(--l3);font-size:14px;white-space:nowrap}
.modal .files .ft{display:flex;align-items:center;justify-content:space-between;padding:4px 0}
.modal .files .tot.over{color:var(--orange);font-weight:600}
.modal .one{margin:8px 0 0}
.ni .seg,.dtop .seg{display:inline-flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;vertical-align:middle}
.ni .seg{margin-top:8px}
.ni .seg button,.dtop .seg button{height:26px;padding:0 12px;border:0;background:#fff;font-size:14px;color:var(--l2);cursor:pointer}
.ni .seg button+button,.dtop .seg button+button{border-left:1px solid var(--line)}
.ni .seg button.on,.dtop .seg button.on{background:var(--f3);color:var(--l1);font-weight:600}
@media (max-width:600px){ #modalBox:has(#coMailGo){width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0} }