/* ════════════════════════════════════════════════
   AIRLOG — 한국공조기술단 현장관리 시스템
   Mobile-first · 375px base · 768px tablet · 1024px PC
   ════════════════════════════════════════════════ */

/* ── 1. 리셋 & CSS 변수 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 버튼·입력칸이 브라우저 기본 글꼴·색을 쓰지 않게 (개별 font-family:inherit 반복 대체, v2.60.0 B11) */
button, input, select, textarea { font: inherit; color: inherit; }

:root {
  /* 브랜드 컬러 */
  --bg:       #f2f3f5;
  --surface:  #ffffff;
  --border:   #e2e3e8;
  --text:     #1a1a1a;
  --text-2:   #3c3d45;
  --text-3:   #6b6c77;
  --muted:    #888893;

  --blue:     #185FA5;
  --blue-bg:  #E6F1FB;
  --green:    #3B6D11;
  --green-bg: #EAF3DE;
  --amber:    #854F0B;
  --amber-bg: #FAEEDA;
  --red:      #A32D2D;
  --red-bg:   #FCEBEB;
  --purple:   #7c3aed;
  --purple-bg:#f0eafb;

  /* 하위 호환 (기존 JS inline style에서 var(--indigo) 참조) */
  --indigo:   #185FA5;

  /* 서피스 계층 */
  --surface-alt:   #f8f9fa;   /* hover·섹션헤더 등 surface보다 살짝 어두운 중립 배경 */
  --border-subtle: #ebebeb;   /* 목록 구분선 등 border보다 옅은 구분 */

  /* 공정 셀 상태 (construct 그리드) */
  --proc-done-bg:     #EAF3DE;  /* green-bg 동일 */
  --proc-done-border: rgba(59,109,17,0.5);
  --proc-done-text:   #3B6D11;
  --proc-undone-bg:   #f2f3f5;  /* bg 동일 */
  --proc-undone-border: #e2e3e8;

  /* 상태 배지 (이상신고/처리현황) */
  --badge-open-bg:    #FCEBEB;  /* red-bg 동일 */
  --badge-open-border:rgba(163,45,45,0.3);
  --badge-done-bg:    #f2f3f5;  /* bg 동일 */
  --badge-done-border:#e2e3e8;

  /* 인포/성공 배너 */
  --info-bg:     #E6F1FB;  /* blue-bg 동일 */
  --info-border: rgba(24,95,165,0.25);
  --success-bg:  #EAF3DE;  /* green-bg 동일 */
  --success-border: rgba(59,109,17,0.3);

  /* 노무비 테이블 강조 */
  --table-highlight: #FAEEDA;  /* amber-bg 동일 */

  /* 레이아웃 */
  --sidebar-w:     220px;

  /* 조작 부품 규칙 (v2.60.0 Phase 3) — 버튼·선택상자·칩은 이 값만 쓴다. 폰·iPad는 아래 body.view-* 에서 44px */
  --ctl-h:       32px;
  --ctl-radius:  8px;
  --chip-radius: 999px;
  --ctl-border:  1px solid var(--border);
  --ctl-fs:      13px;
  /* 글씨 4단계 (v2.60.0 B4) */
  /* 글씨 크기 계단 8단 (v2.70.0 — 기획 v2.38 §5 확정). 화면 코드는 이 토큰만 쓴다. 예외: 폰 입력칸 16px(아이폰 확대 방지)·36px 이상 장식 아이콘 */
  --fs-xs:11px;    /* 보조 글씨·캡션 */
  --fs-label:12px; /* 라벨 */
  --fs-sm:13px;    /* 본문 */
  --fs-md:15px;    /* 소제목·강조 본문 */
  --fs-title:18px; /* 제목 */
  --fs-lg:20px;    /* 큰 제목 */
  --fs-num:26px;   /* 숫자 (카드 수치) */
  --fs-hero:32px;  /* 주인공 숫자 */
  --bottom-tab-h:  60px;   /* 하단바 본체 높이 (v2.100.2: 68→60) */
  /* 아이폰 홈 막대 공간 — 그대로 다 쓰면 바 아래가 휑해서(34px) 14px 줄여 씀. 최소 8px (v2.100.2, 후시공 하단바와 공용) */
  --bt-safe: max(8px, calc(env(safe-area-inset-bottom, 0px) - 14px));
  --header-h:      56px;

  /* 브라우저 다크모드 자동 적용 방지 (data-theme으로 제어) */
  color-scheme: light;

  /* ── 디자인 토큰 v2.14.0 ── */
  --t2: var(--text-2);
  --t3: var(--text-3);
  --card-radius:    16px;
  --card-radius-lg: 20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --shadow-md:  0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  --shadow-blue: 0 4px 16px rgba(24,95,165,.28);
  --btn-radius:   14px;
  --input-radius: 10px;
}

/* ── 다크모드 변수 ── */
/* 명시적 다크 선택 */
[data-theme="dark"] {
  --bg:       #1c1c1e;
  --surface:  #2c2c2e;
  --border:   #3a3a3c;
  --text:     #f2f2f7;
  --text-2:   #adadb8;
  --text-3:   #8e8e93;
  --muted:    #8e8e93;

  --blue:     #5aacf5;
  --blue-bg:  #1a2d42;
  --green:    #7bc67e;
  --green-bg: #1a2e1c;
  --amber:    #f5c842;
  --amber-bg: #2e2110;
  --red:      #ff6b6b;
  --red-bg:   #2e1515;
  --purple:   #a78bfa;
  --purple-bg:#2a1f45;

  --surface-alt:   #3a3a3c;
  --border-subtle: #2c2c2e;

  --proc-done-bg:      #1a2e1c;
  --proc-done-border:  rgba(123,198,126,0.5);
  --proc-done-text:    #7bc67e;
  --proc-undone-bg:    #1c1c1e;
  --proc-undone-border:#3a3a3c;

  --badge-open-bg:     #2e1515;
  --badge-open-border: rgba(255,107,107,0.3);
  --badge-done-bg:     #1c1c1e;
  --badge-done-border: #3a3a3c;

  --info-bg:     #1a2d42;
  --info-border: rgba(90,172,245,0.25);
  --success-bg:  #1a2e1c;
  --success-border: rgba(123,198,126,0.3);

  --table-highlight: #2e2110;

  /* 다크모드 그림자 */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
  --shadow-md:   0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  --shadow-blue: 0 4px 14px rgba(90,172,245,.35);

  color-scheme: dark;
}

/* 시스템 다크모드 (data-theme="light" 가 없을 때만 적용) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #1c1c1e;
    --surface:  #2c2c2e;
    --border:   #3a3a3c;
    --text:     #f2f2f7;
    --text-2:   #adadb8;
    --text-3:   #8e8e93;
    --muted:    #8e8e93;

    --blue:     #5aacf5;
    --blue-bg:  #1a2d42;
    --green:    #7bc67e;
    --green-bg: #1a2e1c;
    --amber:    #f5c842;
    --amber-bg: #2e2110;
    --red:      #ff6b6b;
    --red-bg:   #2e1515;
    --purple:   #a78bfa;
    --purple-bg:#2a1f45;

    --surface-alt:   #3a3a3c;
    --border-subtle: #2c2c2e;

    --shadow-sm:   0 1px 3px rgba(0,0,0,.4);
    --shadow-md:   0 1px 3px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
    --shadow-blue: 0 4px 14px rgba(90,172,245,.35);

    color-scheme: dark;
  }
}

/* ── 2. 베이스 / 타이포 ── */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR',
               'Apple SD Gothic Neo', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-sm);
  min-height: 100vh;
  min-height: 100dvh;
  /* 모바일: 하단 탭바 공간 확보 (+ 안전영역) */
  padding-bottom: calc(var(--bottom-tab-h) + var(--bt-safe));
}
/* 로그인 화면은 하단 탭바가 없으므로 앱용 하단 여백 제거 (v2.58.1 A8) */
body.login-page { padding-bottom: 0; }

/* PC에서는 하단 패딩 불필요 */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

/* ── 3. 로그인 페이지 → css/login.css (v2.76.0) ── */

/* 사이드바 섹션 타이틀 */
.nav-section-title {
  height: 1px;
  padding: 0;
  margin: 8px 14px;
  background: var(--border);
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.sidebar-nav > .nav-section-title:first-child { display: none; }

/* ── 4. 앱 레이아웃 ── */
.app-wrap {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── 5. 사이드바 (드로어 방식, 모바일) ── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 300;
  /* 모바일: 화면 밖으로 */
  transform: translateX(calc(-1 * var(--sidebar-w)));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overflow-y: auto;
}

.sidebar.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

.sidebar-logo {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 14px 18px 10px;
  border-bottom: none;
  flex-shrink: 0;
}
.sidebar-brand { font-size: var(--fs-title); font-weight: 900; letter-spacing: -0.02em; color: var(--text); }

/* (구 사이드바 부제 스타일 제거 — 브랜드는 .sidebar-brand 사용) */

.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  border-radius: 6px;
  margin: 1px 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  min-height: 40px;
  user-select: none;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: color-mix(in srgb, var(--muted) 8%, transparent);
  color: var(--text-2);
}

.nav-item.active {
  background: color-mix(in srgb, var(--ic, var(--blue)) 11%, transparent);
  color: var(--ic, var(--blue));
  font-weight: 700;
  border-left-color: var(--ic, var(--blue));
}

/* 아이콘 컬러 칩 */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.nav-icon svg { display: block; }

/* 활성: 칩 채움 + 흰 아이콘 */
.nav-item.active .nav-icon {
  background: var(--ic, var(--blue));
  color: #fff;
  box-shadow: none;
}

/* 로그아웃 */
.nav-logout:hover { border-left-color: transparent !important; }

/* 로고 아이콘 영역 */

.sidebar-bottom {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── 6. 사이드바 오버레이 ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 299;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible { display: block; }

/* ── 7. 모바일 메뉴 버튼 ── */
.mobile-menu-btn {
  display: flex;
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 200;
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-title);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(24, 95, 165, 0.22);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.mobile-menu-btn:active { opacity: 0.8; }

/* ── 9. 메인 콘텐츠 영역 ── */
.main {
  width: 100%;
  padding: 64px 14px 16px; /* 상단: 모바일 메뉴 버튼 공간 */
  min-height: 100vh;
  min-height: 100dvh;
}

.page { display: none; }

@keyframes airlog-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active {
  display: block;
  animation: airlog-page-in 200ms cubic-bezier(.32, 0, .17, 1);
}
@media (prefers-reduced-motion: reduce) {
  .page.active { animation: none; }
}

.page-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text);
}

/* ── 10. 카드 ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.card-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
}

/* ── 11. 통계 카드 그리드 ── */

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
}

/* ── 12. 버튼 ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--btn-radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  font-weight: 500;
  font-family: inherit;
  /* 모바일 터치 영역 최소 44px */
  min-height: 44px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.btn:hover    { background: var(--bg); }
.btn:active   { opacity: 0.85; transform: scale(0.99); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* 채색 버튼 — font-weight 600으로 가독성 강화 */
.btn-primary { background: var(--blue);  color: #fff; border-color: var(--blue);  font-weight: 600; box-shadow: var(--shadow-blue); }
.btn-primary:hover { opacity: 0.9; background: var(--blue); }

.btn-blue    { background: var(--blue);  color: #fff; border-color: var(--blue);  font-weight: 600; box-shadow: var(--shadow-blue); }
.btn-blue:hover { opacity: 0.9; background: var(--blue); }

.btn-green   { background: var(--green); color: #fff; border-color: var(--green); font-weight: 600; }
.btn-green:hover { opacity: 0.9; background: var(--green); }

.btn-red     { background: var(--red);   color: #fff; border-color: var(--red);   font-weight: 600; }
.btn-red:hover { opacity: 0.9; background: var(--red); }

/* 설정 페이지 표준 버튼 계층 */
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 500; }
.btn-secondary:hover { background: var(--bg); }

.btn-danger { background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; }
.btn-danger:hover { opacity: 0.9; background: var(--red); }

.btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid var(--red); font-weight: 600; }
.btn-danger-ghost:hover { background: var(--red-bg); }

/* 아웃라인/고스트 계열 */
.btn-ghost { background: none; border-color: var(--border); color: var(--text-3); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }

/* 드롭다운 메뉴 항목 버튼 */

.btn-sm {
  padding: 7px 12px;
  font-size: var(--fs-label);
  min-height: 40px;
  border-radius: 7px;
}

.btn-xs {
  padding: 6px 10px;
  font-size: var(--fs-xs);
  min-height: 34px;
  border-radius: 5px;
  /* 실제 터치 영역은 ::before로 44px 확보 */
  position: relative;
}
.btn-xs::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}

/* 세그먼트 버튼 */
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  font-size: var(--fs-label);
  cursor: pointer;
  background: var(--surface);
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
  font-family: inherit;
  min-height: 36px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.seg-btn:first-child { border-radius: 4px 0 0 4px; }
.seg-btn:last-child  { border-radius: 0 4px 4px 0; }
.seg-btn.active      { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── 13. 빠른 출퇴근 버튼 ── */
.btn-clock-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  min-height: 52px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}

.btn-clock-out {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-md);
  font-weight: 700;
  min-height: 52px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
}

.btn-clock-in:active,
.btn-clock-out:active { opacity: 0.85; transform: scale(0.98); }

/* ── 14. 토글 체크박스 (초과근무 / 입주후시공) ── */
.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 50px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.toggle-wrap.checked {
  border-color: var(--blue);
  background: var(--blue-bg);
}

.toggle-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ── 15. 호실 이상신고 뱃지 ── */

/* 호실 셀 이상신고 dot */
.cell-issue-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* ── 16. 배지 ── */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-amber  { background: var(--amber-bg); color: var(--amber); }
.badge-blue   { background: var(--blue-bg);  color: var(--blue); }
.badge-red    { background: var(--red-bg);   color: var(--red); }
.badge-gray   { background: var(--bg); color: var(--muted); }
.badge-purple { background: var(--purple-bg); color: var(--purple); }

/* ── 17. 폼 요소 ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--input-radius);
  font-size: var(--fs-sm);
  background: var(--surface);
  outline: none;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  /* 모바일 최소 48px */
  min-height: 48px;
}
.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
  cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,95,165,.10);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  /* textarea는 고정 높이 불필요 */
  height: auto;
}

.form-row {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

/* 모바일: 기본 1열 */
.form-row-2,
.form-row-3,
.form-row-4 { grid-template-columns: 1fr; }

/* ── 18. 테이블 ── */
.tbl { width: 100%; border-collapse: collapse; }

.tbl th {
  text-align: left;
  padding: 9px 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.tbl td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--bg); }

/* ── 작업일보 ── */

/* ── 19. 모달 ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 500;
  display: flex;
  align-items: flex-end;  /* 모바일: 하단 시트 */
  justify-content: center;
  padding: 0;
}

.modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  /* 안전 영역 대응 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal-head {
  padding: 20px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-head h3 { font-size: var(--fs-title); font-weight: 800; }

.modal-close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.modal-close:active { opacity: 0.6; }

.modal-body    { padding: 14px 20px 20px; }
.modal-footer  { padding: 0 20px 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* ── 20. 진행바 ── */
.prog-wrap {
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.prog-bar {
  height: 6px;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.prog-sm .prog-bar { height: 3px; }

/* ── 21. 탭 바 (컨텐츠용) ── */
.tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ── 23. 공지사항 ── */

.notice-content {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text);
}

.notice-meta {
  margin-top: 8px;
}

/* ── 24-b. 설정 페이지 ── */

/* 모바일: 1열 flex + 섹션 헤더 구분 */
.settings-sidebar { display: none; }

/* 태블릿·PC (768px+): 좌측 카테고리 패널 + 우측 콘텐츠 */
@media (min-width: 768px) {

  .settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 16px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .settings-nav-item:hover { background: var(--bg); }
  .settings-nav-item.active {
    background: var(--blue-bg);
    color: var(--blue);
    font-weight: 700;
  }
  .settings-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  /* 기본 숨김, .active 카드만 표시 */
  .settings-panel .settings-card { display: none; }
  .settings-panel .settings-card.active { display: block; }

}

/* 인원 테이블 뷰 (PC 1024px+) */
@media (min-width: 1024px) {
  .workers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  .workers-table th,
  .workers-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
  }
  .workers-table th {
    font-size: var(--fs-label);
    font-weight: 700;
    color: var(--muted);
    background: var(--bg);
  }
  .workers-table tr:last-child td { border-bottom: none; }
  .workers-table tbody tr:hover td { background: var(--bg); }
  .workers-table .col-actions { text-align: right; white-space: nowrap; }
  .workers-table .col-actions .btn { margin-left: 4px; }
}

/* ── 25. 시공관리 그리드 ── */
.apt-wrap {
  overflow: auto;
  max-height: 60vh;
  -webkit-overflow-scrolling: touch;
}
.apt-wrap::-webkit-scrollbar { display: none; }

.apt-table {
  border-collapse: separate;
  border-spacing: 4px;
  font-size: var(--fs-xs);
}

.apt-table th {
  background: var(--bg);
  padding: 6px 7px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  font-size: var(--fs-xs);
}

.apt-table td {
  padding: 4px 4px;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
  min-width: 58px;
  height: auto;
  min-height: 54px;
  border-radius: 10px;
  transition: background 0.1s, transform 0.1s;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.apt-table td:not(.fc):not(.sp):not(.mio):active { transform: scale(0.94); }

.apt-table td:not(.fc):not(.sp):not(.mio) { border: 1.5px solid var(--border); }
.apt-table td:not(.fc):hover { background: var(--blue-bg); }
.apt-table td.sp  { background: var(--bg); cursor: default; color: var(--muted); font-size: var(--fs-xs); border-radius: 12px; }
.apt-table td.mio { background: var(--bg); cursor: default; border-radius: 10px; }
[data-theme="dark"] .apt-table td.sp,
[data-theme="dark"] .apt-table td.mio { background: rgba(255,255,255,0.04); }
/* 공정 모드 셀(id=cell-*): 이모지+3줄 콘텐츠 기준으로 높이 보존 */
.apt-table td[id^="cell-"] { min-height: 70px; }

.unit-no   { font-weight: 700; font-size: var(--fs-xs); color: var(--text); white-space: nowrap; }
.unit-hp   { font-size: var(--fs-xs); font-weight: 700; margin-top: 1px; }

/* ── 자재계산기 셀 다크모드 클래스 ── */
.mat-cell             { background: var(--surface); }
.mat-cell.mat-cell-sel      { background: var(--blue-bg) !important; border: 2px solid var(--blue) !important; }
.mat-cell.mat-cell-nooption { background: var(--bg); }
.mat-cell.mat-cell-empty    { background: var(--bg); cursor: default !important; }

/* 셀 내 텍스트 */
.mat-cell .mat-indoor { font-size: var(--fs-xs); text-align: center; margin-top: 1px; color: var(--muted); }
.mat-cell.mat-cell-sel .mat-indoor { color: var(--blue); }
.mat-cell .mat-hp     { font-size: var(--fs-xs); text-align: center; font-weight: 600; color: var(--blue); }

/* ── 결과 카드 행 ── */
.mat-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.mat-result-row-empty {
  min-height: 38px;
  border-bottom: 1px solid var(--border);
}

/* ── 호수 칩 ── */
.mat-chip {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mat-chip.mat-chip-on {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue);
}

/* ── 복사 항목 선택 칩 ── */
.mat-copy-chip {
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mat-copy-chip.mat-copy-chip-on {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue);
}

/* ── 26. 공정 체크리스트 ── */

.proc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.proc-item:hover         { background: var(--bg); }
.proc-item.done          { background: var(--green-bg); border-color: rgba(59,109,17,0.3); }

.proc-name { font-size: var(--fs-sm); font-weight: 500; flex: 1; }

/* ── 27. 공정 도트 (리스트뷰) ── */
.proc-dots { display: flex; gap: 3px; flex-wrap: wrap; }

.proc-dot {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.proc-dot.on  { background: var(--green-bg); color: var(--green); border-color: rgba(59,109,17,0.3); }
.proc-dot.off { background: var(--bg); color: var(--muted); }

/* ── 28. 진행도 섹션 ── */

.progress-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--fs-sm);
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.progress-toggle:hover { background: var(--bg); }

.prog-matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.prog-matrix table { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); }

.prog-matrix th {
  padding: 6px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.prog-matrix td {
  padding: 6px 7px;
  border: 1px solid var(--border);
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-xs);
}

/* ── 29. 공정 그룹 (v1.8.0) ── */

/* 그룹 모드 셀: 세로 배경 분할 gradient 위에 기존 hover 파란 배경이 덮히지 않도록 처리.
   inline style background(gradient)는 CSS class보다 우선순위 높으므로
   hover 시 filter로만 어둡게 처리 */
.apt-table td.group-cell:not(.fc):hover {
  filter: brightness(0.93);
}

/* 그룹 선택 버튼 */
.group-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.group-btn:hover { background: var(--bg); border-color: var(--muted); }
.group-btn.active { background: var(--green-bg); color: var(--green); border-color: var(--green); }

/* 공유 그룹 버튼 */
.group-btn.shared { background: var(--blue-bg); color: var(--blue); border-color: #bfdbfe; }
.group-btn.shared:hover { filter: brightness(0.97); }
.group-btn.shared.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* 그룹 모드 하단 공정 바 — PC: 10px, 모바일: 14px */
.group-proc-bar {
  height: 10px;
  border-radius: 0 0 2px 2px;
}

/* ── 30. 시공관리 모바일 최적화 (v1.8.0) ── */
@media (max-width: 767px) {
  /* 하단 공정 바 두께 증가 */
  .group-proc-bar { height: 14px; }

  /* 그리드 셀 크기 축소 (손가락 최소 터치 44px 이상 유지) */
  .apt-table { font-size: var(--fs-xs); }
  .apt-table td { min-width: 54px; }
  .apt-table td.fc { min-width: 26px; }
  .apt-wrap { max-height: 55vh; }

  /* 동 탭 가로 스크롤 (줄바꿈 방지) */
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }

  /* 그룹 버튼 바 가로 스크롤 */
  #group-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #group-filter-bar::-webkit-scrollbar { display: none; }
  #group-btn-list { flex-wrap: nowrap; }

/* 그룹 편집 체크리스트: 1열 + 터치 타깃 48px */
  #group-proc-checklist { grid-template-columns: 1fr !important; }
  #group-proc-checklist label { min-height: 48px; align-items: center; }

  /* 그룹 모드 셀 hover 효과 제거 (터치에서 잔류 방지) */
  .apt-table td.group-cell:not(.fc):hover { filter: none; }
}

/* ── 29. 리스트뷰 테이블 ── */
.list-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.list-table { border-collapse: collapse; width: 100%; font-size: var(--fs-label); min-width: 520px; }

.list-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  background: var(--bg);
}

.list-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.list-table tbody tr:last-child td { border-bottom: none; }
.list-table tbody tr:hover { background: var(--bg); }

/* ── 30. Top Bar (시공관리 상단) ── */
.top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ── 32. 로딩 / 스피너 ── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--muted);
  font-size: var(--fs-sm);
  gap: 10px;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── 33. 색상 유틸 ── */
.blue   { color: var(--blue) !important; }
.green  { color: var(--green) !important; }
.amber  { color: var(--amber) !important; }
.red    { color: var(--red) !important; }
.muted  { color: var(--muted) !important; }

/* ── 34. 노무비(임금명세서) 테이블 ── */
.payroll-table {
  width: auto;
  border-collapse: collapse;
  font-size: var(--fs-label);
}

.payroll-table th,
.payroll-table td {
  border: 1px solid #333;
  padding: 6px 8px;
  text-align: center;
}

.payroll-table th    { background: var(--bg); font-weight: 700; }
.payroll-table .name-col  { text-align: left; font-weight: 600; }
.payroll-table .work-day  { background: var(--amber-bg); }
.payroll-table .total-col { background: var(--green-bg); font-weight: 700; }

.attend-monthly th,
.attend-monthly td { white-space: nowrap; }
.attend-monthly .name-col { white-space: nowrap; min-width: 64px; }

/* ══════════════════════════════════════
   TABLET (768px+)
   ══════════════════════════════════════ */
@media (min-width: 768px) {

  body { padding-bottom: 0; }

/* 사이드바 항상 열림 (tablet·iPad·PC 공통) */
  .sidebar { transform: translateX(0); box-shadow: none; }
  .sidebar-overlay { display: none !important; }
  .mobile-menu-btn { display: none; }

  .main { margin-left: var(--sidebar-w); padding: 20px; width: calc(100% - var(--sidebar-w)); }

  .page-title { font-size: var(--fs-lg); margin-bottom: 18px; }

  /* 폼 그리드 */
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row-4 { grid-template-columns: 1fr 1fr; }

  /* 통계 카드 4열 */
  .stat-card { padding: 16px 18px; }

/* 폼 요소 */
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 44px; font-size: var(--fs-sm); }

  /* 버튼 */
  .btn { min-height: 40px; }

  /* 모달: 태블릿은 중앙 팝업 */
  .modal-overlay { align-items: center; padding: 20px; }
  .modal {
    border-radius: 16px;
    width: 540px;
    max-width: calc(100vw - 40px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .modal-body { overflow-y: auto; flex: 1; }

  .card { padding: 18px; }
}

/* ══════════════════════════════════════
   iPad Air (820px–1023px)
   세로 820px / 가로 1180px(→PC모드)
   ══════════════════════════════════════ */
@media (min-width: 820px) and (max-width: 1023px) {
  /* 모달: 540px → 640px (820px 화면에서 더 넓게 활용) */
  .modal { width: 640px; }

  /* 카드 패딩: 18px → 20px */
  .card { padding: 20px; }

  /* 폼: 3열 활성화 (이미 768px+에서 가능하나 명시적 강화) */
  .form-row-4 { grid-template-columns: 1fr 1fr 1fr; }

  /* 페이지 타이틀 */
  .page-title { font-size: var(--fs-lg); }

}

/* ══════════════════════════════════════
   PC (1024px+)
   ══════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 사이드바 항상 열림 */
  .sidebar {
    transform: translateX(0);
    box-shadow: none;
  }

  /* 오버레이 불필요 */
  .sidebar-overlay { display: none !important; }

  /* 모바일 메뉴 버튼 숨김 */
  .mobile-menu-btn { display: none; }

  /* 메인 영역: 사이드바 너비만큼 들여쓰기 */
  .main {
    margin-left: var(--sidebar-w);
    padding: 24px;
    width: calc(100% - var(--sidebar-w));
  }

  .page-title { font-size: var(--fs-lg); margin-bottom: 20px; }

  /* 와이드 모니터 콘텐츠 max-width (1440px+에서 너무 늘어나는 것 방지) */
  /* v2.60.0 B3: 1440px 가운데 정렬. 시공관리·관리자(넓은 표)와 캘린더·자재계산기(PC 분할 화면)는 폭 제한 없음 (B2·C1) */
  .page:not(#page-construct):not(#page-admin):not(#page-calendar):not(#page-material) {
    max-width: 1440px; margin-left: auto; margin-right: auto;
  }

  /* 카드 hover: PC에서만 (마우스 환경) */
  .card:hover { border-color: color-mix(in srgb, var(--blue) 30%, var(--border) 70%); }

/* 폼 그리드 (PC) */
  .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* 모달: PC는 중앙 + 스크롤 */
  .modal-overlay { align-items: center; padding: 16px; }
  .modal {
    border-radius: 10px;
    width: 540px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  .modal-body { overflow-y: auto; flex: 1; }

/* 캘린더 2열 레이아웃 — v2.26.0에서 cal2-left-pane/cal2-right-panel 방식으로 교체됨 */

  /* 버튼 — PC에서도 최소 터치 타겟 유지 */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }

  /* 폼 요소 */
  .form-group input,
  .form-group select,
  .form-group textarea { min-height: 40px; padding: 9px 12px; font-size: var(--fs-sm); }

  /* 진행도 */
  .apt-wrap { max-height: 65vh; }

  /* 출퇴근 입력 — 초과근무/입주후시공 토글 컴팩트 */
  #att-flags-wrap .toggle-wrap {
    flex: 0 0 auto;
    padding: 8px 14px;
    min-height: 42px;
  }
  #att-flags-wrap .toggle-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════
   ONBOARDING 튜토리얼
   ══════════════════════════════════════ */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#onboarding-modal {
  padding: 32px 28px 24px;
}

@keyframes obSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#onboarding-skip {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: var(--fs-label);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s;
}
#onboarding-skip:hover { color: var(--text-3); }

.ob-emoji {
  font-size: 52px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1;
}

.ob-title {
  font-size: var(--fs-title);
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.3;
}

.ob-desc {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 24px;
}

#onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 20px;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}

.ob-dot.active {
  background: var(--blue);
  transform: scale(1.3);
}

#onboarding-btns {
  display: flex;
  gap: 10px;
  align-items: center;
}

#onboarding-counter {
  flex: 1;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--muted);
}

.ob-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.1s;
  white-space: nowrap;
}
.ob-btn:active { transform: scale(0.97); }

.ob-btn-default {
  background: var(--blue-bg);
  color: var(--blue);
}
.ob-btn-default:hover { filter: brightness(.94); }

.ob-btn-primary {
  background: var(--blue);
  color: #fff;
  flex: 1;
}
.ob-btn-primary:hover { opacity: 0.9; }

/* 모바일 온보딩 */
@media (max-width: 767px) {
  #onboarding-modal {
    padding: 28px 20px 20px;
    border-radius: 16px;
  }
  .ob-emoji  { font-size: 44px; }
  .ob-title  { font-size: var(--fs-md); }
  .ob-desc   { font-size: var(--fs-label); }
  .ob-btn    { padding: 9px 16px; font-size: var(--fs-sm); }
}

/* 개별 명세서 인쇄용 복사본 영역
   display:none 대신 화면 밖 절대위치 — iPad Safari 인쇄 엔진이
   display:none 요소의 레이아웃 박스를 생성하지 않아 @media print에서
   display:block 전환해도 빈 페이지가 되는 문제 방지 (cf. retrofit v1.5.15) */
#print-slip-area {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 794px;
  visibility: hidden;
  pointer-events: none;
}

/* ══════════════════════════════════════
   PRINT — 임금명세서 / 노무비 신고서
   ══════════════════════════════════════ */
@media print {
  /* 화면용 UI 모두 숨김 */
  .sidebar,
  .sidebar-overlay,
  .mobile-menu-btn,
  .no-print,
  .tab-bar,
  .btn,
  .seg-btn { display: none !important; }

  body {
    background: #fff;
    padding: 0;
    font-size: var(--fs-xs);
  }

  .main {
    margin-left: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }

  .page { display: block !important; }
  .page:not(.active) { display: none !important; }

  .card {
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 8px;
  }

  .page-title { font-size: var(--fs-md); margin-bottom: 10px; }

  /* 노무비 테이블 */
  .payroll-table { font-size: var(--fs-xs); }
  .payroll-table td,
  .payroll-table th { padding: 3px 5px; }

  /* 진행도 */
  .prog-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prog-bar  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 뱃지/색상 인쇄 */
  .badge,
  .badge-green,
  .badge-amber,
  .badge-blue,
  .badge-red { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* 페이지 나누기 */
  .payroll-table tr { page-break-inside: avoid; }

  /* 개별 명세서 인쇄 모드: 해당 slip만 표시 */
  body.print-single-slip > * { display: none !important; }
  body.print-single-slip > #print-slip-area {
    display: block !important;
    position: static !important;
    left: auto !important;
    width: 100% !important;
    visibility: visible !important;
  }

  @page {
    size: A4 portrait;
    margin: 0;
  }
}

/* ── 공정 항목 관리 모바일 UX (설정 페이지) ── */
#processes-list .proc-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--bg);
  border: none;
  cursor: default;
  min-height: unset;
  padding: 0;
}
#processes-list .proc-item:hover { background: var(--bg); }
#processes-list .proc-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  transition: transform 0.25s ease;
  background: var(--bg);
  position: relative;
  z-index: 1;
  user-select: none;
}
#processes-list .proc-drag-handle {
  font-size: var(--fs-lg);
  color: var(--muted);
  cursor: grab;
  padding: 2px 4px;
  touch-action: none;
  flex-shrink: 0;
}
#processes-list .proc-num {
  font-size: var(--fs-label);
  color: var(--muted);
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
#processes-list .proc-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#processes-list .proc-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 2;
}
#processes-list .proc-action-btn {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
#processes-list .proc-action-edit {
  background: var(--blue-bg);
  color: var(--blue);
}
#processes-list .proc-action-delete {
  background: var(--red-bg);
  color: var(--red);
}
#processes-list .proc-item.swiped .proc-main {
  transform: translateX(-148px);
}
#processes-list .proc-item.swiped .proc-actions {
  transform: translateX(0);
}
.proc-drag-ghost {
  opacity: 0.4;
  background: var(--blue-bg) !important;
}

/* ── 캘린더 분류 드래그 정렬 ── */
.cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 6px;
}
.cat-drag-handle {
  font-size: var(--fs-title);
  color: var(--muted);
  cursor: grab;
  padding: 2px 2px;
  touch-action: none;
  flex-shrink: 0;
  user-select: none;
}
.cat-drag-handle:active { cursor: grabbing; }
.cat-lock { font-size: var(--fs-label); color: var(--muted); flex-shrink: 0; opacity: 0.7; }
@media (min-width: 768px) {
  #processes-list .proc-item { overflow: visible; }
  #processes-list .proc-main { padding-right: 8px; }
  #processes-list .proc-actions {
    position: static;
    transform: none !important;
    transition: none;
  }
  #processes-list .proc-action-btn {
    padding: 4px 10px;
    border-radius: 7px;
    font-size: var(--fs-label);
  }
  #processes-list .proc-item.swiped .proc-main {
    transform: none;
  }
}

/* ════════════════════════════════════════════════
   기기투입관리 v2 (equipment.js)
   ════════════════════════════════════════════════ */
