/* 08-shell.css — 85~88차 Slack 셸 재디자인 (오버진 테마)
   원본 index.html 3486~3984줄. 파일 순서 = 캐스케이드 순서이므로 이름 앞 번호를 바꾸지 말 것. */
/* ============================================================
   85차 — Slack 구조 + 지란 블루 (창섭 승인 시안 v2 적용)

   .app 을 레일/사이드바/본문 3열 2행 그리드로 짜고, 같은 계열 안에서
   명도를 3단으로 나눴다. 예상매출 배너와 주간보고 달성률 카드는 현행 디자인을 유지한다.
   ============================================================ */
:root{
  /* 91차 — Slack 오버진 셸 → Slack "Kind of Blue" 테마로 전환.
     셸·레일·선택 표시·배지는 Slack 테마 값 그대로 쓰고, 패널은 밝은 회색으로 되돌린다(90차의 진한 패널을 되돌림). */
  --sk-shell:#4c64a6;
  --sk-shell-2:#3f5490;
  --sk-side:#e9ecf0;
  --sk-side-tx:#2f3542;
  --sk-side-hover:#dce1ea;
  --sk-side-line:#d4dae4;
  --sk-pick:#71a3d1;
  --sk-alert:#db519f;
  --sk-r:8px;
  --sk-r-sm:6px;
  --sk-pill:4px;
}

/* ---------- 셸 ---------- */
.app{
  display:grid !important;
  grid-template-columns:70px 248px minmax(0,1fr);
  grid-template-rows:46px minmax(0,1fr);
  background:var(--sk-shell) !important;
  gap:0; padding:0 10px 10px 0; height:100vh; overflow:hidden;
}
header{
  grid-column:1 / -1; grid-row:1;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  display:flex !important; align-items:center; gap:var(--sp-4); padding:0 12px 0 14px !important;
  min-height:0 !important; height:46px;
}
.rail{ grid-column:1; grid-row:2; display:flex; flex-direction:column; align-items:center;
  padding:2px 0 10px; gap:var(--sp-1); overflow:hidden; }
aside{
  grid-column:2; grid-row:2; margin:0 !important; padding:0 !important;
  background:var(--sk-side) !important;
  border:0 !important; border-right:1px solid var(--sk-side-line) !important;
  border-radius:var(--radius-md) 0 0 var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; min-height:0;
}
main{
  grid-column:3; grid-row:2; margin:0 !important;
  background:#fff !important; border:0 !important; border-radius:0 var(--radius-md) var(--radius-md) 0;
  overflow:auto; padding:14px 18px 22px !important; min-width:0; min-height:0;
}

