/* 원본: design_handoff_krds_tone/krds-tokens.css (2026-08-15 핸드오프)
   이 파일은 핸드오프본을 그대로 둔다. 프로젝트 고유의 값은 여기 말고
   각 뷰의 <style> 에서 이 변수를 참조하도록 바꾼다. */
/* ============================================================
   KRDS tone tokens for GBLS (종량제봉투 물류시스템)
   범정부 UI/UX 디자인 시스템(KRDS) 값 기준.
   레이아웃은 바꾸지 않는다. 색 / 보더 / 라운드 / 서체만 교체한다.
   출처: krds.go.kr 스타일 가이드(색상), 정부 상징 색 기반 팔레트.
   ============================================================ */

:root {
  /* Brand / action ------------------------------------------------ */
  --krds-primary:        #256ef4; /* 행위(action) 전용: primary 버튼, 활성 탭/메뉴, focus */
  --krds-primary-hover:  #0b50d0;
  --krds-primary-active: #083891;
  --krds-primary-soft:   #ecf2fe; /* secondary 버튼 / 활성 메뉴 배경 */
  --krds-secondary:      #346fb2;
  --krds-point:          #d63d4a;

  /* Ink / surface ------------------------------------------------- */
  --krds-fg:             #1e2124; /* 제목, 강조 텍스트 */
  --krds-body:           #464c53; /* 본문 */
  --krds-muted:          #6d7882; /* 보조 설명, 비활성 */
  --krds-canvas:         #ffffff;
  --krds-surface:        #f4f5f6; /* 표 헤더, 조회 조건 블록, 상단 안내 띠 */

  /* Line ---------------------------------------------------------- */
  --krds-line:           #cdd1d5; /* 일반 구분선, 카드 보더 */
  --krds-line-strong:    #58616a; /* 입력 보더, 표 헤더 하단, 헤더 하단 */
  --krds-line-disabled:  #b1b8be;

  /* System -------------------------------------------------------- */
  --krds-danger:         #de3412;
  --krds-warning:        #ffb114; /* 배경으로 쓸 때 글자는 #1e2124 */
  --krds-success:        #228738;
  --krds-info:           #0b78cb;

  /* Radius (계층 고정) --------------------------------------------- */
  --krds-radius-sm:      4px;  /* 배지, 체크박스 */
  --krds-radius-md:      6px;  /* 버튼, select */
  --krds-radius-lg:      8px;  /* 입력, 카드, 표 컨테이너 */
  --krds-radius-xl:      12px; /* 모달 */
  --krds-radius-pill:    1000px; /* 필터 칩 */

  /* Spacing (4px base) -------------------------------------------- */
  --krds-space-xs: 2px;
  --krds-space-sm: 4px;
  --krds-space-md: 8px;
  --krds-space-base: 16px;
  --krds-space-lg: 24px;
  --krds-space-xl: 32px;
  --krds-space-xxl: 40px;

  /* Focus --------------------------------------------------------- */
  --krds-focus-ring: 0 0 0 4px rgba(37, 110, 244, .35);

  /* Type ---------------------------------------------------------- */
  /* Pretendard GOV는 외부 배포되지 않는다. 보유 시 @font-face로 교체. */
  --krds-font-body: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --krds-font-title: 'Paperlogy', 'Pretendard', sans-serif; /* 상·좌 메뉴, 화면 제목, 카드 제목 */
  --krds-letter-spacing: 0; /* 한글 본문 자간 압축 금지 */
}

/* Paperlogy (OFL, 상업적 사용 가능) — 메뉴·제목 전용 */
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ============================================================
   아래는 "적용 규칙" 예시다. 실제 클래스명은 프로젝트의
   _dashboard_gov_portal_*.php / workspace.php 안의 것을 그대로 쓰고,
   값만 위 변수로 바꾼다. 레이아웃 속성(width/flex/grid/position)은 건드리지 않는다.
   ============================================================ */

body, .gov-portal-shell {
  color: var(--krds-body);
  background: var(--krds-canvas);
  font-family: var(--krds-font-body);
  letter-spacing: var(--krds-letter-spacing);
}

/* 상단 헤더: 색 반전(네이비 바) 대신 흰 배경 + 강한 하단선 */
.portal-header { background: var(--krds-canvas); border-bottom: 1px solid var(--krds-line-strong); }
.portal-header .user-line { color: var(--krds-body); }

/* 상단 대메뉴 / 좌측 사이드 메뉴 */
.portal-topnav, .portal-sidebar { font-family: var(--krds-font-title); }
.portal-topnav a { color: var(--krds-body); }
.portal-topnav a.active,
.portal-topnav .active > a { color: var(--krds-primary-hover); font-weight: 700; box-shadow: inset 0 -3px 0 0 var(--krds-primary); }
.portal-sidebar a { color: var(--krds-body); }
.portal-sidebar a.active {
  color: var(--krds-primary-hover); font-weight: 700;
  background: var(--krds-primary-soft);
  box-shadow: inset 3px 0 0 0 var(--krds-primary);
}

