@charset "UTF-8";
/* =========================================================================
   현장업무관리 V2 — 공용 디자인 시스템
   역할별 적응형 콘솔 (Role-adaptive Console)

   - 테마 3종: light / dark / hc(야외 고대비)
   - 디바이스: mobile(<768) / tablet(768~1023) / desktop(>=1024)
   - 역할: body[data-role="ADMIN|USER|PARTNER|TECH|TEAM"]

   이 파일 하나만 수정하면 전 화면에 반영됩니다.
   화면별 <style> 블록을 다시 만들지 마세요.
   ========================================================================= */

/* =========================================================================
   1. 디자인 토큰
   ========================================================================= */
:root {
  /* 브랜드 — 단일 블루로 통일 (기존 #3498db/#2b8cff/#2563eb 혼용 정리) */
  --brand:        #2563eb;
  --brand-hover:  #1d4ed8;
  --brand-weak:   #eff4ff;
  --brand-border: #1d4ed8;

  /* 표면 */
  --bg:        #f5f7fa;
  --surface:   #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f1f5f9;

  /* 텍스트 — 현장 햇빛 대비 위해 충분히 진하게 */
  --text:       #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;
  --text-on-brand: #ffffff;

  /* 경계 */
  --line:        #e2e8f0;
  --line-strong: #cbd5e1;

  /* 상태 (대기/완료/보류) */
  --wait:      #b45309;
  --wait-bg:   #fffbeb;
  --wait-line: #fcd34d;

  --done:      #15803d;
  --done-bg:   #f0fdf4;
  --done-line: #86efac;

  --hold:      #c2410c;
  --hold-bg:   #fff7ed;
  --hold-line: #fdba74;

  /* 의미 색 */
  --danger:      #dc2626;
  --danger-bg:   #fef2f2;
  --danger-line: #fca5a5;

  --warn:        #ea580c;
  --warn-bg:     #fff7ed;
  --warn-line:   #fdba74;

  --ok:          #16a34a;
  --ok-bg:       #f0fdf4;
  --ok-line:     #86efac;

  --info:        #0284c7;
  --info-bg:     #f0f9ff;
  --info-line:   #7dd3fc;

  /* 역할 배지 */
  --role-admin:   #dc2626;
  --role-user:    #16a34a;
  --role-partner: #7c3aed;
  --role-tech:    #ea580c;
  --role-team:    #0d9488;

  /* 셸(헤더/사이드바) */
  --shell:        #0f172a;
  --shell-2:      #1e293b;
  --shell-text:   #e2e8f0;
  --shell-muted:  #94a3b8;
  --shell-active: #2563eb;

  /* 타이포 — 단일 스케일 (기존 13/15/16px 혼용 정리) */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
          "맑은 고딕", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;   /* 본문 기준 */
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 라운드 — 단일 스케일 (기존 6/8/10/12px 혼용 정리) */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 2px 8px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);

  /* 터치 타깃 — WCAG/Apple HIG 최소 44px */
  --tap:    44px;
  --tap-sm: 38px;

  /* 레이아웃 */
  --sidebar-w: 224px;
  --topbar-h:  56px;
  --tabbar-h:  60px;
  --content-max: 1360px;

  --focus: 0 0 0 3px rgba(37, 99, 235, .35);
  color-scheme: light;
}

/* ---------- 다크 모드 ---------- */
[data-theme="dark"] {
  --brand:        #3b82f6;
  --brand-hover:  #60a5fa;
  --brand-weak:   #1e293b;
  --brand-border: #3b82f6;

  --bg:        #0b1120;
  --surface:   #111827;
  --surface-2: #1f2937;
  --surface-3: #263244;

  --text:       #f1f5f9;
  --text-muted: #cbd5e1;
  --text-faint: #94a3b8;

  --line:        #2b3648;
  --line-strong: #3f4d63;

  --wait:      #fcd34d;  --wait-bg:   #2c2410;  --wait-line: #a16207;
  --done:      #6ee7a8;  --done-bg:   #10261a;  --done-line: #15803d;
  --hold:      #fdba74;  --hold-bg:   #2c1c10;  --hold-line: #c2410c;

  --danger:    #f87171;  --danger-bg: #2a1215;  --danger-line: #b91c1c;
  --warn:      #fb923c;  --warn-bg:   #2c1c10;  --warn-line:   #c2410c;
  --ok:        #4ade80;  --ok-bg:     #10261a;  --ok-line:     #15803d;
  --info:      #38bdf8;  --info-bg:   #0c2233;  --info-line:   #0369a1;

  --shell:        #060b16;
  --shell-2:      #111827;
  --shell-text:   #e2e8f0;
  --shell-muted:  #94a3b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 8px rgba(0, 0, 0, .55);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6);

  --focus: 0 0 0 3px rgba(96, 165, 250, .45);
  color-scheme: dark;
}

