/* 재고·발주 앱 전용 CSS.
   전사 규약(CAPE-Alfred/memory/design-conventions.md — "프로젝트가 바꿔도 되는 것 =
   --accent + 밀도")에 따라 강조색 3개만 오버라이드한다. 나머지 토큰·컴포넌트(카드·
   KPI·뱃지·버튼·표·폼 등)는 cape-ui-tokens.css · cape-ui-components.css의 것을
   그대로 쓴다 — 재발명 금지(첫 프로토타입이 겪은 6개 위반 중 하나였다).

   차트는 D45에 따라 인라인 SVG로 그린다(재윤 승인, 전사 규약은 이후 갱신 예정) —
   그래서 cape-ui-chart-theme.js는 로드하지 않는다. */
:root {
  --accent: #0d9488;      /* 재고 청록 */
  --accent-ink: #0f766e;
  --accent-soft: #f0fdfa;
}

/* ── 공통 레이아웃(사이드바 내비 + 본문) ──────────────────────────────────
   cape-ui-components.css는 상단 탭바(.nav)·앱바(.appbar)만 제공하고 사이드바형
   내비는 아직 없다(design-conventions.md 컴포넌트 인벤토리에 "아직 없음: 앱 헤더"로
   명시). 화면 7개를 왼쪽 고정 메뉴로 묶는 이 구조가 이 프로젝트의 개성(밀도) —
   두 번째 앱이 같은 형태를 필요로 하면 cape-ui로 승격을 검토한다.
   출처: docs/prototype/proto_template.html의 <style> 블록(토큰 변수명은 규약과
   동일하므로 그대로 이식). */
.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }

nav {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3); position: sticky; top: 0; height: 100vh; overflow: auto;
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--fs-lg); color: var(--ink-strong);
  padding: 0 var(--sp-2) var(--sp-4); letter-spacing: -.3px;
}
.brand small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
nav a.item {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-size: var(--fs-sm);
  margin-bottom: 2px; font-weight: 500;
}
nav a.item:hover { background: var(--surface-2); }
nav a.item.on { background: var(--accent); color: #fff; font-weight: 600; }
.navsec {
  font-size: var(--fs-xs); color: var(--faint); text-transform: uppercase; letter-spacing: .6px;
  padding: var(--sp-4) var(--sp-3) var(--sp-1); font-weight: 700;
}

main { padding: var(--sp-6) var(--sp-8) 64px; max-width: 1400px; }

/* ── 비즈니스 전용 컴포넌트(두 번째 앱에서 또 나오면 cape-ui로 승격 검토) ──
   브리프(task-12-brief.md) Step 2가 지정한 대로 프로토타입(docs/prototype/
   proto_template.html)의 <style> 블록에서 옮긴다. 옮기지 않은 것은 딱 하나,
   .kpi뿐이다 — cape-ui-components.css가 이미 .kpi를 갖고 있는데(내부 구조만
   .k-label/.k-value/.k-sub로 다름, 프로토타입은 .lab/.val/.sub2), 프로토타입 버전을
   그대로 옮기면 이 태스크가 고치려는 "첫 프로토타입이 .kpi를 재발명한 위반"을
   그대로 재현하는 셈이라 일부러 뺐다(잊은 게 아니라 의도적 스킵). 그 외
   .rcard·.qi·th.grp/td.gs는 키트에 대응 클래스가 없어(cape-ui-components.css에
   없음을 확인) 그대로 옮긴다. */

/* 재고 소진 밴드바 — 이름은 프로토타입의 .bandbar(하이픈 없음)를 그대로 따른다.
   Task 13이 프로토타입의 bandBar() 함수를 그대로 포팅할 예정이라 이름이 갈라지면
   다음 태스크가 밟는다. */
.bandbar {
  position: relative; height: 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-full);
}
.shelf-bar {
  display: flex; height: 12px; background: var(--surface-2);
  border-radius: var(--r-full); overflow: hidden;
}

/* 보조 설명 문구 — Task 13(_charts.html)의 band_bar 매크로가 "수요 없음"에 쓴다.
   cape-ui-components.css의 .note-line(아이콘+색배경 배너)·.card-head .note(카드
   헤더 전용 스코프)는 둘 다 이 용도에 맞지 않아(전자는 너무 무겁고, 후자는
   .card-head 밖에서 안 먹는다) 프로토타입의 .note를 그대로 옮긴다. 두 번째
   화면에서도 필요해지면(재윤 결정 카드의 근거 줄 등) cape-ui 승격을 검토한다. */
.note { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); line-height: 1.6; }
.note b { color: var(--ink); }