.eq-top-bar { display:flex;flex-direction:column;gap:10px;margin-bottom:14px; }
.eq-site-main-sel {
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:var(--fs-md);font-weight:600;background:var(--surface);color:var(--text);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.eq-main-tabs { display:flex;border-bottom:2px solid var(--border); }
.eq-main-tab {
  flex:1;padding:10px;border:none;background:none;font-size:var(--fs-sm);font-weight:700;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;
}
.eq-main-tab.active { color:var(--blue);border-bottom-color:var(--blue); }
.eq-section { background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px; }
.eq-sec-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.eq-sec-title  { font-size:var(--fs-md);font-weight:700; }
.eq-sec-label  { font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px; }
.eq-empty-row  { font-size:var(--fs-sm);color:var(--muted);text-align:center;padding:20px 0; }
.eq-mini-btn {
  padding:5px 12px;border-radius:6px;font-size:var(--fs-label);font-weight:600;cursor:pointer;
  border:1px solid var(--border);background:var(--bg);color:var(--text);transition:all .15s;
}
.eq-mini-btn.eq-primary { background:var(--blue);color:#fff;border-color:var(--blue); }
.eq-nav-btn { padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:var(--fs-label);cursor:pointer; }
.eq-icon-btn { padding:3px 6px;border:none;background:none;font-size:var(--fs-sm);cursor:pointer;opacity:.45;border-radius:4px;transition:opacity .15s; }
.eq-icon-btn:hover { opacity:1;background:var(--red-bg); }

/* 현황 테이블 */
.eq-sum-unit { font-size:var(--fs-xs);font-weight:400;color:var(--muted);margin-left:1px; }
.eq-mini-bar { height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:3px; }
.eq-mini-bar-fill { height:100%;border-radius:3px;transition:width .4s; }
.eq-mini-bar-fill.done    { background:var(--green); }
.eq-mini-bar-fill.partial { background:var(--blue); }
.eq-mini-bar-fill.low     { background:var(--red); }
.eq-mini-pct { font-size:var(--fs-xs);font-weight:700;display:block;text-align:right; }
.eq-mini-pct.done    { color:var(--green); }
.eq-mini-pct.partial { color:var(--blue); }
.eq-mini-pct.low     { color:var(--red); }

/* 기기 현황 카드 (3단계 추적) */
.eq-device-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:4px; }
.eq-device-card { min-width:0;background:var(--surface);border:1.5px solid var(--border);border-left:4px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:0; }
.eq-device-card.eq-device-card-done    { border-left-color:var(--green); }
.eq-device-card.eq-device-card-partial { border-left-color:var(--blue); }
.eq-device-card.eq-device-card-low     { border-left-color:var(--red); }
/* 카드 헤더 */
.eq-device-card-header { display:flex;align-items:center;gap:6px;margin-bottom:12px; }
.eq-device-icon { font-size:var(--fs-md); }
.eq-device-typename { font-size:var(--fs-md);font-weight:700;flex:1; }
/* 출처 뱃지 */
.eq-source-badge { font-size:var(--fs-xs);font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap; }
.eq-source-db     { background:var(--blue-bg);color:var(--blue); }
.eq-source-manual { background:var(--amber-bg);color:var(--amber); }
.eq-source-order  { background:var(--bg);color:var(--muted); }
/* 필요 총계 행 */
.eq-device-metric { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px; }
.eq-metric-need   { margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border); }
.eq-metric-label  { font-size:var(--fs-xs);color:var(--muted);padding-top:3px;white-space:nowrap; }
.eq-metric-val-lg { font-size:var(--fs-lg);font-weight:800;line-height:1; }
.eq-metric-val    { font-size:var(--fs-md);font-weight:700;line-height:1; }
/* 우측 값+바 세트 */
.eq-metric-right  { display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0; }
/* 트랙 바 */
.eq-track-bar-wrap { display:flex;align-items:center;gap:5px;width:100%; }
.eq-track-bar { flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden; }
.eq-track-fill { height:100%;border-radius:3px;transition:width .4s; }
.eq-track-fill.eq-track-order  { background:var(--blue-bg); }
.eq-track-fill.eq-track-arrive.done    { background:var(--green); }
.eq-track-fill.eq-track-arrive.partial { background:var(--blue); }
.eq-track-fill.eq-track-arrive.low     { background:var(--red); }
.eq-track-pct { font-size:var(--fs-xs);font-weight:700;white-space:nowrap; }
/* 반입 색상 */
.eq-metric-arrive-done    { color:var(--green); }
.eq-metric-arrive-partial { color:var(--blue); }
.eq-metric-arrive-low     { color:var(--muted); }
/* 미발주·미반입 칩 */
.eq-device-gap-row { display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border); }
.eq-gap-chip { flex:1;text-align:center;padding:5px 4px;border-radius:6px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap; }
.eq-gap-ok      { background:var(--green-bg);color:var(--green); }
.eq-gap-warn    { background:var(--red-bg);color:var(--red); }
.eq-gap-transit { background:var(--amber-bg);color:var(--amber); }

/* 전체 현장 요약 테이블 */
.eq-all-table-wrap { overflow-x:auto; }
.eq-all-table { width:100%;border-collapse:collapse;font-size:var(--fs-sm); }
.eq-all-table th { padding:8px 10px;background:var(--bg);font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-align:center;border-bottom:2px solid var(--border); }
.eq-all-site-th { text-align:left; }
.eq-all-table td { padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:top; }
.eq-all-table tr:last-child td { border-bottom:none; }
.eq-all-row-current td { background:var(--blue-bg); }
.eq-all-site-cell { min-width:100px; }
.eq-all-site-name { font-size:var(--fs-label);font-weight:700;display:block; }
.eq-all-curr-badge { font-size:var(--fs-xs);background:var(--blue);color:#fff;border-radius:3px;padding:0 4px;vertical-align:middle; }
.eq-all-cell { text-align:center; }
.eq-all-none { color:var(--muted);font-size:var(--fs-label); }
.eq-all-qty  { display:flex;align-items:baseline;justify-content:center;gap:3px; }
.eq-all-arr  { font-size:var(--fs-md);font-weight:700; }
.eq-all-arr.done    { color:var(--green); }
.eq-all-arr.partial { color:var(--blue); }
.eq-all-arr.low     { color:var(--red); }
.eq-all-sep  { font-size:var(--fs-xs);color:var(--muted); }
.eq-all-ord  { font-size:var(--fs-xs);color:var(--muted); }

/* 계획 편집 */
.eq-plan-editor { border-color:var(--blue);background:var(--blue-bg); }
.eq-plan-grid   { display:flex;flex-direction:column;gap:8px; }
.eq-plan-row    { display:flex;align-items:center;gap:10px; }
.eq-plan-label  { font-size:var(--fs-sm);font-weight:700;width:52px; }
.eq-plan-input  { width:80px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;font-size:var(--fs-md);font-weight:700;text-align:right;background:var(--surface);color:var(--text); }

/* 월간 타임라인 */
.eq-month-batches { display:flex;flex-direction:column;gap:6px; }
.eq-month-batch { display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:8px;border:1px solid var(--border); }
.eq-batch-past   { background:var(--bg);opacity:.85; }
.eq-batch-future { background:var(--surface); }
.eq-batch-date   { font-size:var(--fs-sm);font-weight:700; }
.eq-batch-note   { font-size:var(--fs-label);color:var(--muted); }
.eq-batch-chips  { display:flex;flex-wrap:wrap;gap:5px;margin-top:2px; }
.eq-month-chip   { display:inline-block;padding:3px 9px;border-radius:20px;font-size:var(--fs-label);font-weight:600; }
.eq-month-indoor  { background:var(--blue-bg); color:var(--blue); }
.eq-month-outdoor { background:var(--green-bg);color:var(--green); }
.eq-month-panel   { background:var(--amber-bg);color:var(--amber); }
.eq-month-other   { background:var(--bg);       color:var(--muted); }

/* HOLD */
.eq-hold-banner { background:var(--amber-bg);color:var(--amber);border-radius:8px;padding:12px 14px;font-size:var(--fs-sm);font-weight:600;margin-bottom:12px; }
.eq-hold-list   { display:flex;flex-wrap:wrap;gap:6px; }
.eq-hold-chip   { background:var(--surface);border:1px solid var(--amber);color:var(--amber);border-radius:20px;padding:2px 10px;font-size:var(--fs-label);font-weight:500; }

/* 발주 등록 */
.eq-upload-panel { background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px; }
.eq-order-meta { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px; }
.eq-mode-tabs  { display:flex;gap:6px;margin-bottom:10px; }
.eq-mode-btn   { flex:1;padding:8px;border:2px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:var(--fs-label);font-weight:600;cursor:pointer; }
.eq-mode-btn.active { border-color:var(--blue);background:var(--blue-bg);color:var(--blue); }
/* 저장 방식 선택 */
.eq-save-mode-wrap  { margin-bottom:12px; }
.eq-save-mode-label { font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:6px; }
.eq-save-mode-options { display:flex;flex-direction:column;gap:6px; }
.eq-save-mode-opt {
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;
}
.eq-save-mode-opt input { display:none; }
.eq-save-mode-opt.active { border-color:var(--blue);background:var(--blue-bg); }
.eq-save-mode-title { font-size:var(--fs-sm);font-weight:700;color:var(--text); }
.eq-save-mode-opt.active .eq-save-mode-title { color:var(--blue); }
.eq-save-mode-desc  { font-size:var(--fs-xs);color:var(--muted); }

.eq-paste-steps { font-size:var(--fs-label);color:var(--muted);padding-left:18px;line-height:2;margin-bottom:6px; }
.eq-copy-prompt { background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-size:var(--fs-xs);font-family:monospace;color:var(--muted);line-height:1.8;margin-bottom:4px; }
.eq-paste-area  { width:100%;min-height:90px;padding:10px;margin-top:4px;border:1px solid var(--border);border-radius:6px;font-size:var(--fs-label);font-family:monospace;background:var(--surface);color:var(--text);resize:vertical; }
.eq-parse-btn   { padding:9px 18px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:var(--fs-sm);font-weight:700;cursor:pointer; }
.eq-parse-btn:disabled { opacity:.4;cursor:not-allowed; }
.eq-upload-zone { display:block;border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;cursor:pointer;color:var(--muted);font-size:var(--fs-sm); }
.eq-upload-zone:hover,.eq-upload-zone.dragover { border-color:var(--blue);background:var(--blue-bg); }
.eq-upload-icon { font-size:var(--fs-num);margin-bottom:4px; }
.eq-parsed-preview { margin-top:12px;padding-top:12px;border-top:1px solid var(--border); }

/* 발주 배치 카드 */
.eq-batch-card { border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden; }
.eq-batch-hold { border-color:var(--amber); }
.eq-batch-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:10px 12px;background:var(--bg);border-bottom:1px solid var(--border); }
.eq-batch-date-label { font-size:var(--fs-sm);font-weight:700; }
.eq-batch-note-label { font-size:var(--fs-label);color:var(--muted);margin-left:8px; }
.eq-batch-models     { padding:4px 0; }
.eq-batch-model-row  { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-bottom:1px solid var(--border);font-size:var(--fs-label); }
.eq-batch-model-row:last-child { border-bottom:none; }
.eq-total-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:2px solid var(--border);margin-top:4px; }

/* 공통 테이블 */
.eq-parse-table-wrap { overflow-x:auto;border:1px solid var(--border);border-radius:8px; }
.eq-parse-table { width:100%;border-collapse:collapse;font-size:var(--fs-label); }
.eq-parse-table th { background:var(--bg);padding:7px 10px;text-align:left;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap; }
.eq-parse-table td { padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle; }
.eq-parse-table tr:last-child td { border-bottom:none; }
.eq-model-cell { font-family:monospace;font-weight:600;font-size:var(--fs-xs); }
.eq-hold-cell  { color:var(--amber);font-weight:700; }
.eq-dtype-select { padding:3px 6px;border:1px solid var(--border);border-radius:4px;font-size:var(--fs-xs);background:var(--surface);color:var(--text); }
.eq-dtype-badge { display:inline-block;padding:2px 8px;border-radius:20px;font-size:var(--fs-xs);font-weight:700;background:var(--blue-bg);color:var(--blue); }
.eq-dtype-outdoor { background:var(--green-bg);color:var(--green); }
.eq-dtype-panel   { background:var(--amber-bg);color:var(--amber); }

/* 반입 확인 */
.eq-arrival-wrap { display:flex;flex-direction:column; }
.eq-arrival-field { padding:10px 0;border-bottom:1px solid var(--border); }
.eq-arrival-field:last-of-type { border-bottom:none; }
.eq-arrival-2col { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.eq-field-label { display:block;font-size:var(--fs-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px; }
.eq-arrival-select {
  width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:var(--fs-sm);
  background:var(--surface);color:var(--text);appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
input.eq-arrival-select { background-image:none;padding-right:10px; }
.eq-type-tabs { display:flex;gap:8px; }
.eq-type-btn { flex:1;padding:10px;border:2px solid var(--border);border-radius:8px;background:var(--bg);color:var(--muted);font-size:var(--fs-sm);font-weight:700;cursor:pointer; }
.eq-type-btn.active { border-color:var(--blue);background:var(--blue-bg);color:var(--blue); }
.eq-qty-row { display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden; }
.eq-qty-btn { width:48px;height:44px;border:none;background:var(--bg);color:var(--text);font-size:var(--fs-lg);font-weight:300;cursor:pointer; }
.eq-qty-btn:active { background:var(--border); }
.eq-qty-input { flex:1;text-align:center;font-size:var(--fs-lg);font-weight:700;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 0;-moz-appearance:textfield; }
.eq-qty-input::-webkit-outer-spin-button,.eq-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.eq-save-btn { width:100%;padding:13px;margin-top:12px;background:var(--blue);color:#fff;border:none;border-radius:9px;font-size:var(--fs-md);font-weight:700;cursor:pointer; }
.eq-save-btn:disabled { opacity:.5; }

/* 반입 기록 */
.eq-hist-date { font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:10px 0 4px;border-bottom:1px solid var(--border);letter-spacing:.04em; }
.eq-hist-row  { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border); }
.eq-hist-row:last-child { border-bottom:none; }
.eq-history-type { font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:20px;background:var(--blue-bg);color:var(--blue);white-space:nowrap; }
.eq-history-type.outdoor { background:var(--green-bg);color:var(--green); }
.eq-history-type.panel   { background:var(--amber-bg);color:var(--amber); }
.eq-hist-model { font-size:var(--fs-label);font-family:monospace;font-weight:600; }
.eq-hist-qty   { font-size:var(--fs-sm);font-weight:700;white-space:nowrap; }
.eq-hist-loc   { font-size:var(--fs-xs);color:var(--muted); }

/* ── 발주 세션 메타 ── */
.eq-sess-label { font-size:var(--fs-xs);color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:2px 10px;white-space:nowrap; }

/* ── 이전 발주 이력 ── */
.eq-order-history-wrap  { margin-top:12px;border-top:1px dashed var(--border);padding-top:10px; }
.eq-history-toggle-btn  { display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;padding:6px 2px;font-size:var(--fs-label);font-weight:600;color:var(--muted);cursor:pointer;text-align:left; }
.eq-history-toggle-btn:hover { color:var(--text); }
.eq-history-toggle-disabled { cursor:default;opacity:.5; }
.eq-history-list        { margin-top:8px;display:flex;flex-direction:column;gap:6px; }
.eq-history-item        { background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px; }
.eq-history-item-label  { font-size:var(--fs-label);font-weight:700;color:var(--text); }
.eq-history-item-meta   { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px; }
.eq-history-item-date   { font-size:var(--fs-xs);color:var(--muted); }
.eq-history-item-chips  { display:flex;flex-wrap:wrap;gap:4px; }

@media (max-width: 767px) {
  .eq-order-meta   { grid-template-columns:1fr; }
  .eq-arrival-2col { grid-template-columns:1fr; }
  .eq-batch-header { flex-direction:column;align-items:flex-start; }
  .eq-parse-table  { font-size:var(--fs-xs); }
  .eq-parse-table th,.eq-parse-table td { padding:5px 7px; }
  /* 기기 현황 카드 — auto-fit(minmax 230px)이 폰에서 1열로 처리 */
  .eq-metric-val-lg { font-size:var(--fs-title); }
  /* 전체 현장 테이블 — 모바일 */
  .eq-all-table { font-size:var(--fs-label); }
  .eq-all-table th,.eq-all-table td { padding:7px 6px; }
  .eq-all-arr { font-size:var(--fs-sm); }
}

/* ══════════════════════════════════════
   모바일 UX 개선 (v1.5.11)
   ══════════════════════════════════════ */

/* ── 맨 위로 가기 버튼 ── */
#scroll-top-btn {
  position: fixed;
  right: 16px;
  bottom: calc(var(--bottom-tab-h) + 12px);
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: var(--fs-title);
  cursor: pointer;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
#scroll-top-btn:active { transform: scale(0.92); }
@media (min-width: 1024px) { #scroll-top-btn { display: none; } }

/* ── 모달 드래그 핸들 ── */
.modal-drag-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
/* 하단 시트 모달에만 핸들 표시 (모바일) */
@media (min-width: 768px) { .modal-drag-handle { display: none; } }

/* ── 버튼 로딩 스피너 ── */
@keyframes ux-spin {
  to { transform: rotate(360deg); }
}
.btn-loading {
  pointer-events: none;
  opacity: 0.75;
}
.btn-loading-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ux-spin 0.6s linear infinite;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════
   자재 계산기 — 현장 기기 현황 배너
══════════════════════════════════════════════ */
.mat-banner-inner {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.mat-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mat-banner-header-warn  { background: var(--amber-bg); border-bottom: 1px solid rgba(133,79,11,.2); }
.mat-banner-header-done  { background: var(--green-bg); border-bottom: 1px solid rgba(59,109,17,.2); }
.mat-banner-header:active { opacity: 0.85; }
.mat-banner-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.mat-banner-badge-warn {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--red-bg);
  color: var(--red);
  padding: 2px 8px;
  border-radius: 20px;
}
.mat-banner-badge-ok {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--green-bg);
  color: var(--green);
  padding: 2px 8px;
  border-radius: 20px;
}
.mat-banner-chevron {
  font-size: var(--fs-xs);
  color: var(--muted);
}
.mat-banner-body {
  padding: 12px 14px;
  overflow: hidden;
}
.mat-banner-collapsed {
  display: none;
}
.mat-banner-loading {
  font-size: var(--fs-label);
  color: var(--muted);
  margin-bottom: 10px;
}

/* 모바일 스와이프 카드 */
.mat-banner-done { color: var(--green); }
.mat-banner-rest-warn { color: var(--red);   font-weight: 700; }
.mat-banner-rest-ok   { color: var(--green); font-weight: 700; }

/* 진행 바 */
.mat-banner-bar-wrap { display: flex; align-items: center; gap: 4px; }
.mat-banner-bar      { flex: 1; height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.mat-banner-bar-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width .4s; }
.mat-banner-bar-fill.done { background: var(--green); }
.mat-banner-bar-pct  { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }

/* 진행 바 테이블 행 */
.mat-banner-bar-row td { padding-top: 4px; padding-bottom: 8px; vertical-align: middle; }
.mat-banner-bar-row .mat-banner-bar-pct { min-width: 28px; text-align: right; }

/* PC 3열 테이블 */
.mat-banner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.mat-banner-table th, .mat-banner-table td {
  padding: 7px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.mat-banner-table th { font-weight: 700; color: var(--muted); font-size: var(--fs-label); }
.mat-banner-row-lbl  { text-align: left !important; color: var(--muted); font-size: var(--fs-label); }

/* 모바일: 배너 테이블 글자 축소 */
@media (max-width: 600px) {
  .mat-banner-table            { font-size: var(--fs-label); }
  .mat-banner-table th         { font-size: var(--fs-xs); }
  .mat-banner-row-lbl          { font-size: var(--fs-xs); }
  .mat-banner-table th,
  .mat-banner-table td         { padding: 5px 6px; }
}

/* ══════════════════════════════════════════════
   자재 계산기 — 양중 완료 셀 오버레이
══════════════════════════════════════════════ */

/* 전체 완료 셀 — 연한 초록 배경 */
.mat-cell.mat-cell-hoist-all {
  background: var(--green-bg);
  border-color: rgba(59,109,17,.35);
}

/* 일부 완료 셀 — 연한 노란 배경 */
.mat-cell.mat-cell-hoist-part {
  background: var(--amber-bg);
  border-color: rgba(133,79,11,.3);
}

/* 양중 완료 뱃지 (모바일/PC 통합) */
.mat-hoist-badge-all,
.mat-hoist-badge-part {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 4px;
  margin-top: 3px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mat-hoist-badge-all  { background: var(--green-bg); color: var(--green); }
.mat-hoist-badge-part { background: var(--amber-bg); color: var(--amber); }
.mat-hoist-icons { display: none; }

/* ══════════════════════════════════════════════
   자재 계산기 — 현장 선택 + 컨트롤
══════════════════════════════════════════════ */
.mat-ctrl-card { padding: 10px 12px; margin-bottom: 8px; }
.mat-ctrl-sel {
  width: 100%;
  padding: 8px 32px 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: var(--fs-sm);
  outline: none;
  background: var(--surface);
  color: var(--text);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  cursor: pointer;
  font-family: inherit;
}

/* 동 탭바 (호실 선택 모드) */
.mat-dong-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mat-dong-tabs::-webkit-scrollbar { display: none; }
.mat-dong-tab {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  min-height: 36px;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.mat-dong-tab.mat-dong-tab-active {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-bg);
}

/* 전체선택 / 초기화 / 세대 수 줄 */
.mat-ctrl-btns-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mat-ctrl-btns-row .mat-sel-count { margin-left: auto; }

.mat-sel-count {
  font-size: var(--fs-label);
  color: var(--blue);
  font-weight: 700;
  min-height: 16px;
}

/* 열 헤더 (ON/OFF 필터) */
.mat-th-corner {
  cursor: pointer;
  user-select: none;
  background: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  padding: 4px;
}
.mat-col-header {
  cursor: default;
  user-select: none;
  padding: 0;
  min-width: 44px;
  transition: background .15s, opacity .15s;
}
.mat-col-header.mat-col-on  { background: var(--blue-bg); }
.mat-col-header.mat-col-off { background: var(--bg); opacity: 0.5; }

/* 상단: 표시/숨김 토글 */
.mat-col-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 2px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mat-col-eye {
  font-size: var(--fs-xs);
  line-height: 1;
}
.mat-col-eye-txt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.mat-col-on .mat-col-indicator  { color: var(--blue); }
.mat-col-off .mat-col-indicator { color: var(--muted); }

/* 구분선 */
.mat-col-sep {
  height: 1px;
  margin: 0 6px;
  background: var(--border);
}

/* 하단: N호 전체선택 버튼 */
.mat-col-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  padding: 4px 4px 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.3;
}
.mat-col-off .mat-col-label { color: var(--muted); }
.mat-col-sel-hint {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: -0.2px;
}

/* OFF 열 셀 (흐리게, 선택 불가) */
.mat-cell.mat-col-cell-off {
  opacity: 0.13;
  pointer-events: none;
  cursor: default !important;
}

/* 동·층 선택 — 층 체크박스 */
.mat-floor-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  color: var(--text);
}
.mat-floor-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--blue);
  flex-shrink: 0;
}

/* 칩 내부 ✓/─ 인디케이터 */
.mat-chip-indicator {
  font-size: var(--fs-xs);
  font-weight: 800;
  margin-right: 3px;
}
.mat-chip.mat-chip-on .mat-chip-indicator  { color: var(--blue); }
.mat-chip:not(.mat-chip-on) .mat-chip-indicator { color: var(--muted); }

/* ══════════════════════════════════════════════
   자재 계산기 — 현황 배너 추가 (부자재 카드, 동별 진행률)
══════════════════════════════════════════════ */
.mat-sub-site-card {
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-top: 12px;
}
.mat-sub-site-title { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; }
.mat-sub-site-note  { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 10px; }
.mat-sub-site-rows  { display: flex; flex-direction: column; }
.mat-sub-site-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.mat-sub-site-row:last-child { border-bottom: none; }
.mat-sub-site-row span:last-child { font-weight: 700; }

.mat-dong-progress       { margin-top: 14px; }
.mat-dong-progress-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.mat-dong-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mat-dong-prog-name    { font-size: var(--fs-label); font-weight: 600; min-width: 48px; }
.mat-dong-prog-bar-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
.mat-dong-prog-bar     { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.mat-dong-prog-fill    { height: 100%; background: var(--blue); border-radius: 3px; transition: width .4s; }
.mat-dong-prog-fill.done { background: var(--green); }
.mat-dong-prog-pct     { font-size: var(--fs-xs); color: var(--muted); min-width: 44px; text-align: right; white-space: nowrap; }

/* ══════════════════════════════════════════════
   자재 계산기 — 호수 칩 가로 스크롤
══════════════════════════════════════════════ */

.mat-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mat-chips-row::-webkit-scrollbar { display: none; }

/* 칩이 가로 스크롤 시 찌그러지지 않도록 */
.mat-chip { flex-shrink: 0; }

/* ══════════════════════════════════════════════
   자재 계산기 — 기기 카드 (모바일/PC 공통 3열)
══════════════════════════════════════════════ */
.mat-device-cards {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: stretch;
}

/* 기기 카드 내부 구조 */
.mat-device-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
}
.mat-device-card-hd   { text-align: center; margin-bottom: 8px; }
.mat-device-card-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.mat-device-card-num  { font-size: var(--fs-lg); font-weight: 800; color: var(--blue); margin-top: 3px; line-height: 1.1; }
.mat-device-card-unit { font-size: var(--fs-xs); font-weight: 500; margin-left: 2px; color: var(--blue); }
.mat-device-card-body { border-top: 1px solid var(--border); flex: 1; }

/* 현장 전체 반입/완료/대기 3열 (site-wide, 카드 맨 하단) */
.mat-dc-site-hoist {
  display: flex;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.mat-dc-sh-col {
  flex: 1;
  text-align: center;
  padding: 6px 2px 4px;
}
.mat-dc-sh-col + .mat-dc-sh-col { border-left: 1px solid var(--border); }
.mat-dc-sh-lbl {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.mat-dc-sh-val  { font-size: var(--fs-label); font-weight: 700; color: var(--text); line-height: 1.2; }
.mat-dc-sh-done { color: var(--green); }
.mat-dc-sh-warn { color: var(--amber); }
.mat-dc-sh-ok   { color: var(--green); }

/* 선택 세대 양중 현황 (카드 하단, site-hoist 위) */
.mat-dc-hoist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.mat-dc-hoist-done      { color: var(--green); }
.mat-dc-hoist-need      { color: var(--muted); }
.mat-dc-hoist-need.warn { color: var(--red); }

/* 모바일: 카드 내부 압축 */
@media (max-width: 600px) {
  .mat-device-card      { padding: 8px 6px; }
  .mat-device-card-name { font-size: var(--fs-xs); }
  .mat-device-card-num  { font-size: var(--fs-title); margin-top: 2px; }
  .mat-result-row       { min-height: 30px; }
}

/* ══════════════════════════════════════════════
   자재 계산기 — 부자재 그리드 (모바일: 2×2 / PC: 4×1)
══════════════════════════════════════════════ */
.mat-sub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .mat-sub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════
   자재 계산기 — Floating 결과 바 + 확장 패널 (모바일 전용)
══════════════════════════════════════════════ */

/* 바 전체 컨테이너 (column 방향: 패널 위, 메인 바 아래) */
/* -- mat split layout -- */
.m-page-wrap { flex-direction: column; gap: 0; }
.m-page-wrap.active { display: flex; }
.m-grid-pane { flex: 1; min-height: 0; }
.m-result-pane { display: none; }
body.view-ipad .m-page-wrap,
body.view-pc   .m-page-wrap { flex-direction: row; align-items: flex-start; overflow: hidden; }
body.view-ipad .m-grid-pane { flex: none; border-right: 1px solid var(--border); padding-right: 16px; overflow-y: auto; }
body.view-pc   .m-grid-pane { flex: none; border-right: 1px solid var(--border); padding-right: 16px; overflow-y: auto; }
body.view-ipad .m-result-pane,
body.view-pc   .m-result-pane { display: block; flex: 1; min-height: 0; overflow-y: auto; padding-left: 16px; }
body.view-ipad .m-grid-pane #mat-result,
body.view-pc   .m-grid-pane #mat-result { display: none; }

.m-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--bottom-tab-h) + var(--bt-safe));
  z-index: 201;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,.22);
}
.m-bar.m-bar-visible { display: flex; }

/* PC에서는 완전히 숨김 */
@media (min-width: 768px) {
  .m-bar { display: none !important; }
}

/* ── 확장 패널 (위쪽, 기본 높이 0 → 열릴 때 슬라이드업) ── */
.m-bar-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms cubic-bezier(.4,0,.2,1);
  border-radius: 16px 16px 0 0;
  background: var(--surface);
}
.m-bar-panel.m-bar-panel-open {
  max-height: 65vh;
}
.m-bar-inner {
  max-height: 65vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 드래그 핸들 (━━━) */
.m-bar-drag {
  width: 40px;
  height: 4px;
  background: rgba(0,0,0,.13);
  border-radius: 2px;
  margin: 12px auto 8px;
  cursor: pointer;
  flex-shrink: 0;
}

/* 패널 본문 */
.m-bar-body {
  padding: 4px 16px 24px;
  color: var(--text);
}

/* 기기 목록 */
.mfp-device-list {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
/* ① 실내기 강조 카드 (v2.32 2차 — 1순위 정보) */
.mfp-indoor-card {
  background: var(--blue-bg);
  border: 1px solid var(--blue);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.mfp-indoor-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mfp-indoor-name { font-size: var(--fs-md); font-weight: 800; color: var(--blue); }
.mfp-indoor-total { font-size: var(--fs-num); font-weight: 900; color: var(--blue); line-height: 1; }
.mfp-indoor-unit { font-size: var(--fs-sm); font-weight: 600; margin-left: 2px; }
.mfp-indoor-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.mfp-indoor-type {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  background: var(--surface);
  border-radius: var(--ctl-radius);
  padding: 6px 10px;
}
.mfp-indoor-type-lbl { font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.mfp-indoor-type-val { font-size: var(--fs-title); font-weight: 800; color: var(--text); }
/* ② 선택 세대 양중현황 */
.mfp-hoist {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--ctl-radius);
  font-size: var(--fs-sm); font-weight: 700;
}
.mfp-hoist-lbl  { font-size: var(--fs-label); color: var(--muted); margin-right: auto; }
.mfp-hoist-done { color: var(--green); }
.mfp-hoist-need { color: var(--muted); }
.mfp-hoist-need.warn { color: var(--amber); }
.mfp-device-row {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.mfp-device-row:last-child { border-bottom: none; }
.mfp-device-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mfp-device-icon  { font-size: var(--fs-title); }
.mfp-device-name  { font-size: var(--fs-sm); font-weight: 700; flex: 1; }
.mfp-device-total { font-size: var(--fs-title); font-weight: 900; color: var(--blue); }
.mfp-device-unit  { font-size: var(--fs-label); font-weight: 500; color: var(--muted); margin-left: 1px; }
/* 패널 컨텍스트 헤더 */
.mfp-ctx {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mfp-ctx-loc   { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.mfp-ctx-range { font-size: var(--fs-label); font-weight: 600; color: var(--muted); }

/* 기기 상세 행 (mat-result-row 모사) */
.mfp-detail-rows { margin-top: 6px; padding-left: 26px; }
.mfp-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 26px;
  border-bottom: 1px solid var(--border);
}
.mfp-detail-row:last-child { border-bottom: none; }
.mfp-detail-lbl { font-size: var(--fs-label); color: var(--muted); }
.mfp-detail-val { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }

.mfp-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  font-size: var(--fs-label);
  color: var(--muted);
  margin-top: 5px;
  padding-left: 26px;
}

/* 복사 섹션 */
.mfp-copy-section {}
.mfp-copy-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mfp-copy-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
/* ③ 패널 칩 = 공용 .ctl-chip, 켜진 칩 앞에 ✓ */
.mfp-chip.ctl-chip { padding: 0 6px; min-width: 0; }
.mfp-chip.ctl-chip.on::before { content: '✓'; font-weight: 800; }
.mfp-copy-btn {
  width: 100%;
  min-height: var(--ctl-h);
  padding: 12px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--ctl-radius);
  transition: background .15s;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  -webkit-tap-highlight-color: transparent;
}
.mfp-copy-btn:active { opacity: .85; }
/* ④ 복사 직후 1초 "✓ 복사됨" */
.mfp-copy-btn.is-copied { background: var(--green); }
/* 아래 바가 내용을 가리지 않게 — 바 높이(버튼 --ctl-h + 위아래 10px + 테두리) + 여유 */
.m-bar-spacer { height: calc(var(--ctl-h) + 32px); flex-shrink: 0; }

/* ── 항상 보이는 메인 바 ── */
.m-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--blue);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.m-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.m-bar-count { font-size: var(--fs-md); font-weight: 800; white-space: nowrap; }
.m-bar-stat  { font-size: var(--fs-label); font-weight: 600; opacity: .9; white-space: nowrap; }
.m-bar-acts { display: flex; gap: 8px; flex-shrink: 0; }

.m-bar-btn {
  border: none;
  border-radius: var(--ctl-radius);
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  height: var(--ctl-h);
  min-height: var(--ctl-h);
  -webkit-tap-highlight-color: transparent;
}
/* 토글 버튼 (∧/∨) */
.m-bar-toggle {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: var(--fs-md);
  padding: 0 14px;
  transition: transform .25s;
}
.m-bar-toggle:active { opacity: .75; }
/* 패널 열림 시 버튼 색상 강조 */
.m-bar-panel-open ~ .m-bar-main .m-bar-toggle {
  background: rgba(255,255,255,.32);
}
.m-bar-copy { background: var(--surface); color: var(--blue); }
.m-bar-copy:active { opacity: .8; }

/* ══════════════════════════════════════════════
   자재계산기 — 범위 선택 모드
══════════════════════════════════════════════ */

/* 모드 탭 (세밀 선택 / 범위 선택) */
.mat-mode-tabs {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.mat-mode-tab {
  flex: 1;
  padding: 0 12px;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: none;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.mat-mode-tab + .mat-mode-tab { border-left: 1px solid var(--border); }
.mat-mode-tab.mat-mode-tab-on { background: var(--blue); color: #fff; }
.mat-mode-tab:active { opacity: .85; }

/* 범위 선택 섹션 카드 */
.mat-range-section { padding: 12px 14px; margin-bottom: 12px; }

.mat-range-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mat-range-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

/* 전체 / 전체해제 버튼 */
.mat-range-all-btn {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  min-height: 32px;
  transition: background .12s, color .12s, border-color .12s;
}
.mat-range-all-btn.mat-range-all-btn-on {
  background: var(--blue-bg);
  border-color: var(--blue);
  color: var(--blue);
}

/* 층 범위 — 항상 표시 입력창 */
.mat-range-floor-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.mat-floor-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-size: 16px;    /* iOS 자동 확대 방지 */
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  min-height: 44px;
}
.mat-floor-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.mat-floor-sep { font-size: var(--fs-md); color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* 동 칩 세대 수 뱃지 */
.mat-chip-count {
  display: inline-block;
  font-size: var(--fs-xs);
  color: inherit;
  opacity: 0.65;
  margin-left: 3px;
  font-weight: 500;
}

/* 선택 요약 카드 — 자동계산 후 세대수 크게 표시 */
.mat-range-summary {
  padding: 14px;
  margin-bottom: 14px;
}
.mat-range-summary-text { font-size: var(--fs-sm); line-height: 1.6; }

/* ── 동별 소계 accordion ── */
.mat-dong-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mat-dong-row:last-child { border-bottom: none; }
.mat-dong-name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  min-width: 56px;
  flex-shrink: 0;
}
.mat-dong-stat {
  font-size: var(--fs-label);
  color: var(--muted);
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   알림 UX 고도화 (v1.5.30)
   ═══════════════════════════════════════════════ */

/* ── 알림 패널 바텀시트 슬라이드업 애니메이션 ── */
@keyframes notifSlideUp {
  from { transform: translateY(30%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── 알림 아이템 hover ── */
.notif-item:hover {
  background: var(--bg) !important;
}

/* ── 알림 패널 모바일 최대높이 보정 ── */
@media (max-width: 767px) {
  #notif-panel {
    /* JS에서 직접 스타일 적용, CSS는 기본값만 */
    overflow-y: hidden;
  }
}

/* ── 스켈레톤 로딩 (v1.8.2) ── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0 }
  100% { background-position: -200% 0 }
}
.skeleton-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
.skeleton-line.short  { width: 55%; }
.skeleton-line.medium { width: 75%; }
.skeleton-block {
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}

/* ══════════════════════════════════════
   UI 개선 — 기술적/기능적 리파인 (v1.9.4)
   ══════════════════════════════════════ */

/* list-table 숫자 정렬 */
.list-table td { font-size: var(--fs-label); font-variant-numeric: tabular-nums; }

/* payroll 숫자 정렬 */
.payroll-table td { font-variant-numeric: tabular-nums; }

/* page-title 타이포 강화 */
.page-title { letter-spacing: -0.03em; }

/* 그룹 편집 패널 반경 */
#group-edit-panel { border-radius: 6px !important; }

/* 알림 드롭다운 반경 */
#notif-panel { border-radius: 8px !important; }

/* 시공 액션 드롭다운 반경 */
#construct-actions-menu { border-radius: 6px !important; }

/* ══════════════════════════════════════
   이상신고 관리 UI (v2.28.6 프로토타입 동기화)
   ══════════════════════════════════════ */

#page-site-issues { flex-direction:column; padding:0; overflow:hidden; }
#page-site-issues.active { display:flex; }

/* 페이지 레이아웃 — sticky 헤더 + 스크롤 영역 분리 */
.si-top-wrap { background:var(--bg); border-bottom:1px solid var(--border); flex-shrink:0; padding:12px 16px 0; }
.si-content-scroll { flex:1; overflow-y:auto; padding:12px 16px calc(var(--bottom-tab-h,60px) + 20px); scrollbar-width:none; }
.si-content-scroll::-webkit-scrollbar { display:none; }
@media (min-width: 1024px) { .si-content-scroll { padding-bottom:24px; } }

/* 요약 대시보드 카드 — 프로토타입 1:1 */
.si-summary {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
}
.si-summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.si-summary-div {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  flex-shrink: 0;
}
.si-summary-val {
  display: block;
  font-size: var(--fs-num);
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.si-val-open  { color: var(--red); }
.si-val-date  { font-size: var(--fs-md) !important; font-weight: 600; color: var(--blue); }
.si-summary-label { display:block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

/* 현장 탭 — 알약형, overflow 가로 스크롤 */
.si-site-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.si-site-tabs::-webkit-scrollbar { display: none; }
.si-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.si-tab:hover { border-color: var(--blue); color: var(--blue); }
.si-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.si-tab-badge {
  background: var(--red);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 2px;
  line-height: 1.4;
}

/* 타입 탭 — 균등 분할 (이상신고 | 자재메모 좌우 중앙 배치) */
.si-type-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 12px; }
.si-type-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.si-type-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background 0.15s;
}
.si-type-tab.active { color: var(--blue); font-weight: 700; }
.si-type-tab.active::after { background: var(--blue); }
.si-type-count { font-size: var(--fs-xs); font-weight: 700; border-radius: 10px; padding: 1px 6px; margin-left: 2px; line-height: 1.4; }
.si-count-red   { background: var(--red-bg);   color: var(--red); }
.si-count-amber { background: var(--amber-bg); color: var(--amber); }

/* 필터 행 */
.si-filter-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 12px; }
.si-toggle-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.si-toggle-text { font-size: var(--fs-sm); color: var(--text-3); font-weight: 600; }
.si-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--border);
  border-radius: 13px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.si-toggle.on { background: var(--green); }
.si-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.si-toggle.on .si-toggle-knob { transform: translateX(18px); }
.si-count-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-3);
}

/* 카드 */
.si-card {
  display: flex;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06);
  transition: box-shadow 0.15s;
}
.si-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.09); }
.si-card-resolved .si-card-body { opacity: 0.6; }
.si-card-bar { width: 4px; flex-shrink: 0; background: var(--red); }
.si-bar-resolved { background: var(--green); }
.si-bar-amber { background: var(--amber); }
.si-card-body { flex: 1; padding: 12px 14px 11px; min-width: 0; }
.si-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.si-card-location { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.si-card-status { font-size: var(--fs-xs); font-weight: 700; border-radius: 20px; padding: 2px 8px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em; }
.si-status-open { background: var(--red-bg); color: var(--red); }
.si-status-done { background: var(--bg); color: var(--muted); }
.si-card-desc { font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--text); margin-bottom: 8px; word-break: break-all; }
.si-card-resolved .si-card-desc { text-decoration: line-through; }
.si-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.si-card-who { font-size: var(--fs-xs); color: var(--muted); }
.si-action-btn {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 32px;
  -webkit-tap-highlight-color: transparent;
}
.si-action-btn:active { opacity: 0.7; }
.si-action-resolve { background: var(--green-bg); color: var(--green); border-color: rgba(59,109,17,0.4); }
.si-action-delete  { background: var(--red-bg);   color: var(--red);   border-color: rgba(163,45,45,0.4); }
.si-empty { text-align: center; padding: 32px 16px; font-size: var(--fs-sm); color: var(--muted); }

