/* =====================================================================
   GUTEK 전체 디자인 정리(대표 지시 2026-11-12 '전체적인 디자인과, 폰트, 표, 상태, 작은 메뉴 등 이런 식으로 전반적인 디자인 수정해줘',
   '표 사이의 간격은 적을수록 좋음'). 참고: 짐서폿 관리자 화면(촘촘한 표·연한 머리줄·작은 상태 배지·밑줄 탭·검정 선택 칩).

   - 이 파일은 index.html·login.html 에서 CSS 중 맨 마지막에 불러온다(예외: 인테리어 전용 interior_home.css·interior_mobile.css 는
     이 파일 뒤. 11-14 병합 — 대표가 정한 인테리어 글씨 8~9px·한 줄 1공정·지점 색·터치 칸이 디자인 통일보다 우선).
     app.css(목업 원문 보존 시험)·페이지 JS 는 고치지 않고 같은 선택자를 뒤에서 덮어쓴다. 되돌리기 = 두 HTML 의 design.css 줄을 지우면 이전 화면 그대로.
   - 숫자는 모두 아래 :root 토큰에서 한 번에 바꾼다(글꼴·크기·색·간격·행 높이·반경).
   - 주의: 여기서 바꾼 속성은 app.css 의 휴대폰(@media) 규칙보다 뒤에 오므로, 휴대폰 값은 이 파일 아래 @media 에서 다시 정한다.
   ===================================================================== */
:root{
  /* 글꼴: 시스템 글꼴 묶음(외부 내려받기 없음). Pretendard 가 깔린 PC 는 Pretendard, 맥은 Apple SD Gothic Neo, 윈도는 맑은 고딕 */
  --font-sans:'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', system-ui, sans-serif;
  --fs-title:22px;      /* 화면 제목 */
  --fs-section:16px;    /* 섹션 제목(패널·상세 제목) */
  --fs-body:14px;       /* 본문 */
  --fs-table:13px;      /* 표 칸 */
  --fs-head:12.5px;     /* 표 머리줄·필터 칸 */
  --fs-caption:12px;    /* 보조 글씨·배지 */

  /* 색: 흰 바탕 + 연한 회색 구분 + 강조색 하나(기존 GUTEK 파랑 #2B5C8E 그대로) */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#F3F5F8;
  --border:#E3E7EC;
  --border-strong:#D3D9E0;   /* 입력칸·버튼 테두리 */
  --border-soft:#ECEFF3;     /* 표 행 사이 얇은 선 */
  --table-head-bg:#F7F8FA;
  --row-hover:#F4F6F9;
  --chip-on-bg:#1E2530;      /* 선택된 칩: 어두운 바탕 */
  --chip-on-ink:#FFFFFF;
  --focus-ring:rgba(43,92,142,.35);

  /* 상태 색 체계(연한 바탕 + 진한 글자, 글자 대비 4.5:1 이상): 진행 파랑 · 완료 초록 · 대기 노랑 · 문제 빨강 · 보류/중립 회색.
     코드표 badge_class(b-*) 의 뜻은 그대로 두고 색 값만 이 토큰으로 맞춘다 */
  --tone-blue-bg:#E8F0FA;   --tone-blue-ink:#1D5592;
  --tone-green-bg:#E5F3EA;  --tone-green-ink:#1D6A3E;
  --tone-teal-bg:#E2F2F2;   --tone-teal-ink:#16625F;
  --tone-amber-bg:#FBF0DA;  --tone-amber-ink:#7E4E00;
  --tone-red-bg:#FCE8E6;    --tone-red-ink:#A2302A;
  --tone-gray-bg:#EEF0F3;   --tone-gray-ink:#47515E;
  --tone-purple-bg:#EFEAF8; --tone-purple-ink:#5B3D91;

  /* 간격·크기 */
  --cell-py:6px;          /* 표 칸 위아래 여백(전 10px) */
  --cell-px:10px;         /* 표 칸 좌우 여백(전 12px) */
  --ctl-h:32px;           /* 필터 줄 입력·선택·버튼 높이 */
  --btn-sm-h:28px;
  --btn-xs-h:24px;
  --panel-pad:16px;
  --radius:8px;           /* 전 10px */
  --radius-sm:6px;
  --badge-radius:4px;
  --sidebar-w:208px;      /* 전 220px */
  --topbar-h:52px;        /* 전 56px */
}
[data-theme="dark"]{
  --border-strong:#3A4552; --border-soft:#2A333D; --table-head-bg:#1F262E; --row-hover:#222A33;
  --chip-on-bg:#E4E8EC; --chip-on-ink:#12161B; --focus-ring:rgba(125,176,224,.45);
  /* 어두운 테마 배지 바탕은 불투명(겹친 칸 색에 따라 대비가 흔들리지 않게) */
  --tone-blue-bg:#1F3347;   --tone-blue-ink:#9CC4EA;
  --tone-green-bg:#1E3A2B;  --tone-green-ink:#8ED3A8;
  --tone-teal-bg:#1B3838;   --tone-teal-ink:#8AD3D0;
  --tone-amber-bg:#3D3120;  --tone-amber-ink:#F2C46D;
  --tone-red-bg:#422624;    --tone-red-ink:#F0A097;
  --tone-gray-bg:#2A323C;   --tone-gray-ink:#C2CBD5;
  --tone-purple-bg:#33294A; --tone-purple-ink:#C7B3EC;
}