/* ---------- 야외 고대비 모드 (직사광선 아래 현장용) ----------
   순수 흑/백 + 굵은 테두리 + 최대 대비.
   장식(그림자/미묘한 톤)을 전부 버리고 가독성만 남깁니다. */
[data-theme="hc"] {
  --brand:        #0b3fd4;
  --brand-hover:  #072ea0;
  --brand-weak:   #ffffff;
  --brand-border: #000000;

  --bg:        #ffffff;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f0f0f0;

  --text:       #000000;
  --text-muted: #000000;
  --text-faint: #262626;

  --line:        #000000;
  --line-strong: #000000;

  --wait:      #8a4b00;  --wait-bg:   #ffe9b8;  --wait-line: #000000;
  --done:      #005f22;  --done-bg:   #c6f5d4;  --done-line: #000000;
  --hold:      #8a2b00;  --hold-bg:   #ffdcc4;  --hold-line: #000000;

  --danger:    #b30000;  --danger-bg: #ffd4d4;  --danger-line: #000000;
  --warn:      #8a4b00;  --warn-bg:   #ffe9b8;  --warn-line:   #000000;
  --ok:        #005f22;  --ok-bg:     #c6f5d4;  --ok-line:     #000000;
  --info:      #00457a;  --info-bg:   #cfe9ff;  --info-line:   #000000;

  --shell:        #000000;
  --shell-2:      #000000;
  --shell-text:   #ffffff;
  --shell-muted:  #ffffff;
  --shell-active: #0b3fd4;

  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: none;

  --r-sm: 6px;
  --r-md: 6px;
  --r-lg: 8px;

  /* 야외에서는 터치도 더 크게 (장갑 착용 고려) */
  --tap:    52px;
  --tap-sm: 46px;

  --focus: 0 0 0 4px #0b3fd4;
  color-scheme: light;
}

[data-theme="hc"] body { font-weight: 600; }
[data-theme="hc"] .card,
[data-theme="hc"] .task-card,
[data-theme="hc"] .dash-item,
[data-theme="hc"] .section { border-width: 2px; }
[data-theme="hc"] .btn { border-width: 2px; font-weight: 800; }
[data-theme="hc"] input,
[data-theme="hc"] select,
[data-theme="hc"] textarea { border-width: 2px; }

/* =========================================================================
   2. 리셋 / 기본
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

/* 키보드 사용자에게만 포커스 링 */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 본문 바로가기 (키보드 접근성) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand); color: #fff; font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
   3. 앱 셸 — 역할별 적응형 레이아웃
   데스크톱: 좌측 사이드바 + 상단바 + 본문
   모바일:   상단바 + 본문 + 하단 탭바
   ========================================================================= */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- 상단바 ---------- */
