/* =====================================================================
   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}
/* ---- 단추 꼴 한 벌(확정 시안 `docs/mock/단추꼴-시안/단추꼴-시안-확정.html` · 대표 2026-10-08 · 화면 규격 ⑰) ----
   꼴 넷 — 파랑 `.primary` · `.btn.pri`(그 줄의 으뜸 하나 · 맨 오른쪽) / 테두리 `.btn` · `.sm`(보통 동작) /
           글자 `.btn.gray` · 거르기 줄 `.chip` · 고르는 단추 `.ddlb` · 고르기 막대(올리면 알약 바탕) / 문장 안 글자 `.link`(되돌리기)
   크기 둘 — 보통 32(머리 줄 · 창 아래 줄) · 작은 것 28(`.sm` — 목록 줄 안 · 칸 안 · 막대) · 휴대폰(≤600) 보통 40 · 글자는 옛 값 그대로 14(시안의 작은 것 13.5 는 안 옮김 — 설정 「글자 14px 이상」)
   모서리 — 알약(높이의 반 · 999px). **입력 칸 · 검색칸 · 카드 · 창 · 목록 상자는 네모 그대로**(적는 곳은 네모, 누르는 곳은 둥글게) */
.sm{height:28px;padding:0 12px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;font-size:14px;font-weight:500}
.sm:hover{background:var(--f4);border-color:rgba(0,0,0,.22)}
.primary{height:32px;padding:0 17px;border:0;border-radius:999px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:600}
.primary:hover{background:#0062B8}
/* 으뜸 단추와 한 줄에 선 테두리 단추는 보통 크기(창 아래 줄 [취소] [만들고 지정]) — 자리마다 따로 정한 값이 있으면 그것이 이긴다 */
:where(.primary,.btn.pri)~.sm,.sm:where(:has(~.primary,~.btn.pri)){height:32px;padding:0 14px;font-size:14px}
/* 못 누를 때 — 파랑은 옅은 파랑 · 테두리는 흐린 글자(자리마다 opacity 를 또 곱하지 않는다) */
.primary[disabled],.primary[disabled]:hover{background:rgba(0,112,210,.35);cursor:default}
.sm[disabled],.sm[disabled]:hover{color:rgba(0,0,0,.3);border-color:var(--line);background:#fff;cursor:default}
.primary.sm[disabled],.primary.sm[disabled]:hover{background:rgba(0,112,210,.35);border-color:transparent;color:#fff}   /* 둘을 함께 단 작은 파랑도 옅은 파랑(리뷰 2026-10-08 ②) */
.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)}
.bootw{display:flex;align-items:center;justify-content:center;height:100%;background:var(--side);font-size:14px;color:var(--l3)}   /* 여는 중 — 로그인 창과 같은 바탕 · 글자만 옅게(2026-10-04) */
/* 첫 그림 전(2026-10-07) — 자료를 읽는 동안 메뉴 · 본문을 감추고 「여는 중…」 만(뒤늦게 끼는 메뉴가 깜빡이지 않게 · app.js `enter`) */
#app.first #side nav,#app.first #main{visibility:hidden}
#app.first::after{content:'여는 중…';position:fixed;left:0;right:0;top:50%;text-align:center;font-size:14px;color:var(--l3);pointer-events:none}
.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}
/* 「이 기기에서 로그인 유지」(2026-10-09) — 「비밀번호 찾기」 와 같은 줄 왼쪽 · 같은 글자 */
.gate .fgt{align-items:center}
.gate .fgt .lgkeep{display:inline-flex;align-items:center;gap:6px;margin-right:auto;font-size:14px;color:var(--l2);cursor:pointer}
.gate .fgt .lgkeep input{display:inline-block;width:auto;height:auto;margin:0;padding:0}
.gate .fgt .lgkeep input:focus{box-shadow:none;outline:2px solid rgba(0,112,210,.76);outline-offset:2px}
.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;border:0;background:none;text-align:left}
/* 「Firm OS」 = 홈(2026-10-17 · 결정 626) — 손 얹으면 이름에만 밑줄(「beta」 는 inline-block 이라 밑줄이 건너뜀) · 꾸밈 없음 */
#side .brand:hover,#side .brand:focus-visible{text-decoration:underline}
#side .brand .brand-beta{display:inline-block}
/* 제품 이름 뒤 「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}
/* ⌕ 찾기 — 휴대폰 아이콘 띠(760 이하)의 맨 위 한 칸만(2026-10-17 결정 626 · 넓은 화면은 단축키 · 꼴은 아래 760 절) */
.sfind{display:none}
.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}
/* 메뉴 묶음 사이 얇은 선(2026-10-03 · app.js `sideGroup` — 빈 묶음은 선 없이 건너뛴다) · 접힌 56 에서도 같은 자리(아이콘 칸 폭) */
.navsep{height:1px;margin:7px 0 9px;background:var(--line)}
.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 .who{font-size:14px;color:var(--l2);padding:8px;margin-top:auto}   /* 맨 아래(2026-10-18 묶음 B ③ — 옛 아래 넷이 갖던 아래로 미는 여백을 이 줄이) */
#side .who .link{margin-left:8px;font-size:14px}
/* 「설정」 옆 파란 점 = 안 본 새 소식(2026-10-18 묶음 B ③ · app.js 1-1b `nwNav` · 옛 「새 소식」 줄의 점) — 펼침은 이름 바로 뒤 · 접힘 · 아이콘 띠는 아이콘 오른쪽 위 */
#side .nwdot{flex:0 0 6px;width:6px;height:6px;border-radius:3px;background:var(--blue)}
#app.sfold:not(.sfly) #side .nwdot{position:absolute;left:25px;top:5px}
@media (max-width:760px){ #side .nwdot{position:absolute;left:25px;top:5px} }
/* 「새 소식」 오른쪽 칸(설정 › 도움 · 시안 묶음안-ㄷf-겹창-도움-새소식) — 묶음마다 날짜(14 회색) + 글(16 · 문단) · 사이 24 */
.nwpane .nwr{margin-top:24px}
.nwpane .nwd{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--l3);line-height:1.5}
.nwpane .nwn{font-size:13px;font-weight:700;color:var(--blue)}
.nwpane p{margin:8px 0 0;font-size:16px;line-height:1.7;color:var(--l1);overflow-wrap:anywhere}
/* 「의견 보내기」 오른쪽 칸 — 보내는 화면 한 줄 · 글 칸 · 남은 글자 …… [보내기] */
.fbpane{margin-top:16px}
.fbpane .one{font-size:14px}
#fbText{display:block;width:100%;height:200px;margin-top:10px;resize:vertical;box-sizing:border-box}
.fbpane .fbrow{display:flex;align-items:center;gap:12px;margin-top:8px}
.fbpane .fbcnt{flex:1;font-size:14px;color:var(--l3)}
.fbpane .msg:empty{display:none}
.fbpane .msg{margin-top:8px;color:var(--red);font-size:14px}
/* [물어보기] 오른쪽 칸(설정 › 도움 · 2026-10-18 묶음 B ③ — 옛 사이드바 옆 창 · 휴대폰 아래 장은 걷음) */
.hpbox{margin-top:16px;max-width:640px;font-size:14.5px;color:var(--l1)}
.hpbox .hpq{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.hpbox .hpq:focus-within{box-shadow:inset 0 0 0 1.5px rgba(0,112,210,.55)}
.hpbox .hpq.off{opacity:.5}
.hpbox .hpq svg.i{width:16px;height:16px;flex:0 0 16px;stroke:var(--l3);fill:none;stroke-width:1.6}
.hpbox .hpq input{flex:1;min-width:0;height:100%;border:0;outline:0;padding:0;background:none;font-size:14.5px}
.hpbox .hpexs{margin-top:6px}
.hpbox .hpex{display:flex;align-items:center;width:100%;height:36px;padding:0 2px;border:0;border-bottom:1px solid var(--line);background:none;
  font-size:14px;color:var(--l1);text-align:left;cursor:pointer}
.hpbox .hpex::before{content:'⌕';margin-right:8px;color:var(--l3)}
.hpbox .hpex:hover{background:var(--hover)}
.hpbox .hpa{margin-top:12px;padding:11px 14px 12px;font-size:14.5px;line-height:1.75;color:var(--l1)}
.hpbox .hpa p{margin:0}
.hpbox .hpa .hpw{color:var(--l2);margin-bottom:6px}
.hpbox .hpgo{display:flex;margin-top:8px;padding:0;border:0;background:none;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer;text-align:left}
.hpbox .hpgo:hover{text-decoration:underline}
.hpbox .hps{margin-top:8px;font-size:12.5px;color:var(--l3)}
.hpbox .hpx{margin-top:12px;padding:11px 14px 12px;border-radius:10px;background:var(--f4);font-size:14px;line-height:1.7;color:var(--l2)}
.hpbox .hpx b{display:block;color:var(--l1)}
.hpbox .hpx .acts{margin-top:8px}
.hpbox .hpf{margin-top:12px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;color:var(--l3)}
.stpane.hpflash,#stBody.hpflash{border-radius:10px;background:rgba(0,112,210,.07);box-shadow:0 0 0 2px rgba(0,112,210,.35);transition:background .3s}
/* ---- 사이드바 아이콘 · 접기(2026-09-29 · 시안 docs/mock/사이드바접기-시안) ----
   아이콘 왼쪽 끝 19px(안쪽 10 + 9) · 머리·찾기·메뉴·아래 두 줄의 높이·간격이 펼침·접힘·겹쳐 뜸 세 상태에서 같다 —
   아이콘은 가로·세로 한 픽셀도 움직이지 않고 이름만 오른쪽에 생긴다.
   접힘(#app.sfold) = 폭 56 · 아이콘만 · 사이드바가 본문 위로 떠 있는 층(본문은 왼쪽 56 을 비운다).
   겹쳐 뜸(#app.sfold.sfly) = 같은 사이드바가 232 로 본문 위에 겹친다(본문 안 밀림).
   ★ 760 이하는 옛 규칙 그대로 — 아래 절은 모두 761 이상에서만 선다(아이콘·머리 줄·동그라미는 숨는다). */
#side svg.i{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){ #side .sbtg{display:none} }
@media (min-width:761px){
  #app{position:relative}
  #side{overflow-x:hidden;overflow-y:auto;transition:width .15s ease,flex-basis .15s ease}
  #side .sbhd{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:10px}
  #side .sbhd .brand{padding:0;white-space:nowrap}
  .sbtg{display:flex;align-items:center;flex:0 0 36px;width:36px;height:32px;padding:0 0 0 9px;
    border:0;border-radius:6px;background:none;color:var(--l2)}
  .sbtg:hover{background:var(--hover)}
  #side .navi{position:relative;gap:10px;padding:0 10px 0 9px;white-space:nowrap}
  #side .who{display:flex;align-items:center;gap:10px;height:40px;padding:0 0 0 9px;margin-top:auto;white-space:nowrap}
  #side .who .link{margin:0 8px 0 auto}
  #meName{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .sbav{display:flex;align-items:center;justify-content:center;flex:0 0 22px;width:22px;height:22px;margin-left:-2px;
    border-radius:11px;background:#DDE3EA;color:var(--l1);font-size:13px;font-weight:600}
  /* 접힘 — 폭 56(안쪽 10 + 아이콘 칸 36 + 10). 켜진 메뉴 바탕은 칸 폭 그대로 36×32 */
  #app.sfold{padding-left:56px}
  #app.sfold #side{position:absolute;left:0;top:0;bottom:0;z-index:50;width:56px;flex-basis:56px}
  #app.sfold:not(.sfly) #side{overflow:visible}
  #app.sfold:not(.sfly) #side .brand,#app.sfold:not(.sfly) #meName,#app.sfold:not(.sfly) #lgOut{display:none}
  /* 이름은 화면에서만 감춘다(읽어 주는 도구에는 남는다) */
  #app.sfold:not(.sfly) #side .tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* 안 읽음 배지 — 아이콘 오른쪽 위에 겹친 알약(높이 16 · 흰 13px — 시안 12px 은 글자 대비 v1.1 하한 때문에 13 · 사이드바 색 2px 테두리 · 99 넘으면 99+) */
  #app.sfold:not(.sfly) #navBadge{position:absolute;left:22px;top:2px;margin:0;min-width:20px;height:20px;padding:0 4px;
    border:2px solid var(--side);font-size:0;line-height:16px}
  #app.sfold:not(.sfly) #navBadge::after{content:attr(data-s);font-size:13px}
  #app.sfold:not(.sfly) .navi.on #navBadge{border-color:#E8E8E6}
  /* 겹쳐 뜸 — 폭만 150ms 로 넓어지고 이름은 잘려 나온다(글자 움직임 없음) */
  #app.sfold.sfly #side{width:232px;flex-basis:232px;box-shadow:6px 0 24px rgba(0,0,0,.12)}
}
#main{flex:1;min-width:0;display:flex;flex-direction:column;padding:26px 48px 40px;overflow:auto}
/* 화면 머리 = 전역 줄(2026-10-17 · 결정 570 ③ · 다섯째판 (나) · app.js 1-1f) — 「(‹) 경로 …… (그 화면 전용 단추) Brief N · ＋」 높이 40 ·
   경로 = 회색 14(스레드 안 `.thp-crm` 꼴 그대로) · 오른쪽 글자는 부품 `.gxn`(FP_TOP). 옛 큰 제목(30px)은 걷었다 */
#top{display:flex;align-items:center;gap:10px;min-height:40px;margin-bottom:6px;--tl2:rgba(0,0,0,.62)}
#top .tpath{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
#top .tpath .thp-crm a:not([href]){cursor:default;text-decoration:none}
#top .tpath .thp-crm a:not([href]):hover{color:inherit}
#top .gxn{margin-right:-6px}
#top .add{margin-left:auto}       /* [＋ 새 항목] — 제목 줄 오른쪽 */
#top .pm{position:relative}
@media (min-width:601px){#top .pm{display:none!important}}   /* 넓은 화면은 머리 ⋯ 없음 — 「.eml 올리기」 는 수신함 칩 줄 끝(결정 722 (나)) · 휴대폰 폭만 ⋯(.eml · 모두 읽음 · AI 요약) */
/* 2026-09-29 머리 오른쪽 단추 줄 — 새 메일·새 항목·벨·⋯ 가 같은 높이(32px · 2026-10-08 단추 꼴)·같은 세로 가운데·같은 간격(8px).
   벨과 ⋯ 는 같은 32px 동그라미 테두리 단추, 빨간 숫자는 벨 오른쪽 위에 걸친다(협업 벨 · 다른 화면 머리도 같은 규칙) */
#top{gap:8px}
#top>.sm,#top>.primary,#top>.cbbell,#top>.pm{align-self:center}
#top>.sm,#top>.primary,#top .pm>.sm{height:32px;box-sizing:border-box;line-height:1}
#top>.sm{padding:0 14px;font-size:14px}
#top>.cbbell,#top>.pm{display:flex}
#top .pm>.sm{width:32px;padding:0;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:#fff;font-size:16px}
#top .pm>.sm:hover{background:var(--f4)}
/* 좁은 화면 머리(2026-10-03 · Lead · 390 에서 「수/신/함」 세로 꺾임 · 단추 글자 두 줄) — 제목·단추 글자는 어느 폭에서도 꺾지 않는다.
   760 아래 = 본문 좌우 여백 16(아이콘 띠 56 옆) · 560 아래 = 제목 한 줄 · 단추는 그 아래 한 줄(빈 칸 .sp 가 줄을 끊는다 —
   수신함 홈 요약 줄 `.rec .sp` 와 같은 수) · 단추가 없는 화면은 제목 한 줄 그대로 */
#top>.sm,#top>.primary{white-space:nowrap}
@media (max-width:760px){ #main{padding:20px 16px 32px} }
/* ---- 머리 붙이기(2026-10-07 대표 결정 · 원칙 「눌렀을 때 다른 데가 안 움직인다」 · 높이는 app.js `stickSync` 가 잰다) ----
   스크롤 통은 `#main`(위 여백 `--mpt`) — 붙을 자리는 그 여백만큼 위로(`top:-여백` = 통의 맨 위 · 상세 화면의 띠 `.csfix` 와 같은 수).
   ① `#top`(제목 · 단추 줄) — 어느 화면 · 어느 폭이나. 위로 8 을 더 덮어(음수 여백 + 안쪽 여백) 붙었을 때 제목이 통 끝에 닿지 않는다.
      상세 화면(자문 한 건 · 고객사 한 곳)은 제 띠가 붙으므로 붙이지 않는다
   ② 그 화면의 거르기 줄(`.bulkhost` · 칩 줄 · 설정 · 경영의 탭 줄) — 넓은 화면(601 이상)만 · `#top` 바로 아래
   ③ 표 머리(`.ihead` · `.cshead`) · 경영의 기간 줄 — 넓은 화면만 · 거르기 줄 바로 아래
   층 차례 = `#top`(40) > 거르기 줄(27 — 그 안의 고르기 막대 25 · 드롭다운 30 이 표 머리 위로) > 표 머리(6) > 줄 */
#main{--mpt:26px;--mpx:48px;--toph:47px;--chh:0px}
@media (max-width:760px){ #main{--mpt:20px;--mpx:16px} }
#top{position:sticky;top:calc(0px - var(--mpt));z-index:40;margin-top:calc(0px - var(--mpt));padding-top:0;background:#fff}
/* ↑ 2026-10-17 전역 줄 — 통 위 여백(--mpt)을 덮어 맨 위 40 줄에 선다(시안 맨 위 줄 y 0~40 · 스레드 안 `.thp-top` 과 같은 자리 · 옛 -8/8 은 큰 제목 몫) */
/* 바탕은 통의 좌우 여백까지 덮는다 — 좁은 화면에서 옆으로 넘친 줄 끝이 머리 옆으로 비치지 않게(메뉴가 잘리지 않도록 clip 대신 뒤에 깐 한 겹) */
#top::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(0px - var(--mpx));right:calc(0px - var(--mpx));background:#fff}
body.csdet #top,body.codet #top{position:static}
body.csdet #top::before,body.codet #top::before{content:none}
/* 목록 화면의 칸은 내용만큼(줄어들지 않게) — 화면 높이로 줄어든 칸 안에서는 붙는 줄이 그 칸과 함께 올라가 버린다(상세 화면의 칸은 그대로) */
body:not(.csdet) #vCases,body:not(.codet) #vCos,#vProj{flex:1 0 auto}
#vStats{flex-shrink:0}
@media (min-width:601px){
  /* 경영의 탭 줄도 같은 층(Lead 2026-10-07 밤 — 「머리 전체」) · 경영의 기간 줄은 그 아래 층 · 옛 설정 가로 탭 줄은 2026-10-18 겹창(ㄷ-f)으로 걷음 */
  #vInbox>.bulkhost,#vCases>.bulkhost,#coChips,#plChips,#tkChips,#libChips,#scChips,#fiTabs,#mgTabs{
    position:sticky;top:calc(var(--toph) - var(--mpt));z-index:27;background:#fff}
  #sxPerBar{position:sticky;top:calc(var(--toph) + var(--chh) - var(--mpt));z-index:26;background:#fff;display:flow-root}
  #list>.ihead,#csList>.cshead{position:sticky;top:calc(var(--toph) + var(--chh) - var(--mpt));z-index:6;background:#fff;
    box-shadow:0 1px 0 var(--line)}                /* 아래 가는 선 — 줄이 머리 밑으로 들어가는 자리 */
}
/* 좁은 화면 — 전역 줄은 한 줄 그대로(시안 홈 첫째판d-휴대폰-390 「홈 …… Brief 3 · ＋」) · 전용 단추는 좌우 여백만 줄인다 */
@media (max-width:560px){
  #top>.sm,#top>.primary{padding-left:10px;padding-right:10px}
}

/* ---------------------------------------------------------------------
   ① 홈 요약 한 줄 (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)}
/* 「빠진 메일 N통」 은 누르는 글자(2026-10-07) — [새로 고침] 과 같은 일 · 도는 동안 흐림 */
.rec button.recbad{border:0;background:none;padding:0;margin:0;font:inherit;cursor:pointer}
.rec button.recbad:hover b{text-decoration:underline}
.rec button.recbad:disabled{opacity:.55;cursor:default}
.rec button.recbad:disabled:hover b{text-decoration:none}
/* 「아직 나만 보는 메일 N」(2026-10-07) — 경고가 아니라 알림(회색 글자 · 숫자만 진하게) · 누르면 그 메일만 거른다 */
.rec button.recmine{border:0;background:none;padding:0;margin:0;font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
.rec button.recmine b{color:var(--l1);margin-left:2px}
.rec button.recmine:hover{text-decoration:underline}
.rec button.recmine.on{color:var(--blue)}
.rec button.recmine.on b{color:var(--blue)}
.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)}
/* 목록 끝 「이전 500줄 더 보기」 · 「이전 500건 더 보기」 — 한도에 닿았을 때만(수신함 · 자문 목록 같은 꼴) */
.listmore{padding:14px 2px;text-align:center}
.listmore .link{font-size:14px;text-decoration:none;cursor:pointer}
.listmore .link[disabled]{color:var(--l3);cursor:default}
.listmore .link.fail{color:var(--red)}
.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}}
/* 누른 단추가 제자리에서 「처리 중…」(수신함 줄 [법인 공유] · app.js `SHARE_BUSY` · 2026-10-09 대표) — 흐림 + 위와 같은 도는 표시 */
.sm.busy,.sm.busy:hover{color:var(--l2);cursor:default;white-space:nowrap}
.sm.busy::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;
  border:2px solid var(--l3);border-top-color:var(--blue);border-radius:50%;vertical-align:-1px;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.sm.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}
/* ---- 도움말 「?」 · 말풍선(확정 시안 docs/mock/도움말-시안 · 2026-10-08) — 「?」 는 한 꼴(.hlp · 옛 .q · .cohelp 도 이 class 를 함께 단다) ----
   동그라미 18 · 올리면 옅은 바탕 · 눌러 떠 있는 동안(.on)은 한 단 진한 회색 바탕 + 진한 「?」 · 테두리 없음
   (대표 2026-10-08 밤 「검정은 너무 눈에 띈다」 — 떠 있다는 것은 말풍선이 알려 준다). 휴대폰은 동그라미 22 · 누르는 자리 40.
   **「?」 는 글자가 아니라 그림**(::before · 사이드바 「처음 쓰는 법」 아이콘 `#i-help` 와 같은 획) — 글자로 두면 보는 사람의 글꼴(Pretendard ·
   맑은 고딕 · Segoe UI …)마다 1px 쯤 위아래로 치우친다(대표 2026-10-08 밤 「정 가운데에 안 있는 것 같은데」). 그림은 어느 글꼴에서나 정가운데.
   글자 「?」 는 그대로 두되 안 보이게(줄 맞춤 · 화면 읽기 도구 · 시험이 읽는 글자) */
.hlp{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border:0;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.32);font-size:12.5px;font-weight:600;line-height:1;color:transparent;-webkit-text-fill-color:transparent;
  background:#fff;cursor:help;user-select:none;position:relative}
.hlp::before{content:"";position:absolute;inset:0;background:var(--l2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 18 18' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 9.6a2.3 2.3 0 0 1 4.4.9c0 1.6-2.2 2-2.2 3.3M12 16.8v.01'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.5 18 18' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.8 9.6a2.3 2.3 0 0 1 4.4.9c0 1.6-2.2 2-2.2 3.3M12 16.8v.01'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hlp:hover,.hlp:focus-visible{background:var(--f3)}
.hlp:hover::before,.hlp:focus-visible::before,.hlp.on::before{background:var(--l1)}
.hlp.on,.hlp.on:hover{background:var(--f1);box-shadow:none}
/* 말풍선 하나(#tip · app.js `tipShow`) — 흰 바탕 + 가는 테두리 + 그림자 + 진한 글자(▾ 목록 `.dd` 와 같은 꼴 — 대표 2026-10-08 밤 「검정 바탕으로 안 하는 게 낫겠다」 ·
   시안의 검정에서 바뀜) · 글자 13 · 한 줄이면 글 길이만큼 · 길면 260 에서 줄 바꿈(세 줄까지) · 「?」 280 · 잘린 글 전부 320 */
.tip{position:fixed;z-index:300;left:0;top:0;width:max-content;max-width:262px;background:#fff;color:var(--l1);font-size:13px;line-height:1.5;
  font-weight:400;letter-spacing:0;text-align:left;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;padding:6px 10px;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);pointer-events:none}
.tip::before{content:"";position:absolute;width:9px;height:9px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);top:-5px;left:calc(var(--ax,50%) - 5.5px)}          /* 꼬리 — 테두리 선 위에 얹힌다(--ax 는 테두리 바깥 기준이라 1 더 뺀다) */
.tip.up::before{top:auto;bottom:-5px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tip .tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.tip.q{max-width:282px}
.tip.full{max-width:322px}          /* 폭 값은 테두리 2 를 더한 것 — 글이 놓이는 폭은 시안 그대로 260 · 280 · 320 에서 여백을 뺀 만큼 */
.tip.q .tx,.tip.full .tx{display:block}
.tip.pin{pointer-events:auto}
@media (max-width:600px){
  .hlp{width:22px;height:22px;border-radius:11px}
  .hlp::after{content:"";position:absolute;inset:-9px}
  .tip,.tip.q,.tip.full{font-size:14px;max-width:calc(100vw - 32px)}
}

/* ---- 칩 ---- */
/* 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}      /* 보기 전환은 칩 줄 오른쪽 끝 */
/* 칩 끝의 ▾ — 공용 「▾ 목록」 단추(.ddlb .cv)와 같은 가는 꺾쇠로 그린다(글자 ▾·▴ 는 그대로 두고 감춤 · 2026-10-07 미니멀) */
.chip .car,.csd .titleline .pill.st .car{display:inline-block;flex:none;width:6px;height:6px;margin-left:8px;font-size:0;vertical-align:middle;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;opacity:.6;transform:translateY(-3px) rotate(45deg)}
/* 고른 것이 있는 칩 — 연한 파랑(시안). .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,#sxChips,#libChips,#tkChips,#plChips,#fiCtBar{gap:4px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);flex-wrap:nowrap}  /* 2026-09-29 — 탭·칩이 밑줄(구분선)에 붙지 않게 6px */
#chips .sp,#csChips .sp,#coChips .sp,#sxChips .sp,#libChips .sp,#tkChips .sp,#fiCtBar .sp{flex:1}
#chips .sep,#csChips .sep,#coChips .sep{display:none}
#chips .lbl,#csChips .lbl,#coChips .lbl{font-size:14px;color:var(--l3)}
#chips .chip,#csChips .chip,#coChips .chip,#sxChips .chip,#libChips .chip,#tkChips .chip,#plChips .chip,#fiCtBar .chip{
  height:32px;padding:0 10px;border:0;border-radius:999px;background:none;font-size:14px;color:var(--l2)}
#chips .chip:hover,#csChips .chip:hover,#coChips .chip:hover,#sxChips .chip:hover,#libChips .chip:hover,#tkChips .chip:hover,#plChips .chip:hover,#fiCtBar .chip:hover{background:var(--hover)}
#chips .chip.on,#csChips .chip.on,#coChips .chip.on,#sxChips .chip.on,#libChips .chip.on,#tkChips .chip.on,#plChips .chip.on,#fiCtBar .chip.on{
  color:var(--l1);font-weight:600;background:var(--f2)}
#chips .chip.sel,#csChips .chip.sel,#coChips .chip.sel,#libChips .chip.sel,#plChips .chip.sel,#fiCtBar .chip.sel{color:#0067c2;background:rgba(0,136,255,.10)}
/* 좁은 화면(2026-10-03 · Lead · 390 에서 「고/객/사」 세로 꺾임) — 칩 글자는 꺾지 않고, 칩 줄이 모자라면 줄째 다음 줄로 */
@media (max-width:760px){
  #chips,#csChips,#coChips,#sxChips,#libChips,#tkChips,#plChips{flex-wrap:wrap;row-gap:4px}
  #chips .chip,#csChips .chip,#coChips .chip,#sxChips .chip,#libChips .chip,#tkChips .chip,#plChips .chip{white-space:nowrap}
}
/* 거르기 줄(2026-10-08 확정 · `docs/mock/거르기줄-시안/` · 대표 「점점 메뉴가 쌓여가네」) — 어느 목록에서나 같은 세 묶음:
   왼쪽 「전체 N」(+ 으뜸 갈래 탭) │ 「필터」 · 고르는 단추 …… 오른쪽 「보기」 · 검색 │ 동작 단추.
   「필터」 · 고르는 단추 · 「보기」 는 공용 「▾ 목록」(.ddl) 꼴 — 켠 단추만 파란 글자 · 파란 꺾쇠(바탕은 올렸을 때 · 펼쳤을 때만) ·
   묶음 사이는 가는 세로 선(.fsep) · 목록은 단추 아래에 겹쳐 떠 아래가 밀리지 않는다 */
.chips .fsep{flex:none;width:1px;height:16px;margin:0 8px;background:rgba(0,0,0,.14)}
.chips .ddl.sel .ddlb,.chips .ddl.sel .ddlb .v{color:#0067c2;font-weight:600}
.chips .ddl.sel .ddlb .cv{border-color:#0067c2}
.chips .ddll{min-width:176px}
#chips .chip.act{color:var(--l1);font-weight:500}
#chips .chip.act[disabled],#chips .chip.act[disabled]:hover{color:rgba(0,0,0,.3);background:none;cursor:default}
/* 수신함 — 좁은 폭(≤ 900)은 묶음째 다음 줄로 · 휴대폰 폭(≤600)은 한 줄 「전체 N │ 필터 …… 보기」:
   고객사 · 유형은 「필터」 장 안의 줄(고객사 › · 유형 ›)로 들어가고 [모두 읽음] · [AI 요약]은 동작이라 오른쪽 위 ⋯ 메뉴에(`#pmAllRead` · `#pmAiSum`) */
@media (max-width:900px){
  #chips{flex-wrap:wrap;row-gap:4px}
  #chips .chip{white-space:nowrap}
  #chips .grp{flex-wrap:nowrap}
}
@media (max-width:600px){
  #chips{flex-wrap:nowrap}
  #chips .grp.tabs .chip{padding:8px 7px 8px 2px}
  #chips .ddl.co,#chips .ddl.kd>.ddlb,#chips .fsep.a,#chips #allRead,#chips #aiSumBtn{display:none}
  #chips .ddl.kd{margin-left:-4px}               /* 단추가 없는 빈 칸 — 줄의 간격(4)만큼 당긴다(목록 장은 「필터」 의 유형 › 가 연다) */
  #chips .fsep{margin:0 6px}
}
#csChips #csTitlesBtn[disabled]{color:var(--l3);cursor:default}       /* 채우는 중… */
/* [내 담당] — 도구줄에서 **알약 하나**로 선다(다른 탭·거르기와 모양이 다르다) */
#csChips .chip.pillm,#plChips .chip.pillm{height:28px;padding:0 12px;border:1px solid var(--line);border-radius:14px}
#csChips .chip.pillm:hover,#plChips .chip.pillm:hover{background:var(--f4)}
#csChips .chip.pillm.on,#plChips .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` 가 한다 */

/* ---- 고객사 거르기 창 — 칩 줄 위에 **떠서 겹친다**(목록을 밀어 내리지 않는다) ---- */
/* 줄 꼴은 고르기 창(`.pk`)과 같게(2026-10-08 확정 시안 — 검색칸만 테두리 · 이름 진하게 · 딸린 글 흐리게 · 줄 모서리 7).
   다른 것은 줄 앞 체크와 바닥 「N곳 고름 · 모두 지우기」 뿐이다(코드는 따로 — 합치기는 거르기 줄 묶음) */
.dd{position:absolute;left:0;top:34px;z-index:30;width:300px;padding:8px;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;height:38px;margin-bottom:6px;padding:0 12px;border:1px solid var(--f1);border-radius:10px;font-size:14px}
.dd .in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,210,.12)}
.dd .in input{flex:1;border:0;outline:none;font:inherit;min-width:0;background:none}
.dd .in .ic{color:var(--l3)}
#coList{max-height:280px;overflow:auto}
.dd .it{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 10px;border-radius:7px;font-size:14px;cursor:pointer}
.dd .it:hover,.dd .it.cur{background:var(--f3)}
.dd .it .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd .it .sub{color:var(--l2);font-size:13.5px;margin-left:2px;white-space:nowrap}
.dd .it .n{margin-left:auto;font-size:13.5px;color:var(--l2);white-space:nowrap}
.dd .none{padding:10px;font-size:14px;color:var(--l2)}
.dd .mark{background:#fff3c4;border-radius:2px}
.dd .ft{display:flex;align-items:center;gap:8px;margin:6px -8px -8px;padding:8px 18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--l2)}
.dd .ft .link{font-size:13.5px;margin-left:auto}

/* ---- 여러 줄 고르기 막대(2026-10-07 확정 시안 `docs/mock/고르기막대-시안`) ----
   두 곳이 **한 벌** — 수신함 `#bulk` · 자문 목록 `#csBulk`.
   거르기 줄 자리에 **겹쳐** 서는 한 줄(목록이 밀리지 않는다) · 흰 바탕 · 테두리 없이 아래 가는 선(거르기 줄의 밑줄과 같은 선) ·
   글자 · 단추는 세로 가운데 · 단추는 글자만(올리면 옅은 바탕) · 묶음 사이는 가는 세로 선 · 오른쪽 끝 ✕(고르기 풀기).
   자리: 거르기 줄과 격자 한 칸(`.bulkhost` — 수신함 · 자문 목록 · 고객사 대화 목록) */
.bulkbar{position:relative;z-index:25;display:flex;align-items:center;box-sizing:border-box;margin:0 0 6px;padding:0;
  border-bottom:1px solid var(--line);background:#fff;font-size:14px;white-space:nowrap}
.bulkhost{display:grid;grid-template-columns:minmax(0,1fr)}
.bulkhost>.chips,.bulkhost>.bulkbar{grid-area:1/1;min-width:0}
.bulkbar .n{font-size:14.5px;font-weight:700;margin-right:2px}
.bulkbar .n i{font-style:normal;color:var(--blue)}
/* 묶음 — 앞에 가는 세로 선 하나(단추가 조건으로 다 빠진 묶음은 서지 않으므로 선도 같이 빠진다) */
.bulkbar .g{display:inline-flex;align-items:center}
.bulkbar .g::before{content:"";flex:none;width:1px;height:16px;margin:0 10px;background:rgba(0,0,0,.14)}
.bulkbar .sm{height:28px;padding:0 7px;border:0;border-radius:999px;background:none;font-size:14px;font-weight:500;color:var(--l1);white-space:nowrap}
.bulkbar .sm:hover{background:var(--f3)}
.bulkbar .sm.on{color:var(--blue);font-weight:600}                 /* 고르는 창이 열린 단추 */
.bulkbar .sm.del{color:var(--red)}
.bulkbar .sm[disabled],.bulkbar .sm[disabled]:hover{color:rgba(0,0,0,.32);background:none;cursor:default}   /* [묶기] 는 두 줄 이상일 때만 */
.bulkbar .cv{display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.5px solid rgba(0,0,0,.42);border-bottom:1.5px solid rgba(0,0,0,.42);
  transform:translateY(-2px) rotate(45deg)}
.bulkbar .why{font-size:13px;color:var(--l2);margin-left:8px}
.bulkbar .g>.why:first-child{margin-left:0}
.bulkbar .bx{flex:none;width:28px;height:28px;margin-left:auto;padding:0;border:0;border-radius:50%;background:none;color:var(--l2);font-size:14px;line-height:1}
.bulkbar .bx:hover{background:var(--f3);color:var(--l1)}
/* 고객사를 묻는 작은 창(`bulkPkMount`)은 막대 바로 아래 */
.bulkbar .cellpk{top:calc(100% + 4px);font-size:14px}
/* 「자문에서 빼고 바꾸기」 한 줄 — 같은 꼴로 아래 한 줄 더(이때만 목록 머리를 한 줄 덮는다) */
.bulkbar .unl{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;height:36px;border-bottom:1px solid var(--line);
  background:#fff;font-size:13.5px;color:var(--l2)}
@media (max-width:600px){
  /* 휴대폰 — 화면 아래에 붙는 두 줄(줄 높이 44 · 엄지가 닿는 자리 · 왼쪽 아이콘 띠 56 은 가리지 않는다) */
  .bulkbar{position:fixed;left:56px;right:0;bottom:0;z-index:40;
    flex-wrap:wrap;margin:0;padding:2px 10px 8px 14px;border-bottom:0;border-top:1px solid rgba(0,0,0,.14);box-shadow:0 -6px 18px rgba(0,0,0,.08);font-size:14.5px}
  .bulkbar .n{line-height:44px}
  .bulkbar .g{height:44px}
  .bulkbar .g::before{margin:0 6px}
  .bulkbar .sm{height:36px;padding:0 6px;font-size:14.5px}
  .bulkbar .bx{width:36px;height:36px}
  /* 둘째 줄 — 넘기는 셋(개인 수신함 │ 법인 공유 │ 수신함 제외) */
  .bulkbar .g.act{order:9;flex:0 0 100%;border-top:1px solid var(--line)}
  .bulkbar .g.act::before{display:none}
  .bulkbar .g.act .sm+.sm{position:relative;margin-left:13px}
  .bulkbar .g.act .sm+.sm::before{content:"";position:absolute;left:-7px;top:10px;width:1px;height:16px;background:rgba(0,0,0,.14)}
  .bulkbar .sm+.why{display:none}                                    /* 까닭은 단추의 올림 글자에도 있다 */
  .bulkbar .sm .dw{display:none}                                     /* 휴대폰 폭 — 「자문에서 빼기 N건」 · 「자문 지우기 N건」 의 앞 낱말을 접어 막대가 한 줄에 서게(자문 목록 안이라 뜻은 그대로 · 확인 창이 풀어 말한다) */
  .bulkbar .cellpk{top:auto;bottom:calc(100% + 4px)}
  .bulkbar .unl{position:static;order:10;flex:0 0 100%;height:44px;border-bottom:0;border-top:1px solid var(--line)}
}

/* ---- 목록 — 세 화면(수신함·자문·고객사)이 **같은 한 줄**을 쓴다(2026-09-18 시안) ----
   한 줄 = 아이콘 · 고객사 · 제목(+회색 요지) · 상태 점 · 날짜.
   선·상자를 걷어 내고 **여백과 둥근 hover** 로 줄을 나눈다. 덩어리는 날짜 구분줄이 나눈다. */
.list{border-top:0}
/* 목록 맨 아래 여백(2026-10-07 대표 「맨 마지막이 바로 끝이랑 닿아 있어서 불편해」) — 끝까지 내려도 마지막 줄이 화면 바닥에 붙지 않게.
   수신함 · 자문 · 고객사 · 프로젝트 목록과 구성물 목록(#pbList)이 같은 값 하나 */
:root{--list-tail:160px}
#list,#csList,#coRows,#plRows,#pbList{padding-bottom:var(--list-tail)}
/* 시간순 보기의 날짜 구분 줄 — 스레드 보기에는 없다 */
#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}
/* 유형 = 낱말만(점 없음 · 2026-10-13 — 파란 점은 「안 읽음」 하나) · 질의는 진한 글자(`.kd.q`) */
.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.q{color:var(--l1)}      /* 질의 = 진한 글자(자문 목록 `.knd.q` 와 같은 꼴) */
.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}

/* ---- 그 자리에서 뜨는 작은 메뉴 ---- */
.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 .sttfold{border:0;background:none;padding:0;font-size:14px;color:var(--l2);cursor:pointer}      /* 「녹취 3분 12초 · 내용에 넣음 ▸」 — 내용에 넣은 녹취는 한 줄(2026-10-08) */
.det .stt .sttfold:hover{color:var(--l1)}
.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}
/* 통화 정리(녹음 줄 · 묶음 18 장면 6) — 녹취 머리의 [(AI) 정리] · AI 층 「정리」 칸 · 제안 줄(칸 둘은 위아래 · 옛 미팅 회의록 칸 .scai 는 2026-10-19 걷음) */
.det .stt .lbl{display:flex;align-items:center;gap:8px}
.det .stt .lbl .aimk{margin-left:auto}   /* [(AI) 정리] = 「원문 · 녹취 …」 줄 오른쪽 끝(시안) */
.cmmin .c{padding:6px 0 2px;font-size:14.5px;line-height:1.7;color:var(--l1)}   /* 요지 · 정한 것 사이 선 없음(시안) */
.cmmin .h+.c{padding-top:2px}
.cmmin .c h5{margin:0 0 4px;font-size:14px;color:var(--l2)}
.cmmin .c ul{margin:0;padding-left:18px}
.cmmin .scsug:empty{display:none}
.cmmin .scsug .bf-slot.ai-box{background:none;padding-left:0;padding-right:0;margin:2px 0 0}
.cmmin .cmminf{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(97,85,245,.16);padding-top:8px;margin-top:4px;font-size:13px}
.cmmin .cmminf .muted{flex:1;min-width:0}
.cmmin .h>span,.cmmin .h .aire,.cmmin .cmminf .sm{white-space:nowrap;flex-shrink:0}   /* 좁은 폭(320)에서 「정/리」 · 「다시 만들기」 가 꺾이던 것(Review-B-v12 CS2) */
@media (max-width:360px){.cmmin .h .at{display:none}}

/* ---- 모달 · 토스트 ---- */
.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}
/* 겹창 「크게」(2026-10-06 · 2026-10-08 내용 보는 겹창 전부로) — 단추가 서고, 켜면(#modal.mw) 그 창이 화면에 가득 찬다.
   빠지는 창은 둘뿐: ① 작은 확인 · 물음 · 단계 창 = 부르는 쪽이 `openModal(html, 'ask')`(#modalBox.ask) ② 제 꼴이 따로인 셋 = 브리핑(#bfB3) ·
   고르기 창(.pkh) · 찾기(.fd). 새 겹창은 아무것도 안 해도 「크게」 가 선다. 본디 넓은 창(셋째 줄 목록 — 표 · 두 단 · 미리보기)은 폭을 다 쓰고,
   그 밖(폼 · 읽는 창)은 안쪽 폭 860 가운데 + **세로는 남는 높이 전부**(대표 2026-10-08 밤 「세로폭이 좁은 게 답답」 — 크게 켠 폼은 세로로 늘어서고
   글 칸이 남는 높이를 먹는다 · 높이를 숫자로 박지 않는다 · 낮은 화면에서는 글 칸 160 을 지키고 창 안에서 굴린다). 폭 600 이하는 단추가 없고, 인쇄에도 닿지 않는다(screen 만) */
/* 「크게 ⤢」 단추는 창 안 머리 줄에 선다(2026-10-08 밤 손질 Ⓒ-1 — 옛: 창 밖 모서리 위 + 위 46 띠). 제 머리 줄이 없는 창은 app.js `modalHeadEnsure` 가
   제목(h3)을 머리 줄 `.mhd` 로 감싸 오른쪽에 넣는다. 폭 600 이하는 감춘다 */
.mwb{display:none;flex:0 0 auto}
.modal .box.ask .mwb{display:none !important}          /* 작은 확인 · 물음 창에는 서지 않는다(안전망 — 표식이 뒤늦게 붙는 창) */
.sm.mwb{width:30px;height:28px;padding:0;justify-content:center;align-items:center;font-size:15px;line-height:1}      /* ⤢ / ⤡ 아이콘만(이름은 말풍선) */
/* 칸 「크게 ⤢」(공용 · app.js `paneWide*` · 2026-10-09) — 그릇(data-pwbox)이 본문 자리 위에 겹친다(왼쪽 · 위는 app.js 가 #main 자리로 적는다).
   머리 줄은 그릇 맨 위 그대로 · 글 자리(data-pwbody)는 남는 높이 전부 · 그 안의 것은 가로 860 가운데 · 글 칸(서식 편집 칸)이 남는 높이를 먹는다 · 테두리 없음.
   겹창(100) · 새 항목 창(90) 아래 · 붙는 머리(#top 40) 위. 켰을 때만 보일 것 `.pwonly` */
.pwonly{display:none !important}
.pwide .pwonly{display:inline !important}
.pwide{position:fixed !important;right:0;bottom:0;z-index:80 !important;display:flex !important;flex-direction:column;margin:0 !important;padding:14px 28px 0 !important;
  background:#fff;border:0 !important;overflow:hidden}
.pwide>[data-pwbody]{display:flex !important;flex-direction:column;flex:1 1 auto;min-height:0;overflow:auto}
.pwide>[data-pwbody]>*,.pwide>:not(:first-child):not([data-pwbody]){width:100%;max-width:860px;margin-left:auto !important;margin-right:auto !important}
.pwide>[data-pwbody]>.rted{flex:1 0 auto;display:flex;flex-direction:column;margin-bottom:0}
.pwide>[data-pwbody]>.rted>.rtbody{flex:1 0 auto;padding-left:0;padding-right:0}
.pwide>[data-pwbody]>.rted>.rtbody.rt-empty::before{left:0}
body.pwon #app.sfold.sfly #side{z-index:85}             /* 접힌 사이드바가 겹쳐 뜰 때는 칸(80) 위 · 겹창 · 새 항목 창 아래(Review-B-v7 PW1) */
/* 머리 줄은 제자리에 붙어 있다(내용이 길어 창 안에서 굴러도 단추가 보인다 — Lead 2026-10-08 밤 · 리뷰 Ⓒ-2 K2).
   붙는 자리는 창의 안쪽 여백 아래다(크롬은 굴리는 틀의 여백을 뺀 자리를 기준으로 삼는다 — top 을 주거나 위 여백을 음수로 주면 그만큼 아래로 밀려 다음 줄을 가린다).
   그래서 top 0 · 음수 여백 없음 · 머리 줄 위 여백 틈(20)으로 굴러 지나가는 글은 흰 그림자로 덮는다 */
.modal .mhd{display:flex;align-items:center;gap:6px;margin:0;padding:0 0 10px;position:sticky;top:0;z-index:3;background:#fff;box-shadow:0 -20px 0 #fff}
.modal .mhd h3{margin:0;flex:0 0 auto;white-space:nowrap}
.modal .mhd .sp{flex:1 1 auto}
.modal .mhd.solo{padding-bottom:4px}
/* 쓰는 폼의 머리 줄(`.mhd.bar` — 맨 위 한 줄: 안내 글 …… 으뜸 단추 · ⤢ · ✕) · 제목은 그 아래 본문 맨 위 큰 글씨(`h3.mtitle`) */
.modal .mhd.bar{min-height:32px;padding-bottom:12px}
.modal h3.mtitle{margin:0 0 14px;font-size:21px;font-weight:700;letter-spacing:-.2px}
/* 쓰는 폼 — 아래 단추 줄이 머리 오른쪽으로 온 것(app.js `modalHeadActs` · 손질 Ⓒ-2): 으뜸 단추 32 · ✕ · 안내 글은 제목 옆 흐린 글 */
.modal .mhd>.primary,.modal .mhd>.btn.pri{height:32px;padding:0 14px;font-size:14px;flex:0 0 auto}
.modal .mhd>.sm:not(.mwb):not(.primary){height:32px;padding:0 14px;font-size:14px;flex:0 0 auto}
.modal .mhd>.mx{flex:0 0 auto;height:28px;margin-left:2px;padding:0 6px;border:0;border-radius:6px;background:none;font-size:16px;line-height:1;color:var(--l2);cursor:pointer}
.modal .mhd>.mx:hover{background:var(--f3);color:var(--l1)}
.modal .mhd>.mhint{flex:0 1 auto;min-width:0;margin:0;font-size:13.5px;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .mhd>h3.mname{flex:0 0 auto;margin:0;font-size:13.5px;font-weight:600;color:var(--l2);white-space:nowrap}      /* 제목 칸이 본문 큰 글씨인 폼 — 창 이름은 여기 작은 글자 */
.modal .mhd>.mname+.mhint::before,.modal .mhd>.mhint+.mhint::before{content:'·';margin-right:6px}
/* 쓰는 폼의 본문(app.js `modalFormBody` · 손질 Ⓒ-2 나 — 시안 docs/mock/차례로정리-시안 확정 장면 ③ 꼴): 큰 제목 → 가로 줄 → 값 줄 묶음 → 가로 줄 → 글 칸(테두리 없이 아래 끝까지) */
.modal .mform h3.mtitle{margin:0 0 4px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.modal .mform>.mfv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:44px;margin-top:-4px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--l2)}
.modal .mform>.mfv>*{margin:0}
.modal .mform>.mfv>.lbl{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;font-size:13.5px;color:var(--l3)}      /* 이름표가 값인 창(이슈 메모의 이슈 제목)은 길면 줄을 바꾼다 — 창 밖으로 안 나간다(리뷰 Ⓒ L1) */
.modal .mform>.mfv>.one:not(.muted){flex:0 0 100%}      /* 알림 글(의견 보내기의 「보낼 수 없는 까닭」)은 값 줄 묶음 안에서 제 줄을 다 쓴다(리뷰 Ⓒ N1) */
.modal .mform>.mfv>input{flex:0 0 auto;width:auto;height:30px;padding:0 10px;border-radius:8px}      /* 적는 칸은 네모(단추 꼴 규약 — 알약은 누르는 것만) */
.modal .mform>.mfv>.fbcnt{margin-left:auto}
.modal .mform>textarea{display:block;padding:12px 0;border:0;border-radius:0;outline:0;background:none;line-height:1.7;resize:none}
.modal .mform>.msg:empty,.modal .mform>.libnote2:empty{display:none}      /* 글 칸 아래 알림 자리 — 비어 있으면 자리도 없다(글 칸이 맨 아래) */
.modal .mform .libf .k{font-size:13.5px;font-weight:400;color:var(--l3)}
.modal .mform .libf:not(.mft):not(.mfb) input:not([type=checkbox]):not([type=radio]){height:30px;min-height:30px;padding:0 10px;font-size:14.5px}      /* 모서리는 칸 표 기본(8) 그대로 — 적는 칸은 네모 */
.modal .mform .libform>.libf.mft{display:block;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.modal .mform .libf.mft>.k,.modal .mform .libf.mfb>.k{display:none}
.modal .mform .libf.mft input{width:100%;height:auto;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;outline:0;background:none;font-size:21px;font-weight:700;letter-spacing:-.2px;line-height:1.4}
.modal .mform .libf.mft input::placeholder{font-weight:700;color:var(--l3)}
.modal .mform .libform>.libf.mfb{display:block;margin:10px 0 0;border-top:1px solid var(--line)}
.modal .mform .libf.mfb textarea{display:block;padding:12px 0;border:0;border-radius:0;box-shadow:none;outline:0;background:none;resize:none}
@media screen and (min-width:601px){
  .mwb{display:inline-flex}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))){
    width:100vw;max-width:100vw;height:100%;max-height:none;align-self:stretch;border-radius:0;overflow:auto;box-shadow:none}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail))){
    --mwpad:max(20px,calc(50vw - 430px));padding-left:var(--mwpad);padding-right:var(--mwpad);display:flex;flex-direction:column}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.mhd.bar{margin-left:calc(20px - var(--mwpad));margin-right:calc(20px - var(--mwpad))}      /* 쓰는 폼의 머리 줄은 화면 폭 전부(본문만 860 가운데) */
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>*{flex:0 0 auto}
  /* 글 칸 — 상자 바로 아래 선 것(의견 보내기 · 이슈 메모 · 유선 내용 작성) · 칸 표(.libform) 안의 것(새 근거 · 새 표준 문구) */
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>textarea{flex:1 1 auto;min-height:160px;resize:none}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform{flex:1 1 auto;display:flex;flex-direction:column}          /* min-height 는 주지 않는다(기본 auto) — 0 으로 두면 낮은 화면에서 칸 표가 제 내용보다 줄어 줄들이 아래 글 · 단추 위로 넘친다(리뷰 M1) */
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf{flex:0 0 auto;margin:4px 0}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf.ta{flex:1 1 auto;min-height:160px;grid-template-rows:minmax(0,1fr);align-items:stretch}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf.ta textarea{height:100%;min-height:0;resize:none}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf.mft{margin:0 0 10px}
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf.mfb{display:flex;flex-direction:column;margin:10px 0 0;min-height:161px}      /* 글 칸 160 + 위 가로 줄 1 */
  #modal.mw>.box:not(.ask,:has(> :is(#bfB3,.pkh,.fd))):not(.wide,:has(.copjgy),:has(> :is(.gynew,.fiform,.fiqt,.coone,.rpwrap,.comail)))>.libform>.libf.mfb textarea{flex:1 1 auto;height: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 .acts>.sm{height:32px;padding:0 14px;font-size:14px}                      /* 창 아래 줄 — 보통 크기 32(단추 꼴 · 으뜸이 없는 창도) */
.modal .acts>.sm+.primary,.modal .acts>.sm+.btn.pri{margin-left:4px}             /* 으뜸 단추 앞만 10 */
.modal .who{font-size:14px;color:var(--l2);margin-bottom:10px}

/* ---- 고르기 창(공용 부품 `picker`) — 검색칸 하나 + 목록 + 아래에 붙는 만들기 줄(확정 시안 2026-10-08 · docs/mock/고르기창-시안) ----
   바깥 테두리는 없고 검색칸만 테두리 · 줄 앞 그림 없음(글자만) · 이름 진하게 · 딸린 글 흐리게 · 오른쪽 글은 상자 없이.
   찾기 창(`.pk.fd` · find.js)은 같은 class 를 쓰지만 꼴이 달라 아래 묶음이 따로 그린다 → 여기 규칙은 전부 `:not(.fd)` */
.pk:not(.fd) .in{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border:1px solid var(--f1);border-radius:10px;
  background:#fff;font-size:14.5px}
.pk:not(.fd) .in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,210,.12)}
.pk:not(.fd) .in input{flex:1;border:0;outline:none;font:inherit;min-width:0;height:auto;padding:0;width:auto;background:none}
.pk:not(.fd) .in .ic{color:var(--l3)}
.pk:not(.fd) .in .x{flex:0 0 auto;border:0;background:none;padding:0 2px;font-size:14px;color:var(--l3);cursor:pointer}
.pk:not(.fd) .in .x:hover{color:var(--l1)}
.pk:not(.fd) .pkl{max-height:320px;overflow:auto;margin-top:6px}
.pk:not(.fd) .hd{padding:8px 10px 4px;font-size:13px;color:var(--l3)}
.pk:not(.fd) .it{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 10px;border-radius:7px;font-size:14.5px;cursor:pointer}
.pk:not(.fd) .it:hover,.pk:not(.fd) .it.on{background:var(--f3)}
.pk:not(.fd) .it .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk:not(.fd) .it .sub{min-width:0;font-size:13.5px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk:not(.fd) .it .tag{margin-left:auto;padding-left:8px;font-size:13.5px;color:var(--l2);white-space:nowrap}
.pk:not(.fd) .it .tag.cur{color:var(--blue);font-weight:600}
.pk:not(.fd) .it.off{color:var(--l3);cursor:default}          /* 고를 수 없는 줄 — 흐림 · 올리면 까닭 말풍선(app.js picker off · why) */
.pk:not(.fd) .it.off:hover{background:none}
.pk:not(.fd) .it.off .nm{font-weight:400}
.pk:not(.fd) .none{padding:10px;font-size:14px;color:var(--l2)}
.pk:not(.fd) .mark{background:#fff3c4;border-radius:2px}
/* 만들기 줄 — 목록 밖 아래에 붙는다(목록이 굴러가도 그 자리) · 자판으로 닿았을 때만 끝에 「Enter」 */
.pk:not(.fd) .pkm:not(:empty){margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.pk:not(.fd) .mk{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:7px;
  font-size:14.5px;font-weight:500;color:var(--blue);cursor:pointer}
.pk:not(.fd) .mk:hover,.pk:not(.fd) .mk.on{background:rgba(0,112,210,.07)}
.pk:not(.fd) .mk b{font-weight:600}
.pk:not(.fd) .mk.on::after{content:'Enter';margin-left:auto;font-size:13px;font-weight:400;color:var(--l3)}
/* 떠 있는 창 — 제목 옆에 무엇을 지정하는지 한 줄 · 아래 한 줄에 딸린 안내 → 자판 안내 + [닫기] */
/* 창의 위 가장자리는 붙박는다 — 목록 ↔ 작은 칸 ↔ 그 안의 목록으로 바뀌며 높이가 달라져도 위가 움직이지 않게(가운데 맞춤이면 위아래로 튄다) */
#modal:has(> #modalBox > .pkh){align-items:flex-start}
#modalBox:has(> .pkh){width:440px;margin-top:12vh}
/* 낮은 창에서도 아래 [닫기] 줄이 잘리지 않게 — 목록 높이를 창 높이에 묶는다(위 12vh + 목록 밖의 것 280 안팎 · 가장 낮아도 세 줄) */
#modalBox:has(> .pkh) .pk:not(.form)>.pkl{max-height:max(108px,min(320px,calc(88vh - 280px)))}
.pkh{display:flex;align-items:baseline;gap:10px;min-width:0;margin-bottom:12px}
.pkh h3{flex:0 0 auto;margin:0}
.pkh .who{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--l2)}
.modal .pkh~.note{margin:8px 0 0;padding:0 10px;background:none;font-size:13.5px}
.modal .pkh~.acts{align-items:center;margin-top:10px}
.modal .pkh~.acts .hint{font-size:13px;color:var(--l3);white-space:nowrap}
.modal .pkh~.acts kbd{display:inline-block;min-width:20px;margin-right:3px;padding:0 5px;border:1px solid var(--f1);border-radius:5px;
  background:#fff;font:inherit;font-size:13px;line-height:18px;text-align:center;color:var(--l2)}
/* 그 자리에서 만들기(`pkForm`) — 같은 창이 이름 칸으로 바뀐다: 목록 · 검색칸 · 창의 다른 줄(제목 · 안내 · [닫기] · 붙박이에 덧붙인 줄)은 숨고
   「‹ 새 ○○」 머리 + 칸 + [취소] [만들고 지정] 만 보인다. 목록은 지우지 않아 「‹」 로 돌아가면 그대로다 */
.pk.form:not(.sub)>:not(.pkform){display:none !important}   /* 자리별 규칙(.cellpk .mk.clr 등)보다 늘 먼저 */
.pk.form.sub>:not(.pksub){display:none !important}          /* 작은 칸의 고르는 칸을 눌렀을 때 — 같은 창이 그 목록으로(`pkSub`) */
:has(> .pk.form)>:not(.pk){display:none !important}
.pksub:has(.pk.form)>.pkh{display:none}                     /* 그 목록 안에서 또 「새 ○○」 이름 칸을 열면 머리는 그 칸 것 하나만 */
:is(.pkform,.pksub) .pkh{align-items:center;gap:6px}
:is(.pkform,.pksub) .pkh .bk{flex:0 0 auto;width:24px;height:24px;margin-left:-6px;padding:0;border:0;border-radius:6px;background:none;
  font-size:18px;line-height:1;color:var(--l2);cursor:pointer}
:is(.pkform,.pksub) .pkh .bk:hover{background:var(--f3);color:var(--l1)}
:is(.pkform,.pksub) .pkh .t{flex:0 0 auto;font-size:16px;font-weight:600}
:is(.pkform,.pksub) .pkh .who{margin-left:4px}
.pkf .r .rd{flex:1;min-width:0;font-size:14.5px;color:var(--l2)}
.pkf .r .rd b{font-weight:600;color:var(--l1)}
.pkf .r .pkfb{flex:1;display:flex;align-items:center;gap:8px;min-width:0;height:38px;padding:0 10px;border:1px solid var(--f1);border-radius:8px;
  background:#fff;font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.pkf .r .pkfb .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkf .r .pkfb .car{color:var(--l3)}
.pkf .r .pkfb.need{border-color:var(--blue);color:var(--blue);font-weight:500}
.pkf .r .pkfb:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,210,.12)}
.pkf .r{display:flex;align-items:center;gap:10px;margin-top:8px}
.pkf .r label{flex:0 0 52px;font-size:13.5px;color:var(--l2)}
.pkf .r input{flex:1;width:auto;min-width:0;height:38px;padding:0 10px;border:1px solid var(--f1);border-radius:8px;background:#fff;font:inherit;font-size:14.5px}
.pkf .r input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,210,.12)}
.pkform .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
/* 붙박이(칸 아래 겹쳐 뜨는 창) 안에서는 한 치수 작게 */
:not(#modalBox)>.pk.form .pkh{margin-bottom:8px}
:not(#modalBox)>.pk.form .pkh .t{font-size:14.5px}
/* 휴대폰 폭 — 떠 있는 고르기 창은 화면 아래에서 올라오는 장(위 56 남김): 검색칸 위 · 목록이 가운데를 채우고 · 만들기 줄이 맨 아래에 붙는다.
   줄 46 · 단추 · 칸 42 · 자판 안내 글 없음. 작은 칸 · 그 안의 목록도 같은 장 안에서 바뀐다 */
@media (max-width:600px){
  #modal:has(> #modalBox > .pkh){align-items:flex-end}
  #modalBox:has(> .pkh){display:flex;flex-direction:column;width:100vw;max-width:100vw;height:calc(100% - 56px);margin-top:0;padding:18px 16px 12px;border-radius:16px 16px 0 0}
  #modalBox:has(> .pkh)>.pk,#modalBox:has(> .pkh) .pksub,#modalBox:has(> .pkh) .pksub>div:last-child,#modalBox:has(> .pkh) .pksub .pk{
    flex:1;min-height:0;display:flex;flex-direction:column}
  #modalBox:has(> .pkh) .pk:not(.form)>.pkl{flex:1;max-height:none}
  .pk:not(.fd) .it,.pk:not(.fd) .mk{min-height:46px}
  .pk:not(.fd) .mk.on::after{content:none}
  .modal .pkh~.acts .hint{display:none}
  .modal .pkh~.acts .sm,.pkform .acts .sm,.pkform .acts .primary{height:42px;padding:0 18px}
  .pkf .r input,.pkf .r .pkfb{height:42px}
}

/* ---- 찾기 겹창(find.js · 2026-10-17 결정 615 ① · 619 ④) — 꼴 = 부품 .fp.fp-pk.find(자리 · 폭) + .fp-row · .fp-hd · .fp-sep 그대로 ·
        여기는 알맹이만: 제목 줄임 · 오른쪽 경로 · 맞은 글자 진하게(시안 첫째판d .hit) · 목록만 스크롤 · 결과 아래 두 줄 · 바닥 한 줄 ---- */
.fp.fp-pk.find{max-width:calc(100vw - 32px);white-space:normal}
.fp.find .fp-row>span:not(.fp-sub){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp.find .fp-row .fp-sub{flex:0 1 auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp.find .fp-row svg.i{stroke-width:1.6}                 /* 사이드바 그림(24 칸)을 줄 그림 16 에 — 선 굵기만 맞춤 */
.fp.find .fp-row .sn{margin-left:8px;color:var(--fp-ink3)}   /* 제목에 안 걸렸을 때 맞은 곳 한 줄(옅게) */
.fp.find .fp-row[data-kind=sa_file] .nm{display:inline-block;max-width:55%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}.fp.find .fp-row[data-kind=sa_file] .fp-sub{display:flex;min-width:0}.fp.find .fp-row[data-kind=sa_file] .fdpt{min-width:0;overflow:hidden;text-overflow:ellipsis}.fp.find .fp-row[data-kind=sa_file] .fdpg{flex:none}   /* 「본문에서 · 파일」(SS ② 리뷰 M1) — 긴 이름이 맞은 곳을 가리지 않게 · 쪽 「p.N」 은 경로가 줄어도 남음 */
@media (max-width:600px){.fp.find .fp-row[data-kind=sa_file]{height:auto;min-height:40px;padding:6px 12px}.fp.find .fp-row[data-kind=sa_file] .nm,.fp.find .fp-row[data-kind=sa_file] .sn{display:block;max-width:none;margin-left:0;overflow:hidden;text-overflow:ellipsis}}   /* 휴대폰 = 맞은 곳을 둘째 줄로(이 묶음 줄만 · 다른 줄 높이 그대로) */
.fp.find .mark{font-weight:600;color:var(--fp-ink)}
.fp.find .fdl{max-height:min(52vh,440px);overflow-y:auto}
.fp.find .fdl:empty{display:none}
.fp.find .none{padding:8px 10px;color:var(--fp-ink3);white-space:normal}
.fp.find .mk{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:var(--fp-row-r);cursor:pointer;color:var(--fp-ink)}
.fp.find .mk:hover,.fp.find .mk:focus{background:var(--fp-on);outline:none}
.fp.find .mk b{font-weight:400}
/* 바닥 회색 한 줄 — 조건 · 본문 · #주제 찾기일 때만(찾는 범위를 여기 한 줄로) */
.fp.find .foot{margin-top:4px;padding:6px 10px 0;border-top:1px solid var(--fp-line);color:var(--fp-ink3);white-space:normal}
/* 휴대폰 자리(좌우 8 · 위 56)는 넓은 화면 자리 규칙(.fp.fp-pk.find · 넷째판) 뒤에 둔다 — 같은 세기라 앞에 두면 덮여 왼쪽으로 잘린다(2026-10-20 Lead-v46) */
/* 법인 기록에 묻기(2026-10-03) — 찾기 창 단추 한 줄 · 결과 줄(찾기 창 · 참고 서랍 공용) */
.fp.find .mk.fdak .sub{color:var(--fp-ink3);margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp.find .fdl .askr,.fp.find .fdl .asknote,.fp.find .fdl .ai-note{white-space:normal}
.askr{display:block;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.6}
.askr:hover,.askr:focus{background:var(--f3);outline:none}
.askr b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.askr small{display:block;font-size:14px;color:var(--l2);word-break:break-word}
.askr small.meta{color:var(--l3)}
.askr .why .ai-pill{vertical-align:1px}      /* 묻기 결과 줄의 까닭 — 작은 알약 + 한 줄 */
.fp.find .mk.fdak>.ai-pill{margin-right:0}
.askbusy.ai-note,.asknone.ai-note{justify-content:flex-start;text-align:left}
.askbusy+.ai-bar{margin:0 14px 8px}
.asknote{padding:8px 14px;font-size:14px;color:var(--l3);background:var(--f4);border-bottom:1px solid var(--line)}
/* ★ I2 말로 찾기 — 찾는 칸 아래 「읽은 조건」 칩 줄(칩마다 ✕ · 맞는 고객사가 없으면 회색) */
.fp.find .fdcond{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 4px 8px;white-space:normal}
.fp.find .fdcond .fdcl{display:inline-flex;align-items:center;gap:6px;color:var(--ai-ink)}
.fp.find .fdcc{display:inline-flex;align-items:center;gap:2px;padding:0 4px 0 9px;height:24px;border:1px solid var(--f1);border-radius:12px;background:#fff;color:var(--l1)}
.fp.find .fdcc.off{color:var(--l3);border-style:dashed}
.fp.find .fdcc .x{border:0;background:none;padding:0;width:18px;height:18px;border-radius:9px;font-size:13px;color:var(--l3);cursor:pointer}
.fp.find .fdcc .x:hover{background:var(--f2);color:var(--l1)}
.fp.find .fdcond .link{margin-left:auto;font-size:14px}
.csd .drw .drqa{display:flex;align-items:center;gap:6px;margin:10px 12px 4px}
.csd .drw .drqa .drq{margin:0;flex:1;min-width:0}
.csd .drw .drask{height:30px;padding:0 12px;font-size:13.5px;flex:0 0 auto}
.csd .drw .drab:empty{display:none}
.csd .drw .drab{max-height:45%;overflow:auto;border-bottom:1px solid var(--line);padding:0 0 6px}
.csd .drw .drab .askr{padding:8px 16px}
.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}
.pgacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}

/* ---- 새 항목 창(④) — 윗줄 하나 → 큰 제목 → 내용 → 아래 줄(2026-10-07 「미니멀」 3-1절 · 윗줄 · 제목 · 내용 꼴은 일 한 장 절의 .nitop · .wktitle · .wkbody) ---- */
#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}
.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}
#niRead{color:var(--l3)}      /* 「대화 48줄」 — 회색 작은 글(읽은 줄 수일 뿐 끝냈다는 표시가 아니다 · 2026-10-08) */
.ni .done:empty{display:none}
#ni .ni .nitop{margin-top:14px}
.ni.emb{flex:1 0 auto;display:flex;flex-direction:column}
.ni.emb>*{flex:none}
.ni .wktitle.dim,.ni .wkbody.dim{opacity:.4}
.nipk .pk .pkl{max-height:180px}
/* 아래 줄 — 「관련 ＋」 … 저장 글자 · [닫기] */
.nift{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--l2)}
.nift .sp{flex:1}
.nift .rel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nift .rel b{color:var(--l1);font-weight:500}
.nift .rel .link{text-decoration:none}
.nift .rel .link[disabled]{color:var(--l3);cursor:default}
.nift .save{color:var(--l3);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nift .primary{flex:none}
/* 「캡처로 기록」(app.js 7-1-c 절) — 제목 아래 「보낸 사람 → 나」 · 붙임 줄(작은 그림 62×110 + 두 줄) · 머리 「캡처에서 읽음 [AI]」 */
.ni .nicapwho{margin:-4px 0 8px;font-size:13.5px;color:var(--l2)}
.ni .nicapat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--l2)}
.ni .nicapat .shot{width:62px;height:110px;flex:none;border-radius:8px;object-fit:cover;object-position:top;box-shadow:0 0 0 1px rgba(0,0,0,.12);background:var(--f4)}
.wksh .nicaphd{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;overflow:hidden;font-size:14px;color:var(--l2);white-space:nowrap}
.wksh .nicaphd:empty{display:none}
.wksh .nicaphd .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wksh .nicr{flex:none;white-space:nowrap}       /* 소통 칸 머리 「새로 만들기」 — 좁아도(320) 한 줄 · 줄어드는 것은 오른쪽 「캡처에서 읽음」 */
/* 「수신함에 들어간 소통입니다」 · 저장 글도 휴대폰에서 한 줄 — 넘치면 말줄임(먼저 줄어드는 것은 「수신함에 …」 · 백로그 Review-B-v13) */
.wksh #wkNiLock,.wksh #niSt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wksh #wkNiLock{flex:0 4 auto}.wksh #niSt{flex:0 1 auto}
.ni .nicapnm{margin:0 2px 0 4px;font-size:13px;color:var(--l3);white-space:nowrap}   /* 고객사 「이름만 맞음」(번호는 안 맞음) — 흐린 글 */
.ni .wktitle input{text-overflow:ellipsis}     /* 긴 제목 — 칸 밖은 「…」(초점이 있으면 보통 입력) */
/* 나눈 줄 미리보기 — 새 항목 창과 줄 펼침(고치기)이 **같은 모양**을 쓴다 */
.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}

/* =====================================================================
   ③ 자문 — 목록 + 상세 (시안 `docs/mock/자문화면-시안2-확정.html`)
   ===================================================================== */
#vCases{display:flex;flex-direction:column;min-height:0;flex:1}
#csList{flex:0 0 auto}
/* ★ 2026-10-02 한 건 화면 · 스크롤 하나 — 두 기둥은 내용만큼 늘어나고 **페이지(#main) 하나만** 스크롤된다 */
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}
/* 상태 = 낱말만(점 없음 · 2026-10-13) */
.csrow .stt,.csq .stt{flex:0 0 96px;font-size:14px;display:flex;align-items:center;gap:6px}
.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 .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}
.csd .top>.sm,.cod .top>.sm{flex:none;white-space:nowrap}            /* 「← 목록」 — 좁은 폭에서 글자가 두 줄로 꺾이던 것 */
#csMore,#coMore{width:28px;padding:0;border-radius:50%;font-size:15px;line-height:1}   /* 한 건 화면 윗줄의 ⋯ — 아이콘만 있는 단추는 동그라미(단추 꼴 · 「← 목록」 과 같은 28) */
.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)}
.csrv .note.csrvtodo{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--f4);color:var(--l2)}      /* 「다룰 것 2 / 4 · 남은 것 …」 — 요청에 실리는 진행 한 줄 */
#csRvBox .pk .pkl{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}
.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}
/* 세부 정보 안의 고르는 단추(프로젝트) — 담당 · 유형과 같은 공용 꼴(`ddlBtn`) · 칸 안이라 작은 것 28 · 글자는 다른 줄의 값과 같은 자리 */
.csd .meta.B .v .ddl{margin-left:-7px}
.csd .meta.B .v .ddlb{height:28px;font-size:15px}
.csd .meta.B .v .cellpk.advpk{top:32px}
@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%}
/* 대표 2026-10-03 밤 「내용까지가 너무 멀다」 — 넓은 화면 속성은 이름표 작게 + 값 바로 옆(한두 줄 · 좁은 화면 .nar 는 그대로) ·
   「세부 정보 ▸」 · 「연결」 · 「후속 확인」 은 한 줄(`.csrow3` · 펼친 것만 줄 전체) · 의견 타래 위아래 여백 줄임. 칸은 하나도 빼지 않음 */
.csd .aka{margin-bottom:10px}
.csd .meta.B:not(.nar):not(.nar2){display:flex;flex-wrap:wrap;align-items:center;gap:4px 26px;margin:0;max-width:1120px}
.csd .meta.B:not(.nar):not(.nar2) .p{display:flex;align-items:center;gap:8px;min-width:0}
.csd .meta.B:not(.nar):not(.nar2) .k{display:inline;font-size:13px;line-height:28px;white-space:nowrap}
.csrow3{display:flex;flex-wrap:wrap;align-items:center;gap:2px 28px;margin:8px 0 0}
.csrow3 > .more{margin:0;align-items:center}
.csrow3 .wklkcs .wklkr,.csrow3 .wkfu,.csrow3 .wkfur{margin:0}
.csrow3 .wklkcs .wklkr,.csrow3 .wkfur{align-items:center}
.csrow3 .wklkcs .em{display:none}
.csrow3 #wkFuAdd{font-size:0;padding:0 4px}
.csrow3 #wkFuAdd::before{content:"＋";font-size:16px;color:var(--blue)}
.csrow3 #wkFuAdd[disabled]::before{color:var(--l3)}
.csrow3 > .more:has(.mbox,#csMoreProps),.csrow3 > .wkfu:has(.wkfuf,.wkfuol),.csrow3 > .wklkcs:has(.wklkpk){flex:1 1 100%}
/* ---- 2026-10-08 미니멀 3-3절(대표 확정 2026-10-07 · 확정 시안 장면 3 · 휴대폰 3) — 자문 머리 = 제목 · 상태 → 요지 → 속성 한 줄(.csbar) → 작은 줄(.csrow3) → 띠 ----
   속성 한 줄 = 묶음 둘(.g) 「고객사 · 기한」 │ 「담당 ⌄ · 유형 ⌄」 — 읽는 값은 이름표(12.5 흐리게) + 값(굵게), 고르는 칸은 공용 단추 꼴(.ddlb · 이름표가 단추 안).
   묶음 사이는 가는 세로 선(높이 20) + 양쪽 16 · 좁은 화면(.nar)은 묶음째 다음 줄(선 없음). 고르기 창 · 유형 목록은 단추 아래 겹쳐 뜬다(줄을 밀지 않는다) */
.csd .csbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:2px 0 0;min-height:34px;max-width:1120px}
.csd .csbar .g{position:relative;display:flex;align-items:center;gap:0 20px;min-width:0}
.csd .csbar .g + .g{margin-left:16px;padding-left:16px}
.csd .csbar .g + .g::before{content:"";position:absolute;left:0;top:50%;height:20px;margin-top:-10px;border-left:1px solid var(--line)}
.csd .csbar .p{display:flex;align-items:center;gap:8px;min-width:0;min-height:30px}
.csd .csbar .p > .k{font-size:12.5px;color:var(--l2);white-space:nowrap}
.csd .csbar .p > .v{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--l1)}
.csd .csbar .p > .v a.cogo{color:var(--l1);text-decoration:none;border-bottom:1px dotted var(--l3)}
.csd .csbar .p:has(.ddlb){margin:0 -7px}                          /* 단추의 안쪽 여백(7)만큼 당겨 글자가 다른 칸과 같은 간격에 선다 */
.csd .csbar .p:has(.ddlb) + .p:has(.ddlb){margin-left:-1px}
.csd .csbar .ddlb{font-size:14.5px}
.csd .csbar .ddlb .v{font-weight:600}
.csd .csbar .st-menu,.csd .csbar .cellpk.advpk{top:36px}
.csd .csbar #csDue .v{white-space:normal;flex-wrap:wrap}
.csd .csbar.nar{display:block}
.csd .csbar.nar .g + .g{margin-left:0;padding-left:0}
.csd .csbar.nar .g + .g::before{display:none}
.csd .csbar.nar .g{flex-wrap:wrap}
.csd .more #csMoreProps{flex:0 0 100%;margin-top:6px}
/* 작은 줄 — 「세부 정보 ▸ · #주제」 │ 「연결 ＋ · 후속 확인 ＋」: 접혀 있을 때만 그 사이에 같은 세로 선 */
.csrow3 > .more:not(:has(.mbox,#csMoreProps)) + *{position:relative;padding-left:16px;margin-left:-12px}
.csrow3 > .more:not(:has(.mbox,#csMoreProps)) + *::before{content:"";position:absolute;left:0;top:50%;height:20px;margin-top:-10px;border-left:1px solid var(--line)}
/* 머리가 끝나는 선 — 의견이 있으면 의견 아래, 없으면(협업 꺼짐) 세부 정보 아래 */
.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}

/* 두 기둥 — ★ 2026-10-02 한 건 화면 · 스크롤 하나(답변서 U1 · 시안 `한건화면-스크롤-시안-확정`):
   고정 높이(옛 75vh)와 안쪽 스크롤을 걷었다. 기둥은 **내용만큼** 늘어나고(`align-items:start` — 저마다 제 높이)
   스크롤바는 페이지(#main) 하나다. 짧은 쪽 기둥은 `case.js csFollow` 가 sticky 로 붙여 따라오게 한다.
   ★ 2026-09-21 — `position:relative` 는 **⑭ 참고 서랍**(배치 ⓒ)의 기준 칸이다. 서랍은 질의 기둥과 같은 칸(1행 1열)에 겹친다. */
.csd .cols{position:relative;flex:0 0 auto;display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding-bottom:12px}
.csd .cols>#csQCol{grid-row:1;grid-column:1}
.csd .cols>#csACol{grid-row:1;grid-column:2}
/* ★ 2026-09-18 — 기둥을 감싸던 **상자와 배경을 걷어 냈다**. 두 기둥을 가르는 것은 여백뿐이다 */
.csd .col{border:0;border-radius:0;min-width:0;position:relative;background:#fff}
/* 두 기둥 머리 줄(U2) — 두 기둥 위 **한 줄**. 내려 읽으면 스크롤 영역 맨 위에 붙고([보내기] 가 늘 보인다)
   붙으면 흰 바탕 + 옅은 그림자(`.stuck` · `csStuck`). `top:-26px` · 좌우 −48px 는 고정 머리(.csfix)와 같은 까닭이다
   (#main 안쪽 여백 26/48 을 되돌려 영역 맨 위·전폭에 닿게 — #main padding 을 고치면 함께 고친다). */
.csd .csband{position:sticky;top:-26px;z-index:21;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  align-items:center;margin:14px -48px 0;padding:0 48px;background:#fff;border-bottom:1px solid var(--line)}
.csd .csband.stuck{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.csd .csband>.colh{border-bottom:0;margin-bottom:0;min-width:0}
.csd .colh .qno{font-weight:700}
/* 짧은 쪽 기둥이 따라올 때 — 머리 줄 바로 아래(또는 아래 끝이 화면 아래에) 붙는다(`top` 은 csFollow 가 적는다) */
.csd .cols>.col.csfollow{z-index:2}
.csd .cols>#csQCol,.csd .cols>#csACol{padding-top:12px}
.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}
/* 머리가 좁으면 상태 글자가 먼저 줄어들고, 「답변」·단추는 꺾이지 않는다(옛 방향 표시 `.csadir` 는 2026-10-08 미니멀 3-3절에서 걷음) */
.csd .colh h2,.csd .colh .btns,.csd .colh .btns>*,.csd .colh #csEdit{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 .btns{margin-left:auto;display:flex;gap:6px;align-items:center}
/* 단추 꼴(2026-10-08) — [고치기] [참고] [검토 요청] = 테두리 32 · 사이 6 / 으뜸(파랑) 앞만 10 */
.csd .colh .btns>.pri{margin-left:4px}
.csd .colh .sm{height:32px;padding:0 14px;font-size:14px}
/* 휴대폰 폭 — 답변 머리의 단추 묶음([라이브러리] [검토 요청] [보내기])이 화면 밖으로 밀리던 것(2026-10-07):
   한 줄 아래로 내려 셋 다 보이고 [보내기] 는 오른쪽 끝 */
@media (max-width:600px){
  .csd .colh{flex-wrap:wrap}
  /* 휴대폰(확정 시안 `단추꼴-시안` 장면 4 · 대표 2026-10-08 「휴대폰 화면 좀 틀어진듯」) — 첫 줄은 「답변 · 상태」 만,
     단추는 아랫줄 한 줄 [고치기] [참고] [검토 요청] … [보내기](높이 40 · 한 줄에 들게 여백 12 · 넘치면 [보내기] 부터 다음 줄) */
  .csd .colh small{flex:1 1 calc(100% - 60px)}
  .csd .colh #csEdit{margin-right:-4px}
  .csd .colh .btns{flex:1 1 auto;min-width:0;flex-wrap:wrap;margin-left:0}     /* 바탕 폭 = 단추들의 폭 — 첫 줄 끝에 폭 0 으로 끼지 않고 아랫줄로 내려간다 */
  .csd .colh .btns>#csSend{margin-left:auto}
  .csd .colh .sm,.csd .colh .btn{height:40px;padding:0 12px;font-size:15px}
  .csd .colh .btn.pri{padding:0 15px}
}
/* 단추 꼴 한 벌(맨 위 절) — `.btn` = 테두리 32 · `.pri` = 파랑 · `.gray` = 글자 꼴 · `.sm` 을 함께 달면 작은 것 28 · `.on` = 켜진 채 */
.btn{height:32px;padding:0 14px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;font-size:14px;font-weight:500}
.btn:hover{background:var(--f4);border-color:rgba(0,0,0,.22)}
.btn.on{border-color:rgba(0,112,210,.5);color:#0067c2;background:rgba(0,112,210,.06);font-weight:600}
.btn.sm{height:28px;padding:0 12px}
.btn[disabled],.btn[disabled]:hover{color:rgba(0,0,0,.3);border-color:var(--line);background:#fff;cursor:default}
.btn.pri{background:var(--blue);color:#fff;border-color:var(--blue);font-weight:600;padding:0 17px}
.btn.pri:hover{background:#0062B8;border-color:#0062B8}
.btn.pri.sm{padding:0 14px}
.btn.pri[disabled],.btn.pri[disabled]:hover{background:rgba(0,112,210,.35);border-color:transparent;color:#fff}
/* 글자 꼴(테두리도 채움도 없다 · 올리면 알약 바탕) — 닫기 ✕ · ⋯ */
.btn.gray{color:var(--l2);background:none;border-color:transparent;padding:0 9px}
.btn.gray:hover{background:var(--f3);border-color:transparent}
.btn.gray[disabled],.btn.gray[disabled]:hover{background:none;border-color:transparent}
/* 테두리 단추 안의 꺾쇠(「검토 요청 · 이름」 — 누르면 요청 취소) */
.btn .cv{display:inline-block;flex:none;width:6px;height:6px;border-right:1.5px solid rgba(0,0,0,.42);border-bottom:1.5px solid rgba(0,0,0,.42);transform:translateY(-2px) rotate(45deg)}
.csd .scroll{display:block}            /* 이름만 남은 칸 — 안쪽 스크롤 없음(2026-10-02 U1) */
.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` 와 같은 간격 */
/* 유선 자리 — ① 원문 바로 아래 한 줄 머리 + 같은 무게의 칸 둘(2026-09-29 · 작성 / 없음) */
.csd .phslot{margin-top:12px;font-size:14px}
.csd .phslot .phh{font-weight:600;color:var(--l2);margin-bottom:8px}
.csd .phslot .phh small{font-weight:400;color:var(--l3);font-size:14px;margin-left:8px}
.csd .phslot .phgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.csd .phslot .phc{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff;min-width:0}
.csd .phslot .phc .btn{height:32px;padding:0 14px;font-size:14px}
.csd .phslot .phd{margin-top:6px;color:var(--l3);font-size:14px}
.csd .phslot .csrec{margin-top:8px;font-size:14px}
.csd .phslot .csrec .link{font-size:14px}
.csd .chain .cq.ph{cursor:default}
.csd .chain .cq.ph:hover{background:none}
.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 안 스크롤·유선 자리)은 그대로다. */
/* ★ 2026-10-02 한 건 화면 · 스크롤 하나(U4 · 시안 장면 1·4) — 「이 대화」 **한 줄**(옅은 바탕) ·
   펼치면 테두리 상자 안에 줄이 한 줄씩(선으로 가름 · 옛 세로 타임라인 점은 걷었다) */
.csd .chain{padding:0;font-size:14px;background:none}
.csd>.chain.flow1{flex:0 0 auto;margin:20px 0 0;border-radius:8px;background:var(--f4)}
.csd>.chain.flow1.open{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 10px 6px}
.csd .chain .fl1{display:flex;align-items:center;gap:12px;padding:6px 10px;color:var(--l2)}
.csd .chain.open .fl1{padding:6px 0}
.csd .chain .fl1 .tg{display:inline-flex;align-items:center;gap:10px;color:var(--l2);font-size:14px}
.csd .chain .fl1 .tg b{color:var(--l1)}
.csd .chain .fl1 .tg,.csd .chain .fl1 .tg b,.csd .chain .fl1 .tg .n{white-space:nowrap}   /* 「이 대화  질의 N · 답변 M」 — 한 줄(좁은 폭에서 「이 대/화」 로 꺾이던 것) */
@media (max-width:600px){
  .csd .chain .fl1{gap:6px;padding:6px 8px}
  .csd .chain .fl1 .tg{gap:6px;min-width:0}
  .csd .chain .fl1 .tg .n{overflow:hidden;text-overflow:ellipsis}
  .csd .chain .fl1 .nav{gap:4px}
}
.csd .chain .fl1 .sp{flex:1}
.csd .chain .fl1 .nav{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.csd .chain .fl1 .nav b{color:var(--l1)}
.csd .chain .fl1 .ar{display:inline-flex;width:24px;height:24px;padding:0;border:1px solid var(--line2,rgba(0,0,0,.14));border-radius:6px;
  align-items:center;justify-content:center;background:#fff;color:var(--l2);font:inherit;cursor:pointer}
.csd .chain .fl1 .ar:disabled{color:rgba(0,0,0,.25);cursor:default}
.csd .chain .flow{margin:0}
.csd .chain .cq{position:relative;display:flex;align-items:center;gap:12px;padding:7px 10px;
  border-top:1px solid var(--line);border-radius:0;cursor:pointer}
.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: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:7px 10px 4px 36px;color:var(--l3);font-size:14px;border-top:1px solid var(--line)}
.csd .chain .cq.ph .sm{height:26px;padding:0 10px;font-size:13.5px}
/* 줄을 누르면 **그 자리에서** 처음 다섯 줄 + 「이 질의 열기 →」(2026-10-02 · 옛 220px 안 스크롤 칸을 갈음 — 안쪽 스크롤 없음) */
.csd .chain .cbody{margin:0 0 8px 36px;padding:8px 14px;border-left:2px solid var(--line2,rgba(0,0,0,.14))}
.csd .chain .cbody .body{font-size:14.5px;line-height:1.75}
.csd .chain .cbody .more{display:flex;gap:12px;align-items:center;margin-top:6px;font-size:14px}
.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}
/* 답변 기둥 — ★ 2026-10-02 U1: 편집칸은 처음 260px · **쓰는 만큼 자란다**(안쪽 스크롤 없음 · `csAnsFit` 이 높이를 맞춘다) */
.csd .ansed{display:block;width:100%;min-height:260px;margin:0 0 8px;padding:18px 20px;border:1px solid var(--line);
  border-radius:12px;resize:none;overflow:hidden;line-height:1.8;font:inherit;font-size:15px;background:#fff}
.csd .sent{padding:0 2px;font-size:15px;line-height:1.8}
.csd .sent pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
/* 서식 글(rich.js · 2026-10-06 답변 칸 서식) — 보기 `.rt` · 편집 칸 `.rtbody` · 단추 줄 `.rtbar`(공용 부품 · 화면 이름에 기대지 않는다).
   글자 크기는 바탕(--rtb)의 배수라 겹쳐도 더 커지지 않는다. 편집 중에는 브라우저가 만든 <font size> 도 같은 크기로 보인다 */
.rt{--rtb:15px;font-size:var(--rtb);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.rt>div{min-height:1.8em}
.rt [data-in="1"]{margin-left:2em}
.rt [data-in="2"]{margin-left:4em}
.rt [data-in="3"]{margin-left:6em}
.rt [data-in="4"]{margin-left:8em}
.rt [data-sz="s"],.rt font[size="1"],.rt font[size="2"]{font-size:calc(var(--rtb) * .87)}
.rt [data-sz="l"],.rt font[size="4"],.rt font[size="5"],.rt font[size="6"],.rt font[size="7"]{font-size:calc(var(--rtb) * 1.25)}
.rt font[size="3"]{font-size:var(--rtb)}
.rt b,.rt strong{font-weight:700}
.rt ul,.rt ol{margin:0;padding-left:1.7em}
.rt img{max-width:100%;height:auto;vertical-align:top;border-radius:4px}
.rt img:not([src]){display:inline-block;width:160px;height:90px;background:var(--f3)}
.rted{margin:0 0 8px;background:#fff}          /* 글 칸 테두리 없음(대표 2026-10-08 밤 — 눌러도 안 생긴다 · 머리 줄과 여백이 칸을 가른다).
                                                  칸 표 안의 한 칸으로 선 자리(설정 메일 서명 · 견적 공문 본문)만 옆 칸들과 같게 테두리를 둔다(아래 · 재무 절) */
/* 편집 막대 — 글을 골랐을 때만 고른 글 위에 뜬다(`#rtFloat` · rich.js `rtFloatSync` · 대표 2026-10-08 밤): 흰 바탕 · 가는 테두리 + 그림자 · 높이 34 · 모서리 9.
   겹창(100) · 말풍선(300) 위. 지금 크기의 「가」 는 옅은 바탕(.on) */
.rtbar{display:flex;align-items:center;gap:1px}
.rtfloat{position:fixed;z-index:310;left:0;top:0;height:34px;padding:0 4px;border:1px solid var(--line);border-radius:9px;background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.14);white-space:nowrap}
.rtfloat .rtb.on{background:var(--f3);color:var(--l1)}
.rtb.rtatt{padding:0 8px}                                 /* 「＋ 첨부」 — 글자 꼴 단추(주인 화면의 머리 줄 · 아래 줄) */
.rtb{height:28px;padding:0 6px;border:0;border-radius:6px;background:none;font-size:13.5px;color:var(--l2);white-space:nowrap}
.rtb:hover{background:var(--f3);color:var(--l1)}
.rtb[data-rtc="b"]{font-weight:700}
.rtb[data-rtc="sz-s"]{font-size:13px}
.rtb[data-rtc="sz-m"]{font-size:15px}
.rtb[data-rtc="sz-l"]{font-size:17.5px}
.rtsep{width:1px;height:16px;margin:0 3px;background:var(--line)}
.rtbody{position:relative;min-height:260px;padding:14px 20px 18px;outline:none}
.rtbody.rt-empty::before{content:attr(data-ph);position:absolute;left:20px;top:14px;color:var(--l3);pointer-events:none}
.csd .drawer .rted .rtbody{min-height:160px}
/* 설정 › 내 계정 「메일 서명」 — 몇 줄짜리 글이라 낮게 · 그림 · 첨부 단추가 없는 단추 줄은 끝 구분선을 감춘다 */
#stSignRow .rted{margin:0;border:1px solid var(--line);border-radius:12px}
#stSignRow .rtbody{min-height:104px;padding:10px 14px 12px}
#stSignRow .rtbody.rt-empty::before{left:14px;top:10px}
.rtbar .rtsep:last-child{display:none}
.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}
/* 통화 글(2026-10-02 · 답변서 U5 · 시안 장면 5) — 가) 앞에 붙어 온 메일 양식 · 서명은 원문 아래 접힘 /
   나) 경계를 모르면 원문 위 회색 띠 + 마우스를 올린 줄 끝 파란 테두리 알약 [여기부터 본문] · 그 위 줄은 흐리게 */
.csd .sigfold small{font-weight:400;color:var(--l3);font-size:14px}
.csd .sigfold .fx{font-weight:600}
.csd .csnote.sigask{color:var(--l2);margin:0 0 10px}
.csd .csnote.sigask b{color:var(--l1);font-weight:600}
.csd pre.sigpick .ln{border-radius:4px}
.csd pre.sigpick .ln.g{color:var(--l3)}
.csd pre.sigpick:has(.ln:hover) .ln{color:var(--l3)}
.csd pre.sigpick:has(.ln:hover) .ln:hover,.csd pre.sigpick:has(.ln:hover) .ln:hover ~ .ln{color:var(--l1)}
.csd pre.sigpick .ln:hover{background:rgba(0,112,210,.06)}
.csd pre.sigpick .here{display:none;margin-left:8px;vertical-align:1px;height:24px;padding:0 10px;
  border:1px solid rgba(0,112,210,.4);border-radius:13px;background:#fff;color:var(--blue);font:inherit;font-size:13px;
  font-weight:600;white-space:nowrap;cursor:pointer;line-height:22px}
.csd pre.sigpick .ln:hover .here{display:inline-flex;align-items:center}
/* 발송 서랍 — 답변 기둥 **안** 맨 아래에서 화면 아래 끝에 붙는 판(2026-10-02 · 기둥 높이가 사라져 `position:sticky; bottom:0`).
   서랍 안 목록 스크롤은 서랍 고유라 남긴다(화면 높이의 80% 까지). */
.csd .drawer{position:sticky;bottom:0;max-height:calc(var(--csmh,100vh) * .8);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:has(> .mbx){padding:0}
.csd .drawer:has(> .mbx) .dh{margin:0;padding:8px 12px 8px 16px}
.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:minmax(0,1fr)}
  .csd .cols>#csACol{grid-row:2;grid-column:1}
  /* 좁은 화면(U7) — 붙는 줄 · 따라오기 없음(머리는 기둥마다) · [질의 | 답변 ↓] 칩 · 접힌 ② ③ */
  .csd .csjump{display:flex;gap:6px;margin-top:12px}
  .csd .csjump button{height:28px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#fff;
    font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
  .csd .csjump button.on{background:rgba(0,0,0,.06);color:var(--l1);font-weight:600}
  .csd .sec.nf{margin-bottom:10px}
  .csd .sec.nf .fx,.csd .sec h6 .fx{color:var(--l2);font-weight:600;font-size:14px}
  .csd .meta.B.nar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .csd .meta.B.nar2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;flex:0 0 100%}
  .csd .more .names{color:var(--l3)}
  .csd .more .kvs{flex:0 0 100%;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
}

/* =====================================================================
   ④ 고객사 — 목록 + 상세 (시안 `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}

/* ---- 목록 ---- */
.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}
/* 상태 = 낱말만(점 없음 · 2026-10-13) */
.corow .stt{flex:0 0 76px;font-size:14px;display:flex;align-items:center;gap:6px}
.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 .coongo{font-size:14px;color:var(--l2);white-space:nowrap}.cohead .coongo:empty{display:none}   /* 「진행 중인 일 N」(머리 둘째판 · 결정 635 ② · 667) */
/* 2026-10-07 머리 단추 통일 — [＋ 새로 만들기] 는 화면 머리의 것 하나 · 여기 남는 [＋ 미팅] [⋯] 은 줄 오른쪽 끝에 함께 */
.cohead .mt,.cohead .pmw{margin-left:auto}
.cohead .mt+.pmw{margin-left:0}
/* 좁은 화면(2026-10-03 · Lead) — 단추 둘([＋ 미팅] [⋯])은 언제나 한 줄로 함께 다음 줄에(⋯ 혼자 떨어지지 않게) ·
   줄 끊기는 빈 ::before 한 칸(order 1) — 화면 머리 `#top span.sp` 와 같은 수 */
.cohead .mt{white-space:nowrap}
@media (max-width:560px){
  .cohead::before{content:"";order:1;flex:0 0 100%;height:0}
  .cohead .mt,.cohead .pmw{order:2}
  .cohead .mt,.cohead .pmw{margin-left:0}
}
.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 button.hd{width:100%;border:0;background:none;font:inherit;font-size:14px;text-align:left;cursor:pointer;color:inherit;border-radius:10px}
.comem button.hd:hover{background:var(--hover,#f6f6f6)}
.comem .hd .car{color:var(--l3);width:16px;flex:0 0 16px}
.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}
/* 묶음 18 「사진으로」(company.js coCtNewHead · coCtAiHtml) · 문서 읽기(coDocRead) — AI 가 채운 칸 = 보라 점선(시안 들어오는것 `.fx.ai`) · 고치면 보통 칸 */
.cocts .ct.edit .cthd{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:14px}
.cocts .ct.edit .cthd .sp{flex:1}
.cocts .ct.edit .ai-box,.cocts .ct.edit .ai-note{margin-bottom:6px}
.cocts .ct.edit .ctnote{margin:0 0 6px;font-size:13px;color:var(--l3)}
.cocts .ct.edit input.aifx,.docup input.aifx,.docup .pk1.aifx{border:1.5px dashed var(--ai);background:var(--ai-box)}
/* 읽은 칸 = 칸 안 오른쪽 알약(시안 장면 2 · 5 · 리뷰 IN3) — `.aif` 가 칸을 감싸고 알약을 칸 안에 띄운다 */
.aif{position:relative;display:block;min-width:0}
.aif>input{width:100%;box-sizing:border-box}
.ct.edit .aif>input.aifx,.docup .aif>input.aifx{padding-right:40px}
.aif>.ai-pill{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none}
.docup .aif.dt{width:200px;max-width:100%}
.docup .fl .v .aif.dt>input[type=date]{width:100%}
.docup .pk1.aifx{min-width:min(260px,100%)}
.docup .pk1>.ai-pill{margin-left:auto}
/* 문서 올리기 창 아래 줄 — 힌트가 길어도 [닫기 · 등록] · [바꾸기] 글이 꺾이지 않게 · 휴대폰은 힌트를 한 줄 위로(Review-B-v12 가벼움 ①) */
.modal .acts.docacts{flex-wrap:wrap;align-items:center}
.acts.docacts>#coDocUpHint{flex:1 1 0;min-width:0}
.acts.docacts>button,.docup .filebox .link{white-space:nowrap;flex:none}
@media (max-width:640px){ .acts.docacts>#coDocUpHint{flex-basis:100%} }
/* 사진에서 읽은 새 연락처(시안 장면 1-2 · 2) — 칸 둘씩 · 휴대폰 폭에서도 [닫기 · 저장] 이 화면 안(리뷰 IN2) */
.cocts .ct.edit.ctai{min-width:0;width:520px;max-width:100%;box-sizing:border-box}
.ctai .cthd{flex-wrap:wrap}
.ctai .cthd>*{white-space:nowrap}
.ctai .cthd .sub{color:var(--l3)}
.ctai .cthd .link{margin-left:auto}
.ctai .g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:6px}
.ctai .g>.w{grid-column:1 / -1}
@media (max-width:420px){ .ctai .g>.ph{grid-column:1 / -1} }      /* 휴대폰 — 전화 번호는 한 줄에 하나(두 칸이면 번호가 알약에 가림) */
@media (max-width:360px){ .ctai .g{grid-template-columns:minmax(0,1fr)} .cocts .ct.edit.ctai{padding:10px 6px} .ctai .aif>input{font-size:14px;padding-left:6px} .ct.edit.ctai .aif>input.aifx{padding-right:31px} .ctai .aif>.ai-pill{right:6px} }      /* 아주 좁으면 칸마다 한 줄 · 여백 · 글을 조금 줄여 메일 주소가 알약 앞에서 잘리지 않게 */
.cocts .ct.edit.ctai .r3{flex-wrap:wrap;justify-content:flex-start;align-items:center}
.ctai .r3 button{white-space:nowrap}
.ctai .r3 .rt{display:flex;gap:6px;margin-left:auto}
#modalBox>.ai-bar{margin:4px 0 0}
.cocts .ct .menu{top:24px;min-width:150px}

/* ---- 세부 정보(겹창 안 몸통 · 2026-10-06 — 머리 단추 · 겹창 틀은 아래 .codlg 절) — v14: 인라인 칸 → 인사 이슈 표 → 메모(맨 마지막) ---- */
.comore{color:var(--l2);font-size:14px;margin:0 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}
/* 자문 계약 시작일 ~ · 응답 기한 N 일 — 세부 정보 안 한 줄(2026-09-30 · 머리에서 옮김) */
.comore .mbox .cocontract{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.comore .mbox .cocontract .lbl{margin:0;flex:0 0 auto;white-space:nowrap}
.comore .mbox .cocontract .k{color:var(--l2);white-space:nowrap}
.comore .mbox .cocontract .k.sla{margin-left:10px}
.comore .mbox .cocontract input.dt{width:150px}
.comore .mbox .cocontract input.num{width:64px}
/* 작은 인라인 칸 — 한 줄에 둘, 라벨은 회색 작은 글자 */
.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}
/* ---- 세부 정보 절 셋(2026-10-03 2차 · 대표 답) — 기본 정보 · 인원 · 답변 기조·인사 이슈·메모 ----
   흰 바탕 · 절마다 얇은 선(배경 없이 여백으로) · 기본 정보 = 고른 격자(넓으면 넷 · 중간 둘 · 좁으면 하나 · 주소 · 한 줄 특징만 두 칸) */
.comore .mbox{gap:0;padding:0;margin-top:6px;background:none;border-top:1px solid var(--line);border-radius:0}
.comore .cosec{padding:20px 0 22px;border-bottom:1px solid var(--line)}
.comore .cosec:has(> .cobf:empty){display:none}
.comore .cosh{display:flex;align-items:center;font-size:15px;font-weight:700;color:var(--l1);margin:0 0 14px}
.comore .cosec .cobf{margin:0;padding:0;border:0}
.comore .cosec .bf-foot{display:none}                 /* 설명 줄글은 절 머리 (?) 뒤로 */
.comore .cogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:14px 20px;align-items:end}
.comore .cogrid > #coMeta,.comore .cogrid > #coMetaInd{display:contents}
.comore .cogrid .if{flex-direction:column;align-items:stretch;gap:4px;flex:none;min-width:0}
.comore .cogrid .if.wide{grid-column:span 2}
.comore .cogrid .if .lbl{font-size:13.5px}
.comore .cogrid .if .v{min-height:30px;display:flex;align-items:center}
.comore .cogrid .copick{align-self:stretch;height:30px;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comore .cosla-v{display:flex;align-items:center;gap:6px}
.comore .cosla-v input{width:80px}
.comore .cosla-v .k{font-size:14px;color:var(--l2);white-space:nowrap}
.comore .cosec .codm{margin-top:16px}
.comore #coSecNote .costance{margin:0 0 16px}
.comore #coSecNote .f.last{margin-top:16px}
.cohelp{margin-left:6px}          /* 꼴은 .hlp(공용 「?」) */
.cohelp .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1100px){ .comore .cogrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .comore .cogrid{grid-template-columns:minmax(0,1fr)}
  .comore .cogrid .if.wide{grid-column:auto}
}
/* ---- 머리 작게(2026-10-03 2차) — 담당 노무사 = 접힌 한 줄 · 연락처 = 이름표 한 줄 · 「할 일」 띠 = 또렷한 카드 ---- */
/* ★ 2026-10-06(대표) — 머리 네 줄은 한 꼴: [▸ 자리 16][이름 칸 88][값] · 줄 높이 34 · 글자 14 · 상자·배경 없음. 이름 칸 = 왼쪽 104px */
.comem.fold{margin:12px 0 0;border:0;background:none}
.comem.fold .hd{padding:0;min-height:34px;border-radius:6px}
.comem.fold .hd .k{flex:0 0 88px}
.comem.fold .hd .rt{margin-left:0;color:var(--l1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comem.fold .hd .rt.none{color:var(--l3)}
.cocts{display:block;margin:0}
.cocts .cotags{position:relative;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:34px;padding:3px 0 3px 104px}
.cocts .cotags > .k{position:absolute;left:16px;top:0;line-height:34px;font-size:14px;color:var(--l2)}
.cocts .ctdet,.cocts .ct.edit{margin-left:104px}
.cocts .ct.tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;min-width:0;border:1px solid var(--line);
  border-radius:14px;background:#fff;font-size:14px;cursor:pointer;white-space:nowrap}
.cocts .ct.tag b{font-size:14px;font-weight:600}
.cocts .ct.tag .ti{color:var(--l2)}
.cocts .ct.tag .star{color:#a86d00;margin:0;font-size:13px}
.cocts .ct.tag.on{border-color:var(--blue)}
.cocts .ctag.add{height:28px;padding:0 10px;border:1px dashed var(--line);border-radius:14px;background:none;color:var(--l2);font-size:14px}
.cocts .ctag.add:hover{color:var(--l1);border-color:rgba(0,0,0,.3)}
.cocts .ctdet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.cocts .ctdet .m{color:var(--l2)}
.cocts .ctdet .star{color:#a86d00;font-size:13px}
.cocts .ctdet .pmw{position:relative;margin-left:auto}
.cocts .ctdet .mb{width:24px;height:24px;border:0;border-radius:12px;background:none;color:var(--l2)}
.cocts .ctdet .mb:hover{background:var(--f2)}
.cocts .ctdet .menu{top:26px;min-width:150px}
.cocts .ct.edit{margin-top:8px;display:inline-block}
/* ---- 2026-10-07 미니멀 3-2절(대표 확정 · 확정 시안 장면 2) — 머리 = 이름 줄 → 정보 한 줄(.cobar) → 할 일 세 줄(.cotodo) → 탭 ----
   정보 한 줄: [담당 이름 ▸] │ [연락처 이름 · 이름 ＋] │ [응답 기한 N영업일 · 세부 정보 ▸ · 한 장 보기 ▸] — 상자 · 알약 없이 글자.
   #coMem · #coCts 는 display:contents(줄의 칸 = 그 안의 머리 단추 · 이름 줄)이고 펼친 것(담당 표 · 연락처 상세 · 고치기)은
   줄 아래 온 폭(order 9) — 펴도 줄의 칸 자리는 안 움직인다(옛 「세 줄 한 꼴 16/88」 규칙은 위에 그대로 두고 이 절이 덮는다) */
.cobar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:8px 0 4px;min-height:34px;font-size:14px}
.cobar > .comem,.cobar > .comem.fold,.cobar > .cocts{display:contents}
.cobar .comem .hd,.cobar .comem.fold .hd{width:auto;flex:0 1 auto;min-width:0;gap:8px;padding:0 6px;margin-left:-6px;min-height:30px;border-radius:6px}
.cobar .comem .hd .k,.cobar .comem.fold .hd .k{flex:none;color:var(--l2)}
.cobar .comem .hd .rt,.cobar .comem.fold .hd .rt{margin-left:0;color:var(--l1);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cobar .comem .hd .rt.none,.cobar .comem.fold .hd .rt.none{color:var(--l3);font-weight:400}
.cobar .comem .hd .car{width:auto;flex:none}
.cobar .comem > :not(.hd):not(.copop),.cobar .cocts > :not(.cotags):not(.copop){order:9;flex:0 0 100%;box-sizing:border-box}
/* 편 것(담당 표 · 연락처 상세 · 고치기)은 줄 아래에 겹쳐 뜬다 — 할 일 · 탭을 밀지 않는다(Lead 결정 2026-10-07 · 밖 누름 · Esc 로 닫힘 company.js coBarShut) */
.cobar .copop{position:absolute;left:0;top:100%;z-index:30;box-sizing:border-box;width:min(100%,720px);margin-top:4px;padding:4px 14px 6px;
  background:#fff;border:1px solid var(--line2,rgba(0,0,0,.14));border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.cobar .copop .ctdet{margin:4px 0;padding:4px 0;border:0}
.cobar .copop .ct.edit{margin:6px 0}
.cobar .copop .mrow:first-child{border-top:0}
.cobar .comem .say{padding:6px 0 4px;color:var(--l2);font-size:14px}
.cobar .comem .mrow,.cobar .comem .none,.cobar .comem .ft{padding-left:0;padding-right:0}
.cobar .cocts .cotags{position:static;flex:0 1 auto;min-width:0;min-height:30px;padding:0 0 0 14px;gap:0;border-left:1px solid var(--line)}
.cobar .cocts .cotags > .k{position:static;line-height:30px;margin-right:8px}
.cobar .cocts .ct.tag{height:30px;padding:0 4px;border:0;border-radius:6px;background:none}
.cobar .cocts .ct.tag:hover{background:var(--hover)}
.cobar .cocts .ct.tag.on{background:var(--f2)}
.cobar .cocts .ct.tag .ti,.cobar .cocts .ct.tag .star{display:none}
.cobar .cocts .ct.tag + .ct.tag::before{content:"·";color:var(--l3);margin-right:2px}
.cobar .cocts .ctag.add{width:26px;height:26px;padding:0;margin-left:4px;border:0;border-radius:6px;color:var(--blue);font-size:15px}
.cobar .cocts .ctag.add:hover{background:var(--hover);color:var(--blue)}
.cobar .cocts .ctdet,.cobar .cocts .ct.edit{margin-left:0}
.cobar #coMoreFold{flex:0 1 auto;margin:0;padding-left:14px;border-left:1px solid var(--line);gap:12px;min-height:30px}
.cobar .lk,.cotodo .lk{height:28px;padding:0 4px;border:0;border-radius:6px;background:none;font-size:14px;color:var(--l2);cursor:pointer;white-space:nowrap}
.cobar .lk:hover{background:var(--hover);color:var(--l1)}
/* 할 일 — 왼쪽 가는 파란 선 하나 · 왼쪽 이름표 칸(「할 일 N」 · 「＋N 더」 · 「＋ 추가」) + 오른쪽 세 줄(줄 높이 30 · 배경 상자 없음 · 몸통은 work.js wkCoStripBody) */
.cotodo{position:relative;margin:8px 0 10px;padding:0 0 0 14px;min-height:30px;border-left:2.5px solid var(--blue)}
.cotodo-soon{font-size:14px;color:var(--l3);line-height:30px}
.cotodo .wkco{margin:0;display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:14px;align-items:start}
.cotodo .wkcoh,.cotodo .wkcoh.thin{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:0;border:0;padding:0}
.cotodo .wkcoh .hn{display:flex;align-items:center;gap:6px;height:30px}
.cotodo .wkcoh b,.cotodo .wkcoh.thin b{font-size:14px;font-weight:600;color:var(--l1);line-height:30px}
.cotodo .wkcoh .n{padding:0;background:none;font-size:14px;font-weight:600}
.cotodo .wkcoh .lk{height:30px;padding:0;color:var(--blue);margin:0}
.cotodo .wkcoh .lk:hover{text-decoration:underline}
.cotodo .wkcoh.thin{grid-column:1 / -1;flex-direction:row;align-items:center;gap:6px;min-height:30px}
.cotodo .wkcoh.thin b{font-weight:400;color:var(--l2)}
.cotodo .wkcoh.thin .none{font-size:14px;color:var(--l2)}
.cotodo .wkcoh.thin .lk{margin-left:10px}
.cotodo .wkcol{border:0;border-radius:0;padding:0;margin:0;background:none}
.cotodo .wkcor{grid-template-columns:18px minmax(0,1fr) auto auto 64px;min-height:30px;border-bottom:0;font-size:14.5px}
.cotodo .wkcor .t{font-size:14.5px}
.cotodo .wkcor.late{margin:0;padding:0;box-shadow:none;background:none}
.cotodo .wkcor.late .t{font-weight:400}
.cotodo .wkcor .d,.cotodo .wkcor .p{font-size:14px}
.cotodo .wkcor .d{text-align:right}
@media (max-width:640px){ .cocts .ct.edit{display:block;margin-left:0;min-width:0}.cocts .ctdet{margin-left:0} .cocts .ct.edit .r2{flex-wrap:wrap}
  /* 휴대폰 폭(확정 시안 휴대폰 장면 2) — 정보 줄은 칸째 다음 줄로(사이 선 없이) · 할 일 머리는 한 줄(「할 일 N … ＋N 더 · ＋ 추가」) · 줄은 체크 칸 · 제목 · 기한만 */
  .cobar{gap:0 16px} .cobar .cocts .cotags,.cobar #coMoreFold{border-left:0;padding-left:0}
  .cotodo .wkco{grid-template-columns:minmax(0,1fr)}
  .cotodo .wkcoh{flex-direction:row;align-items:center;gap:14px} .cotodo .wkcoh .hn{margin-right:auto}
  .cotodo .wkcor{grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:none;row-gap:0;padding:0}
  .cotodo .wkcor .ck,.cotodo .wkcor .t,.cotodo .wkcor .d{grid-area:auto} .cotodo .wkcor .t{white-space:nowrap}
  .cotodo .wkcor .pjn,.cotodo .wkcor>span:nth-child(3),.cotodo .wkcor .p{display:none} }

/* ---- 유형 탭 ---- */
.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}
/* 탭 줄(2026-09-30 소통 한 틀 · 시안 장면 1) — 켜진 프로젝트 탭 뒤 ⋯ · 끝 「끝난 프로젝트 N ▾」 · [＋ 프로젝트] */
.cotab.closed{color:var(--l3)}
.cotabs .pjmw{position:relative;display:inline-flex;align-items:center}
.cotabs .pjmo{border:0;background:none;color:var(--l3);font-size:15px;padding:2px 6px;border-radius:4px;cursor:pointer;margin-left:-8px}
.cotabs .pjmo:hover{background:var(--f2)}
.cotabs .coend{display:flex;align-items:center;gap:8px;padding-bottom:4px}
.cotabs .codone{position:relative;font-size:14px;color:var(--l2);border:0;background:none;padding:3px 8px;border-radius:6px;cursor:pointer}
.cotabs .codone.on,.cotabs .codone:hover{background:var(--f2)}
.cotabs .codone .dot{position:absolute;right:-2px;top:2px;width:7px;height:7px;border-radius:4px;background:var(--blue)}
.cotabs .menu.copjmenu,.cotabs .menu.copjdd{position:absolute;top:100%;left:0;z-index:20;min-width:200px}
.cotabs .menu.copjdd{left:auto;right:0;min-width:230px}
.cotabs .menu .mi small{margin-left:auto;padding-left:10px;font-size:13px;color:var(--l3)}
.cotabs .menu .mi .dot{display:inline-block;width:7px;height:7px;border-radius:4px;background:var(--blue);margin-left:6px}
.cotabs .menu .hd2{font-size:13px;color:var(--l3);padding:4px 10px 2px}
.cotabs .menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.cotabs .menu .mi.red{color:var(--red)}
/* 탭 줄 두 갈래(2026-10-03 대표 · Lead-v3) — 고정 탭 넷(지금 탭 모양) · 얇은 세로 구분 · 프로젝트 = 이름표(알약) + [＋ 프로젝트].
   알약이 많으면 알약 줄만 가로로 넘긴다(페이지 전체 가로 스크롤 없음) · ⋯ 메뉴는 줄 밖(탭 줄 기준 · `coPjMenuPlace`) */
.cotabs{position:relative}
.cotabs > .menu.copjmenu{right:auto}
.cotabs .cofix{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.cotabs .cofix .cotab{white-space:nowrap}
.cotabs .cosep{flex:0 0 auto;width:1px;height:20px;background:var(--line);margin:0 8px 0 6px;align-self:center}
.cotabs .copills{position:relative;display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;overflow-x:auto;padding:4px 2px;scrollbar-width:thin}
.cotab.pj{flex:0 0 auto;height:28px;margin:0;padding:0 11px;border:1px solid var(--line);border-radius:14px;background:#fff;white-space:nowrap}
.cotab.pj:hover{border-color:rgba(0,0,0,.25)}
.cotab.pj.on{border-color:rgba(0,112,210,.45);background:rgba(0,112,210,.08);color:var(--blue);font-weight:600}
.cotab.pj.on .n{color:var(--blue)}
.cotab.pj.closed{border-style:dashed}
.cotabs .copills .pjmo{margin-left:-4px}
.cotabs .copills .copjadd{flex:0 0 auto;white-space:nowrap}
.cotabs .coend{flex:0 0 auto;padding-right:2px}
@media (max-width:640px){
  .cotabs{flex-wrap:wrap}
  .cotabs .cosep{display:none}
  .cotabs .copills{order:3;flex:1 1 100%}
  .cotabs .cofix{flex:0 1 auto;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none}   /* 고정 탭이 다섯(「급여」)이면 390 폭을 넘는다 — 이 줄만 가로로 넘긴다 */
}
/* 계약 탭 몸통 · 프로젝트 계약 창 — 계약 부품 그대로(창에서는 이름 곁 고객사 글자를 숨긴다 — 한 고객사 · 한 프로젝트) */
.cocon .ch{display:flex;align-items:center;gap:8px;padding:10px 0 4px}
.cocon .ch .cnt{font-size:14px;color:var(--l3)}
.cocon .ch .sp{flex:1}
.cocon .msg1{font-size:14px;color:var(--l3);padding:6px 2px}
.modal .box:has(.copjgy){width:900px;max-height:88vh;overflow:auto}
.copjgy .gyrow .nm .cosub{display:none}
.copjgyadd{padding:8px 0 2px}
@media (max-width:820px){
  .copjgy .gybox.all .gyed,.copjgy .gybox.all .gymemo{margin-left:8px}
}
/* ---- 세부 정보 겹창(2026-10-06 대표 「세부 정보는 겹창으로」) — 머리에는 [세부 정보] 단추 한 줄 · 누르면 가운데 창.
   새 항목 창(#ni) · 일정 창(#sc)과 같은 층(z 90) — 안에서 여는 고르기 창(#modal · z 100)이 위에 뜬다. 안은 `.comore` 규칙 그대로 ---- */
#coMoreFold{display:flex;align-items:center;gap:12px;margin:6px 0 2px}
.comore.codlg{position:fixed;inset:0;z-index:90;margin:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28)}
.codlg-box{width:960px;max-width:94vw;max-height:88vh;overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:12px;
  padding:18px 24px 6px;box-shadow:0 20px 60px rgba(0,0,0,.22);outline:none}
.codlg-h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.codlg-h h3{margin:0;font-size:16px;color:var(--l1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codlg-h .saved{margin-left:auto;font-size:14px;color:var(--l3);white-space:nowrap}
.comore.codlg .cosec:last-child{border-bottom:0}
.comore .cosec > .coerr{display:block;margin-top:8px}
.comore .cosec > .coerr:empty{display:none}
@media (max-width:600px){ .codlg-box{width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0;padding:14px 14px 6px} }
.comore .codetv{display:inline-flex;gap:12px;margin-left:0;font-size:14px}
.comore .codetv .k{color:var(--l3)}
.comore .codetv b{color:var(--l1);font-weight:500}
.pjper{display:flex;align-items:center;gap:6px}
.pjper input{min-width:0;flex:1}
.pjsla{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--l2)}
.modal .pjsla input{width:110px}
/* 고정 탭 「급여」 — 매달 돌아오는 기한 줄 목록(company.js coPayHtml · 2026-10-07) · 한 줄 = 이름 · 규칙 · 이번 차례 · 받을 것 · 받음/끝냄 · ✕ */
.copay{margin:12px 0 14px;font-size:14px;color:var(--l1)}
.copayrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:3px 0}
.copay input:not([type=checkbox]),.copay select{height:32px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;min-width:0}
.copay input:not([type=checkbox]):focus,.copay select:focus{outline:none;box-shadow:0 0 0 3.5px rgba(0,112,210,.76)}
.copay input[disabled],.copay select[disabled]{background:var(--f4);color:var(--l2);opacity:1}
.copay input[type=number]{width:52px;padding:0 6px;text-align:right}
.copay input[type=checkbox]{margin:0}
.copay .nm{flex:0 0 190px}
.copay .rl{flex:0 0 206px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.copay .rl select,.copay .rl .rk{flex:0 0 78px;width:78px;padding:0 6px}
.copay .when{flex:0 0 78px;color:var(--l2);white-space:nowrap}
.copay .docs{flex:1 1 180px}
.copay .ck{flex:0 0 92px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.copay .x{flex:0 0 24px;width:24px;height:24px}
.copay button.x{padding:0;border:0;border-radius:6px;background:none;color:var(--l3)}
.copay button.x:hover{background:var(--f2);color:var(--l1)}
.copayft{display:flex;align-items:center;gap:12px;min-height:30px;padding-top:6px}
.copay .msg{color:var(--l3);margin-top:0;min-height:0}
@media (max-width:640px){
  .copayrow{padding:8px 0;border-top:1px solid var(--line)}
  .copay .nm{flex:1 1 100%}
  .copay .docs{flex:1 1 140px}
}
.stf input#stSlaDays{max-width:120px;flex:0 0 auto}
.modal .gl{font-size:14px;color:var(--l3);margin-top:8px}
.modal .warn1{font-size:14px;color:var(--orange);font-weight:600;margin:8px 0 0}
.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)}
.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}

/* 2026-09-29 화면 묶음 A2 — 펼친 메일 줄의 머리 칸(자문 질의 머리 `.csd .hdr` 와 같은 모양 · 수신함 펼침도 같은 규칙) */
.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}
/* 고객사 이름 링크 — 수신함 줄·자문 상세에서 고객사 화면으로 */
.cogo{color:inherit;text-decoration:none;border-bottom:1px dotted var(--l3)}
.cogo:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* 보기 탭 · "+N개 더" 작은 창 — 공용 부품(`calgrid.js`)의 칸 꼴(옛 고객사 개요 달력 `.cocal` · `.codays` 는 2026-10-17 묶음 2-a 에서 걷음) */
.chips .grp.vtabs{gap:2px;flex:none}
.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}
.cgpop .e:hover{background:var(--f3)}
.cgpop .e .i{flex:none;font-size:13px}
.cgpop .e .tm{flex:none;font-weight:600}
.cgpop .e .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cgpop .e.plan{background:rgba(240,140,0,.09);color:#8a4b00}   /* 예정 미팅 */
.cgpop .e.busy{background:var(--f3);color:var(--l2);cursor:default}
/* 상태 점 — 색 규칙은 `dotClass()` 한 곳이 정한다(수신함·자문 목록과 같은 낱말) */
.cgpop .dot{flex:none;width:7px;height:7px;border-radius:4px;
  background:var(--l3);margin-left:auto}
.cgpop .dot.d-todo{background:var(--blue)}
.cgpop .dot.d-late{background:var(--red)}
.cgpop .dot.d-done{background:var(--green)}
/* "+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}

/* =====================================================================
   본문 속 그림 · 인용 부분 보기 — `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}
/* 2026-10-03 소통 한 장 — 「이전 메일 N줄 ▸」(화살표는 뒤) · 펼치면 왼쪽 세로줄 회색 글(시안 `.q` · 회색 상자 걷음) */
.qfold>summary::after{content:' ▸'}
.qfold[open]>summary::after{content:' ▾'}
.qfold>summary:hover{text-decoration:underline}
.qfold .qx{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font-size:14px;color:var(--l3);
  border-left:2px solid rgba(0,0,0,.14);padding:0 0 0 10px;max-height:30vh;overflow:auto}
/* 2026-10-15 지적 10 — 대화에 없는 답장 인용 「이전 메일 ▸」(quote.js qtTailHtml) · 펼치면 조각마다 메타 한 줄 + 글(.qfw) · 높이 상한 없음 */
.qfold.qprev .qx{max-height:none;overflow:visible;white-space:normal;border-left:0;padding:0;color:inherit;font-size:inherit}
.qfold.qprev .qfw:first-child{margin-top:4px}
/* 평문 「이전 메일 ▸」 줄의 「항상 펼쳐 두기」(quote.js qtTailHtml) — HTML 줄 꼬리(.qorig)와 같은 글자 · 같은 한 줄 · 화살표 뒤(리뷰 fixes6 L3) */
.qfold.qprev>summary{display:flex;align-items:baseline}.qfold.qprev>summary:hover{text-decoration:none}.qfold.qprev>summary:hover .qfl{text-decoration:underline}
.qfold.qprev>summary [data-qt="keep"]{order:1;margin-left:14px;font-size:13.5px;color:var(--l3);text-decoration:none}
.qfold.qprev>summary [data-qt="keep"]:hover{color:var(--blue);text-decoration:underline}

/* =====================================================================
   설정 화면(⑤) — 시안 `docs/mock/설정화면-시안.html` 그대로.
   이름은 모두 `st` 로 시작한다(수신함·자문·고객사의 `.row`·`.card` 와 부딪히지 않게).
   ===================================================================== */
#vSet{max-width:1100px;min-width:0}
/* 2026-10-18 설정 ㄷ-f — 옛 가로 탭 · 둘째 단 탭(.sttab*)은 걷음(겹창 왼쪽 목록 · 줄 꼴은 맨 아래 「설정 ㄷ-f」 절) · 덩어리 감싸개 `.stpane` 는 그 자리 그대로 */
.stpane{display:block;min-width:0;scroll-margin-top:12px}
.stpane[hidden]{display:none}
.stpane>.stblk:first-child{border-top:0;margin-top:4px}
.stblk{border-top:1px solid var(--line);padding:16px 0 8px;margin-top:10px;scroll-margin-top:12px;min-width:0}
.stblk>h3{font-size:16px;margin:0 0 6px}
#stBody>.stwarn{margin:6px 0 4px}
/* 옛 절 감싸개(재무 · 운영자 — finance.js · ops.js 가 그린다)는 설정 안에서 상자 없이 · 머리 h2 는 탭 이름이 대신한다 */
#stBody .stsec{border:0;border-radius:0;padding:0;margin:0;background:none}
#stBody .stsec>h2{display:none}
#stBody .stsec>.stone{margin-top:18px}
/* 연결 › 휴대폰에서 보내기 — 접은 칸 하나(누르면 지금 글 그대로 펼침) */
.stphtg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;max-width:760px;text-align:left;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14px;color:var(--l1);cursor:pointer}
.stphtg>span{border:1px solid var(--line);border-radius:8px;padding:2px 10px;white-space:nowrap}
.stphtg>span.tw{border:0;margin-left:auto;color:var(--blue);padding:2px 4px}
.stphtg:hover{background:var(--f4)}
#stPhoneMore{margin-top:8px}
.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]:not(.sm):not(.primary):not(.btn){opacity:.45;cursor:default}
.stf button[disabled]:not(.sm):not(.primary):not(.btn):hover{background:#fff}
.sthint{font-size:14px;color:var(--l2)}
.sthint.stlegal{margin-top:14px}
.sthint.stlegal a{color:inherit;text-decoration:underline}
/* 여러 줄 칸 한 줄(법인 기준) — 칸 아래에 규칙 한 줄이 붙는다 */
.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)}
/* 법인 › 일반 로고 · 도장 — 줄 끝 작은 그림(없거나 못 읽으면 「그림 없음」 글자 · 2026-10-18 ㄷ-f 줄 꼴) */
.stdocpv{display:inline-flex}
.stdocpv img{display:block;height:36px;min-width:36px;max-width:160px;padding:4px 8px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:8px;background:#fff;object-fit:contain}
.stdocpv.seal img{width:44px;height:44px;padding:4px;background:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0) 0 0/12px 12px}
.stdocpv img.none,.stdocpv img:not(.none)+.stdocnone{display:none}
.stdocnone{display:inline-flex;align-items:center;color:var(--l2);font-size:16px;white-space:nowrap}
.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 은 이름 · 반출 · 삭제 · 담당 밖 · 이유만. */
.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 .stax-h h3{font-size:16px;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.pri[disabled],.stax .sm.pri[disabled]:hover{background:rgba(0,112,210,.35);border-color:transparent;color:#fff}   /* 못 누를 때 — 옅은 파랑(단추 꼴 · 리뷰 2026-10-08 ①) */
.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}
/* 설정 › 법인 「소통 유형」(0074 · 시안 자문아닌소통홈 장면 5) — 한 줄에 하나 · 자문·기타 고정 · 뺀 유형은 아래 회색 띠 */
.stf .k.sttop{align-self:start;padding-top:11px}
.stkl{border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:520px;background:#fff}
.stkl .kr{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;min-height:42px;padding:0 10px;border-top:1px solid var(--line)}
.stkl .kr:first-child{border-top:0}
.stkl .kr .d{width:7px;height:7px;border-radius:4px;background:#C9CCD1;justify-self:center}
.stkl .kr .d.a{background:var(--blue)}
.stkl .kr .nm{font-size:15px;color:var(--l1)}
.stkl .kr .ki{height:30px;border:1px solid transparent;border-radius:6px;padding:0 8px;margin-left:-8px;display:flex;
  align-items:center;font-size:15px;background:none;color:var(--l1);text-align:left;cursor:text}
.stkl .kr .ki:hover{border-color:var(--line)}
.stf .stkl .kr input.ki{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,112,210,.12);width:100%;max-width:260px}
.stkl .kr .fx2{font-size:14px;color:var(--l3)}
.stkl .kr .x{font-size:14px;color:var(--l2);border:0;background:none;padding:0 4px;cursor:pointer}
.stkl .kr.off{background:var(--f4)}
.stkl .kr.off .nm{color:var(--l3);text-decoration:line-through}
.stkl .kr.off .x{color:var(--blue)}
.stkl .kh{font-size:14px;color:var(--l3);padding:8px 10px 4px;border-top:1px solid var(--line);background:var(--f4)}
.stkl .kf{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--line)}
.stkl .kf .add{border:0;background:none;color:var(--blue);font-size:14px;padding:0;cursor:pointer}
.stkl .kf .add[disabled]{color:var(--l3);cursor:default}
.stkl .kf .cnt{margin-left:auto;font-size:14px;color:var(--l3)}
/* 소통 유형 규칙 칸 둘(2026-09-30 소통 한 틀 · 시안 장면 5) — 유형 · 기한 · 수습 답변 검토 · 고정/빼기 */
.stkl.rules{max-width:640px}
.stkl.rules .kr{grid-template-columns:20px 1fr 84px 118px 64px}
.stkl.rules .khd{display:grid;grid-template-columns:20px 1fr 84px 118px 64px;gap:10px;align-items:center;min-height:34px;padding:0 10px;font-size:14px;color:var(--l3);background:var(--f4)}
.stkl.rules .kr .x,.stkl.rules .kr .fx2{justify-self:end}
.rsw{width:34px;height:20px;border-radius:10px;background:#D4D6DA;position:relative;border:0;padding:0;cursor:pointer;flex:0 0 34px}
.rsw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .12s}
.rsw.on{background:var(--green)}
.rsw.on::after{left:16px}
.rsw[disabled]{opacity:.6;cursor:default}
.warn1{font-size:14px;color:var(--orange);font-weight:600;margin:6px 0 0}
.modal .primary.red{background:var(--red)}
.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(3,1fr);gap:10px;margin:8px 0 12px}   /* 휴대폰 카드 셋(아이폰 · 안드로이드 · 받는 사람 · 2026-10-04) */
.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)}
.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)}
/* 비활성 노무사 줄(결정 490) — 흐리게 · 지우지 않는다 · 줄 끝 단추 사이 6px(초대 · 인증 · 「비활성」 이 맞닿지 않게 · ⑤-b 리뷰 가벼움 7 · 8) */
.sttbl tr.strow.off{opacity:.55}
.sttbl .act .sm+.sm{margin-left:6px}
/* 노무사 줄 「담당 고객사」(2026-10-06) — 「N곳 ▸」 을 누르면 그 줄 아래에 **표의 하위 줄**(고객사마다 한 줄 · 배경 없이 얇은 선만):
   들여쓴 고객사 이름(같은 폭 칸) + 진행 중 프로젝트 · 「담당 고객사」 열 아래 ★ 주담당 / 부담당 */
.sttbl .aco{white-space:nowrap}
.sttbl .aco .link{font-size:13px;text-decoration:none}
.sttbl .aco.none,.sttbl .aco.lock{color:var(--l3)}
.sttbl .stadvx td{padding:7px 8px;background:none}
.sttbl .stadvx .sub{padding-left:28px}
.sttbl .stadvx .co{display:inline-block;min-width:200px;margin-right:12px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--l1);text-align:left;cursor:pointer}
.sttbl .stadvx .co:hover{text-decoration:underline}
.sttbl .stadvx .pj{font-size:14px;color:var(--l2)}
.sttbl .stadvx .role{font-size:13px;color:var(--l2);white-space:nowrap}
.sttbl .stadvx .role .star{color:#a86d00;margin-right:3px}
@media (max-width:600px){ .sttbl .stadvx .sub{padding-left:16px} .sttbl .stadvx .co{min-width:0;display:block;margin:0 0 2px} }
.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}
/* ⑨-d 과거 자료 묶어 넣기 한 장(2026-10-10 · 확정 시안 판매준비 장면 4 · 5 · settings.js stBun*) — 설정 본문 자리 · 탭 줄과 머리 이름은 감춤 ·
   머리(돌아가기 · 제목 · 걸음 · [넣기] · 거르기 줄)와 표 머리 줄은 위에 붙음 · 칸은 겹쳐 펼침(줄이 밀리지 않음) */
body:has(#vSet.bun:not([hidden])) #topTitle{visibility:hidden}
.bnhd{position:sticky;top:0;z-index:6;background:#fff}
.bncrumb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l2);padding-top:4px}
.bncrumb b{color:var(--l1)}
.bnback{height:28px;padding:0 12px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font-size:14px;color:var(--l1)}
.bnback:hover{background:var(--f4)}
.bnshh{display:flex;align-items:center;gap:12px;margin:8px 0 0;min-height:40px}
.bnshh h1{font-size:28px;margin:0}
.bnshh .r{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:14px;color:var(--l2);white-space:nowrap}
.bnshh .r b{color:var(--l1)}
.bnsteps{display:flex;gap:18px;font-size:14px;color:var(--l3);height:30px;align-items:center;margin-top:6px}
.bnsteps .on{color:var(--blue);font-weight:600}
.bnsteps .ok{color:var(--l2)}
.bnone{font-size:14.5px;color:var(--l2);margin:8px 0 0}
.bndrop{border:1.5px dashed rgba(0,0,0,.22);border-radius:14px;height:236px;margin-top:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;background:var(--f4)}
.bndrop.over{border-color:var(--blue);background:rgba(0,112,210,.04)}
.bndrop .big{font-size:17px;font-weight:600}
.bndrop .sub{font-size:14px;color:var(--l2)}
.bndrop svg{width:36px;height:36px;stroke:var(--l3);fill:none;stroke-width:1.5}
.bnbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bngap{margin-top:12px}
.bninfo{margin-top:16px;border-top:1px solid var(--line)}
.bnln{display:grid;grid-template-columns:150px 1fr;gap:12px;min-height:42px;align-items:center;border-bottom:1px solid var(--line);font-size:14.5px}
.bnln>.kk{color:var(--l2);font-size:14px}
.bnln>.vv{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.bnext{font-size:13.5px;padding:0 7px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.bnhl{font-size:14px;color:var(--l3);margin:14px 0 0}
.bnhl.bntight{margin-top:6px}
.bnlk{border:0;background:none;padding:0;color:var(--blue);font-weight:600;font-size:14px}
.bncard{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin-top:16px;max-width:640px}
.bnt{font-size:15px;font-weight:600}
.bnrow{display:flex;align-items:center;gap:10px}
.bnrow .sp{flex:1}
.bnsum{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--l2);min-height:34px;margin-top:2px;flex-wrap:wrap}
.bnsum b,.bnbar b{color:var(--l1)}
.bnvb{width:1px;height:14px;background:rgba(0,0,0,.14);flex:none}
.bnbadb{border:0;background:none;padding:0;color:var(--l2);font-size:14px}
.bnbadw{position:relative;display:inline-block}
.bnbad{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;min-width:280px;max-width:520px;max-height:260px;overflow:auto;
  font-size:14px;color:var(--l2);padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.12);white-space:normal;text-align:left}          /* 겹쳐 뜸 — 표를 밀지 않는다 */
.bnaskw{margin-top:2px;font-size:13.5px;color:var(--l3);line-height:1.6}
.bnai{border-radius:10px;padding:11px 14px 12px;margin-top:10px}
.bnai p{margin:4px 0 0;color:var(--l2);font-size:14px}
.bnai .bnbtns{margin-top:10px}
.bnspin{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid rgba(0,112,210,.15);border-top-color:var(--blue);
  animation:bnspin .8s linear infinite;flex:none}
@keyframes bnspin{to{transform:rotate(360deg)}}
.bnpbar{height:4px;border-radius:2px;background:var(--f3);overflow:hidden;margin:10px 0 6px}
.bnpbar i{display:block;height:100%;background:var(--blue)}
.bnbar{display:flex;align-items:center;gap:10px;height:50px;margin-top:2px;font-size:14px;color:var(--l2);white-space:nowrap;min-width:0}
.bnsel{height:30px;border:0;border-radius:8px;background:none;color:var(--l1);font-size:14px;padding:0 4px;cursor:pointer;field-sizing:content}
.bnsel:hover{background:var(--f4)}
.bnadd{border:0;background:none;padding:0;color:var(--blue);font-weight:600;font-size:14px;margin-left:auto}
.bnul{margin:0;padding-left:18px;color:var(--l2);font-size:14px;line-height:1.8}
/* 제안 표 — 칸 일곱(체크 · 제목 · 날짜 · 고객사 · 질의 요지 · 답변 요지 · 표식) · 흐린 글자 = 어디서 짐작했나 */
.bnwrap{position:relative;margin-top:4px;margin-bottom:24px}
.bntbl{border:1px solid rgba(0,0,0,.14);border-radius:12px;overflow:clip}
.bntrh,.bntr{display:grid;grid-template-columns:40px minmax(0,236px) 108px 128px minmax(0,1fr) minmax(0,1fr) 58px;column-gap:12px;padding:0 14px 0 10px}
@media (max-width:1280px){.bntrh,.bntr{grid-template-columns:40px minmax(0,1fr) 96px 112px minmax(0,1fr) minmax(0,1fr) 58px}}   /* 좁으면 제목도 요지 칸과 나눠 쓴다 */
.bntrh{height:38px;align-items:center;font-size:13.5px;color:var(--l2);font-weight:600;background:#FAFAFA;border-bottom:1px solid var(--line);
  position:sticky;top:var(--bnhd,0px);z-index:4}
.bntr{padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--line);font-size:14px;align-items:start}
.bntr.low{opacity:.5}
.bntr.dupl .bntt,.bntr.dupl .bntx2,.bntr.dupl .bncl{color:var(--l3)}
.bntr.sel2{background:rgba(0,112,210,.04)}
.bnc{min-width:0;cursor:pointer;border-radius:6px;margin:-3px -6px;padding:3px 6px}
.bnc:hover{background:var(--f4)}
.bnc.on{box-shadow:0 0 0 1.5px var(--blue);background:#fff}
.bntt{font-weight:600;font-size:14.5px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnfn,.bnhn{font-size:12.5px;color:var(--l3);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bncl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.bntx2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;min-height:1.5em}
.bnlowt{font-size:12.5px;color:var(--orange);font-weight:600;margin-top:4px;white-space:nowrap}
.bncbx{width:17px;height:17px;border:0;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35);margin:3px 0 0 6px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;line-height:1;color:#fff;background:#fff}
.bncbx.on{background:var(--blue);box-shadow:none}
.bncbx.no{opacity:.35;background:var(--f3);cursor:default}
.bnchip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;border:1px dashed rgba(0,0,0,.3);background:#fff;
  font-size:13.5px;color:var(--l2);white-space:nowrap}
.bnrul{display:inline-flex;align-items:center;height:16px;padding:0 4px;border-radius:4px;font-size:12.5px;font-weight:600;color:var(--l2);
  background:var(--f3);line-height:1;flex:none}
.bndup{display:inline-flex;font-size:12.5px;color:var(--l2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);border-radius:5px;padding:0 6px;margin-top:4px;white-space:nowrap}
.bngb{background:#FAFAFA;border-bottom:1px solid var(--line);padding:8px 10px 10px 20px;font-size:14px}
.bngh{display:flex;align-items:center;gap:6px;color:var(--l2);border:0;background:none;padding:0;font-size:14px;text-align:left}
.bngh b{color:var(--l1)}
.bnmaps{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.bnmp{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 2px 0 7px;border-radius:7px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font-size:12.5px;color:var(--l2);white-space:nowrap}
.bnmp b{color:var(--l1);font-weight:600}
.bnmp .ar{color:var(--l3)}
.bnmp select{border:0;background:none;font-size:12.5px;color:var(--l2);height:24px;padding:0 2px;cursor:pointer;field-sizing:content}
.bnmp.part{box-shadow:none;border:1px dashed rgba(0,0,0,.35)}
.bnmp.mask{background:rgba(0,0,0,.06);box-shadow:none;padding-right:7px}
.bnmp.mask b{text-decoration:line-through;color:var(--l2)}
.bnmp.off b{color:var(--l3)}
.bnmore{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;font-size:14px;color:var(--l2);padding:5px 20px}
.bngt{font-size:13.5px;color:var(--l2);font-weight:600;padding:5px 20px 4px;background:#FAFAFA;border-bottom:1px solid var(--line)}
.bnempty{padding:18px 20px;color:var(--l2);font-size:14px}
.bned{position:absolute;z-index:8;width:440px;background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18),0 0 0 1px var(--line);padding:12px 14px}
.bned .eh{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--l2);min-height:24px}
.bned .eh b{color:var(--l1)}
.bned .sp{flex:1}
.bnefn{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnx{width:24px;height:24px;border:0;border-radius:12px;background:none;font-size:14px;padding:0;color:var(--l1);flex:none}
.bnx:hover{background:var(--f3)}
.bnta,.bnin{display:block;width:100%;margin-top:6px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1.5px rgba(0,112,210,.55);
  padding:9px 11px;line-height:1.7;font-size:14px;outline:0;background:#fff}
.bnta{min-height:96px;resize:vertical}
.bnin{height:38px}
.bnsrc{margin-top:10px;border-left:2px solid rgba(0,0,0,.14);padding:2px 0 2px 10px;font-size:13.5px;color:var(--l2);line-height:1.7;max-height:120px;overflow:hidden}
.bnsrc .bnlk{font-size:13.5px}
.bnfull{margin-top:8px;max-height:220px;overflow:auto;padding:8px 10px;border-radius:8px;background:var(--f4);font-size:13.5px;color:var(--l2);line-height:1.7;white-space:pre-wrap}
.bnft{margin-top:10px;font-size:12.5px;color:var(--l3)}
.bnpk{position:absolute;z-index:8;width:340px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14),0 0 0 1px var(--line);padding:8px}
/* 과거자료 폴더(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}
.impsub.sw{display:flex;align-items:center;gap:8px}.impsub.sw .sp{flex:1}.impsub.sw .sthint{font-weight:400}   /* 파일 머리 끝 「법인에 공유」 스위치(2026-10-20 · Lead 가름 777) */
.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;padding:8px;border-radius:10px;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:28px;padding:0 14px;font-size:14px}
.opstbl .at,.opstbl .adv,.opstbl .ai{color:var(--l2);font-weight:400}
/* 묶음 2(2026-09-21) — 사용량·기록 탭. 숫자는 오른쪽 · 자릿수를 맞춘다 */
.opstbl .num{text-align:right;font-variant-numeric:tabular-nums}
.opstbl .rep{color:var(--l2)}
/* 활동 열(2026-10-07 · 0105) — 옅은 파란 바탕 여섯 칸 · 조용한 법인은 줄을 흐리게 · 오류는 빨강 · 넓으면 표만 가로로 민다 */
.opswide{overflow-x:auto}
.opstbl .act7{background:rgba(0,112,210,.05);white-space:nowrap}
.opstbl td.act7.bad{color:var(--red);font-weight:600}
.opstbl tr.quiet td{color:var(--l3)}
.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}

/* ---- 시작하기 — 수신함 맨 위 회색 실선 한 줄(확정 시안 `제안부품-시안` 장면 5 · 2026-10-08 · onboard.js obStartHtml) ----
   접힌 한 줄(높이 36) 「시작하기 1/3 │ 다음 — 고객사 지정 … [수신함 열기] ⌄」 → 누르면 같은 자리에서 아래로 **겹쳐** 펼친다(목록을 밀지 않는다).
   0/3 인 첫 화면에서만 펼친 채 제자리에 선다(.flat). AI 가 만든 것이 아니라 회색 실선 · 알약 없음. 옛 옅은 파란 상자 · 점선 칩은 걷었다 */
.start{margin:0 0 8px}
.ob-st{position:relative;height:36px}
.ob-st.flat{height:auto}
.ob-sth{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:14.5px;color:var(--l1);white-space:nowrap;cursor:pointer}
.ob-sth>b{font-weight:700}
.ob-sth .x{color:var(--l2);font-size:14px;margin-left:-3px}
.ob-sth .bar{width:1px;height:14px;background:var(--line);margin:0 6px;flex:none}
.ob-sth .nx{color:var(--l2);font-size:14px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ob-sth .nx b{color:var(--l1);font-weight:600}
.ob-sth .sp{flex:1}
.ob-sth .link{flex:none;font-size:13.5px;text-decoration:none}
.ob-sth .go{margin-left:6px;font-size:14px;font-weight:600}
.ob-sth .cvb,.ob-sth .xb{flex:none;width:24px;height:24px;border:0;border-radius:12px;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--l3);font-size:13px}
.ob-sth .cvb:hover,.ob-sth .xb:hover{background:rgba(0,0,0,.06)}
.ob-sth .cv{width:6px;height:6px;border-right:1.5px solid var(--l3);border-bottom:1.5px solid var(--l3);transform:translateY(-2px) rotate(45deg)}
.ob-st.open .ob-sth .cv{transform:translateY(2px) rotate(-135deg)}
.ob-stp{position:absolute;left:0;right:0;top:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14);padding:0 12px 8px}
.ob-st.flat .ob-stp{position:static;box-shadow:none}
.ob-stp .ob-sth{border:0;padding:0;height:34px;border-radius:0;background:none}
.ob-st.flat .ob-sth{cursor:default}
.ob-stb .step,.ob-stb .todo{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px;border-top:1px solid var(--line)}
.ob-stb .step:first-child,.ob-stb .todo:first-child{border-top:0}
.ob-stb .n{flex:0 0 20px;width:20px;height:20px;border-radius:10px;background:#fff;border:1px solid var(--l3);color:var(--l2);
  font-size:12.5px;display:flex;align-items:center;justify-content:center}
.ob-stb .now .n{border-color:var(--blue);color:var(--blue);font-weight:600}
.ob-stb .ok .n{background:var(--green);border-color:var(--green);color:#fff}
.ob-stb .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-stb .t b{font-weight:600}
.ob-stb .t small{margin-left:6px;color:var(--l2);font-size:14px}
.ob-stb .primary,.ob-stb .sm{flex:none;height:28px}
.ob-stb .primary{padding:0 14px}
.ob-stb .later{border-top:1px solid var(--line);padding:10px 0 4px;font-size:13px;color:var(--l3)}
@media (max-width:600px){
  .ob-st,.ob-sth{height:40px}
  .ob-st.flat{height:auto}
  .ob-stp .ob-sth{height:38px}
  .ob-stb .step,.ob-stb .todo{flex-wrap:wrap;padding:8px 0 6px;row-gap:4px}
  .ob-stb .t{flex:1 1 calc(100% - 30px);white-space:normal}
  .ob-stb .primary,.ob-stb .sm{height:36px;margin-left:auto}
}

/* ---- 빈 수신함 — 안내 한 줄 + 단추 둘(가짜 자료가 없다) ---- */
.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}
  /* 좁은 화면 사이드바 = 아이콘 띠(2026-10-03 · Lead · 접힌 사이드바와 같은 모양 — 옛 64 폭은 글자가 세로로 쪼개졌다).
     접기 단추·겹쳐 뜨기는 없다(누르면 바로 그 화면) · 이름은 읽어 주는 도구에만 · 안 읽음 배지는 아이콘 위 알약 */
  #side{width:56px;flex:0 0 56px}
  #side .sbhd,#side .brand,#meName{display:none}
  #side .tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #side .navi{position:relative;display:flex;align-items:center;justify-content:center;padding:0;gap:0}
  /* ⌕ 맨 위 한 칸(결정 626 · 시안 홈-시안-확정 첫째판d-휴대폰-390) — 테두리 네모 · 누르면 찾기 창 */
  #side .sfind{display:flex;align-items:center;justify-content:center;width:100%;height:32px;margin:0 0 12px;padding:0;
    border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--l2)}
  #side .sfind:hover{background:var(--f4)}
  #side .navi{height:36px}
  #side .who{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 0;margin:auto -10px 0}   /* 「로그아웃」 네 글자가 56 폭 전체를 쓴다 */
  #side .who .link{margin:0;font-size:13px;white-space:nowrap}
  .sbav{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:11px;background:#DDE3EA;
    color:var(--l1);font-size:13px;font-weight:600}
  #navBadge{position:absolute;left:20px;top:2px;margin:0;min-width:20px;height:20px;padding:0 4px;
    border:2px solid var(--side);font-size:0;line-height:16px}
  #navBadge::after{content:attr(data-s);font-size:13px}
  .row .from,.row .co{flex:0 0 90px}
  .row .date{flex:0 0 84px}
  .stcards{grid-template-columns:1fr}
}
/* 설정 좁은 화면(2026-10-04 · 2026-10-18 탭 걷음) — 칸 줄 「이름 | 값」은 위아래 · 표는 제 안에서 가로로 */
@media (max-width:600px){
  .stf{grid-template-columns:1fr;gap:4px 0}
  .stf .k:empty{display:none}
  .stf .strow{margin-bottom:8px}
  #stSecAdvisers,#stSecAudit .stax-t{overflow-x:auto}
  .stphtg{max-width:100%}
}

/* =====================================================================
   ⑧ 통계 — `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{margin-left:4px;vertical-align:1px}          /* 꼴은 .hlp(공용 「?」) */

/* ---- ① 지금 — 숫자 다섯(배경 없이) ---- */
.sxnowgrid{display:grid;grid-template-columns:repeat(6,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:28px;padding:0 12px;border:1px solid rgba(0,0,0,.14);border-radius:999px;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}
/* 기간 글자는 칩 줄 아래 한 줄을 늘 차지한다 — 칩마다 글 길이가 달라도 칩 줄 높이가 같다(누르면 아래가 안 움직인다 · 2026-10-13 리뷰 L2) */
.sxper .rng{font-size:14px;line-height:22px;min-height:22px;color:var(--l2);flex-basis:100%;order:9;margin-left:0}
.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)}
.sxper .sxpick input{height:28px}                 /* 칩과 같은 높이 — 「직접」 을 눌러도 칩 줄 높이가 그대로 */

/* ---- ② 고객사 표 ---- */
.sxth,.sxtr{display:grid;grid-template-columns:20px 170px 80px 80px 1fr 190px 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}
/* 앞 기간 대비 — 견줄 기간마다 한 줄(윗줄 같은 날까지 · 아랫줄 전체는 흐리게 · 2026-10-13) */
.sxtr .delta .dl{display:block}
.sxtr>:nth-child(5){white-space:nowrap}             /* 채널 칸의 「소통 없음」 은 좁아도 한 줄 */
.sxtr .delta .dl.full{color:var(--l3)}
.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}
/* 경영 숫자 코멘트(T1 · T2 · 2026-10-09) — 흐린 글 + 「AI」 알약 · 머리 한 줄은 탭과 상관없이 · 고객사 줄 아래 두 문장은 이름 칸 들여쓰기에 맞춤 */
.sxai{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:4px 0 10px;font-size:13.5px;color:var(--l2)}
.sxai .tx.dim{color:var(--l3)}
.sxai .link{font-size:13px;margin-left:4px}
.sxaicm{display:flex;align-items:baseline;gap:6px;padding:0 10px 10px 34px;font-size:13px;line-height:1.5;color:var(--l2)}
.sxaicm .ai-pill,.sxai .ai-pill{position:relative;top:-1px}

/* ---- 줄 펼침 — 왼쪽 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)}
/* ★ 0097 「유형 없음 N」 — 질의 숫자 아래 회색 작은 한 줄(통계 고객사 표 · 업무 배분) */
.sxkn{display:block;font-size:14px;font-weight:400;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 「앞 기간 대비」 칸이 두 줄 글자로 넓어진 만큼 다른 칸을 줄여 「채널」 막대 자리를 지킨다(2026-10-13 리뷰 L3) */
@media (max-width:1360px){
  .sxth,.sxtr{grid-template-columns:20px 140px 64px 64px minmax(0,1fr) 190px 90px 116px;gap:12px}
}
@media (max-width:1200px){
  .sxth,.sxtr{grid-template-columns:20px 130px 60px 60px 1fr 160px 90px 110px;gap:10px}
}
@media (max-width:1100px){
  .sxnowgrid{grid-template-columns:repeat(3,1fr);row-gap:18px}
  .sxth,.sxtr{grid-template-columns:20px 130px 60px 60px 1fr 160px 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}
}
/* 좁은 화면(560 안팎) — 옛 통계 표도 가로 스크롤 없이(채널 막대 · 증감 · 최근 연락 칸을 접는다) */
@media (max-width:640px){
  .sxnowgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxth,.sxtr{grid-template-columns:16px minmax(0,1fr) 48px 48px 72px;gap:8px}
  .sxth>:nth-child(5),.sxtr>:nth-child(5),.sxth>:nth-child(6),.sxtr>:nth-child(6),.sxth>:nth-child(8),.sxtr>:nth-child(8){display:none}
  .sxah,.sxar{grid-template-columns:minmax(64px,1fr) repeat(4,minmax(0,1fr));gap:6px}
  .sxah>:nth-child(n+6),.sxar>:nth-child(n+6){display:none}
  .sxdet{margin-left:10px}
  .sxper .rng{min-height:44px}             /* 좁은 폭 — 긴 글은 두 줄이라 처음부터 두 줄 자리 */
}

/* =====================================================================
   ⑧-2 경영 — `src3/mgmt.js` · 확정 시안 `docs/mock/경영-시안-확정.html`
   ---------------------------------------------------------------------
   차트 칸은 배경 · 테두리 없이 여백으로(0918) · 「값이 들어오면 보임」 칸만 점선.
   SVG 는 viewBox 로 칸 폭에 맞춰 줄어든다(좁은 화면에서 가로 스크롤 없음).
   ===================================================================== */
.mgtabs{display:flex;gap:4px;margin:4px 0 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mgtab{padding:8px 10px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-size:14px;color:var(--l2)}
.mgtab:hover{color:var(--l1)}
.mgtab.on{color:var(--l1);font-weight:600;border-bottom-color:var(--l1)}
.sxper .sp{flex:1}
.mgbasis{font-size:14px;color:var(--l3);white-space:nowrap}
.mgnote{font-size:14px;color:var(--l2);padding:14px 10px}
.mgdim{color:var(--l3);font-weight:400}
.mginfo{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.035);font-size:14px;color:var(--l2)}
.mgchipr{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:4px 0 0;font-size:14px;color:var(--l2)}
.mgchipr .mgdim{margin-left:6px;font-size:14px}
.mgchipin{margin:0 0 6px}
.mgunitrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--l2);margin:6px 0 0}
.mgseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mgseg button{border:0;background:#fff;padding:3px 12px;font-size:14px;color:var(--l2)}
.mgseg button.on{background:rgba(0,0,0,.06);color:var(--l1);font-weight:600}
/* 숫자 줄(안 B) */
.mgkp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0 6px}
.mgkc .k{display:flex;align-items:center;gap:2px;font-size:14px;color:var(--l2)}
.mgkc .n{font-size:28px;font-weight:700;line-height:1.3;margin-top:2px;white-space:nowrap}
.mgkc .n small{font-size:14px;font-weight:400;color:var(--l2);margin-left:3px}
.mgkc .d{font-size:14px;color:var(--l3)}
.mgkc.hot .n{color:var(--red)}
.mgkc.zero .n{color:var(--l3);font-weight:500}
/* 차트 칸 */
.mgg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px;align-items:stretch}
.mgfull{grid-column:1/-1}
/* 2026-10-03 대표 「차트가 그림판에 나열한 것 같다」 — 격자 안 차트는 같은 카드(테두리 · 여백 · 같은 줄 같은 높이) ·
   「값이 들어오면 보임」 묶음은 풀어서 같은 격자의 한 칸씩 · 경영 칸 오른쪽 · 아래 여백(화면 끝에 붙지 않게) */
.mgg2>.mgch,.mgg2>.mgslot,.mgg2>.mgslot3>.mgslot,.mgg2>.mgslot3>.mgch{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px 18px;min-width:0}
.mgg2>.mgslot,.mgg2>.mgslot3>.mgslot{border:1.5px dashed var(--line2,rgba(0,0,0,.14));background:none}
.mgg2>.mgslot3{display:contents}
.mgg2>.mgempty{display:none}
.mgg2>.mgfull:not(.mgch):not(.mgslot){min-width:0}
.mggh svg{display:block;width:100%;height:auto}
#mgMoney,#mgWork{padding:0 0 48px}
.mgch{min-width:0}
.mgch h3{font-size:15px;margin:0;font-weight:600}
.mgch .s{font-size:14px;color:var(--l2);margin:1px 0 8px}
.mgsubh{font-size:15px;font-weight:600;color:var(--l1);margin:22px 0 2px}
.mgsub2{margin:12px 0 2px}
.mgsvg{display:block;width:100%;height:auto;overflow:visible}
.mgsvg text{font-family:inherit}
.mgtk{font-size:13px;fill:#898781;font-variant-numeric:tabular-nums}
.mgtk.mgsm{font-size:13px}
.mgtl{font-size:13px;fill:#52514e}
.mgtb{font-size:13px;fill:#0b0b0b;font-weight:600}
.mgpick{cursor:pointer}
.mglg{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:#52514e;margin-top:6px}
.mglg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mglg i.ln{height:2px;width:14px;border-radius:1px;vertical-align:3px}
.mglg i.dash{height:0;width:14px;border-top:2px dashed #898781;background:none!important;vertical-align:3px;border-radius:0}
.mglg i.hat{background:repeating-linear-gradient(135deg,#2a78d6 0 2px,#fff 2px 4px)!important;border:1px solid #2a78d6}
.mglg.mgscale{align-items:center;gap:0}
.mglg.mgscale i{margin:0 -2px 0 0;border-radius:2px}
.mglg.mgscale span{margin-left:8px}
.mgtake{font-size:14px;color:var(--l1);margin-top:6px}
.mgtake b{font-weight:600}
.mgright{display:flex;justify-content:flex-end;margin:-6px 0 2px}
.mgoutl{display:flex;gap:28px;margin-top:10px;font-size:14px;flex-wrap:wrap}
.mgoutl>div{flex:1 1 300px;border-top:1px solid var(--line);padding-top:8px;min-width:0}
.mgoutl b{font-weight:600}
.mgoutl span{color:var(--l2)}
.mgend{font-size:14px;color:var(--l3);padding:14px 10px 0}
/* 값이 들어오면 보임 */
.mgslot{border:1.5px dashed var(--line2,rgba(0,0,0,.14));border-radius:12px;padding:14px 16px 16px;position:relative;min-width:0}
.mggh{opacity:.55}
.mgmsg{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;padding:10px 16px;
  text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.08);width:max-content;max-width:calc(100% - 24px)}
.mgmsg b{display:block;font-size:14.5px}
.mgmsg span{display:block;font-size:14px;color:var(--l2)}
.mgmsg .bar{height:4px;border-radius:2px;background:rgba(0,0,0,.08);margin:7px auto 2px;width:150px;max-width:100%;overflow:hidden}
.mgmsg .bar i{display:block;height:100%;background:var(--l3);border-radius:2px}
.mgslot3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* 표 — 고객사 표(수익성) · 주제 표(업무) */
.mgthd{display:flex;align-items:center;gap:10px}
.mgthd .sp{flex:1}
.mgtog{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font-size:14px;color:var(--l2);padding:0}
.mgtog i{width:28px;height:16px;border-radius:8px;background:#D4D6DA;position:relative;display:inline-block}
.mgtog i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:6px;background:#fff}
.mgtog.on i{background:var(--blue)}
.mgtog.on i::after{left:14px}
.mgtbl{font-size:14.5px}
.mgtbl .h,.mgtbl .r{display:grid;gap:12px;align-items:center;padding:8px 10px}
.mgtprof .h,.mgtprof .r{grid-template-columns:minmax(110px,1.4fr) 96px 64px 64px 90px 90px 86px 150px}
.mgttop .h,.mgttop .r{grid-template-columns:120px minmax(160px,1fr) 140px 110px 110px}
.mgtbl .h{font-size:14px;color:var(--l2);font-weight:600;border-bottom:1px solid var(--line)}
.mgtbl .h .mgth{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mgtbl .h .mgth.nr{text-align:right}
.mgtbl .h .mgth.o{color:var(--l1)}
.mgtbl .r{border-radius:8px}
.mgtbl .r:nth-child(odd){background:rgba(0,0,0,.015)}
.mgtbl .r.mgpick:hover{background:var(--hover)}
.mgtbl .nr{text-align:right;font-variant-numeric:tabular-nums}
.mgtbl .co{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgtbl .lo{color:var(--red)}
.mgtbl .mgbarc{display:flex;align-items:center;gap:8px}
.mgtbl .mgbarc .mgmini{width:130px;max-width:60%}
.mgmini{display:block;width:150px;max-width:100%;height:auto}
/* 2026-10-03 「계약 없이 한 일」(수익성) · 「기존 고객에서 나올 일」(영업) — 0092 */
.mgtun .h,.mgtun .r{grid-template-columns:minmax(110px,1.4fr) 72px 72px 80px 80px 72px 110px}
.mgtbl .r.mgsum{background:none;border-top:1px solid var(--line);border-radius:0;font-weight:600}
.mgtopp .h,.mgtopp .r{grid-template-columns:minmax(110px,1fr) minmax(160px,1.5fr) minmax(140px,1.4fr)}
.mgwhys{display:flex;flex-wrap:wrap;gap:4px}
.pill.mgwhy{font-size:13px;white-space:nowrap}
.pill.mgwhy[data-why="renew"]{background:#FFF4E5;color:#7a4500}
.pill.mgwhy[data-why="uncov"]{background:#eef4fc;color:#1c5cab}
.pill.mgwhy[data-why="law"]{background:#EEEDFE;color:#4a3aa7}
.pill.mgwhy[data-why="hc"]{background:#eefbf3;color:#1d7a46}
.pill.mgwhy[data-why="lawmaybe"]{background:#f5f4fe;color:#6b5fc4}
.pill.mgwhy[data-why="quiet"]{background:#f1f0ec;color:#52514e}
.pill.mgwhy[data-why="repeat"]{background:#fdeef4;color:#9b2f5f}
@media (max-width:1100px){
  .mgg2{grid-template-columns:minmax(0,1fr)}
  .mgslot3{grid-template-columns:minmax(0,1fr)}
  .mgkp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
}
@media (max-width:900px){
  .mgtprof .h,.mgtprof .r{grid-template-columns:minmax(90px,1fr) 84px 52px 52px 80px}
  .mgttop .h,.mgttop .r{grid-template-columns:minmax(80px,1fr) minmax(120px,1fr) 96px}
  .mgtun .h,.mgtun .r{grid-template-columns:minmax(90px,1fr) 60px 60px 60px 96px}
  .mgtopp .h,.mgtopp .r{grid-template-columns:minmax(90px,1fr) minmax(140px,1.5fr)}
  .mgtbl .mgwide{display:none}
}
@media (max-width:640px){
  .mgkc .n{font-size:22px;white-space:normal;overflow-wrap:anywhere}
  .mgtbl .h,.mgtbl .r{gap:8px;padding:8px 4px;font-size:14px}
  .mgtprof .h,.mgtprof .r{grid-template-columns:minmax(64px,1fr) 64px 40px 64px}
  .mgtbl .mgmid{display:none}
  .mgttop .h,.mgttop .r{grid-template-columns:minmax(60px,1fr) minmax(90px,1fr) 72px}
  .mgtun .h,.mgtun .r{grid-template-columns:minmax(64px,1fr) 44px 44px 76px}
  .mgtopp .h,.mgtopp .r{grid-template-columns:minmax(64px,1fr) minmax(110px,1.4fr)}
  .mgbasis{flex-basis:100%;white-space:normal}
  .mgmsg{min-width:0}
}

/* =====================================================================
   ⑩ 일정 · 회의록 (2026-09-19 · 시안 docs/mock/일정-시안-확정.html)
   ---------------------------------------------------------------------
   사람 색은 **고정 순서**라 CSS 가 아니라 `schedule.js` 가 인라인으로 준다
   (같은 사람은 늘 같은 색 · 돌려 쓰지 않는다).
   ===================================================================== */
/* 옛 일정 달력 머리(#scChips · 월|주 · 사람 칩)는 2026-10-16 걷음 — 달력은 「할 일·일정」 달력 보기(아래 「할 일·일정 한 화면」 절) */

/* ---- 월 보기 — 일곱 칸 같은 너비(`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}
/* 칸 안 줄은 공용 `.cgi`(calgrid.js 4절 · 홈 「달력」 과 한 벌) — 여기는 칸 크기에 맞춘 값만 */
.scmo .cgi{padding:1px 5px}

/* ---- 주 보기 — 머리·종일·시간 격자 세 줄이 **같은 열 정의**(`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 .cgi{margin:2px 0}
.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 .ev.cand{background:#fff;outline:1px dashed #7aa7df;outline-offset:-1px}
.scwk .ev.cand.busy{outline-color:var(--l3)}
.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)}
/* 일정 창의 후보 줄(0108) — 시각 줄과 같은 꼴 + ✕ · 아래 「＋ 후보 날짜」 */
.scwhen.sccand{margin-top:6px}
.scwhen .sccx{border:0;background:none;color:var(--l3);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px}
.scwhen .sccx:hover{background:var(--f3);color:var(--l1)}
.sccandft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sccandft .hint{margin-top:0}
.scall{font-size:14px;color:var(--l2);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
/* 종류 · 보이는 범위 — 공용 「▾ 목록」 단추 하나씩(글자가 이름표 줄과 왼쪽을 맞추게 단추 안쪽 여백만큼 당긴다) + 범위 설명 한 줄 + "고객사 이름 표시"(0050) */
.scdlg .scdd,.scvis{margin-left:-7px}
.scvis{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.scvis .hint{font-size:14px;color:var(--l3)}
.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.sub{flex:0 0 100%;margin-left:7px}
.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 .pkl{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}

/* ---- 새 항목 창의 "미래 대면" 한 줄 ---- */
.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)}
#stSecCpAddr #stCpSlug{max-width:200px;flex:0 0 auto}

/* =====================================================================
   ⑪ 협업 — 의견 타래 · @멘션과 [확인] · 검토 요청 · 알림 벨
   (시안 `docs/mock/협업-시안-확정.html` · 0918 톤 그대로: 본문 15px · 회색 14px ·
    배경 대신 여백 · 주 단추 파랑 하나. 타래만 **옅은 회색 한 덩어리**다 — 발송본과 섞이지 않게.)
   ===================================================================== */
/* 화면 머리 오른쪽 묶음 — 벨과 단추가 같은 줄 끝에 모인다 */
#top .sp{flex:1}
.cbbell{position:relative;flex:0 0 auto}

/* 검토 중 — 상태 배지 옆 **주황 점 알약** 하나(자문 상태는 그대로 둔다) */
.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.rv{display:inline-flex;align-items:center;gap:7px}        /* 답변 머리 줄 「검토 요청 · 이름」 — 테두리 단추 + 주황 점(2026-10-08 단추 꼴 · 옛 주황 글자) */
.btn.rv::before{content:"";flex:none;width:7px;height:7px;border-radius:4px;background:var(--orange)}
/* 목록 줄의 "검토 요청" 이름 — 상태 낱말과 **같은 줄** 회색(2026-09-30 · 줄 높이 그대로 · 넘치면 상태 칸 말줄임) */
.cbrv{font-size:14px;color:var(--l3);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:10px;max-width:776px;padding-top:6px}   /* 대표 2026-10-03 밤 — 20 · 12 에서 줄임 */
.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 .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 .cbin-row{align-items:center}
.cbhd .cbin-row .av{flex:0 0 26px;width:26px;height:26px;border-radius:13px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;
  background:rgba(0,112,210,.12);color:var(--blue)}
.cbhd .cbat{top:52px;left:36px}
/* ---- 댓글 부품 한 꼴(세 자리 · Thing 열째판 .cmt) — 0건 = 접힌 한 줄 · 머리 14 보통 회색(결정 571 ④) · 줄 사이 선 없음 · 회색 상자 없음 ---- */
.cb0{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
.cb0:hover{color:var(--l1)}
.cb0 .cbic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cbhead{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:400;color:var(--l2);margin-bottom:6px}
.cbhead .n{font:inherit;color:inherit}
.cbnote{font-size:14px;color:var(--l3);padding:12px 0 4px}
/* 시스템 줄(검토 요청·취소·완료) — 회색 작은 글씨 한 줄. 고칠 수 없다. */
.cbsys{display:flex;gap:8px;font-size:14px;color:var(--l3);padding:6px 0 6px 36px}
.cbsys .ic{width:18px;text-align:center}
.cbsys b{font-weight:600;color:var(--l2)}
/* 댓글 한 줄 — 이니셜 26 · 이름 굵게 + 때 14 회색 · 본문 16 lh 1.6 */
.cbop{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:8px 0}
.cbop.hit,.cbgone.hit{background:rgba(0,136,255,.08);border-radius:8px}
.cbop .av,.cbgone .av{width:26px;height:26px;border-radius:13px;background:rgba(0,0,0,.07);color:var(--l1);
  font-size:14px;font-weight:600;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(--l2);font-size:14px;margin-left:6px}
.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:16px;line-height:1.6;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:26px 1fr;gap:10px;align-items:center;padding:8px 0;
  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:6px}
.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)}
/* 남기기 칸 — 테두리 칸 하나(radius 10 · 1px · 높이 44) 안에 글 칸 + 흰 알약 「남기기」(32 · Thing 열째판 .cin .b-out) */
.cbin-box{flex:1;min-width:0;display:flex;align-items:flex-end;gap:10px;min-height:44px;padding:6px 6px 6px 14px;
  border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cbin-box:focus-within{box-shadow:inset 0 0 0 1px rgba(0,136,255,.45),0 0 0 3px rgba(0,136,255,.12)}
.cbin-box .cbin{min-height:32px;padding:4px 0;border:0;border-radius:0;background:none;font-size:16px}
.cbin-box .cbin:focus{box-shadow:none}
.cbpill{flex:none;height:32px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  font:inherit;font-size:14px;font-weight:500;color:var(--l1);white-space:nowrap;cursor:pointer}
.cbpill:hover{background:var(--f4)}
.cbpill:disabled{opacity:.4;cursor:default;background:#fff}
.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 .pkl{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 .pkl{max-height:180px}
@media (max-width:900px){ .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:28px;padding:0 12px;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}
/* 「새 표준 문구」 창(`.libblk` · 대표 2026-10-08 「화면 크기가 저렇게 작아야 하나?」) — 본문이 답변 전문이라 넓은 겹창:
   폭 800 · 본문 칸은 화면 높이의 6할까지(창이 화면을 넘지 않게 나머지 칸 몫을 뺀다) · 「크게 ⤢」 를 켜면 다른 폼처럼 안쪽 폭 860 가운데 · 본문 칸은 남는 높이 전부
   (공용 규칙 — 「모달」 절 · 대표 「크게」 글 칸 규칙 = 가로 860 · 세로 남는 높이 · 2026-10-08 밤) · 휴대폰은 전체 화면.
   제안에서 채워 열 때 · 라이브러리에서 그냥 열 때 같은 창이다 */
#modal>.box:has(> .libblk){width:800px;max-width:94vw;max-height:94vh;overflow:auto}
.libblk .libf.ta textarea{height:min(60vh,calc(100vh - 444px));min-height:160px}      /* 「주제」 줄 한 줄 몫(44)을 더 뺀다 */
@media (max-width:600px){
  #modal>.box:has(> .libblk){width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0}
  .libblk .libf{grid-template-columns:minmax(0,1fr);gap:4px}
  .libblk .libf.ta textarea{height:calc(100vh - 536px);height:calc(100dvh - 536px)}
}
.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[hidden]{display:none}                     /* AI 제목 제안 줄 — 제안이 없으면 자리도 없다 */
#libFormTitleAi{margin-top:-2px}
#libFormTopics>.ai-btn{flex:0 0 auto}
#libFormTopics>.ai-note{flex:0 0 100%}
.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 .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}
/* 「법 개정」 탭(library.js 9절) — 같은 줄 꼴 · 날짜 · 상태 칸만 넓힘 */
.liblaw .libact .ld{flex:0 0 92px;text-align:left}
.liblaw .libact .co{flex:0 0 176px}
.liblaw .libact .nm{flex:0 0 96px}
.liblawh{padding:4px 10px 8px}
@media (max-width:640px){ .liblaw .libact{flex-wrap:wrap;row-gap:2px} .liblaw .libact .tx{flex:1 0 100%;order:-1} }
@media (max-width:820px){ .libact{flex-wrap:wrap} .libact .tx{flex-basis:100%} }
/* ---- 뉴스레터 재료(library.js 10절) — 세 묶음 · 줄 = 날짜/건수 · 이름 · 곁 글 · 링크 ---- */
.libnwym{font-size:15px;font-weight:600;margin:0 6px}
.libnews{max-width:900px}
.libnwh{margin:6px 10px 0;font-size:18px}
.libnws{margin-top:20px}
.libnwt{font-size:15px;font-weight:700;color:var(--l1);padding:0 10px 6px;border-bottom:1px solid var(--line)}
.libnwr{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,auto) auto;gap:12px;align-items:center;
  padding:8px 10px;border-bottom:1px solid var(--line);font-size:15px;color:var(--l1)}
.libnwr .date{color:var(--l2);font-size:14px}
.libnwr .sub{color:var(--l3);font-size:14px}
.libnwr .sub .link{font-size:14px}
@media (max-width:640px){ .libnwr{grid-template-columns:56px 1fr} .libnwr .sub{grid-column:2} }
@media print{
  body.libprint #side,body.libprint #top,body.libprint #libChips,body.libprint .toast{display:none !important}
  body.libprint #main{padding:0;overflow:visible}
  body.libprint .libnwr .link{color:var(--l1);text-decoration:none}
}
/* ---- 회색 한 줄·빈 화면 ---- */
.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 머리 + 계약 부품 contract.js · 0077 `contracts`) — 시안 `재무-시안-확정` 장면 6 · 6-나 · 6-다 · 7-마
   ===================================================================== */
/* 계약 부품 — 목록 줄(어디서나 세 칸: 이름 · 금액 · 기간 · 대표 2026-10-06) · 계약 겹창 · 새 계약 창 */
.gynone{display:flex;align-items:center;gap:14px;padding:8px 2px;font-size:14px}
.gyrow,.gyhd{display:grid;grid-template-columns:10px minmax(0,1fr) 170px 200px;gap:12px;align-items:center}
.gyhd{padding:4px 8px;font-size:13.5px;color:var(--l3);font-weight:600;border-bottom:1px solid var(--line)}
.gyhd:has(+ .gybox > .gynone){display:none}
.gyrow{
  padding:10px 8px;border-radius:8px;font-size:15px;cursor:pointer}
.gyrow:hover{background:var(--hover)}
.gyrow.open{background:rgba(0,136,255,.04)}
.gyrow.off{color:var(--l3)}
.gyrow .dot{width:8px;height:8px;border-radius:4px;background:var(--dot)}
.gyrow .dot.d-todo{background:var(--blue)}
.gyrow .dot.d-late{background:var(--red)}
.gyrow .per{font-size:14px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gyrow .amt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gyrow .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gyrow .nm .cosub{font-weight:400;font-size:13.5px;color:var(--l3);margin-left:8px}
.gyrow.off .nm{font-weight:500}
/* 상태 글자 — 계약 겹창 머리(`#gySheetSt` · 목록 줄은 점 색만) */
.gyst{font-size:14px;color:var(--l2);white-space:nowrap;margin-left:8px}
.gyst.g{color:var(--green)}
.gyst.o{color:var(--orange);font-weight:600}
.gyst.r{color:var(--red)}
.gyst.off{color:var(--l3)}
.gyed{margin:0 8px 12px 74px;padding:8px 0}
.gyed .libf{grid-template-columns:96px 1fr;margin:6px 0}
.gyed .libf input[type=date]{flex:0 0 auto;width:150px;min-width:0}
.gyed .libf input.num{flex:0 0 130px;text-align:right}
.gyed .libf input.gyday{flex:0 0 64px}
.gyed .libf .chip{height:28px}
.gyed .libf .chip[disabled]{opacity:.55}
.gyed .gyamt{font-weight:600}
.gyed .acts1{display:flex;align-items:center;gap:8px;padding-top:8px}
.gyed .acts1 .sp{flex:1}
.gyed .acts1 .del{height:28px;padding:0 10px;border:0;background:none;color:var(--red);font-size:13.5px}
.gyed.ro .gyro{font-size:14px;padding-top:6px}
.gyed .gypj{cursor:pointer}
.gypk{margin:2px 0 8px 106px;max-width:420px}
.gywarn{font-size:14px;color:var(--orange);margin:4px 0 6px 106px}
.gywarn .link{font-size:14px;color:var(--blue);border:0;background:none;padding:0}
.gyparts{margin:6px 0 6px 106px;max-width:560px}
.gyparts .gph,.gyparts .gpr{display:grid;grid-template-columns:1fr 130px 160px 22px;gap:8px;align-items:center}
.gyparts .gph{font-size:14px;color:var(--l2);font-weight:600;padding:2px 0}
.gyparts .gpr{margin:4px 0}
.gyparts .gpr input{min-height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:14.5px;min-width:0}
.gyparts .gpr input.num{text-align:right}
.gyparts .gpx,.gyparts .gpadd{border:0;background:none;color:var(--l3);font-size:14px;padding:0}
.gyparts .gpadd{color:var(--blue);margin-top:4px}
.gyparts .gphint{font-size:14px;color:var(--l3);margin-top:4px}
.gychg{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0 8px 106px;max-width:460px;background:#fff}
.gychg h4{margin:0 0 6px;font-size:15px}
.gychg .hint{font-size:14px;color:var(--l3)}
.gychg .gywarn{margin-left:0}
.gychg .acts1{justify-content:flex-end}
/* 새 계약 창은 넓게(시안 장면 6 · 760px) — 창 상자 class 를 바꾸지 않고 안의 표시로 고른다(닫아도 남는 상태가 없다) */
.modal .box:has(> .gynew){width:760px;max-height:88vh;overflow:auto}
.gynew .msub{font-size:14px;color:var(--l3);margin:-4px 0 10px}
.gytype{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.gytype button{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;color:var(--l2)}
.gytype button b{font-size:15px;color:var(--l1)}
.gytype button.on{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,112,210,.15)}
.gynew .gyed{margin:0;padding:0}
.gynew .gypk,.gynew .gywarn,.gynew .gyparts{margin-left:106px}
/* 계약 칸 묶음 넷(대표 2026-10-02 밤) — 묶음 사이 얇은 선 + 짧은 머리 글자 · 청구일 곁 글자 · 받는 때는 청구일 줄 곁에 작게 */
.gygrp{padding:2px 0}
.gygrp + .gygrp{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
.gygh{font-size:13.5px;font-weight:700;color:var(--l3);margin:2px 0 0}
.gyed .gybill{display:inline-flex;align-items:center;gap:4px;margin-left:12px}
.gyed .gybill .chip{height:24px;font-size:13.5px;padding:0 9px}
/* 사업자번호 — 세부 정보 겹창 › 기본 정보 첫 칸(2026-10-06) · 비면 머리에 회색 「사업자번호 없음」 · 틀리면 격자 아래 빨간 한 줄 */

.coerr{font-size:14px;color:var(--red)}
.corow .cobizin{display:flex;flex-direction:column;gap:2px}
.corow .cobizin input{width:150px;min-height:30px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:14px}
@media (max-width:820px){
  .gyrow,.gyhd{grid-template-columns:10px minmax(0,1fr) auto}
  .gyrow{row-gap:4px}
  .gyrow .per{grid-column:2 / -1;font-size:13px}
  .gyhd span:nth-child(4){display:none}
  .gyed{margin-left:8px;padding-left:16px}
  .gypk,.gywarn,.gyparts,.gychg{margin-left:0}
  .gytype{grid-template-columns:1fr}
}
.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}
}
/* 옛 「할 일·일정」 좌우 배치(#main.plan · 10-03)는 걷었다 — 한 화면 두 보기(tasks.js · 아래 「할 일·일정 한 화면」 절) */
/* 달력의 마감 ☐ · 연간 노무 캘린더 줄 모양은 공용 `.cgi`(calgrid.js 4절) */
.tkrow.auto.lc{cursor:default}
.tkrow.lc .tt{white-space:nowrap}
.stlct .bf-th,.stlct .bf-tr{grid-template-columns:190px minmax(180px,1fr) 110px 150px 60px}
.stlct .bf-in{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.stlct span>.bf-in{width:100%}
.stlct .stlcd{display:flex;align-items:center;gap:6px}
.stlct .stlcd select.bf-in{width:78px}
.stlct .stlcd input.bf-in{width:64px}
.stlct .stlce{display:flex;align-items:center;gap:6px}
@media (max-width:760px){
  .stlct .bf-th{display:none}
  .stlct .bf-tr{grid-template-columns:1fr;row-gap:6px}
}

/* =====================================================================
   ⑭ 참고 서랍 (drawer.js) — 확정 시안 `docs/mock/참고서랍-시안-확정.html`
   ---------------------------------------------------------------------
   배치 ⓒ — 두 기둥 틀(`.csd .cols`) 안에서 **왼쪽 질의 기둥 위에 같은 폭·같은 높이**로
   겹친다(그림자). 답변 기둥은 손대지 않는다. 기둥 사이 여백이 40px 이므로
   폭은 `calc(50% - 20px)` 이고, 틀의 아래 여백 12px 만큼 바닥을 띄운다.
   ===================================================================== */
/* ★ 2026-10-02 한 건 화면 · 스크롤 하나 — 기둥 높이가 사라져 **화면 높이에 맞춘 붙는 판**이 됐다:
   질의 기둥과 같은 칸(1행 1열)에 겹쳐 서고 `position:sticky` 로 머리 줄 바로 아래에 붙는다.
   높이 = 스크롤 영역 높이 − 머리 줄 높이(`--csmh`·`--csbh` 는 `case.js csFollow` 가 적는다). 서랍이 열려 있으면
   두 기둥 틀이 적어도 그 높이는 된다(짧은 글에서 판이 틀 밖으로 넘치지 않게).
   ★ 2026-10-07 「참고」 서랍(확정 시안 `docs/mock/답변재료-시안`) — 겹침은 질의 기둥 폭 + 24(좌우 12 씩 넘친다). */
.csd .drw{position:sticky;grid-row:1;grid-column:1;align-self:start;top:calc(var(--csbh,0px) - 26px + 8px);
  height:calc(var(--csmh,100vh) - var(--csbh,0px) - 64px);min-width:0;z-index:30;margin:0 -12px;
  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}
/* 판 높이 = 영역 − 머리 줄 − 64(머리 줄 아래 8 + #main 아래 여백 40 + 틀 아래 12 + 4) — 맨 아래까지 내려도 머리 줄을 덮지 않는다 */
.csd .cols:has(> .drw){min-height:calc(var(--csmh,100vh) - var(--csbh,0px) - 40px)}
.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)}
/* 보기 둘(겹침 · 3단) — 화면 폭 1280 부터 선다(`drWide`) */
.csd .drw .drmd{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-right:4px}
.csd .drw .drmd button{border:0;background:#fff;width:32px;height:26px;padding:0;display:grid;place-items:center;color:var(--l3)}
.csd .drw .drmd button.on{background:var(--f3);color:var(--l1)}
.csd .drw .drmd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.csd .drw .drmd svg .drf{fill:currentColor;stroke:none}
.csd .drw .drk{display:flex;flex-wrap:wrap;gap:6px;padding:4px 6px 6px}
.csd .drw .drkb{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:13px;
  background:#fff;font-size:13px;color:var(--l1);white-space:nowrap}
.csd .drw .drkb.on{border-color:rgba(0,136,255,.45);color:#0067c2;background:rgba(0,136,255,.06);font-weight:600}
/* 찾기 한 줄 — 칸 + ✕(글이 있을 때) + [묻기] */
.csd .drw .drqa{display:flex;align-items:center;gap:6px;margin:10px 12px 8px}
.csd .drw .drqw{position:relative;flex:1;min-width:0;display:flex}
.csd .drw .drq{width:100%;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:6px 30px 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 .drqx{position:absolute;right:3px;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--l3);font-size:13px;padding:4px 7px}
.csd .drw .drask{height:30px;padding:0 12px;font-size:13.5px;flex:0 0 auto}
.csd .drw .drab:empty{display:none}
.csd .drw .drab{max-height:45%;overflow:auto;border-top:1px solid var(--line);padding:0 0 6px;flex:0 0 auto}
.csd .drw .drab .askr{padding:8px 16px}
/* 서랍 **안에서만** 스크롤한다 — 뒤 화면은 움직이지 않는다 */
.csd .drw .drl{padding:0;overflow:auto;overscroll-behavior:contain;flex:1;min-height:0}
/* 묶음 — 머리 줄(▸ 이름 숫자)을 누르면 펴지고 접힌다 · 맨 위 「띄워 둔 것」은 옅은 회색 바탕 */
.csd .drw .drsec{border-top:1px solid var(--line)}
.csd .drw .drsec:last-child{border-bottom:1px solid var(--line)}
.csd .drw .drsec.drpinsec{background:var(--f4)}
.csd .drw .drpico{filter:grayscale(1);opacity:.6;font-size:13px}
.csd .drw .drsh{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  padding:11px 16px;font-size:14px;text-align:left;color:var(--l1)}
.csd .drw .drsh:hover{background:var(--hover)}
.csd .drw .drcar{flex:0 0 12px;color:var(--l3);font-size:13px}
.csd .drw .drsh b{font-weight:600}
.csd .drw .drsh .drn{color:var(--l3)}
.csd .drw .drsb{padding:0 10px 10px}
.csd .drw .drfind{padding:0 10px 12px;border-top:1px solid var(--line)}
.csd .drw .drfh{display:flex;gap:8px;padding:10px 6px 4px;font-size:13px;color:var(--l3)}
.csd .drw .drfh .sp{flex:1}
.csd .drw .drgl{font-size:13px;color:var(--l3);padding:10px 6px 2px}
.csd .drw .drscope{display:flex;align-items:center;gap:8px;padding:2px 6px 4px;font-size:13px;color:var(--l3)}
.csd .drw .drscope span{flex:1;min-width:0}
.csd .drw .drwho{font-size:14px;color:var(--l2);padding:2px 6px 8px}
.csd .drw .drwho b{color:var(--l1);font-weight:600}
.csd .drw .drlinks{padding:8px 6px 2px;font-size:14px}
.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 + .drrow{border-top:1px solid var(--line);border-radius:0}
.csd .drw .drrow .tt{min-width:0}
.csd .drw .drrow .tt b{font-weight:600}
.csd .drw .drrow .tt small{display:block;color:var(--l3);font-size:14px}
.csd .drw .drrow .tt small.drone{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd .drw .drrow .drhd{display:block;cursor:pointer;border-radius:6px}
.csd .drw .drrow .drhd:hover b{text-decoration:underline}
.csd .drw .drrow .drhd:focus-visible{outline:2px solid rgba(0,112,210,.76);outline-offset:2px}
.csd .drw .drrow .acts{display:flex;align-items:center;gap:6px;white-space:nowrap}
/* 펼친 글(지난 답변 본문 · 조항 글) — 옅은 바탕 칸 · 아래에 단추 줄 */
.csd .drw .drpv{margin-top:6px;padding:10px 12px;border-radius:8px;background:var(--f4)}
.csd .drw .drpv .drtx{white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.7;color:var(--l1)}
.csd .drw .drpa{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.csd .drw .mark{background:#fff3c4}
.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;border-radius:6px;color:var(--l3);font-size:14px;padding:2px 4px;
  filter:grayscale(1);opacity:.5}
.csd .drw .drpin:hover{opacity:.9}
.csd .drw .drpin.on{background:rgba(0,136,255,.12);filter:none;opacity:1}
.csd .drw .drdone{font-size:13px;color:#146b4c}
.csd .drw .drtag{font-size:13px;color:#146b4c;background:rgba(47,158,106,.12);border-radius:10px;
  padding:1px 8px;margin-left:6px;white-space:nowrap}
.csd .drw .drtag.o{color:#8a4b00;background:rgba(240,140,0,.12)}
.csd .drw .drty{font-size:13px;color:var(--l2);background:var(--f3);border-radius:5px;padding:0 6px;margin-right:6px;white-space:nowrap}
.csd .drw .drfrom{font-size:13px;color:var(--l2);border:1px solid var(--line);border-radius:5px;padding:0 6px;white-space:nowrap}
.csd .drw .drlaw{display:inline-block;margin:2px 0 0;font-size:13px}
.csd .drw .drmore{border:0;background:none;color:var(--blue);font-size:14px;padding:6px 6px;text-decoration:underline}
.csd .drw .drnone{font-size:14px;color:var(--l3);padding:8px 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}
/* 고객사 규정 — 문서 한 줄(누르면 조항이 펴진다) */
.csd .drw .drdoc{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;
  padding:8px 6px;font-size:14px;color:var(--l1);border-radius:8px}
.csd .drw .drdoc:hover{background:var(--hover)}
.csd .drw .drdoc b{font-weight:600}
.csd .drw .drdoc small{color:var(--l3);font-size:13px}
.csd .drw .drdoc.dropen ~ .drrow.drart{margin-left:14px}
/* 고객사 정보 — 이름 | 값 두 칸(빈 값은 흐린 「없음」) */
.csd .drw .drkv{display:grid;grid-template-columns:84px minmax(0,1fr);gap:6px 8px;padding:4px 6px 6px;font-size:14px;line-height:1.6}
.csd .drw .drkv .drkk{color:var(--l3)}
.csd .drw .drkv .drkvv{min-width:0;word-break:break-word}
.csd .drw .drkv .drkvv.drkno{color:var(--l3)}
/* AI 가 뽑은 것 — 인디고 점선 칸 + 「AI」 알약(다룰 것의 물음) */
/* 「다룰 것」 묶음 = `.ai-box`(머리 「(AI) 이 질의에서 뽑은 물음 N」 · 2026-10-08 보라 점선을 걷음) · [(AI) 요약] = `.ai-btn.ln.sm1` */
.csd .drw .drai{padding:8px 8px 4px;margin:2px 0 4px}
.csd .drw .draih{display:flex;align-items:center;gap:7px;padding:0 4px 4px;font-size:13.5px;color:var(--l1)}
.csd .drw .draih b{font-weight:600}
.csd .drw .draimk{margin-left:4px;vertical-align:middle}
.csd .drw .drask.ai-btn{flex:0 0 auto}
.csd .drw .drrow.drtodo{grid-template-columns:1fr auto}
.csd .drw .drck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-width:0}
.csd .drw .drck input{flex:0 0 auto;width:16px;height:16px;margin:4px 0 0}
.csd .drw .drck .drtq{font-weight:600;min-width:0;word-break:break-word}
.csd .drw .drck .drtq.drtdone{font-weight:400;color:var(--l3);text-decoration:line-through}
/* 걸음 2(2026-10-08) — AI 가 고른 줄(비슷한 답변 · 닿는 조항): 머리 오른쪽 [다시 추천] · 까닭 꼬리표(연한 보라 알약) · 줄 끝 ✕ ·
   「다룰 것」 물음 아래 「확인할 사실」 · 「관련」(체크 칸 폭만큼 들여 쓴다) */
.csd .drw .draih .sp{flex:1}
.csd .drw .drai .drrow{color:var(--l1)}      /* 칸 바탕(.ai-box)의 회색 글자를 물려받지 않게 — 줄 제목은 아래 목록과 같은 색 */
.csd .drw .drai .drnone{padding:4px 4px 6px}
.csd .drw .drai .ai-bar{margin:0 4px 6px}
.csd .drw .drnone.ai-note{padding:6px 6px 8px}
.csd .drw .drnone.ai-note .ai-link{margin-left:auto}
.csd .drw .drwhy{display:inline-block;margin-left:6px;padding:0 7px;border-radius:9px;background:var(--ai-chip);
  color:var(--ai-ink);font-size:13px;font-weight:400;line-height:1.5;vertical-align:1px}
.csd .drw .drxx{border:0;background:none;border-radius:6px;color:var(--l3);font-size:13px;padding:2px 5px;cursor:pointer}
.csd .drw .drxx:hover{background:var(--hover);color:var(--l1)}
.csd .drw .drrow .tt small.drfact,.csd .drw .drrow .tt small.drrel{padding-left:26px;font-size:13.5px}
.csd .drw .drrel .link{font-size:13.5px}
/* 3단 — 질의 | 답변 | 참고. 서랍은 화면 오른쪽 끝에 위에서 아래까지 붙고(`.drwside`), 본문(#main)은 서랍 폭(`--drww` ·
   drawer.js `drLayout` 이 #app 에 적는다 · 320~480)만큼 좁아진다. 왼쪽 가장자리 손잡이(`.drgrip`)를 끌어 폭을 바꾼다. */
.csd .drw.drwside{position:fixed;top:0;right:0;bottom:0;left:auto;width:var(--drww,348px);height:auto;margin:0;
  align-self:auto;   /* 겹침의 `align-self:start` 가 남으면 fixed 판이 위·아래에 붙지 않고 내용 높이만큼만 선다 */
  border:0;border-left:1px solid rgba(0,0,0,.14);border-radius:0;box-shadow:none;z-index:40}
.csd .cols:has(> .drw.drwside){min-height:0}
body.csdet #app.drside #main{margin-right:var(--drww,348px)}
/* 3단에서는 질의가 좁고 답변이 넓다 — 5 : 6(대표 2026-10-07 · 확정 시안 장면 ①-나 · 서랍 폭을 끌어도 비율 그대로 · 겹침은 1 : 1).
   두 기둥 위 머리 줄(.csband)도 같은 비율이어야 머리와 기둥이 맞는다. */
body.csdet #app.drside .csd .cols,body.csdet #app.drside .csd .csband{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.csd .drw .drgrip{position:absolute;left:0;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2;touch-action:none}
.csd .drw .drgrip::after{content:"";position:absolute;left:1px;top:50%;width:3px;height:48px;margin-top:-24px;
  border-radius:2px;background:var(--blue);opacity:.45}
.csd .drw .drgrip:hover::after,body.drdrag .drgrip::after{opacity:1}
body.drdrag{cursor:col-resize;user-select:none;-webkit-user-select:none}
/* 좁은 화면 — 두 기둥이 위아래로 쌓이는 폭에서는 서랍이 **화면을 덮고** 줄이 두 줄로 쌓인다 */
@media (max-width:900px){
  .csd .drw,.csd .drw.drwside{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;height:auto;margin:0;align-self:auto;
    border:0;border-radius:0;z-index:60}
  .csd .cols:has(> .drw){min-height:0}
  .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>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 좁은 폭(390)에서 「제/목」 세로 꺾임 막기(2026-10-04) */
.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 점검 ·
   날짜 → 유형 순, 제목·고객사는 끝까지 남는다) */
@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}
/* 2026-09-30 — 「이도현 → 김도현 외 1」 처럼 보통 길이의 이름 둘이 **잘리지 않게** 넓은 화면(1200px~)의 수신함 보낸 사람 칸만 넓힌다(108 → 156).
   하위 줄의 들여쓰기도 칸 안에서 22 → 14 로 줄인다. 제목 칸은 그만큼(48px)만 준다. 760 이하 레이아웃은 그대로 */
@media (min-width:1200px){       /* 1150 에서도 제목 칸 200px 이상(w1 시험)이라 넓은 화면에서만 */
  #list .ihead .from,#list .row .from{flex:0 0 156px}
  #list .row.reply .from{padding-left:14px}
}
/* 휴대폰 폭(≤600 · 2026-10-04 Lead-v6) — 수신함 줄을 **두 줄**로. 고정 폭 칸이 한 줄에 다 서면
   늘어나는 제목 칸이 0 이 되어 안 보였다(390 에서 줄 폭 302 · 고정 칸 합이 넘침). 칸·순서·동작은 그대로, 자리만:
   위 = ☐ · 채널 · 보낸 사람 · 고객사 · ⋯ / 아래 = 제목 */
@media (max-width:600px){
  #list .row,#list .ihead{display:grid;grid-template-columns:18px 20px minmax(0,1fr) auto 28px;column-gap:8px;row-gap:2px}
  #list .row .sel,#list .ihead .sel{grid-area:1/1}
  #list .row .ch,#list .ihead .ch{grid-area:1/2}
  #list .row .from,#list .ihead .from{grid-area:1/3;min-width:0}
  #list .row .co,#list .ihead .co{grid-area:1/4;justify-self:end;max-width:128px}   /* 머리와 줄은 따로 짠 틀이라 오른쪽 끝으로 맞춘다 */
  #list .row .more,#list .ihead .more{grid-area:1/5}
  #list .row .subj{grid-area:2/3/3/6}            /* 줄 끝 단추는 ⋯ 메뉴에도 있어 이 폭에서는 걷고 제목이 줄 폭을 다 쓴다(대표 2026-10-04) */
  #list .row .act{display:none}
  #list .ihead .subj,#list .ihead .act{display:none}
}
/* 고객사·유형 칸 = 고르기 단추(테두리 없는 작은 글자) · 비었으면 회색 「고객사 ▾」「유형 ▾」 */
.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 .cell.lk,.det .dtop .cell.lk{cursor:default}.row .co .cell.lk:hover{color:inherit}   /* 자문이 붙은 줄 — 고객사 잠김(올리면 까닭) */
.row .co .blank{color:var(--l3)}
.row .kd.undec{color:var(--l3)}
/* 그 칸 **바로 아래** 고르기 창(검색칸 + 목록 + 만들기 줄 — 공용 `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{padding:8px}
.cellpk .pk .pkl{max-height:260px}
.cellpk .hint{margin:0;padding:6px 12px;font-size:14px;color:var(--l2)}
.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)}
.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}
.toast .undo[disabled]{opacity:.45;cursor:default}      /* 뒤처리가 끝날 때까지 흐림(수신함 [법인 공유] · app.js makeCase) */
/* 고객사 ▾ 창 맨 위 「고객사 없음」(옛 [미분류] 칩) */

/* 2026-09-29 화면 묶음 A1 */
/* ① 여러 줄 막대는 목록을 밀지 않고 **탭 줄(#chips) 자리에 겹쳐** 선다(Gmail 식 · 높이 변화 0).
     2026-10-07 — 자리는 격자 한 칸(index.html `.bulkhost` · 자문 목록과 같은 꼴 · 꼴은 `.bulkbar` 한 벌) */
#vInbox{position:relative}
/* ② 머리 전체 체크칸 · ③ 체크칸 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 .selall{display:block;margin:0;cursor:pointer}      /* 머리 전체 체크칸 — 줄의 체크칸과 같은 크기 · 같은 자리 */
.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}
/* 질의 줄의 채널 아이콘 — 수신함 줄 `.row .ch` 와 같은 크기·흐림(2026-10-02 · `csChanHtml`) */
div.csq .qch,.csd .chain .cq .qch{flex:0 0 18px;width:18px;text-align:center;font-size:15px;opacity:.75}
div.csq .qch{margin-right:4px}
/* 「☎ 내용 미기재」 — 점선 알약(상태가 아니다). 알약·「질의 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}
/* 공유 전 자문(0110) — 표시는 [법인 공유] 단추 하나(꼬리표 없음 · 대표 2026-10-08). 목록 줄: 제목 칸 오른쪽 끝 작은 단추
   (수신함 줄 단추와 같은 크기 — 줄 높이를 키우지 않는다 · 제목 칸 안이라 다른 열이 밀리지 않는다) · 한 건 머리: 상태 배지 옆.
   ⋯ 메뉴의 안내 한 줄은 꺾이지 않게(`.nw`) */
.menu .mi.mihint.nw{white-space:nowrap}
.csrow .nm .cssh{flex:0 0 auto;margin-left:auto;height:24px;padding:0 10px;font-size:13px}
.csrow .nm .n + .cssh{margin-left:8px}
.csd .titleline .cssh{flex:0 0 auto}
.cshead .stt,.csrow .stt,div.csq .stt{flex:0 0 132px;min-width:0;display:block;position:relative;
  font-size:14px;white-space:nowrap;overflow:hidden}
.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}
/* 유형 칸(2026-09-30 소통 한 틀) — 질의는 진한 글자 · 그 밖은 회색 · 고객사 화면 안에서는 고객사 칸을 숨긴다(`.noco`) */
.cshead .knd,.csrow .knd,div.csq .knd{flex:0 0 84px;font-size:14px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csrow .knd.q,div.csq .knd.q{color:var(--l1)}
.cshead .knd{color:var(--l3)}
.noco .cshead .co,.noco .csrow .co,.noco div.csq .co{display:none}
.pjt{font-size:13px;color:var(--l3);border:1px solid var(--line);border-radius:5px;padding:0 5px;font-weight:400;margin-left:6px;white-space:nowrap}
.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}
.csrow .due .soon,div.csq .due .soon{color:var(--orange);font-weight:600;white-space:nowrap}   /* 기한이 오늘 · 내일(답하기 전) — 글자 색만(칩 없음 · 2026-10-07) */
/* 하위 질의 줄 「떼기」(2026-10-02) — 줄에 올리면 진해지는 작은 글자 단추(평소엔 흐림) */
div.csq .cnt .csunb{font-size:13px;color:var(--l3);opacity:.55;white-space:nowrap}
div.csq:hover .cnt .csunb,div.csq .cnt .csunb:focus{opacity:1;color:var(--blue)}
/* 좁은 폭 — 받은 날 → 연락처 → 💬 순으로 한 열씩 숨기고, 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} }
@media (max-width:1220px){ .onekind .cshead .knd,.onekind .csrow .knd,.onekind div.csq .knd{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}
/* (2026-10-08 거르기 줄 — 거르기 · 고르는 단추가 왼쪽으로 와 `.csflt` 의 오른쪽 몰기는 걷었다 · 빈자리는 뒤의 `.sp` 가 먹는다) */
@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}
.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}
/* 「메일 보내기」 부품(app.js `mb*`) — 줄인 꼴(2026-10-07 대표 「누른 대상이 제일 잘 보이게」 · 시안 docs/mock/메일부품-압축-시안).
   세 곳(새 메일 창 · 자문 발송 서랍 · 줄 답장)이 같이 쓴다(화면 이름에 기대지 않는다). 줄 사이는 가는 선 하나 · 칸 테두리 없음:
   받는 사람 줄(작은 이름표 · 칩 · 「＋ 담당자」 점선 칩 · 글 칸 · 끝 「참조 ＋」) → 참조 줄(넣었을 때) → 제목(자리 글자) →
   본문(남는 높이 전부) → 붙인 파일 칩 → 아래 줄(왼쪽 서식 단추 · 담당자로 저장 / 오른쪽 끝 보내는 주소 · [보내기] · 좁으면 두 줄) */
.mbx{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;background:#fff}
.mbx.card{border:1px solid var(--line);border-radius:12px}
.mbx .mbln{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:42px;padding:6px 16px;border-top:1px solid var(--line);cursor:text}
.mbx.card>.mbln:first-child{border-top:0}
.mbx .mbln[hidden],.mbx .mbln .mbmore[hidden],.mbx .mbsugw .menu[hidden]{display:none}
/* 이름표 칸은 같은 폭(긴 쪽 「받는 사람」 기준) — 받는 사람 줄과 참조 줄의 칩이 같은 세로선에서 시작한다(대표 2026-10-07) */
.mbx .mbln .k{flex:0 0 auto;min-width:4.5em;font-size:13.5px;color:var(--l3);margin-right:4px;white-space:nowrap}
/* 칩 칸 · 담당자 칸은 상자 없이 그 줄의 낱개로 선다 — 차례: 이름표 · 칩 · 「＋ 담당자」 · 글 칸 · 「참조 ＋」 */
.mbx .mbrc,.mbx .mbsug{display:contents}
.mbx .mbln:has(.mbrc.bad){box-shadow:inset 0 -2px 0 var(--red)}
.mbx .mbchip{display:inline-flex;align-items:center;height:26px;padding:0 2px 0 10px;border-radius:13px;background:var(--f3);
  font-size:14px;color:var(--l1);white-space:nowrap;max-width:100%;overflow:hidden}
.mbx .mbchip .x{border:0;background:none;color:var(--l3);cursor:pointer;padding:0 6px;font-size:13px;line-height:26px}
.mbx .mbchip .x:hover{color:var(--l1)}
.mbx .mbsug>*{order:1}
.mbx .mbsugw{position:relative;display:inline-flex}
.mbx .mbsugw .menu{top:30px;left:0;right:auto;min-width:160px;max-height:240px;overflow:auto}
.mbx .mbadd{height:26px;padding:0 10px;border:1px dashed var(--l3);border-radius:13px;background:none;font:inherit;font-size:13.5px;
  color:var(--l2);white-space:nowrap;cursor:pointer}
.mbx .mbadd:hover{color:var(--blue);border-color:var(--blue)}
.mbx .mbln input.mbin{order:2;flex:1 1 90px;width:auto;min-width:90px;height:26px;padding:0 2px;border:0;border-radius:0;outline:0;background:none}
.mbx .mbln .mbmore{order:3;margin-left:auto;height:26px;padding:0 4px;border:0;background:none;font:inherit;font-size:13.5px;color:var(--l2);
  white-space:nowrap;cursor:pointer}
.mbx .mbln .mbmore:hover{color:var(--blue)}
.mbx .mbln input.mbsj{flex:1 1 auto;width:auto;min-width:0;height:30px;padding:0;border:0;border-radius:0;outline:0;background:none;
  font-size:16px;font-weight:600}
.mbx .mbln input.mbsj::placeholder{font-weight:400;color:var(--l3)}
.mbx .mbln .rrnnote{flex:0 0 100%}
.mbx .mbsubs{padding:0 16px}
.mbx .mbsubs:not(:empty){padding-bottom:8px}
.mbx .mbsubs .sub{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:14px;color:var(--l2)}
.mbx .mbsubs .sub.gray{color:var(--l3)}
.mbx .mbsubs .sub.err{color:var(--red)}
.mbx .mbsubs .note{margin:2px 0 0}
.mbx input[type=checkbox]{flex:0 0 auto;width:auto;height:auto;min-width:0;margin:0;padding:0}
.mbx .rted{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;overflow:auto}
.mbx .rted .rtbody{flex:1 0 auto;min-height:180px;padding:12px 16px 12px}
.mbx .rted .rtbody.rt-empty::before{left:16px;top:12px}
.mbx .mbfiles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 10px}
.mbx .mbfiles .fl{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:0 8px;border:1px solid var(--line);
  border-radius:8px;font-size:14px}
.mbx .mbfiles .fl .n{min-width:0;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbx .mbfiles .z,.mbx .mbfiles .tot{color:var(--l3);font-size:13px;white-space:nowrap}
.mbx .mbfiles .ft{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.mbx .mbfiles .tot.over{color:var(--orange);font-weight:600}
.mbx .mbfiles .x{border:0;background:none;color:var(--l3);cursor:pointer;padding:0 2px;font-size:13px}
.mbx .mbmsg{padding:0 16px 8px;font-size:14px;color:var(--red)}
.mbx .mbmsg:empty{display:none}
.mbx .mbmsg.info{color:var(--l2)}
.mbx .mbbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 14px 10px 10px;border-top:1px solid var(--line)}
.mbx .mbbar .rtbar{flex:0 1 auto;padding:0;border:0}
.mbx .mbbar>span:empty{display:none}
.mbx .mbbar .mbsave{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--l2);white-space:nowrap;cursor:pointer}
.mbx .mbbar .end{display:inline-flex;align-items:center;gap:10px;margin-left:auto;min-width:0;max-width:100%}
.mbx .mbbar .from{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--l3)}
.mbx .mbbar .one{margin:0}
.mbx .mbbar .end>button{flex:0 0 auto}
.mbx .mbnote{padding:0 16px 10px;font-size:13px;color:var(--l3)}
/* 메일 다듬기(app.js `mbPol*` · 2026-10-16 결정 545 ⑨ · 564 ③ · 568 ③) — 아래 줄 [AI 다듬기](부품 FP_AI 꼴 <button>) → 가운데 겹창(fp.js fpModal wide + fpCmp 좌우 1:1) ·
   앱 겹창(#modal · 새 메일 창 · 서랍) 위에도 뜨게 한 층 위 · 본문에서 바뀐 곳은 밑줄(`.mbpolm` — 편집 칸 안의 표시일 뿐 저장 · 발송되는 글에는 없다) */
.mbx button.mbpolb{border:0;background:none;font-family:inherit}
.mbx button.mbpolb:hover,.mbx button.mbpolb.open{background:var(--fp-on)}
.mbx button.mbpolb:disabled{opacity:.5;cursor:default;background:none}
.mbx .rtbody .mbpolm{text-decoration:underline;text-decoration-color:var(--ai);text-decoration-thickness:2px;text-underline-offset:3px}
.fp-scrim.mbpol-sc{z-index:120}
.fp-ov.mbpol-ov{z-index:121;max-width:calc(100vw - 24px);max-height:calc(100vh - 72px);overflow-y:auto}
.mbpol-wait{font-size:14px;color:var(--fp-ink2)}
.mbpol-wait .ai-bar{margin-top:8px}
.mbpol-err{margin:0;font-size:14px;color:var(--fp-ink2)}
.mbpol-none{margin-right:auto;font-size:14px;color:var(--fp-ink2)}
.mbpol-ov .mbpol-re{height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:16px;color:var(--fp-ink);cursor:pointer}
.mbpol-ov .mbpol-re:hover{background:var(--fp-on)}
.mbpol-ov .mbpol-go{height:36px;padding:0 26px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.mbpol-ov .mbpol-go:hover{filter:brightness(.94)}
.mbpol-ov .fp-cmp p{white-space:pre-wrap;word-break:break-word}
/* 좌우 비교 아래 · 단추 줄 위 「한 줄」 띠(결정 604 · app.js `mbPolBand`) — 갈래마다 한 줄(제목 제안 · 점검 · 지난 자문) · 길면 줄바꿈 · AI 표식 없음 · 단추는 글자 단추 */
.mbpol-bd{margin-top:16px;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--fp-ink)}
.mbpol-ln{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:3px 0}
.mbpol-ln .k{flex:none;font-weight:600}
.mbpol-ln .v{min-width:0;overflow-wrap:anywhere}
.mbpol-ln .v.none{color:var(--fp-ink2)}
.mbpol-ov .mbpol-ln button{flex:none;height:auto;padding:0;border:0;background:none;font:inherit;color:var(--blue);cursor:pointer}
.mbpol-ov .mbpol-ln button:hover{text-decoration:underline;text-underline-offset:3px}
/* 「지난 자문과 결론이 다릅니다.」 [보기] — 다듬기 겹창 위 한 겹(읽기 전용 · `mbPastOpen` · 칸 꼴은 .pastbox 그대로) */
.fp-scrim.mbpast-sc{z-index:122}
.fp-ov.mbpast-ov{z-index:123;max-width:calc(100vw - 24px);max-height:calc(100vh - 72px);overflow-y:auto}
@media (max-width:600px){.fp-ov.mbpol-ov,.fp-ov.mbpast-ov{top:12px;padding:16px 16px 18px}.mbpol-ov .fp-cmp{column-gap:16px}}
/* 새 메일 창(company.js `coMailPaint`) — 머리(이름 · ✕) → 윗줄 「고객사 ▾ · 유형 ▾ · 회신 기한 ＋」 → 부품. 큰 겹창([크게 ⤢] 목록에 `.comail`) */
#modalBox:has(> .comail){width:720px;height:min(760px,92vh);padding:0;overflow:hidden}
@media (max-width:600px){ #modalBox:has(> .comail){width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0} }
.comail{display:flex;flex-direction:column;height:100%;min-height:0}
.comail .cmh{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 18px}
.comail .cmh h3{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comail .cmh .x{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:6px;background:none;font-size:15px;color:var(--l2);cursor:pointer}
.comail .cmh .x:hover{background:var(--f3);color:var(--l1)}
.comail .cmpick{padding:0 16px 10px}
.comail #coMailBody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.comail #coMailToHint{margin:0;padding:0 16px 8px}
.comail .cmtop{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 10px}
.comail .cmtop>#coMailCoBox,.comail .cmtop>.cmpj{flex:0 0 100%;order:9}
.comail .cmw{position:relative;display:inline-flex}
.comail .cmw .menu[hidden]{display:none}
.comail .cmpill{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:0;border-radius:8px;background:var(--f3);
  font:inherit;font-size:14px;color:var(--l1);white-space:nowrap;cursor:pointer;max-width:100%}
.comail .cmpill:hover{background:rgba(0,0,0,.08)}
.comail .cmpill small{font-size:13px;color:var(--l3);overflow:hidden;text-overflow:ellipsis}
.comail .cmpill .car{font-size:13px;color:var(--l2)}
.comail .cmpill.e{background:none;border:1px solid var(--line);color:var(--l2)}
.comail .cmpill.e:hover{color:var(--blue);border-color:var(--blue)}
.comail .cmpill.two{padding:0;gap:0;cursor:default}
.comail .cmpill.two>button{height:30px;padding:0 4px 0 11px;border:0;background:none;font:inherit;font-size:14px;color:var(--l1);cursor:pointer}
.comail .cmpill.two>button.x{padding:0 9px 0 4px;font-size:13px;color:var(--l3)}
.comail .cmpill.two>button.x:hover{color:var(--l1)}
.comail .comaildue input{width:150px;height:30px}
.comail .comaildue .hint{font-size:13px;color:var(--l3)}

/* 2026-10-02 소통 한 틀 화면 B — 한 건 머리 윗줄(유형 · 프로젝트 · 기한) · 답장 쓰기 접힘 · 줄 모드 · 고르기 창 이유 한 줄 */
.menu .mwhy{padding:6px 12px 8px;font-size:13px;color:var(--l3);white-space:normal;max-width:260px;line-height:1.4}
.csd .meta.B #csDue .v{white-space:normal;flex-wrap:wrap}
.csd .addd{border:1px dashed var(--l3);border-radius:14px;background:none;padding:2px 10px;font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
.csd .addd:hover{color:var(--blue);border-color:var(--blue)}
.csd .duechips{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.csd .duechips input[type=date]{height:26px;font-size:13px;padding:0 6px;border:1px solid var(--line);border-radius:6px}
.csd .csdx{font-size:13px;color:var(--l3)}
/* 기한 규칙이 켜진 유형의 「날짜 ▾」 목록(2026-10-07) — 유형 ▾ 목록(.st-menu)에 날짜 칸 한 줄 */
.csd .due-menu{min-width:200px}
.csd .due-menu .mi .muted{margin-left:6px;font-size:13px}
.csd .due-menu .drow{padding:6px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
.csd .due-menu .drow input[type=date]{width:100%;height:28px;font-size:13px;padding:0 6px;border:1px solid var(--line);border-radius:6px}
/* 기한 제안 「지난 응답」(R3) 의 흐린 근거 한 문장 — 목록 폭 안에서 줄을 바꿈(Review-B-v8 DH1 · 유형 이름 · 건수가 길어도 상자 안) · 아래 「오늘」 과 가르는 선 */
.csd .due-menu #csDueHintWhy{max-width:240px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.csd .ansfold{display:block;width:100%;text-align:left;border:1px dashed var(--l3);border-radius:8px;background:none;
  padding:10px 12px;margin:4px 0;font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
.csd .ansfold:hover{color:var(--blue);border-color:var(--blue)}
.csd .lnwho{font-size:14px;color:var(--l3);margin-left:10px;font-weight:400}
.csd.csln .det.lnraw{padding:0;border:0;background:none}
.csd .top #csLnShare{margin-left:8px}

/* =====================================================================
   브리핑 · 상시 인원 · 인원 기준(줄기 2 걸음 1 · 2026-10-02) — brief.js · company.js 3-c · settings.js ⑪
   시안 docs/mock/브리핑-인원-개정-시안-확정.html(장면 1 · 2 · 2-나 · 2-다 · 3 · 4 · 6 · 7)의 CSS 를 토큰으로 옮김.
   접두 `bf-`(company.js 의 자리 둘만 `cobf`·`cobfp`) · 다크 모드 규칙은 이 파일에 없어 두지 않는다.
   ===================================================================== */
:root{--indigo:#6155F5;--yellow:#C99A06}
/* =====================================================================
   AI 표식 한 벌(확정 시안 `docs/mock/AI표식-시안` 재료 2절 · 대표 2026-10-08) — 접두 `ai-`
   규칙: 보라 = AI 에만 · 알약 「AI」 하나(한 덩어리에 하나) · 꼴 넷 —
     부르는 단추 `.ai-btn`(줄 · 메뉴 · 막대 안은 글자만 · 본문 안은 `.ln` 가는 보라 테두리 · 작은 것 `.sm1`) ·
     AI 가 만든 것 `.ai-box`(연한 보라 바탕 · 테두리 · 점선 없음 · 겹쳐 뜨는 칸은 `.over`) · 한 낱말 추천 `.ai-chip`(「AI」 를 칩 안에) ·
     AI 가 붙인 값 = 보통 글자 + 작은 알약 `.ai-pill.s` · 부르는 중 `.ai-bar` · 안 될 때 `.ai-note`(회색 알약 `.ai-pill.off`).
   **틀의 바탕 · 테두리 · 보라의 투명 판은 여기 변수 다섯에만 둔다** — 꼴을 바꿀 때는 여기만(대표 「점선이 아쉽다 → 일단 a로」 · 대안 = 왼쪽 보라 세로 줄).
   ===================================================================== */
:root{--ai:#6155F5;--ai-ink:#4B45B8;--ai-bg:rgba(97,85,245,.12);--ai-box:rgba(97,85,245,.055);--ai-chip:rgba(97,85,245,.09)}
.ai-pill{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 5px;border-radius:5px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1;color:var(--ai-ink);background:var(--ai-bg)}      /* 12.5px — 「12px 이하 금지」 그대로(Lead 2026-10-08 · 시안의 11.5 대신) */
.ai-pill.s{height:16px;padding:0 4px;border-radius:4px}                         /* 목록 줄 안 — 글자는 같은 12.5px · 높이 · 여백만 작게 */
.ai-pill.off{color:var(--l2);background:var(--f3)}                               /* 안 될 때 */
.ai-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 8px 0 6px;border:0;border-radius:999px;
  background:none;font-size:14px;font-weight:600;color:var(--ai-ink);white-space:nowrap;cursor:pointer}
.ai-btn:hover{background:rgba(97,85,245,.07)}
.ai-btn.ln{padding:0 10px 0 8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(97,85,245,.45)}
.ai-btn.sm1{height:24px;font-size:13px}
.ai-btn[disabled],.ai-btn.off{opacity:.55;cursor:default}
.ai-link{border:0;background:none;padding:0;font-size:13px;font-weight:600;color:var(--ai-ink);cursor:pointer}   /* 칸 안 단추 */
.ai-link:hover{text-decoration:underline}
.ai-link[disabled]{opacity:.55;cursor:default;text-decoration:none}
.ai-box{background:var(--ai-box);border-radius:10px;padding:9px 12px 10px;font-size:14px;color:var(--l2)}
.ai-box.over{background:linear-gradient(var(--ai-box),var(--ai-box)),#fff}             /* 목록 위에 겹쳐 뜨는 칸(수신함 제안) — 비치지 않게 */
.ai-box>.h{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:13.5px;font-weight:600;color:var(--l1)}
.ai-box>.h .at{font-weight:400;font-size:12.5px;color:var(--l3)}
.ai-box>.h .ai-link{margin-left:auto}
.ai-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border:0;border-radius:6px;
  background:var(--ai-chip);font-size:13.5px;color:var(--l1);white-space:nowrap;cursor:pointer}
.ai-chip>.in{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ai-ink)}   /* 칩 안의 「AI」 */
button.ai-chip:hover{background:var(--ai-bg)}
.ai-bar{height:2px;border-radius:1px;background:var(--ai-bg);overflow:hidden}
.ai-bar>i{display:block;width:38%;height:100%;border-radius:1px;background:var(--ai);animation:ai-run 1.4s ease-in-out infinite}
.ai-bar.n>i{animation:none}                                                      /* 한 만큼 차는 줄 — width 를 % 로 */
@keyframes ai-run{0%{margin-left:-38%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.ai-bar>i{animation:none;margin-left:31%}}
.ai-note{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--l2)}
.ai-note.err{color:var(--red)}
/* 「법인 기록에 묻기」 남은 횟수(app.js askRemHtml · 다섯 아래일 때만) — 대화 [AI 정리] 옆 `.cvrem` 과 같은 흐린 13 한 줄 · 부르는 단추 바로 앞 */
.airem{flex:0 0 auto;margin:0 8px;font-size:13px;font-weight:400;color:var(--l3);white-space:nowrap}
.airem[hidden]{display:none}
@media (max-width:600px){                                 /* 좁은 화면 — 서랍 찾기 줄에서는 찾기 칸을 밀지 않게 그 아래 한 줄로 */
  .csd .drw .drqa{flex-wrap:wrap}
  .csd .drw .drqa>.airem{order:3;flex-basis:100%;margin:2px 0 0;text-align:right}
}
.modal h3>.ai-pill{vertical-align:2px}
.one.ai-note{margin:6px 0 4px}
.one.ai-note+.ai-bar{margin:0 0 8px;max-width:360px}
.csnote>.ai-pill,.cap .one>.ai-pill,.bf-rs>.ai-pill,.drgl>.ai-pill{vertical-align:1px}
/* AI 가 칸에 미리 채운 값 = 점선 칸 + 칸 안 오른쪽 작은 알약(확정 시안 들어오는것 「.fx.ai」 · 「캡처로 기록」 app.js 7-1-c 절) ·
   사람이 고치면 그 칸만 실선(`.ed` · 같은 크기 그대로 — 글자가 움직이지 않는다) · 알약은 걷힌다 */
.ni .aidash{border:1.5px dashed rgba(97,85,245,.55);border-radius:8px;background:rgba(97,85,245,.035)}
.ni .aidash.ed{border-style:solid;border-color:var(--line);background:none}
.ni .nicapd{display:inline-flex;align-items:center;gap:2px;padding-right:6px}
.ni .wktitle.aidash{padding:4px 10px;margin:20px 0 10px}
#wk .ni .wkbody.aidash,.ni .wkbody.aidash{padding:8px 64px 8px 10px;border:1.5px dashed rgba(97,85,245,.55);border-radius:8px;background:rgba(97,85,245,.035)}   /* 내용 칸은 #wk .wkbody(border 0)보다 세게 */
#wk .ni .wkbody.aidash.ed,.ni .wkbody.aidash.ed{border-style:solid;border-color:var(--line);background:none}
.ni .aipw{position:relative;height:0;z-index:1}                       /* 내용 칸 알약 — 칸 안 오른쪽 위(칸을 밀지 않는다) */
.ni .aipw>.ai-pill{position:absolute;right:10px;top:10px}
#csRecRun{display:inline-flex;align-items:center;gap:6px}
@media (max-width:600px){.ai-btn{height:36px}.ai-btn.sm1{height:32px}}
.bf-sp{flex:1}
.bf-gray{font-size:14px;color:var(--l3)}
.bf-k{color:var(--l3)}
.bf-a{color:var(--blue);text-decoration:none}
.bf-lk{font-size:13.5px;text-decoration:none}
.bf-tag{font-size:12.5px;padding:0 7px;border-radius:5px;background:rgba(162,95,0,.1);color:var(--orange);font-weight:600;white-space:nowrap}
.bf-tag.g{background:rgba(0,0,0,.05);color:var(--l2)}
.bf-tag.i,.bf-tag.bf-new{background:rgba(0,0,0,.05);color:var(--l2)}      /* 「신설」 · 「○○ 개정」 · 「N명 · 새로」 — 보라는 AI 에만(2026-10-08) → 회색 */
/* 수신함 맨 위 「제안 N」 한 줄(확정 시안 `제안부품-시안` · 2026-10-08) — 접힌 한 줄(높이 36 · 연한 보라 바탕 `.ai-box` · 알약 「AI」) ·
   누르면 같은 자리에서 아래로 **겹쳐** 펼친다(목록을 밀지 않는다 · 안은 아래 제안 줄 한 벌). 옛 옅은 파란 카드 · 줄마다 흰 카드는 걷었다 */
#sugbar{margin:0 0 8px}
.bf-inb{position:relative;height:36px}
.bf-inbh{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 11px 0 13px;border:0;
  font-size:14.5px;color:var(--l1);white-space:nowrap;cursor:pointer;text-align:left}
.bf-inbh.ai-box:hover{background:var(--ai-chip)}
.bf-inbh b{font-weight:700}
.bf-inbh .n{color:var(--l2);font-size:14px;margin-left:-3px}
.bf-inbh .sum{color:var(--l2);font-size:14px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bf-inbh .dot{width:7px;height:7px;border-radius:4px;background:var(--blue);flex:none;margin-left:-2px}
.bf-inbh .cv{width:6px;height:6px;border-right:1.5px solid var(--l3);border-bottom:1.5px solid var(--l3);transform:translateY(-2px) rotate(45deg);flex:none;margin-right:4px}
.bf-inb.open .bf-inbh .cv{transform:translateY(2px) rotate(-135deg)}
.bf-inbp{position:absolute;left:0;right:0;top:0;z-index:30;border-radius:12px;font-size:inherit;color:inherit;
  box-shadow:0 12px 32px rgba(0,0,0,.14);padding:0 11px 8px 13px}
.bf-inbp .bf-inbh{padding:0;height:36px;background:none}
.bf-inbb{max-height:calc(70vh - 40px);overflow:auto}
.bf-inbb .bf-sugk:first-child{margin-top:4px}
/* 제안 줄을 아무 칸에(BF.sugMount · 2026-10-09) — 겹치지 않고 그 자리에 · 줄 · 머리 · 틀은 수신함 펼친 칸과 같다 */
.bf-slot{border-radius:12px;padding:4px 10px 7px 12px;margin:6px 0}
.bf-sloth{display:flex;align-items:center;gap:6px;height:30px}
@media (max-width:600px){
  .bf-inb,.bf-inbh{height:40px}
  .bf-inbp .bf-inbh{height:40px}
  .bf-inb .bf-sgr{flex-wrap:wrap;padding:8px 0 6px;row-gap:4px}
  .bf-inb .bf-sgx{flex:1 1 100%;white-space:normal}
  .bf-inb .bf-sgr .btn.sm{height:36px;margin-left:auto}
  .bf-inb .bf-sgr .btn.sm + .btn.sm{margin-left:0}
  .bf-inb .bf-sgr .bf-hx{flex:0 0 36px;width:36px;height:36px;border-radius:18px}
  .bf-inb .bf-sgr .bf-undo{margin-left:auto}
}
/* 서랍 「내 것」 맨 위 「AI 제안 N」 묶음(확정 시안 `브리핑-확대-시안` · 2026-10-07) — 인디고 점선 칸 · 머리에 「AI」 알약 하나 ·
   종류별 작은 제목 · 줄 = 글 + 단추 + ✕ · 끝낸 줄은 초록 「✓ … 넣음」 / 흐린 줄 + 「되돌리기」 */
.bf-sugk .n{font-weight:400;color:var(--l2);font-size:14px}
.bf-sugk{font-size:12.5px;color:var(--indigo);font-weight:600;margin:10px 0 0;display:flex;gap:6px;align-items:center}
.bf-sugk .n{font-size:12.5px;color:var(--indigo)}
/* 제안 묶음의 바깥 틀(확정 시안 `제안부품-시안` 장면 ⑦ · 대표 2026-10-08 저녁) — 보라(`.ai-box`)는 안의 것이 전부 AI 일 때만.
   그 밖 = 흰 바탕 + 회색 실선 `.bf-plain`(「시작하기」 한 줄과 같은 꼴 · 선 1px 만큼 안쪽 여백을 줄여 글자 자리는 그대로) ·
   섞이면 AI 종류만 안쪽 보라 칸 `.bf-sugai` + 종류 머리 알약 · 규칙 종류(후속 확인 · 표준 문구)의 머리는 회색 `.bf-sugk.r` */
.bf-plain{background:#fff;border:1px solid var(--line)}
.bf-inbh.bf-plain{padding:0 10px 0 12px;border-radius:10px}
.bf-inbh.bf-plain:hover{background:var(--f4)}
.bf-inbp.bf-plain{padding:0 10px 7px 12px}
.bf-inbp.bf-plain .bf-inbh{height:34px;margin-top:0}
.bf-sugai{margin:4px -7px 2px;padding:1px 7px 3px;border-radius:10px;font-size:inherit;color:inherit}
.bf-sugai>.bf-sugk:first-child,.bf-inbb .bf-sugai>.bf-sugk:first-child{margin-top:7px}
.bf-sugk .bf-sugp{margin:0}
.bf-sugk.r,.bf-sugk.r .n{color:var(--l2)}
.bf-sgr{display:flex;align-items:center;gap:6px;min-height:40px;font-size:14px;border-top:1px solid var(--line);padding:4px 0}
.bf-sgr:hover{background:rgba(0,0,0,.03)}
.bf-sugk + .bf-sgr{border-top:0}
.bf-sgx{flex:1;min-width:0;color:var(--l2);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;
  background:none;border:0;padding:0;font-size:14px}
button.bf-sgx{cursor:pointer}
button.bf-sgx:hover{text-decoration:underline}
.bf-sgx b{color:var(--l1);font-weight:600}
.bf-sgx .src{color:var(--l3);font-size:13px}
.bf-sgr.done .bf-sgx,.bf-sgr.done .bf-sgx b{color:var(--green)}
.bf-sgr.gone .bf-sgx,.bf-sgr.gone .bf-sgx b{color:var(--l3);text-decoration:line-through}
.bf-sgr.foc{outline:2px solid var(--blue);outline-offset:1px;border-radius:7px;border-top-color:transparent;padding-left:6px;margin-left:-6px}
.bf-sgr .btn.sm{flex:none}
.bf-undo{flex:none;border:0;background:none;padding:0;margin:0 4px 0 6px;color:var(--blue);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
/* 후보 묶음 ↔ 따로(「따로 보기」 · 「후보로 묶기」 · 0119) — 단추 줄 끝의 작은 회색 글자 단추 */
.bf-alt{flex:none;border:0;background:none;padding:0;margin:0 2px 0 6px;color:var(--l2);font-size:13px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;cursor:pointer}
.bf-alt:hover{color:var(--l1)}
.bf-sgmore{font-size:13px;color:var(--l2);padding:2px 0 4px}
.bf-sgx .at{color:var(--l3);font-size:13px}
/* 「소통 분류에 AI 사용」(0096 · 2026-10-03) — 고객사 칸 추천 칩 「AI 누리」 ✕(칩을 누르면 확정 = 보통 칸 · 꼴은 위 `.ai-chip` — 2026-10-08 회색 점선 + 꽉 찬 알약을 걷음) */
.bf-aico{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-width:0}
.bf-aichip{font-family:inherit;max-width:100%;min-width:0;overflow:hidden}
/* AI 가 먼저 붙인 값 — 값은 보통 글자 그대로 · 곁에 작은 알약(`.ai-pill.s`) · 사람이 고르거나 고치면 사라진다 */
.bf-aipill{margin-left:3px;cursor:default}
.bf-aix.bf-hx{flex:0 0 24px;width:24px;height:24px;border-radius:12px;font-size:14px}   /* 아래 .bf-aix(20)에 지지 않게 둘을 묶어 적는다 */
.bf-aix{border:0;background:none;color:var(--l3);font-size:13px;width:20px;height:20px;border-radius:10px;padding:0;cursor:pointer;flex:0 0 20px}
.bf-aix:hover{background:var(--f2);color:var(--l1)}
/* 줄 하나라도 고객사 추천 칩이 서면 그 목록의 고객사 칸을 머리까지 함께 넓힌다(유형 칸 칩과 같은 규칙) */
#list:has(.bf-aico) .ihead .co,#list:has(.bf-aico) .row .co{flex-basis:168px}
/* ★ 0098 유형 칸 추천 칩 「AI 질의」 ✕ ▾ — 고객사 칸 칩과 같은 꼴(옛 꼬리표 .bf-aik 는 걷었다) */
.bf-aikd{display:inline-flex;align-items:center;gap:0;white-space:nowrap;min-width:0;padding:0}
.bf-aiko{display:inline-flex;align-items:center;gap:2px;min-width:0}
.bf-aiv{border:0;background:none;color:var(--l3);font-size:13px;width:20px;height:20px;border-radius:10px;padding:0;cursor:pointer;flex:0 0 20px}
.bf-aiv:hover{background:var(--f2);color:var(--l1)}
.row .bf-aikd .bf-aix,.row .bf-aikd .bf-aiv{color:var(--l3)}
.row .bf-aikd .bf-aix:hover,.row .bf-aikd .bf-aiv:hover{color:var(--l1)}
/* ★ 0106 AI 가 먼저 붙인 고객사 — 보통 칸 그대로 + 옆 작은 알약 ✕ · 제목 앞 표시(연한 보라 칩 「AI 급함」 — 「급함」 글자만 붉게) · 고객사 ▾ 맨 위 한 줄 */
.bf-aiset{display:inline-flex;align-items:center;gap:1px;flex:0 0 auto;vertical-align:middle}
.row .co .bf-aiset .bf-aix{color:var(--l3)}
#list:has(.bf-aiset) .ihead .co,#list:has(.bf-aiset) .row .co{flex-basis:168px}
/* ★ 0128 AI 가 먼저 정한 유형 — 점 + 보통 글자(누르면 유형 ▾) + 알약 + ✕ · 그런 줄이 있으면 유형 칸을 머리까지 함께 넓힌다(추천 칩과 같은 규칙) */
.row .kd.kdai{gap:2px;white-space:nowrap;min-width:0}
.row .kdai .kdn{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row .kdai .bf-aix{color:var(--l3)}
/* 결정 723 (가) — AI 유형 ✕ 는 줄에 마우스를 올릴 때만(자리는 그대로 · 줄이 움직이지 않음) · 키보드 초점이 줄 안이면 보임 · 터치 기기(hover 없음)는 늘 보임 · 「AI」 알약은 그대로 */
@media (hover:hover){.row .kdai .bf-aix{opacity:0}.row:hover .kdai .bf-aix,.row:focus-within .kdai .bf-aix{opacity:1}}
#list:has(.kdai) .ihead .kd,#list:has(.kdai) .row .kd{flex-basis:178px}
.bf-aiflag{margin-right:7px;height:20px;padding:0 1px 0 6px;font-size:13px;font-weight:400;color:var(--l2);vertical-align:1px;cursor:default}
.bf-aiflag.ro{padding-right:7px}
/* 「광고?」 글자 = 누르면 치우는 단추(2026-10-08) — 표시 모양 그대로 · 올리면 밑줄 */
.bf-aiflag .bf-aigo{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.bf-aiflag .bf-aigo:hover{text-decoration:underline}
/* 자동으로 치워진 줄(「원본 보기」)의 회색 한 마디 */
.bf-admuted{display:inline-block;margin-right:8px;font-size:13px;font-weight:400;color:var(--l3);text-decoration:none}
.bf-admuted .link{font-size:13px}
/* 설정 › 개인 › 메일 「치운 주소 ›」 한 장 — 자동으로 치우는 보낸 주소 */
.stmute .mrow{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.stmute .mrow .addr{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.bf-aiflag[data-flag="urgent"]{color:var(--l1);font-weight:600}
.bf-aiflag .bf-aix{width:18px;height:18px;flex-basis:18px;color:inherit;opacity:.6}
.bf-aiflag .bf-aix:hover{opacity:1}
#coDd .it.bf-aifilt{border-bottom:1px solid var(--line)}
#coDd .it.bf-aifilt .nm .ai-pill{margin-right:4px;vertical-align:1px}
/* 줄 하나라도 유형 칩이 서면 그 목록의 유형 칸을 머리까지 함께 넓힌다(칸 줄 맞춤이 흐트러지지 않게) */
#list:has(.bf-aiko) .ihead .kd,#list:has(.bf-aiko) .row .kd{flex-basis:178px}
/* 브리핑 창(장면 2 · 3 · 4) */
.modal .box.bf-mbox{padding:20px 24px 16px}
.modal .box.wide.bf-mbox{width:880px;max-height:86vh}
.bf-mh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bf-mh h3{margin:0;font-size:19px}
.bf-dt{font-size:14px;color:var(--l3)}
.bf-x{font-size:18px;height:30px}
.bf-gl{font-size:13.5px;color:var(--l2);margin:8px 0}
.bf-empty{padding:24px 4px;font-size:14px;color:var(--l3);text-align:center}
/* 한 줄 카드 */
.bf-ic{position:relative;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:14px 16px;background:#fff;color:var(--l1);font-size:15px}
.bf-ic.done{background:var(--f4)}
.bf-ic.done .bf-h{color:var(--l2)}
.bf-h{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:600;flex-wrap:wrap}
/* 카드 종류 꼬리표(확인할 것 · 곧 시행) — AI 가 아니므로 회색(「곧 시행」 만 주황) · 보라는 AI 에만(2026-10-08) */
.bf-kd{font-size:12.5px;font-weight:600;color:var(--l2);background:rgba(0,0,0,.05);border-radius:5px;padding:0 7px}
.bf-kd.soon{color:var(--orange);background:rgba(162,95,0,.1)}
.bf-cf{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--l2);font-weight:400}
.bf-cf::before{content:"";width:8px;height:8px;border-radius:4px;background:var(--green)}
.bf-cf.mid::before{background:var(--yellow)}
.bf-pr{margin-top:8px;font-size:14.5px}
.bf-pr b{font-weight:600}
.bf-arr{color:var(--l3);margin:0 6px}
.bf-ob{margin-top:10px;border-top:1px solid var(--line)}
.bf-o{display:grid;grid-template-columns:200px 1fr 120px;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:start}
.bf-o .bf-nm{font-weight:600}
.bf-rf{color:var(--l2);font-size:13.5px}
.bf-endh{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--l2)}
.bf-note{font-size:13.5px;color:var(--l3);margin-top:8px}
.bf-src{margin-top:8px;font-size:13px;color:var(--l3)}
.bf-btns{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.bf-who{font-size:13.5px;color:var(--l3)}
.bf-ok{font-size:14px;color:var(--green);font-weight:600}
.bf-pjl{font-size:14px;color:var(--l2)}
/* 보류 날 고르기(장면 2-나) */
.bf-pop{margin-top:10px;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:12px 14px;max-width:340px;border:1px solid var(--line)}
.bf-poph{font-size:14.5px;font-weight:600;margin-bottom:8px}
.chips.bf-chips{margin:0}
.bf-chips .chip{height:28px;font-size:13.5px;color:var(--l2)}
.bf-pop .bf-date{width:auto;height:28px;border:1px solid var(--line);border-radius:14px;padding:0 10px;font-size:13.5px}
/* 의무 체크 창(장면 2-다) */
.bf-dlg h3{font-size:17px;margin:0}
.bf-msub{font-size:14px;color:var(--l2);margin:2px 0 4px}
.bf-pjname{min-height:32px;border:1px solid rgba(0,0,0,.14);border-radius:7px;padding:4px 10px;display:flex;align-items:center;font-size:14.5px;background:var(--f4)}
.comailto.bf-rl{max-height:none;padding:0}
.comailto .it.bf-rli{padding:9px 12px;border-top:1px solid var(--line);border-radius:0;align-items:center}
.comailto .it.bf-rli:first-child{border-top:0}
.bf-rli .nm{display:flex;flex-direction:column;gap:2px;font-weight:600}
.bf-sub{color:var(--l3);font-size:13px;font-weight:400}
/* 고객사 세부 정보(장면 6) — 머리 알약 · 인원 · 확인할 것 줄 · 인원 기준 */
.cobfp{display:inline-flex;align-items:center}
.cobfp:empty{display:none}
.bf-dotq{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--blue);border:1px solid rgba(0,112,210,.3);border-radius:12px;
  padding:0 10px;background:rgba(0,112,210,.05);font-weight:600;cursor:pointer}
.bf-dotq::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--blue)}
.cobf{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cobf:empty{display:none}
.bf-sh2{font-size:14px;font-weight:600;color:var(--l2);margin:0 0 6px}
.comore .bf-hcrow{gap:10px 18px}
.comore .bf-hcrow .if{flex:0 1 auto}
.comore .bf-hcrow .if input{width:110px}
.comore .bf-hcrow .if input[type=date]{width:160px}
.bf-hc select{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.bf-u{color:var(--l2)}
#coHcErr:empty{display:none}
.bf-hcro{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14.5px;color:var(--l1)}
.bf-hcro .lbl{font-size:14px;color:var(--l2)}
.bf-hcro b{font-size:17px}
.bf-hcl{margin-top:4px}
.bf-hist{margin:4px 0 0;font-size:13.5px;color:var(--l2);border-left:2px solid rgba(0,0,0,.14);padding-left:12px;line-height:1.9}
.bf-cozone{color:var(--l1);margin-top:12px}
.bf-cozone>.bf-ic{margin-bottom:10px}
.bf-sect{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.bf-sh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--l2);margin-bottom:8px}
#bfRegFold > summary{cursor:pointer}#bfRegFold:not([open]) > summary{margin-bottom:0}   /* 규정 절 접힌 한 줄(문서함 이관 리뷰 M3 · 접히면 아래 여백 없음 · Dev-g 가 남긴 두 줄 · styles.css 는 Dev-c 손) */
.bf-cnt{font-weight:400;color:var(--l3)}
.bf-tbl{background:#fff;border:1px solid var(--line);border-radius:8px}
.bf-th,.bf-tr{display:grid;grid-template-columns:190px 1fr 190px 150px 170px;gap:12px;align-items:center;padding:8px 10px}
.bf-th{font-size:13px;color:var(--l2);font-weight:600;border-bottom:1px solid var(--line)}
.bf-tr{border-bottom:1px solid var(--line);font-size:14px;color:var(--l1)}
.bf-tr:last-child{border-bottom:0}
.bf-tr .bf-nm{font-weight:600}
.bf-tr .bf-tag{margin:0 4px 2px 0;display:inline-block}
.bf-tr.off{opacity:.5}
.bf-tr small.bf-sub{display:block}
.bf-otherh{display:inline-block;margin-top:8px}
.bf-other{margin-top:6px}
.bf-foot{font-size:13px;color:var(--l3);margin-top:8px}
/* 설정 › 인원 기준(장면 7) */
.bf-sttop{display:flex;align-items:center;margin:0 0 8px}
.bf-stt .bf-th,.bf-stt .bf-tr{grid-template-columns:100px minmax(130px,1.2fr) 1fr 1fr 120px 160px 44px}
/* 설정 「법 개정」 법령 목록(settings.js ⑫) — 다섯 칸 */
.bf-stt.bf-lwt .bf-th,.bf-stt.bf-lwt .bf-tr{grid-template-columns:minmax(160px,1.4fr) 130px 1fr 200px 44px}
.bf-lwt .bf-in{width:100%;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
@media (max-width:640px){ .bf-stt.bf-lwt .bf-th,.bf-stt.bf-lwt .bf-tr{grid-template-columns:1fr;gap:4px} }
.bf-sted{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:10px 12px;margin:6px 8px;background:var(--f4);border:1px solid var(--line);border-radius:8px;font-size:14px}
.bf-sted label{display:flex;align-items:center;gap:8px}
.bf-sted label>span:first-child{color:var(--l2);white-space:nowrap}
.bf-sted input{height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff}
.bf-sted input[type=number]{width:100px}
.bf-sted select,.bf-sel{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.bf-stact{display:flex;gap:6px;margin-left:auto}
.bf-stfoot{margin-top:8px}
.bf-sh2.bf-stb{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .modal .box.wide.bf-mbox{width:auto;padding:16px}
  .bf-o,.bf-th,.bf-tr,.bf-stt .bf-th,.bf-stt .bf-tr{grid-template-columns:1fr;gap:4px}
  .bf-th{display:none}
}
/* 규정 문서 · 조항 · 법 개정 대조(줄기 2 걸음 3 · 4 — brief.js 8절 · 시안 장면 5 ④⑤ · 8 · 8-나 · 10) */
.bf-reg:empty{display:none}
.bf-reg{margin:4px 0 14px;padding:10px 12px 8px;border:1px solid var(--line);border-radius:10px;background:#fff}
.bf-rgl{display:flex;flex-direction:column}
.bf-rg{display:grid;grid-template-columns:120px minmax(160px,1fr) minmax(160px,1.3fr) auto;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:14px}
.bf-rg:first-child{border-top:0}
.bf-rg.old{opacity:.6}
.bf-rk{font-size:12.5px;justify-self:start}
.bf-rn{display:flex;flex-direction:column;min-width:0}
.bf-rn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-rn small{font-size:13px;color:var(--l3)}
.bf-rs{font-size:13.5px;color:var(--l2)}
.bf-rs.ok{color:var(--l1)}
.bf-rs.gray{color:var(--l3)}
.bf-hwn{display:block}
.bf-ra{display:flex;gap:6px;justify-content:flex-end}
.bf-difl{font-size:14px}
.bf-part{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.bf-scant{white-space:nowrap}
.bf-scanb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0 4px;padding:8px 12px;border-radius:8px;background:rgba(162,95,0,.07);font-size:13.5px;color:var(--l2)}
.bf-scanb .bf-scant{font-weight:600;color:var(--orange)}
.bf-unk{color:var(--red);font-weight:600}
.bf-ul{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
.bf-err{font-size:13.5px;color:var(--red);margin-top:8px}
.bf-err:empty{display:none}
.bf-arts .bf-cls{max-height:52vh;overflow:auto;border-bottom:1px solid var(--line)}
.bf-cl{display:grid;grid-template-columns:22px 70px 120px 1fr 190px;gap:10px;align-items:start;padding:7px 2px;border-top:1px solid var(--line);font-size:14px}
.bf-cl.on{background:rgba(0,112,210,.05)}
.bf-clh{font-size:13px;color:var(--l2);font-weight:600;border-top:0;margin-top:8px}
.bf-clg{font-size:13px;font-weight:600;color:var(--l2);padding:10px 2px 4px;border-top:1px solid var(--line)}
/* 전 판과 견주기(2026-10-08 · brief.js `bfRegDiff` · AI 아님 → 보라 없음) — 머리 아래 한 줄 · 줄 꼬리표 · 펼친 조항 아래 전 판 글 · 서로 없는 줄 표시 */
.bf-dfl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:2px 2px 10px;font-size:14px;color:var(--l1)}
.bf-dfl>span{font-size:13px;color:var(--l3)}
/* ★ S4 규정 [AI 요지] 카드(2026-10-09) — 조항 화면 머리 아래 · 연한 보라(.ai-box) · 주제 한 줄 + 조 번호 알약(누르면 그 조항) */
.bf-rsum{margin:0 2px 12px;padding:12px 14px}
.bf-rsum.old{opacity:.5}
.bf-rsum .h{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ai-ink)}
.bf-rsum .h .at{font-size:12.5px;color:var(--l3)}
.bf-rsum .h .link{margin-left:auto;font-size:13px}
.bf-rsl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:8px;font-size:14px;line-height:1.7;color:var(--l1)}
.bf-rsl>b{flex:0 0 88px;font-size:13px;font-weight:600;color:var(--l2)}
.bf-rsl .tx{flex:1 1 280px;min-width:0}
.bf-rsas{display:inline-flex;flex-wrap:wrap;gap:4px}
.bf-rsa{border:1px solid var(--f1);background:#fff;border-radius:10px;padding:0 7px;font-size:12.5px;line-height:20px;color:var(--l2);cursor:pointer;font-family:inherit}
.bf-rsa:hover{border-color:var(--l3);color:var(--l1)}
.bf-rsa.off{cursor:default;color:var(--l3)}
.bf-rsum .more1{margin-top:10px;padding-top:8px;border-top:1px solid rgba(97,85,245,.16);font-size:13px;color:var(--ai-ink)}
.bf-rsum .cvprog{height:2px;margin-top:10px;border-radius:2px;background:var(--ai-bg);overflow:hidden}
.bf-rsum .cvprog i{display:block;width:35%;height:100%;border-radius:2px;background:var(--ai);animation:cvprog 1.2s ease-in-out infinite}
.bf-rsf{margin-top:10px;font-size:12.5px;color:var(--l3)}
.bf-prevh{display:block;margin:10px 0 4px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;font-weight:600;color:var(--l2)}
.bf-prevb{color:var(--l2)}
.bf-dl{background:rgba(255,204,0,.28);border-radius:3px}
.bf-prevb .bf-dl{background:rgba(0,0,0,.07);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.35)}
.bf-cl.bf-gone .bf-no,.bf-cl.bf-gone .bf-ti,.bf-cl.bf-gone .bf-txb{color:var(--l2)}
.bf-rad{width:16px;height:16px;border-radius:8px;border:1.5px solid rgba(0,0,0,.3);background:#fff;padding:0;margin-top:2px}
.bf-rad.on{border-color:var(--blue);box-shadow:inset 0 0 0 3px #fff;background:var(--blue)}
.bf-no{font-weight:600}
.bf-ti{color:var(--l2)}
.bf-txb{border:0;background:none;padding:0;text-align:left;color:var(--l1);font-size:14px;min-width:0;cursor:pointer}
.bf-cl:not(.op) .bf-txb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 펼친 줄(`.bf-cl.op`)이 다른 창의 고르기 알약 규칙 `.modal .op`(높이 28 · 둥근 테두리 · 고르면 파란 바탕)에 걸려 눌리고 아래 줄과 겹치던 것을 푼다(2026-10-06) */
.modal .bf-cl.op{height:auto;padding:7px 2px;border:0;border-top:1px solid var(--line);border-radius:0;background:none;font-size:14px;color:inherit}
.modal .bf-cl.op.on{background:rgba(0,112,210,.05);border-color:var(--line);color:inherit}
.bf-body{display:block;white-space:pre-wrap;line-height:1.65}
.bf-chk{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.bf-rtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.bf-rmode{margin-top:8px;padding:10px 12px;background:var(--f4);border:1px solid var(--line);border-radius:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.bf-rmode input{height:30px;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;width:220px;background:#fff}
.bf-split{flex-direction:column;align-items:stretch;max-height:36vh;overflow:auto}
.bf-sl2{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:start;font-size:14px}
.bf-ln{white-space:pre-wrap}
.bf-askp{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--f4);font-size:14.5px}
.bf-date2{height:32px;padding:0 9px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.bf-chk2{display:flex;align-items:center;gap:8px;margin:12px 0 2px;font-size:14.5px}
.bf-side{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;align-items:start}
.bf-pane2{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;min-width:0}
.bf-pane2 h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14.5px;white-space:nowrap}
.bf-pane2 h4 .bf-sel{max-width:180px}
/* 나란히 보기 — 고객사 고르기(단추 + 붙박이 고르기 창 · 규정 문서 없는 곳은 흐린 줄) · 규정 한 부 그대로 · 조항 화면의 법 개정 꼬리표(2026-10-06) */
.bf-cobtn{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.bf-cobtn.on{border-color:rgba(0,136,255,.45)}
.bf-lawpk{margin:0 0 10px}
.bf-lawpk #bfLawPkList{max-height:264px;overflow:auto}
.bf-lawpk .it:has(> .tag) .nm{color:var(--l3)}
.bf-lawall{max-height:56vh;overflow:auto;margin-top:6px}
button.bf-lawtag{border:0;cursor:pointer;font-family:inherit;line-height:1.6}
button.bf-lawtag:hover{text-decoration:underline}
.bf-lawh,.bf-lawc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bf-lawh{font-size:13px;color:var(--l2);font-weight:600;margin-bottom:4px}
.bf-lawb{border-top:1px solid var(--line);padding:8px 0}
.bf-lawt{font-size:13.5px;font-weight:600;margin-bottom:4px}
.bf-lawc>div{font-size:13.5px;white-space:pre-wrap;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.bf-lawart{font-size:14px;line-height:1.7;white-space:pre-wrap;padding:6px 0;border-top:1px solid var(--line)}
.bf-srcl{font-size:12.5px;color:var(--l3);margin-top:8px}
.bf-diffb{margin-top:12px}      /* 「찾은 차이」 칸 — 바탕은 `.ai-box` */
.bf-diffb>.bf-dh b{color:var(--l1);font-weight:600}
.bf-dh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}
.bf-dr{display:grid;grid-template-columns:200px 1fr;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.bf-dk{color:var(--l2)}
.bf-tblw{margin-top:8px;font-size:13.5px;color:var(--orange)}
.bf-capt,.bf-capl{color:var(--l2)}      /* 한도 · 꺼짐 — 회색 알약 + 한 줄(`.ai-note`) */
.bf-capt{display:inline-flex;align-items:center;gap:7px}
.bf-capl{flex-wrap:wrap}
.bf-re.ai-btn{flex:none}
.bf-law .bf-tbl .bf-tr{grid-template-columns:170px 1fr 110px 120px auto}
.bf-tr input.bf-lpk{width:16px;height:16px;min-width:0;padding:0;margin:0 6px 0 0;display:inline-block;vertical-align:-3px;flex:none}
.bf-lawact{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 2px}
@media (max-width:640px){
  .bf-rg,.bf-cl,.bf-side,.bf-lawh,.bf-lawc,.bf-dr,.bf-sl2,.bf-law .bf-tbl .bf-tr{grid-template-columns:1fr}
  .bf-ra{justify-content:flex-start}
}

/* =====================================================================
   일과 프로젝트(work.js · 2026-10-02 Dev-c · 시안 일과프로젝트-시안-확정 장면 1·3·4·5)
   ② 일 한 장(#wk .wksheet)(① 「전부」 는 2026-10-14 걷음 — 프로젝트 몸통은 끝의 .pb 절) ④ 「내 메모」(.wkmemo) — 접두 wk
   ===================================================================== */
.wkwait,.wkempty{font-size:14px;color:var(--l3);padding:14px 6px}
.wksheet .seg{display:inline-flex;border:1px solid var(--f1);border-radius:8px;overflow:hidden;vertical-align:middle}
.wksheet .seg button{height:26px;padding:0 10px;border:0;background:#fff;font-size:13px;color:var(--l2)}
.wksheet .seg button+button{border-left:1px solid var(--f1)}
.wksheet .seg button.on{background:var(--f2);color:var(--l1);font-weight:600}
.wksheet .seg button[disabled]{color:var(--l3);cursor:default}
.wkpw{position:relative;display:inline-block}
.wkpw .menu{top:100%;margin-top:4px;min-width:200px}
.wkpw .menu .hd2{font-size:13px;color:var(--l3);padding:4px 10px 2px}
.wkpw .menu .mi{display:flex;align-items:center;gap:8px;font-size:14px;height:30px}
.wkpw .menu .mi small{margin-left:auto;font-size:13px;color:var(--l3)}
.wkpw .menu .mi .gi{color:var(--l3);width:15px;text-align:center}
.wkpw .menu .mi.red{color:var(--red)}
.wkpw .menu .mi.cur{font-weight:600;background:var(--f3)}
.wkpw .menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.wksheet .ck{width:15px;height:15px;border:1.5px solid var(--l3);border-radius:4px;background:#fff;padding:0;flex:0 0 15px;position:relative}
.wksheet .ck.on{background:var(--l3);border-color:var(--l3)}
.wksheet .ck.on::after{content:"";position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.wkmr .me{font-size:13px;color:var(--l2);border:1px solid var(--f1);border-radius:5px;padding:0 5px;justify-self:start;white-space:nowrap}
/* 프로젝트 [AI 정리] 겹창(proj.js pjSum*) — 자문 대화 [AI 정리] 칸(.csd.cv .cvconv)과 같은 값 */
.pjsum .cvhint{margin:12px 2px 0;font-size:13px;line-height:1.7;color:var(--l3)}
.pjsum .cvconv{margin-top:14px;padding:12px 14px 12px}
.pjsum .cvconv.old{opacity:.5}
.pjsum .cvconv .h .link{margin-left:auto;font-size:13px}
.pjsum .cvconv .fl{margin:6px 0 0;font-size:14.5px;line-height:1.75;color:var(--l1)}
.pjsum .cvconv .r{display:flex;align-items:baseline;gap:12px;margin-top:10px;font-size:14px}
.pjsum .cvconv .r .k{flex:0 0 104px;font-size:13px;color:var(--l3)}
.pjsum .cvconv .r .v{flex:1;min-width:0;color:var(--l1);line-height:1.7}
.pjsum .cvconv .more1{margin-top:10px;padding-top:8px;border-top:1px solid rgba(97,85,245,.16);font-size:13px;color:var(--ai-ink)}
.pjsum .cvprog{height:2px;margin-top:10px;border-radius:2px;background:var(--ai-bg);overflow:hidden}
.pjsum .cvprog i{display:block;width:35%;height:100%;border-radius:2px;background:var(--ai);animation:cvprog 1.2s ease-in-out infinite}
.pjsum .acts{margin-top:12px}
.pjsum .pjmoney{margin:10px 2px 0;font-size:13px;line-height:1.6;color:var(--l2);font-variant-numeric:tabular-nums}   /* 대표에게만 — 계약 · 청구 · 입금(proj.js pjMoneyHtml) */
.cosum .cvconv .r .v>div+div{margin-top:4px}      /* 고객사 정리(company.js coSum*) — 줄 끝 근거 자문(누르면 그 자문) */
.cosum .cosrefs{display:inline-flex;flex-wrap:wrap;gap:2px 8px;margin-left:4px;vertical-align:baseline}
.cosum .cosref{font-size:13px;color:var(--ai-ink);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pjsum>.airem:not([hidden]){display:block;margin:4px 2px 0}   /* 남은 횟수 — 정리 뒤 흐린 한 줄(app.js askRemHtml) · [정리] 단추 앞에서는 .airem 그대로 */
.csrow .stt,div.csq .stt,.libcase .stt{color:var(--l1)}
.csrow .stt.s-done,div.csq .stt.s-done,.libcase .stt.s-done,.pill.st.done{color:var(--l3)}
/* 일 한 장 — 가운데 큰 장(새 항목 창과 같은 층 z 90 · 고르기 창 #modal z 100 이 위) */
#wk{z-index:90}
#wk .box.wksheet{display:flex;flex-direction:column;width:900px;max-width:94vw;min-height:min(600px,88vh);max-height:92vh;overflow:auto;padding:18px 24px 20px;border-radius:14px}
#wk .box.wksheet>*{flex:none}
#wk .box.wksheet>.wkbody,.ni.emb>.wkbody{flex:1 0 auto}        /* 내용이 장 바닥까지 */
.wksh{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--l2)}
.wksh .dot{font-style:normal;margin:0 -4px}
.wksh .ddlb{margin:0 -7px;font-weight:600}
.wksh small{font-size:13px;color:var(--orange);font-weight:600;margin-left:8px}
.wksh #wkNiLock{color:var(--l3);font-weight:400}
.wksh .wkpw.l .menu{left:0;right:auto}
.wksh .sp{flex:1}
.wksh .ghost{height:30px;padding:0 10px;border:0;background:none;border-radius:6px;color:var(--l2);font-size:18px}      /* 대화 칸 = 부품 머리에 내 꼬리(✕ · ‹ 흐름) */
.wksh .ghost:hover{background:var(--hover)}
.wksh .wkpw .menu{right:0}
.wktitle{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.wktitle .ck{width:20px;height:20px;flex:0 0 20px}
.wktitle .ck.on::after{left:5.5px;top:2px}
.wktitle input{flex:1;min-width:0;border:0;outline:0;font-size:25px;font-weight:700;line-height:1.3;padding:0;background:none}
.wktitle input::placeholder{color:rgba(0,0,0,.28)}
.wktags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 26px;padding:10px 0 12px;border-bottom:1px solid var(--line)}
.wktags .tg2.wide{grid-column:1/-1}
.wktags .k{display:block;font-size:13.5px;color:var(--l3);line-height:1.4}
.wktags .v{display:flex;align-items:center;gap:6px;min-height:28px;font-size:15px;font-weight:500;white-space:nowrap}
.wktags .pb{border:0;background:none;padding:0;font-weight:500;border-bottom:1px dotted var(--l3)}
.wktags .pb i{font-style:normal;color:var(--l3);margin-left:4px;font-size:13px}
.wktags .pb.em,.wktags .em{color:rgba(0,0,0,.45);font-weight:400;border-bottom:1px dotted rgba(0,0,0,.25)}
.wktags .pb.add{color:var(--blue);border:0}
.wktags .pb[disabled]{color:var(--l3);cursor:default}
.wktags .v small{font-size:13px;color:var(--orange);font-weight:600}
.wkdate .til{color:var(--l3);margin:0 -4px}
/* 아래 — 연결 · 후속 확인 줄(옛 속성 격자의 끝 줄 · 이제 내용 아래 한 줄씩) */
.wktags.wkft{display:block;padding:8px 0 4px;border-bottom:0;border-top:1px solid var(--line);margin-top:6px}
.wkft .tg2{display:flex;align-items:flex-start;gap:12px}
.wkft .tg2[hidden]{display:none}
.wkft .tg2 .k{flex:none;line-height:28px}
.wktags.wkft{position:relative}
.wkft .wklkpk{position:absolute;left:0;bottom:calc(100% + 2px);z-index:30;width:460px;max-width:100%;margin:0;box-shadow:0 6px 24px rgba(0,0,0,.12)}   /* 연결 고르기 창 — 줄 위로 떠서 선다(장을 밀지 않는다) */
.wkft .wklk .em{display:none}                                   /* 빈 연결은 「연결 ＋」 만(자문 한 건 머리와 같다) */
#wk .wkbody,.ni .wkbody{display:block;flex:1 0 auto;width:100%;min-height:160px;margin:0 0 6px;border:0;border-radius:0;box-shadow:none;outline:0;resize:none;font-size:15.5px;line-height:1.85;padding:0;background:none}
#wk .wkbody::placeholder,.ni .wkbody::placeholder{color:rgba(0,0,0,.35)}
.wkatt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:6px;font-size:14px;color:var(--l2)}
.wkatt .lb{font-size:13.5px;color:var(--l3);margin-right:4px}
.wkatt .f{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:8px;padding:3px 6px 3px 10px;background:#fff}
.wkatt .f .link{text-decoration:none;color:var(--l1)}
.wkatt .fx{border:0;background:none;color:var(--l3);padding:0 4px}
.wkatt .link.add{text-decoration:none}
.wksheet .hint.warn{color:var(--orange);font-size:14px;margin-top:8px}
.modal .ops{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.modal .op{height:28px;padding:0 12px;border:1px solid var(--f1);border-radius:14px;background:#fff;font-size:14px}
.modal .op.on{background:var(--blue);border-color:var(--blue);color:#fff}
.modal .wkmvq{font-size:15px;margin-top:6px}
.modal .hint.warn#wkMvWarn{color:var(--orange);font-weight:600}
/* 할 일 「내 메모」 */
.wkmh,.wkmr{display:grid;grid-template-columns:56px minmax(0,1fr) 110px 170px 48px;gap:12px;align-items:center;padding:0 8px}
.wkmh{font-size:13.5px;color:var(--l3);height:32px;border-bottom:1px solid var(--line)}
.wkmr{min-height:42px;font-size:14.5px;border-bottom:1px solid var(--line)}
.wkmr .sub{color:var(--l3);font-size:13.5px}
.wkmr .t{border:0;background:none;padding:0;text-align:left;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkmr .t:hover{text-decoration:underline}
.wkmemo .gl{font-size:14px;color:var(--l3);margin-top:8px}
/* 빈 페이지 안 소통 칸(2026-10-03 [새로 만들기] 완전 통합 — 칸은 app.js `.ni.emb`) */
#wk .box.wksheet>.wkni{flex:1 0 auto;display:flex;flex-direction:column}
/* 고객사 「할 일」 띠 — 세부 정보와 탭 줄 사이(2026-10-03) */
.wkco{margin:12px 0 8px}
.wkco:empty{display:none}
.wkcoh{display:flex;align-items:center;gap:10px;min-height:34px}
.wkcoh b{font-size:19px;font-weight:700;color:var(--l1)}
.wkcoh .n{font-size:14px;font-weight:600;color:var(--l1);background:var(--f2);border-radius:10px;padding:1px 9px;font-variant-numeric:tabular-nums}
.wkcoh .lt{font-size:14px;font-weight:600;color:var(--red);background:rgba(214,30,36,.08);border-radius:10px;padding:1px 9px}
.wkcoh .sp{flex:1}
.wkcoh .sm.s{height:28px;padding:0 14px;font-size:14.5px;white-space:nowrap}   /* 좁은 화면에서 「＋/추/가」 꺾임 막기(2026-10-03) */
.wkcoh.thin{border:1px dashed var(--f1);border-radius:10px;padding:8px 12px;min-height:44px}
.wkcoh.thin b{font-size:17px}
.wkcoh.thin .none{color:var(--l2);font-size:15px}
.wkcol{border:1px solid var(--line);border-radius:10px;padding:0 12px;margin-top:6px;background:#fff}
.wkcor{display:grid;grid-template-columns:18px minmax(0,1fr) auto 116px 84px;gap:12px;align-items:center;min-height:46px;border-bottom:1px solid var(--line);font-size:16px}
.wkcor:last-child{border-bottom:0}
.wkcor.late{box-shadow:inset 3px 0 0 var(--red);margin:0 -12px;padding:0 12px;background:rgba(214,30,36,.04)}
.wkcor .ck{width:17px;height:17px;border:1.5px solid var(--l3);border-radius:4px;background:#fff;padding:0}
.wkcor .ck:hover{border-color:var(--blue)}
.wkcor .t{border:0;background:none;padding:0;text-align:left;font-size:16px;color:var(--l1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wkcor.late .t{font-weight:600}
.wkcor .t:hover{text-decoration:underline}
.wkcor .pjn{font-size:13.5px;color:var(--l2);border:1px solid var(--f1);border-radius:5px;padding:0 6px;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.wkcor .d{font-size:15px;color:var(--l2);font-variant-numeric:tabular-nums;white-space:nowrap}
.wkcor .d.late{color:var(--red);font-weight:700}
.wkcor .d.none{color:var(--l3)}
.wkcor .p{font-size:15px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkcomore{display:inline-block;margin:6px 0 0 12px;font-size:14.5px;text-decoration:none}
/* 연결(0083 · 걸음 ③) — 일 한 장 태그 칸 · 한 건 화면 머리 한 줄 · 고르기 창(시안 장면 3 · 7-나) */
.wklk{flex-wrap:wrap;white-space:normal!important}
.wklk .lkp{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;max-width:100%}
.wklk .lkgo{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:1px 9px;font-size:13.5px;font-weight:400;color:var(--l1);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:12px}
.wklk .lkgo:hover{background:var(--hover)}
.wklk .rk{font-size:12.5px;color:var(--l3)}
.wklk .lkx{visibility:hidden;border:0;background:none;padding:0 9px 0 2px;font-size:12.5px;color:var(--red)}
.wklk .lkp:hover .lkx,.wklk .lkp:focus-within .lkx{visibility:visible}   /* 자리는 늘 잡아 둔다 — 올릴 때 옆 단추가 밀리지 않게 */
.wklk small{font-size:13px;color:var(--orange)}
.wklkpk{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff}
.wklkpk .ph{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--l1)}
.wklkpk .ph b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wklkpk .ph .sp{flex:1}
.wklkpk .ph .ghost{border:0;background:none;color:var(--l2);height:26px;padding:0 6px;border-radius:6px}
.wklkpk .rl{display:flex;align-items:center;gap:8px;margin:6px 0}
.wklkpk .rl small{font-size:13px;color:var(--l3)}
.wklkpk .seg{display:inline-flex;border:1px solid var(--f1);border-radius:8px;overflow:hidden}
.wklkpk .seg button{height:26px;padding:0 10px;border:0;background:#fff;font-size:13px;color:var(--l2)}
.wklkpk .seg button+button{border-left:1px solid var(--f1)}
.wklkpk .seg button.on{background:var(--f2);color:var(--l1);font-weight:600}
.wklkpk.par .it[data-id^="project:"],.wklkpk.par .it[data-id^="ref:"],.wklkpk.par .it[data-id^="block:"],.wklkpk.par .it[data-id^="doc:"]{opacity:.4}
.wklkpk .hint.warn{color:var(--orange);font-size:14px;margin:6px 0 0}
.wklkcs .wklkr{display:flex;align-items:flex-start;gap:12px;margin:8px 0 2px}
.wklkcs .wklkr .k{font-size:13.5px;color:var(--l3);line-height:28px;flex:0 0 auto}
.wklkcs .wklk{display:flex;align-items:center;gap:6px;min-height:28px}
.wklkcs .em{color:rgba(0,0,0,.45);font-size:14px}
.wklkcs .pb.add{border:0;background:none;color:var(--blue);font-size:16px;padding:0 4px}
.wklkcs .pb.add[disabled]{color:var(--l3)}
.wklkcs .wklkpk{max-width:460px;margin:4px 0 8px}
.wkimpseg{display:flex;flex-wrap:wrap;gap:6px}
.wkimpseg button{height:30px;padding:0 12px;border:1px solid var(--f1);border-radius:8px;background:#fff;font-size:14px;color:var(--l1)}
.wkimpseg button.on{border-color:var(--blue);background:rgba(0,112,210,.08);font-weight:600}
.wkimpseg small{color:var(--l3);font-weight:400;margin-left:4px}
.wkimpl{border:1px solid var(--line);border-radius:8px}
.wkimpr{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:14.5px;cursor:pointer}
.wkimpr+.wkimpr{border-top:1px solid var(--line)}
.wkimpr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkimpr .gray{color:var(--l3);font-size:13px}
.wkimpr.was{color:var(--l3);cursor:default}
/* 여러 줄 AI 요약 창(2026-10-07 · app.js 6-1절) — 범위 칩 · 체크 줄은 위 「지난 프로젝트에서 가져오기」와 같은 모양 + 보낸 사람 · 꼬리표 */
#modalBox:has(#aiSumBox){width:640px}
/* 거르기 줄 — 「고객사」·「유형」 은 공용 「▾ 목록」(.ddl) 그대로 · 오른쪽 끝 「안 할 것 숨기기」 는 같은 단추 꼴(꺾쇠 없음 · 켜면 ✓ 와 파란 글자) */
.aisumflt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px -7px 0}
.aisumflt .ddll{max-height:264px;min-width:150px}
.aisumhide{margin-left:auto}
.aisumhide.on{color:var(--blue);font-weight:600}
.aisumhide small{color:var(--l3);font-weight:400}
.aisuml{max-height:46vh;overflow:auto;margin-top:10px}
.aisumr .fr{flex:0 0 92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--l2)}
.aisumr .tg{flex:none;font-size:12.5px;color:var(--l2);background:var(--f3);border-radius:5px;padding:1px 6px;white-space:nowrap}
.aisumr .tg.done{color:var(--ai-ink);background:var(--ai-chip);font-weight:600}
#aiSumEst{display:flex;align-items:center;gap:7px}
#aiSumBar{margin:6px 0 2px}
.aisumr .tg.fail{color:var(--red);background:none;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.aisumr input{flex:none;width:16px;height:16px;padding:0;margin:0}   /* .modal input{width:100%;height:32px} 이 체크칸을 키운다 */
.aisumnote{color:var(--l1)}
.aisumnote .stop{color:var(--red)}
#aiSumMsg:empty{display:none}
@media (max-width:600px){ .aisumr .fr{flex-basis:64px} }
/* 후속 확인(2026-10-03 · 한 건 화면 머리 한 줄 · 결과 묻기 창) */
.wkfu{margin:2px 0 6px}
.wkfur{display:flex;align-items:flex-start;gap:12px;margin:6px 0 2px}
.wkfur .k{font-size:13.5px;color:var(--l3);line-height:28px;flex:0 0 auto}
.wkfur .v{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:28px}
.wkfup{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:#fff;
  font-size:13.5px;color:var(--l1);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkfup:hover{background:var(--hover)}
.wkfup .rk{font-size:12.5px;color:var(--l3)}
.wkfup.late{border-color:rgba(214,30,36,.35)}
.wkfup.late .rk{color:var(--red)}
.wkfup.r{color:var(--l2)}
.wkfup.r .rk{color:var(--green)}
.wkfu .pb.add{border:0;background:none;color:var(--blue);font-size:14px;padding:0 4px;height:26px}
.wkfu .pb.add[disabled]{color:var(--l3)}
.wkfuo{border:0;background:rgba(162,95,0,.1);color:var(--orange);font-size:13px;font-weight:600;height:24px;padding:0 10px;border-radius:12px}
.wkfuol{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:2px 0 6px 74px}
.wkfuoi{border:0;background:none;padding:3px 6px;font-size:14px;color:var(--l1);border-radius:6px;text-align:left}
.wkfuoi:hover{background:var(--hover)}
.wkfuoi small{margin-left:8px;font-size:13px;color:var(--l3)}
.wkfuoi.late small{color:var(--red)}
.wkfuf{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:4px 0 8px 74px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;max-width:720px}
.wkfuf #wkFuT{flex:1 1 260px;min-width:0;height:30px;border:1px solid var(--line);border-radius:8px;padding:0 10px;font:inherit;font-size:14px}
.wkfuw{display:inline-flex;border:1px solid var(--f1);border-radius:8px;overflow:hidden}
.wkfuw button{height:28px;padding:0 10px;border:0;background:#fff;font-size:13px;color:var(--l2)}
.wkfuw button+button{border-left:1px solid var(--f1)}
.wkfuw button.on{background:var(--f2);color:var(--l1);font-weight:600}
.wkfuf input[type=date]{height:30px;border:1px solid var(--line);border-radius:8px;padding:0 6px;font:inherit;font-size:13px;color:var(--l2)}
.wkfuf input[type=date].on{border-color:var(--blue);color:var(--l1)}
.wkfuf .sp{flex:1}
.wkfuf .primary.s{height:28px;padding:0 14px;font-size:14px}
.wkfuh{flex:1 1 100%;font-size:13px;color:var(--l3)}
.wkfua{display:flex;gap:8px;align-items:center}
.wkfua .sp{flex:1}
.wkfurs{font-weight:600;color:var(--green);margin-right:8px}
@media (max-width:640px){ .wkfuol,.wkfuf{margin-left:0} }
@media (max-width:640px){
  .wkcor{grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"c t d" "c j p";row-gap:2px;padding:6px 0}
  .wkcor .ck{grid-area:c}
  .wkcor .t{grid-area:t;white-space:normal}
  .wkcor .d{grid-area:d}
  .wkcor .pjn,.wkcor>span:nth-child(3){grid-area:j;justify-self:start}
  .wkcor .p{grid-area:p;justify-self:end}
}
@media (max-width:640px){
  #wk .box.wksheet{padding:14px 16px}
  .wkmh{display:none}
  .wkmr{grid-template-columns:48px 1fr;row-gap:2px;padding:8px}
}

/* =====================================================================
   재무(0078 · finance.js `fi`) — 시안 `docs/mock/재무-시안-확정` 판 3 · 견적서 한 장(답변서 6-가) · 계약 부품 전체 목록 · 서명본
   ===================================================================== */
#fiTabs{gap:4px;margin:0 0 6px;padding-bottom:6px;border-bottom:1px solid var(--line);flex-wrap:nowrap}
#fiTabs .chip{height:32px;padding:0 10px;border:0;border-radius:999px;background:none;font-size:14px;color:var(--l2)}
#fiTabs .chip:hover{background:var(--hover)}
#fiTabs .chip.on{color:var(--l1);font-weight:600;background:var(--f2)}
#vFin .primary[disabled],#modalBox .fifoot .primary[disabled],#modalBox .mh .primary[disabled],.fiset .sm[disabled]{cursor:not-allowed}
.fikp{display:grid;gap:12px;margin:4px 0 14px}
.fikp>div{padding:6px 12px 8px 0}
.fikp .k{font-size:14px;color:var(--l2)}
.fikp .n{font-size:26px;font-weight:700;line-height:1.3}
.fikp .n small{font-size:14px;font-weight:400;color:var(--l2);margin-left:3px}
.fikp .d{font-size:13.5px;color:var(--l3)}
.fikp .hot .n{color:var(--red)}
.fiband{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--f4);margin:0 0 10px;font-size:14.5px}
.fiband .t{flex:1}
.finote{font-size:14.5px;color:var(--l2);padding:14px 4px}
.fiviews{margin:6px 0 8px}
.fiviews .chip .n{opacity:.75;margin-left:2px}
.fitop{display:flex;justify-content:flex-end;min-height:0;margin:-4px 0 4px}
.filh,.filr{display:grid;gap:12px;align-items:center;padding:9px 8px}
.filh{font-size:13.5px;color:var(--l3);font-weight:600;padding-top:4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.filr{border-radius:8px;font-size:15px;cursor:pointer}
.filr:hover{background:var(--hover)}
.filr .co,.filr .tt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filr .co{font-weight:600}
.filr .sub{font-size:14px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filh .nr,.filr .nr{text-align:right;font-variant-numeric:tabular-nums}
.filr .ac{text-align:right}
.fibill{grid-template-columns:150px 1fr 120px 70px 190px 190px}
.fipayr{grid-template-columns:130px 1fr 70px 80px 110px 100px 150px 96px}
.fiinr{grid-template-columns:110px 120px 1fr 200px}
.fiqtr{grid-template-columns:minmax(0,1fr) 150px 150px 110px;gap:24px}
/* 견적 목록(2026-10-14 첫째판 · 결정 467) — 숫자 한 줄 · 거르기 줄(계약 목록과 같은 꼴) · 칸 넷 · 상태는 글자(늦은 것만 빨강) */
.fiqsum{font-size:14px;color:var(--l2);padding:8px 0 2px}
.fiqbar{display:flex;align-items:center;gap:4px;min-height:46px;border-bottom:1px solid var(--line);margin:4px 0 0}
.fiqbar .coq{width:200px;height:32px;border:0;border-radius:8px;background:var(--f4);padding:0 10px;font-size:14px;margin-right:8px}
.fiqbar .sp{flex:1}
.filh.fiqtr{font-size:14px;font-weight:400;color:var(--l2);border-bottom:1px solid var(--line);padding:10px 8px}
.filr.fiqtr{min-height:48px;padding:6px 8px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
.filr.fiqtr .tt{font-weight:600}
.filr.fiqtr .tt small{font-size:14px;font-weight:400;color:var(--l2);margin-left:8px}
.filr.fiqtr .nr{font-weight:600}
.filr.fiqtr .st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filr.fiqtr .st.r{color:var(--red)}
.filr.fiqtr .due{font-size:14px;color:var(--l2)}
.fifc{grid-template-columns:1fr 120px 140px 130px 130px 24px}
.filr.fifc.ed{cursor:default}
.filr.fifc.ed:hover{background:none}
.fifc input,.fifc select{min-height:32px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:14.5px;min-width:0;background:#fff}
.fifc input.num{text-align:right}
.fist{font-size:14px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fist.b{color:var(--blue)} .fist.g{color:var(--green)} .fist.o{color:var(--orange);font-weight:600}
.fist.r{color:var(--red)} .fist.i{color:var(--indigo,#6155F5)} .fist.off{color:var(--l3)}
.figrp{font-size:14px;font-weight:600;color:var(--l2);margin:14px 0 2px;padding:0 8px}
.figrp.r{color:var(--red)}
.fiend{font-size:13.5px;color:var(--l3);padding:12px 8px}
.fiadd{font-size:14px;margin:6px 8px;text-decoration:none;align-self:flex-start}
.fionly{margin:-8px 0 10px;font-size:13.5px;color:var(--l3)}
.fiwarn{font-size:14px;color:var(--orange);background:rgba(162,95,0,.07);border-radius:8px;padding:8px 10px;margin:6px 0 10px}
.fiwarn.r{color:var(--red);background:rgba(214,30,36,.06)}
/* 세금계산서 양식 · 견적 · 입금 창 — 상자 class 를 바꾸지 않고 안의 표시로 넓힌다 */
.modal .box:has(> .fiform){width:900px;max-height:90vh;overflow:auto}
.modal .box:has(> .fipay){width:560px;max-height:90vh;overflow:auto}
.fiform .mh,.fiqt .mh{display:flex;align-items:center;gap:10px}
.fiform .mh h3,.fiqt .mh h3{margin:0}
.fiform .mh .sp,.fiqt .mh .sp,.fifoot .sp,.fimeta .sp{flex:1}
.finav{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--l2)}
.fiform .msub{font-size:14px;color:var(--l3);margin:4px 0 10px}
.fitwo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fibox{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.fibox h4{margin:0 0 8px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.fibox h4 .lk{margin-left:auto;font-size:13px;font-weight:400;color:var(--l3)}
.fipr{display:grid;grid-template-columns:84px 1fr;gap:6px 10px;align-items:center;font-size:14.5px}
.fipr .k{font-size:13.5px;color:var(--l2)}
.fipr .k em,.fimeta .k em,.fiitb th em{color:var(--red);font-style:normal;margin-left:2px}
.fipr .val{min-height:30px;display:flex;align-items:center;padding:0 2px;border-radius:8px}
.fiin{min-height:30px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font-size:14.5px;min-width:0;width:100%;background:#fff}
.fiin.num{text-align:right}
.fiin.miss,.fipr .val.miss,.fiitb td.miss{border:1.5px solid var(--red);background:rgba(214,30,36,.03)}
.fipr .val.miss{padding:0 8px;color:var(--red)}
.fiin.soft,.fipr .val.soft{border:1px dashed rgba(0,0,0,.28);background:var(--f4)}
.fipr .val.soft{padding:0 8px;color:var(--l3)}
.fipr .mmsg,.fipr .smsg{grid-column:2;font-size:13px;margin-top:-4px}
.fipr .mmsg{color:var(--red)} .fipr .smsg{color:var(--l3)}
.fihintb{margin-top:6px;font-size:13px}
.fimeta{display:flex;align-items:center;gap:10px;margin:12px 0 8px;font-size:14.5px}
.fimeta .k{font-size:13.5px;color:var(--l2)}
.fimeta .fiin{width:160px}
.fiitb{width:100%;border-collapse:collapse;font-size:14.5px;margin:4px 0}
.fiitb th{font-size:13px;color:var(--l2);font-weight:600;text-align:left;padding:6px;border-bottom:1px solid var(--line)}
.fiitb td{padding:5px 6px;border-bottom:1px solid var(--line)}
.fiitb .nr{text-align:right;font-variant-numeric:tabular-nums}
.fiitb tfoot td{font-weight:600;border-bottom:0}
.fiitb input{min-height:30px;border:1px solid var(--line);border-radius:7px;padding:0 6px;font-size:14px;width:100%;min-width:0;background:#fff}
.fiitb input.num{text-align:right}
.ficases{margin:8px 0;font-size:14px}
.ficases .fica{display:inline-flex;align-items:center;gap:6px;margin:4px 14px 0 0}
.fiform .srcl{font-size:13.5px;color:var(--l3);margin:8px 0}
.fifoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.fifoot .hint{font-size:14px;color:var(--l2)}
.fifoot .hint.r{color:var(--red)} .fifoot .hint.g{color:var(--green);font-weight:600}
.fisubbox{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px;background:#fff}
.fisubbox .hint{font-size:13.5px;color:var(--l2);margin:4px 0 8px}
.fisubbox .acts1{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.fisubbox .fipr{grid-template-columns:70px 1fr}
.fisubbox .sm.del,.fifoot .sm.del,.gyfiles .sm.del{color:var(--red)}
/* 입금 확인 */
.fipicks{flex-direction:column;align-items:stretch !important}
.fipick{display:flex;align-items:center;gap:8px;font-size:14px}
.fipick .tt{flex:1}
.fipick input[type=checkbox]{flex:0 0 auto;width:auto;min-width:0;min-height:0;margin:0}
.fipick input.num{flex:0 0 120px;min-height:30px;border:1px solid var(--line);border-radius:7px;padding:0 6px;text-align:right}
.fipayhint{font-size:13px;color:var(--l3);margin:2px 0 6px 122px}
/* 견적 편집 */
.fiqtform .libf{grid-template-columns:96px 1fr;margin:6px 0}
.fiqtform .libf input.num{flex:0 0 140px;text-align:right}
.fiparts{flex-direction:column;align-items:stretch !important}
.fipart{display:flex;gap:6px;align-items:center}
.fipart input{flex:1}
.fiqt .saved{font-size:14px;color:var(--l3);margin-right:4px}
/* 견적서 한 장(2026-10-14 첫째판 · 결정 465 · 467) — 머리 = ⤢ · 갈래 · 저장함 · 단추 / 적는 곳 = 이름표 없이(제목 22 · 메타 한 줄 접힌 고르기 · 큰 금액 · 줄과 선만 표) · 파란 칠은 으뜸 단추 하나 */
.fiqt>.mh{gap:8px}
.fiqt>.mh .mwb{order:-1}
.fiqbk{display:none}
.fiqcr{font-size:14px;color:var(--l2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fiqcr .link{font-size:14px;color:var(--l1);text-decoration:none}
.fiqcr .link.nov{color:var(--l3)}
.fiqcr .lt{color:var(--l3)}
.fiqt .fimore .ddlb{padding:0 10px}
.fiqt .fimore .ddlb .k{font-size:16px;color:var(--l1)}
.fiqt .fimore .ddlb .cv{display:none}
.fidoc .fiqpk{position:absolute;z-index:40;left:120px;top:52px;width:360px;margin:0;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px var(--line2)}
.fiqed{display:flex;flex-direction:column;padding:10px 12px 18px}
.fiqti{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:2px 0 4px}
.fiqed .fiqti .nm{field-sizing:content;width:auto;height:auto;min-width:4em;max-width:100%;border:0;padding:0;font:inherit;font-size:22px;font-weight:600;letter-spacing:-.2px;line-height:1.4;color:var(--l1);background:none;outline:0}
.fiqed .fiqti .nm::placeholder{color:var(--l3)}
.fiqst .ddlb,.fiqti .fiqst{font-size:14px;color:var(--l2)}
.fiqst .ddlb{height:28px;padding:0 6px}
.fiqmeta{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:0 0 4px -7px;font-size:14px;color:var(--l2)}
.fiqmeta .dot{color:var(--l3)}
.fiqmeta .ddlb{height:28px;font-size:14px;color:var(--l1)}
.fiqmeta .ddl.nov .ddlb .k{color:var(--l2)}
.fiqmeta .ddli .n{margin-left:auto;padding-left:16px;font-size:14px;color:var(--l2)}
.fiqmeta .ddld{height:28px;font-size:14px;gap:7px}
.fiqmeta .ddld .v{font-weight:400}
.fiqmeta .ddld.nov .v{color:var(--l2)}
.fiqmeta .ddld .cv{flex:none;width:6px;height:6px;border-right:1.5px solid rgba(0,0,0,.42);border-bottom:1.5px solid rgba(0,0,0,.42);transform:translateY(-2px) rotate(45deg)}
.fiqdet .ddll{min-width:250px;padding:8px 12px;gap:4px}
.fiqdr{display:flex;align-items:center;gap:12px;min-height:30px;font-size:14px;white-space:nowrap}
.fiqdr .k{flex:0 0 70px;color:var(--l2)}
.fiqdr .link{font-size:14px}
.fiqamt{display:flex;align-items:baseline;gap:8px;margin:16px 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fiqamt .pre{font-size:16px;color:var(--l2)}
.fiqed .fiqamt input{field-sizing:content;width:auto;height:auto;min-width:3ch;max-width:60%;border:0;padding:0;font:inherit;font-size:30px;font-weight:700;letter-spacing:-.4px;color:var(--l1);background:none;outline:0}
.fiqed .fiqamt input::placeholder{color:var(--l3)}
.fiqamt .u{font-size:15px;color:var(--l2)}
.fiqlk,.fiqadd,.fiqaddl{font-size:14px;color:var(--l2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.fiqlk{margin-left:auto}
.fiqaddl{align-self:flex-start;margin-top:8px;text-decoration:none}
.fiqsec{margin-top:14px}
.fiqsec .sech{display:flex;align-items:center;min-height:28px;font-size:14px;color:var(--l2)}
.fiqsec .sech .fiqadd{margin-left:auto}
.fiqsec .fipart{margin:4px 0}
.fiqed .fiqsec .fipart input{min-height:32px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 4px;font-size:15px;background:none}
.fiqed .fiqsec .fipart input.num{flex:0 0 140px;text-align:right}
.fiqtb{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.fiqtb th{font-size:14px;font-weight:400;color:var(--l2);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.fiqtb td{padding:0;border-bottom:1px solid var(--line)}
.fiqtb th.nr,.fiqed .fiqtb input.num{text-align:right}
.fiqed .fiqtb input{width:100%;min-width:0;height:40px;border:0;border-radius:6px;padding:0 6px;font:inherit;font-size:15px;color:var(--l1);background:none;text-overflow:ellipsis}
.fiqed .fiqtb input:focus{outline:0;background:var(--f4)}
.fiqed .fiqtb input::placeholder{color:var(--l3)}
.fiqtb td.c-x{text-align:center}
.fiqtb td.c-x .gpx{visibility:hidden;font-size:14px;color:var(--l3)}
.fiqtb td.c-rd{display:none}                      /* 휴대폰 두 줄 읽는 꼴(아래 ≤600) */
@media (hover:hover){                             /* 줄 칠 · ✕ 는 손을 얹을 수 있는 화면만(손가락 화면에 칠이 남지 않게 · 리뷰 ⑧) */
  .fiqtb tr:hover td{background:var(--f4)}
  .fiqtb tr:hover td.c-x .gpx{visibility:visible}
}
@media (hover:none){.fiqtb td.c-x .gpx{visibility:visible}}
.fiqtb td.c-x .gpx:focus-visible{visibility:visible}
.fiqed .fiqmemo{field-sizing:content;width:100%;height:auto;min-height:3.4em;margin-top:16px;border:0;padding:0;font:inherit;font-size:15px;line-height:1.7;color:var(--l1);background:none;resize:none;outline:0}
.fiqed .fiqmemo::placeholder{color:var(--l3)}
.fiqt .fiqtsum{font-size:14px;color:var(--l2);gap:26px;padding:14px 28px}
.fiqt .fiqtsum b{font-size:16px;color:var(--l1);font-weight:600}
.fiqt .fiqtsum .tot b{font-size:18px}
.fiqt.fidoc{position:relative}
.fiqt .fidocbody{grid-template-columns:700px minmax(0,1fr)}
#modal.mw .fiqt .fidocbody{grid-template-columns:760px minmax(0,1fr)}
.fiqt .fidocform{padding:8px 20px 14px}
.fiqpvb,.fiqpvx{display:none}
/* 좁은 폭(≤1100) — 적는 곳만 · 미리보기는 머리 「미리보기」 로 겹창(창 전체를 덮는 한 장 · ✕ · 결정 467 · 리뷰 ③) */
@media (max-width:1100px){
  .fiqt .fidocbody,#modal.mw .fiqt .fidocbody{grid-template-columns:minmax(0,1fr)}
  .fiqt .fidocin{border-right:0}
  .fiqt .fiqpvb{display:inline-flex}
  .fiqt:not(.pv) .fidocpv{display:none}
  .fiqt.pv .fidocpv{position:absolute;inset:0;z-index:45}
  .fiqt.pv .fidocpv .pvh{gap:10px;padding:10px 14px 4px 18px}
  .fiqt.pv .fidocpv .pg{margin-left:auto}
  .fiqt.pv .fiqpvx{display:inline-flex}
}
/* 양식 문서 창(견적서 · 붙인 공문 — 2026-10-07) — 머리는 붙박이, 왼쪽 입력 | 오른쪽 A4 미리보기 두 칸이 따로 구른다.
   공문을 붙이면 왼쪽 위 탭 [공문 | 견적서] · 좁은 폭의 미리보기는 위 ≤1100 겹창(2026-10-14 · 옛 「미리보기」 탭 걷음) */
.modal .box:has(> .fidoc){width:1200px;max-width:96vw;height:90vh;max-height:90vh;overflow:hidden;padding:0;display:flex}
.fidoc{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.fidoc>.mh{padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;row-gap:6px}
.fidoc>.mh .pill{font-size:13px;font-weight:500}
.fidoc>.hint,.fidoc>.fiwarn{margin:8px 20px 0}
.fidocbody{flex:1;min-height:0;display:grid;grid-template-columns:560px minmax(0,1fr)}
#modal.mw .fidocbody{grid-template-columns:600px minmax(0,1fr)}
.fidocin{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line)}
.fidocform{flex:1;min-height:0;overflow:auto;padding:8px 20px 14px}
.fidocseg{display:flex;gap:2px;background:var(--f3);border-radius:9px;padding:3px;margin:12px 20px 4px}
.fidocseg.solo{display:none}
.fidocseg button{flex:1;height:30px;border:0;background:transparent;border-radius:7px;font:inherit;font-size:14px;color:var(--l2);cursor:pointer}
.fidocseg button.cur{background:#fff;color:inherit;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.fiqtsum{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--line);font-size:14px}
.fiqtsum .k{color:var(--l2);margin-right:6px}
.fiqtsum .tot{margin-left:auto;font-size:15px}
.fidocpv{display:flex;flex-direction:column;min-width:0;min-height:0;background:#F3F3F1}
.fidocpv .pvh{display:flex;justify-content:space-between;align-items:center;min-height:34px;padding:4px 18px 0;font-size:13px;color:var(--l2)}
.fidocpv .pg{display:flex;align-items:center;gap:4px}
.fidocpv .pg .link{text-decoration:none;font-size:16px;padding:0 6px;color:var(--l2)}
.fipages{flex:1;min-height:0;overflow:auto;padding:6px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.fipgw{flex:0 0 auto;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.fipgw>.fipage{transform-origin:0 0}
.fidoc .libf .v>.rted{flex:1 1 100%;min-width:0;margin:0;border:1px solid var(--line);border-radius:12px}
.fidoc .filtbody.rtbody{min-height:190px;padding:12px 16px 14px}
.fidoc .gypk{margin-left:106px}
.filtatts{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.filtatt{display:flex;align-items:center;gap:6px}
.filtatt .tag{font-size:12.5px;color:var(--l3);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
.filtend{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.filtend .hint{flex:1;font-size:13px;color:var(--l3)}
.filtend .sm.del{color:var(--red)}
@media (max-width:820px){
  .modal .box:has(> .fidoc){width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0}
  .fidoc .fiqtform .libf{grid-template-columns:minmax(0,1fr);gap:4px}
  .fidoc .gypk{margin-left:0}
  .fidoc>.mh{position:relative;padding:12px 58px 10px 14px}
  .fidoc>.mh #fiQtX{position:absolute;top:10px;right:12px}
  .fidocseg{margin:10px 14px 4px}
  .fidocform{padding:8px 14px 14px}
  .fiqtsum{padding-left:14px;padding-right:14px}
  .fipages{padding:6px 10px 14px}
}
.pill.pot{background:rgba(97,85,245,.12);color:#4b3fd6;margin-left:6px;font-weight:500}
/* 재무 시작 달 */
.fistart .msub{font-size:14px;color:var(--l2);margin:6px 0 4px}
.fistart input[type=month]{height:28px;border:1px solid var(--line);border-radius:14px;padding:0 10px}
/* 설정 › 재무 — 줄 꼴은 「설정 ㄷ-f」 절(st-r) · 남은 것 = 세금계산서 발행 한 장(libf) · 재무 담당 알약 */
.fiset .libf input{max-width:340px}
#stBody .st-r .ct .fifins{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;min-width:0}
.fiset .libf input.num{flex:0 0 80px}
/* 계약 목록 세 칸 규칙은 ④-b 계약 절(위 `.gyrow,.gyhd`)에 한 벌 — 재무 › 계약 · 고객사 계약 탭 · 프로젝트 계약 창이 같다(2026-10-06) */
/* 계약 전 꼬리표 · 도구줄(검색 · 계약 유형 ▾ · 고객사 ▾ · ＋ 계약 — 수신함 칩 줄 규칙은 위 #fiCtBar 목록) · 계약 겹창 머리(2026-10-03) */
.tag.gypre{font-size:12.5px;font-weight:400;color:var(--l2);background:var(--f2);border-radius:10px;padding:1px 8px;margin-left:8px;white-space:nowrap}
#fiCtBar{display:flex;align-items:center;margin-top:-4px}
#fiCtBar .grp.find .coq{width:210px}
#fiCtBar .dd .it input{width:auto;height:auto;margin:0}
.gyshh{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.gyshh h3{margin:0}
.gyshh .sp{flex:1}
.gyshh .gpx{font-size:16px;padding:0 4px}
.gysheet .msg1{margin-top:8px}
.gyfiles .gyfile{display:inline-flex;align-items:center;gap:6px;margin-right:10px}
.gyfiles .link{text-decoration:none}
/* 고객사 — 계산서 받는 담당자 표시 */
.cobill{font-size:13px;color:var(--blue);background:rgba(0,112,210,.08);border-radius:10px;padding:1px 7px;margin-left:6px}
.ct .r3 .sm.on{border-color:var(--blue);color:var(--blue)}
@media (max-width:820px){
  .fikp{grid-template-columns:repeat(2,1fr) !important}
  .fibill,.fipayr,.fiqtr,.fiinr,.fifc{grid-template-columns:1fr 1fr}
  .filh{display:none}
  .fitwo{grid-template-columns:1fr}
  #fiCtBar{flex-wrap:wrap;row-gap:4px}
  #fiCtBar .grp.find{flex:1 1 100%}
  #fiCtBar .grp.find .coq{width:100%}
  /* 견적 목록 — 두 줄(이름 + 고객사 · 유형 / 금액 + 상태) · 검색칸은 한 줄 위로 */
  .filr.fiqtr{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;column-gap:12px;padding:8px 0}
  .filr.fiqtr .tt{grid-row:span 2;align-self:center}
  .filr.fiqtr .tt small{display:block;margin-left:0}
  .filr.fiqtr .st{text-align:right;font-size:14px;color:var(--l2)}
  .filr.fiqtr .due{display:none}
  .fiqbar{flex-wrap:wrap;row-gap:4px;border-bottom:0}
  .fiqbar .coq{flex:1 1 100%;width:auto;margin-right:0}
  .fiqt .fidocform{padding:8px 14px 14px}
}
@media (max-width:600px){
  /* 견적서 한 장(휴대폰) — 머리 = ‹ · 갈래 · 저장함 · 미리보기 · ⋯ · 품목은 두 줄 읽는 꼴(누르면 그 줄만 세 줄 칸으로 펼침 · 리뷰 ④) */
  .fiqt>.mh{padding:8px 10px 8px 6px;flex-wrap:nowrap}
  .fiqt>.mh #fiQtX{display:none}
  .fiqbk{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:none;font-size:20px;color:var(--l1);cursor:pointer}
  .fiqcr .pj{display:none}
  .fiqti{display:block}
  .fiqed .fiqti .nm{font-size:20px !important;display:block}   /* 공용 휴대폰 16px 규칙보다 앞(제목 · 큰 금액 · 리뷰 ②) */
  .fiqed .fiqamt input{font-size:26px !important}
  .fidoc .fiqpk{left:8px;right:8px;width:auto}
  .fiqtb colgroup,.fiqtb thead{display:none}
  .fiqtb,.fiqtb tbody{display:block}
  .fiqtb tr{display:block;border-bottom:1px solid var(--line)}
  .fiqtb td{border:0}
  .fiqtb tr:not(.fiqop) td:not(.c-rd),.fiqtb tr.fiqop td.c-rd{display:none}
  .fiqtb td.c-rd{display:block}
  .fiqrd{display:flex;flex-direction:column;gap:2px;width:100%;border:0;background:none;padding:9px 2px;font:inherit;text-align:left;color:var(--l1);cursor:pointer}
  .fiqrd .a{display:flex;align-items:baseline;gap:10px}
  .fiqrd .a b{flex:1;min-width:0;font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fiqrd .a b.nov{color:var(--l3);font-weight:400}
  .fiqrd .m{font-size:15px;font-variant-numeric:tabular-nums}
  .fiqrd .b{font-size:13.5px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fiqtb tr.fiqop{display:grid;grid-template-columns:minmax(0,1fr) 56px 96px;grid-template-areas:"it it am" "de qt pr" "no no x";padding:4px 0;background:var(--f4)}
  .fiqtb td.c-item{grid-area:it} .fiqtb td.c-amount{grid-area:am} .fiqtb td.c-desc{grid-area:de} .fiqtb td.c-qty{grid-area:qt}
  .fiqtb td.c-price{grid-area:pr} .fiqtb td.c-note{grid-area:no} .fiqtb td.c-x{grid-area:x}
  .fiqtb td.c-cat{grid-area:it} .fiqtb td.c-basis{grid-area:de}
  .fiqed .fiqtb input{height:32px}
  .fiqtb tr.fiqop td.c-x .gpx{visibility:visible}
  .fiqt .fiqtsum{padding:12px 16px;gap:14px}
}
/* 양식 문서의 한 쪽(.fipage = A4 794 × 1123) — 미리보기(줄여 보임) · 인쇄 · 높이를 재는 무대(#fiDocStage)가 같은 규칙을 쓴다.
   그래서 아래 규칙은 창(.fidoc)이 아니라 쪽(.fipage)에만 건다. 맺음(.fipgsign)은 쪽 아래에 붙는다 */
#fiPrint{display:none}
#fiDocStage{position:absolute;left:-10000px;top:0;width:794px;visibility:hidden;pointer-events:none}
.fipage{--pp:53px;position:relative;box-sizing:border-box;width:794px;height:1123px;padding:var(--pp);overflow:hidden;background:#fff;color:#111;text-align:left}
.fiblk{display:flow-root}
.fipgsign{position:absolute;left:var(--pp);right:var(--pp);bottom:var(--pp)}
img.fb.none,img.fb:not([src]){display:none}
.filg{display:inline-flex;align-items:center;min-width:0}
.filg img.fb{height:40px;max-width:220px;object-fit:contain;object-position:left center}
.filg img.fb:not(.none)+.fbalt{display:none}
.fisl{position:relative;display:inline-block}
.fisl .in{color:#999;margin-left:6px;letter-spacing:0}
.fisl img.fb{position:absolute;left:50%;top:50%;width:60px;height:60px;max-width:none;transform:translate(-50%,-50%);object-fit:contain}
/* 공문 한 장 */
.fipage.filetter{--pp:68px;font-size:14.5px;line-height:1.75;word-break:keep-all}
.filetter .lh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:12px;border-bottom:1px solid #222;margin-bottom:26px}
.filetter .lh .filg{font-size:20px;font-weight:700}
.filetter .lh .ad{text-align:right;font-size:12.5px;line-height:1.55;color:#333}
.filetter .lm{padding-bottom:16px;border-bottom:2px solid #111;margin-bottom:24px}
.filetter .lm>div{display:flex;gap:26px;margin:5px 0}
.filetter .lm .k{flex:0 0 62px;font-weight:700;text-align:justify;text-align-last:justify}
.filetter .lm .v{flex:1;min-width:0;overflow-wrap:anywhere}
.filetter .lm .tt{margin-top:10px;font-weight:700}
.filetter .lb{--rtb:14.5px;line-height:1.9}
.filetter .lb li{margin-bottom:10px;padding-left:6px}
.filetter .la{display:flex;gap:8px;margin-top:22px}
.filetter .la .end{margin-left:18px}
.filetter .ls{text-align:center}
.filetter .ls .fm{font-size:15px;letter-spacing:.2em}
.filetter .ls .nm{font-size:23px;font-weight:700;letter-spacing:.28em;margin-top:6px}
.filetter .ls .fisl{font-size:14px;font-weight:400}
/* 견적서 한 장 */
.fipage.fisheet{font-size:13.5px;line-height:1.55}
.fipgsign .s7{margin-top:0;padding-right:22px}
.fisheet table{border-collapse:collapse}
.fisheet th,.fisheet td{border:1px solid #444;padding:4px 7px;vertical-align:middle}
.fisheet th{background:#f2f2f2;font-weight:600;white-space:nowrap}
.fisheet .s1{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;margin-bottom:16px}
.fisheet .s1 h1{font-size:30px;letter-spacing:.4em;margin:14px 0 0;text-align:center}
.fisheet .s2{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;margin-bottom:12px}
.fisheet .s2 .to{padding-top:19px}                  /* 왼쪽 맨 위 = 공급자 표 맨 위(쪽수 줄 16 + 3 · 결정 482) */
.fisheet .s2 .to>div{margin:0 0 14px}               /* 줄글 세 덩이 사이 숨(결정 476) */
.fisheet .s2 .to>div:last-child{margin-bottom:2px}
.fisheet .s2 .wr{font-size:12.5px;line-height:16px;color:#444}
.fisheet .s2 .pgn{font-size:12.5px;line-height:16px;text-align:right;margin-bottom:3px}  /* 쪽수 글자 — 공급자 표 위 오른쪽(결정 476) */
.fisheet .s2 .co{font-size:17px;border-bottom:1px solid #444;padding-bottom:2px;display:inline-block}
.fisheet .sup{width:100%;font-size:12.5px}
.fisheet .sup th.v{writing-mode:vertical-rl;letter-spacing:.3em;width:26px;padding:4px 2px}
.fisheet .s3{display:flex;align-items:baseline;gap:12px;border:1.5px solid #222;padding:8px 12px;margin:10px 0;font-size:15px}
.fisheet .s3 .k{font-weight:700;letter-spacing:.3em}
.fisheet .s3 .vat{margin-left:auto;font-size:13px}
.fisheet .tb{width:100%;margin:10px 0}
.fisheet .tb .nr{text-align:right} .fisheet .tb .c{text-align:center}
.fisheet .tb tr.end td{text-align:right;font-weight:600}
.fisheet .s6{border:1px solid #444;margin:10px 0}
.fisheet .s6 .k{background:#f2f2f2;padding:4px 8px;font-weight:600;border-bottom:1px solid #444}
.fisheet .s6 .tx{padding:8px;min-height:58px}  /* 비어도 두 줄 높이(결정 463) */
.fisheet .s7{text-align:right;margin-top:26px;font-size:15px;line-height:1.9}
.fisheet .s7 .in{color:#999;margin-left:6px}
@media print{
  body.fiprint{height:auto;background:#fff}
  body.fiprint > *:not(#fiPrint){display:none !important}
  body.fiprint #fiPrint{display:block !important}
  /* 쪽마다 종이 한 장 — 여백은 쪽(.fipage)이 스스로 가진다(이름 붙인 @page fidoc · 다른 인쇄의 14mm 여백과 겹치지 않게) */
  body.fiprint .fipage{page:fidoc;height:1122px;break-after:page}
  body.fiprint .fipgw:last-child .fipage{break-after:auto}
  @page fidoc{size:A4;margin:0}
  @page{size:A4;margin:14mm}
}

/* 고객사 「한 장 보기」(2026-10-03 · company.js 3-e) — 공용 모달 넓은 판 · 인쇄 때(body.coprint) 모달 내용만 · A4 한 장 */
.modal .box:has(> .coone){width:820px;max-height:92vh;overflow:auto}
.coone{font-size:14px;line-height:1.55;color:var(--l1)}
.coone .coone-acts{margin:0 0 6px}
.coone h3{font-size:18px;margin:0 0 2px}
.coone .coone-at,.coone .coone-sub,.coone .coone-none,.coone .coone-cap{color:var(--l2);font-size:14px}
.coone .coone-cap{margin:4px 0 2px}
.coone-per{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px}
.coone-s{border-top:1px solid var(--f1);padding:8px 0 10px;break-inside:avoid}
.coone-s h4{font-size:15px;margin:0 0 6px}
.coone-kv{display:flex;flex-wrap:wrap;gap:4px 28px}
.coone-kv .k{color:var(--l2);margin-right:8px}
.coone-tb{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:6px}
.coone-tb th,.coone-tb td{border:1px solid var(--f1);padding:3px 4px;text-align:center;font-size:14px;overflow-wrap:anywhere}
.coone-tb th{font-weight:600;background:var(--soft)}
.coone-cs th:nth-child(1){width:96px}.coone-cs th:nth-child(3){width:96px}
.coone-cs td:nth-child(2){text-align:left}
.coone ul,.coone ol{margin:2px 0 6px;padding-left:20px}
.coone li{margin:1px 0;overflow-wrap:anywhere}
.coone .coone-sub.late{color:var(--red)}
.coone-pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media print{
  body.coprint{height:auto;background:#fff}
  body.coprint > *:not(#modal){display:none !important}
  body.coprint #modal{position:static;display:block;background:none}
  body.coprint #modal .box{width:auto;max-width:none;max-height:none;overflow:visible;box-shadow:none;border-radius:0;padding:0}
  body.coprint .coone-acts,body.coprint .coone-per{display:none}
  body.coprint .coone-tb th{background:none}
}

/* 발행 대행(taxbill) — 설정 › 재무 동의 한 줄 */
.fiagree{display:inline-flex;align-items:center;gap:6px;font-size:14px;margin:0 8px}
.fiagree input{margin:0}

/* =====================================================================
   「홈」 첫째판-d(2026-10-17 · home.js · 접두 hd · 결정 628 · 확정 시안 `docs/mock/홈-시안-확정/첫째판d-*`) — 옛 세 단 · 경영 탭 절은 걷음
   가운데 800(결정 716) · 날짜 22 · 찾기 칸 52 · 줄 40(이름 칸 92) · 최근 연 것 36 · 600 아래 = 줄마다 세 줄(이름 / 제목 / 고객사 · 지연 · 외 N ›)
   ===================================================================== */
#vHome.hm{padding:0 0 40px}
.hm-in{width:800px;max-width:100%;margin:0 auto;padding-top:118px}   /* 폭 640 → 800(결정 716) · 가운데 = 본문 가운데(t3_37 (a-c) 실측) */
#app.sfold .hm-in{margin-left:max(0px,calc(50% - 428px))}           /* 사이드바 접힘(본문 왼쪽 56 비움) = 화면 가운데로 왼쪽 28(결정 749) · 좁으면 왼쪽 끝 · 펼침은 그대로 */
.hm-day{font-size:22px;font-weight:600;line-height:1.4;margin:0 0 16px;text-align:center}
.hm-q{height:52px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);background:#fff;display:flex;align-items:center;gap:10px;
  padding:0 14px 0 16px;color:rgba(0,0,0,.4);font-size:16px;cursor:text}
.hm-q:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.24)}
.hm-q:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hm svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hm svg.i{stroke-width:1.6}                                  /* 사이드바 그림(24 칸)을 16 · 18 에 — 선 굵기만 맞춤(찾기 겹창 줄과 같음) */
.hm-q svg.i{width:18px;height:18px;flex:none;color:var(--l2)}
.hm-q .ps{display:none}
.hm-q kbd{margin-left:auto;font:inherit;font-size:14px;color:var(--l2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);border-radius:5px;padding:0 6px;line-height:22px}
.hm-nd{margin-top:28px}
.hm-r{display:flex;align-items:center;height:40px;gap:10px;font-size:15px;padding:0 2px;border-radius:8px;cursor:pointer;min-width:0}
.hm-r:hover{background:var(--hover)}
.hm-r:focus-visible,.hm-rr:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.hm-r .lb{width:92px;flex:none;color:var(--l2);font-size:14px;white-space:nowrap}
.hm-r .lb b{color:var(--l1);font-weight:600;margin-left:4px}
.hm-r .ln{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.hm-r .ln svg,.hm-rr svg{width:16px;height:16px;flex:none;color:var(--l2)}
.hm-r .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hm-r .sb{display:contents}
.hm-r .s{color:var(--l2);font-size:14px;white-space:nowrap;flex:none}
.hm .late{font-size:14px;white-space:nowrap;flex:none}   /* 「N일 지연」 색 · 굵기는 할 일·일정 .pb-cst .late 와 한 규칙(아래 pbody 절) */
.hm-r .mo{margin-left:auto;color:var(--l2);font-size:14px;white-space:nowrap;flex:none;cursor:pointer}
.hm-r .mo:hover{color:var(--l1);text-decoration:underline;text-underline-offset:4px}
.hm-wait,.hm-wait:hover{cursor:default;background:none}
.hm-rc{margin-top:36px}
.hm-rc .gh{font-size:14px;color:var(--l3);margin:0 0 4px 2px}
.hm-rr{display:flex;align-items:center;height:36px;gap:10px;font-size:15px;color:var(--l2);padding:0 2px;border-radius:8px;cursor:pointer;min-width:0}
.hm-rr:hover{background:var(--hover)}
.hm-rr svg{color:var(--l3)}
.hm-rr .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hm-rr .s{font-size:14px;color:var(--l3);white-space:nowrap;flex:none}
.hm-rr .w{margin-left:auto;font-size:14px;color:var(--l3);white-space:nowrap;flex:none}
@media (max-width:600px){
  .hm-in{padding-top:28px}
  .hm-day{font-size:20px;margin-bottom:12px}
  .hm-q{height:44px;font-size:15px}
  .hm-q .pl,.hm-q kbd{display:none}
  .hm-q .ps{display:inline}
  .hm-nd{margin-top:20px}
  .hm-r{display:block;height:auto;padding:9px 2px;border-top:1px solid var(--line);border-radius:0;line-height:1.45}
  .hm-r:first-child{border-top:0}
  .hm-r .lb{display:block;width:auto}
  .hm-r .ln{display:flex;gap:8px;margin-top:2px}
  .hm-r .sb{display:block;font-size:14px;color:var(--l2)}
  .hm-r .sb>*+*::before{content:" · ";color:var(--l2);font-weight:400}
  .hm-r .mo{margin:0}
  .hm-wait{display:none}
  .hm-rc{margin-top:24px}
  .hm-rr{display:block;height:auto;padding:6px 2px;line-height:1.4}
  .hm-rr svg{display:none}
  .hm-rr .t{display:block}
  .hm-rr .w::before{content:" · "}
}
/* 달력 항목 한 줄 · 종류 칩(calgrid.js 4절 · 2026-10-07 「달력 통일」) — 홈 「달력」 · 일정 화면이 같은 모양.
   종류별 색: 일정 파랑 · 마감 주황(☐ · 끝낸 것 ☑ 흐리게) · 갱신 초록 · 자문 ✉ 빨간 테두리 · 캘린더 보라 · 남의 바쁜 시간 회색 */
.cgi{display:block;font-size:13px;line-height:1.35;padding:2px 5px;border-radius:4px;margin-top:3px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;cursor:pointer;background:#EEF4FC;color:#0b3d75}
.cgi .at{font-weight:600;margin-right:3px}
.cgi.busy{background:var(--f3);color:var(--l2);cursor:default}
/* 가일정의 후보(0108) — 날짜가 아직 안 정해진 일정 · 후보 날마다 점선(바탕 없음) */
.cgi.cand{background:#fff;outline:1px dashed #7aa7df;outline-offset:-1px}
.cgi.cand.busy{outline-color:var(--l3)}
.cgi.dl{background:#FFF4E5;color:#7a4500}
.cgi.dl.done{background:none;color:var(--l3);text-decoration:line-through}
.cgi.rn{background:#E8F5EE;color:#17603f}
.cgi.qa{background:#fff;box-shadow:inset 0 0 0 1px rgba(229,72,77,.35);color:#b3262b}
.cgi.lc{background:#EEEDFE;color:#4a3aa7;cursor:default}
.cgi.py{background:#FDEEF5;color:#8f1f55}
.cgi.py.done{background:none;color:var(--l3);text-decoration:line-through}
.cgi.more{background:none;color:var(--l2)}
.cgi.more:not([data-hd]){cursor:default}
/* 「▾ 목록」 — 공용 부품(app.js 5-1-1절 `ddlHtml` · 화면 사양 「미니멀」 1절 · 대표 2026-10-07 「나열하지 말고 누르면 선택」)
   단추 = 배경 없이 글자 + 가는 꺾쇠 · 올리면 그 칸에만 옅은 바탕 · 흐린 이름표 + 값 두 톤(값이 없으면 이름표만) · 꼭 채울 칸이 비면 파란 테두리
   목록 = 그 자리에 뜨는 작은 상자 · 고른 줄에 ✓(색 점이 있는 줄은 점이 찬다) */
.ddl{position:relative;display:inline-flex;align-items:center}
.ddlb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 7px;border:0;border-radius:999px;background:none;
  font-size:14.5px;font-weight:500;color:var(--l1);white-space:nowrap;cursor:pointer}
.ddlb .k{font-size:12.5px;font-weight:400;color:var(--l2)}
.ddl.nov .ddlb .k{font-size:14px}
/* 켠 수(여럿 고르는 단추 「필터 2 ⌄」 · 「고객사 1 ⌄」) — 단추 폭은 처음부터 「이름 + 수 + 꺾쇠」 만큼 잡아 둔다(대표 2026-10-08 「필터 숫자 꺾쇠가
   포함된 공간을 잡아두고 숫자가 생기면 꺾쇠만 밀면 되잖아」): 수가 없으면 수 칸(.c)은 사라지고 그만큼을 꺾쇠 **뒤** 빈 칸(.cr)이 채워 꺾쇠가 이름 바로 뒤에 서고,
   수가 생기면 빈 칸이 0 이 되어 꺾쇠만 오른쪽으로 밀린다 — 단추 폭 · 옆 단추 자리는 그대로(수 한 자리 폭 .62em · 이름과의 사이 4) */
.ddlb .c{flex:none;min-width:.62em;margin-left:-3px;font-style:normal;font-variant-numeric:tabular-nums;text-align:left}
.ddlb .c:empty{display:none}
.ddlb .cr{flex:none;width:0;margin-left:-7px}
.ddlb .c:empty~.cr{width:calc(.62em + 4px)}
.ddlb .cv{flex:none;width:6px;height:6px;margin-left:1px;border-right:1.5px solid rgba(0,0,0,.42);border-bottom:1.5px solid rgba(0,0,0,.42);transform:translateY(-2px) rotate(45deg)}
.ddlb:hover,.ddl.open .ddlb{background:var(--f3)}
.ddl.need .ddlb{padding:0 10px;box-shadow:inset 0 0 0 1.5px var(--blue)}
.ddl.need .ddlb .k{font-weight:600;color:var(--blue)}
.ddl.need .ddlb .cv{border-color:var(--blue)}
.ddlb[disabled]{color:var(--l3);background:none;cursor:default}
.ddll{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:30;flex-direction:column;align-items:stretch;gap:2px;padding:6px;
  min-width:120px;max-height:300px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.ddl.r .ddll{left:auto;right:0}
.ddln{flex:none;padding:6px 10px 2px;font-size:12.5px;color:var(--l3);white-space:nowrap}
/* 같은 단추 꼴의 날짜 칸(app.js `ddlDate`) — 값 글자 뒤에 보이지 않는 날짜 입력이 겹쳐 있다(누르면 달력 · 꺾쇠 없음) */
.ddld{position:relative;display:inline-flex;align-items:center;flex:none;height:30px;padding:0 7px;border-radius:6px;font-size:14.5px;white-space:nowrap;cursor:pointer}
.ddld .v{font-weight:500;color:var(--l1)}
.ddld .k{font-size:14px;color:var(--l2)}
.ddld:hover,.ddld:focus-within{background:var(--f3)}
.ddld input{position:absolute;left:0;top:0;width:100%;height:100%;min-width:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.ddld input::-webkit-calendar-picker-indicator{display:none}
/* 떠 있는 고르기 창(새로 만들기 장의 고객사 · 프로젝트 · 담당) — 누른 단추 아래에 떠서 제목 · 내용을 밀지 않는다(app.js `ddlPkPlace` 가 왼쪽을 맞춘다) */
.ddlpkw{position:relative;height:0}
.ddlpk{position:absolute;left:0;top:6px;z-index:30;width:420px;max-width:100%;background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.ddlpk .pk{padding:8px}
/* 윗줄 하나 — 새로 만들기 장(소통 칸 app.js `niTopHtml` · 일 한 장 work.js `wkTopHtml`)의 고르는 칸을 한 줄에(화면 사양 「미니멀」 3-1절)
   묶음(.g) 안 간격 8 · 묶음 사이 가는 세로 선(높이 20) + 양쪽 16 · 긴 이름은 말줄임 · 좁으면 줄(.r) 둘로 */
.nitop{display:flex;align-items:center;margin:20px -7px 0}
.nitop>.r{display:contents}                                     /* 자식만 — 목록 상자의 오른쪽 맞춤 class(.ddl.r)와 겹치지 않게 */
.nitop .g{display:inline-flex;align-items:center;gap:8px;flex:none}
.nitop .g.sh{flex:0 1 auto;min-width:0}                        /* 줄어드는 묶음 = 긴 이름이 드는 칸(고객사 · 프로젝트)뿐 */
.nitop .sep{flex:none;width:1px;height:20px;margin:0 16px;background:rgba(0,0,0,.12)}
.nitop .ddl{flex:none}
.nitop .ddl.b{flex:0 1 auto;min-width:0}
.nitop .ddl.b .ddlb{min-width:0;max-width:100%}
.nitop .ddl.b .ddlb .v{overflow:hidden;text-overflow:ellipsis}
.nitop.two{display:block}
.nitop.two>.r{display:flex;align-items:center;min-width:0}
.nitop.two>.r+.r{margin-top:4px}
.nitop.two>.r+.r>.sep:first-child{display:none}
.ddl.open .ddll{display:flex}
.ddli{display:flex;align-items:center;gap:6px;flex:none;height:32px;padding:0 10px;border:0;border-radius:6px;background:#fff;
  font-size:13.5px;color:var(--l1);text-align:left;white-space:nowrap;cursor:pointer}
.ddli:hover{background:var(--hover)}
.ddli[disabled]{color:var(--l3);opacity:.6;background:#fff;cursor:default}
.ddli.on{font-weight:600}
.ddli.on::after{content:"✓";margin-left:auto;padding-left:10px;color:var(--blue)}
/* 줄 옆 흐린 수 · 0 인 줄은 흐리게 제자리 · 가르는 선 · 다른 창으로 이어지는 줄(오른쪽 끝 지금 값 + ›) — 거르기 줄(2026-10-08) */
.ddli .n{font-style:normal;font-weight:400;color:var(--l3);margin-left:-2px}
.ddli.z{color:var(--l3)}
.ddlhr{flex:none;height:0;margin:4px 2px;border-top:1px solid var(--line)}
.ddlh{display:none}                                 /* 목록 제목 — 휴대폰 폭의 아래 장에서만(아래 ≤600 묶음) */
.ddli .val{margin-left:auto;padding-left:14px;font-size:13px;font-weight:400;color:var(--l2)}
.ddli.go::after{content:"›";padding-left:8px;font-size:16px;color:var(--l3)}
.ddli.dot{color:var(--l3);font-weight:400}
.ddli.dot.on{color:var(--l1)}
.ddli.dot.on::after{content:none}
/* 달력 종류의 색 점 — 켠 줄만 그 종류의 색으로 찬다 */
.cgd{display:inline-block;width:9px;height:9px;border-radius:5px;box-sizing:border-box;border:1.5px solid var(--l3);background:none}
.ddli.on .cgd.sc{background:#2a78d6;border-color:#2a78d6}
.ddli.on .cgd.dl{background:#c98500;border-color:#c98500}
.ddli.on .cgd.rn{background:#1baf7a;border-color:#1baf7a}
.ddli.on .cgd.qa{background:#fff;border-color:#e5484d}
.ddli.on .cgd.lc{background:#6155f5;border-color:#6155f5}
.ddli.on .cgd.py{background:#d6408a;border-color:#d6408a}
/* 경영 탭 — 핀 */
/* 일 한 장(work.js) 태그 칸 「행정」 칩 */
.ddlb.wkadm{color:var(--l2);font-weight:400}                     /* 같은 단추 꼴(꺾쇠 없음 · 켜면 ✓ 와 파란 글자 — AI 요약 창 「안 할 것 숨기기」 와 같다) */
.ddlb.wkadm.on{color:var(--blue);font-weight:600}
.ddlb.wkadm.on::before{content:"✓"}
/* 고객사 「계약」 탭 머리 — 갱신·자문료 신호(0092 fee_signal · 2026-10-03) */
.cofee{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;padding:10px 14px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-size:14px;color:var(--l1)}
.cofee.low{border-color:rgba(162,95,0,.35);background:#FFF8EE}
.cofee .lo{color:var(--orange);font-weight:600}
.cofee .late,.coone .coone-sub .nb.late{color:var(--red);font-weight:600}   /* 해지 통보 기한이 지남(2026-10-07) */
.tag.gypre.gynt.late{color:var(--red);font-weight:600;background:rgba(214,30,36,.08)}
.cofee .sp{flex:1}

/* =====================================================================
   「프로젝트」 메뉴(2026-10-03 · proj.js) — 고객사 목록 줄(.corow)과 같은 모양 · 칸만 다르다
   ===================================================================== */
#vProj{display:flex;flex-direction:column;min-height:0;flex:1}
#plChips .sp{flex:1}
#plChips .grp.add{margin-left:0}
.menu.plmenu{max-height:320px;overflow:auto}
.plrow .plco{flex:0 0 130px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plrow .plk{flex:0 0 80px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plrow .plper{flex:0 0 190px;font-size:14px;white-space:nowrap}
.plrow .pltk{flex:0 0 116px;font-size:14px;white-space:nowrap}
.plrow .pltk b{font-weight:500;color:var(--l1)}
.plrow .pltk b.late{color:var(--red)}
.plrow .plst{color:var(--l3)}      /* 끝난 것만 회색 「완료」 · 진행 중은 빈 칸(2026-10-13) */
.plrow.done .nm{color:var(--l2);font-weight:500}
.plrow.plnone{cursor:default}
.plrow.plnone:hover{background:none}
.plrow .nm .plm{display:none}
/* 좁은 화면 — 이름(밑에 고객사) · 마감·작업 두 칸만 · 칩 줄은 접혀 내려간다 */
@media (max-width:760px){
  #plChips{flex-wrap:wrap}
  #plChips .chip{white-space:nowrap}
  #plChips .grp.find{flex:1 1 100%;order:9}
  #plChips .grp.find .coq{width:100%}
  .plrow .plco,.plrow .plper,.plrow .plk,.plrow .adv,.plrow .plst{display:none}
  .plrow .nm{white-space:normal}
  .plrow .nm .plm{display:block;margin:2px 0 0}
  .plrow .pltk{flex-basis:auto}
}

/* 자문 활동 보고서(report.js · 2026-10-03) — 창 하나 · 장 하나(화면 = 인쇄와 같은 모양 + 칸 · 빼기) · 인쇄는 #rpPrint 한 장만 */
#rpPrint{display:none}
.modal .box:has(> .rpwrap){width:920px;max-width:96vw;max-height:92vh;overflow:auto}
.rpwrap .rptop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rpwrap .rptop b{font-size:17px}
.rpwrap .rpco{color:var(--l2);font-size:15px}
.rpwrap .rpsp{flex:1}
.rpwrap .rpst{font-size:13px;color:var(--l3)}
.rpwrap .rpctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.rpwrap .rpseg{display:inline-flex;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rpwrap .rpseg button{border:0;background:none;height:28px;padding:0 12px;font-size:14px;cursor:pointer}
.rpwrap .rpseg button.on{background:var(--blue);color:#fff}
.rpwrap .rpper{display:inline-flex;flex-wrap:wrap;gap:4px}
.rpwrap .rpdates{display:inline-flex;align-items:center;gap:4px}
.rpwrap .rpdates input{width:150px;height:28px;border:1px solid var(--line);border-radius:14px;padding:0 8px;font-size:14px}
.rpwrap select{height:28px;border:1px solid var(--line);border-radius:14px;padding:0 8px;font-size:14px;max-width:260px}
.rpwrap .rphint{font-size:13px;color:var(--l3);margin-bottom:10px}
.rpwrap .rpmsg{font-size:14px;color:var(--l3);margin:0 0 8px}
.rpsheet{background:#fff;color:#111;font-size:14px;line-height:1.6;padding:18px 22px;border:1px solid var(--line)}
.rpsheet h1{font-size:24px;text-align:center;letter-spacing:.2em;margin:6px 0 12px}
.rpsheet h2{font-size:15px;margin:0 0 6px;border-bottom:1px solid #999;padding-bottom:2px}
.rpsheet .to{font-size:16px;margin-bottom:6px}
.rpsheet table{border-collapse:collapse}
.rpsheet .rpmeta{width:100%;margin-bottom:12px}
.rpsheet .rpmeta th,.rpsheet .rpmeta td,.rpsheet .rptb th,.rpsheet .rptb td,.rpsheet .rpdl th,.rpsheet .rpdl td{border:1px solid #666;padding:3px 7px;text-align:left;vertical-align:top}
.rpsheet .rpmeta th,.rpsheet .rptb th,.rpsheet .rpdl th{background:#f2f2f2;font-weight:600;white-space:nowrap}
.rpsheet .rpsec{margin:14px 0}
.rpsheet .rpkp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rpsheet .rpk{border:1px solid #888;padding:6px 8px}
.rpsheet .rpk .k{font-size:13px;color:#444}
.rpsheet .rpk .n{font-size:18px;font-weight:700}
.rpsheet .rpch{margin-top:6px;font-size:14px}
.rpsheet .rpbar{display:grid;grid-template-columns:140px 1fr 60px;gap:8px;align-items:center;margin:3px 0}
.rpsheet .rpbar .b{background:#eee;height:12px;display:block}
.rpsheet .rpbar .b i{display:block;height:12px;background:#4a6fa5}
.rpsheet .rpbar .n{text-align:right}
.rpsheet .rptb{width:100%}
.rpsheet .rptb tr.out td{color:#999;text-decoration:line-through}
.rpsheet .rptb .x{width:44px;text-align:center}
.rpsheet .rptb .x input{width:16px;height:16px;margin:0;padding:0}
.rpsheet .rpmore{font-size:13px;color:#444;margin-top:4px;text-align:right}
.rpsheet .rpdl{width:100%}
.rpsheet .rpdl th{width:240px}
.rpsheet .rpnote{font-size:13px;font-weight:400;color:#555;margin-left:6px}
.rpsheet .rptx textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px}
.rpsheet .rptx .tx{white-space:normal}
.rpsheet .rpguide{font-size:13px;color:#555;margin-top:2px}
.rpsheet .rps9{text-align:right;margin-top:24px;font-size:15px;line-height:1.9}
.rpsheet .rps9 .in{color:#999;margin-left:6px}
.rpsheet .rpfoot{font-size:13px;color:#444;margin-top:12px;border-top:1px solid #ccc;padding-top:6px}
.rpsheet .rpby{font-size:12.5px;color:#888;text-align:right;margin-top:8px}      /* 「이 자문은 Firm OS 로 관리됩니다」 — 법인이 켰을 때만(2026-10-08) */
.rpsheet .rpband{background:#fdecea;color:#a3191e;border:1.5px solid #d61e24;font-weight:700;text-align:center;padding:4px 8px;margin-bottom:10px}
@media (max-width:640px){
  .rpsheet{padding:12px}
  .rpsheet .rpkp{grid-template-columns:repeat(2,1fr)}
  .rpsheet .rpbar{grid-template-columns:96px 1fr 48px}
  .rpsheet .rpdl th{width:auto}
}
@media print{
  body.rpprint{height:auto;background:#fff}
  body.rpprint > *:not(#rpPrint){display:none !important}
  body.rpprint #rpPrint{display:block !important}
  body.rpprint .rpsheet{border:0;padding:0}
  body.rpprint .rpsheet.internal{padding-top:34px}
  body.rpprint .rpband{position:fixed;top:0;left:0;right:0;margin:0}
  body.rpprint .rpsec.rpin{break-inside:avoid}
  @page{size:A4;margin:14mm}
}

/* =====================================================================
   「확인할 것 N」 단추 · 오른쪽 서랍(2026-10-03 홈 걸음 ② · home.js 7절 · 시안 장면 9 · 10 · 10-나 · 11)
   ===================================================================== */
/* 머리 「브리핑 N」 알약(.hdbfrow · .hdbfbtn)은 2026-10-17 전역 줄 「Brief N」 으로 걷었다(app.js 1-1f) */
/* 브리핑 셋째판(brief.js 10절 · 뿌리 #bfB3 · 2026-10-15 장면 ⑤-b · 옛 서랍 #bfBox 꼴은 걷음) — 잣대 = 확정 시안 `docs/mock/브리핑-시안-확정/` 셋째판
   (겹창 680 · 위아래 24 남김 · 상한 852 · 서랍 560 · 폭 600 이하 전체 화면 · 접힌 줄 40 · 사이 4 · 줄 40 · ✕ 는 머리 ✕ 보다 10 안쪽 · 줄 끝 단추 = 구성물 한 장 `.mkp` 꼴) */
#modal:has(> .box > #bfB3){background:rgba(0,0,0,.14);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
#modal:has(> .box > #bfB3)>.box{display:flex;flex-direction:column;overflow:hidden}
#modal:has(> .box > #bfB3.bf3-over)>.box{width:680px;max-width:96vw;max-height:min(852px,calc(100vh - 48px));padding:18px 16px 12px;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.08)}
#modal:has(> .box > #bfB3.bf3-drawer){justify-content:flex-end;align-items:stretch;background:rgba(0,0,0,.16);-webkit-backdrop-filter:none;backdrop-filter:none}
#modal:has(> .box > #bfB3.bf3-drawer)>.box{width:560px;max-width:100vw;height:100%;max-height:none;border-radius:0;padding:18px 8px 12px;box-shadow:-12px 0 40px rgba(0,0,0,.16)}
#modal:has(> .box > #bfB3.bf3-ph){align-items:stretch;justify-content:stretch;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
#modal:has(> .box > #bfB3.bf3-ph)>.box{width:100vw;max-width:100vw;height:100%;max-height:none;border-radius:0;padding:12px 0 8px;box-shadow:none}
#bfB3{display:flex;flex-direction:column;min-height:0;flex:1;text-align:left;color:var(--l1)}
.bf3-top{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 4px 0 16px;flex:none;position:relative}
.bf3-top h1{margin:0;font-size:22px;font-weight:600;line-height:1.5}
.bf3-dt{font-size:14px;color:var(--l2);padding-top:4px}
.bf3-sp{flex:1}
.bf3-ib{width:30px;height:30px;border:0;border-radius:8px;background:none;font-size:18px;line-height:1;color:var(--l2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bf3-ib:hover{background:var(--f4);color:var(--l1)}
.bf3-bk{display:flex;align-items:center;height:36px;padding:0 8px 0 12px;margin-bottom:4px;flex:none;position:relative}
.bf3-back{height:32px;padding:0 14px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);background:#fff;display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--l1);cursor:pointer;white-space:nowrap;flex:none}
.bf3-i{width:16px;height:16px;margin:0 1px;flex:none;color:var(--l2);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bf3-menu{position:absolute;right:4px;top:38px;width:216px;background:#fff;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08);padding:6px;z-index:5}
.bf3-menu button{display:flex;align-items:center;gap:10px;width:100%;height:34px;border:0;background:none;padding:0 10px;border-radius:7px;font-size:14px;color:var(--l1);cursor:pointer;text-align:left}
.bf3-menu button:hover{background:var(--f4)}
.bf3-menu .ck{margin-left:auto;font-size:13px}
.bf3-body{flex:1;min-height:0;overflow-y:auto;margin:0 -8px;padding:0 8px;scrollbar-width:none}
.bf3-ph .bf3-body{margin:0;padding:0}
.bf3-bnd{background:var(--f3);border-radius:8px;margin:8px -8px 2px;padding:0 8px}
.bf3-bnd+.bf3-bnd{margin-top:4px}
.bf3-drawer .bf3-bnd{border-radius:0}
.bf3-ph .bf3-bnd{margin:8px 0 2px;padding:0;border-radius:0}
.bf3-gn{font-size:16px;font-weight:600;height:30px;display:flex;align-items:center;padding:0 16px;position:relative;margin-top:6px;color:var(--l1)}
.bf3-gn span{font-weight:400;font-size:14px;color:var(--l2);margin-left:6px}
.bf3-fw{position:relative}
.bf3-fold{height:40px;margin-top:0;width:100%;border:0;background:none;cursor:pointer;border-radius:8px;font:inherit;font-size:16px;font-weight:600;text-align:left}
.bf3-fold:hover{background:var(--f3)}
.bf3-fold i{font-style:normal;font-weight:400;font-size:14px;margin-left:6px}
.bf3-ud{position:absolute;left:1px;top:16px;width:8px;height:8px;border-radius:4px;background:var(--blue)}
.bf3-gn .bf3-ud{top:16px}
.bf3-rows{padding-bottom:6px}
.bf3-r{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 16px;border-radius:8px;font-size:16px;white-space:nowrap;position:relative;color:var(--l1)}
.bf3-r:hover{background:var(--f4)}
.bf3-bnd .bf3-r:hover{background:var(--f3)}
.bf3-r .t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;white-space:nowrap}
.bf3-r .tm{font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.bf3-r .co{font-size:14px;color:var(--l2);flex:none}
.bf3-r .ai-pill{flex:none}
.bf3-r .fx{margin-left:auto;font-size:14px;color:var(--l1);flex:none;padding-left:8px}
.bf3-r .fx.late{color:var(--red);font-weight:600}
.bf3-r.un .t{font-weight:600}
.bf3-r.dn .t{color:var(--l2);text-decoration:line-through}
.bf3-r.gone .t,.bf3-r.gone .co{color:var(--l3);text-decoration:line-through}
.bf3-r.done .t{color:var(--green);font-weight:600}
.bf3-r button.co{border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--l2);cursor:pointer;text-align:left}.bf3-r button.co:hover{text-decoration:underline}   /* 만든 할 일 · 일정 한 장으로(결정 719) */
.bf3-lk{border:0;background:none;padding:0;font:inherit;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bf3-ck{width:18px;height:18px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.3);background:#fff;flex:none;border:0;cursor:pointer;padding:0}
.bf3-ck.on{background:rgba(0,0,0,.36);box-shadow:none}
.bf3-ck.off{box-shadow:none;background:none;cursor:default}
.bf3-ract{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none;padding-left:10px}
.bf3-mkp{display:inline-flex;align-items:center;height:30px;padding:0 13px;border:0;border-radius:999px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:var(--l1);background:#fff;cursor:pointer;white-space:nowrap}
.bf3-mkp:hover{background:var(--f4)}
.bf3-xb{width:28px;height:28px;border-radius:14px;border:0;background:none;display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--l2);cursor:pointer;flex:none;margin-right:3px}
.bf3-xb:hover{background:rgba(0,0,0,.06);color:var(--l1)}
.bf3-undo{border:0;background:none;padding:0;margin:0 4px;color:var(--blue);font-size:13.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.bf3-more{display:flex;align-items:center;height:26px;padding:0 12px 0 44px;border:0;background:none;font:inherit;font-size:14px;color:var(--l2);white-space:nowrap;cursor:pointer}
.bf3-more:hover{color:var(--l1)}
.bf3-none{font-size:16px;padding:20px 16px 14px;color:var(--l1)}
.bf3-r.b2{height:auto;min-height:40px;align-items:flex-start;padding:4px 12px 4px 16px}
.bf3-r.b2 .lead{display:inline-flex;align-items:center;height:24px;flex:none}
.bf3-r.b2 .mid{flex:1;min-width:0}
.bf3-r.b2 .l1{display:flex;align-items:center;gap:8px;line-height:24px}
.bf3-r.b2 .l2{display:flex;align-items:center;gap:8px;line-height:20px}
.bf3-r.b2 .l2 .fx{margin-left:0;padding-left:0}
.bf3-r.b2 .bf3-ud{top:12px}
.bf3-r.b2 .bf3-ract{align-self:center;margin-left:0;padding-left:4px}
.bf3-r [disabled]{opacity:.5;cursor:default}
/* 라이브러리 「나에게 열린 것」 탭 */
.libopnd{font-size:14px;color:var(--l3);margin:4px 10px 8px}
.libor{display:grid;grid-template-columns:52px minmax(0,1fr) 110px 90px 80px;gap:10px;align-items:center;min-height:44px;padding:0 10px;
  border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.libor:hover{background:var(--hover)}
.libor.hd{min-height:32px;font-size:13px;color:var(--l3);cursor:default}
.libor.hd:hover{background:none}
.libor .k2{font-size:13.5px;color:var(--l3)}
.libor .tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libor .w{font-size:14px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libor .d{font-size:13.5px;color:var(--l3);white-space:nowrap}
.libnw{font-size:12.5px;font-weight:600;color:var(--blue);background:rgba(0,112,210,.08);border-radius:5px;padding:0 6px;margin-left:6px;vertical-align:1px}
@media (max-width:560px){
  .bf-sgr .bf-sgx{white-space:normal}            /* 휴대폰 — 제안 글은 두 줄로 꺾이고 단추는 오른쪽 그대로 · 단추 높이 34 */
  .bf-sgr .btn.sm,.bf-sgr .bf-hx{height:34px}
  .libor{grid-template-columns:40px minmax(0,1fr) 70px;font-size:14px}
  .libor>span:nth-child(4),.libor>span:nth-child(5){display:none}
}

/* =====================================================================
   2026-10-03 소통 한 장 — 수신함 펼침(시안 `docs/mock/소통화면-시안-확정` 장면 1·1-나·2·2-나·5)
   흰 바탕 · 펼친 줄(목록 줄 + 펼친 칸) 왼쪽 파란 2px 선 · 아래 구분선 · 들여쓰기 68px ·
   머리 한 줄 + 17px 제목 + 세 층(64px 이름 칸 · 층 사이 가는 선 · 상자 없음). app.js `commOneHtml`
   ===================================================================== */
#list .row.open{background:#fff;border-radius:0;box-shadow:inset 2px 0 0 var(--blue)}
.det.cmone{background:#fff;padding:4px 16px 18px 68px;box-shadow:inset 2px 0 0 var(--blue);border-bottom:1px solid var(--line)}
.cmone .cmhd{display:flex;align-items:center;gap:6px 10px;margin:0;min-height:34px;font-size:14px;color:var(--l2);flex-wrap:wrap}
.cmone .cmhd .sep{color:rgba(0,0,0,.25)}
.cmone .cmhd .sp{flex:1}
.cmone .cmhd .cmch{color:var(--l1);white-space:nowrap}
.cmone .cmhd .cmwho{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cmone .cmhd .cmwho .me,.cmone .cmhd .cmwho .ar{color:var(--l2);font-weight:400}
.cmone .cmhd .cmwho .ar{margin:0 4px}
.cmone .cmhd .cmwho .rc{color:var(--l1);font-weight:600}
.cmone .cmhd .cmcc{border:0;background:none;padding:0;height:auto;font:inherit;font-size:14px;color:var(--l2);cursor:pointer;white-space:nowrap}
.cmone .cmhd .cmcc:hover{color:var(--blue)}
.cmone .cmhd .cmat{font-variant-numeric:tabular-nums;white-space:nowrap}
.cmone .cmhd .cmat.ed{border:0;border-bottom:1px dotted var(--l3);border-radius:0;background:none;padding:0;height:auto;font:inherit;font-size:14px;color:inherit;cursor:pointer}
.cmone .cmhd .cmat.ed:hover{color:var(--blue);border-bottom-color:var(--blue)}
.cmone .cmhd .cmatw{position:relative;display:inline-flex}
/* 숨은 날짜 칸 — 누르면 브라우저 기본 날짜·시각 고르기가 이 자리에 선다(`showPicker`) */
.cmone .cmhd .cmatw #edAt{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;pointer-events:none}
.cmone .cmhd .seg{border-radius:12px;border-color:rgba(0,0,0,.14)}
.cmone .cmhd .seg button{height:22px;padding:0 8px;font-size:12.5px;color:var(--l3)}
.cmone .cmhd .seg button.on{background:rgba(0,0,0,.06);color:var(--l1)}
.cmone .cmhd .cmdir{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid rgba(0,0,0,.14);border-radius:12px;
  font-size:12.5px;font-weight:600;color:var(--l1);background:rgba(0,0,0,.06);white-space:nowrap}
.cmone .cmhd .acts{margin-left:0;display:flex;gap:10px;align-items:center}
.cmone .cmhd .acts .sm{height:24px;padding:0 10px;font-size:13px}
/* 질의 머리 줄 끝 [녹음 올리기] — 글자 단추(배경 · 테두리 없이 · 올리면 옅은 바탕 · 2026-10-07 ⋯ 밖으로) */
.cmone .cmhd .acts .cmrec{height:24px;padding:0 7px;border:0;border-radius:6px;background:none;font:inherit;font-size:14px;color:var(--l2);cursor:pointer;white-space:nowrap}
.cmone .cmhd .acts .cmrec:hover{background:var(--f3);color:var(--l1)}
.cmone .cmhd .acts .cmrec[disabled]{color:var(--l3);cursor:default;background:none}
.cmone .cmhd .acts .go,.cmone .cmhd .acts [data-lnopen],.cmone .cmopen{border:0;background:none;padding:0;height:auto;
  font:inherit;font-size:14px;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.cmone .adl{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 10px;font-size:14px;color:var(--l3);padding:0 0 6px 2px}
.cmone .adl b{color:var(--l1);font-weight:400;overflow-wrap:anywhere}
.cmone .cmttl{display:block;font-size:17px;font-weight:600;line-height:1.45;margin:2px 0 8px;color:var(--l1)}
.cmone input.cmttl{width:100%;max-width:760px;border:0;border-radius:0;outline:0;background:none;padding:0 0 1px;height:auto;font-family:inherit}
.cmone input.cmttl:hover{box-shadow:0 1px 0 rgba(0,0,0,.18)}
.cmone input.cmttl:focus{box-shadow:0 1px 0 var(--blue)}
/* 세 층 — AI 요약 → 원문 → 메모 */
.cmone .ly{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:7px 0;align-items:start}
.cmone .ly+.ly{border-top:1px solid var(--line)}
.cmone .ly>.lk{font-size:13.5px;color:var(--l3);padding-top:2px;white-space:nowrap}
.cmone .ly>.bd{font-size:15px;line-height:1.75;min-width:0;color:var(--l1)}
/* 「요약」 칸 = `.ai-box`(머리 「(AI) 요약 · 만든 시각 … 다시 만들기」 · 2026-10-08 — 보라 점선 칸 · 알약 「AI 요약」 · 점선 알약 단추를 걷음) */
.cmone .ly.ai>.bd.ai{line-height:1.7}
.cmone .ly.ai>.bd.ai b{color:var(--l1);font-weight:600}
.cmone .cmwhy{font-size:14px;color:var(--l3)}
.cmone .cmraw.fold .cmall{display:none}
.cmone .cmraw:not(.fold) .cmpeek{display:none}
.cmone .cmpeek .one1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmone .cmtog{display:inline-block;border:0;background:none;padding:0;height:auto;margin-top:2px;font:inherit;font-size:13.5px;color:var(--l3);cursor:pointer}
.cmone .cmtog:hover{color:var(--blue)}
.cmone iframe{border:0;border-radius:0}
.cmone .files{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:13.5px}
.cmone .files .link{margin:0;border:1px solid var(--line);border-radius:8px;padding:2px 10px;font-size:13.5px;color:var(--l1);background:#fff;text-decoration:none}
.cmone .files .link::before{content:'📎 '}
.cmone .files .link:hover{border-color:var(--blue)}
.cmone .edit textarea{display:block;width:100%;min-height:0;max-height:60vh;overflow:auto;border:0;border-radius:0;padding:0;resize:none;outline:0;
  background:none;font:inherit;font-size:15px;line-height:1.75;color:var(--l1)}
.cmone .edit textarea:focus,.cmone .memo textarea:focus{box-shadow:0 1px 0 var(--blue)}
.cmone .edit .cmst{display:flex;gap:10px;font-size:13px;color:var(--l3);min-height:18px}
.cmone .edit .cmst .st{margin-left:auto}
.cmone .memo{margin-top:0}
.cmone .memo textarea{width:100%;min-height:0;max-height:40vh;overflow:auto;border:0;border-radius:0;padding:0;resize:none;outline:0;
  background:none;font:inherit;font-size:15px;line-height:1.75;color:var(--l1)}
.cmone textarea::placeholder,.cmone input.cmttl::placeholder{color:rgba(0,0,0,.36)}
.cmone .memo .mst{min-height:0}
/* 꼬리 한 줄(2026-10-09 · 확정 시안 머리한줄 장면 4 · 5) — 글 아래 「전체 N줄 ▸ · 참조 N ▸ · 메모 ＋ …… (AI) 요약 · 열기 ↗」.
   넓은 화면 = `.cmsub.cmtail`(머리 줄 꼴 `.cmhd` 를 입는다) · 좁은 화면 = `.cmfoot.cmtail`(열기 ↗ 는 ≤560 에서만 — 넓으면 머리 끝에 있다) */
.cmone .cmtail{margin-top:2px}
.cmone .cmtail .cmtog{margin-top:0}
.cmone .cmall>.cmtog.cmtop{display:block;margin:0 0 4px}      /* 펼친 글 맨 위 「접기 ▴」(꼬리 단추와 같은 동작) */
.cmone .cmmadd{display:inline-block;border:0;background:none;padding:0;height:auto;font:inherit;font-size:13.5px;color:var(--l3);cursor:pointer;white-space:nowrap}
.cmone .cmmadd:hover{color:var(--blue)}
.cmone .cmfoot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:30px;font-size:13.5px}
.cmone .cmfoot .sp{flex:1}
.cmone .cmfoot .cmopen{display:none}
/* 주소 한 줄(「참조」 를 누르면 꼬리 바로 아래 · 올리면 세 줄 전부) · 메모(적었으면 글 아래 흐린 글) */
.cmone .adl.one{display:block;padding:0 0 2px;font-size:13.5px;color:var(--l3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmone .adl.one .ar{margin:0 3px}
.cmone .cmmw .memo textarea{font-size:14px;color:var(--l2)}
.cmone .edit .cmst:has(.st:empty){min-height:0}      /* 저장 글이 없을 때 글과 꼬리 사이를 벌리지 않는다 */
/* 좁은 화면(≤560 · 장면 5) — 층 이름 칸이 내용 위 작은 줄로 · 들여쓰기 없음 · 열기 ↗ 는 꼬리 오른쪽 */
@media (max-width:560px){
  .det.cmone{padding:4px 12px 14px 12px}
  .cmone .ly{grid-template-columns:minmax(0,1fr);gap:2px}
  .cmone .ly>.lk{padding-top:0}
  .cmone .cmhd .acts .go,.cmone .cmhd .acts [data-lnopen],.cmone .cmhd .acts .cmopen{display:none}
  .cmone .cmfoot .cmopen{display:inline}
  .cmone .cmttl{font-size:16px}
}
/* ---- 2026-10-03 소통 한 장 ② — 고객사 기록 펼침 · 한 건 화면 질의 기둥 · 줄 모드 머리 · 수신함 머리의 고객사 링크 ---- */
.cmone .cmhd .cmcolink{color:var(--l1);text-decoration:none;border-bottom:1px dotted var(--l3);white-space:nowrap}
.cmone .cmhd .cmcolink:hover{color:var(--blue);border-bottom-color:var(--blue)}
/* ---- 2026-10-03 밤 손질(대표 그림) — 넓은 수신함 · 고객사 기록: 목록 줄이 머리(펼친 줄 보낸 사람 · 제목 진하게) ·
   펼친 칸은 목록 줄 제목 칸과 같은 왼쪽 선(`--cmx` 는 app.js `commOneFit` 이 잰다)에서 작은 줄 하나 → 층.
   그 밖(한 건 화면 · 좁은 화면)은 진한 「누가 → 누구 · 언제」 + 뒤에 작은 칩 + 큰 제목. 층 이름 칸은 걷는다(본문이 제목과 같은 선). ---- */
#list .row.open .from,#list .row.open .subj{color:var(--l1);font-weight:600}
.det.cmone.cm-lean{padding-left:var(--cmx,198px)}
.cmone .cmsub{min-height:30px;font-size:13.5px;gap:6px 12px}
.cmone .cmhd .cmmain{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:15px;font-weight:600;color:var(--l1)}
.cmone .cmhd .cmmain .cmwho .me,.cmone .cmhd .cmmain .cmwho .rc{color:var(--l1);font-weight:600}
.cmone .cmhd .cmmain .cmwho .ar{color:var(--l3);font-weight:400}
.cmone .cmhd .cmmain .cmat,.cmone .cmhd .cmmain .cmat.ed{font-size:15px;font-weight:600;color:var(--l1)}
.cmone .cmhd .cmmeta{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--l3)}
.cmone .cmhd .cmmeta .cmch{color:var(--l3)}
.cmone .cmhd .cmmeta .cmcolink{color:var(--l2)}
.cmone .cmhd .cmmeta .cmcc{font-size:13px;color:var(--l3)}
.cmone .cmttl{font-size:19px;margin:4px 0 6px}
.cmone.cm-lean input.cmttl{font-size:15px;margin:2px 0 2px}   /* 목록 줄이 머리 — 사람 줄 제목 고치는 칸은 목록 줄 제목 크기 */
/* ---- 2026-10-04(대표 · 「노션처럼」) — 펼친 사람 줄은 목록 줄 칸이 그 자리에서 고친다: 제목 끝 연필(✎ · 흐리게 늘) → 그 자리 제목 칸 ·
   날짜 칸 = 점선 밑줄 글자(누르면 날짜·시각 고르기 · 숨은 칸 `edAt`) ---- */
.row .subj .ttled{border:0;background:none;padding:0 4px;margin-left:2px;height:22px;font-size:14px;line-height:1;color:var(--l3);opacity:.7;cursor:pointer;
  vertical-align:1px;border-radius:5px;font-weight:400}
.row .subj .ttled::before{content:"✎"}
/* 접힌 줄의 AI 요지(app.js `rowGistHtml` · 확정 시안 목록요지 안 B) — 제목 뒤 8 띄고 작은 알약 · 5 띄고 흐린 글 14(굵지 않게 — 안 읽은 줄 제목이 굵어도) ·
   제목 칸(.subj)의 말줄임이 그대로 자른다 */
.row .subj .rgpill{margin-left:8px;vertical-align:1px}
.row .subj .rgist{margin-left:5px;font-size:14px;font-weight:400;color:var(--l3)}
.row .subj.rgoff .rgpill,.row .subj.rgoff .rgist{display:none}      /* 남는 폭이 좁으면 알약째(app.js `rowGistFit`) */
.row .co .cell.pk{margin-left:4px;padding:0 3px;color:var(--l3);font-size:13px}   /* 펼친 줄 고객사 칸 — 이름 = 고객사 화면 링크 · ▾ = 고르기 */
.row .co .cell.pk:hover{color:var(--blue)}
.row .subj .ttled:hover{opacity:1;color:var(--blue);background:var(--hover)}
.row.open .subj:has(.ttled),.row.open .subj:has(.ttlin){white-space:normal;overflow:visible}   /* 좁은 폭에서 말줄임에 연필이 묻히지 않게 — 펼친 줄만 */
.row .subj .ttlin{width:100%;max-width:520px;height:28px;padding:0 8px;margin:-4px 0;border:1px solid var(--blue);border-radius:6px;background:#fff;
  font:inherit;font-size:15px;font-weight:600;color:var(--l1);box-shadow:0 0 0 3px rgba(0,112,210,.15)}
.row .subj .ttlin:focus{outline:none}
.row .date.ed .cmatw{position:relative;display:flex;justify-content:flex-end;width:100%}
.row .date.ed .cmat.ed{border:0;border-bottom:1px dotted var(--l3);border-radius:0;background:none;padding:0;height:auto;font:inherit;font-size:14px;
  color:var(--l2);cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .date.ed .cmat.ed:hover{color:var(--blue);border-bottom-color:var(--blue)}
.row .date.ed #edAt{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;pointer-events:none}
.cmone .ly{display:block;padding:6px 0}
.cmone .ly>.lk{display:none}
.cmone .ly>.lk:has(.fx){display:block;padding:0 0 2px}          /* 한 건 화면 좁은 폭 — 메모 · AI 요약 접고 펴기 단추 */
.cmone.cmcase .ly.ai:not(.empty)>.lk{display:block;padding:0 0 4px}
.cmone.cmcase .ly.ai.empty{padding:2px 0}
/* 2026-10-04(대표 「권함대로」) — 한 건 화면도 수신함 펼침과 같은 꼴: 빈 AI 요약은 머리 줄의 작은 [AI 요약] 단추(`.csd .ai` 점선 상자를 입지 않는다) ·
   보일 것이 없는 원문 층은 세우지 않는다 */
.csd .cmone .cmhd .ai.none{display:inline-flex;border:0;padding:0;border-radius:0;background:none}
.cmone .ly.cmraw.none{display:none}
@media (max-width:560px){ .cmone .cmttl{font-size:17px} }
/* 한 건 화면 질의 기둥 · 줄 모드 — 바탕 · 선 없이 기둥 안에 그대로(`.csd .ai` 점선 상자 · `.csd .qt pre` 회색 상자를 걷는다) */
.cmone.cmcase{padding:0;margin:0 0 20px}
.cmone.cmcase .cmhd{margin-bottom:4px}
.cmone .ly.ai{border:0;border-radius:0;background:none;font-size:inherit;color:inherit}
.cmone.cmcase .bd.ai .ai-box>div{margin:1px 0}
.cmone.cmcase .bd.ai .ai-box>.h{margin-bottom:4px}
.cmone.cmcase .ly.ai.empty>.bd.ai{display:block}
.cmone.cmcase .ly.nf>.bd{display:none}
.cmone.cmcase .ly .lk .fx{border:0;background:none;padding:0;font:inherit;font-size:13.5px;color:var(--l3);cursor:pointer;white-space:nowrap}
.cmone.cmcase .qt{margin-top:8px;font-size:13.5px;color:var(--l3)}
.cmone.cmcase .qt .fx{border:0;background:none;padding:0;font:inherit;color:var(--l3);cursor:pointer}
.cmone.cmcase .qt .fx:hover{color:var(--blue)}
.cmone.cmcase .qt pre{background:none;border-radius:0;border-left:2px solid rgba(0,0,0,.14);padding:0 0 0 10px;color:var(--l3);font-size:14px}
.cmone.cmcase #csMemo{width:100%;min-height:0;max-height:40vh;overflow:auto;border:0;border-radius:0;padding:0;resize:none;outline:0;
  background:none;font:inherit;font-size:15px;line-height:1.75;color:var(--l1)}
.cmone.cmcase #csMemo:focus{box-shadow:0 1px 0 var(--blue)}
.cmone.cmcase .csrec:empty{display:none}
.cmone.cmcase .cmhd .pmw{position:relative;display:inline-flex}
.cmone .cmmore{width:28px;height:28px;border:0;border-radius:14px;background:none;color:var(--l2);font-size:17px;line-height:1;cursor:pointer}
.cmone .cmmore:hover,.cmone .cmmore.on{background:var(--f2)}
.cmone.cmcase .cmhd .menu.row-menu{top:30px;right:0}
.cmone.cmln .lnraw{margin-top:8px}.cmone.cmcase .att.files{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.cmone.cmcase .att.files .fnm{border:1px solid var(--line);border-radius:8px;padding:2px 10px;font-size:13.5px;color:var(--l2);background:#fff}
/* 운영자 페이지 /ops/ (2026-10-04 · ops/page.js) — 위 띠 한 줄 + 운영자 절(설정 화면의 .stsec 그대로) */
.oppmain{height:100%;overflow:auto;box-sizing:border-box;padding:20px 24px 40px;max-width:1100px;margin:0 auto}
.opptop{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:15px}
.opptop .link{margin-left:auto;font-size:14px}
.oppwait{height:26px;padding:0 10px;border:0;border-radius:13px;background:rgba(162,95,0,.1);color:var(--orange);font-size:13.5px;font-weight:600}
.oppwait:hover{background:rgba(162,95,0,.16)}

/* =====================================================================
   휴대폰 폭 작은 묶음(2026-10-07 · `docs/검토-2026-10-07-휴대폰-폭.md` 3·4절 · ≤600 공용 규칙)
   ---------------------------------------------------------------------
   ⓐ 글 칸 16px — 그보다 작으면 아이폰이 칸을 누를 때마다 화면을 키운다(큰 제목 칸은 그대로)
   ⓑ 설정의 표 — 칸 글자를 꺾지 않는다(표는 제 상자 안에서 가로로 굴러간다 · 위 `#stSecAdvisers{overflow-x:auto}`)
   ⓒ 단추 · 칩 — 모양은 그대로 두고 **누르는 자리만** 위아래로 44px 까지(보이지 않는 ::after)
   ⓓ 그 자리에서 뜨는 창 — 메뉴 · 종은 화면 아래에 붙은 장, 칸 고르기 창(검색칸이 있어 글자판에 가리지 않게)은 화면 위쪽에 붙은 장
   ⓔ 자문 목록 칩 줄은 꺾인다 · 고객사 머리 「저장됨」 은 잘리지 않는다
   ===================================================================== */
.cod .top .crumb{min-width:0}
.cod .top .saved{flex:0 0 auto;white-space:nowrap}
.nb{white-space:nowrap}
@media (max-width:600px){
  :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not(.h1in):not(.cmttl),textarea,select){font-size:16px !important}
  .wktitle input{font-size:26px !important}      /* 큰 제목 칸(고객사 이름 `.h1in` · 일 제목 · 메일 제목 `.cmttl`)은 제 크기 그대로 */
  .sttbl th,.sttbl td{white-space:nowrap}
  .sttbl .stadd td,.sttbl .stadvx td{white-space:normal}
  .primary,.btn{height:40px;padding:0 16px;font-size:15px}        /* 단추 꼴 — 휴대폰은 보통 단추 40(작은 것은 28 그대로 · 닿는 자리만 44 로 넓힌다) */
  :where(.primary,.btn.pri)~.sm,.sm:where(:has(~.primary,~.btn.pri)),.modal .acts>.sm{height:40px;padding:0 16px;font-size:15px}
  .sm,.chip,.primary,.mgtab{position:relative}
  .sm::after,.chip::after,.primary::after,.mgtab::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;transform:translateY(-50%)}
  .menu,.ddll,.dd{position:fixed !important;left:8px !important;right:8px !important;top:auto !important;bottom:8px !important;
    width:auto !important;min-width:0;max-width:none;max-height:70vh;overflow:auto;z-index:70;border-radius:14px;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.18),0 -8px 32px rgba(0,0,0,.2)}
  .menu{padding:6px}
  .menu .mi,.ddli{height:44px;font-size:15px;padding:0 14px}
  .ddlb,.ddld{height:40px}                       /* 「▾ 목록」 단추 — 꼴은 같고 높이만 40(화면 사양 「미니멀」 8절) */
  .ddlh{display:block;flex:none;padding:8px 14px 2px;font-size:13px;color:var(--l3)}
  /* 새로 만들기 장 — 전체 화면 · 윗줄은 두 줄 · 묶음 사이 선 양쪽 10(「미니멀」 8절) */
  #wk .box.wksheet{width:100vw;max-width:100vw;height:100vh;height:100dvh;min-height:0;max-height:none;border-radius:0}
  .nitop{display:block;margin-top:12px}
  .nitop>.r{display:flex;align-items:center;min-width:0}
  .nitop>.r+.r>.sep:first-child{display:none}
  .nitop .sep{margin:0 10px}
  .wktitle{margin:18px 0 12px}
  .nift .save{display:none}
  .menu .mi.sepline{height:48px}
  .cellpk,.ddlpk{position:fixed !important;left:8px !important;right:8px !important;top:56px !important;bottom:auto !important;width:auto !important;max-width:none;z-index:70;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.18),0 8px 32px rgba(0,0,0,.2)}
  #csChips .grp.tabs{flex-wrap:wrap;flex:1 1 100%}
  #csChips .csflt{flex-wrap:wrap;flex:1 1 100%;margin-left:0}
  .cotabs .copills{overflow-y:hidden}            /* 칩의 누르는 자리(::after 44px)가 알약 줄을 세로로 3px 굴리던 것(리뷰 P2) */
  /* 꺾인 칩 줄 사이 9px — 누르는 자리(44px)가 이웃 줄의 칩 가장자리를 덮지 않게(가장 낮은 칩 26px 기준 · 리뷰 P1) */
  #chips,#csChips,#coChips,#sxChips,#libChips,#tkChips,#plChips,
  #chips .grp,#csChips .grp,#csChips .csflt,#coChips .grp,#libChips .grp,#tkChips .grp,#plChips .grp{row-gap:9px}
}

/* 묶음14-자문대화 — 자문 대화 한 장(2026-10-09 · 걸음 ① 화면 틀 · case.js `.csd.cv` · 확정 시안 `docs/mock/자문스레드-시안`)
   머리 세 줄(제목 20 · 값 한 줄 14 회색 · 「이 대화」 띠) + 두 기둥 1 : 1. 항목 = 메타 한 줄 + 글(상자 없음) · 답변은 옅은 회색 · 왼쪽 30 들임.
   ★ 이 구역은 덧붙이기만 한다 — 위쪽 규칙은 그 주인이 고친다(묶음 14 경계 · 같은 파일을 둘이 안 고친다). */
/* 첫째 줄 — ‹ 자문 · 제목 · 상태 …… 저장됨 ⋯ */
.csd.cv .cvtop{gap:10px;margin:0 0 2px;min-height:36px;color:var(--l1)}
.csd.cv .cvtop .cvback{flex:none;color:var(--l3);font-size:14px;white-space:nowrap;cursor:pointer}
.csd.cv .cvtop .cvback:hover{color:var(--l1);text-decoration:none}
.csd.cv .cvtop .title{font-size:20px;font-weight:700;line-height:1.35;color:var(--l1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd.cv .cvtop .pmw{position:relative;flex:none}
.csd.cv .cvtop .saved{margin-left:auto;flex:none;white-space:nowrap;font-size:13.5px;color:var(--l3)}
.csd.cv .cvtop .pm{flex:none}
/* 둘째 줄 — 고객사 · 담당 · 기한 · 유형 …… 💬 N · 세부 정보 ▸(읽는 값은 회색 14 · 고르는 칸은 공용 단추 꼴 그대로) */
.csd.cv .cvbar{max-width:none;margin:0;min-height:30px;flex-wrap:nowrap;align-items:center;gap:0 12px}
.csd.cv .cvbar .g{flex:1 1 auto;flex-wrap:wrap;gap:0 2px}
.csd.cv .cvbar .p{min-height:28px;gap:5px}
.csd.cv .cvbar .p + .p::before{content:"·";color:var(--l3);margin:0 8px}
.csd.cv .cvbar .p:has(.ddlb){margin:0 -7px 0 0}                    /* 고르는 단추의 안쪽 여백(7)만큼 — 점 양쪽 간격이 다른 칸과 같게 */
.csd.cv .cvbar .p:has(.ddlb)::before{margin-right:1px}
.csd.cv .cvbar .p > .k{font-size:14px;color:var(--l3)}
.csd.cv .cvbar .p > .v{font-size:14px;font-weight:400;color:var(--l2)}
.csd.cv .cvbar .p > .v a.cogo{color:var(--l2)}
.csd.cv .cvbar .pjcr{white-space:pre;color:var(--l2)}            /* 「고객사 › 프로젝트」 — 프로젝트가 있을 때 */
.csd.cv .cvbar .ddlb,.csd.cv .cvbar .ddlb .v,.csd.cv .cvbar .advbtn{font-size:14px;font-weight:400}
.csd.cv .cvbar .cvr{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none;font-size:14px;white-space:nowrap}
.csd.cv .cvbar .cvr .fx{cursor:pointer;color:var(--l2)}
.csd.cv .cvbar .cvr .cbn{color:var(--l3)}
.csd.cv .csd-h{padding-bottom:10px;border-bottom:0}
/* 세부 정보 ▸ 안 — 줄마다 「이름 · 값」(주제 · 파일 · 연결 · 후속 확인 · 발송 기록 · 출처 · 의견) */
.csd.cv .cvmore{margin:8px 0 4px;padding:2px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--l2)}
.csd.cv .cvmore > *{padding:8px 0;margin:0}
.csd.cv .cvmore > * + *{border-top:1px solid var(--line)}
.csd.cv .cvmore .kv{display:flex;align-items:baseline;gap:12px;white-space:normal}
.csd.cv .cvmore .kv .k{flex:0 0 76px;color:var(--l3)}
.csd.cv .cvmore .kv .v{color:var(--l1);font-weight:500}
.csd.cv .cvmore .kv button.v{cursor:pointer;text-align:left}
.csd.cv .cvmore .mbox{background:none;border-radius:0}
.csd.cv .cvmore .cvsent.in{padding:0 0 4px 88px;border-top:0}
/* 셋째 줄 = 「이 대화」 띠 — 넓은 화면은 내려 읽으면 화면 위에 붙는다(`top:-26px` · 좌우 −48 은 #main 안쪽 여백을 되돌리는 값 — 옛 `.csband` 와 같은 까닭) */
.csd.cv .cvband{position:sticky;top:-26px;z-index:21;margin:0 -48px;padding:0 48px;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.csd.cv .cvband.stuck{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.csd.cv .chain .fl1{padding:8px 0;gap:12px}
.csd.cv .chain .fl1 > b{color:var(--l1);font-size:14px;white-space:nowrap}
.csd.cv .chain .fl1 .n{white-space:nowrap;color:var(--l2)}
/* 둘 가운데 하나를 고르는 알약 전환 — 「한 건씩 | 차례로」 · 「답변 | 정리」 */
.cvseg{display:inline-flex;align-items:center;flex:none;padding:2px;border-radius:999px;background:var(--f3)}
.cvseg button{height:26px;padding:0 13px;border:0;border-radius:999px;background:none;font:inherit;font-size:13.5px;color:var(--l2);cursor:pointer;white-space:nowrap}
.cvseg button.on{background:#fff;color:var(--l1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
/* 두 기둥 1 : 1 — 가운데 가는 세로 선 하나 */
.csd.cv .cols{gap:0;min-height:320px}
.csd.cv .cols::before{content:"";position:absolute;left:50%;top:0;bottom:0;z-index:3;border-left:1px solid var(--line);pointer-events:none}
body.csdet #app.drside .csd.cv .cols::before{left:calc(100% * 5 / 11)}       /* 참고 서랍 3단 — 두 기둥이 5 : 6 */
.csd.cv .cols>#csQCol{padding:16px 24px 0 0}
.csd.cv .cols>#csACol{padding:14px 0 0 24px}
/* 왼쪽 — 대화를 차례로 */
.csd.cv .cvit.q{position:relative;margin:0 0 16px;padding:0}
.csd.cv .cvit.q.now{padding-left:14px;border-left:3px solid var(--blue)}
.csd.cv .cvm{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:4px;font-size:13.5px;color:var(--l3)}
.csd.cv .cvm .qch{flex:none}
.csd.cv .cvm .qn{flex:none;color:var(--l1);font-size:14px;font-weight:700;white-space:nowrap}
.csd.cv .cvm .who,.csd.cv .cvm .rk,.csd.cv .cvm .cc{flex:none;white-space:nowrap}
.csd.cv .cvm .gist{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd.cv .cvm .cc{font-size:13px;color:var(--l3);cursor:default}
.csd.cv .cvm button.cc{cursor:pointer}
.csd.cv .cvm .say{color:var(--orange)}
.csd.cv .cvm .sp{flex:1}
.csd.cv .cvm .acts{display:inline-flex;align-items:center;gap:8px;flex:none}
.csd.cv .cvm .go{font-size:13.5px;white-space:nowrap}
/* 지금 질의 메타 줄 끝 — 「(AI) 요약」 · 「녹음 올리기」 는 글자 단추(상자 · 점선 없음) */
.csd.cv .cvm .ai.none{display:inline-flex;padding:0;border:0;background:none}
.csd.cv .cvm .cmrec{padding:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--l2);cursor:pointer;white-space:nowrap}
.csd.cv .cvm .cmrec:hover{color:var(--blue)}
.csd.cv .cvm .cmrec[disabled]{color:var(--l3);cursor:default}
.csd.cv .cvcc{margin:-2px 0 6px;font-size:13px;color:var(--l3);word-break:break-all}
.csd.cv .cvbody{font-size:15px;line-height:1.8;color:var(--l1)}
.csd.cv .cvbody pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
/* 흐름 안의 파일 알약(다른 질의의 첨부 · 답변에 붙여 보낸 파일) — 수신함 펼친 줄 `.cmone .files` 와 같은 꼴 */
.csd.cv .cvit > .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.csd.cv .cvit > .files .link,.csd.cv .cvit > .files .fnm{margin:0;border:1px solid var(--line);border-radius:8px;padding:2px 10px;font-size:13.5px;color:var(--l1);background:#fff;text-decoration:none}
.csd.cv .cvit > .files .link::before{content:'📎 '}
.csd.cv .cvit > .files .link:hover{border-color:var(--blue)}
.csd.cv .cvit > .files .fnm{color:var(--l2)}
/* 좁은 화면의 「정리」 — 맨 위 한 칸: 아직 없으면 [AI 정리] 한 줄(높이 40 · 폭 가득) · 있으면 요지 한 줄 → 누르면 칸 셋 + 「이 대화」 */
.csd.cv .cvorgtop{margin:10px 0 2px}
.csd.cv .cvorgtop .oh{display:flex;align-items:center;gap:8px}
.csd.cv .cvorgtop .oh .ai-btn{flex:1;justify-content:center;height:40px;font-size:15px}
.csd.cv .cvorgtop .oh .tg{flex:none;min-width:40px;height:40px;color:var(--l2);cursor:pointer;text-decoration:none}
.csd.cv .cvorgtop.open{padding-bottom:12px;border-bottom:1px solid var(--line)}
.csd.cv .cvorgtop.open .oh{margin-bottom:8px}
.csd.cv .cvorgtop.open .oh .tg{min-width:0;font-size:13.5px;color:var(--l3)}
.csd.cv .cvorgtop.open .oh .tg b{color:var(--l1)}
.csd.cv .cvorgtop.open .oh .ai-btn{flex:none;height:36px;margin-left:auto;font-size:14px}
.csd.cv .cvorgtop .bar{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border-radius:10px;background:var(--f4);text-align:left;cursor:pointer;text-decoration:none}
.csd.cv .cvorgtop .bar b{flex:none;font-size:13.5px;color:var(--l1)}
.csd.cv .cvorgtop .bar .g{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--l2)}
.csd.cv .cvorgtop .bar .car{flex:none;color:var(--l3)}
.csd.cv .cvit.a{margin:0 0 20px 30px;padding:10px 16px 14px;border-radius:10px;background:var(--f4)}
.csd.cv .cvit.a .cvm{margin-bottom:2px}
.csd.cv .cvna{display:flex;align-items:center;gap:10px;min-height:32px;margin:0 0 20px 30px;font-size:14px;color:var(--l3)}
.csd.cv .cmone.cmcase{margin:0}
/* 오른쪽 — 머리 한 줄(전환 …… 단추) + 흐린 한 줄(질의 n 의 답변 · 상태) */
.csd.cv .cvah{min-height:36px;margin:0;padding:0 0 6px;border-bottom:0;gap:10px}
/* 답변이 길어 내려 읽어도 머리 줄(전환 · [보내기])은 띠 바로 아래에 붙는다 — 넓은 화면만(좁은 화면은 붙는 띠가 없다) */
@media (min-width:901px){
  .csd.cv .cvah{position:sticky;top:calc(var(--csbh,0px) - 26px);z-index:6;margin-top:-8px;padding-top:8px;background:#fff}
}
.csd.cv .cvsub{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:28px;margin:0 0 10px;font-size:13.5px;color:var(--l3)}
.csd.cv .cvsub .of b{color:var(--l1);font-weight:700}
.csd.cv .cvsub .pmw{position:relative;display:inline-flex}
.csd.cv .cvsentp{height:26px;padding:0 10px;border:0;border-radius:999px;background:var(--f3);font:inherit;font-size:13.5px;font-weight:500;color:var(--l1);cursor:pointer;white-space:nowrap}
.csd.cv .cvsentp:hover{background:var(--f2)}
.csd.cv .cvsentp .car{color:var(--l3)}
.csd.cv .cvsub #csEdit{margin-left:6px;color:var(--l2);cursor:pointer}
/* 보낸 메일 목록(시각 · 제목 · 받는 사람) — 「보냄 · 시각 ▾」 는 글 위에 겹쳐 뜬다(글이 밀리지 않는다) */
.csd.cv .cvsent .sl{display:flex;align-items:baseline;gap:14px;padding:7px 0;font-size:13.5px;color:var(--l2)}
.csd.cv .cvsent .sl + .sl{border-top:1px solid var(--line)}
.csd.cv .cvsent .sl .date{flex:none;color:var(--l3);white-space:nowrap}
.csd.cv .cvsent .sl .nm{flex:1;min-width:0;color:var(--l1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd.cv .cvsent .sl .to{flex:none;max-width:40%;color:var(--l3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csd.cv .cvsent.pop{position:absolute;left:0;top:30px;z-index:30;width:min(520px,calc(50vw - 90px));padding:4px 14px;background:#fff;
  border:1px solid rgba(0,0,0,.14);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
/* 답변 칸 「크게 ⤢」(공용 부품 · 확정 그림 장면 4-라) — 머리 줄 = 「고객사 › 제목」 …… 단추 · ⤡(전환 「답변 | 정리」 는 숨김) · 붙는 머리 아님 */
.csd.cv #csACol.pwide .cvah{position:static;margin:0;padding:0 0 8px}
.csd.cv #csACol.pwide .cvah .cvseg{display:none}
.csd.cv #csACol .cvwc{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:var(--l2)}
/* 「정리」 — 요지 · 결론 · 쟁점(이름표 굵게 13.5 · 값 14.5 · 줄 사이 가는 선 · 테두리 없음 · 눌러도 테두리가 생기지 않는다) */
.csd.cv .cvorg{padding:0;border-top:1px solid var(--line)}
.csd.cv .cvorg .f{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
.csd.cv .cvorg .lbl{margin-bottom:2px;font-size:13.5px;font-weight:700;color:var(--l1)}
.csd.cv .cvorg input,.csd.cv .cvorg textarea{display:block;width:100%;height:auto;min-height:28px;padding:2px 0;border:0;border-radius:0;background:none;
  font:inherit;font-size:14.5px;line-height:1.7;color:var(--l1);outline:0;box-shadow:none;resize:none}
.csd.cv .cvorg textarea{field-sizing:content}
.csd.cv .cvorg input::placeholder,.csd.cv .cvorg textarea::placeholder{color:var(--l3)}
/* [AI 정리] — 머리 오른쪽 보라 테두리 단추 · 칸 셋 아래 「이 대화」 연한 보라 칸(흐름 글 문단 + 법조문 · 주제 · 다음 할 일) · 흐린 안내 한 줄 */
.csd.cv .cvah .cvrem{font-size:13px;color:var(--l3);white-space:nowrap}
.csd.cv .cvhint{margin:12px 2px 0;font-size:13px;line-height:1.7;color:var(--l3)}
.csd.cv .cvconv{margin-top:14px;padding:12px 14px 12px}
.csd.cv .cvconv.old{opacity:.5}
.csd.cv .cvconv .fl{margin:6px 0 0;font-size:14.5px;line-height:1.75;color:var(--l1)}
.csd.cv .cvconv .r{display:flex;align-items:baseline;gap:12px;margin-top:10px;font-size:14px}
.csd.cv .cvconv .r .k{flex:0 0 104px;font-size:13px;color:var(--l3)}
.csd.cv .cvconv .r .v{flex:1;min-width:0;color:var(--l1);line-height:1.7}
.csd.cv .cvconv .r .ref{margin-left:4px;font-size:13px;color:var(--l3)}
.csd.cv .cvconv .more1{margin-top:10px;padding-top:8px;border-top:1px solid rgba(97,85,245,.16);font-size:13px;color:var(--ai-ink)}
.csd.cv .cvprog{height:2px;margin-top:10px;border-radius:2px;background:var(--ai-bg);overflow:hidden}
.csd.cv .cvprog i{display:block;width:35%;height:100%;border-radius:2px;background:var(--ai);animation:cvprog 1.2s ease-in-out infinite}
@keyframes cvprog{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
/* 목록의 대화 줄 — 「▸」 만 펼치기: 누르는 자리 동그라미 24(올리면 바탕 진하게 · 말풍선 「질의 펼치기」) · 줄의 나머지는 대화 한 장 열기 */
.csrow .nm button.tw{flex:0 0 24px;width:24px;height:24px;margin:0 2px 0 -4px;border-radius:12px;cursor:pointer}
.csrow .nm button.tw:hover{background:rgba(0,0,0,.09)}
@media (max-width:900px){
  .csd.cv .cols::before{display:none}
  .csd.cv .cols>#csQCol{padding-right:0}
  .csd.cv .cols>#csACol{margin-top:8px;padding:14px 0 0;border-top:1px solid var(--line)}
  .csd.cv .chain{border-top:1px solid var(--line)}
  .csd.cv .cvjump{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:2px 0 10px;border-bottom:1px solid var(--line)}
  .csd.cv .cvjump .csjump{margin:0}
  .csd.cv .cvbar{flex-wrap:wrap}
  .csd.cv .cvtop{flex-wrap:wrap}
  .csd.cv .cvtop .title{white-space:normal}
  .csd.cv .cvm{flex-wrap:wrap}
  .csd.cv .cvit.a,.csd.cv .cvna{margin-left:16px}
  .csd.cv .cvsent.pop{width:min(520px,calc(100vw - 40px))}
}
/* 좁은 화면 — 붙는 한 줄 머리(.csfix)가 통(#main)의 좌우 여백을 48 로 알고 있어, 여백이 16 인 폭에서는 32px 넘쳐
   화면이 옆으로 밀렸다(한 건을 열면 그 질의 자리로 내려가 있어 머리가 처음부터 서 있다). 통의 여백 값(--mpx · --mpt)을 따른다 */
@media (max-width:760px){
  .csd.cv .csfix{top:calc(0px - var(--mpt));margin-left:calc(0px - var(--mpx));margin-right:calc(0px - var(--mpx));padding-left:var(--mpx);padding-right:var(--mpx)}
  /* 떠 있는 발송 목록 — 폭이 좁아 제목이 「R…」 로만 보였다: 시각 · 받는 사람 한 줄 + 제목은 그 아래 줄에 다(Lead-v16 2026-10-09) */
  .csd.cv .cvsent.pop .sl{flex-wrap:wrap;row-gap:2px}
  .csd.cv .cvsent.pop .sl .to{flex:1;min-width:0;max-width:none}
  .csd.cv .cvsent.pop .sl .nm{order:3;flex:1 0 100%;white-space:normal}
}
/* 답변 칸에 파일을 끌어다 놓는 동안(case.js `csDropOn` · 확정 재료 5-1절) — 칸을 옅은 파랑으로 덮고 가운데 한 줄 */
.rted.csdrop{position:relative}
.rted.csdrop::after{content:attr(data-drop);position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:10px;
  background:linear-gradient(rgba(0,112,210,.06),rgba(0,112,210,.06)),#fff;box-shadow:inset 0 0 0 2px rgba(0,112,210,.45);
  min-height:92px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--blue)}

/* 묶음14-딸려온메일 — quote.js `qtTailHtml`(「자문 대화 한 장」 재료 4-1절 · 2026-10-08): 대화에 없는 딸려 온 글 = 쓴 글 아래
   가는 세로 줄 칸 + 메타 한 줄(「전달받은 메일 · 원래 보낸 사람 · 날짜」) · 숨긴 글이 있으면 글자 단추 「원래 메일 보기」 → 겹창 */
.qfw{margin:12px 0 0;padding:1px 0 1px 14px;border-left:2px solid rgba(0,0,0,.14)}
.qfw .qfwm{margin:0 0 4px;font-size:13.5px;line-height:1.5;color:var(--l3)}
.qfw .qfwm b{font-weight:600;color:var(--l1)}
.qfw pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.qorig{margin:8px 0 0;font-size:13.5px}
.qorig .link{color:var(--l3);text-decoration:none}
.qorig .link:hover{color:var(--blue);text-decoration:underline}
/* 「원래 메일」 창 — 긴 메일은 창 안에서 굴린다(화면 위아래로 넘쳐 머리 줄 · ✕ 가 화면 밖으로 나가던 것 · 리뷰 M1) · 머리 줄은 굴려도 붙어 있다(겹창 머리 `.mhd` 와 같은 꼴).
   제목이 왼쪽을 다 먹어 ⤢ 가 감춰지는 좁은 폭에서도 ✕ 가 오른쪽 끝에 선다(리뷰 M2) */
#modalBox:has(> .qorigbox){max-height:86vh;overflow:auto}
.qorigbox .qoh{display:flex;align-items:center;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3;background:#fff;box-shadow:0 -20px 0 #fff}
.qorigbox .qoh h3{margin:0 auto 0 0;font-size:17px}
.qorigbox .qoh .mwb{margin-left:auto}
.qorigbox .qoh .gpx{margin-left:8px;text-decoration:none}
.qorigbox pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:14.5px;line-height:1.6}
/* HTML 본문 접기(quote.js 2-c · 2026-10-09) — 「원래 메일 보기」 옆 「항상 펼쳐 두기」 · 「원래 메일」 창의 받은 HTML 칸 */
.qorig .link + .link{margin-left:14px}
.pastbox .pastr{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6}
.pastbox .pastr .k{flex:0 0 76px;color:var(--l3);font-size:13px;padding-top:2px}
.pastbox .pastr .v,.pastbox .pastr pre{flex:1;min-width:0;margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.qorigbox .qorigfr iframe{display:block;width:100%;min-height:80px;border:0}
/* 메일 본문 칸 — 어디에 심어도 되는 부품(app.js `mailBodyHtml` · 2026-10-09 devg/convbody): 칸 폭 그대로 · 받은 HTML 은 테두리 없는 iframe · 평문은 줄바꿈 */
.mbody{min-width:0;max-width:100%}
.mbody iframe{display:block;width:100%;min-height:80px;border:0}
.mbody pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}

/* 묶음14-프로젝트공유 (0114 · Dev-c — 이 구역에 덧붙이기만) -------------------------------------
   [법인 공유] = 자문의 단추(.sm.cssh) 그대로 · 자리 셋의 크기만 맞춘다. 「나만」 = 수신함 줄의 것(.only)과 같은 글 · 같은 크기. */
.plrow .nm{display:flex;align-items:center;gap:8px}
.plrow .nm .plnm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.plrow .nm .cssh{flex:0 0 auto;height:24px;padding:0 10px;font-size:13px;font-weight:400}
.cotab .only{margin-left:4px;font-size:13px;font-weight:400;color:var(--l3)}      /* 알약뿐 아니라 고정 탭(「급여」)에 붙을 때도 같은 꼴 */
.cotab.on .only{color:var(--l2)}
/* 프로젝트 목록의 고르는 칸 · 고르기 막대(거르기 줄 자리에 — 높이가 같아 목록이 밀리지 않는다) */
.plrow .plck{flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;align-self:stretch;cursor:pointer}
.plrow .plck .sel{width:16px;height:16px;margin:0;cursor:pointer}
#plChips>.plbulk{flex:1 1 auto;min-width:0;min-height:32px;margin:0;border-bottom:0}
@media (max-width:760px){
  .plrow .nm{flex-wrap:wrap;row-gap:2px}
  .plrow .nm .plm{flex:0 0 100%}
}

/* ===== 고객사에보내기(clientsend.js) — 창 「고객사에 보내기」 · 꼬리표 「고객사에 보냄 N」 · 보낸 것 목록 · 미리 보기   2026-10-09 =====
   확정 그림 docs/mock/고객사보기-시안/확정-한건-장면1 · 장면3. 이름은 전부 cl 로 시작한다(다른 화면 규칙을 건드리지 않는다). */
#modalBox:has(> .clsend){width:480px;max-width:94vw;max-height:92vh;overflow:auto}   /* 연락처가 많거나 화면이 낮아도 제목 · [보내기] 에 닿는다(안에서 굴러간다) */
.clsend h3{margin:0 0 2px}
.clsend .clsub{margin:0 0 12px;font-size:14px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clf{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.clf>.k{flex:0 0 84px;padding-top:3px;font-size:14px;color:var(--l2)}
.clf>.v{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.clf>.v.row{flex-direction:row;align-items:center;gap:12px}
.clf input:not([type=checkbox]){width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.clf select{flex:none;width:auto;min-width:84px;height:32px;padding:0 6px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.clck{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;cursor:pointer}
.clck input{flex:none;width:16px;height:16px;margin:0}
.clck b{flex:0 1 auto;max-width:60%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clck span{min-width:0;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clck.off{cursor:default}
.clck.off b{font-weight:500;color:var(--l3)}
.clck.off span{color:var(--l3)}
.clhint,.clnone,.cluntil{font-size:13.5px;line-height:1.5;color:var(--l2)}
.clsend .clsame{margin:0;padding:10px 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--l2)}
.clsend .clmsg{min-height:20px;margin-top:6px;font-size:13.5px;color:var(--l2)}
.clsend .acts{display:flex;align-items:center;gap:8px;margin-top:6px}
.clsend .acts .sp{flex:1 1 auto}
/* 창이 화면보다 길면(1280×800 Ⓑ 등) 단추 줄은 창 바닥에 붙고 안이 굴러간다(Review-B-v13 RX2 · 상자 안쪽 여백 20 을 덮는다) */
#modalBox:has(> .clsend) .clsend .acts{position:sticky;bottom:-20px;z-index:6;margin:6px -20px -20px;padding:8px 20px 20px;background:#fff}
/* 좁은 화면 — 이름표를 칸 위로(320 에서 접힌 한 줄 안내 글이 잘리지 않게 · 가벼움 ③) */
@media (max-width:420px){
  .clf{flex-direction:column;gap:6px}
  .clf>.k{flex:none;padding-top:0}
  .clf input.clqone::placeholder{font-size:13.5px}     /* 칸 글자는 16(휴대폰 확대 막음) 그대로 · 안내 글만 창 안 다른 안내(.clhint)와 같은 13.5 — 320 에서 안 잘림 */
}
/* 「문의 내용」 칸(결정 347 · 확정 시안 고객사보내기-질의고르기-시안-확정) — 원문 인용 줄(앞 세 줄) · 체크 + 흐린 한 줄 상자 · 접힌 한 줄 칸 · 「더 보기」 겹친 칸 */
.clsend .clq{position:relative}
.clqpv{border-left:2px solid rgba(0,0,0,.14);padding:1px 0 1px 10px;min-width:0}
.clqpv .qh{font-size:13px;color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clqpv .qt{font-size:14px;line-height:1.7;color:var(--l1);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.clqpv .qm{display:block;height:auto;padding:0;margin-top:1px;border:0;background:none;color:var(--blue);font-size:13.5px;font-weight:600;cursor:pointer}
.clqck{padding:8px 12px 9px;border-radius:10px;background:var(--f4)}
.clqck .clhint{display:block;margin-top:2px;padding-left:24px}
#clQWait{display:flex;align-items:center;box-sizing:border-box;min-height:34px;padding:0 10px}     /* 서버 답을 기다리는 한 줄 = 접힌 한 줄 칸(Ⓒ) 높이 — 바뀔 때 창이 안 움직임 */
.clf input.clqone::placeholder{color:var(--l2)}
.clf input.clqone:placeholder-shown:not(:focus){border-color:transparent;background:none;cursor:pointer}     /* 접힌 한 줄 — 누르면 같은 높이의 입력 칸 */
.clf input.clqone:focus{border-color:transparent;box-shadow:inset 0 0 0 1.5px rgba(0,112,210,.55);outline:none}
.clf input.clqone:disabled{opacity:.45;cursor:default}
.clqed{position:absolute;left:-8px;right:-8px;top:4px;z-index:5;padding:12px 14px 14px;background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18),0 0 0 1px var(--line);font-size:14px}
.clqed[hidden]{display:none}
.clqed .eh{display:flex;align-items:center;gap:8px;min-height:24px;font-size:13px;color:var(--l2)}
.clqed .eh b{flex:none;color:var(--l1)}
.clqed .eh span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clqed .x{flex:none;margin-left:auto;width:28px;height:28px;padding:0;border:0;background:none;color:var(--l2);font-size:14px;cursor:pointer}
.clqed .tx{margin-top:6px;border-left:2px solid rgba(0,0,0,.14);padding:2px 0 2px 10px;line-height:1.75;white-space:pre-line;max-height:300px;overflow:auto;overflow-wrap:anywhere}
.clslot{position:relative;display:inline-flex;align-items:center}
.clslot:empty{display:none}
.cltag{height:24px;padding:0 9px;border:0;border-radius:6px;background:rgba(0,112,210,.1);color:#0062b8;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.cltag:hover{background:rgba(0,112,210,.16)}
.cltag.past{background:var(--f3);color:var(--l2)}
.clpop{position:absolute;top:30px;left:0;z-index:30;width:max-content;min-width:340px;max-width:min(460px,90vw);padding:6px 14px 10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.clrow{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--line);font-size:14px}
.clrow b{flex:none;max-width:46%;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clrow .when{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--l2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clact{flex:none;height:28px;padding:0 6px;border:0;background:none;font-size:14px;font-weight:600;cursor:pointer}
.clact.red{color:var(--red,#d93025)}
.clact[disabled]{color:var(--l3);cursor:default}
.clfoot{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.clco:empty{display:none}
.clco{margin-top:22px}
.clco .clcoh{margin:0 0 4px}
.clco .clhint{margin:8px 0 0}
#modalBox:has(> .clpv){width:min(820px,96vw);max-height:92vh;padding:0;overflow:auto}
.clpvbar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#eceef1;font-size:14px;color:var(--l2)}
.clpvpage{padding:32px 44px 36px;background:#fff;color:rgba(0,0,0,.88);text-align:left}
@media (max-width:600px){
  .clf{flex-direction:column;gap:6px}
  .clf>.k{flex:none}
  .clqed{left:-6px;right:-6px}
  .clqed .x{width:40px;height:40px}
  .clpop{min-width:0;width:min(92vw,360px)}
  .clpvpage{padding:22px 18px 26px}
}
/* 문서함의 공유 전 문서(0121) — 줄 끝 날짜 앞의 [법인 공유](프로젝트 목록 줄과 같은 크기) · 못 누르는 사람에게는 흐린 「나만」 */
.codoc .dt .cssh{height:24px;padding:0 10px;margin-right:10px;font-size:13px;font-weight:400;vertical-align:middle}
.codoc .dt .only{margin-right:10px;font-size:13px;color:var(--l3)}
/* (0129) 자문 포털 — 문서 줄 「고객사에 보임」 알약(켜면 파랑) · 연락처 펼친 줄의 표식(누를 수 없는 사람) · clientsend.js */
.codoc .dt .clshow{display:inline-flex;align-items:center;height:24px;padding:0 10px;margin-right:10px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--l2);font-size:13px;font-weight:400;vertical-align:middle;cursor:pointer}
.codoc .dt .clshow.on{border-color:transparent;background:#E8F1FB;color:var(--blue);font-weight:600}
.codoc .dt span.clshow{cursor:default}
.ctdet .clpg{font-size:13px;color:var(--blue)}
/* 고객사 세부 정보 — 주소 칸 아래 「메일에 적힌 주소: … [넣기]」(묶음 15 사실 뽑기 걸음 2 · company.js coAddrGotHtml) */
.comore .cogrid .if .cogot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--l2)}
.comore .cogrid .if .cogot b{font-weight:600;color:var(--l1);overflow-wrap:anywhere}
.comore .cogrid .if .cogot .sm{height:24px;padding:0 10px;font-size:13px}
.comore .cogrid:has(.cogot){align-items:start}   /* 그 줄이 주소 칸을 높여도 같은 줄의 옆 칸이 내려앉지 않게(Review-B-v6 권함 ② · 「누르면 다른 데가 안 움직인다」) */

/* 자문 읽기 칸 — 어디에 심어도 되는 부품(case.js `csPaneHtml` · 2026-10-09 devg/advpane): 칸 폭 그대로 · 머리 한 줄(넘치면 줄바꿈) · 대화는 한 건 화면과 같은 꼴(.csd.cv) */
.cspane{min-width:0;max-width:100%}
.cspane .csphead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 0 10px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.cspane .csphead .sp{flex:1 1 auto}
.cspane .csphead .cspv{color:var(--l2);font-size:13.5px}
.cspane .cspwait{padding:24px 0}
/* 휴대폰(걸음 ③ · devg/advtab3) — 칸 맨 아래 띠 「질의 N · 아직 보내지 않음 [답변 쓰기]」(넓은 화면은 줄 아래 [답변 쓰기 ⤢]) · 한 건 화면 머리는 ⤡ 대신 「‹ 대화」 */
.cspane .cspfoot{display:none}
.csd.cv .cvtop .cvback .cvpm,.csfix .fixback{display:none}
@media screen and (max-width:600px){
  .csfix .fixback{display:inline-flex;flex:none;margin-right:2px;border:0;padding:0 6px 0 0;color:var(--l2)}
  .cspane .cspfoot{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;margin:16px -16px 0;padding:12px 16px;border-top:1px solid var(--line);background:#fff;z-index:2}
  .cspane .cspfoot .muted{flex:1 1 auto;min-width:0;font-size:13.5px}
  .cspane .cspfoot .btn{flex:none}
  .cspane .cvna [data-cspane="write"]{display:none}
  .csd.cv .cvtop .cvback.cvpane .cvpw{display:none}
  .csd.cv .cvtop .cvback.cvpane .cvpm{display:inline}
}

/* =====================================================================
   공용 날짜 고르기 창(datepick.js · 결정 390 · 시안 날짜창-메모겹창-시안-확정 첫째 판 · 2026-10-14)
   눌린 칸 아래에 겹쳐 뜬다(fixed · 자리는 dpPlace 가 잡는다) · 폭 600 이하는 아래에서 올라오는 전체 폭.
   14 아래 글자 없음(결정 386) · 고른 날만 파랑 · 오늘은 테두리.
   ===================================================================== */
.dpk{--dl2:rgba(0,0,0,.62);--dph:rgba(0,0,0,.4);--dline2:rgba(0,0,0,.14);--dsel:rgba(0,112,210,.09);--dband:rgba(0,112,210,.13);
  position:fixed;z-index:1300;width:372px;max-width:calc(100vw - 24px);box-sizing:border-box;background:#fff;border-radius:14px;padding:14px 16px 8px;
  box-shadow:0 14px 40px rgba(0,0,0,.24),0 0 0 1px var(--dline2);font-size:14px;line-height:1.4;color:var(--l1);text-align:left}
.dpk button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.dpk .sp{flex:1 1 auto}
.dpk-inw{position:relative;display:flex;align-items:center;gap:8px}
.dpk-inw>i{font-style:normal;color:var(--dl2)}
.dpk-in{flex:1 1 0;min-width:0;height:42px;box-sizing:border-box;border:0;border-radius:10px;padding:0 12px;font:inherit;font-size:16px;color:var(--l1);background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--blue);outline:0}
.dpk-in2 .dpk-in{box-shadow:inset 0 0 0 1px var(--dline2)}
.dpk-in2 .dpk-in.ed{box-shadow:inset 0 0 0 1.5px var(--blue)}
.dpk-in::placeholder{color:var(--dph);font-size:14px}
.dpk-hint{position:absolute;right:12px;top:0;line-height:42px;color:var(--dph);pointer-events:none;white-space:nowrap}
.dpk-rs{position:absolute;left:0;right:0;top:46px;z-index:2;height:38px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 1px var(--dline2);font-size:16px}
.dpk-rs b{font-weight:600}
.dpk-rs kbd{font:inherit;font-size:14px;color:var(--dl2)}
.dpk-rs .no{font-size:14px;color:var(--dl2)}
.dpk-sc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.dpk-sc button{height:28px;padding:0 9px;border-radius:999px;background:var(--f3)}
.dpk-sc button:hover{background:var(--dsel)}
.dpk-sc button.dim{color:var(--dph);cursor:default;background:var(--f3)}
.dpk-mh{display:flex;align-items:center;height:34px}
.dpk-mh b{font-size:16px;font-weight:600}
.dpk-mh button{width:28px;height:28px;border-radius:14px;font-size:16px;color:var(--dl2)}
.dpk-mh button:hover{background:var(--f3);color:var(--l1)}
.dpk-r{display:flex}
.dpk-wd span{flex:1 1 0;height:24px;line-height:24px;text-align:center;color:var(--dl2)}
.dpk-dc{flex:1 1 0;height:44px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:3px;box-sizing:border-box}
.dpk .dpk-dc{padding-top:3px}
.dpk-g.nm .dpk-dc{height:38px;justify-content:center;padding-top:0}
.dpk-dc b{width:28px;height:28px;line-height:28px;border-radius:14px;font-weight:400;text-align:center;font-size:14px}
.dpk-dc:hover b{background:var(--f3)}
.dpk-dc.om b{color:var(--dl2)}
.dpk-dc.td b{box-shadow:inset 0 0 0 1.5px var(--l1)}
.dpk-dc.kc b{box-shadow:inset 0 0 0 1.5px var(--blue)}
.dpk-dc.on b,.dpk-dc.on:hover b{background:var(--blue);color:#fff;font-weight:600;box-shadow:none}
.dpk-dc u{display:flex;gap:2px;height:10px;align-items:center;text-decoration:none}
.dpk-sy{width:9px;height:9px;fill:none;stroke:var(--dl2);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dpk-sy.f{fill:var(--dl2);stroke:none}
.dpk-dc.rg,.dpk-dc.rs1,.dpk-dc.re1{border-radius:0;background:linear-gradient(var(--dband),var(--dband)) no-repeat center/100% 28px}
.dpk-g:not(.nm) .dpk-dc.rg,.dpk-g:not(.nm) .dpk-dc.rs1,.dpk-g:not(.nm) .dpk-dc.re1{background-position:center 3px}
.dpk-dc.rs1{background-size:50% 28px;background-position-x:right}
.dpk-dc.re1{background-size:50% 28px;background-position-x:left}
.dpk-g.wk .dpk-r:not(.dpk-wd){border-radius:8px;cursor:pointer}
.dpk-g.wk .dpk-r:not(.dpk-wd):hover{background:var(--f3)}
.dpk-g.wk .dpk-r.on,.dpk-g.wk .dpk-r.on:hover{background:var(--dband)}
.dpk-g.wk .dpk-dc:hover b{background:none}
.dpk-lgd{display:flex;align-items:center;gap:4px;height:26px;color:var(--dl2)}
.dpk-mg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 0 10px}
.dpk-mg button{height:44px;border-radius:10px;font-size:16px}
.dpk-mg button:hover{background:var(--f3)}
.dpk-mg button.td{box-shadow:inset 0 0 0 1.5px var(--l1)}
.dpk-mg button.on,.dpk-mg button.on:hover{background:var(--blue);color:#fff;font-weight:600;box-shadow:none}
.dpk-rw{position:relative;display:flex;align-items:center;gap:8px;height:40px;margin-top:4px;padding:0 4px;border-top:1px solid var(--line);color:var(--dl2)}
.dpk-rw button:hover{color:var(--l1)}
.dpk-rw .dpk-k{color:var(--dl2)}
.dpk-rw>i{font-style:normal}
.dpk-tm{width:72px;height:28px;box-sizing:border-box;border:0;border-radius:8px;padding:0 10px;font:inherit;color:var(--l1);background:#fff;box-shadow:inset 0 0 0 1px var(--dline2);outline:0}
.dpk-tm:focus{box-shadow:inset 0 0 0 1.5px var(--blue)}
.dpk-tm::placeholder{color:var(--dph)}
.dpk-ck::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5);vertical-align:-2px}
.dpk-ck.on{color:var(--l1)}
.dpk-ck.on::before{background:var(--l1);box-shadow:none}
.dpk-tls{position:absolute;left:40px;bottom:36px;z-index:3;width:128px;max-height:170px;overflow-y:auto;background:#fff;border-radius:10px;padding:4px;box-sizing:border-box;
  box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px var(--dline2)}
.dpk-tls.e{left:128px}
.dpk-tls button{display:block;width:100%;height:34px;border-radius:6px;text-align:left;padding:0 10px;font-size:16px;color:var(--l1)}
.dpk-tls button:hover{background:var(--f3)}
.dpk-hot{background:rgba(0,112,210,.09)}
.dpk-scrim{position:fixed;inset:0;z-index:1299;background:rgba(0,0,0,.14)}
.dpk.dpk-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;border-radius:18px 18px 0 0;padding:20px 16px 12px;box-shadow:0 -10px 40px rgba(0,0,0,.25)}

/* =====================================================================
   Thing 한 장(thing.js · 결정 385 · 386 · 시안 Thing한장-시안-확정 둘째 판 · 2026-10-14)
   종류 넷(소통 · 미팅 · 파일 · 메모) × 크기 셋(사이드창 600 · 겹창 800 · 한 장 1120/720) 이 한 부품.
   글자 16 · 보조 14(그 아래 없음) · 색 값은 이 뿌리에만(앱 공용 값과 다르다 — Lead-v29 8).
   머리 → 제목 → 메타 한 줄 → 몸 → 꼬리. 저장 단추 없음 · 겹쳐 뜨는 것(세부 · 메뉴)은 자리를 밀지 않는다.
   ===================================================================== */
.ti-th{--tl2:rgba(0,0,0,.62);--tph:rgba(0,0,0,.4);--tline2:rgba(0,0,0,.14);--tsel:rgba(0,112,210,.09);
  position:relative;box-sizing:border-box;background:#fff;text-align:left;font-size:16px;line-height:1.5;color:var(--l1)}
.ti-th button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.ti-th .sp{flex:1 1 auto}
.ti-th.ti-side{width:100%;min-height:100%;padding:18px 24px 20px}
.ti-th.ti-over{width:800px;max-width:100%;padding:22px 40px 26px;border-radius:14px}
.ti-th.ti-page{width:1120px;max-width:100%;margin:0 auto;padding-top:20px}
/* 다른 구성물로 바꾸는 동안(thing.js tiSwapPut ⑨) — 새 그림은 자리 없이 숨어 그려지고(높이 0 · 굴림 막대에 안 셈) · 앞 그림은 누를 수 없는 그림만 */
.ti-th.ti-pre{position:absolute!important;left:0;top:0;height:0!important;min-height:0!important;max-width:none!important;overflow:hidden;visibility:hidden;pointer-events:none}
.ti-th.ti-old{pointer-events:none}
.ti-th .ti-col{width:720px;max-width:100%;margin:0 auto}
.ti-back{display:flex;align-items:center;height:36px;margin-bottom:18px}
.ti-th .ti-backp{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px}
.ti-th .ti-backp:hover{background:var(--f3)}
/* 넓은 화면 한 장(결정 711 · 570 ③) — 틀은 통(#thPg) 폭 가득 · 맨 위 줄은 스레드 한 장 `.thp-top` 과 같은 자리(통 왼쪽 위 · 높이 40 · 굴려도 붙음) ·
   칸(1120 · 가운데 · 본문 칸 폭의 기준 container)은 그 아래. 바탕은 통의 좌우 여백까지 덮는다(#thPg padding 32 · 28) */
.ti-th.ti-page.ti-pgx{width:auto;margin:0;padding-top:0}
.ti-th .ti-ptop{position:sticky;top:0;z-index:6;margin:0 -28px 0 -32px;padding:0 28px 0 32px;background:#fff}
.ti-pgw{width:1120px;max-width:100%;margin:0 auto;padding-top:12px}
.ti-top{display:flex;align-items:center;gap:12px;min-height:32px}                     /* 자리 기준은 .ti-th(⤢ 모서리) — 떠 있는 칸 닻은 .ti-btns */
.ti-crm{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;color:var(--tl2);white-space:nowrap}
.ti-crm a{min-width:0;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:underline;text-decoration-color:var(--tline2);text-underline-offset:4px;cursor:pointer}
.ti-crm a:hover{color:var(--l1)}
.ti-crm span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ti-btns{position:relative;display:flex;align-items:center;gap:2px;flex:none}
.ti-th .ti-ib{flex:none;width:30px;height:30px;border-radius:15px;font-size:16px;line-height:30px;text-align:center;color:var(--tl2)}
.ti-th .ti-ib:hover,.ti-th .ti-ib[aria-expanded="true"]{background:var(--f3);color:var(--l1)}
.ti-th .ti-ib:disabled{color:var(--tph);cursor:default;background:none}
/* 2026-10-16 열두째판 d(스레드 부서 묶음 1) — ⤢ 는 왼쪽 위 모서리(524 ⑥ 덧) · 머리 ‹ › ⋯ ✕ · 떠 있는 칸은 부품(fp.js · 「떠 있는 칸」 절) · 여기는 Thing 자리만 */
.ti-th .ti-ib.ti-xp{position:absolute;left:4px;top:4px;z-index:2;width:20px;height:20px;border-radius:5px;line-height:20px;color:rgba(0,0,0,.40)}
.ti-th .ti-ib.ti-xp:hover{background:var(--f3);color:rgba(0,0,0,.72)}
.ti-th .ti-ib.ti-xp svg{width:14px;height:14px;vertical-align:-2px;stroke-width:1.6}
.ti-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.ti-th .ti-anc{display:block;width:30px;height:1px}                                   /* bare 꼴 ⋯ 메뉴 닻(스레드 칸 머리가 부른다) */
.ti-tt{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.ti-i{flex:none;width:24px;height:24px;margin-top:5px;fill:none;stroke:var(--tl2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ti-tt h1{flex:1 1 auto;min-width:0;margin:0;font-size:22px;font-weight:600;line-height:1.5;letter-spacing:0;outline:0;word-break:break-word}
.ti-tt h1:empty::before{content:attr(data-ph);color:var(--tph);font-weight:400}
/* 메타 줄 — 첫 칸 = 종류(아이콘 + 글자) · 값 = 글자 단추(손 얹으면 알약 · .fp-tg.fl) · 끝 「속성 열기 ▾」 */
.ti-mt{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;min-height:30px;font-size:14px;color:var(--tl2)}
.ti-mt b{color:var(--l1);font-weight:600}
.ti-dot{font-style:normal}
.ti-th button.fp-tg{padding:0 10px}                                                  /* 글자 단추(알약) — 위 .ti-th button 의 여백 0 을 부품 꼴로 되돌림(글자 x = 줄 왼끝) */
.ti-th .ti-kc,.ti-th .ti-pv.ti-kc{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ti-ki{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ti-th .ti-dv{white-space:nowrap}
.ti-th .ti-prt{color:var(--tl2);white-space:nowrap}
.ti-th .ti-prt:hover{color:var(--l1)}
.ti-mt0{justify-content:flex-end}
.ti-ty{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ti-tyl{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--f3);font-size:14px;font-weight:600;color:var(--l1)}
.ti-th button.ti-ty.fp-tg{padding:0 4px;margin:-2px -4px}
.ti-th button.ti-ty:hover .ti-tyl,.ti-th button.ti-ty[aria-expanded="true"] .ti-tyl{background:var(--tsel)}
.ti-aip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;font-size:14px;font-weight:600;color:var(--ai-ink);background:var(--ai-bg)}
/* 파일 유형 빈 칸(점선 「유형 ▾」) · 「찾기에 쓰기」 스위치(SS ①-a · 시안 ⓖ · 이름표 없이 글자 단추 하나 · 켜짐 = 진한 스위치) */
.ti-th .ti-dkc{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;outline:1px dashed rgba(0,0,0,.28);outline-offset:-1px;color:var(--tl2);white-space:nowrap}
.ti-th .ti-dkc:hover,.ti-th .ti-dkc[aria-expanded="true"]{background:var(--f3)}
.ti-th .ti-fnd,.thp-3 .ti-fnd{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px;margin:0 -6px;border-radius:14px;color:var(--tl2);white-space:nowrap}
.ti-th .ti-fnd.on,.thp-3 .ti-fnd.on{color:var(--l1)}.ti-th .ti-fnd:not([disabled]):hover,.thp-3 .ti-fnd:not([disabled]):hover{background:var(--f3)}
.thp-3 .ti-fnd{vertical-align:middle;border:0;background:none;font:inherit;cursor:pointer}.thp-3 .ti-fnd[disabled]{cursor:default}   /* 스레드 한 장 머리 메타 줄(자문 스레드 표식 · 리뷰 M5) */
.ti-sw{position:relative;flex:none;width:26px;height:14px;border-radius:7px;background:rgba(0,0,0,.18)}
.ti-sw::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:5px;background:#fff;transition:left .12s}
.ti-fnd.on .ti-sw{background:rgba(0,0,0,.78)}.ti-fnd.on .ti-sw::after{left:14px}
/* 메타 아래 첨부 · 연결 칩 한 줄(있을 때만) */
.ti-chl{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* 메일 머리 줄(결정 784) — 메타 줄 아래 「보낸 사람 <주소> → 받은 사람 <주소> · 참조 <주소>」 · 주소 · 화살표 · 「참조」 는 회색 · 긴 줄은 감김 */
.ti-mh{margin-top:6px;font-size:14px;line-height:20px;color:var(--l1);overflow-wrap:anywhere}.ti-mh .ti-mha{display:inline-block;max-width:100%}.ti-mh .ad,.ti-mh .ti-mhr,.ti-mh .ti-mhl{color:var(--tl2)}   /* 사람 하나 「이름 <주소>」 는 한 덩이로 감김(리뷰 L3) · 이름 없는 주소도 회색(L2) */
/* 속성 블록(장면 7 · 526 · 528 · 536 · 537) — 이름 위 · 값 아래 · 네 칸 · 빈 값 회색 「없음」 · 밑선이 곧 569 선 */
.ti-pr{padding:2px 0 10px;border-bottom:1px solid var(--line);font-size:14px}
.ti-pcr{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 12px;padding:6px 0 4px}
.ti-pdot{font-style:normal;color:var(--tl2);line-height:28px}
.ti-pg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 16px;padding:4px 0}
.ti-psep{height:1px;background:var(--line);margin:6px 0}
.ti-pc{position:relative;min-width:0}
.ti-pc.w{padding:4px 0}
.ti-pl{font-size:14px;line-height:20px;color:var(--tl2)}
.ti-th .ti-pv{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:24px;font-size:14px;line-height:20px;color:var(--l1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.ti-th .ti-pv.nil{color:var(--tph)}
.ti-th button.ti-pv.fp-tg{height:28px;margin:-2px -10px;max-width:calc(100% + 20px)}   /* 글자 x = 칸 왼끝 · 알약 바탕만 좌우 10 밖으로(잘리지 않게 폭도 20 더) */
.ti-th a.ti-pa:hover,.ti-th button.ti-pa:hover{text-decoration:underline;text-underline-offset:4px}
.ti-pch{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ti-th.pro .ti-bd::before{display:none}
/* 569 선 — 속성 끝 ↔ 본문 첫 블록 틈 가운데 1px · 떠 있게(본문 밀림 0) · 속성 블록을 펴면 블록 밑선이 그 선 */
.ti-bd{position:relative;margin-top:14px;max-width:720px}
.ti-bd::before{content:'';position:absolute;left:0;right:0;top:-7px;height:1px;background:var(--line);pointer-events:none}
.ti-bd p{margin:0 0 10px;font-size:16px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.ti-bd h3{margin:0 0 6px;font-size:16px;font-weight:600}
.ti-bd .ti-html{font-size:16px;line-height:1.75;word-break:break-word;overflow-x:auto}
/* 본문 폭 = 머리 폭(결정 710 — 495 의 「메일 본문 칸만 폭 품」 거둠) · 크게 = 칸(.ti-col 720) · 옆 창 = 기둥 폭 가득(머리 · 본문 · 댓글 · 「다음 ›」 한 폭) ·
   넓은 표 · 그림은 칸 안 가로 굴림(.ti-html · 메일 틀 안) — 높이는 app.js fitFrame 이 상한 없이 */
.ti-th.ti-side .ti-bd,.ti-th.ti-side .ti-cm,.ti-th.ti-side .ti-tl{max-width:none}
.ti-th .ti-chip{display:inline-flex;align-items:center;gap:6px;height:30px;max-width:100%;padding:0 12px 0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;color:var(--l1)}
.ti-th .ti-chip.pl{padding:0 12px;cursor:default}
.ti-chip svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--tl2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ti-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-th button.ti-chip:hover{box-shadow:inset 0 0 0 1.5px var(--blue);background:var(--tsel)}
.ti-acts{display:flex;align-items:center;gap:18px;margin-top:20px}
.ti-acts.ti-acts0{margin-top:12px}                                     /* 답장 없는 줄(메모 ＋ 만) — 앱 공용 .sm(작은 단추 꼴)과 겹치지 않는 이름 */
.ti-th .ti-pri{height:36px;padding:0 30px;border-radius:999px;background:var(--blue);color:#fff;font-size:16px;font-weight:600}
.ti-th .ti-out{height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;color:var(--l1)}
.ti-th .ti-out:hover{background:var(--f3)}
.ti-th .ti-lnk{font-size:14px;color:var(--tl2)}
.ti-th .ti-lnk:hover{color:var(--l1)}
.ti-th .ti-ta{display:block;width:100%;box-sizing:border-box;min-height:76px;margin-top:10px;border:0;border-radius:10px;padding:10px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--tline2);
  font:inherit;font-size:16px;line-height:1.7;color:var(--l1);outline:0;resize:none;overflow:hidden}
.ti-th .ti-ta:focus{box-shadow:inset 0 0 0 1.5px var(--blue)}
.ti-th .ti-ta::placeholder{color:var(--tph)}
/* 본문 칸 — 메모 · 할 일 · 마감 · 작업 · 일정(회의록 · 결정 738 = 같은 칸)의 내용 칸 · 최소 높이 180(결정 708 ② · 대표 「아래로 늘여」) */
.ti-th .ti-memo{display:block;width:100%;box-sizing:border-box;min-height:180px;border:0;padding:0;background:none;font:inherit;font-size:16px;line-height:1.85;color:var(--l1);outline:0;resize:none;overflow:hidden}
.ti-th .ti-memo::placeholder{color:var(--tph)}
.ti-spk{display:flex;gap:12px}
.ti-spk>span{flex:none;width:48px;padding-top:3px;font-size:14px;color:var(--tl2)}
.ti-spk p{flex:1 1 auto;min-width:0}
.ti-bd h3.ti-h2{margin:18px 0 8px}
.ti-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ti-k{font-size:14px;color:var(--tl2)}
.ti-hrow{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.ti-hrow h3{margin:0}
.ti-fwrap{display:flex;gap:24px}
.ti-paper{flex:none;width:300px;height:392px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.12),0 0 0 1px var(--tline2);font-size:14px;color:var(--tl2);text-align:center;word-break:break-all;overflow:hidden}
.ti-paper img{max-width:100%;max-height:100%;object-fit:contain}
.ti-paper svg{width:40px;height:40px;fill:none;stroke:var(--tl2);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.ti-over .ti-paper{width:340px;height:440px}
.ti-page .ti-paper{width:380px;height:480px}
.ti-vers{flex:1 1 auto;min-width:0}
.ti-th .ti-vr{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 12px;border-radius:8px;font-size:16px}
.ti-vr span{font-size:14px;color:var(--tl2)}
.ti-th .ti-vr.on{background:var(--tsel);font-weight:600}
.ti-vers .ti-out{margin-top:14px}
/* 받은 메일 AI 요약(장면 1a) — 왼쪽 옅은 보라 선 · 「요약 ▾/▴」 · 오른쪽 [AI] 다시 만들기 */
.ti-ais{margin:0 0 14px;padding:2px 0 2px 12px;box-shadow:inset 2px 0 0 var(--ai-chip)}
.ti-aih{display:flex;align-items:center;gap:8px;min-height:30px}
.ti-th .ti-ait{font-size:14px;color:var(--tl2)}
.ti-th button.ti-ait:hover{color:var(--l1)}
.ti-th .ti-aib{display:inline-flex}
.ti-aib.busy{font-size:14px;color:var(--tl2)}
.ti-aib0{margin-top:6px}
/* 완료 스레드 · 옛 수신함 줄 메모(읽기만 · 결정 588) · 하위 메모 틀 · 댓글 */
.ti-done{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:20px;font-size:14px;color:var(--tl2)}
/* 하위 메모(결정 519 · 장면 12b) — 쓴 것 = 부모 아래 접힌 줄(누르면 그 한 장) · 쓰는 동안 = 축약 틀(회색 선 · 머리 「✎ 메모」 14 · 내용 16) */
.ti-subm{margin-top:14px}
.ti-subm:empty{display:none}
.ti-th .ti-subl{display:flex;align-items:center;gap:8px;width:calc(100% + 20px);height:36px;margin:0 -10px;padding:0 10px;border-radius:8px;font-size:16px;color:var(--l1);text-align:left;white-space:nowrap}
.ti-th .ti-subl:hover{background:var(--f3)}
.ti-subl .ti-ki,.ti-subh .ti-ki{color:var(--tl2)}
.ti-subt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ti-subd{margin-left:auto;padding-left:12px;font-size:14px;color:var(--tl2)}
.ti-subw{margin-top:6px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--tline2);padding:8px 14px 10px}
.ti-subh{display:flex;align-items:center;gap:6px;height:26px;font-size:14px;color:var(--tl2)}
.ti-th .ti-sub{display:block;width:100%;box-sizing:border-box;min-height:28px;border:0;padding:0;background:none;font:inherit;font-size:16px;line-height:1.75;color:var(--l1);outline:0;resize:none;overflow:hidden}
.ti-th .ti-sub::placeholder{color:var(--tph)}
/* 상태 칩(작업 · 마감 · 575 ⑱) — 스레드 머리 상태 칩과 같은 부품(.fp-tg.fl) · 글자는 메타 줄과 같은 색 */
.ti-th .ti-stc{white-space:nowrap}
/* 요약 결과가 없을 때 — 왼쪽 선 · 이름 없이 오른쪽 「[AI] AI 요약」 하나(Thing 열째 0-6) */
.ti-ais.nil{box-shadow:none;padding-left:0}
/* 일정 Thing AI 회의록(결정 745 · 둘째판-b) — 본문 아래 한 줄(위는 안 움직임) · 요약 블록 꼴 그대로 · 칸 이름 14 보조색 · 줄 16 · 줄 끝 = 브리핑 「할 일로」 단추 · ✕ */
.ti-mm{margin:20px 0 14px}
.ti-mm>.ti-aih{min-height:32px}
.ti-mmb{padding:4px 0 2px 4px}
.ti-mmc{margin-top:16px}
.ti-mmc:first-child{margin-top:2px}
.ti-mmc h4{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--tl2);line-height:1.6}
.ti-mmc p{margin:0;line-height:1.75}
.ti-mm .ti-aip{margin-right:4px}
.ti-mmr{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.ti-mml{display:flex;align-items:center;gap:8px;min-height:36px;line-height:1.6}
.ti-mml .t{flex:1 1 auto;min-width:0}
.ti-mma{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--tl2)}
.ti-th .ti-mml .bf3-mkp{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);color:var(--l1);background:#fff}
.ti-th .ti-mml .bf3-mkp:hover:not(:disabled){background:var(--f4)}
.ti-th .ti-mml .bf3-xb{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:14px;font-size:14px;color:var(--tl2)}
.ti-th .ti-mml .bf3-xb:hover{background:rgba(0,0,0,.06);color:var(--l1)}
.ti-mml.done .t{color:var(--tl2)}
.ti-mml.done .t b{color:var(--l1);font-weight:600}
.ti-th .ti-mmgo{color:var(--l1);text-decoration:underline;text-decoration-color:var(--tline2);text-underline-offset:3px}
.ti-mml.gone .t{color:var(--tl2)}
.ti-mmf{margin:16px 0 0;font-size:14px;color:var(--tl2)}
@media (max-width:600px){
  .ti-mm>.ti-aih{flex-wrap:wrap;row-gap:6px}
  .ti-mm>.ti-aih .ti-ait{flex:1 0 100%}
  .ti-mml{flex-wrap:wrap;row-gap:4px;padding:4px 0}
  .ti-mml .t{flex:1 0 100%}
  .ti-mma{margin-left:auto}
  .ti-th .ti-mml .bf3-mkp{height:36px;padding:0 14px;font-size:15px}
}
.ti-bd p.ti-oldm{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--tl2);white-space:pre-wrap}
.ti-oldm span{color:var(--l1)}
.ti-cm{max-width:720px;margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}   /* 위 24 = Thing 열째판 .cmt */
.ti-cm .cbthr{margin-top:0;border-top:0;padding-top:0}                 /* 선은 .ti-cm 한 줄 — 협업 부품의 위 선 · 여백까지 서면 선 둘 사이 빈 띠(결정 710 덧) */
.ti-th .ti-cm button.cb0{font-size:14px;color:var(--l2)}               /* 위 .ti-th button 초기화를 댓글 부품 꼴로 되돌림 */
.ti-th .ti-cm button.cbpill{padding:0 14px;background:#fff;font-size:14px;font-weight:500}
.ti-th .ti-cm button.cb0:hover{color:var(--l1)}
.ti-th .ti-cm button.cbpill:hover:not(:disabled){background:var(--f4)}
.ti-th .ti-cm button.cbpill:disabled{cursor:default}
/* 꼬리 — 「다음 · 제목 · 날 ›」(오른쪽) */
.ti-tl{display:flex;justify-content:flex-end;max-width:720px;margin-top:20px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.ti-cm+#tiTlW .ti-tl{margin-top:8px;padding-top:0;border-top:0}       /* 댓글 칸 바로 뒤 = 선 없이(Thing 열째판 .cmt+.nxl) */
.ti-th .ti-nx{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;color:var(--tl2);white-space:nowrap;overflow:hidden}
.ti-nx b{font-weight:600;color:var(--l1);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ti-th .ti-nx:hover b{text-decoration:underline;text-underline-offset:4px}
/* Thing 이 띄우는 부품 칸(fp.js) — 흐린 줄 까닭 말풍선 · 메뉴 아래 까닭 한 줄(찾기 칸 · 날짜 적는 칸 · 미팅 시각 줄은 「떠 있는 칸」 절 끝 src3 더함 한 벌) */
.ti-fpm .fp-row.dim{cursor:default;position:relative}
.ti-fpm .fp-row.dim[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.86);color:#fff;
  font-size:14px;line-height:1;padding:7px 10px;border-radius:6px;white-space:nowrap;pointer-events:none}
.ti-fpm .fp-row .ti-mi{width:16px;height:16px}
.ti-fpm .ti-why{max-width:220px;padding:6px 12px 4px;font-size:14px;line-height:1.5;color:var(--fp-ink3);white-space:normal}
.ti-wait,.ti-none{padding:40px 0;font-size:14px;color:var(--tl2);text-align:center}
.ti-th.ro .ti-tt h1,.ti-th.ro .ti-ta,.ti-th.ro .ti-memo{pointer-events:none}
/* 겹창 — 앱 겹창(#modal) 안에 서되 꼴은 시안대로(옅은 바탕 · 위에서 48 · 폭 800 · 앱 겹창의 「크게」 단추는 서지 않는다) */
#modal:has(#modalBox>.ti-over){align-items:flex-start;padding-top:48px;background:rgba(0,0,0,.14);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
#modalBox:has(>.ti-over){width:800px;max-width:calc(100vw - 24px);max-height:calc(100vh - 72px);padding:0;border-radius:14px;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.14)}
/* 본문 칸 하나뿐인 Thing(메모 · 할 일) 겹창 = 화면 높이에 맞춤(결정 720 · 위 48 ≥ 아래 24) — 본문 자리(.ti-bd)가 남은 높이를 채운다 ·
   글 칸은 내용만큼(tiGrow · 안쪽 굴림 없음) · 그 아래 빈 자리를 누르면 글 끝에 커서(thing.js tiClick) · 휴대폰은 원래 화면 가득 */
@media (min-width:601px){
  #modalBox:has(>.ti-over.k-memo){height:calc(100vh - 72px)}
  .ti-th.ti-over.k-memo{display:flex;flex-direction:column;box-sizing:border-box;min-height:100%}
  .ti-th.ti-over.k-memo>.ti-bd{flex:1 0 auto;cursor:text}
}
@media (max-width:600px){
  .ti-th.ti-side,.ti-th.ti-over,.ti-th.ti-page{width:100%;min-height:100%;padding:12px 16px 16px;border-radius:0}
  .ti-back{margin-bottom:8px}
  .ti-crm{flex-wrap:wrap;white-space:normal}
  .ti-fwrap{flex-direction:column;gap:14px}
  .ti-th .ti-paper{width:190px;height:236px;padding:12px}
  .ti-pg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ti-th .ti-nx{white-space:normal}
  .ti-fpm .fp-row.dim[data-tip]:hover::after{left:auto;right:0;top:calc(100% + 4px);transform:none}
  #modal:has(#modalBox>.ti-over){padding-top:0}
  #modalBox:has(>.ti-over){width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0}
}
/* =====================================================================
   스레드 한 장(thread.js · 결정 397 · 398 · 438 · 시안 스레드한장-시안-확정 넷째 판 · 2026-10-14)
   머리 세 줄 + 칸 머리는 늘 위에 있고 왼쪽 목록만 굴러간다. 오른쪽 칸(쓰기 | 보기)은 목록을 덮지 않고 1 : 1 로 민다.
   글자 16 · 보조 14(그 아래 없음) · 색 값은 이 뿌리에만(Thing 한 장과 같은 값). 빨강은 「N일 지연」 하나.
   겹쳐 뜨는 것(세부 · ⋯ · 전체 보기)은 자리를 밀지 않는다. 고른 줄은 한 번에 한 줄.
   ===================================================================== */
.thp{--tl2:rgba(0,0,0,.62);--tph:rgba(0,0,0,.4);--tline2:rgba(0,0,0,.14);--tsel:rgba(0,112,210,.09);
  display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;background:#fff;text-align:left;font-size:16px;line-height:1.5;color:var(--l1)}
.thp button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.thp .sp{flex:1 1 auto}
.thp-wait{padding:40px 32px;font-size:16px;color:var(--tl2)}
.thp-h{flex:none;padding:14px 28px 10px 32px}
.thp-1{position:relative;display:flex;align-items:center;height:34px}
.thp .thp-back{display:inline-block;max-width:70%;height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;line-height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thp .thp-back:hover{background:var(--f3)}
.thp .thp-ib{flex:none;width:30px;height:30px;border-radius:15px;font-size:16px;line-height:30px;text-align:center;color:var(--tl2)}
.thp .thp-ib:hover,.thp .thp-ib[aria-expanded="true"]{background:var(--f3);color:var(--l1)}
.thp .thp-ib:disabled{color:var(--tph);cursor:default;background:none}
.thp .thp-ib.xp{width:28px;height:28px;border-radius:8px;line-height:28px;margin:0 -4px 0 -5px}
.thp-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.thp-2{display:flex;align-items:center;gap:12px;min-height:36px;margin-top:8px}
.thp-2 h1{min-width:0;margin:0;font-size:22px;font-weight:600;line-height:1.5;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thp-st{flex:none;font-size:16px;font-weight:600}
.thp-st.late{color:var(--red)}
.thp-cn{flex:none;font-size:14px;color:var(--tl2)}
.thp-1 .thp-sh{flex:none;margin-right:10px;font-size:14px;color:var(--tl2);white-space:nowrap}
.thp-1 .thp-btn{margin-right:6px}
.thp .thp-btn{flex:none;height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;line-height:32px;white-space:nowrap}
.thp .thp-btn:hover{background:var(--f3)}
.thp-3{position:relative;display:flex;align-items:center;gap:8px;min-height:30px;font-size:14px;color:var(--tl2);white-space:nowrap}
.thp-3 .mt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.thp-3 a{color:inherit;text-decoration:underline;text-decoration-color:var(--tline2);text-underline-offset:4px;cursor:pointer}
.thp-3 a:hover{color:var(--l1)}
.thp .thp-dv{padding:1px 3px;margin:0 -3px;border-radius:6px}
.thp .thp-dv:hover,.thp .thp-dv[aria-expanded="true"]{background:var(--tsel);color:var(--l1)}
.thp .thp-dtl{flex:none;font-size:14px;color:var(--tl2)}
.thp .thp-dtl:hover,.thp .thp-dtl[aria-expanded="true"]{color:var(--l1)}
.thp-dtp{position:absolute;right:0;top:32px;z-index:65;width:372px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:12px 18px 14px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px var(--tline2);font-size:16px;color:var(--l1);white-space:normal}
.thp-dtp .r{display:flex;align-items:baseline;gap:12px;padding:5px 0}
.thp-dtp .r>span{flex:none;width:52px;font-size:14px;color:var(--tl2)}
.thp-dtp .r>div{min-width:0;word-break:break-word}
.thp-dtp .r i{font-style:normal;font-size:14px;color:var(--tl2)}
.thp-menu{position:absolute;right:0;top:36px;z-index:70;width:168px;box-sizing:border-box;padding:6px;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px var(--tline2)}
.thp .thp-menu button{display:block;width:100%;height:36px;padding:0 12px;border-radius:6px;font-size:16px;color:var(--l1)}
.thp .thp-menu button:hover{background:var(--f3)}
.thp .thp-menu button:disabled{color:var(--tph);cursor:default;background:none}
.thp .thp-menu button[aria-checked="true"]{font-weight:600}
.thp-menu .why{padding:4px 12px 6px;font-size:13px;line-height:1.4;color:var(--tl2);white-space:normal}
.thp-menu.thp-km{right:auto;top:30px;width:200px}
.ti-moji{margin:0 0 12px;font-size:14px;color:var(--tl2)}
.ti-moji .ti-lnk{margin-left:6px}
.thp-b{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.thp-hd{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.thp-hl{display:flex;align-items:center;gap:10px;height:52px;padding:0 32px}
.thp-hr{position:relative;display:flex;align-items:center;gap:8px;height:52px;padding:0 28px 0 24px;border-left:1px solid var(--tline2)}
.thp-cols{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.thp-b.one .thp-hd,.thp-b.one .thp-cols{grid-template-columns:minmax(0,1fr)}
.thp-b.one .thp-hr,.thp-b.one .thp-r{display:none}
.thp-b.one .thp-hl{padding-right:28px}
.thp-l{position:relative;min-height:0}
.thp-ls{position:absolute;inset:0;overflow-y:auto;padding:2px 20px 104px;scrollbar-width:none}
.thp-ls::-webkit-scrollbar{display:none}
.thp-b.one .thp-ls{padding-right:16px}
.thp-l>i{position:absolute;left:0;right:0;pointer-events:none;opacity:0;transition:opacity .12s}
.thp-l>i.fdt{top:0;height:16px;background:linear-gradient(#fff,rgba(255,255,255,0))}
.thp-l>i.fdb{bottom:0;height:44px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.thp-l.hu>i.fdt,.thp-l.hd>i.fdb{opacity:1}
.thp-r{min-width:0;min-height:0;overflow-y:auto;border-left:1px solid var(--tline2);padding:14px 28px 24px 24px}
.thp-none{padding:28px 12px;font-size:16px;color:var(--tl2)}
.thp-qnav{display:inline-flex;align-items:center;gap:6px;color:var(--tl2)}
.thp-qnav b{font-weight:600;color:var(--l1)}
.thp .thp-qnav button{width:28px;height:28px;border-radius:14px;line-height:28px;text-align:center;font-size:16px;color:var(--l1)}
.thp .thp-qnav button:hover{background:var(--f3)}
.thp .thp-qnav button.off{color:var(--tph);cursor:default;background:none}
.thp-seg{display:inline-flex;flex:none;padding:2px;border-radius:999px;background:var(--f3)}
.thp .thp-seg button{height:30px;padding:0 15px;border-radius:999px;font-size:14px;color:var(--tl2);white-space:nowrap}      /* 휴대폰 390 에서 글자가 한 자씩 꺾이지 않게 */
.thp .thp-seg button.on{background:#fff;color:var(--l1);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.thp-it{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;padding:12px;border-bottom:1px solid var(--line);cursor:pointer}
.thp-it.on{background:var(--tsel)}
.thp-gt{display:flex;align-items:center;height:32px}
.thp-no{box-sizing:border-box;width:24px;padding-right:4px;text-align:right;font-size:14px;color:var(--tline2);font-variant-numeric:tabular-nums}
.thp-gt svg{width:16px;height:16px;fill:none;stroke:var(--tl2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.thp .thp-cb{width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.5);display:inline-flex;align-items:center;justify-content:center}
.thp .thp-cb.on{background:rgba(0,0,0,.36);box-shadow:none}
.thp-gt .thp-cb svg{width:11px;height:11px;stroke:#fff;stroke-width:2.2;visibility:hidden}
.thp-gt .thp-cb.on svg{visibility:visible}
.thp-ih{display:flex;align-items:center;gap:8px;min-width:0;min-height:32px;font-size:14px;color:var(--tl2);white-space:nowrap}
.thp-ih>*{flex:none}
.thp-ih .qn{font-size:16px;font-weight:600;color:var(--l1)}
.thp-ih .gs,.thp-ih .lti,.thp-ih .lp,.thp-ih .ft{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.thp-ih .lti{font-size:16px;color:var(--l1)}
.thp-it.done .lti{color:var(--tl2)}
.thp-ih .sp{flex:1 1 0}
.thp-ih .ls{padding-left:2px}
.thp-tyl{display:inline-block;height:24px;padding:0 7px;margin-left:-7px;border-radius:12px;background:var(--f3);font-size:14px;font-weight:600;line-height:24px;color:var(--l1)}
.thp .thp-rb{height:32px;padding:0 20px;margin-left:8px;border-radius:999px;background:var(--blue);color:#fff;font-size:14px;line-height:32px}
.thp-bx{position:relative;max-height:5.1em;margin-top:2px;overflow:hidden;font-size:16px;line-height:1.7;white-space:pre-line;word-break:break-word}
.thp-b.one .thp-bx{max-width:720px}
.thp-bx .fl{display:none;position:absolute;right:0;bottom:0;padding-left:28px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 22px)}
.thp-it.on .thp-bx .fl{background:linear-gradient(90deg,rgba(232,241,251,0),#E8F1FB 22px)}
.thp-bx.cut .fl{display:block}
.thp .thp-bx .fl button{margin-left:4px;font-size:14px;color:var(--tl2)}
.thp .thp-bx .fl button:hover{text-decoration:underline}
.thp-fut{display:flex;align-items:center;gap:10px;margin:14px 12px 4px;font-size:14px;color:var(--tl2)}
.thp-fut::before,.thp-fut::after{content:"";flex:1 1 0;height:1px;background:var(--tline2)}
.thp-fv{position:absolute;left:0;top:0;bottom:0;z-index:10;width:50%;display:flex;flex-direction:column;background:#fff;border-top:1px solid var(--line);box-shadow:10px 0 24px rgba(0,0,0,.13);clip-path:inset(0 -40px 0 0)}
.thp-b.one .thp-fv{width:100%;box-shadow:none;clip-path:none}
.thp-fvh{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 32px;border-bottom:1px solid var(--line)}
.thp-b.one .thp-fvh{padding-right:16px}
.thp-fvh .thp-ih{flex:1 1 auto}
.thp-fvs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 32px 48px 80px;font-size:16px;line-height:1.75;word-break:break-word}
.thp-fvs p{margin:0 0 10px}
.thp-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.thp .thp-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:30px;padding:0 12px 0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px}
.thp-chip svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--tl2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.thp-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thp-wr ::placeholder{color:var(--tph);font-weight:400;opacity:1}
.thp-wtt{display:flex;align-items:flex-start;gap:10px}
.thp-wtt .thp-cb{flex:none;width:18px;height:18px;margin-top:8px}
.thp-wr input.thp-wti{flex:1 1 auto;min-width:0;border:0;outline:0;padding:0;background:none;font-family:inherit;font-size:22px;font-weight:600;line-height:1.5;color:var(--l1)}
.thp-wr textarea.thp-wt{display:block;width:100%;min-height:96px;margin-top:10px;border:0;outline:0;padding:0;resize:none;overflow:hidden;background:none;font-family:inherit;font-size:16px;line-height:1.75;color:var(--l1)}
.thp-frow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:40px;margin-top:6px;font-size:14px;color:var(--tl2)}
.thp .thp-fb{height:32px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:16px;line-height:32px;color:var(--l1)}
.thp .thp-fb:hover,.thp .thp-fb[aria-expanded="true"]{background:var(--f3)}
.thp-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 6px 0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;color:var(--l1)}
.thp-chip button{width:22px;height:22px;border-radius:11px;font-size:14px;color:var(--tl2)}
.thp-chip button:hover{background:var(--f3);color:var(--l1)}
.thp-wr .thp-h3{margin:18px 0 0;font-size:16px;font-weight:600;color:var(--l1)}
.thp-nt{margin-top:10px;font-size:14px;color:var(--tl2)}
.thp-nt b{font-weight:600;color:var(--l1)}
.thp .thp-btn.pri{height:34px;padding:0 22px;background:var(--blue);color:#fff;font-weight:600;box-shadow:none;line-height:34px}
.thp .thp-btn.pri:hover{background:var(--blue);filter:brightness(.94)}
.thp .thp-btn.pri:disabled{opacity:.45;cursor:default;filter:none}
/* 쓰기 몸(열두째 판 d · 결정 513 · 564 · 566 · 570 ①) — Thing 한 장과 같은 꼴: 제목 22 · 메타 줄 14(첫 칸 종류 ▾ · 값은 글자 단추) · 569 선(틈 14 가운데 · 떠 있게) · 본문 16 */
.thp-wm{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;min-height:30px;font-size:14px;color:var(--tl2)}
.thp-wm b{color:var(--l1);font-weight:600}
.thp-wm .em{color:var(--tph)}
.thp-dot{font-style:normal}
.thp .thp-wm button.fp-tg{padding:0 10px}
.thp-wk{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.thp-wk svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.thp-wm .thp-tent.on{color:var(--l1);font-weight:600}                                /* 「예정」 켬(날짜 미정) */
.fp.thp-t1 .fp-tmr span,.fp.thp-t1 .fp-tmr [data-t="e"]{display:none}                  /* 통화 시각 = 시각 한 칸(종료 칸 감춤) */
.thp-wr .thp-who{margin-top:0;min-height:34px}
.thp .thp-who .thp-wadd{padding:0 8px;color:var(--tl2)}
.thp-wbd{position:relative;margin-top:14px}
.thp-wbd::before,.thp-ml .mbx>.rted::before{content:'';position:absolute;left:0;right:0;top:-7px;height:1px;background:var(--line);pointer-events:none}
.thp-wr .thp-wbd textarea.thp-wt{margin-top:0}
/* 메일 쓰기 — 메일 부품(app.js mbHtml) 칸을 제자리 바꿈(order): 제목 · 메타 · (받는 사람 · 참조 — 펼칠 때만) · 첨부 칩 · 선 · 본문 · 바닥 「＋ 첨부 …… [보내기 ▾]」 · 보내는 주소 */
.thp-ml .mbx>*{order:6}
.thp-ml .mbx>.mbln:has(.mbsj){order:1;min-height:0;padding:0;border-top:0;cursor:auto}
.thp-ml .mbx .mbln input.mbsj{height:auto;font-size:22px;font-weight:600;line-height:1.5;color:var(--l1)}
.thp-ml .mbx>.thp-mlm{order:2}
.thp-ml .mbx>.mbln[data-mbln],.thp-ml .mbx>.mbsubs{order:3}
.thp-ml:not(.fx) .mbx>.mbln[data-mbln],.thp-ml:not(.fx) .mbx>.mbsubs{display:none}
.thp-ml.fx:hover{text-decoration:none}   /* 「펼침」 표식 fx 가 전역 글자 단추 .fx:hover(밑줄)와 겹친다 — 메일 쓰기 칸 전체에 밑줄이 서지 않게 */
.thp-ml .mbx>.mbln[data-mbln]{min-height:36px;padding:2px 0;border-top:0}
.thp-ml .mbx>.mbln[data-mbln] .k{min-width:4em;font-size:14px;color:var(--tl2)}
.thp-ml .mbx>.mbsubs{padding:0}
.thp-ml .mbx>[id$="FilesBox"]{order:4}
.thp-ml .mbx .mbfiles{padding:8px 0 0;gap:8px}
.thp-ml .mbx .mbfiles .fl{min-height:30px;padding:0 12px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px}
.thp-ml .mbx>.rted{order:5;position:relative;margin-top:14px;border-top:0;overflow:visible}
.thp-ml .mbx .rted .rtbody{min-height:160px;padding:0;font-size:16px;line-height:1.75}
.thp-ml .mbx .rted .rtbody.rt-empty::before{left:0;top:0}
.thp-ml .mbx>.mbmsg,.thp-ml .mbx>.thp-mlb{padding:8px 0 0}
.thp-ml .mbx>.mbbar{order:7;padding:16px 0 0;border-top:0;gap:6px 12px}
.thp-ml .mbx>.thp-mlf{order:8;padding-top:10px;font-size:14px;color:var(--tl2)}
.thp-ml .thp-mlf .from{font-size:14px;color:var(--tl2)}
.thp-ml .mbx>.mbnote{order:9;padding:6px 0 0}
/* [보내기 ▾] — 둘로 나뉜 단추(장면 4b) · 주 단추 = 바로 보냄 · ▾ = 미리보기 · 다듬기 · 검토 요청(부품 메뉴 · 오른쪽 끝 맞춤) */
.thp-sg{position:relative;flex:none;display:inline-flex;align-items:stretch;height:34px;border-radius:999px;background:var(--blue);color:#fff}
.thp .thp-sg>.thp-sgo{height:34px;padding:0 18px 0 22px;border:0;border-radius:999px 0 0 999px;background:none;color:#fff;font:inherit;font-size:16px;font-weight:600;line-height:34px;cursor:pointer}
.thp .thp-sg>.thp-sgm{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:0 999px 999px 0;box-shadow:inset 1px 0 0 rgba(255,255,255,.35);color:#fff}
.thp-sgm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thp .thp-sg>button:hover,.thp .thp-sg>.thp-sgm.open{background:rgba(0,0,0,.12)}
.thp .thp-sg>.thp-sgo:disabled{opacity:.55;cursor:default;background:none}
/* 미리보기(장면 4d) — 부품 겹창(fp.js fpModal · 폭 800) · 길면 겹창 안에서 굴러간다 */
.fp-ov.thp-pvo{max-width:calc(100vw - 24px);max-height:calc(100vh - 72px);overflow-y:auto}
.thp-pvo .fp-pv-b .rt p,.thp-pvo .fp-pv-b>p{margin:0 0 10px}
@media (max-width:600px){.fp-ov.thp-pvo{top:12px;padding:16px 16px 18px}}
#modalBox.ask:has(.thp-pv){width:800px;max-width:calc(100vw - 32px);padding:20px 40px 24px;border-radius:14px}
.thp-pv{--tl2:rgba(0,0,0,.62);--tline2:rgba(0,0,0,.14);color:var(--l1)}
.thp-pv .pvh{display:flex;align-items:center;height:38px}
.thp-pv h2{margin:0;font-size:22px;font-weight:600}
.thp-pv .sp{flex:1 1 0}
.thp-pv .thp-ib{width:30px;height:30px;border-radius:15px;font-size:16px;color:var(--tl2)}
.thp-pv .thp-ib:hover{background:var(--f3);color:var(--l1)}
.thp-cmt .cbthr{margin-top:12px;max-height:64vh;overflow-y:auto}
/* AI 정리 한 장(오른쪽 칸 · 결정 437) — 요지 · 결론 · 쟁점 · 흐름 */
.thp-hrt{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:600;color:var(--l1)}
.thp-aib{font-size:16px;line-height:1.75;color:var(--l1);word-break:break-word}
.thp-aib>.thp-nt:first-child{margin-top:0}
.thp-aib h3{margin:22px 0 6px;font-size:16px;font-weight:600}
.thp-aib p{margin:0 0 8px}
.thp-aib ul{margin:0;padding-left:20px}
.thp-aib .cvprog{margin-bottom:8px}
.thp-r .ti-th.ti-bare{padding:0;min-height:0}
.ti-bare .ti-tt{margin-top:0}
.ti-top.ti-top0{min-height:0;height:0}
.ti-top0 .ti-btns{position:absolute;right:0;top:0}
.ti-top0 .ti-menu{top:-10px}
#vThread{display:none}
body.thpg #main{padding:0;overflow:hidden}
body.thpg #main>:not(#vThread){display:none !important}
body.thpg #vThread{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0}
#vThread>.thp{flex:1 1 auto;height:auto}
.thp-fvh .thp-qnav{gap:0;margin-left:10px}
.thp-pg{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 28px 40px 32px}
/* 쓰기 크게 · 스레드 밖 쓰기 틀(결정 496) — Thing 한 장 틀(.ti-page · 칼럼 720)에 같은 쓰기 몸 · 칸 머리(#thHr)는 틀 머리 한 줄로 옮겨 온다 */
.thw-hd{display:flex;align-items:center;gap:10px;min-height:52px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.thw-wh{flex:none;display:flex;align-items:center;min-width:0;max-width:60%}
.thw-wh:empty{display:none}
.thw-hd .thp-hr{flex:1 1 auto;min-width:0;height:auto;min-height:52px;padding:0;border-left:0}
.thp .thw-wb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thw-wb .ph{color:var(--tph)}
/* 그 종류의 몸을 쓸 수 없을 때 — 까닭 한 줄 + 길(결정 496) */
.thp-why{font-size:16px;line-height:1.75;color:var(--tl2)}
.thp-why p{margin:0 0 12px}
@media (max-width:600px){
  .thp-h{padding:12px 16px 4px}
  .thp-2{flex-wrap:wrap;gap:4px 10px;margin-top:8px}
  .thp-2 h1{flex:0 0 100%;line-height:1.4;white-space:normal}
  .thp-3{min-height:36px}
  .thp-3 .mt{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.6}
  .thp-1 .thp-sh{margin-right:6px}
  .thp-dtp{width:330px}
  .thp-hd,.thp-cols{grid-template-columns:minmax(0,1fr)}
  .thp-hl,.thp-b.one .thp-hl{height:50px;padding:0 16px}
  .thp-hr{height:50px;padding:0 12px 0 16px;border-left:0;gap:6px}
  .thp .thp-seg button{padding:0 10px}      /* 「쓰기 | 보기」 가 줄지 않으니(flex:none) 칸 머리 ✕ 가 390 안에 들게 */
  .thp-b:not(.one) .thp-hl,.thp-b:not(.one) .thp-l{display:none}
  .thp-r{border-left:0;padding:12px 16px 24px}
  .thp .thp-ib.xp{display:none}
  .thp-ls,.thp-b.one .thp-ls{padding:2px 6px 32px}
  .thp-it{column-gap:6px;padding:10px}
  .thp-no{width:20px;padding-right:2px}
  .thp-ih{flex-wrap:wrap;gap:4px 8px}
  .thp-ih .gs{flex:0 0 100%;order:9;color:var(--l1);white-space:normal}
  .thp-ih .lp{display:none}
  .thp-tyl{padding:0 6px;margin-left:-6px}
  .thp-fv,.thp-b.one .thp-fv{width:100%;box-shadow:none;clip-path:none;border-top:0}
  .thp-fvh,.thp-b.one .thp-fvh{align-items:flex-start;padding:10px 8px 8px 16px}
  .thp-fvs{padding:8px 16px 40px}
  .thp-pg{padding:0}
}
/* ---------------------------------------------------------------------
   열두째 판 d(결정 559~570 · 2026-10-16 스레드 부서 묶음 1) — 위 꼴 위에 바꾼 것만 · 떠 있는 칸은 부품(.fp*) 그대로
   맨 위 줄 40 · 머리(상태 칩 · AI 정리 · 속성 열기) · 속성 표 · AI 정리 블록 · 왼쪽 칸 머리(라이브러리 · ＋) · 선택 막대 · 줄 규격 · 하위 메모
   --------------------------------------------------------------------- */
.thp-h{padding:0 28px 8px 32px}
.thp-top{position:relative;display:flex;align-items:center;gap:8px;height:40px;min-width:0}
.thp-top .gxn{margin-right:-6px}
.thp .fp-up.thp-back{display:inline-flex;width:24px;max-width:none;height:24px;padding:0;box-shadow:none;line-height:normal}   /* 옛 「‹ 뒤로」 알약 꼴(.thp-back)을 걷고 부품 꼴 그대로 */
.thp-crm{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;line-height:1.5;color:var(--tl2);white-space:nowrap;overflow:hidden}
.thp-crm a{flex:none;color:inherit;text-decoration:none;cursor:pointer}
.thp-crm a:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.thp-crm a:hover{color:var(--l1);text-decoration:underline;text-underline-offset:4px}
.thp-crm i{flex:none;font-style:normal}
.thp-2{position:relative;margin-top:16px}
.thp-2 .thp-stc{flex:none;font-size:16px;font-weight:600}
.thp-2 .fp-tg.thp-stc{margin:-4px -2px}
.thp .fp-ai.off{opacity:.4;cursor:default}
.thp .fp-ai.off:hover{background:none}
.thp-3 .thp-v{font-size:14px}
/* 속성 표(장면 7d) — 이름표 위 · 값 아래 · 칸 132 · 선 하나 */
.thp-prop{position:relative;margin:6px 0 2px;padding:0 0 8px;max-width:720px;border-bottom:1px solid var(--line);font-size:14px}
.thp-prow{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:2px;padding:3px 0}
.thp-pc{display:flex;flex-direction:column;align-items:flex-start;min-width:132px;max-width:100%}
.thp-pc .k{line-height:1.45;color:rgba(0,0,0,.45)}
.thp-pc .v{line-height:1.6;color:var(--l1);white-space:normal;word-break:keep-all}
.thp-pc .v .fp-tg.fl{margin:-4px -10px}
.thp-pc .em{color:rgba(0,0,0,.40)}
.thp-pc a{color:inherit;text-decoration:none}
.thp-pc a:hover{text-decoration:underline;text-underline-offset:3px}
.thp-psep{height:1px;margin:3px 0;background:var(--line)}
.thp-prow.co{column-gap:8px}
.thp-prow.co .thp-pc{min-width:0}
.thp-pgt{align-self:flex-end;font-style:normal;line-height:1.6;color:var(--tl2)}   /* 고객사 › 프로젝트(장면 7d) */
/* AI 정리 결과 블록(장면 0a · 8) — 머리 아래 · 왼쪽 옅은 보라 선 */
.thp-aiw{max-width:720px;margin:6px 0 2px;padding:0 0 6px 12px;box-shadow:inset 2px 0 0 rgba(97,85,245,.35)}
.thp-aih{display:flex;align-items:center;gap:8px;min-height:28px}
.thp .thp-aif{font-size:14px;color:var(--tl2)}
.thp .thp-aif:hover{color:var(--l1)}
.thp-aiw .thp-aib h3{margin-top:12px}
/* 왼쪽 칸 머리 — [‹ 목록] …… [라이브러리] [＋] · 선택 막대 */
.thp-hl{position:relative}
.thp .thp-lback{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px 0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--tline2);font-size:14px;white-space:nowrap}
.thp .thp-lback:hover{background:var(--f3)}
.thp .thp-lib{background:#fff;margin-right:2px}
.thp .thp-lib:hover{background:var(--fp-on)}
.thp .thp-lib.on{background:rgba(0,0,0,.08);box-shadow:inset 0 0 0 1px rgba(0,0,0,.26)}
.thp-hl:has(.sb-bar){padding:0 12px}
/* 선택 막대 한 벌(selbar.js · 결정 547 ⑥ · 638 ④) — 「N줄 고름 | 칩 …… ✕」 · 스레드 한 장 · 목록이 같은 꼴(옛 .thp-bulk) */
.sb-bar{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;height:40px;padding:0 4px 0 12px;border-radius:8px;background:rgba(0,0,0,.06);font-size:14px;white-space:nowrap}
.sb-bar button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.sb-bar b{flex:none;font-weight:600;margin-right:4px}
.sb-bar .sp{flex:1 1 auto}
.sb-sep{flex:none;width:1px;height:16px;margin:0 2px;background:rgba(0,0,0,.14)}
.sb-bar .sb-ck{flex:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;background:rgba(0,0,0,.72)}
.sb-ck svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.sb-bar .sb-c{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font-size:14px;white-space:nowrap}
.sb-bar .sb-c:hover,.sb-bar .sb-c.open{background:var(--f3)}
.sb-bar .sb-ib{flex:none;width:28px;height:28px;border-radius:14px;line-height:28px;text-align:center;font-size:16px;color:rgba(0,0,0,.62)}
.sb-bar .sb-ib:hover,.sb-bar .sb-ib.open{background:var(--f3);color:var(--l1)}
/* 왼쪽 칸 한 장 · 라이브러리(목록 자리에 · 굴러감) */
.thp-lo,.thp-lb{position:absolute;inset:0;overflow-y:auto;padding:14px 20px 48px 32px}
.thp-lo{padding:0 4px 40px 8px}                 /* 한 장(thing.js 옆 꼴)은 제 여백이 있다 — 제목이 목록 줄 제목 자리에 오게 */
.thp-hr .thp-crm{flex:0 1 auto;margin-left:6px}
/* 줄 — [네모 14 · 번호 · 아이콘] 제목 … [보낸 → 받은 · 유형 · 상태] 날짜 · 좁으면(1 : 1) 제목 · 보낸 이 … 날짜(지연이면 그 자리에 빨강) */
.thp-it{column-gap:10px}
.thp .thp-pk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:8px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.26)}
.thp .thp-pk.on{background:rgba(0,0,0,.72);box-shadow:none}
.thp-gt .thp-pk svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.2;visibility:hidden}
.thp-gt .thp-pk.on svg{visibility:visible}
.thp-no{width:22px;color:rgba(0,0,0,.28)}
.thp-mn{min-width:0}
.thp-ih .lti{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.thp-ih .snd{flex:none;display:none;margin-left:0}
.thp-ih .cw{flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thp-ih .cw.wh{width:120px}
.thp-ih .cw.ty{width:64px}
.thp-ih .cw.sx{width:64px}
.thp-ih .cw.sx.late,.thp-ih .dl{color:var(--red);font-weight:600}
.thp-ih .dl{flex:none;display:none;width:96px;text-align:right}
.thp-ih .ls{flex:none;min-width:96px;padding-left:0;text-align:right}
.thp-b:not(.one) .thp-ih .cw{display:none}
.thp-b:not(.one) .thp-ih .snd{display:inline}
.thp-b:not(.one) .thp-ih .dl{display:inline}
.thp-b:not(.one) .thp-ih .dl+.ls{display:none}
.thp-it.done .lti{color:var(--tl2)}
/* 하위 메모 — 부모 줄 바로 아래 접힌 한 줄(번호 · 네모 없음) */
.thp-it.par{border-bottom:0}
.thp-it.sub{padding-top:0;padding-bottom:8px}
.thp-it.sub .thp-gt{width:60px;height:28px}
.thp-it.sub .thp-ih{min-height:28px}
.thp-it.sub .lti{font-size:14px;color:var(--tl2)}
.thp-it.sub .lti em{font-style:normal;font-size:16px;color:var(--l1)}
.thp-it.sub .lti svg{width:14px;height:14px;margin:0 4px;vertical-align:-2px;fill:none;stroke:var(--tl2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.thp-sar{font-style:normal}
@media (max-width:600px){
  .thp-h{padding:0 12px 6px 16px}
  .thp-top .thp-crm>a:first-child:not(:last-child),.thp-top .thp-crm>a:first-child:not(:last-child)+i{display:none}
  .thp-top [data-th="share"],.thp-top [data-th="share"]+i{display:none}
  .thp-2{margin-top:10px}
  .thp-hr .thp-crm{display:none}
  .thp .thp-pk{display:none}
  .thp-ih{flex-wrap:nowrap}
  .thp-ih .cw{display:none}
  .thp-ih .snd{display:inline}
  .thp-ih .dl{display:inline}
  .thp-ih .dl+.ls{display:none}
  .thp-ih .ls{width:auto;min-width:44px}
  .thp-lo,.thp-lb{padding:12px 16px 32px}
  .thp-it.sub .thp-gt{width:42px}
  .thp-hl .fp.fp-x .fp-row>span{display:none}     /* ＋ 칩 여섯 — 휴대폰은 그림만(칸이 화면 안에 들게) */
}

/* =====================================================================
   구성물 목록 한 부품(src3/pbody.js · 장면 ② 프로젝트 몸통 넷째 판 · 2026-10-14) — 접두 .pbx
   시안 docs/mock/프로젝트-몸통-시안-확정/넷째판-* · 첫 커밋의 임시 <style> 덩이(PB_CSS)를 그대로 옮김
   ===================================================================== */
.pbx{--pl1:rgba(0,0,0,.88);--pl2:rgba(0,0,0,.62);--pline:rgba(0,0,0,.08);--pline2:rgba(0,0,0,.14);--pf3:rgba(0,0,0,.05);--pf4:rgba(0,0,0,.03);--psel:rgba(0,112,210,.09);--pblue:#0070D2;--pred:#D61E24;position:relative;font-size:16px;color:var(--pl1);word-break:keep-all}
.pb-spl{display:flex;align-items:stretch}.pb-left{flex:1;min-width:0}.pb-grip,.pb-side{display:none}
.pbx.sd .pb-left{overflow:auto;padding:0 16px 0 13px}.pbx.sd .pb-grip{display:block;width:9px;flex:none;border-left:1px solid var(--pline2);position:relative}
.pb-grip i{position:absolute;left:1px;top:380px;width:5px;height:44px;border-radius:3px;background:rgba(0,0,0,.24)}
.pbx.sd .pb-side{display:block;width:600px;flex:none;overflow:auto}
/* 손잡이 끌기(pbody.js pbGripDown ⑩) — 옆 창 최소 420 · 목록 몫 440(+ 손잡이 9)은 창이 좁아져도 남김 · 끄는 동안 글자 고름 · 본문 틀 눌림 없음 */
.pbx.sd .pb-grip{cursor:col-resize;touch-action:none}.pbx.sd .pb-side{min-width:420px;max-width:calc(100% - 449px)}
body.pb-drag{cursor:col-resize;user-select:none}body.pb-drag iframe{pointer-events:none}
/* 2026-10-18 묶음 2-b — 넷째판 꼴(.pb-bar · .pb-box · .pb-r · .pb-r3 · 두 줄 .pb-n)은 걷음 · 아래는 머리 틀(.pbx.pv)이 함께 쓰는 부품만 */
.pb-tgl{display:inline-flex;align-items:center;height:28px;padding:0 10px;margin-right:4px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:var(--pl1);cursor:pointer;flex:none}
.pb-tgl.on{background:rgba(0,0,0,.06);font-weight:600}.pb-tgl:hover{background:var(--pf3)}   /* 「모두 펼침」(프로젝트 · 자문 탭 도구 줄 칩 앞) */
.pb-tb .plsh{margin-right:6px;flex:none}                                     /* 공유 전 프로젝트 [법인 공유](칩 앞) */
.pb-ib{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:15px;background:none;font-size:16px;color:var(--pl2);cursor:pointer}.pb-ib:hover{background:var(--pf3)}
.pb-sb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.4);cursor:pointer;flex:none}
.pb-sb.on{background:rgba(0,0,0,.72);box-shadow:none}.pb-sb svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pb-ki{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pb-t{overflow:hidden;text-overflow:ellipsis;min-width:0}.pb-t.a{cursor:pointer}.pb-t.a:hover{text-decoration:underline}
.pb-nk,.pb-only{font-size:14px;color:var(--pl2);flex:none;font-variant-numeric:tabular-nums}
.pb-lp{font-size:14px;color:var(--pl2);flex:0 100 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pb-mo{width:30px;margin-left:8px;flex:none;visibility:hidden}
.pb-empty,.pb-wait{padding:28px 20px;font-size:14px;color:var(--pl2)}
.pb-stale{display:flex;align-items:center;gap:8px;padding:8px 20px;font-size:14px;color:var(--pl2)}.pb-fail .sm,.pb-stale .sm{margin-left:4px}
.pbx .pb-cap{padding:12px 20px;font-size:14px;color:var(--pl2)}.pbx.pv .pb-cap{padding:12px 0}   /* 목록 맨 아래 「최근 N건까지 …」(pbCapHtml · 끊겼을 때만) */
.pb-pop{position:absolute;z-index:70;min-width:160px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px var(--pline2);font-size:16px;color:var(--pl1)}
.pb-pop button{display:flex;align-items:center;gap:8px;width:100%;height:36px;padding:0 12px;border:0;border-radius:6px;background:none;font:inherit;color:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.pb-pop button:hover{background:var(--pf3)}.pb-pop button.cur{font-weight:600}.pb-pop hr{border:0;border-top:1px solid var(--pline);margin:5px 6px}
/* 고객사 「전체」 · 프로젝트 · 자문 탭 몸통 자리(company.js coBodyHtml #coPb · 머리 틀 한 벌) */
.copb{margin:8px -4px 0}
/* 사이드창을 연 꼴 = 시안 넷째 판(왼쪽 목록 597 · 손잡이 9 · 사이드창 600 이 창 오른쪽 끝에 붙음 · 장면 ② 화면 리뷰 S6) — #main 안쪽 여백(--mpx)을 넘어 편다 */
.copb:has(> .pbx.sd){margin-left:calc(6px - var(--mpx));margin-right:calc(0px - var(--mpx))}
@media (max-width:999px){.copb{margin:8px 0 0}}
.copb .pbx.pv.sd .pb-tb{flex-wrap:wrap;row-gap:4px}                        /* 고객사 「전체」 탭(preset 'all' · 묶음 2-a) — 옆 창을 열면 칩 여섯 · 치운 것 · ＋ 가 잘리지 않게 두 줄로(「전체」 메뉴와 같음) */
@media (max-width:1000px){.copb .pbx.pv .pb-tb,#vAll .pbx .pb-tb{flex-wrap:wrap;row-gap:4px}}   /* 900 폭(사이드바 펼침)에서 「＋」 가 도구 줄 끝을 넘던 것(백로그 · 묶음 2-a 리뷰 L4) — 같은 두 줄 *//* 휴대폰(≤600) 고객사 탭 — 시안 `고객사전체탭-시안-확정/첫째판-휴대폰-전체탭-390` : 첫 줄 = 보기 토글 …… 「＋」 · 다음 줄부터 칩 · 「치운 것 N」 이 칩 줄 끝(「＋」 가 홀로 떨어지지 않게) */
@media (max-width:600px){
  .copb .pbx.pv .pb-tb .pb-vw{order:-3}
  .copb .pbx.pv .pb-tb .pb-pl{order:-2;margin-left:auto;margin-right:-10px}
  .copb .pbx.pv .pb-tb::before{content:"";order:-1;flex:0 0 100%;height:0}
}
/* 거름 preset(pbody.js preset 'plan' · 'all' · 프로젝트 부서 묶음 1 ②) — 접두 .pbx.pv · 잣대 = docs/mock/할일일정-시안-확정/여덟째판c-* · 전체목록-시안-확정/둘째판-*
   머리 틀 한 벌(612 ① · 613 · 625 · 630) = 도구 줄 [보기] …… [칩 · 치운 것 N · ＋] · 아래 전체 폭 옅은 선 .06 · 표 머리 글자 .55 · 선 없음
   칸(625 · 1440 그림 x) = 네모 14 · 아이콘 16(+10) · 고객사 104 · 제목 — · 보낸 사람 → 받은 사람 150 · 유형 96 · 상태 72 · 담당 64 · 날짜 [42][22][42] · ⋯ 28(+8) · 칸 사이 16 */
.pb-q{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 16px;margin:4px 0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--pline2);color:var(--pl2)}
.pb-q svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.pb-qi{flex:1;min-width:0;height:36px;border:0;outline:none;background:none;font:inherit;font-size:14px;color:var(--pl1)}.pb-qi::placeholder{color:rgba(0,0,0,.40)}
.pb-q .pb-qx{display:none}.pb-q.has .pb-qx{display:inline-flex}
.pb-tb{display:flex;align-items:center;gap:2px;min-height:36px;font-size:14px;color:var(--pl2);white-space:nowrap;position:relative;margin-bottom:10px}
.pb-tb::after{content:"";position:absolute;left:calc(0px - var(--mpx,0px));right:calc(0px - var(--mpx,0px));bottom:-6px;height:1px;background:rgba(0,0,0,.06);pointer-events:none}
.pb-tb .sp{flex:1}.pb-tb .pb-vw{display:inline-flex;margin-left:-10px}
.pb-gone,.pb-pl{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;cursor:pointer;flex:none}
.pb-gone{color:var(--pl2);margin-left:8px}.pb-gone.on{color:var(--pl1);background:rgba(0,0,0,.06)}
.pb-pl{color:var(--pl1);margin:0 -10px 0 8px}.pb-gone:hover,.pb-pl:hover{background:var(--pf3)}
.pb-lh{display:flex;align-items:center;height:36px;padding:0 12px;margin:0 -12px;font-size:14px;color:rgba(0,0,0,.55);white-space:nowrap;position:relative}
.pb-lh[hidden]{display:none}.pb-lh>*{flex:none}
.pb-lh.pb-bulk{height:40px;padding:0;color:var(--pl1)}.pb-lh.pb-bulk>.sb-bar{flex:1 1 auto}   /* 고름 막대 = 공용 부품 selbar.js(.sb-bar 가 회색 · 칩 · 묶음 2-b ⑤) */
.pb-l{display:flex;align-items:center;height:44px;padding:0 12px;margin:0 -12px;border-top:1px solid var(--pline);font-size:14px;color:var(--pl2);white-space:nowrap;position:relative;cursor:pointer}
.pb-lst>.pb-l:first-child,.pb-gh+.pb-l{border-top:0}.pb-l>*{flex:none}
.pb-l:hover{background:var(--pf4)}.pb-l.sel,.pb-l.on{background:var(--psel)}
.pb-c{margin-left:16px;overflow:hidden;text-overflow:ellipsis;line-height:24px}
.pbx.pv .pb-cck{width:14px;margin-left:0;display:inline-flex;align-items:center}
.pbx.pv .pb-cic{width:16px;margin-left:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--pl2)}
.pbx.pv .pb-sb{width:14px;height:14px;border-radius:4px}.pbx.pv .pb-sb svg{width:10px;height:10px}
.pb-cco{width:104px;font-size:16px;color:var(--pl1)}.pb-lh .pb-cco,.pb-lh .pb-ct{font-size:14px;color:inherit}
.pb-l>.pb-ct,.pb-lh>.pb-ct{flex:1 1 auto}.pb-ct{min-width:0;display:flex;align-items:center;gap:8px;font-size:16px;color:var(--pl1)}
.pb-l.th .pb-t,.pb-l.ur .pb-t{font-weight:600}.pb-l.sub .pb-ct{padding-left:20px}
.pb-csr{width:150px}.pb-cty{width:96px}.pb-cty .kd.q{font-weight:600;color:var(--pl1)}.pb-kw{color:var(--pl2)}
.pb-cst{width:72px;overflow:visible}.pb-l .pb-cst{color:var(--pl1)}
.pb-stb{font-size:14px;border:0;background:none;color:inherit;cursor:pointer}.pb-cst .pg{color:var(--pl2)}
.pb-cst .late,.pb-dst.late,.hm .late{color:var(--pred,var(--red));font-weight:600}   /* 「N일 지연」 한 벌 — 할 일·일정 목록 · 홈(리뷰 틀A L7 · .hm 은 .pbx 밖이라 --red 로) */.pb-cst .fin{color:var(--pl1)}.pb-cst .soft{color:var(--pl2)}   /* 일정 「예정」(잠정) */
.pb-cpp{width:64px}
.pb-cdt{width:124px;display:inline-flex;align-items:center;overflow:visible;font-variant-numeric:tabular-nums}
button.pb-cdt{height:24px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}.pb-lh .pb-cdt.on{font-weight:600}
.pb-dn{display:inline-flex;align-items:center}.pb-d1,.pb-d2{width:42px;flex:none;white-space:nowrap}.pb-dy{width:22px;flex:none;text-align:center}
.pb-l .pb-d2,.pb-dm{color:var(--pl1)}.pb-dm{white-space:nowrap}.pb-dst{display:none}
.pbx.pv .pb-mo{width:28px;margin-left:8px;visibility:visible;display:inline-flex;justify-content:center}.pbx.pv .pb-mo .pb-ib{width:28px;height:28px}
.pb-chv{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;background:none;color:var(--pl2);cursor:pointer}
.pb-chv svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .12s}.pb-chv.o svg{transform:rotate(90deg)}
.pb-dc{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:0;border-radius:999px;background:none;box-shadow:inset 0 0 0 1px var(--pline2);font:inherit;font-size:14px;color:var(--pl2);cursor:pointer}
.pb-dc{box-shadow:none;outline:1px dashed rgba(0,0,0,.28);outline-offset:-1px}.pb-dc svg{width:8px;height:8px;margin-left:5px;fill:currentColor}
.pb-srx{display:none;font-size:14px;color:var(--pl2);flex:none}
.pb-gh{display:flex;align-items:center;gap:8px;height:40px;margin-top:10px;font-size:14px;font-weight:600;color:var(--pl1);white-space:nowrap;border-bottom:1px solid var(--pline);cursor:pointer}
.pb-gh em{font-style:normal;font-weight:400;color:var(--pl2)}.pb-ghc{font-weight:400;color:var(--pl2)}
.pb-why{font-size:14px;line-height:20px;color:var(--fp-ink3);padding:0 12px 8px;white-space:nowrap}
.pb-cty .pb-dk{color:var(--pl1)}                                              /* 파일 줄 유형(0161 doc_kind · SS ①-a) */
/* 고객사 「파일」 탭(company.js coFilO · .copb.cofl · 시안 SS-파일탭 장면 1) — 하위 파일 = 둘째 줄 「↳ 부모 제목」(줄 높이 60) · 부모 없는 파일은 한 줄 44 · 휴대폰은 한 줄 */
.copb.cofl .pb-l:has(> .pb-ct > .pb-lp){height:60px}
.copb.cofl .pb-ct:has(> .pb-lp){position:relative;padding-bottom:18px}
.copb.cofl .pb-ct > .pb-lp{position:absolute;left:0;right:0;bottom:0;line-height:18px;white-space:nowrap}
@media (max-width:600px){.copb.cofl .pb-ct > .pb-lp,.copb.cofl .pb-ct > .pb-lib,.copb.cofl .pbx.pv .pb-srx{display:none}.copb.cofl .pb-l:has(> .pb-ct > .pb-lp){height:44px}.copb.cofl .pb-ct:has(> .pb-lp){padding-bottom:0}}
/* 「＋ 파일」 올리기 겹창(pbody pbFileUp · 시안 SS-파일탭 장면 2) — 부품 fpModal 안 · 끌어다 놓기 칸 · 올린 줄 · 접힌 점선 칩 둘 */
.pb-up{--pl1:rgba(0,0,0,.88);--pl2:rgba(0,0,0,.62);--pline2:rgba(0,0,0,.14);display:flex;flex-direction:column;gap:10px;padding:4px 0 8px;font-size:14px;color:var(--pl1)}
.pb-upz{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border-radius:10px;outline:1px dashed rgba(0,0,0,.28);outline-offset:-1px;color:var(--pl2);cursor:pointer;text-align:center}
.pb-upz.on,.pb-upz:hover{background:rgba(0,0,0,.03)}.pb-upz svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pb-upz b{font-weight:400;color:var(--pl1)}.pb-upz span{font-size:14px}
.pb-upr{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--pline2)}
.pb-upr .pb-ki{color:var(--pl2)}.pb-upn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pb-ups{flex:none;color:var(--pl2)}
.pb-upr .pb-ib{width:28px;height:28px;border:0;border-radius:14px;background:none;color:var(--pl2);cursor:pointer}.pb-upr .pb-ib:hover{background:rgba(0,0,0,.05)}
.pb-upc{display:flex;gap:8px;position:relative}
.fp-ov.pb-up-ov{max-width:calc(100vw - 24px)}   /* 휴대폰에서 800 폭이 화면 밖으로 넘던 것(t3_92 (8-c)) · 넘침 숨김은 두지 않음 — 칩 메뉴가 겹창 아래로 펼쳐짐(시안 장면 2) */
@media (max-width:600px){.fp-ov.pb-up-ov{top:12px;padding:16px 16px 18px}}
.pbx.pv .pb-empty{padding:28px 0}
.pbx.pv.f1 .pb-cst,.pbx.pv.f2 .pb-cst,.pbx.pv.f2 .pb-cty,.pbx.pv.f3 .pb-cst,.pbx.pv.f3 .pb-cty,.pbx.pv.f3 .pb-csr{display:none}
.pbx.pv.f1 .pb-l.lt .pb-dn,.pbx.pv.f2 .pb-l.lt .pb-dn,.pbx.pv.f3 .pb-l.lt .pb-dn{display:none}
.pbx.pv.f1 .pb-l.lt .pb-dst,.pbx.pv.f2 .pb-l.lt .pb-dst,.pbx.pv.f3 .pb-l.lt .pb-dst{display:inline}.pbx.pv.f3 .pb-srx{display:inline}
@media (max-width:600px){
  .pb-tb{flex-wrap:wrap;row-gap:4px}.pb-tb::after,.pb-tb .sp{display:none}.pb-q{margin:0 0 12px}.pb-qi{font-size:16px}
  .pbx.pv .pb-lh:not(.pb-bulk){display:none}.pb-lh.pb-bulk{height:auto;min-height:40px}.pb-lh.pb-bulk .sb-bar{height:auto;min-height:40px;flex-wrap:wrap;row-gap:4px;padding:6px 4px 6px 12px}
  .pbx.pv .pb-cco,.pbx.pv .pb-csr,.pbx.pv .pb-cty,.pbx.pv .pb-cst,.pbx.pv .pb-cpp,.pbx.pv .pb-mo{display:none}
  .pbx.pv .pb-cdt{width:auto;margin-left:12px}.pbx.pv .pb-cdt .pb-dy:empty,.pbx.pv .pb-cdt .pb-d2:empty{display:none}
  .pbx.pv .pb-srx{display:inline}.pbx.pv .pb-l.lt .pb-dn,.pbx.pv .pb-l.fn .pb-dn{display:none}.pbx.pv .pb-l.lt .pb-dst,.pbx.pv .pb-l.fn .pb-dst{display:inline}
  .pbx.pv .pb-dn:has(.pb-d2:not(:empty)) .pb-d1,.pbx.pv .pb-dn:has(.pb-d2:not(:empty)) .pb-dy{display:none}   /* 휴대폰 날짜 = 한 칸(기한 있으면 기한만 · 없으면 그 날 · 지연은 「N일 지연」 · 530 · 결정 644) */
}

/* ---- 「할 일·일정」 한 화면(tasks.js · 2026-10-16 · 여덟째-c) — 제목 = 머리 줄(#topTitle) · 붙는 머리(1s · 넓은 화면만 · 도구 줄 · 표 머리) ---- */
#vTasks #tkChips{display:none}
@media (min-width:601px){
  #vTasks .pb-tb{position:sticky;top:calc(var(--toph) + var(--chh) - var(--mpt));z-index:26;background:#fff}
  #vTasks .pb-lh:not([hidden]){position:sticky;top:calc(var(--toph) + var(--chh) + 46px - var(--mpt));z-index:25;background:#fff}
}
/* ---- 「전체」(app.js 1-1e · 2026-10-16 · 둘째판) — 같은 머리 틀 · 붙는 머리(옆 창을 열지 않았을 때 · 넓은 화면) · 옆 창은 창 오른쪽 끝까지(고객사 탭 .copb 와 같은 꼴) ---- */
@media (min-width:601px){
  #vAll .pbx:not(.sd) .pb-tb,#vShared .pbx:not(.sd) .pb-tb{position:sticky;top:calc(var(--toph) + var(--chh) - var(--mpt));z-index:26;background:#fff}
  #vAll .pbx:not(.sd) .pb-lh:not([hidden]),#vShared .pbx:not(.sd) .pb-lh:not([hidden]){position:sticky;top:calc(var(--toph) + var(--chh) + 46px - var(--mpt));z-index:25;background:#fff}
}
/* 붙는 머리 — 고름 막대(.sb-bar 회색)가 흰 바탕 위에 겹쳐 불투명하게(리뷰 2026-10-17 L2 · 묶음 2-b ⑤ 회색은 .sb-bar 몫) */
#vTasks .pb-lh.pb-bulk:not([hidden]),#vAll .pb-lh.pb-bulk:not([hidden]),#vAll .pbx:not(.sd) .pb-lh.pb-bulk:not([hidden]){background:#fff}
#alBody:has(> .pbx.sd),#shBody:has(> .pbx.sd){margin-left:calc(6px - var(--mpx));margin-right:calc(0px - var(--mpx))}
#alBody > .pbx.sd .pb-left,#shBody > .pbx.sd .pb-left{padding-left:calc(var(--mpx) - 6px)}   /* 편 만큼 안쪽을 비워 머리(찾기 칸 · 칩 줄) · 줄이 옆 창 전후 같은 x(결정 751) */
#vAll .pbx.sd .pb-tb{flex-wrap:wrap;row-gap:4px}                           /* 옆 창을 열면 칩 일곱 · 치운 것 · ＋ 가 잘리지 않게 두 줄로 */
/* 601~1000 폭(고객사 「전체」 탭 · 「전체」 메뉴) — 휴대폰 시안과 같은 원칙(「＋」 가 홀로 떨어지지 않게): 첫 줄 = 보기 토글 …… 「＋」 · 다음 줄 = 칩 · 치운 것.
   도구 줄이 늘 두 줄이라 「전체」 메뉴의 붙는 표 머리도 두 줄 높이 아래에 붙는다(리뷰 fixes6 M1 · M3 · Lead-v46 가름) */
@media (min-width:601px) and (max-width:1000px){
  .copb .pbx.pv .pb-tb .pb-vw,#vAll .pbx .pb-tb .pb-vw{order:-3}
  .copb .pbx.pv .pb-tb .pb-pl,#vAll .pbx .pb-tb .pb-pl{order:-2;margin-left:auto;margin-right:-10px}
  .copb .pbx.pv .pb-tb::before,#vAll .pbx .pb-tb::before{content:"";order:-1;flex:0 0 100%;height:0}
  .copb .pbx.pv .pb-tb .sp,#vAll .pbx .pb-tb .sp{display:none}
  #vAll .pbx:not(.sd) .pb-lh:not([hidden]){top:calc(var(--toph) + var(--chh) + 74px - var(--mpt))}   /* 도구 줄 두 줄 64 + 아래 10(한 줄일 때 36 + 10 = 46 과 같은 셈) */
}
/* ---- 라이브러리 메뉴(library.js libO · pbody preset 'lib' · 2026-10-18 둘째판d) — 「전체」 와 같은 붙는 머리(줄 누름 = 겹창이라 옆 창 없음) ·
   찾는 중 = 맞은 글자 노랑(.pb-hl · 시안 mark.hl) + 줄 아래 발췌 한 줄(.pb-ex · x = 제목 x = 네모 14 + 아이콘 26 + 고객사 120 + 16 · 휴대폰은 고객사 칸 없음) ---- */
:root{--phl:rgba(255,204,0,.30)}
@media (min-width:601px){
  #vLib .pbx .pb-tb{position:sticky;top:calc(var(--toph) + var(--chh) - var(--mpt));z-index:26;background:#fff}
  #vLib .pbx .pb-lh:not([hidden]){position:sticky;top:calc(var(--toph) + var(--chh) + 46px - var(--mpt));z-index:25;background:#fff}
}
#vLib .pb-lh.pb-bulk:not([hidden]){background:#fff}
.pb-hl{background:var(--phl);color:var(--pl1);font-weight:600;border-radius:3px;padding:0 1px}
.pbx.pv .pb-l.ex{height:auto;min-height:44px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.pb-l>.pb-ex{flex:0 0 100%;box-sizing:border-box;padding-left:176px;font-size:14px;line-height:24px;color:var(--pl2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.pb-l>.pb-ex{padding-left:56px}}
/* ---- 달력 보기 — 구성물을 칸에 얹는 갈래(calgrid.js 5절 `CG.things` · 장면 3 · 3b · 3c · 색 없음 · 결정 634) ----
   둘째 줄 = 월 · 주(FP_VIEW) | ‹ 달 › 오늘 …… 빈 시간 찾기(모두 28) · 칸 = 월 격자(.scmo) · 주 격자(.scwk) 꼴 그대로 · 칩 = 아이콘 + 글자 14 ·
   작업 띠 = 옅은 하늘(rgba(0,112,210,.12) · 우리 파랑 12%) · 끄는 중 = 원래 자리 흐림(.src) · 놓일 칸 옅은 바탕(.drop) */
.cgt-nav{display:flex;align-items:center;gap:8px;height:44px;margin:-4px 0 6px;font-size:14px;white-space:nowrap}
.cgt-nav .sp{flex:1}.cgt-vw{display:inline-flex;margin-left:-10px;margin-right:4px}
.cgt-b{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;border:0;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);font:inherit;font-size:14px;color:var(--l1);cursor:pointer;flex:none}
.cgt-b.ic{width:28px;padding:0;font-size:16px}.cgt-b:hover{background:rgba(0,0,0,.03)}
.cgt-rng{font-size:16px;font-weight:600;margin:0 2px}
.cgt-mo .d{min-height:108px;overflow:visible;position:relative}
.cgt-mo .d.drop,.cgt-dz.drop{background:rgba(0,0,0,.06)}
.cgt-c{display:flex;align-items:center;gap:5px;font-size:14px;line-height:22px;padding:0 4px;border-radius:4px;margin-top:2px;color:var(--l1);
  white-space:nowrap;min-width:0;cursor:pointer}
.cgt-c:hover{background:rgba(0,0,0,.04)}
.cgt-c .tx{overflow:hidden;text-overflow:ellipsis;min-width:0}.cgt-c .at{font-weight:600;margin-right:4px}
.cgt-c.done .tx{color:var(--l2);text-decoration:line-through}
.cgt-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--l2)}
.cgt-bd,.cgt-bs{display:block;height:22px;margin:2px 0 0}
.cgt-bd{margin-left:-6px;margin-right:-7px;padding-left:10px;background:rgba(0,112,210,.12);border-radius:4px;cursor:pointer;position:relative}
.cgt-bd.cl{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:0}
.cgt-bd.cr{border-top-right-radius:0;border-bottom-right-radius:0}
.cgt-bd:not(.cl){margin-left:-1px}.cgt-bd:not(.cr){margin-right:-1px}
.cgt-bd.done{background:rgba(0,0,0,.03)}
.cgt-bt{position:relative;z-index:2;display:flex;align-items:center;gap:5px;height:22px;line-height:22px;font-size:14px;color:var(--l1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.cgt-bt b{font-weight:600}.cgt-bd.done .cgt-bt{color:var(--l2);text-decoration:line-through}
.cgt .src{opacity:.3}
.cgt-more{display:block;border:0;background:none;padding:0 4px;font:inherit;font-size:14px;line-height:22px;color:var(--l2);cursor:pointer}
.cgt-wk .ad>div{min-height:30px}.cgt-wk .ad .cgt-c{margin:2px 0}.cgt-wk .ad .cgt-bd{margin-left:-4px;margin-right:-5px}
.cgt-wk .ev.cgt-ev{background:rgba(0,0,0,.04);border-left:3px solid rgba(0,0,0,.28);color:var(--l1);cursor:pointer}
/* 휴대폰 달력 — 점(일정 = 빈 동그라미 · 마감 등 = 검은 점 · 갱신 = 회색 점) · 띠 = 가는 막대 · 누른 날 줄 목록 */
.cgt-mo.ph .d{min-height:50px;padding:3px 2px;text-align:center;cursor:pointer}
.cgt-mo.ph .d.sel .n{display:inline-block;width:24px;height:24px;line-height:24px;border-radius:12px;background:var(--l1);color:#fff;font-weight:600}
.cgt-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:3px}
.cgt-dt{display:block;width:6px;height:6px;border-radius:3px}
.cgt-dt.meet{box-shadow:inset 0 0 0 1.5px var(--l1)}.cgt-dt.due{background:var(--l1)}.cgt-dt.renew{background:var(--l3)}
.cgt-pb{position:absolute;left:0;right:0;bottom:3px;height:3px;background:rgba(0,112,210,.32)}
.cgt-day{margin-top:12px}.cgt-dh{font-size:14px;font-weight:600;margin:0 0 2px;color:var(--l1)}
@media (max-width:600px){ .cgt-nav{flex-wrap:wrap;height:auto;min-height:44px;gap:6px;margin-bottom:8px} }

/* =====================================================================
   떠 있는 칸 — 한 부품(src3/fp.js 짝 · 확정 = docs/mock/떠있는칸-부품-시안-확정/셋째판-부품.css 그대로 · 결정 550 ② · 567 · 575 덧)
   둥글기 16 · 그림자 하나 · 글자 14 · 찾기 칸 회색 선 · 파랑 없음 · 휴대폰 = 아래 @media(시안의 .w390 갈래)
   ===================================================================== */
/* 떠 있는 칸 한 부품 — 둘째판(DESIGN-v22 · 2026-10-15)
   바탕 = 첫째판(첫째판-부품.css · 결정 550 ① ②) · 바꾼 것 = 결정 559 ② ③ ④ · 561 ⑤
     <link rel="stylesheet" href="../떠있는칸-부품-시안/둘째판-부품.css">
     <script src="../떠있는칸-부품-시안/둘째판-부품.js"></script>
   시안 안에서 이 꼴을 다시 적거나 덮어쓰지 않는다(숫자를 바꿀 일이 있으면 이 파일의 다음 판을 만든다).

   규격 한 단락(첫째판 그대로)
   - 여는 단추 = 알약(높이 28 또는 32 · 모서리 끝까지 둥글게). 글자만 있는 단추(진행 중 · AI ▾ · 속성 값 · 종류 칸)도
     손을 얹으면 같은 알약 바탕이 뜬다. 맨 위 줄(공유 · Brief 3 · ＋) · [보내기 ▾] · 거르기 칩과 같은 집안.
   - 떠 있는 칸 = 흰 바탕 · 선 1px(.10) · 그림자 하나(옅게) · 모서리 16(알약 단추 32 의 반) · 안 여백 4.
   - 줄 = 글자 14 · 줄 높이 32 · 줄 안 여백 위아래 8 / 좌우 12 · 모서리 12(바깥 16 − 안 여백 4) · 눌린 줄(손 얹음 · 키보드) = 옅은 회색 바탕 · 고른 값 = 오른쪽 ✓.
   - 자리 = 여는 단추 바로 아래 4(왼쪽 끝 맞춤 · 화면 오른쪽 끝 단추는 오른쪽 끝 맞춤) · 본문을 밀지 않고 겹쳐 뜬다.
   - 폭 = 가장 긴 글자 + 24(줄 좌우 여백) + 8(칸 안 여백) 과 여는 단추 폭 중 큰 것.
   - 이어 뜨는 칸(메뉴 줄 → 날짜 창)은 그 줄 오른쪽 4 · 위끝 맞춤(fpOpen side). 날짜 창 알맹이는 fpCal 한 벌.

   둘째판에서 더한 것
   ② ＋ 펼침(559 ②) — ＋(.fp-plus · 40×32 알약 · 선 .14)는 제자리에 남고 열린 동안 .open(바탕 .07).
      칩 칸 오른끝 = ＋ 왼끝 − 4 · 세로 가운데. 칩 = 메타 글자 높이(546 ②): 줄 높이 24 · 글자 14 · 그림 14 · 좌우 8 · 칩 사이 2
      → 칸 높이 32(= 24 + 안 여백 4×2) = ＋ 높이와 같음. 다시 누르면 접힘(fpToggle · fpClose).
      더함(563 ① (나)): stop(왼쪽 단추)을 주면 칩 칸은 그 단추를 덮되 칸 안 오른끝에 같은 자리 · 같은 크기로 다시 그림(칸 높이 32 · 칸 오른끝 = 단추 오른끝) · 모자라면 그림만 한 줄(.fp-ico).
   ③ 가운데 겹창 한 벌(559 ③ · fpModal) — Thing 아홉째 판 장면 11 겹창 그대로: 뒤 흐림(.14 · 흐림 2.5) · 폭 800(= 720 + 좌우 40)
      · 모서리 14 · 위 48 · ⤢ 왼쪽 위 모서리(4 · 4 · 20 · 그림 14 · 옅기 .40 · 손 얹으면 바탕 + 「전체 화면」) · 경로 14 · ⋯ · ✕(30 동그라미).
      미리보기 알맹이 = fpMailPv(받는 사람 눈 — 제목 · 보낸/받는 사람 · 쓴 글 · 서명 · 인용 · 첨부).
   ④ 거르기 줄 한 벌(559 ④ · FP_FILTER) — 칩 = .fp-tg 글자형 「종류 ▾」(테두리 없음) · 찾기 칸(알약 · 선 .14 · 높이 28)
      · 보기 「시간순 | 스레드」(높이 28). 좁게 = 칩 줄 / 찾기 + 보기 두 줄 · 넓게(wide) = 한 줄. 높이는 모두 28(한 줄 안 같은 키).
   ⑤ AI 글자 단추(561 ⑤ · FP_AI) — 작은 AI 표식(높이 20 · 글자 14/600 · 모서리 5 · 보라 옅은 바탕) + 동작 이름 · .fp-tg 집안 · 칸 없음.
      항목 둘 이상일 때만 「AI ▾」(FP_AIM · 지금 꼴 그대로).
*/
:root{
  --fp-r:16px;            /* 칸 모서리 */
  --fp-row-r:12px;        /* 줄 모서리 */
  --fp-pad:4px;           /* 칸 안 여백 */
  --fp-gap:4px;           /* 단추 아래 틈 */
  --fp-line:rgba(0,0,0,.10);
  --fp-line2:rgba(0,0,0,.14);
  --fp-shadow:0 6px 20px rgba(0,0,0,.08);
  --fp-on:rgba(0,0,0,.05);     /* 눌린 줄 · 손 얹은 단추 */
  --fp-open:rgba(0,0,0,.07);   /* 열려 있는 동안의 단추 */
  --fp-ink:rgba(0,0,0,.88);
  --fp-ink2:rgba(0,0,0,.62);
  --fp-ink3:rgba(0,0,0,.40);
  --fp-ai-ink:#4B45B8;         /* AI 글자(스레드 · Thing 시안의 --ai-ink 와 같은 값) */
  --fp-ai-bg:rgba(97,85,245,.12);
}

/* ---------- 여는 단추(글자형 알약) ---------- */
.fp-tg{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;
  color:inherit;cursor:pointer;white-space:nowrap;position:relative;font:inherit;line-height:1}
.fp-tg.h32{height:32px}
.fp-tg.fl{margin:-4px -10px}         /* 글자 줄에 끼울 때 — 글자 x · 줄 높이 20(14 글자 줄)은 그대로 · 바탕만 좌우 10 · 위아래 4 밖으로 */
.fp-tg:hover,.fp-tg.hov{background:var(--fp-on)}
.fp-tg.open{background:var(--fp-open)}
.fp-tg .fp-car{font-size:14px;color:var(--fp-ink3);margin-left:2px}   /* ▾ */

/* ---------- ＋(결정 559 ② · 모든 ＋ 한 벌) — 제자리에 남고 열린 동안 .open ---------- */
.fp-plus{display:inline-flex;align-items:center;justify-content:center;width:40px;height:32px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--fp-line2);background:#fff;color:var(--fp-ink);cursor:pointer;flex:none;position:relative}
.fp-plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.fp-plus:hover,.fp-plus.hov{background:var(--fp-on)}
.fp-plus.open{background:var(--fp-open)}

/* ---------- 경로 앞 「‹」(결정 550 ①) ---------- */
.fp-up{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0 2px 0 -6px;border-radius:999px;
  color:rgba(0,0,0,.55);flex:none;cursor:pointer;vertical-align:middle}
.fp-up svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-up:hover,.fp-up.hov{background:var(--fp-on);color:var(--fp-ink)}

/* ---------- 떠 있는 칸 ---------- */
.fp{position:absolute;z-index:80;background:#fff;border-radius:var(--fp-r);
  box-shadow:0 0 0 1px var(--fp-line),var(--fp-shadow);padding:var(--fp-pad);
  font-size:14px;line-height:16px;font-weight:400;color:var(--fp-ink);text-align:left;
  width:max-content;min-width:var(--fp-min,0);white-space:nowrap;cursor:default}
.fp-row{display:flex;align-items:center;gap:8px;height:32px;padding:8px 12px;border-radius:var(--fp-row-r);cursor:pointer;color:var(--fp-ink)}
.fp-row:hover,.fp-row.on{background:var(--fp-on)}
.fp-row svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--fp-ink2)}
.fp-row .fp-ck{margin-left:auto;padding-left:16px;color:var(--fp-ink2)}            /* 고른 값 ✓ */
.fp-row .fp-ck svg{width:14px;height:14px;stroke-width:1.6}
.fp-row .fp-sub{margin-left:auto;padding-left:16px;color:var(--fp-ink3)}           /* 오른쪽 옅은 덧글자(날짜 · 건수) */
.fp-row.dim{color:var(--fp-ink3)}                                                  /* 「없음」 */
.fp-row.new{color:var(--fp-ink2)}                                                  /* ＋ 새 ○○ 만들고 지정 */
.fp-row .av{width:24px;height:24px;border-radius:999px;background:rgba(0,0,0,.06);font-size:14px;line-height:24px;text-align:center;flex:none;color:var(--fp-ink2)}
.fp-sep{height:1px;background:var(--fp-line);margin:4px 8px}
.fp-hd{height:28px;padding:6px 12px 0;color:var(--fp-ink3)}                      /* 무리 이름(쓸 때만) */
.fp-q{display:flex;align-items:center;gap:8px;height:32px;margin-bottom:4px;padding:0 12px;border-radius:var(--fp-row-r);background:rgba(0,0,0,.04);color:var(--fp-ink3)}
.fp-q svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.fp-q b{font-weight:400;color:var(--fp-ink)}
/* 결정 567 더함(열두째판c) — 떠 있는 칸 두 크기: 메뉴(찾기 칸 없음 · 위 그대로 · 줄 32) / 고르기 창(찾기 칸 있음 · cls:'fp-pk')
   고르기 창 크기 = 부품 이전 판 열째판-시안.html 공용 고르기 창(.pkr 폭 260 · 안 여백 8 · .pkq 높이 38 · 좌우 10 · 아래 6 · 그림 16 · .pko 줄 36 · 좌우 10) 수치 그대로
   꼴(둥글기 16 · 그림자 · 글자 14 · 눌린 꼴 · 선 1px)은 부품 그대로 · 찾기 칸 = 흰 바탕 + 옅은 회색 선 1px(초점에도 파랑 없음) · cls 를 주지 않으면 앞 꼴 그대로 */
.fp.fp-pk{box-sizing:border-box;width:260px;padding:8px}
.fp.fp-pk .fp-row{height:36px;padding:0 10px}
.fp.fp-pk .fp-q,.fp.fp-pk .fp-q:focus-within{height:38px;padding:0 10px;margin-bottom:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--fp-line2);outline:none}
.fp.fp-pk .fp-q svg{width:16px;height:16px}
/* 넷째판(결정 619 ④) — 크기 변종 「찾기 창」 = 고르기 창 + 폭 640 · 창 가운데 · 위 96 · 흐림(.fp-scrim · 90) 위(Ctrl+P · 홈 첫째판 장면 4 꼴) */
.fp.fp-pk.find{position:fixed;left:50%;top:96px;transform:translateX(-50%);width:640px;z-index:131}
@media (max-width:600px){.fp.fp-pk.find{top:56px;left:8px;right:8px;width:auto;max-width:none;transform:none}}   /* 휴대폰 — 이 규칙 뒤에 있어야 이긴다(찾기 절 주석) */
/* 찾기는 어느 겹창(.modal 100 · 메일 겹창 120~123 · 쓰기 틀 90~93)이 떠 있어도 그 위(리뷰 틀A M3) — 흐림 130 · 창 131 · 알림(200) · 날짜 창(1300) 아래 */
.fp-scrim.fix.fd-scrim{z-index:130}

/* 가로 꼴 — 「＋」 를 누르면 그 왼쪽으로 늘어나는 종류 칩(결정 523 ② · 546 ② · 559 ②)
   둘째판: 칩 = 메타 글자 높이 24 · 그림 14 · 좌우 8 → 칸 높이 32 = ＋ 높이 */
.fp.fp-x{display:flex;gap:2px}
.fp.fp-x .fp-row{height:24px;padding:0 8px;gap:4px;border-radius:999px}
.fp.fp-x .fp-row svg{width:14px;height:14px;stroke-width:1.5}
/* 결정 563 ① 더함(열두째판b) — fpOpen(…, {inline:true, stop}) 에서 폭이 모자랄 때만 붙음: 글자 걷고 그림만 한 줄 · 손 얹으면 이름 */
.fp.fp-x.fp-ico .fp-row>span{display:none}
.fp.fp-x.fp-ico .fp-row{position:relative}
.fp.fp-x.fp-ico .fp-row:hover::after,.fp.fp-x.fp-ico .fp-row.hov::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  background:rgba(0,0,0,.86);color:#fff;font-size:14px;line-height:1;padding:7px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:1}
/* 563 ① (나) — stop 을 주면 칸 안 오른끝에 [옅은 세로선 · 그 단추] · 칩은 세로 가운데 */
.fp.fp-x.fp-has-stop{align-items:center;padding:0 0 0 4px}            /* 칸 높이 = 단추 32 · 오른쪽 · 위아래 안 여백 0 */
.fp.fp-x.fp-has-stop>.fp-stop{box-shadow:none;background:transparent;margin:0}   /* 단추 테두리 걷음 — 칸 테두리가 대신 */
.fp.fp-x.fp-has-stop>.fp-stop:hover{background:var(--fp-on)}
.fp.fp-x .fp-vsep{width:1px;height:16px;background:var(--fp-line2);margin:0 4px;flex:none}

/* 빠른 고르기 칩(날짜 창 「오늘 · 내일 …」 처럼 칸 안에 가로로) */
.fp-chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 2px 6px}
.fp-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fp-line);color:var(--fp-ink2);cursor:pointer}
.fp-chip:hover,.fp-chip.on{background:var(--fp-on);color:var(--fp-ink)}

/* 날짜 창 */
.fp.fp-cal{width:268px;padding:8px;white-space:normal}
.fp-cal .fp-mh{display:flex;align-items:center;height:32px;padding:0 4px 0 8px;font-weight:600}
.fp-cal .fp-mh span{margin-left:auto;display:flex;gap:2px;color:var(--fp-ink2);font-weight:400}
.fp-cal .fp-mh i{font-style:normal;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fp-cal .fp-mh i:hover{background:var(--fp-on)}
.fp-cal .fp-g{display:grid;grid-template-columns:repeat(7,32px);gap:2px 2px;justify-content:center}
.fp-cal .fp-g b,.fp-cal .fp-g u{display:flex;align-items:center;justify-content:center;height:32px;border-radius:999px;font-weight:400;text-decoration:none;cursor:pointer;position:relative}
.fp-cal .fp-g b{color:var(--fp-ink3);height:28px}                                  /* 요일 */
.fp-cal .fp-g u:hover{background:var(--fp-on)}
.fp-cal .fp-g u.x{color:var(--fp-ink3)}                                            /* 다른 달 */
.fp-cal .fp-g u.today{box-shadow:inset 0 0 0 1px var(--fp-line);font-weight:600}
.fp-cal .fp-g u.pick{background:var(--fp-ink);color:#fff;font-weight:600}
.fp-cal .fp-g u.fp-dl::after,.fp-cal .fp-g u.fp-wd::after,.fp-cal .fp-g u.fp-mt::after{content:'';position:absolute;bottom:2px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:999px}
.fp-cal .fp-g u.fp-dl::after{background:var(--fp-ink2)}
.fp-cal .fp-g u.fp-wd::after{background:linear-gradient(90deg,transparent 50%,var(--fp-ink2) 50%);box-shadow:inset 0 0 0 1px var(--fp-ink2)}
.fp-cal .fp-g u.fp-mt::after{box-shadow:inset 0 0 0 1px var(--fp-ink2)}
.fp-cal .fp-g u.pick::after{filter:invert(1)}
/* 셋째판(결정 575) — 날짜 창 적는 칸 = 고르기 창 찾기 칸(.fp-pk .fp-q · 567)과 같은 집안: 흰 바탕 · 옅은 회색 선 1px(.14) · 초점에도 파랑 없음 */
.fp-in,.fp-in:focus-within{display:flex;align-items:center;height:36px;margin:0 0 6px;padding:0 12px;border-radius:var(--fp-row-r);background:#fff;box-shadow:inset 0 0 0 1px var(--fp-line2);outline:none;font-size:16px;color:var(--fp-ink)}
.fp-in .ph{color:var(--fp-ink3)}
.fp-in .cur{display:inline-block;width:1.5px;height:18px;background:var(--fp-ink);margin-left:1px}
.fp-hint{margin:-2px 0 6px;padding:0 12px;color:var(--fp-ink2)}
.fp-hint.no{color:var(--fp-ink3)}
.fp-cal .fp-ft{display:flex;gap:2px;border-top:1px solid var(--fp-line);margin-top:6px;padding-top:4px}
.fp-cal .fp-ft .fp-row{color:var(--fp-ink2)}
.fp-cal .fp-ft .fp-row.r{margin-left:auto}

/* 휴대폰 390 — 같은 칸 · 줄 높이만 40(＋ 칩은 32) */
.w390 .fp-row,.fp.m .fp-row{height:40px;padding:12px 12px}
.w390 .fp.fp-x .fp-row,.fp.fp-x.m .fp-row{height:32px;padding:0 10px}

/* ---------- 맨 위 줄 오른쪽 세 글자(결정 558 · 첫째판 그대로) ---------- */
.gxn{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(0,0,0,.62);margin-right:4px;flex:none}
.gxn a{position:relative;cursor:pointer;white-space:nowrap;line-height:1.5;padding:4px 0;color:inherit;text-decoration:none}
.gxn a:hover,.gxn a.hov{color:rgba(0,0,0,.88);text-decoration:underline;text-underline-offset:4px}
.gxn a.p{font-size:18px;line-height:1;padding:4px 2px}
.gxn a.p:hover,.gxn a.p.hov{text-decoration:none}
.gxn i{font-style:normal;color:rgba(0,0,0,.30)}

/* ---------- ③ 가운데 겹창(결정 559 ③ · Thing 아홉째 판 장면 11 꼴) ---------- */
.fp-scrim{position:absolute;left:0;top:0;right:0;bottom:0;z-index:90;background:rgba(0,0,0,.14);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
.fp-scrim.fix,.fp-ov.fix{position:fixed}
.fp-ov{position:absolute;left:50%;top:48px;transform:translateX(-50%);z-index:91;width:800px;padding:20px 40px 24px;background:#fff;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 1px var(--fp-line2);text-align:left;color:var(--fp-ink);font-size:16px;line-height:1.6}
.fp-ov-top{display:flex;align-items:center;gap:8px;min-height:32px}
.fp-ov-top .fp-sp{flex:1}
.fp-ov-ttl{font-size:16px;font-weight:600;color:var(--fp-ink);white-space:nowrap}   /* 경로 대신 머리 글자(미리보기 — fpModal title) */
.fp-crm{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--fp-ink2);min-width:0;white-space:nowrap}
.fp-crm a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer}
.fp-crm a:hover{color:var(--fp-ink);text-decoration:underline;text-underline-offset:4px}
.fp-crm i{font-style:normal;flex:none}
.fp-ib{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:var(--fp-ink);cursor:pointer;flex:none}
.fp-ib:hover,.fp-ib.hov{background:var(--fp-on)}
.fp-ib svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.fp-xp{position:absolute;left:4px;top:4px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:var(--fp-ink3);cursor:pointer;z-index:2}
.fp-xp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-xp:hover,.fp-xp.hov{background:var(--fp-on);color:rgba(0,0,0,.72)}
.fp-xp .fp-tip{position:absolute;right:calc(100% + 8px);top:-4px;background:rgba(0,0,0,.86);color:#fff;font-size:14px;line-height:1;padding:7px 10px;border-radius:6px;white-space:nowrap;display:none}
.fp-xp:hover .fp-tip,.fp-xp.hov .fp-tip{display:block}
.fp-ov-bd{margin-top:14px}

/* 미리보기 알맹이(fpMailPv) — 받는 사람 눈 · 글자 16/1.75 · 서명 · 인용(왼쪽 선) · 첨부 칩 */
.fp-pv-h{font-size:22px;font-weight:600;line-height:1.5}
.fp-pv-m{font-size:14px;color:var(--fp-ink2);margin-top:4px;padding-bottom:14px;border-bottom:1px solid var(--fp-line)}
.fp-pv-m span+span::before{content:'·';margin:0 8px;color:rgba(0,0,0,.30)}
.fp-pv-b{font-size:16px;line-height:1.75;margin-top:16px}
.fp-pv-b p{margin:0 0 10px}
.fp-pv-sig{margin-top:18px;color:var(--fp-ink)}
.fp-pv-att{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fp-att{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fp-line2);font-size:14px;color:var(--fp-ink);white-space:nowrap}
.fp-att svg{width:16px;height:16px;fill:none;stroke:var(--fp-ink2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fp-att em{font-style:normal;color:var(--fp-ink3)}
.fp-pv-qh{font-size:14px;color:var(--fp-ink2);margin-top:22px}
.fp-pv-q{border-left:2px solid var(--fp-line2);padding-left:14px;margin-top:6px;color:var(--fp-ink2)}
.fp-pv-q p{margin:0 0 8px}
/* 결정 564 ③ 더함(열두째판b) — 넓은 꼴 · 아래 단추 줄 · 좌우 1:1 비교(fpCmp) · 주지 않으면 앞 꼴 그대로 */
.fp-ov.fp-wide{width:1120px}                                   /* 알맹이 1040 = 칸 500 + 틈 40 + 칸 500 */
.fp-ov-ft{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--fp-line)}
.fp-cmp{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;font-size:16px;line-height:1.75}
.fp-cmp-h{font-size:14px;line-height:20px;color:var(--fp-ink2);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--fp-line)}
.fp-cmp p{margin:0 0 10px}
.fp-cmp mark{background:var(--fp-ai-bg);color:inherit;border-radius:3px;padding:0 2px}   /* 바뀐 곳 — 양쪽 같은 자리 · 옅은 바탕 */

/* ---------- ④ 거르기 줄(결정 559 ④ · 라이브러리 칸 = 라이브러리 화면 한 부품) ---------- */
.fp-fl{font-size:14px;color:var(--fp-ink2);white-space:nowrap}
.fp-fl .fp-fl-r{display:flex;align-items:center;gap:4px;min-height:36px}
.fp-fl .fp-fl-r+.fp-fl-r{margin-top:4px}
.fp-fl .fp-fl-r .fp-sp{flex:1}
.fp-fl .fp-fc:first-child{margin-left:-10px}                   /* 칩 글자 x = 줄 왼끝(바탕만 밖으로) */
.fp-fc.on{color:var(--fp-ink)}                                 /* 값을 고른 칩 = 진한 글자 */
.fp-fs{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fp-line2);background:#fff;color:var(--fp-ink3);cursor:text;min-width:0}
.fp-fs svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--fp-ink2);stroke-width:1.6;stroke-linecap:round}
.fp-fs span{overflow:hidden;text-overflow:ellipsis}
.fp-fl.wide .fp-fs{width:220px;margin-left:8px}
.fp-fl:not(.wide) .fp-fs{flex:1;max-width:280px}
/* 559 ⑤ 더함(열두째판b) — wide:'auto': 한 줄에 들면 한 줄(.one · 찾기 칸 140~280 늘고 줆) · 안 들면 두 줄(.two = 좁은 꼴과 같음) */
.fp-fl.auto .fp-fs{min-width:140px}
.fp-fl.auto.one .fp-fs{margin-left:8px}
/* 넷째판 — 보기 토글 한 부품(FP_VIEW) · 그림 16 + 글자 14 · 켠 것 옅은 바탕 .06 · 테두리 없음 · 28 · 옛 .fp-vw 테 꼴은 걷음 */
.fp-vt{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:14px}
.fp-vt-i{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;color:var(--fp-ink2);white-space:nowrap;cursor:pointer;text-decoration:none}
.fp-vt-i:hover{background:var(--fp-on)}
.fp-vt-i.on{background:rgba(0,0,0,.06);color:var(--fp-ink);font-weight:600}
.fp-vt-i svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fp-vt-i svg .d{fill:currentColor;stroke:none}
.fp-fl .fp-vt{margin-left:8px}
/* 625 ⑧ 좁은 꼴 = 아이콘만(글자는 title) */
.fp-vt.compact .fp-vt-i{padding:0 6px}
.fp-vt.compact .fp-vt-i>span{display:none}

/* ---------- ⑤ AI 글자 단추(결정 561 ⑤) — 작은 AI 표식 + 동작 이름 · .fp-tg 집안 · 칸 없음 ---------- */
.fp-tg.fp-ai{font-size:14px;font-weight:600;color:var(--fp-ai-ink);gap:6px;padding:0 10px 0 6px}
.fp-tg.fp-ai.fp-aim-only{padding:0 10px}                       /* 「AI ▾」(항목 둘 이상) — 표식 없이 글자 */
.fp-aim{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 6px;border-radius:5px;font-size:14px;font-weight:600;line-height:1;color:var(--fp-ai-ink);background:var(--fp-ai-bg)}
/* 더한 것(결정 568 ③ · 열두째판d) — 메뉴 줄 안 AI 표식 = 글자 뒤 오른쪽 끝(fpRow(…, {ai:1})) · 줄 글자 시작 자리는 다른 줄과 같음 · 표식 꼴은 위 .fp-aim 그대로 */
.fp-row .fp-air{display:inline-flex;align-items:center;flex:none;margin-left:auto;padding-left:16px}
@media (max-width:600px){.fp-row{height:40px;padding:12px 12px}
.fp.fp-x .fp-row{height:32px;padding:0 10px}}
/* src3 더함 · 동작 한 벌(fp.js fpCalOpen · fpPickOpen — 스레드 · Thing 이 같이 씀 · 2026-10-16) — 찾기 칸 · 날짜 적는 칸 · 미팅 시각 줄(옛 .thp-fpq · .ti-cin · .ti-pkq · .ti-tmr 를 한 벌로) */
.fp-q .fp-pkq,.fp-in .fp-cin{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;outline:0;padding:0;background:transparent;font:inherit;color:var(--fp-ink)}
.fp-q .fp-pkq::placeholder,.fp-in .fp-cin::placeholder{color:var(--fp-ink3)}
.fp-tmr{display:flex;align-items:center;gap:8px;padding:6px 4px 2px;color:var(--fp-ink2)}
.fp-tmr input{height:32px;padding:0 8px;border:0;border-radius:8px;box-shadow:inset 0 0 0 1px var(--fp-line2);font:inherit;font-size:14px;color:var(--fp-ink);background:#fff}

/* ===== 스레드 라이브러리 칸(thlib.js) ===== */
/* 확정 시안 docs/mock/스레드한장-시안-확정/열두째판e-* 장면 6 · 6b · 6c 의 .lb-* 값 · 글자 14 아래 없음 · 파랑 없음 · 휴대폰은 아이콘이 없다(thlib.js 끝) */
.fp-fs .fp-fsq{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;outline:0;padding:0;background:transparent;font:inherit;color:var(--fp-ink)}   /* 부품 찾기 칸 = 진짜 입력 칸(638 ⑦) */
.fp-fs .fp-fsq::placeholder{color:var(--fp-ink3)}
.thp-lb:has(>.thl){padding-top:0}
.thl{font-size:16px;color:var(--fp-ink)}
.thl .sp{flex:1}
.thl-fl{position:sticky;top:0;z-index:3;margin:0 -20px 0 -32px;padding:4px 20px 6px 32px;background:#fff;border-bottom:1px solid var(--line)}
.thl-bd{padding:2px 0 8px}
.thl .thl-bh{display:flex;align-items:center;gap:8px;width:100%;height:40px;padding:0 12px;border:0;border-top:1px solid var(--line);background:none;font-size:16px;font-weight:600;text-align:left;white-space:nowrap}   /* 단추는 .thl 을 앞에 — 스레드 .thp button 초기화보다 세게 */
.thl-bd>.thl-bh:first-child{border-top:0}
.thl-bh .cv{width:14px;font-size:14px;font-weight:400;text-align:center;color:var(--fp-ink2)}
.thl-bh .n{font-size:14px;font-weight:400;color:var(--fp-ink2)}
.thl-bb{padding:0 12px 10px}
.thl-sc{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;color:var(--fp-ink2)}
.thl .thl-c{height:26px;padding:0 10px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--fp-line2);background:#fff;font-size:14px;color:var(--fp-ink2);white-space:nowrap}
.thl .thl-c.on{background:rgba(0,0,0,.06);color:var(--fp-ink);font-weight:600}
.thl-ai{margin-bottom:6px;padding:6px 10px 2px;border:1px dashed rgba(97,85,245,.5);border-radius:10px}   /* AI 가 고른 것 = 보라 점선(시안 .lb-ai) */
.thl-ail{display:flex;align-items:center;gap:6px;height:28px;font-size:14px;font-weight:600;color:var(--ai-ink)}
.thl .ai-pill{height:20px;padding:0 6px;font-size:14px;font-weight:600}
.thl .airem{margin:0 4px;font-size:14px;color:var(--fp-ink2)}
.thl .thl-again{height:26px;padding:0 9px;border:0;border-radius:6px;box-shadow:inset 0 0 0 1px var(--fp-line2);background:#fff;font-size:14px;font-weight:400;color:var(--fp-ink2);white-space:nowrap}
.thl .thl-again:disabled{opacity:.5;cursor:default}
.thl-it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;padding:6px 0;border-bottom:1px solid var(--line)}
.thl-it:last-child{border-bottom:0}
.thl-tx{min-width:0;cursor:pointer}
.thl-it.pl .thl-tx{cursor:default}
.thl-it .t{font-size:16px;font-weight:600;line-height:1.45}
.thl-it.pl .t{font-weight:400}
.thl-it .s{font-size:14px;line-height:1.5;color:var(--fp-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thl-why{margin-left:6px;padding:0 7px;border:1px dashed rgba(97,85,245,.55);border-radius:10px;font-size:14px;font-weight:400;color:var(--ai-ink);white-space:nowrap}
.thl-ty{margin-right:6px;font-size:14px;font-weight:400;color:var(--fp-ink2)}
.thl .thl-x{width:24px;height:26px;border:0;border-radius:6px;background:none;font-size:14px;text-align:center;color:rgba(0,0,0,.45)}
.thl .thl-x:hover{background:var(--fp-on)}
.thl-op{grid-column:1 / -1;margin:2px 0 4px;padding:8px 12px;border-radius:8px;background:var(--f4);font-size:14px;line-height:1.7}
.thl-op .tx{margin-top:2px;white-space:pre-wrap}
.thl-op .mark{padding:0 1px;border-radius:3px;background:rgba(255,204,0,.4)}   /* 질의와 닿는 문장(drTouchHtml) */
.thl-op .ac{display:flex;align-items:center;gap:12px;margin-top:6px}
.thl .thl-ins{padding:0;border:0;background:none;font-size:14px;font-weight:600;color:var(--fp-ink);white-space:nowrap}   /* 「이 답변 인용」 = 글자형 단추(시안 .lb-ins · 파랑 아님) */
.thl .thl-lk{padding:0;border:0;background:none;font-size:14px;color:var(--fp-ink2);white-space:nowrap}
.thl .thl-lk:hover{color:var(--fp-ink)}
.thl .thl-more{display:block;margin:6px 0 0}
.thl-gl{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:14px;color:var(--fp-ink2)}
.thl-none{padding:6px 0;font-size:14px;color:var(--fp-ink2)}
.thl-rows{padding:0 0 10px}
.thl-n2{display:flex;gap:10px;padding:8px 12px 9px;border-radius:8px;color:inherit;text-decoration:none}
.thl-n2:hover{background:var(--fp-on)}
.thl-n2 .lead{display:flex;flex:none;align-items:center;height:26px;color:var(--fp-ink2)}
.thl-n2 .lead svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.thl-n2 .mid{flex:1;min-width:0}
.thl-n2 .l1{display:flex;align-items:center;gap:8px;font-size:16px;line-height:26px;white-space:nowrap}
.thl-n2 .l1 .t{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.thl-n2.th2 .l1 .t{font-weight:600}
.thl-n2 .l1 .nk{flex:none;font-size:14px;color:var(--fp-ink2)}
.thl-n2 .l1 .d{flex:none;margin-left:auto;font-size:14px;color:var(--fp-ink2)}
.thl-n2 .l2{display:block;font-size:14px;line-height:22px;color:var(--fp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thl-n2 .l2 b{font-weight:600;color:var(--fp-ink)}

/* =====================================================================
   스레드 밖 쓰기 틀 = 지금 화면 위 겹창(입력 틀 여덟째 · 결정 608 · 575-15 · thread.js thTwBox · 스레드 부서 묶음 2)
   그릇 .thw-host = 화면 전체 흐림 한 겹 + 굴림(겹창이 길면 그릇이 굴러간다 · 떠 있는 칸이 겹창 밖으로 나가도 잘리지 않게 겹창은 넘침 그대로) ·
   겹창 위 겹창(미리보기 · 다듬기 · 앱 겹창)이 뜨면 그릇의 흐림은 걷고 위 겹창의 흐림 한 겹 아래로(575-15) · 휴대폰 = 전체 화면(ph-new)
   ===================================================================== */
.thw-host{position:fixed;inset:0;z-index:90;overflow-y:auto;background:rgba(0,0,0,.14);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}
.thw-host:has(~ .fp-scrim),body:has(#modal:not([hidden])) .thw-host{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.thw-host ~ .fp-scrim{z-index:92}
.thw-host ~ .fp-ov{z-index:93}
.thw-host>.fp-ov.thw-ov{margin-bottom:48px}
.thw-ov .fp-ov-top{min-height:30px}
.thw-ov .fp-ov-top .fp-crm{flex:0 1 auto}
.thw-ov .fp-ov-bd{margin-top:10px}
.thw-ov .thp.thw-in{height:auto;min-height:0;background:none}
.thw-ov .thw-up{display:none}
.thw-ov .thw-up svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-ov.thw-ov.thw-max{left:0;top:0;transform:none;width:100%;min-height:100%;margin:0;border-radius:0;box-shadow:none}   /* ⤢ — 이 틀을 화면 가득 */
.thp-wm>.thw-prop{flex:0 0 100%;max-width:none;margin:4px 0 0;border-bottom:0;padding-bottom:2px}   /* 「속성 열기 ▾」 블록(장면 5b) — 메타 줄 아래 한 덩어리 */
.thp .thp-wm .thw-prt{margin-left:auto}
@media (max-width:600px){
  .thw-host{left:56px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}   /* 왼쪽 아이콘 띠(#side 56)는 남긴다(입력 틀 휴대폰-메모-390 · 641 L2) */
  .thw-host>.fp-ov.thw-ov{left:0;top:0;transform:none;width:100%;min-height:100%;margin:0;padding:10px 16px 24px;border-radius:0;box-shadow:none}
  .thw-ov .fp-xp{display:none}
  .thw-ov .thw-up{display:inline-flex}
  .thw-ov .thp-wr input.thp-wti{font-size:22px !important}   /* 제목 = 데스크톱과 같은 크기(휴대폰 입력 칸 16 규칙의 예외 · 16 넘어 확대 없음) */
}

/* 치운 메일 줄(결정 645) — 왼쪽 칸 머리 「치운 것 N」 = 글자 단추(파랑 없음 · ＋ 앞) · 보일 때 줄은 흐리게 · 줄 끝 「되돌리기」 */
.thp .thp-skc{flex:none;height:32px;padding:0 8px;border:0;border-radius:6px;background:none;font-size:14px;color:var(--fp-ink2);white-space:nowrap}
.thp .thp-skc:hover{color:var(--fp-ink);background:var(--fp-on)}
.thp .thp-skc.on{color:var(--fp-ink);font-weight:600}
.thp-it.skip .thp-mn>.thp-ih,.thp-it.skip .thp-mn>.thp-bx{opacity:.55}
.thp .thp-unsk{margin-top:4px;padding:0;border:0;background:none;font-size:14px;font-weight:600;color:var(--fp-ink);white-space:nowrap}
.thp .thp-unsk:hover{text-decoration:underline}

/* =====================================================================
   설정 ㄷ-f 겹창(2026-10-18 · 묶음 B 커밋 ① · 시안 docs/mock/설정-시안-확정/묶음안-ㄷf-* · settings.js 1절 · 3절)
   겹창 = 공용 fpModal(.fp-ov.st-ov · 폭 1040 · 높이 화면 − 48) 안에 #vSet 이 옮겨 앉는다 · 왼쪽 목록만 · 오른쪽 칸만 스크롤.
   ⤢ 전체 화면 = 같은 꼴이 본문 자리(#main 안 #vSet). 줄 꼴 · 덩어리 머리는 아래 「설정 ㄷ-f 줄 꼴」(커밋 ②).
   ===================================================================== */
.fp-ov.st-ov{width:1040px;max-width:calc(100vw - 24px);height:calc(100vh - 48px);padding:18px 0 0;display:flex;flex-direction:column;overflow:hidden}
.st-ov .fp-ov-top{padding:0 20px 0 28px}
.st-ov .fp-ov-bd{flex:1;min-height:0;display:flex;margin-top:14px;border-top:1px solid var(--line)}
.st-ov #vSet{flex:1;min-width:0;min-height:0;display:flex;max-width:none}
.st-ov #stList{width:244px;flex:none;padding:14px 12px;background:#FAFAF9;border-right:1px solid var(--line);overflow:auto}
.st-ov #stBody{flex:1;min-width:0;padding:22px 32px 24px;overflow:auto}
#main>#vSet:not([hidden]){display:flex;align-items:flex-start;gap:32px}
#main>#vSet #stList{width:244px;flex:none;position:sticky;top:12px;padding:6px 0}
#main>#vSet #stBody{flex:1}
.stlist .gh{display:flex;align-items:flex-end;height:26px;padding:0 10px 3px;font-size:14px;color:var(--l3)}
.stlist .gh:not(:first-child){margin-top:16px}
.stlist a{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;border-radius:8px;font-size:16px;color:var(--l1);text-decoration:none;white-space:nowrap;cursor:pointer}
.stlist a:hover{background:rgba(0,0,0,.04)}
.stlist a.on{background:rgba(0,0,0,.06);font-weight:500}
.stlist a svg.i{width:18px;height:18px;flex:none;fill:none;stroke:var(--l2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.stlist a>span:not(.ext):not(.pt){min-width:0;overflow:hidden;text-overflow:ellipsis}
.stlist a .ext{margin-left:-4px;font-size:14px;color:var(--l3)}
.stlist a .pt{display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--blue);flex:none}
#stBody .sthd{display:flex;align-items:center;gap:12px;min-height:36px}
#stBody .sthd h2{margin:0;font-size:22px;font-weight:600}
#stBody .sthd .sp{flex:1}
#stBody .sthd .stsaved{position:static;font-size:14px;color:var(--l3);white-space:nowrap}
#stBody>.stnote:empty{display:none}
#stBody>.stnote{margin-top:8px}
#vSet.bun #stList{display:none}
.st-ov .fp-ov-ttl .stbk{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0 4px 0 -6px;border-radius:6px;font-size:20px;font-weight:400;color:var(--l2);cursor:pointer}
#top .stfx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:6px;border-radius:6px;color:var(--l3);cursor:pointer}
#top .stfx:hover{background:rgba(0,0,0,.05);color:var(--l1)}
#top .stfx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .fp-ov.st-ov{left:0;top:0 !important;transform:none;width:100%;max-width:none;height:100%;border-radius:0;box-shadow:none;padding-top:10px}
  .st-ov .fp-ov-top{padding:0 12px 0 18px}
  .st-ov .fp-xp{display:none}
  .st-ov .fp-ov-bd{margin-top:8px}
  .st-ov #stList{width:auto;flex:1;padding:6px 12px;background:#fff;border-right:0}
  .st-ov #stList a{height:44px}
  .st-ov #stBody{padding:14px 16px 24px}
  .st-ov #stBody .sthd h2,.st-ov #stBody .sthd .ld,.st-ov #stBody .stsubhd{display:none}   /* 항목 · 목록 이름(과 「대표」)은 겹창 머리 「‹ 이름」 이 대신(시안 휴대폰) */
  .st-ov #vSet.phl #stBody{display:none}
  .st-ov #vSet:not(.phl) #stList{display:none}
  #main>#vSet:not([hidden]){display:block}
}
/* ---------------------------------------------------------------------
   설정 ㄷ-f 줄 꼴(2026-10-18 · 묶음 B 커밋 ② · 결정 624 · 629 ② · 시안 묶음안-ㄷf `.r2` · `.sr2 h3` · settings.js 3-b절)
   줄 = 이름 16 진하게 + 설명 14 회색 · 오른쪽 끝 조절 · 줄 사이 선 없음 · 덩어리 머리 16 진하게 + 아래 옅은 선 · 덩어리 사이 32 ·
   「대표」 = 14 옅은 회색 · 글 칸은 값 글자처럼 접혀 있다가 누르면 입력 칸 · 고르기는 값 + ▾ · 토글 켬 = 진한 회색(파랑은 화면에 하나 규칙)
   --------------------------------------------------------------------- */
#stBody .sthd>.ld{font-size:14px;color:var(--l3);margin-left:-4px}
.st-ov .fp-ov-ttl .ld{font-size:14px;font-weight:400;color:var(--l3);margin-left:8px}
#stBody .stsubhd{margin:-6px 0 4px}
#stBody .stsubbk{display:inline-flex;align-items:center;height:28px;padding:0 8px;margin-left:-8px;border-radius:6px;font-size:14px;color:var(--l2);cursor:pointer;text-decoration:none}
#stBody .stsubbk:hover{background:rgba(0,0,0,.05);color:var(--l1)}
#stBody h3.stsh{font-size:16px;font-weight:600;color:var(--l1);margin:32px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:8px}
#stBody .stpane.p1>.stbk>h3.stsh:first-child{margin-top:14px}
#stBody .ld{font-size:14px;font-weight:400;color:var(--l3)}
#stBody .st-r{display:flex;align-items:center;gap:32px;padding:12px 0;min-height:52px;box-sizing:border-box}
#stBody .st-r .lb{flex:1 1 auto;min-width:0}
#stBody .st-r .nm{font-size:16px;font-weight:600;color:var(--l1);display:flex;align-items:baseline;gap:8px;word-break:keep-all}
#stBody .st-r .d{font-size:14px;color:var(--l2);line-height:1.5;margin-top:2px;word-break:keep-all}
#stBody .st-r .ct{flex:0 1 auto;min-width:0;max-width:56%;display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:16px;color:var(--l1)}
#stBody .st-r .ct .vv{color:var(--l2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#stBody .st-r .ct .vv.stok{color:#1d7a46;font-size:16px}
#stBody .st-r .ct .vv.stwarn{color:var(--orange);font-size:16px}
#stBody .st-r .ct .vv.none{color:var(--l3)}
#stBody .st-r .ct .suf{color:var(--l2);white-space:nowrap}
#stBody .st-r .ct .gt{flex:none;font-size:18px;color:var(--l3);width:16px;text-align:center}
#stBody .st-r.lst{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}   /* 누르는 줄 — 올리면 옅은 바탕(글자 자리는 다른 줄과 같게) */
#stBody .st-r.lst:hover,#stBody .st-r.lst:focus-visible{background:var(--f4);outline:0}
#stBody .st-r.lst:hover .gt{color:var(--l1)}
#stBody .st-r.off .lb,#stBody .st-r.off .ct{opacity:.55}
#stBody .st-r .ct .stb{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border:0;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line2,rgba(0,0,0,.14));font:inherit;font-size:14px;color:var(--l1);white-space:nowrap;text-decoration:none;cursor:pointer}
#stBody .st-r .ct .stb:hover{background:var(--f4)}
#stBody .st-r .ct .stb.dg{color:var(--red)}
#stBody .st-r .ct .stb[disabled]{opacity:.45;cursor:default;background:#fff}
/* 접힌 글 칸 — 값 글자처럼(테두리 · 바탕 없음 · 오른쪽 맞춤) · 올리면 옅은 바탕 · 누르면 그 자리 입력 칸(테두리 · 왼쪽 맞춤) */
#stBody .st-r .ct input.stin{height:32px;width:200px;max-width:100%;min-width:0;padding:0 10px;margin:0 -10px 0 0;border:0;border-radius:8px;background:transparent;
  box-shadow:none;outline:0;font:inherit;font-size:16px;color:var(--l1);text-align:right;cursor:pointer;text-overflow:ellipsis}
#stBody .st-r .ct input.stin.wide{width:280px}
#stBody .st-r .ct input.stin.nar{width:120px}
#stBody .st-r .ct input.stin.num{width:72px;margin:0;-moz-appearance:textfield}
#stBody .st-r .ct input.stin.num::-webkit-inner-spin-button,#stBody .st-r .ct input.stin.num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#stBody .st-r .ct input.stin::placeholder{color:var(--l3)}
#stBody .st-r .ct input.stin:hover:not([disabled]){background:var(--f4)}
#stBody .st-r .ct input.stin:focus,#stBody .st-r .ct input.stin.open{background:#fff;box-shadow:inset 0 0 0 1px var(--line2,rgba(0,0,0,.14));text-align:left;cursor:text;margin-right:0}
#stBody .st-r .ct input.stin[disabled]{color:var(--l2);cursor:default}
#stBody .st-r .ct .sttx{display:inline-flex;align-items:center;height:32px;padding:0 10px;margin-right:-10px;border:0;border-radius:8px;background:none;font:inherit;font-size:16px;color:var(--l1);cursor:pointer;white-space:nowrap}
#stBody .st-r .ct .sttx:hover{background:var(--f4)}
#stBody .st-r .ct .sttx .muted{color:var(--l3)}
/* 고르기 — 값 + ▾(브라우저 목록이 떠 있는 칸) */
#stBody .st-r .ct .stpk{position:relative;display:inline-flex;align-items:center;min-width:0;margin-right:-10px}
#stBody .st-r .ct .stpk select{appearance:none;-webkit-appearance:none;height:32px;max-width:100%;padding:0 26px 0 10px;border:0;border-radius:8px;background:transparent;
  font:inherit;font-size:16px;color:var(--l1);text-align:right;cursor:pointer;outline:0}
#stBody .st-r .ct .stpk::after{content:"▾";position:absolute;right:10px;font-size:14px;color:var(--l3);pointer-events:none}
#stBody .st-r .ct .stpk select:hover:not([disabled]),#stBody .st-r .ct .stpk select:focus{background:var(--f4)}
#stBody .st-r .ct .stpk select[disabled]{color:var(--l2);cursor:default}
/* 토글 — 켬 진한 회색 · 끔 옅은 회색(시안 .swi) */
#stBody input.stswi,#clPt input.stswi{appearance:none;-webkit-appearance:none;flex:none;width:36px;height:22px;margin:0;border:0;border-radius:11px;cursor:pointer;
  background:radial-gradient(circle at 11px 11px,#fff 0 8px,transparent 9px),rgba(0,0,0,.16);transition:background .12s}
#stBody input.stswi:checked,#clPt input.stswi:checked{background:radial-gradient(circle at 25px 11px,#fff 0 8px,transparent 9px),rgba(0,0,0,.72)}
#stBody input.stswi:focus-visible,#clPt input.stswi:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#stBody input.stswi[disabled],#clPt input.stswi[disabled]{cursor:default;opacity:.5}
/* 고객사 세부 정보 「자문 포털」 — 설정과 같은 알약 · 덩이 넷 · 볼 사람은 들여쓰기(리뷰-B L1 · 시안 고객화면-B 둘째판 장면 3 ③) */
#clPt .stsw .sw{grid-template-columns:36px 120px 1fr}
#clPt .stsw .sw + .sw{padding-left:24px}
/* 고객 화면 미리 보기(결정 735 · clientsend.js clPpOpen) — 스위치 줄 오른쪽 작은 글자 단추(덩어리 위에 얹음 · 아무것도 밀지 않음) ·
   넓은 겹창 1120(fp.js wide) · 맨 위 띠 한 줄 · 아래 칸이 스크롤 · 안의 꼴은 고객 화면 그대로(c/portal.css · c/view.css · 한 기둥 760) */
#clPt{position:relative}
#clPpGo{position:absolute;right:0;top:30px;height:22px;padding:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--l2);white-space:nowrap;cursor:pointer}
#clPpGo:hover{color:var(--fp-ink);text-decoration:underline;text-underline-offset:3px}
#clPt .stsw > .sw:first-child{padding-right:150px}
@media (max-width:600px){                                       /* 좁으면 스위치 위 오른쪽 한 줄(덧말이 꺾이지 않게) */
  #clPpGo{position:static;display:block;margin:6px 0 -4px auto}
  #clPt .stsw > .sw:first-child{padding-right:0}
}
.fp-scrim.clpp-sc{z-index:120}
.fp-ov.clpp-ov{z-index:121;max-width:calc(100vw - 24px);height:calc(100vh - 48px);padding:18px 0 0;display:flex;flex-direction:column;overflow:hidden}
.clpp-ov .fp-ov-top{padding:0 24px}
.clpp-ov .fp-ov-bd{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:12px}
.clpp-band{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:9px 24px;background:#eceef1;font-size:14px;color:var(--l2)}
.clpp-band b{font-weight:600;color:var(--fp-ink)}
.clpp-band span{font-size:13px}
.clpp-pg{flex:1;min-height:0;overflow-y:auto;padding:28px max(28px, calc((100% - 760px) / 2)) 40px;background:#fff;color:rgba(0,0,0,.88);text-align:left;
  font:15.5px/1.7 Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.clpp-pg:focus{outline:none}                                    /* 키보드 스크롤용 초점(tabindex -1) — 테두리는 안 그림 */
.clpp-pg h1{letter-spacing:normal}                              /* 앱의 h1 자간을 걷어 고객 화면(page.css)과 같게(리뷰 L5) */
@media (max-width:760px){
  .fp-ov.clpp-ov{top:0 !important;width:100vw;max-width:100vw;height:100vh;height:100dvh;border-radius:0}
  .clpp-ov .fp-ov-top{padding:0 16px}
  .clpp-band{padding:8px 16px}
  .clpp-pg{padding:18px 16px 32px}
}
#stBody .st-r .ct .stdocpv img{height:32px}
#stBody .st-r .ct .stdocpv.seal img{width:36px;height:36px}
#stBody .stft{font-size:14px;color:var(--l3);margin-top:20px}
#stBody .stft a{color:inherit}
#stBody .stf.stkw{display:block}
#stBody .stf.stkw>.k{display:none}
@media (max-width:600px){
  #stBody .st-r{gap:16px}
  #stBody .st-r .lb{flex:1 0 42%}
  #stBody .st-r .ct{max-width:58%}
  #stBody .st-r .ct input.stin,#stBody .st-r .ct input.stin.wide{width:150px}
  #stBody h3.stsh{margin-top:24px}
  /* 표 꼴 목록 — 이름 칸이 글자마다 세로로 꺾이지 않게(낱말 단위 · 표는 제 안에서 가로로) */
  #stSecKinds .stkl,#stSecHc .bf-tbl,#stSecLw .bf-tbl,#stSecLc .bf-tbl{overflow-x:auto}
  #stSecKinds .stkl.rules .kr,#stSecKinds .stkl.rules .khd{grid-template-columns:14px minmax(72px,1fr) 52px 80px 48px;gap:6px;padding:0 8px}
  #stSecKinds .stkl .khd span{word-break:keep-all;line-height:1.3}
  #stSecKinds .stkl .kr .nm,#stSecKinds .stkl .kr .ki,#stSecAdvisers .sttbl td,#stSecAdvisers .sttbl th{word-break:keep-all;white-space:nowrap}
  .st-ov #stBody .sthd{min-height:0}
}
#stBody .stbk>.stnote:empty{display:none}

/* =====================================================================
   공유 칸 — share.js(접두 sh · 2026-10-18 장면 「공유」 · 결정 688)
   꼴 = docs/mock/할일일정-시안-확정/여덟째판c-장면1u-공유칸-1440.png · 부품 .fp 위에 폭 · 칸 나눔만 · 스위치는 설정의 .rsw 그대로
   ===================================================================== */
.ti-shr,.thp-shr{flex:none;cursor:pointer;white-space:nowrap;font-size:14px;line-height:1.5;padding:4px 2px;margin-right:4px;color:rgba(0,0,0,.62);text-decoration:none}
.ti-shr:hover,.ti-shr.open,.thp-shr:hover,.thp-shr.open,.gxn a.open{color:rgba(0,0,0,.88);text-decoration:underline;text-underline-offset:4px}
.sh-by{flex:none;white-space:nowrap;font-size:14px;color:rgba(0,0,0,.62);margin-right:4px}   /* 받은 사람 — 누를 수 없는 글자 */
.fp.sh-p{box-sizing:border-box;width:440px;max-width:calc(100vw - 16px);padding:0;cursor:default}
.sh-hd{display:flex;align-items:center;padding:16px 16px 0 20px}
.sh-tt{flex:1 1 auto;font-size:16px;font-weight:600;color:var(--fp-ink)}
.sh-ln{padding:6px 20px 14px;font-size:14px;color:var(--fp-ink2);border-bottom:1px solid var(--fp-line)}
.sh-ib{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--fp-ink2);padding:0}
.sh-ib:hover{background:var(--fp-on)}
.sh-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sh-sec{padding:14px 20px}
.sh-base{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--fp-line)}
.sh-bl{flex:1 1 auto;font-size:15px;font-weight:500;color:var(--fp-ink)}
.sh-bl em{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--fp-ink3);margin-top:2px}
.sh-qw{position:relative}
.sh-qw .fp-q{height:40px;margin:0;padding:0 12px;background:#fff;box-shadow:inset 0 0 0 1px var(--fp-line2)}
.sh-qw .fp-q:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue)}
.sh-pkl{position:absolute;left:0;right:0;top:44px;z-index:2;max-height:240px;overflow:auto;padding:6px;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--fp-line),var(--fp-shadow)}
.sh-pkl .fp-row{height:40px;padding:0 10px}
.sh-pkl .fp-row.dim{cursor:default}
.sh-pkl .fp-row.dim:hover{background:transparent}
.sh-k{margin:16px 0 6px;font-size:13px;color:var(--fp-ink2)}
.sh-pr{display:flex;align-items:center;gap:10px;height:44px}
.sh-pr .av{width:26px;height:26px;border-radius:999px;background:rgba(0,0,0,.06);font-size:13px;line-height:26px;text-align:center;flex:none;color:var(--fp-ink2)}
.sh-pn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--fp-ink)}
.sh-ex{flex:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;color:var(--fp-ink2);padding:4px 6px;border-radius:8px}
.sh-ex.on{color:var(--fp-ink)}
.sh-ex:hover,.sh-ex.open{background:var(--fp-on)}
.sh-p .rsw:not(.on){background:#D4D6DA}   /* 칸을 연 그릇(.thp · .ti-th)의 button{background:none} 이 꺼진 스위치 바탕을 지우지 않게(리뷰-B M1) */
/* 맨 아래 「고객사에」 묶음(포털-b · 결정 700 · 702 · 확정 시안 포털b-자리-시안-확정/둘째판) — 위 구분선 · 무리 이름 = 「보는 사람」 꼴 · 줄 = fpRow(15 · 높이 40) */
.sh-cl{border-top:1px solid var(--fp-line);padding:0 8px 10px}
.sh-cl .sh-k{margin:14px 12px 4px}
.sh-cl .fp-row{height:40px;padding:0 12px;font-size:15px}
.sh-cl .fp-row .rsw{margin-left:auto}
.sh-cl .fp-row .fp-sub{font-size:16px}
.sh-cl .fp-row.dim{cursor:default}
.sh-cl .fp-row.dim:hover{background:transparent}
.sh-cl .fp-hint.no{margin:-2px 0 4px;padding:0 12px;font-size:14px}
/* 꼬리표 「자문 포털」 — 스레드 머리 메타 줄 끝(올렸고 공유 중일 때) · 고객사 머리 「자문 포털 켬」(리뷰-B L2) */
.ptag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--f3);color:var(--l2);font-size:14px;margin-left:4px;vertical-align:middle}
#vShared .pb-cpp{width:128px}   /* 「공유」 칸 = 준 사람 · 받은 날이 끝까지(리뷰-B M3) */
#vShared .pb-l.ur .pb-t::before{content:"";display:inline-block;width:6px;height:6px;border-radius:3px;background:var(--blue);margin-right:6px;vertical-align:middle}   /* 안 읽은 공유(리뷰-B M4 · 시안 s1) */
@media (max-width:600px){
  .fp.sh-p.sh-full{position:fixed;left:0 !important;top:0 !important;right:0;bottom:0;width:auto;max-width:none;border-radius:0;overflow:auto;z-index:140}
}