/* ---------- 상단바 : 검색 + 액션 ---------- */
.hd-search{
  position:relative; flex:1; max-width:560px; margin:0 auto 0 6px; height:30px;
  display:flex; align-items:center; gap:var(--sp-3); padding:0 10px;
  border-radius:var(--sk-r-sm); background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.85);
}
.hd-search:focus-within{ background:#fff; border-color:#fff; color:var(--muted); }
.hd-search > svg{ width:15px; height:15px; flex:none; }
.hd-search input{
  flex:1; min-width:0; border:0; background:transparent;
  font-family:inherit; font-size:var(--fs-3); color:inherit;
}
.hd-search input::placeholder{ color:rgba(255,255,255,.62); }
.hd-search:focus-within input::placeholder{ color:var(--faint); }
.hd-search-x{ border:0; background:none; color:inherit; font-size:var(--fs-6); line-height:1; cursor:pointer; padding:0 2px; }
.hd-search-res{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:120;
  background:#fff; border-width:1px; border-style:solid; border-color:var(--line); border-radius:var(--sk-r);
  box-shadow:0 12px 34px rgba(23,36,90,.24); overflow:hidden; max-height:60vh; overflow-y:auto;
}
.gs-row{
  width:100%; display:flex; align-items:center; gap:var(--sp-4); padding:9px 12px;
  border:0; background:none; cursor:pointer; text-align:left; font-family:inherit;
  border-bottom:1px solid var(--line-soft);
}
.gs-row:last-child{ border-bottom:0; }
.gs-row:hover{ background:#eef2f9; }
.gs-ic{ width:28px; height:28px; border-radius:var(--sk-r-sm); display:grid; place-items:center; flex:none; }
.gs-ic svg{ width:15px; height:15px; }
.gs-ic.c{ background:var(--primary-light); color:var(--primary-press); }
.gs-ic.p{ background:#eef2f9; color:#6b82be; }
.gs-tx{ flex:1; min-width:0; }
.gs-tx b{ display:block; font-size:var(--fs-4); font-weight:800; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-tx small{ display:block; font-size:var(--fs-1); color:var(--muted); font-weight:500; }
.gs-amt{ flex:none; font-size:var(--fs-4); font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; }
.gs-empty{ padding:16px 12px; text-align:center; font-size:var(--fs-3); color:var(--muted); }

.head-actions{ margin-left:auto; }
.head-actions .btn.btn-hd{
  height:30px; width:auto; min-width:0; padding:0 13px; border-radius:var(--sk-r-sm);
  font-size:var(--fs-3); border:1px solid rgba(255,255,255,.26); background:transparent; color:#fff;
  box-shadow:none;
}
.head-actions .btn.btn-hd:hover{ background:rgba(255,255,255,.14); color:#fff; transform:none; box-shadow:none; }
.head-actions .btn.btn-hd.btn-pdf{ background:var(--primary); border-color:transparent; }
.head-actions .btn.btn-hd.btn-pdf:hover{ background:var(--primary-press); }
.head-actions .btn.btn-hd.btn-sales{ background:#f7941e; border-color:transparent; }
.head-actions .btn.btn-hd.btn-sales:hover{ background:#e0850f; }
.head-actions .btn.btn-hd#uploadBtn{ background:transparent; color:#fff; }

/* ---------- 아이콘 레일 ---------- */
.rail-ws{
  width:38px; height:38px; border-radius:var(--radius-md); background:#fff; color:var(--sk-shell);
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-5); margin-bottom:10px; flex:none;
}
.rail .tab-btn.rail-b{
  width:52px; padding:7px 0 5px; border-radius:var(--radius-md); border:0; background:none;
  color:rgba(255,255,255,.72); display:flex; flex-direction:column; align-items:center; gap:var(--sp-1);
  font-family:inherit; cursor:pointer; position:relative; flex:none; text-align:center;
}
.rail .tab-btn.rail-b .tb-ic svg{ width:20px; height:20px; }
.rail .tab-btn.rail-b .tb-tx{ font-size:var(--fs-1); font-weight:700; }
.rail .tab-btn.rail-b:hover{ background:var(--sk-shell-2); color:#fff; }
.rail .tab-btn.rail-b.active{ background:rgba(255,255,255,.17); color:#fff; box-shadow:none; }
.rail-badge{
  position:absolute; top:2px; right:6px; background:#e01e5a; color:#fff;
  font-size:var(--fs-1); font-weight:800; padding:0 5px; border-radius:var(--radius-full); line-height:1.5;
}
.rail-sp{ flex:1; }
.rail-ic{
  width:34px; height:34px; border-radius:var(--radius-md); border:0; background:none; cursor:pointer;
  color:rgba(255,255,255,.72); display:grid; place-items:center; margin-bottom:8px; flex:none;
}
.rail-ic svg{ width:17px; height:17px; }
.rail-ic:hover{ background:var(--sk-shell-2); color:#fff; }
.rail-ic.spin svg{ animation:railspin .55s cubic-bezier(.4,0,.2,1); }
@keyframes railspin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
html.no-motion .rail-ic.spin svg{ animation:none; }

/* 사용자 칩 — 레일 맨 아래 아바타만 */
.rail .user-wrap{ display:block !important; position:relative; flex:none; }
.rail .user-chip{
  width:38px !important; min-width:38px !important; height:38px !important; padding:0 !important;
  border-radius:var(--radius-md) !important; justify-content:center !important;
  border:2px solid rgba(255,255,255,.26) !important; background:var(--primary) !important;
  box-shadow:none !important;
}
.rail .user-chip .u-txt, .rail .user-chip .u-out{ display:none !important; }
.rail .user-chip .u-ini{
  display:grid !important; place-items:center; width:100%; height:100%;
  font-size:var(--fs-4) !important; font-weight:800; color:#fff !important;
}
.rail .user-chip:hover{ border-color:rgba(255,255,255,.55) !important; }
.rail .user-menu{ left:calc(100% + 8px); right:auto; bottom:0; top:auto; }

/* ---------- 사이드바 ---------- */
aside .side-hd{
  flex:none; height:50px; display:flex; align-items:center; gap:var(--sp-2); padding:0 8px 0 14px;
  border-bottom:1px solid var(--sk-side-line);
}
aside .side-hd .ws{
  flex:1; min-width:0; font-size:var(--fs-5); font-weight:800; color:#3e5288;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
aside .side-ic{
  width:28px; height:28px; border-radius:var(--sk-r-sm); border:0; background:none; cursor:pointer;
  color:#5a6273; display:grid; place-items:center; flex:none;
}
aside .side-ic svg{ width:16px; height:16px; }
aside .side-ic:hover{ background:var(--sk-side-hover); color:#3e5288; }

#sideTabs{
  background:transparent !important; box-shadow:none !important;
  padding:8px 8px 4px !important; border-radius:0 !important; flex:none;
}
/* 98차 — #sideTabs 전용 규칙은 전부 지웠다. 패널 항목의 표현은 이 파일 맨 뒤 .nav-i 하나뿐이다. */
#sideTabs .tab-badge{ background:#e01e5a; }

aside > .filter-block, aside > .side-grp, aside > .side-foot{ flex:none; }
aside .side-grp{
  padding:10px 14px 4px !important; color:#6b7490 !important;
  font-size:var(--fs-2); font-weight:800; background:transparent !important;
}
.filter-block.tree{ background:transparent !important; border:0 !important; margin:0 !important; padding:0 6px !important; }
.tree-hd{
  background:transparent !important; color:#6b7490 !important; font-size:var(--fs-2) !important;
  font-weight:800 !important; padding:9px 8px 4px !important; border-radius:var(--sk-r-sm);
}
.tree-hd:hover{ background:var(--sk-side-hover) !important; color:#3e5288 !important; transform:none !important; box-shadow:none !important; }
.tree-hd .cur{ color:var(--primary) !important; font-weight:800; }
.tree-inner{ padding:0 2px 6px !important; }

/* 필터 알약 — 시안 모양(흰 배경 + 얇은 테두리 + 4px 라운드)을 쓰되 폭은 격자를 꽉 채운다.
   `aside .pill`(0,1,1)이 앞 차수에 있어 같은 특이도로 맞춰야 한다. */
aside .pill, .pill{
  background:#fff !important;
  border-width:1px !important; border-style:solid !important; border-color:var(--sk-side-line) !important;
  color:var(--sk-side-tx) !important; border-radius:var(--sk-pill) !important;
  font-size:var(--fs-3) !important; font-weight:500 !important;
  padding:5px 8px !important; text-align:center; box-shadow:none !important;
}
aside .pill:hover, .pill:hover{ border-color:#d5ddee !important; background:#fff !important; transform:none !important; }
aside .pill.active, .pill.active{
  background:var(--primary) !important; border-color:transparent !important;
  color:#fff !important; font-weight:800 !important; box-shadow:none !important;
}
.pill-grid{ gap:var(--sp-1) !important; }
.pill-group{ gap:var(--sp-1) !important; }

.side-foot{ margin-top:auto; padding:8px 10px 10px !important; border-top:1px solid var(--sk-side-line); }
.side-foot .user-wrap{ display:none !important; }   /* 사용자 칩은 레일로 갔다 */

/* ---------- 본문 : 평평한 카드 ---------- */
/* border 축약형에 var() 를 쓰면 토큰이 하나라도 비었을 때 선언 전체가 날아간다(86차 사고).
   테두리는 롱핸드로 쪼개 둔다. */
main .card, .stats-card, .weekly-card, .checklist-card{
  border-radius:var(--sk-r) !important;
  border-width:1px !important; border-style:solid !important; border-color:var(--line) !important;
  box-shadow:none !important; background:#fff !important;
}
main .card:hover, .stats-card:hover, .weekly-card:hover, .checklist-card:hover{ box-shadow:none !important; }
.stats-strip .strip-item{ border-radius:var(--sk-r); border-width:1px; box-shadow:none; }
.stats-strip .strip-item.total{ border-width:1px; border-color:var(--primary); }
.fc-metrics{ border-radius:var(--sk-r); }
main table thead th{ background:transparent !important; }
.tag, .stage-pill, .strip-tag, .etc-mark{ border-radius:var(--sk-pill) !important; }
.mini-tabs{ border-radius:var(--sk-r-sm); }
.mini-tab{ border-radius:var(--sk-pill); }
.btn{ box-shadow:none !important; }
main .btn:hover{ transform:none !important; }

/* 이 두 구역은 현행 디자인을 그대로 둔다 */
.forecast-band, .forecast-band *, .rep-achieve-card .rp-detail,
.weekly-card .presenter-head, .presenter-head *{ border-radius:inherit; }

@media (max-height:1200px){
  .app{ grid-template-columns:64px 232px minmax(0,1fr); grid-template-rows:42px minmax(0,1fr); }
  header{ height:42px; }
  main{ padding:11px 14px 18px !important; }
  .rail .tab-btn.rail-b{ width:48px; padding:6px 0 4px; }
}

/* ============================================================
   86차 — 시안 v2 와 어긋난 부분 교정 (창섭 #수정 · #긴급수정)

   85차 블록이 정의되지 않은 --line / --line-soft 토큰을 그대로 썼다.
   var() 가 무효가 되면 선언 전체가 초기값으로 되돌아가 카드·드롭다운 테두리가 전부 사라졌다. 토큰부터 정의한다.
   ============================================================ */
:root{
  --line:#e3e7ef;        /* 시안 v2 — 카드/표 구분선 */
  /* 89차 — 오버진 전환 때 세 토큰이 같은 값으로 뭉쳤다.
     행 구분선 · 합계행 면 · 브랜드 틴트를 한 단계씩 벌려 각각 따로 조정할 수 있게 한다(84차 토큰 규칙). */
  --line-soft:#e6e9ef;   /* 표 행 구분선 — 가장 진함. 91차에 붉은기를 뺐다 */
  --sk-bg2:#f5f7fa;      /* 합계행 등 옅은 면 — 가장 옅음 */
}

/* ---------- ① 검색 바 : 상단바 정중앙 ----------
   플렉스 margin:auto 는 오른쪽 액션 폭만큼 밀려 위치가 어긋난다. 화면 기준 정중앙은 흐름에서 빼내야 한다. */
header{ position:relative; }
.hd-search{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; flex:none; width:min(520px, 36vw); min-width:210px; max-width:none;
}
@media (max-width:1180px){ .hd-search{ width:min(340px, 28vw); } }

/* ---------- ② 본문 카드 테두리 복구 ----------
   .card 계열은 토큰만 살아나면 그대로 동작한다.
   통계 상단 3장(.strip-item)만 앞 차수의 `border:0 !important` 에 눌려 있어 특이도를 올려 다시 세운다. */
.stats-strip .strip-item{
  border-width:1px !important; border-style:solid !important; border-color:var(--line) !important;
}
.stats-strip .strip-item.total{ border-color:var(--primary) !important; }

/* ---------- ③ 대시보드 예상매출 카드가 사라져 보이던 문제 ----------
   85차의 `main .card{ background:#fff !important }` 가 다크 인디고 히어로 카드까지 흰색으로 덮어써 흰 글씨가 안 보였다. */
main .card.kpi-highlight{
  background:var(--secondary) !important; border-color:transparent !important;
}

/* ---------- ④ 진도~추가발굴 밴드 : 직각 한 덩어리 → 카드 4장 ---------- */
.fc-metrics{
  background:transparent !important; border:0 !important;
  border-radius:0 !important; overflow:visible !important; gap:var(--sp-4) !important;
}
.fc-metric{
  border-width:1px !important; border-style:solid !important; border-color:var(--line) !important;
  border-radius:var(--sk-r) !important; background:#fff !important;
}

/* ---------- ⑤ 당월 완료 예정 탭 : 시안의 .ptab 처럼 슬림하게 ---------- */
.pipeline-tab-header{
  border-bottom:0 !important; padding:0 !important; margin:0 0 9px !important;
}
.pipeline-tabs{ gap:var(--sp-1) !important; }
.pipeline-tab-btn{
  padding:6px 12px !important; font-size:var(--fs-3) !important; font-weight:700;
  border-radius:var(--sk-r-sm) !important; color:var(--muted) !important;
}
.pipeline-tab-btn:hover{ background:var(--sk-bg2) !important; }
.pipeline-tab-btn.active{
  background:var(--primary) !important; color:#fff !important;
  border-radius:var(--sk-r-sm) !important;
}
.pipeline-tab-btn .count{
  padding:0 6px !important; font-size:var(--fs-1) !important; line-height:1.65;
  background:var(--line-soft) !important; color:var(--muted) !important;
}
.pipeline-tab-btn.active .count{
  background:rgba(255,255,255,.24) !important; color:#fff !important;
}

/* ---------- ⑥ 표 : 시안의 결 ----------
   헤더 행은 옅은 면 대신 카드와 같은 흰 바탕 + 얇은 밑줄, 합계 행만 옅은 회색으로 눌러 준다. */
main table thead th{
  background:#fff !important; color:var(--muted) !important;
  font-weight:700 !important; border-bottom:1px solid var(--line) !important;
}
main table tbody td{ border-bottom:1px solid var(--line-soft) !important; }
main .total-row td{
  background:var(--sk-bg2) !important; color:var(--text) !important;
  border-top:1px solid var(--line) !important; border-bottom:0 !important;
}

/* ============================================================
   87차 — 마무리 정리
   ============================================================ */

/* ---------- ① 검색 결과가 본문에 가리던 문제 ----------
   표 헤더가 sticky(z-index:2)라 상단바보다 위 층에 뜬다. 상단바 자체를 본문보다 위로 올린다. */
header{ z-index:80; }
.hd-search-res{ z-index:1000; }

/* ---------- ② 사용자 메뉴가 잘리던 문제 ----------
   레일의 overflow:hidden 이 오른쪽으로 열리는 메뉴를 잘라내고 있었다. */
.rail{ overflow:visible !important; position:relative; z-index:70; }
.rail .user-menu{ z-index:1000; }

/* ---------- ③ 통계 표 색을 주간보고 표와 맞춘다 ----------
   `.stats-table-wrap table th`(클래스 1개)가 `main table thead th`(요소 4개)를 특이도로 이긴다. 같은 결로 다시 쓴다. */
.stats-table-wrap table thead th{
  background:#fff !important; color:var(--muted) !important;
  font-weight:700 !important; border-bottom:1px solid var(--line) !important;
}
.stats-table-wrap table tbody td{ border-bottom:1px solid var(--line-soft) !important; }

/* ---------- ④ 전망 밴드 : 다시 한 덩어리로, 모서리 곡률은 유지 ---------- */
.fc-metrics{
  background:#fff !important; gap:0 !important; overflow:hidden !important;
  border-width:1px !important; border-style:solid !important; border-color:var(--line) !important;
  border-radius:var(--sk-r) !important;
}
.fc-metric{
  background:transparent !important; border-radius:0 !important;
  border-width:0 0 0 1px !important; border-style:solid !important; border-color:var(--line) !important;
}
.fc-metric:first-child{ border-left-width:0 !important; }

/* ============================================================
   88차 — Slack 퍼플(오버진) 워크스페이스 (창섭 #전달)

   레일을 사업부 전체 화면으로 넓히고, 화면 탭은 사이드바에서 본문 상단으로 옮긴다.
   오버진 단일 프라이머리 색으로 통일하며, 82~84차 규칙(굵기 700/800 · 토큰 크기 · 롱핸드 테두리)을 유지한다.
   ============================================================ */

/* ---------- ① 레일 : 6개 화면 ---------- */
.rail-ws{ background:#3f5490; color:#fff; }
.rail .tab-btn.rail-b{ width:60px; padding:6px 0 4px; }
.rail .tab-btn.rail-b .tb-tx{ letter-spacing:-.03em; }
.rail-badge{ background:#cc4117; }

/* ---------- ③ 사이드바 : 밝은 라벤더 (첨부2) ---------- */
aside .side-hd .ws{ color:var(--primary); }
aside .side-ic{ color:var(--primary); }
aside .side-ic:hover{ background:var(--sk-side-hover); color:var(--primary); }
aside .side-grp{ color:var(--muted) !important; }
.tree-hd{
  color:var(--sk-side-tx) !important; font-size:var(--fs-4) !important;
  font-weight:700 !important; padding:0 6px !important; height:30px;
  display:flex; align-items:center; gap:var(--sp-2);
}
.tree-hd:hover{ background:var(--sk-side-hover) !important; color:var(--primary) !important; }
.tree-hd .cur{
  background:var(--primary-light); border-radius:var(--sk-r-sm);
  padding:2px 8px; font-size:var(--fs-2) !important;
}

/* ---------- ④ 조회 조건 버튼 : 34px · 흰 카드 · 격자 ---------- */
aside .pill, .pill{
  min-height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--sk-r) !important;
  font-size:var(--fs-4) !important; font-weight:700 !important;
  padding:5px 6px !important; line-height:1.2;
}
aside .pill:hover, .pill:hover{ border-color:var(--primary-press) !important; color:var(--primary) !important; }
/* 선택 상태 굵기는 85차 그대로 800 — 위 `.pill` 규칙(700)이 뒤에 오므로 여기서 다시 못박는다. */
aside .pill.active, .pill.active{ font-weight:800 !important; }
.pill-grid{ gap:var(--sp-2) !important; }
.pill-group{ gap:var(--sp-2) !important; }
#yearGroup{ grid-template-columns:repeat(3, 1fr) !important; }
#weekGroup{ grid-template-columns:1fr !important; }
#repGroup{ grid-template-columns:1fr 1fr !important; }
#gubunGroup{ grid-template-columns:repeat(3, 1fr) !important; }
#gubunGroup .pill[data-value="all"]{ grid-column:1 / -1; }
.reset-link{ color:var(--muted) !important; }
.reset-link:hover{ color:var(--primary) !important; }

/* ---------- ⑤ 본문 상단 : 화면 탭 + 페이지 바 ---------- */
/* 탭이 사이드바에서 본문으로 내려왔다. main 이 스크롤 컨테이너라 sticky 로 붙인다. */
#mainTabs{
  position:sticky; top:-14px; z-index:6;
  margin:-14px -18px 14px; padding:0 18px;
  height:40px; display:flex; align-items:stretch; gap:var(--sp-1); background:#fff;
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line);
}
#mainTabs .tab-btn{
  width:auto !important; flex:none; padding:0 12px !important;
  border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  color:var(--muted) !important; font-size:var(--fs-4) !important; font-weight:700;
  border-bottom-width:2px; border-bottom-style:solid; border-bottom-color:transparent;
}
#mainTabs .tab-btn:hover{ background:var(--row-hover) !important; color:var(--text) !important; }
#mainTabs .tab-btn.active{
  color:var(--primary) !important; font-weight:800 !important;
  background:transparent !important; border-bottom-color:var(--primary);
}
#mainTabs .tab-btn.active::before{ display:none !important; }
#mainTabs .tab-btn .tb-ic svg{ width:15px; height:15px; }

#pageBar{ display:flex; align-items:flex-start; gap:var(--sp-5); margin:0 0 14px; }
#pageBar .page-title{ flex:1; min-width:0; }
#pageBar .page-title h1{
  margin:0 0 4px; font-size:var(--fs-8); font-weight:800; letter-spacing:-.02em; color:var(--text);
}
#pageBar .page-title p{ margin:0; font-size:var(--fs-4); color:var(--muted); line-height:1.5; }
#pageBar .head-actions{ margin-left:auto; flex:none; padding-top:3px; }

/* 헤더에 있던 버튼들이 흰 본문으로 내려왔으므로 밝은 배경용으로 다시 칠한다.
   (85차 규칙이 `.head-actions .btn.btn-hd` 로 흰 테두리를 주고 있어 같은 특이도로 덮는다) */
.head-actions .btn.btn-hd{
  height:36px; padding:0 20px; border-radius:var(--radius-full);
  border-width:2px; border-style:solid; border-color:var(--primary);
  background:#fff; color:var(--primary);
  font-size:var(--fs-4); font-weight:700; box-shadow:none;
}
.head-actions .btn.btn-hd:hover{ background:var(--primary-light); color:var(--primary); }
.head-actions .btn.btn-hd.btn-pdf{
  background:var(--primary-light); color:var(--text); border-color:transparent;
}
.head-actions .btn.btn-hd.btn-pdf:hover{ background:#e3e9f6; color:var(--text); }
.head-actions .btn.btn-hd.btn-sales{
  background:var(--primary); color:#fff; border-color:transparent;
}
.head-actions .btn.btn-hd.btn-sales:hover{ background:var(--primary-press); color:#fff; }
.head-actions .btn.btn-hd#uploadBtn{
  background:var(--primary); color:#fff; border-color:transparent;
}
.head-actions .btn.btn-hd#uploadBtn:hover{ background:var(--primary-press); color:#fff; }
.head-actions #nasBox .btn.btn-sm{ height:30px; border-width:0; color:#fff; }

/* ---------- ⑥ 준비 중 화면 (홈 · 대시보드 · 문서 · 더 보기) ---------- */
.place-page{ display:none; }
.place-wrap{
  min-height:56vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:0;
}
.place-ic{
  width:56px; height:56px; border-radius:var(--radius-xl);
  background:var(--primary-light); color:var(--primary);
  display:grid; place-items:center; margin:0 0 16px;
}
.place-ic svg{ width:26px; height:26px; }
.place-t{ font-size:var(--fs-7); font-weight:800; margin:0 0 8px; color:var(--text); }
.place-d{ font-size:var(--fs-4); color:var(--muted); margin:0; line-height:1.8; }
.place-chips{ display:flex; gap:var(--sp-2); margin-top:16px; flex-wrap:wrap; justify-content:center; }
.place-chips span{
  font-size:var(--fs-2); font-weight:700; color:var(--primary);
  background:var(--primary-light); border-radius:var(--radius-full); padding:5px 12px;
}

/* ============================================================
   90차 ①단계 — 시안 v1 정합 : 셸 · 패널 · 버튼

   본문 탭 줄이 sticky 상태에서 눌리지 않게 고정하고, 사이드바를 시안 v1 의 진한 오버진으로 되돌린다.
   셸 치수(레일 72 · 패널 268 · 상단바 44)를 시안에 맞추고, 페이지 바 버튼을 채움/연한 채움/테두리 세 갈래로 나눈다.
   ============================================================ */

/* ---- ① 화면 탭 줄이 눌리지 않게 ---- */
#mainTabs{ flex:none; }

/* ---- ③ 셸 치수 ---- */
.app{ grid-template-columns:72px 268px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr); }
header{ height:44px; }
@media (max-height:1200px){
  .app{ grid-template-columns:72px 268px minmax(0,1fr); grid-template-rows:44px minmax(0,1fr); }
  header{ height:44px; }
  .rail .tab-btn.rail-b{ width:56px; }
}
.rail .tab-btn.rail-b{ width:56px; }

/* ---- ② 사이드바 : 진한 오버진 ---- */
aside{
  background:var(--sk-shell-2) !important;
  border-right-width:0 !important;
  border-radius:var(--radius-md) 0 0 var(--radius-md);
}
aside .side-hd{ border-bottom-color:rgba(255,255,255,.13); }
aside .side-hd .ws{ color:#fff; }
aside .side-ic{ color:var(--secondary-light); }
aside .side-ic:hover{ background:rgba(255,255,255,.10); color:#fff; }
aside .side-grp{ color:var(--secondary-light) !important; }


.tree-hd{ color:var(--secondary-light) !important; }
.tree-hd:hover{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
.tree-hd .cur{
  background:rgba(255,255,255,.14) !important; color:#fff !important;
  border-radius:var(--radius-sm) !important;
}

/* 필터 알약 — 진한 배경 위에서는 반투명 흰색, 선택된 것만 흰 알약 */
aside .pill{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:var(--secondary-light) !important;
}
aside .pill:hover{ background:rgba(255,255,255,.17) !important; border-color:rgba(255,255,255,.30) !important; }
aside .pill.active{
  background:#fff !important; border-color:#fff !important;
  color:var(--primary) !important; font-weight:800 !important;
}
aside .reset-link, .side-foot .reset-link{ color:var(--secondary-light) !important; }
aside .reset-link:hover{ color:#fff !important; }
.side-foot{ border-top-color:rgba(255,255,255,.13); }

/* ---- ④ 페이지 바 버튼 ---- */
#pageBar .head-actions .btn.btn-hd{
  height:36px; padding:0 18px; border-radius:var(--radius-full);
  font-size:var(--fs-4); font-weight:700; letter-spacing:.2px;
}
#pageBar .head-actions .btn.btn-hd#uploadBtn{
  background:var(--primary) !important; color:#fff !important;
  border-width:0 !important; border-style:solid !important; border-color:transparent !important;
}
#pageBar .head-actions .btn.btn-hd#uploadBtn:hover{ background:var(--primary-press) !important; }
#pageBar .head-actions .btn.btn-hd.btn-sales{
  background:var(--primary-light) !important; color:var(--primary) !important;
  border-width:0 !important; border-style:solid !important; border-color:transparent !important;
}
#pageBar .head-actions .btn.btn-hd.btn-sales:hover{ background:#e3e9f6 !important; }
#pageBar .head-actions .btn.btn-hd.btn-pdf{
  background:#fff !important; color:var(--primary) !important;
  border-width:2px !important; border-style:solid !important; border-color:var(--primary) !important;
}
#pageBar .head-actions .btn.btn-hd.btn-pdf:hover{ background:var(--primary-light) !important; }

/* ============================================================
   90차 ②단계 — 패널 다듬기 · 본문 모서리

   패널 화면 목록 색을 진한 배경에 맞게 다시 잡고(06-overrides 의 밝은 배경 규칙을 눌러야 한다),
   연도·주차 머리글을 드롭다운 상자로 만들고, 담당자 알약을 한 줄 셋으로, 본문 왼쪽 위 모서리를 둥글게 한다.
   ============================================================ */

/* ---- ① 패널 화면 목록 ---- */
/* 98차 — 패널 항목의 선택 표현은 이 파일 맨 뒤 98차 블록의 .nav-i 하나로 모았다.
   레일마다 따로 적던 규칙은 지웠다. */

/* ---- ② 연도 · 주차 : 드롭다운 모양 머리글 ---- */
aside .filter-block.tree.as-select{ padding:0 10px 10px !important; }
aside .as-select .tree-hd{
  width:100%; height:32px; padding:0 10px !important;
  background:rgba(255,255,255,.10) !important;
  border-width:1px !important; border-style:solid !important; border-color:rgba(255,255,255,.18) !important;
  border-radius:var(--radius-sm) !important;
  color:#fff !important; font-size:var(--fs-3) !important; font-weight:700 !important;
}
aside .as-select .tree-hd:hover{ background:rgba(255,255,255,.17) !important; }
aside .as-select .tree-hd .tl{ opacity:.72; font-weight:500; }
aside .as-select .tree-hd .cur{
  background:transparent !important; color:#fff !important; font-weight:700 !important;
  padding:0 !important; max-width:none;
}
aside .as-select .tree-hd .car{ transform:rotate(90deg); opacity:.8; }
aside .as-select.open .tree-hd .car{ transform:rotate(270deg); }
aside .as-select .tree-inner{ padding:6px 0 0 !important; }

/* ---- ③ 담당자 알약 세 칸 ---- */
aside .pill-grid.cols3 .pill{ padding:5px 4px !important; }

/* ---- ④ 본문 왼쪽 위 모서리 ---- */
main{ border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 0; }
#mainTabs{ border-top-left-radius:var(--radius-md); border-top-right-radius:var(--radius-md); }

/* 90차 보정 — 06-overrides 에 칸 수가 아이디로 박혀 있어 여기서 다시 잡는다.
   담당자는 셋씩, 드롭다운 안의 목록은 한 줄에 하나씩 세운다. */
aside #repGroup{ grid-template-columns:repeat(3,1fr) !important; }
aside .as-select .pill-grid, aside .as-select .pill-group{ grid-template-columns:1fr !important; }

/* ============================================================
   90차 ③단계 — 표를 시안 v1 결로

   담는 값은 그대로 두고 보이는 방식만 바꾼다 — 행 구분선을 옅게, 색을 중립 회색으로,
   달성률은 숫자만 배지로(마크업은 04-render), 선택한 달 강조는 연보라로, 첫 칸 보라 배경은 걷어낸다.
   ============================================================ */
:root{
  --tbl-zero:#b9becb;
}
main table thead th{ color:#696969; border-bottom-color:var(--border) !important; }
main table tbody tr{
  border-bottom-width:1px !important; border-bottom-style:solid !important;
  border-bottom-color:var(--line-soft) !important;
}
main table tbody tr:last-child{ border-bottom-width:0 !important; }
main table tbody tr:hover{ background:var(--sk-bg2); }

/* ③ 달성률 배지 */
main table td .rate{
  display:inline-block; padding:2px 7px; border-radius:var(--radius-sm);
  font-size:var(--fs-2); font-weight:800; line-height:1.5;
}
main table td .rate.pct-good{ background:#e6f3ef; color:var(--rate-100); }
main table td .rate.pct-mid{ background:#fdf5e2; color:var(--rate-60); }
main table td .rate.pct-bad{ background:#fdece6; color:var(--rate-0); }
main table td .rate.zero{ background:transparent; color:var(--tbl-zero); font-weight:500; }
table.cross-table td.pct-good, table.cross-table td.pct-mid, table.cross-table td.pct-bad{
  background:transparent !important;
}

/* ④ 선택한 달 세로줄 */
table.cross-table td.cur-month, table.cross-table th.cur-month{
  box-shadow:inset 0 0 0 999px rgba(76,100,166,.05) !important;
}

/* ⑤ 첫 칸 */
table.cross-table tbody td:first-child{
  background:transparent !important; color:var(--text) !important; font-weight:700 !important;
}
table.cross-table tbody td:first-child .bd-toggle,
table.cross-table tbody td:first-child .bd-more{ color:var(--primary) !important; }
table.cross-table td.zero{ color:var(--tbl-zero) !important; }

/* 90차 보정 — 매출액·매출이익 첫 칸의 보라 배경을 걷는다. 06-overrides 규칙이 더 구체적이라
   같은 모양으로 한 번 더 적어야 이긴다. 중요한 줄 표시는 왼쪽 세로 막대로 충분하다. */
table.cross-table tr.row-highlight td:first-child,
table.cross-table tr.row-highlight.row-profit td:first-child{
  background:transparent !important; color:var(--text) !important;
}

/* ============================================================
   90차 ④단계 — 글꼴 · 레일 · 패널 · 표 테두리 · 액션 버튼

   표 머리행 글꼴을 본문과 맞추고, 레일 선택 표시는 아이콘 칸에만, 61차 잔재인 왼쪽 세로 막대는 지운다.
   조회 조건 알약을 얇게 하고 묶음 사이 구분선을 넣으며, 표에 테두리·둥근 모서리를, 설명용 알약은 글자로만 남긴다.
   ============================================================ */

/* ---- ① 표 머리행 글꼴 ---- */
main thead th, main table thead th{
  font-family:inherit !important; text-transform:none !important; letter-spacing:0 !important;
}

/* ---- ② 레일 : 아이콘에만 선택 표시 ---- */
.rail .tab-btn.rail-b{ background:transparent !important; box-shadow:none !important; }
.rail .tab-btn.rail-b .tb-ic{
  width:38px; height:32px; border-radius:var(--radius-md);
  display:grid; place-items:center; transition:background .12s linear;
}
.rail .tab-btn.rail-b:hover .tb-ic{ background:rgba(255,255,255,.10); }
.rail .tab-btn.rail-b.active .tb-ic{ background:rgba(255,255,255,.22); }
.rail .tab-btn.rail-b.active{ color:#fff !important; }

/* ---- ③ 왼쪽 세로 막대 제거 ---- */
.rail .tab-btn.active::before{
  display:none !important; content:none !important;
}

/* ---- ④ 조회 조건 알약 슬림 ---- */
aside .pill{
  min-height:26px !important; padding:4px 8px !important;
  border-radius:var(--radius-sm) !important;
  font-size:var(--fs-2) !important; font-weight:700 !important; line-height:1.6 !important;
}
aside .pill[data-value="all"]{ padding:4px 10px !important; font-size:var(--fs-2) !important; }
aside .pill-grid, aside .pill-group{ gap:var(--sp-1) !important; }

/* ---- ⑤ 조회 조건 구분선 ---- */
aside .filter-block.tree{
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgba(255,255,255,.10);
  padding-bottom:8px !important; margin-bottom:8px !important;
}
aside .filter-block.tree:last-of-type{ border-bottom-width:0; }

/* ---- ⑥ 표 테두리 ---- */
/* 넘침을 hidden 으로 막으면 표가 칸을 억지로 줄여 글자가 잘린다.
   auto 로 두면 가로로 밀어 볼 수 있으면서 둥근 모서리도 그대로 살아난다. */
#monthlyTableWrap .table-scroll,
.rep-table-wrap, .stats-table-wrap,
.weekly-card .pipeline-tab-panel, .checklist-card .pipeline-tab-panel{
  border-width:1px !important; border-style:solid !important; border-color:var(--line-soft) !important;
  border-radius:var(--sk-r) !important; overflow-x:auto; overflow-y:hidden;
}
.weekly-card .pipeline-tab-header{ margin-bottom:12px; border-bottom-width:0 !important; }
main table tbody tr{ border-bottom-color:var(--line-soft) !important; }

/* ---- ⑦ 설명용 알약을 글자로 ---- */
/* 카드 제목 옆의 설명만 벗긴다. 탭 위의 건수 배지는 알약을 유지해야 하므로 건드리지 않는다. */
main h3 .count, main h4 .count, main h3 .rpd-count, main h4 .rpd-count{
  background:transparent !important; border-width:0 !important; box-shadow:none !important;
  color:var(--muted) !important; font-weight:500 !important; padding:0 !important;
}

/* ---- ⑧ 연도 · 월 · 주차 : 떠 있는 선택 목록 ---- */
aside .filter-block.tree.as-select{ position:relative; overflow:visible; }
aside .as-select .tree-body{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
  background:#fff; border-radius:var(--sk-r);
  border-width:1px; border-style:solid; border-color:var(--line);
  box-shadow:0 12px 30px rgba(20,30,55,.34);
  max-height:0; overflow:hidden;
}
aside .as-select.open .tree-body{ max-height:290px; overflow-y:auto; }
aside .as-select .tree-inner{ padding:5px !important; }
aside .as-select .pill{
  background:transparent !important; border-color:transparent !important;
  color:var(--text) !important; text-align:left !important;
  justify-content:flex-start !important;
  padding:6px 9px !important; font-weight:500 !important; font-size:var(--fs-3) !important;
}
aside .as-select .pill:hover{ background:var(--primary-light) !important; border-color:transparent !important; }
aside .as-select .pill.active{
  background:var(--primary-light) !important; color:var(--primary) !important;
  border-color:transparent !important; font-weight:800 !important;
}

/* ---- ⑨ 레일 '더 보기' 팝업 ---- */
.rail-more{ position:relative; flex:none; display:flex; flex-direction:column; align-items:center; }
.rail-pop{
  position:absolute; left:calc(100% + 8px); bottom:-6px; z-index:80; min-width:236px;
  background:#fff; border-radius:var(--sk-r); padding:8px;
  border-width:1px; border-style:solid; border-color:var(--line);
  box-shadow:0 14px 36px rgba(20,30,55,.30);
  opacity:0; visibility:hidden; transform:translateX(-4px);
  transition:opacity .12s linear, transform .12s linear, visibility .12s linear;
}
.rail-more:hover .rail-pop, .rail-more:focus-within .rail-pop{
  opacity:1; visibility:visible; transform:translateX(0);
}
.rail-pop-h{ padding:4px 8px 8px; font-size:var(--fs-2); font-weight:800; color:var(--muted); }
.rail-pop-item{
  display:flex; align-items:center; gap:var(--sp-4); padding:8px; border-radius:var(--sk-r-sm);
  color:var(--text); text-decoration:none;
}
.rail-pop-item:hover{ background:var(--primary-light); }
.rail-pop-item .rp-ic{
  width:34px; height:34px; border-radius:var(--sk-r-sm); flex:none; display:grid; place-items:center;
  background:var(--primary-light); color:var(--primary);
}
.rail-pop-item .rp-ic svg{ width:17px; height:17px; }
.rail-pop-item .rp-tx{ display:flex; flex-direction:column; }
.rail-pop-item .rp-tx b{ font-size:var(--fs-4); font-weight:800; }
.rail-pop-item .rp-tx small{ font-size:var(--fs-2); color:var(--muted); }

/* ---- ⑩ 페이지 바 버튼 아이콘 ---- */
#pageBar .head-actions .btn.btn-hd{ display:inline-flex; align-items:center; gap:7px; }
#pageBar .head-actions .btn.btn-hd svg{ width:14px; height:14px; flex:none; }

/* 90차 보정 — 주간보고 파이프라인 표에서 금액이 잘려 보이던 것.
   금액은 줄이면 읽을 수 없으므로 줄바꿈을 막고, 대신 글자 칸이 양보하게 둔다. */
.weekly-card .pipeline-tab-panel td.num, .weekly-card .pipeline-tab-panel th.num{ white-space:nowrap; }
.weekly-card .pipeline-tab-panel td, .weekly-card .pipeline-tab-panel th{ padding-left:9px; padding-right:9px; }
/* 칸이 아홉이라 820px 안에 다 우겨넣으면 금액이 잘린다.
   표에 최소 폭을 주어 좁을 때는 가로로 밀어 보게 한다. 숫자를 자르는 것보다 낫다. */
.weekly-card .pipeline-tab-panel table{ min-width:900px; }

/* ============================================================
   91차 — Kind of Blue 테마 · 패널 · 표

   색 치환은 앞 파일에서 끝냈고 여기서는 셸·패널만 다시 잡는다. 패널을 밝은 회색으로 되돌리며
   진한 배경 전제 규칙을 눌러야 한다. 표는 카드 안쪽으로 들여놓고, 겹쳐 보이던 선을 한 겹 중립 회색으로 정리한다.
   ============================================================ */


/* ---- ② 패널 : 밝은 회색 ---- */
aside{
  background:var(--sk-side) !important;
  border-right-width:1px !important; border-right-style:solid !important;
  border-right-color:var(--sk-side-line) !important;
}
aside .side-hd{ border-bottom-color:var(--sk-side-line) !important; }
aside .side-hd .ws{ color:#1f2937 !important; }
aside .side-ic{ color:#5a6273 !important; }
aside .side-ic:hover{ background:var(--sk-side-hover) !important; color:#1f2937 !important; }
aside .side-grp{ color:#6b7490 !important; }


.tree-hd{ color:#6b7490 !important; }
.tree-hd:hover{ background:var(--sk-side-hover) !important; color:#1f2937 !important; }
.tree-hd .cur{ background:transparent !important; color:var(--primary) !important; }

/* 조회 조건 알약 — 밝은 패널 위에서는 흰 알약, 선택된 것만 기본색으로 채운다 */
aside .pill{
  background:#fff !important;
  border-color:var(--sk-side-line) !important;
  color:#4a5468 !important;
}
aside .pill:hover{ background:#f4f6fa !important; border-color:#b7c0d0 !important; }
aside .pill.active{
  background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important;
}
aside .reset-link, .side-foot .reset-link{ color:#5a6273 !important; }
aside .reset-link:hover{ color:#1f2937 !important; }
.side-foot{ border-top-color:var(--sk-side-line) !important; }
aside .filter-block.tree{ border-bottom-color:var(--sk-side-line) !important; }
aside .as-select .tree-body{ box-shadow:0 12px 30px rgba(20,30,55,.22); }

/* 연도 · 월 · 주차 머리글 — 90차에 진한 패널을 전제로 반투명 흰색을 썼다.
   패널이 밝아졌으므로 흰 상자에 진한 글자로 뒤집는다. 그대로 두면 글자가 배경에 묻힌다. */
aside .as-select .tree-hd{
  background:#fff !important;
  border-color:var(--sk-side-line) !important;
  color:#2f3542 !important;
}
aside .as-select .tree-hd:hover{ background:#f4f6fa !important; border-color:#b7c0d0 !important; }
aside .as-select .tree-hd .tl{ opacity:1; color:#6b7490 !important; }
aside .as-select .tree-hd .cur{ color:var(--primary) !important; }
aside .as-select .tree-hd .car{ opacity:.55; }

/* 알림 배지 — 194차(C-075) 패널 항목 배지(aside .nav-i .tab-badge)도 같은 색으로 */
.rail-badge, #sideTabs .tab-badge, aside .nav-i .tab-badge{ background:var(--sk-alert) !important; }
aside .nav-i.on .tab-badge{ background:#fff !important; color:var(--primary) !important; }

/* ---- ③ 표를 섹션 안쪽으로 ---- */
/* 표를 감싸는 칸에는 이미 테두리와 둥근 모서리가 있다(90차). 카드 여백만 돌려주면 섹션 안에 표가 들어가 앉는다.
   월별 매출 카드는 자기 여백이 따로 있어 건드리지 않는다. */
main .card.rep-achieve-card, main .card.stage-card, main .card.pipeline-card,
.stats-card, .weekly-card, .checklist-card{ padding:14px 16px !important; }

/* ---- ④ 표 안의 선 ---- */
main table thead th, .stats-table-wrap table thead th{
  border-bottom-width:1px !important; border-bottom-style:solid !important;
  border-bottom-color:var(--line-soft) !important;
}
main table tbody td, .stats-table-wrap table tbody td{
  border-bottom-width:1px !important; border-bottom-style:solid !important;
  border-bottom-color:var(--line-soft) !important;
}
/* 줄에 준 테두리는 지운다 — 칸에 준 것과 겹쳐 두 겹으로 보였다 */
main table tbody tr{ border-bottom-width:0 !important; }
main table tbody tr:last-child td{ border-bottom-width:0 !important; }
main .total-row td, main table tr.total-row td{
  border-top-width:1px !important; border-top-style:solid !important;
  border-top-color:var(--line-soft) !important;
  border-bottom-width:0 !important;
}

/* ---- ⑤ 월별 매출 표 : 세부보기 줄 ---- */
/* 회색 띠를 걷어내고 본 표와 같은 흰 바탕으로 둔다. 중요한 줄 표시는 왼쪽 세로 막대로,
   세부 줄은 들여쓰기와 옅은 글자색으로 구분해 선택한 달의 세로 강조가 끊기지 않게 한다. */
table.cross-table tr.row-highlight td,
table.cross-table tr.row-highlight td:first-child,
table.cross-table tr.row-highlight.row-profit td:first-child,
table.cross-table tr.detail-sub-row td,
table.cross-table tr.detail-sub-row td:first-child{
  background:transparent !important;
}
table.cross-table tr.row-highlight td:first-child{
  border-left-width:3px !important; border-left-style:solid !important;
  border-left-color:var(--primary) !important;
}
table.cross-table tr.detail-sub-row td{ color:var(--muted) !important; font-weight:400 !important; }
table.cross-table tr.detail-sub-row td:first-child{ padding-left:24px !important; }
table.cross-table tr.detail-sub-row td.zero{ color:var(--tbl-zero) !important; }

/* ============================================================
   93차 — 레일 배지 · 무스크롤 해제 · KPI 서식 · 카드 제목 · 경계 · 색
   앞 차수 규칙은 건드리지 않고 이 블록만 덮어쓴다. 되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- ② 레일 · 패널 · 본문이 만나는 자리 ----------
   라운드를 없애고, 슬랙 원본처럼 얇은 선 + 옅은 그림자로 경계를 만든다. */
aside{
  border-radius:0 !important;
  border-right-width:1px !important; border-right-style:solid !important;
  border-right-color:var(--sk-side-line) !important;
  box-shadow:1px 0 0 rgba(16,24,40,.04), 3px 0 10px rgba(16,24,40,.05);
}
main{
  border-radius:0 !important;
  border-left-width:1px !important; border-left-style:solid !important;
  border-left-color:#dfe3ea !important;
}

/* ---------- ③ OverView 무스크롤 규칙 해제 ----------
   화면 높이에 억지로 맞추다 보니 카드 안이 눌려 디자인이 깨졌다. 이제 카드는 내용만큼 높이를 갖고, 넘치면 본문이 통째로 스크롤된다. */
/* ⚠️ 94차 사고 — 여기서 display 를 !important 로 덮었더니 js 의 표시/숨김(08-auth.js 의
   dashboard.style.display) 이 통째로 무력화돼서, 첫 진입에 OverView 가 빈 화면으로 떴다.
   **display 는 건드리지 않는다.** 늘어나지 못하게 잡아두던 것만 푼다. */
#dashboard{ flex:none !important; }
#dashboard > *{ flex:none !important; }
.dash-kpi .card{ height:auto !important; min-height:150px; overflow:visible !important; }
.dash-mid .card{ overflow:visible !important; }
.dash-bottom #monthlyTableWrap{ max-height:none !important; }
.pipe-mirror .pipeline-tab-panel table,
.rep-achieve-card .rep-table-wrap{ flex:none !important; }
/* 개인별 달성률은 여덟 줄이라 통째로 편다. 파이프라인은 건수가 수십 개까지 가므로
   넉넉한 높이까지만 펴고 그 안에서 스크롤한다 — 안 그러면 카드 하나가 화면 몇 개 길이가 된다. */
.rep-achieve-card .rep-table-wrap{ max-height:none !important; }
.pipe-mirror tbody.scroll-y{ max-height:430px !important; }

/* ---------- ④ KPI 카드 3장 — 시안 v1 서식 ---------- */
.dash-kpi .kpi-card{ padding:16px 18px !important; }
.dash-kpi .kpi-card .eyebrow{
  display:inline-block; align-self:flex-start;
  border-radius:var(--radius-full);
  font-weight:800; letter-spacing:-.1px;
  background:var(--surface2); color:var(--muted);
}
.dash-kpi .kpi-card.kpi-highlight .eyebrow{
  background:rgba(255,255,255,.18); color:#fff;
}
.dash-kpi .kpi-card .value-row{ align-items:baseline; gap:var(--sp-3); }
.dash-kpi .kpi-card .ref{
  margin-top:8px !important; font-weight:500;
  color:var(--muted); line-height:1.6;
}
.dash-kpi .kpi-card .ref b{ font-weight:800; color:var(--text); }
.dash-kpi .kpi-card .ref.sub{ color:var(--faint); }
.dash-kpi .kpi-card.kpi-highlight .ref{ color:rgba(255,255,255,.82); }
.dash-kpi .kpi-card.kpi-highlight .ref b{ color:#fff; }
.dash-kpi .kpi-card.kpi-highlight .ref.sub{ color:rgba(255,255,255,.62); }
.dash-kpi .kpi-card.kpi-week{ justify-content:flex-start !important; }

/* ---------- ⑤ 카드 제목 — 아이콘 없이 글자만 ---------- */
.card-h{
  font-size:var(--fs-5); font-weight:800; color:var(--text); letter-spacing:-.2px;
}
.card-h .card-sub{
  margin-left:5px; font-size:var(--fs-3); font-weight:500; color:var(--muted);
}

/* ---------- ⑥ 제품 카드 두 장 — 좌우 높이를 맞추고 스크롤을 없앤다 ---------- */
.stats-card[data-mode="all"] .stats-body.stacked .chart-wrap{ height:250px !important; }
.stats-card[data-mode="all"] .stats-table-wrap{
  max-height:none !important; overflow-y:visible !important;
}
/* 영업구분 칸에 어느 색이 어느 몫인지 표시 */
.cat-sw{
  display:inline-block; width:7px; height:7px; border-radius:var(--radius-xs);
  margin-right:5px; vertical-align:middle;
}

/* ============================================================
   94차 — KPI 강조 · 목표설정 버튼 위치 · 파이프라인 높이
   ============================================================ */

/* ---------- ① 목표 설정 버튼을 섹션 우측 끝으로 ----------
   06-overrides 의 `.card h3{ justify-content:flex-start }` 때문에 제목 바로 뒤에 붙어 있었다. */
.dash-bottom .card > h3,
.rep-achieve-card > h3{ justify-content:space-between !important; }

/* ---------- ② KPI 숫자를 확실히 키운다 ---------- */
.dash-kpi .card{ min-height:172px; }
.dash-kpi .kpi-card{ padding:18px 20px !important; }
.dash-kpi .kpi-card .value{
  font-size:var(--fs-9) !important; font-weight:800; line-height:1.0; letter-spacing:-1.2px;
}
.dash-kpi .kpi-card .value small{
  font-size:var(--fs-6); font-weight:700; margin-left:2px; letter-spacing:0;
}
.dash-kpi .kpi-card .value-row{ margin-top:12px; }
.dash-kpi .kpi-card .ref-row{
  display:flex; align-items:center; gap:var(--sp-3); margin-top:12px; flex-wrap:wrap;
}
.dash-kpi .kpi-card .ref-row .ref{ margin-top:0 !important; }
.dash-kpi .kpi-card .ref{ font-size:var(--fs-4) !important; }
.dash-kpi .kpi-card .ref.sub{ font-size:var(--fs-3) !important; margin-top:4px !important; }
.dash-kpi .kpi-achieve-badge{
  font-size:var(--fs-4); font-weight:800; padding:2px 10px; line-height:1.55;
}
.dash-kpi .kpi-card .progress-bar{ margin-top:12px; height:6px; }
.dash-kpi .kpi-card .eyebrow{ font-size:var(--fs-3); padding:4px 11px; }
.dash-kpi .kpi-delta{ padding:2px 10px; }

/* ---------- ③ 파이프라인 카드 높이를 개인별 달성률과 같게 ----------
   실제 높이는 js 의 syncDashMidHeight() 가 재서 넣는다. 여기서는 그 높이 안에서
   표가 스스로 스크롤하도록 흐름만 되돌린다(93차에 무스크롤을 풀며 끊어 두었다). */
.dash-mid .pipe-mirror{ overflow:hidden !important; }
.dash-mid .pipe-mirror .pipeline-tab-panel{ flex:1 1 auto !important; min-height:0; }
.dash-mid .pipe-mirror .pipeline-tab-panel table{ flex:1 1 auto !important; min-height:0; }
.dash-mid .pipe-mirror tbody.scroll-y{ max-height:none !important; }

/* ---------- ⑤ 패널 위쪽 모서리 라운드 ----------
   93차에 경계 라운드를 전부 없앴지만, 레일과 만나는 왼쪽 위만 둥글게 하고 본문과 만나는 오른쪽은 각지게 둔다. */
aside{ border-top-left-radius:var(--radius-md) !important; overflow:hidden; }

/* ---------- ⑥ KPI 큰 숫자를 영업단계 신호등과 맞춘다 ----------
   금주 신규 등록은 초기제안 색, 금주 수주는 구매결정 색 — 표의 단계 배지와 같은 색이라 두 화면을 오갈 때 바로 읽힌다. */
#kpiRegCard .value{ color:var(--stage-60); }
#kpiOrderCard .value{ color:var(--stage-80); }
#kpiRegCard .value small,
#kpiOrderCard .value small{ color:var(--muted); }

/* ============================================================
   96차 — 패널/본문 모서리 · 탭 표시 클래스 · 버튼 색 · 카드 폭
   앞 차수 규칙은 건드리지 않고 이 블록만 덮어쓴다. 되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- ① 패널 · 본문 카드의 네 모서리 ----------
   패널과 본문은 붙어서 카드 한 장으로 읽히므로, 바깥으로 드러나는 네 귀퉁이를 모두 둥글리고
   둘이 맞닿는 가운데 이음매는 각지게 둔다. */
aside{
  border-top-left-radius:var(--radius-md) !important;
  border-bottom-left-radius:var(--radius-md) !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
main{
  border-top-right-radius:var(--radius-md) !important;
  border-bottom-right-radius:var(--radius-md) !important;
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
}

/* ---------- ② 제목을 버튼처럼 보이게 하는 표시 전용 클래스 ----------
   ⭐ 보이기만 하는 표시다. 누를 수 없고 눌러도 아무 일이 일어나지 않는다.
   당월 완료 예정 탭이 골라져 있을 때와 같은 크기·모서리·글자를 쓴다. */
.tab-look{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:6px 12px; border-radius:var(--sk-r-sm);
  font-size:var(--fs-3) !important; font-weight:700 !important;
  line-height:normal; letter-spacing:0; white-space:nowrap;
  background:var(--primary); color:#fff !important;
}
.tab-look .card-sub{ color:rgba(255,255,255,.78) !important; font-weight:500; margin-left:5px; }
.card h3 .tab-look .count,
main h3 .tab-look .count,
.tab-look .count{
  display:inline-block; min-width:20px;
  padding:0 6px !important; margin-left:1px !important;
  border-radius:var(--radius-full) !important;
  background:rgba(255,255,255,.24) !important; color:#fff !important;
  font-size:var(--fs-1) !important; font-weight:800 !important; line-height:1.65;
}
/* 개인별 달성률 카드의 머리에서 안쪽 여백을 걷어낸다. 카드 자체의 여백만 남겨야
   왼쪽 파이프라인 탭과 같은 자리에서 시작하고, 좌우 두 표의 윗변이 한 줄로 맞는다. */
.rep-achieve-card > h3{ padding:0 0 9px !important; margin:0 !important; }

/* ---------- ③ 골라진 버튼에만 색이 들어간다 ----------
   평소에는 투명하고, 골라졌을 때만 아래 색으로 채운다. 신규 등록·수주·완료·실주는 영업단계 배지 토큰을
   그대로 쓰고, 확인/정리 필요 매출과 이월만 새 토큰이다(01-tokens.css 96차). */
.pipeline-tab-btn.active[data-pipeline-tab="review"]{ background:var(--tab-review) !important; }
.pipeline-tab-btn.active[data-pipeline-tab="carry"]{ background:var(--tab-carry) !important; }
.pipeline-tab-btn.active[data-dl-tab="done"]{ background:var(--stage-done) !important; }
.pipeline-tab-btn.active[data-dl-tab="lost"]{ background:var(--stage-drop) !important; }
.tab-look.tab-reg{ background:var(--stage-60); }
.tab-look.tab-order{ background:var(--stage-80); }

/* ---------- ④ 주간보고 팀 전체 카드를 좁힌다 ----------
   FHD 폭에서 오른쪽 파이프라인 표가 뭉개졌다. 왼쪽 카드는 숫자 네 칸만 있으면 되므로
   위쪽 한계를 정해 두고 남는 폭을 표에 넘긴다. */
.weekly-top{ grid-template-columns:minmax(0,330px) minmax(0,1fr) !important; }

/* ============================================================
   96차 ② — 표 감싸는 칸(.tbl-box) · 파이프라인 표 기본 행수 · 스크롤 막대
   앞 차수 규칙은 건드리지 않고 이 블록만 덮어쓴다. 되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- ① 표를 감싸는 칸 ----------
   주간보고의 신규 등록·수주 표만 감싸는 칸이 없어 카드에 그대로 붙어 있었다.
   `.tbl-box` 를 공통 이름으로 두어 함께 규칙을 받게 한다. 새 표를 붙일 때도 이 이름만 씌우면 된다. */
.tbl-box{
  flex:1; min-height:0; display:flex; flex-direction:column;
  border-width:1px !important; border-style:solid !important; border-color:var(--line-soft) !important;
  border-radius:var(--sk-r) !important; overflow-x:auto; overflow-y:hidden;
}
.tbl-box > table{ flex:1; min-height:0; }

/* ---------- ② 파이프라인 표는 기본 아홉 줄 ----------
   그 높이가 개인별 목표 달성률(여덟 명 + 머리줄)과 맞는다. 더 많으면 표 안에서 굴린다.
   93·94차에 풀어 두었던 높이 제한을 줄 수로 다시 잡는다. */
.dash-mid .pipe-mirror tbody.scroll-y{
  max-height:calc(var(--tbl-row-h) * var(--tbl-rows)) !important;
  overflow-y:auto !important;
}

/* ---------- ③ 스크롤 막대 ----------
   본체 규칙은 03-components.css 에 있다. 여기서는 앞 차수가 굵기·색을 다시 잡아 둔 자리만 되돌린다.
   굴리는 동안에만 보이게 하는 표시는 js 가 붙인다. */
main .scroll-y::-webkit-scrollbar, aside::-webkit-scrollbar{ width:var(--sb-w); }
main .scroll-y::-webkit-scrollbar-thumb, aside::-webkit-scrollbar-thumb{
  background:transparent; border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box;
}
main .scroll-y.sb-on::-webkit-scrollbar-thumb, aside.sb-on::-webkit-scrollbar-thumb{
  background:var(--sb-thumb); background-clip:content-box;
}

/* ============================================================
   98차 — 창섭 v1.1 요구사항 V1.1-1 · 2 · 10 · 11 (2026-08-14)

   패널과 본문 상단 탭을 **셸이 통째로 소유한다.** 되돌리려면 이 블록만 지우면 된다.

   패널 선택 표현을 클래스 하나(.nav-i)로 통일하고(기준은 영업보고 패널), 누를 수 있는 항목마다
   아이콘을 붙인다. 패널 머리 아래 검색바(겉모습만)와 본문 상단 탭 줄을 모든 레일에 고정한다.
   ============================================================ */

/* ---------- ① 패널 선택 표현 — 클래스 하나가 전부다 ----------
   ⭐ 레일마다 따로 적지 않는다. 곡률·높이·여백·글꼴·글자크기가 여기 한 곳에서만 나온다(기준은 영업보고 패널).
   고른 항목 배경은 --primary — 기존 --sk-pick(#71a3d1)은 흰 글자와 명암비가 2.9:1 로 부족했다(DESIGN.md 3절). */
aside .nav-list{ display:flex; flex-direction:column; gap:2px; padding:0; }
aside .nav-i{
  display:flex !important; align-items:center; gap:var(--sp-3);
  width:100%; text-align:left;
  padding:6px 10px !important;
  border:0 !important; border-radius:var(--radius-sm) !important;
  background:transparent !important; box-shadow:none !important;
  font-family:inherit; font-size:var(--fs-4) !important; font-weight:500 !important;
  /* ⚠️ line-height 를 못박지 않으면 'OverView' 처럼 한글이 없는 항목만 줄 높이가 2px 낮게 잡힌다.
     브라우저의 normal 값이 글자 종류를 따라가기 때문이다. 실제로 그렇게 어긋나 있었다. */
  line-height:1.35 !important;
  /* 패널 바탕이 밝다. 글자색은 밝은 바탕용 토큰(--sk-side-tx)에서 가져온다.
     ⚠️ 97차까지 영업보고 패널은 --secondary-light 를 쓰고 06-overrides 가 뒤에서 덮어쓰고 있어, 토큰 하나로 정리했다. */
  color:var(--sk-side-tx) !important; cursor:pointer;
  overflow:hidden;
}
aside .nav-i .tb-ic{ display:flex; flex:none; opacity:.9; }
aside .nav-i .tb-ic svg{ width:16px; height:16px; }
aside .nav-i .tb-tx{ flex:1; min-width:0; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
aside .nav-i:hover{ background:var(--sk-side-hover) !important; color:var(--text) !important; }
aside .nav-i.on{
  background:var(--primary) !important; color:#fff !important; font-weight:700 !important;
}

/* 패널 자리의 좌우 여백도 영업보고 기준으로 맞춘다. 레일마다 다르던 값을 하나로 모은다.
   ⭐ 108차 — 패널 id 를 손으로 나열하던 방식은 새 레일이 늘 때 빠뜨리기 쉬워, `side-panel` 클래스 하나로 바꿨다. */
aside > .side-panel{
  padding:8px 8px 2px !important; margin:0 !important;
  background:transparent !important; box-shadow:none !important; border:0 !important;
  flex:none;
}

/* ---------- ③ 패널 검색바 ----------
   슬랙의 '대화 찾기…' 자리다. **기능은 없다.** 값은 전부 토큰에서 나온다. */
.side-search{
  display:flex; align-items:center; gap:var(--sp-2);
  margin:2px 10px 6px; height:30px; padding:0 10px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.72);
  border-width:1px; border-style:solid; border-color:var(--sk-side-line);
  color:var(--muted);
}
.side-search > svg{ width:14px; height:14px; flex:none; }
.side-search input{
  flex:1; min-width:0; height:100%;
  border:0; background:transparent;
  font-family:inherit; font-size:var(--fs-3); color:var(--sk-side-tx);
}
.side-search input::placeholder{ color:var(--muted); }

/* ---------- ④ 본문 상단 탭 줄 — 셸 소유 ----------
   ⭐ 어느 레일이든 이 규칙 하나만 쓴다. 화면(페이지) CSS 가 못 바꾸도록 크기 값을 여기서 잠근다(!important).
   항목이 많은 레일은 줄바꿈 대신 가로로 굴린다 — 줄바꿈은 높이가 튄다. */
#mainTabs{
  height:40px !important; min-height:40px !important;
  align-items:stretch !important;
  overflow-x:auto !important; overflow-y:hidden !important;
  scrollbar-width:thin;
}
#mainTabs::-webkit-scrollbar{ height:var(--sb-w); }
#mainTabs::-webkit-scrollbar-thumb{
  background:transparent; border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box;
}
#mainTabs:hover::-webkit-scrollbar-thumb{ background:var(--sb-thumb); background-clip:content-box; }
#mainTabs .nav-t{
  display:flex !important; align-items:center; gap:var(--sp-3);
  flex:none !important; width:auto !important;
  height:100% !important; padding:0 12px !important;
  white-space:nowrap;
  font-size:var(--fs-4) !important; font-weight:700 !important;
}
#mainTabs .nav-t .tb-ic{ display:flex; flex:none; }
#mainTabs .nav-t .tb-ic svg{ width:15px !important; height:15px !important; }

/* ============================================================
   99차 — 창섭 v1.1 요구사항 V1.1-4 (2026-08-14)
   표 상단 여백 · 버튼을 네 표에서 똑같이 (월별 매출 · 당월 완료 예정 · 신규 등록 · 수주)

   ⭐ 표마다 따로 적지 않는다. **`.tbl-hd` 클래스 하나**가 카드 상단→버튼→표 머리행 간격을 정한다
   (기준은 '당월 완료 예정' 카드, 값은 --tblhd-* 토큰). 앞 차수가 카드마다 다르게 눌러 둔 값을 !important 로 잠근다.
   ============================================================ */
/* 카드 안쪽 여백이 카드마다 달랐다(위 15 vs 10). 버튼과 표가 같은 선에서 시작하도록 카드에서 잡는다. */
main .card.tbl-card{
  padding-top:var(--tblhd-top) !important;
  padding-left:var(--tblhd-left) !important;
}
main .card > .tbl-hd{
  display:flex !important; align-items:center !important; gap:var(--sp-3) !important;
  flex:none;
  margin:0 0 var(--tblhd-gap) !important;
  padding:0 !important;
  border-bottom-width:0 !important;
  min-height:0 !important;
}
/* 머리 안의 묶음(탭 줄)은 자기 여백을 갖지 않는다 — 위에서 정한 값만 남긴다 */
main .card > .tbl-hd > .pipeline-tabs{ margin:0 !important; padding:0 !important; }
/* 머리 바로 다음에 오는 것(표 · 표를 감싸는 칸 · 스크롤 칸)은 위 여백을 갖지 않는다 */
main .card > .tbl-hd + *{ margin-top:0 !important; padding-top:0 !important; }

/* ============================================================
   99차 ② — OverView 하단 좌측 카드 · 세 탭의 줄 높이를 '당월 완료 예정' 기준으로

   ⚠️ 원인 — 세 탭의 CSS 는 같았지만 셀 안에 든 내용이 달라 줄 높이가 탭마다 2.4px 씩 움직였다
   (당월 완료 예정만 고객사명이 링크라 아이콘이 줄 높이를 밀어 올림). 기준 탭 높이로 최소 높이를 고정한다.
   ============================================================ */
.dash-mid .pipe-mirror .review-table tbody td{
  height:var(--pipe-row-h);
  vertical-align:middle;
}
/* 첫 줄은 위 여백이 2px 넓다(96차). 기준 표가 그러하므로 세 탭 다 그렇게 맞춘다. */
.dash-mid .pipe-mirror .review-table tbody tr:first-child td{ height:var(--pipe-row-h1); }

/* ============================================================
   99차 ③ — 패널 드롭다운(조회 조건)의 크기

   월 드롭다운이 화면을 꽉 채울 만큼 컸다 → 패널 폭 안에서 적당한 높이로 줄이고 넘치면 굴린다.
   연도도 접기/펼치기가 없어져(js/03-input.js) 같은 제한을 받는다. ⭐ 보이는 항목 수는 토큰(--dd-rows)으로 둔다.
   ============================================================ */
aside .as-select .tree-inner{
  max-height:calc(var(--dd-row-h) * var(--dd-rows));
  overflow-y:auto;
}
/* 스크롤 막대 — 슬랙식. 굴릴 때만 보이게 하는 표시는 js 가 붙인다. */
aside .as-select .tree-inner::-webkit-scrollbar{ width:var(--sb-w); }
aside .as-select .tree-inner::-webkit-scrollbar-thumb{
  background:transparent; border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box;
}
aside .as-select .tree-inner:hover::-webkit-scrollbar-thumb{
  background:var(--sb-thumb); background-clip:content-box;
}

/* ============================================================
   100차 — 창섭 v1.2 요구사항 V1.2-2 · V1.2-3 (2026-08-14)
   패널 머리 실선 제거 · 검색창 선택 효과
   되돌리려면 이 블록만 지우면 된다.
   ============================================================ */

/* ---------- 패널 머리 아래 실선 제거 ----------
   ⚠️ 이 선은 차수마다 세 번 다시 선언돼 있어 맨 뒤에서 한 번에 지운다. 없어지면 머리와 검색바가 붙어 보이므로 아래 여백을 조금 준다. */
aside .side-hd{ border-bottom-width:0 !important; padding-bottom:2px; }

/* ---------- 검색창 선택(포커스) 효과 ----------
   슬랙 검색창과 같은 모양. 평소엔 밋밋하고 누르면 파란 테두리가 생긴다.
   ⚠️ 기본 초점 표시는 지우지 않는다(CLAUDE.md 3절) — 키보드로 이동하는 사람이 못 보게 되므로 테두리·그림자만 더한다. */
.side-search{ transition:border-color .12s ease, box-shadow .12s ease, background-color .12s ease; }
.side-search:focus-within{
  background:#fff;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(76,100,166,.20);
}
.side-search:focus-within > svg{ color:var(--primary); }
.side-search:focus-within input{ color:var(--sk-side-tx); }

/* ============================================================
   101차 — 창섭 v1.3 : 레일 (V1.3-5 색 · V1.3-7 정렬) · 더보기 (V1.3-6 · V1.3-9)
   되돌리려면 이 블록과 --rail-* 토큰 세 줄만 지우면 된다.
   ============================================================ */

/* ---------- `JS` 상자만 주황 ----------
   ⚠️ 레일 배경 전체를 칠했다가 되돌렸다 — 주황을 쓰는 곳은 **레일 맨 위 `JS` 글자 상자**뿐이다.
   레일 배경과 나머지 화면은 Kind of Blue 그대로다. */
.rail-ws{ background:var(--rail-bg) !important; color:#fff !important; }

/* ---------- `JS` 와 레일 버튼의 중심선 맞추기 ----------
   ⭐ 좌우 여백을 직접 주지 않는다. 레일 자체를 가운데 정렬로 두고 항목마다 폭만 정해 레일 폭이 바뀌어도 계속 맞게 한다. */
.rail{ align-items:center !important; padding-left:0 !important; padding-right:0 !important; }
.rail > *{ margin-left:auto !important; margin-right:auto !important; }
.rail .tab-btn.rail-b, .rail-more, .rail-ic, .rail-ws, .user-wrap{
  align-self:center !important;
}
/* ⚠️ [더 보기] 만 `.rail-more` 라는 칸 안에 들어 있어 그 칸의 폭을 따라간다.
   그래서 혼자 5px 왼쪽으로 몰려 있었다(101차 실측 31 vs 36). 칸도 같은 폭으로 맞춘다. */
.rail-more{ width:100%; align-items:center !important; }
.rail-more > .tab-btn.rail-b{ margin:0 auto; }
.rail .tab-btn.rail-b{ justify-content:center; }
.rail .tab-btn.rail-b .tb-ic{ margin:0 auto; }
.rail .tab-btn.rail-b .tb-tx{ display:block; width:100%; text-align:center; }

/* ---------- 더보기 팝업 ----------
   마우스를 올렸을 때만 뜬다. 눌러도 화면이 바뀌지 않는다(js 가 막는다).
   마우스를 떼면 곧바로 닫지 않고 잠깐 기다린다 — 팝업 안 버튼으로 옮기는 도중에 닫히지 않게. */
.rail-pop{ transition-delay:0s; }
.rail-more:not(:hover) .rail-pop{ transition-delay:var(--rail-pop-wait, .25s); }
.rail-pop.wide{ min-width:342px; padding:10px; }
.rail-pop .rp-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;
}
.rail-pop .rp-cell{
  display:flex; flex-direction:column; gap:2px; justify-content:center;
  /* ⭐ 105차 — **칸 크기를 이름 길이가 정하지 못하게 한다.**
     격자 칸 기본값 `min-width:auto` 때문에 긴 이름이 든 칸만 넓어지고 나머지가 눌렸다.
     0 으로 낮춰야 세 칸이 같은 폭이 되고, `…` 자르기도 듣는다. */
  min-width:0;
  min-height:58px; padding:8px; text-align:left; text-decoration:none;
  border-radius:var(--sk-r-sm); background:var(--sk-bg2); color:var(--text);
  border-width:1px; border-style:solid; border-color:var(--line-soft);
}
.rail-pop .rp-cell:hover{ background:var(--primary-light); border-color:var(--primary); }
.rail-pop .rp-cell b{ font-size:var(--fs-3); font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-pop .rp-cell small{ font-size:var(--fs-1); color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 빈 칸 — 늘어날 자리라는 것이 보이게 옅게 둔다 */
.rail-pop .rp-cell.empty{ background:transparent; border-style:dashed; border-color:var(--line);
  pointer-events:none; }

/* ---------- 101차 — 채널 등록 UI 의 글꼴·버튼 ----------
   ⚠️ `.btn` 에 `font-family` 가 없어 버튼만 브라우저 기본 글꼴로 떨어져 있었다. 화면마다 글꼴을 적는 대신
   공용 규칙이 물려받게 고친다 — 채널만이 아니라 앱 전체가 같이 낫는다. */
.btn, .adm-b, .ch-tool, .tbar-b, button, input, select, textarea{ font-family:inherit; }

/* ============================================================
   ⭐ 108차 — 발표 모드

   회의 때 쓰는 전체화면이다. **레일 · 패널 · 페이지 바를 감추고 본문만 남긴다.**
   ⚠️ 감추는 것은 셸의 일이라 여기 둔다 — 화면(pages/) CSS 는 자기 안쪽만 건드리는 약속(102차)이 있다.
   글자 크기는 토큰 값만 바꿔 끼운다 — 그래야 표·알약·KPI 가 한꺼번에 같은 비율로 커진다.
   ============================================================ */
.app.present{
  --fs-1:12.5px; --fs-2:14px;   --fs-3:14.5px; --fs-4:15.5px;
  --fs-5:17px;   --fs-6:18.5px; --fs-7:22px;   --fs-8:30px; --fs-9:44px;
}
.app.present .rail,
.app.present aside,
.app.present #pageBar,
.app.present > header{ display:none !important; }
/* 셸은 세 칸 격자다. 레일과 패널을 감췄으면 격자도 한 칸으로 줄여야 본문이 그 자리를 쓴다. */
.app.present{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) !important;
  padding:0 0 56px 0 !important; }
.app.present main{
  /* ⚠️ `main` 은 평소에 셋째 칸·둘째 줄에 못박혀 있다. 칸을 하나로 줄이기만 하면 그 자리가 없어져
     브라우저가 칸을 새로 만들고 본문이 오히려 좁아진다. 자리도 함께 풀어 준다. */
  grid-column:1 / -1 !important; grid-row:1 / -1 !important;
  border-radius:0 !important;
  padding:10px 16px 0 !important;
}
/* 발표 중에는 표가 잘리지 않게 본문이 화면을 다 쓴다 */
.app.present .card{ box-shadow:none !important; }

/* ============================================================
   112차 — 더 보기 팝업의 [편집] 버튼

   되돌리려면 이 블록만 지우면 된다.
   ⚠️ 레일 팝업은 셸 소유라 규칙도 여기 둔다. 화면(pages/more)의 page.css 에 적으면 test_pages 범위 검사에 걸린다.
   ============================================================ */
.rail-pop-h{ display:flex; align-items:center; gap:8px; }
.rp-edit{
  margin-left:auto; border:0; background:none; cursor:pointer; padding:2px 6px;
  border-radius:var(--radius-sm);
  font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--muted);
}
.rp-edit:hover{ background:var(--row-hover); color:var(--text); }

/* ============================================================
   113차 · 창섭 v1.5 V1.5-19 — 통합 검색

   되돌리려면 이 블록만 지우면 된다.
   ⚠️ 두 검색칸 모두 셸 소유라 규칙도 여기 둔다. 화면의 page.css 에 적으면 test_pages 범위 검사에 걸린다.
   결과 줄(.gs-*)의 모양은 85차 것을 그대로 쓰고, 묶음 머리글·꼬리표·통합 검색 아이콘 색만 모자라 더한다.
   ============================================================ */

/* 패널 검색칸도 결과를 아래로 펼친다. 기준점이 없으면 화면 왼쪽 위로 날아간다. */
.side-search{ position:relative; }
.side-search-res{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1000;
  background:#fff;
  border-width:1px; border-style:solid; border-color:var(--line);
  border-radius:var(--sk-r);
  box-shadow:0 12px 34px rgba(23,36,90,.24);
  overflow:hidden; max-height:60vh; overflow-y:auto;
}

/* 묶음 머리글 — 어느 레일에서 찾은 것인지 한 줄로 알려 준다 */
.gs-grp{
  padding:7px 12px 4px;
  font-size:var(--fs-1); font-weight:800; color:var(--muted);
  letter-spacing:.02em;
  background:var(--row-hover);
  border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft);
}
/* 꼬리표 — 대외비 · 필독 · 고객사 같은 짧은 표시 */
.gs-tag{
  flex:none; padding:2px 7px; border-radius:999px;
  background:var(--primary-light); color:var(--primary-press);
  font-size:var(--fs-1); font-weight:800; line-height:1.5;
}
.gs-ic.g{ background:var(--primary-light); color:var(--primary-press); }

/* ============================================================
   117차 — 표준문서 패널의 [최근 문서] 를 없앴다

   114차에 있던 `.dg-rc` 규칙을 걷어냈다. ⛔ 다시 넣지 말 것.
   ============================================================ */

/* ============================================================
   168차(C-051) — 이용 안내 서랍 · 상단 [가이드] 버튼

   ⭐ **새 창이 아니라 같은 화면 안**이다. `.app` 격자에 네 번째 칸을 더하고,
      본문(main)은 그만큼 좁아진다. 본문을 다시 그리지 않으므로 입력하던 내용이 남는다.
   ⚠️ 폭은 고정으로 시작한다(끌어서 조절하지 않는다 — 요구가 오면 그때).
   ⚠️ 화면이 좁으면(1280px 이하) 본문을 밀지 않고 **덮는다** — 안 그러면 표가 다시 잘린다.
   ============================================================ */
.app.gdrw-on{ grid-template-columns:70px 248px minmax(0,1fr) 340px; }
.gdrw{
  grid-column:4; grid-row:2; min-width:0; min-height:0;
  display:flex; flex-direction:column;
  background:var(--card); border-left:1px solid var(--border);
  border-radius:0 var(--radius-md) var(--radius-md) 0; overflow:hidden;
}
.gdrw[hidden]{ display:none; }
.gdrw-h{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:12px 14px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--border);
}
.gdrw-t{ font-size:var(--fs-5); font-weight:700; color:var(--text); }
.gdrw-x{
  flex:none; width:24px; height:24px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--radius-sm); color:var(--muted); font-size:var(--fs-6); line-height:1;
}
.gdrw-x:hover{ background:var(--row-hover); color:var(--text); }
.gdrw-b{ flex:1; overflow-y:auto; padding:14px 16px 22px; min-height:0; }
.gdrw-none{ margin:0; font-size:var(--fs-4); color:var(--muted); }

/* 상단바 버튼 — 검색창 바로 옆. 상단바가 어두워 글자색은 흰 계열이다. */
.hd-guide{
  flex:none; display:flex; align-items:center; gap:var(--sp-2); height:30px; padding:0 10px;
  border-radius:var(--sk-r-sm); cursor:pointer;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.85); font-family:inherit; font-size:var(--fs-3); font-weight:700;
}
.hd-guide:hover{ background:rgba(255,255,255,.2); color:#fff; }
.hd-guide.on{ background:rgba(255,255,255,.26); color:#fff; }
.hd-guide svg{ width:15px; height:15px; flex:none; }

/* 좁은 화면 — 본문을 밀지 않고 덮는다 */
@media (max-width:1280px){
  .app.gdrw-on{ grid-template-columns:70px 248px minmax(0,1fr); }
  .gdrw{
    grid-column:3; grid-row:2; position:relative;
    box-shadow:-12px 0 30px rgba(22,34,60,.14);
  }
}

/* ============================================================
   184차(C-065) — 가이드 버튼을 검색창 오른쪽에 · 안내 서랍 1.5배

   ① 검색창(.hd-search)이 position:absolute 로 화면 중앙에 홀로 떠 있어서,
      가이드 버튼은 header 의 남은 플렉스 흐름(왼쪽 끝)에 남아 검색창과
      멀리 떨어져 있었다. 검색창 + 버튼을 .hd-center 한 덩어리로 묶어
      그 덩어리를 중앙에 띄운다 — 검색창은 그대로 중앙, 버튼이 바로 오른쪽.
   ② 안내 서랍 폭 340px → 510px(1.5배). 좁은 화면(1280px 이하)은 폭 지정이
      없이 의도적으로 남은 폭을 다 덮는 방식이라 그대로 둔다.
   ============================================================ */
.hd-center{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:var(--sp-3);
}
.hd-center .hd-search{ position:static; margin:0; transform:none; }

.app.gdrw-on{ grid-template-columns:70px 248px minmax(0,1fr) 510px; }