.app-topbar,
.layout-header {                    /* 기존 클래스 호환 */
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding: var(--sp-2) var(--sp-4);
  padding-top: calc(var(--sp-2) + env(safe-area-inset-top));
  background: var(--shell);
  color: var(--shell-text);
  box-shadow: var(--shadow);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.topbar-title,
.layout-header-title {              /* 기존 클래스 호환 */
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--shell-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right,
.layout-header-right {              /* 기존 클래스 호환 */
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--shell-muted);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}
.topbar-user strong { color: var(--shell-text); font-weight: 700; }

/* 모바일에서는 상단바의 계정 텍스트/부가 링크를 숨기고 탭바로 넘김 */
@media (max-width: 767px) {
  .topbar-user span:first-child { display: none; }  /* "접속 계정:" 라벨 */
  .topbar-right .hide-mobile,
  .layout-header-right .hide-mobile { display: none !important; }
}

/* ---------- 사이드바 (데스크톱 전용) ---------- */
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.app-sidebar {
  display: none;                    /* 모바일 기본 숨김 */
  flex-direction: column;
  gap: var(--sp-1);
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-3);
  background: var(--shell-2);
  border-right: 1px solid rgba(255, 255, 255, .07);
}

.nav-section {
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3) var(--sp-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--shell-muted);
  opacity: .7;
}
.nav-section:first-child { margin-top: 0; }

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--shell-muted);
  transition: background .12s, color .12s;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); color: var(--shell-text); }
.nav-link.is-active {
  background: var(--shell-active);
  color: #fff;
  font-weight: 700;
}
.nav-link .nav-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-link .nav-count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-foot { margin-top: auto; padding-top: var(--sp-4); }

/* ---------- 본문 ---------- */
.app-main,
.layout-main {                      /* 기존 클래스 호환 */
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-4);
  /* 모바일 하단 탭바에 가리지 않도록 */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-5));
}

/* ---------- 하단 탭바 (모바일 전용) ---------- */
.app-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .10);
}

.tab-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap);
  padding: var(--sp-1);
  /* "더보기"는 <button>이라 UA 기본 테두리/배경이 새어 나옵니다 */
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
}
.tab-link .tab-ico { font-size: 20px; line-height: 1; }
.tab-link.is-active { color: var(--brand); font-weight: 800; }
.tab-link.is-active .tab-ico { transform: translateY(-1px); }

/* 데스크톱: 사이드바 켜고 탭바 끔 */
@media (min-width: 1024px) {
  .app-sidebar { display: flex; }
  .app-tabbar  { display: none; }
  .app-main,
  .layout-main {
    padding: var(--sp-5);
    padding-bottom: var(--sp-8);
  }
}

/* PARTNER는 데스크톱에서도 사이드바 없이 단일 컬럼 —
   현장 담당자는 메뉴가 아니라 "내 업무" 하나만 필요합니다. */
body[data-role="PARTNER"] .app-sidebar { display: none; }

/* ---------- 모바일 드로어 (전체 메뉴) ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: min(84vw, 300px);
  padding: var(--sp-4) var(--sp-3);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  background: var(--shell-2);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  animation: drawer-in .18s ease-out;
}

@keyframes drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.drawer[hidden], .drawer-backdrop[hidden] { display: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.drawer-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--shell-text);
}
.drawer-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
}

/* 데스크톱에는 사이드바가 있으므로 드로어가 필요 없습니다 */
@media (min-width: 1024px) {
  .drawer, .drawer-backdrop { display: none !important; }
}

/* 드로어가 열린 동안 배경 스크롤 잠금 */
body.drawer-open { overflow: hidden; }

/* =========================================================================
   4. 카드
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.card-subtitle {
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 접을 수 있는 카드 — PARTNER 모바일에서 대시보드를 기본 접어둡니다 */
details.card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-1) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  font-weight: 700;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
  content: "▾";
  font-size: var(--fs-sm);
  color: var(--text-faint);
  transition: transform .15s;
}
details.card[open] > summary::after { transform: rotate(180deg); }
details.card[open] > summary { margin-bottom: var(--sp-3); }

/* 데스크톱에서는 접지 않고 항상 펼칩니다.
   (검색·통계는 PC에선 상시 필요하고, 폰에선 목록을 가리는 방해물입니다.)
   브라우저 기본 스타일 details:not([open]) > *:not(summary){display:none}을
   작성자 스타일로 덮어씁니다. */
@media (min-width: 1024px) {
  details.expand-desktop > summary { display: none; }
  details.expand-desktop > .details-body { display: block !important; }
}

/* =========================================================================
   5. 버튼 — 전 화면 통일. 최소 44px 터치 타깃.
   ========================================================================= */