/* ══════════════════════════════════════
   신규 공통 컴포넌트 (v2.0.0)
   ══════════════════════════════════════ */

/* ── 범용 select 유틸리티 (v2.28.0) — form-group 외부·JS 동적생성 select 공통 ── */
.sel {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 32px 9px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  font-family: inherit;
  outline: none;
  width: 100%;
  min-height: 40px;
  cursor: pointer;
  transition: border-color .15s;
}
.sel:focus { border-color: var(--blue); }
.sel-sm {
  padding: 5px 28px 5px 10px;
  font-size: var(--fs-label);
  min-height: 32px;
  background-size: 12px 12px;
  background-position: right 8px center;
}
.sel-inline { width: auto; }

/* tool-card — 기능 허브 카드 */
.tool-card {
  cursor: pointer;
  text-align: center;
  padding: 28px 16px 24px;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tool-card-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
}
.tool-card-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tool-card-desc {
  font-size: var(--fs-label);
  color: var(--muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════
   기술자료 필터 바 (v1.9.9)
   ══════════════════════════════════════ */
.td-lightbox { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.85); align-items: center; justify-content: center; }
.td-lightbox.open { display: flex; }
.td-lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 10px; object-fit: contain; }
.td-lb-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: var(--fs-title); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.td-fab { position: fixed; right: 16px; bottom: calc(var(--bottom-tab-h) + 16px + var(--bt-safe)); width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--blue); color: #fff; font-size: var(--fs-num); cursor: pointer; box-shadow: 0 4px 16px rgba(24,95,165,.4); display: flex; align-items: center; justify-content: center; z-index: 90; }

/* 온보딩 모달 */
#onboarding-modal { background: var(--surface); width: 100%; max-width: 400px; position: relative; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); animation: obSlideUp 0.3s ease; border-radius: 16px; }

/* 자재계산기 배너/카드 반경 */
.mat-banner-inner    { border-radius: 8px; }
.mat-sub-site-card   { border-radius: 8px; }
.mat-mode-tabs       { border-radius: 4px; }

/* 자재계산기 소형 배지 — pill→square */
[class*="mat-banner-badge"]  { border-radius: 3px; }
[class*="mat-hoist-summary-badge"] { border-radius: 3px; }

/* 장치 추가 버튼 */
.mfp-device-list + * [style*="border-radius:12px"],
[style*="border-radius: 12px;font-size: 15px"] { border-radius: 6px; }

