/* Sherpa Tech — 실제 앱 스타일.
   ui\web\mockup.html (화면 계약서) 의 디자인 토큰·레이아웃을 그대로 이식했다.
   외부 폰트·CDN·이미지 없음 — 파일만 열어도 동일하게 보인다. */

:root{
  --bg:#0f1419; --surface:#161d26; --surface2:#1c2530; --border:#263140;
  --text:#d7dee8; --muted:#8a97a6;
  --accent:#4da3ff; --success:#3fb96f; --warn:#e0a63c; --danger:#e0645c;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  font-size:14px;
  line-height:1.6;
  display:flex;
  overflow:hidden;
}

code,.mono{font-family:Consolas,monospace}

button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}

/* ---------- 사이드바 ---------- */
.sidebar{
  width:240px;
  min-width:240px;
  height:100vh;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}

.logo{padding:20px 16px 16px 16px;border-bottom:1px solid var(--border)}
.logo-name{font-size:17px;font-weight:600;letter-spacing:.2px}
.logo-sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{flex:1;padding:12px 8px;overflow-y:auto}

.nav-item{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:9px 10px;
  margin-bottom:4px;
  font-size:13px;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  text-align:left;
  color:var(--text);
  transition:background .12s ease, color .12s ease;
}
.nav-item:hover{background:var(--surface2)}
.nav-item.active{background:var(--surface2);border-color:var(--border);color:var(--accent)}
.nav-item .ico{width:16px;text-align:center;flex:0 0 16px;font-size:12px}
.nav-item .label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav-item.soon{color:var(--muted)}
.nav-item.soon:hover{background:var(--surface2)}
.nav-item.locked{color:var(--muted);cursor:not-allowed}
.nav-item.locked:hover{background:transparent}

.stage-badge{
  font-size:10px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}

.sidebar-foot{
  padding:12px 16px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.sidebar-foot .line2{margin-top:4px;display:flex;align-items:center;gap:6px}
.sidebar-foot .line2 .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{font-size:10px;line-height:1;flex:0 0 auto}
.dot.ok{color:var(--success)}
.dot.off{color:var(--muted)}      /* LM Studio 꺼짐 — 회색 */
.dot.error{color:var(--danger)}
.dot.wait{color:var(--muted)}

/* ---------- 본문 ---------- */
.main{flex:1;height:100vh;display:flex;flex-direction:column;overflow:hidden}

.topbar{
  padding:16px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:baseline;
  gap:12px;
  flex:0 0 auto;
}
.topbar h1{font-size:18px;font-weight:600}
.topbar .desc{font-size:12px;color:var(--muted)}

.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex}

.scroll{flex:1;overflow-y:auto;padding:24px}

/* ---------- 카드 ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
}
.card-title{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px}

.btn{
  padding:7px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface2);
  transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:#232e3b;border-color:#33445a}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#0b1017;font-weight:600}
.btn.accent:hover{background:#63b0ff;border-color:#63b0ff}
.btn.accent:disabled:hover{background:var(--accent);border-color:var(--accent)}

.stack{display:flex;flex-direction:column;gap:16px}
.narrow{max-width:820px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:1099px){.two-col{grid-template-columns:minmax(0,1fr)}}

.empty{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:36px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.empty .big{font-size:24px;display:block;margin-bottom:8px}

.notice{
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
  padding:12px 14px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px;
}
.notice.warn{border-left-color:var(--warn)}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:3px 10px;
  border-radius:999px;
  margin-bottom:10px;
}
.badge.ok{background:rgba(63,185,111,.12);border:1px solid var(--success);color:var(--success)}
.badge.low{background:rgba(224,166,60,.12);border:1px solid var(--warn);color:var(--warn)}
.badge.err{background:rgba(224,100,92,.12);border:1px solid var(--danger);color:var(--danger)}

/* ---------- 내 작성 현황 ---------- */
.ws-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.ws-head > .badge{margin-bottom:0}
.ws-more{display:flex;align-items:center;gap:8px;margin-top:14px}

.ws-sum{text-align:right;font-size:13px;white-space:nowrap}
.ws-sum .badge{margin-bottom:0;margin-top:6px}
.ws-sum .cap{display:block;font-size:11px;color:var(--muted);margin-top:6px}

/* 년 영역 — 아래로 확장 (기본 접힘) */
.ws-yearwrap{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);container-type:inline-size}
.ws-yearwrap.on{display:block}

/* 이번 주 — 월~일 7칸 바 (항상 표시) */
.ws-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ws-day{
  background:var(--surface2);
  border:1px solid var(--border);
  border-top:2px solid var(--border);
  border-radius:8px;
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition:background .12s ease;
}
.ws-day:hover{background:#232e3b}
.ws-day .dow{font-size:12px}
.ws-day .dd{font-family:Consolas,monospace;font-size:11px;color:var(--muted);margin-top:1px}
.ws-day .hh{font-family:Consolas,monospace;font-size:17px;font-weight:600;margin-top:8px;line-height:1.2}
.ws-day .st{font-size:11px;color:var(--muted);margin-top:3px}
.ws-day.full{border-top-color:var(--success)}
.ws-day.full .hh,.ws-day.full .st{color:var(--success)}
.ws-day.over{border-top-color:var(--success)}
.ws-day.over .hh,.ws-day.over .st{color:var(--success)}
.ws-day.low{border-top-color:var(--warn)}
.ws-day.low .hh,.ws-day.low .st{color:var(--warn)}
.ws-day.miss{border-top-color:var(--danger)}
.ws-day.miss .hh,.ws-day.miss .st{color:var(--danger)}
.ws-day.off{opacity:.5}
.ws-day.off .hh{color:var(--muted)}

/* 년 영역 — 좌: 미니 달력 12개 / 우: 올해 지원 구분 통계.
   01o 1 — 통계 패널은 자리를 지키되 목록을 2단으로 나눈다. 두 열이 들어갈 만큼
   패널을 넓히고, 그만큼의 폭이 없는 창에서는 예전 폭(320px·1단)으로 돌아간다. */
.ws-year{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@container (min-width:960px){.ws-year{grid-template-columns:minmax(0,1fr) 320px}}
@container (min-width:1020px){.ws-year{grid-template-columns:minmax(0,1fr) 430px}}
@container (min-width:1340px){.ws-year{grid-template-columns:minmax(0,1fr) 520px}}
.ws-ymonths{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 12px;max-width:1080px}
.ws-ym .mname{font-size:10px;color:var(--muted);margin-bottom:3px;text-align:center}

.ws-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-width:142px;margin:0 auto}
.ws-dw{font-size:8px;line-height:1.4;color:var(--muted);text-align:center}
.ws-d{
  min-width:0;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
  background:var(--surface2);
  border:1px solid var(--border);
  font-family:Consolas,monospace;
  font-size:8.5px;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .12s ease;
}
.ws-d:hover{border-color:var(--accent)}
.ws-d.pad{background:transparent;border-color:transparent;pointer-events:none}
.ws-d.off,.ws-d.none{opacity:.45}
.ws-d.miss{background:rgba(224,100,92,.5);border-color:var(--danger);color:var(--text)}
.ws-d.low{background:rgba(224,166,60,.4);border-color:rgba(224,166,60,.65);color:var(--text)}
.ws-d.full{background:rgba(63,185,111,.4);border-color:rgba(63,185,111,.65);color:var(--text)}
.ws-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:11px;color:var(--muted)}
.ws-legend .k{display:inline-flex;align-items:center;gap:5px}
.ws-legend i{display:inline-block;width:11px;height:11px;cursor:default;pointer-events:none}

.ws-ystat{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  /* 목록의 단 수는 **패널 폭**으로 정한다 (바깥 년 영역 폭이 아니라) — 01o 1 */
  container-type:inline-size;
}
.ws-ystat .sub{font-family:Consolas,monospace;font-size:11px;color:var(--muted);margin:-4px 0 10px 0}
/* 전 구분 나열 (01j 6) — 01o 1 부터 **2단**이라 스크롤이 없다.
   열을 세로로 채우므로(grid-auto-flow:column) 시간 순서가 왼쪽 열 → 오른쪽 열로 읽힌다.
   행 수(--rows)는 항목 수의 절반으로 스크립트가 넣는다. */
.ws-slist{
  display:grid;
  grid-auto-flow:column;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(var(--rows,1),auto);
  column-gap:18px;
}
/* 두 열이 들어갈 폭이 없으면 한 줄로 되돌린다 (좁은 창 — 예전 모습) */
@container (max-width:395px){
  .ws-slist{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none}
}
/* 이름은 남는 폭을 최대한 가져간다 — 2단이 되면서 한 열이 좁아졌으므로 막대가 먼저 양보한다
   (잘린 이름은 행 툴팁이 전부 받는다). */
.ws-stat{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(16px,.42fr) 26px;
  align-items:center;
  gap:5px;
  padding:3px 0;
  font-size:11.5px;
}
.ws-stat .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-stat .hh,.ws-stat .pc{font-family:Consolas,monospace;color:var(--muted);text-align:right}
.ws-stat .bar{height:8px;border-radius:3px;background:var(--surface);border:1px solid var(--border);overflow:hidden}
.ws-stat .fill{display:block;height:100%;background:var(--accent);opacity:.75}
.ws-stat.dim .nm{color:var(--muted)}
.ws-stat.dim .fill{opacity:.3}

/* 클릭 안내 토스트 */
.ws-toast{
  display:none;
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:5;
  max-width:560px;
  padding:9px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
  font-size:12.5px;
  color:var(--text);
}
.ws-toast.show{display:block}