/* ===== 1. 글꼴·제목 위계 ===== */
body{ font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; }
.page-title{ margin-bottom:14px; gap:12px; }
.page-title h1{ font-size:var(--fs-title); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.page-title .meta{ font-size:var(--fs-caption); }
.detail-head{ margin:20px 0 8px; }
.detail-head h2, .drawer-head h2, .modal h2{ font-size:var(--fs-section); font-weight:700; letter-spacing:-.005em; }
.panel h3{ font-size:var(--fs-section); font-weight:700; margin:0 0 10px; letter-spacing:-.005em; }
.caption, .section-note, .table-footer, .masked{ font-size:var(--fs-caption); }
.form-section{ font-size:13px; font-weight:700; color:var(--ink); }
.kpi-num{ font-size:24px; letter-spacing:-.01em; }
.kpi-label{ font-size:var(--fs-caption); }
tbody td:not(:where(.fc *)), .num, .kpi-detail, .calc-row, .rate-row{ font-variant-numeric:tabular-nums; }

/* ===== 2. 전체 틀: 흰 바탕, 그림자 최소, 패널 여백 16px ===== */
.content{ padding:20px 24px; }
.panel{ padding:var(--panel-pad); border-radius:var(--radius); border-color:var(--border); }
.kpi-card{ padding:14px; border-radius:var(--radius); }
.kpi-grid{ gap:10px; }
.section-note, .excel-match{ padding:8px 12px; border-radius:var(--radius-sm); margin-bottom:12px; }
.notice-banner, .error-banner, .phase-banner{ padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; }
.timeline-strip{ padding:10px; border-radius:var(--radius); }
.drawer-head{ padding:12px 16px; }
.drawer-body{ padding:16px; }
.drawer-foot{ padding:10px 16px; }
.modal{ border-radius:var(--radius); box-shadow:0 8px 24px rgba(15,23,42,.16); }
.price-editor, .home-cal-detail{ box-shadow:0 4px 12px rgba(15,23,42,.12); }
.undo-bar{ border-radius:var(--radius); box-shadow:0 4px 14px rgba(15,23,42,.2); }

/* 상단바 */
.topbar{ height:var(--topbar-h); padding:0 20px; gap:16px; }
.search-box{ height:var(--ctl-h); padding:0 12px; font-size:13px; border-radius:var(--radius-sm); }
.avatar{ width:26px; height:26px; }

/* ===== 3. 작은 메뉴: 사이드바·모듈 탭·화면 탭 ===== */
.sidebar{ width:var(--sidebar-w); padding:14px 0; }
.sidebar .logo{ padding:10px 16px 12px; margin-bottom:8px; }
#nav{ display:flex; flex-direction:column; gap:1px; padding:0 8px; }
.nav-item{ margin:0; padding:7px 10px; border-left:0; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--ink-muted); line-height:1.4; }
.nav-item:hover{ background:var(--row-hover); color:var(--ink); }
.nav-item.active{ background:var(--surface2); color:var(--ink); font-weight:700; }
.nav-item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
/* 하위 메뉴(지금은 평평한 목록이라 쓰는 곳 없음. 생기면 이 모양): 들여쓰기 + 왼쪽 세로선 */
.nav-sub{ margin:2px 0 4px 14px; padding-left:8px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:1px; }
.nav-sub .nav-item{ padding:6px 10px; font-size:13px; }
.sidebar-bottom{ padding:10px 16px 0; font-size:var(--fs-caption); }

