/* ==========================================================================
   삼우물산 — 2단계 공통 뼈대 (2026-08-12)
   design-reference 시안(components.css)의 값을 그대로 쓰되 두 갈래로 나눈다.

   [A] 뼈대 — 사이드바·상단바: 전역 적용.
       앱 전체에 1개씩만 존재하는 요소라 화면별로 나눌 수 없다.
       클래스명·구조·onclick·id 는 건드리지 않고 색·굵기·라운드만 덮는다.
       기존 규칙들이 !important 를 쓰고 있어 같은 강도로 맞춰야 이긴다.

   [B] 콘텐츠 — 카드·버튼·표·칩·입력·모달: '.ds' 스코프 안에서만 적용.
       components.css 원본 66개 규칙을 기계적으로 '.ds ' 접두만 붙여 복제했다
       (손으로 옮겨 적지 않음 = 값 오타 없음).
       페이지 div 에 class="ds" 를 붙이는 순간 그 화면만 시안 모양이 된다.
       지금은 어디에도 안 붙어 있어 콘텐츠 화면 변화는 0.
       ※ .btn 450곳 · .card 81곳 · .num 121곳 등이 이미 쓰이고 있어
         스코프 없이 켜면 80개 화면이 한꺼번에 변한다. 그래서 화면별로 켠다.
   ========================================================================== */

/* ── [A] 사이드바 ──────────────────────────────────────────────── */
.nav{ background:var(--surface-card)!important; border-right:var(--bd)!important; }
.nav-sec{ color:var(--text-3)!important; font-size:var(--fs-10)!important; font-weight:600!important;
          letter-spacing:.10em!important; }
.nav-btn{ border-radius:var(--r-2)!important; font-size:var(--fs-13)!important; font-weight:500!important;
          color:var(--text-2)!important; min-height:34px!important; padding-top:7px!important;
          padding-bottom:7px!important; }   /* UI-SPEC §9: 항목 높이 34px */
.nav-btn:hover{ background:var(--surface-sunk)!important; color:var(--text-1)!important;
                border-color:transparent!important; }
.nav-btn.on{ background:var(--accent-soft)!important; color:var(--accent)!important; font-weight:600!important;
  border-left-color:var(--accent)!important; }
/* 앰버 시절 전역 패치(index.html L353·L365)가 활성 항목·카테고리에 앰버를
   !important 로 박아둠 — 같은 강도·나중 로드로 accent 정렬 */
.nav-cat.has-active{ background:var(--accent-soft)!important;
  border-color:var(--accent)!important; color:var(--accent)!important; }
.nav-foot #ntime{ color:var(--accent)!important; }
/* 부서 카테고리 — 앰버 박스(L357: 앰버 틴트 배경+테두리) → 시안처럼 플랫 리스트 */
.nav-cat{ background:transparent!important; border-color:transparent!important;
  color:var(--text-3)!important; }
.nav-cat:hover{ background:var(--surface-sunk)!important; border-color:transparent!important;
  color:var(--text-1)!important; }
.nav-cat-leaf{ color:var(--text-2)!important; }
.nav-cat-leaf:hover{ background:var(--surface-sunk)!important; border-color:transparent!important; }
.nav-cat-leaf.on{ background:var(--accent-soft)!important; color:var(--accent)!important;
  border-left:3px solid var(--accent)!important; }
/* 로고 마크 — 앰버 그라데이션 → accent 단색(시안 결: 장식 그라데이션 금지) */
.nav-logo .mark{ background:var(--accent)!important; }
/* R4: 상단바 검색·시계 (시안 §9 — 기존 검색 로직 재사용, 위치만 상단바로) */
.tb-search{ position:relative; flex:1; min-width:150px; max-width:360px; margin:0 8px; }
.tb-search input{
  width:100%; background:var(--surface-sunk); border:1px solid var(--hairline-soft);
  border-radius:var(--r-2); color:var(--text-1); font-size:12px; padding:7px 12px;
  font-family:inherit; outline:none; min-height:32px; box-sizing:border-box; }