.btn,
.btn-header,
.nav-btn,
.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover,
.btn-header:hover,
.nav-btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand-border);
  color: var(--text-on-brand);
  font-weight: 700;
}
.btn-primary:hover { background: var(--brand-hover); }

.btn-secondary {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-secondary:hover { background: var(--line); }

.btn-danger,
.btn-red {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-weight: 700;
}
.btn-danger:hover,
.btn-red:hover { filter: brightness(.92); }

/* 셸(어두운 헤더/사이드바) 위의 버튼 */
.btn-ghost,
.btn-header {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  color: var(--shell-text);
  font-weight: 600;
}
.btn-ghost:hover,
.btn-header:hover { background: rgba(255, 255, 255, .20); }

.btn-excel {
  background: var(--done) !important;
  border-color: var(--done) !important;
  color: #fff !important;
  font-weight: 700;
}
.btn-kakao {
  background: #fee500 !important;
  border-color: #d4bf00 !important;
  color: #191600 !important;
  font-weight: 700;
}

.btn-sm,
.btn-mini {
  min-height: var(--tap-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
}
.btn-mini { background: var(--brand); border-color: var(--brand-border); color: #fff; font-weight: 700; }
.btn-open { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }

.btn-block { width: 100%; }

.btn-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { background: transparent; color: var(--brand-hover); }

/* 아이콘 전용 버튼 (테마 토글 등) */
.btn-icon {
  min-height: var(--tap);
  width: var(--tap);
  padding: 0;
  font-size: 17px;
}

/* 모바일: 버튼 더 크게 (장갑 낀 손 고려) */
@media (max-width: 767px) {
  .btn { min-height: 48px; font-size: var(--fs-md); }
  .btn-sm, .btn-mini { min-height: var(--tap); font-size: var(--fs-sm); }
  .btn-icon { width: 48px; }
}

/* =========================================================================
   6. 폼
   ========================================================================= */
label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -.01em;
}

input[type="text"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  /* 라벨(제목)이 놓인 카드 배경과 구분되도록 입력창은 옅은 채움 */
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  /* 16px 미만이면 iOS Safari가 포커스 시 화면을 확대해버립니다 */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
}

@media (min-width: 768px) {
  input[type="text"], input[type="tel"], input[type="password"],
  input[type="date"], input[type="number"], input[type="email"],
  input[type="datetime-local"], select, textarea { font-size: var(--fs-sm); }
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);   /* 입력 중인 칸은 흰색으로 또렷하게 */
  box-shadow: var(--focus);
}

/* 스택형 폼(라벨+입력 반복)에서 입력창과 다음 항목 제목 사이 그룹 간격 */
input:not([type="checkbox"]):not([type="radio"]) + label,
select + label,
textarea + label {
  margin-top: var(--sp-4);
}

/* 입력값과 제목이 헷갈리지 않도록 placeholder는 옅게 */
input::placeholder,
textarea::placeholder { color: var(--text-faint); opacity: 1; }

input[readonly], input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-3);
  color: var(--text-muted);
  cursor: default;
}

textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

/* 현장 처리결과 등 주 입력 textarea: 스마트폰에서 크고 편하게 */
.textarea-lead { min-height: 160px; font-size: var(--fs-md); line-height: 1.6; }
@media (max-width: 767px) {
  .textarea-lead { min-height: 200px; font-size: 17px; }
}

select {
  appearance: none;
  padding-right: var(--sp-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 12px;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 필수 표시 */
.req::after { content: " *"; color: var(--danger); font-weight: 800; }

.hint, .fetch-status, .sub-hint {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}
.fetch-status.ok  { color: var(--ok); font-weight: 600; }
.fetch-status.err { color: var(--danger); font-weight: 600; }

/* 폼 그리드 — 기존 .form-col-6 / .form-col-12 호환 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-4);
}
.form-col-6  { grid-column: span 1; width: auto; }
.form-col-12 { grid-column: 1 / -1; width: auto; }
.form-row { margin: 0; }
.form-actions,
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* 기존 .form-group (user_manage) */
.form-group { min-width: 0; }
.form-group-wide { grid-column: 1 / -1; }

.inline-flex { display: flex; gap: var(--sp-2); align-items: center; }
.inline-flex > input { flex: 1; min-width: 0; }

/* 모바일: 폼 1열 */
@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-col-6 { grid-column: 1 / -1; }
  .form-footer,
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-footer .btn,
  .form-actions .btn { width: 100%; }
}

/* 검색 바 */
.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
.search-item { min-width: 0; }
.search-item label { font-size: var(--fs-xs); }
.search-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .search-grid { grid-template-columns: 1fr 1fr; }
  .search-item.is-wide { grid-column: 1 / -1; }
  .search-actions { grid-column: 1 / -1; }
  .search-actions .btn { flex: 1; }
}