/* 상단 모듈 전환 = 밑줄형 탭(참고 이미지 '통합 조회 | 빌링 결제') */
.topbar .module-switch{ gap:18px; align-self:stretch; }
.topbar .module-item{ display:inline-flex; align-items:center; padding:0 2px; border:0; border-bottom:2px solid transparent; border-radius:0;
  background:none; color:var(--ink-muted); font-size:14px; font-weight:600; }
.topbar .module-item:hover{ background:none; color:var(--ink); }
.topbar .module-item.active{ background:none; color:var(--ink); border-bottom-color:var(--ink); font-weight:700; }

/* 화면 안 탭(.tabs·회계 하위 탭·상품 항목 탭): 밑줄형, 선택은 진한 글자 + 강조색 밑줄 */
.tabs, .acct-tabs{ gap:2px; margin-bottom:14px; border-bottom-color:var(--border); }
.tab, .acct-tabs a{ padding:8px 12px; font-size:13.5px; font-weight:500; color:var(--ink-muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover, .acct-tabs a:hover{ color:var(--ink); }
.tab.active, .acct-tabs a.active{ color:var(--ink); border-bottom-color:var(--accent); font-weight:700; }
.item-tabs a{ padding:6px 10px; }

/* ===== 4. 버튼: 기본 32 · 작은 28 · 아주 작은 24, 둥근 정도 6px 통일. 위험은 빨강 ===== */
.btn{ padding:6px 12px; font-size:13px; line-height:18px; font-weight:500; border-radius:var(--radius-sm); border-color:var(--border-strong); }
.btn:hover:not(:disabled){ background:var(--row-hover); }
.btn.primary{ border-color:var(--accent); }
.btn.primary:hover:not(:disabled){ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-small{ padding:4px 10px; font-size:12.5px; line-height:18px; }
.btn-tiny{ padding:2px 8px; font-size:12px; line-height:18px; border-radius:5px; }
.btn-danger{ color:var(--danger); border-color:rgba(192,57,43,.35); }
.btn-danger:hover:not(:disabled){ background:var(--tone-red-bg); }
.btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.btn-row{ gap:6px; }

/* ===== 5. 입력칸·선택 상자: 필터 줄 높이 32px 통일 ===== */
.filter-bar{ gap:8px; margin-bottom:10px; }
.filter-bar input:not([type=checkbox]):not([type=radio]), .filter-bar select{
  height:var(--ctl-h); padding:0 10px; font-size:13px; border-color:var(--border-strong); border-radius:var(--radius-sm); }
.filter-bar textarea{ font-size:13px; border-radius:var(--radius-sm); }
.field{ margin-bottom:10px; font-size:var(--fs-caption); }
.field > span{ margin-bottom:3px; }
.field input:not([type=checkbox]):not([type=radio]), .field select{ min-height:var(--ctl-h); padding:5px 10px; font-size:13px; border-color:var(--border-strong); }
.field textarea{ padding:6px 10px; font-size:13px; border-color:var(--border-strong); }
.inline-select, .inline-input{ min-height:24px; padding:1px 6px; font-size:12.5px; border-color:var(--border-strong); border-radius:5px; }
.home-toolbar select, .home-quick-form input, .home-quick-form select, .home-done-search input{ border-color:var(--border-strong); }
.bulk-bar{ padding:6px 10px; border-radius:var(--radius-sm); }
:where(input, select, textarea):focus-visible{ outline:2px solid var(--focus-ring); outline-offset:0; }

/* ===== 6. 표: 촘촘하게(행 여백 6px), 머리줄 연한 회색, 가로 얇은 선만, 마우스 올리면 연한 강조 =====
   달력(FullCalendar .fc 안 표)은 뺀다(11-14 병합: 인테리어 달력 칸 높이·한 줄 1공정·오늘 주 스크롤이 디자인보다 우선). :where 라 선택자 우선순위는 그대로 */
table:not(:where(.fc *)){ border-color:var(--border); border-radius:var(--radius); }
thead th:not(:where(.fc *)){ padding:var(--cell-py) var(--cell-px); background:var(--table-head-bg); font-size:var(--fs-head); font-weight:600; line-height:1.4;
  color:var(--ink-muted); border-bottom:1px solid var(--border); }
tbody td:not(:where(.fc *)){ padding:var(--cell-py) var(--cell-px); font-size:var(--fs-table); line-height:1.45; border-bottom:1px solid var(--border-soft); }
tbody tr:not(:where(.fc *)):hover{ background:var(--row-hover); }
.empty-row td{ padding:18px 12px; }
th.col-check, td.col-check{ padding-left:6px; padding-right:6px; }
.table-footer{ margin-top:6px; }
.pager{ gap:6px; }
thead th.sortable::after{ font-size:9px; }

/* ===== 7. 상태 배지: 작은 둥근 배지(12px), 연한 바탕 + 진한 글자. 코드표 badge_class 의 색 뜻은 유지 ===== */
.badge, .badge-plain{ gap:4px; padding:1px 7px; font-size:var(--fs-caption); font-weight:600; line-height:18px; border-radius:var(--badge-radius); }
.badge::before{ display:none; }   /* 점 없이 글자만(참고 이미지처럼). 색 + 글자로 구분된다 */
.b-po{ background:var(--tone-gray-bg); color:var(--tone-gray-ink); }                       /* 발주: 시작 전(중립) */
.b-transit{ background:var(--tone-blue-bg); color:var(--tone-blue-ink); }                  /* 운송: 진행 */
.b-received{ background:var(--tone-blue-bg); color:var(--tone-blue-ink); border:1px dashed var(--tone-blue-ink); }
.b-stock{ background:var(--tone-green-bg); color:var(--tone-green-ink); }                  /* 입고: 완료 계열 */
.b-done{ background:var(--tone-teal-bg); color:var(--tone-teal-ink); }                     /* 완료: 완료 계열(청록, 입고와 구분) */
.b-label-wait{ background:var(--tone-amber-bg); color:var(--tone-amber-ink); border:1px dashed var(--tone-amber-ink); } /* 대기 */
.b-ship-wait{ background:var(--tone-amber-bg); color:var(--tone-amber-ink); font-weight:700; }                        /* 대기 */
.b-disposed{ background:var(--tone-gray-bg); color:var(--tone-gray-ink); }                 /* 폐기: 취소선 유지 */
.b-hold{ background:var(--tone-purple-bg); color:var(--tone-purple-ink); }                 /* 보류: 기존 보라 유지(발주 회색과 구분) */
.badge-plain{ background:var(--tone-gray-bg); color:var(--tone-gray-ink); }
.badge-plain.ok{ color:var(--tone-green-ink); }
/* 같은 모양의 작은 표식들: 둥근 정도·글자 크기만 맞춘다(색 뜻은 그대로) */
.kpi-chip, .source-chip, .currency-chip, .phase-tag, .acct-note-chip, .acct-st-flag, .acct-sim-tier, .home-assign-chip{ border-radius:var(--badge-radius); }
.chip-blue{ background:var(--tone-blue-bg); color:var(--tone-blue-ink); }
.chip-green{ background:var(--tone-green-bg); color:var(--tone-green-ink); }
.chip-amber{ background:var(--tone-amber-bg); color:var(--tone-amber-ink); }
.chip-teal{ background:var(--tone-teal-bg); color:var(--tone-teal-ink); }
.chip-red{ background:var(--tone-red-bg); color:var(--tone-red-ink); }
.source-SERIES{ background:var(--tone-blue-bg); color:var(--tone-blue-ink); }
.source-MODEL{ background:var(--tone-amber-bg); color:var(--tone-amber-ink); }
.source-MODEL_DIRECT{ background:var(--tone-purple-bg); color:var(--tone-purple-ink); }
.source-BRAND{ background:var(--tone-teal-bg); color:var(--tone-teal-ink); }
.currency-chip, .phase-tag{ background:var(--tone-amber-bg); color:var(--tone-amber-ink); }
.acct-note-chip.pending{ background:var(--tone-blue-bg); color:var(--tone-blue-ink); }
.acct-note-chip.done{ background:var(--tone-green-bg); color:var(--tone-green-ink); }
.acct-sim-tier.tier-high{ background:var(--tone-green-bg); border-color:transparent; color:var(--tone-green-ink); }
.acct-sim-tier.tier-mid{ background:var(--tone-amber-bg); border-color:transparent; color:var(--tone-amber-ink); }
.acct-st-flag[data-st=review], .acct-st-flag[data-st=review_needed]{ color:var(--tone-amber-ink); border-color:var(--tone-amber-ink); }
.acct-st-flag[data-st=unclassified]{ color:var(--tone-red-ink); border-color:var(--tone-red-ink); }
.tier-fallback-note, .fo-noen, .fo-unassigned-note{ color:var(--tone-amber-ink); }
td.margin-low, .margin-low{ color:var(--tone-amber-ink); }
td.margin-negative, .margin-negative{ color:var(--tone-red-ink); }

/* ===== 8. 칩(단계·건수·기간·사업장): 선택 = 어두운 바탕, 나머지 = 연한 테두리 ===== */
.chip-filter{ gap:6px; margin-bottom:10px; }
.chip-filter span, .sub-chip, .acct-pl-period, .acct-pl-group, .acct-pl-chip{
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; min-height:28px; font-size:12.5px; font-weight:500; line-height:1.4;
  color:var(--ink); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); }
.chip-filter span:hover, .acct-pl-period:hover, .acct-pl-group:hover, .acct-pl-chip:hover{ background:var(--row-hover); }
.chip-filter span.active, .acct-pl-period.active, .acct-pl-group.active, .acct-pl-chip.active{
  color:var(--chip-on-ink); background:var(--chip-on-bg); border-color:var(--chip-on-bg); font-weight:600; }
.chip-filter span:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:1px; }
.acct-pl-chip input{ accent-color:var(--chip-on-ink); }
/* 둘 중 하나 고르는 버튼 묶음(홈 범위·견적 할인 방식)도 같은 규칙 */
.home-scope{ border-color:var(--border-strong); }
.home-scope-btn.on{ background:var(--chip-on-bg); color:var(--chip-on-ink); }
.gantt-controls .btn.active{ background:var(--chip-on-bg); color:var(--chip-on-ink); border-color:var(--chip-on-bg); }

/* 로그인 */
.login-card{ border-radius:var(--radius); padding:24px; }
.login-card h1{ font-size:18px; }

/* =====================================================================
   휴대폰(768px 이하): 위에서 바꾼 속성 중 app.css 휴대폰 규칙이 정하던 값을 다시 정한다.
   터치 칸 36px 이상(버튼·입력칸은 기존 44px 유지), 입력 글자 16px(iOS 자동 확대 방지)
   ===================================================================== */
@media (max-width:768px){
  .content{ padding:12px 12px calc(24px + env(safe-area-inset-bottom)); }
  .topbar{ height:auto; padding:8px 12px; gap:8px 10px; }
  .topbar .module-switch{ align-self:auto; gap:14px; }
  .topbar .module-item{ min-height:40px; }
  /* 상단바(위에 붙어 있음)는 낮게: ☰·모듈 탭·아바타·로그아웃을 먼저 놓고, 검색칸은 80px 이상 남으면 같은 줄, 아니면 아래 줄 전체 폭 */
  .topbar-right{ order:2; }
  .search-box{ order:3; height:auto; min-height:44px; flex:1 1 0; min-width:80px; }
  .page-title h1{ font-size:19px; }
  .sidebar{ width:78%; max-width:300px; }
  #nav{ padding:0 8px; }
  .nav-item{ padding:10px 12px; font-size:14.5px; }
  .btn, .btn-small, .btn-tiny{ padding:8px 14px; font-size:14px; line-height:1.4; }
  .filter-bar input:not([type=checkbox]):not([type=radio]), .filter-bar select,
  .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
  .inline-input, .inline-select{ font-size:16px; height:auto; }
  /* 위 PC 규칙(.field input min-height 32px)이 선택자가 더 구체적이라 app.css 휴대폰 44px 를 눌렀다(11-14 병합 때 인테리어 휴대폰 시험이 찾음) → 44px 로 되돌린다 */
  .field input:not([type=checkbox]):not([type=radio]), .field select{ min-height:44px; }
  .inline-input, .inline-select{ min-height:36px; padding:4px 8px; } /* 표 안 입력·선택: 손가락 칸 36px(전 44px) */
  .chip-filter span, .sub-chip, .acct-pl-period, .acct-pl-group, .acct-pl-chip{ min-height:36px; padding:4px 12px; font-size:13px; }
  .tab, .acct-tabs a{ padding:8px 12px; }
  .home-scope-btn{ min-height:36px; }
  /* 카드형 목록: 카드 사이·줄 사이 간격을 줄인다 */
  table[data-cards]:not([data-scroll]) tr{ margin-bottom:8px; padding:4px 12px; border-radius:var(--radius); }
  table[data-cards]:not([data-scroll]) td{ padding:6px 0; border-bottom-color:var(--border-soft); }
}
@media (max-width:480px){
  .content{ padding:10px 10px calc(20px + env(safe-area-inset-bottom)); }
  .page-title h1{ font-size:18px; }
  .panel{ padding:12px; }
  .kpi-card{ padding:12px 10px; }
  .kpi-num{ font-size:22px; }
  .login-card{ padding:22px 18px; }
}