/* ============================================================
   S카고 AX 오렌지 웜톤 테마 — Warm Logistics Console
   (S카고AX_홈페이지_오렌지톤_UI테마_ClaudeCode_지시서.md §4 팔레트)
   scargo.css + base.html 인라인 스타일 "뒤"에 로드되어 색만 덮어쓴다.
   색상 변경은 이 파일의 :root 토큰만 수정하면 된다.
   ============================================================ */
:root{
  /* Brand */
  --scargo-primary:#EA7A1A;
  --scargo-primary-hover:#D96B12;
  --scargo-primary-soft:#FFF1E4;
  --scargo-primary-border:#F3B071;
  /* Dark navigation */
  --scargo-navy:#17182A;
  --scargo-navy-2:#242538;
  --scargo-navy-soft:#303145;
  /* Background */
  --scargo-bg:#F4EFE7;
  --scargo-bg-soft:#FAF7F1;
  --scargo-panel:#FFFFFF;
  --scargo-panel-warm:#FFFDF8;
  --scargo-section:#F3EFE6;
  /* Text */
  --scargo-text:#1F2433;
  --scargo-text-muted:#6D7280;
  --scargo-text-light:#9BA1AE;
  /* Line */
  --scargo-border:#E3DDD2;
  --scargo-border-strong:#D2C7B8;
  /* Status */
  --scargo-success:#22A06B;
  --scargo-warning:#F59E0B;
  --scargo-danger:#D94841;
  --scargo-info:#3B82F6;
  /* Shadow / Radius */
  --scargo-shadow-sm:0 2px 8px rgba(23,24,42,.06);
  --scargo-shadow-md:0 8px 24px rgba(23,24,42,.10);
  --scargo-radius-sm:8px;
  --scargo-radius-md:12px;
  --scargo-radius-lg:18px;
  /* 레이아웃 토큰(UI크기_레이아웃통일 지시서 §2.1) — 크기/간격의 단일 기준 */
  --scargo-page-max:1600px;
  --scargo-page-pad-x:28px;
  --scargo-page-pad-y:24px;
  --scargo-radius-xl:22px;
  --scargo-control-h:44px;
  --scargo-control-h-sm:38px;
  --scargo-control-pad-x:16px;
  --scargo-card-pad:24px;
  --scargo-card-gap:18px;
  --scargo-hero-min-h:150px;
  --scargo-hero-pad:30px;
  /* 접근성/포커스 토큰(Todo16, DESIGN.md §Focus) — 값은 기존 토큰 재사용(신규 색 없음).
     라이트 배경 대비를 위해 링 색은 --scargo-primary-hover(#D96B12, 흰 배경 대비 ≥3:1).
     기존 개별 포커스 규칙(사이드바 오렌지 아웃라인·입력 오렌지 링)은 각자 유지되고,
     이 토큰은 a11y-primitives.css의 전역 :focus-visible 기본값에만 쓰인다. */
  --scargo-focus-ring-color:var(--scargo-primary-hover);
  --scargo-focus-ring-width:2px;
  --scargo-focus-ring-offset:2px;
  /* 사이드바 전용 토큰(P1-01, 사이드메뉴 서비스레벨 지시서) */
  --scargo-sidebar-bg:#17182A;
  --scargo-sidebar-bg-2:#202133;
  --scargo-sidebar-panel:rgba(255,255,255,.055);
  --scargo-sidebar-border:rgba(255,255,255,.08);
  --scargo-sidebar-text:#E7E9F1;
  --scargo-sidebar-muted:#9FA8C2;
  --scargo-sidebar-active:#F47C16;
  --scargo-sidebar-active-2:#EA6F0B;
  --scargo-sidebar-hover:rgba(244,124,22,.12);

  /* ── 레거시 --sc-* 변수 remap: scargo.css 전체가 이 토큰을 따라온다 ── */
  --sc-text:var(--scargo-text); --sc-muted:var(--scargo-text-muted);
  --sc-line:var(--scargo-border); --sc-line2:#EEE9DF;
  --sc-head:var(--scargo-section); --sc-head2:#EDE7DA; --sc-bg:var(--scargo-bg);
  --sc-navy:var(--scargo-navy); --sc-navy2:var(--scargo-navy-2);
  --sc-blue:var(--scargo-primary); --sc-blue-d:var(--scargo-primary-hover);
  --sc-indigo:var(--scargo-navy-soft);
  --sc-accent:var(--scargo-warning);
  --sc-green:var(--scargo-success); --sc-amber:var(--scargo-warning); --sc-red:var(--scargo-danger);
  --sc-shadow:var(--scargo-shadow-sm); --sc-shadow-lg:var(--scargo-shadow-md);
  --sc-radius:14px;
}