/* =========================================================================
   7. 배지 / 태그 / 상태
   ========================================================================= */
.badge-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.badge-role.ADMIN   { background: var(--role-admin); }
.badge-role.USER    { background: var(--role-user); }
.badge-role.PARTNER { background: var(--role-partner); }
.badge-role.TECH    { background: var(--role-tech); }
.badge-role.TEAM    { background: var(--role-team); }

/* 상태 태그 — 색 + 테두리 + 텍스트로 삼중 표기 */
.tag-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.tag-wait { background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait); }
.tag-done { background: var(--done-bg); border-color: var(--done-line); color: var(--done); }
.tag-hold { background: var(--hold-bg); border-color: var(--hold-line); color: var(--hold); }

.remote-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
}
.remote-badge.REQUESTED   { background: var(--warn); }
.remote-badge.IN_PROGRESS { background: var(--brand); }
.remote-badge.DONE        { background: var(--done); }
.remote-badge.UNKNOWN     { background: var(--text-faint); }

/* =========================================================================
   8. 알림 (플래시 / 메시지)
   ========================================================================= */
.flash, .msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--info-line);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--info-bg);
  color: var(--info);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.flash-success, .msg.success, .msg.ok {
  background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok);
}
.flash-error, .msg.error, .msg.err {
  background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger);
}
.flash-warn, .msg.warn {
  background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn);
}

/* =========================================================================
   9. KPI / 대시보드 지표
   ========================================================================= */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.dash-item, .kpi .item {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.dash-label, .kpi .item .k {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.dash-value, .kpi .item .v {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  /* 숫자 자릿수가 바뀌어도 폭이 흔들리지 않게 */
  font-variant-numeric: tabular-nums;
}

.dash-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.dash-chip {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-chip-warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }
.dash-chip-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }

/* =========================================================================
   dashboard.php 전용 — 업로드/옵션 폼, KPI, 히트맵
   (화면 인라인 <style> 제거분을 공용 CSS로 이관. 대부분 .dashboard 로 스코프)
   ========================================================================= */
.kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.kpi .item .s { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); }

.dashboard .card h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 800; }

/* 폼 필드: 라벨 위 / 입력 아래 세로 정렬 (.pill 은 제외) */
.dashboard .row > div:not(.pill) { display: flex; flex-direction: column; gap: 6px; }
.dashboard .row label { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }

/* 체크박스 알약 */
.dashboard .pill {
  display: flex; align-items: center; gap: 8px;
  padding: 0 var(--sp-3); min-height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.dashboard .pill label {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}

/* 히트맵 */
.dashboard .heat-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.dashboard .mini {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.dashboard .mini-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.dashboard .mini-head .name { font-weight: 800; }
.dashboard .mini-head .meta { font-size: var(--fs-xs); color: var(--text-muted); }

.dashboard .heat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dashboard .heat-table { min-width: 900px; }
.dashboard .heat-table th,
.dashboard .heat-table td {
  padding: 5px 6px; font-size: 11px; text-align: center; white-space: nowrap;
}
.dashboard .heat-table td.dow {
  font-weight: 800; background: var(--surface-2);
  position: sticky; left: 0; z-index: 1;
}

.dashboard .legend {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.dashboard .legend .dot {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--line); display: inline-block;
}

@media (max-width: 767px) {
  .kpi { grid-template-columns: 1fr 1fr; }
}

/* 입출고 IN/OUT 배지 (재고 화면 공용) */
.io-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.io-badge.IN  { background: var(--ok); }
.io-badge.OUT { background: var(--danger); }

/* 재고/시리얼 이동 화면 공용 (stock_move / serial_trace / item) */
.box {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--surface-2);
}
.list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.list li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-top: var(--sp-2);
}
.tx-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-full);
  font-size: 11px; color: #fff; font-weight: 800;
}
.tx-badge.b1 { background: var(--ok); }
.tx-badge.b2 { background: var(--brand); }
.tx-badge.b3 { background: var(--warn); }
.tx-badge.b4 { background: var(--text-muted); }

