/* 프리텐다드 — 파일 하나(가변)로 굵기 전부를 낸다. **없어도 안 깨진다**:
   내려받는 동안·실패했을 때는 스택 뒷순서(시스템 글꼴)가 그대로 받는다(font-display:swap).
   local() 이 먼저다 — 설치돼 있는 사람은 2MB 를 아예 안 받는다. */
@font-face{
  font-family:"Pretendard Variable";
  src:local("Pretendard Variable"),local("PretendardVariable"),
      url("vendor/PretendardVariable.woff2") format("woff2");
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#EEF1F6; --panel:#FFFFFF; --panel2:#F5F7FB; --line:#DDE3EC; --line2:#E8EDF4;
  --ink:#1A2332; --ink-soft:#4A5670; --ink-faint:#8B96A9;
  --mkt:#D97E06; --dsgn:#D64D74; --dev:#2B66DE; --acct:#0E7490; --free:#7447CE;
  --won:#159A56; --warn:#B45309; --red:#C93B3B; --coffee:#96603A; --prod:#0E8C7F;
  --rail:#0D2C4D; --rail-ink:#C6D0E2;   /* 위블 네이비 (2026-08-28 사용자) */
  /* 레일 위의 덧칠(눌림·구분선)과 강조 글자 — **레일 톤이 뒤집히면 이 둘도 뒤집힌다.**
     어두운 판 위에서는 흰 덧칠이지만 밝은 판 위에서는 보이지 않는다 (2026-08-26 사용자) */
  --rw:255,255,255; --rail-str:#fff;
  /* 🧠 브레인스토밍 한 벌 — 파트색을 빌려 쓴다(새 색을 만들면 팔레트가 늘어난다).
     다크에서도 --free 가 같이 바뀌므로 여기 한 줄이면 두 테마가 다 따라온다 */
  --idea:var(--free);
  /* 🟠 외부 업체 표식 — 메일의 [외부] 관례가 이 색이라 뜻이 이미 학습돼 있다.
     --idea 와 같은 문법으로 기존 색을 빌린다(팔레트를 안 늘린다) — 다크도 따라온다 */
  --ext:var(--warn);
  /* 본문 스택 — 한 곳에만 적는다. body 와 폼 컨트롤이 같이 쓴다 */
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  /* 고정폭 뒤에 프리텐다드를 받친다 — Cascadia·Consolas 에는 **한글이 없어서**
     mono 라벨 속 한글(「의견서」 등)이 굴림으로 떨어졌다. 숫자·라틴은 고정폭 그대로,
     한글만 프리텐다드가 받는다. */
  --mono:ui-monospace,"Cascadia Code",Consolas,"Pretendard Variable",Pretendard,"Malgun Gothic",monospace;
  /* 모션 — 한 벌만 쓴다. 화면마다 다른 커브를 쓰면 그게 「딱딱함」보다 나쁘다.
     ease-out 계열로 **빠르게 시작해 부드럽게 멈춘다** — 반응이 빠르다는 인상이 남는다. */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.14s; --t-mid:.2s; --t-slow:.28s;
  --shadow:0 8px 24px rgba(20,28,46,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12161F; --panel:#1B212D; --panel2:#161B26; --line:#2A3242; --line2:#232B3A;
    --ink:#E8EDF6; --ink-soft:#A9B4C9; --ink-faint:#6B768C;
    --mkt:#F0A036; --dsgn:#E9748F; --dev:#6191F2; --acct:#3FB6D9; --free:#9D77E8;
    --won:#3BC47E; --warn:#D98A3D; --red:#E06060; --coffee:#CC9668; --prod:#2BB3A3;
    --rail:#0D2C4D; --rail-ink:#8B96A9;   /* 같은 네이비 — 밝은 테마만 바꾸면 OS 가 어두운 사람에겐 안 바뀐다 */
    --shadow:0 8px 24px rgba(0,0,0,.35);
  }
  /* 밝은 톤을 고른 사람도 OS 가 어두우면 **덧칠은 흰색**이다 — 판이 어두워졌으니 */
  :root[data-tone="light"]{ --rw:255,255,255; --rail-str:var(--ink); }
}

/*
 * 🎨 레일·탭바 톤 — 개인 설정 (2026-08-26 사용자).
 * 기본은 어두운 판(WEABL 의 얼굴)이고, 밝은 톤은 레일을 **화면과 같은 판**으로 만든다.
 * 흰색을 박아 넣지 않고 --panel 을 쓰는 이유: OS 가 어두우면 레일만 흰 슬래브로 남아
 * 오히려 눈이 아프다. 「밝은」은 곧 「본문과 같은 톤」이다.
 * 기기마다 다른 취향이므로 서버가 아니라 localStorage 에 둔다(레일 접힘과 같은 자리).
 */
:root[data-tone="light"]{
  --rail:var(--panel); --rail-ink:var(--ink-soft); --rail-str:var(--ink);
  --rw:26,35,50;
}
:root[data-tone="light"] .rail{border-right:1px solid var(--line)}
:root[data-tone="light"] .tabbar{border-top:1px solid var(--line)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* ── 기본 배율 110% ──
   써 본 사람들이 크롬 110% 를 가장 알맞다고 해서 그걸 기본으로 굽는다.
   px 를 전부 다시 곱하는 대신 zoom 하나로 낸다 — 수치 550곳을 또 만지면
   다음에 「5% 만 더」가 왔을 때 같은 일을 또 해야 한다. 배율은 이 변수 하나다.
   모바일은 화면이 좁아 그대로 둔다(1). vh 를 쓰는 자리는 배율로 나눠서
   「화면 안에 딱」이 배율과 무관하게 유지된다 — 아래 --vh100 를 쓴다. */
:root{--uiz:1.1;--vh100:calc(100vh / var(--uiz))}
/* 모바일 — 100vh 는 주소창이 접힌 「최대」 높이라, 주소창이 보이는 동안엔 실제 화면보다
   길다. 그 넘침이 탭바를 주소창 뒤로 밀어 넣었다 (2026-08-21 사용자). dvh 는 주소창에
   맞춰 줄어드는 단위 — 두 줄 선언은 dvh 미지원 브라우저의 안전망이다 */
@media (max-width:860px){:root{--uiz:1;--vh100:100vh;--vh100:100dvh;
  /* 탭바의 **실제** 높이 — app.js 가 재서 덮어쓴다. 여기 값은 재기 전의 예비값이다.
     예전엔 58px 로 못 박아 뒀는데 실제는 52px 이라, 탭바를 피해 놓은 판들이 6px 씩
     짧게 끝나 **밝은 띠**가 비쳤다 (2026-08-27 사용자) */
  --tabh:calc(58px + env(safe-area-inset-bottom,0px))}}
body{zoom:var(--uiz)}

/* ── 스크롤바 ──
   시스템 기본(밝은 궤도 + 각진 손잡이)은 판 안에 뜨는 순간 남의 물건처럼 보인다.
   가는 손잡이 하나, 궤도는 투명 — 앱의 선 색을 그대로 쓴다.
   scrollbar-* 표준 속성이 있는 브라우저(파폭·크롬121+)는 그걸 쓰고,
   구형 크롬·엣지는 아래 ::-webkit- 이 같은 모양을 낸다. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:var(--line);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--ink-faint)}
::-webkit-scrollbar-corner{background:transparent}
/* 어두운 레일 위에서는 밝은 선이 튄다 — 레일 톤으로 맞춘다 */
.rail{scrollbar-color:rgba(var(--rw),.18) transparent}   /* 채널 목록은 이제 밝은 패널 안이라 기본 색을 쓴다 */
body{font-family:var(--sans);
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* 폼 컨트롤은 inherit 가 아니라 **본문 스택을 직접** 쓴다. inherit 로 두면 mono 라벨(.qhead 등)
   안의 버튼이 고정폭을 물려받고, 고정폭엔 한글이 없어 「＋ 자료 올리기」가 굴림으로 떨어졌다.
   letter-spacing 도 같은 이유로 끊는다 — 라벨의 자간이 버튼까지 번지면 안 된다.
   일부러 고정폭을 쓰는 컨트롤(.cite, .wsgoal input …)은 자기 규칙이 이겨서 그대로다. */
button,input,select,textarea{font-family:var(--sans);letter-spacing:normal;color:inherit}
button{cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* 맨 code/kbd 가 브라우저 기본(Courier 계열)으로 떨어지면 그 줄만 남의 앱이 된다.
   고정폭은 고정폭이되 **우리 스택**을 쓴다 */
code,kbd{font-family:var(--mono)}
.hide{display:none !important}

/*
 * 떠 있는 판의 자리 — **레일을 뺀 가운데.**
 *
 * 전부 inset:0 이라 레일까지 포함해 가운데를 잡고 있었다. 좁은 판은 티가 안 났지만
 * OKR(1080px)처럼 넓어지면 화면에 이미 떠 있는 것들과 축이 어긋나 보인다.
 * 덮는 막은 레일까지 그대로 둔다 — 뒤가 막혔다는 표시는 화면 전체에 걸려야 한다.
 * 비켜나는 것은 **판이 놓이는 자리**뿐이다.
 */
.gmodal, .mmodal, .fbmodal, .palette, .gate, .mswitch, .stagewrap { --railw:184px }
.app.railmin ~ .gmodal, .app.railmin ~ .mmodal, .app.railmin ~ .fbmodal,
.app.railmin ~ .palette, .app.railmin ~ .gate, .app.railmin ~ .mswitch,
.app.railmin ~ .stagewrap { --railw:60px }
/* 좁은 화면에서는 레일이 아래 탭바로 내려가므로 왼쪽에 비켜날 자리가 없다 */
@media (max-width:860px) { .gmodal, .mmodal, .fbmodal, .palette, .gate, .mswitch, .stagewrap { --railw:0px } }
/* 레일은 0.18s 에 걸쳐 접힌다 — 판이 즉시 튀면 둘이 따로 논다. 같은 박자로 움직인다 */
.gmodal, .mmodal, .fbmodal, .palette, .gate, .mswitch { transition:padding-left .18s ease }
/* stage 는 레일을 **덮지 않는다.** 덮는 막(modal)이 아니라 일하는 판이라서,
   회의 중에도 레일로 오피스·채팅에 갈 수 있어야 한다 */
.stagewrap { transition:left .18s ease }

/* ── 로그인 ── */
.login{min-height:var(--vh100);display:grid;place-items:center;padding:20px}
/*
 * 첫 화면의 상자는 **레일과 같은 판**이다 (2026-08-28 사용자 — 로고와 어울리게).
 * 로고가 어두운 바탕에서 제 색을 내고, 들어오자마자 보는 남색이 들어와서 보는 레일의
 * 남색과 같아진다 — 두 번째 화면이 처음 화면을 배신하지 않는다.
 *
 * 색을 하나하나 칠하지 않고 **토큰을 여기서 뒤집는다** — 안의 것들(제목·안내·입력칸·
 * 밑줄 링크)이 저절로 따라온다. 밝은/어두운 테마 어느 쪽이어도 이 상자는 같은 남색이다.
 *
 * ⚠️ `color:var(--ink)` 를 **여기서 다시 선언해야 한다.** 변수만 바꾸면 안 바뀐다:
 * body 의 `color:var(--ink)` 는 body 자리에서 이미 어두운 값으로 **풀려 있고**, 자식은
 * 그 「풀린 값」을 물려받을 뿐 다시 풀지 않는다. 이 저장소가 한 번 밟은 함정이다.
 */
.loginbox{
  --panel:#0D2C4D;                    /* 상자 자신 — 레일과 같은 남색 */
  --panel2:#0A2440;                   /* 입력칸 — 상자보다 한 겹 안쪽 */
  --ink:#FFFFFF;
  --ink-soft:#C6D0E2;                 /* 레일 글자와 같은 값 */
  --ink-faint:#9FB3CE;                /* 남색 위에서 읽히도록 레일보다 한 단계 밝게 */
  --line:rgba(255,255,255,.18);
  --line2:rgba(255,255,255,.12);
  --dev:#6191F2;                      /* 밝은 판용 파랑은 남색 위에서 가라앉는다 */
  --red:#FF9A9A;                      /* 오류 글자 — 어두운 판에서는 옅은 붉은색이 읽힌다 */
  width:min(400px,100%);background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:var(--shadow)}
.loginbox .brand{display:flex;align-items:center;margin-bottom:18px}
/* 로고는 **높이로** 잰다 — 폭으로 재면 글자가 긴 로고로 바뀌는 날 상자를 밀어낸다.
   height:auto 를 같이 적지 않으면 브라우저가 원본 비율 대신 속성 비율을 쓴다 */
.loginbox .brand .blogo{height:38px;width:auto;display:block}
.loginbox h1{font-size:19px;font-weight:800;margin-bottom:4px}
.loginbox p{font-size:14.5px;color:var(--ink-faint);margin-bottom:16px;line-height:1.6}
.fld{width:100%;border:1.5px solid var(--line);background:var(--panel2);border-radius:11px;
  padding:11px 13px;font-size:16px;margin-bottom:9px;outline:none}
.fld:focus{border-color:var(--dev)}
/* 남색 상자 안의 자리표시 글자 — 브라우저 기본 회색은 이 바탕에서 거의 안 보인다 */
.loginbox .fld::placeholder{color:var(--ink-faint);opacity:1}
.btn{width:100%;border:0;border-radius:11px;background:var(--dev);color:#fff;font-weight:800;font-size:16px;padding:12px}
.btn.dsc{display:block;margin-top:8px;background:#5865F2;text-align:center;
  text-decoration:none;line-height:1.4}
.btn.ghost{background:none;color:var(--ink-faint);font-weight:600;font-size:14px;padding:8px;text-decoration:underline}
.err{font-size:14px;color:var(--red);margin-bottom:8px;min-height:16px}
.hint{font-size:13.5px;color:var(--ink-faint);margin-top:12px;line-height:1.6;border-top:1px dashed var(--line);padding-top:11px}
.hint b{color:var(--ink-soft)}

/* ── 셸 ──
   레일은 접힌다. 접으면 아이콘만 남고, 본문은 중앙 정렬이라 자연히 왼쪽으로 따라온다.
   본문 폭을 화면 끝까지 늘리지 않는 이유는 한 줄이 길어지면 읽는 눈이 되돌아오지 못해서다. */
.app{display:flex;min-height:var(--vh100)}
/* 폭은 width 하나로만 정한다 — flex-basis 와 width 를 같이 transition 하면
   flex 레이아웃 안에서 값이 최종값에 도달하지 못하고 중간에서 멈춘다 */
.rail{flex:0 0 auto;width:184px;background:var(--rail);color:var(--rail-ink);
  display:flex;flex-direction:column;padding:14px 9px;position:sticky;top:0;height:var(--vh100);
  transition:width .18s ease;overflow:hidden}
.app.railmin .rail{width:60px}
.rail .logo{display:flex;align-items:center;gap:8px;padding:4px 6px 12px}
/* 레일은 어두운 판이다 — 로고가 스스로 밝은 테두리를 두르고 있어 그대로 얹힌다.
   min-width:0 이 있어야 레일이 접힐 때 그림이 폭을 붙잡고 버티지 않는다 */
.rail .logo .rlogo{height:36px;width:auto;flex:0 1 auto;min-width:0;object-fit:contain}
/* 접기 단추는 **오른쪽 끝**이다. 예전엔 옆에 있던 글씨가 flex:1 로 늘어나며 밀어 줬는데,
   글씨를 걷자 밀어 주는 것이 없어져 로고에 딱 붙었다 (2026-08-28 사용자).
   미는 일을 남에게 맡기지 않고 단추가 스스로 한다 — 옆에 무엇이 오든 자리가 안 흔들린다.
   접힌 레일에서는 아래 `.app.railmin .railtog{margin:0 auto}` 가 이 줄을 덮어 가운데로 간다 */
.rail .logo .railtog{margin-left:auto}
.railtog{flex:none;border:0;background:rgba(var(--rw),.08);color:var(--rail-ink);
  border-radius:7px;width:22px;height:22px;font-size:14px;line-height:1;padding:0}
.railtog:hover{background:rgba(var(--rw),.16);color:var(--rail-str)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:9px;background:none;border:0;border-radius:9px;
  padding:8px 10px;font-size:15px;font-weight:600;color:var(--rail-ink);text-align:left;
  white-space:nowrap;overflow:hidden}
.nav button>span:first-child{flex:none;width:17px;text-align:center}
.nav button em{font-style:normal;font-size:11.5px;opacity:.55;margin-left:2px}
.nav button:hover{background:rgba(var(--rw),.07)}
.nav button.on{background:rgba(var(--rw),.13);color:var(--rail-str)}
.nav .bdg{margin-left:auto;background:var(--red);color:#fff;font-size:12px;font-weight:800;
  border-radius:99px;padding:1px 6px;font-family:var(--mono)}
.rail-sep{height:1px;background:rgba(var(--rw),.1);margin:9px 4px}
.rail-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:3px 10px 5px;
  color:var(--rail-ink);opacity:.55;white-space:nowrap;overflow:hidden}
.rail .grp{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--rail-ink);
  opacity:.55;padding:12px 11px 5px}

/* 접힌 상태 — 글자는 사라지고 아이콘만 남는다. 배지는 점으로 줄어든다 */
.app.railmin .rail{padding:14px 7px}
.app.railmin .logo .rlogo,
.app.railmin .nav button em,
.app.railmin .rail-label,
.app.railmin .me .who > div:not(.upop),
.app.railmin .abrow .nm2,
.app.railmin .abnet .cause,
.app.railmin .logout,
.app.railmin .kbd{display:none}
.app.railmin .logo{padding:4px 0 12px;justify-content:center}
.app.railmin .railtog{margin:0 auto}
.app.railmin .nav button{justify-content:center;padding:9px 0;font-size:0;gap:0}
.app.railmin .nav button>span:first-child{font-size:18px;width:auto}
.app.railmin .nav .bdg{position:absolute;margin:0;transform:translate(11px,-9px);
  font-size:0;width:8px;height:8px;padding:0;border:2px solid var(--rail)}
.app.railmin .nav button{position:relative}
.app.railmin .me .who{justify-content:center;padding-bottom:7px}
.app.railmin .whoname,.app.railmin .stbtn .slabel,.app.railmin .stbtn .scaret{display:none}
.app.railmin .who .bell{position:absolute;transform:translate(14px,-10px)}
/* 접힌 레일에서는 🔔 과 ⚙ 이 같은 자리로 온다 — ⚙ 은 아바타의 **아래 귀**에 못박는다 */
.app.railmin .who #btnPref{position:absolute;right:-1px;bottom:5px;transform:none}
.app.railmin .stbtn{justify-content:center;padding:7px 0}
.app.railmin .stpop{left:calc(100% + 6px);right:auto;width:230px}
.app.railmin .audiobar .lvl{display:none}
.app.railmin .abrow{justify-content:center;padding:5px 0}
.app.railmin .abnet{justify-content:center}
/* 채널 목록이 채팅 화면으로 갔으므로, 내 상태 블록은 스스로 바닥에 붙어야 한다 */
.me{margin-top:auto;padding-top:10px;border-top:1px solid rgba(var(--rw),.1)}
.me .who{display:flex;align-items:center;gap:9px;padding:0 5px 9px;position:relative}
.me .whoname{flex:1;min-width:0}
.me .avt{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  font-size:15px;color:#fff;position:relative;background:var(--dev);flex:none}
.me .avt::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
  border-radius:50%;background:var(--sc,var(--won));border:2px solid var(--rail)}
.me .nm{color:var(--rail-str);font-weight:700;font-size:15px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .rl{font-size:13px;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 알림은 「나」에 대한 설정이라 내 이름 옆이 제자리다 */
.who .bell{flex:none;border:0;background:none;color:var(--rail-ink);font-size:15px;
  border-radius:7px;padding:4px 5px;position:relative;line-height:1}
.who .bell:hover{background:rgba(var(--rw),.1);color:var(--rail-str)}
.who .bell.dim{opacity:.5}
.who .bell .dot{position:absolute;top:2px;right:1px;width:6px;height:6px;border-radius:50%;
  background:#FFD34D;border:1.5px solid var(--rail)}

/* 상태 — 6칸 그리드 대신 한 줄. 누르면 단계로 묶여 펼쳐진다 */
.stnow{position:relative}
.stbtn{display:flex;align-items:center;gap:7px;width:100%;border:1px solid rgba(var(--rw),.16);
  background:rgba(var(--rw),.05);border-radius:9px;padding:7px 10px;
  font-size:13.5px;font-weight:700;color:var(--rail-str)}
.stbtn:hover{background:rgba(var(--rw),.11)}
.stbtn .sdot{font-size:14px;line-height:1}
.stbtn .slabel{flex:1;text-align:left}
.stbtn .scaret{font-size:11px;opacity:.6}
.stpop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:45;
  max-height:min(calc(var(--vh100)*.64),470px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:7px;
  box-shadow:0 12px 34px rgba(0,0,0,.4)}
.stgrp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
  padding:7px 8px 4px}
.stgrp:first-child{padding-top:3px}
.strow{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;background:none;
  border:0;border-radius:8px;padding:6px 8px;color:var(--ink)}
.strow:hover{background:var(--panel2)}
.strow.on{background:color-mix(in srgb,var(--dev) 10%,var(--panel));color:var(--dev)}
.strow .si{font-size:15px;line-height:1.3;flex:none}
.strow .sn{font-size:14px;font-weight:800;line-height:1.35}
.strow .sn span{display:block;font-size:12px;font-weight:500;color:var(--ink-faint)}
.strow.on .sn span{color:color-mix(in srgb,var(--dev) 65%,var(--ink-faint))}
/* 마이크 상태 — 레일 하단. 음소거일 때만 눈에 띄어야 한다(정상은 조용히) */
/* 레일은 184px(안쪽 ~148px)이라 아이콘 + 본문 + 채널명이 한 줄에 안 들어간다 —
   예전엔 본문이 접히고 채널명이 「대…」로 잘려서, 접힌 글자 옆에 잘린 조각이 붙어
   고장처럼 보였다. 그래서 **세로로 세운다**: 첫 줄이 상태, 둘째 줄이 할 일과 자리. */
.micbar{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-decoration:none;
  border-radius:10px;padding:8px 9px;margin:10px 0 6px;font-size:13.5px;font-weight:700;
  border:1px solid transparent;background:color-mix(in srgb,var(--ink) 6%,transparent);
  color:var(--rail-ink)}
/* 위의 상태 고르개(.stnow)와 **붙어 있으면 한 덩어리로 읽힌다** — 성격이 다른 물건이다.
   저쪽은 내가 고르는 것이고 이쪽은 지금 사실을 알리며 밖(디스코드)으로 나가는 문이다. */
.micbar.muted{border-color:color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
/* 누를 수 있다는 것이 손에 먼저 닿아야 한다 */
.micbar:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.micbar.muted:hover{border-color:var(--warn)}
.micbar .mbtop{display:flex;align-items:center;gap:7px;min-width:0}
/* 아이콘 칸을 고정폭으로 둔다 — 둘째 줄의 디스코드 마크와 세로로 맞는다 */
.micbar .mbi{flex:none;width:14px;text-align:center;font-size:13px;line-height:1}
/* 상태 한 마디는 줄이지 않는다 — 여기가 접히면 그게 정확히 예전 증상이다 */
.micbar .mbtop b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 둘째 줄 = **누르면 무슨 일이 나는가.** 디스코드 마크와 ↗ 로 「밖으로 나간다」를 그림으로도 말한다 */
.micbar .mbsub{display:flex;align-items:center;gap:7px;min-width:0;
  font-size:11.5px;font-weight:600;opacity:.9}
.micbar .mbsub .dsci{flex:none;width:14px;height:14px;fill:#5865F2}   /* 브랜드 마크는 브랜드색 */
.micbar .mbsub .mbt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.micbar .mbsub .mbgo{flex:none;margin-left:auto;opacity:.55;font-size:11px}

.logout{width:100%;background:none;border:0;color:var(--rail-ink);opacity:.6;font-size:13px;
  padding:8px 0 0;text-decoration:underline}
/* 판 번호 — 눈에 띄면 안 되고, 찾으면 있어야 한다. 확인용이지 읽을거리가 아니다 */
.railver{text-align:center;font-family:var(--mono);font-size:11px;color:var(--rail-ink);
  opacity:.4;padding-top:7px;letter-spacing:.02em}

/* ── 오디오 상태바 (02 §6-2) — 레일 하단 상시 고정 ── */
.abrow{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;border-radius:7px;
  padding:5px 6px;text-align:left;color:var(--rail-ink);font-size:13.5px}
.abrow:hover{background:rgba(var(--rw),.08)}
.abrow .ic{font-size:15px;flex:none;width:15px;text-align:center}
.abrow .nm2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.abrow.muted{color:#FF9A9A}
.audiobar .lvl i{width:3px;border-radius:1px;background:rgba(var(--rw),.18);transition:height .09s linear}
.audiobar .lvl.muted i.on{background:#FF7A7A}
/* 음소거인 채 말하고 있다는 걸 알아채는 유일한 단서 (§6-4) */
.abwarn{margin:2px 4px 0;background:rgba(255,122,122,.16);border:1px solid rgba(255,122,122,.4);
  border-radius:7px;padding:5px 8px;font-size:12.5px;font-weight:700;color:#FFB3B3;line-height:1.4;display:none}
.abwarn.on{display:block}
.abnet{display:flex;align-items:center;gap:6px;padding:3px 6px;font-size:12px;color:var(--rail-ink);opacity:.8}
.abnet .dots{display:flex;gap:2px;flex:none}
.abnet .dots i{width:4px;height:4px;border-radius:50%;background:#4ADE80}
.abnet .dots i.off{background:rgba(var(--rw),.22)}
.abnet .cause{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ── 모바일 하단 탭바 ── 데스크톱에서는 레일이 그 역할을 하므로 숨는다 */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:72;
  background:var(--rail);border-top:1px solid rgba(var(--rw),.1);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;color:var(--rail-ink);font-size:11.5px;font-weight:700;
  padding:7px 2px 6px;position:relative}
.tabbar button .ti{font-size:19px;line-height:1.15}
.tabbar button.on{color:var(--rail-str)}
.tabbar button.on .ti{transform:translateY(-1px)}
/* 탭 배지는 숫자 없이 점만 — 칸이 좁고 「있다/없다」면 충분하다 */
.tabbar .tb{position:absolute;top:5px;left:50%;margin-left:7px;width:7px;height:7px;
  border-radius:50%;background:var(--red);border:1.5px solid var(--rail)}
.sheetback{display:none;position:fixed;inset:0;z-index:70;background:rgba(10,14,22,.5);
  opacity:0;pointer-events:none;transition:opacity .2s}

main{flex:1;min-width:0;display:flex;flex-direction:column;height:var(--vh100)}
.view{display:none;flex:1;min-height:0;flex-direction:column}
.view.on{display:flex}

/* ── 오피스 ──
   본문은 화면 끝까지 늘리지 않는다 — 한 줄이 너무 길면 읽는 눈이 되돌아오지 못한다.
   가운데 정렬을 max-width 가 아니라 **양쪽 패딩**으로 낸다: 스크롤 요소 자체를
   1240px 로 좁히면 스크롤바가 화면 한복판에 뜬다. 요소는 끝까지 넓히고
   내용만 패딩으로 모으면 스크롤바가 창 맨 오른쪽에 붙는다. */
.office{padding:24px max(30px,calc((100% - 1400px)/2)) 38px;overflow-y:auto;width:100%}
.shead{margin-bottom:16px}
.shead .eb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-faint)}
.shead h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:2px 0 4px}
.shead .memo{font-size:14px;color:var(--ink-faint);line-height:1.65}
.shead .memo b{color:var(--ink-soft)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.ptitle{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.ptitle h2{font-size:16px;font-weight:800}
.ptitle .sub{font-size:13.5px;color:var(--ink-faint)}
/* 오피스 맨 위의 목표 손잡이 — 레일 한 칸을 상시로 내주는 대신 여기 하나로 모았다 */
.okrbtn{margin-left:auto;border:1.5px solid var(--line);background:var(--panel);
  border-radius:99px;padding:5px 13px;font-size:13.5px;font-weight:800;color:var(--ink-soft)}
.okrbtn:hover{border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 7%,var(--panel))}

/* 목표 창 — 회의 예약 창과 같은 틀을 쓰되 안에 그래프가 들어가 더 넓다 */
/* 권한 패널 — 사람 고르는 칩 + 고정 경계 지도 */
.permpick{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.permpick .pp i{font-style:normal;font-size:11.5px;color:var(--ink-faint)}
.permlayer{margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.permgrp{margin-bottom:14px;padding-left:10px;border-left:2px solid var(--line2)}
.pgh{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:8px;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pgh span{font-size:12px;font-weight:600;color:var(--ink-faint)}
.permmap{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.permmap.fixed .pmrow b{color:var(--ink-faint)}
.permmap .pmh{font-size:12.5px;font-weight:800;color:var(--ink-faint);margin-bottom:6px}
.permmap .pmrow{display:flex;gap:8px;font-size:13px;padding:3px 0;align-items:baseline}
.permmap .pmrow b{flex:0 0 150px;font-weight:700}
.permmap .pmrow span{color:var(--ink-faint)}

/* ── 🗂 정기 브리핑 ── */
.briefbanner{display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  border:1.5px solid color-mix(in srgb,var(--dev) 40%,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--dev) 7%,var(--panel));padding:13px 16px;margin-bottom:13px;
  font-size:14.5px;color:var(--ink-soft)}
.briefbanner span{margin-left:auto;font-weight:800;color:var(--dev);flex:none}
/*
 * 세 장을 나란히 세우던 격자(.briefgrid)와 장의 옷(.briefcard·.bchead)은 걷었다 (3.50.0) —
 * 브리핑이 제 화면(v-brief)을 그만두고 **v-meet 의 머리**가 되면서 셋은 접힌 줄(.bfrow)이 됐다.
 * 장 안쪽 옷(.bcsum·.bclabel·.bcitem)은 그대로 산다: 펼친 몸통이 그 옷을 그대로 입는다.
 */
.bcsum{font-size:14px;line-height:1.7;color:var(--ink-soft);background:var(--panel2);
  border-radius:10px;padding:9px 11px;margin-bottom:9px}
.bclabel{font-size:12.5px;font-weight:800;color:var(--ink-faint);margin:9px 0 4px}
.bcitem{display:flex;width:100%;text-align:left;gap:6px;align-items:baseline;
  border:0;background:none;font-size:14px;color:var(--ink);line-height:1.55;
  padding:4px 6px;border-radius:8px}
.bcitem:hover{background:var(--panel2)}
.bcitem .bctt{flex:1;min-width:0}
.bcitem .go{margin-left:auto;color:var(--dev);font-weight:800;flex:none;opacity:.55}
.bcitem:hover .go{opacity:1}

/* ── 브리핑 접힌 줄 (3.50.0 병합) ─────────────────────────────────────────────
 *
 * 브리핑 장은 화면 전체가 아니라 **그 화면의 머리**다. 그래서 늘 펼쳐져 있으면 안 된다 —
 * 기록을 찾으러 온 사람이 매번 브리핑을 지나쳐야 하기 때문이다. 규칙은 하나:
 * **안 읽었으면 펼쳐서, 읽었으면 접어서.** 셋(일·주·월)이 같은 옷을 입는다.
 *
 * 이름은 bf* 로 묶었다 — .pv·.new·.sub 같은 짧은 이름은 이미 남이 쓰고 있어서
 * (프롬프트 칩의 .pv, 판 제목의 .sub) 전역 한 파일에서 빌리면 남의 규칙에 걸린다.
 * 좌측 색상띠는 줄과 본문을 **한 줄로 잇는다** — 줄에만 있으면 펼쳤을 때 띠가 끊긴다. */
.bfrow{display:flex;width:100%;text-align:left;gap:9px;align-items:baseline;margin-top:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:11px 16px;
  border-left:3px solid var(--prod)}
.bfrow:first-child{margin-top:0}
.bfrow.daily{border-left-color:var(--dev)}
.bfrow.monthly{border-left-color:var(--mkt)}
.bfrow:hover{border-color:var(--ink-faint)}
.bfrow b{font-size:14.5px;flex:none}
.bfsub{font-size:12px;color:var(--ink-faint);flex:none}
.bfai{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:800;color:var(--prod);
  border:1px solid color-mix(in srgb,var(--prod) 30%,var(--panel));
  background:color-mix(in srgb,var(--prod) 8%,var(--panel));border-radius:6px;padding:0 6px;flex:none}
.bfnew{font-family:var(--mono);font-size:10.5px;font-weight:800;color:#fff;background:var(--red);
  border-radius:99px;padding:1px 8px;flex:none}
.bfpv{font-size:12.5px;color:var(--ink-soft);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bfpv.off{color:var(--ink-faint)}
.bfcv{flex:none;color:var(--ink-faint);font-weight:800;transition:transform var(--t-mid) var(--ease)}
.bfrow.open .bfcv{transform:rotate(90deg)}
.bfrow.open{border-radius:13px 13px 0 0;border-bottom:0}
.bfbody{background:var(--panel);border:1px solid var(--line);border-top:0;
  border-left:3px solid var(--prod);border-radius:0 0 13px 13px;padding:10px 16px 13px}
.bfbody.daily{border-left-color:var(--dev)}
.bfbody.monthly{border-left-color:var(--mkt)}
.bfmeta{font-size:11.5px;color:var(--ink-faint);margin:0 0 6px}
/* 머리와 몸통 사이 — 기록 도구줄이 바로 붙으면 두 층이 한 덩어리로 보인다 */
#briefLayer:not(:empty){margin-bottom:16px}

/* 프로필 사진 — 아바타 자리를 그대로 채운다(원형·크기는 각 자리의 CSS 가 정한다).
   **overflow 를 쓰지 않는다** — 상태 점(::after)이 아바타 바깥으로 1px 걸쳐 있어서
   overflow:hidden 을 걸면 점이 잘린다(사진을 넣으면 상태가 반쯤 사라지던 버그).
   이미지는 border-radius:inherit 로 이미 부모 모양대로 잘리므로 자를 필요가 없다. */
/*
 * 얼굴은 **어디서나 같은 동그라미**다 (2026-08-31 사용자).
 *
 * 아바타 그릇은 거의 다 `display:grid;place-items:center` 인데, 그 안에서 height:100% 는
 * 제 비율로 되돌아간다 — 세로로 긴 사진을 올리면 35×35 원 안에 35×82 이미지가 서서
 * 레일·오피스·채팅 어디서나 원 밖으로 삐져나온 덩어리가 됐다(실측). stretch 로 자리를
 * 채우게 못 박는다. **자르지 않는다**: 그릇에 overflow:hidden 을 걸면 위 주석대로 상태 점이 잘린다.
 */
.avimg{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:inherit;
  display:block;align-self:stretch;justify-self:stretch}
.avt:has(.avimg),.oa:has(.avimg),.pavt:has(.avimg){background:none!important}
/* 점은 사진 위에 온다 — 사진이 늦게 그려져도 가리지 않게 쌓임 순서를 못 박는다 */
.avt::after,.desk .avt::after,.me .avt::after{z-index:2}
.me .avt .avimg{border-radius:50%}

/* ＋ 메뉴 — 컴포저 왼쪽. 붙이는 것들만 모은다 */
.plusbox{position:relative;flex:none}
.plusmenu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;width:250px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:5px;display:flex;flex-direction:column;gap:2px}
/* 설명 꼬리를 걷었으니 **한 줄**이다 (2026-09-01 사용자) — 아이콘 옆에 글자가 온다.
   세로로 쌓는 배치는 아래 설명이 있을 때의 꼴이었다 */
.plusmenu button{display:flex;flex-direction:row;align-items:center;gap:9px;
  width:100%;text-align:left;border:0;background:none;border-radius:9px;padding:9px 11px;
  font-size:14.5px;color:var(--ink);cursor:pointer}
.plusmenu button:hover{background:var(--panel2)}
.plusmenu button b{font-weight:700}
.plusmenu button span{font-size:12.5px;color:var(--ink-faint);line-height:1.45}

/* 😀 이모지 피커 — 컴포저 위에 뜨는 판 */
.emojipop{position:fixed;z-index:94;width:328px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.etabs{display:flex;border-bottom:1px solid var(--line);background:var(--panel2)}
.etab{flex:1;border:0;background:none;font-size:17px;padding:7px 0;opacity:.55;cursor:pointer}
.etab.on{opacity:1;background:var(--panel);border-bottom:2px solid var(--dev)}
.egrid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  max-height:264px;overflow-y:auto;padding:7px}
.emo{border:0;background:none;font-size:21px;line-height:1;padding:6px 0;
  border-radius:8px;cursor:pointer}
.emo:hover{background:var(--panel2)}

/* 답변형 검색 — 답 · 출처 · 이어지는 질문 */
.palask{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:1.5px dashed color-mix(in srgb,var(--dev) 45%,var(--line));border-radius:11px;
  background:color-mix(in srgb,var(--dev) 5%,var(--panel));padding:9px 12px;margin-bottom:7px;
  font-size:14px;color:var(--ink)}
.palask span{font-size:12.5px;color:var(--ink-faint)}
.palanswer{font-size:14.5px;line-height:1.75;background:var(--panel2);border-radius:12px;
  padding:12px 14px;margin-bottom:9px;white-space:pre-wrap}
.palanswer .pcite{color:var(--dev);font-size:12.5px}
.pref{flex:none;font-family:var(--mono);font-size:12px;color:var(--dev);font-weight:800}
.pchipro{display:inline-block;border:1px solid var(--line);border-radius:99px;
  padding:1px 8px;font-size:12px;margin-right:4px;color:var(--ink-soft)}
.palfollow{padding:8px 2px 2px}
.palfollow .fld{font-size:14.5px}

/* 오피스 첫 문장 아래 접힌 규칙 — 첫날은 한 줄, 궁금해지면 펼친다 */
.memofold{margin-top:6px;font-size:13.5px;color:var(--ink-faint);line-height:1.7}
.memofold summary{cursor:pointer;font-weight:700;color:var(--ink-soft);width:fit-content}
.memofold[open] summary{margin-bottom:3px}

/* ── 🛠️ 시스템 (관리자) ── */
/* 줄바꿈을 허용한다 — 계정 줄에 세션 수·입장 코드·⋯ 메뉴까지 붙으면서 한 줄에 안 들어간다.
   안 감싸면 좁은 화면에서 **버튼이 잘려 안 보인다**(페이지는 안 넘치니 아무도 모른다). */
.sysrow{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line2);
  font-size:14px;flex-wrap:wrap}
.sysrow:last-of-type{border-bottom:0}
.sysrow b{flex:none}
/* 비활성은 **글자만** 흐리게. 줄 전체에 opacity 를 걸면 ⋯ 와 그 안의 「▶ 다시 활성화」까지
   반투명해진다 — 그 줄에서 가장 눌러야 할 버튼이 가장 안 보이게 된다. opacity 는 상속이
   아니라 그룹째 합성이라 자식이 1 로 되돌릴 수도 없다. 그래서 애초에 안 건다. */
.sysrow.off > b,.sysrow.off > .sysrole,.sysrow.off > .sysmeta,.sysrow.off > .adminbadge{opacity:.5}
.sysrow.off b{text-decoration:line-through}
.sysmeta{color:var(--ink-faint);font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sysmeta:nth-of-type(2){margin-left:auto;flex:none}
.adminbadge{flex:none;font-size:11px;font-weight:800;color:var(--dev);
  border:1px solid color-mix(in srgb,var(--dev) 45%,var(--line));border-radius:99px;
  padding:1px 7px;background:color-mix(in srgb,var(--dev) 7%,var(--panel))}

/* 🔗 디스코드 로그인 — **배지지 버튼이 아니다.** 바로 옆에 [🎟 입장 코드 발급] 이 서므로
   그 둘이 헷갈리면 안 된다. 그래서 모양은 위 .adminbadge 와 같은 계열로 두고(알약 ·
   작은 글자 · 테두리 + 옅은 바탕) **색만 디스코드 것을 빌린다** — 눌러야 하는 면(.dscbtn)은
   같은 색을 꽉 채워 쓴다. 채움과 테두리가 「누를 것 / 읽을 것」을 가른다.

   하드코딩된 hex 는 이 파일에서 예외다(다크모드가 토큰 교체 구조라 원칙은 금지).
   브랜드색은 테마를 따라가면 **안 되는** 값이라 .btn.dsc·.dscbtn 과 같은 예외로 둔다.
   대신 바탕은 color-mix 로 --panel 에 섞어 밝기만 테마를 따르게 한다. */
/* 밝은 바탕에서는 원색 블러플(#5865F2)이 11px 글자로 대비 4.1 밖에 안 나온다 —
   디스코드가 자기 진한 톤으로 쓰는 #4752C4(이미 .dscbtn:hover 가 쓰는 값)로 내린다. */
.sysdc{--dcb:#4752C4;flex:none;display:inline-flex;align-items:center;gap:5px;cursor:default;
  font-size:11px;font-weight:800;color:var(--dcb);border-radius:99px;padding:2px 8px;
  border:1px solid color-mix(in srgb,var(--dcb) 45%,var(--line));
  background:color-mix(in srgb,var(--dcb) 9%,var(--panel))}
.sysdc .dsci{flex:none;width:12px;height:12px;fill:currentColor}
/* 어두운 바탕에서 블러플 원색(#5865F2)은 11px 글자로 읽기엔 어둡다 — 흰색을 섞어 띄운다.
   색상(hue)은 그대로라 디스코드로 읽히는 것은 유지된다.
   이 앱의 다크모드는 prefers-color-scheme 하나뿐이다 — 없는 토글(data-theme)을 끌어들이지 않는다. */
@media (prefers-color-scheme:dark){ .sysdc{--dcb:#8B93F8} }

/* 내 줄의 ⋯ 는 **자리만 지킨다.** 흐림은 .mini:disabled 의 값을 그대로 쓴다 —
   앱의 다른 비활성 버튼과 다른 숫자를 새로 만들 이유가 없다.
   커서만 바꾼다: not-allowed 는 「잘못 눌렀다」로 읽히는데, 여기는 잘못이 아니라
   나에게는 할 일이 없는 것뿐이다. */
.rowmore .more:disabled{cursor:default}
.sysrole{flex:none;font-size:12px;font-weight:800;color:var(--ink-faint);border:1px solid var(--line);border-radius:99px;padding:2px 8px}

/* 섹션 탭 — 지표 스트립 아래, 패널 위. 스트립은 탭 밖에 남는다 */
.systabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.systab{flex:1;min-width:150px;text-align:left;border:1.5px solid var(--line);
  background:var(--panel);border-radius:12px;padding:9px 13px;line-height:1.35}
.systab b{display:block;font-size:14.5px;font-weight:800;color:var(--ink-soft)}
.systab span{font-size:12px;color:var(--ink-faint)}
.systab.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 7%,var(--panel))}
.systab.on b{color:var(--dev)}

/* 사람 한 목록 — 세그먼트 + 즉시 필터 */
.segbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.segbtn{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;
  padding:5px 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.segbtn.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.segbtn i{font-style:normal;opacity:.6;margin-left:3px}
/* 찾기칸은 옆 세그먼트 버튼과 **같은 줄에 앉아야 한다.** .fld 는 로그인·설정 폼용이라
   아래여백 9px 을 달고 다니는데, align-items:center 인 줄에서 그 여백은 칸을 위로 밀어
   혼자 어긋나 보인다. 모서리도 알약(segbtn)과 11px 이 섞이면 크기가 달라 보인다. */
.segq{flex:1;min-width:120px;padding:5px 10px;font-size:14px;margin-bottom:0;
  border-width:1.5px;border-radius:99px}
.segnote{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin-bottom:9px;
  padding-bottom:8px;border-bottom:1px dashed var(--line)}
.invitetog{margin-top:10px}

/* 위험한 것은 ⋯ 뒤로 — 코드 발급(일상)과 권한 이양(위험)이 같은 줄에 있으면 손이 미끄러진다 */
.rowmore{position:relative;flex:none}
.more{padding:3px 8px;font-size:15px;letter-spacing:1px}
.moremenu{position:absolute;right:0;top:calc(100% + 4px);z-index:50;width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column;gap:2px;
  animation:kSlideUp var(--t-fast) var(--ease)}
.moremenu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:7px 9px;
  font-size:14px;font-weight:700;color:var(--ink)}
.moremenu button:hover{background:var(--panel2)}
.moremenu button.danger{color:var(--red)}
.moremenu button span{font-size:12px;font-weight:500;color:var(--ink-faint);line-height:1.4}

.sysinvite{display:flex;gap:6px;margin-top:10px;align-items:center;flex-wrap:wrap}
/* 여기도 같은 이유 — .fld 기본값(글자 16 · 패딩 11 · 모서리 11 · 아래여백 9)을 그대로 두면
   옆의 [추가] 버튼보다 한 뼘 크고 한 줄 위로 떠서, 한 행이 아니라 두 층처럼 보인다. */
.sysinvite .fld{flex:1;min-width:0;margin-bottom:0;padding:5px 10px;font-size:14px;
  border-width:1.5px;border-radius:9px}
.syscode{font-family:var(--mono);font-weight:800;font-size:15px;color:var(--dev);flex:none}
.syscode i{font-style:normal;font-size:11.5px;color:var(--ink-faint);font-weight:600}
/* 🎟 입장 코드는 **이 순간에만** 보인다(고정 코드라 서버가 다시 안 알려준다) — 놓치지 않게 세운다 */
.syscode.big{font-size:18px;letter-spacing:.06em;color:var(--won);
  background:color-mix(in srgb,var(--won) 10%,transparent);border-radius:8px;padding:3px 10px}
/* 좁은 화면에서는 안내 문구가 줄 밖으로 나간다 — 코드 자체가 안 보이면 이 자리의 뜻이 없다.
   flex:none 을 풀고 설명을 아랫줄로 내린다(코드는 한 번만 보이므로 잘리면 재발급뿐이다) */
@media(max-width:700px){
  .syscode{flex:1 1 100%;min-width:0}
  .syscode i{display:block;margin-top:2px}
}
.sysset{margin-bottom:12px}
.sysset .lb{display:block;font-size:13.5px;font-weight:800;margin-bottom:5px}
.sysset .fld{width:140px;display:inline-block;margin-right:6px}
.sysset .hint{font-size:12.5px;color:var(--ink-faint);margin-top:4px;line-height:1.5}

/* ═══ 🛠️ 시스템 재설계 (2026-08-07 · docs/11) ═════════════════════════════
 *
 * 접두를 `sys` 로 붙인 이유: style.css 는 **전역 단일 파일**이고, 짧은 이름은 이미
 * 여러 번 남의 규칙에 걸렸다(`.chip` 은 이 파일에서만 다섯 군데가 각자 정의한다).
 * 새 이름은 grep 한 번으로 전부 잡히는 형태여야 한다.
 *
 * 새 색 토큰 0개 — 다크모드가 토큰 교체 구조라 리터럴을 넣는 순간 한쪽에서 깨진다.
 */

/* ── 상태 배너 — **이상이 있을 때만** 나타난다.
      늘 떠 있는 초록 「정상」은 며칠이면 안 보이게 되고, 그러면 붉어진 날에도 안 보인다 ── */
.sysalert{display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:11px;margin-bottom:12px;
  background:color-mix(in srgb,var(--red) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--red) 32%,var(--line));font-size:14px;font-weight:700}
.sysalert b{color:var(--red)}
.sysalert .dim{color:var(--ink-soft);font-weight:500}

.mstrip.six{grid-template-columns:repeat(6,1fr)}
.mstrip.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){.mstrip.six,.mstrip.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:840px){.mstrip.six,.mstrip.five{grid-template-columns:repeat(2,1fr)}}
.mtile.bad{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.mtile.bad .mv{color:var(--red)}
.mtile.warn .mv{color:var(--warn)}
.badred{color:var(--red)}

/* ── ⓘ 접히는 설명 — 긴 hint 는 라벨 옆으로 접는다. 기본 접힘, 편 것은 세션 동안 유지 ── */
.sysiq{width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  font-size:10.5px;font-weight:800;color:var(--ink-faint);line-height:1;flex:none;padding:0}
.sysiq:hover{color:var(--dev);border-color:var(--dev)}
.sysib{font-size:12.5px;color:var(--ink-soft);background:var(--panel2);border-left:2px solid var(--line);
  padding:7px 11px;border-radius:0 8px 8px 0;margin:6px 0 2px;line-height:1.6}
.sysib code{font-family:var(--mono);font-size:11.5px;background:var(--panel);padding:0 4px;border-radius:4px}

/* ── 권한 칩 — 체크박스 나열보다 「누가 켜져 있나」가 한눈에 보인다 ── */
.syschips{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0 4px;align-items:center}
.syschip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:4px 11px;
  font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.syschip i{font-style:normal;font-size:11px;color:var(--ink-faint);margin-left:4px}
.syschip.on{background:var(--dev);border-color:var(--dev);color:#fff}
.syschip.on i{color:rgba(255,255,255,.72)}
.sysrowend{display:flex;align-items:center;gap:9px;margin-top:4px}
.pmeta{font-size:11.5px;color:var(--ink-faint)}
.pmeta b{color:var(--ink-soft)}
.sysfoot{font-size:12.5px;color:var(--ink-faint);margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.linkish{background:none;border:0;padding:0;color:var(--dev);font-weight:700;text-decoration:underline;font-size:inherit}

/* ── 값 한 줄 — 라벨 · 입력 · 저장 · 마지막 변경이 한 행에 ── */
.sysvrow{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
/* 🧩 모듈 판 (2026-08-26 사용자) — 스위치가 먼저, 이름과 설명이 그 옆에.
   운영 기준 줄(.sysvrow)과 달리 **무엇인지 모를 수 있는 것들**이라 한 줄 설명이 붙는다 */
.sysmods{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sysmod{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--line2);
  border-radius:10px;background:var(--panel)}
.sysmod.off{background:var(--panel2);opacity:.72}
.sysmod .ml{display:flex;flex-direction:column;min-width:0;flex:1}
.sysmod .ml b{font-size:13.5px;font-weight:700}
.sysmod .ml span{font-size:11.5px;color:var(--ink-faint)}
.sysnote{margin-top:8px;font-size:12px;color:var(--ink-faint);line-height:1.6}
.sysvrow:first-of-type{border-top:0}
.sysvrow .lb{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px;min-width:200px}
.sysvrow .fld.num{width:130px;font-family:var(--mono);text-align:right}
.sysro{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink-soft);
  background:var(--panel2);padding:4px 11px;border-radius:7px;border:1px dashed var(--line)}
.warnv{color:var(--warn)}
.wonv{color:var(--won)}

/* 스위치 · 3단 세그 — 켬/끔에 입력칸을 주면 「1」과 「true」 중 뭘 넣나로 사람을 세운다 */
.syssw{width:42px;height:23px;border-radius:99px;background:var(--line);border:0;position:relative;flex:none}
.syssw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .16s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.syssw.on{background:var(--won)}
.syssw.on::after{left:21.5px}
.sysseg3{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sysseg3 button{background:var(--panel2);border:0;padding:6px 13px;font-size:12.5px;font-weight:600;
  border-right:1px solid var(--line);color:var(--ink-soft)}
.sysseg3 button:last-child{border-right:0}
.sysseg3 button.on{background:var(--ink);color:var(--panel)}

/* ── 이사 안내 — 「찾던 게 여기 없다」를 없애는 최소 비용 ── */
.sysmoved{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;margin-top:14px;
  background:var(--panel2);border:1px dashed var(--line);font-size:13px;color:var(--ink-soft);line-height:1.6}
.sysmoved b{color:var(--ink)}

/* ── 계정 줄의 인라인 수정 ── */
.sysedit{display:flex;gap:6px;align-items:center;padding:8px 2px 12px;flex-wrap:wrap}
.sysedit .fld{width:200px}

/* ── 📜 로그 ── */
.syslogbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.syslogsrc{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.syslogsrc button{background:var(--panel2);border:0;padding:7px 14px;font-size:13px;font-weight:700;
  border-right:1px solid var(--line);color:var(--ink-soft)}
.syslogsrc button:last-child{border-right:0}
.syslogsrc button.on{background:var(--dev);color:#fff}
.syslogsrc button i{font-style:normal;font-size:11px;opacity:.75;margin-left:5px}
/* 찾기칸 — .fld 는 로그인·설정 폼용 큰 입력칸이라(패딩 11px·글자 16px·모서리 11px·아래여백 9px)
   버튼 도구줄에 그대로 놓으면 혼자 크고 둥글고 한 줄 위로 뜬다. 옆 세그먼트에 맞춘다. */
.syslogbar .fld{width:190px;flex:none;margin-bottom:0;padding:7px 11px;font-size:13px;
  border-width:1px;border-radius:8px}
.syslogtbl{border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.syslogtbl .lgh,.syslogtbl .lgr{display:grid;grid-template-columns:110px 86px 1fr 120px;gap:10px;
  padding:7px 11px;align-items:center}
.syslogtbl .lgh{background:var(--panel2);font-size:11px;font-weight:800;color:var(--ink-faint)}
.syslogtbl .lgr{border-top:1px solid var(--line2);font-size:12.5px}
.syslogtbl .lgr:hover{background:var(--panel2)}
.syslogtbl .t{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.syslogtbl .who{font-weight:700}
.syslogtbl .tgt{font-size:11.5px;color:var(--ink-faint);text-align:right}
.syslogtbl .dim{color:var(--ink-faint)}
.syslogtbl code{font-family:var(--mono);font-size:11.5px;background:var(--panel2);padding:0 4px;border-radius:4px}
/* 붉은 줄 = 사람에 대한 권한이 움직인 기록. 이 한 가지를 눈으로 세는 것이 이 표의 목적이다 */
.syslogtbl .lgr.risk{background:color-mix(in srgb,var(--red) 6%,transparent)}
.syslogtbl .lgr.risk:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
@media(max-width:760px){.syslogtbl .lgh{display:none}
  .syslogtbl .lgr{grid-template-columns:1fr;gap:2px}
  .syslogtbl .tgt{text-align:left}}
.sysraw{font-family:var(--mono);font-size:12px;line-height:1.75;background:var(--panel2);
  border:1px solid var(--line2);border-radius:9px;padding:10px 12px;max-height:60vh;overflow:auto;
  white-space:pre-wrap;word-break:break-all}
.sysraw .t{color:var(--ink-faint)}
.sysraw .dim{color:var(--ink-faint)}
.syslv{font-family:var(--mono);font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:5px}
.syslv.err{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.syslv.wrn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.syslv.inf{background:var(--panel);color:var(--ink-faint);border:1px solid var(--line2)}
.syslfoot{font-size:11.5px;color:var(--ink-faint);margin-top:9px;display:flex;gap:9px;align-items:center;
  flex-wrap:wrap;line-height:1.6}
.syslfoot.bad{color:var(--red)}

/* ── 🔧 정비 ── */
.sysops{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.sysops:first-of-type{border-top:0}
.sysops .t{min-width:190px;font-size:13.5px;font-weight:700}
.sysops .d{font-size:12.5px;color:var(--ink-faint);flex:1;min-width:200px}
/* 버튼이 여럿인 줄 — 좁아져도 셋이 함께 접힌다(하나만 다음 줄로 떨어지지 않게) */
.sysopsbtns{display:flex;gap:6px;flex:none}

/* ── ? 도움말 섹션 아코디언 (탭이 여러 개인 화면용) ── */
.hsec{border:1px solid var(--line2);border-radius:10px;margin-bottom:8px;overflow:hidden}
.hsh{width:100%;background:var(--panel2);border:0;text-align:left;padding:10px 13px;font-size:13.5px;
  font-weight:800;display:flex;align-items:center;gap:8px;color:inherit}
.hsh .ar{color:var(--ink-faint);font-size:12px}
.hsb{padding:8px 13px 12px}
.hmap{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px;padding:6px 0 2px}
.hmap b{white-space:nowrap}
.hmap span{color:var(--ink-faint)}
@media(max-width:600px){.hmap{grid-template-columns:1fr;gap:1px 0}
  .hmap span{margin-bottom:6px}}

/* ── 회의 상태 바 (02 §4-3-1 ④) ──
   회의와 디브리핑은 같은 방·같은 화면·같은 사람이라, 배지 하나 바꾸는 것으로는
   전환이 안 느껴진다. **색·문구·타이머·버튼을 통째로** 바꾼다. */
.meetbar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:79;
  display:flex;align-items:center;gap:9px;padding:8px 11px 8px 13px;
  width:min(660px,calc(100vw - 24px));border-radius:13px;box-shadow:var(--shadow);
  border:1.5px solid var(--line);background:var(--panel)}
.meetbar .mbt{font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meetbar .mbst{font-size:13px;font-weight:700;flex:none}
.meetbar .mbtime{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:800;
  flex:none;font-variant-numeric:tabular-nums}
.meetbar .mbdot{width:9px;height:9px;border-radius:50%;flex:none}
.meetbar .mini{flex:none}
/* 회의 바의 마이크 칸 — 레일과 같은 뜻, 같은 색. 음소거일 때만 도드라진다 */
.mbmic{font-size:12.5px;font-weight:800;border-radius:99px;padding:3px 9px;flex:none;
  text-decoration:none;background:color-mix(in srgb,var(--ink) 7%,var(--panel));color:var(--ink-faint)}
.mbmic.muted{background:color-mix(in srgb,var(--warn) 15%,var(--panel));
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line))}

/* 진행 중 — 빨강. 「지금 녹음되고 있다」가 한눈에 */
.meetbar.live{border-color:color-mix(in srgb,var(--red) 55%,var(--line));
  background:color-mix(in srgb,var(--red) 6%,var(--panel))}
.meetbar.live .mbdot{background:var(--red);animation:mbpulse 1.6s infinite}
.meetbar.live .mbst{color:var(--red)}
.meetbar.live .mbtime.over{color:var(--red)}
@keyframes mbpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* 디브리핑 — 회색. 빨강이 사라지는 것 자체가 「녹음이 끝났다」는 신호다 */
.mini.danger{border-color:color-mix(in srgb,var(--red) 45%,var(--line));color:var(--red)}
/* 음소거 상태의 토글 — 「풀어야 할 것」이 있음을 색으로도 말한다 */
.mini.micoff{border-color:color-mix(in srgb,var(--warn) 50%,var(--line));
  color:var(--warn);font-weight:800}

/* T-5 연장 질의 — 바 아래 한 줄로 붙는다. 모달로 가리면 회의를 방해한다 */
.mbask{flex-basis:100%;display:flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--ink-soft);padding-top:7px;margin-top:2px;border-top:1px dashed var(--line)}
.meetbar{flex-wrap:wrap}

/* 전환 순간에만 뜨는 안내. 3.2초 뒤 스스로 사라진다 */
.mswitch{position:fixed;inset:0;z-index:93;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,22,.55);pointer-events:none;padding-left:var(--railw)}
.mswbox{background:var(--panel);border-radius:18px;padding:26px 30px;text-align:center;
  box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 40px))}
.mswbox .mswi{font-size:34px;margin-bottom:8px}
.mswbox b{display:block;font-size:18px;margin-bottom:7px}
.mswbox span{font-size:14px;color:var(--ink-soft);line-height:1.65}

/* ── 회의 중 공유 ──
   말은 STT 가 받아 적지만 **링크와 파일은 말로 옮길 수 없다.** 여기 올린 것은
   별도 저장소가 아니라 회의록 타임라인에 시각과 함께 들어간다. */
/* 회의 채팅의 속살 — 컨테이너는 부유 창(.mchat)에서 stage 우측 열(.livechat)로 옮겼고,
   안쪽(.mchead·.mclog·.mcbar·.mcrow)은 자리를 옮겨도 그대로 쓴다 */
.mchead{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);
  font-size:14px;font-weight:800}
.mchead span{font-size:12px;font-weight:600;color:var(--ink-faint);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mclog{flex:1;overflow-y:auto;padding:9px 12px;min-height:70px}
.mcrow{font-size:13.5px;line-height:1.6;margin-bottom:7px;word-break:break-word}
.mcrow b{color:var(--ink);margin-right:5px}
.mcrow span{color:var(--ink-soft)}
.mcf{display:block;margin-top:3px;font-size:13px;color:var(--dev);text-decoration:none;font-weight:700}
.mcbar{display:flex;align-items:center;gap:6px;padding:9px 10px;border-top:1px solid var(--line)}
.mcbar .fld{flex:1;padding:7px 10px;font-size:14px}
.mcfile{flex:none;cursor:pointer;font-size:17px;padding:0 2px}

.gmodal{position:fixed;inset:0;z-index:87;background:rgba(10,14,22,.5);
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 20px 24px calc(20px + var(--railw))}
.gmbox{width:min(1160px,100%);max-height:calc(var(--vh100) - 48px);overflow-y:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:18px 18px 20px;box-shadow:var(--shadow)}
.gmbox .memo{margin-bottom:12px}




/* ☕ 휴게실 — 대화 줄 오른쪽 끝의 작은 카드 (회의 카드 줄에서 옮겨 왔다) */
.loungec{display:flex;align-items:center;gap:9px;margin-left:auto;
  border:1px solid color-mix(in srgb,var(--won) 35%,var(--line));border-radius:11px;
  background:color-mix(in srgb,var(--won) 5%,var(--panel2));padding:5px 8px 5px 12px}
.loungec .rt{font-weight:800;font-size:13.5px;white-space:nowrap}

/* 차단 상태 — 잠긴 버튼 대신 「오면 알림」. 버튼이 약속을 직접 지킨다 */
.knock.bell{border:1px solid var(--line);background:var(--panel);border-radius:8px;
  padding:5px 10px;font-size:12.5px;font-weight:700;color:var(--ink-soft);flex:none}
.knock.bell.onn{border-color:color-mix(in srgb,var(--won) 45%,var(--line));
  color:var(--won);background:color-mix(in srgb,var(--won) 7%,var(--panel))}
.room{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:10px 11px;min-height:104px;
  display:flex;flex-direction:column}
/* 방은 만들 때 생긴다 — 빈 회의실을 기다릴 필요가 없다는 걸 화면으로 말한다 (02 §4-1) */
.room.newroom{background:none;border-style:dashed;border-color:var(--line)}
.room.newroom .rt{color:var(--ink-faint)}
.room .rbtn{margin-left:auto}
.occ{display:flex;align-items:center}
.occ .oa{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;
  font-weight:800;border:2px solid var(--panel2);margin-left:-7px;
  background:color-mix(in srgb,var(--oc) 18%,var(--panel));color:var(--oc)}
.occ .oa:first-child{margin-left:0}

/* 대화방 — 방보다 가벼운 버블. 노크로 생기고 1명이 되면 사라지는 것이라 방과 다르게 그린다 */
.bubble{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--won) 8%,var(--panel));
  border:1.5px solid color-mix(in srgb,var(--won) 45%,var(--line));border-radius:99px;padding:6px 9px 6px 8px}
.bubble.mine{border-color:var(--won);box-shadow:0 0 0 3px color-mix(in srgb,var(--won) 14%,transparent)}
.bubble .occ .oa{border-color:var(--panel)}
.bubble .bl{font-size:13.5px;font-weight:800;line-height:1.3}
.bubble .bl span{display:block;font-weight:600;font-size:12px;color:var(--ink-faint)}
.bubble .jbtn{border-radius:99px}

.feed-item{display:flex;gap:8px;font-size:13.5px;color:var(--ink-soft);padding:6px 2px;
  border-bottom:1px dashed var(--line2);align-items:baseline}
.feed-item:last-child{border-bottom:0}
.feed-item:hover{cursor:pointer;color:var(--ink)}
.feed-item b{color:var(--ink)}
.feed-item div{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-item .tm{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}
.room.lounge{border-color:color-mix(in srgb,var(--won) 35%,var(--line));background:color-mix(in srgb,var(--won) 5%,var(--panel2))}
/* 아무도 없는 휴게실.
   전에는 `opacity:.5` 로 카드를 통째로 죽였다. 그런데 흐린 것은 「지금 못 쓴다」로 읽혀서
   정작 들어가야 할 사람이 들어가기를 망설인다 — 상시 공간에는 정확히 반대 신호다.
   그래서 글자는 또렷하게 두고, **테두리만 점선**으로 「아직 아무도 없음」을 말한다.
   마우스를 올리면 실선으로 닫히며 색이 든다 — 들어갈 수 있는 곳이라는 응답. */
.room.lounge.vacant{border-style:dashed}
.room.lounge.vacant .rs{color:var(--ink-soft)}
.room.lounge.vacant:hover{border-style:solid;
  border-color:color-mix(in srgb,var(--won) 55%,var(--line));
  background:color-mix(in srgb,var(--won) 10%,var(--panel2))}
/* 회의실 — 오피스에서 지금 들어갈 수 있는 회의. 진행 중은 붉게 띄운다 */
.room.meet{border-color:color-mix(in srgb,var(--prod) 32%,var(--line));
  background:color-mix(in srgb,var(--prod) 5%,var(--panel2))}
.room.meet.livem{border-color:color-mix(in srgb,var(--red) 45%,var(--line));
  background:color-mix(in srgb,var(--red) 6%,var(--panel2))}
.room.meet .rf{gap:5px;flex-wrap:wrap}


.room .rt{font-weight:800;font-size:14.5px}
.room .rs{font-size:12.5px;color:var(--ink-faint);margin-top:2px;line-height:1.5}
.room .rf{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px}
.rnote{font-size:12.5px;color:var(--ink-faint)}
.occ{display:flex}
.occ .oa{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:800;border:2px solid var(--panel2);margin-left:-7px;
  background:color-mix(in srgb,var(--oc) 20%,var(--panel));color:var(--oc)}
.occ .oa:first-child{margin-left:0}

/* 회의 카드의 얼굴 묶음 — **무엇의 명단인지**가 얼굴 옆에 쓰여 있어야 한다.
   같은 아바타가 대화방에서는 「지금 여기 있는 사람」, 회의 시작 전에는 「아직 안 온 사람」이라
   그림만으로는 정반대를 같게 그리게 된다 */
.occwrap{display:inline-flex;align-items:center;gap:6px}
.occwrap .olab{font-size:11.5px;font-weight:800;border-radius:99px;padding:2px 8px;flex:none}
.occwrap.will .olab{background:color-mix(in srgb,var(--ink) 8%,var(--panel));color:var(--ink-faint)}
.occwrap.now  .olab{background:color-mix(in srgb,var(--won) 15%,var(--panel));color:var(--won)}
/* 예정 = 테두리만. 아직 자리에 없다는 뜻이고, 색은 남겨 둬서 누구인지는 계속 읽힌다 */
.occwrap.will .oa{background:var(--panel);border-style:dashed;
  border-color:color-mix(in srgb,var(--oc) 50%,var(--line2));opacity:.8}

.mini{border:1.5px solid var(--line);background:var(--panel);border-radius:9px;padding:5px 10px;
  font-size:13.5px;font-weight:800;flex:none}
.mini:hover:not(:disabled){border-color:var(--won);color:var(--won)}
.mini:disabled{opacity:.35;cursor:not-allowed}
.mini.pri{background:var(--won);border-color:var(--won);color:#fff}
.mini.pri:hover{color:#fff}

/* 디스코드로 가는 버튼 — 브랜드 색(#5865F2)을 그대로 쓴다.
   「어디로 가는 버튼인지」를 글자보다 색이 먼저 말해 주므로 이름은 한 단어면 된다.

   **`.mini` 뒤에 와야 한다.** 앞에 두면 같은 특이도(클래스 1개)라 뒤에 오는
   `.mini{background:var(--panel)}` 와 `.mini:hover{border-color:var(--won);color:var(--won)}`
   가 이겨서 — 평소엔 흰 버튼, 호버하면 보라 바탕에 **초록 글씨**가 된다(실제로 그랬다).
   오늘 `.wgate` 에서 똑같이 밟은 함정이다: 순서가 곧 우선순위다. */
.dscbtn{display:inline-flex;align-items:center;gap:5px;
  background:#5865F2;border-color:#5865F2;color:#fff}
/* 호버·포커스에서도 글자는 흰색을 지킨다 — .mini:hover 의 초록이 여기로 새지 않게 */
.dscbtn:hover:not(:disabled),.dscbtn:focus-visible{
  background:#4752C4;border-color:#4752C4;color:#fff}
.dscbtn .dsci{flex:none;width:14px;height:14px;fill:currentColor}

/* ── 채팅 ── */
/* 채널 목록은 채팅 화면 안에 있다 (목업 v2) — 레일은 어디로 갈지, 여기는 어느 채널인지 */
/* 채팅도 다른 화면과 같은 범위 안에 산다 — 혼자만 화면 끝까지 차면 메뉴를 옮길 때마다
   여백이 널뛰고, 그 자체가 "여긴 다른 앱인가"로 읽힌다.
   대신 남는 가로 공간은 채널 리스트가 가져간다(채널이 많아질수록 이름이 길어진다). */
/*
 * 채팅 판 짜기 — 목록은 레일에 붙고, 상자는 다른 화면과 같은 높이에서 열린다.
 *
 *   ┌ 레일 ┬ 채널 목록 ┬ 머리글(#채널 · 주제) ─────┐   ← 다른 화면의 .shead 자리
 *   │      │           ├ ╭ 대화 ╮ ╭ 스레드 ╮      │   ← 다른 화면의 .panel 이 열리는 높이
 *
 * 가로 가운데 정렬(max-width + margin auto)을 걷어낸다 — 그게 목록을 레일에서 떼어
 * 놓던 것이다. 목록은 레일의 연장처럼 붙고, 두 줄(머리글·본문)을 모두 지난다.
 */
/*
 * 채팅 격자 — **회의기록과 같은 문법** (2026-08-07 목업 v1): .shead 는 화면(v-chat 섹션)이
 * 갖고, 여기는 「채널 패널 + 대화 패널 (+ 스레드)」만 남는다.
 * 예전의 자체 여백(padding 22px…0)·머리글 행·min-height:99px 보정이 전부 사라진다 —
 * 수치로 흉내내던 선 맞추기를 문법이 대신한다.
 */
.chat{display:grid;grid-template-columns:264px minmax(0,1fr) 320px;
  grid-template-rows:minmax(0,1fr);flex:1;min-height:0;width:100%;column-gap:0}
.chat.nothread{grid-template-columns:264px minmax(0,1fr)}
.chat .ch-list{grid-column:1;margin-right:12px}
.chat .cmain{grid-column:2}
.chat .thread{grid-column:3}
.chat > *{min-height:0}
/* 채널 패널 — 배경 위에 붕 떠 있던 목록이 회의 목록 패널(「🎙 끝난 회의」)과 같은 옷을 입는다 */
.ch-list{display:flex;flex-direction:column;padding:0}
.ch-list .ptitle{padding:15px 16px 0;margin-bottom:8px;flex:none}
.chscroll{overflow-y:auto;padding:0 10px 12px;min-height:0}
/* 대화 판 — 오피스·업무보드의 .panel 과 같은 테두리·둥글기 */
.chat .cmain{background:var(--panel);border:1px solid var(--line);border-radius:14px}
/* 스레드를 열면 오른쪽에 이어 붙는다 — 한 자리에서 갈라진 이야기라 상자도 이어진다 */
.chat:not(.nothread) .cmain{border-radius:14px 0 0 14px;border-right:0}
.chat .thread{background:var(--panel);border:1px solid var(--line);border-radius:0 14px 14px 0}
.chscroll .grp{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint);padding:10px 8px 5px}
.chscroll .grp:first-child{padding-top:2px}
.ch{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;border-radius:8px;
  padding:6px 9px;font-size:14.5px;font-weight:600;color:var(--ink-soft);text-align:left}
.ch:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
/*
 * 💬 DM 순서 바꾸기 (2026-08-27) — 지나가는 줄이 **미끄러져 비켜난다**.
 * 끌리는 줄만 transition 을 끈다: 손을 따라와야 하는 것에 시간이 붙으면 늦게 따라온다.
 * 끄는 손잡이는 줄 전체다 — 7px 짜리 표를 정확히 집으라고 할 수 없다.
 */
.ch[data-dmdrag]{transition:transform .16s var(--ease);cursor:grab;touch-action:pan-y}
.ch.dmdrag{transition:none;cursor:grabbing;position:relative;z-index:4;
  background:var(--panel);border-radius:8px;box-shadow:0 8px 22px rgba(20,28,46,.22)}
body.dmdragging{user-select:none}
body.dmdragging .ch:hover{background:none}   /* 비켜난 줄에 손이 스쳐도 반응하지 않는다 */
body.dmdragging .ch.dmdrag{background:var(--panel)}
.ch i{width:7px;height:7px;border-radius:2px;background:var(--c,var(--ink-faint));flex:none}
/* 사람은 동그라미 — 색이 「누구」가 아니라 「지금 상태」다 (2026-08-27 사용자).
   접속 안 함은 속을 비운다: 목록에서 점을 지우면 이름이 밀려 줄이 들쭉날쭉해진다 */
.ch i.dmst{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--ink-faint))}
.ch i.dmst.stoff{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-faint);opacity:.6}
.chchip i.dmst{border-radius:50%;background:var(--sc,var(--ink-faint))}
.chchip i.dmst.stoff{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-faint);opacity:.6}
.ch.on{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-weight:800;
  padding:5px 8px}
.ch .n{margin-left:auto;background:var(--ink-faint);color:var(--panel);font-size:11.5px;font-weight:800;
  border-radius:99px;padding:0 6px;font-family:var(--mono)}
.ch .n.at{background:var(--red);color:#fff}

/* 모바일 채팅 규칙은 아래 전역 860 블록에 산다 — 채팅만 820이던 시절,
   821~860px 에서 셸은 모바일인데 채팅 격자만 데스크톱이라 겹쳤다. 문턱은 하나여야 한다 */
.cmain{display:flex;flex-direction:column;min-width:0;min-height:0}
/* 대화 패널 머리글 — 채널명·주제·실제 인원. 주제가 길어져도 패널 시작선이 안 무너진다 */
.chhead{display:flex;align-items:baseline;gap:9px;padding:15px 18px 10px;
  border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap;min-width:0}
.chhead h2{font-size:17px;font-weight:800}
/* DM 상대의 상태 — 이름 옆의 작은 박스. 색은 상태가 정하고 옷은 하나다 */
.chhead .chst{flex:none;align-self:center;font-size:12px;font-weight:700;line-height:1.5;
  padding:1px 9px;border-radius:99px;white-space:nowrap;color:var(--sc,var(--ink-faint));
  background:color-mix(in srgb,var(--sc,var(--ink-faint)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,var(--ink-faint)) 30%,var(--line))}
.chhead .topic{font-size:13.5px;color:var(--ink-faint);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.chhead .topic:empty{display:none}
/* margin-left:auto 는 걷었다 — 그게 「읽음이 채널마다 딴 데」의 원인이었다(주제 유무에
   따라 auto 마진 시작점이 밀린다). 경계는 .sp 하나가 못 박는다 (2026-08-21) */
.chhead .mem{font-size:13px;color:var(--ink-faint);font-family:var(--mono);font-weight:600;flex:none}
/* 읽음 수는 머리에서 걷고 ⋮ 메뉴가 품는다 (2026-08-21 사용자) — 요소는 숫자를 계속
   들고 있어야 한다: updateReadCount 가 여기 쓰고 메뉴가 여기서 읽는다 */
.chhead #chMem{display:none}
.chhead .sp{flex:1}
.chhead .topic{flex:0 1 auto}
/* 모바일 채널 칩 — 데스크톱에선 숨는다 (목록 패널이 있다) */
.chchips{display:none}
.chchip{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--panel);border-radius:99px;padding:4px 11px;font-size:13.5px;font-weight:700;
  color:var(--ink-soft)}
.chchip i{width:6px;height:6px;border-radius:2px;background:var(--c,var(--ink-faint))}
.chchip.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.chchip .n{background:var(--ink-faint);color:var(--panel);font-size:11px;font-weight:800;
  border-radius:99px;padding:0 5px;font-family:var(--mono)}
.chchip .n.at{background:var(--red);color:#fff}
.msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:1px;min-height:0}
/* 「이 채팅이 카드가 되었습니다」 — 스타일이 없어 브라우저 기본 버튼이 그대로 나왔다.
   카드 쪽 「원본 보기」(.csrc)와 같은 옷을 입힌다. 채팅↔카드를 잇는 두 줄이라
   같은 색(--prod)·같은 점선으로 마주 보게 두면 한 쌍이라는 것이 읽힌다.
   줄 전체가 버튼이다 — 작은 글씨 하나만 눌리는 것보다 손이 덜 든다. */
.promoted{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-top:6px;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;line-height:1.5;
  background:color-mix(in srgb,var(--prod) 7%,var(--panel));
  border:1px dashed color-mix(in srgb,var(--prod) 35%,var(--line));
  border-radius:10px;padding:7px 11px;
  transition:background .13s var(--ease),border-color .13s var(--ease)}
.promoted:hover{background:color-mix(in srgb,var(--prod) 13%,var(--panel));border-color:var(--prod)}
.promoted .pi{flex:none}
.promoted .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.promoted .pt b{color:var(--ink);font-weight:800}
.promoted .go{flex:none;color:var(--prod);font-weight:800;white-space:nowrap;opacity:.75}
.promoted:hover .go{opacity:1}
/* ↪ 전달 (2026-08-25 사용자) — 「어디서 온 말인지」는 본문 **위**에 있어야 문맥이 먼저 선다.
   📌 카드 배지와 달리 작고 조용하다: 저건 결과(카드가 됐다)고 이건 출처다.
   이름은 fwd* — style.css 는 스코프가 없는 단일 파일이라 짧은 이름은 남의 규칙에 걸린다 */
.fwdsrc{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:0 0 3px;
  font-family:inherit;font-size:12px;line-height:1.5;color:var(--ink-faint);
  background:none;border:0;border-left:2px solid var(--line);border-radius:0;
  padding:0 0 0 7px;cursor:pointer;text-align:left}
.fwdsrc.off{cursor:default}
.fwdsrc .fi{flex:none}
.fwdsrc .ft{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwdsrc .go{flex:none;font-weight:700;opacity:0;transition:opacity .13s var(--ease)}
.msg:hover .fwdsrc .go{opacity:.7}
.fwdsrc:hover{color:var(--ink-soft);border-left-color:var(--dev)}
.fwdsrc:hover .go{opacity:1;color:var(--dev)}
/* 어느 방으로 고르개 — 방이 많아지면 목록이 길어진다 */
.fxmenu.fwdmenu{max-height:min(58vh,420px);overflow:auto;min-width:190px}

/* 날짜 칸막이 — 시각만으로는 사흘 전과 오늘이 구분되지 않는다 */
/* 📍 여기부터 안 읽음 — 날짜 칸막이와 **같은 뼈대**, 색만 다르다.
   붉은 선은 「사고」로 읽히므로 파트색(--dev)을 쓴다: 새것을 가리키는 표지지 경고가 아니다 */
.newsep{display:flex;align-items:center;gap:10px;margin:14px 4px 8px}
.newsep::before,.newsep::after{content:'';flex:1;height:1px;
  background:color-mix(in srgb,var(--dev) 45%,transparent)}
.newsep span{font-size:12px;font-weight:800;color:var(--dev);letter-spacing:.02em;
  white-space:nowrap;padding:1px 9px;border-radius:99px;
  background:color-mix(in srgb,var(--dev) 12%,transparent)}
.daysep{display:flex;align-items:center;gap:10px;margin:14px 4px 8px}
.daysep::before,.daysep::after{content:'';flex:1;height:1px;background:var(--line)}
.daysep span{font-size:12.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.02em;
  padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.msg{display:flex;gap:10px;padding:7px 9px;border-radius:10px;position:relative}
.msg:hover{background:var(--panel2)}
.msg .avt{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:15px;background:color-mix(in srgb,var(--c) 20%,var(--panel));color:var(--c)}
/*
 * 🟢 지금 상태 — 오피스의 아바타 점과 **같은 문법**이다 (2026-08-27 사용자).
 * 판 색으로 테두리를 둘러 점이 아바타 위에 떠 보이게 한다(오피스 `.me .avt::after` 와 같다).
 * 접속 안 함(.stoff)은 아예 안 찍는다 — 회색 점을 채우면 「무슨 상태가 있다」로 읽힌다.
 */
.msg .avt{position:relative}
.msg .avt::after{content:"";position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;
  border-radius:50%;background:var(--sc,var(--ink-faint));border:2px solid var(--panel)}
.msg .avt.stoff::after{display:none}
.msg .avt[data-uid]{cursor:pointer}
.thread .msg .avt::after{width:9px;height:9px;right:-3px;bottom:-3px}
.msg .body{min-width:0;flex:1}
.msg .meta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.msg .meta b{font-size:15px}
.msg .meta .dept{font-size:12px;font-weight:700;color:var(--c)}
.msg .meta .tm{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}
.msg .txt{font-size:15.5px;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word}
/* @멘션 — **부르는 자리가 어디든 같은 옷** (2026-08-22 사용자). 예전엔 채팅 말풍선
   (.msg .txt) 안에만 걸려 있어서, 카드 코멘트·순위표 메모의 @이름은 맨 글자로 나왔다.
   같은 문법으로 부르는데 색이 자리마다 다르면 「이게 호출인가」를 매번 다시 판단한다. */
.mention{color:var(--dev);font-weight:700;background:color-mix(in srgb,var(--dev) 12%,transparent);
  border-radius:4px;padding:0 3px}
/* 나를 부른 것 — 주황. 남을 부른 것과 한눈에 갈려야 지나치지 않는다 */
/* 🩹 **전역 `.me` 가 여기까지 걸린다** (2026-08-29 사용자 — 「@언급의 색 테두리가 위로
   올라가 있다」). 채팅 말풍선의 「내 메시지」용 `.me{padding-top:10px}` 가 같은 이름을 쓰는
   이 칩에도 얹혀, 배경이 글자보다 **위로 13px** 더 뻗어 있었다(실측 padding:10px 3px 0).
   뜻이 다른 두 가지가 이름 하나를 나눠 쓰는 자리다 — 여기서 제 여백을 되찾는다. */
.mention.me{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn);
  padding:0 3px}
.filecard{margin-top:6px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;background:var(--panel2);max-width:360px;text-decoration:none;color:inherit}
.filecard .th{width:40px;height:40px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:19px;background:color-mix(in srgb,var(--dsgn) 22%,var(--panel))}
.filecard .fn{font-weight:700;font-size:14.5px;word-break:break-all}
.filecard .fs{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}
.filecard img{max-width:100%;border-radius:8px;display:block}
.imgwrap{margin-top:6px;max-width:340px}
.imgwrap img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.reacts{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.rc{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:2px 8px;font-size:13.5px}
.rc .n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.rc.mine{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 10%,var(--panel))}
.rc.add{color:var(--ink-faint);font-weight:700}
.tcue{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:13.5px;font-weight:700;
  color:var(--dev);background:none;border:0;padding:0}
.hover{position:absolute;right:10px;top:-10px;display:none;gap:2px;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:3px;box-shadow:var(--shadow)}
.msg:hover .hover{display:flex}
/* 손가락에는 호버가 없다 — 폰 브라우저의 **끈적한 호버**가 도구줄을 열어 두던 것을 끈다
   (탭하면 hover 상태가 남아, 다른 글을 눌러도 앞 것이 안 닫혔다) */
@media (hover:none){ .msg:hover .hover{display:none} }
/*
 * 📱 폰에서는 **뜨지 않고 글 아래 한 줄로 눕는다** (2026-09-02 사용자: 「왼쪽이 잘려서
 * 반응을 보낼 수가 없는 상태」). right:10px 로 오른쪽에 못 박힌 채 단추 일곱을 한 줄로
 * 펴니 375px 에서는 왼쪽이 화면 밖으로 나갔고, 하필 왼쪽 끝이 반응 무리였다.
 * 흐름 안에 두면 잘릴 자리가 없다 — 자리를 옮기는 대신 **띄우기를 그만둔다.**
 */
@media (max-width:860px){
  /* ⚠️ .hover 는 .msg 의 **직계**다(아바타·본문과 형제). .msg 가 display:flex 라
     그냥 static 으로 두면 도구줄이 **줄 안의 세 번째 칸**이 되어 줄 높이만큼 늘어나고
     그 안에서 반응·동작이 위아래로 벌어진다 (2026-09-02 사용자가 잡아 준 그 큰 빈 상자).
     줄을 접게 하고(flex-wrap) 도구줄에 한 줄을 통째로 준다 — 그래야 본문 **아래**에 눕는다 */
  .msg{flex-wrap:wrap}
  .msg .hover{position:static;display:none;flex:0 0 100%;order:9;margin-top:6px;
    align-self:auto;flex-wrap:wrap;gap:4px;padding:6px;box-shadow:none;background:var(--panel2)}
  .msg.sel .hover{display:flex}
  .msg.sel{background:var(--panel2)}
  /* 손가락이 닿는 크기로 — 반응은 넉 줄이 한 줄에 들어간다 */
  .msg .hover button{padding:7px 11px;font-size:16px;min-height:38px;min-width:38px}
  .msg .hover .lbl{font-size:13px}
  /* 무리 사이 구분선은 줄이 접히면 어긋난다 — 폰에서는 걷고 줄바꿈이 대신 가른다 */
  .msg .hgrp{flex-wrap:wrap;gap:4px}
  .msg .hgrp + .hgrp{margin-left:0;padding-left:0;border-left:0}
  /* 도구줄은 아바타 칸 밑까지 쓴다 — 좁은 폭에서 한 줄이라도 덜 접히게 */

}
.hover button{border:0;background:none;border-radius:6px;padding:3px 7px;font-size:14.5px}
.hover button:hover{background:var(--panel2)}
/* 반응(이모지)과 동작(스레드·카드)을 눈으로 가른다 — 구분선 + 동작에는 이름을 적는다 */
.hgrp{display:flex;gap:2px;align-items:center}
.hgrp + .hgrp{margin-left:5px;padding-left:6px;border-left:1px solid var(--line)}
.hover .lbl{font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap;padding:3px 8px}
.hover .lbl:hover{background:color-mix(in srgb,var(--dev) 9%,var(--panel2));color:var(--dev)}
.composer{border-top:1px solid var(--line);padding:11px 16px;flex:none}
/* 아래 정렬 — 여러 줄로 늘어나도 버튼들이 입력 줄과 같은 높이에 남는다.
   가운데 정렬로 두면 긴 글을 쓸 때 ＋ 와 보내기가 글 중간에 떠 있게 된다. */
.cbox{display:flex;align-items:flex-end;gap:8px;border:1.5px solid var(--line);border-radius:12px;
  padding:7px 9px;background:var(--panel)}
.cbox:focus-within{border-color:var(--dev)}
.cbox textarea{flex:1;border:0;background:none;resize:none;font-size:15.5px;outline:none;
  max-height:140px;line-height:1.6;padding:3px 0}
/* 컴포저 버튼 — 32px 원형. 16px 글리프 하나만 두면 「옹졸해」 보이고 누를 자리도 좁다.
   .cbox 가 flex-end 정렬이라 개별로 가운데를 맞춘다(여러 줄이 되어도 줄 가운데에 남는다). */
.cbox .tool{width:28px;height:28px;flex:none;border:0;padding:0;
  border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;
  background:var(--panel2);color:var(--ink-soft);
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.cbox .tool:hover{background:color-mix(in srgb,var(--dev) 12%,var(--panel2));color:var(--dev)}
.cbox .tool:active{transform:scale(.92)}
#btnPlus{font-size:21px;font-weight:300}
/* 메뉴가 열리면 ＋ 가 ✕ 로 기운다 — 지금 열려 있다는 것을 버튼 자신이 말한다 */
.plusbox.open #btnPlus{transform:rotate(45deg);
  background:color-mix(in srgb,var(--dev) 15%,var(--panel2));color:var(--dev)}
.send{border:0;background:var(--won);color:#fff;border-radius:9px;padding:7px 13px;font-weight:800;font-size:14.5px}
.send:disabled{opacity:.4}
.fileprev{font-size:13px;color:var(--ink-soft);padding:5px 2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fileprev button{border:0;background:none;color:var(--red);font-weight:800;font-size:13px}
.fileprev .mini{border:1px solid var(--line2);border-radius:8px;padding:2px 8px;color:var(--ink-soft);font-weight:600}
/* 여러 파일 대기 칩 — 번호가 곧 전송 순서 (2026-08-20) */
.fpchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);
  border-radius:99px;padding:2px 6px 2px 9px;background:var(--panel2);max-width:240px;min-width:0}
.fpchip b{font-family:var(--mono);font-size:11px;color:var(--dev);flex:none}
.fpchip i{font-style:normal;font-size:11px;color:var(--ink-faint);white-space:nowrap;flex:none}
/* 이름만 줄어든다 — ✕(취소)와 용량은 이름이 아무리 길어도 잘리지 않는다 */
.fpchip .nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpchip button{flex:none}
/* 보내기 전 미리보기 — 이미지는 썸네일, 그 외는 아이콘 버튼으로 뷰어를 연다 */
.fpchip .fpthumb{width:30px;height:30px;object-fit:cover;border-radius:6px;flex:none;
  cursor:zoom-in;border:1px solid var(--line2)}
.fpchip .fpeye{border:0;background:none;font-size:15px;padding:0;cursor:zoom-in}
/* 🔔 방별 알림 모드 — **항상 보인다** (2026-08-20 사용자 확정 — 기본 상태도 숨기지 않는다.
   숨겨두면 이 기능이 있다는 사실 자체를 마우스를 올린 사람만 안다) */
.chbell{margin-left:auto;font-size:11px;opacity:.45;border-radius:6px;padding:0 3px;flex:none}
.chbell.set{opacity:.9}
.ch:hover .chbell{opacity:.9}
.chbell:hover{background:var(--panel2);opacity:1}
.chchip .chbell{display:none}
/* 💬 DM 드래그 — 끌리는 줄은 반투명, DM 줄엔 잡는 손 커서 */
[data-dmdrag]{cursor:grab}
[data-dmdrag].dragging{opacity:.4}
/* 🕘 지나간 알림 목록 */
.ntrow{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;border:0;
  background:none;padding:9px 6px;border-bottom:1px solid var(--line2);cursor:pointer;
  border-radius:8px;font-family:inherit}
.ntrow:hover{background:var(--panel2)}
.ntrow .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--panel2);
  display:grid;place-items:center;font-size:15px}
.ntrow .tx{flex:1;min-width:0;font-size:13px}
.ntrow .tx b{display:block;color:var(--ink)}
.ntrow .tx span{display:block;color:var(--ink-faint);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ntrow .tm{flex:none;font-size:11px;color:var(--ink-faint);white-space:nowrap;margin-top:2px}
/* 👥 읽음확인 모달 (채팅·카드 공용) — 채팅 플로팅창(z 88)보다 위여야 한다.
   🕘 지난 알림도 같은 사정(채팅에서 열 수 있다) */
#readsModal,#ntlogBox{z-index:96}
/* 확인/목록 창의 옷 (2026-08-20 사용자 확정) — 판은 앱 배경색 그대로,
   **내용이 흰 둥근 박스(.rdcard = --panel)** 안에 앉는다. 앱의 다른 화면과 같은 문법 —
   색을 하드코딩하지 않는다(테마 변수만). 읽음확인·지난 알림이 이 옷을 입는다 */
.rdcard{background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  padding:4px 12px;margin-top:10px}
.rdtabs{display:flex;border-bottom:1.5px solid var(--line2)}
.rdtabs button{flex:1;border:0;background:none;padding:9px 0;font-size:13.5px;font-weight:700;
  color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px}
.rdtabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.rdlist{max-height:min(430px,55vh);overflow-y:auto}
.rdrow{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line2)}
.rdrow:last-child{border-bottom:0}
/* 사람의 얼굴은 앱 아바타 문법 그대로 — 파트색 원 + 사진(있으면) */
.rdrow .rdav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:14.5px;font-weight:800;background:color-mix(in srgb,var(--oc) 18%,var(--panel));
  color:var(--oc);overflow:hidden}
.rdrow .nm{flex:1;min-width:0}
.rdrow .nm b{display:block;font-size:13.5px}
.rdrow .nm i{font-style:normal;font-size:12px;color:var(--ink-faint)}
.rdrow .at{text-align:right;font-size:12px;color:var(--ink-soft)}
.rdrow .at b{display:block;font-weight:700}
.rdrow .at i{font-style:normal;font-size:11px;color:var(--ink-faint)}
.rdrow .at.dim{color:var(--ink-faint)}
/* 채팅 헤더 — 읽음확인·파일함 버튼 */
.chfilesbtn{border:0;background:none;cursor:pointer;font-family:inherit}
#chMem:hover,.chfilesbtn:hover{color:var(--dev)}
/* 🔗 파일함 링크 줄 */
.fxlink{display:flex;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid var(--line2);
  text-decoration:none;color:var(--ink);border-radius:8px;min-width:0}
.fxlink:hover{background:var(--panel2)}
.fxlink .ic{flex:none}
.fxlink .u{flex:1;min-width:0;font-size:13px;color:var(--dev);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fxlink .mt{flex:none;font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
/* 🔗 링크 카드 — 파일 카드(.fxc)와 같은 옷을 입는다 */
.fxlinkc{cursor:zoom-in}
.fxlinkc .fxth img{width:100%;height:100%;object-fit:cover}
.fxlinkc .fxha{text-decoration:none;display:grid;place-items:center}
/* 뷰어의 링크 미리보기 */
.vwlink{max-width:min(560px,90vw);background:var(--bg);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.vwlink img{max-width:100%;max-height:300px;border-radius:10px;object-fit:cover}
.vwlink .vlic{font-size:44px}
.vwlink h3{font-size:16px;margin:0}
.vwlink p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.vwlink .vlu{font-size:12px;color:var(--ink-faint);word-break:break-all}

/* 🗂️ 카드 「읽음 n」 — 화면 구석의 조용한 글자 버튼 (플로우 참고) */
.creads{display:flex;justify-content:flex-end;margin-top:10px}
.creads button{border:0;background:none;font-size:12.5px;color:var(--ink-faint);cursor:pointer;
  font-family:inherit}
.creads button:hover{color:var(--ink)}
/* 담당 칩의 읽음 시각 */
.apchip .rdat{font-size:10px;color:var(--ink-faint);margin-left:4px}
.apchip .rdat.no{color:var(--warn)}
/* 파일을 끌고 오면 채팅 영역이 받는 자세를 취한다 */
#v-chat.dropping{outline:2px dashed var(--dev);outline-offset:-6px;border-radius:14px}
.thread{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.thread .th{display:flex;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid var(--line);
  font-weight:800;font-size:15px;flex:none}
.thread .th .x{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:17px}
.thread .tmsgs{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}
.thread .msg .avt{width:28px;height:28px;font-size:13px;border-radius:7px}
.empty{text-align:center;color:var(--ink-faint);font-size:14.5px;padding:40px 10px}

/* ── 노크 카드 ── */
.knockcard{position:fixed;right:20px;bottom:20px;width:320px;background:var(--panel);
  border:1px solid var(--line);border-radius:15px;padding:15px 16px;box-shadow:var(--shadow);z-index:60}
.knockcard .kh{display:flex;gap:10px;align-items:center;margin-bottom:11px}
.knockcard .kav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:color-mix(in srgb,var(--c) 22%,var(--panel));color:var(--c);flex:none}
.knockcard .kt{font-weight:800;font-size:15.5px}
.knockcard .ks{font-size:13.5px;color:var(--ink-faint)}
.knockcard .kacts{display:flex;gap:7px}
.knockcard .kacts button{flex:1;border:1.5px solid var(--line);background:var(--panel);border-radius:10px;
  padding:9px 0;font-weight:800;font-size:14.5px}
.knockcard .kacts.one button{flex:none;width:100%}
.knockcard .kacts .ok{background:var(--won);border-color:var(--won);color:#fff}
.knockcard .holdlink{display:block;width:100%;background:none;border:0;color:var(--ink-faint);
  font-size:13.5px;margin-top:8px;text-decoration:underline}
.knockcard .nomark{font-size:12.5px;color:var(--ink-faint);line-height:1.5;margin-top:9px;
  border-top:1px dashed var(--line2);padding-top:8px}

/* ── 회의 (M2) ── */
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}}
/* ↑ 목록 — **한 열로 접힌 화면에서만.** 그때 회의록 판은 목록 아래라, 고르고 나면
   돌아갈 손잡이가 있어야 한다. 넓은 화면에서는 목록이 바로 옆이라 자리만 먹는다.
   기준 수(900px)는 위 접힘과 meetings.js 의 narrow() 와 **같은 수**여야 한다 */
.uplist{display:none;margin-left:auto;flex:none}
@media(max-width:900px){.uplist{display:inline-flex}}
.mrow{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin-bottom:8px;
  background:var(--panel2);cursor:pointer}
.mrow.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.mtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mtitle{font-size:15.5px}
.mwhen{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink-faint)}
.mph{font-size:12px;font-weight:800;border-radius:99px;padding:2px 8px;flex:none;
  background:color-mix(in srgb,var(--ink) 7%,var(--panel));color:var(--ink-faint)}
.mph.ok{background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won)}
.mph.warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}
.mph.live{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red)}
.mph.debrief{background:color-mix(in srgb,var(--free) 14%,var(--panel));color:var(--free)}
.mph.off{opacity:.6}
.mmeta{font-size:13px;color:var(--ink-faint);margin-top:3px}
.macts{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
/* ── 회의 예약 창 ──
   오피스 안 인라인 폼이었는데 정할 것이 다섯이라(제목·날짜·시각·길이·참여자) 아래로 길어져
   오피스가 통째로 밀렸다. 창으로 빼면 예약하는 동안 뒤 화면이 그대로 남는다. */
.mmodal{position:fixed;inset:0;z-index:86;background:rgba(10,14,22,.5);
  display:flex;align-items:center;justify-content:center;
  padding:20px 20px 20px calc(20px + var(--railw))}
/*
 * 떠 있는 채팅이 열려 있으면 **창을 그 위로 올린다** (2026-08-27 사용자:
 * 「모달이 채팅보다 뒤에 나온다」).
 *
 * 층이 이렇게 쌓여 있다: 창(.mmodal) 86 < **떠 있는 채팅 88** < 채팅 단추 89 < 팔레트 90.
 * 그래서 채팅에서 연 창이 채팅 **뒤로** 숨었다 — 내 파일 겹침 확인창만이 아니라
 * 채팅에서 여는 모든 창이 그랬다. 창은 「지금 답해야 하는 것」이라 무엇보다 위여야 한다.
 * 채팅이 떠 있을 때만 올린다 — 평소의 층 순서는 건드리지 않는다.
 */
/*
 * 💬 **채팅 위에서 연 판은 채팅보다 앞이다** (2026-08-27 사용자: 「채팅으로 보낸 링크를
 * 누르면 카드가 뒤로 가려진다」).
 *
 * 채팅을 닫아 버리는 길도 있었지만, 그러면 **하던 자리를 잃는다** — 링크가 여러 개면
 * 매번 창을 다시 열고 채널을 다시 찾아야 한다. 판을 앞으로 올리면 닫는 순간 채팅
 * 그 자리로 돌아온다. 「연 순서대로 쌓이고, 닫으면 제자리」가 사람이 이미 아는 문법이다.
 *
 * 순서는 평소(84·87·86·88)와 같게 유지해 한 칸씩 올린 것뿐이다 — 판끼리의 위아래가
 * 채팅이 떠 있느냐에 따라 달라지면 그거야말로 예측할 수 없다.
 */
body:has(#v-chat.float) .cardsheet{z-index:89}
body:has(#v-chat.float) .gmodal{z-index:90}
body:has(#v-chat.float) .mmodal{z-index:91}
body:has(#v-chat.float) .viewer{z-index:92}
/* 이 둘은 원래부터 맨 위다(96) — 채팅에서 여는 판이라 그렇게 정해 뒀다. 위 규칙은
   `:has(#…)` 안에 id 를 품고 있어 **id 만큼의 무게**를 지닌다: 가만두면 96 을 91 로
   끌어내린다. 같은 무게로 도로 못 박는다 */
body:has(#v-chat.float) #readsModal,
body:has(#v-chat.float) #ntlogBox{z-index:96}
.mmbox{width:min(580px,100%);max-height:calc(var(--vh100)*.88);overflow-y:auto;background:var(--bg);
  border:1px solid var(--line);border-radius:18px;padding:21px 21px 18px;box-shadow:var(--shadow)}
.mmhead{display:flex;align-items:center;margin-bottom:14px}
.mmhead b{font-size:17px;letter-spacing:-.01em}
.mmx{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:17px}
.mmlab{display:block;font-size:13px;font-weight:800;color:var(--ink-faint);
  margin:12px 0 5px;letter-spacing:.02em}
.mmlab.row{display:flex;align-items:center;gap:7px}
.mmcount{font-weight:700;color:var(--dev)}
.mmall{margin-left:auto;display:flex;gap:5px}
.mmbox .chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.mmbox .chip:hover{border-color:var(--dev);color:var(--dev)}
.mmrow{display:flex;gap:9px}
.mmrow>div{flex:1;min-width:0}
.mmrow .mmlab{margin-top:12px}

/* 길이는 넷 중 하나 — 연장 규칙이 길이마다 정해져 있어 임의의 분을 받을 수 없다 (02 §4-2) */
.lenpick{display:flex;gap:6px}
.lenbtn{flex:1;border:1.5px solid var(--line);background:var(--panel);border-radius:11px;
  padding:9px 4px;font-size:14.5px;font-weight:800;color:var(--ink-soft)}
.lenbtn.on{border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 9%,var(--panel))}
.lenhint{font-size:12.5px;color:var(--ink-faint);margin-top:6px;line-height:1.5;min-height:16px}

/* 그날 이미 잡힌 회의 — 예약 창 안에서만 뜬다(캘린더 화면을 만들지 않는다) */
.daybox{margin-top:10px}
.dayhead{font-size:12.5px;font-weight:800;color:var(--ink-faint);margin-bottom:5px;
  display:flex;align-items:center;gap:6px}
.dayhead b{color:var(--ink)}
.clashn{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  border-radius:99px;padding:1px 7px;font-size:11.5px}
.dayrow{display:flex;align-items:baseline;gap:7px;font-size:13.5px;padding:4px 8px;
  border-radius:8px;background:var(--panel2);margin-bottom:3px;flex-wrap:wrap}
.dayrow.clash{background:color-mix(in srgb,var(--warn) 9%,var(--panel2))}
.dayrow .dt{font-family:var(--mono);font-weight:800;flex:none}
.dayrow .dn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dayrow .dm{margin-left:auto;font-size:12px;color:var(--ink-faint);flex:none}
.dayrow .dc{flex-basis:100%;font-size:12px;color:var(--warn);font-weight:700}
.dayempty{font-size:12.5px;color:var(--ink-faint);padding:5px 2px}
.daynote{font-size:12px;color:var(--ink-faint);margin-top:4px;line-height:1.5}

/* 12명이 한 줄로 늘어서면 누가 어느 팀인지 안 보인다 — 파트로 묶는다 */
.teampick{display:flex;flex-direction:column;gap:7px;
  max-height:230px;overflow-y:auto;padding:2px}
.teamgrp{border:1px solid var(--line);border-radius:12px;padding:8px 10px 9px;background:var(--panel2)}
.teamhead{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.teamhead b{font-size:13.5px}
.teamhead span{font-size:12px;color:var(--ink-faint)}
.teamhead .chip{margin-left:auto;padding:3px 9px;font-size:12.5px}
.teammem{display:flex;flex-wrap:wrap;gap:5px}
.mmfoot{display:flex;align-items:center;gap:7px;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--line)}
.mmnote{flex:1;font-size:12.5px;color:var(--ink-faint);line-height:1.45}
.pp{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  background:var(--panel);border-radius:99px;padding:3px 9px;font-size:13.5px;cursor:pointer}
.pp:has(input:checked){border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.pchips2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pchip2{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;
  padding:5px 12px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.pchip2.on{border-color:var(--ink);color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,var(--panel))}
.pchip2 .pv{font-family:var(--mono);font-size:11.5px;opacity:.6}
.pchip2.add{border-style:dashed;color:var(--ink-faint)}
.sumbox{border:1px solid var(--line2);border-radius:11px;background:var(--panel2);
  padding:11px 13px;margin-bottom:12px}
.sumhead{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-faint);
  padding-bottom:7px;margin-bottom:8px;border-bottom:1px dashed var(--line)}
.sumhead .zap{color:var(--won);font-weight:800}
.sumhead .fresh{color:var(--warn);font-weight:800}
.sumhead .mini{margin-left:auto}
.sumbody{font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.sumbody h3{font-size:14px;font-weight:800;color:var(--ink);margin:11px 0 4px}
.sumbody h3:first-child{margin-top:0}
.sumbody h4{font-size:13.5px;font-weight:800;color:var(--ink);margin:9px 0 3px}
.sumbody ul{margin:0;padding-left:16px}
.sumbody li{margin:2px 0}
.scripthead{font-size:14px;font-weight:800;margin-bottom:7px;display:flex;gap:8px;align-items:baseline}
.scripthead .mono{font-size:12.5px;color:var(--ink-faint);font-weight:600}
.scripthead .mini{margin-left:auto;flex:none}
.script2{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
/* 긴 회의는 420px 상자 안에서 읽기가 갑갑하다 — [펼치기]로 상자를 걷는다 (3.50.0) */
.script2.grow{max-height:none}
.sline{display:flex;gap:8px;padding:5px 7px;border-radius:8px;font-size:14.5px}
.sline .st{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none;width:36px;padding-top:2px}
.sline .sn{font-weight:800;color:var(--c);flex:none}
.sline .sx{color:var(--ink-soft);flex:1;min-width:0;word-break:break-word}
/* s- 접두사 — 이름이 짧으면 남의 규칙에 걸린다. 실제로 .chat(채팅 화면 격자)·.note(안내 상자)에
   걸려서 스크립트 한 줄이 화면 높이만 한 상자가 됐다 */
.sline.s-chat{background:color-mix(in srgb,var(--dev) 6%,var(--panel));border:1px dashed color-mix(in srgb,var(--dev) 26%,var(--line))}
.sline.s-note{background:color-mix(in srgb,var(--free) 7%,var(--panel));border:1px dashed color-mix(in srgb,var(--free) 30%,var(--line))}
.note{border-radius:9px;padding:8px 11px;font-size:13.5px;margin-bottom:9px}
.note.warn{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
.note.err{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
/* ⏳ 아직 오는 중 — 옛 「변환 중」 등(meeting_tracks)을 대신하는 자리 (3.50.0).
   점은 이미 있는 .pulse 를 빌린다(같은 뜻의 그림을 두 벌 만들지 않는다) — 색만 바꾼다 */
.note.busy{background:color-mix(in srgb,var(--warn) 10%,var(--panel));color:var(--warn);
  display:flex;align-items:center;gap:7px}
.note.busy .pulse{background:var(--warn);width:8px;height:8px}
/* ⚠️ 이 요약은 몇 줄 기준인가 — 다시 만들 손잡이를 띠 안에 같이 둔다 */
.note.stale{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.note.stale .mini.pri{background:var(--warn);border-color:var(--warn);color:#fff}

/* ── 유틸 — 팔레트 진입점 하나 ──
   ⌘K 가 검색과 바로가기(피드백·정제소·목표…)를 다 들고 있어서 레일에는 문이 하나면 된다. */
.util{display:flex;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(var(--rw),.1);position:relative}
.ubtn{display:flex;align-items:center;gap:6px;background:none;border:0;border-radius:8px;
  padding:7px 8px;color:var(--rail-ink);font-size:13.5px;font-weight:600;position:relative}
.ubtn:hover{background:rgba(var(--rw),.09);color:var(--rail-str)}
.ubtn .ic{font-size:15px;line-height:1}
.ubtn .ul{flex:1;text-align:left}
.ubtn .kbd{font-family:var(--mono);font-size:11px;opacity:.5;border:1px solid rgba(var(--rw),.2);
  border-radius:4px;padding:0 3px}
.ubtn.wide{flex:1;background:rgba(var(--rw),.07)}
.ubtn.wide:hover{background:rgba(var(--rw),.14)}

/* 알림 팝오버 — 종이 .who 로 옮겨가면서 기준도 그쪽이다 */
/* 알림 판은 **위로** 열린다 — 붙는 자리(내 이름 줄)가 레일 맨 아래라 아래로 열면
   창 밖으로, 브라우저에서는 작업표시줄 뒤로 내려간다. 상태 판(.stpop)과 같은 방향이다.
   길어질 수 있는 목록이라 높이를 화면에 맞춰 자르고 안에서 스크롤한다. */
.upop{position:absolute;left:0;right:0;bottom:calc(100% + 6px);top:auto;z-index:46;
  max-height:min(calc(var(--vh100)*.58),430px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
/*
 * ⚙ 내 설정 팝오버는 **밝은 판**이다 — 🔔 알림과 같은 옷 (2026-08-31 사용자:
 * 「배경과 버튼이 밝은색인 게 맞지 않아?」).
 *
 * 잠깐 레일 옷(남색)을 입혔던 적이 있다 — 남색 기둥 위의 흰 상자가 딴 물건처럼 보인다는
 * 말에서였다. 그런데 **같은 자리에서 열리는 🔔 알림은 밝은 판 그대로**라, 이웃한 두
 * 팝오버가 서로 다른 문법을 갖게 됐다. 떠 있는 판은 앱 전체가 밝은 판 + .mini·.fld
 * 어휘로 말한다(상태 판·전달 메뉴·모든 창) — 여기만 예외를 두면 「이건 다른 물건인가」를
 * 매번 다시 판단하게 된다. 레일 위에 떠 있는 것은 **그림자와 테두리**가 말하면 된다.
 */
/*
 * 글줄의 리듬 (2026-08-31 사용자) — 판 이름 · 갈래 머리글은 **판의 왼쪽 선**에 나란히
 * 서고(단추 안쪽 여백을 따라가지 않는다), 머리글은 **제 아래 것에 붙는다**:
 * 위는 넉넉히(18px) 띄워 앞 단추와 갈라 놓고, 아래는 바짝(6px) 붙여 무엇의 이름인지
 * 눈으로 묶는다. 예전엔 그 반대라(위 0 · 아래 8) 「내 정보」의 꼬리표처럼 읽혔다.
 */
#prefPop .prftitle{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 10px}
#prefPop .upt{margin:18px 0 6px}
#prefPop .upt + .prfrow{margin-top:0}
.upop .upt{font-size:14px;font-weight:800;color:var(--ink)}
.upop .upt.warn{color:var(--warn)}
.upop .upt.dim{color:var(--ink-faint)}
.upop .upb{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:4px}
.app.railmin .ubtn{width:100%;justify-content:center;padding:7px 0}
.app.railmin .ubtn .ul,.app.railmin .ubtn .kbd{display:none}
/* 레일을 접으면 옆으로 나온다. 그때도 바닥 기준이어야 아래로 안 넘친다 */
.app.railmin .upop{left:calc(100% + 6px);right:auto;top:auto;bottom:0;width:210px}

.notifybox{margin-top:8px;padding-top:8px;border-top:1px solid rgba(var(--rw),.1);position:relative}
.notifybox .nx{position:absolute;top:6px;right:0;border:0;background:none;color:var(--rail-ink);
  opacity:.5;font-size:13px;padding:2px 4px}
.notifybox .nx:hover{opacity:1}
.app.railmin .notifybox{display:none}
.notifybox .nbtn{width:100%;border:1.5px solid rgba(var(--rw),.25);background:none;
  border-radius:9px;padding:8px;font-size:14px;font-weight:800;color:var(--rail-str)}
.notifybox .nbtn:hover{background:rgba(var(--rw),.1)}
.notifybox .nok{font-size:13px;font-weight:700;color:#7DF0A8}
.notifybox .nwarn{font-size:13.5px;font-weight:800;color:#FFD34D}
.notifybox .nhint{font-size:12px;color:var(--rail-ink);opacity:.75;line-height:1.5;margin-top:4px}
.notifybox .nhint b{color:var(--rail-str)}

.heldbox{position:fixed;right:18px;top:18px;z-index:78;width:min(320px,calc(100vw - 28px));
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow);overflow:hidden}
.heldbox .hh{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:14px;
  font-weight:800;background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
.heldbox .hx{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:15px}
.heldbox .hi{padding:8px 12px;border-top:1px dashed var(--line2);font-size:14px}
.heldbox .hi b{display:block;color:var(--ink)}
.heldbox .hi span{display:block;color:var(--ink-faint);font-size:13px;margin-top:2px}

/* ── 업무보드 (M3) ── */
/* 파트 칩 필터 — 누르면 그 파트만 남는다. 지금 무엇이 걸려 있는지 글로도 적는다 */
.board-tools{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.board-tools .chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:var(--panel);border-radius:99px;padding:4px 11px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.board-tools .chip i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
/* 줄 전체의 키를 맞춘다 (2026-08-25 사용자) — 이모지 칩(✏️·📦)은 글리프가 커서 28px 이고
   글자 칩은 26px 이라 같은 줄에서 2px 씩 어긋나 있었다. 바닥을 28 로 깐다 */
.board-tools .chip{min-height:28px}
.board-tools .chip.on{background:color-mix(in srgb,var(--c) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));color:var(--c)}
.board-tools .bfilter{font-size:13.5px;color:var(--ink-faint);margin-left:auto}
.board-tools #btnNewCard{flex:none}

/* .newcard 는 걷어냈다 — 발주가 마지막 인라인 생성 폼이었고 창(.mmodal)으로 옮겼다.
   생성 폼은 전부 .mmodal 하나다 (verify.js [7] 가 지킨다) */
.mmbox textarea.fld{font-family:inherit;resize:vertical}

.hohold{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.hohold textarea{border:1.5px solid var(--line);background:var(--panel);border-radius:9px;
  padding:8px 10px;font-size:14px;font-family:inherit;color:var(--ink);resize:vertical}
.hohold textarea:focus{border-color:var(--dev);outline:none}
.hohold button{align-self:flex-start}

.wipwarn{background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:10px;
  padding:9px 12px;font-size:13.5px;color:var(--warn);margin-bottom:11px}
/* 칸반 — 목업 v2. 상태 5개는 고정이라 넓으면 균등하게 펴고, 좁아지면 208px 에서 멈춘다 */
.board{display:flex;gap:11px;overflow-x:auto;padding-bottom:8px}
.col{flex:1 1 208px;min-width:208px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:13px;padding:9px;align-self:flex-start}
.col h5{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);
  display:flex;justify-content:space-between;align-items:center;margin:3px 4px 9px}
.col h5 .ktit{display:flex;align-items:center;gap:6px;min-width:0}
.col h5 .wip{font-weight:800}
.col h5 .wip.warn{color:var(--warn)}
.kempty{font-size:13px;color:var(--ink-faint);text-align:center;padding:12px 0}

.kcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:12px;padding:12px 13px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.kcard.click{cursor:pointer;transition:border-color .12s,transform .08s}
.kcard.click:hover{border-color:color-mix(in srgb,var(--c) 55%,var(--line));transform:translateY(-1px)}
/* 머리줄은 **줄을 바꾸지, 글자를 접지 않는다.** 열이 좁아지면 flex 가 각 조각을 눌러서
   「기획마케팅」이 두 줄이 되고 배지가 겹치면 한 글자씩 세로로 떨어졌다 — 고장으로 보인다.
   조각마다 nowrap 을 걸고 줄바꿈을 허용하면, 좁아질 때 **아래로 한 줄 늘어날 뿐** 모양은 그대로다. */
.kcard .top{display:flex;align-items:center;gap:5px;flex-wrap:wrap;row-gap:4px}
.kcard .top > *{flex:none;white-space:nowrap}
.kcard .d{font-size:11.5px;font-weight:800;color:var(--c)}
.kcard .open-hint{font-size:11px;font-weight:800;color:var(--ink-faint);opacity:0;transition:opacity .12s}
.kcard.click:hover .open-hint{opacity:1}
.kcard .watch{margin-left:auto;border:0;background:none;font-size:14px;opacity:.35;padding:0 2px}
.kcard .watch.on{opacity:1}
.kcard .t{font-size:14.5px;font-weight:700;line-height:1.45;margin:2px 0 4px}
.kcard .mods{display:flex;gap:4px;flex-wrap:wrap}
.kcard .mod{font-size:11.5px;font-weight:700;color:var(--ink-faint);background:var(--panel2);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px}
.kcard .meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12.5px;color:var(--ink-faint)}
.kcard .who{width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,var(--panel));
  color:var(--c);display:grid;place-items:center;font-weight:800;font-size:11.5px}
.kcard .due{font-family:var(--mono);margin-left:auto}
.kcard .due.warn{color:var(--red);font-weight:800}

/* 나에게 온 인계는 칸반 안에서 바로 처리한다 — 별도 바로 빼면 같은 걸 두 번 보게 된다 */
.kcard.handoff{border:1.5px solid var(--free);border-left-width:3px;
  background:color-mix(in srgb,var(--free) 5%,var(--panel))}
.kcard.handoff .hh{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;
  color:var(--free);margin-bottom:3px}
.kcard.handoff .why{font-size:13px;color:var(--ink-soft);background:var(--panel);border-radius:7px;
  padding:6px 8px;margin:5px 0 7px;border:1px solid var(--line2);line-height:1.5}
.kcard.handoff .acts{display:flex;gap:5px}
.kcard.handoff .acts button{flex:1;border-radius:7px;border:1px solid var(--line);background:var(--panel);
  padding:5px 0;font-size:13px;font-weight:800;color:var(--ink-soft)}
.kcard.handoff .acts .ok{background:var(--free);border-color:var(--free);color:#fff}

/* ── 아직 안 만든 화면 ──
   빈 화면은 고장으로 읽힌다. 무엇이 · 왜 · 언제 오는지를 화면이 직접 말한다. */
.soon{background:var(--panel);border:1.5px dashed var(--line);border-radius:16px;
  padding:32px 28px;text-align:center;max-width:660px;margin:0 auto}
.soonic{font-size:38px;line-height:1}
.soonw{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;font-weight:800;
  color:var(--dev);background:color-mix(in srgb,var(--dev) 11%,var(--panel));
  border-radius:99px;padding:3px 11px;margin:10px 0 4px}
.soon h3{font-size:17px;font-weight:800;margin-bottom:7px}
.soon p{font-size:14.5px;color:var(--ink-soft);line-height:1.7;max-width:520px;margin:0 auto}
.soon p b{color:var(--ink)}
.soonlist{display:grid;gap:6px;margin:18px auto 0;max-width:460px;text-align:left}
.soonlist .si{font-size:14px;color:var(--ink-soft);background:var(--panel2);
  border:1px solid var(--line2);border-radius:9px;padding:8px 12px}
.soonlist .si b{color:var(--ink)}
.soonnote{margin-top:16px;font-size:13.5px;color:var(--ink-faint);border-top:1px dashed var(--line2);padding-top:12px}

/* 쓰다 만 카드 — 등록 전이라 칸반에 못 들어가는 것들의 자리.
   보드 맨 위 한 줄. 나에게만 보이고, 눌러서 이어 쓴다 */
.draftbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding:9px 12px;border-radius:11px;
  border:1px dashed color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 6%,transparent)}
.draftbar b{font-size:13.5px;color:var(--warn)}
.draftbar>span{font-size:12.5px;color:var(--ink-faint);margin-right:4px}
.draftbar .dchip{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 10px;
  cursor:pointer;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .13s,color .13s}
.draftbar .dchip:hover{border-color:var(--warn);color:var(--warn)}

/* 🎨 톤 고르개 — 색을 고르는 자리라 **미리보기 조각**이 이름보다 앞선다 (2026-08-26) */
.prfrow{display:flex;gap:6px;margin-top:8px}
/* 👤 프로필 줄은 **세로**다 (2026-08-31 사용자: 「모양이 완전히 박살」) — 팝오버는 좁은데
   단추 셋을 한 줄에 밀어 넣으면 글자가 한 자씩 접혀 「사 진 바 꾸 기」가 된다.
   옷 고르개(어두운/밝은)는 둘뿐이고 짧아 가로로 둔다 — 나란히 놓고 고르는 값이라 그게 맞다 */
/* 세로 배치. 이름이 `col` 이면 칸반 열(.col — 흰 판·min-width 208px)을 그대로 입는다.
   짧은 이름은 남의 규칙에 걸린다 (2026-08-31 사용자: 팝오버 안 흰 슬래브) */
.prfrow.prfcol{flex-direction:column}
.prfrow.prfcol .prfb{justify-content:flex-start;padding:8px 11px}
/* 한 팝오버 안의 단추는 **같은 키**다 — 세로 여백을 공통으로 두고 가로만 자리에 맞춘다
   (좁은 짝 단추는 4px, 꽉 찬 단추는 11px). 높이가 다르면 같은 급이 아닌 것처럼 읽힌다 */
.prfb{flex:1;display:flex;align-items:center;gap:6px;justify-content:center;min-height:38px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--ink-soft);
  background:var(--panel2);border:1.5px solid var(--line);border-radius:9px;padding:8px 4px;cursor:pointer}
.prfb.on{border-color:var(--dev);color:var(--dev)}
.prfb i{width:13px;height:13px;border-radius:4px;border:1px solid var(--line)}
.prfb i.prfd{background:#1A2332}
.prfb i.prfl{background:var(--panel)}

/* 📝 가지 메모 — 가지 위의 표는 작게, 창 안의 링크 줄은 눌리는 크기로 (2026-08-26) */
/* 📝 는 눌리는 단추다 — 글자 옆에 붙은 표시가 아니라 **손가락이 닿는 자리**여야 한다.
   가지 본체(끌기·메뉴)와 겹치므로 눌리는 넓이를 눈에 보이게 준다 (2026-08-26 사용자) */
/* 📝 는 **모서리 배지**다 (2026-08-26 사용자: 「모양이 너무 이상해」) — 글 옆에 상자를
   끼워 넣으면 제목을 밀어 알약이 찌그러지고, 네모가 알약 테두리를 뚫고 나온다.
   아바타의 상태 점과 같은 문법으로 모서리에 앉힌다: 글 흐름 밖이라 제목을 안 건드리고,
   동그라미라 알약과 싸우지 않는다. 22px 원이면 눌리는 넓이도 된다 */
.bmnode .bmnote{position:absolute;top:-8px;right:-7px;z-index:3;
  font-style:normal;font-size:12px;line-height:1;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--panel);border:1.5px solid color-mix(in srgb,var(--idea) 45%,var(--line));
  box-shadow:0 2px 6px rgba(20,28,46,.16);cursor:pointer;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
.bmnode .bmnote:hover{border-color:var(--idea);
  background:color-mix(in srgb,var(--idea) 16%,var(--panel))}
/* 목록(모바일)에서는 손가락 크기로 — 28px 아래로 내려가면 옆 줄이 눌린다.
   줄에서는 모서리가 아니라 제자리에 서지만, 옷은 맵과 같은 동그라미다 */
.brrow .bmnote{font-style:normal;flex:none;display:grid;place-items:center;
  width:30px;height:30px;font-size:14px;border-radius:50%;margin:-1px 2px 0 0;
  background:var(--panel);border:1.5px solid color-mix(in srgb,var(--idea) 45%,var(--line))}
.brrow .bmnote:active{background:color-mix(in srgb,var(--idea) 22%,var(--panel))}
.brnlinks{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.brnlinks a{font-size:12.5px;color:var(--dev);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brnlinks a:hover{text-decoration:underline}

/* 정제소 현황판의 상태 갈래 — 숫자 하나가 아니라 **다섯 상태**를 나란히 (2026-08-26) */
.fbstat .fbbreak{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:center}
.fbstat .fbbreak .fbst.z{opacity:.42}

/* 🟢 계정 보관함 — 지금 들어가 있는 사람 (2026-08-27 사용자).
   ID 옆에 붙어 「누가」를 그 자리에서 말한다. 막는 표시가 아니라 알려 주는 표시라
   붉은색을 쓰지 않는다 — 사고가 아니라 상태다 */
.vuse{display:inline-flex;align-items:center;gap:6px;flex:none}
.vusebtn{font-family:inherit;font-size:12px;font-weight:700;white-space:nowrap;
  color:var(--ink-faint);background:var(--panel2);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px;cursor:pointer;
  transition:border-color .13s,color .13s,background-color .13s}
.vusebtn:hover{border-color:var(--won);color:var(--won)}
.vuse.on .vusebtn{color:var(--won);border-color:color-mix(in srgb,var(--won) 40%,var(--line));
  background:color-mix(in srgb,var(--won) 10%,transparent)}
.vuse em{font-style:normal;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.vuse em b{font-weight:800}
.vuse em i{font-style:normal;font-size:11.5px;color:var(--ink-faint);margin-left:3px;
  font-family:var(--mono)}

/*
 * 🔗 내부 참조 칩 (3.64.0) — 글·카드가 🔐 금고 · 📦 공유함의 것을 가리킨다.
 * 옷은 **`.cardref` 그대로**다(왼쪽 색 띠 3px) — 같은 뜻(다른 자리를 가리킨다)에
 * 다른 모양을 쓰면 두 화면이 서로 다른 기능처럼 읽힌다.
 * 이름은 `iref` — 짧은 이름은 남의 규칙에 걸린다([[kore-css-name-collisions]]).
 */
.iref{display:flex;align-items:center;gap:9px;width:100%;margin-top:7px;text-align:left;
  font-family:inherit;cursor:pointer;padding:8px 11px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c,var(--ink-faint));
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.iref:hover{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.iref .ci{font-size:16px;flex:none}
.iref .ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.iref .ct b{font-size:14px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iref .cm{font-size:12px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iref .go{flex:none;font-size:12px;font-weight:800;color:var(--c,var(--ink-faint))}
/* 🔒 못 보는 사람이 보는 같은 줄 — **제목이 아예 안 온다**. 어디 것인지까지만 */
.iref.lk{border-left-color:var(--free);border-style:dashed;background:var(--panel2)}
.iref.lk .ct b{color:var(--ink-faint);font-weight:700}
.iref .x{flex:none;border:0;background:none;color:var(--ink-faint);font-size:12px;font-weight:800;
  padding:2px 5px;border-radius:6px}
.iref .x:hover{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}

/*
 * 📎 고르기 띠 — 「어디에 붙이러 왔는지」를 창고 화면이 계속 말한다.
 * 이게 없으면 화면을 옮긴 순간 맥락을 잃고, 돌아와서 방을 다시 찾아야 한다.
 * (`.pickbar` 는 브레인스토밍이 쓰고 있다 — 빌리면 그쪽 규칙이 따라온다)
 */
.rfbar{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--dev) 10%,var(--panel));
  border:1.5px solid var(--dev);border-radius:12px;padding:8px 13px;margin-bottom:11px;
  font-size:13.5px;font-weight:800;color:var(--dev)}
.rfbar .sp{flex:1}
.rfbar .x{border:1px solid color-mix(in srgb,var(--dev) 40%,var(--line));background:var(--panel);
  border-radius:8px;padding:2px 9px;font-size:12px;font-weight:800;color:var(--dev)}
.rfbar .x:hover{background:var(--dev);color:#fff}
/* 고르는 중에는 그 줄의 손이 **늘 보인다** — hover 로 숨기면 무엇을 눌러야 할지 모른다 */
.rfsend{border:1.5px solid var(--dev);background:var(--dev);color:#fff;border-radius:9px;
  padding:5px 11px;font-size:12.5px;font-weight:800;white-space:nowrap;flex:none}
.rfsend:hover{background:color-mix(in srgb,var(--dev) 85%,#000);color:#fff}
/* 붙여 둔 것 — 보내기 전 입력줄 위 */
/* 📦 공유함의 카드·줄에서 고를 때 — 손이 늘 보인다(hover 로 숨기면 뭘 눌러야 할지 모른다) */
.fxsendref{border:0;border-radius:7px;background:var(--dev);color:#fff;height:26px;padding:0 10px;
  font-size:12px;font-weight:800;white-space:nowrap;flex:none}
.fxsendref:hover{background:color-mix(in srgb,var(--dev) 85%,#000);color:#fff}
.fxc .fxhacts:has(.fxsendref){opacity:1}
.rfpend{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.rfchip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--dev);
  background:color-mix(in srgb,var(--dev) 8%,var(--panel));border-radius:99px;padding:3px 5px 3px 11px;
  font-size:12.5px;font-weight:800;color:var(--dev);max-width:100%}
.rfchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfchip .x{border:0;background:none;color:inherit;font-size:12px;font-weight:800;padding:0 4px}

/* 💬 채팅에 뜬 **업무 카드 조각** (2026-08-27 사용자) — 승격 배지(.promoted)의 반대편이라
   같은 뼈대를 쓰되 파트 색을 두른다: 「어느 파트의 일인가」가 한눈에 읽혀야 한다 */
.cardref{display:flex;align-items:center;gap:9px;width:100%;margin-top:7px;text-align:left;
  font-family:inherit;cursor:pointer;padding:8px 11px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c,var(--ink-faint));
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cardref:hover{box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.cardref .ci{font-size:16px;flex:none}
.cardref .ct{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cardref .ct b{font-size:14px;font-weight:800;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardref .cm{font-size:12px;color:var(--ink-faint)}
.cardref .go{flex:none;font-size:12px;font-weight:800;color:var(--c,var(--ink-faint))}

/* 📎 카드 첨부의 「공유함에 있음」 — 채팅 첨부 칩(.fpdup)과 **같은 옷**이다.
   같은 뜻에 다른 모양을 쓰면 두 화면이 서로 다른 기능처럼 읽힌다 (2026-08-27) */
.cfcard .cfdup{display:block;width:calc(100% - 2px);margin:4px 1px 0;font-family:inherit;
  font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:99px;padding:1px 7px;cursor:pointer;text-align:center;
  color:var(--won);background:color-mix(in srgb,var(--won) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--won) 32%,transparent)}
.cfcard .cfdup:hover{background:color-mix(in srgb,var(--won) 22%,transparent)}

/* 📎 첨부 칩의 겹침 표시 (2026-08-27) — 붙이는 그 자리에서 「이미 있다」를 말한다.
   누르면 「새로 올림」으로 바뀐다. 지금 붙인 것끼리의 중복(.twin)은 고를 것이 없어 단추가 아니다 */
.fpchip .fpdup{font-family:inherit;font-size:11px;font-weight:800;white-space:nowrap;
  border-radius:99px;padding:1px 7px;cursor:pointer;flex:none;
  color:var(--won);background:color-mix(in srgb,var(--won) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--won) 32%,transparent)}
.fpchip .fpdup:hover{background:color-mix(in srgb,var(--won) 22%,transparent)}
.fpchip .fpdup.off{color:var(--ink-faint);background:var(--panel2);border-color:var(--line)}
/* 📦 공유함에서 **골라 온** 파일 — 「공유함에 있음」이 고정이다.
   새로 올릴 실물이 애초에 없으니 고를 여지도 없다: .twin 과 같은 이유로 단추가 아니다 */
.fpchip .fpdup.fixed{font-style:normal;cursor:default}
.fpchip .fpdup.fixed:hover{background:color-mix(in srgb,var(--won) 12%,transparent)}
.fpchip .fpdup.twin{font-style:normal;cursor:default;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn) 32%,transparent)}
/* ⏳ 대용량 파일 해시 진행 (2026-08-28 사용자 — 「멈춰있다고 생각하지 않도록」).
   막대는 칩 안에 눕는다: 따로 띄우면 어느 파일 이야기인지가 사라진다.
   글자는 막대 **위**에 얹어 폭을 안 늘린다 — 칩이 진행률에 따라 들썩이면 안 된다 */
.fphash{position:relative;display:inline-flex;align-items:center;flex:none;
  height:20px;min-width:172px;padding:0 8px;border-radius:7px;overflow:hidden;
  background:color-mix(in srgb,var(--dev) 14%,var(--panel2));border:1px solid var(--line2)}
.fphash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);
  background:color-mix(in srgb,var(--dev) 34%,transparent);transition:width .12s linear}
.fphash em{position:relative;font-style:normal;font-size:11px;font-weight:800;
  color:var(--dev);white-space:nowrap;font-variant-numeric:tabular-nums}

/* 📎 「이미 올라와 있는 파일입니다」 — 고르라고 띄운 창이라 바깥 클릭으로는 안 닫힌다.
   확인창 옷 규칙: 판은 배경색, 내용은 흰 둥근 박스(.mmbox 가 이미 그렇게 한다) */
.dupask .mmbox{width:min(420px,100%)}
.dupask .dupwhat{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.dupask .dupwhat .nm{font-weight:800;font-size:14.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dupask .dupwhat .dim{font-size:12.5px;color:var(--ink-faint);flex:none;font-family:var(--mono)}
.dupask .dupwhere{margin-top:6px;font-size:12.5px;color:var(--ink-soft);
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 10px}

/* 🔔 나를 기다림 — 쓰다 만 카드 줄과 같은 문법(줄 + 칩), 색만 다르다.
   개수를 세는 배지 옆에 **자리**가 없어서 「어디 있는지 모를 알림」이 됐다 (2026-08-26) */
.bdwait{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding:9px 12px;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--free) 45%,var(--line));
  background:color-mix(in srgb,var(--free) 7%,transparent)}
.bdwait b{font-size:13.5px;color:var(--free)}
.bdwait .bdwc{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 10px;
  cursor:pointer;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .13s,color .13s}
.bdwait .bdwc:hover{border-color:var(--free);color:var(--free)}
.confirmflow .cf.gone{opacity:.5;text-decoration:line-through}

/* 회의 취소 — 주최자에게만 보이고, 카드 아래 눈에 덜 띄는 자리에 둔다.
   자주 누를 것이 아니라 「있다는 것만 알면 되는」 동작이다 */
.room .mcancel{width:100%;margin-top:8px;border:1px solid var(--line);background:none;
  border-radius:9px;padding:6px;font-size:13px;font-weight:700;color:var(--ink-faint);
  font-family:inherit;cursor:pointer;transition:color .13s,border-color .13s}
.room .mcancel:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}

/* 임시저장 표시 — 구석에 한 줄. 뒤에서 도는 일이라 화면 가운데를 차지하지 않는다.
   칸 자체에 색을 칠하는 방식은 접었다: 다시 그릴 때마다 색이 붙었다 사라져 깜빡였다. */
.draftpip{position:fixed;left:16px;bottom:20px;z-index:198;pointer-events:none;
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:13px;font-weight:700;color:var(--ink-faint);white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.draftpip.on{opacity:1;transform:translateY(0)}
@media(max-width:860px){.draftpip{bottom:calc(70px + env(safe-area-inset-bottom,0px));left:10px}}

/* 카드 상세 */
.cardsheet{position:fixed;inset:0;z-index:84;background:rgba(10,14,22,.52);
  display:flex;justify-content:flex-end}
.csbox{position:relative;width:min(720px,100%);background:var(--bg);border-left:1px solid var(--line);
  overflow-y:auto;padding:20px 24px 40px;box-shadow:-14px 0 40px rgba(10,14,22,.25)}
/* ✕ 와 ⋯ — 시트를 내려도 따라오는 오른쪽 위 도구 묶음.
   지우기는 ⋯ 안이다. 되돌릴 수 없는 동작을 늘 보이는 자리에 두지 않는다. */
.cstools{position:sticky;top:0;float:right;z-index:5;display:flex;gap:6px}
.csx,.csdots{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  width:30px;height:30px;font-size:16px}
.csdots{font-size:17px;font-weight:800;color:var(--ink-faint);line-height:1}
.csdots:hover{color:var(--ink);border-color:var(--line2)}
.csmenuwrap{position:relative}
.csmenu{position:absolute;top:36px;right:0;width:252px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px;z-index:6;
  box-shadow:0 12px 28px rgba(10,14,22,.28);display:flex;flex-direction:column;gap:7px}
.csmenu.hide{display:none}
/* 메뉴 항목은 **기본이 평범한 톤**이다 (2026-08-27 사용자: 「이 카드 지우기랑 같은 톤이라
   자연스럽지 않다」). 여태 항목이 지우기 하나뿐이라 빨강을 .mi 에 발라 뒀는데, 항목이
   늘자 평범한 동작까지 위험해 보였다. 붉은 것은 **되돌릴 수 없는 것**뿐이다 */
.csmenu .mi{width:100%;text-align:left;font-family:inherit;font-size:14.5px;font-weight:700;
  border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;background:var(--bg);color:var(--ink);cursor:pointer}
.csmenu .mi:hover{background:var(--panel2);border-color:var(--ink-faint)}
.csmenu .mi.danger{border-color:color-mix(in srgb,var(--red) 30%,var(--line));color:var(--red)}
.csmenu .mi.danger:hover{background:color-mix(in srgb,var(--red) 10%,var(--bg));border-color:var(--red)}
.csmenu .note{font-size:12.5px;color:var(--ink-faint);line-height:1.6}
/* 오른쪽 80px 은 ⋯·✕ 도구가 앉는 자리다. 그 아래 줄(담당)은 그 자리를 안 쓰므로
   음수 마진으로 되찾는다 — 폭을 **한 값**으로 묶어 둘이 어긋나지 않게 (3.37.5) */
.cshead{--cstools-w:80px;padding-right:var(--cstools-w);margin-bottom:12px}
/* 카드 머리글 — .shead .eb 와 같은 꼴이지만 그 규칙은 여기까지 오지 않는다.
   전용 규칙이 없어 본문 크기(14px)로 커져 있었고, 그 바람에 「등록 전」 알약이
   줄 높이를 넘어 아래 선택 줄과 겹쳤다. */
.cshead .eb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;line-height:1.7;
  color:var(--ink-faint);margin-bottom:9px}
/* 등록 전 — 이 카드는 아직 만든 사람 화면에만 있다 */
.csbox.unreg{border-left:3px solid var(--warn)}
/* 클래스 이름은 unreg 다 — .draft 는 작업소 AI 초안 카드가 이미 쓰고 있고(display:flex),
   그 규칙이 같이 걸리면 시트 내용이 가로로 늘어선다. 실제로 그렇게 깨졌다. */
.draftpill{flex:none;background:color-mix(in srgb,var(--warn) 16%,transparent);
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);
  border-radius:999px;padding:2px 9px;font-family:inherit;font-size:11.5px;
  letter-spacing:.06em;line-height:1.5;white-space:nowrap}
/* 아래에 붙어 따라온다 — 모듈을 채우며 한참 내려가도 「이제 올린다」가 손에 닿아야 한다 */
.csreg{position:sticky;bottom:-40px;margin:18px -24px -40px;padding:13px 24px 18px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.csreg .regbtn{flex:none;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;
  background:var(--dev);color:#fff;border:none;border-radius:10px;padding:10px 20px;
  transition:filter var(--t-fast) var(--ease)}
.csreg .regbtn:hover{filter:brightness(1.08)}
.csreg span{font-size:13px;color:var(--ink-faint);line-height:1.6;flex:1;min-width:160px}
.csreg .dropbtn{flex:none;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink-faint);
  transition:color .13s,border-color .13s}
.csreg .dropbtn:hover{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
/* 제목은 곧 입력칸이다 — 승격할 때 제목을 묻지 않고 나중에 고치게 하는 구조라
   "읽기 전용처럼 보이지만 눌리는" 상태가 되면 아무도 고치지 않는다 */
/* 제목은 조립 아래에 온다 — 진열대와 붙으면 조립의 일부처럼 보여 위를 띄운다 */
/* 3.37.2 (사용자 — 「제목칸만 삐뚤어져 있어」) — 옛 margin-left:-8px 는 글자를 컨테이너
   왼끝에 맞추는 트릭이었는데, 메모·모듈이 전부 **박스**로 정렬된 지금은 제목 박스만
   왼쪽으로 튀어나온다. 기준을 글자에서 박스로 바꾼다: 패딩은 메모칸(13px+1px 테두리)과
   글자 선이 맞는 값으로. */
.cstitle{width:100%;font-size:21px;font-weight:800;letter-spacing:-.02em;margin:14px 0 10px;
  font-family:inherit;color:var(--ink);background:transparent;border:1.5px solid transparent;
  border-radius:9px;padding:5px 12px}
.cstitle:hover{border-color:var(--line2);background:var(--panel)}
.cstitle:focus{border-color:var(--dev);background:var(--panel);outline:none}
.csmeta{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* 아직 정하지 않은 마감일 — 오늘이 출발점으로 떠 있을 뿐이라 흐리게 둔다.
   진하게 두면 「오늘까지」로 정해 놓은 카드와 구분이 안 된다. */
.csmeta input.unset{opacity:.45;border-style:dashed}
.csmeta input.unset:hover,.csmeta input.unset:focus{opacity:1;border-style:solid}
/* 마감을 정하지 않았을 때만 나온다 — 정하고 나면 사라지므로 자리를 계속 차지하지 않는다 */
.csmeta .duetoday{padding:5px 8px;font-size:13px;opacity:.7}
.csmeta .duetoday:hover{opacity:1}
.csmeta select,.csmeta input{border:1.5px solid var(--line);background:var(--panel);border-radius:9px;
  padding:6px 9px;font-size:14px;color:var(--ink)}
/* 누르면 원본 메시지로 간다 — 버튼이라 폭·정렬을 직접 잡아준다 */
.csrc{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--prod) 7%,var(--panel));border:1px dashed color-mix(in srgb,var(--prod) 35%,var(--line));
  border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--ink-soft);margin-bottom:11px;line-height:1.6;
  transition:background .13s ease,border-color .13s ease}
.csrc:hover{background:color-mix(in srgb,var(--prod) 13%,var(--panel));border-color:var(--prod)}
.csrc .go{color:var(--prod);font-weight:700;white-space:nowrap}
/* 배경은 읽기 전용이 아니라 입력칸이다 — 새 카드를 시트에서 바로 채우는 구조라 여기서 써야 한다 */
.csbody{width:100%;font-family:inherit;font-size:15px;color:var(--ink-soft);line-height:1.7;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  margin-bottom:11px;resize:vertical;min-height:52px;
  /* 높이는 growBody 가 글 길이만큼 잡는다(상한 420) — overflow 는 그 상한을 넘겼을 때만 */
  max-height:420px;overflow-y:auto}
.csbody:focus{outline:none;border-color:var(--dev);color:var(--ink)}
/*
 * 📝 메모의 **읽는 모습** (2026-08-26 사용자) — 고치는 칸과 같은 상자, 같은 여백이라
 * 눌렀을 때 글이 튀지 않는다. 안쪽 태그는 전부 여기 아래에서만 산다:
 * h3·ul·blockquote 를 전역에 풀면 남의 화면이 같이 바뀐다(style.css 는 단일 파일이다).
 */
.csbodyview{width:100%;font-size:15px;color:var(--ink-soft);line-height:1.7;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  margin-bottom:11px;min-height:52px;max-height:420px;overflow-y:auto;cursor:text}
.csbodyview:hover{border-color:color-mix(in srgb,var(--dev) 35%,var(--line))}
.csbodyview > *:first-child{margin-top:0}
.csbodyview > *:last-child{margin-bottom:0}
.csbodyview p{margin:0 0 7px}
.csbodyview h3,.csbodyview h4,.csbodyview h5{color:var(--ink);font-weight:800;line-height:1.4;
  margin:13px 0 6px}
.csbodyview h3{font-size:16.5px}
.csbodyview h4{font-size:15px}
.csbodyview h5{font-size:14px;color:var(--ink-soft)}
.csbodyview ul,.csbodyview ol{margin:0 0 7px;padding-left:20px}
.csbodyview li{margin:2px 0}
.csbodyview li.mdck{list-style:none;margin-left:-16px}
.csbodyview li.mdck.on{color:var(--ink-faint);text-decoration:line-through}
.csbodyview blockquote{margin:0 0 7px;padding:2px 0 2px 10px;border-left:3px solid var(--line2);
  color:var(--ink-faint)}
/* 나눔선 — 점선 + 가장 옅은 선이라 사실상 안 보였다 (3.37.6 사용자: 「보이지도 않아」).
   실선 --line 으로 올린다: 문서(MD 안내)가 이 규칙을 그대로 비추므로 여기가 원본이다 */
.csbodyview hr{border:0;border-top:1px solid var(--line);margin:11px 0}
.csbodyview b{color:var(--ink);font-weight:800}
.csbodyview a{color:var(--dev)}
.csbodyview pre{margin:0 0 8px}
.csmod{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.csmh{display:flex;gap:7px;align-items:baseline;font-size:14.5px;font-weight:800;margin-bottom:8px}
.csmh span{font-size:12.5px;color:var(--ink-faint);font-weight:600}

/* 접힌 모듈 — 비어 있는 동안만 이 모습이다. 한 줄이라 여러 개가 쌓여도 벽이 되지 않는다.
   손잡이(＋/−)를 오른쪽 끝에 두어 "눌러서 여는 것"임을 줄 자체로 말하게 한다. */
.csmod.fold{padding:9px 14px;cursor:pointer}
.csmod.fold:hover{border-color:var(--line);background:var(--panel2)}
.csmod.fold .csmh{margin-bottom:0}
.csmh[data-exp]{cursor:pointer}
.foldx{margin-left:auto;font-weight:800;font-size:15px;color:var(--ink-faint)}
.csmh[data-exp]::after{content:"−";margin-left:auto;font-size:15px;color:var(--ink-faint)}
.csnone{font-size:13.5px;color:var(--ink-faint)}
.ckrow2{display:flex;gap:9px;align-items:center;padding:6px 0;font-size:14.5px;
  border-bottom:1px dashed var(--line2);cursor:pointer}
.ckrow2:last-of-type{border-bottom:0}
.ckrow2 .box{width:16px;height:16px;border-radius:5px;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:12px;color:#fff}
.ckrow2.done .box{background:var(--won);border-color:var(--won)}
.ckrow2.done .box::after{content:"✓"}
.ckrow2.done .lb{text-decoration:line-through;color:var(--ink-faint)}
.ckrow2 .lb{flex:1}
.ckx{border:0;background:none;color:var(--ink-faint);font-size:13px;opacity:0}
.ckrow2:hover .ckx{opacity:1}
/* ✋ 끌기 손잡이 (2026-08-25 사용자) — hover 로만 나타나면 있는 줄도 모른다.
   늘 보이되 아주 흐리게, 손을 올리면 또렷해진다. 줄 전체가 끌리지만 「끌 수 있다」는
   말은 이 글리프가 한다 */
.ckgrip{flex:none;color:var(--line);font-size:12px;line-height:1;cursor:grab;
  opacity:.55;transition:opacity .12s var(--ease),color .12s var(--ease);user-select:none}
.ckrow2:hover .ckgrip{opacity:1;color:var(--ink-faint)}
.ckrow2.ckdragging{opacity:.45;background:var(--panel2);border-radius:8px}
.ckrow2.ckdragging .ckgrip{cursor:grabbing}
.ckadd{margin-top:7px}
.ckadd input{width:100%;border:1.5px dashed var(--line);background:none;border-radius:9px;
  padding:7px 10px;font-size:14px;color:var(--ink)}
.ckadd.upl{display:block;border:1.5px dashed var(--line);border-radius:9px;padding:7px 10px;
  font-size:13.5px;color:var(--ink-faint);text-align:center;cursor:pointer;margin-top:7px}
.csfile{display:flex;gap:8px;align-items:center;font-size:14px;padding:5px 0;
  color:var(--ink-soft);text-decoration:none}
.csfile span{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}
.csho{font-size:14px;color:var(--ink-soft);line-height:1.6;background:color-mix(in srgb,var(--free) 7%,var(--panel));
  border-radius:9px;padding:9px 11px}
.hoform{display:flex;flex-direction:column;gap:7px}
.hoform select,.hoform textarea{border:1.5px solid var(--line);background:var(--panel2);
  border-radius:9px;padding:8px 10px;font-size:14.5px;color:var(--ink);font-family:inherit;resize:vertical}
.csact{display:flex;gap:7px;align-items:baseline;font-size:13.5px;color:var(--ink-soft);
  padding:4px 0;border-bottom:1px dashed var(--line2)}
.csact:last-child{border-bottom:0}
.csact b{color:var(--ink)}
.csact span{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}

/* 눌러서 갈 곳이 있는 토스트 — 손 모양과 밑줄이 「누를 수 있다」를 말한다 */
#toast.go{cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
.undo{position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(70px);
  background:#2A3242;color:#fff;border-radius:11px;padding:9px 15px;font-size:14.5px;font-weight:700;
  box-shadow:var(--shadow);opacity:0;transition:transform .22s,opacity .22s;z-index:199;
  display:flex;align-items:center;gap:10px}
.undo.on{transform:translateX(-50%) translateY(0);opacity:1}
.undo button{border:0;background:none;color:#8CF2B4;font-weight:800;font-size:14.5px}

/* .kcol 은 존재한 적 없는 클래스였다(실제는 .col) — 모바일 열 폭 보정이 한 번도 안 먹었다 (06 사양 버그픽스) */
@media(max-width:860px){.col{flex:0 0 190px;min-width:190px}.csbox{padding:16px 14px 30px}
  /* 시트 좌우 여백이 줄어드는 만큼 등록 바의 음수 여백도 같이 줄인다 */
  .csreg{margin:16px -14px -30px;padding:12px 14px 16px;bottom:-30px}}

/* ── 파일 · 미리보기 ── */
.fileblock{margin-top:6px;max-width:380px}
.filecard .fopen{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--dev);flex:none}
.filecard .fdl{font-size:16px;color:var(--ink-faint);text-decoration:none;flex:none;padding:0 2px}
.filecard .fdl:hover{color:var(--ink)}
.filecard[data-open]{cursor:pointer}
.finline{width:100%;margin-top:6px;height:34px}
.imgwrap img{cursor:zoom-in}

.viewer{position:fixed;inset:0;z-index:88;background:rgba(8,11,18,.82);
  display:flex;flex-direction:column;padding:18px}
.viewer .vbar{display:flex;align-items:center;gap:12px;color:#fff;padding:0 4px 12px;flex:none}
.viewer .vbar b{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer .vdl{margin-left:auto;color:#C6D0E2;font-size:14px;font-weight:700;text-decoration:none;
  border:1px solid #2E3C5C;border-radius:8px;padding:5px 11px;flex:none}
.viewer .vdl:hover{color:#fff}
.viewer .vx{border:0;background:none;color:#C6D0E2;font-size:20px;flex:none}
.viewer .vbody{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.viewer img,.viewer video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
/* 🔍 확대 — 휠로 키우고, 눌러서 1↔2배, 확대된 동안 끌어서 이동 (3.48.3 사용자).
   손 모양이 「지금 뭘 할 수 있는지」를 말한다: 1배는 돋보기, 확대되면 쥘 수 있는 손 */
.viewer img[data-vzoom]{cursor:zoom-in;transform-origin:center center;
  transition:transform .12s var(--ease);will-change:transform;
  /* 기본 이미지 끌기·글자 선택을 끈다 — 끌기가 시작되면 포인터 순서를 가로채
     손을 떼도 안 놓인다. touch-action:none 은 폰에서 이동이 스크롤에 안 먹히게 한다 */
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;touch-action:none}
.viewer img[data-vzoom].zoomed{cursor:grab;transition:none}
.viewer img[data-vzoom].zoomed:active{cursor:grabbing}
.viewer iframe{width:100%;height:100%;border:0;border-radius:8px;background:#fff}
.viewer /* 🌐 HTML 미리보기 — 목업을 그려서 본다. 흰 바탕을 깔아 준다(투명 배경이면 뷰어의
   검은 판이 비쳐 목업이 어둡게 보인다) */
.vhtml{width:100%;height:100%;border:0;border-radius:10px;background:#fff}
/* 미리보기 ↔ 코드 — 타게팅 세그먼트와 같은 기하(.tgseg), 색만 뷰어의 것 */
.vseg{display:inline-flex;background:rgba(255,255,255,.12);border-radius:9px;padding:2px;gap:2px;
  margin-left:10px;flex:none}
.vseg button{border:0;background:none;color:rgba(255,255,255,.72);font-weight:700;font-size:12.5px;
  padding:4px 12px;border-radius:7px;cursor:pointer}
.vseg button:hover{color:#fff}
.vseg button.on{background:rgba(255,255,255,.9);color:#141a24}
.vtext{width:100%;height:100%;overflow:auto;margin:0;padding:16px 18px;
  background:var(--panel);border-radius:10px;font-family:var(--mono);font-size:14.5px;
  line-height:1.7;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word}
@media(max-width:860px){.viewer{padding:10px}}

/* ── 브리핑 카드 (03) ── */
.briefbox{position:fixed;right:18px;bottom:150px;z-index:76;width:min(380px,calc(100vw - 28px));
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;max-height:60vh;display:flex;flex-direction:column}
.briefbox .bhead{display:flex;align-items:center;gap:8px;padding:10px 13px;font-size:15px;
  font-weight:800;background:color-mix(in srgb,var(--dev) 10%,var(--panel));flex-wrap:wrap;
  cursor:move;user-select:none}
.briefbox .bsub{font-size:12.5px;font-weight:600;color:var(--ink-faint)}
.briefbox .bx{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:16px}
.briefbox .bbody{padding:12px 14px;overflow-y:auto;font-size:14.5px;line-height:1.72;color:var(--ink-soft)}
.briefbox .bbody h3,.briefbox .bbody h4{font-size:14px;font-weight:800;color:var(--ink);margin:11px 0 4px}
.briefbox .bbody h3:first-child,.briefbox .bbody h4:first-child{margin-top:0}
.briefbox .bbody ul{margin:0;padding-left:16px}
.briefbox .bbody li{margin:3px 0}
.briefbox .bfoot{display:flex;gap:6px;padding:9px 13px;border-top:1px dashed var(--line2)}
.briefbox .bfoot .mini{flex:1}
.briefbox .bwait{padding:18px 14px;font-size:14.5px;color:var(--ink-faint);
  display:flex;align-items:center;gap:9px}
.briefbox .bwait.plain{justify-content:center;text-align:center}
.briefbox .dots{display:flex;gap:3px}
.briefbox .dots i{width:5px;height:5px;border-radius:50%;background:var(--dev);
  animation:bdot 1.2s infinite}
.briefbox .dots i:nth-child(2){animation-delay:.2s}
.briefbox .dots i:nth-child(3){animation-delay:.4s}
@keyframes bdot{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:860px){.briefbox{right:8px;left:8px;width:auto;bottom:auto;top:8px;max-height:70vh}}

/* ── T-1 입장 게이트 ── */
.gate{position:fixed;inset:0;z-index:85;background:rgba(10,14,22,.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px 20px 20px calc(20px + var(--railw))}
.gatebox{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px;box-shadow:var(--shadow);text-align:center}
.gtop{font-size:18px;font-weight:800;margin-bottom:4px}
.gsub{font-size:14px;color:var(--ink-faint);margin-bottom:16px}
.gsub span{font-family:var(--mono);font-weight:700}
.gacts{display:flex;flex-direction:column;gap:7px}
.gbtn{border:1.5px solid var(--line);background:var(--panel);border-radius:11px;
  padding:11px;font-size:15.5px;font-weight:800}
.gbtn.go{background:var(--won);border-color:var(--won);color:#fff;font-size:15.5px}
.gbtn.thin{border:0;background:none;color:var(--ink-faint);font-weight:600;
  font-size:14px;text-decoration:underline;padding:6px}
.gnote{font-size:13px;color:var(--ink-faint);line-height:1.55;margin-top:13px;
  border-top:1px dashed var(--line2);padding-top:11px}

/* 출근 게이트 — 디스코드 음성에 붙어 있어야 앱이 열린다.
   **`.gate` 뒤에 와야 한다.** 같은 특이도(클래스 1개)라 앞에 두면 `.gate` 의 z-index:85 와
   옅은 배경이 이겨서, 덮개가 다른 오버레이 아래에 깔리고 흐릿하게 뜬다(실제로 그랬다).
   레일까지 덮는다 — 출근 전에는 메뉴도 누를 수 없어야 한다. */
.wgate{z-index:95;background:rgba(10,14,22,.86);padding-left:20px}
.wgate .gatebox{max-width:420px}

/* 회의 stage·음성 바·오디오 바 CSS 는 2026-08-06 에 걷어냈다 —
   음성·화상·화면공유·회의 채팅 열이 전부 디스코드로 갔다. */

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(70px);
  background:#2A3242;color:#fff;border-radius:12px;padding:11px 18px;font-size:15px;font-weight:700;
  box-shadow:var(--shadow);opacity:0;transition:transform .25s,opacity .25s;z-index:200;max-width:90vw;text-align:center}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}

/* ── 멘션 뱃지 ── */
.nav .bdg.at,.chlist button .n.at{background:var(--warn)}
.nav .kbd,.palhead .kbd{margin-left:auto;font-family:var(--mono);font-size:11.5px;opacity:.5;
  border:1px solid currentColor;border-radius:5px;padding:1px 5px;flex:none}

/* ── 코드블록 ── */
.codewrap{margin-top:7px;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--panel2);max-width:100%}
.codebar{display:flex;align-items:center;gap:8px;padding:5px 10px;border-bottom:1px solid var(--line2);
  font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.codebar .lang{font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.codebar .ccopy{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:12.5px;
  font-weight:700;padding:2px 6px;border-radius:5px}
.codebar .ccopy:hover{background:var(--line2);color:var(--ink)}
pre.code{margin:0;padding:10px 12px;overflow-x:auto;font-family:var(--mono);font-size:14px;
  line-height:1.65;color:var(--ink-soft);white-space:pre}
.cmore{width:100%;border:0;border-top:1px dashed var(--line);background:var(--panel);
  color:var(--dev);font-size:13.5px;font-weight:700;padding:7px}
code.inline{font-family:var(--mono);font-size:14.5px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:5px;padding:1px 5px}

/* ── 검색 팔레트 ── */
.palette{position:fixed;inset:0;background:rgba(10,14,22,.5);z-index:90;
  display:flex;align-items:flex-start;justify-content:center;
  padding:70px 16px 16px calc(16px + var(--railw))}
.palbox{width:min(620px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:78vh}
.palhead{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line)}
.palhead .palic{font-size:17px}
.palhead input{flex:1;border:0;background:none;font-size:17px;outline:none}
.palfilters{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.palchip{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;
  padding:4px 11px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.palchip.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 10%,var(--panel))}
.palchip.clear{border-color:var(--red);color:var(--red);margin-left:auto}
.palsel{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;
  padding:4px 9px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.palresults{flex:1;overflow-y:auto;padding:6px}
.palrow{display:flex;gap:10px;align-items:flex-start;width:100%;border:0;background:none;
  border-radius:10px;padding:9px 10px;text-align:left}
.palrow:hover{background:var(--panel2)}
.palrow .pavt{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:13.5px;background:color-mix(in srgb,var(--c) 20%,var(--panel));color:var(--c)}
.palrow .pw{flex:1;min-width:0}
.palrow .pmeta{display:block;font-size:12.5px;color:var(--ink-faint)}
.palrow .pmeta b{color:var(--ink)}
.palrow .psnip{display:block;font-size:14.5px;color:var(--ink-soft);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.palrow .pfile{flex:none;opacity:.6}
/* 🖼️ 검색 결과 썸네일 (2026-08-20) — 이미지·링크 OG. 원본을 lazy 로드하므로 칸만 잡는다 */
.palrow .palthumb{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;
  border:1px solid var(--line2);background:var(--panel2)}
.palhint{padding:24px 14px;text-align:center;font-size:14.5px;color:var(--ink-faint)}
.palfoot{border-top:1px solid var(--line2);padding:8px 14px;font-size:12.5px;color:var(--ink-faint)}
.msg.hit{background:color-mix(in srgb,var(--warn) 16%,var(--panel));transition:background .4s}

/* ══════════════════════════════════════════════
   모바일 — 리뷰 R1(민지 T1) 최우선 항목
   레일이 화면의 절반을 먹어 채팅 폭이 0이 되던 문제.
   레일을 상단 바로 접고, 채널은 가로 스크롤로 뺀다.
   ══════════════════════════════════════════════ */
@media (max-width:860px){
  /* ── 모바일 ──
     레일을 상단에 가로로 눕히면 메뉴 9개가 한 칸 41px 이 된다 — 이름도 안 보이고 터치도 안 된다.
     그래서 구조를 바꾼다:
       · 자주 쓰는 넷 + 검색 → **하단 탭바**(엄지가 닿는 자리)
       · 나머지 메뉴 · 내 상태 · 오디오 → ☰ 를 누르면 **레일이 통째로 시트**로 올라온다
     마크업은 한 벌 그대로다. 시트가 곧 레일이다. */
  .app{flex-direction:column}
  main{height:auto;min-height:0;padding-bottom:var(--tabh)}

  .tabbar{display:flex}
  .sheetback{display:block}

  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;
    max-height:min(78vh,560px);overflow-y:auto;z-index:71;
    border-radius:16px 16px 0 0;padding:14px 12px calc(70px + env(safe-area-inset-bottom,0px));
    transform:translateY(101%);transition:transform .22s ease;
    box-shadow:0 -14px 40px rgba(0,0,0,.4)}
  .app.sheet .rail{transform:translateY(0)}
  .app.sheet .sheetback{opacity:1;pointer-events:auto}
  /* 🗨 사라지는 중인 채팅 창은 손을 안 받는다 — 열리지 않은 창이 화면을 덮은 채로 남으면
     그 밑이 통째로 먹통이 된다(백그라운드에서 타이머가 늦게 도는 자리) */
  #v-chat.float:not(.open){pointer-events:none}

  /* 시트 안에서는 세로 목록이 자연스럽다 — 데스크톱 레일과 같은 모양 */
  .rail .logo{padding:0 4px 12px}
  .nav{flex-direction:column;gap:2px}
  .nav button{padding:11px 12px;font-size:15.5px}
  .nav .kbd{display:none}
  .rail .grp{display:none}
  .rail-label{display:block}

  .me{margin-top:12px;padding-top:10px}
  .me .who{padding:0 4px 10px}
  .stnow{margin-bottom:8px}
  .stpop{bottom:calc(100% + 6px);top:auto;left:0;right:0;width:auto}
  /* 오디오바는 시트 안에서도 자리를 지킨다 (§6-2) */
  .audiobar{flex-direction:column;gap:3px}
  .abnet{display:flex}
  .abwarn{position:static;margin:2px 4px 0}
  .logout{width:100%;padding:10px 0 0}

  .office{padding:14px 12px 30px}

  /* 채팅 — 화면 제목은 접고(채널이 곧 맥락), 채널 칩이 목록을 대신한다. 스레드는 전체 시트 */
  #v-chat .shead{display:none}
  /* 세로 한 줄로 바꾸되 **높이 문법은 데스크톱 그대로 둔다**(flex:1 · 행 minmax(0,1fr)).
     예전엔 여기서 flex:none 으로 끄고 `.cmain{min-height:calc(100vh - 190px)}` 로
     높이를 눈대중했다. 190 은 상단바+칩줄+탭바를 더한 짐작이라 실제(72)와 118px 어긋났고,
     그만큼 대화 패널이 화면 중간에서 끝나 **입력칸이 탭바에서 떠 있었다.**
     문법에 맡기면 어긋날 수가 없다 — 아래 .composer 의 sticky 도 그래서 필요 없어졌다. */
  .chat,.chat.nothread{grid-template-columns:1fr}
  /* 채팅만 **앱 껍데기**로 둔다 — 화면 높이에 못 박고, 스크롤은 대화 목록(.msgs) 안에서만.
     다른 화면은 페이지째 스크롤하는 게 맞지만(글은 위에서 아래로 읽는다), 채팅은
     입력칸이 늘 손 닿는 자리에 있어야 한다. 페이지가 밀리면 입력칸이 화면 밖으로 나간다.
     아래 여백(.office 의 30px)도 뗀다 — 여기서는 그게 곧 「탭바에서 떠 있는 거리」다.
     main 이 아래로 탭바 높이만큼 이미 비워 두므로 그만큼 빼면 탭바 바로 위에서 끝난다.
     flex:none 가 함께 있어야 한다 — .view 의 flex:1 은 세로 배치에서 flex-basis:0 이
     height 를 밀어내서, 화면이 다시 내용만큼 늘어난다. */
  #v-chat{flex:none;padding-bottom:0;height:calc(var(--vh100) - var(--tabh))}
  .chat .ch-list{display:none}
  .chat .cmain,.chat .thread{grid-column:1}
  .chat .cmain,.chat:not(.nothread) .cmain{border-radius:14px;border-right:1px solid var(--line)}
  .chchips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 10px;scrollbar-width:none;
    flex:none;border-bottom:1px solid var(--line)}
  .chchips::-webkit-scrollbar{display:none}
  /* 주제는 접어 둔다 — 좁은 화면에서 매번 보일 필요는 없지만 없어서는 안 된다 */
  /* (주제 접기·caret 은 은퇴 — 2026-08-21 머리 재설계. 모바일 주제는 안 그린다) */
  .msgs{padding:12px 12px}
  /* 입력칸은 대화 패널의 **마지막 칸**이다 — 패널이 탭바 바로 위까지 차므로
     sticky 없이도 탭바에 붙는다. 대화는 .msgs 안에서 스크롤한다(입력칸은 안 움직인다). */
  .composer{padding:9px 12px;background:var(--bg)}
  /* 스레드는 화면을 통째로 덮는데 z:70 < 탭바 z:72 라 아래쪽이 탭바에 먹힌다.
     그만큼 비워 두면 스레드 입력칸도 탭바 바로 위에 앉는다. */
  .thread{position:fixed;z-index:70;border-left:0;background:var(--bg);
    inset:0 0 var(--tabh) 0}
  .thread.hide{display:none}
  /* 검색 팔레트 = 위에서 내려오는 시트 (2026-08-21 사용자 — 「모바일에서 문제」).
     좁은 화면에서 떠 있는 박스는 키보드가 올라오면 반쯤 가려졌다. 전폭으로 위에 붙이고,
     높이는 dvh(키보드가 차지한 만큼 줄어드는 단위)로 잰다 — 결과 목록이 키보드 뒤로
     숨지 않는다. 아래 남는 배경을 누르면 평소처럼 닫힌다. */
  .palette{padding:0;align-items:stretch}
  .palbox{width:100%;max-height:88vh;max-height:78dvh;border-radius:0 0 16px 16px;
    border-left:0;border-right:0;border-top:0}
  .palhead input{font-size:16.5px}   /* 16px 미만이면 iOS 가 화면을 확대해 버린다 */
  .palhead .kbd{display:none}        /* Esc 는 키보드 없는 기기의 안내가 아니다 (2026-08-21) */

  /* 떠 있는 것들이 탭바에 가리지 않게 */
  .toast{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .knockcard{right:8px;left:8px;width:auto}
  .undo{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ══════════════ M4 · 작업소 ══════════════
   목업 v2의 화면을 그대로 옮긴다. 폰 프레임은 장식이 아니라 "이 화면은 폰에서 이렇게 보인다"를
   PC에서 확인하기 위한 것이다 — 프리랜서 대부분이 폰으로 들어온다. */
.work-wrap{display:grid;grid-template-columns:390px 1fr;gap:22px;align-items:start}
@media(max-width:880px){.work-wrap{grid-template-columns:1fr}}
.phone{
  border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--panel);
  box-shadow:var(--shadow);max-width:390px;
}
/* 밴드는 앱에서 유일하게 하드코딩된 브랜드 면이다. 여기가 **등급색(--g)** 을 먹으면
   승급이 화면 전체 색으로 체감된다 — CSS 한 줄로 얻는 가장 큰 효과다.
   동시에 밴드는 항상 어두워서 금액 대비(흰 활자·초록 게이지)는 등급과 무관하게 유지된다. */
.ph-head{background:linear-gradient(150deg,
    color-mix(in srgb,var(--g,var(--free)) 24%,#2E2452),
    color-mix(in srgb,var(--g,var(--free)) 52%,#503795));
  color:#fff;padding:17px 18px 15px;transition:background .8s ease}
.ph-head .r1{display:flex;justify-content:space-between;align-items:baseline}
.ph-head .lab{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#B8A8E8}
.ph-head .qn{font-family:var(--mono);font-size:13px;color:#CFC2F2;font-weight:700}
.ph-head .won{font-family:var(--mono);font-size:27px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.ph-head .won em{font-style:normal;color:#8CF2B4;font-size:17px;font-weight:700;margin-left:7px}
.ph-head .sub{display:flex;gap:14px;font-size:13px;color:#CFC2F2;margin-top:3px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ph-head .sub b{color:#fff}
.gbar{height:7px;background:rgba(255,255,255,.22);border-radius:99px;margin-top:11px;overflow:hidden}
.gbar i{display:block;height:100%;width:40%;background:#8CF2B4;border-radius:99px;transition:width .5s ease}
.gcap{display:flex;justify-content:space-between;font-size:12px;color:#B8A8E8;margin-top:4px;font-family:var(--mono)}
.ph-body{padding:15px 16px 18px;position:relative;min-height:330px}
.task .src{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.task .kind{font-size:13px;font-weight:800;border-radius:99px;padding:3px 11px}
.task .price{margin-left:auto;font-family:var(--mono);font-size:17px;font-weight:800;color:var(--won);font-variant-numeric:tabular-nums}
.task .q{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;font-size:15.5px;line-height:1.55;margin-bottom:12px}
.task .q b{font-size:12.5px;color:var(--ink-faint);display:block;margin-bottom:3px;font-family:var(--mono);letter-spacing:.08em}
.ailab{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint);margin:0 2px 7px}
.draft{display:flex;align-items:flex-start;gap:9px;width:100%;border:1.5px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--panel);text-align:left;margin-bottom:6px;transition:border-color .12s,background .12s}
.draft .rdo{width:15px;height:15px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:3px;display:grid;place-items:center}
.draft .rdo i{width:7px;height:7px;border-radius:50%;background:transparent}
.draft .pr{font-size:12px;font-weight:800;color:var(--free)}
.draft .pt{font-size:14px;color:var(--ink-soft);line-height:1.5}
.draft.sel{border-color:var(--free);background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.draft.sel .rdo{border-color:var(--free)}
.draft.sel .rdo i{background:var(--free)}
.gobtn{width:100%;border:0;border-radius:12px;background:var(--won);color:#fff;font-weight:800;font-size:16px;padding:13px;margin-top:8px;transition:transform .08s}
.gobtn:active{transform:scale(.985)}
.skipbtn{display:block;width:100%;background:none;border:0;color:var(--ink-faint);font-size:13.5px;margin-top:8px;text-decoration:underline}
.fly{position:absolute;left:50%;top:2px;transform:translateX(-50%);font-family:var(--mono);font-weight:800;color:var(--won);font-size:19px;pointer-events:none;animation:flyup .9s ease-out forwards}
/* 층마다 색이 다르다 — 제출은 아직 돈이 아니라 주황, XP 는 놀이라 보라.
   제출 시점에 초록이 날아오르면 그게 정확히 「벌이 부풀리기」다. */
.fly.pend{color:var(--warn)}
.fly.xp{color:var(--free);font-size:16px}
@keyframes flyup{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-34px)}}
@media (prefers-reduced-motion:reduce){.fly{animation:none;opacity:0}*{transition:none!important}.room .rt .live-dot{animation:none}}
.alldone{text-align:center;padding:52px 10px}
.alldone .big{font-size:38px}
.alldone h3{font-size:18px;font-weight:800;margin:8px 0 4px}
.alldone p{font-size:14.5px;color:var(--ink-faint)}
.work-notes{display:flex;flex-direction:column;gap:10px}
.wn{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.wn h4{font-size:14.5px;font-weight:800;margin-bottom:3px}
.wn h4 .tag{font-size:12px;font-weight:800;border-radius:99px;padding:1px 8px;margin-left:5px;vertical-align:1px}
.wn p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.wn p b{color:var(--ink)}

/* 작업소 PC */
.pcwork{display:grid;grid-template-columns:250px 1fr 248px;gap:13px;align-items:start}
/* .fly 는 position:absolute 라 기준 상자가 필요하다. 없으면 PC 에서 뜬금액이 페이지
   좌상단으로 튄다(폰은 .ph-body 가 relative 라 멀쩡해서 오래 안 보였다) */
#pcCenter{position:relative}
@media(max-width:1000px){.pcwork{grid-template-columns:1fr}}
.qhead{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:8px;display:flex;justify-content:space-between}
.qitem{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:11px 13px;margin-bottom:7px;font-size:14px}
.qitem .qk{font-size:11px;font-weight:800;border-radius:99px;padding:1px 7px;flex:none}
.qitem .qt{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qitem .qp{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--won);flex:none;font-variant-numeric:tabular-nums}
.qitem.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.qitem.done{opacity:.45}
.qitem.done .qt{text-decoration:line-through}
.qitem.lock{opacity:.5;cursor:not-allowed;border-style:dashed}
.editor{width:100%;min-height:150px;border:1.5px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--ink);font-family:inherit;font-size:15px;line-height:1.65;padding:11px 13px;resize:vertical;margin-top:10px}
.editor:focus{outline:2px solid color-mix(in srgb,var(--free) 45%,transparent)}
.edlab{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint);margin:12px 2px 0}
.pcbtns{display:flex;gap:8px;margin-top:10px}
.pcbtns .gobtn{margin-top:0;flex:1}
.pcbtns .skipbtn{width:auto;margin-top:0;flex:none;padding:0 14px}
.pcmoney .row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--ink-soft)}
.pcmoney .row b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pcmoney .row.big b{font-size:19px;color:var(--won)}
.pcgauge{height:8px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:8px}
.pcgauge i{display:block;height:100%;background:var(--gc,var(--dev));border-radius:99px;transition:width .5s ease}
.rules{list-style:none;margin-top:4px}
.rules li{font-size:13.5px;color:var(--ink-soft);padding:4px 0 4px 18px;position:relative;line-height:1.5}
.rules li::before{content:"✓";position:absolute;left:2px;color:var(--won);font-weight:800}
/* 목업 마크업과 다른 부분 — 종류 칩은 인라인 색 대신 --c 로 통일했다 */
.kind{font-size:13px;font-weight:800;border-radius:99px;padding:3px 11px;flex:none;
  background:color-mix(in srgb,var(--c) 14%,var(--panel));color:var(--c)}
.qitem .kind{font-size:11px;padding:1px 7px}
.task .tt2{font-size:16px;font-weight:800;line-height:1.45;margin:2px 0 9px}
.srcurl{display:inline-block;font-size:13.5px;color:var(--dev);margin-bottom:10px}
.nodraft{font-size:13.5px;color:var(--ink-faint);padding:6px 2px}
/* 보완 요청 — 무엇을 고쳐야 하는지가 작업자 화면 맨 위에 온다 */
.renote{background:color-mix(in srgb,var(--warn) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:10px;
  padding:8px 11px;font-size:13.5px;color:var(--warn);margin-bottom:10px;line-height:1.5}
.wsedit{width:100%;border:1.5px solid var(--line);border-radius:11px;background:var(--panel2);
  color:var(--ink);font-family:inherit;font-size:15px;line-height:1.65;padding:11px 13px;
  resize:vertical;margin-top:10px}
.wsedit:focus{outline:none;border-color:var(--free)}
.postrow{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:wrap}
.postrow .fld{flex:1;min-width:150px;margin-bottom:0;font-size:14px;padding:8px 11px}
.pcside{display:flex;flex-direction:column;gap:10px}
.pchead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pchead b{font-size:16px;flex:1;min-width:0}
.pchead .price{font-family:var(--mono);font-weight:800;color:var(--won)}
.pcmoney .row.mini2{font-size:12.5px;color:var(--ink-faint)}
.rules li::before{content:"·";position:absolute;left:7px;color:var(--ink-faint);font-weight:800}

/* 관리 — 발주와 검수 */
.wssum{display:flex;gap:6px;flex-wrap:wrap}
.wschip{font-size:13px;font-weight:700;color:var(--ink-soft);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:3px 11px}
.wschip b{font-family:var(--mono);color:var(--ink)}
.wschip.hot{border-color:color-mix(in srgb,var(--won) 45%,var(--line));color:var(--won)}
.wschip.hot b{color:var(--won)}
.ntdrafts{border-top:1px dashed var(--line2);margin-top:4px;padding-top:9px}
.ntlab{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:6px}
.wsgrid{display:grid;grid-template-columns:1fr 300px;gap:12px;align-items:start}
@media(max-width:900px){.wsgrid{grid-template-columns:1fr}}
.wsrow{border-bottom:1px dashed var(--line2);padding:11px 2px}
.wsrow:last-child{border-bottom:0}
.wstop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.wstop b{font-size:14.5px;flex:1;min-width:0}
.wsp{font-family:var(--mono);font-size:13.5px;font-weight:800;color:var(--won)}
.wsst{font-size:11.5px;font-weight:800;border-radius:5px;padding:1px 7px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink-faint)}
.wsst.s-제출{color:var(--won);border-color:color-mix(in srgb,var(--won) 40%,var(--line))}
.wsst.s-보완{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.wsmeta{font-size:13px;color:var(--ink-faint);margin-top:3px}
.wsfinal{font-size:13.5px;color:var(--ink-soft);background:var(--panel2);border:1px solid var(--line2);
  border-radius:9px;padding:8px 11px;margin:7px 0;line-height:1.6;white-space:pre-wrap}
.wsacts{display:flex;gap:5px;flex-wrap:wrap}
.wsperson{display:flex;align-items:center;gap:8px;font-size:14px;padding:7px 2px;
  border-bottom:1px dashed var(--line2)}
.wsperson:last-child{border-bottom:0}
.wsperson b{flex:1}
.wsperson span{color:var(--ink-faint);font-size:13px}
.wsperson .mono{color:var(--won);font-weight:800}
/* 개인별 일일 목표 — 비우면 기본값(placeholder 가 그 값을 보여 준다) */
.wsgoal{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.wsgoal input{width:92px;border:1.5px solid var(--line);background:var(--panel2);border-radius:8px;
  padding:4px 8px;font-size:12.5px;font-family:var(--mono);text-align:right;outline:none}
.wsgoal input:focus{border-color:var(--free)}

/* 팔레트 바로가기 — 빈 입력 상태에서 자주 쓰는 동작을 그냥 보여준다 */
.palgrp{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink-faint);
  padding:8px 10px 5px}
.palcmd{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;border-radius:9px;padding:9px 11px;color:var(--ink)}
.palcmd:hover{background:var(--panel2)}
.palcmd .ci{font-size:17px;flex:none;width:22px;text-align:center}
/* 이름은 접히지 않는다 — flex 아이템의 기본 shrink 때문에 「피드백 보 / 내기」로 갈라졌다.
   대신 좁아지면 힌트 쪽이 말줄임된다(설명은 잘려도 읽히지만, 이름이 갈라지면 못 읽는다). */
.palcmd b{font-size:14.5px;font-weight:700;flex:none;white-space:nowrap}
.palcmd .ch{margin-left:auto;padding-left:10px;font-size:12.5px;color:var(--ink-faint);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 피드백 — 정제소(M6)의 원재료 */
.fbmodal{position:fixed;inset:0;z-index:92;background:rgba(10,14,22,.5);
  display:grid;place-items:center;padding:20px 20px 20px calc(20px + var(--railw))}
.fbbox{width:min(480px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px 20px 16px;box-shadow:var(--shadow)}
.fbh{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800}
.fbctx{font-size:12.5px;font-weight:700;color:var(--dev);
  background:color-mix(in srgb,var(--dev) 11%,var(--panel));border-radius:99px;padding:2px 9px}
.fbx{margin-left:auto;border:0;background:none;color:var(--ink-faint);font-size:16px;padding:2px 4px}
.fbsub{font-size:13.5px;color:var(--ink-faint);line-height:1.6;margin:6px 0 10px}
.fbta{width:100%;border:1.5px solid var(--line);background:var(--panel2);border-radius:11px;
  padding:11px 13px;font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink);resize:vertical}
.fbta:focus{outline:none;border-color:var(--dev)}
.fbacts{display:flex;gap:6px;margin-top:10px}
.mstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
@media(max-width:840px){.mstrip{grid-template-columns:1fr 1fr}}
.mtile{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 14px}
.mtile .ml{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint)}
.mtile .mv{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:3px 0 1px;font-variant-numeric:tabular-nums}
.mtile .mv .up{color:var(--won);font-size:14px;font-weight:800}
.mtile .md{font-size:13px;color:var(--ink-faint)}
.mtile.lock{border-style:dashed;opacity:.8}
.mtile .mgauge{height:7px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:7px}
.mtile .mgauge i{display:block;height:100%;background:var(--gc,var(--dev));border-radius:99px}
.okr{margin-bottom:12px}
.okr .g3ok{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:840px){.okr .g3ok{grid-template-columns:1fr}}
.okrcard{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px}
.okrcard .ot{font-size:14.5px;font-weight:800;margin-bottom:7px}
.okrcard .ot .on2{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.08em;display:block}
.krrow{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.krrow .lb{flex:1;color:var(--ink-soft);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krrow .bar{flex:0 0 72px;height:6px;background:var(--line2);border-radius:99px;overflow:hidden}
.krrow .bar i{display:block;height:100%;background:var(--gc,var(--dev));border-radius:99px}
.krrow .v{font-family:var(--mono);font-size:12.5px;width:34px;text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ── 🎯 OKR 편집 모드 (관리자·대표) — 보던 자리가 그대로 입력칸이 된다 ── */
.okre-row{display:flex;align-items:center;gap:6px;padding:3px 0}
.okre-row .fld{flex:1;min-width:0;height:30px;font-size:12.5px}
.okre-row .fld.num{flex:0 0 74px;text-align:right;font-family:var(--mono)}
.okre-row .fld.unit{flex:0 0 52px;text-align:center}
.okre-row .fld.src{flex:0 0 150px}
.okre-row .auto{flex:none}
.okre-row .mini{flex:none;white-space:nowrap}
.okre-row.ot2{margin-bottom:6px}
.okre-row.ot2 .on2{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.okre-row .mini.warn2{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.okre-row .mini.armdel{background:var(--red);border-color:var(--red);color:#fff;font-weight:800}
/* 편집 모드는 한 열로 — 시작·목표·단위·출처까지 서면 3열 카드에는 안 들어간다 */
.g3ok.okr1{grid-template-columns:1fr}
.okre-row .mini.mv{padding:2px 6px;color:var(--ink-faint)}
/*
 * 🎯 지표 편집 카드 (2026-08-25 전면 개편 — 사용자: 「어디에 뭘 적어야 하는지 감도 안 잡힌다」)
 *
 * 예전의 `.okre-head` 한 줄 머리글은 은퇴했다: 다섯 칸을 머리글 하나로 가리키면
 * 칸이 좁아지는 순간(금액 8자리) 짝이 어긋나 무엇을 적는 칸인지 알 수 없게 된다.
 * 라벨은 **칸마다** 붙고, 지표 하나가 카드 하나다.
 */
.krlist{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.krnone{font-size:12px;color:var(--ink-faint);padding:8px 2px}
.krcard{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.krc-head{display:flex;align-items:center;gap:6px}
.krc-head .fld.krname{flex:1;min-width:0;height:32px;font-size:13px;font-weight:700}
.krc-head .mini{flex:none;white-space:nowrap}
.krc-head .mini.mv{padding:2px 6px;color:var(--ink-faint)}
.krc-head .mini.warn2{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent)}
.krc-head .mini.armdel{background:var(--red);border-color:var(--red);color:#fff;font-weight:800}
/* 칸은 접힌다 — 좁은 창에서 칸이 줄어 글자가 잘리느니 아래로 내려가는 편이 낫다 */
.krc-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.krf{display:flex;flex-direction:column;gap:3px;flex:0 0 108px;position:relative}
.krf.wide{flex:0 0 190px}
.krf.wide2{flex:1 1 220px;min-width:180px}
.krf.sm{flex:0 0 78px}
.krf > span{font-size:10.5px;color:var(--ink-faint);font-weight:700;letter-spacing:-.2px}
.krf .fld{height:32px;font-size:12.5px;width:100%}
.krf .fld.num{text-align:right;font-family:var(--mono)}
/* 💴 금액 읽어 주기 — 칸 아래에 붙는다. 자리를 차지하지 않게 절대 배치 */
.krf .mcue{position:absolute;left:0;bottom:-14px;font-style:normal;font-size:10.5px;
  color:var(--won);font-weight:700;white-space:nowrap;pointer-events:none}
.krc-foot{display:flex;align-items:center;gap:8px;margin-top:20px}
.krsay{flex:1;min-width:0;font-size:11px;color:var(--ink-faint);line-height:1.5}
.krsay b{color:var(--ink-soft);font-weight:700}
.krc-foot .mini{flex:none}
/* 「저장됨」 — 칸을 떠날 때 조용히 저장된 것을 알린다. 토스트를 띄우면 칸을 옮길 때마다
   화면 구석이 시끄럽다 (2026-08-25 사용자: 부연이 저장 안 된 채 사라졌다) */
.oksaved{font-style:normal;font-size:10.5px;font-weight:800;color:var(--won);flex:none;
  animation:okfade 1.5s ease forwards}
@keyframes okfade{0%{opacity:0;transform:translateY(2px)}12%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
/* ＋ 지표 추가 — 접혀 있다가 펼쳐진다. 늘 떠 있는 빈 줄은 「이건 뭐지」가 된다 */
.kradd{border:1px dashed var(--line);border-radius:10px;padding:0 11px}
.kradd > summary{list-style:none;cursor:pointer;padding:8px 0;font-size:12.5px;
  font-weight:700;color:var(--ink-soft)}
.kradd > summary::-webkit-details-marker{display:none}
.kradd > summary:hover{color:var(--dev)}
.kradd[open]{padding-bottom:10px;background:var(--panel2)}
/* 목표 아래에 서는 작은 상자들 — 새 목표·분기·제품 */
.okrbox{border:1px solid var(--line2);border-radius:10px;padding:9px 11px;margin-top:10px}
.okrbox-t{font-size:12.5px;font-weight:800;margin-bottom:6px}
.okrbox-t .sub{font-weight:500;font-size:11px;color:var(--ink-faint);margin-left:6px}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pchip{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:999px;padding:3px 6px 3px 10px;font-size:12px}
.pchip button{border:0;background:none;cursor:pointer;color:var(--ink-faint);
  font-size:11px;line-height:1;padding:2px 3px;border-radius:50%}
.pchip button:hover{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.odesc{font-size:12px;color:var(--ink-soft);margin:-3px 0 7px;line-height:1.5}

/* 🔑 권한 — 명단 아래 「지금 열려 있는 사람」. 지정 명단 밖(관리자·담당·승인자)까지
   실제 판정 결과를 적는다 — 명단만 보면 "담당인데 왜 없지?"가 된다 */
.syseff{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line2);
  font-size:12px;color:var(--ink-soft);line-height:1.8}
.syseff b{font-weight:700;color:var(--ink)}
.syseff i{font-style:normal;font-size:10.5px;color:var(--ink-faint);margin-left:3px;
  border:1px solid var(--line2);border-radius:99px;padding:0 5px}
.syseff .nt{color:var(--ink-faint);margin-left:4px}

/* ── 달성률의 색 (goals.js `tone()`) ──
   기본은 앱의 강조색(--dev). 전에는 전부 매출 초록이라 목표 화면만 혼자 떠 보였다.
   90%를 넘으면 초록으로 바뀌고, 100%를 넘으면 링이 붙는다 —
   숫자를 읽기 전에 「거의 다 왔다 / 넘었다」가 색으로 먼저 도착한다. */
.pcgauge.near,.mgauge.near,.krrow .bar.near,
.pcgauge.done,.mgauge.done,.krrow .bar.done{--gc:var(--won)}
.pcgauge.done,.mgauge.done,.krrow .bar.done{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--won) 30%,transparent)}

/* ═══════════ 목표 페이지 차트 ═══════════ */
.vplot{position:relative;height:170px;display:flex;align-items:flex-end;gap:9px;padding:18px 4px 0;border-bottom:1.5px solid var(--line)}
.vplot .hline{position:absolute;left:0;right:0;border-top:1px solid var(--line2);pointer-events:none}
.vplot .gl{position:absolute;left:0;right:0;top:18px;border-top:1.5px dashed var(--ink-faint);pointer-events:none}
.vplot .gl b{position:absolute;right:2px;top:-14px;font-family:var(--mono);font-size:11.5px;font-weight:800;color:var(--ink-faint);letter-spacing:.04em}
.vb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;min-width:0}
.vb .val{font-family:var(--mono);font-size:12px;font-weight:800;text-align:center;color:var(--ink-soft);margin-bottom:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vb i{display:block;background:color-mix(in srgb,var(--dev) 34%,var(--panel));border-radius:4px 4px 0 0;transition:filter .12s}
.vb:hover i{filter:brightness(.92)}
.vb.hi i{background:var(--dev)}
.vaxis{display:flex;gap:9px;padding:5px 4px 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.vaxis span{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.chartcap{font-size:13px;color:var(--ink-faint);margin-top:9px;line-height:1.55}
.chartcap b{color:var(--won)}
.prow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px}
.prow .lb{width:118px;font-weight:700;flex:none}
.prow .bar{flex:1;height:12px;background:var(--line2);border-radius:99px;overflow:hidden}
.prow .bar i{display:block;height:100%;background:var(--dev);border-radius:99px}
.prow .v{font-family:var(--mono);font-size:13px;width:96px;text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hero-pct{display:flex;align-items:baseline;gap:8px}
.hero-pct b{font-size:42px;font-weight:800;letter-spacing:-.03em;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--won)}
.hero-pct span{font-size:14px;color:var(--ink-faint)}
.paceline{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);padding:5px 0;border-bottom:1px dashed var(--line2)}
.paceline:last-of-type{border-bottom:0}
.paceline b{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* OKR 카드 · 목표 화면 보강 */
@media(max-width:840px){.okr .g3ok{grid-template-columns:1fr}}
.okrcard{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px}
.okrcard .ot{font-size:14.5px;font-weight:800;margin-bottom:7px}
.okrcard .ot .on2{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);letter-spacing:.08em;display:block}

.g3ok{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.g3ok{grid-template-columns:1fr}}
.krrow .lb .auto{font-style:normal;font-size:10.5px;font-weight:800;color:var(--dev);
  background:color-mix(in srgb,var(--dev) 12%,var(--panel));border-radius:4px;padding:0 4px;margin-left:5px}
/* KR 값은 그 자리가 입력칸이다 — 분기에 몇 번 고치는 값이라 모달을 열 이유가 없다 */
.krrow input.v{border:1px solid transparent;background:none;border-radius:5px;padding:1px 3px;width:46px}
.krrow input.v:hover{border-color:var(--line2);background:var(--panel)}
.krrow input.v:focus{outline:none;border-color:var(--dev);background:var(--panel)}
.mtile .md b.down{color:var(--red)}
/* 아낀 용량 — 나쁜 소식(빨강)과 갈리게 초록으로. 중복 제거가 일하고 있다는 표시다 */
/* ⌨️ 되돌리기 토스트의 단축키 — 있는 줄 모르면 없는 것과 같다.
   폰에는 Ctrl 이 없으므로 좁은 화면에서는 감춘다(글자만 늘어난다) */
.ukbd{margin-left:7px;font-family:var(--mono);font-size:10.5px;font-weight:800;
  padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);letter-spacing:.02em}
/* 밝은 판 위(광고리서치 띠)에서는 흰 덧칠이 안 보인다 — 거기만 뒤집는다 */
.arundo .ukbd{background:rgba(0,0,0,.07);border-color:var(--line)}
@media (max-width:860px){.ukbd{display:none}}
/* 🏖️ 공휴일 관리 — 표가 아니라 줄 목록이다. 한 해가 스무 줄 남짓이라 표의 머리글이
   차지하는 자리가 아깝고, 「날짜·요일·이름」이면 눈이 다 읽는다 */
.holcard .sysh .holy{font-family:var(--mono);font-size:14px;font-weight:800}
.holadd{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.holadd .fld{margin-bottom:0;font-size:13.5px;padding:7px 10px}
.holadd #holName{flex:1;min-width:120px}
.holadd #holDay,.holadd #holKind{flex:none;width:auto}
.hollist{display:flex;flex-direction:column;gap:2px}
.holrow{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:13.5px}
.holrow:hover{background:var(--panel2)}
.holrow .mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}
.holrow .hdw{width:14px;text-align:center;font-size:12px;color:var(--ink-faint)}
.holrow .hdw.wk{color:var(--red)}
.holk{font-size:11px;font-weight:800;padding:1px 6px;border-radius:5px;
  background:var(--panel2);color:var(--ink-faint)}
.holk.k-public{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.holk.k-substitute{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.holrow .mini{opacity:0;transition:opacity .12s}
.holrow:hover .mini{opacity:1}
.mtile .md b.msave{color:var(--won);font-weight:800}
.revform{display:flex;gap:7px;flex-wrap:wrap}
.revform .fld{margin-bottom:0;flex:1;min-width:120px;font-size:14px;padding:8px 11px}
.revform button{flex:none}
.life{display:flex;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 12px;margin-bottom:14px;overflow-x:auto}
.lf{flex:1;min-width:104px;position:relative;padding:0 12px}
.lf .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-faint)}
.lf b{display:block;font-size:14.5px;margin:2px 0 1px}
.lf span{font-size:12.5px;color:var(--ink-faint);line-height:1.45;display:block}
.lf:not(:last-child)::after{content:"›";position:absolute;right:-4px;top:14px;color:var(--ink-faint);font-size:15px}
.lf.done b{color:var(--won)}
.lf.now{background:color-mix(in srgb,var(--won) 8%,var(--panel));border-radius:10px;padding-top:6px;padding-bottom:6px;margin-top:-6px;margin-bottom:-6px}
.lf.now b{color:var(--won)}
.ckrow{display:flex;gap:9px;align-items:center;padding:7px 0;font-size:14.5px;border-bottom:1px dashed var(--line2);cursor:pointer;user-select:none}
.ckrow:last-child{border-bottom:0}
.ckrow .box{width:16px;height:16px;border-radius:5px;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;color:#fff;flex:none}
.ckrow.done .box{background:var(--won);border-color:var(--won)}
.ckrow.done .box::after{content:"✓"}
.ckrow.done .lb{text-decoration:line-through;color:var(--ink-faint)}
.ckrow .vtag{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--ink-faint);font-family:var(--mono)}
.aq{display:flex;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px dashed var(--line2);font-size:14.5px}
.aq:last-child{border-bottom:0}
.aq .aw{flex:1;min-width:0}
.aq .aw b{font-size:14.5px}
.aq .aw .ad{font-size:12.5px;color:var(--ink-faint);display:flex;gap:5px;flex-wrap:wrap;margin-top:2px;align-items:center}
.aq .amt{font-family:var(--mono);font-weight:800;font-size:15.5px;flex:none;font-variant-numeric:tabular-nums}
.aq.okd{opacity:.55}
.achip{font-size:11.5px;font-weight:800;border-radius:5px;padding:1px 6px}
/* 칩이 <button> 이면 브라우저 기본 옷(회색 테두리·배경·제 글꼴·제 줄높이)이 그대로 나온다 —
   옆의 <span> 칩과 나란히 서면 혼자 튀어나온 회색 상자가 된다. 벗겨서 span 과 같은 줄에 세운다.
   변형(.a-ok 등)은 클래스가 둘이라 이 규칙(클래스 하나 + 요소)을 이긴다 — 색은 그대로 산다 */
button.achip{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;
  font-family:inherit;font-size:11.5px;font-weight:800;line-height:inherit;cursor:pointer}
.a-ok{background:color-mix(in srgb,var(--won) 12%,var(--panel));color:var(--won)}
.a-warn{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
.a-info{background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev)}
.a-free{background:color-mix(in srgb,var(--free) 12%,var(--panel));color:var(--free)}
.matchbar{display:flex;gap:0;height:10px;border-radius:99px;overflow:hidden;margin:8px 0 4px}
.matchbar i{display:block;height:100%}
.pkgbox{border:1.5px dashed var(--acct);border-radius:12px;padding:12px 14px;background:color-mix(in srgb,var(--acct) 5%,var(--panel));margin-top:10px}
.pkgbox .pt3{font-size:14px;font-weight:800;margin-bottom:6px}
.pkgbox ul{list-style:none}
.pkgbox li{font-size:13.5px;color:var(--ink-soft);padding:2px 0 2px 16px;position:relative}
.pkgbox li::before{content:"·";position:absolute;left:4px;font-weight:800;color:var(--acct)}
.pkgbtn{width:100%;border:0;border-radius:11px;background:var(--acct);color:#fff;font-weight:800;font-size:15px;padding:11px;margin-top:10px}
.expsteps{display:flex;gap:0;margin-top:6px}

/* 회계 — 목업 마크업과 다른 부분 */
.aqacts{display:flex;gap:5px;flex-wrap:wrap;flex:none}
.aq .aw{flex:1;min-width:0}
.aq .amt{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.achip.a-ok{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.achip.a-warn{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}
.achip.a-free{background:color-mix(in srgb,var(--free) 13%,var(--panel));color:var(--free)}
.achip.a-대기{background:var(--panel2);color:var(--ink-faint);border:1px solid var(--line2)}
.achip.a-확인{background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev)}
.achip.a-지급{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.achip.a-반려{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
.warnx{color:var(--warn)}
.exrow{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-soft);margin:2px 0 8px}
/* 나란히 선 칸은 **키가 같아야 한다** (2026-08-26 사용자) — 고르개(.fld) 옆의 체크칸이
   글자 높이만큼만 차지해 한 칸만 작아 보였다. 같은 줄에서는 같은 상자를 쓴다 */
.mmrow .exrow{margin:0;height:46px;padding:0 13px;background:var(--panel2);
  border:1.5px solid var(--line);border-radius:11px;box-sizing:border-box}
.upl2{display:inline-block;flex:none}
.flrow{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:6px 2px;
  border-bottom:1px dashed var(--line2)}
.flrow:last-of-type{border-bottom:0}
.flrow b{flex:1}
.flrow span{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.flrow .tax{color:var(--red)}
.flrow .net{color:var(--won);font-weight:800}
.fbcols{display:grid;grid-template-columns:250px minmax(0,1fr) minmax(0,1.1fr);gap:13px;align-items:start}
@media(max-width:1180px){.fbcols{grid-template-columns:230px minmax(0,1fr)}.fbc3{grid-column:1/-1}}
@media(max-width:820px){.fbcols{grid-template-columns:1fr}.fbc3{grid-column:auto}}
.fbstat{background:linear-gradient(135deg,var(--dev),var(--free));color:#fff;border-radius:14px;padding:13px 15px;margin-bottom:12px}
.fbstat .t{font-size:14px;font-weight:700;opacity:.9}
.fbstat .n{font-size:31px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.fbstat .n small{font-size:16px;font-weight:600;opacity:.85;margin-left:2px}
.fbstat .w{font-size:13.5px;opacity:.9}
.fbhold{display:flex;gap:6px;margin-bottom:9px}
.fbhold div{flex:1;text-align:center;border:1.5px dashed var(--line);border-radius:9px;padding:6px 4px;font-size:13.5px;font-weight:700}
.fbhold .ib{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent);color:var(--warn)}
.fbhold .mn{border-color:color-mix(in srgb,var(--dev) 45%,var(--line));background:color-mix(in srgb,var(--dev) 6%,transparent);color:var(--dev)}
.fbtab{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:15px;background:var(--panel);cursor:pointer}
.fbtab:hover{border-color:var(--dev)}
.fbtab.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 7%,var(--panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--dev) 22%,transparent)}
.fbtab .tt{font-weight:700;display:flex;align-items:center;gap:6px}
.fbtab .ts{font-size:13px;color:var(--ink-faint);margin-top:2px}
.fbnew{border:1.5px dashed var(--line);border-radius:10px;padding:7px;text-align:center;font-size:14px;color:var(--ink-faint);font-weight:700;cursor:pointer}
.fbst{font-size:12.5px;border-radius:99px;padding:1px 8px;font-weight:700;white-space:nowrap}
.fbst.open{background:color-mix(in srgb,var(--dev) 14%,transparent);color:var(--dev)}
.fbst.conf{background:color-mix(in srgb,var(--won) 16%,transparent);color:var(--won)}
.fbst.done{background:color-mix(in srgb,var(--free) 16%,transparent);color:var(--free)}
.fbst.held{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.fbst.rej{background:var(--panel2);color:var(--ink-faint)}
/* 진행 상황 칩 줄 (2026-08-20 개편) — 지금 상태는 눌려 있고, 다른 칩이 곧 전환 버튼이다 */
.fbstrow{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.fbstbtn{border:1px solid var(--line2);background:none;border-radius:99px;padding:2px 9px;
  font-size:12px;font-weight:700;color:var(--ink-faint);cursor:pointer}
.fbstbtn:hover:not(:disabled){border-color:var(--line);color:var(--ink-soft)}
.fbstbtn.on{cursor:default}
.fbstbtn.on.open{background:color-mix(in srgb,var(--dev) 14%,transparent);color:var(--dev);border-color:transparent}
.fbstbtn.on.conf{background:color-mix(in srgb,var(--won) 16%,transparent);color:var(--won);border-color:transparent}
.fbstbtn.on.held{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);border-color:transparent}
.fbstbtn.on.done{background:color-mix(in srgb,var(--free) 16%,transparent);color:var(--free);border-color:transparent}
.fbstbtn.on.rej{background:var(--panel2);color:var(--ink-soft);border-color:transparent}
.fbblk.out{opacity:.62}
.fbcat{font-size:13px;border-radius:6px;padding:1px 8px;font-weight:700}
.fbcat.c-ui{background:color-mix(in srgb,var(--free) 15%,transparent);color:var(--free)}
.fbcat.c-fn{background:color-mix(in srgb,var(--dev) 14%,transparent);color:var(--dev)}
.fbcat.c-bg{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.fbcat.c-et{background:var(--panel2);color:var(--ink-soft)}
.fbsrc{font-size:12.5px;border-radius:99px;padding:0 7px;border:1px solid var(--line);color:var(--ink-faint)}
.fbctx{font-size:12.5px;border-radius:6px;padding:0 6px;background:var(--panel2);color:var(--ink-faint);font-family:var(--mono)}
.fbid{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:0 8px;color:var(--ink-faint);font-family:var(--mono)}
.fbconf{font-size:12.5px;border-radius:99px;padding:0 7px;font-weight:700}
.fbconf.hi{background:color-mix(in srgb,var(--won) 16%,transparent);color:var(--won)}
.fbconf.mid{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.fbblk{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:8px;background:var(--panel)}
.fbblk.out{opacity:.45}
.fbblk .head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:5px;font-size:13.5px;color:var(--ink-faint)}
.fbblk .head b{color:var(--ink)}
/* 보낸 사람이 누른 줄바꿈은 읽는 사람에게도 줄바꿈이다 (2026-08-20 사용자 보고) —
   pre-line: 줄바꿈은 살리고 연속 공백은 접는다.
   anywhere: 긴 URL(공백 없는 문자열)이 블록 밖으로 삐져나가지 않게 아무 데서나 꺾는다 */
.fbblk .body{font-size:15.5px;white-space:pre-line;overflow-wrap:anywhere;min-width:0}
.fbint{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;font-size:14.5px;margin-top:8px}
.fbint .k{color:var(--ink-faint)}
.fbint .hd{display:flex;align-items:center;gap:6px;font-weight:800;margin-bottom:3px}
.fbibrow{display:flex;gap:7px;align-items:center;flex-wrap:nowrap;border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:14.5px;margin-top:5px;cursor:grab}
.fbibrow .tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbin{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel2);color:var(--ink-faint);font-size:14.5px;flex:1;min-width:140px}
.fbsel{border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--panel);color:var(--ink);font:inherit;font-size:14.5px}
.fbact{background:var(--dev);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-size:15px;font-weight:700}
.fbact.ok{background:var(--won)}
.fbfinal{border:1.5px solid var(--dev);background:color-mix(in srgb,var(--dev) 4%,var(--panel))}
.fbprompt{border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:11px 12px;font-size:15px;line-height:1.75}
.fbprompt ul{margin:4px 0 0;padding-left:18px}
.fbdoc{font-size:15px;line-height:1.75}
.fbdoc h4{font-size:15px;margin:13px 0 5px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.fbdoc h4:first-child{margin-top:0}
.fbdoc ul{margin:3px 0 7px;padding-left:17px}
.fbdirty{color:var(--warn);font-size:14px;font-weight:700}
/* 인앱 수집 위젯 — 어느 화면에서든 뜬다 */
.fbfab{position:fixed;right:22px;bottom:22px;z-index:40;background:var(--dev);color:#fff;border:0;border-radius:99px;padding:11px 17px;font-size:15.5px;font-weight:800;box-shadow:0 8px 22px rgba(43,102,222,.4)}
.fbwidget{position:fixed;right:22px;bottom:74px;z-index:41;width:300px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);display:none}
.fbwidget.on{display:block}
.fbwidget h3{font-size:15.5px;margin-bottom:3px}
.fbwidget .cap{font-size:13.5px;color:var(--ink-faint);margin-bottom:9px}
.fbwidget .ta{border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--ink-faint);padding:9px 10px;font-size:14.5px;min-height:60px}
.fbauto{margin-top:8px;border:1px dashed var(--line);border-radius:9px;padding:7px 9px;font-size:13px;color:var(--ink-faint);line-height:1.7}
.fbauto b{color:var(--ink-soft)}
</style>

/* 정제소 — 목업 마크업과 다른 부분 (2열 구성 · 인라인 확정/적용) */
.fbcols{grid-template-columns:250px minmax(0,1fr)}
@media(max-width:900px){.fbcols{grid-template-columns:1fr}}
.fbhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.fbhead b{font-size:17px}
.fbacts2{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.fbver{margin-bottom:0;width:130px;font-size:14px;padding:6px 10px}
.fbsub2{font-size:13.5px;color:var(--ink-faint);margin-top:5px;line-height:1.6}
.fbsub2 b{color:var(--ink-soft)}
.fbh2{font-size:15px;font-weight:800;display:block;margin-bottom:4px}
.fbnewform{display:flex;gap:6px;margin-top:8px}
.fbnewform .fld{margin-bottom:0;flex:1;font-size:14px;padding:8px 11px}
.fbblk .head{flex-wrap:wrap}
.fbint .k{font-weight:800;color:var(--ink-soft)}

/* ── 작업소 — 모바일이냐 PC냐는 고르는 게 아니라 지금 쓰는 화면이 정한다 ──
   둘 다 마크업에 있고 CSS가 하나만 띄운다. 창을 줄이면 그대로 폰 화면이 된다. */
#workApp{display:none}
#workPC{display:grid}
@media(max-width:880px){
  #workApp{display:grid}
  #workPC{display:none}
  /* 폰에서는 프레임을 씌우지 않는다 — 화면 자체가 폰이다 */
  .work-wrap{grid-template-columns:1fr}
  .phone{border:0;border-radius:0;box-shadow:none;max-width:none;background:none}
  .ph-head{border-radius:14px}
  .ph-body{padding:14px 0 18px;min-height:auto}
}

/* ══════════ 카드 모듈 · 시안 리뷰 · 핀 ══════════ */
.csmod.dsgnmod{border-left:3px solid var(--dsgn);padding-left:11px}
.csmh .stchip{margin-left:auto;font-size:11.5px;font-weight:800;border-radius:5px;padding:1px 7px}
.stchip.lock{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.stchip.wait{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}
.stchip.open{background:color-mix(in srgb,var(--dsgn) 13%,var(--panel));color:var(--dsgn)}

.vtabs{display:flex;gap:5px;margin:8px 0}
.vtab{border:1.5px solid var(--line);background:var(--panel);border-radius:8px;padding:4px 11px;
  font-size:13.5px;font-weight:800;color:var(--ink-soft);font-family:var(--mono)}
.vtab.on{border-color:var(--dsgn);color:var(--dsgn);background:color-mix(in srgb,var(--dsgn) 7%,var(--panel))}

/* 이미지 위 좌표 = 핀. 말로 "히어로 아래쪽"이라고 하면 사람마다 다른 데를 본다 */
/* 긴 상세페이지를 위해 420px 통짜 축소를 버렸다(2.87.0) — 틀 안에서 실제 폭으로
   스크롤한다. 핀 좌표(%)는 shotin(이미지를 꼭 맞게 감싼 층) 기준 = 이미지 내용 기준. */
.shotframe{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  background:var(--panel2)}
.shotframe.locked{opacity:.92}
.shotwrap{max-height:60vh;overflow:auto;overscroll-behavior:contain}
.shotin{position:relative;cursor:crosshair}
.shotin.locked{cursor:default}
.shotimg{display:block;width:100%;height:auto}
.shotfull{position:absolute;top:8px;right:14px;z-index:3;width:32px;height:32px;border:0;
  border-radius:8px;background:rgba(10,14,22,.55);color:#fff;font-size:16px;cursor:pointer;
  display:grid;place-items:center}
.shotfull:hover{background:rgba(10,14,22,.75)}
.shothint{position:absolute;left:8px;bottom:8px;font-size:12.5px;background:rgba(10,14,22,.6);
  color:#fff;border-radius:6px;padding:3px 8px;pointer-events:none}
.pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--dsgn);color:#fff;
  font-size:13px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);transform:translate(-50%,-50%);cursor:pointer}
.pin.done{background:var(--won)}
.pin.new{background:var(--ink);transform:none;position:static;flex:none}
.pindraft{position:absolute;z-index:5;display:flex;gap:7px;align-items:flex-start}
.pdbox{background:var(--panel);border:1.5px solid var(--dsgn);border-radius:10px;padding:8px;
  width:230px;box-shadow:var(--shadow)}
.pdbox textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 8px;
  font-family:inherit;font-size:14px;resize:vertical;background:var(--panel2);color:var(--ink)}
.pdbox textarea:focus{outline:none;border-color:var(--dsgn)}
.pdacts{display:flex;gap:5px;margin-top:6px}

/* 목록 ↔ 이미지 상호 이동의 하이라이트 — 눈이 따라갈 곳을 잠깐 밝힌다 */
.pin.hl{animation:kPinHl 1.2s ease}
@keyframes kPinHl{0%,55%{box-shadow:0 0 0 7px color-mix(in srgb, var(--dsgn) 45%, transparent)}
  100%{box-shadow:0 2px 6px rgba(0,0,0,.3)}}
.pinrow.hl{animation:kRowHl 1.2s ease}
@keyframes kRowHl{0%,55%{background:color-mix(in srgb, var(--dsgn) 14%, transparent)}
  100%{background:transparent}}
.pinlist{margin-top:10px}
.pinrow{display:flex;gap:8px;align-items:flex-start;padding:8px 0;
  border-bottom:1px dashed var(--line2);font-size:14px}
.pinrow[data-prow]{cursor:pointer}
.pinrow:last-child{border-bottom:0}
.pinrow .pn{width:18px;height:18px;border-radius:50%;background:var(--dsgn);color:#fff;font-size:12px;
  font-weight:800;display:grid;place-items:center;flex:none;margin-top:1px}
.pinrow.done .pn{background:var(--won)}

/* ── ⛶ 전체화면 리뷰 모드 (2.87.0) ──
   폰의 핀 작업 본거지 — 스크롤이 하나뿐이라 시트-이미지 이중 스크롤 함정이 없다.
   판이지만 mmbox 를 안 쓴다: 이미지가 곧 내용이라 여백·둥근 상자가 자리만 먹는다. */
/* 배경은 완전 불투명 — 반투명이면 뒤 카드 시트의 글자가 스며 보인다(실측) */
.pinfull{padding:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  background:rgb(11,14,21)}
.pfbar{display:flex;align-items:center;gap:6px;flex:none;
  padding:8px max(10px, env(safe-area-inset-right,0px)) 8px max(12px, env(safe-area-inset-left,0px))}
.pfbar b{color:#fff;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfsp{flex:1}
.pfbtn{min-width:40px;height:40px;flex:none;border:0;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;font-size:17px;cursor:pointer;
  display:grid;place-items:center}
.pfbtn:hover{background:rgba(255,255,255,.22)}
.pfcnt{color:#fff;font-size:13.5px;opacity:.85;min-width:44px;text-align:center;flex:none}
.pfscroll{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* --pfz: 1=화면 폭 맞춤 · 2=2배. PC 는 기본을 940px 로 눌러 둔다 — 4K 에서 100% 는 오히려 안 읽힌다 */
.pfin{position:relative;margin:0 auto;cursor:crosshair;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;width:min(calc(var(--pfz,1)*100%), calc(var(--pfz,1)*940px))}
.pfin.locked{cursor:default}
.pfimg{display:block;width:100%;height:auto;-webkit-user-drag:none}
.pin.pfnew{background:var(--ink);z-index:2}
.pfhint{position:absolute;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:2;
  font-size:12.5px;background:rgba(10,14,22,.7);color:#fff;border-radius:6px;padding:4px 9px;
  pointer-events:none}
.pfsheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--panel);
  border-radius:14px 14px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.pfsheet textarea{width:100%;font-size:16px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--panel2);color:var(--ink);padding:10px 12px;font-family:inherit;resize:none}
.pfsheet textarea:focus{outline:none;border-color:var(--dsgn)}
.pfacts{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
.pfacts .mini{height:40px;padding:0 16px;font-size:14.5px}
/* 폰 — 핀 자체가 터치 대상이라 22px 로는 손끝이 빗나간다 */
@media(max-width:860px){
  .pin{width:28px;height:28px;font-size:14px}
  .shotwrap{max-height:55vh}
}
.pinrow .pw{flex:1;min-width:0}
.pinrow .pw b{font-size:13px;color:var(--ink-soft)}
.pinrow .pw .pt2{color:var(--ink)}
.pinrow.done{opacity:.55}
.pinrow.done .pt2{text-decoration:line-through}

.confirmflow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px;
  border-top:1px dashed var(--line2);padding-top:10px}
.cfl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint)}
.cf{font-size:12.5px;font-weight:800;border-radius:6px;padding:2px 8px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink-faint)}
.cf.ok{color:var(--won);border-color:color-mix(in srgb,var(--won) 40%,var(--line))}
.cf.no{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.cf.wait{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.cfar{color:var(--ink-faint);font-size:12px}
.cfacts,.cfreq{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;align-items:center}
.cfreq select{border:1.5px solid var(--line);background:var(--panel);border-radius:9px;
  padding:6px 9px;font-size:14px;color:var(--ink)}
.cfacts .hohold{width:100%}

.modpick .modchips{display:flex;gap:5px;flex-wrap:wrap}
.modchip{border:1.5px solid var(--line);background:var(--panel);border-radius:99px;padding:4px 11px;
  font-size:13px;font-weight:700;color:var(--ink-faint)}
.modchip.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.modchip.soon{opacity:.45;cursor:not-allowed;border-style:dashed}
.csfrow{display:flex;align-items:center;gap:6px}
.csfrow .csfile{flex:1;min-width:0}
/* 🗂️ 카드 첨부 — 미리보기형 격자 (2026-08-20). 버튼은 **상시 표시**(hover 뒤에 숨기지 않는다) */
.cfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;margin:6px 0 8px}
.cfcard{border:1px solid var(--line2);border-radius:10px;padding:6px;background:var(--panel);
  min-width:0;display:flex;flex-direction:column;gap:4px;cursor:zoom-in}
.cfcard:not([data-fopen]){cursor:default}
.cfcard:hover{border-color:var(--line)}
/* 세로로 긴 그림(9:16 제품컷·모바일 캡처)이 위아래로 잘려 나가던 자리 (2026-08-23 사용자).
   cover 는 「무엇이 찍혔나」를 보여 주려는 것인데, 세로컷에서는 정작 제품이 프레임 밖으로
   밀린다. 칸을 조금 키우고 contain 으로 바꾼다 — 작게 보일지언정 통째로 보인다. */
.cfth{position:relative;aspect-ratio:4/3;min-height:74px;border-radius:7px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:26px}
.cfth img{width:100%;height:100%;object-fit:contain}
.cfps{position:absolute;left:4px;top:4px;font-style:normal;font-size:12px;line-height:1;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:2px 5px}
.cfnm{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfacts{display:flex;align-items:center;gap:3px;min-width:0}
.cfsz{font-size:10.5px;color:var(--ink-faint);white-space:nowrap}
.cfbtn{flex:none;width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line2);
  background:none;border-radius:99px;font-size:11px;color:var(--ink-soft);cursor:pointer;
  text-decoration:none;padding:0}
.cfbtn:hover{border-color:var(--dev);color:var(--dev)}
.cfbtn.del:hover{border-color:var(--red);color:var(--red)}
.cfbtn.armdel{width:auto;padding:0 7px;background:var(--red);border-color:var(--red);color:#fff;
  font-weight:800;white-space:nowrap}

/* 항목형 모듈 — 10종이 같은 렌더러를 쓴다 */
.itemmod .irow{display:flex;align-items:flex-start;gap:8px;padding:7px 0;
  border-bottom:1px dashed var(--line2)}
.itemmod .irow:last-of-type{border-bottom:0}
.itemmod .iw{flex:1;min-width:0}
.itemmod .it{font-size:14.5px;font-weight:700;line-height:1.5}
.itemmod .it a{color:var(--dev);text-decoration:none}
.itemmod .it a:hover{text-decoration:underline}
.itemmod .itag{font-size:11.5px;font-weight:800;color:var(--ink-faint);background:var(--panel2);
  border:1px solid var(--line2);border-radius:5px;padding:0 6px;margin-left:5px}
.itemmod .iday{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-left:5px}
.itemmod .ib{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-top:2px;white-space:pre-wrap}
.itemmod .ibar{height:6px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:5px}
.itemmod .ibar i{display:block;height:100%;background:var(--won);border-radius:99px}
.itemmod .inum{font-family:var(--mono);font-size:13.5px;font-weight:800;color:var(--ink-soft);
  flex:none;font-variant-numeric:tabular-nums;padding-top:1px}
.iadd{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2)}
.iadd .fld{margin-bottom:0;flex:1;min-width:120px;font-size:14px;padding:7px 10px}
.iadd .fld.sm{flex:0 0 110px;min-width:0}
/* 닫힌 tag 는 select 다 — 값 길이("검수 대기")에 맞게 늘어나되 폼을 밀어내지는 않게 */
.iadd select.fld.sm{flex:0 0 auto;min-width:110px;max-width:160px;padding-right:8px}
.iadd .fld.nm{flex:0 0 96px;min-width:0}
.iadd button{flex:none}

/* ── 모듈 진열대 — 카드는 블록을 골라 조립하는 것이다 ──
   블록마다 이름 + 「켜면 무엇을 적게 되는지」 두 줄. 켜진 블록은 꽂힌 표시(●)가 붙는다. */
.modpick{border-left:3px solid var(--dev);padding-left:11px}
.modrow{display:flex;gap:9px;align-items:flex-start;padding:5px 0}
.modrow+.modrow{border-top:1px dashed var(--line2)}
.modcat{flex:0 0 44px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-faint);padding-top:9px}
.modblocks{flex:1;display:flex;gap:6px;flex-wrap:wrap}
.modblock{display:flex;flex-direction:column;gap:1px;text-align:left;min-width:150px;flex:1 1 150px;
  max-width:230px;border:1.5px solid var(--line);background:var(--panel2);border-radius:10px;
  padding:6px 10px;color:var(--ink-soft);font-family:inherit;transition:border-color .12s,background .12s}
.modblock:hover{border-color:color-mix(in srgb,var(--dev) 45%,var(--line))}
.modblock b{font-size:13.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:4px}
.modblock span{font-size:11.5px;color:var(--ink-faint);line-height:1.45}
.modblock.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.modblock.on b{color:var(--dev)}
.modblock .plug{font-style:normal;font-size:10px;color:var(--won);margin-left:auto}
.modblock.soon{opacity:.45;cursor:not-allowed;border-style:dashed}

/* 메시지 수정·삭제 */
.meta .edited{font-size:11.5px;color:var(--ink-faint);margin-left:2px}
.medit textarea{width:100%;border:1.5px solid var(--dev);border-radius:9px;background:var(--panel);
  color:var(--ink);font-family:inherit;font-size:15.5px;line-height:1.55;padding:8px 10px;resize:vertical}
.medit textarea:focus{outline:none}
.macts2{display:flex;gap:5px;margin-top:5px}
/* 무장 상태는 **한눈에 달라야** 한다 — 글자만 바뀌면 눌린 줄 모르고 지나간다.
   테두리를 둘러 「지금 이 버튼이 다음 누름을 기다린다」를 보이게 한다 */
.hover .armdel{color:var(--red);font-weight:800;font-size:12.5px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));border-radius:99px;
  padding:2px 8px;background:color-mix(in srgb,var(--red) 8%,var(--panel))}
.msg.del{opacity:.6}
.msg .txt.gone{font-style:italic;color:var(--ink-faint);font-size:14.5px}

/* 알림 팝오버 안의 소리 토글 */
.sndrow{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:9px;
  border-top:1px dashed var(--line2);cursor:pointer}
.sndrow input{margin-top:2px;flex:none}
.sndrow span{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.4}
.sndrow span i{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--ink-faint)}

/* ═══════════ 모션 ═══════════
 *
 * 원칙 셋 — 지키지 않으면 애니메이션이 곧 지연이 된다.
 *   ① **짧다.** 사람이 기다린다고 느끼는 경계는 200ms 근처다. 등장은 그 안에서 끝낸다
 *   ② **한 방향.** 뜨는 것은 위로 8px, 시트는 아래에서. 요소마다 다른 방향으로 움직이면 산만하다
 *   ③ **위치는 안 바꾼다.** 목록이 밀리거나 자리가 이동하는 애니메이션은 클릭을 빗나가게 만든다
 *
 * 접근성 — prefers-reduced-motion 은 파일 위쪽에서 이미 전부 끈다.
 */

@keyframes kPop { from { opacity:0; transform:translateY(8px) scale(.985) } }
@keyframes kFade { from { opacity:0 } }
@keyframes kSlideUp { from { opacity:0; transform:translateY(10px) } }
@keyframes kDropIn { from { opacity:0; transform:translate(-50%,-10px) } }

/* 창 — 배경은 페이드, 상자는 살짝 올라온다 */
.mmodal:not(.hide), .gmodal:not(.hide), .cardsheet:not(.hide),
.palette:not(.hide), .fbmodal:not(.hide), .gate:not(.hide), .viewer:not(.hide),
.mswitch:not(.hide) { animation:kFade var(--t-mid) var(--ease) }
.mmbox, .gmbox, .palbox, .fbbox, .gatebox, .mswbox { animation:kPop var(--t-slow) var(--ease) }
/* 카드 상세는 오른쪽 끝에 붙는 판이다 — 가운데에서 커지는 팝업 동작은 붙는 자리와 어긋난다.
   오른쪽에서 밀려 들어오고, 뒤 배경은 따로 옅게 깔린다 */
.csbox { animation:kSlideIn var(--t-slow) var(--ease) }
.cardsheet:not(.hide) { animation:kFade var(--t-mid) var(--ease) }
@keyframes kSlideIn { from { opacity:.4; transform:translateX(46px) } }
/* 제자리 갱신 — 이미 열려 있던 판을 다시 그리는 것뿐이라 다시 등장하지 않는다 */
.csbox.noanim { animation:none }

/* 붙어서 뜨는 것들 — 팝오버·메뉴는 자기 기준점에서 올라온다 */
.plusmenu, .emojipop, .stpop, .upop, .mchat:not(.hide) { animation:kSlideUp var(--t-fast) var(--ease) }
.meetbar:not(.hide) { animation:kDropIn var(--t-mid) var(--ease) }

/* 화면 전환 — 내용만 페이드. 슬라이드하면 레일이 따라 움직이는 것처럼 보인다 */
.view.on { animation:kFade var(--t-mid) var(--ease) }

/* 새로 도착한 메시지 하나만 — 목록 전체가 움직이면 읽던 곳을 잃는다 */
.msg.fresh { animation:kSlideUp var(--t-mid) var(--ease) }

/* 누르는 것들 — 눌린다는 느낌. transform 만 쓴다(레이아웃을 건드리지 않는다) */
.mini, .btn, .send, .rbtn, .lenbtn, .modblock, .chip, .pchip2, .qitem, .emo, .etab,
.nav button, .tabbar button, .okrbtn, .briefbanner, .bcitem, .palrow, .palcmd {
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.mini:active, .btn:active, .send:active, .rbtn:active, .lenbtn:active,
.modblock:active, .qitem:active, .okrbtn:active { transform:scale(.97) }

/* 반응 칩 — 눌러서 달릴 때만 살짝 튄다 */
@keyframes kBump { 50% { transform:scale(1.18) } }
.rc.mine { animation:kBump .22s var(--ease) }

/* 카드·행 — 마우스가 얹히면 살짝 뜬다. 2px 이상은 목록에서 산만해진다.
   (.briefcard 는 3.50.0 에서 접힌 줄 .bfrow 로 바뀌었다 — 줄은 뜨지 않고 테두리만 짙어진다) */
.kcard, .room, .mtile, .bfrow, .okrcard {
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.kcard:hover { transform:translateY(-2px) }

/* 진행 막대 — 숫자가 바뀌면 차오른다 */
.pcgauge i, .mgauge i, .krrow .bar i, .prow .bar i, .vb i {
  transition:width var(--t-slow) var(--ease), height var(--t-slow) var(--ease),
             background-color var(--t-mid) var(--ease);
}

/* 스레드 패널 — 오른쪽에서 들어온다(모바일에서는 전체를 덮으므로 아래에서) */
@keyframes kSlideLeft { from { opacity:0; transform:translateX(14px) } }
.thread:not(.hide) { animation:kSlideLeft var(--t-mid) var(--ease) }
@media (max-width:860px){ .thread:not(.hide){ animation:kSlideUp var(--t-mid) var(--ease) } }

/* ── 작업소 마이페이지 (④ 정산·출금) ────────────────────────────────────────
   ws- 접두사를 붙인다. style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다 —
   `.me` 는 이미 레일의 내 정보 블록이고, `.chat`·`.note` 로 같은 사고를 두 번 겪었다. */
.wsme3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.wsmec{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:10px 11px}
.wsmec span{display:block;font-size:13px;color:var(--ink-faint);font-weight:700}
.wsmec b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.wsmec em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.wsmec.pend b{color:var(--warn)}
.wsmec.fix b{color:var(--red)}

.wsmesec{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.wsmehd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.wsmehd b{font-size:15px}
.wsmehd .mono{font-size:13.5px;color:var(--ink-faint)}

/* 일별 막대 — 0원인 날도 자리를 차지한다. 일한 날만 그리면 「매일 벌고 있다」로 보인다 */
.wsmebars{display:flex;align-items:flex-end;gap:2px;height:64px;
  background:var(--panel2);border-radius:9px;padding:7px 8px}
.wsmebars i{flex:1;min-width:2px;background:var(--won);border-radius:2px 2px 0 0;opacity:.75}
.wsmebars i.now{opacity:1;box-shadow:0 0 0 1px var(--won)}

.wsmepay{display:flex;flex-direction:column;gap:2px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-top:7px}
.wsmepay b{font-size:15px}
.wsmepay span{font-size:13.5px;color:var(--ink-soft)}
.wsmepay.on{border-color:var(--won);background:color-mix(in srgb,var(--won) 8%,var(--panel))}
.wsmepay.no{border-color:var(--red)}
.wsmepay.no b{color:var(--red)}
.wsmehint{font-size:13.5px;color:var(--ink-faint);margin-top:7px;line-height:1.5}

.wsmefix{border-left:2px solid var(--red);padding:5px 0 5px 9px;margin-top:7px}
.wsmefix b{display:block;font-size:14.5px}
.wsmefix span{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px}

/* 신청할 수 없을 때 — 버튼을 감추지 않고 이유를 버튼이 말한다.
   감추면 「출금이 어디 있지」를 묻게 되고, 그건 돈 문제라 반드시 묻는다 */
.gobtn.off{background:var(--panel2);color:var(--ink-faint);border:1px solid var(--line);
  font-weight:700;cursor:default}
.ph-head,.pcmoney{cursor:pointer}

/* 출금 신청 줄 — 프리랜서 지급명세(.flrow)와 같은 격자를 쓰되 처리 버튼이 붙는다.
   「얼마를 줘야 하나」와 「달라고 한 것」은 다른 일이라 색으로 가른다. */
.flrow.pay{flex-wrap:wrap;border-left:2px solid var(--won);padding-left:9px}
.flrow.pay .aqacts{display:flex;gap:6px}
.flrow.pay .sysmeta{font-size:13px;color:var(--ink-faint)}
.flrow.done{opacity:.6}

/*
 * ── 💸 돈 나갈 일정 (2026-08-26 사용자) ────────────────────────────────────
 * 달력 한 장 + 그 아래 목록. 이름은 m* — style.css 는 스코프가 없는 단일 파일이라
 * cell·row 같은 흔한 이름을 쓰면 남의 규칙에 걸린다.
 */
.monav{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.monav .mini{padding:2px 9px}
/* .mototal 은 은퇴 — 「이 달 나갈 돈」 한 줄로는 들어오는 돈이 안 보였다 (.mosum 이 대신한다) */
.mogrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mohead{font-size:11px;color:var(--ink-faint);text-align:center;padding:2px 0 4px;font-weight:700}
/* 칸은 **항목 수만큼 자란다** (2026-08-26 사용자) — 줄여서 감추면 결국 눌러 봐야 안다.
   그 주의 칸 키는 CSS 그리드가 가장 긴 칸에 맞춘다 */
.mocell{min-height:62px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);
  display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:4px 5px;cursor:pointer;
  font-family:inherit;text-align:left;transition:border-color .12s var(--ease),background .12s var(--ease)}
/* 칸 안의 한 줄 — 점 · 이름 · 금액. 이름이 길면 줄이고 금액은 끝에 붙어 있는다 */
.moitem{display:flex;align-items:center;gap:4px;font-size:11px;line-height:1.5;
  background:var(--panel2);border-radius:5px;padding:1px 4px;min-width:0}
.moitem i{width:5px;height:5px;border-radius:50%;flex:none}
.moitem b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;color:var(--ink-soft)}
.moitem em{font-style:normal;font-family:var(--mono);font-weight:700;color:var(--ink);flex:none}
.mocell .dsum{margin-top:auto;align-self:flex-end}
/* 고른 날의 요약 줄 — 수입·지출을 그 자리에서 말한다 */
.modaysum{display:flex;align-items:center;gap:10px;margin-top:11px;padding:8px 11px;
  background:var(--panel2);border-radius:10px;font-size:13px}
.modaysum .min{color:var(--won);font-weight:700}
.modaysum .mout{color:var(--warn);font-weight:700}
/* 위 요약 넷 — 수입 · 지출 · 차액 · 미정 */
.mosum{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 11px}
.mosumb{flex:1 1 120px;min-width:110px;background:var(--panel2);border-radius:10px;padding:8px 11px;
  display:flex;flex-direction:column;gap:1px}
.mosumb span{font-size:11px;color:var(--ink-faint);font-weight:700}
.mosumb b{font-size:17px;font-weight:800;font-family:var(--mono)}
.mosumb.in b{color:var(--won)}
.mosumb.out b{color:var(--warn)}
.mosumb.warn b{color:var(--red)}
/* 📒 월별 내역 — 날짜 · 계정과목 소계 */
.lgday{flex:none;font-size:11.5px;color:var(--ink-faint);width:40px}
.lgcats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.lgcat{display:inline-flex;gap:6px;align-items:baseline;background:var(--panel2);
  border-radius:999px;padding:3px 10px;font-size:12px;font-family:var(--mono);color:var(--ink-soft)}
.lgcat b{font-family:inherit;font-weight:700;color:var(--ink)}
.mocell:hover{border-color:color-mix(in srgb,var(--dev) 40%,var(--line))}
.mocell.out{border:0;background:none;cursor:default;min-height:0}
.mocell.today{border-color:var(--dev)}
.mocell.on{background:color-mix(in srgb,var(--dev) 10%,var(--panel));border-color:var(--dev)}
.mocell .dn{font-size:11px;color:var(--ink-faint);font-weight:700}
.mocell.today .dn{color:var(--dev)}
.mocell .dsum{font-size:11.5px;font-weight:800;color:var(--ink);font-family:var(--mono);
  line-height:1.3;word-break:break-all}
.mocell .ddots{display:flex;gap:3px;margin-top:auto}
.mocell .ddots i{width:5px;height:5px;border-radius:50%;display:block}
/*
 * 종류마다 색 — 「무슨 돈이 몰렸나」를 숫자 읽기 전에 알아본다.
 * **점과 글자 칩은 다른 옷이다** (2026-08-26 사용자: 「세금·지출 모양이 이상해」):
 * 달력 칸의 점은 5px 이라 진한 색이라야 보이고, 목록의 글자 칩은 앱의 다른 칩(.achip)과
 * 같은 문법 — 옅은 바탕 + 같은 색 글자 — 이라야 한 줄에서 혼자 튀지 않는다.
 */
i[class^="mok-"]{flex:none}
i.mok-x{background:var(--warn)}
i.mok-tax{background:var(--red)}
i.mok-pay{background:var(--free)}
i.mok-in{background:var(--won)}
i.mok-etc{background:var(--ink-faint)}
.mokind.mok-x{background:color-mix(in srgb,var(--warn) 13%,var(--panel));color:var(--warn)}
.mokind.mok-tax{background:color-mix(in srgb,var(--red) 13%,var(--panel));color:var(--red)}
.mokind.mok-pay{background:color-mix(in srgb,var(--free) 13%,var(--panel));color:var(--free)}
.mokind.mok-in{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.mokind.mok-etc{background:var(--panel2);color:var(--ink-faint)}
/* 캘린더의 「＋ 나갈 돈 적기」 — 적는 것은 창에서 한다 */
.moadd{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line2)}
/* 패널 간격을 **한 곳에서** 정한다 — 예전엔 위 두 개만 그리드(gap)라 그 둘만 붙어 보였다 */
.apanel{margin-bottom:12px}
.apanel:last-child{margin-bottom:0}
/* 빈 줄이 판을 키우지 않게 — 회계는 「없음」이 정상인 칸이 여럿이라, 40px 여백이 겹치면
   화면이 빈 상자로 채워진다 (2026-08-26 사용자) */
.apanel .empty{padding:18px 10px;font-size:13.5px}
.molist{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.morow{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:13.5px;
  border-bottom:1px dashed var(--line2)}
.morow:last-child{border-bottom:0}
.morow{flex-wrap:wrap}
/* 제목은 **늘어나지 않는다** — 늘리면 뒤따르는 칩·메모가 통째로 오른쪽 끝까지 밀려
   가운데가 텅 빈다. 제 몸만큼 쓰고, 자리가 모자랄 때만 (메모 다음으로) 줄어든다 */
.morow b{flex:0 1 auto;min-width:6em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.morow .achip,.morow .mokind{white-space:nowrap;flex:none}
.morow .amt{margin-left:auto;font-family:var(--mono);font-weight:700;flex:none}
/* 이름이 mokind 로 바뀌었는데 규칙만 옛 이름(.mk)으로 남아 **칩이 맨몸이었다**
   (2026-08-26 사용자: 「세금·지출 모양이 이상해」) — 이름을 바꿀 땐 양쪽을 함께 본다 */
.morow .mokind{flex:none;font-size:11.5px;font-weight:800;border-radius:5px;padding:1px 6px}
.moform{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line2)}
.moform .fld{height:32px;font-size:12.5px;flex:0 0 auto}
.moform #mvTitle{flex:1 1 200px;min-width:160px}
.moform .fld.num{width:110px;text-align:right;font-family:var(--mono)}
.mochk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-soft)}
/* 출금 예정일 — 줄 안에 앉는 작은 날짜칸 */
.duefld{height:28px;font-size:12px;font-family:inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 7px}
/* 🧾 영수증 판독 결과 — 칸이 저절로 채워졌다는 말을 그 자리에서 한다 */
/*
 * 🧾 지출 등록의 **첫 자리** (2026-08-26 사용자) — 직원이 하는 일은 거의 언제나
 * 영수증·계산서 처리다. 그래서 업로드가 큰 자리를 먼저 차지하고, 칸들은 그 결과를
 * 확인하는 자리로 내려간다. 끌어다 놓기도 받는다(.on 은 그때의 표시).
 */
.exdrop{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--dev) 40%,var(--line));border-radius:14px;
  padding:18px 14px;background:color-mix(in srgb,var(--dev) 5%,var(--panel));text-align:center;
  transition:background .13s var(--ease),border-color .13s var(--ease)}
.exdrop:hover,.exdrop.on{background:color-mix(in srgb,var(--dev) 11%,var(--panel));border-color:var(--dev)}
.exdrop .ic{font-size:26px;line-height:1}
.exdrop b{font-size:14.5px;font-weight:800;color:var(--ink)}
.exdrop span:not(.ic){font-size:12px;color:var(--ink-faint);line-height:1.5}
.exsep{display:flex;align-items:center;gap:9px;margin:14px 0 4px;color:var(--ink-faint);font-size:11.5px}
.exsep::before,.exsep::after{content:"";flex:1;height:1px;background:var(--line2)}
.exscan{margin-top:7px;font-size:12.5px;color:var(--ink-soft);background:var(--panel2);
  border:1px dashed var(--line);border-radius:9px;padding:7px 10px;line-height:1.5}
.flrow .hohold{flex-basis:100%;width:100%}

/* 잠긴 작업 — 감추지 않고 조건과 금액을 같은 줄에 쓴다.
   등급은 계약 조건이라(00 §4) 조건을 숫자로 적는다 — 「조금 남았어요」로 얼버무리지 않는다. */
.wslock{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;
  padding:8px 10px;margin-top:5px;border:1px dashed var(--line2);border-radius:10px;
  background:var(--panel2);color:var(--ink-faint)}
.wslock .wslt{flex:1;min-width:0;font-weight:700;color:var(--ink-soft)}
.wslock .qp{font-weight:800;color:var(--won)}
.wslock em{font-style:normal;font-size:12.5px;opacity:.75}

/* ═══ 작업소 보상·성장 (wsg-) — 2026-08-07 ═══════════════════════════════
 *
 * 이 구역의 **헌법은 색이 층을 가른다**는 것 하나다:
 *   확정금 --won(초록) · 검수 대기 --warn(주황) · 보완 --red(빨강)
 *   놀이(XP·레벨·배지·미션) --free(보라) — **원 단위를 쓰지 않는다**
 * 한 줄에 두 층을 섞지 않는다. 이 규칙 하나가 「벌이를 부풀리지 않는다」를 지킨다.
 *
 * 등급색은 `--g` 로 주입받고 **기존 파트 토큰만** 쓴다(새 hex·새 변수 0개 —
 * 다크모드가 토큰 교체 구조라 리터럴을 넣는 순간 한쪽에서 깨진다).
 * `--g` 가 닿는 곳은 세 군데뿐이다: 밴드 배경 · 등급칩 · 획득 배지 테두리.
 * 접두에 하이픈을 넣은 이유는 style.css 가 전역 단일 파일이고 짧은 이름이 이미
 * 여러 번 남의 규칙에 걸렸기 때문이다(.wsbadge 는 스튜디오, .draft 는 작업소 초안).
 */

/* ── 신분증 (밴드 안 · 놀이 층) ── */
.wsg-id{display:flex;align-items:center;gap:7px;margin-top:13px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.16)}
.wsg-gc{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.06em;
  padding:2px 8px;border-radius:99px;border:1.5px solid var(--g,var(--free));
  background:color-mix(in srgb,var(--g,var(--free)) 26%,transparent)}
.wsg-gn{font-size:14px;font-weight:800}
.wsg-lv{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:800;color:#CFC2F2}
.wsg-eb{font-size:15px;line-height:1}
.ph-head .wsg-xp{margin-top:7px}
.ph-head .wsg-xp i{background:#B8A8E8}          /* 밴드 안에 이미 있는 리터럴 재사용 */
.ph-head .wsg-rw b{color:#C9B6FF}               /* 보너스 = 놀이색. 초록이 아니다 */
.ph-head .won em.pend{color:var(--warn)}        /* 제출은 아직 돈이 아니다 */

/* ── 미션 3카드 ── */
.wsg-mis{padding:0 16px}
.pcside .wsg-mis{padding:0}
.wsg-mrow{display:grid;gap:6px;margin-top:11px}
@media(max-width:880px){.wsg-mrow{grid-auto-flow:column;grid-auto-columns:82%;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .wsg-m{scroll-snap-align:start}}
/* .wslock 문법을 복제한다 — 「조건과 금액을 같은 줄에」를 이미 지키는 문법이 이 화면에 있다 */
.wsg-m{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;text-align:left;
  font-size:13.5px;padding:9px 11px;border:1.5px solid var(--line2);border-radius:11px;
  background:var(--panel2);color:var(--ink-faint);transition:border-color .15s,background .15s}
.wsg-m .kind{font-size:11.5px;font-weight:800;border-radius:99px;padding:2px 8px}
.wsg-m .wslt{flex:1;min-width:0;font-weight:700;color:var(--ink-soft)}
.wsg-m .qp{font-family:var(--mono);font-weight:800;color:var(--won)}
.wsg-m .wsg-xpb{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--free)}
.wsg-m em{font-style:normal;font-size:12.5px;opacity:.8}
.wsg-m b{font-family:var(--mono);font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.wsg-m.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.wsg-m.done{border-color:var(--free);background:color-mix(in srgb,var(--free) 12%,var(--panel));
  animation:kPop .35s ease-out}
.wsg-m.prov{border-style:dashed;border-color:var(--warn)}
/* 지나간 미션은 **회색으로만 식는다.** 붉은색·카운트다운·「놓쳤습니다」 금지 —
   못 채운 것에 벌을 주지 않는 것이 이 체계의 조건이다 */
.wsg-m.gone{opacity:.5;border-style:dashed}
.wsg-prg{flex-basis:100%;height:5px;border-radius:99px;background:var(--line2);overflow:hidden}
.wsg-prg i{display:block;height:100%;background:var(--free);border-radius:99px;transition:width .5s ease}
.wsg-provtag{font-family:var(--mono);font-size:11.5px;font-weight:800;color:var(--warn);
  border:1px dashed var(--warn);border-radius:99px;padding:1px 7px}
.wsg-provtag.done{color:var(--free);border-style:solid;border-color:var(--free)}
.wsg-rr{width:100%;margin-top:7px;font-size:13px}
.wsg-rr:disabled{opacity:.55}
/* PC 옆판은 248px 라 한 줄에 다 넣으면 「기/본/금」처럼 글자가 쪼개진다.
   좁은 곳에서는 제목이 제 줄을 갖는다 — 스캔 속도가 이 판의 UX다 */
.pcside .wsg-m{gap:5px}
.pcside .wsg-m .wslt{flex-basis:100%;order:2}
.pcside .wsg-m .qp,.pcside .wsg-m .wsg-xpb{order:3}
.pcside .wsg-m .wsg-provtag,.pcside .wsg-m em{order:4}
.pcside .wsg-m .wsg-prg,.pcside .wsg-m b{order:5}

/* ── 잡기 전 정보 공개 ── */
.wsg-facts{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.wsg-f{font-family:var(--mono);font-size:12px;color:var(--ink-faint);
  border:1px solid var(--line2);border-radius:8px;padding:2px 7px}
.wsg-f b{color:var(--ink-soft);font-weight:800}
.wsg-al{border-color:color-mix(in srgb,var(--free) 40%,var(--line2));color:var(--free)}
.wsg-al em{font-style:normal;color:var(--ink-faint);margin-left:5px}
.wsg-hit{font-size:12.5px;color:var(--free);background:color-mix(in srgb,var(--free) 8%,transparent);
  border-radius:9px;padding:6px 10px;margin-bottom:10px}
.wsg-hit b{font-family:var(--mono);font-weight:800}
.wsg-hit.lock{color:var(--ink-faint);background:var(--panel2)}

/* ── 등급 카드 ── */
.wsg-grade{border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-top:11px;
  background:var(--panel)}
.wsg-grade.top{background:color-mix(in srgb,var(--g,var(--free)) 7%,var(--panel))}
.wsg-ghd{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:9px}
.wsg-ghd .wsg-gc{color:var(--g,var(--free));background:color-mix(in srgb,var(--g,var(--free)) 12%,transparent)}
.wsg-next{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--won);font-weight:800}
.wsg-cr{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-faint);margin-top:5px}
.wsg-cr>span{width:88px;flex:none}
.wsg-cr i{flex:1;height:5px;border-radius:99px;background:var(--line2);overflow:hidden}
/* 미달은 --red 가 아니라 회색이다. 아직 안 된 것을 실패로 칠하면 그게 벌칙형 장치다 */
.wsg-cr em{display:block;height:100%;background:var(--ink-faint);border-radius:99px;transition:width .5s ease}
.wsg-cr.ok em{background:var(--g,var(--free))}
.wsg-cr b{font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums;
  min-width:96px;text-align:right}
.wsg-cr.ok b{color:var(--ink-soft)}
.wsg-perk{font-size:12.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5}
.wsg-law{font-size:12px;color:var(--ink-faint);margin-top:7px;line-height:1.5}

/* ── 레벨 해금 ── */
.wsg-perks{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.wsg-pk{font-size:12px;color:var(--ink-faint);border:1px solid var(--line2);
  border-radius:8px;padding:3px 8px}
.wsg-pk b{font-family:var(--mono);font-weight:800;margin-right:4px}
.wsg-pk.on{color:var(--free);border-color:color-mix(in srgb,var(--free) 40%,var(--line2))}
/* 아직 못 만든 해금은 「준비 중」 — 안 되는 걸 열린 것처럼 보이면 나머지 표도 못 믿게 된다 */
.wsg-pk.soon{opacity:.5;color:var(--ink-faint);border-style:dashed}
.wsmesec .wsg-xp i{background:var(--free)}

/* ── 배지 ── */
.wsg-bdgs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:9px}
@media(max-width:880px){.wsg-bdgs{grid-template-columns:repeat(5,1fr)}}
/* 미획득도 이모지를 그대로 흐리게 둔다 — 🔒·물음표로 가리면 수집이 아니라 복권이 된다.
   grayscale 이 이모지에 안 먹는 플랫폼이 있어 opacity 를 보장선으로 함께 건다 */
.wsg-bd{aspect-ratio:1;display:grid;place-items:center;font-size:20px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--line2);
  filter:grayscale(1);opacity:.42;transition:opacity .15s,filter .15s}
.wsg-bd.got{filter:none;opacity:1;border-color:var(--g,var(--free));
  background:color-mix(in srgb,var(--g,var(--free)) 10%,var(--panel))}
.wsg-bd.legend{grid-column:span 2;font-size:24px}
.wsg-bdinfo{display:flex;flex-direction:column;gap:3px;margin-top:8px;font-size:13px}
.wsg-bdinfo b{font-size:14px}
.wsg-bdinfo span{color:var(--ink-faint)}
.wsg-bdrw{font-family:var(--mono);font-size:12px;color:var(--free)}

/* ── 마이페이지 금액 5칸 · 보너스 이력 ── */
.wsg-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:880px){.wsg-5{grid-template-columns:repeat(2,1fr)}}
.wsmec.rew b{color:var(--free)}
.wsmec.pay b{color:var(--won)}
/* .wsmec b 가 display:block · 18px 라, 설명줄(em) 안에서 강조하면 그 단어만 거대해진다.
   좁은 폭에서는 「제출일」 한 단어가 제목처럼 튀어나온다 — 안에서는 인라인으로 되돌린다 */
.wsmec em b{display:inline;font-size:inherit;color:inherit;font-weight:800}
.wsg-brk{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.wsg-brk i{font-style:normal;color:var(--free)}
.wsg-rwrow{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 0;
  border-bottom:1px solid var(--line2)}
.wsg-rwrow .wsg-rwc{flex:1;min-width:0;color:var(--ink-faint);font-family:var(--mono);font-size:12px}
.wsg-rwrow b{font-family:var(--mono);font-weight:800;color:var(--free)}
.wsg-rwrow em{font-style:normal;font-size:12px;color:var(--ink-faint);min-width:76px;text-align:right}
.pcmoney .row.rew b{color:var(--free)}

/* ── 관리자: 수당 칩 · 하한 경고 · 사유코드 안내 ── */
.wsg-alw{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:11px}
@media(max-width:640px){.wsg-alw{grid-template-columns:repeat(2,1fr)}}
.wsg-alc{display:flex;flex-direction:column;gap:1px;text-align:left;font-size:12px;
  border:1.5px solid var(--line2);border-radius:10px;padding:7px 9px;background:var(--panel2)}
.wsg-alc b{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.wsg-alc span{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.wsg-alc.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 8%,var(--panel))}
.wsg-alc.on b{color:var(--free)}
.wsg-alc input{width:100%;margin-top:4px;font-size:12px;padding:2px 5px;
  border:1px solid var(--line2);border-radius:6px;background:var(--panel)}
.ntlab.bad{color:var(--red)}
.wsg-bad{display:block;color:var(--red);font-weight:800;margin-bottom:2px}
/* 회사 사유를 고르면 결과를 그 자리에서 말한다 — 이 한 줄이 등급 보호의 실체다 */
.wsg-excl{font-size:12.5px;color:var(--ink-faint);background:var(--panel2);
  border-left:2px solid var(--free);border-radius:0 8px 8px 0;padding:6px 10px;margin:6px 0}
.wsg-late{color:var(--warn);font-weight:700}
.wsperson .wsg-gc{border-color:var(--g,var(--free));color:var(--g,var(--free));
  background:color-mix(in srgb,var(--g,var(--free)) 10%,transparent)}

/* ── 승급 창 — .mmbox 를 그대로 쓴다(새 오버레이 문법을 만들지 않는다) ── */
.wsg-up{text-align:center;max-width:420px}
.wsg-upband{padding:26px 18px 20px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--g,var(--free)) 22%,var(--panel)),
    color-mix(in srgb,var(--g,var(--free)) 55%,var(--panel)));
  display:flex;flex-direction:column;align-items:center;gap:8px}
.wsg-upband .wsg-gc.big{font-size:26px;padding:6px 18px;border-width:2px}
.wsg-upband b{font-size:19px;font-weight:800}
.wsg-upline{font-size:13px;color:var(--ink-faint);padding:13px 18px 0;line-height:1.6}
.wsg-upline .qp{display:block;margin-top:5px;font-family:var(--mono);font-weight:800;color:var(--won)}
.wsg-upperk{padding:13px 18px 0;font-size:13px}
.wsg-upperk b{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:6px;
  font-family:var(--mono);letter-spacing:.08em}
.wsg-upperk span{display:inline-block;margin:2px 3px;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line2);background:var(--panel2)}
.wsg-up .wsg-law{padding:0 18px}
.wsg-up .mmfoot{justify-content:center}

/* ── 프롬프트함 2차 ────────────────────────────────────────────────────────
   칩 안에서 「고르기」와 「내 기본으로 두기」를 가른다. 하나로 합치면
   보려고 눌렀는데 기본값이 바뀐다. */
.pchip2{display:inline-flex;align-items:center;gap:0}
.pchip2 .pcname{border:0;background:none;color:inherit;font:inherit;padding:0}
.pchip2 .pcstar{border:0;background:none;color:var(--ink-faint);font-size:14px;
  padding:0 0 0 6px;line-height:1;cursor:pointer}
.pchip2 .pcstar.on{color:var(--warn)}
.pchip2 .pcstar:hover{color:var(--warn)}

.pmsort{display:flex;gap:6px;margin-bottom:12px}
.pmrow{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:8px;
  background:var(--panel)}
.pmrow.arch{opacity:.55;background:var(--panel2)}
.pmtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.pmtop b{font-size:15.5px}
.pmnew{font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--dev);
  border-radius:4px;padding:1px 5px}
.pmlock,.pmarch,.pmorg{font-size:12px;font-weight:700;border-radius:99px;padding:1px 7px;
  background:var(--panel2);color:var(--ink-faint);border:1px solid var(--line)}
.pmorg{color:var(--won);border-color:var(--won)}
.pmmeta{font-size:13px;color:var(--ink-faint);margin-bottom:6px}
.pmbody{font-size:13.5px;color:var(--ink-soft);line-height:1.55;background:var(--panel2);
  border-radius:8px;padding:7px 9px;margin-bottom:8px;white-space:pre-wrap;word-break:break-word}
.pmacts{display:flex;gap:6px;flex-wrap:wrap}
.pmnote{font-size:13.5px;color:var(--ink-faint);line-height:1.6;border-top:1px solid var(--line);
  padding-top:11px;margin-top:12px}

/* 시스템 메시지 — 작성자가 없는 한 줄. 사람 말과 같은 모양으로 두면
   「누가 썼지」를 찾게 되고, 아바타 자리에 undefined 가 박힌다. */
.msg.sys{display:block;background:var(--panel2);border-left:2px solid var(--line2);
  border-radius:0 8px 8px 0;padding:7px 11px;margin:6px 0;
  font-size:13.5px;color:var(--ink-soft)}
.msg.sys b{color:var(--ink)}
.msg.sys .systime{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-left:7px}

/* ── 🧠 기획 의견 엔진 ──────────────────────────────────────────────────────
   등급이 눈에 보이는 것이 이 화면의 전부다. 근거 있는 문장과 그럴듯한 문장이
   같은 무게로 읽히면 도구가 「AI 가 뭐라고 하더라」가 된다. */
.ptabs{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
.ptab{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:6px 14px;font-size:14.5px;font-weight:800}
.ptab.on{background:var(--dev);border-color:var(--dev);color:#fff}
.ptabs .kbstat{margin-left:auto;font-size:13.5px;color:var(--ink-faint)}

.planwrap{display:grid;grid-template-columns:270px 1fr;gap:12px;align-items:start}
@media (max-width:900px){ .planwrap{grid-template-columns:1fr} }
.planlist{padding:13px;max-height:calc(var(--vh100)*.78);overflow-y:auto}
.planmain{padding:16px 18px;min-height:200px}

.opitem{display:block;width:100%;text-align:left;border:1px solid transparent;
  border-radius:10px;padding:8px 10px;margin-bottom:4px;background:none}
.opitem:hover{background:var(--panel2)}
.opitem.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 7%,var(--panel))}
.opitem .ost{display:inline-block;font-size:12px;font-weight:800;border-radius:99px;
  padding:1px 7px;background:var(--panel2);color:var(--ink-faint)}
.opitem .ost.s-완료{background:color-mix(in srgb,var(--won) 16%,var(--panel));color:var(--won)}
.opitem .ost.s-실패{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red)}
.opitem .ost.s-진행{background:color-mix(in srgb,var(--warn) 16%,var(--panel));color:var(--warn)}
.opitem .ot{display:block;font-weight:700;font-size:14.5px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opitem .om{display:block;font-size:12.5px;color:var(--ink-faint)}

.ophead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:13px}
.ophead b{font-size:18px;letter-spacing:-.02em}
.ophead .opmeta{font-size:13px;color:var(--ink-faint)}
.ophead .opacts{margin-left:auto;display:flex;gap:6px}

.opsteps{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.ostep{font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:99px;
  padding:3px 9px;color:var(--ink-faint)}
.ostep.done{border-color:var(--won);color:var(--won)}
.ostep.now{border-color:var(--dev);color:#fff;background:var(--dev)}

.opverdict{background:var(--panel2);border-left:3px solid var(--dev);border-radius:0 10px 10px 0;
  padding:12px 14px;font-size:15.5px;line-height:1.75;margin-bottom:16px}
.opsec{margin-bottom:16px}
.opsec h3{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:7px}
.opclaim{font-size:15px;line-height:1.8;padding:5px 0;border-bottom:1px dashed var(--line2)}
.opclaim:last-child{border-bottom:0}

/* 각주 — 내부는 파랑, 웹은 초록. 눌러서 근거 카드로 간다 */
.cite{border:0;background:none;font-family:var(--mono);font-size:12.5px;font-weight:800;
  padding:0 2px;vertical-align:super;cursor:pointer}
.cite.e{color:var(--dev)}
.cite.w{color:var(--won)}
.cite:hover{text-decoration:underline}
/* 🔸 일반 지식 — 근거가 없다는 표시. 문장을 지우지 않고 가중치를 낮추게 한다 */
.gbadge{font-size:12px;font-weight:700;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:99px;padding:1px 7px;margin-left:4px}
.sbadge{font-size:12px;font-weight:700;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:99px;padding:1px 7px;margin-left:4px}

.evcard{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:8px;
  background:var(--panel);transition:border-color .2s,background .2s}
.evcard.hit{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
/* 그 뒤로 상태가 바뀐 근거. **숨기지 않고 표시만 한다** — 의견서는 안 고친다 */
.evcard.evstale{border-style:dashed}
.evcard.evstale .evsnip{color:var(--ink-faint)}
.evtop{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.evtop b{font-size:14.5px}
.evid{font-family:var(--mono);font-size:12.5px;font-weight:800;border-radius:5px;padding:1px 6px;color:#fff}
.evid.e{background:var(--dev)}
.evid.w{background:var(--won)}
.evk{font-size:12.5px;color:var(--ink-faint)}
.evsnip{font-size:13.5px;line-height:1.65;color:var(--ink-soft);
  max-height:74px;overflow:hidden;position:relative}
.evjump{border:0;background:none;color:var(--dev);font-size:13px;font-weight:800;
  padding:5px 0 0;cursor:pointer;display:inline-block}

.opfold{margin-top:16px;border-top:1px solid var(--line);padding-top:11px}
.opfold summary{font-size:13.5px;color:var(--ink-faint);cursor:pointer}
.opq{font-size:13.5px;color:var(--ink-faint);margin:8px 0 4px}
/* 검색어는 한글 문장이다 — 고정폭에 두면 한글이 폴백 글꼴로 떨어져 얼룩진다.
   칩 모양은 유지하고 글꼴만 본문을 따른다. */
.opq code{font-family:inherit;background:var(--panel2);border-radius:5px;padding:1px 6px;font-size:12.5px}
/* 기획안 원문은 pre 지만 **글**이다 — pre 기본값(고정폭)에 두면 한글이 굴림 폴백으로
   떨어져 이 칸만 다른 앱이 된다. 줄바꿈 보존만 pre 에서 얻고 글꼴은 본문을 따른다. */
.opbrief{font-family:inherit;font-size:13.5px;line-height:1.7;background:var(--panel2);border-radius:9px;
  padding:10px 12px;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto}

/* 자료 — 예쁠 필요 없다. 청크 수가 보이는 것이 전부다 */
.docrow{border:1px solid var(--line);border-radius:13px;padding:14px 15px;margin-bottom:9px;background:var(--panel)}
/* 상태 3단계. **「이력」은 흐리게 하지 않는다** — 검색에 실제로 쓰이는 자료라서,
   빠진 것처럼 보이면 사람이 「왜 이게 인용됐지」로 읽는다. 빠지는 둘만 흐리다. */
.docrow.u-이력{border-left:3px solid var(--ink-faint)}
.docrow.u-제외,.docrow.u-휴지통{opacity:.55;background:var(--panel2)}
.docrow.bad{border-color:var(--red)}
.dtier{font-size:12px;font-weight:800;border-radius:99px;padding:1px 7px;
  background:color-mix(in srgb,var(--dev) 14%,var(--panel));color:var(--dev)}
.dtier.t-고정{background:color-mix(in srgb,var(--red) 13%,var(--panel));color:var(--red)}
.doctop{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.doctop b{font-size:15.5px}
.dst{font-size:12px;font-weight:800;border-radius:99px;padding:1px 7px;
  background:var(--panel2);color:var(--ink-faint)}
.dst.s-완료{background:color-mix(in srgb,var(--won) 16%,var(--panel));color:var(--won)}
.dst.s-실패{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red)}
.docmeta{font-size:13px;color:var(--ink-faint);margin-bottom:6px}
.docmeta .warnx{color:var(--red)}
.docacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.docacts .fld{width:auto;margin-bottom:0;padding:5px 8px;font-size:13.5px}
.dptitle{font-size:15.5px;font-weight:800;background:var(--panel2);border-radius:9px;
  padding:9px 11px;margin-bottom:9px;word-break:break-word}
.dplist{margin:7px 0 0;padding-left:17px;font-size:13.5px;color:var(--ink-faint);
  max-height:150px;overflow-y:auto}
.chunkbox{margin-top:9px;max-height:340px;overflow-y:auto;border-top:1px dashed var(--line2);padding-top:8px}
.chunk{border-left:2px solid var(--line2);padding:5px 0 5px 9px;margin-bottom:6px}
.chunk.hit{border-left-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.chunk .cloc{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--dev)}
.chunk .clen{font-size:12px;color:var(--ink-faint);margin-left:6px}
.chunk .ctxt{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin-top:3px}

/* ── 회의록: ## 강조 키워드 · 투표 · 주제 외 ────────────────────────────────
   ##키워드는 뱃지가 아니라 **요약 지시**다. 그래서 「무엇이 반영되나」를 옆에 적는다. */
/* ☑ 결정·할 일 → 카드 (3.50.0) — 회의록과 업무보드는 코드 수준에서 끊겨 있었다.
   **자동으로 만들지 않는다**: 요약의 결정·할 일 줄을 후보로 세우고, 고른 것만 카드가 된다.
   이름은 .mtodo — 이미 있는 .macts(카드 손잡이 줄)와 헷갈리지 않게 갈랐다. */
.mtodo{background:var(--panel2);border-radius:10px;padding:9px 11px;margin-top:10px}
.mtodo .kwlab{color:var(--won);display:block;margin-bottom:4px}
.mtodo label{display:flex;gap:8px;align-items:baseline;font-size:14px;color:var(--ink-soft);
  padding:3px 4px;border-radius:7px;cursor:pointer}
.mtodo label:hover{background:color-mix(in srgb,var(--ink) 4%,var(--panel2))}
.mtodo input{accent-color:var(--won);transform:translateY(1px);flex:none}
.mtfoot{display:flex;justify-content:flex-end;margin-top:6px}

.kwbox{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  background:var(--panel2);border-radius:10px;padding:8px 11px;margin-bottom:10px}
.kwlab{font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--dev);flex:none}
.kwchip{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;
  background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev);
  border-radius:99px;padding:2px 4px 2px 9px}
.kwx{border:0;background:none;color:inherit;font-size:12px;padding:0 3px;cursor:pointer;opacity:.6}
.kwx:hover{opacity:1;color:var(--red)}
.kwadd{border:1px dashed var(--line2);background:none;color:var(--ink-faint);
  border-radius:99px;padding:2px 9px;font-size:13.5px;font-weight:800;cursor:pointer}
.kwhint{font-size:12.5px;color:var(--ink-faint);flex-basis:100%;line-height:1.5}
.kwhint code{font-family:var(--mono);background:var(--panel);border-radius:4px;padding:0 4px}

.pollbox{margin-bottom:10px}
.pollone{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.pq{font-size:14.5px;font-weight:800;margin-bottom:7px}
.pq .pn{font-size:12.5px;font-weight:600;color:var(--ink-faint);margin-left:6px}
.popt{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:3px}
.popt .pol{flex:none;min-width:64px;color:var(--ink-soft)}
.popt .pbar{flex:1;height:7px;background:var(--panel2);border-radius:99px;overflow:hidden}
.popt .pbar i{display:block;height:100%;background:var(--dev);border-radius:99px}
.popt .pcnt{flex:none;font-family:var(--mono);font-size:13px;font-weight:800}

/* 주제 외 — **접은 것이지 지운 것이 아니다.** 되돌리기가 같은 자리에 있어야 한다 */
.offbox{margin-top:14px;border-top:1px dashed var(--line2);padding-top:10px}
.offbox summary{font-size:13.5px;color:var(--ink-faint);cursor:pointer;font-weight:700}
.offbox .offnote{font-weight:400;margin-left:6px}
.offgrp{margin-top:9px;border-left:2px solid var(--line2);padding-left:10px}
.offhd{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:14px}

/* ── 📨 초대장 · 참여이력 ────────────────────────────────────────────────────
   투표와 달리 **누가 답했는지 보인다** — 모임 참석은 누가 오는지가 곧 정보다.
   다만 참여이력은 날짜만 세고 빈도는 안 센다(근태가 되지 않게). */
.mmbox.wide{width:min(760px,100%)}
.ivtop{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ivtop .ivhname{font-size:15px}
.ivcard{border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:8px;background:var(--panel)}
.ivcard.closed{opacity:.6;background:var(--panel2)}
.ivhd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.ivhd b{font-size:16px}
.ivk{font-size:12px;font-weight:800;border-radius:99px;padding:1px 8px;
  background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev)}
.ivst{font-size:12px;font-weight:700;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:99px;padding:1px 7px}
.ivmeta{font-size:13px;color:var(--ink-faint);margin-bottom:6px}
.ivbody{font-size:14px;line-height:1.65;color:var(--ink-soft);background:var(--panel2);
  border-radius:8px;padding:8px 10px;margin-bottom:8px;white-space:pre-wrap}
.ivwho{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.ivp{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:2px 9px;cursor:pointer}
.ivp i{font-style:normal;font-size:11.5px}
.ivp.a-참여{border-color:var(--won);color:var(--won)}
.ivp.a-불참{border-color:var(--line2);color:var(--ink-faint);opacity:.7}
.ivp.a-미정{border-color:var(--warn);color:var(--warn)}
.ivacts{display:flex;gap:6px;flex-wrap:wrap}

.ivhrow{display:flex;align-items:center;gap:9px;font-size:14px;padding:7px 2px;
  border-bottom:1px dashed var(--line2)}
.ivhrow b{flex:1;min-width:0}
.ivha{font-size:12px;font-weight:800;border-radius:99px;padding:1px 8px;flex:none}
.ivha.a-참여{background:color-mix(in srgb,var(--won) 15%,var(--panel));color:var(--won)}
.ivha.a-불참{background:var(--panel2);color:var(--ink-faint)}
.ivha.a-미정{background:color-mix(in srgb,var(--warn) 15%,var(--panel));color:var(--warn)}
.ivhm{font-size:12.5px;color:var(--ink-faint);flex:none}

/* ═══════════ 📝 기획 워크벤치 · 💡 아이디어 스튜디오 (2026-08-07 목업 형식) ═══════════
   목업 engine_mockup_v1 의 형식을 따르되 **이 앱의 부품**으로 그린다 —
   모달은 .mmodal, 버튼은 .mini, 판은 .panel. 내용(파이프라인 산출물)은 그대로다. */

/* 비동기 러너 배너 — 로딩 스피너로 화면을 막지 않는 것이 원칙 */
.runbar{display:flex;align-items:center;gap:12px;border-radius:13px;padding:11px 16px;margin-bottom:12px;
  background:color-mix(in srgb,var(--dev) 8%,var(--panel));
  border:1px solid color-mix(in srgb,var(--dev) 30%,transparent);font-size:13.5px}
.runbar.free{background:color-mix(in srgb,var(--free) 8%,var(--panel));
  border-color:color-mix(in srgb,var(--free) 30%,transparent)}
.runbar b{font-size:13.5px}
.runbar .rstep{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.runbar .rnote{font-size:12.5px;color:var(--ink-faint)}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dev);
  animation:kPulse 1.2s ease-in-out infinite;flex:none}
.runbar.free .pulse,.rcard .pulse{background:var(--free)}
@keyframes kPulse{50%{opacity:.3}}
.sp{flex:1}

/* 목록 행 — 상태 뱃지가 오른쪽 끝에 선다. 결말이 목록에서 보여야
   「이거 전에 봤는데 어떻게 됐더라」가 한눈에 끝난다 */
.rowit{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:13px 17px;margin-bottom:8px;
  transition:border-color var(--t-fast),background var(--t-fast)}
.rowit:hover{border-color:var(--dev);background:var(--panel2)}
.rowit.sess{border-left:3px solid var(--free)}
.rowit.sess:hover{border-color:var(--free)}
.rowit.op{border-left:3px solid var(--dev)}   /* 워크벤치 행 — 스튜디오 행과 같은 문법, 색만 파랑 */
.rowit .rmain{min-width:0;display:flex;flex-direction:column;gap:1px}
.rowit .rtt{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowit .rmeta{font-size:12.5px;color:var(--ink-faint)}
.rowit .rdate{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}
.lcnt{font-weight:400;opacity:.8}

/* 상태 뱃지 — 부분 완료(주황)가 완료(초록)와 달라 보여야 한다 */
.wbdg{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 10px;
  font-size:12px;font-weight:800;flex:none;white-space:nowrap}
.wbdg.run{background:color-mix(in srgb,var(--dev) 14%,transparent);color:var(--dev)}
.wbdg.done{background:color-mix(in srgb,var(--won) 14%,transparent);color:var(--won)}
.wbdg.hold{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.wbdg.fail{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.wbdg.dead{background:color-mix(in srgb,var(--ink-faint) 18%,transparent);color:var(--ink-faint)}

/* 상단바 — 목업의 topbar. 목록: 제목·크럼·탭·액션 / 문서: ← 목록·제목·뱃지·액션 */
.wtopbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-bottom:14px}
.wtopbar h1{font-size:16.5px;font-weight:800}
.wtopbar h1.dt{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:44%}
.wtopbar .crumb{font-size:13px;color:var(--ink-faint)}
.wtopbar.free{border-left:3px solid var(--free)}   /* 색 언어 — 스튜디오는 보라 */
.wtopbar.wb{border-left:3px solid var(--dev)}      /* 색 언어 — 워크벤치는 파랑 */
.wtopbar .wtabs{display:flex;gap:4px}
.mini.pri.free{background:var(--free);border-color:var(--free)}

/* 목록 머리 — 「의견서 4건」. 행은 판으로 싸지 않고 배경 위에 바로 선다 (목업 형식) */
.lshead{display:flex;align-items:baseline;gap:9px;margin:2px 2px 10px}
.lshead h2{font-size:15px;font-weight:800}
.lshead .cnt{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint)}

/* ⚙️ 단계 프롬프트 편집 */
.eprow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.eph{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.eph b{font-size:13.5px}
.eph .fld.sm{width:auto;margin:0;padding:5px 9px;font-size:12.5px}
.ephint{font-size:12px;color:var(--ink-faint);margin-bottom:7px}
.eptx{font-family:inherit;font-size:13px;line-height:1.6;resize:vertical;margin-bottom:0}
.epacts{display:flex;justify-content:flex-end;margin-top:7px}

/* 의견서 2단 — 본문 + sticky 근거 패널. 근거가 따라와야 각주가 장식이 아니다 */
.wbwrap{display:flex;gap:16px;align-items:flex-start}
.wbdoc{flex:1;min-width:0;padding:24px 28px}
.wbdoc h2{font-size:17px;font-weight:800;margin-bottom:5px}
.wbmeta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
.wbverdict{background:var(--panel2);border-left:3px solid var(--dev);border-radius:0 10px 10px 0;
  padding:13px 16px;font-size:14.5px;font-weight:600;margin-bottom:20px;line-height:1.7}
.wbsec{margin-bottom:18px}
.wbsec h4{font-size:13.5px;font-weight:800;color:var(--ink-soft);margin-bottom:7px;
  display:flex;gap:8px;align-items:center}
.wbsec h4 .n{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.wbclaim{padding:8px 0;font-size:14px;line-height:1.7;border-bottom:1px dashed var(--line2)}
.wbclaim:last-child{border-bottom:0}
.negx{text-decoration:line-through;color:var(--ink-faint)}

/* 근거 패널 — sticky. 상단 범례: 색만으로 등급이 읽히는 게 목표 */
.wbev{flex:0 0 320px;position:sticky;top:14px;
  max-height:calc(var(--vh100) - 90px);overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.evph{font-size:12.5px;font-weight:800;color:var(--ink-soft);padding:2px 4px;
  display:flex;gap:8px;align-items:center}
.evlegend{display:flex;gap:9px;font-size:11.5px;color:var(--ink-faint);margin-left:auto;font-weight:500}
.evlegend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px}
.evlegend .li-e{background:var(--dev)}
.evlegend .li-w{background:var(--won)}
.evlegend .li-g{background:var(--warn)}

/* 각주 — 목업의 3색 알약. 내부 파랑 [E] · 웹 초록 [W] · 일반 주황 🔸 */
.cite{border:1px solid transparent;font-family:var(--mono);font-size:11.5px;font-weight:800;
  border-radius:6px;padding:0 6px;margin-left:2px;cursor:pointer;vertical-align:1px}
.cite.e{color:var(--dev);background:color-mix(in srgb,var(--dev) 10%,transparent)}
.cite.w{color:var(--won);background:color-mix(in srgb,var(--won) 10%,transparent)}
.cite:hover{border-color:currentColor;text-decoration:none}
.gbadge{background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:6px;padding:0 6px}

/* 검색 계획 창 — 칩을 지운 것이 그대로 실행된다.
   sp- 접두사인 이유: .kwchip 은 회의록 ## 칩이 먼저 쓰는 이름이다 — 겹치면 나중 규칙이 남의 칩을 덮는다 */
.spchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px;min-height:26px}
.spchip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:600}
.spchip.neg{border-style:dashed;color:var(--ink-faint);text-decoration:line-through}
.spx{border:0;background:none;color:var(--ink-faint);font-size:13px;padding:0;line-height:1}
.spx:hover{color:var(--red)}
.spadd .fld{margin-bottom:12px;padding:8px 12px;font-size:13px}
.mmhint{font-weight:500;color:var(--ink-faint);font-size:12px}
.srcrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.srci{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:10px;
  padding:8px 13px;font-size:12.5px;font-weight:700;background:var(--panel2);color:var(--ink-faint)}
.srci small{font-weight:500;font-size:11px}
.srci i{font-style:normal;font-size:10.5px;font-weight:800}
.srci.on{border-color:var(--won);color:var(--ink)}
.srci.on i{color:var(--won)}

/* ── 스튜디오 ── */
.seedbox{background:var(--panel);border:2px dashed var(--line);border-radius:16px;
  padding:24px;text-align:center;margin-bottom:14px;transition:border-color var(--t-fast)}
.seedbox:hover{border-color:var(--free)}
.seedbox .big{font-size:16px;font-weight:800;margin-bottom:3px}
.seedbox .sub{font-size:13px;color:var(--ink-faint);margin-bottom:13px}
.seedbox .fld{width:min(560px,100%);margin-bottom:0}
.seedbox .modes{margin-top:10px;font-size:12px;color:var(--ink-faint)}
.seedbox .modes b{color:var(--free)}

/* 워크벤치 진입함 — 스튜디오 seedbox 와 같은 부품, 색만 파랑 (03 §5 색 언어).
   기획안은 씨앗보다 길다 — 제목·본문 두 칸이라 칸 간격·왼쪽 정렬을 여기서만 되살린다 */
.seedbox.wb:hover{border-color:var(--dev)}
.seedbox.wb .fld{width:min(680px,100%);margin-bottom:9px;text-align:left}
.seedbox.wb textarea.fld{resize:vertical;line-height:1.6}
.seedbox.wb .gorow{margin-top:2px}
.seedbox.wb .modes b{color:var(--dev)}
.depthc.wb.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.depthc.wb.on b{color:var(--dev)}

.stwrap{display:flex;gap:16px;align-items:flex-start}
.strounds{flex:0 0 262px;position:sticky;top:14px;display:flex;flex-direction:column;gap:9px;
  max-height:calc(var(--vh100) - 90px);overflow-y:auto}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px}
.rcard .rh{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13px;margin-bottom:5px}
.rcard .rh .mono{color:var(--ink-faint);font-size:11px;margin-left:auto}
.rcard .rfound{color:var(--ink-soft);line-height:1.55}
.rcard.next{border-color:var(--free);background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.rcard.bad{border-color:var(--red)}
.rcard .racts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.vwrap{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.vchip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;
  padding:2px 10px;font-size:12px;font-weight:700}
.vchip.pick{cursor:pointer;color:var(--ink-faint)}
.vchip.pick.on{border-color:var(--free);color:var(--free);
  background:color-mix(in srgb,var(--free) 8%,transparent)}

.stmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px}
.sth{font-size:14.5px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sth .snap{font-size:11.5px;color:var(--ink-faint);font-weight:500;margin-left:auto}
.stgeo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stgeo h5,.sigh{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-bottom:8px;
  display:flex;gap:6px;align-items:center}
.sigh{margin-top:15px;margin-bottom:3px}
.stgeo h5 .cnt{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);font-weight:600}
.geoit{border:1px solid var(--line2);border-radius:10px;padding:9px 12px;margin-bottom:6px;font-size:12.5px}
.geoit .gn{font-weight:800;font-size:13px}
.geoit .gm{color:var(--ink-faint);font-size:12px}
.geoit.opp{border-color:var(--won);background:color-mix(in srgb,var(--won) 6%,transparent)}
.geoit .gop{color:var(--won);font-size:11.5px;font-weight:800;margin-top:2px}
.geoit.unv{border-style:dashed}
.sigrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line2);font-size:13px}
.sigrow:last-child{border-bottom:0}
.sigrow .interp{font-size:11.5px;color:var(--ink-faint)}
.sigrow .sv{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:800}
.sigrow .up{color:var(--won)}
.sigrow .dn{color:var(--red)}
.sigrow .fl{color:var(--ink-faint)}

/* 확장 축 — 미검증은 점선으로 격리. 감추면 뭘 못 찾았는지 모른다 */
.staxes{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.axcard{border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:13px;background:var(--panel2)}
.axcard .ah{font-weight:800;font-size:13.5px;margin-bottom:5px}
.axcard .acase{color:var(--ink-soft);line-height:1.6}
.axcard.unv{border-style:dashed;opacity:.85}
.axcard .racts{display:flex;gap:6px;margin-top:9px}

@media (max-width:980px){
  .wbwrap,.stwrap{flex-direction:column}
  .wbev,.strounds{position:static;flex:none;width:100%;max-height:none}
  .stgeo,.staxes{grid-template-columns:1fr}
}

/* ═══════════ 📚 회의기록 v2 (2026-08-07 목업) — 목록이 답하고, 사람이 이력으로 이어진다 ═══ */

/* 도구줄 — 제목·참석자 거르기. 내용까지 찾기는 회의 안(찾기 바)이 맡는다 */
.mtool{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.mtool .fld{margin-bottom:0}
.mtool #mtq{flex:1;min-width:220px}
.mtool #mtwho{width:auto;flex:none}
.mtool .n{font-size:13px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}

/* 월 그룹 — 「종료」 뱃지 대신 달력이 답한다 */
.mgroup{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);
  margin:14px 2px 7px;font-weight:700}
.mgroup:first-child{margin-top:0}

/* 기록 상태 태그 — 열기 전에 보인다 */
.mtag{font-size:12px;border-radius:99px;padding:1px 8px;font-weight:700;flex:none;
  background:color-mix(in srgb,var(--ink) 6%,var(--panel));color:var(--ink-faint)}
.mtag.sum{background:color-mix(in srgb,var(--won) 12%,var(--panel));color:var(--won)}
.mtag.busy{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}
/* ##강조 — 이제 **누르면 그 말로 거른다**(3.50.0). 손잡이라 커서가 먼저 말해야 한다 */
.mkw{font-family:var(--mono);font-size:12px;color:var(--free);border:0;background:none;
  padding:0 2px;font-weight:700;cursor:pointer}
.mkw:hover{text-decoration:underline}
/* 켜져 있는 ##필터 — 도구줄에서 ✕ 로 끈다 */
.kwfilter{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;
  font-weight:800;color:var(--free);border:1px solid color-mix(in srgb,var(--free) 32%,var(--panel));
  background:color-mix(in srgb,var(--free) 8%,var(--panel));border-radius:99px;
  padding:3px 6px 3px 10px;cursor:pointer;flex:none}
.kwfilter b{font-weight:800;opacity:.6;padding:0 3px}
.mmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mmeta b{color:var(--ink-soft);font-weight:700}
.mmeta .occ .oa{width:22px;height:22px;font-size:11px;border:2px solid var(--panel2);margin-left:-6px;cursor:pointer}
.mmeta .occ .oa:first-child{margin-left:0}
.mrow.on .occ .oa{border-color:var(--panel)}

/* 회의록 머리 — 사람이 선다 */
.mhd{border-bottom:1px solid var(--line2);padding-bottom:11px;margin-bottom:12px}
.mhd h2{font-size:17.5px;font-weight:800;letter-spacing:-.01em}
.mhd .sub{font-size:13.5px;color:var(--ink-faint);margin-top:2px}
.mhd .sub b{color:var(--ink-soft)}
.whorow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px}
.whorow .ivp{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:99px;padding:2.5px 10px 2.5px 4px;font-size:13px;font-weight:700;
  color:var(--ink-soft);background:var(--panel);cursor:pointer}
.whorow .ivp:hover{border-color:var(--dev);color:var(--dev)}
.whorow .ivp .oa{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;
  background:color-mix(in srgb,var(--oc) 20%,var(--panel));color:var(--oc)}
.whorow .ivp i{font-style:normal;font-size:11.5px;font-weight:800}
.ivp.a-y i{color:var(--won)}
.ivp.a-n i{color:var(--red)}
.ivp.a-q i{color:var(--ink-faint)}
.ivp.a-n{opacity:.62}
.whohint{font-size:12px;color:var(--ink-faint);margin-left:2px}

/* 이 회의에서 찾기 — 결과를 누르면 그 줄로 */
.findbar .fld{margin-bottom:0}
.findbar .fld:focus{border-color:var(--dev)}
.findhits{border:1px solid var(--line2);border-radius:0 0 11px 11px;border-top:0;
  margin:0 6px 10px;background:var(--panel2);padding:4px 6px}
/* 검색칸과 스크립트를 띄운다 — .fld 의 margin-bottom 을 0 으로 죽인 건 결과 목록이
   입력칸에 **붙어야** 하기 때문이다(위 border-top:0 이 그 이음매다). 그래서 간격은
   .fld 가 아니라 뒤따르는 제목이 가진다. 결과가 펼쳐져 있으면 그 아래 여백이 이미
   있으므로 덜 준다. */
.findhits + .scripthead{margin-top:18px}
.findhits:not(.hide) + .scripthead{margin-top:6px}
.fhit{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;
  padding:6px 8px;border-radius:8px;font-size:13.5px;border:0;background:none}
.fhit:hover{background:color-mix(in srgb,var(--dev) 7%,var(--panel))}
.fhit .st{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}
.fhit .fn{font-weight:800;flex:none;color:var(--fc,var(--ink-soft))}
.fhit .fx{color:var(--ink-soft);min-width:0}
.fhit .fx mark{background:color-mix(in srgb,var(--warn) 25%,var(--panel));
  color:var(--ink);border-radius:3px;padding:0 2px}
.fsem{font-size:11px;font-weight:800;color:var(--free);flex:none;
  border:1px solid color-mix(in srgb,var(--free) 40%,var(--line));border-radius:99px;padding:0 6px}
.fmore{font-size:12px;color:var(--ink-faint);padding:4px 8px 6px}
/* 검색 착지 — 잠깐 켜졌다 꺼진다 */
.sline.hit{background:color-mix(in srgb,var(--warn) 12%,var(--panel));
  outline:1.5px solid color-mix(in srgb,var(--warn) 45%,var(--line))}

/* 사람으로 통하는 것들 — 누를 수 있으면 **커서가 먼저 말해야 한다.**
   data-uid 가 붙은 아바타·칩은 전부 사람 창이 열린다(people.js) */
.avt[data-uid],.oa[data-uid],.offchip[data-uid]{cursor:pointer}
.avt[data-uid]:hover,.oa[data-uid]:hover{filter:brightness(1.12);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--dev) 45%,transparent)}
.offchip[data-uid]:hover{border-color:var(--dev);color:var(--dev)}

/* ═══ 👤 사람 창 — 위는 지금, 아래는 이력 ═══ */
.histhd{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.histhd .oa.big{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;font-weight:800;position:relative;flex:none;
  background:color-mix(in srgb,var(--oc) 20%,var(--panel));color:var(--oc)}
.histhd .oa.big i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;
  border-radius:50%;background:var(--sc,var(--ink-faint));border:2px solid var(--panel)}
.histhd b{font-size:16px}
.histhd .dept{font-size:12px;font-weight:700;color:var(--ink-faint);margin-left:4px}
.histhd .pstt{font-size:13px;color:var(--ink-soft);line-height:1.4}
/* 손 묶음이 오른쪽을 갖는다 — 단추 하나하나가 제각기 밀려나면 상태에 따라 자리가 바뀐다 */
.histhd .ppacts{margin-left:auto;display:flex;gap:6px;flex:none;align-items:center}
.histhd .knock,.histhd .bell{flex:none}
/* 참여 목록은 위와 **선으로** 갈린다. 이 선은 원래 설명 줄(.histsub)이 갖고 있었는데,
   그 줄을 걷으면서(2026-08-28 사용자) 선까지 같이 사라져 머리 카드와 목록이 붙어 버렸다 —
   선은 목록이 직접 갖는다 */
#pplHist{border-top:1px solid var(--line2);padding-top:10px;margin-top:10px}
.ivhk{font-size:12px;flex:none;color:var(--ink-faint);white-space:nowrap}
/* 회의 답 두 종 — 초대장 답(참여·불참·미정) 색과 같은 문법 */
.ivha.a-참석{background:color-mix(in srgb,var(--won) 15%,var(--panel));color:var(--won)}

/* ═══════════ 💡 아이디에이션 v0.2 (2026-08-07 작업지시서) ═══════════ */

/* 깊이 = 예산 — 예상 시간·규모를 버튼 안에 직접 (지시서 §12.4) */
.depthrow{display:flex;gap:7px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.depthc{display:flex;flex-direction:column;gap:1px;border:1.5px solid var(--line);border-radius:11px;
  padding:7px 14px;background:var(--panel2);font-weight:800;font-size:13px;text-align:left}
.depthc small{font-weight:500;color:var(--ink-faint);font-size:11px}
.depthc.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 8%,var(--panel))}
.depthc.on b{color:var(--free)}
.v2meta{font-size:11.5px;color:var(--ink-faint)}

/* 좌측 단계 타임라인 — 실패한 곳이 보이고, 거기부터 다시 돌린다 */
.v2stage{display:flex;align-items:baseline;gap:7px;font-size:12.5px;padding:4px 8px;border-radius:8px;
  color:var(--ink-soft);flex-wrap:wrap}
.v2stage b{font-weight:700}
.v2stage.s-completed{color:var(--ink)}
.v2stage.s-completed .v2ic{color:var(--won);font-weight:800}
.v2stage.s-running{background:color-mix(in srgb,var(--free) 8%,var(--panel));color:var(--ink)}
.v2stage.s-failed{background:color-mix(in srgb,var(--red) 8%,var(--panel))}
.v2stage.s-failed .v2ic{color:var(--red);font-weight:800}
.v2stage.s-stale,.v2stage.s-pending{opacity:.55}
.v2stage .mono{font-size:10.5px;color:var(--ink-faint);margin-left:auto}
.v2ic{flex:none;width:14px;text-align:center}
.v2re{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:0 6px;
  font-size:11px;color:var(--ink-soft);flex:none}
.v2re:hover{border-color:var(--free);color:var(--free)}
.v2err{flex-basis:100%;font-size:11px;color:var(--red);padding-left:21px}
.v2cost{font-size:11px;color:var(--ink-faint);padding:8px 8px 2px;border-top:1px dashed var(--line2)}

/* 본문 부품 */
.v2sum{font-size:13.5px;line-height:1.75;color:var(--ink-soft);margin-top:10px;white-space:pre-wrap}
.v2cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 16px}
.v2cols h5,.v2dsec h5{font-size:12.5px;font-weight:800;color:var(--ink-soft);margin-bottom:5px}
.v2li{font-size:13px;line-height:1.6;padding:3px 0;color:var(--ink-soft)}
.v2li b{color:var(--ink)}
.v2lang{margin-top:9px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:13px}
.wsbadge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won);
  font-family:var(--mono);font-size:11.5px;font-weight:800;margin-right:5px;vertical-align:-4px}

/* R 비교표 — 점수만 보이지 않는다. 행을 누르면 근거·반대 근거 (지시서 §12.3) */
.v2twrap{overflow-x:auto}
.v2table{width:100%;border-collapse:collapse;font-size:13px}
.v2table th{font-size:11.5px;color:var(--ink-faint);font-weight:700;text-align:left;
  padding:6px 9px;border-bottom:1px solid var(--line)}
.v2table td{padding:8px 9px;border-bottom:1px dashed var(--line2);vertical-align:top}
.v2row{cursor:pointer}
.v2row:hover td{background:var(--panel2)}
.v2row.on td{background:color-mix(in srgb,var(--free) 7%,var(--panel))}
.hypb{color:var(--warn);font-weight:700}
.v2cdetail{border:1px solid color-mix(in srgb,var(--free) 30%,var(--line));border-radius:12px;
  padding:14px 16px;margin-top:10px;background:color-mix(in srgb,var(--free) 4%,var(--panel))}
.v2cdetail .ah{font-weight:800;font-size:14.5px;margin-bottom:8px}
.v2dsec{margin:9px 0;font-size:13px;line-height:1.65;color:var(--ink-soft)}
.v2fatal{color:var(--red)}
.v2exp{border:1px solid var(--line2);border-radius:11px;padding:11px 14px;margin-bottom:8px}
.v2exp .ah{font-weight:800;font-size:13.5px;margin-bottom:4px}

/* 근거 유형 배지 (지시서 §11.2) — 확인된 사실/사용자 언어/시장 신호/실패 신호/추론 */
.evtbadge{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;flex:none;
  color:var(--bc);background:color-mix(in srgb,var(--bc) 12%,transparent)}

/* ═══════════ 워크벤치 v2 — 판단체계 검토 (2026-08-07) ═══════════ */

/* 3열: 입력·단계 레일 / 의견서 / 근거. 판단 계보까지 왼쪽 레일에 산다 (지시서 §15.1)
   본문은 300px 아래로 못 눌린다 — 좁은 창에서는 근거 패널이 아래 줄로 내려간다(wrap).
   세 칸이 서로를 짓누르면 세 칸 전부 못 쓴다. */
.wb3{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.wb3 .wbdoc{min-width:300px}
@media (max-width:1280px){
  .wb3 .wbev{flex:1 1 100%;position:static;max-height:340px}
}
.wbrail{flex:0 0 232px;position:sticky;top:14px;max-height:calc(var(--vh100) - 120px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:10px 8px;font-size:12.5px}
.wbrail .opfold{margin:0 0 6px}
.wbrail .opfold summary{font-size:12px}
.wbrsec{font-size:11px;font-weight:800;color:var(--ink-faint);text-transform:none;
  padding:8px 8px 4px;border-top:1px dashed var(--line2);margin-top:6px}
.wbrail .wbrsec:first-of-type{border-top:none;margin-top:0}
.wb3 .wbdoc{flex:1;min-width:0}
.lgjump{background:none;border:none;color:var(--free);cursor:pointer;font-size:12px;padding:0;font-weight:700}
.lgjump:hover{text-decoration:underline}
.v2li.lgme{background:color-mix(in srgb,var(--free) 8%,transparent);border-radius:6px}

/* 판정 — 6종. 색이 곧 행동이다: 초록 진행 · 호박 조건·조사 · 보라 재구성 · 회색 보류 · 빨강 반려 */
.vdpill{font-weight:800;font-size:13px;border-radius:8px;padding:2px 10px;flex:none}
.vd-go .vdpill,.wbdg.vd-go{background:color-mix(in srgb,var(--won) 15%,var(--panel));color:var(--won)}
.vd-cgo .vdpill,.wbdg.vd-cgo{background:color-mix(in srgb,var(--won) 10%,var(--panel));color:var(--won)}
.vd-ref .vdpill,.wbdg.vd-ref{background:color-mix(in srgb,var(--dsgn) 14%,var(--panel));color:var(--dsgn)}
.vd-more .vdpill,.wbdg.vd-more{background:color-mix(in srgb,var(--mkt) 14%,var(--panel));color:var(--mkt)}
.vd-hold .vdpill,.wbdg.vd-hold{background:var(--panel2);color:var(--ink-soft)}
.vd-rej .vdpill,.wbdg.vd-rej{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
.wbverdict.vd-go{border-left-color:var(--won)}
.wbverdict.vd-rej{border-left-color:var(--red)}
.wbverdict.vd-more{border-left-color:var(--mkt)}
.wbverdict .cite{margin-left:2px}

/* 근거 유형 색 — D 판단체계(보라) · Q 강의(남색) · E 내부(초록) · W 웹(파랑) · U 사용자(호박) · H 가설(회색) */
.cite.k-D,.evid.k-D{background:color-mix(in srgb,var(--dsgn) 16%,var(--panel));color:var(--dsgn)}
.cite.k-Q,.evid.k-Q{background:color-mix(in srgb,var(--dev) 14%,var(--panel));color:var(--dev)}
.cite.k-E,.evid.k-E{background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won)}
.cite.k-W,.evid.k-W{background:color-mix(in srgb,var(--free) 14%,var(--panel));color:var(--free)}
.cite.k-U,.evid.k-U{background:color-mix(in srgb,var(--mkt) 16%,var(--panel));color:var(--mkt)}
.cite.k-H,.evid.k-H{background:var(--panel2);color:var(--ink-soft)}
.evcard.k-D{border-left:2px solid color-mix(in srgb,var(--dsgn) 45%,transparent)}
.evcard.k-Q{border-left:2px solid color-mix(in srgb,var(--dev) 45%,transparent)}

/* 근거 필터 칩 */
.evfil{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0 8px}
.evfbtn{border:1px solid var(--line2);background:var(--panel);border-radius:7px;
  font-size:11px;font-weight:700;color:var(--ink-soft);padding:2px 8px;cursor:pointer}
.evfbtn.on{border-color:var(--free);color:var(--free);background:color-mix(in srgb,var(--free) 8%,var(--panel))}

/* M-Dictionary 진단 그리드 — 10축. 상태색은 진단 결과(개념 라우팅)의 state 를 그대로 입는다 */
.mdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px 14px}
.mdcell .wbclaim{margin:2px 0 8px}
.mdst{font-size:11px;font-weight:800;border-radius:5px;padding:1px 7px;margin-right:4px}
.mdst.st-supported{background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won)}
.mdst.st-assumed{background:color-mix(in srgb,var(--mkt) 14%,var(--panel));color:var(--mkt)}
.mdst.st-missing{background:var(--panel2);color:var(--ink-faint)}
.mdst.st-contradicted{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
.mdst.st-not_applicable{background:var(--panel2);color:var(--ink-faint);opacity:.7}
.unk{font-style:normal;color:var(--ink-faint);font-weight:800;cursor:help}
.wbclaim .cl{color:var(--ink);margin-right:2px}

/* 자료 목록의 성격·판단체계 축 뱃지 */
.drole{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;
  background:color-mix(in srgb,var(--dsgn) 12%,var(--panel));color:var(--dsgn)}
.dks{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;background:var(--panel2);color:var(--ink-soft)}
.dks.ks-발행{background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won)}
.dks.ks-검수대기{background:color-mix(in srgb,var(--mkt) 14%,var(--panel));color:var(--mkt)}
.dks.ks-실패{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}

/* 판단체계 관리 모달 */
.mdrel{display:flex;align-items:center;gap:7px;padding:8px 4px;border-bottom:1px dashed var(--line2);flex-wrap:wrap}
.mdrevbox,.mddiffbox{padding:4px 8px 10px;border-bottom:1px dashed var(--line2)}
.mdrev{padding:8px 4px;border-bottom:1px dashed var(--line2)}
.mdrev.st-거절{opacity:.5}
.mdrev details summary{font-size:12px;color:var(--ink-faint);cursor:pointer}
.mdprop{padding:8px 4px;border-bottom:1px dashed var(--line2)}

/* 모바일 — 3열은 세로로 */
@media (max-width:860px){
  .wb3{flex-direction:column}
  .wbrail{position:static;flex:none;width:100%;max-height:none}
}

/* 씨앗 입력 줄 — Enter 만 있으면 「어떻게 시작하지」가 안 보인다 (2026-08-07 사용자 보고) */
.seedrow{display:flex;gap:8px;align-items:stretch}
.seedrow .fld{flex:1;min-width:0}
.seedgo{flex:none;white-space:nowrap;padding:0 18px;font-size:14px}

/* 자료 탭 머리 버튼 묶음 — space-between 이 버튼을 가운데로 띄우지 않게 한 덩어리로 */
.qbtns{display:flex;gap:6px;align-items:center}

/* 판단체계 원본의 파이프라인 위치 — 파싱 → 추출 → 검수 → 발행 */
.mdsteps{display:inline-flex;gap:4px;align-items:center;font-size:11.5px;font-weight:700}
.mdsteps i{color:var(--ink-faint);font-style:normal}
.mdstep{border-radius:6px;padding:1px 7px;background:var(--panel2);color:var(--ink-faint)}
.mdstep.s-done{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.mdstep.s-run{background:color-mix(in srgb,var(--free) 12%,var(--panel));color:var(--free)}
.mdstep.s-fail{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
.mdstep.s-wait{background:color-mix(in srgb,var(--mkt) 12%,var(--panel));color:var(--mkt)}

/* ❓ 도움말 — 우상단에 조용히. 헤더에서 뺀 철학·규칙이 이 뒤에 산다 (2026-08-07) */
#helpFab{position:fixed;top:12px;right:14px;z-index:60;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 82%,transparent);
  color:var(--ink-faint);font-size:13px;font-weight:800;cursor:pointer;line-height:1}
#helpFab:hover{color:var(--free);border-color:var(--free)}
.hintro{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.65;
  border-left:3px solid var(--free);padding:4px 0 4px 12px;margin-bottom:12px}
.hstep{font-size:13px;line-height:1.7;color:var(--ink-soft);padding:5px 0 5px 20px;position:relative}
.hstep::before{content:'·';position:absolute;left:6px;color:var(--free);font-weight:800}
.hstep code{font-size:12px}
@media (max-width:860px){ #helpFab{top:auto;bottom:76px;right:12px} }

/* ═══════════ 업무보드 개선 — 06 사양 (2026-08-07) · 짧은 이름 금지, k 접두어 ═══════════ */

/* ⑦ 카드 번호 — 팀이 KORE-nn 으로 말하는 문화와 보드를 맞춘다 */
.kno{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink-faint);flex:none}
.kcard .top .d{margin-left:2px}

/* ② 「내 것」 칩 + 필터 입력 */
.chip.kme .kn{background:var(--free);color:#fff;font-family:var(--mono);font-size:11px;
  font-weight:800;border-radius:99px;padding:0 6px;margin-left:3px}
.ksearch{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:4px 13px;font-size:13px;font-family:inherit;color:var(--ink);min-width:170px}
.ksearch::placeholder{color:var(--ink-faint)}
.ksearch:focus{outline:none;border-color:var(--free)}

/* ③-a 내 컨펌 차례 — 배지 + 테두리 강조 */
.kcard.kwaitme{border:1.5px solid var(--free);border-left-width:3px}
.kwb{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;
  color:var(--free);flex:none;white-space:nowrap}

/* ③-b 인계 카드의 열람 경로 */
.kpeek{display:block;width:100%;text-align:left;border:1px dashed var(--line);background:none;
  border-radius:7px;font-family:inherit;font-size:12px;font-weight:700;color:var(--ink-soft);
  padding:4px 8px;margin:2px 0 7px;cursor:pointer}
.kpeek b{color:var(--free)}
.kpeek:hover{border-color:var(--free)}
.kcard.handoff .hh{display:flex;align-items:center;gap:6px}
.kcard.handoff .hh .kno{margin-left:auto}

/* ④ 상태 빠른 이동 — 팝오버. .stbtn/.stpop 은 오피스 상태 팝업이 이미 쓴다 (충돌 금지) */
.kstbtn{border:1px solid var(--line);background:var(--panel2);border-radius:6px;flex:none;
  font-size:10.5px;font-weight:800;color:var(--ink-faint);padding:1px 6px;font-family:var(--mono);cursor:pointer}
.kstbtn:hover{color:var(--ink);border-color:var(--ink-faint)}
.kcard{position:relative}
.kstpop{position:absolute;right:8px;top:28px;z-index:8;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:5px;display:grid;gap:2px;width:126px}
.kstpop button{border:0;background:none;text-align:left;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--ink-soft);border-radius:7px;padding:4px 8px;cursor:pointer}
.kstpop button.cur{background:var(--panel2);color:var(--ink)}
.kstpop button:hover{background:var(--panel2)}
.kstpop .hint{font-size:10.5px;color:var(--ink-faint);padding:3px 8px 2px;border-top:1px solid var(--line2)}

/* ⑥ 종료 — 접힌 세로 손잡이 */
.kfold{flex:0 0 46px;min-width:46px;align-self:stretch;background:var(--panel2);
  border:1px solid var(--line2);border-radius:13px;padding:12px 0;display:flex;flex-direction:column;
  align-items:center;gap:10px;color:var(--ink-faint);font-family:var(--mono);font-size:12px;
  letter-spacing:.08em;cursor:pointer;min-height:160px}
.kfold:hover{color:var(--ink-soft);border-color:var(--line)}
.kfold .vtxt{writing-mode:vertical-rl;font-weight:700}
.kfold .n{font-weight:800}
.kfoldtog{border:0;background:none;cursor:pointer;color:var(--ink-faint);font-size:12px;padding:0 2px}
.kfoldtog:hover{color:var(--ink)}

/* ═══════════ 업무 단계 넷 + 진행 신호 (2026-08-24) · 짧은 이름 금지, k 접두어 ═══════════ */

/* 진행 신호 한 줄 — 체크리스트 게이지 · 시안 컨펌 · 정체 일수 중 하나만 그려진다 */
.kprog{display:flex;align-items:center;gap:6px;margin:2px 0 5px;
  font-size:11.5px;font-weight:800;color:var(--ink-faint);font-family:var(--mono)}
.kprog .kbar{flex:1;height:5px;border-radius:99px;background:var(--panel2);
  border:1px solid var(--line2);overflow:hidden;display:block}
.kprog .kbar b{display:block;height:100%;background:var(--c);border-radius:99px;transition:width .18s}
.kprog span{flex:none}
.kprog.wait{color:var(--free)}
.kprog.ok{color:var(--won)}
.kprog.no{color:var(--red)}
.kprog.dim{opacity:.75;font-weight:700}
/* 💬 나를 부른 지목 — 나머지 진행 신호는 **상태를 알리는 글자**지만 이건 **내가 눌러야
   끝나는 할 일**이다. 같은 11.5px 맨 글자로 두니 카드 여덟 장 중에서 안 잡혔다
   (2026-08-27 사용자 「눈에 잘 안 띈다」). 줄을 더 늘리지 않고 **있는 한 줄의 세기만**
   올린다 — 사다리는 그대로 하나만 그린다. 칠한 알약은 `.mini.pri.free` 와 같은 옷이다.
   inline-flex 라 글자만큼만 차지한다: .kprog 는 flex 라 그냥 칠하면 카드 폭 전체가 된다.
   ▦ 칩과 ☰ 리스트가 **같은 알약**을 쓴다 — 보기를 바꿨다고 부름이 사라지면 안 된다
   (리스트에는 진행 신호 줄이 아예 없어서 지목이 통째로 안 보였다). */
.kcall{display:inline-flex;align-items:center;background:var(--free);color:#fff;
  border-radius:99px;padding:2px 9px;font-size:11px;font-weight:800;
  font-family:var(--mono);letter-spacing:-.2px;flex:none;white-space:nowrap}
.kprog.kcall{display:inline-flex;color:#fff;font-size:11px;margin:2px 0 5px}

/* 📦 완료 열 머리의 일괄 보관 — 열 이름 옆에 붙되 이름을 밀어내지 않는다 */
.col h5 .kdone{margin-left:auto;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:1px 9px;font-family:inherit;font-size:11px;font-weight:800;
  letter-spacing:0;color:var(--ink-faint);cursor:pointer;white-space:nowrap}
.col h5 .kdone:hover{color:var(--ink);border-color:var(--ink-faint)}

/* ═══════════ 스튜디오 세션 뷰 v2 — 결론→후보→조사 노트 3층 (목업 2026-08-07) ═══════════ */

/* 레일 진행판 — 목차 위에 「몇 번째 / 얼마나」가 먼저 선다 */
.railprog{padding:2px 6px 10px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.railprog .rp1{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:800;gap:6px}
.railprog .rp1 .mono{font-size:10.5px;color:var(--ink-faint);font-weight:600}
.pbar{margin-top:7px;display:flex;gap:2px}
.pbar i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.pbar i.d{background:var(--free)}
.pbar i.r{background:var(--free);animation:pu 1.2s infinite}
.pbar i.f{background:var(--red)}
.railsec{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-faint);padding:8px 8px 2px}
.v2stage.link{cursor:pointer}
.v2stage.link:hover{background:var(--panel2)}

/* 진행 히어로 — 진행 중 화면의 주인공 */
.strunhero{background:linear-gradient(135deg,color-mix(in srgb,var(--free) 9%,var(--panel)),var(--panel));
  border:1px solid color-mix(in srgb,var(--free) 30%,var(--line));border-radius:16px;padding:20px 22px;margin-bottom:14px}
.strunhero .rh1{display:flex;gap:10px;align-items:center;font-size:16px;font-weight:800;flex-wrap:wrap}
.strunhero .now{font-size:13.5px;color:var(--ink-soft);margin-top:3px}
.strunhero .now b{color:var(--free)}
.stbigbar{margin:13px 0 9px;display:flex;gap:3px}
.stbigbar i{flex:1;height:9px;border-radius:5px;background:var(--line)}
.stbigbar i.d{background:var(--free)}
.stbigbar i.r{background:var(--free);animation:pu 1.2s infinite}
.strunmeta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.strunmeta b{font-family:var(--mono);font-weight:700;color:var(--ink)}
.strunhero .runnote{margin-top:10px;font-size:12.5px;color:var(--ink-faint)}

/* 지금까지 나온 것 — 한 줄 요약 스택 */
.stsofar .row{display:flex;gap:9px;align-items:baseline;padding:8px 6px;border-bottom:1px dashed var(--line2);
  font-size:13px;cursor:pointer;border-radius:7px}
.stsofar .row:hover{background:var(--panel2)}
.stsofar .row:last-child{border-bottom:none}
.stsofar .ic{color:var(--won);font-weight:800;font-size:12px;flex:none}
.stsofar .nm{font-weight:700;min-width:110px;flex:none}
.stsofar .sum{color:var(--ink-soft)}
.stsofar .pend{color:var(--ink-faint);cursor:default}
.stsofar .pend:hover{background:none}
.stsofar .pend .ic{color:var(--ink-faint)}

/* 결론 히어로 — 완료 1층 */
.stverdict{background:linear-gradient(135deg,color-mix(in srgb,var(--free) 9%,var(--panel)),var(--panel));
  border:1px solid color-mix(in srgb,var(--free) 30%,var(--line));border-radius:16px;padding:20px 22px;margin-bottom:14px}
.stverdict .v1{font-size:15.5px;font-weight:800;line-height:1.55}
.stverdict .v1 .tag{font-size:11px;font-weight:800;color:var(--free);letter-spacing:.05em;margin-right:7px;vertical-align:2px}
.stverdict .vsum{margin-top:8px;font-size:13px;color:var(--ink-soft);line-height:1.7}
.sttopc{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.sttc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .14s}
.sttc:hover,.sttc.on{border-color:var(--free)}
.sttc .nm{font-weight:800;font-size:13.5px}
.sttc .act{font-size:12px;color:var(--ink-soft);margin-top:5px}
.scorebar{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;color:var(--ink-faint)}
.scorebar .tr{flex:1;height:6px;border-radius:4px;background:var(--line2);overflow:hidden}
.scorebar .tr i{display:block;height:100%;border-radius:4px;background:var(--free)}
.scorebar b{font-family:var(--mono);color:var(--ink)}
.scorebar .dim{color:var(--ink-faint);font-weight:600}

/* R 후보 보드 — 완료 2층. 상태별 그룹 + 카드 + 미니 막대 */
.stcgrp{margin-bottom:14px}
.stcgrp:last-child{margin-bottom:0}
.stcgrp>h5{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.stcgrp .snap{font-size:11.5px;font-weight:600;color:var(--ink-faint)}
.stccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.stcc{position:relative;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--won);
  border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .14s}
.stcc:hover{border-color:var(--free)}
.stcc.hold{border-left-color:var(--warn)}
.stcc.dead{border-left-color:var(--red);opacity:.72}
.stcc.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.stcc .nm{font-weight:800;font-size:13.5px;padding-right:34px}
.stcc .of{font-size:12px;color:var(--ink-soft);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stcc .bdgs{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.stbb{font-size:10.5px;font-weight:700;border-radius:6px;padding:1.5px 7px;background:var(--panel);
  border:1px solid var(--line);color:var(--ink-soft)}
.stbb.hyp{border-style:dashed;color:var(--warn)}
.stbb.risk{color:var(--red)}
.stcc .rank{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.stsubs{margin-top:9px;display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px;color:var(--ink-faint);align-items:center}
.stsubs .tr{height:4px;border-radius:3px;background:var(--line2);overflow:hidden}
.stsubs .tr i{display:block;height:100%;background:var(--ink-faint);border-radius:3px}
.stsubs .tr.hi i{background:var(--free)}

/* 후보 상세 부속 — 실험 카드·승격 줄 */
.stexp{margin-top:12px;background:color-mix(in srgb,var(--won) 5%,var(--panel));
  border:1px solid color-mix(in srgb,var(--won) 25%,var(--line));border-radius:11px;padding:11px 13px;font-size:13px}
.stexp .eh{font-weight:800;font-size:13px;margin-bottom:4px}
.stexp .crit b{font-family:var(--mono)}
.stexp .dim2{color:var(--ink-faint);font-size:12px;margin-top:3px}
.dact{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dact .why{font-size:11.5px;color:var(--ink-faint)}

/* 조사 노트 — 접힌 채로도 요약이 읽히는 아코디언 */
.stnotes{display:flex;flex-direction:column;gap:10px}
details.stnote{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
details.stnote>summary{list-style:none;display:flex;gap:9px;align-items:baseline;padding:13px 18px;
  cursor:pointer;font-weight:800;font-size:13.5px;flex-wrap:wrap}
details.stnote>summary::-webkit-details-marker{display:none}
details.stnote>summary .nsum{font-weight:600;font-size:12px;color:var(--ink-faint)}
details.stnote>summary .arr{margin-left:auto;color:var(--ink-faint);font-size:11px;transition:transform .14s}
details.stnote[open]>summary .arr{transform:rotate(90deg)}
details.stnote>.ninner{padding:2px 18px 16px}
.stgloss{font-size:11px;color:var(--ink-faint);font-weight:500;margin-left:4px}
.stwarn{margin-top:10px;background:color-mix(in srgb,var(--warn) 7%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));border-radius:10px;padding:9px 12px;
  font-size:12.5px;color:var(--ink-soft)}

/* 모바일 — 레일은 진행판만 남는다 (단계 나열은 숨김) */
@media (max-width:860px){
  .strounds .v2stage{display:none}
  .strounds .railsec{display:none}
}

/* ═══════════ 워크벤치 의견서 뷰 v2 — 판정 히어로·진단 보드·검토 노트 (목업 2026-08-07) ═══════════ */

.wbmaincol{flex:1;min-width:300px;display:flex;flex-direction:column;gap:14px}

/* ③ 판정 히어로 — 판정 색이 곧 화면의 색 */
.wbvhero{border-radius:16px;padding:20px 22px;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--panel2),var(--panel))}
.wbvhero.vd-go,.wbvhero.vd-cgo{border-color:color-mix(in srgb,var(--won) 30%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--won) 8%,var(--panel)),var(--panel))}
.wbvhero.vd-ref{border-color:color-mix(in srgb,var(--dsgn) 30%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--dsgn) 8%,var(--panel)),var(--panel))}
.wbvhero.vd-more{border-color:color-mix(in srgb,var(--mkt) 30%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--mkt) 8%,var(--panel)),var(--panel))}
.wbvhero.vd-rej{border-color:color-mix(in srgb,var(--red) 30%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--red) 7%,var(--panel)),var(--panel))}
.wbvhero .v1{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wbvhero .vdpill{font-size:14px;padding:3px 12px}
.wbvhero .vsum{font-size:15px;font-weight:800;line-height:1.5}
.wbvhero .conf{font-size:11.5px;color:var(--ink-faint)}
.diag3{margin-top:12px;display:grid;gap:6px}
.diag3 .dg{display:flex;gap:9px;align-items:baseline;font-size:13px}
.diag3 .lb{flex:none;font-size:11px;font-weight:800;border-radius:6px;padding:1.5px 8px;min-width:96px;text-align:center}
.diag3 .lb.s{background:color-mix(in srgb,var(--won) 13%,var(--panel));color:var(--won)}
.diag3 .lb.b{background:color-mix(in srgb,var(--red) 11%,var(--panel));color:var(--red)}
.diag3 .lb.u{background:color-mix(in srgb,var(--warn) 13%,var(--panel));color:var(--warn)}
.diag3 .tx{min-width:0}
.diag3 .tx .wbclaim{margin:0}
.nextact{margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border-top:1px dashed var(--line2);padding-top:12px}
.nextact .why{font-size:11.5px;color:var(--ink-faint)}

/* ④ R 3기준 미니 막대 — 숫자 나열 대신 (unknown 은 ? 유지) */
.wbsubs{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;font-size:12px;
  color:var(--ink-faint);align-items:center;max-width:460px;margin-bottom:10px}
.wbsubs .tr{height:6px;border-radius:4px;background:var(--line2);overflow:hidden}
.wbsubs .tr i{display:block;height:100%;background:var(--free);border-radius:4px}
.wbsubs b{font-family:var(--mono);color:var(--ink);font-size:12px}
.wbsubs b.unk{color:var(--ink-faint);cursor:help}
.wbrevc{border-color:color-mix(in srgb,var(--free) 25%,var(--line));
  background:color-mix(in srgb,var(--free) 5%,var(--panel))}

/* ⑥ 근거 역링크 */
.evused{display:block;border:none;background:none;padding:0;margin-top:6px;
  font-size:11px;color:var(--free);font-weight:700;cursor:pointer;text-align:left}
.evused:hover{text-decoration:underline}
.wbclaim.hit{background:color-mix(in srgb,var(--free) 10%,transparent);border-radius:8px}

/* ⑦ 목록 계보 칩 */
.lgchip{font-size:10.5px;font-weight:800;border-radius:6px;padding:1px 7px;margin-left:6px;
  background:color-mix(in srgb,var(--free) 10%,var(--panel));color:var(--free);white-space:nowrap}
.diag3 .dg.hit,.mdcell.hit,.wbvhero .v1.hit{background:color-mix(in srgb,var(--free) 10%,transparent);border-radius:8px}

/* ═══════════════════ 📄 상세페이지 빌더 (dpb-) ═══════════════════
   전역 단일 CSS — 접두 dpb- 통일 (짧은 이름은 남의 규칙에 걸린다).
   빌더 껍데기는 앱 토큰(다크 대응), 프리뷰(.dpb-pv)는 커머스 페이지라 항상 밝다. */

/* ── 공용 칩 ── */
.dpb-chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;
  font-size:12px;font-weight:700;border:0;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-faint)}
.dpb-chip.ok{background:color-mix(in srgb,var(--won) 14%,transparent);color:var(--won)}
.dpb-chip.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.dpb-chip.info{background:color-mix(in srgb,var(--dev) 12%,transparent);color:var(--dev)}
button.dpb-chip{cursor:pointer}
.dpb-sub{font-size:12.5px;color:var(--ink-faint)}
.dpb-sp{flex:1}
.dpb-wide{width:100%}

/* ── ① 허브 ── */
#dpHub,#dpPick,#dpBuild{max-width:1180px}
.dpb-hubtop{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.dpb-hubtop h2{font-size:17px}
.dpb-filters{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.dpb-filters .chip{border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:12.5px;
  font-weight:700;color:var(--ink-soft);background:var(--panel)}
.dpb-filters .chip.on{background:var(--dsgn);border-color:var(--dsgn);color:#fff}
.dpb-row{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px 14px;margin-bottom:8px;cursor:pointer}
.dpb-row:hover{border-color:color-mix(in srgb,var(--dsgn) 45%,var(--line))}
.dpb-row.slim{cursor:default;padding:8px 10px}
.dpb-row.next{border-style:dashed;border-color:var(--dsgn)}
.dpb-thumb{width:46px;height:60px;border-radius:8px;flex:0 0 auto;object-fit:cover;display:block;
  background:color-mix(in srgb,var(--ink) 8%,transparent)}
.dpb-thumb.sm{width:36px;height:46px}
.dpb-rmeta{flex:1;min-width:0;font-size:13px;color:var(--ink-soft);line-height:1.75}
.dpb-rmeta b{color:var(--ink);font-size:14px;margin-right:4px}
.dpb-kore{font-size:11px;color:var(--ink-faint)}

/* ── ② 템플릿 선택 ── */
.dpb-pickp{padding:16px 20px 18px}
.dpb-pickhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dpb-pickhead h2{font-size:17px}
.dpb-doms{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
.dpb-doms .chip{border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-weight:700;
  font-size:13px;color:var(--ink-soft);background:var(--panel2)}
.dpb-doms .chip.on{background:var(--prod);border-color:var(--prod);color:#fff}
.dpb-tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.dpb-tcard{border:1.5px solid var(--line);border-radius:14px;padding:14px;position:relative;
  background:var(--panel);display:flex;flex-direction:column;gap:8px}
.dpb-tcard.on{border-color:var(--prod);box-shadow:0 0 0 3px color-mix(in srgb,var(--prod) 18%,transparent)}
.dpb-tcard h3{font-size:15px;margin-top:2px}
.dpb-tcard p{font-size:12.5px;color:var(--ink-faint);min-height:36px}
.dpb-tag{position:absolute;top:-9px;left:12px;background:var(--prod);color:#fff;border-radius:99px;
  font-size:11px;font-weight:800;padding:2px 9px}
.dpb-tag.deriv{background:var(--ink-faint)}
.dpb-strip{display:flex;flex-direction:column;gap:3px}
.dpb-strip i{border-radius:3px;display:block}
.dpb-strip i.img{height:10px;background:repeating-linear-gradient(45deg,
  color-mix(in srgb,var(--free) 35%,transparent) 0 6px,color-mix(in srgb,var(--free) 16%,transparent) 6px 12px)}
.dpb-fit{font-size:12px;color:var(--ink-soft);margin-top:auto}
.dpb-fit b{color:var(--prod)}

/* ── ③ 빌더 셸 ── */
.dpb-shell{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--bg)}
.dpb-top{display:flex;align-items:center;gap:8px;background:var(--panel);border-bottom:1px solid var(--line);
  padding:10px 14px;flex-wrap:wrap}
.dpb-cardref{font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:3px 9px;color:var(--ink-soft);cursor:pointer}
.dpb-cardref:hover{border-color:var(--dsgn);color:var(--ink)}
/* 전체 화면에서는 화면 머리글(.shead)이 접힌다 — 「무엇을 편집 중인가」를 상단바가 대신 말한다 */
.dpb-title{font-size:15px;font-weight:800;letter-spacing:-.01em;max-width:260px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpb-title i{font-style:normal;margin-right:5px}
.dpb-wrap{display:grid;grid-template-columns:264px minmax(0,1fr) 210px;min-height:620px}
.dpb-left,.dpb-right{background:var(--panel);padding:12px;overflow:auto;max-height:calc(100vh - 170px)}
.dpb-left{border-right:1px solid var(--line)}
.dpb-right{border-left:1px solid var(--line)}
.dpb-bsec{margin-bottom:16px}
.dpb-bh{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:7px}
.dpb-field{margin-bottom:8px}
.dpb-field label{font-size:12px;font-weight:700;color:var(--ink-soft);display:block;margin-bottom:3px}
.dpb-val{border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:13px;background:var(--panel2);
  display:flex;justify-content:space-between;align-items:center;gap:6px}
.dpb-val.empty{color:var(--ink-faint)}
.dpb-srcb{font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;flex:0 0 auto}
.dpb-srcb.card{background:color-mix(in srgb,var(--won) 15%,transparent);color:var(--won)}
.dpb-man{width:100%}
.dpb-note{font-size:11.5px;color:var(--ink-faint);margin-top:6px;line-height:1.6}
.dpb-warnc{color:var(--warn)}
.dpb-link{background:none;border:0;padding:0;color:var(--dev);font-size:inherit;font-weight:700;
  cursor:pointer;text-decoration:underline}
.dpb-slotrow{border:1px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:6px;background:var(--panel2)}
.dpb-sr1{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;justify-content:space-between}
.dpb-sr2{display:flex;gap:6px;flex-wrap:wrap}

/* ── 중앙 프리뷰 = 편집기 ── */
.dpb-center{padding:16px 20px;overflow:auto;max-height:calc(100vh - 170px);
  display:flex;flex-direction:column;align-items:center}
.dpb-pvbar{width:100%;max-width:430px;display:flex;justify-content:space-between;align-items:center;
  flex:0 0 auto;margin-bottom:10px;font-size:12px;color:var(--ink-faint)}
/* flex:0 0 auto 가 없으면 프리뷰가 **줄어든다.** .dpb-center 는 높이가 묶인 세로 flex 이고
   .dpb-pv 는 overflow:hidden 이라 min-height:auto 가 0 으로 풀린다 — 그래서 20,000px 짜리
   상세페이지가 한 칸 높이로 눌린 뒤 나머지가 잘려 나갔다(스크롤할 것 자체가 없었다).
   내보내기도 같은 상자를 캡처하므로 PNG 도 같이 잘렸다. 줄지 않게 못 박는다. */
.dpb-pv{width:100%;max-width:430px;background:#fff;border-radius:10px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);color:#20242c;font-size:12px;line-height:1.65}
.dpb-pv.serif{font-family:"Noto Serif KR","Apple SD Gothic Neo",serif}
.dpb-sec{position:relative;padding:22px 20px;border-bottom:1px solid #eee}
.dpb-sec:hover{outline:2px solid color-mix(in srgb,var(--dsgn) 55%,transparent);outline-offset:-2px}
.dpb-sec.hero{background:linear-gradient(180deg,var(--dpbcA) 0%,var(--dpbcB) 100%);text-align:center;padding:32px 20px 26px}
.dpb-sec.imgsec{padding:0}
.dpb-secwarn{position:absolute;top:8px;right:8px;background:var(--warn);color:#fff;font-size:10px;
  font-weight:800;border-radius:5px;padding:1px 7px;z-index:3}
.dpb-flash{outline:3px solid var(--warn)!important;outline-offset:-3px}

.dpb-ed{border-radius:4px;min-height:1em}
.dpb-ed:hover{outline:1.5px dashed color-mix(in srgb,var(--dsgn) 45%,transparent);outline-offset:2px;cursor:text}
.dpb-editing{outline:2px solid var(--dsgn)!important;outline-offset:2px;background:#fff}
.dpb-need{position:relative}
.dpb-need::after{content:"확인 필요";position:absolute;right:-4px;top:-9px;background:var(--warn);
  color:#fff;font-size:8.5px;font-weight:800;border-radius:4px;padding:1px 5px;line-height:1.4;z-index:2}
.dpb-tool{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  border-radius:8px;padding:3px 9px;display:flex;gap:7px;align-items:center;font-size:11px;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.25);white-space:nowrap;z-index:6}
.dpb-tool i{font-style:normal;opacity:.55}
.dpb-tool button{color:#fff;font-size:12px;font-weight:800;padding:0 3px}
.dpb-tool button:hover{color:var(--warn)}

.dpb-bd{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--dpbcBD)}
.dpb-h1{font-size:19px;line-height:1.4;margin:8px 0 6px;color:var(--dpbcH1);font-weight:800}
.dpb-hsub{font-size:11.5px;color:#5d6a63}
.dpb-heroimg{width:120px;max-height:170px;object-fit:contain;margin:16px auto 0;display:block;
  border-radius:10px;box-shadow:0 10px 22px rgba(30,40,35,.22)}
.dpb-heroph{width:96px;height:130px;border-radius:10px;margin:16px auto 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:10px;color:#fff;cursor:pointer;text-align:center;gap:2px;
  background:linear-gradient(160deg,var(--dpbcCK),var(--dpbcEB));
  box-shadow:0 10px 22px rgba(30,40,35,.22)}
.dpb-heroph span{opacity:.8;font-size:9px}
.dpb-eb{font-size:9px;letter-spacing:.16em;color:var(--dpbcEB);font-weight:800;margin-bottom:4px}
.dpb-h2{font-size:14.5px;margin:2px 0 9px;color:#22302a;font-weight:800;line-height:1.45}
.dpb-sub2{font-size:11.5px;color:#5d6a63}
.dpb-strip2{display:flex;justify-content:space-around;gap:6px}
.dpb-s{text-align:center;font-size:9.5px;color:#5d6a63;flex:1}
.dpb-s .dpb-sv{display:block;font-size:12.5px;color:var(--dpbcST);font-weight:800}
.dpb-cklist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.dpb-ck{display:flex;gap:8px;align-items:baseline;font-size:11.5px;color:#3d4a44}
.dpb-ck i{font-style:normal;color:var(--dpbcCK);font-weight:800;flex:0 0 auto}
.dpb-ck.bad i{color:#c05555}
.dpb-close{margin-top:10px;font-size:12px;color:#2f3d36;font-weight:700}
.dpb-pt,.dpb-step{display:flex;gap:10px;margin:9px 0;align-items:flex-start}
.dpb-ptn{flex:0 0 20px;height:20px;border-radius:50%;background:var(--dpbcT14);
  color:var(--dpbcCK);font-size:10.5px;font-weight:800;display:inline-flex;
  align-items:center;justify-content:center;margin-top:2px}
.dpb-ptt{display:block;font-size:12px;color:#22302a}
.dpb-ptd{font-size:11px;color:#5d6a63}
.dpb-proof{display:flex;gap:6px;justify-content:space-around;text-align:center;margin:10px 0 6px}
.dpb-p{font-size:9px;color:#5d6a63;flex:1}
.dpb-p b{display:block;font-size:16px;color:var(--dpbcST)}
.dpb-p b small{font-size:10px;margin-left:1px}
.dpb-pl{display:block;font-weight:700;color:#3d4a44}
.dpb-pn{display:block;font-size:8.5px}
.dpb-bar{display:block;height:5px;border-radius:3px;background:#edf1ee;margin-top:4px;overflow:hidden}
.dpb-bar i{display:block;height:100%;border-radius:3px;background:var(--dpbcBAR)}
.dpb-foot{font-size:9.5px;color:#8a958f;margin-top:8px}
.dpb-ing{display:flex;gap:8px}
.dpb-ic{flex:1;background:var(--dpbcT6);border-radius:9px;padding:10px 8px;font-size:9.5px;color:#5d6a63}
.dpb-pct{font-size:9px;color:var(--dpbcCK);font-weight:800;display:block}
.dpb-in{display:block;font-size:11px;color:#22302a;margin:2px 0}
.dpb-id{display:block}
.dpb-lbgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.dpb-lbgrid img{width:100%;border-radius:8px;display:block}
.dpb-lbph{aspect-ratio:3/4;border-radius:8px;background:repeating-linear-gradient(45deg,#f2f4f2 0 10px,#e9edea 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#6d7a72;
  cursor:pointer;text-align:center;gap:2px}
.dpb-lbph span{font-size:9px;opacity:.8}
.dpb-mech{display:flex;gap:6px;align-items:stretch}
.dpb-mc{flex:1;background:var(--dpbcT6);border-radius:9px;padding:9px 8px;font-size:10px}
.dpb-ar{align-self:center;color:var(--dpbcAR);font-weight:800}
.dpb-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dpb-fchip{border:1px solid #dfe6e1;border-radius:99px;padding:3px 10px;font-size:10px;color:#5d6a63}
.dpb-fchip.on{background:var(--dpbcT8);border-color:var(--dpbcBD30);
  color:var(--dpbcST);font-weight:700}
.dpb-legal{background:#f7f8f7;border-radius:9px;padding:10px 12px}
.dpb-kv{display:flex;gap:10px;font-size:11.5px;margin:6px 0;align-items:baseline}
.dpb-kvk{flex:0 0 96px;color:#22302a}
.dpb-kvv{color:#5d6a63}
.dpb-tbl{width:100%;border-collapse:collapse;font-size:10.5px;margin-top:8px}
.dpb-tbl th,.dpb-tbl td{border:1px solid #e6eae7;padding:5px 8px;text-align:left;color:#3d4a44}
.dpb-tbl th{background:#f4f6f4;font-weight:700}
.dpb-tbl.spec th{width:38%}
.dpb-ravg{font-size:15px;font-weight:800;color:#22302a;margin-bottom:8px;display:inline-block}
.dpb-ravg span{font-size:10.5px;font-weight:500;color:#8a958f}
.dpb-rev{border-top:1px dashed #e6eae7;padding:9px 0}
.dpb-stars{color:#e8a13a;font-size:11px;letter-spacing:.1em}
.dpb-rp{font-size:11px;color:#3d4a44;margin:3px 0}
.dpb-ru{font-size:9.5px;color:#8a958f}
.dpb-faq{margin:9px 0}
.dpb-q{font-size:11.5px;font-weight:800;color:#22302a}
.dpb-a{font-size:11px;color:#5d6a63;margin-top:2px}
.dpb-lockic{font-size:10px;opacity:.7;font-style:normal}
.dpb-fbrand{display:block;font-size:12px;letter-spacing:.14em;color:#22302a}
.dpb-fnote{font-size:9px;color:#8a958f;margin-top:3px}
.dpb-slotimg{width:100%;display:block}
.dpb-slottools{position:absolute;top:8px;right:8px;display:flex;gap:5px}
.dpb-aislot{height:150px;background:repeating-linear-gradient(45deg,#f2f4f2 0 10px,#e9edea 10px 20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#6d7a72;font-size:11px}
.dpb-abtns{display:flex;gap:6px}

/* ── 우측 레이어 ── */
.dpb-lays{display:flex;flex-direction:column;gap:4px}
.dpb-lay{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;
  padding:6px 9px;font-size:12.5px;background:var(--panel2);cursor:pointer;user-select:none}
.dpb-lay.img{border-style:dashed}
.dpb-lay.dpb-over{border-color:var(--dsgn);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsgn) 16%,transparent)}
.dpb-ln{font-size:10.5px;color:var(--ink-faint);width:16px;flex:0 0 auto}
.dpb-grip{margin-left:auto;color:var(--ink-faint);cursor:grab;font-size:13px}
.dpb-lay .dpb-lockic{margin-left:auto}
.dpb-mark{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto;margin-left:auto}
.dpb-mark + .dpb-grip,.dpb-mark ~ .dpb-lockic{margin-left:0}

/* ── ⑤ 내보내기 ── */
.dpb-exbox{width:min(880px,94vw)!important;max-height:88vh;overflow:auto}
.dpb-exgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:6px}
.dpb-exh{font-size:14.5px;margin-bottom:10px}
.dpb-gd{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:12.5px;margin-bottom:6px}
.dpb-gd span{font-size:11px;opacity:.85}
.dpb-gd.ok{background:color-mix(in srgb,var(--won) 9%,transparent);color:var(--won)}
.dpb-gd.bad{background:color-mix(in srgb,var(--warn) 11%,transparent);color:var(--warn);cursor:pointer}
.dpb-fix{margin-left:auto;font-size:11.5px;font-weight:800;text-decoration:underline}
.dpb-exopt{margin:14px 0 5px;font-size:11px;font-weight:800;color:var(--ink-faint);
  letter-spacing:.08em;font-family:var(--mono)}
.dpb-radio{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 2px;color:var(--ink-soft);cursor:pointer}
.dpb-radio.on{color:var(--ink);font-weight:700}
.dpb-radio input{accent-color:var(--dsgn)}
.dpb-dest{border:1.5px solid var(--dsgn);border-radius:12px;padding:11px 13px;margin-top:6px;
  background:color-mix(in srgb,var(--dsgn) 6%,transparent);font-size:13px}
.dpb-dest b{color:var(--dsgn)}
.dpb-dest p{font-size:12px;color:var(--ink-soft);margin-top:2px}
.dpb-destalt{display:flex;gap:8px;margin-top:10px}
.dpb-exgo{margin-top:14px;padding:10px}

/* ── 빌더는 화면을 통째로 쓴다 (.dpb-solo — detailpage.js 의 show() 가 붙인다) ──
   왜: 세 칸이 각자 스크롤하는 작업 화면인데 바깥(.office)까지 같이 스크롤하니
   어느 쪽이 움직일지 매번 헷갈렸고, 가운데 프리뷰는 calc(100vh-170px) 라는 어림수 때문에
   상단바가 두 줄로 접히는 순간 아래가 화면 밖으로 밀렸다. 높이를 나눠 갖는 flex 로 바꾼다.
   껍데기(레일·상단 탭·색·모서리 규칙)는 그대로다 — 이 화면만 다른 앱처럼 보이지 않게,
   늘리는 것은 안쪽 작업 영역뿐이고 대신 화면 머리글 한 덩이를 상단바로 접어 넣는다. */
@media (min-width:821px){
  #v-dpages.dpb-solo{padding:0;overflow:hidden}
  #v-dpages.dpb-solo .shead{display:none}
  #v-dpages.dpb-solo #dpBuild{max-width:none;flex:1;min-height:0;display:flex}
  .dpb-solo .dpb-shell{flex:1;min-height:0;display:flex;flex-direction:column;
    border-radius:0;border-left:0;border-right:0;border-top:0;box-shadow:none}
  .dpb-solo .dpb-wrap{flex:1;min-height:0}
  .dpb-solo .dpb-left,.dpb-solo .dpb-center,.dpb-solo .dpb-right{max-height:none;min-height:0}
}

/* ── 카드 모듈 요약 (board.js) ── */
.dprow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:6px 2px}
.dpfacts{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-soft)}
.dpwho{font-size:11.5px;color:var(--ink-faint);margin-left:6px}
.dpstrip{display:flex;gap:2px;margin-top:2px;max-width:340px}

@media (max-width:1100px){
  .dpb-wrap{grid-template-columns:220px minmax(0,1fr)}
  .dpb-right{display:none}
}
@media (max-width:820px){
  .dpb-wrap{grid-template-columns:1fr}
  .dpb-left{border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .dpb-center{max-height:none}
  .dpb-tgrid{grid-template-columns:1fr}
  .dpb-exgrid{grid-template-columns:1fr}
}

/* 🎟 입장 코드 로그인 (2026-08-07) */
.enterlink{display:block;margin:12px auto 0;background:none;border:0;color:var(--ink-faint);
  font-size:13px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.enterlink:hover{color:var(--ink)}
#stepEnter .fld{width:100%;margin-bottom:8px;font-size:15px;padding:11px 12px}
#stepEnter .btn{margin-top:4px}

/* ═══ 📄 상세페이지 2단계 — 🍌 생성 · 🔗 구조 가져오기 (2026-08-07) ═══ */

/* 레퍼런스 제품 사진 — 생성물 전부가 여기서 나온다. 비어 있으면 눈에 걸리게 */
.dpb-refrow{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;margin-bottom:10px;background:var(--panel2)}
.dpb-refrow.need{border-style:dashed;border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.dpb-refrow img{width:34px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.dpb-refph{width:34px;height:44px;border-radius:6px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-weight:800}
.dpb-refrow div{flex:1;min-width:0;display:flex;flex-direction:column}
.dpb-refrow b{font-size:12.5px}
.dpb-refrow span{font-size:11px;color:var(--ink-faint);line-height:1.5}

/* 생성 중 — 프리뷰 슬롯 위에 덮는다 */
.dpb-genover{position:absolute;inset:0;background:color-mix(in srgb,#fff 72%,transparent);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;font-weight:700;color:#3d4a44;
  backdrop-filter:blur(2px);z-index:4}
.dpb-genning{display:inline-flex;align-items:center;gap:8px}
.dpb-genover i,.dpb-genning i{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--dev) 30%,transparent);border-top-color:var(--dev);
  animation:dpbspin .8s linear infinite}
@keyframes dpbspin{to{transform:rotate(360deg)}}

.dpb-genfail{font-size:11px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);
  border-radius:7px;padding:5px 8px;display:flex;gap:6px;align-items:center;line-height:1.5}
.dpb-genfail button{margin-left:auto;flex:0 0 auto}
/* 재시도 대기 — 실패와 같은 자리에 뜨지만 **아직 끝난 게 아니다.** 빨간 경고색을 쓰면
   사람이 손을 대 버리므로(치우고 다시 누르면 상한만 깎인다) 중립색으로 낮춘다 */
.dpb-genfail.wait{color:var(--ink-soft);background:color-mix(in srgb,var(--dev) 8%,transparent)}

/* 세대 스트립 — 이전 결과로 한 번에 돌아간다 (참고물에 없던 것) */
.dpb-genstrip{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.dpb-gth{width:30px;height:40px;border-radius:6px;border:1.5px solid var(--line);overflow:hidden;
  padding:0;background:var(--panel);cursor:pointer;flex:0 0 auto}
.dpb-gth img{width:100%;height:100%;object-fit:cover;display:block}
.dpb-gth.on{border-color:var(--dev);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev) 25%,transparent)}
.dpb-genstrip small{font-size:10.5px;color:var(--ink-faint)}
.dpb-genall{border-color:color-mix(in srgb,var(--dev) 45%,var(--line))!important;color:var(--dev)!important;font-weight:800}

/* 견적 모달 */
.dpb-genbox{width:min(460px,94vw)!important}
.dpb-grow{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  padding:7px 2px;border-bottom:1px dashed var(--line2)}
.dpb-grow i{font-style:normal;font-size:11px;color:var(--ink-faint);margin-left:4px}
.dpb-grow b{color:var(--dev);font-size:12px}
.dpb-gtot{display:flex;justify-content:space-between;font-size:13.5px;padding:10px 2px 2px;font-weight:700}
.dpb-gtot b{color:var(--won)}
.dpb-gwarn{background:color-mix(in srgb,var(--warn) 11%,transparent);color:var(--warn);
  border-radius:8px;padding:7px 10px;font-size:12px;margin-top:8px}
.dpb-gref{display:flex;gap:9px;align-items:center;margin-top:10px;background:var(--panel2);
  border-radius:9px;padding:8px 10px;font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.dpb-gref img{width:32px;height:42px;object-fit:cover;border-radius:6px;flex:0 0 auto}

/* 🔗 구조 가져오기 */
.dpb-impbox{width:min(520px,94vw)!important;max-height:88vh;overflow:auto}
.dpb-drop{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px dashed var(--line);
  border-radius:12px;padding:22px 16px;margin-top:10px;cursor:pointer;text-align:center;background:var(--panel2)}
.dpb-drop:hover{border-color:var(--dsgn)}
.dpb-drop.has{border-color:var(--won);background:color-mix(in srgb,var(--won) 7%,transparent)}
.dpb-drop b{font-size:13.5px}
.dpb-drop span{font-size:11.5px;color:var(--ink-faint)}
.dpb-impnote{font-size:11.5px;color:var(--ink-faint);margin-top:10px;line-height:1.6}
.dpb-impsecs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dpb-impchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;
  padding:4px 9px;font-size:12px;background:var(--panel2)}
.dpb-impchip.img{border-style:dashed;color:var(--free)}
.dpb-impchip i{font-style:normal;font-size:10px;opacity:.7}
.dpb-impchip button{font-size:12px;color:var(--ink-faint);font-weight:800;padding:0 1px}
.dpb-impchip button:hover{color:var(--red)}
.dpb-imptone{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);margin-top:12px}
.dpb-imptone i{width:15px;height:15px;border-radius:5px;display:inline-block;border:1px solid var(--line)}
.dpb-tag.custom{background:var(--free)}
/* 가져온 템플릿 지우기 — 모서리에 맨몸 ✕ 를 띄우던 자리다. 카드 안에서 그것만 테두리도
   배경도 없어 혼자 겉돌았고, 정작 누를 일은 드물었다. 앱이 이미 쓰는 자리(카드 아래
   버튼 줄)와 모양(.mini.danger — 의견서·스튜디오의 「삭제」와 같은 것)으로 내린다. */
.dpb-tacts{display:flex;gap:6px;align-items:center}
.dpb-tacts .mini.pri{flex:1}

/* 목표 모달 안내 한 줄 — 왜 사람마다 숫자가 다른지. 별도 엘리먼트가 사라져 본문 안으로 왔다 */
.goalmemo{font-size:12.5px;color:var(--ink-faint);background:var(--panel2);
  border-left:2px solid var(--dev);border-radius:0 8px 8px 0;padding:7px 11px;margin-bottom:12px;line-height:1.6}

/* ⋯ 메뉴 안의 안내 한 줄 — 「여기서 못 하는 일」이 있을 때 어디로 가는지.
   .mmnote 는 이미 남이 쓰고 있다(style.css 는 전역 단일 파일) — 접두를 붙인다 */
.moremenu .sysmmnote{font-size:11.5px;color:var(--ink-faint);line-height:1.55;padding:7px 9px;
  border-bottom:1px solid var(--line2);margin-bottom:3px}
.moremenu .sysmmnote b{color:var(--ink-soft)}

/* ═══════════ 📄 상세페이지 3단계 (2026-08-08) ═══════════
   전부 dpb- 접두. 새 색 토큰은 만들지 않는다 — 다크는 토큰 교체 구조라
   리터럴 hex 를 하나라도 넣으면 한쪽에서 깨진다(허용 예외는 항상 밝은 프리뷰 .dpb-pv 뿐). */

/* ── 상단바를 좌(맥락) · 우(행위)로 가른다 ── */
.dpb-tgrp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

/* ── 가드 칩 = 순회 손잡이. 새 표시를 넷째로 늘리지 않고 이 칩 안에서 돈다 ── */
.dpb-guardnav{display:inline-flex;align-items:center;gap:2px}
.dpb-navb{border:1px solid var(--line);background:var(--panel);border-radius:7px;
  width:22px;height:22px;font-size:14px;font-weight:800;color:var(--ink-faint);line-height:1;padding:0}
.dpb-navb:hover{border-color:var(--warn);color:var(--warn)}

/* ── 좌·우 패널 접기 (레일 접기와 같은 「상태 클래스 + 자식 숨김」 방식) ──
   격자에 손잡이 두 칸을 끼운다. 접히면 그 칸만 남아 세로 글자로 무엇이 접혔는지 말한다 —
   접힌 패널이 흔적도 없이 사라지면 사람이 그 기능을 잃어버린다. */
.dpb-wrap{grid-template-columns:264px 16px minmax(0,1fr) 16px 210px}
.dpb-wrap.lmin{grid-template-columns:0 16px minmax(0,1fr) 16px 210px}
.dpb-wrap.rmin{grid-template-columns:264px 16px minmax(0,1fr) 16px 0}
.dpb-wrap.lmin.rmin{grid-template-columns:0 16px minmax(0,1fr) 16px 0}
/* display:none 을 쓰면 **격자에서 칸이 통째로 사라져** 뒤의 자식들이 한 칸씩 앞으로 밀린다 —
   접기 손잡이가 264px 칸에 앉고 프리뷰가 16px 칸으로 눌린다(실측 2px). 자리는 남기고 안만 비운다. */
.dpb-wrap.lmin .dpb-left,.dpb-wrap.rmin .dpb-right{
  width:0;min-width:0;padding:0;border:0;overflow:hidden;visibility:hidden}
.dpb-fold{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  background:var(--panel2);color:var(--ink-faint);padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.dpb-fold:hover{background:var(--panel);color:var(--ink)}
.dpb-fold .vtxt{writing-mode:vertical-rl;white-space:nowrap;letter-spacing:.04em}

/* ── 프리뷰 배율 — **설계 폭은 430 하나**고 보기만 키운다 (detailpage.js pvZoom 주석).
   폭을 갈아 끼우면 그건 확대가 아니라 다른 설계다: 안쪽 글자가 전부 고정 px 라 상자만 넓히면
   같은 글자가 상대적으로 작아지고, 캡처 축척(`내보내기폭 / offsetWidth`)까지 2배 달라져
   같은 「860px 표준」이 배율에 따라 다른 PNG 를 낸다.
   zoom 은 자식의 offsetWidth 를 CSS px 그대로 두므로 내보내기는 배율과 무관하게 언제나 같다. ── */
.dpb-pv{zoom:var(--dpbz,1)}
/* 프리뷰가 커지면 그 위의 줄도 같이 커져야 한다 — 안 그러면 430 짜리 막대가 860 짜리 그림 위에 얹힌다 */
.dpb-pvbar{max-width:calc(430px * var(--dpbz,1))}
.dpb-pvz{display:flex;align-items:center;gap:8px}
.dpb-pvz i{font-style:normal}
.dpb-zseg{flex:none}
.dpb-zseg button{padding:2px 9px;font-size:11.5px;font-weight:800;border:0;background:none;color:var(--ink-faint)}
.dpb-zseg button.on{background:var(--ink);color:var(--panel)}

/* ── 프리뷰 매트 — 어둡게 하는 것은 **프리뷰 바깥 여백뿐이다.**
   프리뷰 자체는 커머스 페이지라 항상 밝고, 그 안의 색은 내보내기(html2canvas)가
   읽을 수 있는 정적 hex 여야 한다. 안쪽을 건드리면 내보낸 PNG 가 같이 어두워진다. ── */
@media (prefers-color-scheme:dark){
  .dpb-center{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
  .dpb-pv{box-shadow:0 6px 20px rgba(0,0,0,.35)}
}

/* ── 사진 드롭 ── */
.dpb-dropon{outline:2px dashed var(--dsgn)!important;outline-offset:-3px;
  background:color-mix(in srgb,var(--dsgn) 8%,transparent)!important}

/* ── 섹션 빼기 · 보관함 · 넣기 ── */
.dpb-lnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 안 보이는 채로 눌리면 안 된다 — opacity 만 0 이면 그 자리는 여전히 클릭을 먹는다.
   섹션을 빼는 버튼이라 「뭘 눌렀는지 모르는데 섹션이 사라지는」 자리가 된다. */
.dpb-layx{border:0;background:none;color:var(--ink-faint);font-size:12px;font-weight:800;
  padding:0 2px;line-height:1;opacity:0;pointer-events:none}
.dpb-lay:hover .dpb-layx,.dpb-lay:focus-within .dpb-layx{opacity:1;pointer-events:auto}
.dpb-layx:hover{color:var(--red)}
.dpb-addsec{margin-top:8px}
.dpb-park{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.dpb-parkrow{display:flex;align-items:center;gap:8px;justify-content:space-between;
  font-size:12.5px;color:var(--ink-soft);padding:4px 0}
.dpb-parkrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dpb-secbox{width:min(620px,94vw)!important}
.dpb-secseg{margin:12px 0 4px}
.dpb-secseg button{flex:1;padding:6px 10px;font-size:12.5px;font-weight:800;border:0;background:none;color:var(--ink-faint)}
.dpb-secseg button.on{background:var(--ink);color:var(--panel)}
.dpb-seclist{max-height:46vh;overflow:auto;margin-top:8px}
.dpb-secgrp{margin-bottom:12px}
.dpb-secgh{font-size:12px;font-weight:800;color:var(--ink-faint);padding:6px 2px 4px;
  border-bottom:1px solid var(--line2);margin-bottom:4px}
.dpb-secgh i{font-style:normal;font-size:11px;opacity:.7;margin-left:5px}
.dpb-secrow{display:flex;align-items:center;gap:10px;padding:7px 2px}
.dpb-secrow>div{flex:1;min-width:0;display:flex;flex-direction:column}
.dpb-secrow b{font-size:13.5px}
.dpb-secrow span{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── ✨ 카피 기록 ── */
.dpb-hist{margin-top:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:4px 8px}
.dpb-histrow{display:flex;align-items:center;gap:8px;justify-content:space-between;
  font-size:12px;color:var(--ink-soft);padding:5px 0}
.dpb-histrow+.dpb-histrow{border-top:1px dashed var(--line2)}
.dpb-histrow i{font-style:normal;color:var(--ink-faint);font-size:11px;margin-left:4px}

/* ── ⭐ 템플릿 자산화 ── */
.dpb-tstar{position:absolute;top:8px;right:8px;border:0;background:none;
  color:var(--ink-faint);font-size:16px;line-height:1;padding:0 2px;z-index:1}
.dpb-tstar.on,.dpb-tstar:hover{color:var(--warn)}
/* 별표가 제목 위에 떠 있으므로 제목이 그 밑으로 파고들지 않게 자리를 비워 둔다 */
.dpb-tcard h3{padding-right:22px}
.dpb-tuse{margin-top:-2px}

/* ── 🔗 가져오기 — 캡처 ↔ 링크 · 첨부 확인 ── */
.dpb-impseg{margin:10px 0 12px}
.dpb-impseg button{flex:1;padding:6px 10px;font-size:13px;font-weight:800;border:0;background:none;color:var(--ink-faint)}
.dpb-impseg button.on{background:var(--ink);color:var(--panel)}
.dpb-shots{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:8px 10px}
.dpb-shotsh{font-size:12.5px;font-weight:800;color:var(--won);margin-bottom:6px}
.dpb-shotsh i{font-style:normal;font-weight:500;color:var(--ink-faint)}
.dpb-shot{display:flex;align-items:center;gap:9px;padding:5px 0}
.dpb-shot+.dpb-shot{border-top:1px dashed var(--line2)}
.dpb-shotn{flex:0 0 18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--won) 16%,transparent);
  color:var(--won);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.dpb-shot .th{width:40px;height:52px;object-fit:cover;border-radius:7px;flex:0 0 auto;border:1px solid var(--line)}
.dpb-shot .fn{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dpb-shot .fs{font-size:11px;color:var(--ink-faint);flex:none}
.dpb-shotx{border:0;background:none;color:var(--ink-faint);font-size:13px;font-weight:800;padding:0 2px;flex:none}
.dpb-shotx:hover{color:var(--red)}

/* ── 🔍 시안 나란히 비교 ── */
.dpb-cmpbox{width:min(1080px,96vw)!important}
.dpb-cmpsel{display:flex;align-items:center;gap:10px;margin:10px 0}
.dpb-cmpsel .fld{flex:1;min-width:0}
.dpb-cmpsum{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.dpb-cmpdiff{max-height:22vh;overflow:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);padding:6px 10px;margin-bottom:10px}
.dpb-cmprow{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);gap:8px;
  font-size:11.5px;padding:5px 0;align-items:start}
.dpb-cmprow+.dpb-cmprow{border-top:1px dashed var(--line2)}
.dpb-cmprow b{font-size:10.5px;color:var(--ink-faint)}
.dpb-cmprow .old{color:var(--ink-faint);text-decoration:line-through}
.dpb-cmprow .new{color:var(--ink)}
.dpb-cmpgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.dpb-cmpside{min-width:0;display:flex;flex-direction:column;align-items:center}
.dpb-cmphead{width:100%;font-size:13px;font-weight:800;padding-bottom:6px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.dpb-cmphead i{font-style:normal;font-weight:500;font-size:11.5px;color:var(--ink-faint);margin-left:6px}
.dpb-cmppv{width:100%;max-height:52vh;overflow:auto;display:flex;flex-direction:column;align-items:center}
/* 비교는 읽기 전용이다 — 편집 힌트(점선 밑줄 · 구역 강조)를 켜지 않는다 */
.dpb-cmppv .dpb-ed:hover{outline:0;cursor:default}
.dpb-cmppv .dpb-sec:hover{outline:0}

.dpb-teditbox{width:min(480px,94vw)!important}

/* 「막지는 않지만 알아야 하는」 자리 — .dpb-gd 의 bad(빨강)와 ok(초록) 사이가 비어 있었다 */
.dpb-gd.warnsoft{background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--warn);
  align-items:flex-start;line-height:1.55}

@media (max-width:1100px){
  .dpb-wrap,.dpb-wrap.rmin,.dpb-wrap.lmin.rmin{grid-template-columns:264px 16px minmax(0,1fr)}
  .dpb-wrap.lmin{grid-template-columns:0 16px minmax(0,1fr)}
  .dpb-fold.r{display:none}
}
@media (max-width:820px){
  .dpb-wrap,.dpb-wrap.lmin,.dpb-wrap.rmin,.dpb-wrap.lmin.rmin{grid-template-columns:1fr}
  .dpb-fold{display:none}
  /* 1열에서는 접기가 없다 — 접힘 기억이 남아 있어도 패널을 되살린다 */
  .dpb-wrap.lmin .dpb-left,.dpb-wrap.rmin .dpb-right{
    width:auto;min-width:0;padding:12px;overflow:auto;visibility:visible;border:0}
  .dpb-cmpgrid{grid-template-columns:1fr}
  .dpb-cmprow{grid-template-columns:1fr}
}

/* ══════════ 작업소 — 남은 특전 14종의 화면 (2026-08-08) ══════════
   전부 기존 토큰만 쓴다. 새 hex 0개 — 다크모드가 토큰 교체 구조라 리터럴을 넣는 순간 한쪽이 깨진다. */

/* ⏱ 곧 열립니다 — **없는 것과 늦게 오는 것을 가른다.** 경고(주황)가 아니라 안내(파랑)다:
   기다리라는 말이지 잘못됐다는 말이 아니다. */
.wssoon{display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:10px 12px;
  border-radius:11px;font-size:13.5px;font-weight:700;
  border:1px solid color-mix(in srgb,var(--dev) 30%,var(--line));
  background:color-mix(in srgb,var(--dev) 6%,var(--panel));color:var(--dev)}
.wssoon span{font-size:12.5px;font-weight:500;color:var(--ink-soft);line-height:1.5}

/* 마이페이지의 「더 보기」 줄 — 열린 것은 버튼, 잠긴 것은 조건 */
.wsmemore{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;align-items:center}

/* 📈 리포트 · 📊 수익 — 같은 모양을 쓴다. 둘 다 「내 것만」이라 비교 축이 없다 */
.wsrep{padding:9px 0;border-bottom:1px solid var(--line2)}
.wsrep:last-of-type{border-bottom:0}
.wsreph{display:flex;align-items:baseline;gap:8px;font-size:14px}
.wsreph b{flex:1;min-width:0}
.wsreph .mono{font-family:var(--mono);font-weight:800;color:var(--won);font-variant-numeric:tabular-nums}
.wsreph .freev{font-style:normal;color:var(--free);font-size:12.5px}
.wsrepbar{height:7px;border-radius:99px;background:var(--panel2);overflow:hidden;margin:5px 0 4px}
.wsrepbar i{display:block;height:100%;border-radius:99px;background:var(--won)}
.wsrepm{font-size:12.5px;color:var(--ink-faint)}
.wsrepm .wonv{color:var(--won)}
.wsrepm .dim{color:var(--ink-faint)}
.wstplnote{font-size:12.5px;color:var(--ink-faint);line-height:1.55;margin:2px 0 10px}

/* 💬 전용 문의 — 쪽지함이지 채팅이 아니다. 말풍선 꼬리·시간·읽음 표시를 두지 않는다 */
.wsinq{margin-top:10px;padding-top:10px;border-top:1px solid var(--line2)}
.wsinqq{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.wsinqa{margin-top:6px;padding:8px 10px;border-radius:10px;font-size:13.5px;line-height:1.6;
  background:var(--panel2);white-space:pre-wrap}
.wsinqa b{color:var(--dev);margin-right:6px}
.wsinqw{margin-top:5px;font-size:12.5px;color:var(--ink-faint)}

/* ⚖️ 나란히 보기 — 표다. 두 작업을 같은 눈높이에서 읽는 것이 전부라 장식을 넣지 않는다 */
.wscmp{width:100%;border-collapse:collapse;font-size:13.5px}
.wscmp th{text-align:left;font-size:12.5px;font-weight:700;color:var(--ink-faint);
  padding:7px 8px 7px 0;white-space:nowrap;vertical-align:top;width:82px}
.wscmp td{padding:7px 8px;border-left:1px solid var(--line2);vertical-align:top;
  width:calc((100% - 82px) / 2)}
.wscmp tr{border-bottom:1px solid var(--line2)}
.wscmp tr:last-child{border-bottom:0}
.wscmp .wonv{color:var(--won)}

/* 🏷️ 칭호 — 등급 이름 앞에 선다. 밴드 위라 흰 계열만 쓴다(등급색과 겨루지 않게) */
.wsg-tt{font-size:11.5px;font-weight:800;color:#fff;border-radius:99px;padding:1px 8px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28)}

/* 🖼️ 테두리 — 밴드에 건다. **고른 값이 아무것도 안 바꾸면 그건 거짓말**이라, 눈에 보이는
   차이를 만드는 것이 이 규칙들의 전부다. 밴드는 항상 어두우므로 흰 계열로만 그린다 —
   등급색·테마색을 쓰면 테두리가 색을 두 번 말하게 된다. */
.ph-head[class*="wsfr-"]{position:relative}
.wsfr-thin{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.wsfr-double{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.40), inset 0 0 0 5px rgba(255,255,255,.14)}
.wsfr-glow{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.30), inset 0 0 22px rgba(255,255,255,.16)}
.wsfr-ribbon{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.wsfr-ribbon::after{content:"";position:absolute;top:0;right:16px;width:13px;height:24px;
  background:rgba(255,255,255,.34);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)}
.wsfr-veteran{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 0 6px rgba(255,255,255,.16),
  inset 0 0 26px rgba(255,255,255,.18)}
.wsfr-veteran::after{content:"★";position:absolute;top:9px;right:14px;font-size:12px;color:rgba(255,255,255,.7)}

/* ══════════════════════════════════════════════════════════════════════════
   🔍 검수 덱 (docs/18 §B) — 관리자에게도 「한 화면에 한 작업」을 준다.
   작업자 카드 큐와 같은 문법이라 클래스도 같은 결로 짓는다(wsd- = workshop deck).
   ══════════════════════════════════════════════════════════════════════════ */
.wsd-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.wsd-prog{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);font-weight:700}
.wsd-prog i{display:block;width:130px;height:7px;border-radius:99px;background:var(--line2);overflow:hidden}
.wsd-prog em{display:block;height:100%;background:var(--dev);border-radius:99px;transition:width .3s}

.wsd-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);
  animation:wsdIn .22s ease}
@keyframes wsdIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.wsd-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);
  background:var(--panel2);flex-wrap:wrap}
.wsd-hd b{font-size:15.5px}
.wsd-hrs{color:var(--ink-faint);font-size:12px}

/* 작업자 칩 — 「어디를 유심히 볼지」 힌트. 첫 제출은 눈에 걸려야 한다 */
.wsd-wk{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
  padding:3px 11px 3px 4px;background:var(--panel);font-size:12.5px;font-weight:700}
.wsd-wk .av{width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800}
.wsd-wk .rt{color:var(--ink-faint);font-weight:600}
.wsd-wk .rt b{color:var(--won)}
.wsd-wk.first{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.wsd-wk .ftag{color:var(--warn);font-weight:800;font-size:11.5px}

.wsd-body{display:grid;grid-template-columns:300px 1fr}
@media(max-width:900px){.wsd-body{grid-template-columns:1fr}}
.wsd-ctx{padding:14px 16px;border-right:1px solid var(--line2);background:var(--panel2);
  display:flex;flex-direction:column;gap:10px}
@media(max-width:900px){.wsd-ctx{border-right:0;border-bottom:1px solid var(--line2)}}
.wsd-lb{font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);font-weight:800;font-family:var(--mono)}
.wsd-brief{font-size:13.5px;color:var(--ink-soft);line-height:1.65;background:var(--panel);
  border:1px solid var(--line2);border-radius:10px;padding:10px 12px;white-space:pre-wrap}
.wsd-disc{font-size:12.5px;color:var(--ink-soft);border-radius:9px;padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.wsd-mr{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.wsd-mr b{font-family:var(--mono)}
.wsd-mr.total{border-top:1px dashed var(--line);padding-top:6px;font-weight:800;color:var(--ink)}
.wsd-mr.total b{color:var(--warn)}
.wsd-src{display:block;text-align:center;border:1px solid var(--line);border-radius:9px;padding:7px;
  font-size:13px;font-weight:700;color:var(--dev);text-decoration:none;background:var(--panel)}
.wsd-src:hover{border-color:var(--dev)}
.wsd-nosrc{font-size:12px;color:var(--ink-faint);text-align:center}
.wsd-res{padding:16px 18px;min-width:0}
/* 제출문은 **자르지 않는다** — 끊긴 글은 검수할 수 없다 */
.wsd-txt{font-size:14.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word;margin-top:8px}

.wsd-acts{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line2);
  background:var(--panel2);flex-wrap:wrap}
.wsd-pos{font-size:12px;color:var(--ink-faint);font-weight:700}
.wsd-key{font-size:11.5px;color:var(--ink-faint)}
.wsd-key kbd{font-family:var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 4px;
  background:var(--panel);margin:0 1px}
/* 승인은 돈이 확정되는 행위라 버튼에 금액이 박힌다 */
.wsd-ok{background:var(--won);border:0;color:#fff;border-radius:10px;padding:10px 18px;
  font-size:14.5px;font-weight:800;letter-spacing:-.01em;cursor:pointer;font-family:var(--sans)}
.wsd-ok:hover{filter:brightness(1.06)}

/* 목록 모드 — 훑기용. 누르면 그 건부터 덱이 열린다 */
.wsd-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:8px;
  font-family:var(--sans);color:inherit;cursor:pointer}
.wsd-row:hover{border-color:var(--dev)}
.wsd-row:disabled{cursor:default;opacity:.72}
.wsd-rt{font-weight:700;font-size:14px}
.wsd-rw{font-size:12.5px;color:var(--ink-faint)}
.wsd-rp{font-weight:800;color:var(--warn);font-size:13.5px}

.wsd-zero{text-align:center;padding:44px 0 36px;animation:wsdIn .3s ease}
.wsd-zero .big{font-size:44px}
.wsd-zero h3{font-size:19px;margin:6px 0 4px}
.wsd-zero p{color:var(--ink-soft);font-size:14px}
.wsd-zero .facts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.wsd-zero .facts span{border:1px solid var(--line);border-radius:99px;padding:4px 13px;
  font-size:13px;font-weight:700}
.wsd-zero .facts .w{color:var(--won);border-color:color-mix(in srgb,var(--won) 40%,var(--line))}

/* 보완·취소 시트 — 사유는 칩, 고르면 결과가 그 자리에 */
.wsd-chips{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.wsd-chip{border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:6px 13px;
  font-size:13px;font-weight:700;color:var(--ink-soft);font-family:var(--sans);cursor:pointer}
.wsd-chip.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.wsd-consq{border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:9px 12px;
  font-size:13px;color:var(--ink-soft);margin-bottom:10px;min-height:42px;line-height:1.6}

/* ── 지표 타일을 「할 일로 가는 문」으로 (docs/18 §A) ── */
button.mtile{text-align:left;font-family:var(--sans);color:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;transition:transform .08s}
button.mtile:hover{transform:translateY(-1px);border-color:var(--ink-faint)}
.mtile.hero{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));
  background:color-mix(in srgb,var(--warn) 6%,var(--panel))}
.mtile.hero .mv{color:var(--warn)}
.mtile .go{margin-top:3px;font-size:12.5px;font-weight:800;color:var(--dev)}
.wsd-late48{color:var(--red)}

/* ── 👥 로스터 카드 — 작업자 세계의 등급색을 관리자 화면으로 흘려보낸다 ── */
.wsd-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.wsd-rc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.wsd-rc .band{height:50px;display:flex;align-items:center;gap:8px;padding:0 14px;color:#fff;
  background:linear-gradient(120deg,var(--g),color-mix(in srgb,var(--g) 55%,var(--panel)))}
.wsd-rc .band .wsg-gc{background:rgba(255,255,255,.22);color:#fff}
.wsd-rc .band b{font-size:15px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.wsd-rc .band .gn{font-size:11.5px;opacity:.85;font-weight:700}
.wsd-rc .band .offtag{font-size:11px;font-weight:700}
.wsd-rc .rcb{padding:11px 14px;display:flex;flex-direction:column;gap:9px}
.wsd-rc .stats{display:flex;text-align:center}
.wsd-rc .stats div{flex:1;min-width:0}
.wsd-rc .stats b{display:block;font-size:14.5px;letter-spacing:-.02em}
.wsd-rc .stats span{font-size:10.5px;color:var(--ink-faint);font-weight:700}
.wsd-rc .week{display:flex;gap:3px;align-items:flex-end;height:22px}
.wsd-rc .week i{flex:1;background:color-mix(in srgb,var(--g) 55%,var(--panel2));border-radius:2px;min-height:3px}
.wsd-rc .week i.z{background:var(--line2)}
.wsd-rc .rcmeta{font-size:11px;color:var(--ink-faint);line-height:1.45;word-break:break-all}
.wsd-rc .wsgoal{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.wsd-rc .wsgoal input{width:82px;border:1px solid var(--line);border-radius:7px;padding:3px 8px;
  background:var(--panel2);color:var(--ink);font-family:var(--mono);font-size:12.5px;text-align:right}
.wsd-rc .rcfoot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:9px;position:relative}
.wsd-rc.off{opacity:.6}
.wsd-rc.off .band{filter:grayscale(1)}

/* 🎟 입장 코드 = 티켓 반권. 전해 주는 물건이라는 것이 모양으로 읽혀야 한다 */
.wsd-ticket{display:flex;align-items:stretch;flex:1;min-width:170px;border-radius:10px;overflow:hidden;
  border:1.5px dashed color-mix(in srgb,var(--free) 55%,var(--line));
  background:color-mix(in srgb,var(--free) 6%,var(--panel))}
.wsd-ticket .stub{background:var(--free);color:#fff;display:grid;place-items:center;padding:0 9px;font-size:15px}
.wsd-ticket .tb{padding:5px 10px;min-width:0}
.wsd-ticket .code{font-family:var(--mono);font-weight:800;font-size:14.5px;letter-spacing:.12em;display:block}
.wsd-ticket i{font-style:normal;font-size:10.5px;color:var(--ink-faint);line-height:1.4;display:block}

/* ── 📏 기준 — 값 하나 = 카드 하나 ── */
.wsd-stdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wsd-stdc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);
  display:flex;flex-direction:column;gap:6px}
.wsd-stdc .sl{font-size:13px;font-weight:800}
.wsd-stdc .sv{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.wsd-stdc .sv .fld.num{width:110px}
.wsd-stdc .who{font-size:10.5px;color:var(--ink-faint);font-family:var(--mono)}
.wsd-stdc .touch{font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  border-top:1px dashed var(--line2);padding-top:7px}
.wsd-stdc.ro{background:var(--panel2)}
.wsd-stdc.ro .sl::before{content:"🔒 "}
.wsd-stdc.ro .sv b{font-size:16px}

/* ── 🎁 보상 원장 — 종류별 합계로는 「잘못 나간 한 건」을 못 찾는다 ── */
.wsd-ledger{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px}
.wsd-ledger .ldate{background:var(--panel2);padding:5px 14px;font-size:11.5px;font-weight:800;
  color:var(--ink-faint);font-family:var(--mono);border-bottom:1px solid var(--line2)}
.wsd-ledger .lrow{display:flex;align-items:center;gap:9px;padding:8px 14px;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.wsd-ledger .lrow:last-child{border-bottom:0}
.wsd-ledger .lc{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono)}
.wsd-ledger .ln{font-size:13px}
.wsd-ledger .lamt{font-weight:800;color:var(--won)}

/* ── 📦 발주 폼 — 좌 입력 · 우 영수증 ── */
.wsd-ordbox{width:min(920px,100%)}
.wsd-ordgrid{display:grid;grid-template-columns:1fr 310px}
@media(max-width:820px){.wsd-ordgrid{grid-template-columns:1fr}}
.wsd-ordform{min-width:0}
.wsd-rcpt{border-left:1px dashed var(--line);padding-left:16px;margin-left:4px;
  display:flex;flex-direction:column;gap:10px;align-self:start;position:sticky;top:0}
@media(max-width:820px){.wsd-rcpt{border-left:0;padding-left:0;margin-left:0;position:static;
  border-top:1px dashed var(--line);padding-top:14px}}
.wsd-rcpt .paper{background:var(--panel);border:1px solid var(--line);border-radius:4px 4px 12px 12px;
  padding:12px 14px;font-size:13px}
.wsd-rcpt .paper .hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint);
  text-align:center;border-bottom:1px dashed var(--line);padding-bottom:7px;margin-bottom:8px}
.wsd-rcpt .rr{display:flex;justify-content:space-between;gap:8px;color:var(--ink-soft);padding:1px 0}
.wsd-rcpt .rr b{font-family:var(--mono)}
.wsd-rcpt .rr.total{border-top:1px dashed var(--line);margin-top:5px;padding-top:6px;
  font-weight:800;color:var(--ink)}
.wsd-rcpt .rr.total b{color:var(--warn)}
.wsd-rcpt .mmfoot{flex-direction:column;align-items:stretch;gap:6px;margin-top:2px}
.wsd-rcpt .mmfoot .mmnote{font-size:11px;line-height:1.5}

/* 시급 게이지 — 빨간 눈금이 최저 허용선. 바늘이 왼쪽으로 가면 발주가 잠긴다 */
.wsd-gauge .glab{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--ink-soft);font-weight:700}
.wsd-gauge .rail{position:relative;height:10px;border-radius:99px;background:var(--line2);margin:5px 0 4px}
.wsd-gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--won);
  transition:width .2s}
.wsd-gauge .floor{position:absolute;left:24%;top:-3px;bottom:-3px;width:2px;background:var(--red)}
.wsd-gauge .msg{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.wsd-gauge.bad .fill{background:var(--red)}
.wsd-gauge.bad .msg{color:var(--red);font-weight:700}

/* 작업자에게 보이는 모습 — 발주자가 「받는 쪽 눈」을 한 번 거친다 */
.wsd-pv .pvlb{font-size:10.5px;letter-spacing:.1em;font-family:var(--mono);color:var(--ink-faint);
  font-weight:800;margin-bottom:6px}
.wsd-pv .pvcard{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:10px 12px}
.wsd-pv .pvh{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.wsd-pv .pvp{margin-left:auto;font-weight:800;color:var(--warn);font-size:13px}
.wsd-pv .pvt{font-weight:700;font-size:13.5px}
.wsd-pv .pvf{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.wsd-pv .pvd{font-size:11px;color:var(--ink-soft);margin-top:5px;border-radius:8px;padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}

/* ══════════════════════════════════════════════════════════════════════════
   🧑‍🔧 작업자 화면 개편 (docs/19) — 「오늘 한 판 · 긴 여정」
   wsw- = workshop worker. 놀이 층이 전부 숫자 행이던 것을 링·스택·트랙·진열장으로 바꾼다.
   재미의 헌법: 비교 없음 · 속도 압박 없음 · 손실 프레임 없음 · 돈과 놀이 층 분리.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A. 헤더 한 줄 ── */
.wsw-hd{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.wsw-pctop{display:flex;align-items:center;gap:10px;margin-bottom:12px}

/* 신분증 미니 — 탭하면 🗺 여정. 꾸미기가 여기서 바로 보인다 */
.wsw-id{flex:1;min-width:0;display:flex;align-items:center;gap:7px;border:0;cursor:pointer;
  text-align:left;border-radius:13px;padding:9px 12px;color:#fff;font-family:var(--sans);
  background:linear-gradient(120deg,var(--g),color-mix(in srgb,var(--g) 55%,#1A2332))}
.wsw-pctop .wsw-id{flex:0 1 auto}
.wsw-id .wsg-gc{background:rgba(255,255,255,.22);color:#fff;border:0}
.wsw-id b{font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.25);white-space:nowrap}
.wsw-id .lv{font-size:11px;opacity:.85;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsw-id .go{margin-left:auto;font-size:11px;opacity:.75;flex:none}
.wsw-id .tt{font-size:10.5px;font-weight:800;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);border-radius:99px;padding:0 7px;flex:none}

/* 오늘 링 — 본체(초록)는 확정만. 주황 유령 호는 검수 대기이고, 승인이 오면 초록으로 넘어온다 */
.wsw-ring{position:relative;width:76px;height:76px;flex:none;border:0;background:none;
  cursor:pointer;padding:0}
.wsw-ring .rk{stroke:var(--line2)}
.wsw-ring .rw{stroke:var(--won);transition:stroke-dasharray .55s ease}
.wsw-ring .rp{stroke:var(--warn);opacity:.5;transition:stroke-dasharray .55s ease,transform .55s ease}
.wsw-ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;line-height:1.15;pointer-events:none}
.wsw-ring .ctr b{font-family:var(--mono);font-size:13px;color:var(--won);letter-spacing:-.03em}
.wsw-ring .ctr span{font-size:9px;color:var(--ink-faint);font-weight:700}
.wsw-ring.pc{width:58px;height:58px}
.wsw-ring.pc .side{position:absolute;left:66px;top:50%;transform:translateY(-50%);
  text-align:left;line-height:1.3;white-space:nowrap}
.wsw-ring.pc .side b{font-family:var(--mono);font-size:15px;color:var(--won);display:block}
.wsw-ring.pc .side span{font-size:10.5px;color:var(--ink-faint);font-weight:700}
.wsw-pctop .wsw-ring.pc{margin-right:128px}

/* 검수 대기 — 확정과 **다른 색·다른 칸.** 제출은 아직 돈이 아니다 */
.wsw-pend{border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:13px;
  background:color-mix(in srgb,var(--warn) 8%,var(--panel));padding:7px 11px;text-align:center;
  min-width:82px;flex:none;cursor:pointer;font-family:var(--sans);position:relative}
.wsw-pend.flat{cursor:default}
.wsw-pend .pl{font-size:9.5px;color:var(--ink-faint);font-weight:800;display:block}
.wsw-pend b{font-family:var(--mono);font-size:14px;color:var(--warn);letter-spacing:-.02em}
.wsw-pend em{font-style:normal;font-size:11px;font-weight:800;color:var(--warn);display:block;min-height:14px}
.wsw-pend.bump{animation:wswBump .42s ease}
@keyframes wswBump{0%{transform:scale(1)}40%{transform:scale(1.11)}100%{transform:scale(1)}}

/* ── B. 미션 칩 ── */
.wsw-mrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.wsw-mrow.pc{margin-bottom:6px}
.wsw-mchip{display:flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:4px 11px;font-size:11.5px;font-weight:700;color:var(--ink-soft);
  font-family:var(--sans);cursor:pointer}
.wsw-mchip.open{border-style:dashed}
.wsw-mchip .prg{width:44px;height:5px;border-radius:99px;background:var(--line2);overflow:hidden;flex:none}
.wsw-mchip .prg i{display:block;height:100%;background:var(--free);border-radius:99px;transition:width .3s}
.wsw-mchip.done{border-color:color-mix(in srgb,var(--won) 45%,var(--line));color:var(--won)}
.wsw-mchip em{font-style:normal;color:var(--warn);font-size:10.5px}
.wsw-mlaw{font-size:10.5px;color:var(--ink-faint);line-height:1.5}

/* 미션 오프닝 카드 — 하루의 첫 카드 */
.wsw-mcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;
  box-shadow:var(--shadow);animation:wswIn .25s ease}
@keyframes wswIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.wsw-mcard h3{font-size:16px;margin-bottom:2px}
.wsw-mcard .sub{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.wsw-mpick{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.wsw-mopt{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:13px;
  padding:10px 12px;background:var(--panel2);text-align:left;font-family:var(--sans);
  color:inherit;cursor:pointer}
.wsw-mopt .tier{font-size:10.5px;font-weight:800;color:var(--c);flex:none;border-radius:99px;padding:1px 7px;
  border:1px solid color-mix(in srgb,var(--c) 40%,var(--line))}
.wsw-mopt .mn{font-weight:700;font-size:13.5px}
.wsw-mopt .rw{margin-left:auto;text-align:right;line-height:1.3;flex:none}
.wsw-mopt .rw b{font-family:var(--mono);font-size:13px;color:var(--warn);display:block}
.wsw-mopt .rw em{font-style:normal;font-size:10.5px;color:var(--free);font-weight:700}
.wsw-mopt.on{border-color:var(--free);background:color-mix(in srgb,var(--free) 7%,var(--panel))}
/* 다 고르면 나머지가 식는다 — 3장 중 2장이라는 사실이 모양으로 보인다 */
.wsw-mopt.dim{opacity:.45}
.wsw-mfoot{display:flex;gap:8px;margin-bottom:9px}
/* 「안 골라도 됩니다」가 **같은 크기로 나란히** 선다 — 미션은 의무가 아니다 */
.wsw-mfoot .go{flex:1.4;background:var(--free);border:0;color:#fff;border-radius:11px;padding:11px;
  font-size:13.5px;font-weight:800;font-family:var(--sans);cursor:pointer}
.wsw-mfoot .go:disabled{opacity:.45;cursor:default}
.wsw-mfoot .no{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.35;padding:7px;
  font-family:var(--sans);cursor:pointer}
.wsw-rr{width:100%;margin-bottom:8px}

/* ── C. 카드 스택 — 남은 장수가 모양으로 읽힌다 ── */
.wsw-stack{position:relative}
.wsw-stack.two::before,.wsw-stack.deep::before{content:"";position:absolute;left:9px;right:9px;
  height:16px;top:-6px;background:var(--panel);border:1px solid var(--line);
  border-radius:15px 15px 0 0;z-index:0}
.wsw-stack.deep::after{content:"";position:absolute;left:18px;right:18px;height:16px;top:-11px;
  background:var(--panel);border:1px solid var(--line);border-radius:15px 15px 0 0;opacity:.6;z-index:0}
.wsw-stack .task{position:relative;z-index:1;animation:wswIn .25s ease}
.wsw-stack .task.flyout{transition:transform .3s ease,opacity .3s ease;
  transform:translateY(-56px) scale(.95);opacity:0}
.wsw-remain{text-align:center;font-size:11px;color:var(--ink-faint);font-weight:700;margin-top:10px}

/* ── D. 마감 카드 ── */
.wsw-done{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 18px;
  text-align:center;box-shadow:var(--shadow);animation:wswIn .3s ease}
.wsw-done .big{font-size:42px;animation:wswPop .5s ease}
@keyframes wswPop{0%{transform:scale(.4)}70%{transform:scale(1.14)}100%{transform:scale(1)}}
.wsw-done h3{font-size:18px;margin:6px 0 2px}
.wsw-done .sub{font-size:12.5px;color:var(--ink-soft)}
.wsw-done .facts{display:flex;gap:6px;justify-content:center;margin:14px 0 6px;flex-wrap:wrap}
.wsw-done .facts span{border:1px solid var(--line);border-radius:99px;padding:4px 12px;
  font-size:12.5px;font-weight:700}
.wsw-done .facts .w{color:var(--won);border-color:color-mix(in srgb,var(--won) 40%,var(--line))}
.wsw-done .facts .p{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.wsw-done .facts .x{color:var(--free);border-color:color-mix(in srgb,var(--free) 40%,var(--line))}
.wsw-done .note{font-size:11.5px;color:var(--ink-faint);line-height:1.55}
.wsw-tom{margin-top:15px;text-align:left;border-top:1px dashed var(--line);padding-top:12px}
.wsw-tom .tl{font-size:10.5px;letter-spacing:.1em;font-family:var(--mono);color:var(--ink-faint);
  font-weight:800;margin-bottom:7px}
.wsw-tom .ti{display:flex;gap:8px;font-size:12.5px;color:var(--ink-soft);padding:3px 0}
.wsw-tom .ti b{color:var(--ink)}

/* ── E. 여정 시트 ── */
.wsw-jsec{margin-bottom:20px}
.wsw-jsec .tl{font-size:10.5px;letter-spacing:.12em;font-family:var(--mono);color:var(--ink-faint);
  font-weight:800;margin-bottom:9px}
/* 등급 트랙 — 지나온 길은 색으로 남고 현재 노드가 숨쉰다 */
.wsw-track{display:flex;align-items:flex-start;position:relative;padding:5px 0 3px;margin-bottom:10px}
.wsw-track::before{content:"";position:absolute;left:18px;right:18px;top:18px;height:3px;
  background:var(--line2);border-radius:99px}
.wsw-track .tn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  position:relative;z-index:1;min-width:0}
.wsw-track .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:8.5px;font-weight:800;color:#fff;background:var(--g);
  border:3px solid var(--panel)}
.wsw-track .tn.todo .dot{background:var(--line);color:var(--ink-faint)}
.wsw-track .tn.now .dot{animation:wswBreath 2.4s ease infinite}
@keyframes wswBreath{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 35%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--g) 12%,transparent)}}
.wsw-track .nm{font-size:9px;color:var(--ink-faint);font-weight:700;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wsw-track .tn.now .nm{color:var(--ink);font-weight:800}

.wsw-next{border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--panel2)}
.wsw-next .nh{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px}
.wsw-next .nh b{font-size:14px}
.wsw-next .bonus{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--warn);font-weight:800}

/* 조건 넷을 작은 링으로 — 「조금 남았어요」 대신 숫자를 그대로 */
.wsw-crings{display:flex;justify-content:space-around;margin-bottom:8px}
.wsw-crings .cr{position:relative;width:66px;text-align:center}
.wsw-crings svg{display:block;margin:0 auto}
.wsw-crings .k{stroke:var(--line2)}
.wsw-crings .f{stroke:var(--g);transition:stroke-dasharray .45s ease}
.wsw-crings .cr.ok .f{stroke:var(--won)}
.wsw-crings .v{position:absolute;top:14px;left:0;right:0;font-family:var(--mono);
  font-size:10px;font-weight:800}
.wsw-crings .l{font-size:9.5px;color:var(--ink-faint);font-weight:700;line-height:1.3;
  margin-top:2px;display:block}

/* 배지 진열장 — 그리드 → 선반. 잠긴 것은 실루엣이지만 조건은 그대로 보여준다 */
.wsw-shelf{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px 10px 4px}
.wsw-shelf .sr{display:flex;justify-content:space-around;gap:5px;
  border-bottom:3px solid var(--line);padding-bottom:7px;margin-bottom:11px}
.wsw-shelf .sr:last-child{border-bottom:0;margin-bottom:6px}
.wsw-shelf .bd{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);font-size:19px;display:grid;place-items:center;cursor:pointer;flex:none}
.wsw-shelf .bd.got{border-color:color-mix(in srgb,var(--g) 45%,var(--line));
  background:color-mix(in srgb,var(--g) 8%,var(--panel))}
.wsw-shelf .bd.lock{filter:grayscale(1);opacity:.42}
.wsw-shelf .bd.sel{outline:2px solid var(--dev);outline-offset:1px}
.wsw-shelf .bd.legend.got{border-color:#D4A62A;box-shadow:0 0 0 1px #D4A62A inset}
.wsw-bdinfo{font-size:12px;color:var(--ink-soft);border:1px dashed var(--line);border-radius:10px;
  padding:8px 11px;margin-top:9px;line-height:1.55}
.wsw-bdinfo b{color:var(--ink)}
.wsw-bdinfo span{display:block;color:var(--ink-faint);font-size:11.5px;margin-top:2px}

/* 신분증 풀카드 — 꾸미기를 고르면 그 자리에서 바뀐다 */
.wsw-idfull{border-radius:16px;padding:15px 16px;color:#fff;position:relative;overflow:hidden;
  margin-bottom:11px;box-shadow:var(--shadow);
  background:linear-gradient(125deg,var(--g),color-mix(in srgb,var(--g) 50%,#1A2332))}
.wsw-idfull .r1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wsw-idfull .wsg-gc{background:rgba(255,255,255,.22);color:#fff;border:0;font-size:11px}
.wsw-idfull b{font-size:19px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.wsw-idfull .r2{font-size:11.5px;opacity:.85;margin-top:3px}
.wsw-idfull .ebs{position:absolute;right:15px;top:15px;font-size:17px;letter-spacing:3px}

/* 정산 화면에서 여정으로 가는 문 — 한 값은 한 곳에서만 보인다 */
.wsw-jlink{display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:11px 14px;
  margin-bottom:14px;font-family:var(--sans);color:inherit}
.wsw-jlink:hover{border-color:var(--ink-faint)}
.wsw-jlink b{font-size:13.5px}
.wsw-jlink .sub{font-size:11.5px;color:var(--ink-faint)}
.wsw-jlink .go{margin-left:auto;color:var(--ink-faint);font-size:16px}
.wsw-jbtn{width:100%;margin-top:10px}

/* 애니메이션을 끈 환경에서는 전부 정지 — 연출은 거들 뿐이다 */
@media (prefers-reduced-motion:reduce){
  .wsw-mcard,.wsw-done,.wsw-done .big,.wsw-stack .task,.wsd-card,.wsw-track .tn.now .dot,
  .wsw-pend.bump{animation:none}
  .wsw-ring .rw,.wsw-ring .rp,.wsw-crings .f,.wsw-stack .task.flyout{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   📱 작업소 개편 — 모바일 손질 (2026-08-08)
   PC 를 먼저 그리고 폰을 나중에 확인하면 이런 것들이 남는다. 실제로 남았던 것들이다.
   ══════════════════════════════════════════════════════════════════════════ */

/* PC 상단 줄은 워크벤치와 **운명을 같이한다.**
   3판 그리드를 깨지 않으려고 `#workPC` 바깥에 뒀더니, 그 그리드를 숨기는 규칙(880px)에
   걸리지 않아 폰에서 폰 헤더 위에 **같은 링이 하나 더** 떠 있었다. */
.wsw-pctop{display:flex}
@media(max-width:880px){ .wsw-pctop{display:none} }

/* 검수 덱 액션바 — 폰에서 네 줄로 무너져 있었다(162px).
   원인은 **키보드가 없는 기기에 키보드 안내를 띄운 것**이다. 판정 버튼이 화면 밖으로
   밀리면 그게 이 화면에서 제일 나쁜 실패라, 폰에서는 안내를 걷고 버튼을 한 줄로 세운다. */
@media(max-width:700px){
  .wsd-key{display:none}
  .wsd-acts{gap:6px}
  .wsd-acts .mini{padding:8px 10px}
  /* 승인은 폰에서도 한눈에 크게 — 금액이 박혀 있으므로 줄여서 잘리면 안 된다 */
  .wsd-ok{flex:1 0 100%;order:9;padding:12px;font-size:15px}
  .wsd-pos{order:1}
}

/* 발주 영수증 — 폰에서는 세로로 이어 붙고, sticky 는 의미가 없다(이미 한 칸이다) */
@media(max-width:820px){
  .wsd-rcpt{position:static}
  .wsd-rcpt .mmfoot{flex-direction:row;flex-wrap:wrap}
}

/* 등급 트랙 — 7칸을 폰 폭에 나누면 「스페셜리스트」가 잘린다.
   글자를 줄이는 대신 **두 줄을 허용한다**: 등급 이름은 계약 용어라 잘리면 안 된다. */
@media(max-width:560px){
  /* keep-all 을 쓰면 안 된다 — 「스페셜리스트」는 띄어쓰기가 없는 한 단어라 끊을 자리가 없고,
     그대로 「스페셜리…」로 잘린다. 등급 이름은 계약 용어라 잘리는 것보다 두 줄이 낫다. */
  .wsw-track .nm{white-space:normal;overflow:visible;text-overflow:clip;
    line-height:1.15;font-size:8.5px;word-break:break-all}
  .wsw-track::before{top:16px}
  .wsw-track .dot{width:24px;height:24px;font-size:8px}
}

/* 폰 헤더 한 줄 — 320px 같은 좁은 기기에서 신분증이 링·대기칩을 밀어내지 않게 */
@media(max-width:380px){
  .wsw-hd{gap:7px}
  .wsw-ring{width:66px;height:66px}
  .wsw-ring svg{width:66px;height:66px}
  .wsw-pend{min-width:70px;padding:6px 8px}
  .wsw-id{padding:8px 10px}
  .wsw-id .lv{display:none}   /* 등급·레벨은 여정 시트에 그대로 있다 */
}

/* 미션 오프닝 — 「고르지 않아도 됩니다」가 두 줄로 눌려 읽히지 않던 자리 */
@media(max-width:420px){
  .wsw-mfoot{flex-direction:column}
  .wsw-mfoot .go,.wsw-mfoot .no{flex:none;width:100%}
  .wsw-mfoot .no{padding:9px;line-height:1.4}
}

/* 로스터·기준 카드는 폰에서 한 칸으로 — minmax 가 268px 라 375px 에서 아슬아슬했다 */
@media(max-width:520px){
  .wsd-roster,.wsd-stdgrid{grid-template-columns:1fr}
}

/* 보상 원장 — 이름과 금액이 붙어 읽히던 줄 */
@media(max-width:520px){
  .wsd-ledger .lrow{flex-wrap:wrap;row-gap:2px}
  .wsd-ledger .lc{width:100%;order:9}
}

/* ── 폰에서 손가락으로 누르는 것들 ──────────────────────────────────────────
   작업 카드의 마지막 줄이 폰에서 이랬다: 주소칸 223px · 📋 40×30 · **게시 완료 71×28**.
   하루 30~80건을 도는 사람이 가장 자주 누르는 버튼이 28px 였다는 뜻이다.
   「이 작업 건너뛰기」는 아예 16px 였다 — 밑줄만 있고 누를 자리가 없었다.

   그래서 폰에서는 **줄을 나눈다**: 주소는 한 줄을 다 쓰고, 그 아래 [📋][게시 완료]가
   나란히 선다. 복사 버튼은 좁게, 완료는 남은 폭을 다 쓴다 — 크기가 곧 중요도다. */
@media(max-width:700px){
  .postrow{flex-wrap:wrap;gap:7px}
  .postrow .fld{flex:1 0 100%;min-width:0;font-size:16px;padding:11px 12px}  /* 16px = iOS 자동 확대 방지 */
  .postrow .mini{padding:11px 12px;font-size:14px}
  .postrow .mini.pri{flex:1}
  .wsg-rsvrow{gap:7px;flex-wrap:wrap;margin-top:10px}
  .wsg-rsvrow .mini{padding:9px 12px}
  .skipbtn{padding:10px;margin-top:2px;font-size:13.5px}
  /* 미션 진행 칩도 눌러서 여는 문이다 — 25px 로는 안 잡힌다 */
  .wsw-mchip{padding:7px 12px}
}

/* 폰에서 글 쓰는 칸이 좁으면 다듬을 마음이 안 생긴다 — 초안을 「그대로 쓰는」 쪽으로 민다 */
@media(max-width:700px){
  .wsedit{font-size:16px;line-height:1.7;min-height:150px}
}

/* ── 폰에서 작업 카드가 「카드」로 보이게 ────────────────────────────────────
   `.task` 에는 **자기 표면이 없었다.** PC 에서는 `.phone` 프레임의 흰 배경 위에 얹혀
   카드처럼 보였는데, 폰에서는 그 프레임을 걷어내므로(`background:none`) 내용이 배경 위에
   그냥 흩어졌다 — 제목·초안·버튼이 각자 떠 있는 상태. 스택 그림자도 얹힐 면이 없었다.
   그래서 폰에서는 카드가 자기 면을 갖는다. */
@media(max-width:880px){
  .ph-body{padding:0 0 18px}
  .wsw-stack .task{
    background:var(--panel);border:1px solid var(--line);border-radius:16px;
    padding:15px 16px 16px;box-shadow:var(--shadow)}
  /* 스택은 카드 뒤에 겹쳐 보이는 종이다 — 카드에 면이 생겼으니 이제 제대로 읽힌다 */
  .wsw-stack.two::before,.wsw-stack.deep::before,.wsw-stack.deep::after{
    border-bottom:0}
}

/* 안내 6장 — 폰에서는 접어 둔다. 여는 손잡이가 곧 「여기 설명이 있다」는 표시다 */
.wnbox{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.wnbox>summary{cursor:pointer;list-style:none;padding:12px 14px;font-size:13.5px;font-weight:800;
  color:var(--ink-soft);display:flex;align-items:center;gap:7px}
.wnbox>summary::-webkit-details-marker{display:none}
.wnbox>summary::after{content:"▾";margin-left:auto;color:var(--ink-faint);transition:transform .15s}
.wnbox[open]>summary{border-bottom:1px solid var(--line2)}
.wnbox[open]>summary::after{transform:rotate(180deg)}
.wnbox .wn{border:0;border-radius:0;border-bottom:1px solid var(--line2);background:none}
.wnbox .wn:last-child{border-bottom:0}
/* PC 옆 칸에서는 손잡이 없이 그냥 펼쳐진 목록으로 — 접을 이유가 없는 자리다 */
@media(min-width:881px){
  .wnbox{border:0;background:none;overflow:visible}
  .wnbox>summary{display:none}
  .wnbox[open]>summary{border-bottom:0}
  .wnbox .wn{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px}
}

/* ── 「여기가 첫 화면입니다」 — 앱을 벗어나기 직전의 유일한 경고 ──────────────
   토스트로 띄웠더니 아무도 못 봤다: 토스트는 화면 맨 아래 24px 에 뜨는데, 그 자리가
   하필 폰의 제스처 영역이고 뒤로가기 스와이프 애니메이션이 지나가는 곳이다.
   눈이 가 있는 **위쪽**에, 경고 색으로, 안전영역을 피해서 띄운다. */
/* 📥 DM 보관 (2026-08-21) — 목록 아래 접힌 줄. 옷은 접속 안 함(doff) 문법 */
.dmarch{margin:2px 0 4px}
.dmarch summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;
  color:var(--ink-faint);padding:4px 8px}
.dmarch summary::-webkit-details-marker{display:none}
.dmarch .ch.dim{opacity:.65}

/* 📜 버전 기록 — 판=배경, 목록은 흰 rdcard 한 장. 한 버전 한 줄 */
.verlogbox{width:min(560px,94vw)}
/* 「n판」은 제목이 아니라 곁들임 — 작고 흐리게 제목 옆에, 딱 붙지는 않게 (2026-08-21 사용자.
   margin-left:auto 는 ✕ 의 auto 와 공간을 나눠 가운데에 떠 보였다) */
.verlogbox .mmhead .sub{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink-faint)}
.verloglist{max-height:min(62vh,540px);overflow-y:auto;padding:6px 10px}
.verrow{display:flex;align-items:baseline;gap:9px;padding:6px 4px;font-size:13px;
  border-bottom:1px solid var(--line2)}
.verrow:last-child{border-bottom:0}
.verrow b{font-family:var(--mono);font-size:12.5px;flex:none;min-width:64px}
.verrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.verrow i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);flex:none}

/* 📱 자리 카드의 동시 접속 배지 — 이름 옆 작은 글리프 하나. 카드에 줄을 늘리지 않는다 */
.dualbdg{font-size:11px;opacity:.75;cursor:default}

/* 상단 알림 줄 (2026-08-21 사용자 확정 — 「화면을 가리지 않게」) — 줄들은 #topbars 에
   쌓이고, body 가 그 높이(--topbars)만큼 내려간다. 덮지 않고 민다. */
/* 줄이 **없으면 아무것도 아니어야 한다** (2026-08-22) — 예전엔 안전영역 padding 때문에
   빈 상자가 노치 높이만큼 남아, 화면 위쪽 클릭을 삼키고 본문을 그만큼 밀어냈다.
   pointer-events 는 상자에서 끄고 줄에서만 켠다 */
#topbars{position:fixed;left:0;right:0;top:0;z-index:84;display:flex;flex-direction:column;
  pointer-events:none}
#topbars:not(:empty){padding-top:env(safe-area-inset-top,0px)}
#topbars > *{pointer-events:auto}
body{padding-top:var(--topbars,0px)}
.mobibar{padding:7px 12px;text-align:center;
  font-size:12.5px;font-weight:800;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 14%,var(--panel));
  border-bottom:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.mobibar.dim{color:var(--ink-soft);background:color-mix(in srgb,var(--ink-faint) 10%,var(--panel));
  border-bottom-color:var(--line)}
/* 📲 PWA 설치 유도 — 로그인·게이트보다 위, 나가기 확인창(97)보다는 아래 */
.pwagate{z-index:96}

/* ↩ 나가기 확인창 (2026-08-21 사용자 확정) — 첫 화면에서의 뒤로가기는 조용히 나가지 않고
   묻는다. 옷은 확인창 규칙: 판=배경색, 내용=흰 둥근 박스 */
.exitask{z-index:97}
.exitbox{width:min(360px,92vw)}
.exitcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 16px;text-align:center}
.exitcard h2{font-size:16px;font-weight:800}
.exitcard p{font-size:13px;color:var(--ink-soft);margin-top:6px;line-height:1.6}
.exbtns{display:flex;gap:8px;justify-content:center;margin-top:14px}
.exbtns .mini{min-width:110px;padding:8px 10px}

.koreexit{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);
  transform:translate(-50%,-14px);opacity:0;pointer-events:none;z-index:300;
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  min-width:min(320px,86vw);max-width:92vw;padding:11px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--warn) 92%,#000);color:#fff;
  box-shadow:0 10px 30px rgba(20,28,46,.28);
  transition:transform .2s ease,opacity .2s ease}
.koreexit.on{opacity:1;transform:translate(-50%,0)}
.koreexit b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.koreexit span{font-size:13px;opacity:.92;line-height:1.45}
@media (prefers-reduced-motion:reduce){ .koreexit{transition:none} }

/* ══════════════════════════════════════════════════════════════════════════
   🖥️ PC 작업소를 폰 작업소의 결로 (2026-08-08)

   구조(3판)는 그대로다. 바뀌는 것은 **면과 활자**뿐이다.
   폰이 나아 보였던 이유는 단순하다: 회색 바탕 위에 흰 카드가 떠 있어서 무엇이 한 덩어리인지가
   눈에 바로 잡혔다. PC 는 흰 판 안에 흰 내용이 얹혀 있어 윤곽이 사라졌고, 링만 맨몸으로 떠 있었다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 상단 한 줄 — 셋이 같은 물건으로 보이게 ── */
.wsw-pctop{gap:9px}
/* 링을 칩 안에 넣는다. 폰에서는 셋이 붙어 있어 한 줄로 읽히지만 PC 는 폭이 넓어,
   맨몸의 링은 이웃한 두 칩과 다른 물건처럼 보였다. */
.wsw-ringchip{display:flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--sans);
  border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:5px 16px 5px 6px;
  color:inherit;text-align:left}
.wsw-ringchip:hover{border-color:var(--ink-faint)}
.wsw-ringchip .wsw-ring.pc{position:relative;width:58px;height:58px;flex:none;display:block;
  border:0;background:none;padding:0;margin:0;cursor:inherit}
.wsw-ringchip .side{line-height:1.3;white-space:nowrap}
.wsw-ringchip .side b{font-family:var(--mono);font-size:17px;color:var(--won);display:block;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wsw-ringchip .side span{font-size:11px;color:var(--ink-faint);font-weight:700}
.wsw-pctop .wsw-id{padding:11px 14px;border-radius:13px}
.wsw-pctop .wsw-pend{padding:9px 16px;border-radius:13px}
.wsw-pctop .wsw-pend b{font-size:17px}

/* ── 가운데 — 카드가 자기 표면을 갖는다(폰과 같은 규칙) ──
   `#pcCenter` 가 판이면 그 안의 카드가 흰 바탕 위 흰 바탕이 된다. 판 껍데기를 벗기고
   내용 쪽이 카드를 쓴다. 그래야 폰에서 보던 그 카드가 PC 에도 그대로 있다. */
#pcCenter.panel{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.wsw-pccard{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px 17px;box-shadow:var(--shadow)}
/* 미션 오프닝·마감 카드는 이미 자기 면을 갖고 있다 — PC 에서도 그 면을 그대로 쓴다 */
#pcCenter .wsw-mcard,#pcCenter .wsw-done{border-radius:16px}
#pcCenter .empty{background:var(--panel);border:1px dashed var(--line);border-radius:16px;padding:38px 0}

/* ── 옆 판들 — 폰 카드와 같은 곡률·그림자로 ── */
.pcwork>.panel,.pcside>.panel{border-radius:16px;box-shadow:var(--shadow);padding:14px 15px}
/* 판 머리글은 폰의 구역 라벨과 같은 활자를 쓴다 */
.pcwork .qhead{font-size:10.5px;letter-spacing:.12em;font-weight:800;margin-bottom:9px}

/* 큐 목록 — 폰의 작업 칩과 같은 결(굵은 테두리 대신 얇게, 곡률은 카드에 맞춘다) */
.pcwork .qitem{border-width:1px;border-radius:11px;padding:9px 11px;font-size:13.5px}
.pcwork .qitem.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel))}

/* 정산 판 — 숫자 활자를 폰의 정산 카드와 맞춘다. 값이 어느 층인지 색으로 말하는 규칙도 같다:
   확정 초록 · 검수 대기 주황 · 보너스 보라 */
.pcmoney .row{font-size:13.5px;padding:5px 0}
.pcmoney .row.big b{font-size:20px}
.pcmoney .row:nth-child(3) b{color:var(--warn)}      /* 검수 대기 */
.pcmoney .row.rew b{color:var(--free)}               /* 오늘 보너스 */
.pcgauge{height:7px;margin-top:10px}

/* 성장 판 — 폰 여정 시트와 같은 구역 간격 */
.wsg-play .wsw-track{margin-top:12px}
.wsg-play .wsw-crings{margin-bottom:10px}
.wsg-play .wsg-law{font-size:11.5px;line-height:1.55}
.wsw-jbtn{border-radius:11px;padding:9px}

/* 작업 규칙 — 폰의 안내 카드와 같은 활자 크기로 */
.rules li{font-size:13px;padding:5px 0 5px 18px}

/* 뜬금액은 이제 카드 위에서 뜬다 — 기준 상자를 카드로 옮긴다 */
.wsw-pccard{position:relative}

/* ── 폰 카드의 「안쪽」까지 PC 카드에 맞춘다 ────────────────────────────────
   겉면만 맞춰 놓으니 안이 달랐다: 브리프가 폰에서는 회색 상자인데 PC 에서는 맨 글이었다.
   원인은 그 규칙들이 전부 `.task ...` 로만 걸려 있고 PC 래퍼는 `.wsw-pccard` 라서다.
   같은 것을 두 번 적지 않도록, **폰 카드에 쓰던 값을 PC 래퍼에도 그대로** 준다. */
.wsw-pccard .pchead{margin-bottom:9px}
.wsw-pccard .pchead b{font-size:17px;line-height:1.4;letter-spacing:-.01em}
.wsw-pccard .q{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
  padding:11px 13px;font-size:15px;line-height:1.6;margin-bottom:12px}
.wsw-pccard .wsg-facts{margin-bottom:10px}
.wsw-pccard .ailab{margin-bottom:6px}
.wsw-pccard .srcurl{margin-bottom:12px}

/* 제출 줄 — 폰에서 「게시 완료」를 크게 만든 이유가 PC 에서도 그대로 유효하다.
   하루 수십 번 누르는 버튼이 옆 버튼들과 같은 크기면 눈이 매번 그걸 찾아야 한다. */
.wsw-pccard .postrow{gap:8px;margin-top:12px;align-items:center}
.wsw-pccard .postrow .fld{min-width:200px;font-size:14px;padding:9px 12px}
.wsw-pccard .postrow .mini{padding:9px 13px;font-size:13.5px}
.wsw-pccard .postrow .mini.pri{padding:10px 22px;font-size:14.5px;font-weight:800}

/* 초안 고르개 — 폰과 같은 여백·곡률 */
.wsw-pccard .draft{border-width:1px;border-radius:12px;padding:10px 12px}
.wsw-pccard .wsedit{border-width:1px;border-radius:12px;margin-top:8px}

/* 편집칸이 화면 높이를 다 먹으면 **제출 줄이 접힌 곳 아래로 밀린다** — 하루 수십 건을 도는
   화면에서 「게시 완료」를 찾으려고 매번 스크롤하게 된다. 카드 하나가 한 화면에 들어오도록 묶는다.
   (늘려 쓰고 싶으면 오른쪽 아래 손잡이로 늘린다 — resize:vertical 은 그대로다.) */
.wsw-pccard .wsedit{min-height:170px;max-height:34vh}

/* 💬 채널 목록의 파트 색 점 (2026-08-19)
   style.css 는 전역 한 장이라 짧은 이름은 남의 규칙에 걸린다 — 시스템 화면 접두(sys)를 붙인다 */
.syschdot{width:8px;height:8px;border-radius:50%;flex:none}

/* 🌴 휴가 등록창의 잔여 표시 (2026-08-19) */
.awbal:not(:empty){display:flex;flex-direction:column;gap:2px;margin:0 0 12px;
  padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.awbal .awbq{font-size:13px}
.awbal .awbq b{font-size:16px}
.awbal .awbs{font-size:12px;color:var(--ink-faint)}
.awbal .awbs.over{color:var(--warn)}

/* 🌴 휴가 관리 (2026-08-19) — 전역 한 장이라 sys/lv 접두로 남의 규칙을 피한다 */
.lvremain{font-size:13px;flex:none;padding:2px 9px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel2)}
.lvremain b{font-size:15px}
.lvremain.unk{color:var(--ink-faint)}
.syslvlog{padding:2px 12px 12px}
.syslvlog .lvcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.syslvlog .lvh{font-size:12px;font-weight:700;color:var(--ink-faint);margin-bottom:4px}
.syslvlog .lvl{display:flex;gap:8px;align-items:baseline;font-size:12px;padding:2px 0}
.syslvlog .lvd{flex:none;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.syslvlog .lvk{flex:none;min-width:56px}
.syslvlog .lvl b.neg{color:var(--red)}
@media (max-width:820px){ .syslvlog .lvcols{grid-template-columns:1fr} }

/* 회의 예약의 빠른 시각 선택 (2026-08-19) — .chip 은 .mmbox 안에서 이미 정의돼 있다 */
.mmquick{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}

/* 시안 이름 고치기 (2026-08-19) */
/* 이름 칸을 옆 [저장]·✕ 와 **같은 키**로 줄인다 (2026-08-19) — .fld 는 로그인 폼용이라
   기본이 크다(글자 16 · 패딩 11). 도구줄에 그대로 놓으면 혼자 튀고 그림과도 붙는다
   (.segq 에서 한 번 겪은 것과 같은 자리다). */
.revname{display:flex;align-items:center;gap:7px;margin:8px 0 10px}
.revname .rl{flex:none;font-size:12px;color:var(--ink-faint)}
.revname .fld{flex:1;margin:0;font-size:13px;padding:5px 10px;border-radius:8px;height:31px}

/* 🏷 프로젝트 좁히기 — 보드 도구줄 (2026-08-19) */
.ksel{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:4px 10px;font-size:12.5px;color:inherit;max-width:200px}

/* 📁 카드의 프로젝트 이름 (2026-08-19) — **제목 위** 한 줄. 길면 자른다.
   제목보다 작고 흐리게: 먼저 눈에 걸리되 제목을 이기면 안 된다(제목이 카드의 이름이다). */
.kcard .kproj{font-size:11.5px;font-weight:600;color:var(--ink-faint);margin:0 0 1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/*
 * 항목형 모듈(레퍼런스·스펙·로드맵…)의 고치기·지우기 버튼 (2026-08-19)
 *
 * `.ckx` 는 `opacity:0` 이고 `.ckrow2:hover` 에서만 켜진다. 항목 줄은 `.irow` 라
 * **그 규칙에 걸리지 않아 영원히 투명**이었다 — 버튼이 DOM 에는 있는데 아무도 못 본다.
 * (「레퍼런스는 수정·삭제가 아예 안 된다」의 정체가 이것이다.)
 *
 * 호버로만 켜지 않는다: 폰에는 호버가 없어서 그러면 모바일에서 영영 못 누른다.
 * 평소엔 흐리게 두고 마우스가 오면 진해진다.
 */
.irow .ckx{opacity:.5}
.irow:hover .ckx{opacity:1}
.irow .ckx:hover{color:var(--red)}
@media (hover:none){ .irow .ckx{opacity:.75} }

/* ═══════════ 📣 광고리서치 (adresearch.js) — 2026-08-19 재설계판 ═══════════
 * 접두사 ar- 고정 — style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다.
 * 색은 전부 CSS 변수 — 다크는 변수 교체로 따라온다.
 * 위계: 상태 타일(요약=필터) > 표의 Δ·추이 > 나머지. 관리 버튼은 ghost 로 한 톤 낮춘다. */

/* ── 상태 타일 — 누르면 곧 필터다 ── */
.arstats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 12px}
.arstats.four{grid-template-columns:repeat(4,1fr)}
.arstats.six{grid-template-columns:repeat(6,1fr)}
@media(max-width:840px){.arstats,.arstats.four,.arstats.six{grid-template-columns:repeat(2,1fr)}}
.arstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  cursor:pointer;text-align:left;position:relative;min-height:44px}
.arstat b{font-size:21px;line-height:1.2}
.arstat span{font-size:12px;color:var(--ink-faint)}
.arstat.plain{cursor:default}
.arstat.on{border-color:var(--dev);box-shadow:inset 0 0 0 1px var(--dev)}
.arstat.st-top b{color:var(--won)}
.arstat.st-exposed b{color:var(--dev)}
.arstat.st-low b{color:var(--warn)}
.arstat.st-missing b{color:var(--red)}
.arstat.warn b{color:var(--warn)}
/* 📁 처리됨 갈래 타일 (3.62.0) — 칩과 같은 색을 쓴다 */
.arstat.ct-done b{color:var(--dev)}
.arstat.ct-unable b{color:var(--red)}
.arstat.ct-wait b{color:var(--warn)}
.arstat.ct-none b{color:var(--ink-faint)}
.arstat.ct-done.on{border-color:var(--dev);box-shadow:inset 0 0 0 1px var(--dev)}
.arstat.ct-unable.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.arstat.ct-wait.on{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.arstat.ct-none.on{border-color:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--ink-faint)}
.arstat.st-top.on{border-color:var(--won);box-shadow:inset 0 0 0 1px var(--won)}
.arstat.st-low.on{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.arstat.st-missing.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.artrend{position:absolute;top:10px;right:12px;font-size:12px;font-style:normal;color:var(--ink-soft)}

/* ── 크롤 진행바 — 도는 동안 화면이 침묵하지 않는다 ── */
.arprog{position:relative;height:20px;border:1px solid var(--line);border-radius:99px;
  overflow:hidden;margin:-4px 0 12px;background:var(--panel2)}
/* 채움 — 흐르는 빗금으로 「지금 돌고 있다」를 말한다. 크롤은 2분쯤 걸려서, 숫자만 있으면
   멈춘 것과 구분이 안 된다(사용자 지적 2026-08-27). 색은 토큰만 쓴다 — 다크에서도 같은 결. */
.arprog i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background-color:color-mix(in srgb,var(--dev) 25%,var(--panel));
  background-image:repeating-linear-gradient(115deg,
    transparent 0 10px,
    color-mix(in srgb,var(--dev) 16%,transparent) 10px 20px);
  background-size:28px 100%;
  transition:width .45s var(--ease,cubic-bezier(.4,0,.2,1));
  animation:arprogFlow 1s linear infinite}
@keyframes arprogFlow{to{background-position:28px 0}}
/* 훑고 지나가는 빛 — 채움이 0%(총 개수를 아직 모를 때)여도 살아 있음이 보인다 */
.arprog::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--dev) 13%,transparent),transparent);
  transform:translateX(-100%);animation:arprogSheen 1.6s ease-in-out infinite}
@keyframes arprogSheen{60%,100%{transform:translateX(100%)}}
/* 아직 총 개수를 모르는 첫 순간 — 0% 막대로 멈춰 있지 말고 왕복한다(불확정 상태) */
.arprog.wait i{width:34%!important;animation:arprogFlow 1s linear infinite,
  arprogWait 1.5s ease-in-out infinite;transition:none}
@keyframes arprogWait{0%{left:-34%}100%{left:100%}}
@media(prefers-reduced-motion:reduce){
  .arprog i,.arprog::after,.arprog.wait i{animation:none}
  .arprog.wait i{left:0;width:100%!important;opacity:.5}
}
/* 글자는 **채워진 막대와 무관하게** 왼쪽에 고정한다 — 흐름에 두면 채움(i)이 자리를 차지하는
   순간 글자가 오른쪽으로 밀려 진행률에 따라 위치가 춤춘다(2026-08-19). */
.arprog span{position:absolute;left:10px;top:0;right:10px;font-size:11.5px;color:var(--ink-soft);
  line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armock{color:var(--free)}

/* ── 칩 줄 (제품 · 토글 · 정렬) ── */
.archips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.archip{border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);
  border-radius:99px;padding:4px 12px;font-size:13px;cursor:pointer;min-height:44px}
@media(min-width:841px){.archip{min-height:0}}
.archip i{font-style:normal;color:var(--ink-faint);font-size:12px}
.archip.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.archip.add{border-style:dashed}
.archipwrap{display:inline-flex;gap:2px;align-items:center}
.archipgear{border:none;background:none;cursor:pointer;font-size:13px;padding:2px;opacity:.7}
.archipgear:hover{opacity:1}
.artog{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.artog.big{margin-top:8px;display:flex}
.arsel{width:auto;min-width:104px;padding:4px 8px}

/* ── 누락 → 발주 배너 ── */
.arbanner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--red) 35%,var(--line));border-radius:10px;
  background:color-mix(in srgb,var(--red) 6%,var(--panel));padding:8px 12px;margin:0 0 10px;font-size:13.5px}

/* ── 표 ── */
.artbl{width:100%;border-collapse:collapse;font-size:13.5px}
.artbl th{font-size:12px;color:var(--ink-faint);text-align:left;font-weight:600;
  padding:6px 8px;border-bottom:1px solid var(--line)}
.artbl td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.artbl .r{text-align:right}.artbl .c{text-align:center}
.artbl .dim,.arpost .dim,.arex .dim,.arghead .dim,.arkwcard .dim{color:var(--ink-faint);font-size:12.5px}
.arrow{cursor:pointer}
.arrow:hover td{background:var(--panel2)}
.arrow.on td{background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.arstar{color:var(--warn)}
.arrank b{font-size:15px}
.arrank i{font-style:normal;font-size:11.5px;color:var(--ink-faint)}
.arst{display:inline-block;border-radius:99px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.arst.st-top{background:color-mix(in srgb,var(--won) 14%,var(--panel));color:var(--won)}
.arst.st-exposed{background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev)}
.arst.st-low{background:color-mix(in srgb,var(--warn) 14%,var(--panel));color:var(--warn)}
.arst.st-missing{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
.arkwbtns{white-space:nowrap}
.mini.ghost{border-color:transparent;background:none;opacity:.55}
tr:hover .mini.ghost,.arkwcard .mini.ghost{opacity:1}

/* Δ — 직전 크롤 대비. 이 화면에서 가장 먼저 읽혀야 하는 값이라 색이 진하다 */
.ardelta{font-size:12.5px;font-weight:700;white-space:nowrap}
.ardelta.up{color:var(--won)}
.ardelta.down{color:var(--red)}
.ardelta.same{color:var(--ink-faint);font-weight:400}
.ardelta.new{color:var(--dev);font-size:11px;border:1px solid var(--dev);border-radius:6px;padding:0 5px}

/* 인라인 미니 추이 */
.armini{width:64px;height:22px;display:inline-block;vertical-align:middle}
.armini .ln{fill:none;stroke:var(--dev);stroke-width:1.2}
.armini .dot{fill:var(--dev)}
.armini .dot.top{fill:var(--won)}
.armini .miss{fill:var(--red)}

/* 행 확장 — 큰 이력 */
.arspark td{background:var(--panel2);padding:10px 12px}
.arsparkhead{display:flex;gap:10px;align-items:center;font-size:13px;margin-bottom:6px;flex-wrap:wrap}
.arsvg{width:100%;height:64px;display:block}
.arsvg .ln{fill:none;stroke:var(--dev);stroke-width:1.6}
.arsvg .dot{fill:var(--dev)}
.arsvg .dot.top{fill:var(--won)}
.arsvg .miss{fill:var(--red)}
.arsvg .g1{stroke:var(--won);stroke-width:.6;opacity:.5}
.arsvg .g5{stroke:var(--line);stroke-width:.6}

/* 폰 — 키워드 카드 */
.arcards{display:flex;flex-direction:column;gap:8px}
.arkwcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.arkwcard.on{border-color:var(--dev)}
.arkwcard .l1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.arkwcard .l1 b{flex:1;min-width:0}
.arkwcard .l2{display:flex;gap:10px;align-items:center;margin-top:6px;flex-wrap:wrap}
.arsparkslot{margin-top:8px}

/* ── 최신글 — 처리 큐 ── */
.argroup{padding:10px 14px;margin-bottom:10px}
.arghead{display:flex;gap:8px;align-items:center;padding-bottom:6px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.argn{font-size:12px;color:var(--ink-faint);border:1px solid var(--line);border-radius:99px;padding:0 8px}
.arpost{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line2);
  flex-wrap:wrap;min-height:44px}
.arpost:last-of-type{border-bottom:0}
.arpost a{flex:1;min-width:180px;color:var(--ink);text-decoration:none}
.arpost a:hover{color:var(--dev);text-decoration:underline}
.arsrc{font-size:11.5px;border-radius:6px;padding:1px 7px;font-weight:600}
.arsrc.cafe{background:color-mix(in srgb,var(--coffee) 14%,var(--panel));color:var(--coffee)}
.arsrc.kin{background:color-mix(in srgb,var(--prod) 12%,var(--panel));color:var(--prod)}
.armacro{font-size:11.5px;color:var(--warn)}
/* 🔁 같은 글이 걸린 다른 키워드 (2026-08-21) — 길면 줄임표, 전체는 title 로.
   행을 밀어내지 않게 flex:0 1 auto (긴 키워드 목록이 제목을 못 잡아먹는다) */
.ardup{font-size:11.5px;color:var(--dev);background:color-mix(in srgb,var(--dev) 10%,transparent);
  border-radius:99px;padding:1px 8px;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help}
.armore{width:100%;border:1px dashed var(--line);background:none;border-radius:8px;
  padding:6px;margin-top:6px;font-size:12.5px;color:var(--ink-faint);cursor:pointer;min-height:44px}
@media(min-width:841px){.armore{min-height:0}}
.armore:hover{color:var(--dev);border-color:var(--dev)}

/* ── 모범답변 ── */
.arbdg{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:1px 7px;color:var(--ink-soft);white-space:nowrap}
.arbdg.kw{border-color:var(--dev);color:var(--dev)}
.arbdg.src{border-color:var(--free);color:var(--free)}
.arex{padding:10px 14px;margin-bottom:8px}
.arex summary{display:flex;gap:8px;align-items:center;cursor:pointer;list-style:none;flex-wrap:wrap;min-height:44px}
.arex summary::-webkit-details-marker{display:none}
.arexbody{white-space:pre-wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line2);
  font-size:14px;color:var(--ink-soft)}
.arexfoot{display:flex;gap:8px;align-items:center;margin-top:10px}

/* ── 발행 URL ── */
.arurl a{color:var(--dev);word-break:break-all;font-size:12.5px}

/* ── 빈 상태 · 온보딩 — 「없습니다」로 끝내지 않는다 ── */
.aronboard{padding:26px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.aronboard h3{margin:0}
.aronboard .steps{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.aronboard .s{font-size:13.5px;color:var(--ink-soft)}
.aronboard .s b{display:inline-flex;width:20px;height:20px;border-radius:99px;border:1px solid var(--line);
  align-items:center;justify-content:center;font-size:12px;margin-right:4px}

/* ── 발주 창 ── */
.arordsel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.arordpick{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:8px}
#arModal .mlab{display:block;font-size:12.5px;color:var(--ink-faint);margin:10px 0 4px}
#arModal .mmnote{font-size:12.5px;color:var(--ink-faint);margin-top:6px}

@media(max-width:840px){
  .arurltbl th:nth-child(5),.arurltbl td:nth-child(5){display:none}
  .arurl a{font-size:12px}
}

/* ── 📝 원고 저장소 (2026-08-20) — 접두사 arms- ──
 * 여백 규칙 둘만 지킨다: 표 행 높이 46px 고정(+N줄은 둘째 줄이 아니라 같은 줄 꼬리),
 * 셀 텍스트의 hover 알약은 음수 여백 상쇄라 글자 끝선이 안 움직인다.
 * 화면 전환(카페·댓글·블로그)은 세그먼트 — 제품 칩(=필터)과 성격이 달라 모양도 가른다. */
.arms-seg{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%,var(--panel));
  border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
.arms-seg button{border:0;background:none;color:var(--ink-soft);font-weight:700;font-size:13px;
  padding:4px 16px;border-radius:8px}
.arms-seg button:hover{color:var(--ink)}
.arms-seg button.on{background:var(--panel);color:var(--dev);box-shadow:0 1px 2px rgba(16,24,40,.10)}
@media(max-width:840px){.arms-seg button{min-height:44px;padding:4px 12px}}

/* 판별 표시 (3.30.0) — 순위 셀의 🖥️/📱 쌍과 지식인 행의 노출 판 배지 */
.ardev{white-space:nowrap;margin-left:6px}
.ardev:first-child{margin-left:0}
.ardev i.dim{font-style:normal}
.arkindev{font-size:12px;margin-right:4px;white-space:nowrap;opacity:.9}
.argts{font-size:12px}

/* ── 💡 지식인 노출 (3.16.0 · 2026-08-27) — 접두사 arkin- ──
 * 짧은 이름(.no · .post)은 전역 단일 파일에서 남의 규칙에 걸린다 — 전부 arkin 을 단다.
 * 한 키워드가 여러 글을 거느리므로 키워드 칸은 rowspan 이고, 키워드 경계에만 진한 줄을
 * 그어 「어디부터 다른 키워드인지」를 줄 하나로 읽게 한다. */
.arkintbl td{vertical-align:middle}
.arkintbl tr.arkintop>td{border-top:1px solid var(--line)}
.arkintbl .arkinkw{vertical-align:top;white-space:nowrap;border-right:1px solid var(--line2)}
.arkintbl .arkinno{width:34px;text-align:center;font-variant-numeric:tabular-nums;
  color:var(--ink-faint);font-size:12px}
.arkinpost{color:var(--ink);text-decoration:none}
.arkinpost:hover{text-decoration:underline}
/* ✕ 답변불가 — 취소선. 글이 죽은 게 아니라 「우리가 못 다는 자리」라는 표시다 */
.arkinunable .arkinpost{text-decoration:line-through;color:var(--ink-faint)}
.arkinunable .arkinpost:hover{text-decoration:line-through underline}
/* 이번 수집에서 빠진 글 — 지우지 않고 가라앉힌다(처리 기록이 있는 것만 남아 있다) */
.arkingone{opacity:.55}
/* 체크 한 쌍 — 상호배타. 꺼져 있을 때 글자를 감추면 표가 조용하고, 얹으면 미리 보인다 */
.arkinchk{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--panel);font-size:12px;font-weight:800;line-height:1;color:transparent;
  display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.arkinchk.ok:hover{border-color:var(--won);color:var(--won)}
.arkinchk.no:hover{border-color:var(--red);color:var(--red)}
.arkinchk.ok.on{background:var(--won);border-color:var(--won);color:#fff}
.arkinchk.no.on{background:var(--red);border-color:var(--red);color:#fff}
.arstat.kst-open b{color:var(--warn)}
.arstat.kst-done b{color:var(--won)}
.arstat.kst-unable b{color:var(--red)}
.arstat.kst-open.on{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.arstat.kst-done.on{border-color:var(--won);box-shadow:inset 0 0 0 1px var(--won)}
.arstat.kst-unable.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
/* 폰 — 표 대신 카드. 체크는 손가락이 닿는 크기(44px)로 커진다 */
.arkincard{cursor:default;margin-bottom:8px}
.arkincard .arkinch{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.arkinrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line2)}
.arkinrow .arkinpost{flex:1;min-width:0}
.arkinchks{display:inline-flex;gap:6px;flex:none}
@media(max-width:840px){.arkinchk{width:34px;height:34px;font-size:14px;color:inherit}}

.arms-kwadd{border:0;background:none;color:var(--dev);font-weight:800;font-size:14px;
  padding:0 4px;line-height:1;opacity:.75;cursor:pointer;vertical-align:-1px}
.arms-kwadd:hover{opacity:1}
.armstbl td{height:46px;padding-top:0;padding-bottom:0}
/* 좁은 창 무너짐 방지 (2026-08-20 맥 보고) — 표는 최소폭을 지키고, 판이 가로 스크롤을 받는다 */
.armswrap{overflow-x:auto}
.armstbl{table-layout:fixed;min-width:820px}
.arms-cell{display:flex;align-items:center;gap:6px;min-width:0}
.arms-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:4px 7px;margin:0 -7px;border-radius:7px;cursor:text}
.arms-txt:hover{background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.arms-txt.ph{color:var(--ink-faint)}
.arms-kw{font-weight:700}
.arms-lines{flex:none;font-size:11px;color:var(--ink-faint)}
.arms-cell textarea,.arms-cell input[type=text]{flex:1;min-width:0;border:1.5px solid var(--dev);
  border-radius:8px;padding:5px 8px;margin:6px 0;background:var(--panel);resize:vertical;
  outline:none;line-height:1.5;font-size:13.5px}
.arms-stlink{text-decoration:none;cursor:pointer}
.arms-stlink:hover{text-decoration:underline}
.arms-stnone{cursor:pointer;background:none;
  border:1px dashed color-mix(in srgb,var(--warn) 45%,var(--line))}
.arms-rowadd{margin-top:10px}
/* 댓글 세트 — 모범답변(.arex)과 같은 details 문법, 다중 개방 */
.panel.armset{padding:10px 14px;margin-bottom:8px}
.armset>summary{display:flex;gap:9px;align-items:center;cursor:pointer;list-style:none;
  flex-wrap:wrap;min-height:44px}
.armset>summary::-webkit-details-marker{display:none}
@media(min-width:841px){.armset>summary{min-height:0}}
.arms-caret{flex:none;color:var(--ink-faint);font-size:11px;transition:transform .16s var(--ease)}
.armset[open]>summary .arms-caret{transform:rotate(90deg);color:var(--dev)}
.arms-settitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arms-setbody{margin-top:8px;border-top:1px solid var(--line2)}
.arms-cmt{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid var(--line2)}
.arms-cmt:last-of-type{border-bottom:0}
.arms-cmt.re{margin-left:42px;background:var(--panel2);border-left:3px solid var(--line);
  border-radius:0 10px 10px 0;padding:11px 12px;border-bottom:0;margin-top:2px}
.arms-cmt.re+.arms-cmt.re{margin-top:8px}
.arms-avt{width:32px;height:32px;border-radius:50%;flex:none;color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:12.5px}
.arms-avt.sm{width:26px;height:26px;font-size:11px}
.arms-cmain{flex:1;min-width:0}
.arms-ctop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.arms-nick{font-weight:700;font-size:13px}
.arms-owner{background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev);
  border:1px solid color-mix(in srgb,var(--dev) 35%,var(--line));border-radius:5px;
  padding:0 6px;font-size:11px;font-weight:800}
.arms-ctime{color:var(--ink-faint);font-size:11.5px;font-family:var(--mono)}
.arms-ctext{white-space:pre-wrap;word-break:break-word;font-size:13.5px;color:var(--ink-soft)}
.arms-ctools{display:flex;gap:2px;margin:3px 0 0 -6px}
.arms-remark{color:var(--ink-faint);font-weight:800;margin-right:2px}
.arms-composer{display:flex;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.arms-composer.re{margin-left:42px;margin-top:8px;padding-top:0;border-top:0}
.arms-cbody{flex:1;min-width:0}
.arms-cbody select{border:1.5px solid var(--line);border-radius:9px;padding:5px 9px;
  background:var(--panel);font-weight:700;font-size:13px;width:auto}
.arms-cbody textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;
  background:var(--panel);padding:9px 11px;min-height:60px;resize:vertical;outline:none;
  margin-top:7px;line-height:1.55;font-size:13.5px}
.arms-cbody textarea:focus{border-color:var(--dev)}
.arms-cfoot{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:8px}
.arms-who{color:var(--ink-faint);font-size:12px}
@media(max-width:840px){.arms-cmt.re,.arms-composer.re{margin-left:20px}}

/* 📣 작업소 제출 화면의 광고 셀프체크 — 광고 발주(ad_keyword_id)에만 뜬다 */
.wssc{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:8px 0}
.wssch{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}
.wssch .dim{color:var(--ink-faint);font-size:11.5px}
.scs{border-radius:99px;padding:0 9px;font-size:12.5px}
.scs.ok{background:color-mix(in srgb,var(--won) 16%,var(--panel));color:var(--won)}
.scs.mid{background:color-mix(in srgb,var(--warn) 16%,var(--panel));color:var(--warn)}
.scs.bad{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red)}
.sccs{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.scc{font-size:12px;border:1px solid var(--red);color:var(--red);border-radius:99px;padding:1px 8px}
.scc.on{border-color:var(--won);color:var(--won)}

/* 시안 이름 줄의 ✕ (2026-08-19) — `.ckx` 는 기본이 `opacity:0` 이고 부모 호버 규칙으로만 켜진다.
   `.revname` 에는 그 규칙이 없어서 **버튼이 통째로 안 보였다**(항목 줄에서 겪은 것과 같은 실수를
   같은 날 두 번 했다). `.ckx` 를 새 자리에 쓸 때는 켜 주는 규칙을 반드시 함께 둔다. */
.revname .ckx{opacity:.6;flex:none}
.revname:hover .ckx{opacity:1}
.revname .ckx:hover{color:var(--red)}

/* 👥 담당 여러 명 — 칩 토글 (2026-08-19)
   select multiple 은 Ctrl 을 눌러야 해서 12명 중 대부분이 한 명밖에 못 고른다 */
/* 담당은 **자기 줄**을 쓴다. 고르개 넷이 선 메타 줄에 끼워 넣었더니 칩이 폭을 잃고
   글자가 한 자씩 세로로 쪼개졌다 — flex 안의 자식은 줄이지 말라고 말해 줘야 안 줄어든다. */
.csasg{display:flex;align-items:flex-start;gap:8px;margin:6px 0 2px;
  margin-right:calc(-1 * var(--cstools-w, 0px))}
.csasg .lb{flex:none;font-size:12px;color:var(--ink-faint);padding-top:5px}
.apick{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.apchip{flex:none;white-space:nowrap;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:3px 10px;font-size:12.5px;color:var(--ink-faint);cursor:pointer}
.apchip.on{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--panel));font-weight:600}
.kcard .meta .who + .who{margin-left:-6px}

/* 담당 고르기 — 고른 사람만 칩, 후보는 select 하나 (2026-08-19)
   전원을 칩으로 늘어놓으면 12명에서도 두 줄이고 20명이면 카드가 사람 목록에 묻힌다 */
.apchip .apx{border:0;background:none;color:inherit;opacity:.55;cursor:pointer;
  margin-left:4px;font-size:11px;padding:0}
.apchip .apx:hover{opacity:1}
.apadd{border:1px dashed var(--line);background:none;border-radius:99px;
  padding:3px 8px;font-size:12.5px;color:var(--ink-faint);cursor:pointer;max-width:170px}
.apnone{font-size:12.5px;color:var(--ink-faint);padding-top:4px}

/* 핀 줄의 ✏️·✕ (2026-08-19) — `.ckx` 는 기본 opacity:0 이라 켜 주는 규칙이 없으면 안 보인다.
   같은 실수를 세 번째로 했다: `.ckx` 를 새 자리에 쓰면 이 규칙을 반드시 함께 둔다. */
.pinrow .ckx{opacity:.5;flex:none}
.pinrow:hover .ckx{opacity:1}
.pinrow .ckx:hover{color:var(--red)}
@media (hover:none){ .pinrow .ckx{opacity:.75} }
.pinedit{display:flex;gap:6px;align-items:center;margin:2px 0 6px;padding-left:26px}
.pinedit .fld{flex:1;margin:0}

/* 상태 팝오버가 열린 카드는 위로 (2026-08-19)
   `.kcard{position:relative}` 라 팝업의 z-index 는 그 카드 안에서만 겨룬다 —
   아무리 높여도 문서 순서상 뒤에 오는 카드가 위에 그려져 선택지가 가렸다. */
.kcard.kstopen{z-index:30}

/* 순위 추이 범례 (2026-08-19) — 색만 다른 점 셋을 두고 설명이 없으면 아무 뜻도 전하지 못한다 */
.arlegend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 2px 2px;
  font-size:11.5px;color:var(--ink-faint)}
.arlegend i.lg{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;
  vertical-align:middle}
.arlegend i.lg.top{background:var(--won)}
.arlegend i.lg.dot{background:var(--dev)}
.arlegend i.lg.miss{background:var(--red)}

/* 확인 처리 되돌리기 띠 (2026-08-19) */
.arundo{position:sticky;top:8px;z-index:20;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13px}
.arundo .mini{background:rgba(255,255,255,.15);border-color:transparent;color:#fff}
.ardone{border:1px solid var(--line);background:var(--panel);border-radius:7px;
  padding:2px 8px;font-size:12px;color:var(--ink-faint);cursor:pointer;flex:none}
.ardone:hover{border-color:var(--won);color:var(--won)}
/* 💬 답변완료 — 확인과 다른 색으로 (2026-08-20 두 갈래 처리) */
.ardone.ans:hover{border-color:var(--dev);color:var(--dev)}
.arstchip{font-size:11px;border:1px solid var(--line2);border-radius:99px;padding:1px 7px;
  color:var(--won);white-space:nowrap;flex:none}
.arstchip.ans{color:var(--dev)}
/* 갈래 넷 (3.62.0) — 대기 둘은 같은 색이다(같은 성격이라 한 버튼에 접힌다) */
.arstchip.done{color:var(--dev);border-color:color-mix(in srgb,var(--dev) 40%,var(--line2))}
.arstchip.unable{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line2))}
.arstchip.wait{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line2))}
.arstchip.none{color:var(--ink-faint);border-style:dashed}
.ardone.no:hover{border-color:var(--red);color:var(--red)}
.ardone.wait:hover{border-color:var(--warn);color:var(--warn)}
/* 폰에서 이 셋이 이 화면의 주 동작이다 — 공용 버튼 기본 22px 로 두면 제일 자주 누르는
   버튼이 그대로 22px 가 된다 (폰 불변식). PC 는 건드리지 않는다. */
@media(max-width:840px){.ardone{min-height:40px;padding:6px 11px;font-size:13px}}
/* ✍️ 사람이 직접 담은 글 — 크롤이 담은 것과 구분한다 */
.arbdg.mine{border-color:var(--free);color:var(--free)}
/* ① 기준 줄의 라벨 — 순위표·최신글·일상글이 같은 꼴로 선다 */
/* 버튼이 없는 기준 줄도 같은 높이로 선다 — 없으면 글자가 위로 붙어
   순위표·최신글과 세로 위치가 어긋난다 (3.62.1 사용자) */
#arBody .board-tools{min-height:34px}
#arBody .board-tools .wssum{align-items:center;min-height:34px}
/* 🔗 링크 추가 창의 상태 고르개 */
.arlstates{display:flex;gap:6px;flex-wrap:wrap}
.arlstates .mini.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
/* 🏭 적용 완료 묶음 접기 */
.fbdonebox{margin-top:6px;border-top:1px dashed var(--line2);padding-top:6px}
.fbdonebox summary{cursor:pointer;font-size:12px;color:var(--ink-faint);padding:4px 6px;
  border-radius:8px;list-style:none;user-select:none}
.fbdonebox summary::-webkit-details-marker{display:none}
.fbdonebox summary::after{content:' ▾'}
.fbdonebox[open] summary::after{content:' ▴'}
.fbdonebox summary:hover{background:var(--panel2)}
/*
 * 📎 파일함 v2 — Workspace Explorer (2026-08-20, 목업 files_explorer_mockup_v1).
 * 사이드바(장소) + 탐색기(종류 탭·필터·Grid/List) + Inspector 세 판.
 * 클래스는 전부 fx 접두사 — style.css 는 전역 한 벌이라 짧은 이름은 남의 규칙에 걸린다.
 */
#filesBody{flex:1;min-height:0;display:flex;flex-direction:column}
/* 여백은 .office 와 같은 식 (2026-08-21 사용자 — 「전환하면 헤더가 움직여 보인다」):
   위 24 · 좌우 max(30, 1400 가운데 정렬). 아래만 내부 스크롤 구조라 얕게 둔다 */
.fxwrap{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:24px max(30px,calc((100% - 1400px)/2)) 16px}
/* 페이지 머리 — 흰 바 없이 배경 위 제목 한 줄. 보드·회계의 제목+도구 줄과 같은 문법 (2026-08-20) */
/* 다른 화면의 .shead h1(22px · 아래 20px 여백)과 같은 높이·크기 (2026-08-21 사용자) */
.fxpgtop{flex:none;display:flex;align-items:center;gap:12px;padding:2px 2px 16px}
.fxpgtop h2{font-size:22px;font-weight:800;letter-spacing:-.02em;flex:none}
.fxpgtop .sp{flex:1}
.fxsidebtn{display:none;border:1px solid var(--line);background:var(--panel);border-radius:8px;
  font-size:14px;padding:4px 10px;color:var(--ink-soft)}
.fxsearch{position:relative;width:min(340px,42%)}
.fxsearch input{width:100%;border:1.5px solid var(--line);background:var(--panel);border-radius:10px;
  padding:7px 12px 7px 33px;font-size:14px;outline:none;color:var(--ink)}
.fxsearch input:focus{border-color:var(--dev)}
.fxsearch .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.55}
.fxlayout{flex:1;display:flex;min-height:0;gap:14px;position:relative}

/* ⑴ 사이드바 — 장소. 판(panel) 모양이다: 레일 옆에 또 하나의 기둥을 세우지 않는다 */
.fxside{flex:none;width:206px;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  overflow-y:auto;padding:10px 9px 16px}
.fxsect{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-faint);
  padding:14px 9px 5px}
.fxside .fxsect:first-child{padding-top:3px}
.fxnavi{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;
  border-radius:8px;padding:6px 9px;font-size:13.5px;font-weight:600;color:var(--ink-soft);
  transition:background var(--t-fast) var(--ease)}
.fxnavi:hover{background:var(--panel2)}
.fxnavi.on{background:color-mix(in srgb,var(--dev) 10%,var(--panel));color:var(--dev);font-weight:800}
.fxnavi .ic{flex:none;width:18px;text-align:center;font-size:13px}
.fxnavi .ic.hash{font-size:12px;color:var(--ink-faint);font-weight:800}
.fxnavi.ext .ic.hash,.fxnavi.ext .nm{color:var(--ext)}
.fxnavi .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxnavi .n{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-weight:700}
.fxnavi.on .n{color:var(--dev)}
.fxnavi .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--prod)}
.fxnavi.ghost{opacity:.45;cursor:not-allowed}
.fxnavi.dim2 .nm{color:var(--ink-faint)}
.fxnavi.newf{color:var(--ink-faint)}
.fxnavi.newf:hover{color:var(--ink-soft)}
/* 드롭 대상 — 파일을 끌어 올리면 폴더 행이 점선 그릇이 된다 */
.fxnavi.dropok{outline:2px dashed var(--dev);outline-offset:-2px;
  background:color-mix(in srgb,var(--dev) 8%,var(--panel));color:var(--dev)}
.fxc.fxdragging,tr.fxdragging{opacity:.45}
.fxdragbadge{position:fixed;z-index:99;pointer-events:none;background:var(--ink);color:var(--bg);
  font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px;box-shadow:var(--shadow);display:none}
.fxnone{font-size:12px;color:var(--ink-faint);padding:3px 9px 6px}

/* ⑵ 탐색기 본문 */
.fxmain{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
.fxhead{flex:none;padding:2px 2px 0}
.fxhead .loc{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fxhead h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.fxhead .cnt{font-size:12.5px;color:var(--ink-faint)}
.fxhead .note{font-size:12px;color:var(--ink-faint)}
.fxdelfold{border:0;background:none;font-size:12px;color:var(--red);opacity:.8;padding:0 2px}
/* 📁/🔖 머리의 ⋯ — **앱의 다른 ⋯ 과 같은 문법**이다 (2026-08-26 사용자: 「얘만 지멋대로」).
   테두리도 바탕도 없는 흐린 점 셋, 손을 올리면 옅은 바탕이 깔린다(타게팅의 ⋯ 과 같은 값).
   카드 위의 ⋯(.fxha)은 어두운 썸네일 위라 흰 글씨인 것이고, 여기는 밝은 머리다 */
.fxlocmenu{border:0;background:none;color:var(--ink-faint);font-size:17px;font-weight:800;
  line-height:1;padding:2px 8px;border-radius:7px;opacity:.55;cursor:pointer;margin-left:2px}
.fxlocmenu:hover{background:var(--panel2);color:var(--ink);opacity:1}
.fxdelfold:hover{opacity:1;text-decoration:underline}
.fxbar{display:flex;align-items:center;gap:8px;margin-top:9px;border-bottom:1px solid var(--line2)}
.fxtab{border:0;background:none;font-size:13.5px;font-weight:700;color:var(--ink-faint);
  padding:6px 3px 9px;margin-right:10px;border-bottom:2px solid transparent;border-radius:0}
.fxtab:hover{color:var(--ink-soft)}
.fxtab.on{color:var(--ink);border-bottom-color:var(--dev)}
.fxtab .n{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-left:3px;font-weight:700}
.fxbar .sp{flex:1}
.fxtbtn{border:1px solid var(--line);background:var(--panel);border-radius:8px;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:4px 10px;margin-bottom:6px}
.fxtbtn:hover{border-color:var(--ink-faint)}
.fxtbtn.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.fxtbtn .n{font-family:var(--mono);font-size:11px;background:var(--dev);color:#fff;border-radius:99px;
  padding:0 5px;margin-left:4px}
.fxvseg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:6px}
.fxvseg button{border:0;background:var(--panel);padding:4px 9px;font-size:12.5px;color:var(--ink-faint)}
.fxvseg button.on{background:var(--panel2);color:var(--ink)}
.fxchips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 2px 0}
.fxchips:empty{display:none}
.fxchip{display:inline-flex;align-items:center;gap:5px;
  border:1px solid color-mix(in srgb,var(--dev) 40%,var(--line));
  background:color-mix(in srgb,var(--dev) 7%,var(--panel));color:var(--dev);
  border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700}
.fxchip b{cursor:pointer;font-weight:800;opacity:.7}
.fxchip b:hover{opacity:1}
.fxscroll{flex:1;min-height:0;overflow-y:auto;padding:13px 2px 8px}

/* 파일 카드 — 평소엔 썸네일·이름·크기. 맥락·액션은 hover 로 */
.fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:12px}
.fxc{position:relative;background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:7px;cursor:pointer;transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.fxc:hover{border-color:var(--line);box-shadow:var(--shadow)}
.fxc.sel{border-color:var(--dev);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev) 25%,transparent)}
.fxc.priv{border-style:dashed}
.fxth{position:relative;height:104px;border-radius:8px;background:var(--panel2);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.fxth img{width:100%;height:100%;object-fit:cover}
/* 🎬 영상 썸네일 — 브라우저가 그린 첫 프레임. 그 위에 작은 ▶ 를 얹어 「영상」임을 말한다
   (정지 그림만 두면 이미지 파일과 구별이 안 된다) */
.fxth video{width:100%;height:100%;object-fit:cover;background:var(--panel2);pointer-events:none}
.fxplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;background:rgba(20,28,46,.55);color:#fff;
  display:grid;place-items:center;font-size:13px;padding-left:2px;pointer-events:none}
/* 📅 기간 세그 — 「최근」이 무엇의 최근인지 (2026-08-26 사용자). 탭과 같은 줄에 서지만
   탭이 아니다: 무엇을 보느냐(종류)와 언제 것이냐(기간)는 다른 물음이라 모양을 가른다 */
.fxspan{display:inline-flex;gap:2px;background:var(--panel2);border-radius:9px;padding:2px;
  margin-left:6px;flex:none}
/* 눈금은 **안 접힌다** — 「이번 주」처럼 띄어 쓴 이름이 「이번 / 주」로 갈라져 두 줄이 됐다 */
.fxspan button{border:0;background:none;color:var(--ink-faint);font-size:12.5px;font-weight:700;
  padding:3px 10px;border-radius:7px;cursor:pointer;font-family:inherit;
  white-space:nowrap;flex:none}
.fxspan button.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
/* 날짜 칸막이 — 오늘 · 어제 · 8월 24일 (금) */
.fxday{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-size:12.5px;
  font-weight:800;color:var(--ink-soft)}
.fxday::after{content:"";flex:1;height:1px;background:var(--line2)}
/* 개수는 **날짜 바로 옆**이다 (2026-08-26 사용자) — order:1 을 줬더니 줄(::after) 뒤로 밀려
   오른쪽 끝에 혼자 섰다. DOM 순서(날짜 → 개수 → 줄) 그대로 둔다 */
.fxday i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.fxday span{flex:none}
/* 🗜️ 압축 안 목록 · 💬 주변 대화 — Inspector 의 곁들이 (2026-08-26 사용자) */
.fxzip,.fxctx{margin-top:12px;border-top:1px solid var(--line2);padding-top:10px}
.fxzip .k,.fxctx .k{font-size:11.5px;font-weight:800;color:var(--ink-faint);margin-bottom:6px}
.fxzip .k i{font-style:normal;font-family:var(--mono);margin-left:5px;color:var(--ink-soft)}
.fxzip ul{list-style:none;max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.fxzip li{display:flex;gap:6px;font-size:12px;color:var(--ink-soft);padding:2px 4px;border-radius:5px}
.fxzip li:nth-child(odd){background:var(--panel2)}
.fxzip li.dir{color:var(--ink-faint);font-weight:700}
.fxzip li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.fxzip li .sz{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
/* 긴 주소가 상자를 밀고 나가던 것 (2026-08-26 사용자) — 옆 판은 폭이 좁아 URL 하나가
   판 전체를 넓힌다. 어디서든 끊어 준다(한글은 낱말째, 주소는 글자째) */
.fxinsp .fld .v,.fxinsp .fld .v a{overflow-wrap:anywhere;word-break:break-word;line-height:1.5}
.fxcm span{overflow-wrap:anywhere;word-break:break-word}
.fxzloading{font-size:12px;color:var(--ink-faint);padding:4px 2px}
.fxcm{font-size:12px;line-height:1.55;padding:4px 6px;border-radius:6px;margin-bottom:3px}
.fxcm b{font-weight:800;margin-right:5px}
.fxcm span{color:var(--ink-soft)}
.fxcm.me{background:color-mix(in srgb,var(--dev) 9%,transparent)}
.fxicon{font-size:30px}
.fxlock{position:absolute;left:6px;top:6px;font-size:10px;font-weight:800;z-index:2;
  background:color-mix(in srgb,var(--ink) 78%,transparent);color:var(--bg);border-radius:6px;
  padding:2px 7px;white-space:nowrap;transition:top var(--t-fast) var(--ease)}
.fxhmeta{position:absolute;left:0;right:0;bottom:0;padding:18px 9px 7px;z-index:2;
  background:linear-gradient(transparent,rgba(16,22,36,.78));color:#fff;font-size:11.5px;line-height:1.45;
  opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none;border-radius:0 0 8px 8px}
.fxc:hover .fxhmeta{opacity:1}
.fxhmeta em{font-style:normal;font-weight:700;
  color:color-mix(in srgb,var(--ext) 45%,#fff)}   /* 어두운 판 위 — 진한 앰버는 안 읽힌다 */
.fxhacts{position:absolute;right:5px;top:5px;display:flex;gap:4px;z-index:3;
  opacity:0;transition:opacity var(--t-fast) var(--ease)}
.fxc:hover .fxhacts{opacity:1}
.fxha{border:0;border-radius:7px;background:rgba(20,28,46,.68);color:#fff;
  width:26px;height:26px;font-size:12.5px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;padding:0;cursor:pointer}
.fxha:hover{background:rgba(20,28,46,.92)}
.fxnm{font-size:13px;font-weight:700;margin:7px 2px 1px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;line-height:1.4}
.fxsub{font-size:11.5px;color:var(--ink-faint);margin:0 2px}

/* 다중 선택 — 브라우저처럼: hover 체크박스 · Ctrl/Shift · 하단 일괄 바 */
.fxck{position:absolute;left:6px;top:6px;z-index:4;width:21px;height:21px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.95);background:rgba(20,28,46,.38);display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;
  opacity:0;transition:opacity var(--t-fast) var(--ease);cursor:pointer}
.fxc:hover .fxck,.fxc.ck-on .fxck,.selmode .fxc .fxck{opacity:1}
.fxc.ck-on .fxck{background:var(--dev);border-color:var(--dev)}
.fxc.ck-on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.fxc:hover .fxlock,.fxc.ck-on .fxlock,.selmode .fxc .fxlock{top:33px}
/* sticky — 목록 안에 붙어 다녀서 스크롤을 어디로 내려도 보인다. absolute 로 판 밖에 두면
   레이아웃이 한 번이라도 어긋나는 날 화면 밖으로 사라진다 (2026-08-20 실서버에서 그랬다).
   옷은 밝은 판이다 — 어두운 띠는 토스트(잠깐 알림)의 옷이라 상시 조작판이 입으면 남의 화면 같다
   (2026-08-20 사용자 보고) */
/* 선택 바의 그릇은 **자리를 차지하지 않는다** — sticky 는 부모 상자 안에서만 움직이므로,
   그릇이 바 높이만큼이면 붙어 다니지 못하고 그 자리에 굳는다 (2026-08-26) */
#fxSelWrap{display:contents}
.fxselbar{position:sticky;bottom:6px;z-index:24;width:max-content;margin:14px auto 0;
  display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:12px;padding:7px 12px;box-shadow:var(--shadow);
  font-size:13.5px;white-space:nowrap}
.fxselbar .cnt{font-weight:800;color:var(--dev);padding:0 3px}
.fxselbar button{border:1px solid var(--line);background:var(--panel2);color:var(--ink-soft);
  border-radius:8px;padding:5px 11px;font-size:12.5px;font-weight:700}
.fxselbar button:hover{border-color:var(--ink-faint);color:var(--ink)}
.fxselbar .x{border:0;background:none;color:var(--ink-faint);padding:5px 6px}
.fxselbar .x:hover{color:var(--ink)}

/* List — 문서가 많아질 때의 표 */
.fxlist{width:100%;border-collapse:collapse;font-size:13.5px}
.fxlist th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);
  text-align:left;font-weight:700;padding:4px 10px 8px;border-bottom:1px solid var(--line2);white-space:nowrap}
.fxlist td{padding:7px 10px;border-bottom:1px solid var(--line2);color:var(--ink-soft);white-space:nowrap}
.fxlist tr{cursor:pointer}
.fxlist tbody tr:hover td{background:var(--panel)}
.fxlist tr.sel td{background:color-mix(in srgb,var(--dev) 7%,var(--panel))}
.fxlist .fn{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);max-width:330px}
.fxlist .fn .mini{flex:none;width:28px;height:28px;border-radius:6px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.fxlist .fn .mini img{width:100%;height:100%;object-fit:cover}
.fxlist .fn .mini .fxicon{font-size:13px}
.fxlist .fn .nm{overflow:hidden;text-overflow:ellipsis}
.fxlist .dim{color:var(--ink-faint)}
.fxlist .rowact{opacity:0;border:0;background:none;font-size:13px;color:var(--ink-faint);padding:2px 5px}
.fxlist tr:hover .rowact,.fxlist tr.sel .rowact{opacity:1}
.fxlist input[type=checkbox]{accent-color:var(--dev);width:15px;height:15px;cursor:pointer}
.fxlist .ckc{width:26px;padding-right:0}

.fxempty{margin:56px auto;max-width:360px;text-align:center;color:var(--ink-faint)}
.fxempty .big{font-size:34px;margin-bottom:10px}
.fxempty b{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:6px}
.fxempty p{font-size:13px;line-height:1.7}
.fxmore{display:block;margin:16px auto 0;border:1px solid var(--line);background:var(--panel);
  border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-soft);padding:7px 22px}

/* ⑶ Inspector — 클릭 한 번으로 여는 맥락 판. 화면 끝에 붙은 기둥이 아니라 **떠 있는 판**이다:
   파일 위에 잠깐 얹히는 정보라는 위계가 모양에서 읽힌다 (2026-08-20 디자인 일체감) */
/*
 * 옆 판은 **화면 끝에서 나온다** (2026-08-26 사용자) — 업무보드 카드 시트와 같은 문법이다.
 * 예전엔 레이아웃 안(absolute)이라 목록 위에만 떠서, 같은 앱의 두 옆 판이 다른 데서 나왔다.
 * 덮개(어두운 판)는 두지 않는다: 카드 시트는 「작업하는 자리」라 가려도 되지만
 * 여기는 목록을 훑으며 옆에 띄워 두는 자리다 — 뒤가 보이고 눌러진다.
 */
.fxinsp{position:fixed;right:0;top:0;bottom:0;width:min(380px,92vw);z-index:84;
  background:var(--panel);border-left:1px solid var(--line);border-radius:0;
  box-shadow:-14px 0 40px rgba(10,14,22,.18);
  opacity:0;transform:translateX(24px);pointer-events:none;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
.fxinsp.open{opacity:1;transform:none;pointer-events:auto}
@media(max-width:860px){ .fxinsp{width:100%;border-left:0} }
.fxinsp .inner{height:100%;overflow-y:auto;padding:15px 17px 18px;position:relative}
.fxinsp .x{position:absolute;right:8px;top:8px;border:0;background:none;font-size:15px;
  color:var(--ink-faint);padding:4px 7px;border-radius:7px;z-index:2}
.fxinsp .x:hover{background:var(--panel2)}
/* position:relative — ▶ 배지(.fxplay)가 이 상자 안에 앉는다. 없으면 판 전체를 기준으로
   잡아 **화면 한가운데**에 떠 버린다 (2026-08-26 사용자: 「뜬금없이 가운데에」) */
.fxprev{position:relative;height:146px;border-radius:10px;background:var(--panel2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.fxprev img{width:100%;height:100%;object-fit:contain}
/* 옆 판의 미리보기는 잘라내지 않고 **담는다**(contain) — 목록의 카드와 다른 규칙이다 */
.fxprev video{width:100%;height:100%;object-fit:contain}
.fxprev .fxicon{font-size:42px}
.fxinsp h4{font-size:15px;font-weight:800;line-height:1.4;word-break:break-all;padding-right:22px}
.fxinsp .sub{font-size:12.5px;color:var(--ink-faint);margin:3px 0 12px}
.fxinsp .fld{margin-bottom:11px}
.fxinsp .fld .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:3px}
.fxinsp .fld .v{font-size:13.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fxinsp .fld .v .tag{border:1px solid var(--line);border-radius:6px;padding:1px 8px;font-size:12px;background:var(--panel2)}
.fxinsp .fld .v .none{color:var(--ink-faint);font-weight:500}
.fxprivno{font-size:12px;color:var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));border-radius:8px;padding:6px 10px;margin-bottom:11px}
.fxibtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;border:1px solid var(--line);
  background:var(--panel2);border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink-soft);
  padding:9px;margin-top:7px;text-decoration:none;cursor:pointer}
.fxibtn:hover{border-color:var(--ink-faint)}
.fxibtn.pri{background:var(--dev);border-color:var(--dev);color:#fff}
.fxibtn.pri:hover{filter:brightness(1.07)}

/* 필터 팝오버 — 출처 · 사람 · 기간 (v1 의 상단 세그먼트·칩이 이 안으로 접혔다) */
.fxpop{position:absolute;z-index:25;right:0;top:80px;width:256px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:13px 15px;display:none}
.fxpop.open{display:block}
.fxpop .grp{margin-bottom:11px}
.fxpop .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:5px}
.fxpop label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-soft);
  padding:3px 0;cursor:pointer}
.fxpop label input{accent-color:var(--dev)}
.fxpop .row{display:flex;gap:5px;flex-wrap:wrap;max-height:130px;overflow-y:auto}
.fxpop .pill{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:2px 10px;font-size:12px;font-weight:700;color:var(--ink-soft)}
.fxpop .pill i{font-style:normal;font-size:10px;color:var(--ink-faint)}
.fxpop .pill.on{border-color:var(--dev);color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.fxpop .clear{border:0;background:none;font-size:12px;color:var(--ink-faint);text-decoration:underline;padding:4px 0 0}

/* ⋯ 메뉴 */
.fxmenu{position:fixed;z-index:96;min-width:170px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow);padding:5px}
.fxmenu button,.fxmenu a{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;
  text-align:left;border-radius:7px;padding:7px 10px;font-size:13px;font-weight:600;color:var(--ink-soft);
  text-decoration:none;cursor:pointer}
.fxmenu button:hover,.fxmenu a:hover{background:var(--panel2);color:var(--ink)}
.fxmenu .div{height:1px;background:var(--line2);margin:4px 6px}
/* 표 보기 손질 — 칸이 곧 입력이다. 점선 밑줄이 「눌러서 고친다」를 말한다 */
.artbl .tgtbe{cursor:pointer;border-bottom:1px dashed transparent;padding-bottom:1px}
.artbl .tgtbe:hover{border-bottom-color:var(--prod);color:var(--prod)}
.artbl .tgie{border:none;background:none;font-size:12px;color:var(--ink-faint);opacity:.5;
  padding:1px 5px;border-radius:6px;cursor:pointer;vertical-align:1px}
.artbl .tgie:hover{background:var(--panel2);color:var(--prod);opacity:1}
.artbl .tgtbin{width:100%;margin:0;padding:3px 8px;font-size:13px}
.artbl .tgtbdel{border:none;background:none;font-size:13px;opacity:.4;
  padding:3px 7px;border-radius:7px;cursor:pointer}
.artbl .tgtbdel:hover{background:color-mix(in srgb,var(--red) 10%,var(--panel));opacity:1}
@media (max-width:860px){.artbl .tgtbdel,.artbl .tgie{min-width:40px;min-height:40px}}

/* 🧩 확장 안내 창 — 설치 단계는 번호가 붙어야 따라 하기 쉽다 */
.tgexth{font-size:12.5px;font-weight:800;color:var(--ink-faint);margin:14px 0 6px}
.tgextl{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-soft);line-height:1.75}
.tgextl li{margin-bottom:5px}
.tgextl i{font-style:normal;display:block;font-size:12.5px;color:var(--ink-faint)}
.tgextl code{font-family:var(--mono);font-size:12.5px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:6px;padding:1px 6px}
/* 목록 줄 하나에 「고르기」 + 「⋯ 손질」 — 고르는 동선을 막지 않으면서 손질도 같은 자리에서 */
.fxmenu .tgprow{display:flex;align-items:center;gap:2px}
.fxmenu .tgprow>button:first-child{flex:1;min-width:0}
.fxmenu .tgpdots{width:30px;flex:none;justify-content:center;color:var(--ink-faint);font-weight:800;padding:7px 0}
.mini.danger{border-color:color-mix(in srgb,var(--red) 45%,var(--line));color:var(--red)}
.mini.danger:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--panel));color:var(--red)}
/* 팝오버 어휘의 나머지 둘 — 없으면 각 화면이 인라인 style 로 흉내 내다 제각각이 된다.
   .cap 은 목록 머리말(「어디에 넣을까요?」), .danger 는 되돌릴 수 없는 항목(삭제). */
.fxmenu .cap{font-size:12px;color:var(--ink-faint);font-weight:700;padding:5px 10px 2px}
.fxmenu button.danger{color:var(--red)}
.fxmenu button.danger:hover{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red)}

/* 좁은 화면 — 사이드바는 덮개로. Inspector 는 원래 떠 있는 판이라 폭만 줄인다 */
@media (max-width:860px){
  .fxwrap{padding:14px 12px 12px}   /* 모바일도 .office(14px 12px)와 같은 시작 여백 */
  .fxsidebtn{display:block}
  .fxside{position:absolute;z-index:26;height:100%;box-shadow:var(--shadow);
    transform:translateX(-105%);transition:transform var(--t-mid) var(--ease)}
  .fxside.open{transform:none}
  .fxinsp{width:min(320px,88vw)}
  .fxpop{right:0}
}

.flpick{position:fixed;z-index:96;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:5px;display:grid;gap:2px;min-width:170px;
  max-height:240px;overflow-y:auto}
.flpick button{border:0;background:none;text-align:left;font-size:12.5px;color:var(--ink-soft);
  border-radius:7px;padding:5px 9px;cursor:pointer}
.flpick button:hover{background:var(--panel2)}

/* 📮 피드백 이미지 — 폼 미리보기와 정제소 블록 표시 */
.fbimgprev{margin:8px 0 0;display:flex;align-items:flex-end;gap:8px}
.fbimgprev img{max-height:110px;max-width:60%;border-radius:10px;border:1px solid var(--line2)}
.fbimg{margin-top:8px}
.fbimg img{max-height:220px;max-width:100%;border-radius:10px;border:1px solid var(--line2);
  cursor:zoom-in}
/* 🔄 새 판 배너 — 화면 위 한 줄. 강요하지 않고, 자리를 비우면 알아서 새로고침한다 */
.verbar{position:fixed;top:0;left:50%;transform:translateX(-50%) scale(calc(1/var(--uiz,1)));
  transform-origin:top center;z-index:120;background:var(--ink);color:#fff;font-size:13px;
  padding:8px 14px;border-radius:0 0 12px 12px;display:flex;gap:10px;align-items:center;
  box-shadow:var(--shadow)}
.verbar .mini{flex:none}

/* 📊 정제소 공유 현황판 (비권한 직원용) */
.fbboard-row{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--line2);
  font-size:13px;min-width:0}
.fbboard-row:last-child{border-bottom:0}
.fbboard-row .bd{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink-soft)}
.fbboard-row .dim{flex:none;font-size:12px;color:var(--ink-faint)}
.fbboard-row .fbst{flex:none}

/* 💬 DM 묶음 (2026-08-19) */
.grp.grpdm{display:flex;align-items:center;position:relative}
.dmadd{margin-left:auto;border:1px dashed var(--line);background:none;border-radius:7px;
  width:20px;height:20px;line-height:1;color:var(--ink-faint);cursor:pointer;font-size:13px}
.dmadd:hover{color:var(--ink);border-color:var(--ink-faint)}
/* fixed 로 띄우고 좌표는 JS 가 준다 — 예전 right:0 이 남아 있으면 fixed 와 만나
   **화면 오른끝까지 늘어난다**(left 와 right 가 동시에 걸려 폭이 강제된다) */
.dmpick{position:fixed;z-index:95;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:5px;display:grid;gap:2px;min-width:150px;
  max-height:260px;overflow-y:auto}
.dmpick button{border:0;background:none;text-align:left;font-family:inherit;font-size:12.5px;
  color:var(--ink-soft);border-radius:7px;padding:5px 8px;cursor:pointer}
.dmpick button:hover{background:var(--panel2)}
.dmpick button i{font-style:normal;color:var(--ink-faint);font-size:11px}
/* 그룹 DM (2026-08-20) — 이름 클릭은 1:1, 체크 2명부터 아래 버튼이 선다 */
.dmpick .dmrow{display:flex;align-items:center;gap:2px}
.dmpick .dmrow input{margin:0 0 0 4px;accent-color:var(--dev)}
.dmpick .dmrow button{flex:1}
.dmpick .dmgo{background:var(--dev);color:#fff;font-weight:700;text-align:center;margin-top:3px}
.dmpick .dmgo:hover{background:var(--dev)}

/* 💬 방 고르개 — 맵 고르개(.brmenu)와 **같은 옷**이다 (2026-08-27 사용자 「통일감있게」).
   그래서 .fxmenu 를 그대로 입고, 다른 점 하나만 더한다: 방은 길어질 수 있다.
   색 점은 여기서 크기를 준다 — .ch i 의 7px 는 채널 버튼의 규칙이라 여기 안 온다 */
.chpick{max-height:min(320px,58vh);overflow-y:auto}
.chpick button i{flex:none;width:7px;height:7px;border-radius:2px;display:block}

/* 🧩 진열대 접기 (2026-08-22 사용자) — .ckx 는 기본이 opacity:0 이고 자리마다
   hover 규칙으로 켠다. 여기엔 그 규칙이 없어 그냥 쓰면 **영영 안 보인다**(그 함정). */
.modpickx{opacity:.55;margin-left:auto;font-size:13px;cursor:pointer}
.modpickx:hover{opacity:1;color:var(--red)}

/* 💬 카드 코멘트 (2026-08-22) — 담당끼리의 소통 창구.
   채팅 말풍선을 흉내 내지 않는다: 카드 안이라 세로가 귀하고, 여기서는 「누가 무슨 말을
   언제」가 한 줄로 읽히는 편이 낫다. */
/* 이름은 전부 cmt* 다 — .ch/.ca/.cb/.cw 처럼 짧은 이름은 **남의 규칙에 걸린다**.
   실제로 .ch i{width:7px}(채널 버튼의 색 점)가 코멘트의 시각을 7px 칸에 욱여넣어
   글자가 세로로 뭉갰다 (2026-08-22 사용자 스크린샷). 전역 CSS 한 장짜리 앱의 규칙이다. */
.cscmt .cmt{display:flex;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line2)}
.cscmt .cmt:last-of-type{border-bottom:0}
.cscmt .cmtav{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--oc) 18%,var(--panel));color:var(--oc);
  font-size:12px;font-weight:800;overflow:hidden}
.cscmt .cmtav img{width:100%;height:100%;object-fit:cover}
.cscmt .cmtw{flex:1;min-width:0}
.cscmt .cmth{display:flex;align-items:baseline;gap:7px;font-size:12.5px}
.cscmt .cmth b{font-weight:800}
.cscmt .cmth i{font-style:normal;color:var(--ink-faint);font-size:11.5px;
  width:auto;height:auto;background:none;border-radius:0;flex:none}
/* 버튼 묶음이 오른쪽 끝으로 — auto 를 버튼마다 주면 공간을 나눠 가진다(그 사고) */
.cscmt .cmtact{margin-left:auto;display:flex;gap:4px;flex:none}
.cscmt .cmth .ckx{opacity:0}
.cscmt .cmt:hover .cmth .ckx{opacity:1}
.cscmt .cmtb{font-size:13.5px;line-height:1.6;margin-top:2px;white-space:normal;word-break:break-word}
.cscmt .cmen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:5px}
/* 지목 꼬리표 — 확인하면 초록으로 넘어간다(「봤다」가 눈에 보여야 다시 안 묻는다) */
.cmtag{font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 8px;
  background:color-mix(in srgb,var(--dev) 12%,transparent);color:var(--dev)}
.cmtag.ok{background:color-mix(in srgb,var(--prod) 14%,transparent);color:var(--prod)}
.cmtack{padding:2px 10px;font-size:11.5px}
.cmtadd{display:flex;gap:6px;align-items:flex-end;margin-top:8px}
.cmtadd textarea{flex:1;min-height:34px;max-height:140px;resize:vertical;
  border:1.5px solid var(--line);border-radius:9px;padding:7px 10px;font:inherit;
  font-size:13.5px;background:var(--panel);color:var(--ink);outline:none}
.cmtadd textarea:focus{border-color:var(--dev)}
.cmtedit{width:100%;border:1px solid var(--dev);border-radius:7px;padding:5px 8px;
  font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);outline:none;resize:vertical}

/* ✅ 체크리스트 상태 4종 (2026-08-22) — 글리프 하나가 상태를 말한다.
   색은 이 앱의 뜻 그대로: 하는 중=파랑(dev) · 막힘=경고(warn) · 끝=초록(prod) */
/* 글리프는 **누르기 좋은 크기**여야 한다 (2026-08-27 사용자: 「선택 범위를 늘려 달라」).
   20px 짜리를 겨냥하다 옆을 누르면 예전엔 곧바로 완료가 됐다. 28px 은 손가락의 최소치다.
   눌리는 자리가 보이도록 hover 에 옅은 판을 깐다 — 어디까지가 단추인지 눈으로 안다 */
.ckrow2 .box{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;
  width:28px;height:28px;flex:none;color:var(--ink-faint);padding:0;border-radius:8px;
  display:grid;place-items:center;margin:-4px 0}
.ckrow2 .box:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ckrow2.st-doing .box{color:var(--dev)}
.ckrow2.st-hold  .box{color:var(--warn)}
.ckrow2.st-done  .box{color:var(--prod)}
.ckrow2.st-done .lb{text-decoration:line-through;color:var(--ink-faint)}
.ckrow2.st-hold  .lb{color:var(--warn)}
.ckrow2 .lb{cursor:text;border-radius:5px;padding:1px 3px;min-width:0}
.ckrow2 .lb:hover{background:var(--panel2)}
.ckrow2 .ckwho{font-size:11px;color:var(--ink-faint);flex:none;margin-left:auto;padding-right:4px}
.ckedit{width:100%;border:1px solid var(--dev);border-radius:6px;padding:1px 5px;
  font:inherit;background:var(--panel);color:var(--ink);outline:none}
.fxmenu .ckic{width:14px;display:inline-block;text-align:center}
.fxmenu .ckic.st-doing{color:var(--dev)}
.fxmenu .ckic.st-hold{color:var(--warn)}
.fxmenu .ckic.st-done{color:var(--prod)}

/* 🔐 계정 보관함 (2026-08-19) */
/* 🔑 복구 정보 (2026-08-22) — 폼의 구분줄과 목록 행의 둘째 줄.
   행을 밀어내지 않게 통째로 줄바꿈시킨다(flex-basis:100%) */
.vfsep{font-size:12.5px;font-weight:800;color:var(--ink-soft);
  margin:14px 0 6px;padding-top:10px;border-top:1px solid var(--line2)}
/* 🔑 여닫는 버튼 — 흐림 없음(터치 기기에서 영영 흐린 함정, .ckx 의 교훈).
   펼친 상태는 눌린 것이 보이게 색으로 표시한다 */
/* 아직 안 채운 계정 — 눌러서 채우라는 뜻이라 점선으로 「빈 자리」임을 보인다 */
/* 분류 머리글 — 채널 목록 .grp 와 같은 문법. .grp 를 그대로 쓰면 이 자리엔 규칙이 없어
   생 글자(+이탤릭 숫자)로 나왔다 (2026-08-21 사용자 「이질감」). 이름은 v* 로 —
   짧은 이름은 남의 규칙에 걸린다 */
/* 묶음 머리 — **본문 구역 머리(.dayhead)와 같은 문법**이다 (2026-09-01 사용자:
   「글씨체가 이상해」). 예전엔 mono + 자간 .12em 이었는데, 그건 레일·채팅의 **짧은
   고정 라벨**을 위한 옷이다. 여기 서는 것은 사람이 지은 분류 이름(「회사 기본 자료」)이라,
   고정폭 글꼴에 자간까지 벌리면 한글이 따로 놀고 있는 모양이 된다 */
.vgrp{font-size:12.5px;font-weight:800;color:var(--ink-faint);padding:12px 2px 6px}
.vgrp i{font-style:normal;font-weight:700;margin-left:5px;opacity:.7}
/* 도구줄 — 칩(왼쪽) · 검색·추가(오른쪽). 제목은 판 밖 .shead 의 몫 */
.vtool{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.vtool .segq{width:220px}
/* 분류 칩 — 정제소·캘린더 필터 칩과 같은 문법. 이름은 v* (이름 충돌 규칙) */
/* 칩 줄과 목록 사이에 숨 — 붙어 있으면 칩이 첫 줄의 머리처럼 읽힌다 (2026-09-01 사용자) */
.vcats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
/* 🔍 찾기 칸 — 공유함의 .fxsearch 와 같은 꼴(돋보기가 칸 안 왼쪽).
   빌려 쓰지 않고 같은 규칙을 이 화면 이름으로 둔다 — 남의 화면 규칙이 따라오면 안 된다 */
.vsearch{position:relative;flex:1;min-width:200px;max-width:340px}
.vsearch .fld{width:100%;padding-left:31px}
.vsearch .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  font-size:13px;opacity:.55;pointer-events:none}
.vcat{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;background:var(--panel2)}
.vcat i{font-style:normal;font-size:11px;color:var(--ink-faint)}
.vcat.pick{border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
/*
 * 🔐 금고의 한 줄 — **세 칸으로 굳는다** (3.63.0).
 *   [무엇] 서비스명 + 아이디   [지금] 🟢 누가 들어가 있나 · 경계   [집기] 복사 · ⋯
 * 예전엔 flex-wrap 위에 여덟 칸이 얹혀 있어 폭이 바뀔 때마다 접히는 자리가 달라졌다.
 * 좁아지면 **집기 칸만** 아래로 내려간다 — 접히는 자리가 늘 같다.
 */
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 13px;
  margin-bottom:6px;transition:border-color var(--t-fast) var(--ease)}
.vrow:hover{border-color:color-mix(in srgb,var(--dev) 35%,var(--line))}
/* 👁️ 서류 줄 — 썸네일 + 글. 사업자등록증 같은 서류는 「받아서 여는 것」이 아니라｢보는 것｣이라 (2026-09-01 사용자), 눌리는 자리를 앞에 둔다 */
.vrow .vw{min-width:0;display:flex;align-items:center;gap:10px}
.vrow .vwt{min-width:0}
/* 🔗 무엇으로 로그인하나 — 아이디 줄 아래 한 줄. 눌리면 그 계정으로 간다 */
/* 체크 한 칸 — 설명을 길게 붙이지 않는다 (2026-09-02 사용자: 「설명이 너무 이상해」).
   글자가 곧 뜻이면 안내 문구가 필요 없다 */
.fmck{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink-soft)}
.fmck input{width:16px;height:16px;accent-color:var(--dev);cursor:pointer}
/* 🔗 연동 로그인 계정 딱지 — 잠긴 분류(.slot)와 같은 급 */
.vtag.prov{color:var(--dev);border-color:color-mix(in srgb,var(--dev) 35%,var(--line))}
/* 값 자리 — 잠깐 보기가 여기 글자만 갈아 끼운다(판을 다시 안 그린다) */
.vval{font-family:var(--mono)}
.vvia{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:0;
  font:inherit;font-size:12px;font-weight:700;color:var(--dev);background:none;border:0;
  cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vvia:hover{text-decoration:underline}
/* 끊긴 연결은 **경고가 아니라 사실**이다 — 비밀번호도 없고 연결도 없으면 유령이 된다 */
.vvia.gone{color:var(--warn);cursor:default}
.vviak{gap:6px;flex-wrap:wrap;padding-bottom:6px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.vth{flex:none;width:38px;height:38px;border-radius:8px;border:1px solid var(--line2);
  background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;overflow:hidden;padding:0}
.vth img{width:100%;height:100%;object-fit:cover}
.vth:hover{border-color:var(--dev)}
.vth.k-pdf{background:color-mix(in srgb,var(--red) 8%,var(--panel2))}
.vrow .vw b{font-size:14.5px;font-weight:800}
/* 아이디는 곁다리가 아니라 **찾는 키**다 (2026-09-01 사용자) — 계정을 찾을 때 사람은
   서비스명보다 아이디를 먼저 본다. --ink-faint 로 깔면 캡션으로 읽혀 눈이 안 걸린다 */
.vsub{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vst{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.vgrab{display:flex;gap:6px;align-items:center;flex:none}
/* 집기는 **글자 버튼**이다 — 12px 아이콘 둘이 5px 간격으로 붙어 있으면 오조작이 난다 */
/* 단추와 링크가 같은 옷을 입는다 — <a> 는 기본으로 밑줄이 그어져 단추만 줄이 생겼다
   (2026-09-01 사용자: 「내려받기 버튼에 밑줄이 왜 그어져있는거야?」) */
/* ▲▼ 배치 순서 (관리자·서류) — 값을 집는 단추(.vcp)보다 조용하다. 하는 일이 다르다 */
.vsort{display:inline-flex;flex-direction:column;gap:1px;flex:none}
.vsb{border:1px solid var(--line);background:var(--panel2);color:var(--ink-faint);
  border-radius:6px;width:24px;height:15px;padding:0;font-size:9px;line-height:1;cursor:pointer}
.vsb:hover:not(:disabled){border-color:var(--dev);color:var(--dev)}
.vsb:disabled{opacity:.3;cursor:default}
.vcp{text-decoration:none;font-family:inherit;cursor:pointer;
  border:1.5px solid var(--line);background:var(--panel2);border-radius:9px;padding:5px 11px;
  font-size:12.5px;font-weight:800;color:var(--ink-soft);white-space:nowrap;flex:none}
.vcp:hover{border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 7%,var(--panel))}
.vcp.key{border-color:color-mix(in srgb,var(--dev) 40%,var(--line));color:var(--dev)}
.vcp.done{border-color:var(--won);color:var(--won);
  background:color-mix(in srgb,var(--won) 10%,var(--panel))}
.vmore{border:1.5px solid transparent;background:none;border-radius:9px;padding:4px 8px;
  font-size:14px;color:var(--ink-faint);font-weight:800;line-height:1;flex:none}
.vmore:hover{border-color:var(--line);color:var(--ink)}
.vrow.open{border-color:var(--dev);border-bottom-left-radius:0;border-bottom-right-radius:0;
  margin-bottom:0}
.vrow.open .vmore{color:var(--dev)}
/* 펼침 — 비밀번호·복구정보·손질은 **여기에만** 있다. 목록 줄은 조용해진다 */
.vdet{border:1px solid var(--dev);border-top:0;border-radius:0 0 11px 11px;background:var(--panel2);
  padding:11px 14px 12px;margin-bottom:6px;display:grid;gap:9px;
  animation:kVdet var(--t-mid) var(--ease)}
@keyframes kVdet{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.vdet .dl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vdet .dsec{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
  font-weight:800}
.vdet .mini{padding:4px 9px;font-size:12.5px}
/* 🔍 찾은 글자를 짚어 준다 — 아이디로 찾는 사람이 눈으로 확인할 자리 */
.vhit{background:color-mix(in srgb,var(--warn) 26%,transparent);border-radius:3px;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 30%,transparent)}
/* 🔒 못 여는 분류 — 목록 **안** 제 순서 자리에 선다. 스크롤 맨 아래 배지는 못 본다 */
.vrow.lock{background:var(--panel2);border-style:dashed;
  grid-template-columns:minmax(0,1fr) auto}
.vrow.lock .vw b{color:var(--ink-faint)}
.vlink{margin-left:8px;font-size:12px}
.vmemo{font-size:12px;color:var(--ink-faint);margin-top:2px}
.vfield{display:flex;align-items:center;gap:5px;font-size:12.5px;flex:none;
  border:1px solid var(--line2);border-radius:8px;padding:3px 8px;background:var(--panel2);
  font-variant-numeric:tabular-nums}
.vfield i{font-style:normal;font-size:10.5px;font-weight:800;color:var(--ink-faint)}
.vcopy{border:0;background:none;cursor:pointer;font-size:12px;padding:0 2px;opacity:.7}
.vcopy:hover{opacity:1}
.vby{font-size:11.5px;color:var(--ink-faint);flex:none}
/* .ckx 를 새 자리에 쓰면 켜 주는 규칙을 반드시 함께 둔다 — 네 번째 자리 */
.vrow .ckx{opacity:.5;flex:none}
.vrow:hover .ckx{opacity:1}
.vrow .ckx:hover{color:var(--red)}
@media (hover:none){ .vrow .ckx{opacity:.75} }
/* 좁아지면 **집기 칸만** 아래로 — 이름과 상태는 한 줄에 남는다 */
@media (max-width:720px){
  .vrow{grid-template-columns:minmax(0,1fr) auto}
  .vrow .vgrab{grid-column:1 / -1;justify-content:flex-start}
  .vrow.lock{grid-template-columns:minmax(0,1fr) auto}
}

/* 회의 참석자 칩 속 아바타 (2026-08-19) — .oa 는 오피스용 크기라 핀(pill) 밖으로 튀었다.
   칩 안에서는 칩 글자에 맞춘 작은 원으로. */
.ivp .oa{width:16px;height:16px;font-size:9.5px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;background:color-mix(in srgb,var(--oc) 18%,var(--panel));color:var(--oc);
  border:1px solid color-mix(in srgb,var(--oc) 45%,var(--line));flex:none;opacity:1;margin:0}
.ivp .oa i{display:none}

/* @ 자동완성 (2026-08-19) */
.atpop{position:fixed;z-index:96;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow);padding:5px;display:grid;gap:2px;
  min-width:170px;max-height:230px;overflow-y:auto}
.atpop button{border:0;background:none;text-align:left;font-family:inherit;font-size:13px;
  font-weight:700;color:var(--ink-soft);border-radius:7px;padding:5px 9px;cursor:pointer;
  display:flex;align-items:center;gap:7px}
.atpop button i{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-faint)}
.atpop button.on,.atpop button:hover{background:var(--panel2);color:var(--ink)}

/* 💬 떠 있는 채팅 버튼 + 버튼에서 피어나는 창 (2026-08-19) */
/* 파란 원은 유치하다는 지적(2026-08-19) — 판과 같은 면에 선 하나, 안에는 단색 말풍선. */
/* 🔔 알림 내역 버튼 (2026-08-22 사용자) — 우측 **위** 고정. 채팅 FAB 과 달리 안 움직인다:
   늘 같은 자리에 있어야 「저기 가면 알림이 있다」가 손에 익는다(그래서 grab 커서도 없다). */
/* z-index 40 — **떠 있는 판들보다 아래**. 89 로 두었더니 카드 시트(84)·모달(86·87)의
   우측 위 ✕ 를 통째로 가렸다 (2026-08-22 사용자). 이 버튼은 화면을 볼 때 쓰는 것이지
   판을 볼 때 쓰는 것이 아니므로, 판이 뜨면 뒤로 물러나는 것이 맞다. */
.ntfab{position:fixed;right:22px;top:calc(var(--topbars,0px) + 18px);z-index:40;
  width:42px;height:42px;border-radius:50%;font-size:19px;line-height:1;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;
  box-shadow:0 4px 16px rgba(16,24,40,.16);display:grid;place-items:center;user-select:none}
.ntfab:hover{border-color:var(--ink-faint)}
.ntfab .bdg{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;border-radius:99px;padding:1px 6px;min-width:18px;text-align:center;
  box-shadow:0 0 0 2px var(--panel)}
.ntfab .bdg.hide{display:none}
/* 다섯 이상 쌓였다 = 놓치고 있다 — 맥동으로 한 번 더 말한다 */
.ntfab.loud{border-color:var(--red);animation:ntpulse 1.6s ease-in-out infinite}
@keyframes ntpulse{
  0%,100%{box-shadow:0 4px 16px rgba(16,24,40,.16),0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent)}
  50%{box-shadow:0 4px 16px rgba(16,24,40,.16),0 0 0 7px color-mix(in srgb,var(--red) 0%,transparent)}
}
@media (max-width:860px){ .ntfab{right:12px;top:calc(var(--topbars,0px) + env(safe-area-inset-top,0px) + 12px)} }
/* 안 본 알림 — 목록에서 한눈에 갈린다 */
.ntrow.unread{background:color-mix(in srgb,var(--dev) 7%,transparent)}
.ntrow.unread .tx b{color:var(--ink)}
.ntnew{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;margin-top:7px}

.chatfab{position:fixed;right:22px;bottom:22px;z-index:89;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:grab;
  box-shadow:0 4px 16px rgba(16,24,40,.16);display:grid;place-items:center;touch-action:none;user-select:none}
.chatfab:hover{border-color:var(--ink-faint)}
.chatfab svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.8;pointer-events:none}
.chatfab:active{cursor:grabbing}
/* 배지 모양은 .nav .bdg 에 묶여 있어 버튼 위에서는 맨몸이었다 — 여기서 직접 입힌다 */
.chatfab .bdg{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;border-radius:99px;padding:1px 6px;min-width:18px;text-align:center;
  border:2px solid var(--bg);font-family:var(--mono)}
.chatfab .bdg.at{background:var(--warn)}
/* 💬 버튼 위 말풍선 — 쌓인다 (2026-08-19). 새것이 버튼 곁, 옛것은 밀리며 흐려진다 */
.chatbubs{position:fixed;z-index:90;display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none}
.chatbub{pointer-events:auto;position:relative;max-width:260px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;padding:9px 12px;cursor:pointer;
  box-shadow:0 10px 30px rgba(16,24,40,.22);
  transition:transform .24s cubic-bezier(.2,.9,.3,1.1),opacity .24s}
.chatbub.in{opacity:0 !important;transform:translateY(8px) scale(.95)}
.chatbubs.below .chatbub.in{transform:translateY(-8px) scale(.95)}
/* 걷힐 때 — 쌓이는 방향으로 떠오르며 사라진다 */
.chatbub.out{opacity:0 !important;transform:translateY(-14px)}
.chatbubs.below .chatbub.out{transform:translateY(14px)}
.chatbub b{display:block;font-size:12.5px;margin-bottom:1px}
.chatbub span{font-size:12.5px;color:var(--ink-soft);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 꼬리는 버튼에 붙은 한 장에만 — 전부 달면 빗살이 된다 */
.chatbubs:not(.below) .chatbub:last-child::after,
.chatbubs.below .chatbub:first-child::after{content:'';position:absolute;right:18px;width:10px;height:10px;
  background:var(--panel);transform:rotate(45deg)}
.chatbubs:not(.below) .chatbub:last-child::after{bottom:-6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.chatbubs.below .chatbub:first-child::after{top:-6px;border-left:1px solid var(--line);border-top:1px solid var(--line)}

/* 창 — 화면(view)이 아니라 버튼에서 자라나는 떠 있는 판 */
#v-chat.float{display:flex !important;position:fixed;z-index:88;background:var(--bg);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 60px rgba(16,24,40,.30);
  overflow:hidden;opacity:0;transform:scale(.06);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.12),opacity .16s ease}
#v-chat.float.open{opacity:1;transform:scale(1)}
#v-chat.float #chatClose{display:inline-block}
#chatClose{display:none}
/* 창 안에서는 화면용 머리글(CHAT 채팅)이 자리만 차지한다 — 창 자체가 이미 채팅이다 */
#v-chat.float .shead{display:none}
#v-chat.float .office, #v-chat.float{padding:0}
#v-chat.float .chat{padding:14px}
#v-chat.float .chat.nothread{grid-template-columns:200px minmax(0,1fr)}
#v-chat.float .chat{grid-template-columns:200px minmax(0,1fr) 264px;column-gap:10px}
@media (max-width:860px){
  /* ── 모바일 채팅 전면 개편 (2026-08-21 사용자 확정) ──
     · 플로팅 버튼은 없다 — 문은 탭바 가운데 「채팅」 하나다 (말풍선도 버튼 따라 걷는다)
     · 창은 탭바 가운데에서 **위로 펼쳐지고**, 탭바를 제외한 화면 전부를 채운다
     · 안은 메신저 문법 두 화면: 채널 목록 ↔ 대화(.mconv). 칩줄(chchips)은 은퇴 */
  .chatfab, .chatbubs{display:none !important}
  #v-chat.float{left:0 !important;top:0 !important;width:100vw !important;
    height:calc(var(--vh100) - var(--tabh)) !important;
    border-radius:0;border:0;transform-origin:50% 100% !important}
  #v-chat.float .chchips{display:none}
  /* 데스크톱 float 의 200px 열 규칙(#v-chat.float .chat…)이 id 특이도로 모바일 1열을
     이긴다 — 같은 특이도로 여기서 도로 눌러야 한 열이 된다 */
  #v-chat.float .chat, #v-chat.float .chat.nothread{grid-template-columns:1fr}
  #v-chat.float .chat .ch-list{display:flex;border-radius:0;border:0;min-height:0}
  #v-chat.float .chat:not(.mconv) .cmain{display:none}
  #v-chat.float .chat.mconv .ch-list{display:none}
  .chat.mconv .chback{display:inline-flex;align-items:center;justify-content:center;
    font-size:22px;line-height:1;margin-right:2px}
  /* 목록 화면에서는 ✕ 도 필요 없다 — 탭바가 늘 보이니 다른 탭이 곧 닫기다 */
  #v-chat.float .chat:not(.mconv) #chatClose{display:none}
  /* 대화 머리 — 한 줄로 못 박는다 (2026-08-21 사용자 스크린샷: ‹·이름·주제보기가
     두 줄로 갈라져 우측 정렬로 깨졌다). [‹][이름][읽음 n] ── [📦 공유함].
     주제 보기는 걷었다 — 좁은 화면에서 주제는 매번 볼 것이 아니다 */
  /* [‹][이름] ──sp── [📦 공유함][⋮]. 주제·읽음은 좁은 화면에서 걷는다(읽음 확인은 ⋮ 안) */
  #v-chat.float .chhead{flex-wrap:nowrap;align-items:center;gap:8px;padding:10px 12px;cursor:default}
  #v-chat.float .chhead .topic, #v-chat.float .chhead #chMem{display:none !important}
  #v-chat.float .chhead h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 창이 떠 있는 동안 뒤(문서)는 안 움직인다 — 스크롤은 채팅 안의 몫 (2026-08-21 사용자).
     overscroll-behavior 는 목록 끝에서 스크롤이 문서로 번지는 것(체이닝)까지 끊는다 */
  /* 뒤 화면이 안 움직인다 — 채팅·캘린더가 같은 잠금을 쓴다 (2026-08-22 사용자) */
  body.chatlock, body.modallock{overflow:hidden}
  /* 탭바는 **판보다 위**다 (2026-08-22 사용자 「간헐적으로 네비바가 안 눌린다」).
     원인은 간헐이 아니라 판이었다: 카드 시트(84)·모달(86)·캘린더(87)·뷰어(88)가
     전면을 덮으면 그 아래 탭바(72)는 눌러도 판이 먹는다. 폰에서 「다른 화면으로
     간다」는 길은 늘 손에 닿아야 하고, 탭을 누르면 떠 있던 판은 닫힌다(app.js).
     막아야 하는 판(출근 게이트 95·PWA 96·나가기 97)은 그대로 위에 남는다. */
  .tabbar{z-index:90}
  #calBox .gmbox{overscroll-behavior:contain}
  #v-chat.float .msgs, #v-chat.float .chscroll{overscroll-behavior:contain}
}
.chback{display:none}

/* ⌘K 카드 결과 (2026-08-20) */
.palrow.palcard .pcic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:var(--panel2);font-size:15px;flex:none}

/* ═══════════ 📅 일정 (2026-08-20) — 전부 cal 접두사. 전역 한 파일이라 짧은 이름은
   남의 규칙에 걸린다(파일함 fx* 와 같은 판단) ═══════════ */


/* 오피스 「이번 주」 스트립 */
.calstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
/* 🏖️ 공휴일 — 쉬는 날은 **날짜 자체가** 달라 보인다. 일정 조각으로 얹으면
   「그날 잡힌 일」과 섞여서 「그날은 쉰다」가 안 읽힌다 */
.calhc.hol b, .calmday.hol .dn{color:var(--red)}
.calhc.hol{background:color-mix(in srgb,var(--red) 7%,transparent)}
.calmday.hol{background:color-mix(in srgb,var(--red) 6%,transparent)}
/* 🎂 기념일 칩 — 공휴일 이름과 달리 **눌리는 값이 아니라 장식**이다. 귀엽게, 작게 */
.annn{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:800;
  font-style:normal;padding:0 5px;border-radius:6px;line-height:1.5;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:color-mix(in srgb,var(--dsgn) 12%,transparent);color:var(--dsgn)}
.annn.k-founding{background:color-mix(in srgb,var(--dev) 12%,transparent);color:var(--dev)}
.annn.k-fun{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}
.calmday .annn{display:block;margin-top:1px}
.holn{display:block;font-size:10.5px;font-weight:800;color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal;line-height:1.3}
.calsday{border:1px solid var(--line2);background:var(--panel2);border-radius:9px;
  padding:6px 2px 7px;text-align:center;min-height:58px;display:block;width:100%}
.calsday .d{font-size:11px;color:var(--ink-faint);display:block}
.calsday b{font-size:13.5px}
.calsday.today{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.calsday.today b{color:var(--dev)}
.calsday.dim{opacity:.45}
.calsday .dots{display:flex;gap:3px;justify-content:center;margin-top:5px;min-height:5px}
.calsday .dots i{width:5px;height:5px;border-radius:50%;display:block}

.caltd{display:flex;align-items:baseline;gap:7px;font-size:13.5px;padding:3px 2px;min-width:0}
.caltd .tk{flex:none}
.caltd b{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.caltd .ad{color:var(--ink-faint);font-size:12.5px;flex:none}

/* 일정 창 머리 — 주간·월간 전환에 판 크기가 출렁이지 않게 **높이를 고정**하고
   속(calBody)만 스크롤한다 (2026-08-21 사용자). 짧은 쪽은 아래가 비고, 긴 쪽은 안에서 민다 */
.calgm{width:min(1160px,100%);height:min(720px,calc(var(--vh100) - 48px));
  display:flex;flex-direction:column;overflow-y:hidden}
#calBody{flex:1;min-height:0;overflow-y:auto}
/* 📅 캘린더는 위에 붙이지 않고 **레일 제외 화면 가운데** (2026-08-21 사용자 확정) */
#calBox{align-items:center}

/* 🕺 /위블위블위블 재생 중 — **알약만** 출렁이고 🔊 가 리듬을 탄다 (2안+속도업).
   .txt 에 걸었더니 말풍선이 줄 전체 폭이라 테두리가 한 줄을 통째로 둘렀다
   (2026-08-22 사용자 스크린샷) — 움직여야 할 것은 그 알약 하나다. */
.msg.wiggling .wigmsg{animation:wigpulse .38s ease-in-out infinite alternate}
@keyframes wigpulse{
  from{box-shadow:0 0 0 0 color-mix(in srgb,var(--dev) 50%,transparent);transform:translateY(0)}
  to{box-shadow:0 0 0 8px color-mix(in srgb,var(--dev) 0%,transparent);transform:translateY(-2px)}
}
.wigbadge{display:inline-block;margin-right:5px;cursor:pointer;
  animation:wigbop .19s ease-in-out infinite alternate}
@keyframes wigbop{from{transform:scale(1) rotate(-10deg)}to{transform:scale(1.3) rotate(10deg)}}
/* 4안 곁들임 — 재생 동안 채팅 버튼이 춤춘다 (드래그 transform 과 충돌 않게 자식이 춘다) */
.chatfab.dancing svg,.chatfab.dancing span{display:inline-block;animation:fabdance .3s ease-in-out infinite alternate}
@keyframes fabdance{from{transform:rotate(-12deg) translateY(1px)}to{transform:rotate(12deg) translateY(-2px)}}
.chatfab.dancing{box-shadow:0 0 0 5px color-mix(in srgb,var(--dev) 25%,transparent)}
/* 🏠 /러브하우스 (2026-08-22) — 위글이 「신나서 출렁」이라면 이쪽은 「감동의 순간」이다.
   빠른 맥동 대신 **천천히 번지는 따뜻한 빛**, ✨ 는 반짝인다. 색은 --won(따뜻한 쪽) */
.msg.loving .wigmsg{animation:lovglow 2.2s ease-in-out infinite}
@keyframes lovglow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--won) 40%,transparent)}
  50%{box-shadow:0 0 18px 4px color-mix(in srgb,var(--won) 30%,transparent)}
}
.wigbadge.love{animation:lovtwinkle 1.1s ease-in-out infinite alternate}
@keyframes lovtwinkle{from{transform:scale(.9);opacity:.6}to{transform:scale(1.25);opacity:1}}
/* 채팅 버튼도 같이 — 춤 대신 은은한 후광 */
.chatfab.glowing{box-shadow:0 0 0 6px color-mix(in srgb,var(--won) 22%,transparent);
  animation:lovglow 2.2s ease-in-out infinite}
.wigmsg.love{background:color-mix(in srgb,var(--won) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--won) 38%,transparent);color:var(--won)}
.wigmsg.love:hover{background:color-mix(in srgb,var(--won) 20%,var(--panel))}

/* 끝난 뒤의 흔적 — 일반 채팅과 다른 알약, 누르면 다시 재생 */
.wigmsg{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--dev) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--dev) 35%,transparent);color:var(--dev);
  border-radius:99px;padding:3px 12px;font-weight:800;cursor:pointer;user-select:none}
.wigmsg:hover{background:color-mix(in srgb,var(--dev) 20%,var(--panel))}
/* 😮 /와우 — 알약 **위에서** 도는 영상 (2026-08-27).
   폭을 묶지 않으면 원본(720p)이 창을 넓힐수록 따라 커진다. 260px 은 채팅 미리보기
   (.chatbub)와 같은 폭이다. 재생바(controls)는 안 붙인다 — 이 크기에선 영상 절반을
   덮는다(멈춤은 알약이 한다). 맥동하는 옷도 없다: 여기선 영상 자체가 재생 표시다.

   끝나면 **접힌다** — 높이가 줄면서 알약이 그 자리로 올라온다. max-height 를 쓰는 것은
   영상 높이가 원본 비율로 정해져 숫자를 미리 못 박아 두기 때문이다(400px 은 넉넉한 천장). */
.eggvid{display:block;margin:2px 0 6px;width:100%;max-width:260px;
  border-radius:10px;background:#000;max-height:400px;opacity:1;
  transition:max-height .26s ease,opacity .18s ease,margin .26s ease}
.eggvid.gone{max-height:0;opacity:0;margin:0}
/* 📊 순위표 — 키워드 옆 네이버 검색결과 바로가기 (2026-08-21 사용자).
   흐림 없음 — hover 에만 진해지는 문법은 터치 기기에서 영영 흐리다 (.ckx 의 교훈) */
/* 📣 광고리서치 노출 분류 고르개 (2026-08-22) */
/* 🔐 금고 갈래 세그 (3.60.0) — 계정 · 계좌·카드 · 서류 · 내 문서.
   옷은 앱의 세그 문법 그대로. 못 여는 갈래도 이름은 선다(🔒) — 있는 줄 알아야 요청한다 */
.vlanes{display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;
  margin-bottom:10px;background:var(--panel)}
.vlanes button{border:0;background:var(--panel);padding:6px 13px;font-size:13px;font-weight:700;
  color:var(--ink-soft);border-right:1px solid var(--line);display:inline-flex;align-items:center;gap:5px}
.vlanes button:last-child{border-right:0}
.vlanes button.on{background:var(--ink);color:var(--panel)}
.vlanes button:not(.on):hover{color:var(--dev)}
.vlanes .lk{font-size:10px;opacity:.75}
/* 갈래마다 몇 건인지 — 눌러 보지 않고도 금고의 크기를 안다 (3.63.0) */
.vlanes .n{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--ink-faint)}
.vlanes button.on .n{color:color-mix(in srgb,var(--panel) 72%,var(--ink))}
/* 갈래째 잠긴 판 — 판 안의 한 줄. 확인창 옷 규칙대로 색은 변수만 */
.vnone{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--ink-faint)}
/* 📎 붙은 파일 — 이름만. 실물 주소는 화면에 안 나온다(전용 경로로만 받는다) */
.vfile{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--dev);background:var(--panel2);border:1px solid var(--line2);
  border-radius:8px;padding:2px 9px;max-width:280px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* 👤 내 문서의 주인 — 퇴사한 사람은 이름만 남는다(문서는 남아야 한다) */
.owntag{font-size:11px;font-weight:800;padding:1px 8px;border-radius:99px;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink-soft)}
.owntag[data-left]{border-style:dashed;color:var(--ink-faint)}
/* 🔑 앱이 쓰는 키 — 이 배지가 붙은 계정은 삭제·이동이 막힌다 */
.vtag.slot{border-color:var(--prod);color:var(--prod)}
/* 🔑 API 키 자리 — 아직 안 채운 자리는 눈에 띄어야 한다(넣는 문이 보여야 채워진다) */
.vtag.warn{border-color:var(--warn);color:var(--warn)}
/* 🗂️ 분류 관리의 「지금 누가 보나」 — 설명이 아니라 지금의 사실이다.
   빈 명단이 「아무도 못 본다」로 읽히던 것을 이 줄이 막는다 (2026-09-01 사용자) */
.vcmnow{font-size:11.5px;font-weight:800;color:var(--ink-soft);background:var(--panel2);
  border:1px solid var(--line2);border-radius:99px;padding:2px 10px;margin-right:2px}
.vcmnow.all{color:var(--warn);border-color:var(--warn)}


/*
 * ✍️ 🔐 금고의 입력 폼 (3.63.0) — 네 창(계정·계좌·문서·키)이 한 문법을 쓴다.
 *
 * 고친 것:
 *  · 아홉 칸이 한 번에 펼쳐져 **전부 필수로 읽혔다** → 필수만 세우고 나머지는 접는다.
 *  · 분류 select 의 「＋ 새 분류…」가 칸을 통째로 바꿔 **되돌아갈 길이 없었다** → 칩으로.
 *  · 금고인데 **새 비밀번호를 만들 수단이 없었다** → 🎲.
 *  · 검증이 토스트 한 줄이라 **어느 칸인지** 안 짚어 줬다 → 칸에 빨간 줄.
 *  · 계좌인데 CVC 칸이 서 있었다 → 종류를 고르면 칸이 바뀐다.
 *
 * 판(.mmbox)은 배경색, 내용(.fmsec)은 흰 박스 — 확인창 옷 규칙 그대로. 색은 변수만 쓴다.
 */
.mmbox .fmsec{background:var(--panel);border:1px solid var(--line2);border-radius:13px;
  padding:12px 14px;display:grid;gap:11px;margin-top:9px}
.fmr{display:grid;gap:5px;min-width:0}
.fmr2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fml{font-size:12px;font-weight:800;color:var(--ink-faint);display:flex;align-items:center;gap:5px}
.fml i{font-style:normal;color:var(--red);font-weight:800}
.mmbox .fmr .fld{width:100%}
.fmr.bad .fld{border-color:var(--red);background:color-mix(in srgb,var(--red) 6%,var(--panel2))}
.fmerr{font-size:12px;font-weight:700;color:var(--red)}
/* 곁단추는 입력칸과 **같은 높이**로 선다 (2026-09-02 사용자: 「버튼 사이즈가 입력창하고
   안 맞아서 이상해 보여」). 원인이 둘이었다: 단추의 padding 이 훨씬 작았고, 입력칸만
   margin-bottom:9px 을 달고 있어 가운데 정렬이 그만큼 어긋났다.
   stretch 로 높이를 맞추고, 아래 여백은 줄(.fmsecret)이 대신 든다 */
.fmsecret{display:flex;gap:6px;align-items:stretch;margin-bottom:9px}
.fmsecret .fld{flex:1;font-family:var(--mono);margin-bottom:0}
.fmsecret .fmbtn{padding:0 13px;font-size:15px;border-radius:11px}
.fmbtn{border:1.5px solid var(--line);background:var(--panel2);border-radius:9px;padding:6px 10px;
  font-size:12.5px;font-weight:800;color:var(--ink-soft);white-space:nowrap;flex:none}
.fmbtn:hover{border-color:var(--dev);color:var(--dev)}
.fmchips{display:flex;gap:6px;flex-wrap:wrap}
.fmchip{border:1.5px solid var(--line);background:var(--panel2);border-radius:99px;padding:4px 12px;
  font-size:13px;font-weight:800;color:var(--ink-soft)}
.fmchip:hover{border-color:var(--dev);color:var(--dev)}
.fmchip.on{border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 10%,var(--panel))}
.fmchip.new{border-style:dashed;color:var(--ink-faint)}
.fmchip:disabled{opacity:.4;cursor:not-allowed}
/* 고른 분류가 곧 경계다 — 고르는 그 자리에서 「누가 보게 되나」를 말한다 */
.fmwho{font-size:12px;font-weight:800;color:var(--acct)}
.fmwho.all{color:var(--warn)}
.fmwarn{font-size:12.5px;font-weight:700;color:var(--warn);line-height:1.5;
  background:color-mix(in srgb,var(--warn) 10%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));border-radius:10px;padding:8px 11px}
.fmmore{border:1.5px dashed var(--line);background:none;border-radius:12px;padding:9px 13px;
  font-size:13px;font-weight:800;color:var(--ink-faint);display:flex;align-items:center;gap:7px;
  width:100%;margin-top:9px}
.fmmore:hover{border-color:var(--dev);color:var(--dev)}
.fmmore .n{font-family:var(--mono);font-size:11.5px;margin-left:auto;font-weight:800}
.fmseg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;
  justify-self:start;align-self:start}
.fmseg button{border:0;background:var(--panel2);padding:6px 16px;font-size:13px;font-weight:800;
  color:var(--ink-soft);border-right:1.5px solid var(--line)}
.fmseg button:last-child{border-right:0}
.fmseg button.on{background:var(--dev);color:#fff}
.mmbox textarea.fld{min-height:62px}
@media (max-width:560px){ .fmr2{grid-template-columns:1fr} }

/* 🗂️ 분류 관리 (3.59.0) — 옛 .adcat* 자리를 이 창이 이어받는다.
   판은 .mmbox(배경) · 내용은 .rdcard(--panel) — 확인창 옷 규칙 그대로. 색은 변수만 쓴다. */
.vcmlist{max-height:min(56vh,420px);overflow-y:auto;padding:6px 10px}
.vcm{padding:9px 4px;border-bottom:1px solid var(--line2)}
.vcm:last-child{border-bottom:0}
.vcmhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vcmhd b{font-size:13.5px}
.vcmn{font-size:11.5px;color:var(--ink-faint);font-weight:700}
.vcmhd .sp{flex:1}
/* 켜짐은 테두리·글자색으로만 — 판을 통째로 칠하면 목록이 시끄러워진다 */
.vcmtog{font-size:12px;padding:3px 9px}
.vcmtog.on{border-color:var(--mkt);color:var(--mkt);
  background:color-mix(in srgb,var(--mkt) 8%,var(--panel))}
.vcmtog.lk.on{border-color:var(--acct);color:var(--acct);
  background:color-mix(in srgb,var(--acct) 8%,var(--panel))}
/* 🔑 열람 명단 — 사람 칩. 비면 「접근자 전부」라는 뜻이라 아무도 안 켜진 상태가 기본이다 */
.vcmwho{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.vchk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:99px;padding:2px 10px 2px 7px;font-size:12px;font-weight:700;background:var(--panel2)}
.vchk .bx{width:14px;height:14px;border-radius:4px;border:1px solid var(--line);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--panel)}
.vchk.on{border-color:var(--dev);color:var(--dev)}
.vchk.on .bx{background:var(--dev);border-color:var(--dev)}
/* 분류 머리글의 꼬리표 — 지금의 사실만(명단 수 · 노출 · 잠금) */
.vtag{font-family:var(--sans);letter-spacing:0;font-size:11px;font-weight:700;
  border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:5px;color:var(--ink-faint)}
.vtag.ad{border-color:var(--mkt);color:var(--mkt)}
.vtag.lk{border-color:var(--acct);color:var(--acct)}
/* 🔒 못 여는 분류 — 목록 맨 아래 한 줄. 이름과 개수만 온다(계정은 서버가 안 내려보낸다) */
.vlock i{font-style:normal;font-size:11px}

.adcatlist{max-height:min(50vh,360px);overflow-y:auto;padding:6px 10px}
.adcatrow{display:flex;align-items:center;gap:9px;padding:7px 4px;font-size:13.5px;cursor:pointer;
  border-bottom:1px solid var(--line2)}
.adcatrow:last-child{border-bottom:0}
.adcatrow input{accent-color:var(--dev)}
.adcatrow span{flex:1;min-width:0}
.adcatrow i{font-style:normal;font-size:11.5px;color:var(--ink-faint)}

/* 📝 키워드 메모 (2026-08-22) — 카드 코멘트처럼 한 건씩. 이름은 ar* (짧은 이름 금지) */
.armemobdg{font-size:11px;font-weight:800;border-radius:99px;padding:1px 7px;
  background:var(--panel2);color:var(--ink-faint);cursor:default}
.armemobdg.new{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.armemo{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.armemoh{font-size:12px;font-weight:800;color:var(--ink-soft);margin-bottom:6px}
.armemorow{padding:6px 8px;border-radius:8px;margin-bottom:4px;background:var(--panel2)}
/* 안 읽은 메모 — 왼쪽에 선 하나. 목록에서 「이게 새 것」이 한눈에 갈려야 한다 */
.armemorow.new{background:color-mix(in srgb,var(--red) 6%,var(--panel2));
  box-shadow:inset 3px 0 0 var(--red)}
.armemometa{display:flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--ink-faint)}
.armemometa b{font-weight:800;color:var(--ink-soft)}
.armemometa i{font-style:normal}
.armemodel{margin-left:auto;opacity:0}
.armemorow:hover .armemodel{opacity:1}
.armemotext{font-size:13px;line-height:1.6;margin-top:2px;word-break:break-word}
.armemoadd{display:flex;gap:6px;align-items:flex-end;margin-top:8px}
.armemoadd textarea{flex:1;min-height:44px;resize:vertical;border:1.5px solid var(--line);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;
  background:var(--panel);color:var(--ink);outline:none}
.armemoadd textarea:focus{border-color:var(--dev)}

.arnav{display:inline-block;font-size:12px;text-decoration:none;
  padding:0 2px;border-radius:5px;vertical-align:1px}
.arnav:hover{background:var(--panel2)}

/* 원고 저장소 행 삭제 2단 확인 */
.armdel2{color:var(--red)!important;font-weight:800;white-space:nowrap}
/* 보관함 비밀번호 칸 + 🔍 잠깐 보기 */
.vfsec{display:flex;align-items:center;gap:5px}
.vfsec .fld{flex:1;min-width:0}
.vfsec .vcopy{flex:none}
/* 🔔 종 팝업 아래 버튼 둘 — 같은 폭, 가운데 정렬 (2026-08-21 사용자 확정) */
/* 색을 명시한다 — 팝업이 레일 안이라 .mini 가 레일용(어두운 배경용) 글자색을 상속해
   흰 판 위에서 물빠져 보였다 (2026-08-21 사용자 보고) */
#bellPop .mini{display:block;width:100%;text-align:center;color:var(--ink)}

/* ⬇ 새 메시지로 돌아가기 — 위를 읽는 중에 새 글이 오면 뜬다 (2026-08-21 사용자).
   읽던 자리를 밀지 않고 길만 놓는다. 옷은 .wigmsg 알약과 같은 문법 */
.cmain{position:relative}
/* 🫥 스포 가림 — `||가릴 말||` (2026-08-31 사용자). 자리는 그대로 두고 글자만 덮는다:
   가린 곳이 줄어들면 문단이 들썩이고 「뭔가 있다」가 아니라 「뭔가 사라졌다」가 된다.
   색을 칠하지 않고 글자와 같은 색 판을 덮는 이유 — 열었을 때 아무것도 안 움직인다 */
.spo{background:var(--ink-soft);color:transparent;border-radius:5px;padding:0 3px;
  cursor:pointer;user-select:none;transition:background .14s}   /* 색은 전환하지 않는다 — 가린 말은 **즉시** 열려야 한다 */
.spo:hover{background:var(--ink)}
.spo:focus-visible{outline:2px solid var(--dev);outline-offset:1px}
.spo *{visibility:hidden}
.spo.on{background:color-mix(in srgb,var(--ink-soft) 12%,transparent);color:inherit;
  cursor:auto;user-select:auto}
.spo.on *{visibility:visible}
/* 스레드 안의 도구줄 — 내 글 도구만 서므로 왼쪽 묶음이 없다. 오른쪽에 붙인다 */
.thread .hover.thr{left:auto;right:8px}
/* 🟢 켜 둔 로그인 표시 — 화면 위에 늘 떠 있다 (2026-09-02 사용자).
   왼쪽 아래: 채팅의 알약(.msgjump, 가운데 아래)과 자리를 겹치지 않게 */
.usepill{position:fixed;left:16px;bottom:16px;z-index:60;display:inline-flex;
  align-items:center;gap:7px;padding:8px 10px 8px 13px;border-radius:99px;
  font-size:12.5px;font-weight:700;color:var(--won);box-shadow:var(--shadow);
  white-space:nowrap;max-width:calc(100vw - 32px);
  border:1px solid color-mix(in srgb,var(--won) 35%,transparent);
  background:color-mix(in srgb,var(--won) 12%,var(--panel))}
.usepill .dot{width:8px;height:8px;border-radius:50%;background:var(--won);flex:none;
  animation:upPulse 2.4s ease-in-out infinite}
@keyframes upPulse{50%{opacity:.35}}
/* 오래 켜 두면 색이 짙어진다 — 숫자로 들이밀지 않고 눈에만 말한다 */
.usepill.old{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 14%,var(--panel))}
.usepill.old .dot{background:var(--warn)}
.upoff{border:1px solid currentColor;background:none;color:inherit;border-radius:99px;
  padding:2px 10px;font-size:11.5px;font-weight:800;cursor:pointer;font-family:inherit}
.upoff:hover{background:color-mix(in srgb,currentColor 15%,transparent)}
/* 폰에서는 아래 탭바를 피한다 */
@media (max-width:860px){ .usepill{bottom:74px} }
.msgjump{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:5;
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid color-mix(in srgb,var(--dev) 35%,transparent);
  background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev);
  border-radius:99px;padding:6px 14px;font-weight:800;font-size:12.5px;
  box-shadow:var(--shadow);cursor:pointer;white-space:nowrap}
.msgjump:hover{background:color-mix(in srgb,var(--dev) 20%,var(--panel))}
/* 💬 스레드 알약은 **위**에 선다 — 새 글은 아래에서 오고 스레드는 위에 접혀 있다.
   색도 갈라 둔다: 둘이 같은 색이면 어느 쪽이 울린 건지 눈으로 안 갈린다 */
.msgjump.thr{bottom:auto;top:12px;border-color:color-mix(in srgb,var(--prod) 40%,var(--line));
  color:var(--prod);background:color-mix(in srgb,var(--prod) 10%,var(--panel))}
.msgjump.thr:hover{background:color-mix(in srgb,var(--prod) 20%,var(--panel))}
.calhead{gap:10px;flex-wrap:wrap}
/* ◀▶(.mini)·주|월·🔗 는 오른쪽 한 덩어리 — 오피스 임베드 머리줄과 같은 차림 (3.42.1) */
.calnav{display:flex;gap:8px;margin-left:auto}
.calrange{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
/* 주간/월간 — 시스템 사람 목록의 .segbtn 알약 그대로. 머리줄에 앉으므로 아래 여백만 끈다 */
.calsegbar{margin-bottom:0}
/* 🔗 은 임베드와 같은 .okrbtn — 그 옷의 margin-left:auto 는 여기선 덩어리를 찢으므로 끈다 */
.calhead .okrbtn{margin-left:0}
/* 주간·월간·구글연동·✕ 는 **한 덩어리로 오른쪽에** 붙는다 (2026-08-27 사용자).
   예전엔 ✕ 에도 margin-left:auto 가 있어 구글 단추와 ✕ 사이가 화면만큼 벌어졌다 —
   같이 쓰는 것들이 흩어져 있으면 손이 두 번 움직인다. 간격만 조금 준다 */
.calhead .mmx{margin-left:2px}

/* 필터 칩 — 파트 색 칩과 같은 문법 */
.calfilters{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
.calfchip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;background:var(--panel2)}
.calfchip i{width:8px;height:8px;border-radius:50%;display:block}
.calfchip.off{opacity:.4;text-decoration:line-through}
.calfchip.calmine{margin-left:auto;background:var(--panel)}
.calfchip.calmine.pick{border-color:var(--dev);color:var(--dev)}

/* 주간 — 위 종일 띠(한 구역 + 자동 레인), 아래 시간축 스크롤 판. 모바일은 가로 스크롤 */
.calwrap{overflow-x:auto}
/* 열은 **minmax(0,·)** 다 (2026-08-31 사용자: 「폭이 살짝씩 늘었다 줄었다」).
   `1fr` 은 사실 `minmax(auto,1fr)` 이라 **칸 안 내용의 최소 폭이 열을 밀어낸다.**
   날짜 머리에 쉬는 날 이름(3.54.0)과 기념일(3.55.0)을 줄바꿈 없이 넣으면서 이게 터졌다 —
   「💯 개발시드 입사 100일」이 있는 주는 그 요일만 127px 로 부풀고 나머지 여섯 칸이
   88.3 → 81.1 로 줄었다. 주를 넘길 때마다 요일 칸이 들썩인 원인이다.
   0 을 밑바닥으로 못 박아야 칸이 언제나 같은 폭으로 선다 — 긴 이름은 … 로 접힌다. */
.calwgrid{display:grid;grid-template-columns:46px repeat(5,minmax(0,1fr)) minmax(0,.7fr) minmax(0,.7fr);
  min-width:620px;font-size:12px}
.calhc{padding:6px 4px;text-align:center;border-bottom:1px solid var(--line);
  border-left:1px solid var(--line2);min-width:0}
.calhc .dw{color:var(--ink-faint);font-size:11px;display:block}
.calhc b{font-size:14px}
.calhc.today{background:color-mix(in srgb,var(--dev) 6%,transparent)}
.calhc.today b{color:var(--dev)}
.calhc.past{opacity:.45}
/* 종일 띠 — 🌴/🚩/📌 세 줄 고정을 걷고 「종일」 한 구역 (3.42.0 목업 v3).
   레인(--lanes, weekHTML 이 계산)은 20px 고정 — 어느 요일에서 봐도 같은 물건이
   같은 줄에 있어 줄이 맞고, 빈 주는 한 줄 높이로 준다 */
.calbl{font-size:11px;color:var(--ink-faint);text-align:right;padding-right:6px;
  display:grid;align-content:center;border-bottom:1px solid var(--line)}
.calbd{border-left:1px solid var(--line2);border-bottom:1px solid var(--line);
  padding:3px 3px 4px;display:grid;gap:3px;align-content:start;min-width:0;
  grid-template-rows:repeat(var(--lanes,1),20px)}
.calbd.today{background:color-mix(in srgb,var(--dev) 6%,transparent)}
.calbd.past{opacity:.45}
.calbar{border-radius:6px;font-size:11px;font-weight:700;padding:1px 7px;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  background:color-mix(in srgb,var(--bc,var(--won)) 14%,var(--panel));
  color:var(--bc,var(--won));border:1px solid color-mix(in srgb,var(--bc,var(--won)) 30%,transparent)}
/* 스팬 — 칸 안쪽 여백(3px)을 음수 여백이 다리 놓아 이웃 칸과 이어져 보인다 */
.calbar.spanL{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;margin-right:-4px}
.calbar.spanM{border-radius:0;border-left:0;border-right:0;margin-left:-4px;margin-right:-4px}
.calbar.spanR{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;margin-left:-4px}
/* 시간축 스크롤 판 (3.42.0) — 06:30~24:00 을 그리고 보이는 창은 이 높이만큼(9시간 반,
   08:30~18:00 이 기본으로 보인다). 저녁 8·10시 일도 내려서 보고 잡는다. 임베드·전체 창
   한 벌(3.42.1). 기본 스크롤(08:30 꼭대기)·스크롤바 폭 보정은 schedule.js setPane 이 잡는다 */
.caltscroll{height:285px;min-width:620px;overflow-y:auto;overflow-x:hidden}
.caltscroll::-webkit-scrollbar{width:10px}
.caltscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.caltscroll::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}
.caltgrid{position:relative;display:grid;grid-template-columns:46px repeat(5,1fr) .7fr .7fr;
  min-width:620px}
.caltlab{position:relative}
.caltlab i{position:absolute;right:6px;font-family:var(--mono);font-size:10.5px;
  color:var(--ink-faint);transform:translateY(-6px);font-style:normal}
/* 판이 :30 에서 시작한다(weekHTML) — 정각 눈금을 반 칸 내려 그린다. 라벨은 눈금선에
   세로 중앙이라, 이 반 칸이 없으면 첫 라벨이 종일 띠 밑줄을 파고든다(옛 겹침의 수리) */
.caltcol{border-left:1px solid var(--line2);position:relative;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--hh) - 1px),var(--line2) calc(var(--hh) - 1px) var(--hh));
  background-position:0 calc(var(--hh)/2 + 1px)}
.caltcol.today{background-color:color-mix(in srgb,var(--dev) 6%,transparent)}
.caltcol.past{opacity:.45}
/* 시간축에서 고르는 중 — 놓을 자리가 30분 스냅으로 미리 선다 (v3) */
.caltsel{position:absolute;left:3px;right:3px;z-index:3;border-radius:8px;pointer-events:none;
  outline:2px dashed color-mix(in srgb,var(--dev) 55%,transparent);outline-offset:-2px;
  background:color-mix(in srgb,var(--dev) 10%,transparent);
  font-family:var(--mono);font-size:10.5px;font-weight:800;color:var(--dev);
  padding:2px 6px;overflow:hidden;white-space:nowrap}
.caltsel.bad{outline-color:color-mix(in srgb,var(--red) 45%,transparent);
  background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red)}
/* 회의 조각 — 30px 칸에 맞춘 한 줄(3.42.1 한 벌). 참석자는 title 툴팁이 말한다 */
.calev{position:absolute;left:3px;right:3px;border-radius:8px;padding:1px 7px;font-size:11.5px;
  line-height:1.35;overflow:hidden;border:1px solid color-mix(in srgb,var(--prod) 34%,transparent);
  background:color-mix(in srgb,var(--prod) 12%,var(--panel));z-index:1}
.calev b{display:block;font-size:11.5px;color:var(--prod);font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calev span{display:none}
.calev.live{border-color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--panel))}
.calev.live b{color:var(--red)}
.calnow{position:absolute;left:46px;right:0;height:0;border-top:2px solid var(--red);z-index:2}
.calnow::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}

/* 월간 — 훑는 용도. 칸을 누르면 그 주의 주간으로 내려간다 */
.calmgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:620px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.calmh{padding:5px 6px;font-size:11.5px;color:var(--ink-faint);font-weight:700;
  border-right:1px solid var(--line2);border-bottom:1px solid var(--line);text-align:center}
.calmh.sun{color:var(--red)}
/* 아래 여백은 **칩 한 줄 자리**다 (2026-08-29 사용자) — 칩이 3개 + 「+N」으로 꽉 찬 칸은
   남는 바닥이 6px 뿐이라 눌러서 잡을 수가 없었다. 주간 종일 띠의 빈 레인과 같은 뜻 */
.calmday{min-height:64px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:4px 4px 18px;display:grid;gap:3px;align-content:start;cursor:pointer;min-width:0}
.calmday:hover:not(.out){background:var(--panel2)}
.calmday.out{cursor:default}
.calmday .dn{font-size:12px;font-weight:800;padding-left:3px}
.calmday .dn.sun{color:var(--red)}
.calmday.today{background:color-mix(in srgb,var(--dev) 7%,transparent)}
.calmday.today .dn{color:var(--dev)}
.calmday.past .dn{color:var(--ink-faint);opacity:.5}
.calmchip{border-radius:5px;font-size:10.5px;font-weight:700;padding:0 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  background:color-mix(in srgb,var(--bc,var(--prod)) 13%,var(--panel));
  color:var(--bc,var(--prod))}
.calmchip i{font-family:var(--mono);font-size:9.5px;opacity:.8;font-style:normal}
.calmmore{font-size:10.5px;color:var(--ink-faint);padding-left:5px}
/* ✔️ 끝난 카드 — 과거를 열어 준 뒤(2026-09-01) 지난 달에 닫힌 일이 함께 선다.
   지우지 않고 **힘을 뺀다**: 그날 무엇을 했는지가 요청의 핵심이라 사라지면 안 된다 */
.calmchip.done,.calbar.done{opacity:.5}
.calmchip.done{text-decoration:line-through;text-decoration-thickness:1px}

/* 전체 창 — 그림은 임베드와 한 벌이되 **크기는 제 그릇대로** (2026-08-28 사용자:
   「모달창만큼 길이를 늘려주고 색을 맞춰줘」).
   · 색: 임베드는 흰 판(.panel) 위인데 gmbox 는 --bg 라 투명한 칸 뒤로 회색이 비쳤다 —
     상자를 --panel 로 깐다.
   · 길이: 창 높이를 꽉 채우고, 시간축 스크롤 판이 남은 키를 다 가진다(flex). */
.calgm{background:var(--panel);height:calc(var(--vh100) - 48px);
  display:flex;flex-direction:column}
.calgm #calBody{flex:1;min-height:0;display:flex;flex-direction:column}
.calgm .calwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.calgm .calwgrid{flex:none}   /* 창이 짧아도 머리줄·종일 띠는 안 눌린다 (오피스 개편의 교훈) */
.calgm .caltscroll{flex:1;height:auto}
/* 월간도 창을 채운다 — 첫 줄(요일)만 제 키, 주 줄들이 남은 키를 나눈다 */
.calgm .calmgrid{flex:1;grid-template-rows:auto;grid-auto-rows:1fr}

/* 🔗 구글 연동 창 — .mmodal(86)이 일정 창 .gmodal(87) 뒤에 깔리던 버그.
   일정 창 「위」에서 여는 창이므로 층을 명시한다 (피드백 92 와 같은 급) */
#calFeeds{z-index:92}
/* 📌 일정 창 — 캘린더 판(87) 위에서 열린다. 평범한 .mmodal(86)로 두면 판 뒤로 숨는다 */
#calEvModal{z-index:92}
.calfdesc{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.calfeed{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px}
.calfeed .fh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calfeed .fh b{font-size:14px}
.calfeed .cdot{width:11px;height:11px;border-radius:50%;background:var(--bc);flex:none}
/* 범위 토글 — .segbtn 알약을 피드 칸 크기에 맞게만 줄인다 */
.calscope{margin-left:auto;margin-bottom:0;gap:4px}
.calscope .segbtn{padding:2px 10px;font-size:11.5px}
.calfeed .note{font-size:12px;color:var(--ink-faint);margin-top:3px}
.calfeed .urlrow{display:flex;gap:6px;margin-top:8px}
.calfeed .urlrow input{flex:1;min-width:0;border:1px solid var(--line);background:var(--panel2);
  border-radius:8px;padding:5px 10px;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.calffoot{font-size:12px;color:var(--ink-faint);display:grid;gap:5px;margin-top:14px;
  border-top:1px solid var(--line2);padding-top:12px}
.calffoot b{color:var(--ink-soft)}
.calffoot .rk{color:var(--warn)}
.callink{border:0;background:none;color:var(--warn);font-weight:800;font-size:12px;
  text-decoration:underline;padding:0}

/* ═══ 일정 v2 — 끌기 · 등록 (2026-08-20) ═══ */

/* 카드 시트의 기간 구분자 (board.js) */
.csrsep{color:var(--ink-faint);font-weight:700;padding:0 1px}

/* 조각 — 누를 수 있는 것과 끌 수 있는 것 */
.calbar.click,.calmchip.click{cursor:pointer}
.calbar.drag,.calmchip.drag{cursor:grab}
.calbar{position:relative;user-select:none}
.calmchip{user-select:none}
.calbar .hdl{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0}
.calbar .hdl.l{left:0}.calbar .hdl.r{right:0}
.calbar.drag:hover .hdl{opacity:1;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--bc,var(--won)) 50%,transparent))}
.calbar.drag:hover .hdl.l{background:linear-gradient(to left,transparent,color-mix(in srgb,var(--bc,var(--won)) 50%,transparent))}

/* 끌기 중 놓을 자리 — 파랑은 된다, 빨강은 안 된다(지난 날짜) */
.caldrop{outline:2px dashed color-mix(in srgb,var(--dev) 55%,transparent);outline-offset:-3px;
  border-radius:8px;background:color-mix(in srgb,var(--dev) 7%,transparent)}
.calbad{outline:2px dashed color-mix(in srgb,var(--red) 45%,transparent);outline-offset:-3px;
  border-radius:8px;background:color-mix(in srgb,var(--red) 6%,transparent)}
#calDragTip{position:fixed;z-index:97;pointer-events:none;font-size:11.5px;font-weight:800;
  background:var(--dev);color:#fff;border-radius:99px;padding:2px 10px;white-space:nowrap}
#calDragTip.bad{background:var(--red)}

/* 월간 스팬 — 칩이 칸 여백을 밀고 나가 옆 칸과 이어져 보인다 */
.calmchip.spanL{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-5px}
.calmchip.spanM{border-radius:0;margin-left:-5px;margin-right:-5px}
.calmchip.spanR{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-5px}

/* 빈 칸 등록 팝오버 — 파일함 메뉴(.fxmenu)와 같은 옷. 층은 일정 창(87) 위.
   행 버튼 스타일을 명시한다 — 전역 리셋에 기대면 브라우저 기본 버튼(회색 박스)이 샌다 */
.calpick{position:fixed;z-index:93;width:236px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;box-shadow:var(--shadow);padding:5px}
.calpick .ph{font-size:11.5px;font-weight:700;color:var(--ink-faint);padding:5px 10px 6px;
  border-bottom:1px solid var(--line2);margin-bottom:4px}
.calpick .ph b{color:var(--ink)}
.calpick button{display:block;width:100%;border:0;background:none;text-align:left;cursor:pointer;
  font-family:inherit;border-radius:7px;padding:7px 10px;font-size:13px;font-weight:600;
  color:var(--ink-soft)}
.calpick button:hover{background:var(--panel2);color:var(--ink)}
.calpick .ps{display:block;font-size:11px;font-weight:400;color:var(--ink-faint);margin-top:1px}

/* ↩ 되돌리기 토스트 — 보드의 undo 와 같은 문법, 층만 일정 창 위 */
.calundo{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:93;
  background:var(--ink);color:var(--panel);border-radius:11px;padding:9px 14px;font-size:13px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .18s var(--ease)}
.calundo.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.calundo button{color:#8FB4FF;font-weight:800;text-decoration:underline;margin-left:6px}

@media (max-width:860px){
  /*
   * 좁은 화면에서는 두 줄로 접는다 (2026-08-27 사용자) —
   *   첫 줄: 📅 캘린더 · ◀ ▶ · 기간            ……… ✕ (오른쪽 맨 위)
   *   둘째 줄: 주간 | 월간 · 🔗 구글 캘린더
   * ✕ 는 **무조건 오른쪽 맨 위**다: 닫는 문이 매번 다른 자리에 있으면 손이 헤맨다.
   * ::after 가 줄을 끊는다(order 3) — DOM 을 안 건드리고 두 줄을 만드는 방법이다.
   */
  .calhead b{order:0}
  .calhead .calnav{order:1;margin-left:0}
  .calhead .calrange{order:2}
  .calhead .mmx{order:2;margin-left:auto}
  .calhead::after{content:"";flex-basis:100%;height:0;order:3}
  .calhead .calsegbar{margin-left:0;order:4}
  .calhead .calfbtn{order:5}
  .calgm{padding:14px 12px}
  /*
   * 판은 **화면을 통째로** 덮는다 (2026-08-27 사용자: 「하단에 살짝 공간이 비어서 밝게
   * 표시되는 부분이 있다」). 예전엔 탭바를 피하려고 판의 아래를 58px 들어 올렸는데,
   * 그 높이가 탭바와 정확히 맞지 않아 **어둡지 않은 띠**가 남았다.
   * 지금은 탭바가 판 위(z:90)에 있어 눌린다 — 판을 들어 올릴 이유가 없다.
   * 대신 **상자만** 탭바 높이만큼 위에서 끝낸다.
   */
  #calBox{padding:10px 10px var(--tabh)}
  /* 폰도 채운다 — auto 면 flex 로 커진 시간축이 기준을 잃는다 (3.46.5) */
  #calBox .calgm{height:100%;max-height:100%}
}

/* ── 📣 광고리서치 · 🏡 일상글 + 탭 재편 (2026-08-21) ──
 * 상태 3단(dst-*)은 순위 상태(st-*)와 축이 달라 접두사를 가른다 — 같은 arst 옷을 입되
 * 숙성=coffee · 수정=warn · 노출확인=dev. 색은 전부 변수라 다크는 따라온다. */
.arstats.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:840px){.arstats.three{grid-template-columns:1fr 1fr}}
.arstat.dst-ripen b{color:var(--coffee)}
.arstat.dst-edit b{color:var(--warn)}
.arstat.dst-watch b{color:var(--dev)}
.arstat.dst-ripen.on{border-color:var(--coffee);box-shadow:inset 0 0 0 1px var(--coffee)}
.arstat.dst-edit.on{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
.arstat.dst-watch.on{border-color:var(--dev);box-shadow:inset 0 0 0 1px var(--dev)}
.arst.dst-ripen{background:color-mix(in srgb,var(--coffee) 14%,var(--panel));color:var(--coffee)}
.arst.dst-edit{background:color-mix(in srgb,var(--warn) 16%,var(--panel));color:var(--warn)}
.arst.dst-watch{background:color-mix(in srgb,var(--dev) 12%,var(--panel));color:var(--dev)}
.ardday{font-family:var(--mono,monospace);font-weight:800}
/* 임박은 칩 전체가 입는다 (2026-08-26 사용자). 이름이 `soon` 이면 「아직 안 만든 화면」의
   전역 규칙(.soon — 점선 상자)을 뒤집어쓴다. 짧은 이름은 늘 남의 것이다 */
.arst.dst-ripen.ardsoon{background:color-mix(in srgb,var(--red) 13%,var(--panel));color:var(--red)}
.arbanner.warn{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.aracct{display:inline-flex;gap:4px;align-items:center;font-size:12.5px;white-space:nowrap}
.aracct .id{font-family:var(--mono,monospace);font-size:12.5px}
.ardcafe{color:var(--ink);text-decoration:none}
.ardcafe:hover{color:var(--dev);text-decoration:underline}
.ardurl{font-size:11.5px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ardmemo{font-size:12.5px;max-width:140px}
.ardacts{white-space:nowrap}
.arbdg.daily{border-color:var(--coffee);color:var(--coffee)}
.arbdg.repo{border-color:var(--prod);color:var(--prod)}
@media(max-width:1100px){
  /* 메모는 편집 창에 있다 — 좁은 판에서는 열을 통째로 접는다(th·td 짝이 같이) */
  .ardtbl th:nth-child(8),.ardtbl td:nth-child(8){display:none}
}

/* ═══ 🏡 일상글 시트 (3.14.0) — 빈 행에 연속 타이핑 되는 촘촘한 표 ═══
 * 접두 ardsh — style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다.
 * 폭이 판보다 넓으면 wrap 이 가로 스크롤을 진다(엑셀의 문법 — 열이 접히지 않는다). */
.ardshwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:auto;max-height:min(600px,calc(var(--vh100) - 300px))}
.ardsh{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:1080px}
.ardsh th{position:sticky;top:0;z-index:2;background:var(--panel2);color:var(--ink-faint);
  font-size:11.5px;font-weight:600;text-align:left;padding:5px 8px;white-space:nowrap;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line2)}
.ardsh th:last-child,.ardsh td:last-child{border-right:0}
.ardsh td{padding:0;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);
  height:31px;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.ardsh td .cv{display:block;padding:3px 8px;overflow:hidden;text-overflow:ellipsis}
.ardsh tr:last-child td{border-bottom:0}
/* 행 번호 — 잡아 끄는 손잡이를 겸한다 */
.ardsh .rn{font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-align:center;
  background:var(--panel2);cursor:grab;user-select:none}
.ardsh .rn:active{cursor:grabbing}
/* 편집 가능한 칸 — 겉으론 조용히, 얹으면 살짝 */
.ardsh td.ed{cursor:text}
.ardsh td.ed:hover{background:color-mix(in srgb,var(--dev) 4%,var(--panel))}
/* 파생 칸(수정발행·상태·노출) — 손으로 못 적는 곳은 톤을 가라앉힌다 */
.ardsh td.drv{background:color-mix(in srgb,var(--ink) 2.5%,var(--panel));cursor:default}
/* 편집 중인 칸 — 엑셀의 선택 테두리 */
.ardsh td.editing{box-shadow:inset 0 0 0 2px var(--dev);overflow:visible}
.ardshin{width:100%;height:31px;border:0;background:var(--panel);padding:3px 8px;font-size:13px;outline:none}
select.ardshin{padding:3px 4px}
/* 유령 빈 행 — 화면에만 있다. 첫 글자를 치는 순간 진짜 행이 된다 */
.ardsh tr.ghost .rn{color:color-mix(in srgb,var(--ink-faint) 45%,transparent);cursor:default}
/* 끌기 — 드는 행은 흐려지고, 내려앉을 자리는 위선이 밝아진다 */
.ardsh tr.dragsrc td{opacity:.35}
.ardsh tr.dragover td{border-top:2px solid var(--dev)}
/* URL 칸 — 긴 주소가 ↗ 를 밀어내지 않는다 (3.14.1 사용자): 주소가 접히고 단추는 고정.
   `.ardsh td .cv` (0-2-1) 가 이기지 못하게 같은 구체도로 맞춘다 — 뒤에 온 쪽이 이긴다 */
.ardsh td .cv-url{display:flex;align-items:center;gap:4px}
.ardsh .cv-url .u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ardsh .ardshgo{flex:none;color:var(--dev);text-decoration:none;font-size:11.5px}
/* 행 선택 (3.45.0) — 번호 칸 클릭·끌기 = 선택(지우기·복사의 재료), 선택을 잡아 끌면 이동 */
.ardsh tr.ardshsel td{background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.ardsh tr.ardshsel td.drv{background:color-mix(in srgb,var(--dev) 11%,var(--panel))}
.ardsh tr.ardshsel .rn{background:color-mix(in srgb,var(--dev) 20%,var(--panel));color:var(--dev);font-weight:800}
.ardshselbar{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--ink-soft);
  padding-left:10px;border-left:1px solid var(--line)}
.ardshselbar b{color:var(--dev)}
.ardshselbar.hide{display:none}
/* 수정발행 열 자물쇠 — 평소 잠김(파생값), 엑셀 이관 때만 연다 */
.ardsh th .ardshlock{border:0;background:none;font-size:11px;padding:0 2px;opacity:.55;cursor:pointer;vertical-align:-1px}
.ardsh th .ardshlock:hover{opacity:1}
/* ＋ n행 — 시트 맨 아래에서 빈 줄을 쭉쭉 늘린다 (3.35.2 사용자) */
.ardsh tr.ardshaddr td{border-right:0;border-bottom:0;padding:4px 8px;background:var(--panel)}
.ardsh tr.ardshaddr .rn{background:var(--panel);cursor:default}
/* 메모 — 칸은 📝 하나(전문은 title), 편집은 칸 위로 넓게 펼친다(엑셀의 편집 상자) */
.ardsh td.editing{position:relative}
.ardsh td.editing.ov{box-shadow:none}
.ardshmemoin{position:absolute;top:0;right:0;width:min(340px,50vw);height:31px;z-index:5;
  box-shadow:inset 0 0 0 2px var(--dev),var(--shadow);border-radius:6px 0 0 6px}
.ardshst{border:0;background:none;padding:0;cursor:pointer}
.ardshmenu{border:none;background:none;font-size:12.5px;opacity:.4;padding:2px 6px}
.ardshmenu:hover{opacity:1}
/* 프레즌스 — 남이 만지는 셀은 테두리 + 이름표. 색은 mkt 주황(내 편집의 dev 파랑과 갈린다) */
.ardsh td.ardshpeer{position:relative;box-shadow:inset 0 0 0 2px var(--mkt)}
.ardsh td.ardshpeer::after{content:attr(data-peer);position:absolute;top:0;right:0;font-size:10px;
  line-height:1;padding:2px 5px;border-radius:0 0 0 6px;background:var(--mkt);color:#fff;
  pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 📣 광고리서치 — 탭 교차 전환 시 화면 틀어짐 수리 (2026-08-21 사용자 보고)
 * 이 뷰는 .office 가 자체 스크롤이라, 내용이 짧은 탭(일상글·원고 저장소)으로 넘어가면
 * 스크롤바가 사라지며 폭이 넓어져 탭·버튼이 통째로 밀렸다. 스크롤바 자리를 늘 예약해
 * 어느 탭에서든 폭이 같게 한다 — 콘텐츠 길이가 레이아웃을 흔들면 안 된다. */
#v-adresearch{scrollbar-gutter:stable}

/* ═══════════ 🎯 타게팅 (2026-08-23 — 목업 v4 확정 후 본편 구현) ═══════════
 *
 * 고객 이야기를 모으면 공략할 사람이 보이기 시작하는 공간. 원문이 주인공이라
 * 피드는 카드 테두리를 반복하지 않는 선 나눔이고, AI 정리는 판(panel2) 옷을 입어
 * 원문(인용 왼줄)과 눈으로 갈린다. 강조색은 광고리서치(dev 파랑)와 구분되는 prod 청록.
 * 접두는 tg* — style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다.
 */
.tghead{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tghead h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0;flex:none}
.tghead .eb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-faint)}
/* 빵부스러기의 꺾쇠 — 화면 이름과 지금 보는 것 사이 */
.tgcrumbsep{font-size:19px;font-weight:700;color:var(--ink-faint);opacity:.6;flex:none}
/*
 * 제품/주제 = **이 화면의 범위**다. 제목과 같은 무게로 서고, 이 화면의 색(--prod)을 입는다
 * (탭 밑줄과 같은 색이라 「여기가 주인공」이 한눈에 읽힌다). 예전엔 오른쪽 끝에서
 * 14.5px 회색 테두리 단추였고, 그래서 옆의 도구 단추와 구분이 안 갔다 (2026-08-27 사용자).
 */
.tgprod{border:1.5px solid color-mix(in srgb,var(--prod) 30%,var(--line));
  background:color-mix(in srgb,var(--prod) 8%,var(--panel));color:var(--prod);
  border-radius:11px;padding:5px 12px;font-size:20px;font-weight:800;letter-spacing:-.02em;
  display:inline-flex;gap:7px;align-items:center;cursor:pointer;max-width:min(46vw,420px)}
.tgprod:hover{background:color-mix(in srgb,var(--prod) 14%,var(--panel));border-color:var(--prod)}
.tgprod b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgprod i{font-style:normal;font-size:12px;font-weight:800;flex:none}
/* 「+3」 — 다른 제품이 더 있다는 표시. 꺾쇠만으로는 눌리는 것인지 안 읽힌다 */
.tgprod i.more{font-family:var(--mono);font-size:11.5px;padding:1px 5px;border-radius:6px;
  background:color-mix(in srgb,var(--prod) 16%,transparent)}
.tgprod i.cv{font-size:13px;opacity:.75}
@media (max-width:840px){
  /* 좁은 화면에서는 알약이 줄을 통째로 가진다 — 이름이 잘리면 「무엇을 보는 중인지」가
     사라진다 */
  .tghead h1{font-size:19px}
  .tgcrumbsep{display:none}
  .tgprod{font-size:18px;flex:1 1 100%;max-width:none;justify-content:flex-start;min-height:44px}
  .tgprod b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* 보기 전환 세그먼트 — 본편의 확정 문법(.arms-seg, 원고 저장소 v2)과 **같은 꼴**이다.
   남의 모듈 클래스를 그대로 빌려 쓰지 않고 기하만 맞춘다: style.css 는 전역 한 장이라
   arms-* 를 고치는 날 타게팅이 같이 흔들린다. 강조색만 이 화면의 것(--prod)으로. */
.tgseg{display:inline-flex;background:color-mix(in srgb,var(--ink) 6%,var(--panel));
  border:1px solid var(--line2);border-radius:11px;padding:3px;gap:2px}
.tgseg button{border:0;background:none;color:var(--ink-soft);font-weight:700;font-size:13px;
  padding:4px 16px;border-radius:8px;cursor:pointer}
.tgseg button:hover{color:var(--ink)}
.tgseg button.on{background:var(--panel);color:var(--prod);box-shadow:0 1px 2px rgba(16,24,40,.10)}
@media (max-width:840px){.tgseg button{min-height:44px;padding:4px 12px}}

/* 가벼운 밑줄 탭 — 큰 카드 탭은 대시보드처럼 무겁다 (목업 v2 §12 확정) */
/* 탭 줄의 오른쪽 끝은 도구 자리다 — 머리줄 오른쪽은 지나간 알림 종이 덮는다 */
.tgtabs{display:flex;gap:4px;align-items:flex-end;border-bottom:1px solid var(--line);margin:0 0 14px}
.tgtabs .mini{flex:none;margin-bottom:5px}
.tgtab{border:0;background:none;padding:6px 12px 9px;font-size:14.5px;font-weight:700;
  color:var(--ink-faint);position:relative;cursor:pointer}
.tgtab i{font-style:normal;font-family:var(--mono);font-size:12px;margin-left:5px;opacity:.85}
.tgtab.on{color:var(--ink)}
.tgtab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
  background:var(--prod);border-radius:2px}

/* ── 본문 + 도킹 상세 2단 — 상세가 탐색을 막지 않는다 (v3 §30 확정) ── */
.tgwork{display:flex;gap:16px;align-items:flex-start}
.tgmain{flex:1;min-width:0}
.tginsp{width:340px;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;max-height:calc(var(--vh100) - 160px);overflow-y:auto}
.tgihead{display:flex;gap:8px;align-items:flex-start;margin-bottom:2px}
.tgihead .tgit{flex:1;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.tgihead input{flex:1;font-size:16.5px;font-weight:800;border:none;background:none;
  border-bottom:2px solid var(--prod);outline:none;padding:0 0 1px;color:inherit}
.tgx{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  width:30px;height:30px;font-size:15px;flex:none}
.tged{border:none;background:none;font-size:13px;color:var(--ink-faint);padding:3px 6px;
  border-radius:7px;opacity:.65;flex:none;cursor:pointer}
.tged:hover{background:var(--panel2);color:var(--prod);opacity:1}
.tgimeta{font-size:12.5px;color:var(--ink-faint);margin:2px 0 10px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.tgimeta a{color:inherit;text-decoration:none}
.tgimeta a:hover{color:var(--prod)}
.tgilab{font-size:12.5px;color:var(--ink-faint);font-weight:800;margin:14px 0 6px}
/* 원문 = 인용 옷, AI 정리 = 판 옷 — 어디까지가 고객 말인지 헷갈리지 않게 (v3 §13) */
.tgiraw{padding:2px 0 2px 12px;border-left:2.5px solid color-mix(in srgb,var(--prod) 45%,var(--line));
  font-size:14px;color:var(--ink-soft);white-space:pre-line;max-height:300px;overflow-y:auto}
.tgiai{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:4px 12px}
.tgirow{display:flex;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.tgirow:last-child{border-bottom:0}
.tgirow .k{flex:none;width:64px;color:var(--ink-faint)}
.tgirow .v{flex:1;color:var(--ink)}
.tgirow .v.tgmiss{color:var(--ink-faint)}
.tgirow .tgie{border:none;background:none;font-size:12px;color:var(--ink-faint);opacity:.65;
  padding:1px 5px;border-radius:6px;cursor:pointer}
.tgirow .tgie:hover{background:var(--panel);color:var(--prod);opacity:1}
.tgirow input{flex:1;border:none;background:none;font-size:13.5px;border-bottom:1.5px solid var(--prod);
  outline:none;color:inherit}
.tgisum{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;
  padding:9px 12px;font-size:13.5px;color:var(--ink-soft)}
.tgq{display:flex;gap:7px;align-items:flex-start;background:var(--bg);border:1px solid var(--line2);
  border-radius:11px;padding:8px 11px;margin-bottom:6px}
.tgq p{flex:1;font-size:13.5px;margin:0}
.tgq .src{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;margin-top:2px;text-decoration:none}
.tgq .src:hover{color:var(--prod)}
.tgq .st{border:none;background:none;font-size:13px;opacity:.35;padding:0 2px;flex:none;cursor:pointer}
.tgq .st.on{opacity:1}
.tgrow{display:flex;gap:8px;align-items:baseline;font-size:13.5px;color:var(--ink-soft);
  padding:5px 2px;border-bottom:1px solid var(--line2)}
.tgrow:last-child{border-bottom:0}
.tgrow i{font-style:normal;margin-left:auto;font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.tgrow.lnk{cursor:pointer}
.tgrow.lnk:hover{color:var(--prod)}
.tgrow.lnk::after{content:"›";margin-left:6px;color:var(--ink-faint);font-weight:800}
.tgchips{display:flex;gap:6px;flex-wrap:wrap}
.tgstoryrow{display:flex;gap:4px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line2)}
.tgstoryrow:last-child{border-bottom:0}
.tgstoryrow .smain{flex:1;display:flex;gap:8px;align-items:baseline;border:0;background:none;
  text-align:left;font-size:13px;padding:4px 0;cursor:pointer;color:inherit}
.tgstoryrow .smain b{font-weight:700}
.tgstoryrow .smain:hover b{color:var(--prod)}
.tgstoryrow .smain span{margin-left:auto;flex:none;font-size:11.5px;color:var(--ink-faint);padding-left:8px}
.tgnote{font-size:12.5px;color:var(--ink-faint)}
.tgwhochip{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--prod);
  background:color-mix(in srgb,var(--prod) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--prod) 25%,var(--panel));
  border-radius:99px;padding:3px 12px;cursor:pointer}

/* ── 수집 상자 — 첫 화면의 주인공. 저장은 「수집」 한 번이다 ── */
.tgcollect{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:0 0 6px}
.tgcollect .q{font-size:14.5px;font-weight:800;margin-bottom:8px}
.tgcollect textarea{width:100%;min-height:44px;max-height:150px;resize:none;border:1.5px solid var(--line);
  background:var(--panel2);border-radius:10px;padding:9px 12px;font-size:14.5px;line-height:1.55;color:inherit}
.tgcollect textarea:focus{outline:none;border-color:var(--prod);background:var(--panel)}
.tgcrow{display:flex;gap:10px;align-items:center;margin-top:8px}
.tgchint{font-size:13px;color:var(--ink-soft)}
.tgchint b{color:var(--prod)}
.tgquick{display:flex;gap:8px;align-items:center;background:var(--panel);border:1.5px solid var(--line);
  border-radius:12px;padding:9px 12px;margin:0 0 12px}
.tgquick input,.tgquick textarea{flex:1;border:none;background:none;outline:none;font-size:14px;
  color:inherit;resize:none;max-height:110px;line-height:1.5;font-family:var(--sans)}
.tgtools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 4px}
.tgsum{font-size:13.5px;color:var(--ink-soft)}

/* 근거 필터 줄 — 「이야기 n개 보기」의 착지. 왜 이것만 보이는지 + 한 번에 해제 (v3 §15) */
.tgfbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0 2px}
.tgfpill{display:inline-flex;gap:7px;align-items:center;font-size:13px;font-weight:700;color:var(--prod);
  background:color-mix(in srgb,var(--prod) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--prod) 30%,var(--panel));
  border-radius:99px;padding:4px 6px 4px 13px}
.tgfpill i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.tgfpill button{border:none;background:none;font-size:13px;font-weight:800;color:var(--ink-faint);
  width:22px;height:22px;border-radius:50%;cursor:pointer}
.tgfpill button:hover{background:var(--panel);color:var(--red)}
.tgfclear{border:none;background:none;font-size:13px;color:var(--ink-faint);font-weight:700;
  padding:4px 8px;border-radius:7px;cursor:pointer}
.tgfclear:hover{background:var(--panel);color:var(--prod)}

/* ── 수집 피드 — 선 나눔, 원문이 주인공. 카드 테두리를 반복하지 않는다 ── */
.tgfeed .tgitem{padding:15px 6px 14px;border-bottom:1px solid var(--line2);position:relative}
.tgfeed .tgitem:last-child{border-bottom:0}
.tgirowtop{display:flex;gap:8px;align-items:flex-start}
.tgtitle{font-size:15.5px;font-weight:800;letter-spacing:-.01em;cursor:pointer;background:none;
  border:none;text-align:left;padding:0;color:inherit;line-height:1.45}
.tgtitle:hover{color:var(--prod)}
/* hover 전용 금지(v3 §27) — ⋯ 는 항상 연하게 보이고 탭으로 열린다 */
.tgdots{margin-left:auto;flex:none;border:none;background:none;color:var(--ink-faint);
  font-size:17px;font-weight:800;line-height:1;padding:2px 8px;border-radius:7px;opacity:.55;cursor:pointer}
.tgdots:hover{background:var(--panel);color:var(--ink);opacity:1}
.tgquote{margin:6px 0 8px;padding:2px 0 2px 12px;border-left:2.5px solid color-mix(in srgb,var(--prod) 45%,var(--line));
  font-size:14.5px;color:var(--ink-soft);max-width:760px;cursor:pointer}
.tgmetarow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.tgwho{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:var(--prod);
  background:color-mix(in srgb,var(--prod) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--prod) 25%,var(--panel));
  border-radius:99px;padding:2px 11px;cursor:pointer}
.tgwho i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--ink-faint);opacity:.65}
.tgwho:hover i{opacity:1}
.tgwho input{border:none;background:none;font-size:13px;font-weight:700;color:var(--prod);
  width:180px;outline:none}
.tgtag{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:1px 10px;color:var(--ink-soft);
  background:var(--panel)}
.tgsrcline{font-size:12.5px;color:var(--ink-faint)}
.tgsrcline a{color:inherit;text-decoration:none}
.tgsrcline a:hover{color:var(--prod)}
.tgstar{color:var(--warn);font-size:12.5px;margin-right:2px}
.tgproc{font-size:13.5px;color:var(--ink-faint);margin:4px 0 6px}
.tgproc .dots::after{content:"···";animation:tgdots 1.4s steps(4) infinite}
@keyframes tgdots{0%{content:"·"}33%{content:"··"}66%{content:"···"}}
.tgsoft{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);margin:5px 0 6px}
.tgdup{border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));
  background:color-mix(in srgb,var(--warn) 7%,var(--panel));
  border-radius:12px;padding:10px 14px;margin:10px 0 2px;display:flex;gap:10px;align-items:center;
  flex-wrap:wrap;font-size:13.5px}
.tgnores{text-align:center;color:var(--ink-faint);font-size:13.5px;padding:30px 0}
.tgpaste{margin:6px 0;flex:1}
.tgpaste textarea{width:100%;min-height:64px;resize:none;border:1.5px solid var(--line);
  background:var(--panel2);border-radius:10px;padding:8px 11px;font-size:13.5px;color:inherit}
.tgpaste textarea:focus{outline:none;border-color:var(--prod)}

/* ── AI 발견 카드 — 관찰자의 목소리. 화면당 1개 우선, 화려해지지 않는다 (v3 §41·§75) ── */
.tgai{border:1px solid color-mix(in srgb,var(--prod) 26%,var(--line));
  background:color-mix(in srgb,var(--prod) 5%,var(--panel));
  border-radius:13px;padding:12px 15px;margin:12px 0}
.tgai .lb{font-size:12.5px;font-weight:800;color:var(--prod);margin-bottom:3px}
.tgai p{font-size:14px;color:var(--ink-soft);max-width:640px;margin:0}
.tgai p b{color:var(--ink)}
.tgai .act{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tgai.mkt{border-color:color-mix(in srgb,var(--mkt) 30%,var(--line));
  background:color-mix(in srgb,var(--mkt) 5%,var(--panel))}
.tgai.mkt .lb{color:var(--mkt)}
.tgaimore{display:block;margin:2px auto 10px;border:0;background:none;color:var(--ink-faint);
  font-size:13px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer}
.tgaimore:hover{color:var(--prod);background:var(--panel)}
.tgkw{display:flex;flex-direction:column;gap:5px;margin-top:8px;max-width:420px}
.tgkw a{display:flex;gap:8px;align-items:center;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 12px;font-size:13.5px}
.tgkw a:hover{border-color:var(--prod);color:var(--prod)}
.tgkw a i{font-style:normal;margin-left:auto;color:var(--ink-faint)}

/* ── 타깃 카드 (목록 보기) — 텍스트 중심 B안. button 중첩 없음 (v2 §16·§28) ── */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:4px}
.tgcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  position:relative;transition:border-color var(--t-fast)}
.tgcard:hover{border-color:var(--prod)}
.tgcard.on{border-color:var(--prod);box-shadow:inset 0 0 0 1px var(--prod)}
.tgcard .cmain{display:block;width:100%;text-align:left;border:0;background:none;
  padding:13px 15px;border-radius:14px;cursor:pointer;color:inherit}
.tgcard .nm{font-size:15px;font-weight:800;letter-spacing:-.01em;padding-right:26px;line-height:1.4}
.tgcard .ct{font-size:12.5px;color:var(--ink-faint);margin:2px 0 7px}
.tgcard .pain{font-size:13.5px;color:var(--ink-soft)}
.tgcard .want{font-size:13px;color:var(--prod);margin-top:2px}
.tgcard .pinmk{position:absolute;top:9px;right:10px;font-size:14px;opacity:.25;
  border:0;background:none;padding:3px 6px;border-radius:7px;cursor:pointer}
.tgcard .pinmk:hover{background:var(--panel2);opacity:.7}
.tgcard .pinmk.on{opacity:1}

/* ═══ 타깃맵 — 살아있는 타깃 지도. 데이터 차트처럼 보이면 실패다 (v4 §35·§76) ═══
 * 노드는 원이 아니라 떠 있는 작은 카드다. 위치는 데이터가 같으면 고정(학습 가능),
 * 부유는 노드마다 주기·방향이 다르고, 선택·hover 중엔 멈춘다. 관계는 SVG 곡선이
 * 아주 희미하게 — 180ms 주기 재드로우로 끝점이 부유를 따라온다. */
.tgstage{position:relative;height:560px;border:1px solid var(--line2);border-radius:18px;
  overflow:hidden;margin-top:4px;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--prod) 8%,transparent),transparent 34%),
  linear-gradient(color-mix(in srgb,var(--panel) 55%,var(--bg)),var(--bg))}
.tgstage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:radial-gradient(circle,var(--ink-faint) 1px,transparent 1px);background-size:38px 38px}
.tgstage svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.tglineO{fill:none;stroke:color-mix(in srgb,var(--prod) 60%,var(--ink-faint));stroke-width:1.2;
  stroke-dasharray:4 8;opacity:.17;transition:opacity var(--t-mid),stroke-width var(--t-mid)}
.tglineO.active{opacity:.6;stroke-width:1.55}
.tglineF{fill:none;stroke:color-mix(in srgb,var(--prod) 70%,var(--ink-faint));stroke-width:1.25;opacity:.45}
.tgmapmeta{position:absolute;left:16px;top:14px;z-index:30;font-size:12.5px;color:var(--ink-faint)}
.tgmapmeta b{color:var(--ink-soft);font-size:13px;margin-right:8px}
.tgmapctrl{position:absolute;right:14px;top:12px;z-index:40;display:flex;gap:7px;align-items:center}
.tgmapctrl .fld{width:130px;padding:5px 10px;font-size:13px}
.tgfocusbar{position:absolute;left:14px;top:42px;z-index:40;display:flex;gap:9px;align-items:center}
.tgcrumb{font-size:12.5px;color:var(--ink-faint)}
.tgcrumb b{color:var(--ink-soft)}
.tgnode{position:absolute;z-index:10;transform:translate(-50%,-50%);
  transition:left .62s var(--ease),top .62s var(--ease),opacity .38s,transform .38s var(--ease)}
/* 등장 직전 상태 — 이 클래스를 벗는 것이 곧 등장 모션이다(전환은 .tgnode 가 이미 갖고 있다).
   자바스크립트 애니메이션으로 하지 않는다: 그 값이 CSS 위에 얹혀 굳으면 뒤이어 붙는
   .tggone·.tgsel 이 통째로 무시된다(2026-08-23 「메인이 막혀 있다」의 원인). */
.tgnode.tgenter{opacity:0;transform:translate(-50%,calc(-50% + 7px)) scale(.94)}
.tgnode.tggone{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.88)}
.tgncard{display:block;text-align:left;position:relative;cursor:pointer;color:inherit;
  border:1px solid color-mix(in srgb,var(--ink-faint) 34%,transparent);
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  border-radius:19px 22px 18px 24px;padding:12px 14px 11px;
  box-shadow:0 10px 27px rgba(22,31,47,.10);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid),border-color var(--t-mid),background var(--t-mid)}
.tgncard::before{content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--prod) 75%,var(--panel));left:11px;top:14px;opacity:.85}
/* 고객 말투 한 줄이 주인공 — 길면 두 줄에서 자른다(전문은 카드 툴팁과 상세에 있다).
   자르지 않으면 AI 가 지은 긴 이름이 카드를 문단으로 만들어, 지도를 훑을 수가 없다. */
.tgliv{font-size:13.5px;line-height:1.4;font-weight:800;letter-spacing:-.01em;margin-left:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgnct{font-size:11.5px;color:var(--ink-faint);margin:7px 0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tgnct b{color:var(--prod)}
.tgnew{font-size:10.5px;font-weight:800;color:var(--prod);margin:0 0 4px 12px}
/* 꼬리표 — 「이건 뭐지」를 카드가 직접 답한다. 맵에 범례를 다는 대신 물건에 이름을 붙인다.
   한 타깃 중심 화면에는 카드가 세 종류다: 지금 보는 타깃 / 비슷한 다른 타깃 /
   이 안에서 보이는 사람. 글자만으로는 부족해 **알약 배지**로 입힌다 — 색이 먼저 갈리고
   글이 확인한다(2026-08-23 사용자 「더 확실하게」). */
.tgkick{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;
  border-radius:99px;padding:2px 9px;margin:0 0 5px 10px;
  background:color-mix(in srgb,var(--prod) 9%,var(--panel));
  color:color-mix(in srgb,var(--prod) 80%,var(--ink-soft));
  border:1px dashed color-mix(in srgb,var(--prod) 35%,transparent)}
.tgkick.tgkickme{background:var(--prod);color:#fff;border:1px solid var(--prod)}
.tgkick.tgkickrel{background:var(--panel2);color:var(--ink-faint);border:1px solid var(--line)}
/* 내부 카드는 바탕에도 옅게 물을 들인다 — 점선·크기·배지가 같은 말을 세 번 한다 */
.tgnode.tgsat .tgncard{background:color-mix(in srgb,var(--prod) 5%,var(--panel))}
/* 지금 보는 타깃은 더 크고 또렷하게 */
.tgnode.tgsel .tgncard{transform:scale(1.08)}
.tgnode.tgsel .tgliv{font-size:14.5px}
/* 내부(점선 카드)로 가는 선은 선도 점선 — 카드와 선이 같은 말을 하게 */
.tglineS{fill:none;stroke:color-mix(in srgb,var(--prod) 65%,var(--ink-faint));stroke-width:1.2;
  stroke-dasharray:3 6;opacity:.38}
.tgnpin{position:absolute;top:-7px;right:-5px;font-size:13px}
.tgnode:hover{animation-play-state:paused}
.tgnode:hover .tgncard{transform:translateY(-3px) scale(1.03);
  border-color:color-mix(in srgb,var(--prod) 45%,transparent);box-shadow:0 16px 36px rgba(21,52,49,.16)}
.tgnode.tgkin .tgncard{border-color:color-mix(in srgb,var(--prod) 35%,transparent)}
.tgnode.tgsel{animation-play-state:paused;z-index:14}
.tgnode.tgsel .tgncard{background:color-mix(in srgb,var(--prod) 7%,var(--panel));
  border-color:color-mix(in srgb,var(--prod) 55%,transparent);transform:scale(1.05);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--prod) 10%,transparent),0 18px 40px rgba(21,52,49,.17)}
.tgnode.tgdim .tgncard{opacity:.38}
/* 제품 = 닻. 다른 옷, 부유 없음, 클릭 대상 아님 */
.tgpnode{z-index:8}
.tgpcard{text-align:center;border:1.5px solid color-mix(in srgb,var(--prod) 36%,transparent);
  background:linear-gradient(color-mix(in srgb,var(--prod) 9%,var(--panel)),color-mix(in srgb,var(--prod) 15%,var(--panel)));
  border-radius:28px 23px 30px 24px;padding:17px 22px;
  box-shadow:0 16px 40px color-mix(in srgb,var(--prod) 14%,transparent)}
.tgpcard b{font-size:17px;color:var(--prod)}
.tgpcard div{font-size:12px;color:var(--ink-soft);margin-top:3px}
/* 세부 사람 — 작고 연한 점선 카드. 아직 정식 타깃이 아니다 */
.tgnode.tgsat .tgncard{border-style:dashed;background:color-mix(in srgb,var(--panel) 82%,transparent);
  padding:10px 13px 9px}
.tgnode.tgsat .tgliv{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.tgnode.tgsat .tgnct{margin-top:5px}
.tgnode.tgsat .tgncard::before{opacity:.5}
/* 가장자리 유령 카드 — 「＋ 다른 사람 n명」: 더 큰 세계가 있다 (v4 §30) */
.tgnode.tgghost .tgncard{border-style:dashed;background:none;box-shadow:none;padding:10px 15px}
.tgnode.tgghost .tgliv{font-size:12.5px;color:var(--ink-faint);font-weight:700;margin-left:0}
.tgnode.tgghost .tgncard::before{display:none}
.tgnode.tgghost:hover .tgliv{color:var(--prod)}
/* 부유 — 3~6px, 노드마다 주기·방향 다르게. 읽기를 방해하면 실패다 */
.tgfa{animation:tgfa 10s ease-in-out infinite alternate}
.tgfb{animation:tgfb 13s ease-in-out infinite alternate}
.tgfc{animation:tgfc 9s ease-in-out infinite alternate}
.tgfd{animation:tgfd 11.4s ease-in-out infinite alternate}
@keyframes tgfa{from{translate:-2px -4px}to{translate:4px 2px}}
@keyframes tgfb{from{translate:3px 2px}to{translate:-3px -3px}}
@keyframes tgfc{from{translate:-3px 2px}to{translate:2px -4px}}
@keyframes tgfd{from{translate:2px -2px}to{translate:-3px 4px}}
.tgstage.tgmotionoff .tgnode{animation:none!important}
.tgflydot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--prod);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--prod) 16%,transparent);z-index:70}
@media (prefers-reduced-motion:reduce){.tgnode{animation:none!important}}

/* ── 모바일 (v3 §65~69) — 상세는 전체폭 시트, 터치 표적 40px+ ── */
@media (max-width:860px){
  .tgwork{display:block}
  .tginsp{position:fixed;inset:0;width:auto;max-height:none;z-index:84;border-radius:0;
    padding-bottom:40px;border:none;box-shadow:none}
  .tgrid{grid-template-columns:1fr}
  .tgstage{height:480px}
  .tgcrow .mini.pri{padding:9px 18px}
  .tgdots,.tged,.tgq .st,.tgcard .pinmk,.tgx{min-width:40px;min-height:40px;
    display:inline-flex;align-items:center;justify-content:center}
  .tgmapctrl .fld{width:100px}
}

/* ═══ 🧮 AI 사용 상세 (2026-08-23) ═══
   접두사 aiu- 로 묶는다 — style.css 는 전역 단일 파일이라 .bar .row 같은 짧은 이름은
   반드시 남의 규칙에 걸린다. */
.okv{color:var(--won)}
.mtile.aiu-tile{cursor:pointer;transition:border-color .12s}
.mtile.aiu-tile:hover{border-color:var(--dev)}
.mtile .aiu-won{font-size:14px;font-weight:800;margin-left:1px;color:var(--ink-faint)}
.panel.aiu{margin-bottom:12px}
.aiu-seg{margin-right:8px}
.aiu-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:6px 0 14px;border-bottom:1px solid var(--line2);margin-bottom:12px}
.aiu-big .v{font-size:29px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aiu-big .s{font-size:13px;color:var(--ink-faint);margin-top:2px}
.aiu-spark{display:flex;align-items:flex-end;gap:4px;height:46px}
.aiu-spark i{width:14px;background:var(--line2);border-radius:3px 3px 0 0;min-height:3px}
.aiu-spark i.now{background:var(--dev)}
.aiu-spark i.now.hot{background:var(--warn)}
.aiu-avg{font-size:13px;color:var(--ink-faint);white-space:nowrap;line-height:1.5}
.aiu-avg b{display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.aiu-h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);margin:14px 0 9px}
.aiu-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px}
.aiu-row .n{width:150px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiu-row .bar{flex:1;height:8px;background:var(--line2);border-radius:99px;overflow:hidden;min-width:40px}
.aiu-row .bar i{display:block;height:100%;background:var(--dev);border-radius:99px}
.aiu-row .v{width:82px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.aiu-row .c{width:76px;text-align:right;flex:none;font-size:12px;color:var(--ink-faint)}
.aiu-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
.aiu-kv{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:3px 0}
.aiu-kv span{color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aiu-kv b{flex:none;font-variant-numeric:tabular-nums}
.aiu-foot{margin-top:14px;padding-top:11px;border-top:1px solid var(--line2)}
.aiu-prices{margin:9px 0 4px;padding:9px 11px;background:var(--panel2);border-radius:9px}
@media(max-width:840px){
  .aiu-cols{grid-template-columns:1fr}
  .aiu-row .n{width:108px}
  .aiu-row .v{width:70px}
  .aiu-row .c{display:none}
}

/* ══════════════ 🍌 제품컷 (2026-08-23) ══════════════
 * 접두는 ps* — style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다.
 * 강조색은 --dsgn(디자인 계열의 일)로 잡고, 판·박스 규칙은 본편 그대로 쓴다.
 */
#psRoot{--ps:var(--dsgn)}
.pshead{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.pshead h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:2px 0 0}
.pseb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--ink-faint)}
.psgap{flex:1}
.psdim{color:var(--ink-faint);font-size:12.5px}
.psprod{border:1.5px solid var(--line);background:var(--panel);border-radius:10px;
  padding:6px 10px;font-size:14px;font-weight:700;max-width:260px}
.psbudget{font-family:var(--mono);font-size:12.5px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;background:var(--panel)}
.psbudget b{color:var(--ink);font-size:13.5px}
.psbudget.low b{color:var(--warn)}
.pserr{padding:20px;color:var(--red)}
#psRoot .pswarn{background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 32%,var(--line));border-radius:11px;
  padding:8px 11px;font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.psnote{font-size:12px;color:var(--ink-faint);margin-top:7px;line-height:1.5}
.psml{display:block;font-size:12.5px;color:var(--ink-faint);margin:10px 0 4px;font-weight:800}
.psbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.pstn{border:none;background:none;font-size:12px;color:var(--ink-faint);padding:2px 6px;
  border-radius:7px;opacity:.75;font-weight:700;cursor:pointer}
.pstn:hover{background:var(--panel2);color:var(--dsgn);opacity:1}
.psdrop{border:2px dashed var(--line);border-radius:14px;background:var(--panel2);padding:38px 18px;
  text-align:center;color:var(--ink-faint);font-size:13.5px;cursor:pointer}
.psdrop b{display:block;color:var(--ink);font-size:16px;margin-bottom:5px}
.psdrop:hover{border-color:var(--dsgn)}
/* 끌어다 놓는 중 — 놓아도 되는 자리인지 눈으로 알려 준다 */
.psdrop.over,.pspanel.over{border-color:var(--dsgn);
  background:color-mix(in srgb,var(--dsgn) 8%,var(--panel2))}
.pspanel.over{outline:2px dashed var(--dsgn);outline-offset:-4px}

.psrow{display:flex;gap:16px;align-items:flex-start}
.pssrc{width:346px;flex:none}
.psmain{flex:1;min-width:0}
.pspanel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.pspanel+.pspanel{margin-top:12px}
.pslab{font-size:12.5px;color:var(--ink-faint);font-weight:800;margin:0 0 7px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pslab.psres{margin:18px 0 0}
.pssrcimg{width:100%;border-radius:12px;border:1px solid var(--line2);display:block}
.pstag{border-radius:99px;padding:2px 9px;font-size:11.5px;font-weight:800;font-family:var(--mono);
  border:1px solid var(--line);color:var(--ink-faint);background:var(--panel2);white-space:nowrap}
.pstag.form{border-color:color-mix(in srgb,var(--prod) 40%,var(--line));color:var(--prod);
  background:color-mix(in srgb,var(--prod) 9%,var(--panel))}
.pstag.said{border-color:color-mix(in srgb,var(--dev) 40%,var(--line));color:var(--dev);
  background:color-mix(in srgb,var(--dev) 9%,var(--panel))}
.pstag.ref{border-color:color-mix(in srgb,var(--free) 40%,var(--line));color:var(--free);
  background:color-mix(in srgb,var(--free) 9%,var(--panel))}
.pstag.risk{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));color:var(--warn);
  background:color-mix(in srgb,var(--warn) 9%,var(--panel))}

/* 판독 — 고칠 수 있다는 것이 눈에 보여야 한다 */
.psrd{display:flex;gap:8px;align-items:baseline;padding:5px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.psrd:last-child{border-bottom:0}
.psrd .k{flex:none;width:72px;color:var(--ink-faint);font-size:12.5px}
.psrd .v{flex:1;color:var(--ink);min-width:0;word-break:break-word}
.psrd.edited .v::after{content:" 고침";font-size:11px;color:var(--dsgn);font-weight:800;font-family:var(--mono)}
.psrd input{width:100%;border:none;background:none;font-size:13.5px;
  border-bottom:1.5px solid var(--dsgn);outline:none;color:inherit}
.psie{border:none;background:none;font-size:12px;color:var(--ink-faint);opacity:.55;
  padding:1px 5px;border-radius:6px;cursor:pointer}
.psie:hover{background:var(--panel2);color:var(--dsgn);opacity:1}

/* 레퍼런스 — 무엇을 가져올지 칩으로 */
.psref{border-top:1px solid var(--line2);padding-top:9px;margin-top:9px}
.psref:first-of-type{border-top:0;padding-top:0;margin-top:0}
.psrt{display:flex;gap:6px;align-items:center;font-size:13.5px;font-weight:800;margin-bottom:6px}
.psrefimg{width:100%;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line2);display:block}
.psrefph{border:1.5px dashed var(--line);border-radius:10px;padding:14px 10px;text-align:center;
  color:var(--ink-faint);font-size:12.5px}
.pschips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.pschip{border:1px solid var(--line);background:var(--panel2);color:var(--ink-faint);
  border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:700;cursor:pointer}
.pschip.on{border-color:var(--dsgn);color:var(--dsgn);background:color-mix(in srgb,var(--dsgn) 9%,var(--panel))}
.pschip i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.75;margin-left:3px}

/* 컷 */
.pstop{display:flex;gap:9px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.pshint{flex:1;font-size:13.5px;color:var(--ink-soft);min-width:200px}
.psskip{border:1px dashed var(--line);border-radius:11px;padding:7px 11px;font-size:12.5px;
  color:var(--ink-faint);margin-bottom:9px}
.psempty{border:1.5px dashed var(--line);border-radius:13px;padding:26px;text-align:center}
.psempty2{grid-column:1/-1;color:var(--ink-faint);font-size:13.5px;border:1.5px dashed var(--line);
  border-radius:13px;padding:26px;text-align:center}
.pscut{background:var(--panel);border:1.5px solid var(--line);border-radius:13px;
  padding:11px 13px;margin-bottom:9px}
.pscut.on{border-color:var(--dsgn);background:color-mix(in srgb,var(--dsgn) 4%,var(--panel))}
.pshd{display:flex;gap:11px;align-items:flex-start}
.psck{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);
  background:var(--panel);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:transparent;margin-top:2px;cursor:pointer;padding:0}
.pscut.on .psck{background:var(--dsgn);border-color:var(--dsgn);color:#fff}
.psbd{flex:1;min-width:0}
.pstt{font-size:14.5px;font-weight:800;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.psrs{font-size:13px;color:var(--ink-soft);margin-top:3px}
.psthumb{flex:none;width:62px}
.psfake{background:linear-gradient(165deg,#5E7E68,#2C4437);border-radius:9px;position:relative;
  display:flex;align-items:center;justify-content:center;font-size:17px;overflow:hidden}
.pspad{position:absolute;border:1.5px dashed rgba(255,255,255,.55);border-radius:5px;
  font-family:var(--mono);font-size:9px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85)}
.pspad.top{left:5px;right:5px;top:5px}
.pspad.bottom{left:5px;right:5px;bottom:5px}
.pspad.left{left:5px;top:5px;bottom:5px}
.pspad.right{right:5px;top:5px;bottom:5px}
.psopt{display:flex;gap:14px;align-items:center;margin-top:9px;flex-wrap:wrap;
  padding-top:9px;border-top:1px solid var(--line2)}
.psg{display:flex;gap:6px;align-items:center}
.psol{font-size:11.5px;color:var(--ink-faint);font-weight:800}
.psseg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.psseg button{border:0;background:none;padding:3px 8px;font-size:12px;font-weight:700;
  color:var(--ink-faint);cursor:pointer}
.psseg button.on{background:color-mix(in srgb,var(--dsgn) 10%,var(--panel));color:var(--dsgn)}
.psseg button+button{border-left:1px solid var(--line2)}
.psseg button:disabled{opacity:.35;cursor:not-allowed}
.psfree{margin-top:12px}
/* 추가 버튼은 칸에 붙는다 — 글을 적는 곳과 누르는 곳이 떨어져 있으면 한 번 더 찾게 된다.
   칸 세로 크기를 늘려도 따라오도록 **칸을 감싼 상자** 기준으로 앉힌다 */
.psfreebox{position:relative}
.psfreebox textarea{display:block;padding-bottom:40px}
.psfreebox .mini{position:absolute;right:8px;bottom:8px}
.psbar{position:sticky;bottom:0;margin-top:12px;background:var(--panel);border:1.5px solid var(--line);
  border-radius:13px;padding:10px 14px;display:flex;gap:11px;align-items:center;flex-wrap:wrap;
  box-shadow:var(--shadow);z-index:2}
.pscnt{font-size:14px;font-weight:800}
.psest{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}

/* 결과 */
.psgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px;margin-top:10px}
.pscard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:9px;
  display:flex;flex-direction:column;gap:7px}
.pscard.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.pswrap{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line2)}
.pswrap.zoom{cursor:zoom-in}
.pswrap.zoom:hover{border-color:var(--dsgn)}
.pswrap img{width:100%;height:100%;object-fit:cover;display:block}
.psrun{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.5);color:#fff;
  border-radius:6px;padding:1px 7px;font-size:11px;font-family:var(--mono)}
.psct{font-size:13.5px;font-weight:800;display:flex;gap:6px;align-items:center}
.psacts{display:flex;gap:5px;flex-wrap:wrap}
.psacts .mini{padding:3px 8px;font-size:12px;border-radius:8px;text-decoration:none;
  display:inline-flex;align-items:center}
.psph{border-radius:11px;border:1.5px dashed var(--line);background:var(--panel2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--ink-faint);font-size:12.5px;text-align:center;padding:0 10px}
.psqn{font-family:var(--mono);font-size:11.5px}
.psline{width:74%;height:5px;border-radius:99px;background:var(--line);overflow:hidden;display:block}
.psline i{display:block;height:100%;width:30%;background:var(--dsgn);border-radius:99px;
  animation:psrun 1.4s var(--ease) infinite}
@keyframes psrun{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.psbadge{border-radius:99px;padding:2px 8px;font-size:11px;font-weight:800;font-family:var(--mono);
  border:1px solid transparent}
.psbadge.ok{color:var(--won);background:color-mix(in srgb,var(--won) 11%,var(--panel));
  border-color:color-mix(in srgb,var(--won) 30%,var(--line))}
.psbadge.bad{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--warn) 34%,var(--line));cursor:pointer}
.psbadge.wait{color:var(--ink-faint);background:var(--panel2);border-color:var(--line)}
.psgens{display:flex;gap:5px;flex-wrap:wrap}
.psgen{width:40px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;
  padding:0;cursor:pointer;background:none}
.psgen.on{border-color:var(--dsgn)}
.psgen img{width:100%;height:100%;object-fit:cover;display:block}

/* 창 */
.psmodal{position:fixed;inset:0;background:rgba(15,20,32,.45);display:flex;
  align-items:center;justify-content:center;z-index:90;padding:20px}
.psbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  width:min(780px,95vw);max-height:88vh;overflow:auto;padding:16px 18px}
.psmh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.psmh b{font-size:16px}
.psmh .mini{margin-left:auto}
.psmf{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.psmenu{position:absolute;z-index:95;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:5px;min-width:206px}
.psmenu .hd{font-size:11.5px;color:var(--ink-faint);padding:5px 11px 3px;font-weight:800}
.psmenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 11px;
  border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;color:inherit}
.psmenu button:hover{background:var(--panel2);color:var(--dsgn)}

/* 프롬프트 5부품 */
.pspm{display:grid;gap:9px}
.pspart{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.psph2{display:flex;gap:8px;align-items:center;padding:7px 11px;background:var(--panel2);
  border-bottom:1px solid var(--line2);font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.psph2 .no{font-family:var(--mono);color:var(--dsgn);font-weight:800}
.psph2 .src{margin-left:auto;font-size:11px;color:var(--ink-faint);font-weight:700;font-family:var(--mono)}
.pspt{padding:9px 11px;font-family:var(--mono);font-size:12px;line-height:1.62;
  color:var(--ink-soft);white-space:pre-wrap;outline:none}
.pspt[contenteditable]:focus{background:color-mix(in srgb,var(--dsgn) 5%,var(--panel))}
.pspart.auto .pspt,.pspart.lock .pspt{color:var(--ink-faint)}
.pspart.lock .pspt{background:var(--panel2)}
.pspart.key{border-color:color-mix(in srgb,var(--dsgn) 45%,var(--line))}
.pspart.key .psph2{background:color-mix(in srgb,var(--dsgn) 8%,var(--panel));color:var(--dsgn)}

/* 검수 · 고치기 · 폰트 */
/* 크게 보기 — **폭이 아니라 높이를 기준으로** 맞춘다. width:100% 로 두면 9:16 컷이
   창보다 길어져 스크롤해야 전체가 보인다. 「한눈에 보고 쓸지 정하는」 자리라 그러면 안 된다 */
.psbig{display:block;margin:0 auto 12px;max-width:100%;max-height:70vh;width:auto;
  border-radius:12px;object-fit:contain;background:var(--panel2)}
.psck2{display:flex;gap:8px;align-items:center;padding:7px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.psck2:last-child{border-bottom:0}
.psck2 .kk{flex:1}
.psck2 .vv{font-size:12.5px;color:var(--ink-faint)}
.psck2.bad .kk{color:var(--warn);font-weight:700}
.psfixrow{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.psfixl{flex:none;width:290px}
.psfixr{flex:1;min-width:280px}
.psfixtabs{margin-bottom:13px}
.psfixtabs button{padding:6px 13px;font-size:13.5px}
.psstage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line2);
  touch-action:none;user-select:none}
.psstage img{width:100%;display:block}
.psmask{position:absolute;border:2px solid var(--dsgn);border-radius:6px;
  background:color-mix(in srgb,var(--dsgn) 22%,transparent)}
.psftxt{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 14px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45);pointer-events:none}
.psftxt .h{font-weight:800;line-height:1.28;letter-spacing:-.02em}
.psftxt .s{font-size:13px;opacity:.92}
.psftip{position:absolute;left:0;right:0;top:6%;text-align:center;color:#fff;font-size:11.5px;
  font-family:var(--mono);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.psfont{display:block;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--panel);
  border-radius:12px;padding:9px 11px;margin-bottom:7px;cursor:pointer;color:inherit}
.psfont.on{border-color:var(--dsgn);background:color-mix(in srgb,var(--dsgn) 5%,var(--panel))}
.psfont .fn{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.psfont .fn i{font-style:normal;font-size:11.5px;color:var(--ink-faint);font-family:var(--mono)}
.pslic{border-radius:99px;padding:1px 8px;font-size:11px;font-weight:800;font-family:var(--mono);
  border:1px solid var(--line);color:var(--ink-faint);background:var(--panel2)}
.psfont .fp{font-size:22px;margin-top:6px;line-height:1.3;letter-spacing:-.02em}
.pstbl tr.off td{opacity:.45}
.psw{width:38px;height:21px;border-radius:99px;border:1.5px solid var(--line);background:var(--panel2);
  position:relative;padding:0;cursor:pointer}
.psw::after{content:"";position:absolute;left:2px;top:1.5px;width:15px;height:15px;border-radius:50%;
  background:var(--ink-faint);transition:all var(--t-fast) var(--ease)}
.psw.on{background:color-mix(in srgb,var(--dsgn) 22%,var(--panel));border-color:var(--dsgn)}
.psw.on::after{left:19px;background:var(--dsgn)}
.psw:disabled{opacity:.4;cursor:not-allowed}
.pssel{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.psth{width:48px;height:62px;border-radius:9px;overflow:hidden;border:2px solid var(--dsgn);
  padding:0;cursor:pointer;background:none;position:relative}
.psth.off{border-color:var(--line);opacity:.42}
.psth img{width:100%;height:100%;object-fit:cover;display:block}
.psth i{position:absolute;right:1px;top:1px;font-size:11px;font-style:normal}

@media(max-width:960px){
  .psrow{flex-direction:column}
  .pssrc{width:100%}
  .psfixl{width:100%}
}

/* ── 기다리는 중 (2026-08-23 사용자) ──
 * 구상은 10~20초, 판독은 3초다. 그 사이 화면이 그대로면 사람은 한 번 더 누르고,
 * 한 번 더 누르면 돈이 두 번 나간다. 그래서 **나올 것의 자리를 미리 잡는다** —
 * 결과 격자의 「그리는 중」과 같은 문법이고, 토스트로 대신하지 않는다. */
.psconch{display:flex;align-items:center;gap:8px;font-size:14px}
.psconch b{font-weight:800}
.psconc{border:1.5px dashed var(--line);border-radius:13px;padding:11px 13px;margin-bottom:9px;
  background:color-mix(in srgb,var(--dsgn) 4%,var(--panel))}
.psspin{flex:none;width:15px;height:15px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--dsgn);animation:psspin .8s linear infinite}
@keyframes psspin{to{transform:rotate(360deg)}}
/* 뼈대 — 내용이 아니라 «몇 개가, 어떤 모양으로» 올지를 말한다 */
.pscut.psskel{border-style:dashed;opacity:0;animation:psfade .35s var(--ease) forwards}
@keyframes psfade{to{opacity:.85}}
/* ⚠️ 이름은 `.psskb` 다 — 처음에 `.psbar` 로 썼다가 **하단 액션바(.psbar)를 덮어써서**
   그 바가 11px 로 눌리고 반이 잘렸다. 전역 한 파일이라 짧은 이름은 남의 규칙에 걸린다. */
.psskb{height:11px;border-radius:6px;background:var(--line2);position:relative;overflow:hidden}
.psskb+.psskb{margin-top:8px}
.psskb.w60{width:60%}
.psskb.w90{width:90%;height:9px;background:var(--line2);opacity:.7}
.psskb.thumb{width:100%;aspect-ratio:3/4;height:auto;border-radius:9px}
/* 훑고 지나가는 빛 — 멈춰 있지 않다는 것만 말하면 된다 */
.psskb::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panel) 70%,transparent),transparent);
  animation:pssheen 1.3s var(--ease) infinite}
@keyframes pssheen{to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){
  .psskb::after,.psspin,.psline i{animation:none}
  .pscut.psskel{animation:none;opacity:.85}
}

/* 🔤 폰트 대장 — 🛠️ 시스템 → 🔑 권한 (2026-08-23) */
.ftbl{margin:6px 0 10px}
.ftbl tr.off td{opacity:.45}
.ftbl .mono{font-family:var(--mono);font-size:12.5px}
.ftag{display:inline-block;border:1px solid var(--line);background:var(--panel2);color:var(--ink-faint);
  border-radius:99px;padding:1px 9px;font-size:11.5px;font-weight:700;margin:0 3px 3px 0}
.fadd{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.fadd .fld{width:auto;flex:1;min-width:130px}
.syssw:disabled{opacity:.4;cursor:not-allowed}

/* ═══════ 🧠 브레인스토밍 (2026-08-25 · mockup/ideamap_mockup_v2.html) ═══════
 *
 * 새로 만든 옷은 두 벌뿐이다: 채팅에 붙는 두 줄(.sugline · .onmap)과 맵 화면(.bm*).
 * 나머지는 전부 이미 있는 문법을 그대로 쓴다 — .mmodal · .fxmenu · .mini · .empty.
 */

/* 맵에 있다는 표시 — 카드 승격 줄(.promoted)과 마주 보는 한 쌍이라 같은 문법을 쓴다 */
.onmap{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-top:6px;
  font-family:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;line-height:1.5;
  background:color-mix(in srgb,var(--idea) 7%,var(--panel));
  border:1px dashed color-mix(in srgb,var(--idea) 35%,var(--line));border-radius:10px;padding:7px 11px;
  transition:background .13s var(--ease),border-color .13s var(--ease)}
.onmap:hover{background:color-mix(in srgb,var(--idea) 13%,var(--panel));border-color:var(--idea)}
.onmap .pi{flex:none}
.onmap .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onmap .pt b{color:var(--ink);font-weight:800}
.onmap .go{flex:none;color:var(--idea);font-weight:800;white-space:nowrap;opacity:.75}
.onmap:hover .go{opacity:1}
.hover .lbl.brain:hover{background:color-mix(in srgb,var(--idea) 12%,var(--panel2));color:var(--idea)}

/* ── 고르기 — 여러 글을 묶어 보낼 때만 ── */
.msg .bpick{position:absolute;left:-4px;top:9px;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--panel);display:none;place-items:center;
  font-size:12px;font-weight:800;color:var(--idea);padding:0;z-index:3}
.msg:hover .bpick,.msg.picked .bpick{display:grid}
.msg.picked{background:color-mix(in srgb,var(--idea) 7%,var(--panel))}
.msg.picked .bpick{border-color:var(--idea);background:color-mix(in srgb,var(--idea) 12%,var(--panel))}
.msg.picked .bpick::after{content:"✓"}
/* 고르는 동안 머리글이 통째로 이 줄로 바뀐다 — 새 화면을 만들지 않는다 */
.chhead.picking > *:not(.pickbar){display:none}
.pickbar{display:flex;align-items:center;gap:8px;width:100%}
.pickbar .pn{font-size:13.5px;font-weight:800;color:var(--idea)}
.pickbar .mini.pri{background:var(--idea);border-color:var(--idea)}

/* 🧠 맵 창들은 **채팅 플로팅창(z 88)보다 위**여야 한다 — 제안 「붙이기」·「만들기」를
   채팅 안에서 누르므로, 기본 z(86)로 두면 방금 누른 그 채팅 뒤로 창이 깔린다
   (2026-08-25 사용자 스크린샷). 읽음확인·지난 알림이 같은 사정으로 96에 있다 */
#brNew,#brBranch{z-index:96}

/* ── 맵 화면 ── */
.bmwrap{display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:12px;
  grid-template-rows:minmax(0,1fr);flex:1;min-height:0;width:100%}
.bmwrap > *{min-height:0}
.bmlist{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;padding:0}
.bmlist .ptitle{padding:15px 16px 0;margin-bottom:8px;flex:none}
.bmscroll{overflow-y:auto;padding:0 10px 6px;min-height:0;flex:1}
.bmscroll .grp{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-faint);padding:12px 8px 5px}
.bmnew{padding:6px 12px 12px;flex:none}
.bmnew .mini{width:100%}
.bmmap{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;background:none;
  border:0;border-radius:10px;padding:8px 9px;color:var(--ink-soft);font-family:inherit}
.bmmap:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.bmmap.on{background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:7px 8px}
.bmmap .mn{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.4}
.bmmap .ms{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-top:2px}
.bmmap .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--idea);margin-top:6px;opacity:.45}
.bmmap.on .dot{opacity:1}
.bmpanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.bmhead{display:flex;align-items:center;gap:9px;padding:12px 16px 11px;
  border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.bmhead h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.bmhead .cnt{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono)}
.brdots{border:0;background:none;color:var(--ink-faint);font-size:15px;padding:2px 6px;border-radius:7px;flex:none}
.brdots:hover{background:var(--panel2);color:var(--idea)}
/* 가운데가 비어 보이지 않게 아주 옅은 후광 하나 — 여기가 주제 자리라는 표시 */
/* 판이 아니라 **창**이다 — 넓은 캔버스를 확대·축소·이동해서 본다 (2026-08-25 사용자).
   맵을 판 크기에 맞춰 구겨 넣지 않으므로 가지가 늘어도 배치가 무너지지 않는다 */
/* 판을 끌 때 글자가 딸려 선택되면 안 된다 — 「전체를 잡아서 끄는」 느낌이 난다
   (2026-08-25 사용자 스크린샷). 맵은 읽는 곳이지 긁어 복사하는 곳이 아니다 */
.bmstage{flex:1;position:relative;min-height:0;overflow:hidden;touch-action:none;
  user-select:none;-webkit-user-select:none;
  cursor:grab;background:
  radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--idea) 5%,transparent) 0%,transparent 62%)}
.bmstage.panning{cursor:grabbing}
.bmcanvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  transition:transform var(--t-slow) var(--ease)}
.bmcanvas svg{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
/* 확대·축소 손잡이 — 판 위에 떠 있는 작은 알약 */
.bmzoom{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  box-shadow:var(--shadow);overflow:hidden}
.bmzoom button{border:0;background:none;font-size:15px;font-weight:800;color:var(--ink-soft);
  padding:6px 12px;line-height:1;font-family:inherit}
.bmzoom button:hover{background:var(--panel2);color:var(--idea)}
.bmzoom .lvl{font-family:var(--mono);font-size:12px;font-weight:700;min-width:52px;
  border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
/* width:max-content 가 **없으면 안 된다** — 절대 배치된 알약은 「담는 상자 너비 - left」
   만큼만 쓰려고 해서, 캔버스 오른쪽으로 옮긴 노드가 글자 하나씩 세로로 접힌다
   (2026-08-25 사용자 스크린샷). max-content 는 자리와 무관하게 글 길이로 잡는다 */
.bmnode{position:absolute;z-index:2;transform:translate(-50%,-50%);
  width:max-content;max-width:190px;
  background:var(--panel);border:1.5px solid var(--line);border-radius:999px;padding:7px 14px;
  text-align:left;font-size:13px;font-weight:700;line-height:1.4;color:var(--ink);font-family:inherit;
  cursor:grab;touch-action:none;
  box-shadow:0 2px 8px rgba(20,28,46,.07);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
/* 끄는 동안 — 살짝 떠오른다. 자리는 JS(tick)가 잡으므로 left/top 에는 transition 을 안 건다 */
.bmnode.dragging{cursor:grabbing;z-index:5;border-color:var(--idea);
  box-shadow:0 10px 26px rgba(20,28,46,.22)}
@keyframes kBmPop{from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bmnode.pop{animation:kBmPop var(--t-slow) var(--ease) both}
@media (prefers-reduced-motion:reduce){.bmnode.pop{animation:none}.bmcanvas{transition:none}}
.bmnode:hover{border-color:color-mix(in srgb,var(--idea) 55%,var(--line))}
.bmnode.sel{border-color:var(--idea);box-shadow:0 0 0 3px color-mix(in srgb,var(--idea) 18%,transparent)}
/* 제목은 두 줄까지 — 알약이 세로로 부풀면 이웃을 밀어내 자리를 못 잡는다 */
.bmnode .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bmnode.core .t{-webkit-line-clamp:2}
/* 🌿 가운데를 누르면 가지가 달린다 (2026-08-25 사용자) — 갓 만든 맵에는 누를 것이
   가운데밖에 없다. 빈 맵이면 늘 보이고, 가지가 생기면 손을 올렸을 때만 나온다.
   생성 콘텐츠(::after)가 아니라 **진짜 자식**이다: button 에 붙이면 안쪽 상자가 다시 잡힌다 */
.bmaddcue{display:none;margin-top:5px;font-size:11.5px;font-weight:700;letter-spacing:-.2px;
  color:var(--idea);background:color-mix(in srgb,var(--idea) 14%,transparent);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.bmnode.core.empty .bmaddcue,.bmnode.core:hover .bmaddcue{display:inline-block}
.bmnode .w{display:block;font-size:11px;font-weight:600;color:var(--ink-faint);margin-top:1px}
.bmnode.core{max-width:200px;border-radius:16px;padding:11px 16px;font-size:15.5px;font-weight:800;
  cursor:default;background:color-mix(in srgb,var(--idea) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--idea) 45%,var(--line))}
.bmnode.d2{font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:6px 12px;max-width:158px}
.bmempty{position:absolute;inset:0;display:grid;place-items:center;z-index:3;padding:20px}
.bmfoot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line);flex:none}
.bmfoot .hint{flex:1;font-size:12.5px;color:var(--ink-faint)}
.brfrom{font-size:14px;font-weight:700;padding:10px 12px}
/* 모바일 — 캔버스를 띄우지 않는다. 같은 관계를 들여쓴 목록으로 */
.brtree{padding:12px;overflow-y:auto;height:100%;display:flex;flex-direction:column;align-items:stretch}
/* width:100% 를 쓰면 들여쓴 줄(margin-left)이 그만큼 오른쪽으로 넘친다 —
   부모를 세로 flex 로 두고 늘어나게 한다 */
.brrow{display:flex;gap:8px;align-items:flex-start;text-align:left;font-family:inherit;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:7px}
.brrow.d1{margin-left:16px}
.brrow.d2{margin-left:32px}
.brrow.d3{margin-left:44px}
.brrow .tb{flex:1;min-width:0}
.brrow .tt{display:block;font-size:14px;font-weight:700;line-height:1.45}
.brrow .tw{display:block;font-size:12px;color:var(--ink-faint);margin-top:3px}
.brrow .tgo{flex:none;color:var(--ink-faint);font-weight:800}
.brrow.corerow{border-color:color-mix(in srgb,var(--idea) 40%,var(--line));
  background:color-mix(in srgb,var(--idea) 8%,var(--panel))}
.brrow.corerow .tt{font-size:15px;font-weight:800}
@media (max-width:860px){
  /* 좁은 화면에서는 목록이 위, 맵이 아래 — 두 판을 나란히 세우면 둘 다 못 읽는다 */
  .bmwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:10px}
  .bmlist{max-height:210px}
  .bmstage{background:none}
}
/* 창이 들고 온 「그 글」 — 새 맵 창 안에서 원문을 다시 보여 준다.
   아바타 한 글자 + 본문 세 줄이면 「내가 누른 그 글」이라는 게 읽힌다 */
.brsrc{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line2)}
.brsrc:last-child{border-bottom:0}
.brsrc .av{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;
  background:color-mix(in srgb,var(--c,var(--ink-faint)) 20%,var(--panel));color:var(--c,var(--ink-faint))}
.brsrc p{flex:1;min-width:0;font-size:13.5px;color:var(--ink-soft);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 🧠 끌어다 놓기 — **놓는 곳이 곧 명령이다** (2026-08-25 사용자).
   끌리는 노드는 밑을 가리지 않게 잠깐 투명해진다(그래야 그 아래 것이 잡힌다) */
.bmnode.dragging{pointer-events:none}
.bmnode.drop{border-color:var(--idea);border-style:dashed;
  background:color-mix(in srgb,var(--idea) 12%,var(--panel));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--idea) 16%,transparent)}
.bmmap.drop{background:color-mix(in srgb,var(--idea) 12%,var(--panel));
  outline:2px dashed color-mix(in srgb,var(--idea) 55%,var(--line));outline-offset:-2px}
/* ⋯ 메뉴에서 「줄 = 고르기 · › = 한 단계 안으로」 */
.fxmenu .brrow2{display:flex;align-items:center;gap:6px}
.fxmenu .brrow2 .sp{flex:1}
/* `›` 는 「누르면 들어간다」를 말해 주는 **표시**다 — 따로 눌리는 자리가 아니다.
   예전엔 여기만 들어가기였고 이름은 붙이기라, 눈에 띄는 쪽이 되돌릴 수 없는 쪽이었다
   (2026-08-27 사용자). pointer-events 를 끄면 줄 전체가 하나의 과녁이 된다 */
.fxmenu .brinto{pointer-events:none;flex:none;width:22px;text-align:center;border-radius:6px;
  color:var(--ink-faint);font-weight:800}
.fxmenu .brrow2:hover .brinto{color:var(--idea)}
.fxmenu button.pri{color:var(--idea);font-weight:800}

/* 🤖 「맵으로」 팝오버 맨 위의 추천 한 줄 — 누른 그 순간에 판정한 결과다.
   답이 없으면 이 줄만 조용히 사라진다(목록은 이미 쓸 수 있다) */
.fxmenu .brtip{display:flex;align-items:center;gap:8px;width:100%;
  background:color-mix(in srgb,var(--idea) 8%,var(--panel));
  border:1px dashed color-mix(in srgb,var(--idea) 38%,var(--line));border-radius:9px;
  padding:8px 10px;margin-bottom:2px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.fxmenu .brtip:disabled{opacity:.6;cursor:default}
.fxmenu .brtip:hover:not(:disabled){background:color-mix(in srgb,var(--idea) 15%,var(--panel));
  border-color:var(--idea);color:var(--ink)}
.fxmenu .brtip .ic{flex:none}
.fxmenu .brtip .tx{flex:1;min-width:0;text-align:left;line-height:1.45}
.fxmenu .brtip .go{flex:none;color:var(--idea);font-weight:800;white-space:nowrap}

/* 🎨 색 고르기 — 맵 ⋮ 와 프로젝트 도구줄이 같은 옷을 입는다 (2026-08-25 사용자).
   토큰 이름만 저장하므로 다크 모드에서도 색이 같이 바뀐다 */
/* 격자로 놓는다 — 세로로만 쌓이면 메뉴가 길어져 아래 항목이 화면 밖으로 밀린다.
   `.fxmenu button{width:100%}` 이 **더 구체적**이라 그냥 두면 한 줄에 하나씩 선다(2026-08-25 사용자) */
.brswatch{display:grid;grid-template-columns:repeat(6,22px);gap:6px;padding:4px 10px 9px;
  justify-content:start}
.fxmenu .brswatch .bmsw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  padding:0;background:var(--sw,var(--line));box-shadow:0 0 0 1px var(--line2) inset;
  display:block;transition:transform .12s var(--ease)}
.fxmenu .brswatch .bmsw:hover{transform:scale(1.14);background:var(--sw,var(--line))}
.fxmenu .brswatch .bmsw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--panel) inset}
.fxmenu .brswatch .bmsw.none{background:repeating-linear-gradient(-45deg,var(--line2) 0 4px,var(--panel) 4px 8px)}
/* 🗂️ 카드의 📁 프로젝트 배지 — 프로젝트 색을 입는다 */
.kproj[style*="--pc"]{color:var(--pc);border-color:color-mix(in srgb,var(--pc) 40%,var(--line))}
/* 프로젝트 색 단추 — 지금 색을 그대로 보여 준다 (그림 대신 색이 상태다).
   모양은 **파트 칩 그대로**다: 별도 크기를 주면 같은 줄에서 혼자 작아진다
   (2026-08-25 사용자 스크린샷 — width:26px·padding:0 이 높이를 무너뜨렸다) */
.board-tools .chip.pjcolor i{width:11px;height:11px;box-shadow:0 0 0 1px var(--line2) inset}

/*
 * ═══ 🧾 회계 3.8.0 — 요약 띠 · 탭 넷 · 결재선 · 계좌 ═══════════════════════
 * 판 여덟 개 세로 스택을 **탭 넷 + 큐 하나**로 접었다. 이름은 전부 ac* —
 * style.css 는 스코프가 없는 단일 파일이라 짧은 이름(.fl·.ck)은 남의 규칙에 걸린다.
 */
.acsp{flex:1}

/* 맨 위 띠 — 이 달의 매출·지출·차액과 오늘. 탭을 옮겨도 안 사라진다 */
.acsum{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:12px 0}
.acsb{display:flex;flex-direction:column;line-height:1.25;padding:2px 14px 2px 0;
  border-right:1px solid var(--line2)}
.acsb:last-of-type{border-right:0}
.acsb>span{font-size:11.5px;font-weight:800;color:var(--ink-faint)}
.acsb>b{font-size:19px;font-weight:800;font-family:var(--mono);font-variant-numeric:tabular-nums}
.acsb.in>b{color:var(--won)}
.acsb.out>b{color:var(--warn)}
.acsb.net>b.p{color:var(--won)}
.acsb.net>b.m{color:var(--red)}
.actd{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:11px;
  padding:5px 11px;background:var(--panel2);flex:none}
.actd>span{font-size:12px;font-weight:800;color:var(--ink-faint)}
.actd i{font-style:normal;font-size:13.5px;font-weight:800;font-family:var(--mono)}
.actd i.in{color:var(--won)}
.actd i.out{color:var(--red)}

/* 탭 넷 — 작업소 관리(.systabs)와 같은 문법 */
.actabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.actabs button{border:1.5px solid var(--line);background:var(--panel);border-radius:11px;
  padding:7px 14px;font-size:14px;font-weight:800;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.actabs button:hover{border-color:var(--acct);color:var(--acct)}
.actabs button.on{background:var(--acct);border-color:var(--acct);color:#fff}
.actabs .n{font-family:var(--mono);font-size:11.5px;font-weight:800;background:var(--red);color:#fff;
  border-radius:99px;padding:0 6px;line-height:1.55}
.actabs button.on .n{background:rgba(255,255,255,.28)}

/* 큐 필터 — 기본은 「내 차례」 */
.acbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.acf{border:1.5px solid var(--line);background:var(--panel2);border-radius:99px;padding:4px 12px;
  font-size:13px;font-weight:800;color:var(--ink-faint)}
.acf:hover{border-color:var(--acct);color:var(--acct)}
.acf.on{background:var(--acct);border-color:var(--acct);color:#fff}
.acf .n{font-family:var(--mono);margin-left:5px}
.acbulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--acct) 10%,var(--panel));
  border:1.5px solid color-mix(in srgb,var(--acct) 40%,var(--line));border-radius:11px;
  padding:7px 12px;margin-bottom:10px;font-size:13.5px;font-weight:800}
.acbulk b{font-family:var(--mono)}

/* 결재 줄 — .aq 위에 얹는다 */
.acq{align-items:flex-start;flex-wrap:wrap;padding:11px 2px}
.acq .acck{flex:none;width:18px;display:flex;align-items:center;justify-content:center;padding-top:3px}
.acq .acck input{width:16px;height:16px;accent-color:var(--acct);cursor:pointer}
.acq .aw{display:flex;flex-direction:column;gap:3px}
.acq .act1{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.acq .act1 b{font-size:14.5px;font-weight:800}
.acq .amt{font-size:16px;min-width:96px;text-align:right;padding-top:1px}
.acq .aqacts{padding-top:1px}
.acq .renote{display:block;font-size:12.5px;margin-top:2px}
.acq .hohold{flex-basis:100%;flex-direction:row;gap:7px;align-items:flex-start}
.acq .hohold textarea{flex:1}
.acq .hohold button{align-self:auto}
.acwsx{margin-top:4px;padding-top:6px;border-top:1px solid var(--line2)}

/* 결재선 — 「전결·상신」을 낱말이 아니라 그림으로.
   전결 안이면 대표 칸을 아예 안 그린다: 없는 단계를 회색으로 세워 두면 매번 다시 읽어야 한다.

   칸의 **옷은 채팅의 @언급(.mention)과 같다** (2026-08-26 사용자: 「다를 이유가 없다」).
   .mention 이 이미 「부르는 자리가 어디든 같은 옷」이라는 규칙을 달고 있는데, 사람 이름을
   같은 앱 안에서 여기만 다른 모양으로 그릴 이유가 없다: 옅은 바탕 + 같은 색 글자 + 4px 모서리.
   달라지는 것은 **색뿐**이고, 색은 그 단계가 지났는지를 말한다.
   아바타 동그라미는 걷었다 — @언급에 없는 물건이고, `<i>` 라 한 글자 한글이 기울어져 박혔다. */
.acflow{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.acfl{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;
  border-radius:4px;padding:1px 5px;white-space:nowrap;
  color:var(--ink-faint);background:color-mix(in srgb,var(--ink-faint) 13%,transparent)}
/* 칩 속 얼굴 — 회의 참석자 칩(.ivp .oa)과 같은 문법이다. .oa 는 오피스용 크기라
   그대로 두면 칩 밖으로 튄다. 사진이 있으면 전역 `.oa:has(.avimg)` 가 바탕을 지운다 */
.acfl .oa{width:16px;height:16px;font-size:9.5px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;flex:none;margin:0;cursor:pointer;
  background:color-mix(in srgb,var(--oc) 20%,var(--panel));color:var(--oc)}
.acfl.done{color:var(--won);background:color-mix(in srgb,var(--won) 12%,transparent)}
.acfl.now{color:var(--warn);background:color-mix(in srgb,var(--warn) 20%,transparent)}
.acfl.no{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.acfa{color:var(--ink-faint);font-size:12px}

/* 🏦 계좌 */
.acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.accard{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel2)}
.accard.main{border-color:var(--acct)}
.accard .h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.accard .h b{font-size:15px;font-weight:800}
.accard .no{font-size:13px;color:var(--ink-faint);font-weight:700}
.accard .bal{font-size:21px;font-weight:800;margin:7px 0 2px}
.accard .fl2{display:flex;gap:12px;font-size:13px;font-weight:800}
.accard .fl2 .i{color:var(--won)}
.accard .fl2 .o{color:var(--red)}
.accard .acts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

/* 📒 장부 소계 막대 — 계정과목과 계좌를 같은 문법으로 */
.aclgc{display:flex;flex-direction:column;gap:5px;margin:2px 0 12px}
.acbyacc{padding-top:10px;border-top:1px solid var(--line2)}
.aclgb{display:flex;align-items:center;gap:9px;font-size:13px}
.aclgb .nm{width:92px;flex:none;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aclgb .bar{flex:1;height:9px;border-radius:99px;background:var(--panel2);overflow:hidden;min-width:40px}
.aclgb .bar i{display:block;height:100%;border-radius:99px;background:var(--acct)}
.aclgb .vv{font-weight:800;flex:none;width:96px;text-align:right}
.acbyacc .aclgb .bar i{background:var(--dev)}

/* 지출 | 입금 — 같은 문의 두 갈래 */
.acseg{display:inline-flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;
  flex:none;margin-left:10px}
.acseg button{border:0;background:var(--panel);padding:3px 11px;font-size:13px;font-weight:800;
  color:var(--ink-faint)}
.acseg button+button{border-left:1.5px solid var(--line)}
.acseg button.on{background:var(--acct);color:#fff}

/* 💸 출금 창 — 무엇을 얼마 · 누가 올렸고 · 어디로 보내는지 */
.acpay{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  font-size:13.5px}
.acpay .l{display:flex;gap:8px;padding:2px 0}
.acpay .l span{color:var(--ink-faint);font-weight:800;width:62px;flex:none}
.acm .mmbox{width:min(500px,100%)}
.mini.ghost2{border-color:transparent;background:none;color:var(--ink-faint);font-weight:700}
.mini.ghost2:hover{border-color:var(--line);color:var(--ink-soft)}

/* 달력 — 들어온 돈은 초록 +, 나간 돈은 그대로.
   칸 너비를 **0 까지 줄 수 있게** 한다: 1fr 은 min-content 를 지켜서 금액이 긴 달에
   토요일 칸이 판 밖으로 밀려났다 (repeat(7,1fr) → minmax(0,1fr)) */
.mogrid{grid-template-columns:repeat(7,minmax(0,1fr))}
.mocell{min-width:0;overflow:hidden}
.mocell .dsum{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.mocell .dsum .i{color:var(--won)}
.mocell .dsum .o{color:var(--warn)}
.morow .amt{margin-left:auto;font-family:var(--mono);font-weight:800;
  font-variant-numeric:tabular-nums;flex:none}
.morow .amt.in,.acq .amt.in{color:var(--won)}

/* ═══ 🧾 회계 3.48.0 — 사실 | 계획 | 잔액 · 고정비 줄 · 접은 계좌 ═══
   이름은 전부 ac* 그대로. fx* 는 파일함이 이미 쓰고 있어 피한다(전역 한 파일) */

/* 띠의 사실↔계획 경계 — 세로 점선 한 줄. 왼쪽은 통장에서 오간 돈, 오른쪽은 아직 아닌 것 */
.acsplit{width:0;align-self:stretch;border-left:1.5px dashed var(--line);margin:0 14px 0 0}
.acsb.plan>b{color:var(--ink-soft)}
.acsb.bal>b{color:var(--acct)}

/* 🔁 이 달 고정 지출 줄 — 달력 위. 옮긴 것은 사라지고 남은 것만 선다 */
.acfx{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px;
  padding:9px 12px;background:var(--panel2);border-radius:12px}
.acfx .lb{font-size:12px;font-weight:800;color:var(--ink-faint);flex:none}
.acfxc{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);
  background:var(--panel);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:800;
  color:var(--ink-soft);transition:border-color var(--t-fast) var(--ease)}
.acfxc:hover{border-color:var(--acct);color:var(--acct)}
.acfxc .a{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink-faint);
  font-variant-numeric:tabular-nums}
.acfxc.late{border-color:color-mix(in srgb,var(--red) 48%,transparent);color:var(--red)}
.acfxc.late:hover{background:color-mix(in srgb,var(--red) 8%,transparent);border-color:var(--red)}
.acfxc.late .a{color:var(--red)}

/* 🕰 큐에 선 지난 일정 — 지출 줄과 **다른 옷**(점선): 아직 사실이 아니다 */
/* 지난 일정 줄 (3.48.3 사용자) — 옆 줄과 **글자 시작이 어긋나고 가운데가 안 맞았다**.
   원인이 셋이었고, 셋 다 「이 줄만 다르게」에서 나왔다:
   ① 좌우 여백을 따로 줬다(12px vs 옆 줄 2px). ② 테두리 1.5px 가 box-sizing 때문에
      안쪽을 먹어 여백을 맞춰도 1px 이 남았다. ③ 좁은 화면에서는 옆 줄의 체크칸이
      auto 로 줄어드는데 이 줄의 **빈** 체크칸은 0 이 돼 14px 이 어긋났다.
   그래서 **셈으로 맞추지 않는다**:
   · 여백은 아예 안 건드린다 — .acq 것을 화면 크기마다 그대로 물려받는다
   · 점선 상자는 border 가 아니라 **outline** 이다. 레이아웃에 안 끼므로 어긋날 자리가 없다
   · 빈 체크칸에 체크박스와 같은 크기의 받침(.ackpad)을 넣어 폭이 스스로 따라오게 한다
   ④ .acq 는 두 줄(제목 + 결재선)이라 flex-start 인데 이 줄은 한 줄이다 — 가운데가 맞다. */
.aq.acplan{outline:1.5px dashed color-mix(in srgb,var(--warn) 45%,var(--line));outline-offset:-1.5px;
  border-radius:12px;background:color-mix(in srgb,var(--warn) 5%,transparent);
  margin-bottom:8px;align-items:center}
.aq.acplan .acck{padding-top:0}
.ackpad{display:block;width:16px;height:16px}
.achip.a-late{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red);
  background:color-mix(in srgb,var(--red) 9%,transparent)}
.achip.a-tgt{border-color:color-mix(in srgb,var(--free) 45%,transparent);color:var(--free);
  background:color-mix(in srgb,var(--free) 9%,transparent)}

/* 🖱️ 파일을 끌어다 놓는 자리 — 결재 줄 · 내 지출 줄 · 첨부 창 (3.48.2 사용자).
   등록 창의 사진 칸(#exDrop.on)과 **같은 옷**이라 새 신호를 배울 게 없다 */
.acdrop{outline:2px dashed var(--acct);outline-offset:-2px;border-radius:12px;
  background:color-mix(in srgb,var(--acct) 8%,transparent)}

/* 📎 첨부 창은 **업무카드의 파일 모듈 옷을 그대로 입는다** (3.48.3 사용자) —
   .fdrop / .cfgrid / .cfcard / .fdadd. 여기 전용 규칙(.acatt)은 걷었다:
   이 창만 자기 문법을 지으니 줄 정렬·버튼 옷이 앱의 다른 첨부 화면과 계속 어긋났다.
   창 안에서 쓰이므로 격자만 조금 좁힌다 */
.acm .fdrop{margin-top:0}
.acm .cfgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}

/* 🏦 접은 계좌 — 지운 것이 아니라 접은 것이라 잔액은 합계에 그대로 센다 */
.acarch{margin-top:12px;border-top:1px solid var(--line2);padding-top:8px}
.acarch summary{font-size:13px;font-weight:800;color:var(--ink-faint);cursor:pointer;padding:4px 2px}
.acarch summary:hover{color:var(--acct)}
.acarow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-faint);
  padding:7px 4px;border-bottom:1px dashed var(--line2)}
.acarow:last-child{border-bottom:0}
.acarow .amt{margin-left:auto;font-family:var(--mono);font-weight:800;
  font-variant-numeric:tabular-nums}

@media (max-width:860px){
  .acsb{border-right:0;padding-right:10px}
  .acsb>b{font-size:17px}
  .acsum{padding:9px 11px;gap:4px}
  .acq{padding:12px 0}
  .acq .amt{min-width:0}
  .acq .acck{width:auto}
  .acq .aqacts{flex-basis:100%;padding-top:4px}
  .aclgb .nm{width:74px}
  .aclgb .vv{width:82px;font-size:12px}
  .acgrid{grid-template-columns:1fr}
  /* 폰에서 제일 자주 누르는 버튼이 28px 이면 안 된다 — 큐의 손과 탭·필터를 손가락 크기로.
     .mini 기본이 28~30px 이라 화면마다 이 한 줄이 없으면 그대로 28px 가 된다 */
  .acq .aqacts .mini,.actabs button{min-height:40px;padding-left:14px;padding-right:14px}
  .acfxc{min-height:36px}
  .acsplit{display:none}
  .acf{min-height:34px;display:inline-flex;align-items:center}
  .acm .mmbox .mini,.acm .mmbox .fld{min-height:42px}
  .acm .mmbox .fld{font-size:16px}      /* 16px 밑이면 iOS 가 칸을 확대한다 */
  /* 좁은 화면에서 칸 안 이름을 접는다 — 금액과 점만 남아도 「무슨 돈이 몰렸나」는 읽힌다 */
  .moitem b{display:none}
}

/* ═══════════ 🛠️ 시스템 v3 (2026-08-26) — 탭 넷 · 사람 한 줄 · 모듈이 설정을 들고 있다
   mockup/system_admin_v3.html 확정판.
   짧은 이름 금지(전역 한 파일): 새 것은 sys* / sy2* 접두어를 쓴다 ═══════════ */

/* ── 찾기 — 메뉴가 늘어도 탭은 넷 그대로다 ── */
.sysfind{position:relative;margin:0 0 12px;max-width:340px}
.sysfind input{width:100%;padding-left:31px}
.sysfind .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;
  color:var(--ink-faint);pointer-events:none}
.sysfres{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px;
  max-height:330px;overflow:auto}
.sysfres button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;border:0;
  background:transparent;border-radius:8px;padding:7px 9px;font-size:13.5px}
.sysfres button:hover{background:var(--panel2)}
.sysfres button b{font-weight:800;flex:none}
.sysfres button .wh{margin-left:auto;flex:none;font-size:11.5px;font-weight:800;color:var(--ink-faint);
  font-family:var(--mono)}
.sysfres .no{padding:14px 10px;text-align:center;color:var(--ink-faint);font-size:13.5px}

/* ── 탭 넷 ── */
.systabs2{display:flex;gap:7px;margin:0 0 12px;flex-wrap:wrap}
.systab2{border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:8px 15px;
  display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:800;color:var(--ink-soft);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.systab2:hover{border-color:var(--dev)}
.systab2.on{background:var(--dev);border-color:var(--dev);color:#fff}
.systab2 .bd{font-family:var(--mono);font-size:11.5px;font-weight:800;background:var(--red);color:#fff;
  border-radius:99px;padding:0 6px;min-width:18px;text-align:center}
.systab2.on .bd{background:rgba(255,255,255,.28)}

/* ── 🏠 지금 ── */
.sy2money{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sy2mc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px;
  display:block;text-align:left;transition:border-color var(--t-fast) var(--ease)}
.sy2mc:hover{border-color:var(--dev)}
.sy2mc.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.sy2mc .l{display:block;font-size:12px;font-family:var(--mono);letter-spacing:.1em;
  color:var(--ink-faint);font-weight:700}
.sy2mc .v{display:block;font-size:29px;font-weight:800;letter-spacing:-.02em;margin:1px 0 2px;line-height:1.15}
.sy2mc .v i{font-size:16px;font-weight:800;font-style:normal;color:var(--ink-faint);margin-left:2px}
.sy2mc .d{display:block;font-size:13px;color:var(--ink-soft)}
.sy2mc .d b{color:var(--warn)}
.sy2bar{display:block;height:6px;border-radius:99px;background:var(--line2);margin-top:9px;overflow:hidden}
.sy2bar i{display:block;height:100%;border-radius:99px;background:var(--dev)}
.sy2mc.warn .sy2bar i{background:var(--warn)}

.sy2ti{display:flex;align-items:center;gap:10px;padding:11px 3px;border-bottom:1px solid var(--line2);
  font-size:14.5px}
.sy2ti:last-child{border-bottom:0}
.sy2ti .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn)}
.sy2ti .dot.red{background:var(--red)}
.sy2ti .dot.calm{background:var(--ink-faint)}
.sy2ti .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy2ti .why{color:var(--ink-faint);font-size:13px}
.sy2done{display:flex;align-items:center;gap:9px;color:var(--won);font-size:14.5px;font-weight:800;
  padding:14px 3px}

.sy2risk{display:flex;align-items:center;gap:9px;padding:8px 3px;border-bottom:1px solid var(--line2);
  font-size:13.5px;color:var(--ink-soft)}
.sy2risk:last-of-type{border-bottom:0}
.sy2risk .t{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}
.sy2risk .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sy2risk .tx b{color:var(--ink)}
.sy2risk .tg{color:var(--ink-faint);flex:none}
.sy2risk .rd{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red)}

/* 서버 한 줄 — 평소엔 접혀 있다. 늘 떠 있는 타일 아홉은 붉어진 날에도 안 보인다 */
.sy2srv{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:12px;padding:9px 14px;font-size:13.5px;color:var(--ink-soft);width:100%;text-align:left;
  transition:border-color var(--t-fast) var(--ease)}
.sy2srv:hover{border-color:var(--dev)}
.sy2srv .okv{color:var(--won);font-weight:800}

/* ── 👤 사람 — 한 줄 = 한 사람 ── */
.sy2p{border:1.5px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:8px;
  transition:border-color var(--t-fast) var(--ease)}
.sy2p.open{border-color:var(--dev)}
.sy2p.off{opacity:.62}
.sy2ph{display:flex;align-items:center;gap:9px;padding:10px 14px;width:100%;text-align:left;
  background:transparent;border:0;border-radius:14px}
.sy2ph .avt{flex:none;width:29px;height:29px;border-radius:50%;background:var(--panel2);
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800}
.sy2ph .nm{font-size:15px;font-weight:800;flex:none}
.sy2ph .cnt{font-size:12.5px;color:var(--ink-soft);font-family:var(--mono);flex:none}
.sy2ph .cnt b{color:var(--ink)}
.sy2ph .cnt.unk{color:var(--warn)}
.sy2ph .cv{flex:none;color:var(--ink-faint);font-size:12px;transition:transform var(--t-fast) var(--ease)}
.sy2p.open > .sy2ph .cv{transform:rotate(180deg)}

.sy2pb{padding:2px 14px 13px;border-top:1px solid var(--line2)}
.sy2fl{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.sy2fl:last-child{border-bottom:0}
.sy2fl > .k{flex:none;width:112px;font-size:13px;font-weight:800;color:var(--ink-faint);padding-top:5px}
.sy2fl > .vv{flex:1;display:flex;gap:7px;align-items:center;flex-wrap:wrap;min-width:0}
.sy2save{display:flex;align-items:center;gap:9px;padding-top:11px;flex-wrap:wrap}
.sy2save .st{font-size:13px;color:var(--ink-faint)}
.sy2save .st.dirty{color:var(--warn);font-weight:800}

/* 직책 기본과 다른 것을 **부호 하나**로 말한다 — ＋ 더 준 것 · − 기본인데 뺀 것.
   새 색은 만들지 않는다 */
.syschip .sg{font-family:var(--mono);font-size:11.5px;font-weight:800;opacity:.85;margin-right:2px}
.syschip.money.on{background:var(--won);border-color:var(--won)}
.syschip.minus{border-style:dashed;color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 48%,transparent)}
.syschip.dead{opacity:.4;cursor:default;text-decoration:line-through}
.sy2diff{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;
  border-radius:99px;padding:1px 8px;flex:none;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.sy2filt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;
  border:1.5px solid var(--dev);color:var(--dev);border-radius:99px;padding:3px 9px;
  background:color-mix(in srgb,var(--dev) 8%,transparent)}
.sy2filt button{border:0;background:transparent;color:inherit;font-weight:800;padding:0 2px}
.sysseg3.vw{flex:none}

/* 직책별로 볼 때의 구분선 — 이름과 수만. 손잡이는 여기 안 붙는다 */
.sy2div{display:flex;align-items:center;gap:9px;margin:17px 0 7px;padding:0 3px}
.sy2div:first-child{margin-top:2px}
.sy2div .nm{font-size:12.5px;font-weight:800;color:var(--ink-faint);font-family:var(--mono);
  letter-spacing:.03em;flex:none}
.sy2div .ln{flex:1;height:1px;background:var(--line2)}
.sy2div .n{font-size:12px;color:var(--ink-faint);font-family:var(--mono);flex:none}

/* ── ⚖️ 직책 기본 권한 — 판 하나에 묶어 둔다 ── */
.sy2seat{border-bottom:1px solid var(--line2)}
.sy2seat:last-child{border-bottom:0}
.sy2sh{display:flex;align-items:center;gap:9px;padding:9px 2px;width:100%;text-align:left;
  background:transparent;border:0;flex-wrap:wrap}
.sy2sh .nm{font-size:13.5px;font-weight:800;flex:none;min-width:154px}
.sy2sh .n{font-size:12.5px;color:var(--ink-faint);font-family:var(--mono);flex:none;width:36px}
.sy2sh .bs{display:flex;gap:5px;row-gap:5px;flex-wrap:wrap;flex:1;min-width:140px;align-items:center;
  padding:1px 0}
.sy2sh .cv{flex:none;color:var(--ink-faint);font-size:12px}
.sy2sb{padding:0 2px 10px}

/* 읽기용 캡슐 — 한 줄에 여러 개가 설 때 낱개로 끊어 읽히게 한다.
   💰 돈과 🗂️ 툴은 색으로 갈린다: 칩이 켜졌을 때 쓰는 두 색을 옅게 깐 것뿐이다 */
.sy2ppl{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;min-width:0}
.nmc{display:inline-flex;align-items:center;font-size:12.5px;font-weight:800;border-radius:99px;
  padding:2px 9px;border:1px solid var(--line);background:var(--panel2);color:var(--ink-soft);
  white-space:nowrap}
.nmc.money{border-color:color-mix(in srgb,var(--won) 40%,transparent);color:var(--won);
  background:color-mix(in srgb,var(--won) 10%,transparent)}
.nmc.tool{border-color:color-mix(in srgb,var(--dev) 36%,transparent);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 9%,transparent)}

/* ── ⚙️ 설정 — 모듈이 자기 설정을 들고 있다 ── */
.sysmods2{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:9px}
.sysmod2{border:1.5px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;
  transition:border-color var(--t-fast) var(--ease)}
.sysmod2.open{border-color:var(--dev);grid-column:1/-1}
.sysmod2.off{background:var(--panel2)}
/* 머리는 판이고 그 안에 손잡이 둘이 선다 — 버튼 안에 버튼을 넣으면
   브라우저가 바깥 버튼을 그 자리에서 닫아 줄이 무너진다 */
.sysmh{display:flex;align-items:center;gap:9px;padding:11px 13px}
.sysmhb{display:flex;align-items:center;gap:9px;flex:1;min-width:0;text-align:left;
  background:transparent;border:0;padding:0}
.sysmh .nm{font-size:14.5px;font-weight:800;flex:none}
.sysmod2.off .sysmh .nm{color:var(--ink-faint)}
.sysmh .cv{flex:none;color:var(--ink-faint);font-size:12px}
.sysmb{padding:0 13px 11px;border-top:1px solid var(--line2)}
.sysmb .sysvrow:first-of-type{border-top:0}
.aiu-range{display:flex;gap:6px;margin:9px 0 7px}

@media (max-width:860px){
  .sy2money{grid-template-columns:1fr}
  .sy2fl{flex-direction:column;gap:5px}
  .sy2fl > .k{width:auto;padding-top:0}
  .sy2sh .nm{min-width:0}
  .sysmods2{grid-template-columns:1fr}
  .sysfind{max-width:none}
  /* 폰 폭에서 28px 미만 버튼은 손가락이 못 맞춘다 */
  .systab2{min-height:38px}
  .syschip{min-height:30px}
}

/* 계정 바꾸기 줄 — 되돌릴 수 없는 것은 **색으로** 갈라 둔다.
   팝오버였을 때는 카드 아래쪽에서 열려 다른 사람 줄 위로 흘러넘쳤다 (2026-08-26 사용자) */
.sy2danger{gap:6px}
.sy2danger .mini.danger{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--red)}
.sy2danger .mini.danger:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent)}

/* 🧮 「오늘 AI」 타일 — 눌러서 편 상태. 상세는 바로 아래 판에서 펴진다 */
.sy2mc.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel))}
.sy2mc.on.warn{border-color:var(--warn)}

/*
 * ═══ 🎯 목표 3.10.0 — 판매·입금 두 층 · 인라인 편집 ═══════════════════════
 * 편집 모드를 없애고 그 자리에서 고친다. 새 규칙은 전부 .gv 스코프 아래 —
 * style.css 는 전역 단일 파일이라 옛 목표 화면의 규칙(.krrow .bar 등)과 안 싸우게 한다.
 */
.gv .gvhead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
/* 판 제목이 칩에 밀려 낱말 중간에서 꺾이지 않게 · 컨트롤(세그 둘)은 줄을 넘어간다 —
   본편 .ptitle 은 nowrap 이라 좁은 폭에서 판이 옆으로 밀렸다(모바일 52px 넘침 실측) */
.gv .ptitle{flex-wrap:wrap;row-gap:6px}
.gv .ptitle h2{white-space:nowrap}
.gv .gvsum{margin-bottom:12px}
.gv .gv2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px}
.gv .gvpanel{margin-bottom:12px}
.gv .gv2 .gvpanel{margin-bottom:0}

/* 목표 카드 — 제목·부연을 눌러서 고친다 (회계의 잔액 맞추기와 같은 문법) */
.gv .gvo{margin-bottom:10px}
.gv .gvo:last-child{margin-bottom:0}
.gv .got{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:800;flex-wrap:wrap}
.gv .got .on2{font-family:var(--mono);font-size:11.5px;font-weight:800;background:var(--dev);
  color:#fff;border-radius:6px;padding:1px 7px;flex:none;display:inline-block;letter-spacing:0}
.gv .otitle{flex:1;min-width:180px;border-radius:6px;padding:1px 4px;margin:-1px -4px}
.gv .otitle[contenteditable]{cursor:text}
.gv .otitle[contenteditable]:hover,.gv .otitle[contenteditable]:focus{
  background:color-mix(in srgb,var(--dev) 9%,transparent);outline:none}
.gv .oacts{display:flex;gap:5px;flex:none;opacity:0;transition:opacity var(--t-fast) var(--ease)}
.gv .gvo:hover .oacts,.gv .gvo:focus-within .oacts{opacity:1}
.gv .godesc{font-size:13px;color:var(--ink-faint);margin:3px 0 2px -4px;border-radius:6px;padding:1px 4px}
.gv .godesc[contenteditable]{cursor:text}
.gv .godesc[contenteditable]:hover,.gv .godesc[contenteditable]:focus{
  background:color-mix(in srgb,var(--dev) 9%,transparent);outline:none}
.gv .godesc.ghost{opacity:.55}

/* 지표 한 줄 — 이름 · 막대 · 값/목표 · 달성률 · 어디서 오나 */
/* 지표 줄 — **한 격자에 모든 줄**을 세운다 (3.48.2 사용자: 「% 바의 앞쪽이 정렬되지 않는다」).
   flex 였을 때는 오른쪽 칸들(금액 「0만 / 4,500만 원」 ↔ 「0만 / 5억 원」, 「어디서 오나」 칩)의
   **너비가 줄마다 달라서** 남는 공간이 달라지고, 그만큼 막대의 시작·끝 x 가 줄마다 어긋났다.
   subgrid 로 열을 목록 전체가 공유하면 라벨·막대·숫자·칩이 모든 줄에서 같은 자리에 선다. */
.gv .gkrs{margin-top:9px;display:grid;gap:2px 0;
  grid-template-columns:minmax(120px,1fr) minmax(90px,2fr) auto auto auto auto auto}
.gv .gkr{display:grid;grid-template-columns:subgrid;grid-column:1/-1;
  align-items:center;column-gap:10px;padding:6px 4px;border-radius:9px;font-size:14px}
.gv .gkr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.gv .gkr .lb{min-width:0;font-weight:700;white-space:normal;overflow:visible;
  color:var(--ink)}
.gv .krbar{min-width:90px;height:10px;border-radius:99px;background:var(--line2);
  overflow:hidden}
/* 자리를 비워 두는 칸 — 셀 수가 줄마다 같아야 열이 안 밀린다 */
.gv .gkr .gkslot{display:block;width:0}
.gv .krbar i{display:block;height:100%;border-radius:99px;background:var(--dev);
  transition:width var(--t-slow) var(--ease)}
.gv .krbar.near i{background:var(--warn)}
.gv .krbar.done i{background:var(--won)}
.gv .krv{font-family:var(--mono);font-size:13.5px;font-weight:800;text-align:right;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:flex-end;
  font-variant-numeric:tabular-nums}
.gv .krv .cur{color:var(--ink)}
.gv .krv .sl{color:var(--ink-faint);margin:0 2px;font-weight:700}
.gv .krv .tgt{color:var(--ink-faint);border-radius:5px;padding:0 3px}
.gv .krv .tgt[data-tgt]{cursor:text}
.gv .krv .tgt[data-tgt]:hover{background:color-mix(in srgb,var(--dev) 14%,transparent);color:var(--dev)}
.gv .krcur{border:1.5px solid transparent;border-radius:7px;padding:1px 4px;width:76px;
  font-family:var(--mono);font-size:13.5px;font-weight:800;text-align:right;background:transparent}
.gv .krcur:hover{border-color:var(--line)}
.gv .krcur:focus{outline:none;border-color:var(--dev);background:var(--panel)}
.gv .kredit{border:1.5px solid var(--dev);border-radius:7px;padding:1px 5px;font-family:var(--mono);
  font-size:13.5px;font-weight:800;background:var(--panel);width:130px;text-align:right}
.gv .krpc{width:52px;text-align:right;font-family:var(--mono);font-size:13px;
  font-weight:800;color:var(--ink-faint)}
.gv .krpc.near{color:var(--warn)}
.gv .krpc.done{color:var(--won)}
.gv .krpc.pre{font-size:11.5px}
/* 어디서 오나 — 자동(회계·판매·작업소)은 회계색, 기간 직접은 날짜가 곧 라벨 */
.gv .krsrc{font-size:11.5px;font-weight:800;border-radius:99px;padding:1px 8px;text-align:center;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-faint);white-space:nowrap}
.gv .krsrc.auto{border-color:color-mix(in srgb,var(--dev) 45%,transparent);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 10%,transparent)}
.gv .krsrc.pre{opacity:.55}

/* 고치기 — 줄에 얹는 버튼이라 ✕ 와 키를 맞춘다 */
.gv .gkedit{font-size:12px;font-weight:800;padding:3px 9px;border-color:transparent;
  color:var(--ink-faint)}
.gv .gkedit:hover{border-color:var(--dev);color:var(--dev)}

/* 좁은 화면에서는 격자를 접는다 — 일곱 열을 375px 에 세우면 막대가 실오라기가 된다 */
@media (max-width:720px){
  .gv .gkrs{display:flex;flex-direction:column}
  .gv .gkr{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .gv .gkr .lb{flex:1 1 170px;min-width:120px}
  .gv .krbar{flex:2 1 150px}
  .gv .krv,.gv .krpc,.gv .krsrc{flex:none}
  .gv .gkr .gkslot{display:none}
}

/* 그래프 — 기존 .vplot/.vb/.gl 문법 그대로, 목표선 위치만 top 으로 옮겨 쓴다 */
.gv .vplot .gl{top:auto}
.gv .vb i{max-width:46px;margin:0 auto;width:100%}

/* 구성 — 채널 점 + 항목. 대행은 보라(--free), 기타는 회색 */
.gv .gvp .lb{display:flex;align-items:center;gap:6px;width:130px;min-width:0}
.gv .gvp .lb em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv .chdot{width:7px;height:7px;border-radius:2px;flex:none;background:var(--prod)}
.gv .chdot.agy{background:var(--free)}
.gv .chdot.etc{background:var(--ink-faint)}
.gv .gvrecent{margin-top:10px;border-top:1px solid var(--line2);padding-top:8px}
.gv .gvrecent summary{font-size:12.5px;font-weight:800;color:var(--ink-faint);cursor:pointer;
  list-style:none}
.gv .gvrecent summary::-webkit-details-marker{display:none}
.gv .gvrecent summary:hover{color:var(--dev)}
.gv .gvrecent .morow .amt{margin-left:auto;font-weight:800}

/* ＋ 지표 창 — 무엇으로 재나 넷 중 하나를 먼저 */
/* 목표 창(.gmodal 87) **위에** 뜬다 — 전역 .mmodal 은 86 이라 뒤에 깔려 안 보였고,
   안 보이니 또 눌러 창이 겹겹이 쌓였다 (2026-08-26 사용자) */
.gvm{z-index:89}
.gvm .mmbox{width:min(500px,100%)}
.gkinds{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.gkind{border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 4px;
  font-size:13px;font-weight:800;color:var(--ink-soft);display:flex;flex-direction:column;
  align-items:center;gap:3px}
.gkind .ic{font-size:19px}
.gkind:hover{border-color:var(--dev);color:var(--dev)}
.gkind.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 11%,var(--panel));
  color:var(--dev)}
.gmcue{font-style:normal;font-size:12px;color:var(--won);font-weight:800}
.grcue{font-size:12.5px;font-weight:800;color:var(--won);margin-top:8px;font-family:var(--mono)}
.gvadv summary{font-size:12.5px;font-weight:800;color:var(--ink-faint);cursor:pointer;list-style:none}
.gvadv summary::-webkit-details-marker{display:none}
.gvadv{margin-top:12px;border-top:1px solid var(--line2);padding-top:10px}

/* 💸 달력의 들어올 돈(예정) — 점선. 사실과 같은 옷을 입으면 잔액을 잘못 읽는다 */
.moitem.plan{background:transparent;border:1px dashed color-mix(in srgb,var(--won) 45%,var(--line))}
.moitem.plan em{color:var(--won)}
.mosumb.planin{background:transparent;border:1.5px dashed color-mix(in srgb,var(--won) 40%,var(--line))}
.mosumb.planin b{color:var(--won)}

/* 목표 화면의 손은 전부 파랑 — 지표 값·달성률과 같은 색이라야 한 화면으로 읽힌다.
   .acseg(회계 세그)를 빌려 쓰되 켜진 칸만 파랑으로 갈아입힌다 */
.gv .acseg button.on{background:var(--dev)}
.gv .mini.pri,.gvm .mini.pri{background:var(--dev);border-color:var(--dev)}
.gv .mini:hover:not(:disabled),.gvm .mini:hover:not(:disabled){border-color:var(--dev);color:var(--dev)}
.gv .mini.pri:hover,.gvm .mini.pri:hover{color:#fff}
/* ✕ 를 한 번 누르면 **빨갛게** 무장된다 (2026-08-26 사용자: 「한 번 더」 글자만으로는 안 읽힌다).
   색이 곧 경고다 — 눌렀던 자리가 빨개지면 「다시 누르면 지워진다」가 설명 없이 전달된다 */
.gv .mini.armdel,.gvm .mini.armdel{background:var(--red);border-color:var(--red);color:#fff;
  font-weight:800;opacity:1;transition:none}

@media (max-width:860px){
  .gv .gv2{grid-template-columns:1fr}
  .gv .acseg button{padding:4px 9px;font-size:12.5px}
  .gv .gv2 .gvpanel{margin-bottom:12px}
  .gv .krv{min-width:0}
  .gkinds{grid-template-columns:repeat(2,1fr)}
  .gv .gkr .mini,.gv .oacts .mini{min-height:38px}
}

/* 📜 회계 기록 — 업무카드 활동(.csact)의 옷을 빌리고, 행위·본문만 칸을 나눈다 */
.mlrow{flex-wrap:wrap;row-gap:2px}
.mlrow .mlact{font-style:normal;font-weight:800;color:var(--ink);flex:none}
.mlrow .mlbody{font-style:normal;color:var(--ink-soft);flex:1 1 200px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlrow .mlbody:hover{white-space:normal}

/* ⚖️ 직책별 기본 권한 판 — 아래 필터 줄과 붙어 있었다 (2026-08-26 사용자).
   .panel 은 아래 여백이 없고(다른 자리는 그리드 gap 이 담당) 뒤의 .segbar 도 위 여백이 없다.
   접혔을 때 제목의 밑여백이 판 안에 헛돌지 않게 함께 접는다 */
.seatsp{margin-bottom:14px}
.seatsp .ptitle:last-child{margin-bottom:0}


/* ═══ 🛒 판매 3.24.0 — 카페24 연동 전의 관리 자리 ═══ */
.slrow{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px dashed var(--line2);
  font-size:13.5px;flex-wrap:wrap}
.slrow:last-child{border-bottom:0}
.slrow .d{font-size:12.5px;color:var(--ink-faint);width:42px;flex:none}
.slrow b{flex:1 1 auto;min-width:0;font-weight:800}
.slrow .qty{font-size:12px;color:var(--ink-faint);flex:none}
.slrow .amt{font-family:var(--mono);font-weight:800;flex:none}
.slsrc{flex:none;font-size:11px;font-weight:800;border-radius:99px;padding:0 7px;
  border:1px solid var(--line);color:var(--ink-faint);background:var(--panel);white-space:nowrap}
.slsrc.c24{border-color:color-mix(in srgb,var(--prod) 45%,transparent);color:var(--prod)}
.chdot{width:7px;height:7px;border-radius:2px;flex:none;background:var(--prod)}
.chdot.agy{background:var(--free)} .chdot.etc{background:var(--ink-faint)}
.c24badge{display:inline-flex;align-items:center;gap:6px;border:1.5px dashed var(--line);
  border-radius:11px;padding:4px 11px;font-size:12.5px;font-weight:800;color:var(--ink-faint);
  white-space:nowrap}
.c24badge i{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
.c24badge.on{border-style:solid;border-color:color-mix(in srgb,var(--prod) 45%,transparent);
  color:var(--prod)}
.c24badge.on i{background:var(--prod)}
.pastebox{border:1.5px dashed var(--line);border-radius:12px;padding:11px 12px;margin-top:12px}
.pastebox .pastehd{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.pastebox textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:72px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.pastebox textarea:focus{outline:none}
.pvrow{display:flex;gap:9px;align-items:center;font-size:12.5px;padding:3px 2px;
  border-bottom:1px dashed var(--line2);font-family:var(--mono)}
.pvrow:last-child{border-bottom:0}
.pvrow.bad{color:var(--red);text-decoration:line-through}
/* 📎 줄 위의 첨부 단추 — 칩 옷을 입되 눌린다 */
/* 📎 첨부 — 옆 칩들은 이름표지만 이건 **누르는 것**이다. 회계 색으로 옅게 채워
   a-ok · a-warn 과 같은 칩 결을 지키면서 「눌린다」가 읽히게 한다 */
button.achip.xatt{white-space:nowrap;flex:none;
  background:color-mix(in srgb,var(--acct) 10%,var(--panel));
  color:var(--acct);
  border:1px solid color-mix(in srgb,var(--acct) 24%,var(--panel));
  padding:0 5px}
button.achip.xatt:hover{background:color-mix(in srgb,var(--acct) 18%,var(--panel));
  border-color:var(--acct)}

/* 📅 달력 3.12.1 — 반투명은 걷었다(사용자: 점선이면 충분). 지남도 흐림 대신
   옮기기 버튼과 「예정」 글자가 말한다 */
.moitem[draggable="true"]{cursor:grab}
.moitem[draggable="true"]:active{cursor:grabbing}
.mocell.dropon{border-color:var(--acct);background:color-mix(in srgb,var(--acct) 9%,var(--panel))}
.moitem .momark{text-decoration:none;font-size:10px;flex:none}
/* 메모는 제목 뒤 같은 줄 — 남는 공간을 쓰고, 모자라면 저만 줄어든다(전문은 툴팁) */
.morow .momemo{font-size:12.5px;color:var(--ink-faint);flex:0 6 auto;min-width:0;max-width:45%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mosumb.planout{background:transparent;border:1.5px dashed color-mix(in srgb,var(--warn) 45%,var(--line))}
.mosumb.planout b{color:var(--warn)}

/* ═══════════ ☰ 업무보드 리스트 보기 (3.13.0, 사용자 피드백) ═══════════
 * 접두사 bl- 고정 — style.css 는 전역 단일 파일이라 짧은 이름은 남의 규칙에 걸린다.
 * 구획 머리는 칸반 열 머리(.col h5)와 같은 mono 문법 — 「같은 보드를 눕혔다」로 읽히게.
 * 항목 줄은 카드 상세의 ✅ 체크리스트(.ckrow2)와 같은 옷 — 여기만 쓰기가 일어난다. */
.blwrap{display:flex;flex-direction:column;gap:11px;max-width:860px}
/* 구획은 칸반 열과 **같은 판**(panel2 슬랩)이다 (2026-08-27 사용자 — 「대기·진행·완료
   구분이 안 보인다」). 맨바닥에 머리글만 두면 한 줄기 목록에서 경계가 흐려진다 —
   열을 눕혔다는 말은 옷도 열의 것을 입어야 완성된다. */
.blsec{background:var(--panel2);border:1px solid var(--line2);border-radius:13px;padding:9px}
.blsec h5{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint);
  display:flex;align-items:center;gap:6px;margin:3px 4px 9px}
.blsec h5 .wip{font-weight:800}
.blcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:12px;margin-bottom:8px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.blcard:last-child{margin-bottom:0}
/* 제목 줄 — 체크박스가 아니라 **문**이다. 카드(.kcard)와 같은 호버 문법이 「눌러서 연다」를 말한다 */
.blhead{display:flex;align-items:center;gap:7px;width:100%;border:0;background:none;text-align:left;
  padding:9px 13px;cursor:pointer;flex-wrap:wrap;row-gap:2px;font-family:inherit;
  transition:background-color var(--t-fast) var(--ease)}
.blhead:hover{background:color-mix(in srgb,var(--c) 6%,transparent)}
.blhead .d{font-size:11.5px;font-weight:800;color:var(--c);flex:none;white-space:nowrap}
.blhead .t{font-size:14.5px;font-weight:700;min-width:0;line-height:1.45}
/* blgo — .hint 로 지으면 전역 .hint(도움말 문단: margin-top 12 + 위 점선 + padding-top 11)가
   얹혀 글자가 제목 아래로 떨어진다 (2026-08-27 사용자). 짧은 이름은 남의 규칙에 걸린다. */
.blhead .blgo{font-size:11px;font-weight:800;color:var(--ink-faint);opacity:0;flex:none;
  transition:opacity .12s}
.blhead:hover .blgo{opacity:1}
@media (hover:none){ .blhead .blgo{opacity:.6} }
.blhead .bmeta{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;
  font-size:12px;color:var(--ink-faint)}
.blhead .bmeta .due{font-family:var(--mono)}
.blhead .bmeta .due.warn{color:var(--red);font-weight:800}
.blitems{padding:1px 13px 8px;border-top:1px dashed var(--line2)}
.blrow{display:flex;gap:9px;align-items:center;padding:6px 0;font-size:14px;
  border-bottom:1px dashed var(--line2)}
.blrow:last-child{border-bottom:0}
/* 글리프는 카드 상세의 체크리스트(6191 「상태 4종」 개편판)와 **선언까지 같다**
   (2026-08-27 사용자 — 「사이드패널과 다르게 나온다」). 처음엔 테두리 상자로 그렸는데,
   상세는 이미 상자 없는 글리프 단추다 — 같은 물건이 두 화면에서 다른 옷이면
   어느 쪽도 그 물건으로 안 읽힌다. */
/* ☰ 리스트 쪽도 시트와 **같은 크기** — 두 화면에서 손이 달라지면 안 된다 (2026-08-27) */
.blrow .box{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;
  width:28px;height:28px;flex:none;color:var(--ink-faint);padding:0;border-radius:8px;
  display:grid;place-items:center;margin:-4px 0}
.blrow .box:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.blrow .lb{flex:1;min-width:0}
.blrow.st-doing .box{color:var(--dev)}
.blrow.st-hold .box{color:var(--warn)}
.blrow.st-hold .lb{color:var(--warn)}
.blrow.st-done .box{color:var(--prod)}
.blrow.st-done .lb{text-decoration:line-through;color:var(--ink-faint)}
.blrow .ckwho{font-size:11px;color:var(--ink-faint);flex:none;margin-left:auto;padding-right:4px}

/* 📣 수집 회차 — 완주 · 중단 · 차단이 **모양으로** 갈린다 (2026-08-27).
   지금까지는 42/42 도 19/42 도 「마지막 수집 03:12」 한 줄로만 보였다 */
.adruns{display:flex;flex-direction:column;gap:4px}
.adrun{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;
  background:var(--panel2);border:1px solid var(--line2);font-size:13px}
.adrun .t{font-family:var(--mono);font-size:12px;color:var(--ink-faint);flex:none}
.adrun .kw{font-family:var(--mono);font-weight:800;flex:none}
.adrun .badge{flex:none;font-size:11.5px;font-weight:800;border-radius:99px;padding:1px 8px;
  border:1px solid var(--line);color:var(--ink-faint);background:var(--panel)}
.adrun.ok .badge{border-color:color-mix(in srgb,var(--won) 40%,transparent);color:var(--won);
  background:color-mix(in srgb,var(--won) 10%,transparent)}
.adrun.warn{border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.adrun.warn .badge{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.adrun.warn .kw{color:var(--warn)}
.adrun.bad{border-color:color-mix(in srgb,var(--red) 34%,transparent)}
.adrun.bad .badge{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent)}
.adrun.bad .kw{color:var(--red)}
.adrun.run .badge{border-color:color-mix(in srgb,var(--dev) 45%,transparent);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 10%,transparent)}

/* ═══ 🛠️ 시스템 설정 줄 — 키를 맞춘다 (2026-08-27 사용자: 「높이, 크기가 다르고 보기 이상」) ═══
   줄마다 손잡이가 달라(스위치 · 세그 · 숫자칸 · 칩목록) 높이가 제각각이었다. 원인 둘:
     ① `.fld` 에 전역 `margin-bottom:9px` 가 걸려 있어 **입력칸이 든 줄만** 9px 씩 커졌다
     ② 손잡이 키가 27~38px 로 다 달랐다
   여기서는 여백을 끊고 키를 34px 하나로 묶는다 — 그러면 한 손잡이짜리 줄은 전부 52px 다. */
.sysmb .sysvrow{padding:9px 0;gap:8px 10px;min-height:52px;align-items:center}
.sysmb .sysvrow .fld{margin-bottom:0;height:34px}
.sysmb .sysvrow .mini{height:34px;display:inline-flex;align-items:center;justify-content:center}
.sysmb .sysvrow .sysseg3{height:34px}
.sysmb .sysvrow .sysseg3 button{height:100%;display:flex;align-items:center}
.sysmb .sysvrow .syschip{height:28px;display:inline-flex;align-items:center}
.sysmb .sysvrow .sysro{min-height:34px;display:inline-flex;align-items:center}
.sysmb .sysvrow .fld.num{width:104px;text-align:right}
.sysmb .sysvrow .fld.tm{width:118px;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 목록 값(칩 + 넣는 칸) — **판이 아니라 한 줄**이다.
   전에는 .kwbox(회의록 키워드 상자)를 빌려 써서 회색 판과 아래 여백이 딸려 왔고,
   그 줄만 키가 두 배가 됐다. 전역 한 파일에서 짧은 이름을 빌리면 남의 규칙에 걸린다. */
.syslist{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.syslist .syschip i{margin-left:3px;opacity:.7}
.syslist .syschip:hover i{opacity:1}

/* 값 옆의 「누가 언제 바꿨나」는 줄 끝에 조용히 — 폭을 잡아 손잡이를 밀고 있었다 */
.sysmb .sysvrow .pmeta{margin-left:auto;flex:none;font-size:12px;color:var(--ink-faint)}
@media (max-width:860px){
  .sysmb .sysvrow > .lb{min-width:0;width:100%}
  .sysmb .sysvrow .pmeta{margin-left:0}
}

/* 📣 회차 머리 — 달 고르개가 라벨 옆에 붙는다 (2026-08-27 사용자: 「월 단위로 계속 누적」) */
.adrunhd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.adrunhd .lb{min-width:0}
.admonths{max-width:100%;overflow-x:auto}
.admonths button{white-space:nowrap}
.admonths button i{font-style:normal;font-size:11px;opacity:.65;margin-left:3px}
.adruns{max-height:340px;overflow-y:auto}

/* ═══════════ 3.37.0 · 업무카드 재정의 — 지금(●)·기다림(⏳)·채택·바통 ═══════════ */

/* ⏳ 체크 항목 「기다림」 — 보류(st-hold)의 자리를 잇는다. 커피색: 급함(warn)이 아니라
   때를 기다리는 중이라는 온도다. 옛 st-hold 규칙은 마이그레이션 전 캐시를 위해 남겨 둔다 */
.ckrow2.st-zwait .box{color:var(--coffee)}
.ckrow2.st-zwait .lb{color:var(--coffee)}
.blrow.st-zwait .box{color:var(--coffee)}
.blrow.st-zwait .lb{color:var(--coffee)}
.fxmenu .ckic.st-zwait{color:var(--coffee)}

/* 꼬리 — 기다림의 대상·항목 링크. 제목이 아니라 여기 산다 */
.cktail{flex:none;font-size:12px;font-weight:800;color:var(--coffee);font-family:var(--mono);
  max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cktail.due{color:var(--warn)}
.cklink{flex:none;font-size:13px;text-decoration:none;opacity:.75}
.cklink:hover{opacity:1}

/* 카드 겉면 — ● 지금 줄 · ⏳ 기다림 줄 · ⏰ 때가 옴 */
.kprog.now{color:var(--dev)}
.kprog.now .ntx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:700}
.kprog.now .cnt{flex:none;color:var(--ink-faint);font-family:var(--mono);font-size:11px}
.kprog.zwait{color:var(--coffee)}
.kprog.zwait .ntx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kprog.zdue{color:var(--warn)}
/* 🛌 기다림만 남은 카드는 가라앉고, ⏰ 때가 온 카드는 깨어난다 */
.kcard.ksleep{opacity:.6}
.kcard.ksleep:hover{opacity:.95}
.kcard.kwake{border-color:var(--warn);border-left-color:var(--warn)}

/* ⏳ 선행 연결 · 🎁 바통 — 카드판 제목 아래 배너 줄 */
.prewait{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border:1.5px solid color-mix(in srgb,var(--coffee) 35%,var(--panel));
  background:color-mix(in srgb,var(--coffee) 7%,var(--panel));border-radius:11px;
  padding:8px 13px;margin:10px 0 2px;font-size:13.5px;font-weight:700;color:var(--coffee)}
.prewait .lk{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.prewait .undo{margin-left:auto;border:0;background:none;font-size:12.5px;font-weight:800;
  color:var(--ink-faint);flex:none}
.prewait .undo:hover{color:var(--red)}
.prewait.baton{border-color:color-mix(in srgb,var(--won) 36%,var(--panel));
  background:color-mix(in srgb,var(--won) 7%,var(--panel));color:var(--won)}
.preadd{border:1.5px dashed var(--line);background:none;border-radius:10px;padding:4px 12px;
  font-size:12.5px;font-weight:800;color:var(--ink-faint);margin:10px 0 2px;align-self:flex-start}
.preadd:hover{color:var(--coffee);border-color:color-mix(in srgb,var(--coffee) 45%,var(--panel))}

/* 🎁 인계 동봉 미리보기 — 폼과 응답 배너가 같은 옷 */
.hobaton{display:block;border:1.5px dashed color-mix(in srgb,var(--won) 38%,var(--panel));
  background:color-mix(in srgb,var(--won) 5%,var(--panel));border-radius:9px;
  padding:5px 10px;font-size:12.5px;color:var(--ink-soft);margin-top:6px}

/* 고르개 확장 — 기다림 대상·링크·선행 연결. .fxmenu 옷 위에 얹는다 */
.fxmenu .zttl{padding:7px 11px 3px;font-size:12px;font-weight:800;color:var(--coffee);
  font-family:var(--mono);letter-spacing:.04em}
.fxmenu .zkinds{display:flex;gap:5px;padding:4px 7px}
.fxmenu .zk{flex:1;border:1.5px solid var(--line);background:var(--panel);border-radius:8px;
  padding:4px 6px;font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}
.fxmenu .zk.on{border-color:var(--coffee);color:var(--coffee);
  background:color-mix(in srgb,var(--coffee) 8%,var(--panel))}
.fxmenu .zfld{display:block;width:calc(100% - 14px);margin:5px 7px;border:1.5px solid var(--line);
  background:var(--panel);border-radius:8px;padding:6px 9px;font-size:13px}
.fxmenu .zfld:focus{outline:none;border-color:var(--coffee)}
.fxmenu .zcards{display:grid;gap:3px;max-height:180px;overflow:auto;padding:2px 7px;min-width:250px}
.fxmenu .zc{display:flex;gap:7px;align-items:center;border:1.5px solid var(--line);
  background:var(--panel);border-radius:8px;padding:5px 8px;font-size:12.5px;font-weight:700;text-align:left}
.fxmenu .zc:hover{border-color:var(--coffee)}
.fxmenu .zc.on{border-color:var(--coffee);background:color-mix(in srgb,var(--coffee) 8%,var(--panel))}
.fxmenu .zc .zt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxmenu .zgo{display:block;width:calc(100% - 14px);margin:5px 7px 7px;border:0;
  background:var(--coffee);color:#fff;border-radius:8px;padding:7px;font-size:13px;font-weight:800}

/* 항목형 모듈 — 줄 문법 (3.37.0). 글리프는 체크리스트와 같은 28px */
.irow .box{width:28px;height:28px;border:0;background:none;border-radius:8px;flex:none;
  font-size:15px;font-weight:800;color:var(--ink-faint);
  display:inline-flex;align-items:center;justify-content:center}
.irow button.box:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.irow .box.st-doing{color:var(--dev)}
.irow .box.st-done{color:var(--won)}
.irow .deco{font-size:13px;cursor:default;color:var(--prod)}
.irow .iby{flex:none;font-size:11.5px;color:var(--ink-faint)}
/* 🗳️/💳 채택 — 채택되면 도장, 나머지는 물러난다 */
.optrow.adopted{background:color-mix(in srgb,var(--won) 7%,transparent);border-radius:8px}
.optrow.adopted .box{color:var(--won)}
.optrow.passed{opacity:.55}
.stamp{flex:none;font-size:11.5px;font-weight:800;color:var(--won);text-decoration:none;
  border:1px solid color-mix(in srgb,var(--won) 40%,var(--panel));
  background:color-mix(in srgb,var(--won) 9%,var(--panel));border-radius:99px;padding:1px 9px}
.strike{flex:none;font-family:var(--mono);font-size:12px;color:var(--ink-faint);text-decoration:line-through}
.sale{flex:none;font-family:var(--mono);font-size:14.5px;font-weight:800}
.offb{flex:none;font-family:var(--mono);font-size:11px;font-weight:800;color:var(--red);
  background:color-mix(in srgb,var(--red) 8%,var(--panel));border-radius:99px;padding:1px 8px}
/* 📌 결정 — 자동 유입 표시 */
.decauto{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:5px;padding:0 5px}
/* 📣 캠페인 채널 · 🗓️ 발행 날짜 */
.chanb{flex:none;font-size:11.5px;font-weight:800;border-radius:6px;padding:1px 7px;
  color:var(--ink-soft);background:var(--panel2);border:1px solid var(--line2)}
.pubday{flex:none;font-family:var(--mono);font-size:12px;font-weight:800;color:var(--ink-soft);
  min-width:40px}

/* 3.37.1 — 진열대 설명 걷기 (사용자, 다섯 번째 지적): 블록은 이름만 남고
   무엇을 적는 블록인지는 title 툴팁이 말한다. 이름만 남은 블록은 알약처럼 조인다 */
.modblock{min-width:0;flex:0 1 auto;max-width:none;padding:5px 12px}

/* 3.37.2 — 📝 메모칸: MD 단추 + 문법 문서, 📎 파일 끌어다 놓는 존 */
.csbodywrap{position:relative}
.mdhelp{position:absolute;top:7px;right:9px;border:1px solid var(--line);background:var(--panel);
  border-radius:6px;padding:1px 7px;font-family:var(--mono);font-size:10.5px;font-weight:800;
  color:var(--ink-faint);z-index:2}
.mdhelp:hover{color:var(--dev);border-color:var(--dev)}

/* 문법 문서 — 판은 배경을 어둡게, 내용은 흰 둥근 박스 (확인창 옷 규칙 · hex 금지) */
.mdgbg{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--ink) 38%,transparent);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.mdg{background:var(--panel);border-radius:16px;box-shadow:var(--shadow);
  width:min(460px,100%);padding:16px 20px 12px}
.mdgh{display:flex;gap:6px;align-items:baseline;font-size:15px;font-weight:800;margin-bottom:4px}
.mdgh .ckx{margin-left:auto;opacity:1;font-size:14px}
/* 두 칸의 **첫 줄이 같은 높이에서 시작**한다 (3.37.6 사용자 — 「행이 잘 안 맞아」).
   가운데 정렬이면 줄 수가 다른 행(목록·할 일)에서 두 칸이 서로 어긋난다.
   왼쪽 칸의 안쪽 여백(6px)만큼 오른쪽에도 줘서 글자 첫 줄을 맞춘다. */
.mdgrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;
  padding:7px 0;border-bottom:1px solid var(--line2)}
.mdgrow:last-child{border-bottom:0}
.mdgs{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:pre-wrap;
  margin:0;background:var(--panel2);border-radius:8px;padding:6px 9px;line-height:1.65}
.mdgr{border:0;background:none;width:auto;font-size:13.5px;line-height:1.65;padding:6px 0}
.mdgr:hover{border:0}
/* 문서 안에서는 **바깥 여백을 전부 뗀다** — 제목·목록의 제 여백이 첫 줄을 밀어 내린다 */
.mdgr > *{margin:0}
.mdgr h3,.mdgr h4,.mdgr h5{margin:0;line-height:1.35}
.mdgr ul,.mdgr ol{padding-left:18px}
.mdgr li{margin:0}
.mdgr blockquote{margin:0}
/* 나눔선은 이 칸에서 **자기 두께를 스스로 갖는다** — 바깥 여백에 기대면 보이지 않는다
   (3.37.6 사용자: 「맨 아래 나눔선은 보이지도 않아」) */
.mdgr hr{margin:9px 0}

/* 📎 끌어다 놓는 존 — 떠 있는 동안 불이 들어온다 */
/* 3.38.7 — 존이 곧 파일함이다: 점선이 파일을 감싸므로 「없음」 자리가 필요 없다 */
.fdrop{border:1.5px dashed var(--line);border-radius:11px;padding:8px;margin-top:6px;
  transition:border-color .12s,background .12s}
.fdrop .cfgrid{margin:0 0 8px}
.fdadd{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  padding:10px 12px;cursor:pointer;text-align:center;border-radius:8px}
.fdadd b{font-size:13.5px;font-weight:800;color:var(--ink-soft);pointer-events:none}
.fdadd span{font-size:12px;color:var(--ink-faint);pointer-events:none}
.fdadd:hover{background:var(--panel)}
/* 파일이 차 있으면 안내는 한 줄로 눕는다 — 다 찬 칸에서 안내가 주인공일 이유가 없다 */
.fdrop.has .fdadd{flex-direction:row;gap:8px;padding:5px 10px;flex-wrap:wrap}
.fdrop.has .fdadd b{font-size:12.5px}
.fdrop.has .fdadd span{font-size:11.5px}
.fdrop:hover{border-color:color-mix(in srgb,var(--dev) 45%,var(--line))}
.fdrop.on{border-color:var(--dev);background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.fdrop.on .fdadd b{color:var(--dev)}
/* 🔗 창고에서 고르는 두 손 — 존 안, 안내 줄 아래 (2026-09-01 사용자) */
.fdpick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:0 6px 4px}
.fdpick .mini{font-size:12.5px;padding:4px 10px}
/* 존 안의 참조 칩은 위아래로 숨을 준다 */
.fdrop .iref{margin:0 1px 6px}

/* 🧩 진열대는 섹션이 아니라 도구다 (3.37.2 사용자 — 「조립함이 모듈처럼 돼 있어 이상하다」).
   접힌 손잡이는 오른쪽 구석의 점선 알약, 펼친 판은 점선 테두리 도구판 — 내용 모듈과 옷이 갈린다 */
.modpickbar{display:flex;justify-content:flex-end;margin:4px 0 2px}
.modpickbtn{border:1.5px dashed var(--line);background:none;border-radius:99px;padding:3px 13px;
  font-size:12px;font-weight:800;color:var(--ink-faint)}
.modpickbtn:hover{color:var(--dev);border-color:color-mix(in srgb,var(--dev) 45%,var(--line))}
.modpick{border:1.5px dashed color-mix(in srgb,var(--dev) 35%,var(--line));background:var(--panel2);
  border-radius:13px;padding:10px 14px}

/* 3.37.3 — 카드 머리줄 정돈 (사용자): 구독은 아이콘으로 제자리에, 조립 손잡이는 담당 줄 오른쪽 끝 */
/* 📌 구독 — 글자를 떼면 늘 다음 줄로 밀리던 것이 「오늘로」 옆에 선다.
   글자가 없어졌으니 **켜짐이 보여야 한다** — 보드 카드의 📌 토글과 같은 문법(꺼지면 흐리게) */
.mini.ico{padding:5px 9px;font-size:14px;line-height:1.2;opacity:.4}
.mini.ico:hover:not(:disabled){opacity:.75;border-color:var(--line)}
.mini.ico.sel{opacity:1;border-color:var(--dev);color:var(--dev);
  background:color-mix(in srgb,var(--dev) 8%,var(--panel))}

/* 🧩 조립 손잡이 — 담당 줄의 오른쪽 끝. 카드 오른쪽 선에 맞춰 서고(딱 붙지 않는다),
   담당 칩이 여러 줄로 늘어나도 첫 줄에 남는다 */
/* 카드 도구 무리 — 담당 칩이 여러 줄이 돼도 첫 줄 오른쪽에 남는다 */
.cstoolchips{margin-left:auto;flex:none;align-self:flex-start;display:flex;gap:5px}

/* ═══════════ 🏢 공간 칩 (3.40.0) — 레일 맨 아래 · spacechip_mockup_v3 확정 ═══════════
   접두는 osp* — .spchip(타게팅)·.offchip(오피스)·.occ·.ch(채팅)가 짧은 이름을 이미 산다.
   칩은 상태 버튼(.stbtn)과 같은 옷 — 레일 바닥이 「나 → 상태 → 공간」 한 묶음으로 읽힌다. */
.ospchip{display:flex;align-items:center;gap:7px;width:100%;border:1px solid rgba(var(--rw),.16);
  background:rgba(var(--rw),.05);border-radius:9px;padding:7px 10px;margin-top:6px;
  font-size:13px;font-weight:700;color:var(--rail-str);position:relative}
.ospchip:hover{background:rgba(var(--rw),.11)}
.ospchip .ic{font-size:14px;line-height:1;flex:none}
.ospchip .lb{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ospchip .caret{font-size:11px;opacity:.6}
/* 3.43.0 — 칩은 언제나 인원 요약(👥·☕·💬)이다. 「내 위치 변신」·🎤 글리프 옷은 걷었다 —
   늘 음성에 붙어 일하는 사무실에선 변신이 상시가 되어 요약을 가렸다(app.js 주석) */
/* 숫자가 바뀌면 한 번 깜빡 — 다른 화면에서 곁눈으로 알아챈다 */
@keyframes ospflash{0%{background:rgba(var(--rw),.28)}100%{background:rgba(var(--rw),.05)}}
.ospchip.flash{animation:ospflash .7s var(--ease)}
/* 접힌 레일 — 아이콘+점. 배지는 숫자 없이 점만(탭바 규칙과 같다) */
.app.railmin .ospchip{justify-content:center;padding:7px 0}
.app.railmin .ospchip .lb,.app.railmin .ospchip .caret{display:none}
.ospchip .dotb{display:none;position:absolute;top:3px;right:5px;width:8px;height:8px;
  border-radius:50%;background:var(--warn);border:2px solid var(--rail)}
.app.railmin .ospchip.busy .dotb{display:block}
/* micbar 가 음소거 경고로 줄었다 — 접힌 레일에서는 🔇 아이콘만 남는다 */
.app.railmin .micbar .mbtop b,.app.railmin .micbar .mbsub,
.app.railmin .micbar .dsci,.app.railmin .micbar .mbgo{display:none}
.app.railmin .micbar .mbtop{justify-content:center}
/* 3.43.0 — 경고는 한 줄로 작게. 원래 두 줄 옷(264행)보다 나중이라 이 값이 이긴다 */
.micbar{padding:6px 9px;margin:8px 0 0;font-size:12.5px}
.micbar .mbtop .dsci{flex:none;width:13px;height:13px;fill:#5865F2}
/* 팝오버 맨 아래 「내 자리」 줄 — 위 목록과 반 발짝 떨어져 바닥 정보로 읽힌다 */
.ospmefoot{margin-top:7px}

/* 팝오버 — 옷이 .fxmenu 가 아닌 이유: .fxmenu button 리셋이 모든 버튼을 풀폭 메뉴줄로
   만들어 줄 안의 .mini 를 찢는다. 생김(판·선·그림자·층)만 fxmenu 와 같게 간다.
   z 는 58 — 노크 카드(60)가 항상 위에 온다: 20초짜리가 가려지면 안 된다. */
.osppop{position:fixed;z-index:58;width:min(302px,calc(100vw - 16px));
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.35);padding:9px 9px 8px;
  max-height:min(calc(var(--vh100)*.7),520px);overflow-y:auto;overscroll-behavior:contain}
.osphead{display:flex;align-items:center;gap:7px;padding:2px 4px 7px;border-bottom:1px solid var(--line2);
  margin-bottom:4px;font-weight:800;font-size:14.5px;color:var(--ink)}
.osphead .golink{margin-left:auto;border:0;background:none;font-size:12.5px;font-weight:700;
  color:var(--ink-faint);padding:2px 4px;border-radius:6px}
.osphead .golink:hover{color:var(--dev);background:var(--panel2)}
/* 내 자리 줄(음성 중일 때만)과 오늘 줄(남은 게 있을 때만) — 같은 옷 */
.ospme{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:1px solid var(--line2);
  background:var(--panel2);border-radius:9px;padding:6px 9px;margin:2px 0 3px;
  font-size:12.5px;font-weight:700;color:var(--ink)}
.ospme:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.ospme .mi{flex:none;font-size:13px;line-height:1}
.ospme b{flex:none;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ospme .ospch{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink-soft);font-weight:600}
.ospme .dsci{flex:none;width:13px;height:13px;border-radius:4px;background:#5865F2}
.ospme .mbgo{flex:none;opacity:.55;font-size:11px}
.ospme.muted{border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn)}
.ospgrp{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);padding:8px 6px 4px}
/* 휴게실·대화방 줄 — 오피스의 .loungec/.bubble 문법을 좁게 입는다 */
.osproom{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--panel2);
  border-radius:10px;padding:7px 8px;margin:3px 2px}
.osproom .rt{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ospocc{display:inline-flex;flex:none;min-width:0}
.ospfcs{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  font-weight:800;font-size:11px;color:#fff;background:var(--c);border:1.5px solid var(--panel2);
  margin-left:-5px;position:relative}
.ospfcs:first-child{margin-left:0}
.osproom .mini,.osprow .mini{font-size:12.5px;padding:4px 9px;flex:none}
.osprow .mini:disabled{opacity:.55;cursor:default}
.ospempty{font-size:12.5px;color:var(--ink-faint);padding:3px 8px 5px}
/* 사람 줄 — 오피스 .desk 문법의 축소판. 얼굴 점은 아바타 오른쪽 아래(같은 자리) */
.osprow{display:flex;align-items:center;gap:9px;border-radius:9px;padding:5px 6px}
.osprow:hover{background:var(--panel2)}
.ospfc{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:12.5px;color:#fff;background:var(--c);position:relative}
.ospfc::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-radius:50%;background:var(--sc,var(--won));border:2px solid var(--panel);z-index:1}
.osprow .spi{flex:1;min-width:0}
.osprow .spi b{font-size:14px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.osprow .spi b .dept{font-size:11.5px;font-weight:700;color:var(--c);font-style:normal}
.osprow .spi .stt{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;line-height:1.4}
/* 눌러서 펼치는 느낌 — 판이 위에서 미끄러져 내려온다 */
.modpick{animation:shelfIn .18s cubic-bezier(.22,1,.36,1)}
/* 살려 옮긴 판은 다시 안 연다 — 떼었다 붙이면 애니메이션이 처음부터 다시 돈다 */
.modpick.noanim{animation:none}
@keyframes shelfIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 📦 보관 목록 (3.37.7 사용자 — 「보관은 카드 모양을 유지할 필요가 없다」)
   지난 카드는 읽으러 오는 것이라 한 줄이면 된다. 열은 그만큼 넓어진다 —
   좁은 칸반 폭에 줄을 넣으면 제목이 잘려 「한눈에」가 안 된다 */
.col.arch{flex:1 1 380px;min-width:300px}
.argrp+.argrp{margin-top:10px}
.arh{display:flex;gap:6px;align-items:baseline;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--ink-faint);padding:2px 4px 4px;
  border-bottom:1px solid var(--line2);margin-bottom:2px}
.arh span{font-weight:800}
.arrow2{display:flex;gap:8px;align-items:center;width:100%;text-align:left;
  border:0;background:none;border-radius:8px;padding:5px 6px;font-size:13.5px;color:var(--ink-soft)}
.arrow2:hover{background:var(--panel)}
.ard{flex:none;width:6px;height:6px;border-radius:50%;background:var(--c)}
.art{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-weight:700}
.arpj{flex:none;font-size:11.5px;font-weight:700;color:var(--prod);max-width:110px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arwho{flex:none;font-size:11.5px;color:var(--ink-faint);max-width:90px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arday{flex:none;font-family:var(--mono);font-size:11px;color:var(--ink-faint);min-width:30px;text-align:right}

/* 📝 문법 안내 — MD 단추 **바로 왼쪽**에서 화살표로 가리킨다 (3.38.6 사용자 그림).
   빈 칸일 때만 뜨고, 한 글자라도 적으면 사라진다 — 적는 내내 남아 있으면 그건
   안내가 아니라 화면에 박힌 설명이다 */
.mdhint{position:absolute;top:8px;right:42px;border:0;background:none;padding:0;
  font-size:11.5px;font-weight:700;color:var(--ink-faint);white-space:nowrap;z-index:2}
.mdhint:hover{color:var(--dev)}
.csbody:not(:placeholder-shown) ~ .mdhint{opacity:0;pointer-events:none}

/* ═══════════════ 📊 채팅 /투표 — 투표 4종 + 뽑기 4종 (3.39.0) ═══════════════
   접두는 전부 pl* — pv*(작업소)·pk*(회계 패키지)가 이미 살고 있어 피한다.
   키프레임은 plkf-* 로 몰아 남의 이름과 절대 안 겹치게. */
.plcard{margin-top:7px;border:1.5px solid var(--line);background:var(--panel);border-radius:14px;
  padding:13px 15px 12px;max-width:640px;position:relative}
.plskel{font-size:13px;color:var(--ink-faint);padding:6px 0}
.plph{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px}
.plph .plq{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.plbadge{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.06em;
  border-radius:6px;padding:1px 7px;flex:none}
.plbadge.anon{background:color-mix(in srgb,var(--ink) 8%,var(--panel));color:var(--ink-soft)}
.plbadge.open{background:color-mix(in srgb,var(--won) 12%,var(--panel));color:var(--won)}
.plbadge.done{background:color-mix(in srgb,var(--red) 10%,var(--panel));color:var(--red)}
.plbadge.time{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn)}
.plbadge.tool{background:color-mix(in srgb,var(--free) 12%,var(--panel));color:var(--free)}
.plpn{font-size:12.5px;color:var(--ink-faint);margin-bottom:9px;display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}
.plfoot{display:flex;gap:8px;align-items:center;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--line2)}
.plfoot .plsp{flex:1}
.plmyv{font-size:12.5px;color:var(--ink-faint)}
.plmyv b{color:var(--dev)}
.plmyv.plddg{color:var(--warn);animation:plkf-ddg .45s ease-in-out infinite alternate}
@keyframes plkf-ddg{from{transform:scale(1)}to{transform:scale(1.08)}}
.plav{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--c)}
.plavs{display:inline-flex}
.plavs .plav{margin-left:-5px;border:1.5px solid var(--panel)}
.plavs .plav:first-child{margin-left:0}
@keyframes plkf-avin{from{transform:scale(.2);opacity:0}60%{transform:scale(1.2)}
  to{transform:scale(1);opacity:1}}
@keyframes plkf-pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.plnum{font-family:var(--mono);font-weight:800;display:inline-block}
.plnum.pop{animation:plkf-pop .4s var(--ease)}
.plart{width:26px;height:26px;border-radius:7px;flex:none;object-fit:cover}
/* 눌러서 원본을 본다는 표시 — 표를 던지는 자리 안에 있으므로 손 모양이 달라야 한다 */
.plart[data-lightbox]{cursor:zoom-in}
.plart[data-lightbox]:hover{outline:2px solid var(--dev);outline-offset:1px}
.plart.big{width:46px;height:46px;border-radius:10px}
.plart.ch{display:inline-flex;align-items:center;justify-content:center;font-weight:900;
  font-size:19px;background:color-mix(in srgb,var(--lc) 14%,var(--panel));color:var(--lc)}
/* 🎊 오늘의 축하 — 투표 개표의 색종이(plConfetti)를 그대로 쓰는 전면 한 판.
   하루 한 번, 눌러서 닫는다. 카드가 화면 가운데 뜨고 색종이가 위에서 내린다 */
.celebwrap{position:fixed;inset:0;z-index:98;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,22,.45);overflow:hidden;cursor:pointer;
  animation:kFade .3s ease}
.celebwrap.bye{opacity:0;transition:opacity .4s}
.celebcard{background:var(--panel);border-radius:20px;padding:34px 44px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px;align-items:center;max-width:min(480px,90vw);
  animation:kPopIn .45s cubic-bezier(.2,.9,.3,1.2)}
.celebcard .cline{display:flex;align-items:center;gap:10px;font-size:19px}
.celebcard .cline .ce{font-size:30px}
.celebcard .cline b{font-weight:800}
.celebcard .you{font-size:14px;font-weight:800;color:var(--dsgn)}
.celebcard .celebok{margin-top:6px}
@keyframes kFade{from{opacity:0}}
@keyframes kPopIn{from{transform:scale(.7);opacity:0}}
/* 🪪 내 정보의 사진 칸 — 지금 얼굴과 바꾸는 단추가 나란히 */
.miphoto{display:flex;align-items:center;gap:14px;margin-bottom:6px}
/* 얼굴은 앱 어디서나 같은 동그라미다 — 눌러도 사진을 고른다(직관), 옆 단추가 이름을 준다(발견) */
.miav{width:76px;height:76px;flex:none;position:relative;padding:0;border:0;background:none;cursor:pointer}
.miavin{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  overflow:hidden;font-size:30px;font-weight:800;background:color-mix(in srgb,var(--oc) 18%,var(--panel));
  color:var(--oc);border:2px solid color-mix(in srgb,var(--oc) 38%,var(--panel))}
/* 사진은 **자리에 못 박아** 채운다 — grid 가운데 정렬 안에서 height:100% 는 제 비율로
   되돌아가서, 세로로 긴 사진이 원을 넘고 가로로는 letterbox 가 됐다 (2026-08-31 실측 80×186).
   inset:0 이면 비율이 무엇이든 원이 원으로 남는다 */
.miavin .avimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.miavin:has(.avimg){background:none}
.miav:hover .miavin{border-color:var(--oc)}
.miav:focus-visible{outline:2px solid var(--dev);outline-offset:3px;border-radius:50%}
/* 사진이 있으면 원 안을 꽉 채운다 — .avimg 가 100%·cover 라 테두리만 물려주면 된다 */
.miavcam{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--panel);border:1.5px solid var(--line);display:grid;place-items:center;font-size:14px}
.miav:hover .miavcam{border-color:var(--dev)}
.miacts{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
/* 폰에서 제일 자주 누르는 단추가 28px 로 남지 않게 (모바일 규칙) */
.miacts .mini{padding:9px 13px;font-size:13.5px}
/*
 * 🪪 사람 창의 프로필 (2026-08-31 · mockup/people_profile_mockup_v1.html)
 *
 * **손이 가는 값**(폰·메일)과 **읽는 값**(생일·입사·MBTI)을 두 묶음으로 갈라 세운다 —
 * 예전엔 여섯 값이 작은 칩 한 줄로 흩어져 「연락처」로 읽히지 않았다.
 * 단추는 앱 공통 .mini 를 그대로 입는다(여기만 다른 단추를 만들지 않는다).
 */
/* 창 폭은 **담는 것에 맞춘다** — 공용 580px 는 연락 몇 줄을 담기엔 넓어, 적게 적은 사람의
   카드가 휑하게 벌어졌다 (2026-08-31 사용자: 「지금 모양이 너무 다른 거 아니야」) */
#peopleBox .mmbox{width:min(460px,100%)}
.ppgrp{margin-top:12px}
.ppglab{font-size:12px;font-weight:800;color:var(--ink-faint);letter-spacing:.02em;margin-bottom:6px}
.ppgcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.ppcrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-top:1px solid var(--line2)}
.ppcrow:first-child{border-top:0}
.ppcic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:15px;background:var(--panel2)}
/* 값이 주인공 — 줄에서 남는 폭을 값이 갖는다(손은 제 크기만) */
.ppcv{flex:1;min-width:0;color:inherit;text-decoration:none;display:block}
.ppcv .k{display:block;font-size:11.5px;font-weight:700;color:var(--ink-faint)}
.ppcv .v{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppcv .v.mono{font-family:var(--mono);letter-spacing:0}
a.ppcv:hover .v{color:var(--dev)}
.ppcact{display:flex;gap:6px;flex:none}
.ppcb{padding:6px 10px;font-size:12.5px;line-height:1.35}
.ppirow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-top:1px solid var(--line2);
  font-size:14px}
.ppirow:first-child{border-top:0}
.ppirow .k{width:78px;flex:none;font-size:12.5px;font-weight:700;color:var(--ink-faint)}
.ppirow .v{font-weight:700}
.ppirow .tag{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%,var(--panel));border-radius:6px;padding:1px 7px}
.ppempty{font-size:13px;color:var(--ink-faint);padding:12px 13px}
.ppfix{margin-top:10px}
/* 💬 문자는 **손가락이 있는 기기에서만** — PC 에 두면 눌러도 되는 일이 없다(sms: 는 열리는
   앱이 없다). 판정은 폭이 아니라 입력 장치다: 창을 좁혀 쓰는 PC 에서도 새지 않는다.
   반대로 줄을 키우는 것은 폭의 일이라 그쪽은 880px 가 정한다(모바일 규칙: 주 동작 44px 이상) */
.ppmob{display:none}
@media (pointer:coarse){ .ppmob{display:inline-flex} }
@media (max-width:880px){
  .ppcrow{padding:12px;gap:12px;min-height:56px;flex-wrap:wrap}
  .ppcic{width:36px;height:36px;font-size:17px}
  /* 좁은 폭에서는 **값이 한 줄을 통째로** 갖고 손은 아랫줄로 내려간다 — 버튼과 나눠 쓰면
     정작 번호가 「010-234…」로 잘려 옮겨 적을 수가 없다(2026-08-31 실측) */
  .ppcv{flex:1 1 calc(100% - 48px)}
  .ppcv .v{font-size:16px;white-space:normal;word-break:break-all}
  .ppcact{width:100%;justify-content:flex-end;margin-top:2px}
  .ppcb{padding:9px 12px;font-size:13px}
  .ppirow{padding:11px 12px}
}
/* ══ ⏱️ 접속 시간 (2026-09-01) — 합계를 먼저, 낱개를 뒤에 ══ */
.ptrange{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);min-width:170px;text-align:center}
.pttable{margin-top:10px;display:flex;flex-direction:column;gap:1px}
.ptrow{display:grid;grid-template-columns:88px minmax(0,1fr) 84px minmax(0,1.1fr);
  align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer}
.ptrow:hover{background:var(--panel2)}
.ptrow.on{background:color-mix(in srgb,var(--dev) 10%,transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--dev) 35%,transparent)}
.ptname{font-weight:800;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 막대는 **비율**만 말한다 — 눈금을 그리면 근태표가 된다 */
.ptbar{height:9px;border-radius:5px;background:var(--panel2);overflow:hidden;min-width:0}
.ptbar{position:relative}
.ptbar i{display:block;height:100%;border-radius:5px;background:var(--dev)}
/* 🌙 밤(00–07시)은 **지우지 않고 옅게 덧댄다** — 붙어 있던 것은 사실이고,
   그 사실을 일한 시간으로 읽지 않게 하는 것이 화면의 몫이다 (2026-09-01) */
.ptbar u{position:absolute;left:0;top:0;height:100%;border-radius:5px;
  background:repeating-linear-gradient(45deg,var(--ink-faint) 0 3px,transparent 3px 6px);opacity:.5}
.ptsum em{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-faint)}
.ptsum{font-family:var(--mono);font-size:12.5px;font-weight:800;text-align:right}
.ptmix{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:11.5px;color:var(--ink-soft);min-width:0}
/* 날짜 막대 — 기간 전체의 리듬. 하루를 사람별로 쪼개면 6줄 × 31칸이 된다 */
.ptdays{display:flex;align-items:flex-end;gap:4px;margin-top:14px;padding-top:10px;
  border-top:1px solid var(--line2);overflow-x:auto}
.ptday{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:16px}
.ptday i{display:block;width:100%;max-width:26px;border-radius:3px 3px 0 0;background:var(--dev);opacity:.75}
.ptday:hover i{opacity:1}
.ptdl{font-size:10.5px;color:var(--ink-faint)}
.ptdl.wk{color:var(--red)}
.ptlog{display:flex;flex-direction:column;gap:1px;margin-top:8px;max-height:420px;overflow-y:auto}
.ptlrow{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:8px;font-size:12.5px}
.ptlrow:nth-child(odd){background:var(--panel2)}
.ptld{color:var(--ink-faint);font-size:11.5px;min-width:38px}
.ptlt{color:var(--ink-soft);font-size:11.5px}
.ptlm{font-family:var(--mono);font-weight:800;font-size:12px}
/* ⚠️ 빈 해 경고 — 조용히 틀리는 것을 막는 자리라, 눈에 띄어야 한다 */
.holwarn{margin-left:8px;font-size:11.5px;font-weight:800;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 12%%,transparent);border-radius:7px;padding:2px 8px}
.plconf{position:absolute;width:8px;height:12px;top:-10px;z-index:5;pointer-events:none;
  animation:plkf-fall var(--d,1.1s) ease-in forwards}
@keyframes plkf-fall{0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(190px) rotate(560deg);opacity:0}}

/* ── 🏁 레이스 ── */
.pllane{display:flex;gap:9px;align-items:center;padding:5px 0}
.pllane .pllb{width:118px;flex:none;display:flex;gap:7px;align-items:center;font-size:13.5px;
  font-weight:700;overflow:hidden;white-space:nowrap;cursor:pointer;border:0;background:none;
  text-align:left;padding:0;color:inherit}
.pllane .pllb:hover{color:var(--dev)}
.pllane .pltrk{flex:1;height:28px;background:var(--panel2);border-radius:99px;position:relative;
  cursor:pointer;border-right:3px double var(--ink-faint)}
.pllane .plfill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:color-mix(in srgb,var(--lc) 22%,var(--panel2));transition:width .7s var(--ease);min-width:8px}
.pllane .plrun{position:absolute;top:0;font-size:19px;line-height:28px;transition:left .7s var(--ease);
  transform:scaleX(-1);will-change:left}
.pllane .plrun.dust::after{content:"💨";position:absolute;right:-16px;font-size:12px;
  transform:scaleX(-1);animation:plkf-dust .8s forwards}
@keyframes plkf-dust{from{opacity:1}to{opacity:0;transform:scaleX(-1) translateX(10px)}}
.pllane .plcnt{width:26px;flex:none;text-align:right;font-size:13.5px}
.pllane.mine .pllb{color:var(--dev)}
.pllane .plwho{width:84px;flex:none}
.pllane.win .pltrk{border-color:var(--won)}
@keyframes plkf-jump{0%,100%{transform:scaleX(-1) translateY(0)}30%{transform:scaleX(-1) translateY(-9px)}
  60%{transform:scaleX(-1) translateY(0)}80%{transform:scaleX(-1) translateY(-4px)}}
.pllane.win .plrun{animation:plkf-jump .9s var(--ease) 2}
.pllane.win .plcnt{color:var(--won)}
.pltape{position:absolute;right:-4px;top:-3px;font-size:15px}

/* ── 🔴 스티커판 ── */
.plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px}
.plcell{border:1.5px solid var(--line);background:var(--panel2);border-radius:12px;
  padding:9px 10px 8px;cursor:pointer;position:relative;text-align:left;color:inherit}
.plcell:hover{border-color:var(--dev)}
.plcell.mine{border-color:var(--dev);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev) 14%,transparent)}
.plcell .plartbox{height:52px;display:grid;place-items:center;margin-bottom:5px}
.plcell .plcl{display:flex;gap:6px;align-items:baseline;font-size:13.5px;font-weight:800}
.plcell .plcl .plnum{margin-left:auto;font-size:13px;color:var(--ink-soft)}
.plcell .plstks{display:flex;flex-wrap:wrap;gap:3px;min-height:20px;margin-top:5px}
.plstk{width:19px;height:19px;border-radius:50%;background:var(--c,var(--ink-faint));color:#fff;
  font-size:9.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
  position:relative}
.plstk.anon{background:color-mix(in srgb,var(--dev) 55%,var(--panel))}
@keyframes plkf-stamp{0%{transform:scale(2.6) rotate(var(--rot,-14deg));opacity:0}
  55%{transform:scale(.86) rotate(0);opacity:1}75%{transform:scale(1.08)}100%{transform:scale(1)}}
.plstk.in{animation:plkf-stamp .42s var(--ease)}
.plstk.in::after{content:"";position:absolute;inset:-7px;border:2px solid var(--c,var(--dev));
  border-radius:50%;opacity:0;animation:plkf-ring .5s .1s var(--ease)}
@keyframes plkf-ring{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.plcell.win{border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.plcell.win::before{content:"👑";position:absolute;top:-13px;right:-6px;font-size:21px;
  animation:plkf-avin .5s var(--ease)}

/* ── 🎈 풍선 ── */
.plbals{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap;justify-content:center;
  min-height:150px;padding:8px 0 2px}
.plbal{display:grid;justify-items:center;gap:1px;border:0;background:none;cursor:pointer;
  padding:0 3px;position:relative;color:inherit}
.plbal .plbb{width:var(--s,40px);height:calc(var(--s,40px)*1.14);
  border-radius:50% 50% 50% 50%/46% 46% 54% 54%;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--lc) 45%,#fff) 12%,var(--lc) 78%);
  position:relative;transition:width .55s var(--ease),height .55s var(--ease)}
.plbal .plbb::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border:4px solid transparent;border-top:6px solid var(--lc)}
.plbal .plstr{width:1.5px;height:16px;background:var(--ink-faint);opacity:.6}
.plbal .plbl{font-size:12.5px;font-weight:800;max-width:86px;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;display:flex;gap:4px;align-items:center}
.plbal .plbl .plart{width:16px;height:16px;border-radius:5px}
.plbal .plnum{font-size:13px}
.plbal.mine .plbl{color:var(--dev)}
@keyframes plkf-boing{0%{transform:scale(1)}30%{transform:scale(1.22,1.14)}
  55%{transform:scale(.92,.96)}75%{transform:scale(1.08)}100%{transform:scale(1)}}
.plbal .plbb.boing{animation:plkf-boing .55s var(--ease)}
.plbal .plbb.deflate{transform:scale(.5) rotate(14deg);opacity:.45;
  transition:transform .9s var(--ease),opacity .9s}
.plbal.winb .plbl{color:var(--won)}
.plshard{position:absolute;width:9px;height:9px;border-radius:50% 0 50% 50%;background:var(--lc);
  left:50%;top:30%;animation:plkf-shard .7s ease-out forwards;pointer-events:none}
@keyframes plkf-shard{to{transform:translate(var(--dx),var(--dy)) rotate(300deg);opacity:0}}
.plbal .plbb.gone{opacity:0;transform:scale(1.5);transition:all .18s}

/* ── 🗳️ 개표식 ── */
.plboxw{display:flex;gap:16px;align-items:center;padding:4px 0}
.plboxg{flex:none;width:150px;text-align:center;position:relative}
.plboxg .plbx{font-size:64px;line-height:1;display:inline-block}
.plboxg .plbx.bump{animation:plkf-bump .4s var(--ease)}
@keyframes plkf-bump{0%{transform:scale(1)}35%{transform:scale(1.12,.9)}
  70%{transform:scale(.95,1.05)}100%{transform:scale(1)}}
.plboxg .plbx.rumble{animation:plkf-rumble .12s linear 9}
@keyframes plkf-rumble{0%{transform:translate(0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-3deg)}
  75%{transform:translate(3px,-1px) rotate(3deg)}100%{transform:translate(0)}}
.plpcount{font-family:var(--mono);font-size:13px;font-weight:800;color:var(--ink-soft);margin-top:2px}
.plslip{position:absolute;left:50%;top:-8px;width:22px;height:27px;margin-left:-11px;
  background:var(--panel);border:1.5px solid var(--line);border-radius:3px;z-index:4;
  animation:plkf-fly .7s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
.plslip::before{content:"";position:absolute;left:4px;right:4px;top:6px;height:2px;
  background:var(--line);box-shadow:0 5px 0 var(--line),0 10px 0 var(--line)}
@keyframes plkf-fly{0%{transform:translate(56px,-30px) rotate(13deg);opacity:0}
  30%{opacity:1}72%{transform:translate(0,26px) rotate(0) scaleY(1)}
  100%{transform:translate(0,44px) scaleY(.15);opacity:0}}
.plbopts{flex:1;display:grid;gap:5px}
.plbopt{display:flex;gap:8px;align-items:center;border:1.5px solid var(--line);
  background:var(--panel2);border-radius:10px;padding:8px 11px;font-size:13.5px;font-weight:700;
  cursor:pointer;text-align:left;color:inherit}
.plbopt:hover{border-color:var(--dev)}
.plbopt.mine{border-color:var(--dev);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev) 13%,transparent)}
.plbopt .pllock{margin-left:auto;font-size:13px;opacity:.55}
.plrev{display:grid;gap:6px}
.plrrow{display:flex;gap:9px;align-items:center;opacity:0;transform:translateY(7px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.plrrow.show{opacity:1;transform:none}
.plrrow .plrl{width:110px;flex:none;font-size:13.5px;font-weight:800;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.plrrow .plrtrk{flex:1;height:22px;background:var(--panel2);border-radius:99px;overflow:hidden}
.plrrow .plrtrk i{display:block;height:100%;width:0;border-radius:99px;
  background:color-mix(in srgb,var(--lc) 30%,var(--panel2));transition:width .8s var(--ease)}
.plrrow .plnum{width:24px;text-align:right;font-size:14px}
.plrrow.first .plrl,.plrrow.first .plnum{color:var(--won)}
.plrrow.first .plrtrk i{background:color-mix(in srgb,var(--won) 38%,var(--panel2))}
.plrrow.first .plrl::after{content:" 🎉"}

/* ── 🎲 뽑기 공통 무대 ── */
.plstage{padding:6px 0 2px;display:grid;justify-items:center;gap:8px;position:relative}
.plflash{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  animation:plkf-flashx .55s ease-out forwards;pointer-events:none;z-index:5}
@keyframes plkf-flashx{to{transform:scale(13);opacity:0}}
.plprize{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:6;
  display:flex;gap:6px;align-items:center;white-space:nowrap;background:var(--panel);
  border:1.5px solid var(--line);border-radius:99px;padding:5px 13px;font-size:14.5px;
  font-weight:800;box-shadow:var(--shadow)}
.plprize.up{animation:plkf-prz .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes plkf-prz{0%{transform:translate(-50%,18px) scale(.2);opacity:0}
  60%{transform:translate(-50%,-6px) scale(1.12);opacity:1}
  100%{transform:translate(-50%,0) scale(1)}}

/* ── 🪜 사다리 ── */
.pllad{width:100%;max-width:520px}
.pllad svg{width:100%;height:auto;display:block}
.plrail{stroke:var(--line);stroke-width:2}
.plpath{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);opacity:.85}
.plpath.go{animation:plkf-draw .55s ease-out forwards}
.plpath.winp{stroke-width:4}
.plpath.dim{opacity:.15;transition:opacity .45s}
@keyframes plkf-draw{to{stroke-dashoffset:0}}
.plrider{fill:var(--panel);stroke-width:3.5}
.pltop,.plbot{font-size:11.5px;font-weight:800;font-family:var(--sans);fill:var(--ink-soft)}
.plbot.mark{font-size:14px;transform-box:fill-box;transform-origin:center}
.plbot.mark.boom{animation:plkf-mark .7s var(--ease) forwards}
@keyframes plkf-mark{0%{transform:scale(1)}40%{transform:scale(2.1)}
  70%{transform:scale(1.1)}100%{transform:scale(1.5)}}

/* ── 🎡 돌림판 ── */
.plwhl{position:relative;width:190px;height:190px}
.plptr{position:absolute;left:50%;top:-7px;transform:translateX(-50%);z-index:3;font-size:19px;
  transform-origin:50% 22%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.plptr.kick{animation:plkf-kick .13s ease-out}
@keyframes plkf-kick{0%{transform:translateX(-50%) rotate(0)}45%{transform:translateX(-50%) rotate(-22deg)}
  100%{transform:translateX(-50%) rotate(0)}}
.pldisc{position:absolute;inset:0;border-radius:50%;border:5px solid var(--panel2);
  box-shadow:0 0 0 1.5px var(--line)}
.plsep{position:absolute;left:50%;top:0;width:2.5px;height:50%;margin-left:-1.25px;
  transform-origin:50% 100%;background:var(--panel2)}
.plwl{position:absolute;left:50%;top:50%;font-size:11px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);transform-origin:0 0}
.plhub{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border-radius:50%;
  background:var(--panel);border:1.5px solid var(--line);z-index:2;display:grid;
  place-items:center;font-size:12.5px;font-weight:800}

/* ── 🎰 슬롯 ── */
.plslt{display:flex;gap:10px;align-items:center}
.pllamp{width:10px;height:10px;border-radius:50%;background:var(--line)}
.plslt.spin .pllamp{animation:plkf-lamp .35s linear infinite alternate}
.plslt .pllamp:nth-child(odd){animation-delay:.17s}
@keyframes plkf-lamp{from{background:var(--line)}to{background:var(--warn)}}
.plwin2{width:190px;height:114px;border:2.5px solid color-mix(in srgb,var(--ink-faint) 60%,var(--line));
  border-radius:12px;overflow:hidden;position:relative;background:var(--panel2)}
.plwin2::after{content:"";position:absolute;left:0;right:0;top:38px;height:38px;
  border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line);pointer-events:none}
.plreel{position:absolute;left:0;right:0;top:0}
.plreel.blur{filter:blur(1.6px)}
.plri{height:38px;display:flex;gap:7px;align-items:center;justify-content:center;
  font-size:14.5px;font-weight:800}
.plri .plav{width:18px;height:18px;font-size:9.5px}
.plri.pass{animation:plkf-pass .2s}
@keyframes plkf-pass{40%{transform:scale(1.07)}}
.plri.hit{color:var(--won);animation:plkf-pop .5s var(--ease)}

/* ── 🍀 캡슐 뽑기 ── */
.plgch{position:relative;width:180px;height:244px}
.pldome{position:absolute;left:50%;top:2px;width:116px;height:116px;transform:translateX(-50%);
  border-radius:50%;border:3px solid color-mix(in srgb,var(--ink-faint) 55%,var(--line));
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.55) 6%,rgba(255,255,255,.12) 28%,transparent 52%),var(--panel2);
  overflow:hidden}
.pldome::after{content:"";position:absolute;left:50%;bottom:-2px;width:32px;height:13px;
  transform:translateX(-50%);border-radius:7px 7px 0 0;
  background:color-mix(in srgb,var(--ink) 38%,var(--panel2))}
.plcap{position:absolute;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(var(--cc) 50%,#fff 50%);border:1px solid rgba(0,0,0,.15);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.1)}
.plcap::after{content:"";position:absolute;left:4px;top:3px;width:7px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.8);transform:rotate(-20deg)}
.plcap.tmb{animation:plkf-tumble 1.15s var(--td,0s) cubic-bezier(.3,.6,.4,1)}
@keyframes plkf-tumble{
  0%{transform:translate(0,0) rotate(var(--r0,0deg))}
  22%{transform:translate(var(--jx),var(--jy)) rotate(var(--jr))}
  48%{transform:translate(calc(var(--jx)*-.7),calc(var(--jy)*.55)) rotate(calc(var(--jr)*-.8))}
  72%{transform:translate(calc(var(--jx)*.35),calc(var(--jy)*.8)) rotate(calc(var(--jr)*.4))}
  100%{transform:translate(0,0) rotate(var(--r0,0deg))}}
.plcap.sink{transition:transform .5s cubic-bezier(.5,0,.8,.4),opacity .1s .44s;opacity:0}
.plmachine{position:absolute;left:50%;top:112px;width:148px;height:96px;transform:translateX(-50%);
  background:linear-gradient(color-mix(in srgb,#fff 16%,var(--red)),color-mix(in srgb,#000 10%,var(--red)));
  border-radius:14px 14px 12px 12px}
.plmachine::before{content:"";position:absolute;right:15px;top:14px;width:4px;height:17px;
  border-radius:2px;background:rgba(0,0,0,.28)}
.plknob{position:absolute;left:50%;top:12px;width:36px;height:36px;margin-left:-18px;
  border-radius:50%;background:#fff;border:2.5px solid rgba(0,0,0,.22);display:grid;place-items:center}
.plknob::after{content:"";width:22px;height:7px;border-radius:4px;background:rgba(0,0,0,.26)}
.plknob.turn{animation:plkf-knob 1.9s var(--ease)}
@keyframes plkf-knob{0%{transform:rotate(0)}65%{transform:rotate(745deg)}
  85%{transform:rotate(700deg)}100%{transform:rotate(720deg)}}
.plflap{position:absolute;left:50%;bottom:6px;width:54px;height:34px;margin-left:-27px;
  background:rgba(0,0,0,.32);border-radius:9px 9px 11px 11px;box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
.plflap::after{content:"";position:absolute;left:5px;right:5px;bottom:0;height:5px;
  border-radius:3px;background:rgba(255,255,255,.28)}
.plout{position:absolute;left:50%;bottom:4px;width:34px;height:34px;margin-left:-17px;z-index:5}
.plout.pop{animation:plkf-outpop .8s cubic-bezier(.34,1.25,.5,1)}
@keyframes plkf-outpop{0%{transform:translateY(-26px) scale(.4);opacity:0}
  35%{transform:translateY(10px) scale(1.05);opacity:1}
  58%{transform:translateY(-11px)}78%{transform:translateY(3px)}
  100%{transform:translateY(0) scale(1)}}
.plout.antic{animation:plkf-antic .5s ease-in-out 2, plkf-seam 1.05s ease-in-out forwards}
@keyframes plkf-antic{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg)}70%{transform:rotate(13deg)}}
@keyframes plkf-seam{0%,55%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}100%{filter:drop-shadow(0 0 7px var(--cc))}}
.plh{position:absolute;left:0;width:34px;height:17px}
.plh.t{top:0;border-radius:17px 17px 0 0;
  background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 65%),var(--cc)}
.plh.b{bottom:0;border-radius:0 0 17px 17px;background:#fff;box-shadow:inset 0 -3px 5px rgba(0,0,0,.12)}
.plout.open .plh.t{animation:plkf-ht .6s cubic-bezier(.3,.7,.4,1) forwards}
.plout.open .plh.b{animation:plkf-hb .6s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes plkf-ht{to{transform:translate(-27px,-44px) rotate(-72deg);opacity:0}}
@keyframes plkf-hb{to{transform:translate(24px,10px) rotate(56deg);opacity:0}}
.plring{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;
  border:3px solid var(--cc);animation:plkf-ringx .55s ease-out forwards;pointer-events:none}
@keyframes plkf-ringx{to{transform:scale(6);opacity:0}}

/* ── 작성 창 부속 ── */
.plseg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--panel);vertical-align:middle}
.plseg button{border:0;background:none;padding:6px 12px;font-size:13px;font-weight:700;
  color:var(--ink-faint);cursor:pointer}
.plseg button.on{background:color-mix(in srgb,var(--dev) 10%,var(--panel));color:var(--dev)}
.plseg button+button{border-left:1px solid var(--line2)}
/* 토글 두 벌·프리셋+시각 지정은 한 열로 가지런히 — 옆으로 흘리면 줄바꿈 자리가 운에 달린다 */
.plsegs{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pldtrow{display:flex;gap:6px}
.pldtrow input[type=time]{width:118px}
.pldtrow input[type=date]{width:148px}
.plct{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-faint)}
.mmlab .plct{float:right}
.plopt{display:flex;gap:7px;align-items:center;margin-bottom:6px}
.plopt .ploi{font-family:var(--mono);font-size:12px;color:var(--ink-faint);width:18px;
  text-align:right;flex:none}
.plopt .plthumb{width:34px;height:34px;flex:none;border-radius:8px;border:1.5px dashed var(--line);
  background:none;display:grid;place-items:center;font-size:14px;color:var(--ink-faint);
  padding:0;cursor:pointer;overflow:hidden}
.plopt .plthumb:hover{border-color:var(--dev);color:var(--dev)}
.plopt .plthumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.plopt .plrm{border:0;background:none;color:var(--ink-faint);font-size:15px;padding:2px 5px;cursor:pointer}
.plopt .plrm:hover{color:var(--red)}
.pladd{border:1.5px dashed var(--line);background:none;border-radius:9px;width:100%;
  padding:7px;font-size:13.5px;font-weight:700;color:var(--ink-faint);cursor:pointer}
.pladd:hover{border-color:var(--dev);color:var(--dev)}
.plsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.plsc{border:1.5px solid var(--line);background:var(--panel);border-radius:12px;
  padding:10px 11px 9px;text-align:left;display:grid;gap:2px;position:relative;cursor:pointer;color:inherit}
.plsc:hover{border-color:var(--dev)}
.plsc.on{border-color:var(--dev);box-shadow:0 0 0 3px color-mix(in srgb,var(--dev) 16%,transparent)}
.plsc .sn{font-size:14px;font-weight:800}
.plsc .sd{font-size:12px;color:var(--ink-faint);line-height:1.45}
.plsc .plprev{height:34px;border-radius:8px;background:var(--panel2);position:relative;
  overflow:hidden;margin-bottom:5px}
/* 살아 움직이는 미리보기 8종 */
.plpv-race .plprev i{position:absolute;left:6px;height:7px;border-radius:99px;
  background:color-mix(in srgb,var(--dev) 45%,var(--panel))}
.plpv-race .plprev i:nth-child(1){top:7px;animation:plkf-mr1 2.2s var(--ease) infinite}
.plpv-race .plprev i:nth-child(2){top:20px;background:color-mix(in srgb,var(--dsgn) 45%,var(--panel));
  animation:plkf-mr2 2.2s var(--ease) infinite}
@keyframes plkf-mr1{0%,15%{width:24px}55%{width:58px}100%{width:58px}}
@keyframes plkf-mr2{0%,30%{width:34px}75%{width:88px}100%{width:88px}}
.plpv-stk .plprev i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--dsgn);opacity:0}
.plpv-stk .plprev i:nth-child(1){left:16px;top:11px;animation:plkf-ms 2.4s infinite}
.plpv-stk .plprev i:nth-child(2){left:48px;top:14px;background:var(--mkt);animation:plkf-ms 2.4s .7s infinite}
.plpv-stk .plprev i:nth-child(3){left:82px;top:9px;background:var(--dev);animation:plkf-ms 2.4s 1.4s infinite}
@keyframes plkf-ms{0%{transform:scale(2.6);opacity:0}12%{transform:scale(.9);opacity:1}
  18%{transform:scale(1)}100%{opacity:1}}
.plpv-bal .plprev i{position:absolute;bottom:4px;width:16px;height:19px;
  border-radius:50% 50% 50% 50%/45% 45% 55% 55%;background:var(--dsgn)}
.plpv-bal .plprev i:nth-child(1){left:30px;animation:plkf-mb 2s var(--ease) infinite alternate}
.plpv-bal .plprev i:nth-child(2){left:68px;background:var(--dev);
  animation:plkf-mb 2s .5s var(--ease) infinite alternate-reverse}
@keyframes plkf-mb{from{transform:scale(.8)}to{transform:scale(1.25)}}
.plpv-box .plprev u{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:34px;
  height:16px;background:color-mix(in srgb,var(--ink) 22%,var(--panel2));border-radius:3px}
.plpv-box .plprev u::after{content:"";position:absolute;left:8px;top:-2px;width:18px;height:3px;
  border-radius:2px;background:var(--panel)}
.plpv-box .plprev i{position:absolute;left:50%;margin-left:-6px;width:12px;height:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;animation:plkf-mx 2.1s infinite}
@keyframes plkf-mx{0%{top:-14px;opacity:0;transform:rotate(-14deg)}25%{opacity:1}
  55%{top:8px;transform:rotate(0);opacity:1}70%{top:12px;opacity:0}100%{opacity:0}}
.plpv-lad .plprev i{position:absolute;top:4px;bottom:4px;width:2px;background:var(--line);left:24px}
.plpv-lad .plprev i:nth-child(2){left:64px}
.plpv-lad .plprev i:nth-child(3){left:104px}
.plpv-lad .plprev u{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mkt);
  animation:plkf-ml 2.2s linear infinite}
@keyframes plkf-ml{0%{left:20px;top:2px}30%{left:20px;top:12px}45%{left:60px;top:12px}
  70%{left:60px;top:22px}85%{left:100px;top:22px}100%{left:100px;top:30px}}
.plpv-whl .plprev i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;
  border-radius:50%;background:conic-gradient(var(--dev) 0 25%,var(--dsgn) 0 50%,var(--mkt) 0 75%,var(--won) 0);
  animation:plkf-mw 2.6s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes plkf-mw{from{transform:rotate(0)}to{transform:rotate(720deg)}}
.plpv-slt .plprev u{position:absolute;left:50%;top:4px;bottom:4px;width:30px;transform:translateX(-50%);
  border:1.5px solid var(--line);border-radius:5px;overflow:hidden}
.plpv-slt .plprev u i{position:absolute;left:5px;right:5px;height:4px;border-radius:2px;
  background:var(--ink-faint);animation:plkf-mt 1.1s linear infinite}
.plpv-slt .plprev u i:nth-child(2){animation-delay:.37s}
.plpv-slt .plprev u i:nth-child(3){animation-delay:.74s}
@keyframes plkf-mt{from{top:-6px}to{top:30px}}
.plpv-gch .plprev u{position:absolute;left:50%;top:3px;width:24px;height:24px;transform:translateX(-50%);
  border-radius:50%;border:1.5px solid var(--line);background:var(--panel)}
.plpv-gch .plprev i{position:absolute;width:8px;height:8px;border-radius:50%}
.plpv-gch .plprev i:nth-child(2){left:calc(50% - 8px);top:15px;background:linear-gradient(var(--dev) 50%,#fff 50%)}
.plpv-gch .plprev i:nth-child(3){left:calc(50% + 1px);top:15px;background:linear-gradient(var(--mkt) 50%,#fff 50%)}
.plpv-gch .plprev i:nth-child(4){left:calc(50% - 4px);background:linear-gradient(var(--dsgn) 50%,#fff 50%);
  animation:plkf-mg 2s infinite}
@keyframes plkf-mg{0%,20%{top:9px;opacity:1;transform:scale(1)}55%{top:25px;transform:scale(1)}
  66%{top:21px}76%{top:25px}88%{transform:scale(1.45);opacity:1}
  100%{top:25px;transform:scale(1.45);opacity:0}}

@media (max-width:880px){
  .pllane .pllb{width:92px}
  .pllane .plwho{width:64px}
  .plboxw{flex-direction:column}
}

/* ═══════════════ 🏢 오피스 개편 (3.41.0) — 상태 밴드 + 주간 캘린더 한 판 ═══════════════
 *
 * 세 층 풀폭: ⚡ NOW 스트립 → 공간 밴드 → 캘린더(+📌 피드 260px).
 * 공간 밴드는 캘린더 밴드(🌴🚩📌)와 같은 「왼쪽 라벨 · 오른쪽 내용」 줄 문법이다 —
 * 회의·대화·휴게실·자리가 각자 줄을 갖고, 수가 늘면 그 줄 안에서 옆으로만 는다.
 * 사람은 한 번만 보인다: 방에 있으면 문(door)의 얼굴로, 아니면 자리 칩으로. */

/* ── ⚡ NOW — 풀폭 가로 스트립. 가로 스크롤 판은 grid 행·flex 열 안에서 최소 높이가
   0 으로 취급돼 주저앉는다 (목업 v4 grid 에서 실측 → 본편 .view 는 column flex 라 재발,
   2026-08-28 사용자). flex:none 으로 수축에서 뺀다 — 세 층 전부 같은 이유로 고정한다. */
.ofnow{display:flex;align-items:center;gap:8px;padding:10px 13px;margin-bottom:12px;
  overflow-x:auto;flex:none}
.ofband,.ofcal{flex:none}
.ofnow .ofnlab{flex:none;font-size:14.5px;font-weight:800;margin-right:3px}
.ofnow .ofnlab span{display:block;font-size:11.5px;font-weight:500;color:var(--ink-faint);line-height:1.3}
/* 빈 NOW 는 **한 줄이다** (2026-08-28 사용자 — 「높이가 훨씬 높다」).
   전역 .empty 는 판 한가운데를 비우는 자리용이라 위아래 40px 을 물고 있었다 —
   가로 스트립이 그 옷을 그대로 입어 항목이 있을 때 79px, 비면 138px 이 됐다.
   짧은 이름의 전역 규칙이 남의 화면에 걸리는 그 자리다(.empty 는 전역이다) */
.ofnow .empty{white-space:nowrap;padding:7px 2px;font-size:13.5px}
#nowList{display:contents}
.now-item{flex:none;display:flex;align-items:center;gap:9px;border:1px solid var(--line2);
  background:var(--panel2);border-radius:11px;padding:7px 12px 7px 9px;cursor:pointer}
.now-item:hover{border-color:var(--line)}
.now-item .bar{width:3px;height:28px;border-radius:2px;background:var(--c);flex:none}
.now-item .tt{font-weight:700;font-size:13.5px;line-height:1.35;white-space:nowrap}
.now-item .tt span{display:block;font-weight:500;font-size:12px;color:var(--ink-faint)}
.now-item .acts{display:flex;gap:5px;margin-left:2px}

/* ── 공간 밴드 — 줄 문법 ── */
.ofband{margin-bottom:12px;padding-bottom:8px}
/* 줄은 가운데 정렬 + 최소 높이 — 문·칩·빈 문구가 섞여도 행 높이와 눈높이가 일정하다
   (2026-08-28 사용자: 「높이가 가운데가 안 맞아」) */
.obrow{display:flex;align-items:center;gap:10px;padding:5px 0;min-height:46px;
  border-top:1px dashed var(--line2)}
.obrow:first-of-type{border-top:0}
.oblab{flex:none;width:88px;font-size:12.5px;font-weight:800;color:var(--ink-faint);
  white-space:nowrap;align-self:center}
.oblab b{color:var(--ink-soft)}
.obct{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
/* 회의 카드는 기존 .room 옷 그대로 — 줄 안에서는 폭만 정해 준다 */
.obct>.room{flex:0 1 300px;min-width:236px;min-height:0;margin:0}
.obct .zempty{font-size:13.5px;color:var(--ink-faint)}
/* ⚫ 접속 안 함 접기 — 옛 details.doff 의 정신 그대로: 눌 것 없는 사람에게 자리를 안 준다 */
.offtog{border:1px dashed var(--line);background:none;border-radius:99px;padding:2px 11px;
  font-size:12px;font-weight:800;color:var(--ink-faint);flex:none;line-height:1.8}
.offtog b{color:var(--ink-soft)}
.offtog:hover{border-color:var(--dev);color:var(--dev)}
/* 휴게실 문 — .loungec 을 줄에 맞게 알약으로 */
.obct .loungec{margin-left:0;border:1.5px dashed var(--line);border-radius:99px;padding:5px 8px 5px 12px}
.obct .loungec.mine{border-style:solid;border-color:var(--dev);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dev) 14%,transparent)}
.omore{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;
  font-weight:800;color:var(--ink-soft);background:var(--line2);border:2px solid var(--panel);
  margin-left:-6px;cursor:pointer;flex:none}

/* ── 자리 칩 — 카드 두 줄이 칩 한 줄로. 상태는 아바타 점·그룹 글리프·툴팁·사람 창 ── */
.oglab{font-size:13px;flex:none}
.ogsep{width:1px;height:20px;background:var(--line);flex:none;margin:0 4px}
.ochip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);
  background:var(--panel2);border-radius:99px;padding:3px 10px 3px 4px;font-size:13px;
  font-weight:700;flex:none}
/* .oa 의 원 모양 기본 옷은 .occ 스코프에 있다 — 칩 안에서는 여기서 다시 입힌다.
   안 입히면 사진 없는 사람의 글자가 원 없이 맨몸으로 틀어진다 (2026-08-28 사용자) */
.ochip .oa{width:24px;height:24px;font-size:11.5px;margin:0;border:0;position:relative;
  cursor:pointer;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--oc,var(--dev)) 18%,var(--panel));
  color:var(--oc,var(--dev));font-weight:800}
.ochip .oa::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;
  border-radius:50%;background:var(--sc,var(--won));border:2px solid var(--panel2)}
.ochip .oa .avimg{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ochip .meTag{font-size:10.5px;font-weight:800;color:var(--dev)}
.ochip .dualbdg{font-size:11px}
.ochip .knock{border:1px solid var(--line);background:var(--panel);border-radius:99px;
  padding:0 8px;font-size:11.5px;font-weight:800;line-height:1.7}
.ochip .knock:hover{border-color:var(--dev);color:var(--dev)}
.ochip .knock.bell.onn{border-color:color-mix(in srgb,var(--won) 45%,var(--line));color:var(--won)}
.ochip.offp{border-style:dashed;background:none;color:var(--ink-faint)}
.ochip.offp .oa{opacity:.5}
.ochip.offp .oa::after{display:none}

/* ── 캘린더 풀폭 + 📌 구독 피드 260px ── */
.ofcal{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px;align-items:start}
.ofchead{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.ofchead h2{font-size:16px;font-weight:800}
.ofchead .sp{flex:1}
/* 임베드 전용 보정은 걷었다 (3.42.1) — 판 폭·창 높이·칸·회의 칩 전부 기본값 한 벌이 됐다:
   사용자가 「임베딩한 캘린더가 마음에 들어서 모달도 똑같게」. 여기 다시 갈라 쓰지 말 것 */
/* 📌 구독 피드 — 내용만큼만 서고(align-items:start), 길어지면 안에서 넘긴다 */
#feedList{max-height:400px;overflow-y:auto}
/* 폰 전용 물건(점 스트립·그 날 목록·「전체」)은 PC 에서 감춘다 — 아래 860 블록이 뒤집는다 */
#weekStrip,#dayList,#btnCal{display:none}
.oflist{margin-top:9px}
.oflist .caltd .tmm{flex:none;font-family:var(--mono);font-size:12.5px;font-weight:700;
  color:var(--ink-faint);width:42px}
.oflist .caltd.done b{color:var(--ink-faint);text-decoration:line-through}
.oflist .caltd .lv{color:var(--red);font-size:11px;font-weight:800;flex:none}
.calsday.sel{border-color:var(--dev);box-shadow:0 0 0 2px color-mix(in srgb,var(--dev) 22%,transparent)}

/* 좁은 창 — 문턱은 하나: 피드가 캘린더 아래로. 나머지는 줄바꿈이 알아서 (목업 v4) */
@media (max-width:1150px){ .ofcal{grid-template-columns:1fr} }

@media (max-width:860px){
  /* 모바일 — 주간 판(최소 620px)만 점 스트립 + 그 날 목록으로 바꿔친다.
     폰 차례는 NOW → 밴드 → 이번 주 → 피드 그대로다 (목업 v4) */
  #ofCal,#ofCalFilters,.ofcalseg,#btnOfFeeds,#ofPrev,#ofNext{display:none}
  #weekStrip{display:grid}
  #dayList{display:block}
  #btnCal{display:inline-block}
  .oblab{width:76px}
  /* 터치 표적 — 28px 버튼 함정: 폰에서는 32px 을 지킨다 */
  .obct .mini,.now-item .mini{min-height:32px}
  .ochip .knock{line-height:2;padding:2px 10px}
}

/* ── 🏷 계정과목 추천의 근거 (3.47.0 사용자) ────────────────────────────────
   「이게 왜 자동으로 골라지는지를 알면 문제가 없다」 — 조심스럽게 감추는 것보다
   근거를 보여주는 쪽이 낫다. 사전에서 온 것(mem)과 규칙이 짐작한 것을 가른다.
   자세한 내력(언제·누가·몇 번째)은 지날 때 뜬다 */
.acwhy{display:inline-block;font-size:10.5px;font-weight:800;border-radius:4px;
  padding:0 5px;margin-left:5px;vertical-align:middle;cursor:default;
  background:var(--panel2);color:var(--ink-faint);border:1px solid var(--line2)}
.acwhy.mem{background:color-mix(in srgb,var(--acct) 12%,var(--panel));
  color:var(--acct);border-color:color-mix(in srgb,var(--acct) 26%,var(--panel))}

/* ── 세 갈래가 한 창을 쓴다 (3.47.0 사용자) ─────────────────────────────────
   갈래마다 몸통 높이가 달라 판이 79px 늘었다 줄었다 했고, 가운데 정렬이라 윗선이
   40px 오르내렸다. 가장 큰 갈래(지출)에 맞춰 흡수하면 창이 아예 안 움직인다.
   세그가 없는 사람(일반 직원)은 갈래가 하나라 이 규칙에 안 걸린다 — 빈자리가 생기지 않는다 */
/* 715px = 가장 큰 갈래(지출)의 몸통 실측값. 셋을 같은 높이로 붙들면 판이 아예 안 움직인다
   — 실측 624/610/545(윗선 57/64/97) 가 전부 하나로 모인다. 짧은 갈래에 생기는 빈자리는
   단추를 바닥으로 내려 흡수한다(margin-top:auto): 안 그러면 단추 아래가 텅 빈 채 끝난다 */
#newExpense.multi #exBody,#newExpense.multi #exAlt{
  min-height:715px;display:flex;flex-direction:column}
#newExpense.multi #exBody>.mmfoot,#newExpense.multi #exAlt>.mmfoot{margin-top:auto}

/* 🏢 시트 안의 팝오버는 **시트 위에** 선다 (2026-08-29 사용자 — 「더보기 메뉴의 오피스
   팝오버가 작동하지 않음」). 열리기는 열렸는데 z 58 이라 시트(.rail 71) 뒤에 서 있었다 —
   눌러도 아무 일도 안 일어나는 것처럼 보인다.
   **파일 끝에 둔다**: 위쪽 미디어쿼리에 적으면 뒤에 오는 `.osppop{z-index:58}` 이
   같은 특이도로 이겨서 그대로 58 이 된다(실측). 짧은 이름의 전역 규칙과 같은 함정이다. */
@media (max-width:860px){ .osppop{z-index:76} }

/* ══════════ 📦 제품 패키지 (3.51.0) ══════════
   제품 하나의 전 과정을 한 화면에서. 클래스는 전역 충돌을 피해 pk* 접두.
   새 시각 언어를 만들지 않는다 — 타일은 .mtile, 판은 .mmodal, 배지는 기존 알약 문법을 그대로 쓴다.
   단계 번호에 원문자(①②③)를 쓰지 않는다: 모노 스택에 글리프가 없어 아주 작게 그려진다. */
#v-products{--pk:var(--prod)}
/* 본편 .shead 는 flex 가 아니다 — 목업에서만 flex 였던 것을 전제해 버튼이 제목 아래로 떨어졌다.
   이 화면 안에서만 가로줄로 세운다(전역 .shead 는 건드리지 않는다) */
#v-products .shead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#v-products .shead .sp{flex:1}
#v-products .shead h1{margin:0}
/* 🌊 물길 — ∞ 는 모노 스택에서 실오라기처럼 그려진다 */
.pkgnum.wave{font-size:16px;font-weight:700;letter-spacing:0;color:var(--pk)}
/* 지우기 — 되돌릴 수 없는 단추는 빨강으로 선다 */
.mini.pkdots{font-size:16px;font-weight:800;line-height:1;padding:5px 9px}
.mini.pkdots:hover{border-color:var(--pk);color:var(--pk)}
.mini.pkdel:hover{border-color:var(--red);color:var(--red)}
.mini.pkdel.pri{background:var(--red);border-color:var(--red);color:#fff}
.mini.pkdel.pri:hover{color:#fff;opacity:.9}
.pkmrow.pkpick{cursor:pointer;gap:10px;padding:9px 0}
.pkmrow.pkpick input{width:16px;height:16px;accent-color:var(--pk);flex:none}
.pkrseg.pkwave .rn{font-size:14px;letter-spacing:0;color:var(--pk)}
.pkrseg.pkwave .rt{color:var(--pk)}
.pkempty{color:var(--ink-faint);font-size:14px;padding:28px 4px}
.pkdim{color:var(--ink-faint)}
.pkred{color:var(--warn)}
.pkhint{font-size:12px;color:var(--ink-faint);margin-top:12px}

/* 목록 */
.pklist{display:grid;gap:9px;max-width:960px}
.pkrow{display:flex;gap:14px;align-items:center;background:var(--panel);border:1.5px solid var(--line);
  border-radius:14px;padding:13px 17px;width:100%;text-align:left;transition:border-color var(--t-mid) var(--ease)}
.pkrow:hover{border-color:var(--pk)}
.pkname{font-size:16.5px;font-weight:800;letter-spacing:-.01em;flex:none;min-width:96px}
.pkmini{display:flex;gap:3px;width:120px;flex:none}
.pkmini i{flex:1;height:6px;border-radius:3px;background:var(--line2)}
.pkmini i.done{background:var(--won)}
.pkmini i.doing{background:var(--dev)}
.pkmini i.pkwave{background:var(--pk)}
.pkps{font-size:13.5px;color:var(--ink-soft);flex:1;min-width:0}
.pkstuck{font-family:var(--mono);font-size:12px;font-weight:800;color:var(--warn);flex:none;
  background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  border:1px solid color-mix(in srgb,var(--warn) 26%,var(--panel));border-radius:99px;padding:2px 10px}
.pkchev{color:var(--ink-faint);font-weight:800;flex:none}
.pklab{font-size:12.5px;color:var(--ink-faint);font-weight:800;margin:22px 0 8px;
  display:flex;gap:8px;align-items:center;max-width:960px}
.pklab .mini{margin-left:auto}
.pklab2{font-size:12.5px;color:var(--ink-faint);font-weight:800;margin:14px 0 6px}
.pkcand{display:flex;gap:11px;align-items:center;background:var(--panel2);border:1.5px dashed var(--line);
  border-radius:13px;padding:10px 15px;margin-bottom:8px;max-width:960px}
.pkcn{font-size:14.5px;font-weight:800;flex:none}
.pkci{font-size:12.5px;color:var(--ink-faint);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* 진행판 머리 */
.pkback{border:1px solid var(--line);background:var(--panel);border-radius:10px;width:34px;height:34px;
  font-size:16px;font-weight:800;flex:none;align-self:center}
.pkback:hover{border-color:var(--pk);color:var(--pk)}
.pktitle{cursor:pointer;display:flex;gap:8px;align-items:center}
.pkalias{font-size:12.5px;font-weight:600;color:var(--ink-faint)}
.pktitle:hover .pkalias{color:var(--pk)}
.pkchips{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
.pkchip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);background:var(--panel);
  border-radius:99px;padding:4px 12px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.pkchip:hover{border-color:var(--pk);color:var(--pk)}
.pkchip i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}

/* 레일 */
.pkrail{display:flex;gap:5px;margin:0 0 14px;flex-wrap:wrap}
.pkrseg{flex:1;min-width:104px;background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;position:relative;overflow:hidden;text-align:left;
  transition:border-color var(--t-mid) var(--ease)}
.pkrseg:hover,.pkrseg.on{border-color:var(--pk)}
.pkrseg .rn{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.08em}
.pkrseg .rt{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;margin-top:1px}
.pkrseg .rb{position:absolute;left:0;bottom:0;height:3px;background:var(--line2);width:100%}
.pkrseg .rb i{display:block;height:100%;background:var(--won);transition:width var(--t-slow) var(--ease)}
.pkrseg.doing .rt{color:var(--dev)}
.pkrseg.doing .rb i{background:var(--dev)}
.pkrseg.pkwave .rt{color:var(--pk)}
.pkrseg.pkwave .rb i{background:var(--pk)}

/* 본문 2단 */
.pkwork{display:flex;gap:16px;align-items:flex-start}
.pkmain{flex:1;min-width:0}
.pkinsp{width:352px;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;max-height:calc(var(--vh100) * .68);overflow-y:auto}
@media(max-width:980px){.pkwork{flex-direction:column}.pkinsp{width:100%;max-height:none}}

/* 단계 */
.pkstep{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;
  margin-bottom:10px;overflow:hidden;transition:border-color var(--t-mid) var(--ease)}
.pkstep.sel{border-color:var(--pk)}
.pksh{display:flex;gap:11px;align-items:center;padding:12px 15px;width:100%;border:0;background:none;text-align:left}
.pksh:hover .pksname{color:var(--pk)}
/* 단계 번호 — 원문자 대신 숫자 + 둥근 배지 */
.pkgnum{flex:none;width:27px;height:27px;border-radius:9px;background:var(--panel2);
  border:1px solid var(--line);font-family:var(--mono);font-size:13px;font-weight:800;
  color:var(--ink-faint);display:inline-flex;align-items:center;justify-content:center}
.pkgnum.sm{width:22px;height:22px;font-size:12px}
.pkstep.done .pkgnum{background:color-mix(in srgb,var(--won) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--won) 35%,var(--panel));color:var(--won)}
.pkstep.doing .pkgnum{background:color-mix(in srgb,var(--dev) 12%,var(--panel));
  border-color:color-mix(in srgb,var(--dev) 35%,var(--panel));color:var(--dev)}
.pksname{font-size:16px;font-weight:800;letter-spacing:-.01em}
.pkbadge{margin-left:auto;flex:none;font-size:12.5px;font-weight:800;border-radius:99px;
  padding:3px 11px;border:1px solid var(--line);background:var(--panel2);color:var(--ink-faint)}
.pkbadge.done{color:var(--won);background:color-mix(in srgb,var(--won) 10%,var(--panel));
  border-color:color-mix(in srgb,var(--won) 28%,var(--panel))}
.pkbadge.doing{color:var(--dev);background:color-mix(in srgb,var(--dev) 10%,var(--panel));
  border-color:color-mix(in srgb,var(--dev) 28%,var(--panel))}

/* 카드 줄 — div 다. button 안에 button 을 넣으면 브라우저가 중첩을 깨뜨려 클릭이 어긋난다 */
.pkcards{border-top:1px solid var(--line2);padding:4px 15px 10px}
.pkcrow{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);cursor:pointer}
.pkcrow:last-child{border-bottom:0}
.pkcrow:hover .pkct{color:var(--pk)}
/* 상태 점 — 한글 클래스 선택자를 피해 속성으로 가른다 */
.pkcst{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
.pkcst[data-st="진행중"]{background:var(--dev)}
.pkcst[data-st="완료"]{background:var(--won)}
.pkcst[data-st="보관"]{background:var(--won);opacity:.45}
.pkct{font-size:14px;font-weight:700;letter-spacing:-.01em;flex:none;max-width:50%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkcrow.closed .pkct{color:var(--ink-faint);font-weight:600}
.pkcchk{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);flex:none}
.pkcev{font-size:12px;border-radius:99px;padding:1px 9px;flex:none;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--pk) 30%,var(--panel));
  background:color-mix(in srgb,var(--pk) 8%,var(--panel));color:var(--pk)}
.pkcwho{margin-left:auto;flex:none;display:flex;gap:5px;align-items:center;font-size:12.5px}
.pkcstt{font-size:11.5px;color:var(--ink-faint);flex:none;min-width:34px;text-align:right}
.pkav{width:22px;height:22px;border-radius:50%;color:#fff;font-size:11.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:none}

/* 물길 문 + 현황판 타일 (.mtile 문법 그대로 — 숫자는 산세리프 23px) */
.pkgate{border-top:1px solid var(--line2);padding:12px 15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pkgate p{flex:1;min-width:200px;font-size:13.5px;color:var(--ink-soft)}
.pkgate p b{color:var(--ink)}
.pktiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;padding:0 15px 14px}
.pktile{background:var(--panel2);border:1px solid var(--line2);border-radius:13px;padding:11px 14px 12px}
.pktile .ml{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-faint)}
.pktile .mv{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:3px 0 1px;
  font-variant-numeric:tabular-nums;line-height:1.25}
.pktile .mv i{font-style:normal;font-size:13px;color:var(--ink-faint);font-weight:700;letter-spacing:0}
.pktile .ms{font-size:13px;color:var(--ink-faint)}
.pktile .mb{height:7px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:7px}
.pktile .mb i{display:block;height:100%;background:var(--won);border-radius:99px}
.pktile.warn{border-color:color-mix(in srgb,var(--warn) 32%,var(--panel))}
.pktile.warn .mv{color:var(--warn)}
.pktile.warn .mb i{background:var(--warn)}

/* 도킹 상세 */
.pkih{display:flex;gap:8px;align-items:flex-start;margin-bottom:2px}
.pkih .it{flex:1;font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.4}
.pkmeta{font-size:12.5px;color:var(--ink-faint);margin:2px 0 12px}
.pkbox{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:4px 12px}
.pkbox.pkpad{padding:10px 12px;font-size:13px;color:var(--ink-soft)}
.pkirow{display:flex;gap:8px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.pkirow:last-child{border-bottom:0}
.pkirow .k{flex:none;width:56px;color:var(--ink-faint)}
.pkirow .v{flex:1;color:var(--ink)}
.pkirow.pkclick{cursor:pointer}
.pkirow.pkclick:hover .v{color:var(--pk)}
.pkstsum{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.pkstp{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink-soft);
  border:1px solid var(--line);background:var(--panel2);border-radius:99px;padding:3px 11px}
.pkstp i{font-style:normal;font-family:var(--mono);font-weight:800}
.pkstp.doing{color:var(--dev);border-color:color-mix(in srgb,var(--dev) 28%,var(--panel));
  background:color-mix(in srgb,var(--dev) 8%,var(--panel))}
.pkstp.done{color:var(--won);border-color:color-mix(in srgb,var(--won) 26%,var(--panel));
  background:color-mix(in srgb,var(--won) 8%,var(--panel))}
.pkflow{display:flex;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line2);font-size:13px}
.pkflow:last-child{border-bottom:0}
.pkflow .fd{flex:none;width:54px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.pkflow .fv{flex:1;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkwarn{font-size:13px;color:var(--warn);padding:5px 0}

/* 시작 세트 · 연결 관리 — 판은 본편 .mmodal (판=배경색, 내용=흰 박스) */
#pkModal .mmbox.pkwide{width:min(720px,100%)}
.pkbigin{font-size:16px;font-weight:800;padding:9px 12px;margin-bottom:10px}
.pknote{font-size:13.5px;color:var(--ink-soft);margin-bottom:12px}
.pkcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:10px}
.pkmrow{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line2)}
.pkmrow:last-child{border-bottom:0}
.pkmrow .mk{flex:1;display:flex;gap:8px;align-items:center}
.pkin{width:150px;padding:4px 9px;font-weight:800}
.pkmfoot{display:flex;justify-content:flex-end}
.pktpl{max-height:44vh;overflow-y:auto;padding-right:2px}
.pktg{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.pktgh{display:flex;gap:10px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line2)}
.pktgh b{font-size:15px;letter-spacing:-.01em}
.pktr{display:flex;gap:10px;align-items:center;padding:8px 15px;border-bottom:1px solid var(--line2)}
.pktr:last-child{border-bottom:0}
.pktr.off .tt{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--line)}
.pktr .tt{font-size:14px;font-weight:700;flex:none}
.pktr .tc{font-size:12.5px;color:var(--ink-faint);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pksw{position:relative;width:38px;height:22px;border-radius:99px;background:var(--line);
  border:0;flex:none;transition:background var(--t-mid) var(--ease)}
.pksw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left var(--t-mid) var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pksw.on{background:var(--pk)}
.pksw.on::after{left:18px}
.pktplsum{position:sticky;bottom:0;background:var(--panel);border:1.5px solid var(--pk);border-radius:13px;
  padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}

/* ═══ 🗂️ 툴 — 한 칸에, 같은 손잡이로 (2026-08-27 사용자) ═══
   「단계」와 「열려 있는 툴」이 따로 서 있던 것을 한 칸으로 합쳤다.
   쓰는 사람에게 그 둘은 같은 질문이다 — 이 사람이 이 툴을 어디까지 쓰나.

   ⚠️ **왼쪽 정렬이 안 되던 이유**: `.vv` 가 가로줄용으로 `align-items:center` 를 갖고 있는데
   여기서 방향을 세로로 뒤집으면(`flex-direction:column`) 그 값이 **가로 가운데 정렬**이 된다.
   그래서 줄이 통째로 오른쪽으로 밀려 보였다 — `align-items:stretch` 로 끊는다. */
/* ⚠️ `.sy2fl > .vv` 는 클래스 **둘**(0,2,0)이라 `.systools` 하나(0,1,0)보다 세다 —
   순서를 뒤에 둬도 안 이긴다. 그래서 `align-items:stretch` 가 통째로 무시되고
   `.vv` 의 `center` 가 남았는데, 방향만 세로로 바뀌니 그 값이 **가로 가운데 정렬**이 되어
   줄이 화면 한복판에 섰다 (2026-08-27 사용자). 같은 자리에서 이겨야 한다. */
.sy2fl > .vv.systools{display:flex;flex-direction:column;align-items:stretch;
  justify-content:flex-start;gap:4px;width:100%}
.systool{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:32px}
.systool .nm{flex:none;width:148px;font-size:13.5px;font-weight:800}
.systool .sysseg3{flex:none;height:30px}
.systool .sysseg3 button{height:100%;display:flex;align-items:center;padding:0 14px;font-size:13px}
.systool.dead{opacity:.45}
.systool.dead .nm{text-decoration:line-through}
.systool.diff .nm{color:var(--warn)}
/* ⚖️ 직책 기본 안에서는 판 밖으로 안 나가게 */
.sy2sb .systools{margin:2px 0 10px}
@media (max-width:860px){
  .systool{flex-wrap:wrap;gap:5px}
  .systool .nm{width:100%}
}

/* 🏁 투표 결과 줄 — 눌러서 카드로 (2026-08-31) */
.msg.sys.go{cursor:pointer}
.msg.sys.go:hover{border-left-color:var(--dev);background:color-mix(in srgb,var(--dev) 6%,var(--panel2))}
@keyframes plkf-flash2{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dev) 55%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}}
.plcard.plflash2{animation:plkf-flash2 .9s ease-out}

/* 🗂 지나간 알림 — 일반 / 채팅 탭 (2026-08-31) */
/*
 * 탭을 바꿔도 **머리는 제자리**다 (2026-08-31 사용자: 「위아래로 알림창이 움직이는 건
 * 이상하다」). 창은 가운데 정렬이라 목록이 짧아지면 위아래가 같이 조여들어 판이 통째로
 * 미끄러졌다 — 탭은 **내용을 갈아 끼우는 자리**지 창을 옮기는 자리가 아니다.
 * 위를 고정하고 아래만 줄어들게 둔다. 목록이 길면 안에서 스크롤한다(.rdlist 가 자른다).
 */
#ntlogBox{align-items:flex-start;padding-top:min(12vh,96px)}
.nttabs{display:flex;border-bottom:1.5px solid var(--line2);margin-bottom:2px}
.nttabs .nttab{flex:1;border:0;background:none;padding:9px 0;font-size:13.5px;font-weight:700;
  color:var(--ink-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.nttabs .nttab.on{color:var(--ink);border-bottom-color:var(--ink)}
.nttabs .nttab i{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:800;
  background:var(--red);color:#fff;border-radius:99px;padding:1px 6px}

/* 📦 첨부 묶음 카드 (2026-08-31) */
.fbundle{margin-top:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  padding:8px 10px 4px;max-width:420px}
.fbundle .fbh{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);
  padding:0 2px 6px}
.fbundle .fbh b{font-size:13.5px;color:var(--ink)}
.fbundle .fbh span{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.fbundle .fbzip{margin-left:auto;border:1.5px solid var(--line);background:var(--panel);
  border-radius:8px;padding:3px 9px;font-size:12.5px;font-weight:800;color:var(--ink-soft);cursor:pointer}
.fbundle .fbzip:hover{border-color:var(--dev);color:var(--dev)}
.fbundle .fbi{display:grid;gap:4px}
.fbundle .fbi .fileblock{margin-top:0}
.fbundle .fbi .filecard{background:var(--panel)}
.fbundle .fbi .imgwrap img{max-height:180px}

/* ══════════ 🗑️ 관리자 휴지통 (3.58.0) ══════════
   📜 로그 표(.syslogtbl)와 같은 문법이다 — 같은 화면의 같은 성격이라 새 옷을 만들지 않는다.
   이름은 이 화면 식구(sy2*)를 따르고, 안쪽 수식 클래스에도 접두(tr*)를 붙인다:
   맨 이름(.who·.sub)은 전역 파일에서 남의 규칙에 걸린다. */
.sy2trtbl{border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.sy2trh,.sy2trr{display:grid;grid-template-columns:132px 1fr 152px 66px 152px;gap:10px;
  padding:9px 13px;align-items:center}
.sy2trh{background:var(--panel2);font-size:11px;font-weight:800;color:var(--ink-faint)}
.sy2trr{border-top:1px solid var(--line2);font-size:13px}
.sy2trr:hover{background:var(--panel2)}
.sy2trr .trk{font-weight:800;font-size:12.5px;white-space:nowrap}
.sy2trr .trw b{font-size:13.5px}
.sy2trr .trs{display:block;font-size:11.5px;color:var(--ink-faint);line-height:1.45}
.sy2trr .trl{color:var(--dev);font-weight:700}
.sy2trr .tru{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.sy2trr .tru b{color:var(--ink-soft);font-size:12.5px}
.sy2trr .trd{font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.sy2trr .trd.trdsoon{color:var(--red)}
/* 「보류」는 날짜가 아니다 — 고정폭을 벗겨 숫자가 아님을 눈으로 알린다 */
.sy2trr .trd.trdhold{font-family:var(--sans);color:var(--warn)}
.sy2trr .tra{display:flex;gap:6px;justify-content:flex-end}
/* 되살리기 검사 결과 · 밖으로 나간 것 — 이름 옆의 작은 표식 */
.sy2trr .trm{font-size:11px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:6px;
  white-space:nowrap}
.sy2trr .trm.trmok{color:var(--won);background:color-mix(in srgb,var(--won) 12%,transparent)}
.sy2trr .trm.trmbad{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,transparent)}
.sy2trr .trm.trmext{color:var(--ink-faint);background:var(--panel2);border:1px solid var(--line2)}
.syslogbar .trcnt{font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
/* 좁은 화면 — 로그 표와 같은 접힘. 격자를 두 칸으로 접고 손은 아래로 내린다 */
@media(max-width:760px){
  .sy2trh{display:none}
  .sy2trr{grid-template-columns:1fr auto;gap:3px 10px}
  .sy2trr .trk{grid-column:1}
  .sy2trr .trd{grid-column:2;grid-row:1;text-align:right}
  .sy2trr .trw,.sy2trr .tru{grid-column:1/-1}
  .sy2trr .tra{grid-column:1/-1;justify-content:flex-start;margin-top:4px}
  /* 폰에서 제일 자주 누르는 단추가 28px 로 남지 않게 (공용 .mini 기본값) */
  .sy2trr .tra .mini{min-height:38px;padding:7px 13px}
  .syslogbar #sysTrQ{width:100%}
}

/* ═══════════ 🟠 외부 업체 방 (2026-09-02) ═══════════
   새 팔레트를 만들지 않는다 — --ext(=--warn)를 빌려 쓰고, 옷은 기존 문법 그대로다.
   .ch·.who·.mem·.mmlab 은 채팅·창이 이미 쓰던 것이고 여기서는 색만 얹는다. */
.ch.chext{color:var(--ext)}
.ch.chext.on{color:var(--ext)}
/* 외부 사람 꼬리표 — 글 옆·명단·파일 카드가 **같은 옷**을 입는다.
   누가 외부인인지 모르는 채로 말하는 방이 제일 위험하다 */
.exttag{font-size:11px;font-weight:800;color:var(--ext);border:1px solid var(--ext);
  border-radius:6px;padding:0 5px;flex:none;white-space:nowrap}
.msg .meta .exttag{font-size:11.5px}
/* 참여자 — 머리글 오른쪽 👥 버튼 밑에 뜬다. 대화를 밀어내지 않는다.
   부모(.chhead)가 position:relative 라 body zoom 좌표 계산이 필요 없다 */
.memwrap{position:relative;display:inline-flex}
.mempop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;
  min-width:190px;max-height:290px;overflow-y:auto;display:grid;gap:1px}
.mprow{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;background:none;
  border:0;text-align:left;width:100%}
.mprow i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);flex:none}
.mprow.ext{color:var(--ext);font-weight:700}
.mprow.ext i{background:var(--ext)}
.mprow em{font-style:normal;margin-left:auto;padding-left:12px;font-size:11.5px;
  color:var(--ink-faint);font-weight:600}
/* 외부 방 입력칸 — 쓰는 순간에도 외부임이 보여야 한다. 방 이름이 사내 방과 닮으면
   명단·배지만으로는 잘못된 방에 쓰는 것을 못 막는다 */
.composer.cext .fld, .cbox.cext{border-color:color-mix(in srgb,var(--ext) 55%,var(--line))}
/* ↪ 전달이 외부 방으로 갈 때 — 창 안에서 한 번 묻는다 */
.fwdext{border:1px solid var(--ext);border-radius:12px;padding:11px 13px;margin-top:10px;
  font-size:13.5px;color:var(--ink-soft);background:color-mix(in srgb,var(--ext) 7%,var(--panel))}
.fwdext b{color:var(--ext)}
/* 초대 문구 — 카톡에 붙여넣을 그대로. 판이 --bg 라 내용은 흰 박스에 앉는다 */
.kmsg{background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:12px 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.75;white-space:pre-wrap;
  word-break:break-word}
.kmsg b{color:var(--ink)}
.gcode{font-family:var(--mono);font-weight:800;letter-spacing:.12em;color:var(--won)}

/* ── 손님 셸 — 레일도 탭바도 없다. 방 하나가 화면의 전부다 ── */
.gshell{min-height:var(--vh100);display:flex;flex-direction:column;background:var(--bg)}
.gtopbar{display:flex;align-items:center;gap:9px;padding:11px 16px;background:var(--rail);
  padding-top:calc(11px + env(safe-area-inset-top,0px))}
.gtopbar img{height:22px;width:auto;flex:none}
.gtopbar .gco{font-size:13px;font-weight:700;color:var(--rail-ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtopbar .sp{flex:1}
.gtopbar .mini{border-color:rgba(var(--rw),.25);background:transparent;color:#fff}
.gtopbar .mini:hover{border-color:rgba(var(--rw),.5);color:#fff}
.gbody{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px 16px;
  width:100%;max-width:980px;margin:0 auto}
/* 방 이름 줄 — 이름은 왼쪽, 👥 참여자는 오른쪽. 팝오버는 칩 밑에 붙는다 */
.ghead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex:none}
.ghead h1{font-size:20px;font-weight:800;letter-spacing:-.02em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmem{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--panel);border-radius:99px;padding:6px 13px;font-size:13.5px;
  font-weight:700;color:var(--ink-soft)}
.gmem b{font-family:var(--mono)}
/* 흰 둥근 판 — 확인창 옷 규칙과 같은 문법: 판은 배경색, 내용은 --panel 흰 박스 */
.gpanel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.gpanel .msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 16px}
.gpanel .composer{flex:none;border-top:1px solid var(--line2);padding:10px 12px}
/* 🧵 스레드 머리 — ← 로 목록으로 돌아간다 */
.gthbar{flex:none;display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--line2);font-size:14px}
.gthbar .gthn{color:var(--ink-faint);font-size:12.5px;font-family:var(--mono)}
.gback{border:1px solid var(--line);background:var(--panel);border-radius:9px;
  width:34px;height:34px;font-size:15px;flex:none}
.msg.gthroot{border-bottom:1px solid var(--line2);padding-bottom:12px;margin-bottom:10px}
/* 대화 속 이미지 — 파일 카드 대신 그림이 보인다. 누르면 원본이 새 탭에 */
.gimg{display:block;margin-top:5px;max-width:340px}
.gimg img{max-width:100%;border-radius:10px;border:1px solid var(--line2);display:block}
/* 파일 탭 도구줄 — 종류 칩 · 파일명 찾기 · 올리기 */
.gftools{flex:none;display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line2)}
.gftools .sp{flex:1}
.gtab.sm{padding:4px 11px;font-size:12.5px;border-radius:99px;border-width:1px}
.gfq{width:150px;flex:none;margin:0;padding:6px 11px;font-size:13px}
.gfx{flex:1;min-height:0;overflow-y:auto;padding:13px 14px;align-content:start}
/* 손님의 파일 카드는 곧바로 여닫는 <a> 다 — 공유함의 카드(.fxc)는 <div> 라
   글자색·밑줄을 벗기는 규칙이 없다. 그대로 두면 파란 밑줄 링크로 나온다 */
.gbody a.fxc{display:block;color:var(--ink);text-decoration:none}

/* ── ⚙️ 외부 방 창 — 만들기·방 관리 (3.72.0). 창 뼈대(mmbox·mmhead·mmfoot)는 본편 그대로,
   그 안의 줄·표만 제 옷을 입는다 (남의 화면 클래스는 조상 없이 무너진다) ── */
.gmtag{font-size:11px;font-weight:800;color:var(--ink-faint);border:1px solid var(--line);border-radius:99px;
  padding:0 7px;line-height:18px}
.gmsec{border:1px solid var(--line2);border-radius:12px;padding:12px 13px;margin-top:12px}
.gmsh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:9px}
.gmsh .cnt,.mmlab .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-faint);font-weight:700}
.gmsh .sp{flex:1}
.gmrow,.gmadd{display:grid;grid-template-columns:1.1fr 1fr auto;gap:7px;align-items:center}
.gmrow{margin-bottom:7px}
.gmadd{margin-top:8px;padding-top:9px;border-top:1px dashed var(--line)}
.gmrow .fld,.gmadd .fld{margin:0;padding:7px 10px;font-size:13px}
.gmline{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line2);flex-wrap:wrap}
.gmline:first-of-type{border-top:0;padding-top:0}
.gmline .who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;min-width:0;flex:1;
  flex-wrap:wrap;row-gap:3px}
.gmline .who i{width:7px;height:7px;border-radius:50%;background:var(--ext);flex:none}
.gmline .who em{font-style:normal;font-size:12px;color:var(--ink-faint);font-weight:600}
.gmline .st{font-size:11.5px;font-weight:700;border-radius:99px;padding:1px 8px;border:1px solid var(--line);
  color:var(--ink-faint);white-space:nowrap}
.gmline .st.ok{color:var(--won);border-color:color-mix(in srgb,var(--won) 45%,var(--line))}
.gmline .st.off{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.gmline .acts{display:flex;gap:5px;flex:none}
.gmline .acts .mini{padding:4px 9px;font-size:12px}
.gcodecard{border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-top:8px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.gcodecard .who{font-weight:800;font-size:14px;flex:1;min-width:0}
.gcodecard .who em{font-style:normal;display:block;font-size:12px;color:var(--ink-faint);font-weight:600}
.gcodecard .gcode{font-size:18px}
/* 방의 수명 두 문 — 하는 일과 그 결과를 한 버튼에 적는다 (되살리기 확인창과 같은 문법) */
.gladder{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.glad{border:1px solid var(--line);border-radius:11px;padding:10px 12px;text-align:left;display:flex;
  flex-direction:column;gap:2px;background:var(--panel)}
.glad:hover{border-color:var(--ink-faint)}
.glad b{font-size:13.5px}
.glad span{font-size:12px;color:var(--ink-faint);font-weight:600}
.glad.warn b{color:var(--ext)} .glad.dgr b{color:var(--red)}
.gchk{display:flex;flex-direction:column;gap:7px;margin:4px 0 2px}
.gchk div{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft)}
.gchk div b{color:var(--ink)}
.gchk i{flex:none;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--won) 14%,var(--panel));
  color:var(--won);display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:800;margin-top:2px}
.gchk i.x{background:color-mix(in srgb,var(--red) 12%,var(--panel));color:var(--red)}
/* 창은 뷰포트를 못 넘는다 — .mmbox 는 flex 자식이라 min-width:auto 가 내용의 최소 폭
   (손님 줄의 버튼 셋)을 따라 뷰포트보다 넓어졌다(모바일에서 오른쪽이 잘렸다) */
.extmodal .mmbox{min-width:0;max-width:100%}
.gmrow .fld,.gmadd .fld{min-width:0}
@media (max-width:640px){
  .gladder{grid-template-columns:1fr}
  .gmline .acts{flex-basis:100%;justify-content:flex-end}
}
/* 📦 공유함 나침반의 「보관」 묶음 — 머리띠는 DM 의 .note 를 그대로 쓴다 */
.fxnavi.arc .ic{font-size:12px}
.fxnavi.arc .nm{color:var(--ink-soft)}
.gtabs{display:flex;gap:6px;margin-bottom:11px;flex:none}
.gtab{border:1.5px solid var(--line);background:var(--panel);border-radius:9px;padding:6px 14px;
  font-size:13.5px;font-weight:800;color:var(--ink-soft)}
.gtab.on{background:var(--ext);border-color:var(--ext);color:#fff}
/* 손님 첫 화면 — 초대 코드 게이트와 알림 안내가 같은 옷을 쓴다 */
.gflow{min-height:var(--vh100);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:34px 18px;background:var(--bg)}
.gflow>img{height:32px;width:auto}
.gcard{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:20px 18px 16px;box-shadow:var(--shadow)}
.gcard h1{font-size:18px;font-weight:800;margin-bottom:12px}
.gcard .fld{width:100%;margin-bottom:9px;padding:10px 12px;font-size:15px}
.gcard .btn{width:100%;margin-top:3px;background:var(--ext)}
.gstep{display:flex;gap:10px;align-items:flex-start;padding:10px 0;
  border-top:1px solid var(--line2);font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.gstep:first-of-type{border-top:0;padding-top:0}
.gstep .n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:800;
  display:grid;place-items:center;color:var(--ink-soft);margin-top:1px}
.gstep b{color:var(--ink)}
.glater{display:block;width:100%;background:none;border:0;color:var(--ink-faint);font-size:12.5px;
  font-weight:700;text-decoration:underline;margin-top:9px;padding:4px}