/* ═══ C10 Aurora Pane 토큰 (쇼케이스 확정값과 동일) ═══ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f2f3f8; --surface:rgba(255,255,255,.85); --surface-2:rgba(255,255,255,.96); --line:rgba(90,90,140,.16);
  --text:#2b2b40; --text-muted:#5d5d7a; --text-faint:#6b6b87;
  --accent:#7857e8; --accent-strong:#5c3bd4; --ok:#237a5c; --lockc:#a8801f; --danger:#c2453a; --aqua:#4aa8d8;
  --font-body:'Pretendard Variable',Pretendard,sans-serif;
  --radius:14px; --radius-lg:20px;
  --blur:blur(16px); --shadow:0 8px 28px rgba(80,70,160,.10);
}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.65;overflow-x:hidden}
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.aurora i:nth-child(1){width:330px;height:250px;left:-60px;top:-90px;background:#b9a5f5}
.aurora i:nth-child(2){width:460px;height:340px;right:-60px;top:-40px;background:#a5d8f0}
.aurora i:nth-child(3){width:560px;height:400px;left:30%;bottom:-180px;background:#f5c9d8}

.app{position:relative;z-index:1;display:grid;grid-template-columns:236px 1fr;min-height:100vh}
/* ── 사이드 내비 (확장 레이아웃의 핵심) ── */
.side{padding:24px 14px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.side .logo{font-size:18px;font-weight:800;letter-spacing:-0.02em;padding:0 10px;margin-bottom:22px}
.side .nav{display:flex;flex-direction:column;gap:4px}
.side .nav button{font-family:var(--font-body);text-align:left;font-size:13.5px;font-weight:600;color:var(--text-muted);
  background:none;border:none;border-radius:10px;padding:9px 12px;cursor:pointer;display:flex;gap:10px;align-items:center}
.side .nav button .ic{width:18px;text-align:center}
.side .nav button:hover{background:var(--surface)}
.side .nav button.on{background:var(--surface-2);color:var(--accent-strong);box-shadow:var(--shadow)}
.side .nav button .b{margin-left:auto;font-size:10.5px;background:rgba(120,87,232,.12);color:var(--accent-strong);border-radius:99px;padding:1px 8px}
.side .hint{margin-top:26px;padding:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-faint);line-height:1.6}