/* 원격지원 상태 텍스트 색 */
.status-OPEN { color: var(--warn); font-weight: 600; }
.status-DONE { color: var(--ok); font-weight: 600; }
.status-REQUESTED   { color: var(--warn); font-weight: 600; }
.status-IN_PROGRESS { color: var(--brand); font-weight: 600; }
.status-CANCELED    { color: var(--text-muted); font-weight: 600; }
.box-gray { background: var(--surface-3); }

/* 태그 pill (유사사례 검색 등) */
.tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: 11px; margin-right: 4px; }
.tag.done { background: var(--done-bg); color: var(--done); }
.tag.plan { background: var(--warn-bg); color: var(--warn); }
.tag.unk  { background: var(--danger-bg); color: var(--danger); }
.mono { font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* 정보 나열(라벨:값) — task_edit_content 등 */
.info-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.info-item { min-width: 200px; }
.info-label { color: var(--text-muted); }
.info-value { font-weight: 500; color: var(--text); }

/* 작은 보조 텍스트 (원격지원 화면 등) */
.small { font-size: var(--fs-xs); color: var(--text-faint); }

/* 자동갱신 옵션 박스 (기술지원 대시보드) */
.refresh-box {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.refresh-box label { margin: 0; }

/* 모바일: KPI 2열 */
@media (max-width: 767px) {
  .dash-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .dash-item { padding: var(--sp-2); }
  .dash-value { font-size: var(--fs-xl); }
  .dash-chip-row { display: none; }   /* 좁은 화면에선 숫자만 */
}

/* =========================================================================
   10. 테이블 — 데스크톱은 고밀도, 모바일은 카드로 변환
   ========================================================================= */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

table, .middle-table, .data-table, .heat-table, .remote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

th, td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }

td.num, .td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-pre { white-space: pre-wrap; min-width: 240px; }

/* --- 모바일: 테이블 → 카드 ---
   <td data-label="컬럼명">을 붙이면 라벨이 자동으로 붙습니다.
   data-label이 없는 표는 가로 스크롤로 유지됩니다(.table-wrap). */
@media (max-width: 767px) {
  .table-card thead { display: none; }
  .table-card, .table-card tbody, .table-card tr, .table-card td { display: block; width: 100%; }

  .table-card tr {
    margin-bottom: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
  }
  .table-card tr:hover { background: var(--surface); }

  .table-card td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: normal;
  }
  .table-card td:last-child { border-bottom: 0; }

  .table-card td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
  }
  /* 라벨이 없는 칸(액션 버튼 등)은 전체 폭 사용 */
  .table-card td[data-label=""]::before,
  .table-card td:not([data-label])::before { content: none; }
  .table-card td.cell-actions {
    justify-content: stretch;
    gap: var(--sp-2);
    background: var(--surface-2);
  }
  .table-card td.cell-actions .btn { flex: 1; }
}

/* =========================================================================
   11. 업무 카드 / 작업 큐 — 현장(PARTNER) 핵심 화면
   ========================================================================= */