/* ---------- 일자별 작성 (mockup .day-* 이식) ---------- */
.day-list{display:flex;flex-direction:column;gap:6px}
.day-row{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  transition:border-color .12s ease, background .12s ease;
}
.day-row.hit{border-color:var(--accent);background:#232e3b}
.day-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  background:transparent;
  border:none;
  border-radius:7px;
  text-align:left;
  font-size:12.5px;
}
button.day-head:hover{background:#232e3b}
.day-k{flex:0 0 66px;color:var(--muted)}
.day-k b{font-family:Consolas,monospace;font-weight:400;color:var(--text);margin-left:5px}
.day-st{flex:1;font-size:12px;color:var(--muted)}
.day-st.full{color:var(--success)}
.day-st.low{color:var(--warn)}
.day-st.miss{color:var(--danger)}
.day-caret{font-size:10px;color:var(--muted);transition:transform .12s ease}
.day-row.open .day-caret{transform:rotate(180deg)}
.day-body{display:none;padding:0 10px 10px 10px}
.day-row.open .day-body,.day-row.always .day-body{display:block}
.day-log{
  padding:7px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:Consolas,monospace;
  font-size:12px;
  color:var(--muted);
}
.day-ta{min-height:58px;font-size:12.5px;background:var(--surface)}

textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  color:var(--text);
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  font-size:13px;
  line-height:1.6;
}
textarea:focus{outline:none;border-color:var(--accent)}

/* ---------- 우측 탭 작업대 (01j 2) ---------- */
/* 카드 하나에 [AI 분석] [보고서] 두 탭. 좁은 화면에서 카드가 세로로 쌓여도 탭 구조는 그대로다. */
.wb-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.wb-tabs{display:flex;white-space:nowrap}
.wb-tab{
  padding:5px 14px;
  font-size:12.5px;
  color:var(--muted);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:0;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.wb-tab:hover{background:#232e3b}
.wb-tab:first-child{border-radius:8px 0 0 8px}
.wb-tab:last-child{border-radius:0 8px 8px 0;margin-left:-1px}
.wb-tab.on{
  background:rgba(77,163,255,.14);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
  position:relative;
}
.wb-pane[hidden]{display:none}

/* ---------- AI 분석 카드 (mockup .ai-* 이식) ---------- */
.ai-run{display:flex;align-items:center;gap:10px;margin-top:12px}
.ai-card{
  margin-top:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
  padding:12px 14px;
}
.ai-head{margin-bottom:10px}
.ai-tag{font-size:12px;font-weight:600;color:var(--accent);margin-right:6px}
.ai-note{font-size:11.5px;color:var(--muted)}
.ai-item + .ai-item{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}
.ai-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ai-item-top .chips{margin-top:0}
.ai-iacts{display:flex;gap:6px;white-space:nowrap}

.ai-group + .ai-group{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}
.ai-gh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
/* 날짜 그룹 헤더의 오른쪽 자리 — 복사·자동 입력은 [TechNet 반영] 으로 옮겼다 (01h 1) */
.ai-gh .ai-note{margin-left:auto;white-space:nowrap}
.ai-gd{font-size:12px;font-weight:600}
.ai-gd .dd{font-family:Consolas,monospace;font-weight:400;color:var(--muted);margin-left:5px}
.ai-cap{margin-top:6px;font-size:11px;color:var(--muted)}
/* TechNet 자동 입력 결과 줄 (01f) — 채운 행 수·확인 필요 항목 */
.ai-gmsg{
  margin:2px 0 8px 0;
  padding:8px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:2px solid var(--border);
  border-radius:6px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--muted);
  white-space:pre-wrap;
}
.ai-gmsg.ok{border-left-color:var(--success)}
.ai-gmsg.warn{border-left-color:var(--warn)}
.ai-gmsg.err{border-left-color:var(--danger)}
.ai-form{
  margin-top:8px;
  padding:8px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:Consolas,monospace;
  font-size:12px;
  line-height:1.7;
  white-space:pre-wrap;
}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  font-family:Consolas,monospace;
}
/* 고객사 마스터에서 못 찾은 표기 — 확인이 필요하다는 뜻 */
.chip.warn{border-color:var(--warn);color:var(--warn)}
.chip.err{border-color:var(--danger);color:var(--danger)}

.toast{font-size:12px;color:var(--success)}

/* 항목별 사진 드롭 영역 */
.ai-drop{
  margin-top:8px;
  padding:7px 10px;
  border:1px dashed var(--border);
  border-radius:6px;
  text-align:center;
  font-size:11.5px;
  color:var(--muted);
  cursor:pointer;
}
.ai-drop.over{border-color:var(--accent);color:var(--accent)}
.ai-shot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:6px 8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
}
.ai-thumb{
  flex:0 0 auto;
  width:42px;
  height:28px;
  border-radius:4px;
  background:var(--bg);
  border:1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  object-fit:cover;
}
.ai-fname{flex:1;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-x{
  flex:0 0 auto;
  width:20px;
  height:20px;
  padding:0;
  line-height:1;
  font-size:12px;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius:4px;
}
.ai-x:hover{background:var(--surface2);color:var(--text)}

/* 항목 인라인 편집 (목업에 없는 확장 — 같은 토큰만 쓴다) */
.ai-edit{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-edit .wide{grid-column:1 / -1}
.ai-edit label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.ai-edit select,.ai-edit input,.ai-edit textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:5px 8px;
  color:var(--text);
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  font-size:12px;
  min-height:0;
}
.ai-edit textarea{min-height:52px;line-height:1.6;resize:vertical}
.ai-edit select:focus,.ai-edit input:focus,.ai-edit textarea:focus{outline:none;border-color:var(--accent)}
.ai-edit .acts{grid-column:1 / -1;display:flex;gap:6px;align-items:center}

/* 조회 실패 안내 (카드 안) */
.err-line{
  margin-top:10px;
  padding:8px 10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--danger);
  border-radius:8px;
  font-size:12px;
  color:var(--muted);
}