.main{padding:22px 28px 48px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.topbar h1{font-size:17px;font-weight:800;letter-spacing:-0.01em}
.topbar .wk{font-size:12px;color:var(--text-muted);background:var(--surface);backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:99px;padding:4px 14px}
.topbar .avs{margin-left:auto;display:flex}
.av{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:var(--text-muted);margin-left:-7px}
.av.hm{background:linear-gradient(135deg,var(--accent),var(--aqua));color:#f5f3ff;border:none}

.view{display:none}.view.on{display:block}
.pane{background:var(--surface);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:18px 20px}
.pane h3{font-size:13px;font-weight:700;color:var(--text-muted);margin-bottom:10px;display:flex;gap:10px;align-items:center}
.bdg{font-size:10.5px;font-weight:700;background:rgba(120,87,232,.12);color:var(--accent-strong);border-radius:99px;padding:1px 10px}
.pil{font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 9px;background:rgba(120,87,232,.1);color:var(--accent-strong)}
.pil.p0{background:var(--accent);color:#f5f3ff}
.pil.lock{background:rgba(168,128,31,.13);color:var(--lockc)}
.pil.ok{background:rgba(35,122,92,.12);color:var(--ok)}
.pil.warn{background:rgba(168,128,31,.16);color:var(--lockc)}
.btn{font-family:var(--font-body);font-size:11.5px;font-weight:600;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text-muted);border-radius:99px;padding:3px 13px;cursor:pointer;transition:all .18s}
.btn:hover{border-color:var(--accent);color:var(--accent-strong)}
.btn.pri{background:var(--accent-strong);border-color:var(--accent-strong);color:#f5f3ff}
.btn.pri:hover{color:#fff}

/* ── 보드 뷰 ── */
.board-wrap{display:grid;grid-template-columns:1fr;gap:14px;transition:grid-template-columns .25s}
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.col h4{font-size:12px;font-weight:700;color:var(--text-muted);padding:2px 4px 10px;display:flex;gap:8px;align-items:center}
.col h4 .cnt{font-size:10.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 8px}
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 15px;margin-bottom:9px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card h5{font-size:13.5px;font-weight:700;letter-spacing:-0.01em}
.card .meta{display:flex;gap:6px;margin-top:7px;align-items:center;flex-wrap:wrap}
.card .who{margin-left:auto;font-size:11px;color:var(--text-faint)}
.card.dim{opacity:.62;cursor:default}
.card.dim:hover{transform:none;box-shadow:none}

/* 디테일 = 우측 전체 높이 슬라이드 드로어 (콘텐츠를 밀지 않고 위로 덮음) */
.board-wrap{display:block}
.scrim{display:none;position:fixed;inset:0;background:rgba(43,43,64,.22);z-index:25}
.board-wrap.open .scrim{display:block}
.detail{position:fixed;top:0;right:0;width:462px;max-width:92vw;height:100vh;z-index:30;
  transform:translateX(103%);transition:transform .22s ease;overflow-y:auto;
  background:var(--surface-2);backdrop-filter:var(--blur);border-left:1px solid var(--line);
  box-shadow:-14px 0 44px rgba(80,70,160,.16)}
.board-wrap.open .detail{transform:translateX(0)}
.detail .pane{background:none;border:none;box-shadow:none;border-radius:0;padding:22px 24px 40px}
.detail .dh{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.detail .dh h2{font-size:16px;font-weight:800;letter-spacing:-0.01em}
.detail .dh .x{margin-left:auto;font-size:16px;color:var(--text-faint);cursor:pointer;background:none;border:none}
.detail .sec{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.detail .sec h6{font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.06em;margin-bottom:8px}
.sub{display:flex;gap:9px;align-items:center;padding:5px 0;font-size:13px;flex-wrap:wrap}
.orb{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;background:#fdfdff;cursor:pointer}
.orb.on{background:var(--ok);border-color:var(--ok);color:#f2faf6}
.orb.half{border-color:var(--accent);color:var(--accent-strong)}
.sub .nm.done{text-decoration:line-through;color:var(--text-faint)}
.evc{font-size:10px;font-weight:700;border-radius:99px;padding:1px 8px;cursor:pointer}
.evc.ok{background:rgba(35,122,92,.12);color:var(--ok)}
.evc.none{background:rgba(168,128,31,.16);color:var(--lockc)}
.evlist{margin-top:6px}
.ev{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--text-muted);padding:5px 8px;background:rgba(120,87,232,.05);border-radius:8px;margin-bottom:5px}
.ev .t{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:var(--accent-strong);background:rgba(120,87,232,.12);border-radius:5px;padding:0 5px;flex:none}
.ev .by{margin-left:auto;font-size:10.5px;color:var(--text-faint);flex:none}
.attach{display:flex;gap:6px;margin-top:8px}
.note{margin-top:10px;font-size:11.5px;color:var(--text-faint);background:rgba(168,128,31,.08);border-radius:8px;padding:7px 10px;display:none}
.note.show{display:block}
.cmt{margin-top:6px;font-size:12px;color:var(--text-muted);background:rgba(120,87,232,.06);border-radius:10px;padding:7px 10px}
.cmt b{color:var(--text)}

/* ── 팀 라이브 = 전역 고정 스트립 (전 탭 공통) · 나머지는 탭별 교체 ── */
/* 보드 탭 내부 순서: 칸반(1) → 내 내역(2). .on 조건 필수 — 무조건 display 주면 탭 숨김이 깨진다 */
#v-board.on{display:flex;flex-direction:column}
#v-board>.board-wrap{order:1}
#v-board>.sb-duo{order:2}
.live-strip{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.live-strip .lbl{font-size:11px;font-weight:800;color:var(--text-faint);display:flex;gap:6px;align-items:center;margin-right:4px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pu 1.6s infinite}
@keyframes pu{0%{box-shadow:0 0 0 0 rgba(35,122,92,.35)}70%{box-shadow:0 0 0 6px rgba(35,122,92,0)}100%{box-shadow:0 0 0 0 rgba(35,122,92,0)}}
.lchip{display:flex;gap:8px;align-items:center;background:var(--surface);backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:99px;padding:4px 13px 4px 5px;font-size:11.5px;box-shadow:var(--shadow)}
.lchip .av{margin:0;width:22px;height:22px;font-size:8.5px}
.lchip .t{color:var(--text-muted);max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lchip .t b{color:var(--text);font-weight:700}
.lchip .mb{width:54px;height:4px;border-radius:99px;background:rgba(120,87,232,.14);overflow:hidden;flex:none}
.lchip .mb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--aqua))}
.lchip .pc{font-variant-numeric:tabular-nums;color:var(--text-faint);font-size:10.5px;flex:none}
.sb-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0}
.sb-list{max-height:148px;overflow:auto}
.sb-item{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-top:1px solid var(--line);font-size:12.5px}
.sb-item:first-child{border-top:none}
.sb-item .d{font-size:10.5px;color:var(--text-faint);flex:none;width:32px}
.sb-item .who2{margin-left:auto;font-size:10.5px;color:var(--text-faint);flex:none}
/* ── 긴급도 · 첨부 ── */
.urg{display:flex;gap:6px;flex-wrap:wrap}
.ubtn{font-family:var(--font-body);font-size:11.5px;font-weight:600;border:1px solid var(--line);
  background:var(--surface-2);color:var(--text-muted);border-radius:99px;padding:4px 12px;cursor:pointer}
.ubtn.on.u1{background:rgba(194,69,58,.12);border-color:var(--danger);color:var(--danger)}
.ubtn.on.u2{background:rgba(168,128,31,.16);border-color:var(--lockc);color:var(--lockc)}
.ubtn.on.u3{background:rgba(35,122,92,.12);border-color:var(--ok);color:var(--ok)}
.ubtn.on.t{background:rgba(120,87,232,.12);border-color:var(--accent);color:var(--accent-strong)}
.pil.rev{background:rgba(74,168,216,.15);color:#2a7ba8}
.cool{font-size:11px;color:var(--text-faint);display:flex;gap:8px;align-items:center;margin-top:8px}
.cool .cbar{flex:1;height:4px;border-radius:99px;background:rgba(120,87,232,.12);overflow:hidden}
.cool .cbar i{display:block;height:100%;background:var(--aqua);border-radius:99px}
.pil.u1{background:rgba(194,69,58,.12);color:var(--danger)}
.pil.u2{background:rgba(168,128,31,.16);color:var(--lockc)}
.pil.u3{background:rgba(35,122,92,.12);color:var(--ok)}
.fchip{display:inline-flex;gap:5px;align-items:center;font-size:11px;font-weight:600;color:var(--text-muted);
  background:rgba(120,87,232,.07);border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin:4px 4px 0 0}
/* 증빙 드롭존 + 경로 입력 */
.evdrop{margin-top:8px;border:1.5px dashed rgba(120,87,232,.35);border-radius:10px;padding:9px 11px;font-size:11.5px;color:var(--text-faint);transition:all .15s}
.evdrop.over{background:rgba(120,87,232,.08);border-color:var(--accent);color:var(--accent-strong)}
.pathrow{display:flex;gap:6px;margin-top:7px}
.pathrow input{flex:1;font-family:var(--font-body);font-size:11.5px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:5px 10px;outline:none}
.pathrow input:focus{border-color:var(--accent)}
/* 문서함 */
.vault-grid{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.tree .fold{font-size:13px;font-weight:700;padding:7px 8px;border-radius:8px;cursor:pointer;display:flex;gap:8px;align-items:center}
.tree .fold:hover{background:rgba(120,87,232,.06)}
.tree .fold .cnt2{margin-left:auto;font-size:10.5px;color:var(--text-faint);font-weight:600}
.tree .leaf{font-size:12px;color:var(--text-muted);padding:3px 8px 3px 30px;display:flex;gap:6px;align-items:baseline}
.tree .leaf .v{font-size:9.5px;color:var(--ok);font-weight:700}
.vsearch{width:100%;font-family:var(--font-body);font-size:13px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;outline:none;margin-bottom:10px}
.vsearch:focus{border-color:var(--accent)}
.vrow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.vrow:first-of-type{border-top:none}
.vrow .fn{font-weight:600}
.vrow .path2{font-size:10.5px;color:var(--text-faint)}
.vrow .meta2{margin-left:auto;font-size:10.5px;color:var(--text-faint);flex:none}
.seclab{font-size:10px;font-weight:800;letter-spacing:.05em;background:rgba(194,69,58,.1);color:var(--danger);border-radius:5px;padding:1px 7px}

/* ── 요청함 뷰 ── */
.req-grid{display:grid;grid-template-columns:380px 1fr;gap:14px;align-items:start}
.field{margin-bottom:10px}
.field label{display:block;font-size:11px;font-weight:700;color:var(--text-faint);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;font-family:var(--font-body);font-size:13px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;outline:none}
.field textarea{height:74px;resize:none}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.req{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:10px}
.req .h{display:flex;gap:8px;align-items:baseline}
.req h5{font-size:13.5px;font-weight:700}
.req .from{font-size:11px;color:var(--text-faint)}
.req p{font-size:12.5px;color:var(--text-muted);margin-top:4px}
.req .acts{display:flex;gap:6px;margin-top:9px;align-items:center}
.req .state{font-size:11.5px;font-weight:700}
.chain{margin-top:8px;font-size:11px;color:var(--text-faint);border-top:1px dashed var(--line);padding-top:7px;display:none}
.chain.show{display:block}

/* ── 회의록 뷰 ── */
.min-grid{display:grid;grid-template-columns:400px 1fr;gap:14px;align-items:start}
.drop{border:2px dashed rgba(120,87,232,.35);border-radius:var(--radius);padding:26px 18px;text-align:center;cursor:pointer;transition:all .2s}
.drop:hover{background:rgba(120,87,232,.05);border-color:var(--accent)}
.drop .big{font-size:26px;margin-bottom:6px}
.drop p{font-size:12.5px;color:var(--text-muted)}
.drop .sub2{font-size:11px;color:var(--text-faint)}
.steps{margin-top:14px}
.step{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--text-faint);padding:5px 0}
.step .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:9px;background:#fdfdff}
.step.doing{color:var(--accent-strong);font-weight:600}
.step.doing .dot{border-color:var(--accent);color:var(--accent-strong)}
.step.did{color:var(--text-muted)}
.step.did .dot{background:var(--ok);border-color:var(--ok);color:#f2faf6}
.result{display:none}
.result.show{display:block}
.doc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
.doc h5{font-size:14px;font-weight:800;margin-bottom:2px}
.doc .src3{display:flex;gap:6px;margin:8px 0 10px}
.doc h6{font-size:11px;font-weight:700;color:var(--accent-strong);margin:10px 0 4px}
.doc ul{margin-left:16px;font-size:12.5px;color:var(--text-muted)}
.doc ul li{padding:1.5px 0}
.qrow{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.qrow .acts{margin-left:auto;display:flex;gap:5px}
.arch-item{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-muted)}
.arch-item .d{font-size:11px;color:var(--text-faint);flex:none}

/* ── 스텁 뷰 ── */
.stub{max-width:520px;text-align:center;margin:60px auto;color:var(--text-muted)}
.stub .big{font-size:30px;margin-bottom:10px}
.stub h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px}
.stub p{font-size:12.5px;line-height:1.7}

/* ── 리포트 탭 — 일간/주간/월간 하위탭 ── */
.rep{display:none}.rep.on{display:block}
.rephead{font-size:12px;font-weight:800;color:var(--text-faint);letter-spacing:.03em;margin-bottom:4px}
.repline{font-size:12.5px;color:var(--text-muted);padding:8px 0;border-top:1px solid var(--line);line-height:1.65}
.repline .hl{color:var(--accent-strong);font-weight:700}
.repline b{color:var(--text)}
/* ── 기록 탭 — 질문 → 답 → 근거 타임라인 ── */
.arch-grid{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:start}
.fil{font-size:12px;color:var(--text-muted);padding:5px 6px;display:flex;gap:8px;align-items:center;cursor:pointer}
.fil input{accent-color:var(--accent)}
.filh{font-size:10.5px;font-weight:800;color:var(--text-faint);letter-spacing:.05em;margin:10px 0 3px}
.searchrow{display:flex;gap:8px;margin-bottom:4px}
.searchrow .vsearch{margin-bottom:0;flex:1}
.answer{display:none;background:rgba(120,87,232,.07);border:1px solid rgba(120,87,232,.28);border-radius:var(--radius);
  padding:14px 16px;margin:12px 0 8px}
.answer.show{display:block}
.answer .ah{font-size:11px;font-weight:800;color:var(--accent-strong);display:flex;gap:7px;align-items:center;margin-bottom:6px}
.answer p{font-size:13px;color:var(--text);line-height:1.7}
.answer .refs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.dategrp{font-size:11px;font-weight:800;color:var(--text-faint);margin-top:14px}
.trow{display:flex;gap:9px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.trow .tb{font-size:9.5px;font-weight:800;border-radius:5px;padding:1px 6px;flex:none}
.tb.min{background:rgba(74,168,216,.15);color:#2a7ba8}
.tb.ctx{background:rgba(120,87,232,.12);color:var(--accent-strong)}
.tb.ev{background:rgba(35,122,92,.12);color:var(--ok)}
.tb.task{background:rgba(168,128,31,.13);color:var(--lockc)}
.trow .sn{color:var(--text-faint);font-size:11.5px}
.trow .d2{margin-left:auto;font-size:10.5px;color:var(--text-faint);flex:none}

/* ═══ 앱 전용 추가 — 토큰 값은 재정의하지 않고 변수 참조만 한다 ═══ */
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{margin-left:auto}
.muted{color:var(--text-muted)}
.faint{font-size:11.5px;color:var(--text-faint)}
.empty{font-size:12.5px;color:var(--text-faint);padding:18px 4px;text-align:center}
.hidden{display:none !important}
.clickable{cursor:pointer}

/* 알림 · 토스트 */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface-2);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:10px 14px;font-size:12.5px;max-width:340px;animation:tin .18s ease}
.toast.err{border-color:var(--danger);color:var(--danger)}
.toast.ok{border-color:var(--ok);color:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 상단 바 — 검색·사용자·알림 */
.topbar .tsearch{font-family:var(--font-body);font-size:12.5px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 14px;outline:none;width:230px}
.topbar .tsearch:focus{border-color:var(--accent)}
.topbar select{font-family:var(--font-body);font-size:12px;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 10px;outline:none}
.bell{position:relative;background:none;border:none;font-size:15px;cursor:pointer;color:var(--text-muted)}
.bell .dot2{position:absolute;top:-1px;right:-3px;min-width:15px;height:15px;border-radius:99px;background:var(--danger);
  color:#fff;font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.notipanel{position:absolute;top:44px;right:28px;width:340px;max-height:60vh;overflow:auto;z-index:40;
  background:var(--surface-2);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 14px}
.notirow{font-size:12px;color:var(--text-muted);padding:8px 0;border-top:1px solid var(--line)}
.notirow:first-of-type{border-top:none}
.notirow.unread{color:var(--text);font-weight:600}
.notirow .nt{font-size:10px;color:var(--text-faint);margin-left:6px}

/* 보드 — 컬럼별 스크롤 · 기한 뱃지 · 필터 바 */
.kanban .col{min-height:60px}
.kanban .col .list{max-height:calc(100vh - 330px);overflow:auto;padding-right:2px}
.pil.due{background:rgba(168,128,31,.16);color:var(--lockc)}
.pil.over{background:rgba(194,69,58,.12);color:var(--danger)}
.filterbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.filterbar select,.filterbar input{font-family:var(--font-body);font-size:12px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;outline:none}
.card.on{border-color:var(--accent);box-shadow:var(--shadow)}
.card .bar{height:4px;border-radius:99px;background:rgba(120,87,232,.14);margin-top:8px;overflow:hidden}
.card .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--aqua))}

/* 드로어 내부 폼 */
.detail input,.detail textarea,.detail select{font-family:var(--font-body);font-size:12.5px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;outline:none;width:100%}
.detail textarea{height:60px;resize:vertical}
.detail .sec .row{margin-top:8px}
.statusbtns{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* 리포트 · 기록 보조 */
.repline .tag{font-weight:800;color:var(--accent-strong);margin-right:6px}
.answer .basis{font-size:10.5px;color:var(--text-faint);margin-top:6px}

/* 로그인 화면 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login-card{width:380px;max-width:94vw;padding:26px 26px 20px}
.login-card .field input,.login-card .field select{width:100%}

/* ═══ 모바일 (≤760px) — 토큰 값 변경 없음, 배치만 재구성 ═══ */
@media (max-width: 760px) {
  /* 사이드바 → 상단 가로 내비 */
  .app{grid-template-columns:1fr;min-height:100vh}
  .side{position:sticky;top:0;height:auto;z-index:20;border-right:none;border-bottom:1px solid var(--line);
    padding:10px 12px;flex-direction:row;align-items:center;gap:10px;background:var(--bg)}
  .side .logo{margin-bottom:0;font-size:16px;padding:0;flex:none}
  .side .nav{flex-direction:row;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .side .nav::-webkit-scrollbar{display:none}
  .side .nav button{flex:none;padding:8px 10px;font-size:13px}
  .side .hint{display:none}

  .main{padding:12px 12px 40px}
  .topbar{gap:8px}
  .topbar h1{font-size:15px}
  .topbar .wk{display:none}
  .topbar .tsearch{width:100%;order:9;margin-top:4px}
  .avs{display:none}
  .notipanel{right:8px;left:8px;width:auto;top:110px}

  /* 팀 라이브 — 한 줄 유지, 가로 스와이프 */
  .live-strip{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .live-strip::-webkit-scrollbar{display:none}
  .lchip{flex:none}
  .lchip .t{max-width:150px}

  /* 칸반 — 컬럼 가로 스와이프 (4열 압축 금지) */
  .kanban{grid-template-columns:repeat(4,78vw);overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-bottom:6px}
  .kanban .col{scroll-snap-align:start}
  .kanban .col .list{max-height:none}

  /* 2열 그리드 → 세로 스택 */
  .sb-duo,.req-grid,.min-grid,.vault-grid,.arch-grid{grid-template-columns:1fr}

  /* 디테일 드로어 — 전체 폭 */
  .detail{width:100vw;max-width:100vw}

  /* 폼·버튼 터치 타깃 */
  .btn{padding:6px 14px;font-size:12.5px}
  .ubtn{padding:7px 12px}
  .field input,.field textarea,.field select,.detail input,.detail select{font-size:16px} /* iOS 자동 확대 방지 */
  .login-card{padding:20px 16px 16px}
}

/* 모바일 오버플로 근본 수정 — grid/flex 자식은 기본 min-width:auto 라 내용만큼 늘어난다.
   본문 폭을 뷰포트에 고정하고, 넓은 콘텐츠는 각자의 내부 스크롤러에서만 흐르게 한다. */
@media (max-width: 760px) {
  .main{min-width:0;max-width:100vw;overflow-x:clip}
  .kanban{max-width:100%}
  #v-board>.board-wrap{min-width:0}
  .view{min-width:0}
  .pane{min-width:0;overflow-x:auto}
  .req,.doc,.qrow,.vrow,.trow,.sb-item,.repline{min-width:0}
  .qrow,.vrow{flex-wrap:wrap}
  .qrow .acts{margin-left:0;width:100%;justify-content:flex-end}
}

@media (max-width: 760px) {
  /* 상단 내비 자체가 밀리던 문제 — flex 자식 min-width 보정 */
  .side{max-width:100vw;min-width:0}
  .side .nav{min-width:0;flex:1 1 auto}
  body{overflow-x:hidden} /* 최후 방어 — 내부 스크롤러(칸반·라이브 스트립)는 영향 없음 */
}

/* 모바일 상단바 재구성 — 데스크톱 규칙(.topbar .avs 등)보다 우선하도록 동일 깊이로 지정 */
@media (max-width: 760px) {
  .topbar{flex-wrap:wrap;row-gap:8px;margin-bottom:12px}
  .topbar h1{white-space:nowrap;flex:none;writing-mode:horizontal-tb}
  .topbar .avs{display:none}           /* 아바타 무더기 — 폰에서는 자리만 차지 */
  .topbar .pil{white-space:nowrap;font-size:11px;padding:2px 10px;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
  .topbar .tsearch{flex:1 1 100%;width:auto;order:9;margin-top:0}
  .topbar .spacer{display:none}
  .bell{flex:none}
  .live-strip .lbl{white-space:nowrap;flex:none}
  .live-strip .faint{white-space:nowrap}
  .kanban .col h4{white-space:nowrap}
}

/* 필터 접힘 구조 — 데스크톱은 기존 그대로(fbody가 투명 컨테이너), 토글 버튼은 모바일 전용 */
.filterbar .fbody{display:contents}
#fToggle{display:none}
.me-min{display:none}

/* ═══ 모바일 헤더 재설계 — 6줄 → 3줄 ═══ */
@media (max-width: 760px) {
  /* 탭이 곧 제목 — 중복 제목·이름 배지 제거, 내 계정은 이니셜 원형 */
  #vtitle{display:none}
  .topbar .me-full{display:none}
  .me-min{display:inline-flex;width:30px;height:30px;font-size:12px;flex:none;margin-left:0}
  /* 검색·알림·계정·로그아웃 = 한 줄 */
  .topbar{flex-wrap:nowrap;gap:8px;margin-bottom:10px}
  .topbar .tsearch{flex:1 1 auto;order:0;width:auto;margin-top:0;min-width:0}
  #logout{font-size:13px}

  /* 필터 — 기본 접힘, [필터 ▾]로 펼침 */
  #fToggle{display:inline-flex;flex:none}
  .filterbar{margin-bottom:10px}
  .filterbar .fbody{display:none}
  .filterbar.open .fbody{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}
  .filterbar.open .fbody select{flex:1 1 44%}

  /* 팀 라이브 — 진행 중 업무가 있을 때만 등장 */
  .live-strip.empty{display:none}
  .live-strip{margin-bottom:10px}

  /* 내비 활성 탭 대비 강화 + 여백 정돈 */
  .side .nav button.on{background:var(--accent);color:#f5f3ff;box-shadow:none}
  .main{padding-top:10px}
}