/* v2.7.1 작업현황표 */
.ws-table { border-collapse:collapse;font-size:var(--fs-xs); }
.ws-th { padding:4px 6px;background:var(--bg);border:1px solid var(--border);font-weight:600;white-space:nowrap;text-align:center; }
.ws-cell { border:1px solid var(--border);padding:3px 2px;text-align:center;vertical-align:middle;min-width:38px; }
.ws-unit-no { font-size:var(--fs-xs);color:var(--muted); }
.ws-line-count { font-size:var(--fs-xs);font-weight:600; }
.ws-this    { background:var(--amber-bg);color:var(--amber); }
.ws-prev    { background:var(--bg);color:var(--text-2); }
.ws-done    { background:var(--surface); }
.ws-undone  { background:var(--surface-alt);color:var(--muted); }
.ws-na      { background:repeating-linear-gradient(45deg,var(--border),var(--border) 1px,var(--surface) 1px,var(--surface) 6px); }
.ws-empty   { background:transparent;border-color:transparent; }
.ws-swatch  { display:inline-block;width:12px;height:12px;border:1px solid var(--border);border-radius:2px;vertical-align:middle;margin-right:3px; }
.ws-swatch.ws-this   { background:var(--amber-bg); }
.ws-swatch.ws-prev   { background:var(--bg); }
.ws-swatch.ws-done   { background:var(--surface); }
.ws-swatch.ws-undone { background:var(--surface-alt); }
.ws-print-header { margin-bottom:10px; }
/* 청구서 스타일 */
.inv-doc { padding:20px;font-family:sans-serif;font-size:var(--fs-sm); }
.inv-title { text-align:center;font-size:var(--fs-lg);font-weight:700;margin-bottom:16px; }
.inv-meta { display:flex;gap:24px;flex-wrap:wrap;margin-bottom:14px;font-size:var(--fs-sm); }
.inv-table { width:100%;border-collapse:collapse;margin-bottom:16px; }
.inv-th { padding:6px 8px;background:var(--bg);border:1px solid var(--border);font-size:var(--fs-label);font-weight:600;text-align:center;white-space:nowrap; }
.inv-td { padding:5px 8px;border:1px solid var(--border);font-size:var(--fs-label);vertical-align:middle; }
.inv-center { text-align:center; }
.inv-right  { text-align:right; }
.inv-highlight { background:var(--amber-bg);font-weight:700; }
.inv-total  { font-weight:700;background:var(--bg); }
.inv-foot   { text-align:right;font-size:var(--fs-sm);margin-top:24px;line-height:2; }
/* 인쇄 격리 — body 클래스로 대상 모달 지정 */
@media print {
  body > * { display:none !important; }
  body.print-ws .modal-overlay#claim-ws-modal { display:block !important;position:static !important; }
  body.print-ws .modal-overlay#claim-ws-modal .modal { box-shadow:none !important;border:none !important;max-width:100% !important;width:100% !important; }
  body.print-ws .modal-overlay#claim-ws-modal .modal-head button,
  body.print-ws .modal-overlay#claim-ws-modal #ws-rate-tabs { display:none !important; }
  body.print-ws .ws-table { width:100%; }
  body.print-ws .ws-this  { background:#FFD580 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact; }
  body.print-ws .ws-prev  { background:#D9D9D9 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact; }
  body.print-invoice .modal-overlay#claim-invoice-modal { display:block !important;position:static !important; }
  body.print-invoice .modal-overlay#claim-invoice-modal .modal { box-shadow:none !important;border:none !important;max-width:100% !important;width:100% !important; }
  body.print-invoice .modal-overlay#claim-invoice-modal .modal-head button { display:none !important; }
  body.print-invoice .inv-table { width:100%; }
  body.print-invoice .inv-highlight { background:#FFF9E6 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact; }
  @page { size:A4 landscape;margin:10mm; }
}

/* v2.7.0 기성청구 */
.claim-rate-tab { padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-size:var(--fs-sm);cursor:pointer; }
.claim-rate-tab.active { background:var(--blue);color:#fff;border-color:var(--blue); }
.claim-cell { text-align:center;font-size:var(--fs-xs);padding:3px 2px;cursor:pointer;user-select:none;border:1px solid var(--border); }
.claim-cell.done_unclaimed { background:var(--surface); }
.claim-cell.selecting      { background:var(--amber-bg);color:var(--amber);font-weight:700; }
.claim-cell.selected       { background:var(--green-bg);color:var(--green);font-weight:700; }
.claim-cell.previous       { background:var(--bg);color:var(--muted);cursor:default; }
.claim-cell.not_done       { background:var(--red-bg);color:var(--red); }
.claim-cell.hatch          { background:repeating-linear-gradient(45deg,var(--border),var(--border) 1px,var(--surface) 1px,var(--surface) 6px);cursor:default; }
.claim-cell.empty          { background:transparent;border-color:transparent;cursor:default; }
.claim-cell:not(.previous):not(.hatch):not(.empty):hover { filter:brightness(0.95); }
@media (max-width: 767px) { #claim-layout { grid-template-columns:1fr !important; } }

/* ════════════════════════════════════════
   홈 탭 컴포넌트 v2.14.0
   ════════════════════════════════════════ */

/* 빠른 출퇴근 카드 상태 */
.qc-card-idle   { background:var(--surface); }
.qc-card-active { background:var(--amber-bg);border-color:rgba(133,79,11,.15)!important; }
.qc-card-done   { background:var(--green-bg);border-color:rgba(59,109,17,.15)!important; }

/* 빠른 출퇴근 — 시간 블록 */
.qc-time-block {
  display:flex;align-items:center;justify-content:center;
  gap:14px;padding:14px 12px;
  background:rgba(0,0,0,.04);border-radius:12px;
  margin-bottom:14px;
}
.qc-time-unit { text-align:center; }
.qc-time-lbl  { font-size:var(--fs-xs);font-weight:700;color:var(--muted);
                 letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px; }
.qc-time-val  { font-size:var(--fs-num);font-weight:900;letter-spacing:-.02em;
                 font-variant-numeric:tabular-nums;line-height:1; }
.qc-time-val.live { color:var(--text); }
.qc-time-val.dim  { color:var(--muted); }

/* 빠른 출퇴근 — CTA 버튼 */
.qc-btn {
  width:100%;height:56px;
  border:1px solid rgba(0,0,0,.1);border-radius:14px;
  font-size:var(--fs-md);font-weight:800;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .1s,box-shadow .1s;
  -webkit-tap-highlight-color:transparent;
}
.qc-btn:active { transform:translateY(1px); }
.qc-btn-in {
  background:linear-gradient(180deg,#2276ce 0%,#185FA5 100%);color:#fff;
  box-shadow:0 4px 16px rgba(24,95,165,.38),inset 0 1px 0 rgba(255,255,255,.2);
}
.qc-btn-out {
  background:linear-gradient(180deg,#4ea640 0%,#3B6D11 100%);color:#fff;
  box-shadow:0 4px 16px rgba(59,109,17,.32),inset 0 1px 0 rgba(255,255,255,.18);
}
.qc-btn-in-warn {
  background:linear-gradient(180deg,#d4892a 0%,var(--amber) 100%);color:#fff;
  box-shadow:0 4px 16px rgba(133,79,11,.38),inset 0 1px 0 rgba(255,255,255,.2);
}
.qc-btn[disabled],.qc-btn:disabled {
  background:var(--bg);color:var(--muted);
  border:1.5px solid var(--border);box-shadow:none;cursor:default;
  transform:none;
}

/* 공지사항 카드 */
.notice-card {
  background:var(--surface);
  border-radius:var(--card-radius);
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.065);
  box-shadow:var(--shadow-md);
  margin-bottom:12px;
}
.notice-body  { font-size:var(--fs-sm);line-height:1.65;color:var(--text-2);margin-bottom:8px; }
.notice-meta  { font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center;gap:8px; }
.notice-edit-btn {
  height:26px;padding:0 9px;
  border:1.5px solid var(--border);border-radius:7px;
  background:var(--surface);font-size:var(--fs-xs);font-weight:700;
  cursor:pointer;font-family:inherit;color:var(--muted);
  display:inline-flex;align-items:center;gap:4px;
  margin-left:auto;
}

/* 미처리 이슈 카드 */
.issue-card {
  background:var(--surface);
  border-radius:var(--card-radius);
  padding:16px 18px;
  border:1px solid rgba(0,0,0,.065);
  box-shadow:var(--shadow-md);
  border-left:4px solid var(--red);
  margin-bottom:12px;
}
.issue-row {
  display:flex;align-items:center;gap:8px;
  padding:8px 0;border-bottom:1px solid #f5f5f3;font-size:var(--fs-label);
}
.issue-row:last-of-type { border-bottom:none; }
.issue-unit { font-weight:700;color:var(--text);min-width:40px;flex-shrink:0; }
.issue-desc { flex:1;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.issue-age  { color:var(--muted);flex-shrink:0;font-size:var(--fs-xs); }
.issue-btn  {
  height:26px;padding:0 9px;
  border:1.5px solid rgba(163,45,45,.35);border-radius:7px;
  background:var(--red-bg);font-size:var(--fs-xs);font-weight:700;
  cursor:pointer;font-family:inherit;color:var(--red);
  flex-shrink:0;white-space:nowrap;
}
.issue-link {
  font-size:var(--fs-label);color:var(--blue);font-weight:600;
  cursor:pointer;display:block;margin-top:8px;text-align:right;
}

/* 이벤트 바 & 리스트 */
.ev-list { display:flex;flex-direction:column; }

/* 이벤트 타임라인 (PC 이상에서만 표시) */
@media (min-width: 1024px) {
  .ev-timeline {
    display:grid;grid-template-columns:repeat(7,1fr);
    gap:6px;padding:4px 0;margin-top:14px;
  }
}

/* ================================================================
   출퇴근 탭 컴포넌트 v2.14.0
   ================================================================ */

/* 컨트롤 바 */
.att-ctrl-bar {
  display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  margin-bottom:20px;
}
.att-week-nav { display:flex;align-items:center;gap:6px;flex-shrink:0; }
.att-week-lbl { font-size:var(--fs-sm);font-weight:700;color:var(--text);min-width:80px;text-align:center; }
.att-ctrl-seg .att-seg-btn { font-size:var(--fs-label);padding:5px 12px; }
#att-filter-name { padding:5px 8px;border:1px solid var(--border);border-radius:7px;font-size:var(--fs-label);background:var(--surface);margin-left:auto; }
@media (max-width: 767px) {
  .att-ctrl-bar { flex-wrap:wrap;row-gap:8px; }
  #att-filter-name { flex:1 1 0;min-width:180px;margin-left:0; }
  .att-ctrl-bar .att-vis-btn { flex:0 0 auto; }
  .att-week-lbl { min-width:0; }
  #att-date-view, #att-person-view { padding-bottom:72px; }
}
.att-week-nav-btn {
  width:30px;height:30px;border:1.5px solid var(--border);
  border-radius:8px;background:var(--surface);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.att-week-nav-btn:hover { background:var(--bg); }

/* 수정 버튼 */
.att-edit-btn {
  white-space:nowrap;
}

/* 인원 카드 (인원별 뷰) */
.att-pcard.sel { background:var(--blue-bg); }
.att-pcard.sel .att-pcard-name { color:var(--blue); }

/* 주간 매트릭스 (PC) */
.att-mc-site { color:inherit; }
@media (min-width: 1024px) { .att-mc-site { display:block; } }

/* ================================================================
   시공관리 탭 컴포넌트 v2.14.0
   ================================================================ */

/* 동 탭 (프로토타입 .dong-tab) */
.dong-tab {
  padding:7px 12px;border:1.5px solid var(--border);border-radius:9px;
  background:var(--surface);font-size:var(--fs-label);font-weight:600;
  cursor:pointer;font-family:inherit;color:var(--muted);
  white-space:nowrap;flex-shrink:0;transition:all .15s;
  display:flex;align-items:center;gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.dong-tab.on {
  background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 3px 10px rgba(24,95,165,.25);
}
.dong-tab-cnt { font-size:var(--fs-xs); }
.dong-tab.on .dong-tab-cnt { opacity:.9; }

/* ── 시공관리 툴바 (프로토타입 완전 동기화) ── */
.cst-tbar {
  display:flex;
  align-items:center;
  padding:7px 14px 6px;
  flex-shrink:0;
  flex-wrap:nowrap;
  background:var(--surface);
  border-bottom:1px solid #f5f5f3;
}
/* 현장 선택 드롭다운 */
.cst-site-sel {
  flex:1;min-width:0;max-width:140px;
  padding:5px 22px 5px 8px;border:1.5px solid var(--border);border-radius:9px;
  font-size:var(--fs-label);font-weight:600;background:var(--bg);color:var(--text);
  font-family:inherit;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:11px;
  flex-shrink:0;cursor:pointer;
}
/* 구분선 */
.ctrl-divider { width:1px;height:20px;background:var(--border);flex-shrink:0; }
/* 뷰 전환 세그먼트 */
.cst-view-seg { display:flex;background:var(--bg);border-radius:9px;padding:3px;flex-shrink:0; }
.cst-view-btn {
  border:none;background:none;padding:5px 9px;border-radius:7px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;font-family:inherit;
  color:var(--muted);transition:all .15s;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.cst-view-btn.on { background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08); }
/* 그룹 버튼 칩 */
.cst-grp-chip {
  padding:5px 9px;border:1.5px solid var(--border);border-radius:9px;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);cursor:pointer;
  background:var(--surface);font-family:inherit;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;gap:3px;flex-shrink:0;transition:all .15s;
}
.cst-grp-chip.on { background:var(--blue-bg);border-color:var(--blue);color:var(--blue); }
.cst-grp-chip:active { opacity:.7; }
/* 요약 텍스트 */
.cst-sum { font-size:var(--fs-xs);font-weight:700;color:var(--blue);white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis; }
/* 폰·iPad 세로: 툴바 줄바꿈 + 요약은 아랫줄 전체 폭 (PC 툴바와 클래스 공유 → body 범위 제한, v2.58.1 A3) */
body.view-mobile .cst-tbar, body.view-ipad .cst-tbar { flex-wrap:wrap; row-gap:6px; }
body.view-mobile .cst-site-sel, body.view-ipad .cst-site-sel { max-width:none; flex:1; }
body.view-mobile .cst-sum, body.view-ipad .cst-sum { order:10; flex-basis:100%; }
/* 진행도 토글 버튼 (모바일) */
.cst-prog-btn {
  width:28px;height:28px;border:1.5px solid var(--border);border-radius:8px;
  background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--muted);flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;transition:all .15s;
}
.cst-prog-btn.on { background:var(--blue-bg);border-color:var(--blue);color:var(--blue); }
/* iPad/PC 인라인 액션 (모바일에서 숨김) */
.cst-inline-actions { display:none; flex-shrink:0; align-items:center; }
/* PC 전용 공정 드롭다운 */
.cst-proc-sel-pc {
  display:none;padding:5px 28px 5px 8px;border:1.5px solid var(--border);border-radius:8px;
  font-size:var(--fs-xs);background:var(--surface);font-family:inherit;color:var(--text);
  min-width:110px;max-width:150px;outline:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:12px 12px;
}
/* tbar-btn (인라인 액션 버튼) */
.tbar-btn {
  -webkit-tap-highlight-color:transparent;
}
.tbar-btn:active { background:var(--bg); }

/* 공정 칩 행 */
.cst-proc-row {
  display:flex;
  align-items:center;
  padding:6px 14px;
  overflow-x:auto;
  flex-shrink:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  border-bottom:1px solid #f5f5f3;
}
.cst-proc-row::-webkit-scrollbar { display:none; }
.cst-proc-chip {
  padding:5px 12px;border-radius:20px;border:1.5px solid var(--border);
  background:var(--surface);font-size:var(--fs-label);font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;
  flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.cst-proc-chip:active { opacity:.7;transform:scale(.96); }
.cst-proc-chip.on { background:var(--blue);color:#fff;border-color:var(--blue); }
.cst-proc-chip.grp-hi { background:var(--blue-bg);color:var(--blue);border-color:var(--blue); }

/* 공정 모드 배너 */
.cst-proc-banner {
  display:flex;align-items:center;gap:10px;padding:7px 14px;
  background:var(--blue);color:#fff;flex-shrink:0;
}
.cst-proc-banner-icon {
  width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cst-proc-banner-body { flex:1;min-width:0; }
.cst-proc-banner-name { font-size:var(--fs-sm);font-weight:800;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cst-proc-banner-sub { font-size:var(--fs-xs);opacity:.7;font-weight:500;margin-top:1px;display:block; }
.cst-proc-reset {
  font-size:var(--fs-xs);font-weight:700;color:rgba(255,255,255,.85);background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 10px;
  cursor:pointer;font-family:inherit;flex-shrink:0;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.cst-proc-reset:active { background:rgba(255,255,255,.28); }

/* 진행도 영역 (모바일 토글) */
.cst-prog-area { display:none;padding:10px 14px;flex-shrink:0;background:var(--bg); }
.cst-prog-area.open { display:block; }

/* 시공관리: 툴바가 헤더에 바로 붙어야 하므로 전역 padding-top 상쇄 */
#page-construct { margin-top: -12px; }

/* ── Phase3: cst-panel-wrap / cst-right-panel ── */
#cst-panel-wrap { display:flex;flex-direction:column;flex:1;min-height:0; }
#apt-view { flex:1;min-height:0; }
#cst-right-panel { display:none; flex-direction:column; }
.cst-rp-prog-hd { display:flex; align-items:center; justify-content:space-between; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.cst-rp-prog-hd:active { background:var(--bg); }
.cst-rp-prog-title { font-size:var(--fs-label);font-weight:700;color:var(--muted); }
.cst-rp-prog-ic { font-size:var(--fs-xs);color:var(--muted); }
#cst-right-prog-body.collapsed { display:none; }
.cst-panel-hint { display:flex;align-items:center;justify-content:center;flex:1;flex-direction:column;gap:10px;color:var(--muted);padding:40px 20px; }

/* iPad (768px+): 인라인 액션 표시 */
@media (min-width: 768px) {
  .cst-inline-actions { display:flex; }
  .cst-prog-btn { display:none; }
}
/* PC (1024px+): 공정 칩 → 드롭다운 전환, 우측 패널 표시 */
@media (min-width: 1024px) {
  .cst-proc-row { display:none; }
  .cst-proc-sel-pc { display:block; }
  #cst-panel-wrap { flex-direction:row; }
  .cst-prog-area { display:none !important; }
}

/* ══════════════════════════════════════
   세대 상세 바텀시트 (v2.29.2 프로토타입)
   ══════════════════════════════════════ */
.unit-modal {
  display:flex;
  align-items:flex-end;
  inset:0;
  z-index:400;
  background:rgba(0,0,0,.48);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.unit-modal.open {
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .22s ease, visibility 0s linear 0s;
}
.unit-modal.open .unit-sheet { transform:translateY(0); }
.unit-sheet::-webkit-scrollbar { display:none; }
.unit-sheet { width:100%; background:var(--surface); border-radius:20px 20px 0 0; max-height:82%; overflow-y:auto; transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1); will-change:transform; scrollbar-width:none; }
.unit-sheet-drag { width:36px; height:4px; background:var(--border); border-radius:2px; margin:10px auto 0; }
.unit-sheet-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 10px; }
.unit-sheet-title { font-size:var(--fs-title); font-weight:900; letter-spacing:-0.02em; }
.unit-sheet-close {
  width:30px; height:30px; border:none; background:var(--bg);
  border-radius:50%; cursor:pointer; font-size:var(--fs-md);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.unit-sheet-divider { height:1px; background:var(--border); }
.unit-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0 18px 12px; }
.unit-info-cell { background:var(--bg); border-radius:8px; padding:9px 10px; }
.unit-info-lbl { font-size:var(--fs-xs); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.unit-info-val { font-size:var(--fs-sm); font-weight:700; }
/* 탭 */
.u-tabs { display:flex; border-bottom:2px solid var(--border); padding:0 18px; }
.u-tab {
  flex:1; padding:10px 0; text-align:center;
  font-size:var(--fs-sm); font-weight:700; color:var(--muted);
  cursor:pointer; border:none; background:none; font-family:inherit;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color .15s; -webkit-tap-highlight-color:transparent;
}
.u-tab.on { color:var(--blue); border-bottom-color:var(--blue); }
.u-tab-pane { display:none; }
.u-tab-pane.on { display:block; }
/* 공정 행 */
.unit-sheet-procs { padding:0 18px; }
.u-proc-row {
  display:flex; align-items:center; padding:9px 0;
  border-bottom:1px solid #f5f5f3; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.u-proc-row:last-child { border-bottom:none; }
.u-proc-row:active { background:var(--bg); margin:0 -18px; padding:13px 18px; border-radius:8px; }
.u-proc-num {
  width:24px; height:24px; border-radius:50%;
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700; color:var(--muted); flex-shrink:0; margin-right:10px;
}
.u-proc-name-wrap { flex:1; min-width:0; }
.u-proc-name { font-size:var(--fs-sm); color:var(--text-3); }
.u-proc-meta { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.u-proc-st { font-size:var(--fs-xs); font-weight:700; padding:3px 9px; flex-shrink:0; }
.u-proc-st.done { background:var(--green-bg); color:var(--green); }
.u-proc-st.todo { background:var(--bg); color:var(--muted); }
/* 이슈/자재 행 */
.u-issue-row, .u-mat-row {
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 0; border-bottom:1px solid #f5f5f3;
}
.u-issue-row:last-of-type, .u-mat-row:last-of-type { border-bottom:none; }
.u-input-row { display:flex; gap:8px; padding:12px 0 4px; }
.u-input-row input {
  flex:1; padding:9px 12px; border:1.5px solid var(--border);
  border-radius:10px; font-size:var(--fs-sm); font-family:inherit;
  background:var(--bg); outline:none;
}
/* 하단 버튼 */
.unit-sheet-foot { padding:14px 18px env(safe-area-inset-bottom,8px); display:flex; gap:8px; }
.unit-sheet-close-btn {
  flex:1; height:44px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-3); border-radius:10px;
  font-size:var(--fs-sm); font-weight:600; cursor:pointer; font-family:inherit;
}

/* 시공 그리드 세포 추가 클래스 */
.apt-u   {
  min-width:72px;height:80px;
  border-radius:12px;cursor:pointer;
  position:relative;overflow:hidden;vertical-align:top;
  transition:background .18s, border-color .18s, transform .1s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.apt-u:active { transform:scale(0.94); }
/* 배경·테두리는 <td>.apt-u 에만 적용 — 내부 div 오염 방지 */
.apt-u.apt-done { background:var(--green-bg); border:1.5px solid transparent; }
.apt-u.apt-part { background:var(--blue-bg);  border:1.5px solid transparent; }
.apt-u.apt-todo { background:var(--surface-alt); border:1.5px solid var(--border); }
.apt-ci   { display:flex;flex-direction:column;padding:7px 6px 5px;height:100%; }
.apt-no   { font-size:var(--fs-xs);font-weight:900;line-height:1.1;letter-spacing:-.01em; }
.apt-u.apt-done .apt-no { color:var(--green); }
.apt-u.apt-part .apt-no { color:var(--blue); }
.apt-u.apt-todo .apt-no { color:var(--text-2); }
.apt-hp   { font-size:var(--fs-xs);font-weight:700;margin-top:1px;opacity:.85; }
.apt-foot { margin-top:auto;padding-top:4px; }
.apt-pct  { font-size:var(--fs-xs);font-weight:800;text-align:right;margin-bottom:2px;line-height:1; }
.apt-u.apt-done .apt-pct { color:var(--green); }
.apt-u.apt-part .apt-pct { color:var(--blue); }
.apt-u.apt-todo .apt-pct { color:var(--muted); }
.apt-bg   { height:3px;border-radius:3px;overflow:hidden;background:rgba(0,0,0,.07); }
.apt-fill { height:100%;border-radius:3px;transition:width .4s; }
.apt-ck   {
  position:absolute;top:6px;right:6px;
  width:16px;height:16px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(21,128,61,.35);
}
/* 체크마크 등장 애니메이션 */
@keyframes ckPop {
  0%   { transform:scale(0) rotate(-20deg); opacity:0; }
  65%  { transform:scale(1.25) rotate(6deg); opacity:1; }
  100% { transform:scale(1) rotate(0deg);  opacity:1; }
}
.apt-idot {
  position:absolute;top:6px;right:6px;
  width:10px;height:10px;
  background:var(--red);border-radius:50%;
  border:1.5px solid var(--surface);
  box-shadow:0 1px 3px rgba(163,45,45,.4);
}
.apt-done .apt-idot { right:auto;left:6px; }
/* D-1: 실내기 옵션 (apt-indoor-str) */
.apt-indoor-str { font-size:var(--fs-xs); font-weight:800; color:var(--text); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; letter-spacing:-.01em; }
.apt-u.apt-done .apt-indoor-str { color:var(--green); }
.apt-u.apt-part .apt-indoor-str { color:var(--blue); }
.apt-u.apt-todo .apt-indoor-str { color:var(--muted); }

/* 시공 그리드 헤더 */
.apt-table thead th.apt-ch { min-width:30px;width:30px;background:var(--bg); }
.apt-table thead th.apt-uh {
  min-width:72px;background:var(--surface-alt);
  border-radius:8px;padding:6px 4px;font-size:var(--fs-xs);
}
/* 왼쪽 위 '층' 제목 칸도 층 번호 칸처럼 왼쪽 고정 — 옆으로 밀면 제목만 밀려 호수 제목과 칸이 한 칸씩 어긋나던 문제 (v2.90.2, 사용자 지적) */
.apt-table thead th:first-child { left: 0; z-index: 3; background: var(--bg); }
/* 밀린 칸이 층 번호 칸 밑으로 들어간다는 게 보이게 오른쪽 경계 그림자 */
.apt-table thead th:first-child, .apt-table td.fc { box-shadow: 4px 0 6px -3px rgba(0, 0, 0, .14); }
/* fc 셀 (층 번호) */
.apt-table td.fc {
  background:var(--bg);font-weight:700;color:var(--muted);
  cursor:default;min-width:28px;border-radius:4px;
  position:sticky;left:0;z-index:1;font-size:var(--fs-xs);
  padding:0 4px;text-align:center;vertical-align:middle;
}

/* 범례 */
.apt-legend {
  display:flex;gap:10px;flex-wrap:wrap;
  padding:8px 2px 0;font-size:var(--fs-xs);color:var(--muted);
}

/* ================================================================
   캘린더 탭 v2.14.0 (프로토타입 .cal2-* 기반)
   ================================================================ */

/* 헤더 */
.cal2-hdr { display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;flex-shrink:0; }
.cal2-month { font-size:var(--fs-lg);font-weight:900;letter-spacing:-.02em; }
.cal2-nav-group { display:flex;gap:6px;align-items:center; }
.cal2-nav-btn {
  width:36px;height:36px;border:none;border-radius:12px;
  background:var(--surface-alt);cursor:pointer;font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);font-family:inherit;transition:background .12s;
}
.cal2-nav-btn:active { background:var(--border); }
.cal2-today-btn {
  height:36px;padding:0 12px;border:none;border-radius:12px;
  background:var(--blue);color:#fff;cursor:pointer;font-size:var(--fs-label);
  font-weight:700;font-family:inherit;transition:opacity .12s;
}
.cal2-today-btn:active { opacity:.85; }

/* 알림 배너 */
.cal-alert-box {
  background:var(--amber-bg);border:1px solid rgba(133,79,11,.25);
  border-radius:12px;padding:10px 14px;margin-bottom:10px;flex-shrink:0;
}
.cal-alert-title { font-size:var(--fs-label);font-weight:800;color:var(--amber);margin-bottom:6px; }
.cal-alert-item {
  font-size:var(--fs-label);color:var(--text-2);padding:3px 0;
  border-bottom:1px solid rgba(133,79,11,.1);
}
.cal-alert-item:last-child { border-bottom:none; }

/* 요일 헤더 */
.cal2-dh-row { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:2px; }
.cal2-dh { text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:6px 0; }

/* 캘린더 그리드 */
.cal2-grid {
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));   /* minmax(0,…): 긴 글자가 칸을 넓히지 않게 (v2.60.1) */
  gap:2px;
}
.cal2-cell {
  display:flex;flex-direction:column;align-items:stretch;
  padding:3px 2px;border-radius:10px;cursor:pointer;
  min-height:52px;transition:background .12s;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.cal2-cell:hover { background:var(--bg); }
.cal2-cell.today .cal2-date {
  background:var(--blue);color:#fff;border-radius:8px;
}
.cal2-cell.other { opacity:.35;cursor:default; }
.cal2-date {
  font-size:var(--fs-sm);font-weight:600;text-align:center;
  padding:3px 2px;line-height:1.4;transition:background .15s;
}
.cal2-evs  { display:flex;flex-direction:column;gap:1px;margin-top:1px; }
.cal2-ev-bar { height:4px;border-radius:2px;width:100%; }

/* 일정 리스트 */
.cal2-list { display:flex;flex-direction:column;gap:10px;margin-top:12px; }
.cal2-list-card {
  background:var(--surface);border-radius:14px;padding:12px 14px;
  box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.055);
}
.cal2-list-date { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.cal2-list-date-lbl { font-size:var(--fs-sm);font-weight:800;color:var(--text-2); }
.cal2-dday { font-size:var(--fs-xs);font-weight:800;padding:2px 8px;border-radius:20px; }
.cal2-dday-today  { background:var(--red);color:#fff; }
.cal2-dday-soon   { background:var(--red-bg);color:var(--red); }
.cal2-dday-future { background:var(--blue-bg);color:var(--blue); }
.cal2-dday-past   { background:var(--bg);color:var(--muted); }
.cal2-list-ev {
  display:flex;align-items:center;gap:8px;padding:6px 0;
  border-bottom:1px solid #f5f5f3;
}
.cal2-list-ev:last-child { border-bottom:none; }
.cal2-list-ev-bar  { width:3px;height:32px;border-radius:2px;flex-shrink:0; }
.cal2-list-ev-cat  { font-size:var(--fs-xs);font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap;flex-shrink:0; }
.cal2-list-ev-title { flex:1;font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ================================================================
   빠른 출퇴근 사이트 선택 팝오버 v2.14.0
   ================================================================ */

.qc-site-opt {
  width:100%;display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:none;border-bottom:1px solid #f5f5f3;
  background:var(--surface);cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;transition:background .12s;
}
.qc-site-opt:hover  { background:var(--surface-alt); }
.qc-site-opt:active { background:var(--bg); }
.qc-site-opt:last-child { border-bottom:none; }
.qc-site-opt-ic {
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

/* =========================================================
   PROTOTYPE START — v2.15.0 공통 기반
   ========================================================= */

/* --- 앱 헤더 (.ah) --- */
.ah {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0;
  background: color-mix(in srgb, var(--surface) 93%, transparent);   /* 반투명 흰색 고정 → 테마 색 (다크 모드에서 제목이 안 보이던 것, v2.69.0) */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ah-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--surface-alt);
  border: 0; cursor: pointer; color: var(--text);
  position: relative; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ah-btn:active { transform: scale(.95); }
.ah-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.ah-title {
  flex: 1; text-align: center;
  font-size: var(--fs-md); font-weight: 800; color: var(--text); letter-spacing: -.01em;
}

/* --- 하단 탭바 (.bt) --- */
.bt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: calc(var(--bottom-tab-h) + var(--bt-safe));
  padding: 0 8px var(--bt-safe);
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.bt-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.bt-in {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 10px 4px; border-radius: 14px; transition: background .2s;
}
.bt-ic {
  width: 22px; height: 22px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.bt-lb { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.bt-tab.on .bt-in, .bt-tab.active .bt-in { background: var(--blue-bg); }
.bt-tab.on .bt-ic, .bt-tab.active .bt-ic,
.bt-tab.on .bt-lb, .bt-tab.active .bt-lb { color: var(--blue); }
/* 주 동작 탭(후시공 '새 문의') — 같은 모양·크기의 파란 알약 */
.bt-tab.bt-primary .bt-in { background: var(--blue); }
.bt-tab.bt-primary .bt-ic, .bt-tab.bt-primary .bt-lb { color: #fff; }
.bt-tab:active .bt-in { transform: scale(.96); }

/* --- 사이드바 오버레이 show 클래스 --- */
.sd-overlay.show { display: block; }

/* --- 카드 공통 (.c) 및 유틸 --- */
.c {
  background: var(--surface); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-md);
}
.ct { font-size: var(--fs-md); font-weight: 800; color: var(--text); margin-bottom: 14px; }
.f12 { font-size: var(--fs-label); }

/* --- 앱 레이아웃: column 방향 (뷰모드 적용 시) --- */
body.view-mobile .app-wrap,
body.view-ipad   .app-wrap,
body.view-pc     .app-wrap { flex-direction: column; }

/* --- 모바일 뷰모드 --- */
body.view-mobile { padding-bottom: 80px; }
body.view-mobile .main { padding-top: 12px; }
body.view-mobile .mobile-menu-btn { display: none; } /* 구 플로팅 버튼 숨김 */

/* --- iPad / PC 뷰모드 --- */
body.view-ipad .bt,
body.view-pc   .bt { display: none; }

body.view-ipad .sidebar,
body.view-pc   .sidebar {
  transform: translateX(0) !important;
  box-shadow: none;
}
body.view-ipad .sidebar-overlay,
body.view-pc   .sidebar-overlay { display: none !important; }

/* PC/태블릿: 상단바 콘솔화 — 가운데 큰 제목 → 좌측 은은한 브레드크럼, 구분선·블러 제거 (v2.39.3) */
body.view-ipad .ah,
body.view-pc   .ah { margin-left: var(--sidebar-w); background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; height: 48px; justify-content: flex-end; }
body.view-ipad .ah-title,
body.view-pc   .ah-title { display: none; }
body.view-ipad .ah-btn,
body.view-pc   .ah-btn { background: transparent; }

body.view-ipad .main,
body.view-pc   .main { padding-top: 12px; }

body.view-ipad,
body.view-pc   { padding-bottom: 0; }

/* 태블릿 이상에서 .bt 숨김 (미디어쿼리 기반 폴백) */
@media (min-width: 768px) { .bt { display: none; } }

/* iPad/PC: 햄버거 버튼 숨김 (사이드바 항상 표시) */
body.view-ipad #mobile-menu-btn,
body.view-pc   #mobile-menu-btn { display: none; }

/* --- 시공탭 누락 CSS (.top-bar-c / .tbar-btn / .proc-bar / .view-seg) --- */
.top-bar-c {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  flex-shrink: 0; overflow-x: auto; border-bottom: 1px solid var(--border-subtle);
}
.top-bar-c::-webkit-scrollbar { display: none; }
.view-seg  { display: flex; background: var(--bg); border-radius: 9px; padding: 3px; flex-shrink: 0; }
.tbar-btn  {
  display: flex; align-items: center; gap: 4px; padding: 6px 10px;
  border: 1.5px solid var(--border); border-radius: 9px; background: var(--surface);
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap; color: var(--t2); flex-shrink: 0; transition: background .15s;
}
.tbar-btn.green { color: var(--green); border-color: rgba(59,109,17,.3); background: var(--green-bg); }
.tbar-btn.red   { color: var(--red);   border-color: rgba(163,45,45,.3); }
.tbar-sum { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; margin-left: auto; flex-shrink: 0; align-self: center; }
.proc-bar { display: flex; align-items: center; gap: 6px; padding: 7px 14px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid #f5f5f3; }
.proc-bar select { flex: 1; padding: 6px 28px 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-size: var(--fs-label); background: var(--surface); font-family: inherit; color: var(--text); min-width: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 12px 12px; outline: none; }
.proc-bar label  { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); white-space: nowrap; }

/* =========================================================
   HOME TAB — v2.15.1
   ========================================================= */
.home-greeting-date { font-size: var(--fs-label); color: var(--muted); margin-bottom: 2px; }
.home-greeting-name { font-size: var(--fs-title); font-weight: 900; letter-spacing: -.02em; color: var(--text); }

.home-layout { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
.home-col-l, .home-col-r { display: flex; flex-direction: column; gap: 12px; }

/* 모바일: CSS order 기반 단열 */
body.view-mobile .home-col-l,
body.view-mobile .home-col-r { display: contents; }
body.view-mobile .home-clock       { order: 1; }
body.view-mobile .home-notice      { order: 2; }
body.view-mobile .home-issues      { order: 3; }
body.view-mobile .home-stats-wrap  { order: 4; }
body.view-mobile .home-attend-wrap { order: 5; }
body.view-mobile .home-events-wrap { order: 6; }

/* iPad/PC: 2열 */
body.view-ipad .home-layout,
body.view-pc   .home-layout { flex-direction: row; align-items: flex-start; gap: 18px; }
body.view-ipad .home-col-l { width: 250px; flex-shrink: 0; }
body.view-pc   .home-col-l { width: 360px; flex-shrink: 0; }
body.view-ipad .home-col-r,
body.view-pc   .home-col-r { flex: 1; min-width: 0; }

/* 통계 그리드 */
.sg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st { border-radius: 16px; padding: 16px; background: var(--surface); box-shadow: var(--shadow-md); }
.si { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.sv { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.03em; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.sl { font-size: var(--fs-label); color: var(--muted); }
body.view-pc .sv { font-size: var(--fs-hero); }

/* 출근현황 행 */
.row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.row:last-child { border-bottom: 0; }
.av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 900; flex-shrink: 0; }

/* iPad/PC: 출퇴근 시간 전체 표시 */
.home-attend-time { display: none; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
body.view-ipad .home-attend-time,
body.view-pc   .home-attend-time { display: block; }

/* 이벤트 바 */
.ev-bar { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }

/* 이번주 일정: PC 타임라인 */
.ev-timeline { display: none; }
body.view-pc .ev-list    { display: none; }
body.view-pc .ev-timeline {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; padding: 4px 0;
}
.ev-tl-day { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 80px; }
.ev-tl-lbl { box-sizing:border-box; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-align: center; line-height: 1.4; padding: 4px 6px; border-radius: 8px; width: 100%; }
.ev-tl-today .ev-tl-lbl { background: var(--blue); color: #fff; }
.ev-tl-event { width: 100%; padding: 5px 6px; border-radius: 7px; font-size: var(--fs-xs); font-weight: 700; text-align: center; line-height: 1.3; }

/* 유틸 클래스 */
.f13  { font-size: var(--fs-sm); }
.f700 { font-weight: 700; }
.mt4  { margin-top: 4px; }
.bg   { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; }
.bg-g  { background: var(--green-bg);  color: var(--green); }
.bg-b  { background: var(--blue-bg);   color: var(--blue); }
.bg-a  { background: var(--amber-bg);  color: var(--amber); }
.bg-r  { background: var(--red-bg);    color: var(--red); }
.bg-gr { background: var(--bg); color: var(--muted); }

/* =========================================================
   PROFILE / SETTINGS — v2.15.5
   ========================================================= */
.prof-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px 20px; background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-md);
}
.prof-av {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-num); font-weight: 900; margin-bottom: 12px;
}
.prof-name { font-size: var(--fs-lg); font-weight: 900; letter-spacing: -.02em; margin-bottom: 4px; }
.prof-role { font-size: var(--fs-sm); color: var(--muted); }

/* 설정 행 — v2.17.5에서 재정의됨 (하단 set-* 블록 참조) */

/* =========================================================
   CONSTRUCT TAB — v2.15.3
   ========================================================= */
/* 현장 선택 버튼 */
.site-btn {
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  font-family: inherit; color: var(--muted); transition: all .15s; white-space: nowrap;
}
.site-btn.on {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 3px 10px rgba(24,95,165,.25);
}

/* 동 탭 래퍼 */
.dong-tabs { display: flex; gap: 5px; padding: 8px 14px; overflow-x: auto; }
.dong-tabs::-webkit-scrollbar { display: none; }

/* 공정 모드 카드 */
.proc-mode-bar {
  background: var(--surface); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}
.proc-mode-hd  { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.proc-mode-name { font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.proc-mode-cnt  { font-size: var(--fs-md); font-weight: 800; color: var(--blue); }
.proc-mode-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 7px; }
.proc-mode-fill  { height: 100%; background: var(--blue); border-radius: 3px; transition: width .4s cubic-bezier(.32,0,.17,1); }
.proc-mode-hint  { font-size: var(--fs-xs); color: var(--muted); }

/* =========================================================
   ATTEND TAB — v2.16.0 (일간/인원별, 바텀시트)
   ========================================================= */

/* 날짜 그룹 헤더 */
.att-date-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 44px;
  background: var(--surface-alt); border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.att-date-hd.today      { background: var(--blue-bg); }
.att-date-hd-txt        { font-size: var(--fs-sm); font-weight: 700; }
.att-date-hd.today .att-date-hd-txt { color: var(--blue); }
.att-date-cnt           { margin-left: auto; font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.att-date-hd.today .att-date-cnt { color: var(--blue); }

/* 출퇴근 기록 행 */
.att-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; min-height: 52px;
  border-bottom: 1px solid #f5f5f3;
}
.att-row:last-child { border-bottom: none; }
.att-row-info  { flex: 1; min-width: 0; }
.att-row-name  { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-row-site  { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.att-row-right { text-align: right; flex-shrink: 0; }
.att-row-time  { margin-top: 3px; }
body.view-pc .att-row-time { display: block; }

/* 수정 버튼 */
.att-edit-btn {
  flex-shrink: 0; height: 30px; min-width: 44px; padding: 0 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: var(--fs-xs); font-weight: 700;
  cursor: pointer; font-family: inherit; color: var(--t2);
  display: flex; align-items: center; justify-content: center;
}
.att-edit-btn.amber { border-color: rgba(133,79,11,.4); background: var(--amber-bg); color: var(--amber); }

/* 일간 뷰 — 모바일/iPad 날짜 카드 스택 */
.att-matrix-mobile  { display: block; }
.att-matrix-wrap    { display: none; }

/* PC: 인원×날짜 매트릭스 테이블 */
body.view-pc .att-matrix-mobile { display: none; }
body.view-pc .att-matrix-wrap   { display: block; overflow-x: auto; }
.att-matrix { border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.att-matrix th { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-align: center; padding: 6px 2px; background: var(--bg); border-radius: 8px; }
.att-matrix th.att-mth-today { background: var(--blue-bg); color: var(--blue); }
.att-matrix th.att-mth-we { opacity: .6; }
.att-matrix td.att-mn { font-size: var(--fs-label); font-weight: 700; background: var(--bg); border-radius: 8px; padding: 8px 6px; white-space: nowrap; width: 64px; }
.att-mn-name { display: flex; align-items: center; gap: 5px; }
.att-mn-av   { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 900; flex-shrink: 0; }
.att-matrix td.att-mc { border-radius: 8px; padding: 5px 4px; text-align: center; vertical-align: middle; font-size: var(--fs-xs); font-weight: 600; cursor: default; min-width: 58px; }
.att-mc-done   { background: var(--green-bg); color: var(--green); }
.att-mc-active { background: var(--amber-bg); color: var(--amber); }
.att-mc-absent { background: var(--bg); color: var(--muted); }
.att-mc-future { background: transparent; color: var(--border); }
.att-mc-we     { background: transparent; color: var(--muted); opacity: .35; }
.att-mc-time   { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; display: block; }
.att-mc-site   { font-size: var(--fs-xs); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
body.view-pc .att-mc-site { display: block; }

/* 인원별 뷰 — 모바일 카드 목록 */
.att-plist-mobile { display: block; }
.att-pcards-grid  { display: none; }
body.view-ipad .att-plist-mobile { display: none; }
body.view-ipad .att-pcards-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
body.view-pc   .att-plist-mobile { display: none; }
body.view-pc   .att-pcards-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 14px; }

/* 인원별 — 모바일 카드 */
.att-pcard { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); transition: background .12s; -webkit-tap-highlight-color: transparent; }
.att-pcard:last-child { border-bottom: none; }
.att-pcard:hover { background: var(--surface-alt); }
.att-pcard-info  { flex: 1; min-width: 0; }
.att-pcard-name  { font-size: var(--fs-sm); font-weight: 700; }
.att-pcard-site  { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.att-pcard-right { text-align: right; flex-shrink: 0; }
.att-pcard-cnt   { font-size: var(--fs-md); font-weight: 900; color: var(--blue); }
.att-pcard-unit  { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }

/* 인원별 — iPad/PC 미니 캘린더 카드 */
.att-pcal-card { padding: 14px; }
.att-pcal-hd   { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.att-pcal-name { font-size: var(--fs-sm); font-weight: 700; }
.att-pcal-site { font-size: var(--fs-xs); color: var(--muted); margin-top: 1px; }
.att-pcal-cnt  { margin-left: auto; text-align: center; }
.att-pcal-cnt-n{ font-size: var(--fs-title); font-weight: 900; color: var(--blue); line-height: 1.1; }
.att-pcal-cnt-u{ font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.att-pcal-cal  { margin-bottom: 10px; }
.att-pcal-cal-hd { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 6px; }

/* 미니 캘린더 그리드 */
.att-mini-cal    { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.att-mini-cal-dh { text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); padding: 4px 0; }
.att-mini-cal-dh.sun { color: var(--red); }
.att-mini-cal-dh.sat { color: var(--blue); }
.att-mini-d      { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 5px; min-height: 28px; }
.att-mini-d.today{ background: var(--blue); }
.att-mini-d.we   { opacity: .5; }
.att-mini-d.future{ opacity: .3; }
.att-mini-d.empty{ }
.att-mini-d-num  { font-size: var(--fs-xs); font-weight: 600; color: var(--t2); line-height: 1; }
.att-mini-d.today .att-mini-d-num { color: #fff; }
.att-cal-dot     { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.att-cal-dot.blue  { background: var(--blue); }
.att-cal-dot.gray  { background: var(--muted); }
.att-cal-dot.hidden{ opacity: 0; }
.att-mini-d.today .att-cal-dot { background: rgba(255,255,255,.8) !important; }

/* 상세 뷰 미니캘린더 (공간 충분할 때) */
#att-pdetail-inner .att-mini-cal,
#att-pdetail-modal .att-mini-cal { gap: 3px; }
#att-pdetail-inner .att-mini-d,
#att-pdetail-modal .att-mini-d   { min-height: 32px; }
#att-pdetail-inner .att-mini-d-num,
#att-pdetail-modal .att-mini-d-num { font-size: var(--fs-xs); }

/* 미니 캘린더 요약 */
.att-pcal-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.att-pcal-stat    { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); }
.att-pcal-stat-dot{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* iPad/PC — 주간 도트 그리드 (인원별 wide view) */
.apg-row   { display: flex; align-items: center; padding: 0 16px; min-height: 52px; border-bottom: 1px solid #f5f5f3; }
.apg-row:last-child { border-bottom: none; }
.apg-info  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.apg-weeks { display: flex; gap: 3px; flex-shrink: 0; padding: 0 8px; }
.apg-hd    { width: 28px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); line-height: 1.35; padding: 8px 0; }
.apg-hd.today   { color: var(--blue); }
.apg-hd.weekend { color: var(--red); opacity: .7; }
.apg-dot        { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); flex-shrink: 0; }
.apg-dot-done   { background: var(--green-bg); color: var(--green); }
.apg-dot-active { background: var(--amber-bg); color: var(--amber); font-weight: 700; }
.apg-dot-abs    { background: var(--bg); color: var(--border); }
.apg-dot-future { background: transparent; }
.apg-dot-we     { background: transparent; opacity: .3; }
.apg-cnt        { width: 44px; text-align: center; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 800; color: var(--blue); }
.apg-cnt-lbl    { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); display: block; margin-top: 1px; }

/* FAB — 정의는 아래 "FAB (모바일 전용)" 한 곳으로 통합 (v2.58.1 A2) */

/* 바텀시트 오버레이 — 모바일: 하단 정렬 / iPad·PC: 중앙 정렬 */
.att-sheet-ov {
  display: flex; align-items: flex-end;
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.48); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.att-sheet-ov.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}

/* 바텀시트 본체 — 모바일 */
.att-sheet {
  width: 100%; background: var(--surface);
  border-radius: 20px 20px 0 0;
  max-height: 88%; overflow-y: auto;
  padding: 0 0 env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  will-change: transform;
}
.att-sheet-ov.open .att-sheet { transform: translateY(0); }
.att-sheet::-webkit-scrollbar { display: none; }
.att-sheet-drag  { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 10px auto 0; }
.att-sheet-hd    { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 12px; }
.att-sheet-title { font-size: var(--fs-md); font-weight: 900; letter-spacing: -.02em; }
.att-sheet-close { width: 30px; height: 30px; border: none; background: var(--bg); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-md); font-family: inherit; }

/* iPad·PC: 바텀시트 → 중앙 모달 전환 */
body.view-ipad .att-sheet-ov,
body.view-pc   .att-sheet-ov {
  align-items: center;
  justify-content: center;
}
body.view-ipad .att-sheet,
body.view-pc   .att-sheet {
  width: 480px;
  max-width: calc(100vw - 48px);
  max-height: 90vh;
  border-radius: 16px;
  transform: scale(.97) translateY(6px);
  opacity: 0;
  transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .22s ease;
  box-shadow: var(--shadow-md);
}
body.view-ipad .att-sheet-ov.open .att-sheet,
body.view-pc   .att-sheet-ov.open .att-sheet {
  transform: scale(1) translateY(0);
  opacity: 1;
}
/* PC 드래그 핸들 숨김 */
body.view-ipad .att-sheet-drag,
body.view-pc   .att-sheet-drag { display: none; }
/* PC 시간 칩 — 자동 너비 (flex:1 해제) */
body.view-ipad .segs-equal .seg,
body.view-pc   .segs-equal .seg { flex: 1; min-width: 0; }
/* PC 삭제 버튼 여백 */
body.view-ipad #att-sheet-del-btn,
body.view-pc   #att-sheet-del-btn { margin-top: 8px; }

/* 세그먼트 pill 버튼 — 프로토타입 원본 (.seg / .segs) */
.segs {
  display: flex; gap: 6px;
  overflow-x: auto; padding-bottom: 2px; flex-shrink: 0;
}
.segs::-webkit-scrollbar { display: none; }
.seg {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: 20px;
  background: var(--surface); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; color: var(--muted); white-space: nowrap;
  transition: all .15s; font-family: inherit; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.seg:active { transform: scale(.96); }
.seg.on {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 3px 10px rgba(24,95,165,.25);
}

/* 세그 칩 균등분할 (시간 칩 overflow 방지) */
.segs-equal { display: flex; gap: 6px; }
.segs-equal .seg { flex: 1; justify-content: center; padding: 10px 4px; border-radius: 12px; min-height: 44px; font-weight: 700; }

/* ═══════════════════════════════════════════
   출퇴근 시트 — 프로토타입 디자인 토큰
   ═══════════════════════════════════════════ */

/* Primary button */
.btn-p {
  width: 100%; height: 52px;
  background: var(--blue); color: #fff;
  border: none; border-radius: 14px;
  font-size: var(--fs-md); font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 16px rgba(24,95,165,.28);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; transition: opacity .15s, transform .1s;
}
.btn-p:active { opacity: .9; transform: scale(.99); }

/* 폼 카드 (att-sheet 내부 — .fc/.fg/.fi 는 시공 그리드와 충돌 방지를 위해 스코프 제한) */
.att-sheet .fc {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  overflow: hidden;
  margin: 0 16px 10px;
}
.att-sheet .fg {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.att-sheet .fg:last-child { border-bottom: none; }
.att-sheet .fg label {
  font-size: var(--fs-xs); color: var(--muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  display: block; margin-bottom: 6px;
}
.att-sheet .fi {
  width: 100%; border: none; padding: 0; outline: none;
  font-size: var(--fs-sm); font-weight: 500;
  background: transparent; color: var(--text); font-family: inherit;
}
.att-sheet select.fi {
  -webkit-appearance: none; appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  padding-right: 36px !important; min-height: 46px; cursor: pointer;
}
/* C: date input — 다크모드 OS 캘린더 색상 고정 */
.att-sheet input[type=date].fi { color-scheme: light; min-height: 46px; }

/* 섹션 라벨 */
.att-sec { padding: 6px 16px 12px; }
.att-sec-lbl {
  font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.att-def-badge {
  font-size: var(--fs-xs); font-weight: 600; color: var(--blue);
  background: var(--blue-bg); padding: 2px 8px; border-radius: 4px;
  text-transform: none; letter-spacing: 0;
}

/* 토글 카드 + 행 */
.tgl-card {
  background: var(--surface); border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.05);
  overflow: hidden; margin: 0 16px 10px;
}
.tgl-row {
  display: flex; align-items: center;
  padding: 14px 16px; gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.tgl-row:last-child { border-bottom: none; }
.tgl-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tgl-tx { flex: 1; }
.tgl-lb { font-size: var(--fs-md); font-weight: 600; }

/* iOS 토글 */
.ios {
  width: 48px; height: 28px; background: var(--border);
  border-radius: 14px; position: relative; cursor: pointer;
  transition: background .25s; flex-shrink: 0; display: block;
}
.ios.on { background: var(--green); }
.ios::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.ios.on::after { transform: translateX(20px); }

/* 시트 하단 버튼 영역 */
.att-sheet-btns { padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 8px; }

/* =========================================================
   ATTEND TAB — v2.15.2 (기존 CSS 유지)
   ========================================================= */
/* 컨트롤 세그먼트 */
.att-ctrl-seg {
  display: inline-flex; background: var(--bg); border-radius: 9px; padding: 3px; flex-shrink: 0;
}
.view-btn {
  border: 0; background: transparent; padding: 5px 12px; border-radius: 7px;
  font-size: var(--fs-label); font-weight: 700; color: var(--muted); cursor: pointer; font-family: inherit;
}
.view-btn.on,
.view-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* 2열 레이아웃 (iPad/PC: 날짜 사이드바) */
.att-day-layout { display: flex; gap: 0; flex: 1; }
.att-day-sidebar { display: none; }
body.view-ipad .att-day-sidebar {
  display: flex; flex-direction: column; width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--border); overflow-y: auto;
}
body.view-pc   .att-day-sidebar {
  display: flex; flex-direction: column; width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--border); overflow-y: auto;
}

/* 날짜 아이템 */
.att-day-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
  border-radius: 10px; transition: background .12s ease; user-select: none; position: relative;
  margin: 2px 8px;
}
.att-day-item:hover { background: var(--surface-alt); }
.att-day-item.sel  { background: var(--blue-bg); }
.att-day-item-lbl  { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); width: 16px; text-align: center; }
.att-day-item.sel  .att-day-item-lbl { color: var(--blue); }
.att-day-item-info { flex: 1; }
.att-day-item-date { font-size: var(--fs-sm); font-weight: 700; }
.att-day-item.sel  .att-day-item-date { color: var(--blue); }
.att-day-item-cnt  { font-size: var(--fs-xs); color: var(--muted); }
.att-today-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%); opacity: 0;
}
.att-day-item.today .att-today-dot { opacity: 1; }
.att-day-item.we .att-day-item-lbl { color: var(--blue); }

/* iPad/PC 사이드바 추가버튼 */
.att-col-add-btn {
  width: calc(100% - 24px); margin: 10px 12px; height: 44px;
  border: 1.5px dashed rgba(24,95,165,.4); border-radius: 12px;
  background: var(--blue-bg); color: var(--blue);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit;
}
body.view-mobile .att-col-add-btn { display: none; }

/* FAB (모바일 전용) */
.att-fab {
  position: fixed; right: 18px; bottom: calc(var(--bottom-tab-h) + 16px + var(--bt-safe)); z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 0; cursor: pointer;
  font-size: var(--fs-num); font-weight: 400; line-height: 1;
  box-shadow: 0 6px 20px rgba(24,95,165,.35);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.att-fab:active { transform: scale(.94); box-shadow: 0 2px 10px rgba(24,95,165,.3); }

/* PC·iPad: 출퇴근 추가 FAB 노출 + 매트릭스 빈 칸 클릭 추가 (v2.34.7) */
body.view-ipad .att-fab,
body.view-pc   .att-fab { display: flex; right: 28px; bottom: 28px; }
.att-mc-add { cursor: pointer; transition: background .12s ease; }
.att-mc-add:hover { background: var(--blue-bg); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* 시간 열 (iPad/PC만) */
.att-row-time { display: none; font-size: var(--fs-label); color: var(--muted); }
body.view-ipad .att-row-time,
body.view-pc   .att-row-time { display: block; }

/* =========================================================
   PROTOTYPE END — v2.15.0
   ========================================================= */

/* ── 작업일보 탭 전환 세그먼트 ── */
/* ── 현장비용 헤더 행 + 콘텐츠 (v2.28.2) ── */
.sc-header-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.sc-header-row .sel { flex:1; min-width:0; margin-bottom:0; background:var(--bg); }
.sc-add-btn { flex-shrink:0; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; padding:9px 14px; font-size:var(--fs-sm); border-radius:8px; }
.sc-content-body { flex:1; overflow-y:auto; padding:10px 14px calc(var(--bottom-tab-h,60px) + 20px); scrollbar-width:none; }
.sc-content-body::-webkit-scrollbar { display:none; }
/* PC: 하단 탭바 없으므로 여백 줄임 */
@media (min-width: 1024px) {
  .sc-content-body { padding-bottom:24px; }
  .sc-add-btn { padding:10px 16px; font-size:var(--fs-sm); }
}
.sc-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.sc-tab { flex: 1; padding: 7px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 8px; border: none; background: none; font-family: inherit; transition: all .15s; }
.sc-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.sc-tab:active { transform: scale(.95); }

/* ── 물품요청 탭 ── */
.sup-tabs { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; }
.sup-tab { flex: 1; padding: 7px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; transition: all .15s; }
.sup-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.sup-tab:active { transform: scale(.95); }
.sup-inline-btn { display: none; padding: 8px 16px; border: none; border-radius: 10px; background: var(--blue); color: #fff; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: inherit; }
.sup-inline-btn:active { opacity: .85; }
body.view-ipad .sup-inline-btn, body.view-pc .sup-inline-btn { display: block; }
body.view-ipad .sup-fab, body.view-pc .sup-fab { display: none !important; }
/* 기술자료 +: iPad·PC는 하단 탭이 없으므로 모서리에서 24px */
body.view-ipad .td-fab, body.view-pc .td-fab { bottom: 24px; right: 24px; }
.sup-filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; }
.sup-filter-row::-webkit-scrollbar { display: none; }
.sup-filter-btn { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); font-size: var(--fs-label); font-weight: 700; cursor: pointer; color: var(--muted); white-space: nowrap; font-family: inherit; transition: all .15s; }
.sup-filter-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.sup-req-card { background: var(--surface); border-radius: 12px; margin-bottom: 8px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.055); }
.sup-status-chip { font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.sup-status-pend { background: var(--amber-bg); color: var(--amber); }
.sup-status-done { background: var(--green-bg); color: var(--green); }
.sup-status-rej  { background: var(--red-bg);   color: var(--red); }
.sup-fab { position: fixed; right: 16px; bottom: calc(var(--bottom-tab-h) + 16px + var(--bt-safe)); z-index: 90; padding: 0 18px; height: 48px; background: var(--blue); color: #fff; border: none; border-radius: 24px; font-size: var(--fs-md); font-weight: 800; cursor: pointer; box-shadow: 0 4px 16px rgba(24,95,165,.4); display: flex; align-items: center; gap: 6px; font-family: inherit; transition: transform .15s; }
.sup-fab:active { transform: scale(.95); }
.sup-modal-ov { display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
.sup-modal-ov.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease, visibility 0s linear 0s; }
.sup-modal-sheet { width: 100%; background: var(--surface); border-radius: 20px 20px 0 0; padding: 0 0 24px; transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1); will-change: transform; max-height: 90vh; overflow-y: auto; }
.sup-modal-ov.open .sup-modal-sheet { transform: translateY(0); }
.sup-cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.sup-cat-btn { padding: 10px 4px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; text-align: center; font-family: inherit; transition: all .15s; }
.sup-cat-btn.on { border-color: var(--blue); background: var(--blue-bg); }
.sup-cat-ic { font-size: var(--fs-lg); margin-bottom: 4px; }
.sup-cat-lb { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.sup-cat-btn.on .sup-cat-lb { color: var(--blue); }
body.view-ipad .sup-modal-ov,
body.view-pc   .sup-modal-ov { align-items: center; justify-content: center; }
body.view-ipad .sup-modal-sheet,
body.view-pc   .sup-modal-sheet { border-radius: 16px; width: 480px; transform: scale(.97) translateY(6px); max-height: 80vh; }
body.view-ipad .sup-modal-ov.open .sup-modal-sheet,
body.view-pc   .sup-modal-ov.open .sup-modal-sheet { transform: scale(1) translateY(0); }

/* ── sc-* 현장비용 v2.17.4 ── */
#page-site-costs { position:relative; flex-direction:column; padding:0; }
#page-site-costs.active { display:flex; }
.sc-top-wrap { background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; padding:8px 14px 0; }
.sc-summary-strip { display:flex; gap:8px; overflow-x:auto; padding:8px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.sc-summary-strip::-webkit-scrollbar { display:none; }
.sc-stat-card { flex:0 0 auto; min-width:130px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; cursor:pointer; transition:opacity .15s; }
.sc-stat-card:active { opacity:.75; }
.sc-modal-ov { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300; display:none; align-items:flex-end; }
.sc-modal-ov.open { display:flex; }
.sc-modal-sheet { width:100%; background:var(--surface); border-radius:18px 18px 0 0; max-height:88%; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom,12px); }
.sc-step-bar { display:flex; gap:4px; padding:0 18px; margin-top:12px; }
.sc-step { flex:1; height:4px; background:var(--border); border-radius:2px; transition:background .2s; }
.sc-step.on { background:var(--blue); }

/* ── set-* 설정 v2.17.5 ── */
#page-settings.active { display:flex; }
.set-main { flex:0 0 100%; overflow-y:auto; padding-bottom:40px; background:var(--bg); }
.set-section-title { font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.set-row { display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; transition:background .12s; }
.set-row:last-child { border-bottom:none; }
.set-row:active { background:var(--bg); }
.set-ic { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-title); flex-shrink:0; }
.set-lb { flex:1; font-size:var(--fs-sm); font-weight:500; color:var(--text); }
.set-vl { font-size:var(--fs-sm); color:var(--muted); }
.set-sub { position:absolute; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.32,.72,0,1); pointer-events:none; }
.set-sub.open { transform:translateX(0); pointer-events:auto; }
.set-sub-hdr { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; }
.set-sub-title { flex:1; font-size:var(--fs-md); font-weight:700; }
.set-sub-body { flex:1; overflow-y:auto; padding:14px; }
.set-bk { width:32px; height:32px; border:none; background:var(--bg); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); flex-shrink:0; }
.set-ver { text-align:center; font-size:var(--fs-xs); color:var(--muted); padding:24px 14px 12px; line-height:1.6; }
.set-content-area { display:none; flex:1; overflow-y:auto; padding:20px; border-left:1px solid var(--border); background:var(--bg); }
@media (min-width: 768px) {
  .set-main { flex:0 0 280px; border-right:1px solid var(--border); }
  .set-content-area { display:block; }
  .set-sub { position:static; transform:none; pointer-events:auto; display:none; }
}

/* ── adm-* 관리자 v2.17.6 ── */
#page-admin { flex-direction:row; padding:0; overflow:hidden; gap:0; }
#page-admin.active { display:flex; }
.adm-sidebar { display:none; width:160px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:8px 0; flex-direction:column; }
.adm-sd-sec { font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:8px 14px 4px; }
.adm-sd-tab { display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; border:none; background:none; cursor:pointer; font-size:var(--fs-sm); font-weight:500; color:var(--muted); font-family:inherit; text-align:left; transition:background .12s; }
.adm-sd-tab:hover { background:var(--bg); }
.adm-sd-tab.active { background:var(--blue-bg); color:var(--blue); font-weight:700; }
.adm-sd-ic { font-size:var(--fs-md); flex-shrink:0; }
.adm-content-wrap { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
/* 콘솔 페이지 헤더 (v2.38.0/v2.39.4) — PC/태블릿 전용: 좌측 제목+부제 / 우측 액션 */
.adm-page-head { display:none; flex-shrink:0; padding:14px 16px 6px; background:transparent; align-items:flex-start; justify-content:space-between; gap:12px; }
.adm-page-head-l { min-width:0; }
.adm-page-title { font-size:var(--fs-lg); font-weight:800; letter-spacing:-.02em; color:var(--text); }
.adm-page-sub { font-size:var(--fs-label); color:var(--muted); margin-top:3px; }
.adm-page-head-r { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.adm-page-head-r:empty { display:none; }
/* PC에선 서브탭 아이콘 숨김(텍스트만) + 모바일 전용 컨트롤 숨김 */
.adm-wide-tab-ic { display:none; }
.bill-mobile-ctrl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.view-pc .bill-mobile-ctrl, body.view-ipad .bill-mobile-ctrl { display:none !important; }
.adm-wide-bar { display:none; border-bottom:1px solid var(--border); background:transparent; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.adm-wide-bar::-webkit-scrollbar { display:none; }
.adm-wide-tab { flex-shrink:0; display:flex; align-items:center; gap:5px; padding:9px 14px; border:none; border-bottom:2px solid transparent; background:none; cursor:pointer; font-size:var(--fs-sm); font-weight:600; color:var(--muted); font-family:inherit; white-space:nowrap; transition:all .15s; }
.adm-wide-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.adm-wide-tab-ic { font-size:var(--fs-sm); }
.adm-mobile-hdr { flex-shrink:0; padding:10px 14px 0; }
.adm-tabs { display:flex; background:var(--surface); border-radius:10px; padding:3px; gap:2px; overflow-x:auto; scrollbar-width:none; }
.adm-tabs::-webkit-scrollbar { display:none; }
.adm-tabs-6 .adm-tab { font-size:var(--fs-xs); padding:6px 4px; }
.adm-tab { flex:1; padding:7px 8px; border:none; background:none; border-radius:8px; cursor:pointer; font-size:var(--fs-label); font-weight:600; color:var(--muted); font-family:inherit; transition:all .15s; white-space:nowrap; min-width:0; }
.adm-tab.active { background:var(--surface); color:var(--blue); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.adm-ctx-bar { display:flex; align-items:center; gap:8px; padding:8px 14px; background:transparent; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
.adm-ctx-label { font-size:var(--fs-xs); font-weight:700; color:var(--muted); white-space:nowrap; }
.adm-ctx-sel { padding:5px 28px 5px 8px; border:1.5px solid var(--border); border-radius:8px; font-size:var(--fs-label); background:var(--bg); color:var(--text); font-family:inherit; outline:none; min-height:32px; cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; background-size:12px 12px; }
.adm-ctx-divider { width:1px; height:16px; background:var(--border); flex-shrink:0; }
@media (min-width: 768px) {
  .adm-page-head { display:flex; }
  .adm-wide-bar { display:flex; }
  .adm-mobile-hdr { display:none; }
}
@media print {
  .adm-sidebar, .adm-wide-bar, .adm-mobile-hdr, .adm-ctx-bar { display:none !important; }
  #adm-body { overflow:visible !important; }
}

/* ── 기성청구 콘솔 부품 (v2.39.1, 디자인 시스템 통합) ── */
.bill-top-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:stretch; }
.bill-top-grid > .card { display:flex; flex-direction:column; padding:16px 18px; }
.bill-card-t { font-size:var(--fs-label); font-weight:700; color:var(--muted); letter-spacing:.02em; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bill-card-t span { font-weight:600; color:var(--text-3); }
.bill-hero-nums { display:flex; gap:28px; margin-bottom:16px; flex-wrap:wrap; }
.bill-hn-lbl { font-size:var(--fs-label); color:var(--muted); font-weight:600; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.bill-dot { width:8px; height:8px; border-radius:50%; }
.bill-hn-val { font-size:var(--fs-num); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
.bill-hn-val small { font-size:var(--fs-md); font-weight:700; margin-left:2px; color:var(--text-2); }
.bill-hero-bottom { margin-top:auto; }
.bill-bar { height:12px; border-radius:6px; background:var(--bg); overflow:hidden; display:flex; margin-bottom:8px; }
.bill-fill { background:var(--green); height:100%; }
.bill-bar-meta { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; }
.bill-bar-meta b { color:var(--text-2); font-weight:700; }
.bill-bar-meta small { font-size:var(--fs-xs); }   /* 억·만 단위가 9px로 작아지지 않게 (v2.70.0) */
.bill-rate-strip { border-top:1px solid var(--border); margin-top:10px; padding-top:8px; }
.bill-bars { display:flex; align-items:flex-end; gap:8px; flex:1; min-height:120px; padding-top:6px; }
.bill-bcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.bill-b { width:100%; max-width:32px; background:var(--blue-bg); border-radius:4px 4px 0 0; min-height:3px; }
.bill-bcol.now .bill-b { background:var(--blue); }
.bill-amt { font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; font-weight:600; }
.bill-bcol.now .bill-amt { color:var(--blue); font-weight:700; }
.bill-mo { font-size:var(--fs-xs); color:var(--text-3); }
.bill-flow-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--muted); }
.bill-flow-foot b { color:var(--text-2); }
@media (max-width: 900px){ .bill-top-grid { grid-template-columns:1fr; } }

/* 회차 원장 표 */
.bill-ledger-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.bill-ledger-scroll { overflow-x:auto; }
.bill-ledger { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.bill-ledger thead th { font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-align:left; padding:0 10px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.bill-ledger thead th.num { text-align:right; }
.bill-ledger tbody td { font-size:var(--fs-sm); padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text-2); white-space:nowrap; }
.bill-ledger tbody td.num { text-align:right; font-weight:600; color:var(--text); }
.bill-ledger tbody td.strong { color:var(--text); font-weight:700; }
.bill-ledger tbody tr { cursor:pointer; }
.bill-ledger tbody tr:hover td { background:color-mix(in srgb,var(--blue) 5%,transparent); }
.bill-ledger tbody tr.on td { background:var(--blue-bg); }
.bill-ledger tbody tr.on td.strong { color:var(--blue); }
.bill-ledger tbody tr:last-child td { border-bottom:none; }
.bill-chip { display:inline-block; font-size:var(--fs-xs); font-weight:700; padding:2px 7px; border-radius:4px; white-space:nowrap; }

/* 동 그리드 범례 */
.bill-grid-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:var(--fs-xs); color:var(--muted); }
.bill-grid-legend span { display:inline-flex; align-items:center; gap:5px; }
.bill-lg { width:14px; height:14px; border-radius:3px; border:1px solid var(--border); display:inline-block; flex-shrink:0; }
.bill-lg.now { background:var(--green-bg); } .bill-lg.sel { background:var(--amber-bg); }
.bill-lg.prev { background:var(--bg); } .bill-lg.wait { background:var(--red-bg); }
.bill-lg.done { background:var(--surface); }
.bill-lg.opt { background:repeating-linear-gradient(45deg,var(--border),var(--border) 1px,var(--surface) 1px,var(--surface) 6px); }

/* 3단계 흐름 (청구 → 확인 → 입금) */
.bill-flow3 { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.bill-f3 { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; font-size:var(--fs-sm); border-bottom:1px solid var(--border); gap:10px; }
.bill-f3:last-child { border-bottom:none; }
.bill-f3 .k { color:var(--text-2); font-weight:600; }
.bill-f3 .k small { color:var(--muted); font-weight:500; margin-left:6px; }
.bill-f3 .v { font-variant-numeric:tabular-nums; font-weight:700; color:var(--text); }
.bill-f3.step1 { background:color-mix(in srgb,var(--blue) 5%,transparent); }
.bill-f3.confirm { background:var(--green-bg); }
.bill-f3.confirm .k, .bill-f3.confirm .v { color:var(--green); font-weight:800; }
.bill-f3.sub { padding-left:30px; font-size:var(--fs-label); }
.bill-f3.sub .k { color:var(--muted); font-weight:500; }
.bill-f3.sub .v { color:var(--text-2); font-weight:600; }
.bill-f3.cash { background:var(--blue-bg); }
.bill-f3.cash .k { color:var(--blue); font-weight:800; }
.bill-f3.cash .v { color:var(--blue); font-size:var(--fs-md); font-weight:800; }
.bill-f3-actions { padding:10px 14px 0; display:flex; gap:6px; flex-wrap:wrap; }

/* 물품요청 콘솔 부품 (v2.43.x) */
.sup-filter-pills { display:flex; gap:6px; flex-wrap:wrap; }
.sup-fp { padding:5px 11px; font-size:var(--fs-label); font-weight:600; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; }
.sup-fp:hover { border-color:var(--blue); }
.sup-fp.active { background:var(--blue-bg); color:var(--blue); border-color:var(--blue); font-weight:700; }
.sup-fp b { font-weight:800; margin-left:2px; }
.sup-month-nav { display:flex; align-items:center; gap:4px; }

/* ════════════════════════════════════════════════
   콘솔 공용 부품 2 (v2.65.0 — v2.38 §11-6 관리자 탭 본문 이관: 급여명세서·노무비신고·출퇴근부)
   ════════════════════════════════════════════════ */
/* 단계 띠: 번호 동그라미(완료=초록 ✓ / 지금=파랑) + 이름 + 보조줄. 이모지 대신 */
.con-steps { display:grid; grid-template-columns:repeat(var(--n,4), minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--card-radius); background:var(--surface); overflow:hidden; }
.con-step { display:flex; align-items:center; gap:10px; padding:12px 14px; min-width:0; border-left:1px solid var(--border); font-family:inherit; text-align:left; background:none; border-top:none; border-right:none; border-bottom:none; color:inherit; }
.con-step:first-child { border-left:none; }
button.con-step { cursor:pointer; }
button.con-step:hover { background:var(--bg); }
.con-step .n { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:800; background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.con-step .t { min-width:0; }
.con-step .l { font-size:var(--fs-sm); font-weight:700; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.con-step .s { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.con-step.done .n { background:var(--green); border-color:var(--green); color:#fff; }
.con-step.done .s { color:var(--green); }
.con-step.now { background:var(--blue-bg); }
.con-step.now .n { background:var(--blue); border-color:var(--blue); color:#fff; }
.con-step.now .l { color:var(--blue); }
body.view-mobile .con-steps { grid-template-columns:repeat(2, minmax(0,1fr)); }
body.view-mobile .con-step:nth-child(odd) { border-left:none; }
body.view-mobile .con-step:nth-child(n+3) { border-top:1px solid var(--border); }
/* 하위 탭(밑줄형) — 상단 관리자 탭(.adm-wide-tab)과 같은 말투 */
.con-subtabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.con-subtabs::-webkit-scrollbar { display:none; }
.con-subtabs > button { flex-shrink:0; padding:10px 16px; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; }
.con-subtabs > button.on { color:var(--blue); border-bottom-color:var(--blue); font-weight:700; }
/* 사람별 상태 칩: 이름 + 보조줄, 완료는 초록 점 */
.con-pchips { display:flex; flex-wrap:wrap; gap:8px; }
.con-pchip { display:flex; align-items:center; gap:8px; padding:7px 12px 7px 10px; border:1px solid var(--border); border-radius:var(--ctl-radius); background:var(--surface); min-width:0; }
.con-pchip i { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.con-pchip b { display:block; font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.con-pchip small { display:block; font-size:var(--fs-xs); color:var(--muted); margin-top:1px; font-variant-numeric:tabular-nums; }
.con-pchip.done { border-color:color-mix(in srgb, var(--green) 40%, var(--border)); }
.con-pchip.done i { background:var(--green); }
.con-pchip.todo b { color:var(--muted); }
/* 안내 칸: 제목 + 설명 + 버튼 (큰 이모지 대신) */
.con-empty { text-align:center; padding:28px 16px; border:1px dashed var(--border); border-radius:var(--card-radius); }
.con-empty .h { font-size:var(--fs-md); font-weight:800; color:var(--text); margin-bottom:6px; }
.con-empty .h.ok { color:var(--green); }
.con-empty .d { font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px; }
.con-empty .a { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
/* 문장 안 금액 (억·만 단위 작은 글씨 포함) — 단위 글씨가 계단 아래(9px)로 작아지지 않게 (v2.70.0) */
.amt-inline { font-size:var(--fs-sm); }
.amt-inline small { font-size:var(--fs-xs); }
/* 이전·다음 줄 */
.con-nav { display:flex; justify-content:space-between; gap:8px; margin-top:16px; }
/* 눌러도 아무 일 없는 콘솔 표(보기 전용): 손가락 모양·줄 강조 끔 (v2.66.0) */
.bill-ledger.static tbody tr { cursor:default; }
.bill-ledger.static tbody tr:hover td { background:none; }
.sup-table td:nth-child(4) { white-space:normal; min-width:160px; }

/* ── 캘린더 2패널 레이아웃 v2.26.0 ── */
#cal2-left-pane { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
#cal2-right-panel { display:none; flex-direction:column; padding:20px 16px 16px; overflow-y:auto; background:var(--bg); scrollbar-width:none; min-width:0; }
#cal2-right-panel::-webkit-scrollbar { display:none; }
/* iPad/PC: 2열 분할 */
body.view-ipad #page-calendar.active,
body.view-pc   #page-calendar.active { display:flex; flex-direction:row; align-items:stretch; }
body.view-ipad #cal2-left-pane { flex:0 0 260px; border-right:1px solid var(--border); }
body.view-pc   #cal2-left-pane { flex:0 0 310px; }
body.view-ipad #cal2-right-panel,
body.view-pc   #cal2-right-panel { display:flex; flex:1; }
/* iPad/PC: 리스트·추가버튼 숨김 (우측 패널 대체) */
body.view-ipad #cal-list-view,
body.view-pc   #cal-list-view { display:none !important; }
body.view-ipad #cal-add-btn-wrap,
body.view-pc   #cal-add-btn-wrap { display:none; }
/* cal2-main 스크롤 */
#cal2-left-pane > .cal2-main { flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; }
#cal2-left-pane > .cal2-main::-webkit-scrollbar { display:none; }
body.view-ipad #page-calendar .cal2-main,
body.view-pc   #page-calendar .cal2-main { overflow:hidden; }
/* iPad/PC: 좌측 달력 내부 상단 여백 */
body.view-ipad #cal2-left-pane > .cal2-main,
body.view-pc   #cal2-left-pane > .cal2-main { padding:0 12px 0; }
/* 우측 패널 CSS 클래스 (calendar.js _updateRightPanel 용) */
.cal2-rp-hdr { padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; flex-shrink:0; }
.cal2-rp-date { font-size:var(--fs-title); font-weight:900; }
.cal2-rp-dday { display:inline-block; font-size:var(--fs-label); font-weight:700; color:#fff; border-radius:5px; padding:2px 8px; margin-top:5px; }
.cal2-ev-card { padding:12px; background:var(--surface); border-radius:12px; margin-bottom:8px; border-left-width:3px; border-left-style:solid; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.cal2-ev-cat { font-size:var(--fs-xs); font-weight:700; padding:2px 7px; border-radius:20px; display:inline-block; }
.cal2-ev-title { font-size:var(--fs-md); font-weight:700; margin-top:6px; }
.cal2-ev-memo { font-size:var(--fs-label); color:var(--muted); margin-top:4px; }
.cal2-ev-actions { margin-top:8px; display:flex; gap:6px; }
.cal2-rp-add-btn { flex-shrink:0; width:100%; height:44px; margin-top:12px; border:1.5px solid var(--blue); border-radius:12px; background:var(--blue-bg); font-size:var(--fs-sm); font-weight:700; cursor:pointer; font-family:inherit; color:var(--blue); }
.cal2-rp-empty { color:var(--muted); font-size:var(--fs-sm); text-align:center; padding:24px 0; }
.cal2-rp-hint { display:flex; align-items:center; justify-content:center; flex:1; flex-direction:column; gap:10px; color:var(--muted); }

/* ── 프로필 prf-* v2.27.0 ── */
#page-profile.active { display:flex; flex-direction:column; }
.prf-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.prf-stat-card { background:var(--surface); border-radius:12px; padding:10px 6px; text-align:center; border:1px solid var(--border); }
.prf-stat-val  { font-size:var(--fs-lg); font-weight:900; line-height:1; }
.prf-stat-lbl  { font-size:var(--fs-xs); color:var(--muted); margin-top:3px; font-weight:600; }
.prf-month-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.prf-month-title { font-size:var(--fs-md); font-weight:700; }
.prf-month-sel { padding:5px 28px 5px 8px; border:1.5px solid var(--border); border-radius:8px; font-size:var(--fs-label); background:var(--bg); font-family:inherit; outline:none; color:var(--text); cursor:pointer; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; background-size:12px 12px; }
.prf-cat-tbl { width:100%; margin:8px 0 4px; }
.prf-cat-tbl td { padding:7px 2px; font-size:var(--fs-sm); border-bottom:1px solid var(--border); }
.prf-cat-tbl tr:last-child td { border-bottom:none; }
.prf-cat-tbl td:first-child { color:var(--muted); font-weight:500; }
.prf-cat-tbl td:last-child { text-align:right; font-weight:700; }
.prf-estimate { background:var(--bg); border-radius:12px; padding:14px; margin-top:12px; }
.prf-est-title { font-size:var(--fs-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
.prf-daily-wrap { display:flex; align-items:center; gap:8px; background:var(--surface); border-radius:10px; padding:10px 12px; margin-bottom:10px; border:1px solid var(--border); }
.prf-daily-lbl { font-size:var(--fs-label); color:var(--muted); font-weight:600; white-space:nowrap; }
.prf-daily-inp { flex:1; border:none; background:transparent; font-size:var(--fs-md); font-weight:800; color:var(--blue); font-family:inherit; outline:none; text-align:right; min-width:0; }
.prf-est-tbl { width:100%; }
.prf-est-tbl td { padding:8px 2px; font-size:var(--fs-label); border-bottom:1px solid var(--border); }
.prf-est-tbl tr:last-child td { border-bottom:none; }
.prf-est-tbl td:last-child { text-align:right; font-weight:700; }
.prf-est-total td { font-size:var(--fs-md) !important; font-weight:900 !important; padding-top:12px !important; border-top:2px solid var(--text); border-bottom:none !important; }
.prf-est-total td:last-child { color:var(--blue); }
.prf-est-hint { font-size:var(--fs-xs); color:var(--muted); margin-top:8px; line-height:1.5; }
.prf-pin-inp { width:100%; padding:11px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:var(--fs-md); font-family:inherit; outline:none; letter-spacing:8px; text-align:center; margin-bottom:8px; box-sizing:border-box; background:var(--bg); color:var(--text); }
.prf-pin-inp:focus { border-color:var(--blue); background:var(--surface); }
.prf-sep { border:none; border-top:1px solid var(--border); margin:14px 0; }
.prf-ver-hd { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.prf-ver-tag { font-size:var(--fs-sm); font-weight:800; }
.prf-ver-date { font-size:var(--fs-xs); color:var(--muted); }
.prf-patch-sec { border-left:3px solid; padding-left:8px; margin-bottom:6px; }
.prf-patch-lbl { font-size:var(--fs-xs); font-weight:700; padding:2px 6px; border-radius:4px; display:inline-block; margin-bottom:3px; }
.prf-patch-items { font-size:var(--fs-label); color:var(--muted); line-height:1.6; }
.prf-more-btn { width:100%; margin-top:10px; padding:9px; border:1.5px solid var(--border); border-radius:10px; background:var(--bg); color:var(--muted); font-size:var(--fs-label); font-weight:700; cursor:pointer; font-family:inherit; }

/* ── 시공관리 우측 패널 공정 진행도 v2.28.1 ── */
.cst-rp-row-hd { display:flex; justify-content:space-between; align-items:baseline; }
.cst-rp-row-name { flex:1; overflow:hidden; }
.cst-rp-row-pct { flex-shrink:0; margin-left:6px; }

/* ── 출퇴근 인원별 iPad/PC 카드 스타일 v2.28.1 ── */
body.view-ipad .att-pcard,
body.view-pc   .att-pcard {
  border-radius: 12px;
  border-bottom: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s;
}
body.view-ipad .att-pcard:hover,
body.view-pc   .att-pcard:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); }
body.view-ipad .att-pcard.sel,
body.view-pc   .att-pcard.sel   { box-shadow: 0 0 0 2px var(--blue); }

/* G: 출퇴근 시트 CTA 버튼 — 그라디언트 + 광택 (v2.28.3) */
.att-sheet .btn-p {
  background: linear-gradient(180deg, #2276ce 0%, #185FA5 100%);
  box-shadow: 0 4px 20px rgba(24,95,165,.42), inset 0 1px 0 rgba(255,255,255,.2);
  border: 1px solid rgba(0,0,0,.10);
  position: relative; overflow: hidden;
}
.att-sheet .btn-p::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}
.att-sheet .btn-p:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(24,95,165,.25), inset 0 1px 3px rgba(0,0,0,.10);
}
/* ── 작업 일보 날짜 네비 버튼 ── */
/* ── 작업현황표 인쇄: 셀 배경 강제 출력 (v2.30.x) ── */
@media print {
  .ws-na, .ws-done, .ws-undone {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* =========================================================
   v2.31.0 UI 개선 패치
   ========================================================= */

/* ── 이슈 1: 세대 바텀시트 하단 여백 축소 ── */
.unit-sheet-foot {
  padding: 12px 18px calc(6px + env(safe-area-inset-bottom, 0px));
}

/* ── 이슈 2: 공정 행 hover + 완료 표시 ── */
.u-proc-row:hover { background: var(--bg); }
.u-proc-row { transition: background .12s ease; min-height: 40px; }
.u-proc-num.done { background: var(--green); color: #fff; }
.u-proc-st { border-radius: 20px; }

/* ── 이슈 6: 이상신고 카드 PC 2열 그리드 ── */
.si-cards-wrap { display: flex; flex-direction: column; gap: 10px; }
body.view-pc .si-cards-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
body.view-pc .si-cards-wrap .si-card { margin-bottom: 0; }

/* ── 이슈 7: 자재계산기 PC 패널 폭 확대 + 가로 스크롤 ── */
body.view-pc   .m-grid-pane { width: 420px; overflow-x: hidden; }
body.view-ipad .m-grid-pane { width: 300px; overflow-x: hidden; }
body.view-pc   .m-grid-pane .apt-wrap,
body.view-ipad .m-grid-pane .apt-wrap { overflow-x: auto; }

/* ── 이슈 9: 설정 행 자체 배경 제거 → 카드 경계 복원 ── */
.set-row { background: transparent; padding-left: 0; padding-right: 0; border-bottom: 1px solid #f5f5f3; }
/* ========================================================= */

/* ── 공정별 진행도 우측 패널 디자인 개선 (v2.31.1) ── */
.cst-rp-row { margin-bottom: 10px; }
.cst-rp-row-hd { font-size: var(--fs-label); margin-bottom: 5px; }
.cst-rp-row-name { text-overflow:ellipsis; white-space:nowrap; font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.cst-rp-row-pct { font-size: var(--fs-label); font-weight: 800; }
.cst-rp-bar { height: 7px; border-radius: 4px; }
.cst-rp-fill { height: 100%; border-radius: 4px; transition: width .4s cubic-bezier(.32,0,.17,1); }

/* ── 공정별 진행도 우측 패널 카드 스타일 (v2.31.2) ── */
/* 패널 배경을 회색으로 → 흰 카드가 떠 보이게 */
/* 공정별 진행도 섹션을 카드로 */
.cst-rp-prog-hd { padding: 12px 14px 10px; }
#cst-right-prog-body { padding: 0 14px 14px; }
/* 세대 상세 패널도 카드 */
/* 바 트랙 색을 bg(회색)로 → 채워진 bar가 대비되게 */
.cst-rp-bar { overflow: hidden; background: var(--bg); border: none; }

/* ── 공정별 진행도 패널 보정 (v2.31.3) ── */
/* 세로 구분선 제거 */
#cst-right-panel { overflow-y:auto; background: var(--bg) !important; padding: 12px; gap: 10px; border-left: none !important; }
/* 높이 보정 — detail pane 카드 제거, flex:1 유지 */
/* 공정별 진행도 카드 — flex-shrink:0 명시 (자연 높이만) */
#cst-right-prog { background: var(--surface); border-radius: var(--card-radius, 12px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)), var(--shadow-md, 0 6px 20px rgba(0,0,0,.05)); border-bottom: none; overflow: hidden; margin-bottom: 0; flex-shrink: 0 !important; }

/* ── 시공관리 모바일 툴바·탭 edge-to-edge (v2.32.2) ── */
/* .main의 14px 좌우 패딩을 negative margin으로 상쇄해 화면 끝까지 채움 */
body.view-mobile .cst-tbar        { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }
body.view-mobile .cst-proc-row    { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }
body.view-mobile .dong-tabs       { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }
body.view-mobile .cst-proc-banner { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }

/* ── v2.32.4: 관리자 탭바 헤더 고정 (iPad/PC) ── */
/* .main의 padding(top:12 / 좌우:20)을 음수 마진으로 상쇄 → 탭바·필터바가 헤더에 바로 붙음 */
body.view-ipad #page-admin,
body.view-pc   #page-admin {
  margin-top: -12px;
  margin-left: -20px;
  margin-right: -20px;
}

/* ── v2.33.0: 시공관리 PC 3컬럼 카드 디자인 + 세대상세 헤더 고정 ── */
/* 비미디어: 모바일/iPad에서 detail pane 배경만 흰색 유지 (카드 스타일은 PC 미디어에서) */
#cst-detail-pane {
  flex:1;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface) !important;
}

/* PC(1024px+): 3컬럼 — 그리드(좌) / 세대상세 카드(중) / 공정진행도 카드(우) */
@media (min-width: 1024px) {
  /* 세대상세 → 중앙 카드 (DOM: prog→detail 순 / order:1 로 앞 배치) */
  #cst-detail-pane {
    order: 1;
    width: 340px;
    flex: none !important;
    overflow: hidden !important;   /* border-radius 클리핑; 내부 flex-col 자식이 스크롤 담당 */
    display: flex;
    flex-direction: column;
    background: var(--surface) !important;
    border: none !important;
    border-radius: var(--card-radius, 12px) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)),
                var(--shadow-md, 0 6px 20px rgba(0,0,0,.05)) !important;
  }
  /* 공정별 진행도 → 우측 카드 */
  #cst-right-prog {
    order: 2;
    width: 260px;
    flex: none !important;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface) !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: var(--card-radius, 12px) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)),
                var(--shadow-md, 0 6px 20px rgba(0,0,0,.05)) !important;
  }
}

/* ── 공정 단계(카테고리) 묶음 표시 (v2.51.0) ── */
/* 공정 칩 1줄째 단계 칩 + 2줄째(펼친 단계의 공정) */
.cst-stage-chip { color:var(--text); }
.cst-stage-pct { font-size:var(--fs-xs); font-weight:800; margin-left:2px; }
.cst-proc-chip.grp-hi .cst-stage-pct { color:var(--blue) !important; }
.cst-proc-subrow { background:var(--bg); border-bottom:1px solid var(--border); }
.cst-proc-subrow:not(.open) { display:none; }
/* 공정별 진행 막대 — 단계 행 */
.prog-stage { margin-bottom:12px; }
.prog-stage:last-child { margin-bottom:0; }
.prog-stage-hd { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:var(--fs-sm); margin-bottom:5px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.prog-stage-name { font-weight:700; color:var(--text); min-width:0; }
.prog-stage-sub { display:block; font-size:var(--fs-xs); font-weight:500; color:var(--muted); margin-top:1px; }
.prog-stage-arrow { font-size:var(--fs-xs); color:var(--muted); }
.prog-stage-body { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
/* 동×단계 표 — 단계 제목 칸(탭하면 펼침) */
.prog-matrix th.mat-stg { cursor:pointer; color:var(--text); font-weight:700; }
.prog-matrix th.mat-stg.on { background:var(--blue-bg); color:var(--blue); }
/* PC 우측 패널 */
.cst-rp-stage { padding-top:4px; }
.cst-rp-sub { padding-left:12px; }
.cst-rp-sub .cst-rp-row-name { color:var(--muted); }
/* 세대 체크목록 — 단계 제목 */
.u-proc-stage { display:flex; justify-content:space-between; align-items:center; padding:12px 0 4px; font-size:var(--fs-label); font-weight:800; color:var(--text); border-bottom:1.5px solid var(--border); }
.u-proc-stage:first-child { padding-top:4px; }
.u-proc-stage-cnt { font-size:var(--fs-xs); font-weight:700; color:var(--muted); }
.u-proc-stage-cnt.done { color:var(--green); }
/* 설정 › 공정 항목 — 단계 블록 (v2.51.0) */
.proc-stage-block { margin-bottom:14px; }
.proc-stage-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 2px 6px; flex-wrap:wrap; }
.proc-stage-title { font-size:var(--fs-sm); font-weight:800; color:var(--text); }
.proc-stage-cnt { font-size:var(--fs-xs); font-weight:700; color:var(--muted); background:var(--bg); border-radius:10px; padding:1px 7px; margin-left:4px; }
.proc-stage-btns { display:flex; gap:4px; }
.proc-stage-btn { border:1.5px solid var(--border); background:var(--surface); color:var(--text); border-radius:7px; padding:3px 8px; font-size:var(--fs-xs); font-weight:700; cursor:pointer; font-family:inherit; min-height:28px; }
.proc-stage-btn:disabled { opacity:.35; cursor:default; }
.proc-stage-btn.danger { color:var(--red); }
.proc-stage-list { min-height:36px; border-radius:10px; }
.proc-stage-list:empty { border:1.5px dashed var(--border); }
.proc-stage-list:empty::after { content:'여기로 공정을 끌어 놓으세요'; display:block; text-align:center; font-size:var(--fs-xs); color:var(--muted); padding:10px 0; }
.proc-add-row { display:flex; gap:8px; margin-bottom:8px; }
.proc-add-input { flex:1; min-width:0; padding:9px 12px; border:1.5px solid var(--border); border-radius:9px; font-size:var(--fs-sm); outline:none; background:var(--bg); font-family:inherit; }
.proc-add-sel { max-width:42%; padding:9px 8px; border:1.5px solid var(--border); border-radius:9px; font-size:var(--fs-label); background:var(--bg); font-family:inherit; outline:none; }

/* ── v2.52.1 모바일 레이아웃 보정 ── */
/* 짧은 화면에서도 아래로 쓸데없이 스크롤되던 문제: .main의 min-height:100vh에
   상단바 높이 + body 하단 탭바 여백(80px)이 더해져 화면보다 항상 길었음 */
body.view-mobile .main { min-height: 0; }
/* v2.56.1: 바깥 틀(.app-wrap)에도 같은 100% 높이가 걸려 있어 여전히 80px가 남았음 */
body.view-mobile .app-wrap { min-height: 0; }
/* v2.56.1: 세대 상세 바텀시트 배경이 absolute라, 닫힌 채 화면 아래에 숨겨둔 시트(330px)가
   페이지 길이를 늘렸음(그리드 아래 빈 공간의 진짜 원인). 또 아래로 스크롤한 뒤 세대를 누르면
   시트가 페이지 맨 위에서 열려 안 보였음 → 화면 고정(fixed) + 넘침 잘라내기 */
.unit-modal { position: fixed; overflow: hidden; }
/* 설정 서브패널(공정 항목 등)의 기준 상자 지정 — 없으면 화면 밖에 대기 중인 패널이
   문서 폭을 오른쪽으로 늘려 아이폰이 화면 전체를 축소해 보여줬음 */
#page-settings { flex-direction:row; padding:0; overflow:hidden; gap:0; position: relative; }
@media (max-width: 767px) {
  #page-settings { min-height: calc(100dvh - 150px); }
}

/* ── 저장 대기열 표시 (v2.58.0) ──
   화면은 누르는 즉시 바뀌고 저장은 뒤에서. 1초 넘게 저장 대기일 때만 작은 회색 점 */
.sq-pending { position: relative; }
.sq-pending::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); opacity: 0; pointer-events: none;
  animation: sqDotIn .2s ease 1s forwards;
}
td.sq-pending::after { right: auto; left: 4px; top: 4px; }   /* 오른쪽 위는 이상신고 점 자리 */
@keyframes sqDotIn { to { opacity: .85; } }

/* 저장 거절 → 그 칸이 짧게 흔들리고 원래 색으로 */
.sq-shake { animation: sqShake .3s ease; }
@keyframes sqShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

/* 연결 대기 띠 — 오프라인 등으로 저장이 보관 중일 때 화면 위쪽 */
#sq-banner {
  position: fixed; z-index: 10000; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px); padding: 8px 8px 8px 12px;
  background: var(--amber-bg); color: var(--amber);
  border: 1px solid rgba(133,79,11,.25); border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.12));
  white-space: nowrap;
}
#sq-banner .sq-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; animation: sqBlink 1.4s ease-in-out infinite; }
#sq-banner button {
  border: none; border-radius: 999px; padding: 5px 10px; min-height: 28px;
  background: var(--amber); color: #fff; font: inherit; font-size: var(--fs-label); cursor: pointer;
}
@keyframes sqBlink { 50% { opacity: .3; } }

/* 메모 자동 저장 상태 — '저장 중… → 저장됨 ✓'(2초 뒤 흐려짐) */
.sq-save-st { min-height: 16px; margin-top: 4px; font-size: var(--fs-label); color: var(--muted); text-align: right; transition: opacity .4s; }
.sq-save-st.ok   { color: var(--green); }
.sq-save-st.err  { color: var(--red); }
.sq-save-st.fade { opacity: 0; }

/* 버튼 달린 알림 (저장 실패 → 다시 시도) */
.ui-toast-action {
  position: fixed; bottom: 80px; right: 16px; z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 10px 10px 10px 16px;
  color: #fff; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: slideIn .3s ease;
}
.ui-toast-action button {
  border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff;
  border-radius: 8px; padding: 6px 10px; min-height: 32px; font: inherit; font-size: var(--fs-label); cursor: pointer; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .sq-pending::after { animation: none; opacity: .85; }
  .sq-shake, #sq-banner .sq-banner-dot { animation: none; }
  .sq-save-st { transition: none; }
}

/* ── 시공관리 PC 우측 패널 폭 정리 (v2.58.1 A1) ──
   예전: 패널 620px 고정(세대상세 340 + 진행도 260) → 사이드바 220 + 그리드 + 620 > 1280 → 1080·1280px 화면 가로 넘침
   지금: 세대를 고르기 전엔 상세 칸 숨김(진행도만 270px). 1024~1365px은 진행도를 그리드 위 접힘 줄로 보내고 패널엔 세대 상세만 */
@media (min-width: 1024px) {
  #cst-right-panel { display:flex; flex-shrink:0; flex-direction: row; overflow: visible; background: transparent !important; padding: 0 0 0 10px !important; gap: 10px !important; align-items: stretch; width: auto; }
  #cst-right-panel:not(.has-unit) #cst-detail-pane { display: none !important; }
  .cst-rp-close {
    width: 28px; height: 28px; flex-shrink: 0; margin-left: 4px;
    border: none; border-radius: 8px; background: var(--bg); color: var(--muted);
    font-size: var(--fs-sm); cursor: pointer; font-family: inherit;
  }
  .cst-rp-close:hover { color: var(--text); }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  #cst-right-prog { display: none !important; }
  #cst-right-panel:not(.has-unit) { display: none !important; }
  .cst-prog-area { display: block !important; padding: 0 0 8px; background: transparent; }
}
.sq-save-st.warn { color: var(--amber); font-weight: 600; }

/* 다른 사람이 바꾼 칸 — 실시간으로 들어오면 잠깐 파란 테두리 (v2.59.0) */
.rt-flash { animation: rtFlash 1.2s ease; }
@keyframes rtFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rt-flash { animation: none; } }

/* ════════════════════════════════════════════════
   조작 부품 공용 규칙 (v2.60.0 Phase 3 — 기획 v2.57.0 §5-2)
   높이 --ctl-h · 모서리 --ctl-radius(버튼·선택상자·세그먼트) / --chip-radius(거르는 칩) · 테두리 1px · 글씨 13px
   강조 색은 의미로만(주 동작 파랑·위험 빨강). 버튼별 색은 아이콘에만
   ════════════════════════════════════════════════ */
body.view-mobile, body.view-ipad { --ctl-h: 44px; }

.ctl-btn, .ctl-select, .ctl-chip {
  height: var(--ctl-h); min-height: var(--ctl-h);
  border: var(--ctl-border); background: var(--surface); color: var(--text);
  font-size: var(--ctl-fs); font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.ctl-btn    { padding: 0 12px; border-radius: var(--ctl-radius); }
.ctl-btn:active { background: var(--bg); }
.ctl-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.ctl-btn.danger  { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, var(--border)); }
.ctl-btn.icon    { width: var(--ctl-h); padding: 0; }
.ctl-select {
  display: inline-block; padding: 0 30px 0 10px; border-radius: var(--ctl-radius);
  -webkit-appearance: none; appearance: none; outline: none; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6c77' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
}
.ctl-chip   { padding: 0 14px; border-radius: var(--chip-radius); color: var(--text-2); }
.ctl-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.ctl-chip.dashed { border-style: dashed; color: var(--muted); background: transparent; }
.ctl-chip:active, .ctl-btn:active { transform: scale(.97); }
/* 세그먼트(보기 전환 등): 바깥 상자가 --ctl-h, 안쪽 버튼은 3px 안쪽 */
.seg-pill { display: inline-flex; height: var(--ctl-h); padding: 3px; gap: 2px; background: var(--bg); border-radius: var(--ctl-radius); flex-shrink: 0; }
.seg-pill > button {
  height: 100%; min-width: calc(var(--ctl-h) - 6px); padding: 0 10px; border: none; background: none;
  border-radius: calc(var(--ctl-radius) - 2px); color: var(--muted); font-size: var(--ctl-fs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.seg-pill > button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
@media (prefers-reduced-motion: reduce) { .ctl-chip:active, .ctl-btn:active { transform: none; } }

/* 시공관리 툴바·공정 칩·그룹 줄 — 위 규칙으로 통일 (사용자 지적: 그룹을 켜면 나오는 버튼들이 따로 놀던 문제) */
.cst-tbar { gap: 6px; }
.cst-site-sel.ctl-select { max-width: 180px; background-color: var(--surface); font-weight: 700; }
.cst-proc-sel-pc.ctl-select { min-width: 130px; max-width: 200px; display: none; }
/* 공용 클래스의 display가 '이 화면에서만 보임' 규칙을 덮지 않게 다시 지정: 공정 드롭다운은 PC만, 진행도 버튼은 폰만 */
@media (min-width: 1024px) { .cst-proc-sel-pc.ctl-select { display: inline-block; } }
@media (min-width: 768px)  { .cst-prog-btn.ctl-btn { display: none; } }
.cst-view-btn.on.red { color: var(--red); }
.cst-inline-actions { gap: 6px; }
/* Phase 4 (v2.61.5) — 설정 하위 화면 제목 줄·기술자료 필터 줄: 높이만 --ctl-h로 통일, 모양은 유지 */
.set-bk.ctl-btn { border: none; background: var(--bg); color: var(--muted); }
/* Phase 4 2차 (v2.61.6) — 창 머리 오른쪽 버튼 묶음: 동작 버튼과 ✕ 닫기를 같은 높이로 */
.modal-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.modal-head-actions .modal-close { min-width: var(--ctl-h); min-height: var(--ctl-h); height: var(--ctl-h); }
/* 옅은 색 버튼(인쇄·이미지 저장 등) — 색은 의미로만 */
.ctl-btn.tint-blue  { background: var(--blue-bg);  color: var(--blue);  border-color: var(--blue); }
.ctl-btn.tint-green { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.ctl-btn.tint-amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
/* Phase 4 3차 (v2.63.1) — 동 선택(시공관리·기성청구·작업현황표): 공정 칩과 같은 둥근 칩. 숫자는 완료/전체 */
.dong-chip { padding: 0 12px; font-weight: 600; }
.dong-chip > span { font-size: var(--fs-xs); font-weight: 600; margin-left: 2px; }
.dong-chip.on > span { color: rgba(255,255,255,.9) !important; }
/* 시트·패널 머리의 ✕ 닫기 — 테두리 없는 동그라미 (다크 모드에서도 배경 토큰을 따름) */
.ctl-btn.sheet-close { border: none; background: var(--bg); color: var(--muted); border-radius: 50%; font-size: var(--fs-md); font-weight: 400; }
/* 목록 줄 안의 작은 동작: 해결(초록 글씨) · 삭제처럼 덜 중요한 것(흐린 글씨) */
.ctl-btn.ok    { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.ctl-btn.quiet { color: var(--muted); }
.tbar-btn.ctl-btn { color: var(--text); background: var(--surface); }
.tbar-btn.ctl-btn svg { flex-shrink: 0; }
.tbar-btn.green svg  { color: var(--green); }
.tbar-btn.purple svg { color: var(--purple); }
.cst-grp-chip.ctl-chip.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
.cst-prog-btn.ctl-btn { width: var(--ctl-h); padding: 0; color: var(--muted); }
.cst-prog-btn.ctl-btn.on { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
.cst-proc-row { gap: 6px; }
.cst-proc-chip.ctl-chip { color: var(--text-2); }
.cst-proc-chip.ctl-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cst-proc-chip.ctl-chip.grp-hi { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
/* 그룹 줄: 툴바·공정 칩 줄과 같은 여백·높이 */
.cst-group-row { display: none; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 14px; background: var(--surface); border-bottom: 1px solid #f5f5f3; }
.cst-group-row.open { display: flex; }
.cst-group-list { display: flex; gap: 6px; flex-wrap: wrap; }
.group-btn.ctl-chip { font-weight: 600; }
.group-btn.ctl-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.group-btn .grp-edit { margin-left: 2px; opacity: .55; font-size: var(--fs-label); padding: 0 2px; }
body.view-mobile .cst-group-row { margin-left: -14px; margin-right: -14px; padding-left: 10px; padding-right: 10px; }

/* ════════════════════════════════════════════════
   iPad 세로(768~1023px) 사이드바 72px 접기 (v2.60.0 B1 · 결정 D6)
   아이콘 + 짧은 이름. 위쪽 ☰ 버튼을 누르면 220px로 겹쳐 열림(본문은 그대로), 메뉴를 고르거나 바깥을 누르면 접힘
   ════════════════════════════════════════════════ */
.sb-expand-btn { display: none; }
body.view-ipad .sidebar { width: 72px; transition: width .2s ease, box-shadow .2s ease; overflow-x: hidden; }
body.view-ipad .main { margin-left: 72px; width: calc(100% - 72px); }
body.view-ipad .ah   { margin-left: 72px; }
body.view-ipad:not(.sb-expanded) .sidebar-logo { justify-content: center; padding: 10px 0 6px; }
body.view-ipad:not(.sb-expanded) .sidebar-brand { display: none; }
body.view-ipad .sb-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; border-radius: var(--ctl-radius); background: transparent; color: var(--text-2); cursor: pointer;
}
body.view-ipad.sb-expanded .sb-expand-btn { margin-left: auto; }
body.view-ipad:not(.sb-expanded) .nav-section-title,
body.view-ipad:not(.sb-expanded) .sidebar-bottom > div:first-child { display: none; }
body.view-ipad:not(.sb-expanded) .nav-item {
  flex-direction: column; justify-content: center; gap: 3px;
  margin: 2px 6px; padding: 6px 2px; min-height: 52px;
  font-size: 0; border-left-width: 0; text-align: center;
}
body.view-ipad:not(.sb-expanded) .nav-item::after {
  content: attr(data-short); font-size: var(--fs-xs); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.view-ipad:not(.sb-expanded) .nav-item .nav-icon { width: 28px; height: 28px; }
body.view-ipad.sb-expanded .sidebar { width: var(--sidebar-w); box-shadow: 8px 0 32px rgba(0,0,0,.18); }

/* ══════════════════════════════════════════════
   v2.60.0 Phase 3 — 글씨 4단계·터치 44px·스크롤 힌트·폰 입력칸 (B4·B5·B8·B11)
   ══════════════════════════════════════════════ */

/* B4: 글씨를 11px로 올린 칸이 넘치지 않게 보호 (한 줄 유지 + 말줄임) */
.apt-hp, .apt-pct, .unit-no, .unit-hp,
.mat-cell .mat-hp, .mat-cell .mat-indoor,
.att-mc-time, .bt-lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bt-lb { text-align: center; }

/* B5: 터치 44px (폰·iPad만, PC는 그대로) */
body.view-mobile .cst-view-btn, body.view-ipad .cst-view-btn,
body.view-mobile .view-btn,     body.view-ipad .view-btn,
body.view-mobile .adm-tab,      body.view-ipad .adm-tab,
body.view-mobile .eq-nav-btn,   body.view-ipad .eq-nav-btn,
body.view-mobile .mat-col-indicator, body.view-ipad .mat-col-indicator,
body.view-mobile .si-toggle-wrap,    body.view-ipad .si-toggle-wrap { min-height: 44px; }
body.view-mobile .cst-view-btn, body.view-ipad .cst-view-btn,
body.view-mobile .eq-nav-btn,   body.view-ipad .eq-nav-btn,
body.view-mobile .mat-col-indicator, body.view-ipad .mat-col-indicator { min-width: 44px; }
/* 세그먼트 안 버튼은 바깥 틀(.seg-pill = --ctl-h 44px)이 누르는 크기 — 안쪽 버튼까지 44px로 키우면
   3px 안쪽 여백을 넘어 선택 표시가 틀 밖으로 삐져나감 (v2.90.2, 사용자 지적: 시공 보기 전환 버튼 어긋남) */
body.view-mobile .seg-pill > button, body.view-ipad .seg-pill > button { min-height: 0; }

/* B8: 가로 스크롤 힌트 공용 — 더 밀 곳이 있으면 가장자리에 그림자, 끝에 닿으면 사라짐 (css/retrofit.css .rf-table-wrap 복사, CSS만).
   덮개색은 --xsh-bg (기본 --surface). 칸 배경이 불투명한 표는 칸 사이 틈에서만 그림자가 비친다. */
.x-scroll-hint, .apt-wrap, .att-matrix-wrap, .sc-summary-strip {
  background:
    linear-gradient(to right, var(--xsh-bg, var(--surface)) 30%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--xsh-bg, var(--surface)) 30%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,    rgba(0, 0, 0, .16), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right / 12px 100% no-repeat scroll,
    var(--xsh-bg, var(--surface));
}

/* B11: 폰 입력칸 16px — 아이폰이 입력칸을 눌렀을 때 화면을 멋대로 확대하는 것을 막음 (확대 차단 메타는 쓰지 않음) */
body.view-mobile input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.view-mobile select,
body.view-mobile textarea { font-size: 16px !important; }

/* 폰: 조작 부품이 44px가 되면서 한 줄이 비좁음 → 현장 선택은 첫 줄 전체 폭, 보기 전환·그룹·진행도는 둘째 줄 (v2.60.0) */
body.view-mobile .cst-site-sel.ctl-select { flex: 1 1 100%; max-width: none; }
body.view-mobile .cst-tbar .ctrl-divider { display: none; }

/* ── v2.60.1 디자인 보정 (사용자 지적 4건) ── */
/* 캘린더 공휴일 이름: 칸 안에서만 */
.cal2-hol { font-size: var(--fs-xs, 11px); line-height: 1.2; color: var(--red); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal2-cell { min-width: 0; }

/* 시공관리 상단 묶음: iPad·PC에서 아래 카드들과 같은 둥근 카드 (상단바만 직사각형이던 것) */
body.view-ipad .cst-head, body.view-pc .cst-head {
  background: var(--surface); border-radius: var(--card-radius, 12px); overflow: hidden; margin-bottom: 10px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)), var(--shadow-md, 0 6px 20px rgba(0,0,0,.05));
}
body.view-ipad .cst-head > :last-child, body.view-pc .cst-head > :last-child { border-bottom: none; }
body.view-ipad .cst-head .cst-tbar, body.view-pc .cst-head .cst-tbar { padding: 10px 14px; }
body.view-ipad .cst-head .cst-group-row, body.view-pc .cst-head .cst-group-row { border-top: 1px solid var(--border); border-bottom: none; }

/* 그룹 편집 패널 */
.gp-panel { background: var(--surface); border-top: 1px solid var(--border); padding: 16px; }
.gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gp-title { font-size: var(--fs-md, 15px); font-weight: 800; color: var(--text); }
.gp-count { font-size: var(--fs-sm, 13px); font-weight: 700; color: var(--muted); white-space: nowrap; }
.gp-count.ok { color: var(--blue); }
.gp-name-input { width: 100%; height: var(--ctl-h); padding: 0 12px; border: var(--ctl-border); border-radius: var(--ctl-radius); font-size: var(--ctl-fs); background: var(--surface); outline: none; }
.gp-name-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.gp-hint { margin: 8px 0 4px; font-size: var(--fs-xs, 11px); color: var(--muted); }
.gp-stage { margin-top: 14px; }
.gp-stage-hd { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm, 13px); font-weight: 800; color: var(--text-2); }
.gp-stage-cnt { font-size: var(--fs-xs, 11px); font-weight: 600; color: var(--muted); }
.gp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px; margin-top: 8px; }
.gp-item {
  display: flex; align-items: center; gap: 10px; min-height: var(--ctl-h); padding: 6px 10px 6px 12px;
  border: var(--ctl-border); border-radius: var(--ctl-radius); background: var(--surface);
  font-size: var(--ctl-fs); line-height: 1.35; color: var(--text); cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s;
}
.gp-item:hover { border-color: #c9cbd3; }
.gp-item.on { border-color: var(--blue); background: var(--blue-bg); }
.gp-name { flex: 1; min-width: 0; }
.gp-cb {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; margin: 0;
  width: 18px; height: 18px; border: 1.5px solid #c4c6cf; border-radius: 5px; background: var(--surface);
  display: grid; place-content: center; cursor: pointer; transition: background .12s, border-color .12s;
}
.gp-cb::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.gp-cb:checked { background: var(--blue); border-color: var(--blue); }
.gp-cb:checked::after { opacity: 1; }
.gp-color { width: 26px; height: 26px; flex-shrink: 0; padding: 2px; border: var(--ctl-border); border-radius: 6px; background: var(--surface); cursor: pointer; }
.gp-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* PC: 그리드 카드와 공정별 진행도 카드의 아래 끝을 맞춤 (그리드 카드 아래 여백만큼 진행도가 길던 것) */
@media (min-width: 1024px) {
  #apt-view { min-width: 0; display: flex; flex-direction: column; }
  #construct-view-wrap { flex: 1; margin-bottom: 0; }
}

/* 캘린더 판 넓힘 — PC 310px·iPad 260px에선 날짜 칸이 38px라 공휴일 이름(개천절·한글날)이 잘렸음 (v2.60.1) */
body.view-ipad #cal2-left-pane { flex-basis: 340px; }
body.view-pc   #cal2-left-pane { border-right:1px solid var(--border); flex-basis: clamp(400px, 36%, 560px); }

/* ── v2.61.1 디자인 자동 점검(design-audit)이 찾은 같은 종류 문제 ── */
/* D4: 현장비용 관리 상단 묶음도 iPad·PC에선 둥근 카드 (시공관리 상단바와 같은 문제) */
body.view-ipad .sc-top-wrap, body.view-pc .sc-top-wrap {
  border: none; border-radius: var(--card-radius, 12px); margin-bottom: 10px; padding-bottom: 8px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)), var(--shadow-md, 0 6px 20px rgba(0,0,0,.05));
}
/* D2: 작은 버튼이 좁은 칸에서 눌려 글자가 삐져나오던 것 (설정 '수정') */
.btn-xs { flex-shrink: 0; white-space: nowrap; }
/* D2: 패치노트의 긴 경로·코드가 폰 화면 밖으로 나가던 것 */
.prf-patch-items { overflow-wrap: anywhere; word-break: keep-all; }
.prf-patch-items code { overflow-wrap: anywhere; }

/* ════════════════════════════════════════════════
   인라인 스타일 → 이름 붙은 부품 (v2.71.1 — 기획 v2.38 레버 ④). 화면 코드에서 옮겨 온 규칙이라 맨 끝에 둔다(옛 인라인처럼 이기도록)
   ════════════════════════════════════════════════ */
/* app.html 고정 마크업의 인라인 스타일 → 부품 (v2.71.1 레버 ④) */
#page-construct, #page-techdocs { position:relative; }
.gp-cancel { margin-left:auto; }
#construct-view-wrap.card { padding:10px; }
.cstp-pick-t { font-size:var(--fs-sm); }
.sc-stat-card.scp-pend { border-left:3px solid var(--amber); }
.sc-stat-card.scp-done { border-left:3px solid var(--green); }
.sc-stat-card.scp-static { cursor:default; }
.scp-lbl { font-size:var(--fs-xs); color:var(--muted); margin-bottom:3px; }
.scp-lbl.scp-lbl-gap { margin-bottom:6px; }
.scp-num { font-size:var(--fs-md); font-weight:700; color:var(--green); line-height:1; }
.scp-num.scp-num-lg { font-size:var(--fs-title); color:var(--amber); }
.scp-sub { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.scp-sub.scp-sub-strong { font-weight:600; color:var(--text); }
.scp-cats { font-size:var(--fs-xs); display:flex; flex-direction:column; gap:3px; }
.scp-grab { width:36px; height:4px; background:var(--border); border-radius:2px; margin:10px auto 0; }
.scp-sheet-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 0; }
.scp-sheet-title { font-size:var(--fs-md); font-weight:900; }
.scp-step-lbl { font-size:var(--fs-label); color:var(--muted); }
#sc-modal-body { padding:0 18px 4px; }

/* 현장비용·기술자료 */
/* site-costs / TechDocs inline-style → classes */
/* ── site-costs (sc-*) ── */
.sc-empty { padding:32px; text-align:center; color:var(--muted); }
.sc-val-material { color:var(--blue); }
.sc-val-equip { color:var(--amber); }
.sc-val-etc { color:var(--green); }
.sc-rej-heading { font-size:var(--fs-label); color:var(--muted); font-weight:600; letter-spacing:.04em; margin:18px 0 8px; }
.sc-bank-row { display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px; background:var(--bg); border-radius:8px; flex-wrap:wrap; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sc-bank-name { font-size:var(--fs-label); font-weight:600; }
.sc-bank-no { font-size:var(--fs-label); }
.sc-muted-label { font-size:var(--fs-label); color:var(--muted); }
.sc-bank-hint { font-size:var(--fs-xs); color:var(--muted); margin-left:auto; }
.sc-action-row { display:flex; gap:8px; margin-top:14px; }
.btn.sc-btn-reject { flex:1; min-height:48px; color:var(--red); border-color:var(--red); font-size:var(--fs-sm); }
.btn.sc-btn-pay { flex:2; min-height:48px; font-size:var(--fs-sm); }
.btn.sc-btn-delete { width:100%; margin-top:8px; min-height:40px; color:var(--muted); border-color:var(--border); font-size:var(--fs-label); }
.card.sc-request { padding:16px; margin-bottom:10px; }
.sc-req-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.sc-req-head-l { display:flex; align-items:center; gap:8px; }
.sc-req-status { font-size:var(--fs-xs); font-weight:700; }
.sc-muted-xs { font-size:var(--fs-xs); color:var(--muted); }
.sc-req-cat { margin-bottom:6px; }
.badge.sc-badge-xs { font-size:var(--fs-xs); }
.sc-req-item { font-size:var(--fs-md); font-weight:600; margin-bottom:4px; }
.sc-req-amount { font-size:var(--fs-num); font-weight:700; }
.sc-req-memo { font-size:var(--fs-label); color:var(--muted); margin-top:6px; }
.sc-req-by { font-size:var(--fs-xs); color:var(--muted); margin-top:8px; }
.sc-req-reason { font-size:var(--fs-label); color:var(--red); margin-top:6px; padding:7px 10px; background:var(--red-bg); border-radius:7px; }
.sc-hist-row { padding:12px 0; border-bottom:1px solid var(--border); }
.sc-hist-main { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sc-hist-l { flex:1; min-width:0; }
.sc-hist-meta { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:wrap; }
.sc-hist-item { font-size:var(--fs-md); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-hist-memo { font-size:var(--fs-label); color:var(--muted); margin-top:2px; }
.sc-hist-proc { font-size:var(--fs-xs); color:var(--muted); margin-top:4px; }
.sc-hist-r { text-align:right; flex-shrink:0; }
.sc-hist-amount { font-size:var(--fs-title); font-weight:700; }
.sc-hist-done { font-size:var(--fs-xs); color:var(--green); margin-top:2px; }
.btn.sc-hist-del { font-size:var(--fs-xs); padding:2px 8px; min-height:0; color:var(--muted); border-color:var(--border); margin-top:6px; }
.sc-filter-row { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.sc-filter-sel { padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); background:var(--surface); color:var(--text); }
.sc-filter-btns { display:flex; margin-bottom:12px; }
.card.sc-hist-card { padding:0 16px; }
.sc-recent { margin-bottom:16px; }
.sc-recent-title { font-size:var(--fs-xs); color:var(--muted); font-weight:600; letter-spacing:.04em; margin-bottom:7px; }
.sc-recent-list { display:flex; flex-direction:column; gap:5px; }
.sc-recent-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); cursor:pointer; text-align:left; width:100%; min-height:48px; }
.badge.sc-badge-fixed { font-size:var(--fs-xs); flex-shrink:0; }
.sc-recent-name { font-size:var(--fs-sm); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-recent-amt { font-size:var(--fs-label); color:var(--muted); white-space:nowrap; }
.sc-recent-hr { border:none; border-top:1px solid var(--border); margin:0 0 16px; }
.sc-form-col { display:flex; flex-direction:column; gap:14px; }
.sc-form-label { font-size:var(--fs-label); color:var(--muted); font-weight:600; letter-spacing:.04em; display:block; margin-bottom:8px; }
.sc-cat-row { display:flex; gap:6px; }
.sc-cat-btn { flex:1; padding:10px 4px; border-radius:8px; font-size:var(--fs-sm); font-weight:600; min-height:48px; cursor:pointer; transition:all .15s; border:2px solid transparent; background:var(--bg); color:var(--muted); }
.sc-input-md { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; font-size:var(--fs-md); background:var(--surface); color:var(--text); box-sizing:border-box; outline:none; }
.sc-amount-wrap { position:relative; }
.sc-input-amount { width:100%; padding:12px 36px 12px 12px; border:1px solid var(--border); border-radius:10px; font-size:var(--fs-md); background:var(--surface); color:var(--text); box-sizing:border-box; outline:none; }
.sc-amount-unit { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:var(--fs-sm); color:var(--muted); pointer-events:none; }
.sc-modal-actions { display:flex; gap:8px; margin-top:20px; }
.btn.sc-btn-half { flex:1; min-height:48px; }
.btn.sc-btn-main { flex:2; min-height:48px; font-size:var(--fs-md); }
.sc-sum-chip { padding:10px 14px; background:var(--bg); border-radius:10px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sc-sum-info { font-size:var(--fs-sm); display:flex; align-items:center; gap:8px; min-width:0; }
.sc-sum-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-sum-amt { color:var(--blue); white-space:nowrap; flex-shrink:0; }
.sc-two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sc-select-bank { width:100%; padding:12px 8px; border:1px solid var(--border); border-radius:10px; font-size:var(--fs-sm); background:var(--surface); color:var(--text); }
.sc-bank-other { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:var(--fs-sm); background:var(--surface); color:var(--text); box-sizing:border-box; outline:none; margin-top:6px; }
.sc-input-sm { width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; font-size:var(--fs-sm); background:var(--surface); color:var(--text); box-sizing:border-box; outline:none; }
.sc-save-row { display:flex; align-items:center; gap:10px; cursor:pointer; padding:2px 0; }
.sc-save-check { width:18px; height:18px; accent-color:var(--blue); flex-shrink:0; }
.sc-save-text { font-size:var(--fs-sm); color:var(--muted); }
.sc-label-opt { font-weight:400; }
.sc-reject-box { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.sc-reject-label { font-size:var(--fs-label); color:var(--muted); font-weight:600; letter-spacing:.04em; display:block; margin-bottom:7px; }
.sc-reject-input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); background:var(--surface); color:var(--text); box-sizing:border-box; outline:none; margin-bottom:8px; }
.sc-reject-btns { display:flex; gap:8px; }
.btn.sc-rj-cancel { flex:1; min-height:44px; }
.btn.btn-primary.sc-rj-ok { flex:1; min-height:44px; background:var(--red); border-color:var(--red); }
/* ── TechDocs (td-*) ── */
.td-mfr-head { margin-bottom:8px; font-size:var(--fs-label); font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.td-cat-group { margin-bottom:16px; }
.td-cat-tag { font-size:var(--fs-xs); font-weight:700; color:var(--blue); margin-bottom:8px; padding:4px 8px; background:var(--blue-bg); border-radius:6px; display:inline-block; }
.td-doc-list { display:flex; flex-direction:column; gap:8px; }
.btn.td-edit-btn { flex-shrink:0; }
.td-parse-err { color:var(--muted); font-size:var(--fs-label); }
.td-doc-img { max-width:100%; border-radius:8px; margin-top:8px; cursor:zoom-in; }
.btn.td-pdf-link { margin-top:8px; display:inline-block; }
.card.td-doc-card { padding:14px; }
.td-doc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; }
.td-doc-title { font-weight:700; font-size:var(--fs-sm); }
.td-table-wrap { overflow-x:auto; }
.td-table { width:100%; border-collapse:collapse; font-size:var(--fs-label); }
.td-th { padding:6px 10px; background:var(--bg); border:1px solid var(--border); font-weight:700; text-align:left; white-space:nowrap; }
.td-td { padding:6px 10px; border:1px solid var(--border); white-space:nowrap; }
.td-edit-table { border-collapse:collapse; width:100%; }
.td-cell-wrap { padding:2px; }
.td-cell-input { padding: 4px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-label); width: 100%; box-sizing: border-box; outline: none; }
.td-cell-head { font-weight: 700; background: var(--bg); }

/* 시공관리 */
/* construct.js 인라인 style 이전 (v2.71.x) — css/style.css 맨 끝에 붙임 */
.cst-pp-row { margin-bottom:10px; }
.cst-pp-row.cst-pp-row-in { padding-left:14px; }
.cst-bold { font-weight:700; }
.cst-stage-pctval { font-weight:800;white-space:nowrap; }
.cst-est-row { display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border); }
.cst-est-row.on { font-weight:700; }
.cst-count-r { margin-left:auto;font-size:var(--fs-sm);font-weight:700; }
.cst-hp-val { font-size:var(--fs-xs);font-weight:700; }
.cst-pct-val { font-weight:700;font-size:var(--fs-label); }
.cst-issue-badge { font-size:var(--fs-xs);padding:2px 6px;border-radius:20px;white-space:nowrap;margin-top:1px; }
.cst-rp-upct { margin-left:auto;font-size:var(--fs-md);font-weight:800; }
.cst-rp-ubar { height:100%;border-radius:3px;transition:width .3s; }
.seg-btn.cst-tab-btn { border-radius:8px 8px 0 0;margin-bottom:-2px; }
.cst-tab-count { color:#fff;border-radius:10px;font-size:var(--fs-xs);padding:1px 6px;margin-left:4px; }
.cst-gm-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.cst-pop-state { font-size:var(--fs-sm);font-weight:700; }
.cst-pop-card { background:var(--surface);border-radius:16px;padding:18px;width:100%;max-width:320px;box-shadow:0 8px 32px rgba(0,0,0,0.22);box-sizing:border-box; }
button.cst-pop-close { width:100%;margin-top:14px;padding:12px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);font-size:var(--fs-md);font-weight:600;cursor:pointer;color:var(--text); }
.cst-pop-title { font-size:var(--fs-md);font-weight:700;margin-bottom:12px;color:var(--text); }
.cst-pop-name { flex:1;font-size:var(--fs-sm); }
.cst-pop-row { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border); }
.cst-gcell-body { padding:5px 5px 4px;text-align:center; }
.cst-xs-muted, td.cst-xs-muted { font-size:var(--fs-xs);color:var(--muted); }
.unit-no.cst-c-muted, .cst-c-muted { color:var(--muted); }
.cst-sp-name { font-size:var(--fs-xs);padding:2px; }
.cst-gm-cnt { margin-left:auto;font-size:var(--fs-sm);font-weight:700;color:var(--green); }
.cst-gm-name { font-size:var(--fs-sm);font-weight:700;color:var(--green); }
.cst-gm-bar { background:var(--success-bg);border:1.5px solid var(--success-border);border-radius:10px;padding:10px 14px;margin-bottom:10px; }
.cst-hint-label { font-size:var(--fs-label);color:var(--muted); }
.cst-hint-press { font-size:var(--fs-xs);color:var(--muted);opacity:.7; }
button.cst-legend-toggle { background:none;border:none;padding:0 2px;font-size:var(--fs-xs);color:var(--blue);cursor:pointer;white-space:nowrap;font-weight:600; }
.cst-shared-badge { font-size:var(--fs-xs);color:var(--blue);background:var(--blue-bg);padding:2px 7px;border-radius:10px;white-space:nowrap; }
.cst-lg-dot8s { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:3px;vertical-align:middle; }
.cst-lg-issue { font-size:var(--fs-xs);color:var(--muted);white-space:nowrap; }
.cst-lg-gray { font-size:var(--fs-xs);color:var(--muted);opacity:.6;white-space:nowrap; }
.cst-lg-item { display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap; }
button.btn.btn-sm.cst-ml10 { margin-left:10px; }
.cst-empty-pad { color:var(--muted);padding:20px; }
button.btn.btn-sm.cst-btn-del { color:var(--red);border-color:var(--red);white-space:nowrap;flex-shrink:0; }
.cst-track-by { font-size:var(--fs-xs);color:var(--muted);margin-top:3px; }
.cst-track-desc { font-size:var(--fs-sm);line-height:1.5;word-break:break-all; }
.cst-track-site { font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-bottom:3px; }
.cst-grow { flex:1;min-width:0; }
.cst-track-row { display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border); }
.cst-track-empty { color:var(--muted);padding:32px 0;text-align:center;font-size:var(--fs-sm); }
.cst-mt2 { margin-top:2px; }
button.btn.btn-sm.cst-btn-ok { color:var(--green);border-color:var(--green);white-space:nowrap;flex-shrink:0; }
.badge.cst-badge-done { background:var(--badge-done-bg);color:var(--muted);border:1px solid var(--badge-done-border); }
.cst-track-actions { display:flex;gap:8px;margin-bottom:14px; }
.cst-tabbar { display:flex;gap:0;margin-bottom:16px;border-bottom:2px solid var(--border); }
.cst-sw-gray { display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--bg);border:1px solid var(--border);margin-right:4px;vertical-align:middle; }
.cst-sw-red { display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--red-bg);margin-right:4px;vertical-align:middle; }
.cst-sw-green { display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--green-bg);margin-right:4px;vertical-align:middle; }
.cst-bill-legend { display:flex;gap:14px;margin-top:10px;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap; }
.cst-fs-sm { font-size:var(--fs-sm); }
.cst-c-green { color:var(--green); }
.cst-bill-dong-sum { font-size:var(--fs-label);color:var(--muted);margin-bottom:8px; }
.cst-center-empty { padding:20px;text-align:center;color:var(--muted); }
.cst-flex-wrap { display:flex;gap:6px;flex-wrap:wrap; }
.cst-bill-num-ok { font-size:var(--fs-lg);font-weight:800;color:var(--green); }
.cst-bill-num { font-size:var(--fs-lg);font-weight:800; }
.cst-bill-sum-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;text-align:center; }
.cst-bill-sum-title { font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:10px; }
.cst-bill-sum { background:var(--bg);border-radius:12px;padding:14px 18px;margin-bottom:14px;border:1px solid var(--border); }
.cst-pv-done { margin-top:8px;font-size:var(--fs-label);color:var(--muted); }
.cst-ok-b { color:var(--green);font-weight:700; }
.cst-pv-item { display:flex;align-items:center;gap:6px;font-size:var(--fs-label); }
.cst-pv-list { display:flex;flex-direction:column;gap:4px; }
.cst-pv-line-lg { font-size:var(--fs-label);color:var(--text);margin-bottom:10px; }
.cst-pv-line { font-size:var(--fs-label);color:var(--text);margin-bottom:6px; }
.cst-pv-ok-title { font-size:var(--fs-sm);font-weight:700;color:var(--green);margin-bottom:8px; }
.cst-pv-ok { background:var(--green-bg);border:1px solid var(--green);border-radius:10px;padding:12px 14px; }
.cst-pv-amber { background:var(--amber-bg);border:1px solid var(--amber);border-radius:8px;padding:10px 14px;font-size:var(--fs-sm);color:var(--amber); }
.cst-pv-red { background:var(--red-bg);border:1px solid var(--red);border-radius:8px;padding:10px 14px;font-size:var(--fs-sm);color:var(--red); }
.cst-c-red { color:var(--red); }
input.input.cst-add-input { flex:1;font-size:var(--fs-sm);padding:7px 10px; }
.cst-add-row { display:flex;gap:6px;margin-top:10px; }
.cst-sec-blue { font-size:var(--fs-sm);font-weight:700;margin-bottom:8px;color:var(--blue); }
.cst-meta { color:var(--muted);font-size:var(--fs-xs);margin-left:6px; }
.cst-mat-txt { flex:1;font-size:var(--fs-label); }
.cst-mat-row { display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border); }
.cst-none-sm { color:var(--muted);font-size:var(--fs-label);padding:4px 0; }
.cst-sec-red { font-size:var(--fs-sm);font-weight:700;margin-bottom:8px;color:var(--red); }
.cst-issue-txt { flex:1;font-size:var(--fs-label);line-height:1.5; }
.cst-issue-row { display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border); }
.cst-mt12 { margin-top:12px; }
.cst-rp-scroll { flex:1;overflow-y:auto;padding:12px 14px;min-height:0; }
.cst-rp-tabs { display:flex;border-bottom:1px solid var(--border);flex-shrink:0; }
.unit-info-val.cst-val-sm { font-weight:500;font-size:var(--fs-label); }
.unit-info-cell.cst-wide { grid-column:1/-1; }
.cst-rp-info-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.cst-rp-barwrap { height:5px;background:rgba(0,0,0,.07);border-radius:3px;overflow:hidden;margin-bottom:8px; }
.cst-rp-unit { font-size:var(--fs-md);font-weight:900; }
.cst-rp-title-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.cst-rp-head { padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0; }
.cst-nounit { color:var(--muted);font-size:var(--fs-sm);padding:16px 0 8px; }
.cst-note-sm { font-size:var(--fs-label);color:var(--muted);padding:6px 0; }
.cst-list-foot { margin-top:7px;font-size:var(--fs-xs);color:var(--muted); }
td.cst-fs-xs { font-size:var(--fs-xs); }
td.cst-list-opt { font-size:var(--fs-xs);color:var(--muted);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
td.cst-list-unit { cursor:pointer;font-weight:700;color:var(--blue); }
.cst-issue-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);vertical-align:middle;margin-left:4px; }
.cst-lg-dot8 { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:4px;vertical-align:middle; }
.cst-op5 { opacity:.5; }
.cst-lg-bar-gray { display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--border);margin-right:4px;vertical-align:middle; }
.cst-lg-bar-amber { display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--amber);margin-right:4px;vertical-align:middle; }
.cst-lg-bar-green { display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--green);margin-right:4px;vertical-align:middle; }
.cst-legend.cst-legend-flex { display:flex;gap:6px 14px;margin-bottom:8px;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap; }
.cst-cell-emoji { font-size:var(--fs-md);margin:2px 0;text-align:center; }
.cst-mode-name { font-size:var(--fs-sm);font-weight:700;color:var(--blue); }
.cst-mode-bar { display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--info-bg);border-radius:10px;margin-bottom:10px;border:1.5px solid var(--info-border);flex-wrap:wrap; }
.cst-fs-label { font-size:var(--fs-label); }
.cst-est-name { min-width:48px;font-size:var(--fs-sm); }
.cst-info-b { color:var(--blue);font-weight:700; }
.cst-est-title { font-size:var(--fs-label);font-weight:700;color:var(--muted);margin-bottom:8px; }
.card.cst-card-pad { padding:10px 14px; }
.cst-matrix-hint { font-size:var(--fs-xs);color:var(--muted);margin-top:6px; }
.prog-matrix.cst-matrix-wrap { margin-top:4px; }
.prog-matrix td.cst-dong-name { font-weight:700;text-align:left;padding:6px 10px; }
.cst-pp-head { display:flex;justify-content:space-between;font-size:var(--fs-label);margin-bottom:4px; }
.cst-estimate-gap { margin-top:8px; }
.card.cst-prog-bars-card { margin-bottom:8px; }
.cst-c-amber { color:var(--amber); }
.cst-cell-state { font-size:var(--fs-xs);text-align:center; }

/* 앱 고정 마크업(app.html) */
/* app.html 인라인 스타일 → 클래스 (ap-) */
div#ah-title.ah-title.ap-pointer { cursor:pointer; }
div.ap-rel,div#page-supply.page.ap-rel,div.bt-ic.ap-rel { position:relative; }
span#notif-badge.ap-notif-badge { position:absolute; top:4px; right:4px; background:var(--red); color:#fff; border-radius:10px; font-size:var(--fs-xs); font-weight:700; min-width:15px; height:15px; line-height:15px; text-align:center; padding:0 3px; border:1.5px solid #f2f3f5; }
div#notif-panel.ap-notif-panel { background:var(--surface); border:1px solid var(--border); overflow:hidden; }
div#nav-home.nav-item.ap-ic-blue,div#nav-attend.nav-item.ap-ic-blue,div#nav-construct.nav-item.ap-ic-blue,div#nav-calendar.nav-item.ap-ic-blue,div#nav-equipment.nav-item.site-manager-only.ap-ic-blue,div#nav-supply.nav-item.ap-ic-blue,div#nav-profile.nav-item.ap-ic-blue,div#nav-settings.nav-item.ap-ic-blue { --ic:var(--blue); }
div#nav-site-issues.nav-item.site-manager-only.ap-ic-red,div#nav-admin.nav-item.admin-only.ap-ic-red,div.nav-item.nav-logout.ap-ic-red { --ic:var(--red); }
div#nav-site-costs.nav-item.site-manager-only.ap-ic-green,div#nav-techdocs.nav-item.ap-ic-green { --ic:var(--green); }
div#nav-report.nav-item.ap-ic-purple,div.nav-item.admin-only.ap-ic-purple { --ic:var(--purple); }
div#nav-material.nav-item.ap-ic-amber { --ic:var(--amber); }
div.ap-side-user { padding:8px 16px; font-size:var(--fs-label); color:var(--muted); margin-bottom:4px; }
span#current-user-name.ap-side-user-name { font-weight:600; color:var(--text); }
span#current-user-role.badge.badge-blue.ap-side-user-role { margin-left:6px; font-size:var(--fs-xs); }
div#home-greeting.ap-home-greeting { padding:4px 16px 8px; }
div#home-payroll-banner.ap-home-payroll { padding:0 12px 8px; }
svg.ap-icon-gap { margin-right:3px; }
div#chips-in.segs-equal.ap-mb8,div.form-row.form-row-3.ap-mb8 { margin-bottom:8px; }
div.tgl-ic.ap-bg-amber,div.set-ic.ap-bg-amber { background:var(--amber-bg); }
div.tgl-ic.ap-bg-blue,div.set-ic.ap-bg-blue { background:var(--blue-bg); }
button#att-sheet-del-btn.btn.representative-only.ap-att-del { color:var(--red); border-color:var(--red-bg); background:var(--red-bg); }
button.btn.admin-only.ap-fs-label { font-size:var(--fs-label); }
div#att-pdetail-inner.att-sheet.ap-maxh90 { max-height:90%; }
div#cal-add-btn-wrap.ap-cal-add { margin:10px 0; }
button.btn.btn-blue.ap-w100,select#mat-site-sel.mat-ctrl-sel.ap-w100,textarea#notice-edit-content.ap-w100 { width:100%; }
span.ap-fs-sm { font-size:var(--fs-sm); }
span#adm-ctx-status.ap-adm-ctx { font-size:var(--fs-xs); color:var(--muted); }
div#adm-body.ap-adm-body { flex:1; overflow-y:auto; padding:16px 14px 80px; scrollbar-width:none; min-height:0; }
div#profile-view.ap-profile-view { padding:0 12px 12px; }
div.ap-set-head-first { padding:4px 14px 0; }
div.c.ap-set-card { margin:0 14px; }
div.set-ic.ap-bg-green { background:var(--green-bg); }
div.set-ic.ap-bg-purple { background:var(--purple-bg); }
div.set-ic.ap-bg-page { background:var(--bg); }
div.ap-set-head { padding:14px 14px 0; }
div.set-ic.ap-bg-red { background:var(--red-bg); }
div.set-lb.ap-red,div.set-vl.ap-red { color:var(--red); }
div.ap-grid2-16 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
div.card.mat-ctrl-card.ap-mat-ctrl { padding:10px 12px; margin-bottom:8px; }
div#mat-status-wrap.ap-mb12,div.ap-mb12,div#billing-dong-tabs.ap-mb12,div.form-row.ap-mb12,div.form-row.form-row-2.ap-mb12,div.form-group.ap-mb12,div#td-table-editor.ap-mb12,div#td-file-editor.ap-mb12 { margin-bottom:12px; }
div#mat-grid-card.card.ap-mat-grid { padding:12px; margin-bottom:16px; }
div.ap-mat-range-row { display:flex; gap:6px; align-items:center; }
button.mat-range-all-btn.ap-muted,div#mat-range-summary-text.mat-range-summary-text.ap-muted { color:var(--muted); }
div#mat-floor-range-wrap.mat-range-floor-inputs.ap-mt10 { margin-top:10px; }
div.ap-sup-head { flex-shrink:0; padding-bottom:8px; }
div.ap-sup-row { display:flex; align-items:center; gap:10px; }
div.sup-tabs.ap-flex1 { flex:1; }
div#sup-content.ap-sup-content { flex:1; overflow-y:auto; padding:8px 0 90px; scrollbar-width:none; }
div#sup-sheet-title.ap-sup-sheet-title { font-size:var(--fs-md); font-weight:900; }
div.ap-sup-form { padding:14px 18px 0; }
label.ap-sup-lbl-cat { font-size:var(--fs-xs); color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:8px; }
div.ap-col-gap10 { display:flex; flex-direction:column; gap:10px; }
label.ap-sup-lbl { font-size:var(--fs-xs); color:var(--muted); font-weight:700; display:block; margin-bottom:4px; }
input#sup-form-item.ap-sup-input,input#sup-form-qty.ap-sup-input,input#sup-form-memo.ap-sup-input { width:100%; padding:10px; border:1.5px solid var(--border); border-radius:10px; font-size:var(--fs-sm); font-family:inherit; }
button#sup-submit-btn.ap-sup-submit { width:100%; height:50px; margin-top:14px; border:none; border-radius:14px; background:var(--blue); color:#fff; font-size:var(--fs-md); font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 4px 14px rgba(24,95,165,.3); }
span#tab-home-badge.ap-tab-badge { position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; border-radius:10px; font-size:var(--fs-xs); font-weight:700; min-width:15px; height:15px; line-height:15px; text-align:center; padding:0 3px; border:1.5px solid #fff; }
div.ap-flex-center8 { display:flex; align-items:center; gap:8px; }
svg.ap-blue { color:var(--blue); }
div#va-no-stt.ap-va-nostt { text-align:center; font-size:var(--fs-label); color:var(--muted); padding:4px 0; }
div#unit-modal-badge.ap-mt3 { margin-top:3px; }
div.ap-unit-prog { padding:0 18px 10px; }
div.ap-unit-prog-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
span#unit-prog-pct.ap-unit-prog-pct { font-size:var(--fs-sm); font-weight:800; }
div.ap-unit-prog-track { height:6px; background:var(--bg); border-radius:3px; overflow:hidden; }
div.ap-unit-memo-wrap { padding:12px 18px 4px; }
textarea#unit-memo.ap-unit-memo { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:var(--fs-sm); background:var(--bg); color:var(--text); font-family:inherit; resize:none; outline:none; box-sizing:border-box; }
div#unit-issues-section.ap-px18,div#unit-materials-section.ap-px18 { padding:0 18px; }
div#issues-bulk-summary.ap-bulk-summary { margin-bottom:16px; font-size:var(--fs-sm); padding:10px 14px; background:var(--bg); border-radius:8px; text-align:center; }
div.form-row.form-row-2.ap-mb14 { margin-bottom:14px; }
p.ap-yj-hint { font-size:var(--fs-sm); color:var(--muted); margin-bottom:10px; }
textarea#yangjung-paste-area.ap-yj-text { width:100%; border:1px solid var(--border); border-radius:8px; padding:10px; font-size:var(--fs-label); font-family:monospace; resize:vertical; box-sizing:border-box; outline:none; }
div#yangjung-preview.ap-mt12 { margin-top:12px; }
div#yangjung-actions.ap-mt14 { margin-top:14px; }
div.modal.ap-modal-960 { max-width:960px; width:calc(100vw - 32px); }
div.modal-body.ap-body-h200 { max-height:calc(100vh - 200px); max-height:calc(100dvh - 200px); overflow-y:auto; }
p.ap-hint-label,div.ap-hint-label { font-size:var(--fs-label); color:var(--muted); margin-bottom:12px; }
div.modal-foot.ap-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border); }
div.modal.ap-modal-700 { max-width:700px; width:calc(100vw - 32px); }
div.modal.ap-modal-960w { max-width:960px; width:calc(100vw - 24px); }
div.modal-body.ap-body-h160 { max-height:calc(100vh - 160px); max-height:calc(100dvh - 160px); overflow-y:auto; }
div.modal.ap-modal-1000 { max-width:1000px; width:calc(100vw - 24px); }
div.modal-body.ap-body-h180 { max-height:calc(100vh - 180px); max-height:calc(100dvh - 180px); overflow-y:auto; }
div.modal.ap-modal-480 { max-width:480px; width:calc(100vw - 32px); }
input#cf-confirmed-amount.ap-cf-input,input#cf-payroll.ap-cf-input,input#cf-offset.ap-cf-input,input#cf-invoice.ap-cf-input,input#cf-progress.ap-cf-input,input#cf-received-at.ap-cf-input,input#cf-offset-memo.ap-cf-input,input#pm-date.ap-cf-input,input#pm-amount.ap-cf-input,input#pm-method.ap-cf-input,input#pm-memo.ap-cf-input { padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); width:100%; outline:none; }
div.ap-grid2-10 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
div.form-group.ap-cf-check { flex-direction:row; align-items:center; gap:8px; margin-bottom:8px; }
label.ap-cf-check-lbl { margin-bottom:0; cursor:pointer; }
div.modal.ap-modal-400 { max-width:400px; width:calc(100vw - 32px); }
div.modal-body.ap-body-h120 { max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow-y:auto; }
div.billing-no-print.ap-bill-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
span.ap-bill-lbl { font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
select#billing-proc-sel.ctl-select.ap-minw160 { min-width:160px; }
div#ev-visibility-row.form-row.ap-mb4 { margin-bottom:4px; }
div.ap-ev-vis { display:flex; gap:8px; margin-top:4px; }
label.ap-ev-radio { display:flex; align-items:center; gap:5px; font-size:var(--fs-sm); cursor:pointer; }
button#ev-delete-btn.btn.btn-red.btn-sm.ap-mr-auto,button#td-delete-btn.btn.btn-red.btn-sm.ap-mr-auto { margin-right:auto; }
div#ev-detail-body.modal-body.ap-p0 { padding:0; }
input#worker-password.ap-pw-input { letter-spacing:8px; text-align:center; font-size:var(--fs-lg); }
div.ap-worker-info { background:var(--blue-bg); border-radius:10px; padding:12px; font-size:var(--fs-label); color:var(--blue); line-height:1.7; }
div.modal.ap-w520 { width:520px; }
div.ap-site-help { font-size:var(--fs-label); color:var(--muted); margin-bottom:12px; background:var(--bg); padding:10px; border-radius:8px; line-height:1.8; }
div.ap-sec-label { font-size:var(--fs-label); font-weight:700; color:var(--muted); margin-bottom:8px; }
span.ap-muted-xs { color:var(--muted); font-size:var(--fs-xs); }
div#csv-validation-result.ap-mt8,div#td-file-preview.ap-mt8 { margin-top:8px; }
input#cat-color.ap-cat-color { height:48px; padding:4px; }
div.modal.ap-w560 { width:560px; }
div.ap-td-dim-row { display:flex; gap:8px; margin-bottom:8px; }
div.form-group.ap-td-dim { flex-direction:row; align-items:center; gap:6px; }
label.ap-td-dim-lbl { white-space:nowrap; font-size:var(--fs-label); }
input#td-cols.ap-td-dim-inp,input#td-rows.ap-td-dim-inp { width:60px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; font-size:var(--fs-sm); }
div#td-table-inputs.ap-scroll-x { overflow-x:auto; }

/* 홈·작업일보 */
/* home.js / report.js inline style -> classes */
.hm-site-pop { position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.12);min-width:180px;overflow:hidden;z-index:200; }
.hm-prog-pct { font-weight:700; }
.hm-wk-dow { width:28px;font-weight:700; }
.hm-dday { color:#fff;border-radius:6px;padding:2px 8px;font-size:var(--fs-xs);font-weight:800;flex-shrink:0; }
.hm-alert-head { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.hm-alert-title-red { font-size:var(--fs-md);font-weight:800;color:var(--red); }
.badge.badge-red.hm-badge-xs { font-size:var(--fs-xs); }
.card.hm-card-amber { margin-bottom:12px;border-left:4px solid var(--amber); }
.hm-alert-title-amber { font-size:var(--fs-md);font-weight:800;color:var(--amber); }
.badge.badge-amber.hm-badge-xs { font-size:var(--fs-xs); }
.hm-payroll-banner { background:var(--amber-bg);border:1.5px solid rgba(133,79,11,.25);border-radius:12px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.hm-payroll-ic { font-size:var(--fs-lg); }
.hm-grow { flex:1; }
.hm-payroll-title { font-weight:700;font-size:var(--fs-sm);color:var(--amber); }
.hm-payroll-desc { font-size:var(--fs-label);color:var(--text);margin-top:2px; }
.btn.btn-sm.hm-btn-muted { color:var(--muted); }
.hm-empty { color:var(--muted);font-size:var(--fs-sm); }
.skeleton-block.hm-skel-mb10 { margin-bottom:10px; }
.hm-skel-row { display:flex;gap:8px; }
.skeleton-block.hm-skel-btn { flex:1;height:40px; }
.hm-rel { position:relative; }
.hm-site-pop-head { padding:8px 12px 4px;font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase; }
.qc-site-opt-ic.hm-bg-blue { background:var(--blue-bg); }
.hm-site-opt-txt { flex:1;text-align:left; }
.hm-site-opt-name { font-size:var(--fs-sm);font-weight:700; }
.hm-sub { font-size:var(--fs-xs);color:var(--muted); }
.qc-site-opt-ic.hm-bg-amber { background:var(--amber-bg); }
.qc-site-opt-ic.hm-bg-red { background:var(--red-bg); }
.qc-site-opt-ic.hm-bg-purple { background:var(--purple-bg); }
.qc-site-opt.hm-no-border { border-bottom:none; }
.qc-site-opt-ic.hm-bg-alt { background:var(--surface-alt); }
.hm-mb10 { margin-bottom:10px; }
.hm-memo-input { width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:var(--fs-sm);box-sizing:border-box; }
.hm-qc-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.card-title.hm-nomargin { margin:0; }
.hm-hint-box { font-size:var(--fs-label);margin-bottom:10px; }
.hm-hint-warn { color:var(--amber);font-weight:700;font-size:var(--fs-xs);margin-bottom:3px; }
.hm-muted { color:var(--muted); }
.hm-hint { font-size:var(--fs-label);color:var(--muted);margin-bottom:10px; }
.hm-qc-arrow { flex-shrink:0; }
.hm-qc-site { font-size:var(--fs-xs);color:var(--amber);font-weight:700; }
.hm-auto-out { font-size:var(--fs-label);color:var(--muted);text-align:center;margin-bottom:8px; }
.hm-qc-memo { font-size:var(--fs-label);color:var(--muted);text-align:center;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.hm-done-box { display:flex;align-items:center;justify-content:center;gap:6px;height:44px;background:rgba(59,109,17,.06);border-radius:14px;border:1.5px solid rgba(59,109,17,.2); }
.hm-done-txt { font-size:var(--fs-sm);font-weight:700;color:var(--green); }
.hm-done-name { font-size:var(--fs-label);color:var(--muted); }
.hm-edit-wrap { text-align:center;margin-top:8px; }
.hm-edit-link { font-size:var(--fs-label);color:var(--blue);font-weight:600;cursor:pointer; }
.modal.hm-modal-sm { max-width:320px; }
.hm-conf-warn { background:var(--amber-bg);border:1px solid rgba(133,79,11,.2);border-radius:8px;padding:9px 12px;margin-bottom:10px; }
.hm-conf-warn-title { font-size:var(--fs-label);font-weight:700;color:var(--amber); }
.hm-conf-warn-desc { font-size:var(--fs-xs);color:var(--muted);margin-top:2px; }
.hm-conf-list { display:flex;flex-direction:column;gap:8px;font-size:var(--fs-sm); }
.hm-conf-row { display:flex;justify-content:space-between;padding:8px 12px;background:var(--bg);border-radius:8px; }
.hm-fw600 { font-weight:600; }
.hm-conf-loc { font-weight:600;text-align:right;max-width:180px; }
.hm-conf-time { font-size:var(--fs-num);font-weight:700;text-align:center;color:var(--blue);padding:12px 0;letter-spacing:2px; }
.hm-pref-hint { font-size:var(--fs-label);color:var(--muted);margin-top:8px; }
.sv.hm-sv-muted { color:var(--muted); }
.hm-stat-retry { border:none;background:none;padding:0;margin-top:2px;font-size:var(--fs-xs);color:var(--red);cursor:pointer;text-decoration:underline; }
/* 오늘 한눈에 보조 줄 (v2.104.0) */
.hm-ss { font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.4;font-variant-numeric:tabular-nums;word-break:keep-all; }
.hm-ss .hm-up { color:var(--green);font-weight:700; }
.sl.hm-sl-clip { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere; }
.sv .hm-sv-unit { font-size:var(--fs-label);font-weight:700;margin-left:3px;letter-spacing:0; }
.st { min-width:0; container-type:inline-size; }
.st .sv { white-space:nowrap; }
/* 칸이 좁으면(PC 좁은 창·iPad) 큰 숫자를 한 단계씩 줄임 — '49.9%'가 칸 밖으로 나가던 것 */
@container (max-width: 140px) { .st .sv { font-size:var(--fs-num); } }
@container (max-width: 100px) { .st .sv { font-size:var(--fs-title); } }
.si.hm-si-blue { background:var(--blue-bg); }
.si.hm-si-green { background:var(--green-bg); }
.si.hm-si-amber { background:var(--amber-bg); }
.sv.hm-sv-amber { color:var(--amber); }
.si.hm-si-purple { background:var(--purple-bg); }
.hm-alert-title { font-size:var(--fs-md);font-weight:800;color:var(--text); }
.hm-skel-line-row { display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);align-items:center; }
.skeleton-line.short.hm-skel-w60 { margin:0;width:60px; }
.skeleton-line.hm-skel-flex { margin:0;flex:1; }
.bg.bg-a.hm-bg-xs { font-size:var(--fs-xs); }
.hm-grow-min0 { flex:1;min-width:0; }
.hm-attend-badges { display:flex;flex-direction:column;align-items:flex-end;gap:3px; }
.hm-mb12 { margin-bottom:12px; }
.skeleton-line.medium.hm-skel-mb6 { margin-bottom:6px; }
.skeleton-line.hm-skel-bar { height:8px;border-radius:4px; }
.hm-prog-head { display:flex;justify-content:space-between;font-size:var(--fs-label);margin-bottom:4px; }
.hm-muted-xs { color:var(--muted);font-size:var(--fs-xs); }
.card.hm-card-mb16 { margin-bottom:16px; }
.skeleton-line.medium.hm-skel-mb14 { margin-bottom:14px; }
.hm-stat-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px; }
.skeleton-line.hm-skel-mb8 { margin-bottom:8px; }
.hm-wk-date { color:var(--muted);white-space:nowrap; }
.hm-wk-time { font-weight:600;flex:1; }
.hm-wk-today-chip { background:var(--blue);color:#fff;border-radius:3px;padding:1px 5px;font-size:var(--fs-xs); }
.hm-wk-dash { color:var(--border); }
.hm-wk-today-chip-r { background:var(--blue);color:#fff;border-radius:3px;padding:1px 5px;font-size:var(--fs-xs);margin-left:auto; }
.hm-stat-box { background:var(--bg);border-radius:8px;padding:12px;text-align:center; }
.hm-stat-num-blue { font-size:var(--fs-num);font-weight:800;color:var(--blue); }
.hm-stat-num-green { font-size:var(--fs-num);font-weight:800;color:var(--green); }
.hm-wk-rows { padding:0 4px; }
.hm-wk-row { display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:var(--fs-label); }
.hm-wk-row.hm-wk-row-today { background:var(--blue-bg);margin:0 -4px;padding:6px 4px;border-radius:6px; }

/* 출퇴근·캘린더·알림 */

/* ══ attend.js 인라인 스타일 → 클래스 (atd-) ══ */
.c.atd-card-flush-mb { padding:0;overflow:hidden;margin-bottom:10px; }
.c.atd-card-flush, .card.atd-card-flush { padding:0;overflow:hidden; }
.card.atd-empty-card { padding:32px;text-align:center;color:var(--muted);font-size:var(--fs-sm); }
.bg.atd-fs-xs, .badge.atd-fs-xs { font-size:var(--fs-xs); }
.badge.atd-bdg { font-size:var(--fs-xs);margin-left:3px; }
.badge.atd-bdg.atd-bdg-etc { background:var(--bg);color:var(--muted); }
.av.atd-av-ns { flex-shrink:0; }
.av.atd-av-lg { width:48px;height:48px;font-size:var(--fs-title); }
.atd-noshrink { flex-shrink:0; }
.atd-pointer { cursor:pointer; }
.atd-mb8 { margin-bottom:8px; }
.atd-muted { color:var(--muted); }
.att-cal-dot.atd-op0 { opacity:0; }
.atd-empty-lg { padding:18px 16px;text-align:center;color:var(--muted);font-size:var(--fs-label); }
.atd-empty-xl { padding:24px;color:var(--muted);font-size:var(--fs-sm);text-align:center; }
.atd-empty-pl { text-align:center;color:var(--muted);padding:32px; }
.atd-hint { display:flex;align-items:center;gap:4px;padding:6px 4px;font-size:var(--fs-xs);color:var(--muted); }
.atd-legend-item { display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--muted); }
.atd-dot8 { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.atd-rec-row { padding:7px 0;border-bottom:1px solid var(--border);font-size:var(--fs-label);display:flex;gap:6px; }
.atd-rec-muted { color:var(--muted);white-space:nowrap;flex-shrink:0; }
.atd-rec-loc { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2); }
.atd-pd-body { padding:16px; }
.atd-pd-head { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.atd-pd-name { font-size:var(--fs-title);font-weight:900;letter-spacing:-.02em; }
.atd-pd-sub { font-size:var(--fs-sm);color:var(--muted);margin-top:2px; }
.atd-pd-month { font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin-bottom:6px; }
.atd-pd-legend { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px; }
.atd-pd-lbl { font-size:var(--fs-label);font-weight:700;color:var(--muted);margin-bottom:4px; }
.atd-pd-overview { font-size:var(--fs-sm);color:var(--t2);margin-bottom:14px; }
.atd-pd-none { color:var(--muted);font-size:var(--fs-label); }
.modal.atd-pd-modal { max-width:460px;border-radius:16px;overflow:hidden; }
.atd-pd-modal-hd { display:flex;align-items:center;justify-content:space-between;padding:14px 18px 0; }
.atd-pd-modal-ttl { font-size:var(--fs-md);font-weight:800; }
button.atd-pd-close { border:none;background:none;font-size:var(--fs-lg);cursor:pointer;color:var(--muted); }
.atd-vis-row { display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:6px; }
.atd-vis-name { flex:1;font-size:var(--fs-sm);font-weight:600; }
.atd-vis-lbl { display:flex;align-items:center;gap:6px;font-size:var(--fs-label);cursor:pointer; }
.atd-day-card { border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden; }
.atd-day-hd { padding:8px 12px;background:var(--bg);display:flex;align-items:center;gap:8px; }
.atd-day-hd.today { background:var(--blue-bg); }
.atd-day-dt { font-size:var(--fs-md);font-weight:700; }
.atd-day-cnt { margin-left:auto;font-size:var(--fs-label);color:var(--muted); }
.atd-today-tag { background:var(--blue);color:#fff;border-radius:4px;padding:1px 6px;font-size:var(--fs-xs);font-weight:700; }
.atd-day-rec { padding:8px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.atd-day-name { font-weight:600;font-size:var(--fs-sm);flex:1; }
.atd-day-time { font-size:var(--fs-label);color:var(--muted); }
.btn.btn-xs.atd-del { color:var(--red); }
.c.att-matrix-wrap.atd-matrix { padding:12px;overflow-x:auto; }
.atd-mx-day { font-size:var(--fs-label);font-weight:800; }
.atd-mx-today { font-size:var(--fs-xs);color:var(--blue);font-weight:700; }
.atd-mg { width:100%;border-collapse:collapse;table-layout:fixed; }
.atd-mg-wk { padding:8px 4px;background:var(--bg);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--muted);width:28px;text-align:center; }
.atd-mg-dow { padding:8px 4px;background:var(--bg);border:1px solid var(--border);font-size:var(--fs-sm);font-weight:600;text-align:center; }
.atd-mg-wkn { padding:4px 2px;border:1px solid var(--border);font-size:var(--fs-xs);color:var(--muted);background:var(--bg);text-align:center;font-weight:600;vertical-align:middle; }
.atd-mg-empty { border:1px solid var(--border);background:var(--bg);height:90px; }
.atd-mg-cell { border:1px solid var(--border);padding:5px 4px;vertical-align:top;height:90px; }
.atd-mg-num { font-size:var(--fs-sm);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:3px; }
.atd-mg-today { background:var(--blue);color:#fff;border-radius:2px;padding:0 4px;font-size:var(--fs-xs); }
.atd-mg-chip { border-radius:3px;padding:2px 5px;font-size:var(--fs-xs);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.atd-mg-legend { display:flex;gap:10px;flex-wrap:wrap;margin-top:12px; }
.atd-mg-leg-item { display:flex;align-items:center;gap:4px;font-size:var(--fs-label); }
.atd-mg-sw { width:10px;height:10px;border-radius:2px;border-width:1px;border-style:solid;display:inline-block; }

/* ══ calendar.js (cl-) ══ */
.cl-rp-scroll { flex:1;overflow-y:auto;scrollbar-width:none; }
.cl-dday { font-size:var(--fs-label);font-weight:700;color:#fff;border-radius:5px;padding:2px 8px;margin-left:8px; }
.cl-empty { padding:20px;color:var(--muted);text-align:center;font-size:var(--fs-sm); }
.cl-det-row { padding:14px 16px; }
.cl-det-row.cl-det-sep { border-top:1px solid var(--border); }
.cl-det-main { display:flex;align-items:flex-start;gap:10px; }
.cl-det-cat { flex-shrink:0;display:inline-block;padding:2px 8px;border-radius:5px;font-size:var(--fs-xs);font-weight:600;margin-top:1px; }
.cl-det-txt { flex:1;min-width:0; }
.cl-det-title { font-size:var(--fs-md);font-weight:700;word-break:break-all; }
.cl-det-memo { font-size:var(--fs-label);color:var(--muted);margin-top:4px;word-break:break-all; }
.cl-det-btns { display:flex;gap:6px;flex-shrink:0; }
.cl-list-empty { color:var(--muted);font-size:var(--fs-sm);padding:12px 0; }

/* ══ notifications.js (nt-) ══ */
.nt-login { padding:16px;color:var(--muted);font-size:var(--fs-sm); }
.nt-grab { text-align:center;padding:8px 0; }
.nt-grab-bar { width:36px;height:4px;background:var(--border);border-radius:2px;display:inline-block; }
.nt-hd { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border); }
.nt-hd-ttl { font-weight:700;font-size:var(--fs-md); }
.btn.btn-sm.nt-readall { font-size:var(--fs-xs); }
.nt-list { overflow-y:auto; }
.nt-empty { padding:32px;text-align:center;color:var(--muted);font-size:var(--fs-sm); }
.nt-item { padding:10px 14px 10px 16px;border-bottom:1px solid var(--border);cursor:pointer;border-left-width:3px;border-left-style:solid;display:flex;align-items:flex-start;gap:8px; }
.nt-item.read { opacity:.65; }
.nt-txt { flex:1;min-width:0; }
.nt-ttl { font-size:var(--fs-sm);font-weight:400;line-height:1.4; }
.nt-ttl.unread { font-weight:600; }
.nt-body { font-size:var(--fs-label);color:var(--muted);margin-top:2px;line-height:1.4; }
.nt-time { font-size:var(--fs-xs);color:var(--muted);margin-top:4px; }
button.nt-del { background:none;border:none;cursor:pointer;color:var(--muted);font-size:var(--fs-title);padding:0 2px;line-height:1;flex-shrink:0;opacity:.45;margin-top:-2px; }

/* 물품요청·설정·프로필·기기투입 */
/* inline style -> classes: supply/settings/profile/equipment */
.spl-empty-state{text-align:center;color:var(--muted);padding:48px 16px}
.spl-empty-icon{font-size:var(--fs-hero);margin-bottom:10px}
.spl-empty-text{font-size:var(--fs-sm)}
.spl-memo-inline{color:var(--muted)}
.spl-reject-note{margin-top:8px;padding:8px 12px;background:var(--red-bg);border-radius:8px;font-size:var(--fs-label);color:var(--red)}
.spl-btn-row{display:flex;gap:8px;margin-top:10px}
.btn.btn-sm.spl-btn-grow{flex:1}
.btn.btn-sm.spl-btn-grow-danger{flex:1;color:var(--red);border-color:var(--red)}
.spl-btn-row-end{text-align:right;margin-top:6px}
.btn.btn-sm.spl-btn-quiet-danger{color:var(--muted);border-color:var(--border)}
.spl-req-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.spl-req-main{flex:1;min-width:0}
.spl-req-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.spl-cat-badge{font-size:var(--fs-xs);font-weight:700;padding:2px 8px;border-radius:20px}
.spl-date-text{font-size:var(--fs-xs);color:var(--muted)}
.spl-item-title{font-size:var(--fs-md);font-weight:700;margin-bottom:3px}
.spl-qty-line{font-size:var(--fs-sm);color:var(--muted)}
.spl-status-wrap{flex-shrink:0}
.spl-empty-state-lg{text-align:center;color:var(--muted);padding:48px;font-size:var(--fs-sm)}
.spl-empty-icon-lg{font-size:var(--fs-num);margin-bottom:8px}
.spl-month-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.spl-month-nav{display:flex;align-items:center;gap:4px}
.spl-month-label{font-size:var(--fs-sm);font-weight:600;min-width:60px;text-align:center}
.spl-pending-count{font-size:var(--fs-label);font-weight:700;color:var(--red)}
.spl-admin-btn-row{display:flex;gap:6px;margin-top:10px}
.btn.btn-sm.spl-btn-grow-done{flex:1;background:var(--green-bg);color:var(--green);border-color:var(--green)}
.spl-processed-info{font-size:var(--fs-xs);color:var(--muted);margin-top:6px}
.spl-admin-req-head{display:flex;align-items:flex-start;gap:10px}
.spl-admin-req-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.spl-worker-name{font-size:var(--fs-label);font-weight:700}
.spl-cat-chip{font-size:var(--fs-xs);padding:1px 7px;border-radius:10px;background:var(--bg);color:var(--muted)}
.spl-admin-item-title{font-weight:700;font-size:var(--fs-md);margin-bottom:2px}
.spl-admin-qty-line{color:var(--muted);font-size:var(--fs-sm)}
.spl-admin-actions{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.spl-reject-form{margin-top:6px}
.spl-reject-btns{display:flex;gap:6px}
.spl-load-error{color:var(--red);padding:16px}
.spl-month-label-wide{font-size:var(--fs-sm);font-weight:600;min-width:78px;text-align:center}
.spl-table-empty, .bill-ledger tbody td.spl-table-empty{text-align:center;color:var(--muted);padding:40px;font-size:var(--fs-sm)}
.card.bill-mobile-ctrl.spl-month-ctrl{margin-bottom:14px;justify-content:center}
.card.spl-summary-card{margin-bottom:14px}
.bill-dot.spl-dot-pending{background:var(--red)}
.bill-hn-val.spl-val-pending{color:var(--red)}
.bill-dot.spl-dot-done{background:var(--green)}
.bill-hn-val.spl-val-done{color:var(--green)}
.bill-dot.spl-dot-rejected{background:var(--muted)}
.bill-hn-val.spl-val-rejected{color:var(--muted)}
.bill-card-t.spl-list-title{margin-bottom:0}
.spl-memo-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.spl-reject-sub{font-size:var(--fs-xs);color:var(--red);margin-top:2px}
.act.spl-act-cell{white-space:nowrap}
.btn.btn-primary.btn-sm.stg-add-worker-btn{margin-bottom:12px}
.stg-hint-sm{font-size:var(--fs-label);color:var(--muted);margin-bottom:10px}
.btn.btn-primary.btn-sm.stg-add-site-btn{margin-top:12px}
.stg-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.stg-filter-label{font-size:var(--fs-label);color:var(--muted);font-weight:600}
.stg-hint-xs{font-size:var(--fs-xs);color:var(--muted);margin-bottom:10px}
.stg-hint-lg{font-size:var(--fs-label);color:var(--muted);margin-bottom:14px}
.stg-empty-sm{color:var(--muted);font-size:var(--fs-sm);margin-bottom:8px}
.stg-name-cell{font-weight:600}
.stg-worker-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-radius:10px;margin-bottom:5px}
.stg-worker-main{flex:1;min-width:0}
.stg-worker-name{font-weight:600;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-worker-sub{font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:2px;flex-wrap:wrap}
.stg-wage-text{color:var(--text)}
.stg-worker-actions{display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.stg-inactive-wrap{margin-top:10px;margin-bottom:4px}
.btn.btn-sm.stg-inactive-toggle{width:100%;text-align:left;background:var(--bg);color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.stg-count-pill{background:var(--border);border-radius:10px;padding:1px 7px;font-size:var(--fs-xs);margin-left:4px}
.stg-toggle-arrow{font-size:var(--fs-xs)}
.stg-inactive-list{margin-top:6px}
.stg-worker-row-off{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);border-radius:10px;margin-bottom:5px;opacity:.75}
.stg-worker-name-off{font-weight:600;font-size:var(--fs-sm);color:var(--muted)}
.stg-worker-sub-off{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.stg-cat-swatch{width:22px;height:22px;border-radius:5px;display:inline-block;flex-shrink:0}
.stg-cat-name{flex:1;font-size:var(--fs-sm);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-cat-actions{display:flex;gap:4px;flex-shrink:0}
.stg-site-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:6px}
.stg-site-main{flex:1}
.stg-site-name{font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;gap:6px}
.stg-csv-preview-title{font-size:var(--fs-label);font-weight:600;color:var(--muted);margin-bottom:6px}
.stg-csv-scroll{overflow-x:auto}
.stg-csv-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.stg-csv-th{padding:4px 8px;background:var(--bg);border:1px solid var(--border)}
.stg-csv-td{padding:4px 8px;border:1px solid var(--border)}
.stg-csv-warn{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber);border-radius:6px;padding:8px 12px;font-size:var(--fs-label)}
.stg-empty-md{color:var(--muted);font-size:var(--fs-sm)}
.stg-site-card{padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:8px}
.stg-site-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.stg-site-card-name{font-weight:600;font-size:var(--fs-sm);flex:1}
.stg-site-ctl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.proc-stage-title.stg-stage-muted{color:var(--muted)}
.stg-opt-row{display:flex;gap:8px}
.stg-opt-btn{flex:1;padding:10px 6px;border-radius:10px;cursor:pointer;font-size:var(--fs-label);display:flex;flex-direction:column;align-items:center;gap:3px}
.stg-opt-label{font-size:var(--fs-sm)}
.stg-opt-desc{font-size:var(--fs-xs);color:var(--muted)}
.prf2-load-error{color:var(--muted)}
.prof-hero.prf2-hero-gap{margin-bottom:12px}
.prof-av.prf2-avatar-blue{background:var(--blue)}
.c.prf2-section-gap{margin-top:12px}
.prf2-pin-hint{font-size:var(--fs-label);color:var(--muted);margin-bottom:10px}
.btn.btn-primary.btn-sm.prf2-pin-btn{width:100%;height:44px;margin-top:4px}
.prf2-loading-text{color:var(--muted);font-size:var(--fs-sm);padding:8px 0}
.c.prf2-block-gap{margin-bottom:12px}
.prf2-empty-month{padding:20px;text-align:center;color:var(--muted);font-size:var(--fs-sm)}
.prf-stat-val.prf2-stat-blue{color:var(--blue)}
.prf-stat-val.prf2-stat-amber{color:var(--amber)}
.prf-stat-val.prf2-stat-green{color:var(--green)}
.prf2-days-blue{color:var(--blue)}
.prf2-days-green{color:var(--green)}
.prf2-total-label{font-weight:700;color:var(--text)}
.prf2-total-days{color:var(--amber);font-size:var(--fs-md)}
.prf2-unit-won{font-size:var(--fs-label);color:var(--muted)}
.prf2-patch-error{color:var(--muted);font-size:var(--fs-label)}
.prf2-patch-code{font-size:.92em;background:var(--bg);padding:0 3px;border-radius:4px}
.card.prf2-card-gap-lg{margin-top:16px}
.prf2-add-box{margin-bottom:14px;padding:12px;background:var(--bg);border-radius:10px}
.prf2-add-box-title{font-size:var(--fs-label);font-weight:600;margin-bottom:8px;color:var(--muted)}
.form-row.form-row-4.prf2-form-gap{margin-bottom:8px}
.prf2-optional-text{font-weight:400;color:var(--muted)}
.prf2-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.prf2-status-label{font-size:var(--fs-sm);color:var(--muted)}
.prf2-goal-box{background:var(--bg);border-radius:10px;padding:14px}
.prf2-goal-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.prf2-goal-title{font-size:var(--fs-sm);font-weight:600}
.prf2-goal-hours{font-size:var(--fs-title);font-weight:700}
.prf2-goal-total{font-size:var(--fs-label);color:var(--muted);font-weight:400}
.prf2-goal-track{background:var(--border);border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden}
.prf2-goal-fill{height:100%;border-radius:4px;transition:width .4s}
.prf2-goal-meta{display:flex;gap:16px;font-size:var(--fs-label);color:var(--muted);flex-wrap:wrap}
.prf2-goal-days{color:var(--text)}
.prf2-goal-pct{margin-left:auto;font-weight:600}
.prf2-empty-office{text-align:center;color:var(--muted);font-size:var(--fs-sm);padding:16px 0}
.prf2-table-scroll{overflow-x:auto}
.tbl.prf2-table-sm{font-size:var(--fs-sm)}
.prf2-time-cell{font-weight:600;white-space:nowrap}
.prf2-out-cell{font-weight:600;color:var(--blue)}
.btn.btn-xs.prf2-del-btn{color:var(--red)}
.prf2-hours-cell{font-weight:600}
.eqp-hint-lg{font-size:var(--fs-label);color:var(--muted);margin-bottom:12px}
.eqp-unit-suffix{font-size:var(--fs-sm);color:var(--muted)}
.eqp-month-nav{display:flex;align-items:center;gap:8px}
.eqp-month-label{font-size:var(--fs-sm);font-weight:700}
.eq-sec-label.eqp-sec-label-gap{margin-bottom:6px}
.eq-sec-label.eqp-sec-label-gap-top{margin-top:14px;margin-bottom:6px}
.eqp-chip-wrap{display:flex;flex-wrap:wrap;gap:6px}
.eq-hold-list.eqp-hold-gap{margin-top:8px}
.eq-mini-bar.eqp-bar-gap{margin-top:4px}
.eq-mini-btn.eq-all-site-goto.eqp-goto-btn{font-size:var(--fs-xs);padding:2px 8px;margin-top:4px}
.eqp-basis-note{font-size:var(--fs-xs);color:var(--muted)}
.eqp-hint-sm{font-size:var(--fs-xs);color:var(--muted);margin-bottom:10px}
.eqp-mini-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.eqp-sales-count{color:var(--muted);font-size:var(--fs-xs)}
.eqp-line-row{display:flex;align-items:center;gap:6px}
.eq-batch-date-label.eqp-hold-text{color:var(--amber)}
.eq-sec-label.eqp-sum-label{margin:0}
.eqp-no-data{color:var(--muted)}
.eqp-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eqp-opt-soldout{color:gray}
.eq-icon-btn.eq-del-arrival.eqp-arrival-del{margin-left:auto}
.eqp-arrival-count{font-size:var(--fs-label);color:var(--muted)}
.eqp-file-ok{color:var(--blue);font-size:var(--fs-sm)}

/* 관리자 */
/* ===== admin.js 인라인 스타일 → 클래스 (ad-*) ===== */
.ad-mobile-ctrl-card { padding:10px 12px; margin-bottom:14px; }
.ad-table-scroll { overflow-x:auto; }
.ad-empty-text, div.d.ad-empty-text { margin:0; }
.ad-hero-divider { padding-bottom:14px; border-bottom:1px solid var(--border); }
.ad-hero { font-size:var(--fs-hero); }
.ad-att-th-name { min-width:64px; }
.ad-att-th-day, th.ad-att-th-day { min-width:28px; padding:3px 2px; font-size:var(--fs-xs); }
.ad-att-th-total, th.ad-att-th-total { background:var(--green-bg); min-width:40px; }
.ad-att-th-dow, th.ad-att-th-dow { font-size:var(--fs-xs); font-weight:400; padding:2px; }
.ad-name-cell { font-size:var(--fs-label); }
.ad-att-day-cell, td.ad-att-day-cell { padding:4px 1px; text-align:center; }
.ad-att-day-dot { display:inline-block; width:10px; height:10px; border-radius:50%; }
.ad-dot-green { background:var(--green); }
.ad-dot-purple { background:var(--purple); }
.ad-dot-blue { background:var(--blue); }
.ad-dot-amber { background:var(--amber); }
.ad-no-site-note { color:var(--muted); padding:20px; }
.ad-unpaid-card { margin-bottom:14px; padding:12px 16px; }
.ad-title-gap { margin-bottom:8px; }
.ad-unpaid-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ad-section-gap-m { margin-bottom:14px; }
.ad-card-gap { margin-bottom:16px; }
.ad-step-btn-off { opacity:.4; }
.ad-hero-divider-gap { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.ad-amber { color:var(--amber); }
.ad-blue { color:var(--blue); }
.ad-att-empty { color:var(--muted); padding:20px; text-align:center; }
.ad-pr-th-name { min-width:68px; }
.ad-pr-th-half, th.ad-pr-th-half { background:var(--table-highlight); }
.ad-pr-th-days, th.ad-pr-th-days { background:var(--green-bg); min-width:46px; }
.ad-pr-th-count { min-width:42px; }
.ad-col-center, td.ad-col-center, th.ad-col-center { text-align:center; }
.ad-action-row { margin-top:10px; }
.ad-year-chip-warn, button.ctl-chip.ad-year-chip-warn { color:var(--red); border-color:color-mix(in srgb,var(--red) 35%,var(--border)); }
.ad-loading { padding:20px; color:var(--muted); font-size:var(--fs-sm); }
.ad-error-note { color:var(--red); font-size:var(--fs-sm); }
.ad-month-label { font-size:var(--fs-sm); font-weight:600; min-width:88px; text-align:center; }
.ad-month-nav-card { margin-bottom:14px; justify-content:center; }
.ad-dot-muted { background:var(--muted); }
.ad-muted { color:var(--muted); }
.ad-name-mismatch-box { padding:10px 12px; background:var(--amber-bg); border:1px solid rgba(133,79,11,.2); border-radius:8px; font-size:var(--fs-label); margin-bottom:12px; }
.ad-name-mismatch-title { font-weight:700; color:var(--amber); margin-bottom:6px; }
.ad-name-mismatch-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.ad-name-strong { font-weight:600; }
.ad-claude-steps { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.ad-link-btn { text-decoration:none; }
.ad-step-arrow { font-size:var(--fs-title); color:var(--muted); }
.ad-step-text { font-size:var(--fs-label); color:var(--muted); font-weight:600; }
.ad-prompt-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.ad-prompt-title { font-size:var(--fs-label); font-weight:700; color:var(--muted); }
.ad-prompt-box { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:var(--fs-xs); font-family:monospace; color:var(--muted); white-space:pre; line-height:1.8; cursor:pointer; overflow-x:auto; transition:border-color .15s; }
.ad-section-gap-s { margin-bottom:12px; }
.ad-paste-title { font-size:var(--fs-label); font-weight:700; color:var(--muted); margin-bottom:6px; }
.ad-paste-sub { font-weight:400; color:var(--muted); }
.ad-paste-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.ad-label-muted { font-size:var(--fs-label); color:var(--muted); }
.ad-punglim-toggle-bar { margin-top:14px; border-top:1px solid var(--border); padding-top:12px; }
.ad-punglim-detail { overflow-x:auto; margin-top:8px; }
.ad-punglim-empty { color:var(--muted); font-size:var(--fs-sm); padding:8px 0; }
.ad-allowance-rates { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.ad-allowance-rates-title { font-size:var(--fs-label); font-weight:700; color:var(--blue); }
.ad-inline-row { display:flex; align-items:center; gap:6px; }
.ad-advance-title { font-size:var(--fs-label); font-weight:700; color:var(--amber); margin-bottom:8px; }
.ad-advance-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:6px; margin-bottom:12px; }
.ad-advance-row { display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; }
.ad-advance-name { font-weight:600; min-width:56px; font-size:var(--fs-sm); }
.ad-hint { font-size:var(--fs-xs); color:var(--muted); }
.ad-wage-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.ad-head-flush { margin-bottom:0; }
.ad-inline-row-wide { display:flex; align-items:center; gap:8px; }
.ad-dirty-badge { font-size:var(--fs-xs); color:var(--amber); font-weight:600; }
.ad-wage-table { font-size:var(--fs-sm); white-space:nowrap; }
.ad-col-left, th.ad-col-left { text-align:left; }
.ad-col-right, th.ad-col-right { text-align:right; }
.ad-col-advance, th.ad-col-advance { text-align:center; color:var(--amber); }
.ad-num-blue, th.ad-num-blue { text-align:right; color:var(--blue); }
.ad-num-muted, th.ad-num-muted { text-align:right; color:var(--muted); }
.ad-col-total, th.ad-col-total { text-align:right; font-weight:700; }
.ad-dash-muted { color:var(--muted); font-size:var(--fs-label); }
.ad-name-bold { font-weight:700; }
.ad-att-diff-note { font-size:var(--fs-xs); color:var(--amber); margin-top:2px; }
.ad-sum-label, td.ad-sum-label { text-align:right; font-size:var(--fs-label); color:var(--muted); padding:6px 8px; }
.ad-sum-grand { text-align:right; color:var(--text); }
.ad-split-row-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ad-monthly-sub { font-size:var(--fs-xs); color:var(--muted); font-weight:400; }
.ad-monthly-card { border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.ad-split-row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ad-fixed-tag { font-size:var(--fs-xs); color:var(--blue); background:var(--blue-bg); padding:2px 7px; border-radius:10px; margin-left:6px; }
.ad-monthly-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; font-size:var(--fs-label); }
.ad-stat-tile { background:var(--bg); border-radius:8px; padding:8px 10px; }
.ad-stat-label { color:var(--muted); font-size:var(--fs-xs); margin-bottom:3px; }
.ad-stat-sub { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.ad-deduct-strong { font-weight:700; color:var(--red); }
.ad-stat-tile-net { background:var(--blue-bg); border-radius:8px; padding:8px 10px; }
.ad-net-strong { font-weight:800; color:var(--blue); }
.ad-punglim-table { margin-top:0; font-size:var(--fs-label); }
.ad-col-deduct-head, th.ad-col-deduct-head { text-align:center; background:var(--red-bg); color:var(--red); }
.ad-red, th.ad-red { color:var(--red); }
.ad-green, th.ad-green { color:var(--green); }
.ad-chip-red, th.ad-chip-red { background:var(--red-bg); color:var(--red); font-weight:400; }
.ad-col-wage { text-align:right; font-weight:600; }
.ad-num-red { text-align:right; color:var(--red); }
.ad-muted-xs { color:var(--muted); font-size:var(--fs-xs); }
.ad-col-deduct { text-align:right; font-weight:600; color:var(--red); }
.ad-col-net { text-align:right; font-weight:700; color:var(--green); }
.ad-row-actions, td.ad-row-actions { white-space:nowrap; padding:4px 6px; }
.ad-row-delete, button.btn.btn-xs.ad-row-delete { color:var(--red); margin-left:4px; }
.ad-modal-md { max-width:480px; }
.ad-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.ad-salary-preview { background:var(--blue-bg); border:1px solid rgba(24,95,165,.2); border-radius:8px; padding:10px 12px; font-size:var(--fs-sm); display:flex; justify-content:space-between; }
.ad-salary-value { font-weight:700; color:var(--text); }
.ad-modal-sm { max-width:360px; }
.ad-modal-note { font-size:var(--fs-label); color:var(--muted); margin-bottom:12px; }
.ad-worker-name { font-size:var(--fs-sm); font-weight:600; }
.ad-slip-layout { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start; }
.ad-slip-list { border:1px solid var(--border); border-radius:12px; overflow:hidden; position:sticky; top:16px; }
.ad-slip-list-head { padding:10px 14px; background:var(--bg); font-size:var(--fs-label); font-weight:700; color:var(--muted); border-bottom:1px solid var(--border); }
.ad-empty-sm { padding:20px; text-align:center; color:var(--muted); font-size:var(--fs-sm); }
.ad-slip-item { padding:12px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.ad-slip-item-name { font-size:var(--fs-sm); font-weight:700; }
.ad-slip-list-foot { padding:10px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.ad-block-btn { width:100%; }
.ad-slip-actions { gap:8px; margin-top:12px; }
.ad-split-row { display:flex; justify-content:space-between; align-items:center; }
.ad-preview-name { font-weight:700; font-size:var(--fs-md); }
.ad-preview-month { font-size:var(--fs-label); color:var(--muted); background:var(--bg); padding:2px 8px; border-radius:20px; }
.ad-preview-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; font-size:var(--fs-label); margin-bottom:8px; }
.ad-summary-toggle { cursor:pointer; }
.ad-preview-ins-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:6px; }
.ad-modal-lg { max-width:520px; }
.ad-edit-mode-note { background:var(--blue-bg); border:1px solid rgba(24,95,165,.2); border-radius:8px; padding:10px 12px; font-size:var(--fs-label); color:var(--blue); margin-bottom:14px; }
.ad-field-gap-m { margin-bottom:10px; }
.ad-field-gap-s { margin-bottom:6px; }
.ad-field-sub { font-size:var(--fs-xs); font-weight:400; color:var(--muted); }
.ad-mismatch-warn { font-size:var(--fs-xs); color:var(--amber); margin-top:4px; }
.ad-detail-box { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:4px; }
.ad-detail-toggle, button.ad-detail-toggle { width:100%; padding:8px 12px; background:var(--bg); border:none; text-align:left; font-size:var(--fs-label); color:var(--muted); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.ad-sub-note { font-size:var(--fs-xs); }
.ad-detail-body { padding:12px; border-top:1px solid var(--border); }
.ad-detail-actions { display:flex; justify-content:flex-end; margin-bottom:8px; }
.ad-form-grid-tight { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ad-loading-sm { color:var(--muted); font-size:var(--fs-sm); }
.ad-ledger-nowrap { white-space:nowrap; }
.ad-annual-th-name { min-width:60px; }
.ad-annual-th-month { min-width:58px; }
.ad-annual-th-total, th.num.ad-annual-th-total { min-width:70px; color:var(--blue); }
.ad-total-row { background:var(--bg); }
.ad-annual-sum-cell, td.strong.ad-annual-sum-cell { padding:9px 10px; }
.ad-annual-foot { font-size:var(--fs-xs); color:var(--muted); margin-top:8px; }
.ad-log-last { font-size:var(--fs-lg); }
.ad-claim-ctrl-card { padding:14px; margin-bottom:14px; }
.ad-claim-ctrl-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ad-claim-ctrl-label { font-size:var(--fs-sm); font-weight:600; color:var(--muted); }
.ad-claim-proc-select, select.sel.sel-inline.ad-claim-proc-select { min-width:160px; }
.ad-btn-tone-blue, button.btn.btn-sm.ad-btn-tone-blue { background:var(--blue-bg); color:var(--blue); border-color:var(--blue); }
.ad-empty { padding:20px; text-align:center; color:var(--muted); }
.ad-progress-card { background:var(--bg); border-radius:12px; padding:14px 18px; margin-bottom:14px; border:1px solid var(--border); }
.ad-progress-title { font-size:var(--fs-sm); font-weight:700; margin-bottom:10px; }
.ad-progress-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:10px; text-align:center; }
.ad-big-num { font-size:var(--fs-lg); font-weight:800; }
.ad-big-num-green { font-size:var(--fs-lg); font-weight:800; color:var(--green); }
.ad-dong-chips { display:flex; gap:6px; flex-wrap:wrap; }
.ad-dong-chip-count, span.ad-dong-chip-count { font-size:var(--fs-xs); margin-left:4px; }
.ad-dong-summary { font-size:var(--fs-label); color:var(--muted); margin-bottom:8px; }
.ad-grid-cell, td.ad-grid-cell { text-align:center; font-size:var(--fs-xs); font-weight:600; padding:4px 2px; }
.ad-grid-cell-icon { font-size:var(--fs-sm); }
.ad-grid-legend { display:flex; gap:14px; margin-top:10px; font-size:var(--fs-xs); color:var(--muted); flex-wrap:wrap; }
.ad-legend-done { display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--green-bg); margin-right:4px; vertical-align:middle; }
.ad-legend-todo { display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--red-bg); margin-right:4px; vertical-align:middle; }
.ad-legend-none { display:inline-block; width:12px; height:12px; border-radius:3px; background:var(--bg); border:1px solid var(--border); margin-right:4px; vertical-align:middle; }
.ad-empty-lg { padding:40px; text-align:center; color:var(--muted); }
.ad-claim-actions { display:flex; gap:8px; flex-shrink:0; }
.ad-claim-detail-panel { min-height:200px; }
.ad-chip-muted { color:var(--muted); background:var(--bg); }
.ad-btn-gap { margin-left:8px; }
.ad-claim-head-card { padding:14px; margin-bottom:10px; }
.ad-claim-head-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.ad-claim-title { font-size:var(--fs-md); font-weight:700; }
.ad-claim-ym { font-size:var(--fs-label); color:var(--muted); margin-left:8px; }
.ad-claim-legacy-tag { font-size:var(--fs-xs); background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 6px; margin-left:6px; }
.ad-claim-status-row { display:flex; gap:6px; align-items:center; }
.ad-btn-tone-red, button.btn.btn-sm.ad-btn-tone-red { background:var(--red-bg); color:var(--red); border-color:var(--red); }
.ad-btn-tone-plain-xs, button.btn.btn-sm.ad-btn-tone-plain-xs { background:var(--bg); border:1px solid var(--border); font-size:var(--fs-xs); }
.ad-btn-tone-green, button.btn.btn-sm.ad-btn-tone-green { background:var(--green-bg); color:var(--green); border-color:var(--green); }
.ad-btn-tone-purple, button.btn.btn-sm.ad-btn-tone-purple { background:var(--purple-bg); color:var(--purple); border-color:var(--purple); }
.ad-btn-tone-plain, button.btn.btn-sm.ad-btn-tone-plain { background:var(--bg); border:1px solid var(--border); }
.ad-btn-tone-green-xs, button.btn.btn-sm.ad-btn-tone-green-xs { background:var(--green-bg); color:var(--green); border-color:var(--green); font-size:var(--fs-xs); }
.ad-legacy-empty { padding:20px; text-align:center; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.ad-rate-tabs-wrap { overflow-x:auto; margin-bottom:10px; }
.ad-rate-tabs { display:flex; gap:6px; min-width:max-content; padding:2px; }
.ad-extra-card { padding:10px 14px; margin-bottom:10px; }
.ad-extra-title { font-size:var(--fs-label); font-weight:600; color:var(--muted); margin-bottom:8px; }
.ad-extra-list { display:flex; flex-wrap:wrap; gap:12px; }
.ad-extra-item { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); }
.ad-chip-strip { display:flex; gap:6px; margin-bottom:8px; overflow-x:auto; }
.ad-panel-top { margin-top:12px; }
.ad-grid-th-corner { font-size:var(--fs-xs); padding:3px 6px; background:var(--bg); border:1px solid var(--border); white-space:nowrap; }
.ad-grid-th { font-size:var(--fs-xs); padding:3px 4px; background:var(--bg); border:1px solid var(--border); min-width:32px; }
.ad-grid-th-floor { font-size:var(--fs-xs); font-weight:600; padding:3px 6px; background:var(--bg); border:1px solid var(--border); white-space:nowrap; }
.ad-unit-grid { border-collapse:collapse; font-size:var(--fs-xs); }
.ad-sum-item { padding:3px 8px; font-size:var(--fs-label); }
.ad-sum-amount { padding:3px 8px; text-align:right; font-size:var(--fs-label); }
.ad-sum-card { padding:10px 14px; }
.ad-sum-title { font-size:var(--fs-label); font-weight:600; color:var(--muted); margin-bottom:6px; }
.ad-sum-table { width:100%; border-collapse:collapse; }
.ad-sum-rule { margin:6px 0; border:none; border-top:1px solid var(--border); }
.ad-sum-units { font-size:var(--fs-sm); color:var(--muted); }
.ad-sum-total { font-size:var(--fs-md); font-weight:700; color:var(--blue); }
.ad-legacy-no { padding:3px 6px; font-size:var(--fs-label); font-weight:600; white-space:nowrap; }
.ad-input-cell { padding:3px 4px; }
.ad-legacy-state { padding:3px 6px; font-size:var(--fs-xs); }
.ad-legacy-table { width:max-content; border-collapse:collapse; }
.ad-legacy-th { padding:5px 6px; font-size:var(--fs-xs); text-align:left; background:var(--bg); border-bottom:1px solid var(--border); white-space:nowrap; }
.ad-rates-name { padding:6px 8px; font-size:var(--fs-sm); }
.ad-rates-cat { padding:6px 8px; font-size:var(--fs-label); color:var(--muted); }
.ad-rates-qty { padding:6px 8px; text-align:right; font-size:var(--fs-sm); }
.ad-rates-price { padding:6px 8px; }
.ad-rates-amount { padding:6px 8px; text-align:right; font-size:var(--fs-label); color:var(--muted); }
.ad-rates-th { padding:6px 8px; font-size:var(--fs-label); text-align:left; background:var(--bg); border-bottom:1px solid var(--border); }
.ad-flow-bar-row { display:flex; gap:8px; align-items:center; font-size:var(--fs-xs); margin-bottom:3px; }
.ad-flow-bar-name { min-width:72px; max-width:45%; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.ad-flow-bar-track { flex:1; height:5px; background:var(--bg); border-radius:3px; overflow:hidden; min-width:60px; }
.ad-flow-bar-fill { height:100%; background:var(--blue); border-radius:3px; }
.ad-flow-bar-count { width:110px; text-align:right; color:var(--muted); flex-shrink:0; }
.ad-unsettled-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; padding:6px 10px; background:var(--amber-bg); border-radius:8px; font-size:var(--fs-label); }
.ad-unsettled-edit, button.ad-unsettled-edit { margin-left:4px; padding:1px 7px; border:1px solid var(--border); border-radius:6px; background:var(--surface); font-size:var(--fs-xs); cursor:pointer; }
.ad-flow-empty { margin:auto; color:var(--muted); font-size:var(--fs-label); }
.ad-flow-pending, span.v.ad-flow-pending { color:var(--amber); font-weight:700; }
.ad-list-top { margin-top:8px; }
.ad-payment-line { display:flex; justify-content:space-between; font-size:var(--fs-label); color:var(--text-2); padding:3px 2px; }
.ad-payment-delete, button.btn.btn-sm.ad-payment-delete { margin-left:4px; padding:1px 6px; font-size:var(--fs-xs); background:var(--red-bg); color:var(--red); border-color:var(--red); }

/* ── 지원 인력(crew) 화면 제한 (v2.92.0) — 홈·출퇴근·시공(보기)·프로필만. 판단은 js/auth.js applyPermissions ── */
body.role-crew #nav-calendar, body.role-crew #nav-report, body.role-crew #nav-material, body.role-crew #nav-techdocs,
body.role-crew #nav-supply, body.role-crew #nav-settings, body.role-crew #tab-calendar,
body.role-crew .crew-hide,
body.role-crew #home-payroll-banner, body.role-crew .home-stats-wrap, body.role-crew .home-issues,
body.role-crew .home-attend-wrap, body.role-crew .home-events-wrap,
body.role-crew .cst-inline-actions, body.role-crew #cst-grp-chip, body.role-crew #va-fab { display:none !important; }

/* ── 앱 설치 안내 띠 (v2.99.0, js/install-banner.js) — 화면 위에 떠 있고 내용은 밀지 않음 ── */
.inst-banner { position:fixed; z-index:9000; top:calc(env(safe-area-inset-top, 0px) + 8px); left:max(12px, env(safe-area-inset-left, 0px)); right:max(12px, env(safe-area-inset-right, 0px));
  max-width:560px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--card-radius); box-shadow:var(--shadow-md);
  word-break:keep-all; animation:inst-in .25s ease-out; }
@keyframes inst-in { from { transform:translateY(-12px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .inst-banner { animation:none; } }
.inst-ic { width:36px; height:36px; border-radius:8px; flex:none; }
.inst-tx { flex:1; min-width:0; font-size:var(--fs-sm); line-height:1.4; }
.inst-tx b { display:block; }
.inst-tx small { display:block; color:var(--muted); font-size:var(--fs-label); }
.inst-tx small b { display:inline; color:var(--text); }
.inst-share { display:inline-block; padding:0 4px; border:1px solid var(--border); border-radius:4px; font-size:var(--fs-xs); }
.inst-go { flex:none; min-height:var(--ctl-h); padding:0 14px; border:0; border-radius:var(--ctl-radius); background:var(--blue); color:#fff; font:inherit; font-size:var(--fs-sm); font-weight:700; cursor:pointer; }
.inst-x { flex:none; min-height:var(--ctl-h); padding:0 6px; border:0; background:none; color:var(--muted); font:inherit; font-size:var(--fs-label); cursor:pointer; }
@media (max-width: 380px) { .inst-banner { flex-wrap:wrap; } .inst-tx { flex-basis:calc(100% - 46px); } .inst-go { margin-left:46px; } }