/* ---------- 보고서 미리보기 (mockup .report / .rep-* 이식) ---------- */
/* 좌 = 대분류·시간 / 우 = 1. → - → -> 계층. 화면에 보이는 것이 곧 복사되는 것이다 (WYSIWYG). */
.report{font-size:13px}
.stat-sub{font-size:12px;color:var(--muted)}
.badge.learn{background:rgba(77,163,255,.12);border:1px solid var(--accent);color:var(--accent)}
.rep-title{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.rep-row{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.rep-row:last-child{border-bottom:none}
.rep-k .kind{display:block;font-size:12.5px;font-weight:600}
.rep-k .hrs{display:block;font-family:Consolas,monospace;font-size:12px;color:var(--muted);margin-top:2px}
.rep-b{font-family:Consolas,monospace;font-size:12.5px;line-height:1.7}
.rep-item + .rep-item{margin-top:8px}
.rep-b .l2{color:var(--text)}
.rep-b .l3{color:var(--muted)}
/* 기록 항목 숨김 안내 (WYSIWYG — 보이는 것만 복사된다) */
.rep-hint{font-size:11.5px;color:var(--muted);margin:-2px 0 10px 0}
.rep-src{
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  font-size:10px;
  color:var(--muted);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:0 6px;
  margin-left:8px;
  vertical-align:1px;
}
.rep-total .rep-b{color:var(--muted)}
.rep-img{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:7px;
  padding:8px 12px;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:8px;
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  font-size:11.5px;
  color:var(--muted);
}
.rep-img .ph{
  width:52px;
  height:34px;
  border-radius:4px;
  background:var(--bg);
  border:1px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.report-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.report-head .acts{display:flex;gap:6px;white-space:nowrap}

/* 보기 전환 (01i [날짜별|구분별] · 01p [막대|표]) — 붙어 있는 두 칸이 한 세트로 보이게.
   클래스를 나눠 둔 이유: 검증 스크립트가 '지금 눌린 보기' 를 클래스로 집어내므로
   서로 다른 전환기가 같은 이름을 쓰면 서로의 버튼까지 집힌다. */
.rep-views,.tv-views{display:flex;white-space:nowrap;margin-right:auto;margin-left:12px}
.rep-views .btn,.tv-views .btn{border-radius:0}
.rep-views .btn:first-child,.tv-views .btn:first-child{border-radius:7px 0 0 7px}
.rep-views .btn:last-child,.tv-views .btn:last-child{border-radius:0 7px 7px 0;margin-left:-1px}
.rep-views .btn.on,.tv-views .btn.on{
  background:rgba(77,163,255,.14);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
  position:relative;
}
/* 날짜별 보기의 항목별 시간 — 출처 태그와 같은 줄 오른쪽 */
.rep-hrs{
  font-family:Consolas,monospace;
  font-size:11px;
  color:var(--muted);
  margin-left:8px;
}

/* 보고서 생성 진행 줄 (01j) — [보고서 생성] 은 AI 분석 탭에 있으므로 여기에도 상태를 남긴다 */
.rep-busy{
  margin:0 0 10px 0;
  padding:8px 10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
  font-size:12px;
  color:var(--muted);
}

/* ---------- TechNet 반영 (01h 1) — 보고서 미리보기 하단 ---------- */
/* 생성된 보고서 안에 있으므로 보고서가 없으면 함께 감춰진다. 날짜 한 줄 = 그 날짜 항목. */
.tn-apply{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.tn-apply-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tn-apply-head .card-title{margin-bottom:0}
.tn-row{padding:6px 0}
.tn-row + .tn-row{border-top:1px solid var(--border)}
.tn-line{display:flex;align-items:center;gap:10px}
.tn-d{font-size:12px;font-weight:600}
.tn-d .dd{font-family:Consolas,monospace;font-weight:400;color:var(--muted);margin-left:5px}
.tn-n{font-size:11.5px;color:var(--muted)}
.tn-acts{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}

/* ---------- 팀 현황 화면 (mockup .tv-* / .tw-* / .tm-* / .yd-* 이식) ---------- */
.tv-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tv-left{display:flex;align-items:center;gap:8px}
.tv-left .card-title{margin-bottom:0}
.tv-cap{font-size:11.5px;color:var(--muted);text-align:right}
/* 매니저 N명 집계 제외 (01o 5) — 캡션 둘째 줄, 인원이 줄어든 이유를 밝힌다 */
.tv-ex{display:block;font-size:11px;color:var(--warn)}
/* 01l 7 — 서버 소요시간 / 장애 폴백 표기 (캡션 셋째·넷째 줄) */
.tv-ms{display:block;font-size:11px;color:var(--muted);font-family:Consolas,monospace}
.tv-stale{display:block;font-size:11px;color:var(--warn)}
.tv-sub{font-family:Consolas,monospace;font-size:11px;color:var(--muted);margin:-4px 0 10px 0}
/* 통합 카드(01l 1)의 두 구역을 가르는 선 */
.tv-split{margin:16px 0;border-top:1px solid var(--border)}
.tv-acts{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
/* 제외 기준 상시 안내 (01s 개정) — 카드 제목 옆에 조용히 붙는다 */
.tv-note{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 팀 선택 드롭다운 */
.tw-scope{
  padding:3px 8px;
  font-family:inherit;
  font-size:12px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  color-scheme:dark;
}
.tw-scope:focus{outline:none;border-color:var(--accent)}

/* ① 이번 주 작성 현황 — 멤버별 7칸 미니 셀 */
.tw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:0 28px;max-width:1180px}
.tw-row{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 46px 64px;
  align-items:center;
  gap:8px;
  padding:2px 0;
  font-size:11.5px;
}
.tw-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-row .hh{font-family:Consolas,monospace;color:var(--muted);text-align:right}
.tw-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.tw-c{
  min-width:0;
  height:16px;
  border-radius:2px;
  background:var(--surface2);
  border:1px solid var(--border);
  cursor:default;
  transition:border-color .12s ease;
}
.tw-c:hover{border-color:var(--accent)}
.tw-c.off,.tw-c.none{opacity:.45}
.tw-c.miss{background:rgba(224,100,92,.5);border-color:var(--danger)}
.tw-c.low{background:rgba(224,166,60,.4);border-color:rgba(224,166,60,.65)}
.tw-c.full{background:rgba(63,185,111,.4);border-color:rgba(63,185,111,.65)}
.tw-st{
  font-size:10px;
  line-height:1.6;
  text-align:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tw-st.miss{background:rgba(224,100,92,.12);border-color:rgba(224,100,92,.5);color:var(--danger)}
.tw-st.low{background:rgba(224,166,60,.12);border-color:rgba(224,166,60,.5);color:var(--warn)}

/* 요일 헤더 (01s 3a) — `.tw-row` 와 같은 4열 그리드라 요일 글자가 7칸 바로 위에 얹힌다.
   컬럼 수만큼 목록 맨 앞에 들어가므로 각 열이 자기 머리글을 갖는다. */
.tw-hd{padding-bottom:0}
.tw-hc{
  min-width:0;
  font-size:10px;
  line-height:1.4;
  text-align:center;
  color:var(--muted);
  overflow:hidden;
}
.tw-hc.off{opacity:.5}                      /* 토·일은 흐리게 */
.tw-hc.hol{color:var(--danger);opacity:1}   /* 공휴일 — 툴팁에 공휴일명 */
.tw-hc.hol::after{content:'·'}

/* 블록 ① 주 이동 (01s 3b) — 개인 화면 `.wk-nav` 와 같은 룩, 카드 머리에 붙는 크기 */
.tw-nav{display:flex;align-items:center;gap:4px}
.tw-nav .btn{padding:1px 8px;font-size:11px;line-height:1.5}

/* ② 년간 구분 통계 — [막대 | 표] 2뷰 (01p).
   막대: 인원별 가로 누적 막대(계열 6칸) + 전체 평균 기준선.
   01l 1 — 전체 폭 카드로 옮기며 폭 제한(옛 900px)을 뗐다: 세그먼트마다 숫자를 넣으려면
   막대가 길어야 한다. 표 뷰는 아래 `.tmt-*` 에 따로 있다. */
.tm-row{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 58px;
  align-items:center;
  gap:10px;
  padding:3px 0;
  font-size:11.5px;
}
.tm-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-row .hh{font-family:Consolas,monospace;color:var(--muted);text-align:right}
/* 세그먼트 안에 숫자를 넣기 위해 트랙을 14px → 18px 로 (01l 3) */
.tm-track{position:relative;height:18px;border-radius:3px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.tm-bar{display:flex;height:100%}
.tm-seg{height:100%;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* 세그먼트 안 시간 (01l 3 · 01p 3 — 계열 6칸이라 칸이 넓어져 굵고 크게 읽힌다).
   폭이 모자라면 스크립트가 이 노드를 아예 지운다 (잘림·겹침 0건 — 툴팁이 대신 받는다).
   flex:0 0 auto 로 자연 폭을 유지해야 '들어가는지' 를 잴 수 있다.
   잉크 색은 그 칸의 색이 정한다 (`--kt` — 밝은 칸엔 검정, 어두운 칸엔 흰색). */
.tm-num{
  flex:0 0 auto;
  font-family:Consolas,monospace;
  font-size:10.5px;
  font-weight:600;
  line-height:1;
  color:var(--kt,rgba(11,16,23,.82));
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

/* ── 계열 색 체계 (01p) ────────────────────────────────────────
   색 값은 **여기에만** 있다. 스크립트는 클래스(`.f-*` / `.s-*`)와 농도(`--d`)만 얹는다.
     --kc : 계열/단계 색 (공백 구분 rgb — 히트맵이 알파를 얹을 수 있게)
     --kt : 그 색 위에 얹는 숫자 잉크 (WCAG 대비가 높은 쪽으로 미리 정해 둔 값)
   다크 트랙 배경 #1c2530 위에서 OKLCH 로 계산했다:
     · 계열 대표색 7종 — 인접·전 쌍 CVD(protan/deutan) ΔE ≥ 8, 정상시야 최소 ΔE 16.1
     · 계열 안 단계  — 명도 단조 감소, 인접 단계 ΔL ≥ 0.06 (계열마다 단일 색상)
   사내·이동/기타 계열은 **의도적으로 무채색**이다 (성격상 뒤로 물러나야 하는 묶음).
   .s-* 규칙 수는 features\weekly\team.py 의 FAMILY_SHADES 와 같아야 한다. */
.f-support{--kc:75 163 247;--kt:#0b1017}     /* 고객 지원  #4ba3f7 */
.f-analysis{--kc:161 70 176;--kt:#eaf1f9}    /* 분석·전문  #a146b0 */
.f-docs{--kc:234 125 46;--kt:#0b1017}        /* 문서       #ea7d2e */
.f-education{--kc:231 205 5;--kt:#0b1017}    /* 교육       #e7cd05 */
.f-internal{--kc:142 137 125;--kt:#0b1017}   /* 사내·이동  #8e897d */
.f-leave{--kc:101 201 140;--kt:#0b1017}      /* 휴가       #65c98c */
.f-etc{--kc:80 89 99;--kt:#eaf1f9}           /* 기타 계열  #505963 (미분류 폴백) */

/* 계열 안 단계 — 계열 드릴다운 세그먼트 · 2단 범례의 구분 견본 */
.s-support0{--kc:195 219 255;--kt:#0b1017}
.s-support1{--kc:158 200 255;--kt:#0b1017}
.s-support2{--kc:131 180 240;--kt:#0b1017}
.s-support3{--kc:102 162 225;--kt:#0b1017}
.s-support4{--kc:72 143 209;--kt:#0b1017}
.s-support5{--kc:34 125 193;--kt:#0b1017}
.s-support6{--kc:0 107 168;--kt:#eaf1f9}
.s-support7{--kc:0 89 137;--kt:#eaf1f9}
.s-analysis0{--kc:240 193 234;--kt:#0b1017}
.s-analysis1{--kc:224 169 222;--kt:#0b1017}
.s-analysis2{--kc:207 145 210;--kt:#0b1017}
.s-analysis3{--kc:190 122 199;--kt:#0b1017}
.s-analysis4{--kc:173 98 188;--kt:#0b1017}
.s-analysis5{--kc:155 74 177;--kt:#eaf1f9}
.s-analysis6{--kc:136 47 167;--kt:#eaf1f9}
.s-docs0{--kc:255 177 105;--kt:#0b1017}
.s-docs1{--kc:213 93 13;--kt:#0b1017}
.s-education0{--kc:239 230 112;--kt:#0b1017}
.s-education1{--kc:218 185 0;--kt:#0b1017}
.s-internal0{--kc:213 210 203;--kt:#0b1017}
.s-internal1{--kc:194 190 181;--kt:#0b1017}
.s-internal2{--kc:176 170 160;--kt:#0b1017}
.s-internal3{--kc:158 150 139;--kt:#0b1017}
.s-internal4{--kc:140 131 118;--kt:#0b1017}
.s-internal5{--kc:123 112 99;--kt:#eaf1f9}
.s-internal6{--kc:107 94 79;--kt:#eaf1f9}
.s-leave0{--kc:156 229 198;--kt:#0b1017}
.s-leave1{--kc:126 211 166;--kt:#0b1017}
.s-leave2{--kc:99 192 133;--kt:#0b1017}
.s-leave3{--kc:76 173 96;--kt:#0b1017}
.s-etc0{--kc:193 198 204;--kt:#0b1017}
.s-etc1{--kc:172 178 186;--kt:#0b1017}
.s-etc2{--kc:151 159 168;--kt:#0b1017}
.s-etc3{--kc:130 140 151;--kt:#0b1017}
.s-etc4{--kc:110 122 133;--kt:#0b1017}
.s-etc5{--kc:90 104 116;--kt:#eaf1f9}

/* 세그먼트 배경 + 1px 경계선 (01p 5).
   경계선은 box-shadow 라 레이아웃(폭 %)을 건드리지 않는다. 실오라기 칸(<3px)은
   선이 칸을 통째로 덮으므로 스크립트가 `.nl` 을 붙여 뺀다. */
.tm-seg{background:rgb(var(--kc));box-shadow:inset 1px 0 0 rgba(11,16,23,.6)}
.tm-seg:first-child,.tm-seg.nl{box-shadow:none}
.tm-seg.hit{cursor:pointer}
.tm-seg.hit:hover{box-shadow:inset 0 0 0 1px rgba(233,240,248,.9)}
.ws-legend i.sw,.ws-legend i.fgrad{background:rgb(var(--kc))}

/* 2단 범례 (01p 5) — 계열 헤더 아래 소속 구분. 헤더를 누르면 그 계열만 펼친다. */
.ws-legend.tm-legend{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  align-items:start;
  gap:10px 18px;
  margin:0 0 14px 0;
}
.ws-legend i.sw{border-radius:2px}
.tm-fam{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm-fam .k{max-width:100%;padding-left:3px}
.tm-fam .k > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-legend .kf{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 6px;
  font-size:11.5px;
  font-weight:600;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  text-align:left;
}
.ws-legend .kf:hover{border-color:var(--accent)}
.ws-legend .kf .fnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-legend .kf .fct{margin-left:auto;font-weight:400;font-size:10.5px;color:var(--muted)}
.ws-legend i.fgrad{width:16px;height:11px;border-radius:2px;flex:0 0 auto}
.tm-fam.on .kf{border-color:var(--accent);background:rgba(77,163,255,.14)}
.tm-fam.on .k{color:var(--text)}
/* 펼친 계열 안의 구분은 눌러서 단독으로 볼 수 있다 (01q 2) — 버튼이지만 범례처럼 보인다 */
.ws-legend button.k{background:none;border:none;text-align:left;line-height:inherit}
.ws-legend button.k:hover{color:var(--accent)}
.ws-legend .k.on{color:var(--accent);font-weight:600}

/* 드릴다운 머리 — 복귀 버튼 + 현재 경로 (`고객 지원 › QA`) + 설명 (01q 2) */
.tm-drill{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px}
.tm-drilln{font-size:11.5px;color:var(--muted)}
.tm-path{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text)}
.tm-path .sep{color:var(--muted);font-weight:400}
.tm-path .p.on{color:var(--accent)}
/* 구분 단독에서 0h 인 인원 — 지우지 않고 맨 아래에 흐리게 남긴다 (누가 안 했는지도 정보다) */
.tm-row.tm-zero .nm,.tm-row.tm-zero .hh{color:rgba(138,151,166,.55)}
.tm-row.tm-zero .tm-track{opacity:.5}

/* 표 뷰 (히트맵 · 01p 4) — 셀 색은 계열색 위에 값 농도(--d) 를 얹은 것뿐이다.
   이름·합계 열은 가로 스크롤에도 고정된다. */
.tmt-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--border);border-radius:8px}
.tmt{border-collapse:separate;border-spacing:0;font-size:11px;white-space:nowrap}
.tmt th,.tmt td{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.tmt tr:last-child th,.tmt tr:last-child td{border-bottom:none}
.tmt .fh{
  padding:3px 8px;
  font-size:11px;
  font-weight:600;
  color:var(--text);
  text-align:center;
  background:rgb(var(--kc) / .26);
  border-bottom:1px solid var(--border);
}
/* 구분명은 세로로 세운다 — 27열을 가로로 늘어놓으면 표가 화면 두 배 폭이 된다.
   가장 긴 이름('모니터링/진단/분석(개선안 미제시)' 19자)이 잘리지 않을 만큼 높이를 잡는다.
   01q 1 (버그 수정) — 예전에는 `writing-mode:vertical-rl` 에 `transform:rotate(180deg)`
   까지 걸어 글자가 통째로 뒤집히고 아래→위로 읽혔다. 회전을 걷어내 **위→아래 정방향**
   으로 되돌리고, `text-orientation:upright` 로 라틴 글자(QA·MA·TS·PoC(BMT))까지 바로
   세운다 — 27열이 한 방향으로만 읽힌다 (고개를 기울일 일이 없다).
   한 줄짜리 세로 글줄이라 폭은 줄높이 하나면 된다 — 좁게 잡고 `margin:0 auto` 로
   칸 가운데에 놓는다 (`width:100%` 면 글줄이 칸 오른쪽 끝에 붙는다). */
.tmt .kh{
  height:258px;
  padding:6px 2px;
  vertical-align:bottom;
  font-size:10.5px;
  font-weight:400;
  color:var(--muted);
  background:rgb(var(--kc) / .10);
  cursor:pointer;
}
.tmt .kh .khl{
  display:block;
  width:1.9em;
  margin:0 auto;
  writing-mode:vertical-rl;
  text-orientation:upright;
  max-height:246px;   /* 19자 글줄이 실측 226px — 폰트가 바뀌어도 잘리지 않게 여유를 둔다 */
  overflow:hidden;
  text-overflow:ellipsis;
}
.tmt .kh:hover,.tmt .toth:hover{color:var(--text);background:#232e3b}
.tmt .kh.on,.tmt .toth.on{color:var(--accent)}
.tmt .kh.on{box-shadow:inset 0 -2px 0 var(--accent)}
.tmt .nmh,.tmt .nm{
  position:sticky;
  left:0;
  z-index:2;
  min-width:76px;
  max-width:76px;
  padding:2px 8px;
  text-align:left;
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
  background:var(--surface);
  border-right:1px solid var(--border);
}
.tmt .nmh{z-index:4;background:var(--surface2);font-weight:600}
.tmt .toth,.tmt .hh{
  position:sticky;
  right:0;
  z-index:2;
  min-width:62px;
  padding:2px 8px;
  text-align:right;
  font-family:Consolas,monospace;
  background:var(--surface);
  border-right:none;
  border-left:1px solid var(--border);
}
.tmt .toth{z-index:4;background:var(--surface2);font-family:inherit;cursor:pointer;font-weight:600}
/* 셀 — 계열색 위에 값 농도(--d, 스크립트가 넣는다)만 얹는다. 농도 상한이 0.45 라
   가장 진한 칸도 어두운 편이므로 숫자 잉크는 항상 밝은 쪽으로 고정한다
   (막대 세그먼트의 `--kt` 는 '색 원본' 기준이라 여기엔 맞지 않는다). */
.tmt .tmc{
  padding:2px 6px;
  min-width:42px;
  text-align:right;
  font-family:Consolas,monospace;
  color:#eef3fa;
  background:rgb(var(--kc) / var(--d,0));
}
.tmt .tmc.zero{background:transparent}
.tmt tbody tr:hover .tmc{box-shadow:inset 0 -1px 0 rgba(215,222,232,.35)}
.tmt tbody tr:hover .nm,.tmt tbody tr:hover .hh{background:var(--surface2)}
.tmt .tmt-avg .nm,.tmt .tmt-avg .hh{color:var(--text);font-weight:600}
.tmt .tmt-avg th,.tmt .tmt-avg td{border-bottom:1px dashed rgba(138,151,166,.55)}
.tmt-cap{margin-top:6px;font-size:10.5px;color:var(--muted)}

/* 전체 평균 기준선 — 막대 위 세로 점선 (모든 행에 같은 % 위치) */
.tm-base{
  position:absolute;
  top:0;
  bottom:0;
  width:0;
  border-left:1px dashed rgba(138,151,166,.9);
  pointer-events:none;
}
/* 최상단 '전체 평균' 행 — 좌우 음수 마진이 padding+border 를 상쇄해 트랙 위치가 일반 행과 맞는다 */
.tm-row.tm-avg{
  margin:0 -9px 10px -9px;
  padding:7px 8px;
  border:1px dashed rgba(138,151,166,.5);
  border-radius:6px;
  background:rgba(138,151,166,.07);
}
.tm-row.tm-avg .nm{color:var(--text);font-weight:600}
.tm-row.tm-avg .hh{color:var(--text)}
.tm-row.tm-avg .tm-track{background:var(--surface)}
/* 01p 3 — 평균 행도 **같은 계열 색**을 쓴다. 예전에는 한 톤 가라앉히려고 inset 그림자로
   덮었지만, 그러면 범례 색과 평균 행 색이 달라져 계열 체계가 깨진다. 구분은 점선 테두리·
   배경 tint·굵은 이름이 이미 충분히 하고 있다. */
.ws-legend i.dash{width:16px;height:0;background:none;border-top:1px dashed rgba(138,151,166,.9)}
.ws-legend .k.avg{padding-left:14px;border-left:1px solid var(--border)}
/* 2단 범례 안에서는 평균 안내가 한 줄을 통째로 쓴다 (계열 칸에 끼어들지 않게) */
.ws-legend.tm-legend .k.avg{grid-column:1/-1;padding-left:0;border-left:none;margin-top:2px}

/* ③ 연간 미작성 날짜 (01l 1 — 이번 주 현황과 같은 카드 아래 구역) */
.yd{max-width:1180px}
.yd-row{
  display:grid;
  grid-template-columns:76px 74px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:3px 0;
  font-size:11.5px;
}
.yd-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yd-row .cnt{font-family:Consolas,monospace;font-size:11px;color:var(--danger);text-align:right}
.yd-row.none .nm,.yd-row.none .cnt{color:var(--muted)}
.yd-chips{display:flex;flex-wrap:wrap;gap:4px}
.yd-ok{font-size:11px;color:var(--muted)}
.yd-more{font-size:11px;color:var(--muted)}
/* 첫 작성일 마커 (01s 3c) — 칩 앞에 조용히 붙는다 (그 앞 날짜는 집계 대상이 아니다) */
.yd-since{align-self:center;font-size:10px;color:var(--muted);white-space:nowrap}
.yd-chip{
  font-family:Consolas,monospace;
  font-size:10px;
  line-height:1.7;
  padding:0 6px;
  border-radius:999px;
  background:rgba(224,100,92,.12);
  border:1px solid rgba(224,100,92,.5);
  color:var(--danger);
  cursor:default;
  transition:background .12s ease;
}
.yd-chip:hover{background:rgba(224,100,92,.22)}
.yd-chip.low{background:rgba(224,166,60,.12);border-color:rgba(224,166,60,.5);color:var(--warn)}
.yd-chip.low:hover{background:rgba(224,166,60,.22)}

/* ---------- 설정 ---------- */
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 16px;font-size:13px;align-items:baseline}
.kv .k{color:var(--muted);font-size:12px}
.kv .v{font-family:Consolas,monospace;word-break:break-all}
.ro{
  font-size:11px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:999px;
  padding:1px 8px;
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
}

/* 편집 가능한 설정 (01e) */
.mid{max-width:1100px}
.set-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.set-row > label{font-size:12px;color:var(--muted);flex:0 0 132px}
.set-in{
  padding:6px 10px;
  font-family:Consolas,monospace;
  font-size:12.5px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  min-width:300px;
  color-scheme:dark;
}
.set-in:focus{outline:none;border-color:var(--accent)}
select.set-in{font-family:inherit;min-width:140px}
.set-hint{font-size:11.5px;color:var(--muted)}
.set-acts{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.set-msg{font-size:11.5px;color:var(--muted)}
.set-msg.ok{color:var(--success)}
.set-msg.err{color:var(--danger)}

/* 팀 매핑 — 기술본부 인원 목록 */
.tmap-help{font-size:11.5px;color:var(--muted);margin:-4px 0 8px 0}
.tmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px 28px}
/* 이름 · 팀 · 직위 3열 — 두 드롭다운은 같은 폭으로 세로줄을 맞춘다 (01n 6) */
.tmap-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 84px 84px;
  align-items:center;
  gap:10px;
  padding:3px 0;
  font-size:12px;
}
/* 이름 · USER_ID · (퇴사) 배지 — 배지는 절대 잘리지 않게 마지막에 고정 폭으로 둔다 */
.tmap-row .nm{display:flex;align-items:center;min-width:0;overflow:hidden}
.tmap-row .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.tmap-row .uid{
  font-family:Consolas,monospace;
  font-size:10.5px;
  color:var(--muted);
  margin-left:6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}
.tmap-row.on .nm{color:var(--accent)}
.tmap-row.me .nm::after{
  content:'(본인)';
  flex:0 0 auto;
  margin-left:4px;
  font-size:10.5px;
  color:var(--muted);
}
.tmap-row select{
  padding:2px 6px;
  font-family:inherit;
  font-size:11.5px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  color-scheme:dark;
  width:100%;
}
.tmap-row select:focus{outline:none;border-color:var(--accent)}
/* 퇴사자 (01g) — 표기만 남기고 신규 지정 불가 */
.tmap-row.retired .who,
.tmap-row.retired .uid{color:var(--muted);text-decoration:line-through}
.tmap-row .tag-out{
  flex:0 0 auto;
  margin-left:6px;
  font-size:10px;
  line-height:1.4;
  padding:0 6px;
  border-radius:999px;
  color:var(--warn);
  border:1px solid var(--warn);
  text-decoration:none;
}
/* 직위 (01n 5 · 01o 5) — 팀원은 조용하게(기본), 매니저만 살짝 올려 눈에 걸리게 한다.
   대부분의 행이 팀원이라, 강조가 붙은 몇 줄만 목록에서 도드라진다. */
.tmap-row select.pos{color:var(--muted);background:transparent}
.tmap-row select.pos.on{
  color:var(--text);
  background:var(--surface2);
  border-color:var(--accent);
  font-weight:600;
}
.tw-scope:disabled{opacity:.75;cursor:default}

/* 주 이동 (01j 5) — 내 작성 현황 헤더의 ◀ 기간 ▶ 하나가 화면 전체의 주를 옮긴다.
   (01e 선행 수정 1 의 보고서 전용 ◀ ▶ 를 여기로 통합했다 — 중복 제거) */
.wk-nav{display:flex;align-items:center;gap:6px;margin-right:auto}
.wk-nav .wk{
  font-family:Consolas,monospace;
  font-size:12px;
  color:var(--text);
  min-width:158px;
  text-align:center;
}
.wk-nav .btn{padding:2px 9px;font-size:12px;line-height:1.5}
.wk-nav .tag{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* 01r 3 — [테크넷 주간보고 열기] 는 화살표보다 눌러야 할 버튼이라 조금 넓게 둔다 */
.wk-nav #btnOpenWeek{padding:2px 11px;margin-left:6px}
.wk-nav #openWeekMsg{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.wk-nav #openWeekMsg.ok{color:var(--success)}
.wk-nav #openWeekMsg.err{color:var(--danger)}
.wk-nav #openWeekMsg.warn{color:var(--warn)}

/* 구버전 서버 배너 (01r B) — 상단 전체 폭. 평소에는 hidden 이라 자리를 차지하지 않는다. */
.stale-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 20px;
  background:#5a3a12;
  color:#ffdca8;
  font-size:12.5px;
  font-weight:600;
  border-bottom:1px solid #7a5320;
  flex:0 0 auto;
}
.stale-bar[hidden]{display:none}
.stale-bar .ico{font-size:14px}

/* ================================================================
   QNA 현황 (스펙 02 B·C) — 화면 계약서: ui\web\mockup-qna.html
   토큰(:root)·카드·버튼·칩은 기존 것을 그대로 쓰고, 이 구획에는
   목업에만 있던 요소(요약 그리드·알림 토글·목록 2형·드로어·embed 미리보기)만 더한다.
   ================================================================ */

/* 보조 강조 버튼 (드로어의 [Discord 발송]) */
.btn.outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn.outline:hover{background:rgba(77,163,255,.12);border-color:#63b0ff}

/* ---------- 긴급 표기 2단 (02 확정 · 02c 추정) ---------- */
/* 확정 = 제목에 '긴급' (규칙) · 추정 = 로컬 LLM 어감 판정 — 색으로 구분한다 */
.crit-add{font-size:12.5px;font-weight:600;color:var(--danger);margin-left:7px}
.guess-add{font-size:12.5px;font-weight:600;color:#e0813c;margin-left:7px}
.tag-guess{
  display:inline-block;
  font-size:10.5px;
  font-weight:600;
  line-height:1.5;
  padding:0 7px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(224,129,60,.14);
  border:1px solid #e0813c;
  color:#e0813c;
  vertical-align:1px;
  cursor:help;
}
.tag-crit{
  display:inline-block;
  font-size:10.5px;
  font-weight:600;
  line-height:1.5;
  padding:0 7px;
  margin-right:6px;
  border-radius:999px;
  background:rgba(224,100,92,.14);
  border:1px solid var(--danger);
  color:var(--danger);
  vertical-align:1px;
}

/* ---------- 요약 카드 (항상 전체 기준 고정) ---------- */
.sum-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.sum-head .card-title{margin-bottom:0}
.sum-head .acts{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  flex-wrap:wrap;
  justify-content:flex-end;
}
/* 버튼 줄 2그룹 — 보고 그룹 | 구분선 | 실시간 알림 토글 (스펙 02 C 2026-08-18) */
.act-group{display:inline-flex;align-items:center;gap:6px}
.act-sep{
  width:1px;
  align-self:stretch;
  min-height:20px;
  margin:0 6px;
  background:var(--border);
}

.sum-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:1180px){.sum-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.sum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sum-cell{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 12px;
}
.stat-value{font-size:20px;font-weight:600;margin-bottom:4px}
.stat-value.warn{color:var(--warn)}
.stat-value.danger{color:var(--danger)}
.stat-value.sm{font-size:16px}

/* 실시간 알림 ON/OFF 토글 (발송만 좌우한다 — 감지·기록은 계속) */
.sw-wrap{display:inline-flex;align-items:center;gap:7px;margin:0 4px}
.sw{
  position:relative;
  width:38px;
  height:20px;
  padding:0;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  transition:background .12s ease, border-color .12s ease;
}
.sw .knob{
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .14s ease, background .12s ease;
}
.sw.on{background:rgba(77,163,255,.22);border-color:var(--accent)}
.sw.on .knob{transform:translateX(18px);background:var(--accent)}
.sw:focus{outline:none;border-color:var(--accent)}
.sw:disabled{opacity:.45;cursor:not-allowed}
.sw-label{font-size:12px;color:var(--muted)}
.sw-state{font-size:11px;font-family:Consolas,monospace;color:var(--muted)}
.sw-state.on{color:var(--accent)}

/* ---------- 필터 줄 (목록에만 적용 — 요약은 항상 전체) ---------- */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters .fl{display:inline-flex;align-items:center;gap:6px}
.filters .fl > span{font-size:12px;color:var(--muted)}
.filters .grow{flex:1;min-width:8px}
.filters .cnt{font-size:12px;color:var(--muted);white-space:nowrap}
.sel{
  padding:4px 10px;
  font-family:inherit;
  font-size:12.5px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  color-scheme:dark;
}
.sel:focus{outline:none;border-color:var(--accent)}

/* ---------- 목록 구획 머리 ---------- */
.sec-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.sec-head .t{font-size:13px;font-weight:600}
.sec-head .n{font-size:12px;color:var(--muted)}
.sec-head .grow{flex:1}

/* 게시글 이동 어포던스 */
.go{
  flex:0 0 auto;
  font-size:12px;
  color:var(--muted);
  transition:color .12s ease, transform .12s ease;
}

/* ---------- 미완료 카드 행 (🚨·🟡 공통 — 2026-08-18 포맷 통일) ----------
   두 구획이 같은 마크업을 쓰고, 일반 구획은 `.warn` 으로 색만 낮춘다. */
.q-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  margin-bottom:8px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--danger);
  border-radius:8px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.q-item:last-child{margin-bottom:0}
.q-item:hover{background:#232e3b;border-color:#33445a;border-left-color:var(--danger)}
.q-item:hover .q-title{color:var(--accent)}
.q-item:hover .go{color:var(--accent);transform:translate(1px,-1px)}
.q-item:focus{outline:none;border-color:var(--accent);border-left-color:var(--danger)}
.q-body{flex:1;min-width:0}
.q-title{
  font-size:13.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .12s ease;
}
.q-cust{color:var(--accent);font-weight:600;margin-right:4px}
.q-meta{
  font-size:11.5px;
  color:var(--muted);
  margin-top:4px;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.q-meta .mono{font-family:Consolas,monospace}
.q-meta .lc{color:var(--text)}
.q-meta .lc.none{color:var(--warn)}
.q-days{flex:0 0 70px;text-align:right}
.q-days .num{
  display:block;
  font-family:Consolas,monospace;
  font-size:19px;
  font-weight:600;
  line-height:1.2;
  color:var(--danger);
}
.q-days .cap{font-size:10.5px;color:var(--muted)}

/* 일반 진행 중 — 같은 행 구성에 색만 낮춘다 (구분은 색·강조뿐) */
.q-item.warn{border-left-color:var(--warn)}
.q-item.warn:hover{border-left-color:var(--warn)}
.q-item.warn:focus{border-left-color:var(--warn)}
.q-item.warn .q-days .num{color:var(--warn)}

/* ---------- 드로어 (메시지 보기) ---------- */
.drawer-mask{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(6,10,14,.55);
  z-index:14;
}
.drawer-mask.open{display:block}

.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:640px;
  max-width:94vw;
  z-index:15;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .18s ease;
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  flex:0 0 auto;
  padding:16px 16px 12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.drawer-head .h{font-size:13px;font-weight:600}
.drawer-head .sub{font-size:11px;color:var(--muted);font-weight:400;margin-top:2px}
.drawer-head .acts{display:flex;align-items:center;gap:6px;white-space:nowrap}
/* embed 미리보기 안의 게시글 링크 — 클릭하면 대시보드 행과 같은 경로로 연다 */
.q-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.q-link:hover{opacity:.85}
.q-link:focus{outline:1px solid var(--accent);outline-offset:2px}

/* 02b — 보고 대상 주 전환 줄 (AI 리포트 전용) */
.drawer-week{
  flex:0 0 auto;
  padding:8px 16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.drawer-week[hidden]{display:none}
.drawer-week .wk-pick{display:flex;align-items:center;gap:6px;white-space:nowrap}
.drawer-week .wk{font-size:11.5px;color:var(--muted);text-align:center;flex:1;min-width:0}
.drawer-body{flex:1;overflow-y:auto;padding:16px}
.drawer-foot{
  flex:0 0 auto;
  padding:12px 16px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.drawer-foot .hint{font-size:11px;color:var(--muted);min-width:0}
.drawer-foot .acts{display:flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- Discord embed 미리보기 (발송본과 같은 구성) ---------- */
.dc-note{font-size:11.5px;color:var(--muted);margin-bottom:12px}
.dc-embed{
  position:relative;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px 14px 12px 16px;
  margin-bottom:10px;
  overflow:hidden;
}
.dc-embed:last-child{margin-bottom:0}
.dc-embed .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
.dc-embed.blue .bar{background:var(--accent)}
.dc-embed.red .bar{background:var(--danger)}
.dc-embed.yellow .bar{background:var(--warn)}
.dc-embed.green .bar{background:var(--success)}
.dc-embed.grey .bar{background:var(--muted)}
.dc-title{font-size:13.5px;font-weight:600;margin-bottom:6px}
.dc-desc{font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.dc-desc b{color:var(--text);font-weight:600}
.dc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.dc-field .fn{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
.dc-field .fv{font-size:13px;font-weight:600}
.dc-field .fv.danger{color:var(--danger)}
.dc-field .fv.warn{color:var(--warn)}
.dc-foot{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border);
  font-size:11.5px;
  color:var(--muted);
}
.dc-foot div + div{margin-top:3px}

/* 사이드바 하단 QNA 폴러 줄 */
.sidebar-foot .line3{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 설정 · QNA 알림 ---------- */
.qna-mask{font-family:Consolas,monospace;font-size:12px;color:var(--text)}
.qna-rot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---------- 로그인 (스펙 03 A 1) ----------
   전체를 덮는 화면 한 장. 외부 폰트·이미지 없이 기존 토큰만 쓴다. */
.login-mask{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-mask[hidden]{display:none}

.login-card{
  width:360px;
  max-width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:26px 24px 20px 24px;
  display:flex;
  flex-direction:column;
}
.login-logo{font-size:19px;font-weight:600;letter-spacing:.2px}
.login-sub{font-size:12px;color:var(--muted);margin-top:3px;margin-bottom:18px}

.login-lb{font-size:12px;color:var(--muted);margin-bottom:5px}
.login-in{
  padding:9px 11px;
  font-family:inherit;
  font-size:13.5px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:12px;
  color-scheme:dark;
}
.login-in:focus{outline:none;border-color:var(--accent)}

.login-keep{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--muted);
  margin:2px 0 16px 0;
  cursor:pointer;
}
.login-keep input{accent-color:var(--accent);cursor:pointer}

.login-btn{width:100%;justify-content:center;text-align:center;padding:9px 14px}
.login-err{
  margin-top:12px;
  font-size:12.5px;
  color:var(--danger);
  background:rgba(224,100,92,.10);
  border:1px solid rgba(224,100,92,.35);
  border-radius:8px;
  padding:8px 10px;
}
.login-err[hidden]{display:none}
.login-note{margin-top:14px;font-size:11px;color:var(--muted);line-height:1.5}

/* ---------- 사이드바 로그인 사용자 (스펙 03 B 4) ---------- */
.sidebar-user{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  font-size:12px;
}
.sidebar-user[hidden]{display:none}
.sidebar-user .who{
  flex:1;
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-user .rank{
  font-size:10px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
}
.sidebar-user .rank.dev{color:var(--accent);border-color:rgba(77,163,255,.45)}
.sidebar-user .rank[hidden]{display:none}

/* ---------- SherpaChat 챗 화면 (스펙 04m — 계약서: mockup-sherpachat.html) ----------
   목업의 구조·CSS 를 그대로 옮겼다. 이름은 전부 `sc-` 로 감싼다 — 이 파일에는 이미
   다른 뜻의 `.chip`·`.badge` 가 있어서, 목업의 이름을 그대로 쓰면 두 화면이 서로를 망친다.
   외부 폰트·CDN·이미지 없음 (앱 전체 규칙). */
.sc-stage{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:14px;
  padding:18px 20px;
  overflow:hidden;
}
@media (max-width:1199px){.sc-stage{grid-template-columns:minmax(0,1fr)}}

.sc-col{display:flex;flex-direction:column;min-width:0;overflow:hidden}
/* 04t §D-3 — 경계에서 부모로 스크롤이 새지 않게 (중첩 스크롤 체감 제거) */
.sc-turns{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 8px 2px}

/* 빈 상태 — 무엇을 물으면 되는지 예시로 알려 준다 */
.sc-hello{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:34px 20px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.sc-hello .big{font-size:24px;display:block;margin-bottom:8px}
.sc-hello .ex{margin-top:10px;font-size:12px;line-height:1.9}

/* 턴 */
.sc-turn{margin-bottom:6px}
.sc-who{font-size:11.5px;color:var(--muted);margin:14px 0 4px}
.sc-turn:first-child .sc-who:first-child{margin-top:0}
.sc-bubble{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 13px;
  display:inline-block;
  max-width:70ch;
  white-space:pre-wrap;
}
.sc-ai{border-left:2px solid var(--accent);padding:2px 0 2px 14px}

/* 진행 표시 (기본 접힘 + **실시간 머리줄** — 스펙 05b §2) */
.sc-steps{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  margin:10px 0;
  font-size:12.5px;
  overflow:hidden;
}
.sc-steps-head{
  display:flex;
  gap:8px;
  width:100%;
  padding:8px 12px;
  text-align:left;
  color:var(--muted);
  background:none;
  border:none;
}
.sc-steps-head .grow{flex:1}
.sc-steps-bar{display:flex;align-items:center;gap:6px;padding-right:10px}
.sc-steps-bar .sc-steps-head{flex:1}
.sc-steps-body{padding:2px 12px 10px}
.sc-steps.fold .sc-steps-body{display:none}
.sc-step{display:flex;gap:8px;padding:3px 0;align-items:baseline}
.sc-step .mark{width:16px;color:var(--muted)}
.sc-step .name{color:var(--text)}
.sc-step .res{color:var(--muted);margin-left:8px}
.sc-step .ms{color:var(--muted);margin-left:8px;font-family:Consolas,monospace;font-size:11px}
.sc-step .body{flex:1;min-width:0}
.sc-step.ok .mark{color:var(--success)}
.sc-step.warn .mark{color:var(--warn)}
.sc-step.run .mark{color:var(--accent)}
.sc-step.bad .mark{color:var(--danger)}
.sc-step.sub{padding-left:22px}
.sc-step.sub .name{color:var(--muted)}

/* [중단] — 합성 이후 단계가 도는 동안에만 머리줄 오른쪽에 나온다 (스펙 05b §2-5) */
.sc-stop{
  font-size:11px;
  padding:2px 9px;
  border-radius:6px;
  color:var(--warn);
  background:none;
  border:1px solid rgba(224,166,60,.35);
}
.sc-stop:hover{background:rgba(224,166,60,.14);color:#fff}

/* 저하 배지 · 외부 전송 표시 (스펙 05b §2-3·§2-4) */
.sc-degrade{
  font-size:10.5px;
  padding:1px 7px;
  border-radius:5px;
  color:var(--warn);
  border:1px solid rgba(224,166,60,.35);
  white-space:nowrap;
}
.sc-ext{
  font-size:10.5px;
  margin-left:8px;
  padding:1px 7px;
  border-radius:5px;
  color:var(--warn);
  border:1px solid rgba(224,166,60,.35);
}

/* 탭 이름 옆 Graph 배지 — ● 근거 충분 / ○ 근거 부족 / ⏸ 보류 (스펙 05b §1-4) */
.sc-gmark{margin-left:5px;font-size:10px;opacity:.9}

/* 칩 — 문진 · 문서 종류 (후보 N → [건너뛰기] → [직접 입력]) */
.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.sc-chip{
  display:inline-block;
  padding:4px 12px;
  font-size:12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
}
.sc-chip.click{border-color:#33506e;color:var(--text);transition:.12s}
.sc-chip.click:hover{background:#1f3350;border-color:var(--accent);color:#fff}
.sc-chip.sel{background:#1f3350;border-color:var(--accent);color:#fff}
.sc-chip.ghost{border-style:dashed}
.sc-chip.write{border-style:dashed;border-color:#3d5a7a}
.sc-chip-in{
  display:none;
  padding:3px 10px;
  font-size:12px;
  background:var(--bg);
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--text);
  width:170px;
  outline:none;
}
.sc-chip-in.on{display:inline-block}
.sc-askline{font-size:13px}
.sc-askline .hint{color:var(--muted);font-size:12px}

/* 합성 답변 블록 (요약 줄 위 · 근거 탭이 뜬 뒤에 도착 — 스펙 05b §3-1).
   절 5종(결론·근거·Sherpa 확인 항목·조치·한계)을 고정 순서로 그리고, 빈 절은 만들지 않는다. */
.sc-answer{
  margin:14px 0 0;
  padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
}
.sc-answer.warn{border-left-color:var(--warn)}      /* 부분 지지 — 주의색 */
.sc-answer.only{border-left-color:var(--warn)}
.sc-answer.note{border-left-color:var(--muted)}
.sc-answer.ready{border-left-color:var(--accent);background:none;border:none;padding:0}
.sc-answer .a-head{font-size:11.5px;color:var(--muted);margin-bottom:6px;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sc-answer .a-head b{color:var(--text);font-weight:600}
.sc-answer .a-body{font-size:13px;line-height:1.75}
.sc-answer.wait .a-body{color:var(--muted)}
.sc-answer .a-sec{margin-top:8px}
.sc-answer .a-name{font-size:11.5px;color:var(--accent);font-weight:600;margin-bottom:2px}
.sc-answer .a-claim{font-size:13px;line-height:1.8;word-break:break-word}
.sc-answer .a-partial{
  font-size:10.5px;
  margin-left:6px;
  padding:1px 6px;
  border-radius:5px;
  color:var(--warn);
  border:1px solid rgba(224,166,60,.35);
}
.sc-answer .a-foot{font-size:11px;color:var(--muted);margin-top:10px}

/* 근거 부족 화면 (스펙 05b §3-2) — 사유 · 가장 가까운 근거 3 · 문진 · 인계 자리 */
.sc-insuff{
  margin:14px 0 0;
  padding:10px 12px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--warn);
  border-radius:8px;
}
.sc-insuff .i-head{font-size:13px;color:var(--text);font-weight:600;margin-bottom:6px}
.sc-insuff .i-name{font-size:11.5px;color:var(--muted);margin:10px 0 4px}
.sc-insuff .i-reasons{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.sc-insuff .i-reasons .r{padding:1px 0}
.sc-insuff .i-handoff{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sc-insuff .i-handoff .hint{font-size:11px;color:var(--muted)}

/* [이전 조건 이어받기] 칩 줄 (스펙 05b §4) — 입력창 바로 위, 기본 미선택 */
.sc-inherit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0 0}
.sc-inherit[hidden]{display:none}
.sc-inherit .lbl{font-size:11.5px;color:var(--muted)}
.sc-chips.inline{display:inline-flex;margin:0 0 0 8px}

.sc-cite{
  display:inline-block;
  font-size:11px;
  font-family:Consolas,monospace;
  padding:0 5px;
  margin:0 2px;
  border:1px solid #33506e;
  border-radius:5px;
  background:none;
  color:var(--accent);
  vertical-align:2px;
  line-height:1.5;
}
.sc-cite:hover{background:#1f3350;border-color:var(--accent);color:#fff}
.sc-cite:disabled{opacity:.45;cursor:not-allowed}
.sc-cite:disabled:hover{background:none;border-color:#33506e;color:var(--accent)}

/* [답변 생성] (스펙 05b §1-12) — 자동 합성이 꺼졌을 때 답변 자리의 기본 상태. */
.sc-cwrap{display:flex;align-items:center;gap:9px;margin:14px 0 0;flex-wrap:wrap}
.sc-cbtn{
  font-size:12px;
  padding:5px 11px;
  color:var(--text);
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
}
.sc-cbtn:hover{border-color:var(--accent);color:#fff}
.sc-cbtn:focus{outline:none;border-color:var(--accent)}
.sc-cwrap .hint{font-size:11.5px;color:var(--muted)}

/* 요약 줄 + 탭 4개 */
.sc-summary{margin:16px 0 8px;font-size:13.5px}
.sc-summary b{color:#fff}
.sc-summary .cta{color:var(--muted);font-size:12.5px;margin-left:4px}
.sc-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.sc-tab{
  padding:6px 13px;
  font-size:12.5px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  transition:.12s;
}
.sc-tab:hover{border-color:#3d5a7a;color:var(--text)}
.sc-tab.on{background:#1f3350;border-color:var(--accent);color:#fff}
.sc-tab .cnt{font-family:Consolas,monospace;margin-left:5px;opacity:.85}
.sc-panel{display:none}
.sc-panel.on{display:block}
.sc-kinds{
  margin:0 0 10px;
  padding:8px 10px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
}
.sc-kinds .lbl{font-size:11.5px;color:var(--muted)}
.sc-note{color:var(--muted);font-size:12.5px}

/* 결과 항목 */
.sc-hit{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  background:var(--surface2);
  cursor:pointer;
  transition:.12s;
}
.sc-hit:hover{border-color:#3d5a7a}
.sc-hit.on{border-color:var(--accent);background:#1a2534}
/* 세는 건수 밖의 참고용 항목 (스펙 04p §2 — 관련 후보 / 하한 미달) */
.sc-hit.ref{border-style:dashed;opacity:.9}
.sc-ref{
  font-size:10.5px;
  padding:1px 6px;
  border-radius:5px;
  border:1px dashed var(--border);
  color:var(--muted);
}
.sc-hit-top{display:flex;gap:9px;align-items:baseline}
.sc-score{font-size:11px;color:var(--accent);font-family:Consolas,monospace;min-width:42px}
.sc-title{font-size:13px;flex:1}
.sc-meta{font-size:11.5px;color:var(--muted);margin-top:4px}
/* 결과 카드 요약 — **라벨별 한 줄** (스펙 04p §5). 한 줄이 넘치면 말줄임한다. */
.sc-card{
  font-size:12.2px;
  color:var(--muted);
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--border);
}
.sc-card b{color:var(--text);font-weight:500;margin-right:2px}
.sc-card .r{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.75;
}

/* 일치 낱말 하이라이트 (스펙 04p §5) — 다크 테마에서 읽히게 강조색 배경 + 본문색 글자.
   현재 일치(`on`)는 네비게이션이 가리키는 자리다. */
.sc-hl{
  background:rgba(77,163,255,.22);
  color:#eaf3ff;
  border-radius:3px;
  padding:0 1px;
}
.sc-hl.on{background:var(--accent);color:#0f1419}
.sc-kind{
  font-size:10.5px;
  padding:1px 6px;
  border-radius:4px;
  border:1px solid var(--border);
  color:var(--muted);
}
.sc-state{font-size:11px;padding:1px 7px;border-radius:5px;border:1px solid var(--border)}
.sc-state.res{color:var(--success);border-color:rgba(63,185,111,.35)}
.sc-state.unk{color:var(--warn);border-color:rgba(224,166,60,.35)}
.sc-state.rdm{color:var(--accent);border-color:rgba(77,163,255,.35)}
.sc-more{
  width:100%;
  padding:7px;
  font-size:12.5px;
  color:var(--muted);
  background:none;
  border:1px dashed var(--border);
  border-radius:8px;
}
.sc-more:hover{color:var(--text);border-color:#3d5a7a}
.sc-badge{display:inline-block;font-size:11.5px;padding:3px 9px;border-radius:6px;margin-bottom:8px}
.sc-badge.low{background:rgba(224,166,60,.14);color:var(--warn);border:1px solid rgba(224,166,60,.3)}

/* ---- ⚡ 검증된 쿼리 · 📂 파일 위치 (스펙 04q §C) ----
   쿼리 카드는 **본문이 곧 내용**이라 결과 카드(.sc-hit)와 달리 코드 블록을 품는다.
   코드 블록은 제 자리에서 스크롤한다 — 카드 하나가 화면을 삼키지 않게 높이를 묶는다.
   외부 요청 0건 규칙대로 웹폰트를 쓰지 않는다 (등폭은 OS 기본 글꼴로만 지정). */
.sc-qhead{display:flex;gap:8px;align-items:baseline;margin:0 0 8px;flex-wrap:wrap}
.sc-qhead .lbl{font-size:12.5px;color:var(--text);font-weight:500}
.sc-qhead .hint{font-size:11.5px;color:var(--muted);flex:1}
.sc-qcard,.sc-file{
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  background:var(--surface2);
}
.sc-qcard:hover,.sc-file:hover{border-color:#3d5a7a}
.sc-lang{
  font-size:10.5px;
  padding:1px 6px;
  border-radius:4px;
  border:1px solid rgba(77,163,255,.35);
  color:var(--accent);
}
/* 04t §D-3 — 코드 블록에는 **내부 스크롤이 없다**. 가로도 넘치지 않게 접어 쓰고(`pre-wrap`),
   `SC_LONG_SQL` 을 넘는 쿼리만 `.clip` 으로 높이를 제한한 뒤 [전체 펼치기]로 높이를 늘린다.
   목록 안에 스크롤 상자를 만들지 않으므로 세로 휠은 대화 스크롤 하나만 움직인다. */
.sc-codewrap{margin:8px 0 0}
.sc-code{
  margin:0;
  padding:9px 10px;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:Consolas,"D2Coding","Courier New",monospace;
  font-size:11.8px;
  line-height:1.6;
  color:#d7e2ef;
  white-space:pre-wrap;
  word-break:break-word;
}
.sc-code.clip{max-height:220px}
.sc-codewrap .sc-more{margin-top:6px}
.sc-qfoot{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.sc-qfoot .hint{font-size:11px;color:var(--muted)}
.sc-qbtn{
  font-size:11.5px;
  padding:4px 10px;
  border-radius:6px;
  border:1px solid #33506e;
  background:none;
  color:var(--text);
  transition:.12s;
}
.sc-qbtn:hover{background:#1f3350;border-color:var(--accent);color:#fff}
.sc-qbtn.ghost{border-style:dashed;color:var(--muted)}
.sc-copied{font-size:11px;color:var(--success)}

/* 04t §D-2 — 쿼리 카드는 **기본 접힘**이고 접힌 줄이 제목·대상·날짜·크기 한 줄이다 */
.sc-qtop{
  display:flex;
  gap:9px;
  align-items:baseline;
  width:100%;
  padding:0;
  text-align:left;
  background:none;
  border:none;
  color:inherit;
}
.sc-qtop .caret{width:10px;color:var(--muted);flex:0 0 auto}
.sc-qtop:hover .sc-title{color:#fff}
.sc-qtop .sc-title{min-width:0}
.sc-tgt,.sc-qsize{font-size:11px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.sc-qcard.fold .sc-qbody{display:none}
.sc-qbody{margin-top:2px}
/* 날짜 배지 (04t §B-2·§B-3) — 값이 없으면 배지 자체를 만들지 않는다 */
.sc-date{
  font-size:10.5px;
  padding:1px 6px;
  border-radius:4px;
  border:1px solid var(--border);
  color:var(--muted);
  white-space:nowrap;
  flex:0 0 auto;
}

/* 04t §C-2 — 판(세대) 접기. 목록에는 최신 1장만 있고 옛 판은 여기서 편다. */
.sc-prior{margin-top:8px;padding-top:6px;border-top:1px dashed var(--border)}
.sc-prior-head{
  display:flex;
  gap:6px;
  align-items:center;
  padding:0;
  font-size:11.5px;
  color:var(--muted);
  background:none;
  border:none;
}
.sc-prior-head:hover{color:var(--text)}
.sc-prior-head .caret{width:10px}
.sc-prior.fold .sc-prior-body{display:none}
.sc-prior-body{padding:4px 0 0 14px}
.sc-prior .p-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:3px 0;
  font-size:11.5px;
  color:var(--muted);
}
.sc-prior .p-row .name{color:var(--text)}
.sc-prior .p-row .hint{color:var(--muted)}

/* 04t §D-4 — 넓은 질의는 모듈 그룹 헤더 아래 접힌 목록이 기본이다 */
.sc-qgroup{
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
  background:var(--surface2);
  overflow:hidden;
}
.sc-qghead{
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
  padding:8px 12px;
  text-align:left;
  font-size:12.5px;
  color:var(--text);
  background:none;
  border:none;
}
.sc-qghead:hover{background:#1f3350}
.sc-qghead .caret{width:10px;color:var(--muted)}
.sc-qghead .grow{flex:1}
.sc-qgroup.fold .sc-qgbody{display:none}
.sc-qgbody{padding:0 10px 8px}
.sc-qgbody .sc-qcard{background:var(--surface)}
.sc-src{
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  word-break:break-all;
  font-family:Consolas,"D2Coding","Courier New",monospace;
}

/* 입력줄 (하단 고정) */
.sc-ask{display:flex;gap:8px;padding:12px 0 4px;flex:0 0 auto}
.sc-in{
  flex:1;
  padding:10px 12px;
  font-size:13.5px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  outline:none;
}
.sc-in:focus{border-color:var(--accent)}
.sc-foot{font-size:11px;color:var(--muted);padding-bottom:2px}
.sc-err{
  margin-top:8px;
  font-size:12.5px;
  color:var(--danger);
  background:rgba(224,100,92,.10);
  border:1px solid rgba(224,100,92,.35);
  border-radius:8px;
  padding:8px 10px;
}
.sc-err[hidden]{display:none}

/* 우측 원문 뷰어 */
.sc-viewer{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  overflow-y:auto;
}
.sc-viewer h3{
  font-size:12px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:.3px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
  margin-bottom:10px;
}
.sc-vempty{color:var(--muted);font-size:12.5px;padding:26px 6px;text-align:center;line-height:1.8}
.sc-vtitle{font-size:13.5px;font-weight:600;margin-bottom:4px}
.sc-vmeta{font-size:11.5px;color:var(--muted);margin-bottom:10px}

/* 뷰어 요약 블록 — 원문보다 **먼저** 온다 (스펙 04p §5). 라벨별 줄, 카드 요약과 같은 형식. */
.sc-vsum{
  font-size:12.5px;
  color:var(--muted);
  background:var(--surface2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  border-radius:8px;
  padding:9px 11px;
  margin-bottom:8px;
}
.sc-vsum .v-head{display:flex;gap:8px;align-items:center;margin-bottom:5px;font-size:11.5px}
.sc-vsum .v-head b{color:var(--text);font-weight:600}
.sc-vsum .r{line-height:1.75;word-break:break-word}
.sc-vsum .r b{color:var(--text);font-weight:500;margin-right:2px}
.sc-vsum .note{color:var(--muted);font-size:11.5px;margin-top:4px}

/* [원문 전체 펼치기] — 기본 접힘. 펼치면 본문이 **자체 스크롤** 한다 (버튼은 그 밖에 있다). */
.sc-vmore{
  width:100%;
  padding:6px;
  font-size:12px;
  color:var(--muted);
  background:none;
  border:1px dashed var(--border);
  border-radius:8px;
  margin-bottom:8px;
}
.sc-vmore:hover{color:var(--text);border-color:#3d5a7a}
.sc-vbody{
  position:relative;                 /* 일치 네비게이션이 mark 의 offsetTop 을 여기 기준으로 잰다 */
  font-size:12.5px;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  max-height:52vh;
  overflow-y:auto;
  overscroll-behavior:contain;       /* 04t §D-3 — 경계에서 대화 스크롤로 새지 않게 */
}
.sc-vbody.fold{display:none}

/* 일치 네비게이션 — "일치 N건 ◀ k/N ▶" (스펙 04p §5). 동작 버튼과 같은 자리(본문 밖)다. */
.sc-vnav{display:flex;gap:6px;align-items:center;font-size:11.5px;color:var(--muted);margin:8px 0}
.sc-vnav .lbl{flex:1}
.sc-vnav .pos{font-family:Consolas,monospace;min-width:44px;text-align:center}
.sc-vstep{
  padding:2px 9px;
  font-size:11.5px;
  color:var(--muted);
  background:none;
  border:1px solid var(--border);
  border-radius:6px;
}
.sc-vstep:hover{border-color:var(--accent);color:#fff}

/* 동작 버튼은 제목·메타 바로 아래 — 본문 스크롤과 무관하게 항상 보인다 (스펙 04p §5) */
.sc-vact{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap;align-items:center}
.sc-vact button{
  font-size:12px;
  padding:5px 11px;
  border:1px solid var(--border);
  border-radius:7px;
  background:none;
  color:var(--muted);
}
.sc-vact button:hover{border-color:var(--accent);color:#fff}
.sc-vact button:disabled{opacity:.45;cursor:not-allowed}
.sc-vact button:disabled:hover{border-color:var(--border);color:var(--muted)}
.sc-vnote{font-size:11.5px;color:var(--muted);margin-left:2px}

/* 인용 마크로 연 뷰어의 머리 표식 — 어느 근거인지 남긴다 (스펙 05b §3-1) */
.sc-vcite{
  margin-left:8px;
  font-size:10.5px;
  font-family:Consolas,monospace;
  padding:1px 6px;
  border-radius:5px;
  color:var(--accent);
  border:1px solid #33506e;
}

/* 인용으로 짚은 쿼리 카드·파일 줄 (결과 카드의 `.on` 과 같은 강조) */
.sc-qcard.on,.sc-file.on{border-color:var(--accent);background:#1a2534}

/* 설정 · LLM 슬롯 표 (스펙 05b §5-2) — 비밀값·API 키 입력란은 없다 */
.sc-slotwrap{overflow-x:auto;margin:2px 0 4px}
.sc-slots{width:100%;border-collapse:collapse;font-size:12px}
.sc-slots th{
  text-align:left;
  font-weight:500;
  font-size:11px;
  color:var(--muted);
  padding:4px 6px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.sc-slots td{padding:4px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.sc-slots td.name{color:var(--text);white-space:nowrap}
.sc-slots td.state{white-space:nowrap}
.sc-slots td.state > *{margin-right:4px}
.sc-slots .set-in.slim{width:100%;min-width:110px;padding:3px 7px;font-size:11.5px}
.sc-slots input[type=checkbox]{accent-color:var(--accent)}