.task-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.task-card {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* SLA 상태를 좌측 컬러 바로 — 스캔할 때 가장 먼저 보이는 위치 */
.task-card.sla-danger { border-left-color: var(--danger); background: var(--danger-bg); }
.task-card.sla-warn   { border-left-color: var(--warn);   background: var(--warn-bg); }

.task-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.task-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.task-meta {
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.task-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-2);
  align-items: start;
  padding: var(--sp-1) 0;
}
.task-k { font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
.task-v { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.muted, .text-muted { color: var(--text-faint); font-weight: 400; }

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.task-actions form { display: contents; }

.sla-remain {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-1);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sla-remain.danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.sla-remain.warn   { background: var(--warn-bg);   border-color: var(--warn-line);   color: var(--warn); }

.task-detail { display: none; }
.task-detail.is-open { display: block; }

/* ---------- 모바일 (PARTNER 주 사용 환경) ----------
   액션 버튼을 큼직하게. "처리"가 주 동작이므로 폭을 더 줍니다. */
@media (max-width: 767px) {
  .task-card { padding: var(--sp-3); }
  .task-actions > .btn,
  .task-actions form > .btn { flex: 1 1 calc(50% - var(--sp-1)); }
  .task-actions > .btn-primary,
  .task-actions form > .btn-primary { flex: 1 1 100%; order: 99; }
}

/* ---------- 데스크톱: 고밀도 리스트 행 ----------
   한 행에 [가맹점/상태] [요약] [액션] 을 나란히. 스캔 속도 우선. */
@media (min-width: 1024px) {
  .task-body {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr auto;
    gap: var(--sp-4);
    align-items: start;
  }
  .task-card { padding: var(--sp-3) var(--sp-4); box-shadow: none; }
  .task-card-header {
    margin-bottom: 0;
    padding-right: var(--sp-4);
    border-right: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }
  .task-summary { min-width: 0; }
  .task-row { grid-template-columns: 76px 1fr; padding: 2px 0; }
  .task-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
  .task-actions .btn { min-height: var(--tap-sm); font-size: var(--fs-xs); }

  /* PC에서 전화 버튼은 무의미합니다 */
  .btn-call { display: none !important; }

  .task-detail.is-open {
    grid-column: 1 / -1;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--line);
  }
}

/* =========================================================================
   12. 기타 컴포넌트
   ========================================================================= */
.section {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.section-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.section-title { font-size: var(--fs-md); font-weight: 700; }
.section-hint  { font-size: var(--fs-xs); color: var(--text-faint); }

/* 키-값 표시 */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.kv .item {
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.kv .k { font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
.kv .v { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text); white-space: pre-wrap; }

/* 본문 성격의 값 강조(접수내용 등): 스마트폰에서 읽기 편하게 크게 */
.kv .v.v-lead {
  font-size: var(--fs-lg);
  line-height: 1.7;
  font-weight: 600;
  word-break: break-word;
}
@media (max-width: 767px) {
  .kv .v.v-lead { font-size: var(--fs-xl); line-height: 1.75; }
}

/* 2열 그리드 */
.middle-grid, .grid.two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.middle-col { min-width: 0; }
.middle-col h3 { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-2); }

/* 첨부 목록 */
.attach-list { list-style: none; padding: 0; margin: 0; }
.attach-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.attach-list li:last-child { border-bottom: 0; }
.attach-link { font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.attach-link:hover { text-decoration: underline; }
.attach-date { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }

/* 빈 상태 */
.empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-faint);
}
.empty-ico { font-size: 36px; opacity: .35; margin-bottom: var(--sp-2); }
.empty-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-muted); }
.empty-desc  { margin-top: var(--sp-1); font-size: var(--fs-sm); }

/* 서명 패드 */
.sign-wrap { position: relative; }
#sign-pad {
  display: block;
  width: 100%;
  height: 220px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;   /* 서명은 항상 흰 바탕 — 다크에서도 유지 */
  /* 기본은 세로 스크롤 허용 → 폼 스크롤 중 서명란에 닿아도 스크롤됨 */
  touch-action: pan-y;
}
/* 서명 모드(armed)에서만 스크롤을 막고 그리기 전용으로 전환 */
.sign-wrap.armed #sign-pad { touch-action: none; border-color: var(--brand); box-shadow: var(--focus); }