/* ── 전체 배경/본문 ── */
body{ background:var(--scargo-bg); color:var(--scargo-text); }
.main{ background:var(--scargo-bg); }

/* ── 사이드바 서비스레벨(사이드메뉴 지시서 P0-01~06): 색·상태는 전부 --scargo-sidebar-* 토큰 ── */
.sidebar{ background:linear-gradient(185deg,var(--scargo-sidebar-bg) 0%,var(--scargo-sidebar-bg-2) 100%);
          color:var(--scargo-sidebar-text);
          scrollbar-width:thin; scrollbar-color:#33344B transparent; }
/* P0-05: 얇은 스크롤바 + hover 오렌지 tint */
.sidebar::-webkit-scrollbar{ width:5px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:#33344B; border-radius:4px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(244,124,22,.55); }
.sb-brand{ background:linear-gradient(185deg,var(--scargo-sidebar-bg),var(--scargo-sidebar-bg)); }
.sb-brand .logo .dot{ background:linear-gradient(135deg,#FFB56B,var(--scargo-primary)); box-shadow:0 0 10px rgba(234,122,26,.6); }
.sidebar .sub{ color:var(--scargo-sidebar-muted); }

/* P0-01: 항목 높이/정렬 통일 + 긴 메뉴명 ellipsis + 저대비 구분선 */
.sidebar a.navtop, .sidebar a.navchild, .sidebar details.navgroup > summary{
  display:flex; align-items:center; min-height:34px; padding-top:6px; padding-bottom:6px; }
.sidebar .lbl-t{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar a, .sidebar a.navchild{ color:var(--scargo-sidebar-muted); }
.sidebar details.navgroup > summary{ color:var(--scargo-sidebar-text); }
.nav-section + .nav-section{ border-top-color:var(--scargo-sidebar-border); }
.nav-section-label{ color:var(--scargo-sidebar-muted); opacity:.85; }

/* P0-02: hover=오렌지 tint / active=오렌지 그라데이션+저채도 섀도 / focus-visible=오렌지 링 */
.sidebar a:hover, .sidebar a.navchild:hover, .sidebar details.navgroup > summary:hover{
  background:var(--scargo-sidebar-hover); color:#fff; }
.sidebar a.navchild.active,
.sidebar a.navtop.active{ background:linear-gradient(90deg,var(--scargo-sidebar-active),var(--scargo-sidebar-active-2));
  color:#fff; box-shadow:0 2px 8px rgba(244,124,22,.35); }
.sidebar a:focus-visible, .sidebar summary:focus-visible, #sbToggle:focus-visible{
  outline:2px solid var(--scargo-sidebar-active); outline-offset:1px; border-radius:9px; }

/* P0-03: 그룹 펼침/접힘 상태 — 기존 details[open] 상태만 CSS로 사용(신규 JS 없음) */
.sidebar:not(.collapsed) details.navgroup > summary::before{ content:"+"; color:var(--scargo-sidebar-muted); }
.sidebar:not(.collapsed) details.navgroup[open] > summary::before{ content:"−"; color:var(--scargo-primary-border); }
.sidebar:not(.collapsed) details.navgroup > summary:hover::before{ color:var(--scargo-sidebar-active); }
.sidebar details.navgroup > summary.active{ color:#fff; }
.sidebar:not(.collapsed) details.navgroup > summary.active::before{ color:var(--scargo-sidebar-active); }

/* P0-04: 접힘 상태 — 아이콘 버튼 크기 통일 + active 식별(오렌지 배경/바) */
.sidebar.collapsed a.navtop, .sidebar.collapsed details.navgroup > summary{
  min-height:36px; margin:2px 0; border-radius:10px; }
.sidebar.collapsed a.navchild.active .child-initial{
  background:linear-gradient(135deg,var(--scargo-sidebar-active),var(--scargo-sidebar-active-2));
  color:#fff; box-shadow:0 2px 8px rgba(244,124,22,.45); }
.sidebar.collapsed a.navtop.active{ box-shadow:inset 3px 0 0 #fff, 0 2px 8px rgba(244,124,22,.35); }

/* P0-06: 시연용/초안 메뉴 배지(과장 방지 — 초안/read-only/검색) */
.nav-tag{ flex:0 0 auto; margin-left:6px; font-size:9px; font-weight:800; letter-spacing:.3px;
  padding:1px 6px; border-radius:999px; background:rgba(244,124,22,.16);
  color:var(--scargo-primary-border); border:1px solid rgba(244,124,22,.28);
  overflow:visible; }

/* 자동화·지능 섹션 톤을 다른 그룹 체계와 통일(오렌지 계열) */
.nav-sec-auto{ border-top-color:rgba(244,124,22,.25); background:linear-gradient(180deg,rgba(244,124,22,.06),rgba(244,124,22,0)); }
.nav-sec-auto .nav-section-label{ color:var(--scargo-primary-border); }
.sb-review{ background:linear-gradient(135deg,rgba(234,122,26,.34),rgba(234,122,26,.20)); border-color:rgba(243,176,113,.42); color:#FFE7CE !important; }
.sb-review:hover{ background:linear-gradient(135deg,var(--scargo-primary),var(--scargo-primary-hover)); box-shadow:0 3px 12px rgba(234,122,26,.4); }
/* 토글(«)·브랜드 카드 sticky 겹침 해소: 둘 다 top:0이라 스크롤 시 «가 "S카고 AX" 위에 얹힘 —
   토글을 고정 높이+불투명 배경으로 만들고, 브랜드는 토글 바로 아래(top:32px)에 정착 */
#sbToggle{ height:30px; line-height:1; background:var(--scargo-sidebar-bg-2); }
#sbToggle:hover{ color:#FFE7CE; background:#2A2B40; }
.sb-brand{ top:32px; }

/* P0-05: 좁은 화면 — 사이드바 자동 축소(아이콘만), 본문 가림 방지 */
@media (max-width:860px){
  .sidebar{ width:64px; padding-left:8px; padding-right:8px; }
  .sidebar .lbl-t, .sidebar .nav-section-label, .sidebar .logout-text,
  .sidebar .home-hint, .sidebar .sub, .sidebar .nav-tag{ display:none; }
  .sidebar .ic, .sidebar .rv-ic{ margin-right:0; }
  .main{ padding:16px 14px; }
}

/* ── 상단 탭: 활성=다크 네이비 pill, 비활성=패널색 ── */
.tabs a{ border-radius:999px; background:var(--scargo-panel); color:var(--scargo-text-muted); border:1px solid var(--scargo-border); }
.tabs a:hover{ background:var(--scargo-primary-soft); color:var(--scargo-text); }
.tabs a.active{ background:var(--scargo-navy); color:#fff; border-color:var(--scargo-navy); box-shadow:0 2px 8px rgba(23,24,42,.28); }

/* ── 카드/패널 ── */
.panel{ border-color:var(--scargo-border); border-radius:16px; box-shadow:var(--scargo-shadow-sm); }
.sc-card{ border-radius:16px; }
.sc-card:hover{ border-color:var(--scargo-primary-border); }
.sc-kpi:hover{ border-color:var(--scargo-primary-border); }
.sc-kpi .k-value{ color:var(--scargo-navy); }
.sc-title{ color:var(--scargo-navy); }
.sc-stats{ background:var(--scargo-bg-soft); color:var(--scargo-text); }
.sc-stats b{ color:var(--scargo-primary-hover); }

/* ── 버튼 계층(P0-05): primary=오렌지 / secondary=.line(아이보리·테두리) /
      danger=red / warn=amber / success=green / disabled=저채도 베이지 ── */
.sc-btn{ box-shadow:0 1px 2px rgba(234,122,26,.22); }
.sc-btn.danger{ background:var(--scargo-danger); border-color:var(--scargo-danger); }
.sc-btn.danger:hover{ background:#C23F38; border-color:#C23F38; }
.sc-btn.warn{ background:var(--scargo-warning); border-color:var(--scargo-warning); }
.sc-btn.success{ background:var(--scargo-success); border-color:var(--scargo-success); }
.sc-btn:disabled, .sc-btn[disabled]{ background:#D9D3C7; border-color:#D9D3C7; color:#8B8574;
  cursor:not-allowed; box-shadow:none; transform:none; }
.sc-btn.primary{ background:linear-gradient(180deg,var(--scargo-primary),var(--scargo-primary-hover)); border-color:var(--scargo-primary-hover); }
.sc-btn.soft{ background:var(--scargo-primary-soft); border-color:var(--scargo-primary-border); color:#B85C0B; }
.sc-btn.soft:hover{ background:#FFE7CE; }
.sc-btn.line:hover{ background:var(--scargo-bg-soft); border-color:var(--scargo-border-strong); }
.btn{ background:var(--scargo-primary); }
.sc-hero a.sc-btn.line{ color:var(--scargo-primary-hover); }

/* ── 입력폼: focus=오렌지 ── */
.sc-input:focus, .sc-select:focus,
.sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus,
.form-row input:focus, .form-row select:focus{
  border-color:var(--scargo-primary);
  box-shadow:0 0 0 3px rgba(234,122,26,.15);
  outline:none;
}

/* ── 테이블: 베이지 헤더 + 오렌지 tint hover ── */
th{ background:var(--scargo-section); color:#5B5546; }
table.sc-grid th{ background:var(--scargo-section); color:#5B5546; }
table.sc-grid tbody tr:hover td{ background:#FFF6EC; }
.sc-form th{ background:var(--scargo-section); color:#5B5546; }

/* ── 상태 배지: 의미별 색 유지(오렌지 남발 금지) ── */
.sc-badge.close{ background:var(--scargo-primary-soft); color:#B85C0B; }
.badge-improvement{ background:var(--scargo-primary-soft); color:#B85C0B; }
.badge-demo{ background:#EEF2FF; color:#3949AB; }
.badge-risk{ background:#FEE2E2; color:#B42318; }
.badge-success{ background:#E7F7EF; color:#157347; }

/* ── 레이아웃 통일(UI크기_레이아웃통일 지시서 §2.2~2.5) ── */
/* 기준 색상+크기(/booking/ 기준, sc-hero 전수 통일): teal/blue 계열·그라데이션 히어로 금지,
   단색 네이비 + radius/padding/min-height 레이아웃 토큰 단일 기준 — 전 화면 히어로 크기 통일 */
.sc-hero{ background:var(--scargo-navy);
  border-radius:var(--scargo-radius-xl); padding:var(--scargo-hero-pad);
  min-height:var(--scargo-hero-min-h); box-sizing:border-box; }
/* slim: 상세/최소컨트롤 화면(제목만)은 히어로 min-height(150px)가 제목 아래 빈 밴드를
   만드므로 하한만 제거해 내용에 맞춘다. 내용이 많으면 자연 확장 → 리스트/작업 화면의
   전수 통일(min-height)은 그대로 유지, 상세만 컴팩트. (2026-07-20 상세 빈밴드 해소) */
.sc-hero.slim{ min-height:0; padding:18px 24px; }
/* 범용 slim 유틸: sc-hero 전용인 위 .slim과 달리 커스텀 히어로 클래스(.tk-hero/.nb-hero/
   .aw-hero/.mf-hero/.ml-hero/.pa-hero 등)에도 적용 가능. 상세/표시전용 히어로의 빈 밴드 제거용
   하한 제거만 담당(padding은 각 히어로 기존값 유지). (2026-07-20 타모듈 상세 빈밴드 해소) */
.hero-slim{ min-height:0 !important; }
/* 히어로 변형: 신규/개편 화면은 이 두 클래스를 기준으로 사용(크기만 다름, 색은 기준과 동일) */
.sc-hero--work, .sc-hero--search{
  border-radius:var(--scargo-radius-xl); padding:var(--scargo-hero-pad);
  min-height:var(--scargo-hero-min-h); box-sizing:border-box;
  background:var(--scargo-navy);
  display:flex; flex-direction:column; justify-content:center; }
.sc-hero--work h1, .sc-hero--search h1{ font-size:24px; letter-spacing:-.03em; }
/* 기존 커스텀 히어로 5종(추적/신규부킹/AWB/Manifest/메일)을 같은 크기·단색 기준으로 통일 */
.tk-hero, .nb-hero, .aw-hero, .mf-hero, .ml-hero{
  border-radius:var(--scargo-radius-xl); padding:var(--scargo-hero-pad);
  min-height:var(--scargo-hero-min-h); box-sizing:border-box; }
.tk-hero, .nb-hero.master, .nb-hero.house{
  background:var(--scargo-navy); }

/* 컨트롤 높이 통일(§2.4): 검색/기능바/히어로 폼/신규부킹 폼 = 38px.
   조밀 그리드(td 내 인라인 버튼)는 업무 밀도 유지를 위해 제외. */
.sc-searchbar .sc-input, .sc-searchbar .sc-select, .sc-searchbar .sc-btn,
.sc-fnbar .sc-btn,
.sc-hero form input, .sc-hero form select, .sc-hero form .sc-btn,
.tk-hero form input, .tk-hero form select, .tk-hero form .sc-btn,
.aw-hero form input, .aw-hero form .sc-btn,
.mf-hero form input, .mf-hero form .sc-btn,
.ml-hero form input, .ml-hero form .sc-btn,
.nb-f input, .nb-f select{
  min-height:var(--scargo-control-h); box-sizing:border-box; }

/* 상단 통합검색(topbar): 셀렉트/인풋/버튼 높이·radius 통일 */
.topbar-search .sc-select, .topbar-search .sc-input, .topbar-search .sc-btn{
  min-height:var(--scargo-control-h-sm); box-sizing:border-box; border-radius:10px; font-size:12.5px; }
.topbar-search .sc-btn{ padding:6px 14px; }

/* 패널 통일(§2.5): 콘텐츠 패널 패딩·radius 단일 기준(테이블 패널은 인라인 padding:0 유지) */
.sc-panel{ padding:var(--scargo-card-pad); border-radius:var(--scargo-radius-lg); }
.nb-sec{ padding:var(--scargo-card-pad); border-radius:var(--scargo-radius-lg); }
/* 부드러운 검색/보조 패널(§5.1 "기존 부킹 불러오기" 등) — dashed 개발용 느낌 대신 solid+웜 배경 */
.sc-panel--soft, .sc-search-panel{
  background:var(--scargo-bg-soft); border:1px solid var(--scargo-border) !important;
  border-style:solid !important; border-radius:var(--scargo-radius-lg);
  box-shadow:var(--scargo-shadow-sm); }

/* ── 전 화면 피드백 위젯(인라인 스타일 덮어쓰기라 !important 필요) ── */
#fbBtn{ background:linear-gradient(135deg,var(--scargo-primary),var(--scargo-primary-hover)) !important;
        box-shadow:0 6px 18px rgba(234,122,26,.45) !important; }
#fbPanel > div:first-child{ background:var(--scargo-navy) !important; }