.tb-search input::placeholder{ color:var(--text-3); }
.tb-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tb-search-results{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:400;
  background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-4);
  max-height:320px; overflow-y:auto; display:none; box-shadow:0 12px 32px rgba(0,0,0,.5); }
.tb-clock{ font-family:var(--font-numeric); font-size:12px; font-weight:700;
  color:var(--text-1); white-space:nowrap; margin:0 4px; }
@media (max-width:640px){ .tb-search{ display:none; } .tb-clock{ display:none; } }

/* 상단바 가이드 버튼 — 앰버 틴트 → ghost 결 */
.tb-guide{ background:transparent!important; color:var(--text-2)!important;
  border:1px solid var(--hairline)!important; }
.tb-guide:hover{ background:var(--surface-sunk)!important; color:var(--text-1)!important; }

/* ── [A] 상단바 ────────────────────────────────────────────────── */
.topbar{ background:var(--surface-card)!important; border-bottom:var(--bd-soft)!important;
  height:52px!important; min-height:52px!important; }   /* UI-SPEC §9 */
.topbar h2{ font-weight:900!important; letter-spacing:-0.01em!important; }

/* ── [B] 콘텐츠 컴포넌트 — '.ds' 붙은 화면에서만 ─────────────────── */
.ds .h1{font-size: var(--fs-32); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--text-1);}
.ds .h2{font-size: var(--fs-24); font-weight: 800; line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--text-1);}
.ds .h3{font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.01em; color: var(--text-1);}
.ds .h4{font-size: var(--fs-14); font-weight: 700; color: var(--text-1);}
.ds .body{font-size: var(--fs-14); color: var(--text-2); line-height: var(--lh-normal);}
.ds .body-sm{font-size: var(--fs-13); color: var(--text-3);}
.ds .meta{font-size: var(--fs-11); color: var(--text-3); letter-spacing: 0.04em;}
.ds .label{font-size: var(--fs-11); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;}
.ds .eyebrow{font-size: var(--fs-11); color: var(--accent); text-transform: uppercase; letter-spacing: 0.10em; font-weight: 600;}
.ds .num{font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0;}
.ds .num-display{font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: -0.02em;}
.ds .kpi-num{font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--text-1);}
.ds .kpi-num-sm{font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--text-1);}
.ds .card{background: var(--surface-card);
  border: var(--bd-soft);
  border-radius: var(--r-4);
  box-shadow: none;}   /* UI-SPEC §3: 무광 평면 — 그림자는 모달만 */
.ds .card-flat{background: var(--surface-card);
  border-top: var(--bd);
  border-bottom: var(--bd);}
.ds .card-pad{padding: var(--s-6);}
.ds .card-pad-l{padding: var(--s-8);}
.ds .hr{height: 1px; background: var(--hairline); border: 0;}
.ds .hr-soft{height: 1px; background: var(--hairline-soft); border: 0;}
.ds .btn{font-family: var(--font-ui);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-2);
  padding: 9px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;}
.ds .btn:active{transform: scale(0.98);}
.ds .btn-primary{background: var(--accent);
  color: var(--accent-fg);}
.ds .btn-primary:hover{background: var(--accent-deep);}
.ds .btn-secondary{background: var(--surface-sunk);
  color: var(--text-1);
  border-color: var(--hairline);}   /* UI-SPEC §7 */
.ds .btn-secondary:hover{background: var(--surface-sunk);}
.ds .btn-ghost{background: transparent;
  color: var(--text-2);}
.ds .btn-ghost:hover{background: var(--surface-sunk); color: var(--text-1);}
.ds .btn-danger{background: var(--st-urgent);
  color: white;}