/* 액션 큐(오늘 화면) — 프로토타입 그대로 이식 */
.queues { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.q h3 {
  font-size: var(--fs-base); margin: 0 0 var(--sp-2); display: flex;
  align-items: center; gap: var(--sp-2); color: var(--ink-strong);
}
.q h3 .n {
  font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border);
  font-weight: 700;
}
.qi {
  display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) 0;
  border-top: 1px solid var(--border); cursor: pointer;
}
.qi:hover .nm { color: var(--accent-ink); text-decoration: underline; }
.qi .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.qi .nm { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-strong); }
.qi .ds { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.qi .rt {
  margin-left: auto; text-align: right; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; flex: none;
}
.qi .rt b { font-size: var(--fs-lg); color: var(--ink-strong); }
.qi .rt div { font-size: var(--fs-xs); color: var(--muted); }

/* 상품명·SKU → 상품 상세로 가는 행 링크의 공통 모양(전체 브랜치 리뷰 라운드,
   2026-08-06 — 재윤: "재고현황의 SKU에 하이퍼링크도 달림"·"발주입고에도 상품에
   하이퍼링크 생김"). 이 행 자체를 여는 어포던스이지 다른 사이트로 나가는
   하이퍼링크가 아니므로 브라우저 기본 파란 밑줄로 보이면 안 된다 — 색·밑줄·
   호버는 여기 한 곳에서만 정의하고 화면마다 인라인 style로 다시 짓지 않는다
   (오늘 화면 .qi .nm·발주 제안 .rhead .nm와 이름을 맞춰 스코프 없이도 표 셀
   등에서 같은 클래스를 그대로 쓸 수 있게 한다 — 두 스코프 규칙은 크기만
   더 얹을 뿐 색·밑줄은 이 base 규칙을 그대로 물려받는다). */
a.nm { color: var(--ink-strong); font-weight: 600; text-decoration: none; }
a.nm:hover { color: var(--accent-ink); text-decoration: underline; }

/* 발주 카드(발주 제안 화면) — 프로토타입 그대로 이식 */
.rcard {
  background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3);
  box-shadow: var(--shadow-sm);
}
.rcard.critical { border-left-color: var(--neg); }
.rcard.warn { border-left-color: var(--warn); }
.rcard.ok { border-left-color: var(--pos); }
.rcard.idle { border-left-color: var(--border-2); }
.rhead {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.rhead .nm { font-weight: 700; font-size: var(--fs-lg); color: var(--ink-strong); letter-spacing: -.2px; }
.rhead .sk { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rbody { display: grid; grid-template-columns: 1fr 330px; gap: var(--sp-6); align-items: start; }
@media (max-width: 1000px) { .rbody { grid-template-columns: 1fr; } }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.f .l { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.f .v {
  font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.3px; color: var(--ink-strong);
}
.f .v small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }

/* 표 그룹 표시(세로줄·2단 헤더) — cape-ui-components.css의 table.t 위에 얹어 쓰는
   확장 클래스. 프로토타입 그대로 이식(재윤 피드백으로 추가된 것: 세로줄 + 그룹별
   영역 표시). */
th.gs, td.gs { border-left: 1px solid var(--border-2); }
th.grp {
  text-align: center; font-size: var(--fs-xs); color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border-2);
  font-weight: 700; letter-spacing: .3px;
}

/* 상품 상세 드로어(Task 20) — 프로토타입 <style> 블록의 .scrim/.drawer/.dclose를
   그대로 이식한다(cape-ui-components.css에 대응 클래스가 없음을 확인 — 다른
   앱 전용 컴포넌트와 같은 자리에 둔다). _layout.html이 매 화면마다 이 껍데기
   (scrim+drawer) 하나를 두고, app/web/static/drawer.js가 열고 닫는다. 내용
   (app/web/templates/_product_body.html 조각)은 #drawer-body 안에 fetch로
   삽입된다 — 닫기 버튼은 그 밖(드로어 셸)에 고정으로 있어 삽입할 때마다
   다시 만들 필요가 없다. */
.scrim {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none; transition: opacity .16s; z-index: 40;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(820px, 95vw);
  background: var(--bg, var(--surface)); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .2s; z-index: 41;
  overflow: auto; padding: var(--sp-6) var(--sp-6) 64px; box-shadow: var(--shadow-md);
}
.drawer.on { transform: none; }
.dclose {
  position: absolute; top: var(--sp-4); right: var(--sp-6);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer;
  font-size: var(--fs-sm); font-family: inherit;
}

/* 드로어를 여는 행(목록 화면 어디든 — 표 행·카드·상품 카드) — 클릭 가능함을
   시각으로도 알린다. table.t는 이미 tbody tr:hover에 배경 강조가 있어
   (cape-ui-components.css) 커서만 더한다. */
[data-sku] { cursor: pointer; }