/* 워크스페이스 탭바 + 분할 컨트롤 (workspace.php) */
.ws-topbar { background: var(--krds-surface); border-bottom: 1px solid var(--krds-line); }
.ws-tab { background: var(--krds-surface); border: 1px solid var(--krds-line); border-bottom: none;
          border-radius: var(--krds-radius-md) var(--krds-radius-md) 0 0; color: var(--krds-body); }
.ws-tab.active { background: var(--krds-canvas); color: var(--krds-primary-hover); font-weight: 700;
                 border-color: var(--krds-primary); box-shadow: inset 0 -3px 0 0 var(--krds-primary); }
.ws-layout button { border: 1px solid var(--krds-line-strong); background: var(--krds-canvas);
                    color: var(--krds-body); border-radius: var(--krds-radius-md); }
.ws-layout button.active { background: var(--krds-primary); border-color: var(--krds-primary); color: #fff; }
.ws-slot-head { background: var(--krds-surface); border-bottom: 1px solid var(--krds-line); color: var(--krds-body); }
.ws-slot-head.focused { background: var(--krds-primary-soft); color: var(--krds-primary-hover);
                        box-shadow: inset 0 2px 0 var(--krds-primary); font-weight: 700; }

/* 버튼 3종 */
.btn-primary { background: var(--krds-primary); border: 1px solid var(--krds-primary); color: #fff;
               border-radius: var(--krds-radius-md); }
.btn-primary:active { background: var(--krds-primary-active); border-color: var(--krds-primary-active); }
.btn-secondary { background: var(--krds-primary-soft); border: 1px solid var(--krds-primary);
                 color: var(--krds-primary-hover); border-radius: var(--krds-radius-md); }
.btn-tertiary { background: transparent; border: 1px solid var(--krds-line-strong);
                color: var(--krds-fg); border-radius: var(--krds-radius-md); }

/* 입력 / 셀렉트 */
input[type="text"], input[type="date"], input[type="number"], input[type="password"], textarea {
  border: 1px solid var(--krds-line-strong); border-radius: var(--krds-radius-lg);
  background: var(--krds-canvas); color: var(--krds-body);
}
select { border: 1px solid var(--krds-line-strong); border-radius: var(--krds-radius-md); }
:focus-visible { outline: none; box-shadow: var(--krds-focus-ring); }
.is-invalid, [aria-invalid="true"] { border: 2px solid var(--krds-danger); }
.field-error { color: var(--krds-danger); }

/* 표 */
table thead th { background: var(--krds-surface); color: var(--krds-fg); border-bottom: 1px solid var(--krds-line-strong); }
table tbody td { border-bottom: 1px solid var(--krds-line); }
table tfoot td, tr.total-row td { background: var(--krds-surface); color: var(--krds-fg); font-weight: 700; }

/* 카드 / 패널 — 그림자 금지, 보더로만 */
.card, .panel, .box { background: var(--krds-canvas); border: 1px solid var(--krds-line);
                      border-radius: var(--krds-radius-lg); box-shadow: none; }

/* 상태 배지 */
.badge-success { background: var(--krds-success); color: #fff; border-radius: var(--krds-radius-sm); }
.badge-warning { background: var(--krds-warning); color: var(--krds-fg); border-radius: var(--krds-radius-sm); }
.badge-danger  { background: var(--krds-danger);  color: #fff; border-radius: var(--krds-radius-sm); }
.badge-info    { background: var(--krds-info);    color: #fff; border-radius: var(--krds-radius-sm); }

/* 필터 칩 */
.chip { border: 1px solid var(--krds-line); background: var(--krds-canvas);
        color: var(--krds-fg); border-radius: var(--krds-radius-pill); }
.chip.active { border-color: var(--krds-primary); background: var(--krds-primary-soft); color: var(--krds-primary-hover); }

/* 모달 */
.modal { background: var(--krds-canvas); border-radius: var(--krds-radius-xl); padding: var(--krds-space-xxl);
         min-height: 264px; box-shadow: 0 .2rem 0 0 rgba(0,0,0,.1), 0 .4rem .8rem 0 rgba(0,0,0,.1); }
.modal-backdrop { background: rgba(0,0,0,.5); }

/* 전화주문 접수 패널 (슬라이드 드로어) */
.phone-order-fab { background: var(--krds-primary); border: 1px solid var(--krds-primary); color: #fff; }
.phone-order-fab-label { color: var(--krds-primary-hover); background: var(--krds-canvas);
                         border: 1px solid var(--krds-primary); border-radius: var(--krds-radius-pill); }
.phone-order-panel { background: var(--krds-canvas); border-right: 1px solid var(--krds-line-strong); }
.phone-order-panel__head { background: var(--krds-primary); color: #fff; }