.ds .btn-danger:hover{background: #B71823;}
.ds .btn-sm{padding: 6px 10px; font-size: var(--fs-12);}
.ds .btn-lg{padding: 12px 20px; font-size: var(--fs-14);}
.ds .btn-icon{padding: 8px;}
.ds .chip{display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.4;}
.ds .chip::before{content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;}
/* UI-SPEC §6: 배경을 채우지 않는다 — 테두리+글자만 상태색 */
.ds .chip-urgent{background: transparent; color: var(--st-urgent); border:1px solid var(--st-urgent);}
.ds .chip-todo{background: transparent; color: var(--st-todo); border:1px solid var(--st-todo);}
.ds .chip-progress{background: transparent; color: var(--st-progress); border:1px solid var(--st-progress);}
.ds .chip-done{background: transparent; color: var(--st-done); border:1px solid var(--st-done);}
.ds .chip-info{background: transparent; color: var(--st-info); border:1px solid var(--st-info);}
.ds .chip-sq{border-radius: var(--r-2); padding: 2px 8px;}
.ds .input{font-family: var(--font-ui);
  font-size: var(--fs-13);
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 10px 12px;
  color: var(--text-1);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline: none;}
.ds .input::placeholder{color: var(--text-4);}
.ds .input:focus{border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}
.ds .input-lg{padding: 14px 16px; font-size: var(--fs-15);}
.ds .input-sm{padding: 6px 10px; font-size: var(--fs-12);}
.ds .field-row{display: flex; flex-direction: column; gap: 6px;}
.ds .tbl{width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);}
.ds .tbl thead th{font-size: 10px;   /* UI-SPEC §5 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-3);
  text-align: left;
  padding: 10px 14px;
  border-bottom: var(--bd);
  background: var(--surface-sunk);}
.ds .tbl tbody td{padding: 14px;
  border-bottom: var(--bd-soft);
  vertical-align: middle;
  color: var(--text-1);}
.ds .tbl tbody tr:hover td{background: var(--surface-sunk);}
.ds .tbl tbody tr:last-child td{border-bottom: none;}
.ds .tbl .num-cell{font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: 700; text-align: right;}
.ds .tbl .num-cell.urgent{color: var(--st-urgent);}
.ds .kpi{background: var(--surface-card);
  border: var(--bd-soft);
  border-radius: var(--r-4);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);}
.ds .kpi .kpi-label{font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;}
.ds .kpi .kpi-delta{font-family: var(--font-numeric);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-3);}
.ds .kpi .kpi-delta.up{color: var(--st-done);}
.ds .kpi .kpi-delta.down{color: var(--st-urgent);}
.ds .grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);}
.ds .grid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-5);}
.ds .grid-4{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);}
.ds .row{display: flex; align-items: center; gap: var(--s-3);}
.ds .col{display: flex; flex-direction: column; gap: var(--s-3);}
.ds .spread{display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);}
.ds .spark{height: 32px; width: 100%;
  background: linear-gradient(to bottom, var(--accent-soft) 0%, transparent 100%);
  position: relative;}
.ds .spark svg{width: 100%; height: 100%;}

/* ── [B-보정] 변형 클래스가 없는 버튼이 배경을 잃지 않게 (2026-08-12) ──────
   시안 components.css 의 .btn 은 '뼈대만' 정의하고 색은 btn-primary/secondary/
   ghost/danger 가 준다. 그런데 앱에는 변형 없이 class="btn" 만 쓰는 버튼이
   있다(업무달력 4개·문서생성 6개 실측). 그대로 켜면 그 버튼들이 배경·테두리를
   잃고 글자만 남는다. 변형이 안 붙은 것에만 secondary 모양을 기본값으로 준다.
   :not() 4개라 변형이 붙은 버튼과는 애초에 겹치지 않는다. */
.ds .btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger){
  background:var(--surface-sunk); color:var(--text-1); border-color:var(--hairline); }