/* 잠금 오버레이: 탭하면 서명 시작, 미서명 시 스크롤은 이 위에서도 가능 */
.sign-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.55);
  color: var(--text-muted);
  font-weight: 800;
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.sign-wrap.armed .sign-lock-overlay { display: none; }
.sign-tools { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.sign-preview {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.sign-preview img { display: block; border-radius: var(--r-sm); background: #fff; }

/* 업무 상세 상단 요약 */
.info {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.info-small {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: pre-wrap;
}

/* ---------- 첨부 사진 썸네일 ---------- */
.thumb-grid,
.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.thumb,
.photo-prev {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.thumb img,
.photo-prev img {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: cover;
  background: var(--surface-3);
}

.thumb .cap,
.photo-prev .meta {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
  word-break: break-all;
}
.thumb .cap .fn,
.photo-prev .meta .fn { font-weight: 700; color: var(--text); }
.thumb .cap .dl { margin-top: var(--sp-2); }
.thumb .cap .dl a { color: var(--brand); font-weight: 700; }
.thumb .cap .dl a:hover { text-decoration: underline; }

/* 업로드 예정 사진 삭제 버튼 — 터치 타깃 확보 */
.photo-prev .rm {
  position: absolute;
  right: var(--sp-2);
  top: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.photo-pick-wrap { margin-top: var(--sp-3); }
.photo-inputs-hidden input[type="file"] { display: block; margin-top: var(--sp-2); }
.photo-limit {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ---------- 원격지원 이력 ----------
   모바일은 카드, 데스크톱(>=1024)은 표. */
.remote-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.remote-count { font-size: var(--fs-xs); color: var(--text-faint); }

.remote-cards { display: block; }
.remote-table-wrap { display: none; }

.remote-card {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.remote-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.remote-card-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.remote-card-meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
}
.remote-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.remote-row .k { font-size: var(--fs-xs); font-weight: 700; color: var(--text-faint); }
.remote-row .v { font-size: var(--fs-sm); font-weight: 700; color: var(--text); text-align: right; }

.remote-box {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--text);
  white-space: pre-wrap;
}
.remote-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-sm);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  user-select: none;
}

@media (min-width: 1024px) {
  .remote-cards { display: none; }
  .remote-table-wrap {
    display: block;
    margin-top: var(--sp-3);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }
}

/* 유틸 */
.stack   { display: flex; flex-direction: column; gap: var(--sp-3); }
.row     { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.spacer  { flex: 1; }
.nowrap  { white-space: nowrap; }
.mt-0 { margin-top: 0; }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mt-4 { margin-top: var(--sp-4); }
.mb-0 { margin-bottom: 0; }
.hide-desktop { display: none; }
@media (max-width: 1023px) { .hide-desktop { display: revert; } .only-desktop { display: none !important; } }
@media (min-width: 1024px) { .only-mobile { display: none !important; } }

/* =========================================================================
   13. 로그인
   ========================================================================= */
.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;   /* 모바일 주소창 높이 변화 대응 */
  padding: var(--sp-4);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--shell);
}
[data-theme="hc"] .auth { background: #000; }

.auth-box { width: 100%; max-width: 400px; }

.auth-brand {
  margin-bottom: var(--sp-4);
  text-align: center;
  color: var(--shell-text);
}
.auth-brand-mark { font-size: 34px; line-height: 1; }
.auth-brand-name {
  margin-top: var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.02em;
}
.auth-brand-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--shell-muted);
}

.auth-card {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.auth-card .form-row + .form-row { margin-top: var(--sp-4); }
.auth-card label { font-size: var(--fs-sm); color: var(--text); }
.auth-card .btn-primary { width: 100%; margin-top: var(--sp-5); }

.auth-foot {
  margin-top: var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--shell-muted);
}

.auth-theme {
  position: absolute;
  top: calc(var(--sp-4) + env(safe-area-inset-top));
  right: var(--sp-4);
}

/* =========================================================================
   14. 인쇄 — 작업확인서/정산서 출력 대응
   ========================================================================= */
@media print {
  .app-topbar, .app-sidebar, .app-tabbar,
  .layout-header, .task-actions, .search-grid,
  .btn, .no-print { display: none !important; }
  .app-main, .layout-main { padding: 0; max-width: none; }
  .card, .task-card, .section {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
}