.ds .btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):hover{
  background:var(--surface-sunk); }
/* 같은 이유로 색만 갖고 뼈대가 없던 변형들에 테두리색을 맞춰준다 */
.ds .btn-primary{ border-color:var(--accent); }
.ds .btn-danger{ border-color:var(--st-urgent); }

/* ── [B-공통] 앱 옛 변수 ↔ 시안 토큰 정렬 (2026-08-12) ────────────────────
   앱의 현재 :root(index.html L1006)는 이미 시안 다크+앰버와 거의 같다.
       --bg #161618 = --surface       --panel #1F1F23 = --surface-card
       --border #33333A = --hairline  --text #F0F0F2  = --text-1
       --sub #BCBCC4 = --text-2       --muted #85858E = --text-3
       --blue #F59E0B = --accent      --red #E11D2A   = --st-urgent
   실제로 어긋나는 건 카드 두 개뿐이라 그것만 맞춘다.
       --card   #22222A → --surface-card #1F1F23
       --cardUp #2A2A33 → --surface-sunk #28282E
   덕분에 var(--card) 를 쓰는 화면들이 이미 적용된 화면과 같은 톤이 된다.
   ('ds' 안에서만 바뀌므로 아직 안 켠 화면은 영향 0) */
.ds{
  --card:   var(--surface-card);
  --cardUp: var(--surface-sunk);
}

/* ============================================================
   R7 사이드바 — 시안 01-home 정렬 (2026-08-18)
   구조: 메인 10 → 부서 10 평평한 리스트. 노란세모(▾) 토글 제거(마크업 보존·CSS 숨김),
   부서 행 클릭 = 부서 홈 + 아코디언(navTeamClick, 이미 구현). 우측 카운트 배지 = 부서별 안읽은 보고서.
   되돌리기: 이 블록 전체 삭제 (UX-DIET-LOG #6)
   ============================================================ */
.nav .cat-arrow{display:none!important}
.nav-sec.nav-cat{
  color:var(--text)!important; font-size:12.5px!important; font-weight:600!important;
  letter-spacing:0!important; text-transform:none!important;
  display:flex!important; align-items:center; gap:8px;
  min-height:34px; padding:0 12px!important; margin:1px 8px; border-radius:8px;
  cursor:pointer; -webkit-user-select:none; user-select:none;
}
.nav-sec.nav-cat:hover{background:var(--surface-sunk)}
.nav-sec.nav-cat.collapsed{color:var(--text-2,#B7BEC4)!important}
.nav-sec.nav-cat .cat-badge{
  margin-left:auto; font-size:10px; font-weight:700; line-height:1;
  min-width:15px; text-align:center; padding:3px 5px; border-radius:9px;
  background:transparent; border:1px solid var(--hairline,rgba(255,255,255,.10));
  color:var(--text-2,#7C868E);
}
/* 하위(펼친 부서) 항목 — 34px·들여쓰기, 시안의 조용한 톤 */
.nav-btn.nav-sub{min-height:32px; padding-left:26px!important; font-size:12px}

/* ── R7-b 사이드바 아이콘 모노화 (사장님 지시 2026-08-18: "색감 너무 다양, 시인성") ──
   컬러 이모지를 시안의 단색 아이콘 톤으로 — grayscale 필터(마크업 보존).
   활성 항목만 밝게. 되돌리기: 이 블록 삭제 */
.nav-btn .ic,.nav-sec.nav-cat .ic{
  filter:grayscale(1) brightness(1.15) opacity(.62);
  font-size:13px; width:18px; display:inline-flex; justify-content:center; flex-shrink:0;
}
.nav-btn:hover .ic,.nav-sec.nav-cat:hover .ic{filter:grayscale(1) brightness(1.5) opacity(.9)}
.nav-btn.on .ic{filter:grayscale(1) brightness(1.9) opacity(1)}
.nav-sec.nav-cat .ic{margin-right:0}