/* svc 도메인 공유 UI 레이어 — 3페이지 공통 토큰·컴포넌트 (docs/56 §5, Vue 승격 전 단계) */
:root {
  --ink:#161f33; --muted:#68758c; --brand:#2456e6; --bg:#f4f6fa; --card:#fff;
  --line:#e6eaf1; --ok:#0e8f5a; --warn:#b36205; --no:#c2394b;
}
* { box-sizing:border-box; margin:0; }
body { font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; background:var(--bg); color:var(--ink); }
.svc-card { background:var(--card); border:1px solid var(--line); border-radius:14px; }
.svc-kpi { padding:18px; }
.svc-kpi .label { font-size:13px; color:var(--muted); }
.svc-kpi .value { font-size:24px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; }
.svc-kpi .sub { font-size:12px; color:var(--muted); margin-top:4px; }
.svc-section { overflow:hidden; }
.svc-section h2 { font-size:15px; padding:14px 18px; border-bottom:1px solid var(--line); }
.svc-table { width:100%; border-collapse:collapse; font-size:14px; }

/* 한국어 표 가독성 — 좁은 열에서 한 글자씩 세로 줄바꿈 방지 (docs/101 §7) */
.svc-table th, .svc-table td { word-break: keep-all; overflow-wrap: anywhere; }
.svc-table .num { white-space: nowrap; }  /* 금액·날짜는 절대 줄바꿈 금지 (docs/101 §7) */
.svc-table { min-width: 560px; }  /* 좁은 열 압착 방지 — 넘치면 tbl-wrap이 가로 스크롤 */
.tbl-wrap { overflow-x: auto; }

/* 모바일 GNB 로그아웃 — 아이콘만 (docs/108) */
@media (max-width: 720px) {
  .svc-logout button { font-size: 0 !important; padding: 5px 9px !important; }
  .svc-logout button::before { content: '🚪'; font-size: 15px; }
}

.svc-table th, .svc-table td { text-align:left; padding:10px 18px; border-bottom:1px solid var(--line); }
.svc-table th { color:var(--muted); font-weight:500; font-size:12.5px; }
.svc-table td.num, .svc-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.svc-badge { display:inline-block; border-radius:999px; font-size:12px; padding:3px 10px; }
.svc-b-ok { background:#e7f6ef; color:var(--ok); }
.svc-b-wait { background:#fff3e0; color:var(--warn); }
.svc-b-off { background:#eef1f6; color:var(--muted); }
.svc-btn { border:none; border-radius:10px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; background:var(--brand); color:#fff; }
.svc-btn:disabled { opacity:.5; cursor:not-allowed; }
.svc-btn-ghost { background:#fff; color:var(--brand); border:1px solid var(--brand); }
.svc-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1c2b4b; color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; display:none; }

/* ── docs/57 UI 참조 보완: 참조 서비스 패턴의 공유 컴포넌트 ───────────────
   GNB(이카운트·Xero 네비) · 필터 칩(Xero 인보이스 탭) · D-day 배지 ·
   활동 피드(QuickBooks Business Feed) · 미니 바차트 · 빈 상태            */

/* 상단 글로벌 네비 — 관리 3페이지 공통 (고객용 inspection_confirm에는 미부착) */
.svc-gnb { background:#101c36; color:#fff; display:flex; align-items:center; gap:22px; padding:0 22px; height:52px; }
.svc-gnb .logo { font-weight:800; font-size:15px; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
.svc-gnb .logo .dot { width:9px; height:9px; border-radius:3px; background:var(--brand-bright,#4d84ff); display:inline-block; }
.svc-gnb nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
.svc-gnb nav a { color:#c3cde2; text-decoration:none; font-size:13.5px; font-weight:600; padding:7px 13px; border-radius:8px; }
.svc-gnb nav a:hover { color:#fff; background:rgba(255,255,255,.07); }
.svc-gnb nav a.on { color:#fff; background:rgba(77,132,255,.22); }
.svc-gnb .env { font-size:12px; color:#8fa0c4; }

/* 필터 칩 — 목록 상태 좁히기 */
.svc-chips { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); }
.svc-chip { border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.svc-chip:hover { border-color:#c6d4f2; color:var(--ink); }
.svc-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.svc-chip .n { opacity:.75; font-weight:500; margin-left:4px; }

/* 배지 확장 — 위험·정보 */
.svc-b-no { background:#fdebee; color:var(--no); }
.svc-b-info { background:#e8f0fe; color:var(--brand); }

/* D-day 배지 — 마감 임박 강조 */
.svc-dday { display:inline-block; border-radius:8px; font-size:12px; font-weight:700; padding:3px 8px; font-variant-numeric:tabular-nums; }
.svc-dday-soon { background:#fdebee; color:var(--no); }
.svc-dday-ok { background:#eef1f6; color:var(--muted); }
.svc-dday-pass { background:#e7f6ef; color:var(--ok); }

/* 활동 피드 — QuickBooks Business Feed 패턴 */
.svc-feed { list-style:none; padding:6px 0; }
.svc-feed li { display:flex; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line); font-size:13.5px; align-items:flex-start; }
.svc-feed li:last-child { border-bottom:none; }
.svc-feed .dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; }
.svc-feed .dot.ok { background:var(--ok); } .svc-feed .dot.warn { background:var(--warn); }
.svc-feed .dot.info { background:var(--brand); } .svc-feed .dot.off { background:#b9c2d4; }
.svc-feed .what { flex:1; }
.svc-feed .what .t { font-weight:600; }
.svc-feed .what .d { color:var(--muted); font-size:12.5px; margin-top:2px; }
.svc-feed .when { color:var(--muted); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* 미니 바차트 — 순수 CSS(라이브러리 없음, www 제약 유지) */
.svc-bars { display:flex; align-items:flex-end; gap:10px; height:110px; padding:16px 18px 6px; }
.svc-bars .bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; min-width:0; }
.svc-bars .bar .v { width:100%; max-width:46px; background:linear-gradient(180deg,#5b8bff,#2456e6); border-radius:6px 6px 2px 2px; min-height:3px; transition:height .3s; }
.svc-bars .bar.cur .v { background:linear-gradient(180deg,#101c36,#1d3fbf); }
.svc-bars .bar .m { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.svc-bars .bar.cur .m { color:var(--ink); font-weight:700; }
.svc-bars-note { padding:0 18px 12px; color:var(--muted); font-size:12px; }

/* 빈 상태 — 행동 유도 포함 */
.svc-empty { padding:34px 18px; text-align:center; color:var(--muted); }
.svc-empty .ico { font-size:26px; margin-bottom:8px; }
.svc-empty .hint { font-size:13px; }

/* 테이블 행 강조 — 만기 임박 */
.svc-table tr.row-soon td { background:#fff8f9; }

/* 관리 페이지 헤더 */
.svc-page-head { background:#fff; border-bottom:1px solid var(--line); padding:16px 24px; display:flex; align-items:baseline; gap:14px; }
.svc-page-head h1 { font-size:19px; }
.svc-page-head .sub { color:var(--muted); font-size:13px; }

/* 반응형 — 좁은 화면 2열 */
@media (max-width:720px) {
  .svc-gnb { padding:0 14px; gap:12px; } .svc-gnb .env { display:none; }
  .svc-kpi-grid { grid-template-columns:repeat(2,1fr) !important; }
  .svc-table-wrap { overflow-x:auto; }
}

/* ── 용어 참조 아이콘·상세 카드 (docs/60, svc-terms.js와 짝) ── */
[data-term] { cursor: help; }
.svc-term-ico { color: var(--brand); font-size: 11px; margin-left: 2px; font-weight: 700; opacity: .85; }
.svc-term-card { position: absolute; z-index: 1200; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(16,28,54,.16); padding: 14px 16px;
  width: min(88vw, 340px); font-size: 13.5px; }
.svc-term-card .head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.svc-term-card .head b { font-size: 15px; }
.svc-term-card .en { color: var(--muted); font-size: 12px; }
.svc-term-card .cat { background: #e8f0fe; color: var(--brand); border-radius: 999px; font-size: 11px; padding: 2px 8px; }
.svc-term-card .st { background: #fff3e0; color: var(--warn); border-radius: 999px; font-size: 11px; padding: 2px 8px; }
.svc-term-card .def { color: var(--ink); line-height: 1.55; }
.svc-term-card details { margin-top: 8px; }
.svc-term-card summary { color: var(--brand); font-size: 12.5px; cursor: pointer; }
.svc-term-card .detail { color: var(--muted); margin-top: 5px; line-height: 1.55; white-space: pre-line; }
.svc-term-card .src { color: var(--muted); font-size: 11.5px; margin-top: 8px; }
.svc-term-card .more { display: inline-block; margin-top: 8px; color: var(--brand); font-size: 12.5px; text-decoration: none; font-weight: 600; }

/* ── 알림 배지·드로어 (docs/67 §3) ── */
.svc-notif { position:relative; margin-left:auto; order:3; }
.svc-notif button { background:none; border:none; font-size:16px; cursor:pointer; position:relative; color:#c3cde2; }
.svc-notif button:hover { color:#fff; }
#svcNotifBadge { position:absolute; top:-4px; right:-8px; background:#e2495f; color:#fff; font-size:10.5px; font-weight:800; border-radius:999px; min-width:17px; height:17px; line-height:17px; text-align:center; padding:0 4px; display:none; }
#svcNotifBox { display:none; position:fixed; top:60px; right:18px; width:min(90vw,340px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 34px rgba(16,28,54,.18); z-index:1300; overflow:hidden; }
#svcNotifBox .head { padding:12px 16px; font-weight:700; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; }
#svcNotifBox .head .close { cursor:pointer; color:var(--muted); }
#svcNotifBox .item { padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; }
#svcNotifBox .item.unread { background:#f6f9ff; }
#svcNotifBox .item .s { font-weight:600; }
#svcNotifBox .item .m { color:var(--muted); font-size:11.5px; margin-top:2px; }
#svcNotifBox .item.empty { color:var(--muted); text-align:center; }

/* 드릴다운 링크 (docs/67 §4) */
a.svc-link { color:var(--brand); text-decoration:none; font-weight:600; }
a.svc-link:hover { text-decoration:underline; }
.svc-rowlink { cursor:pointer; }
.svc-rowlink:hover td { background:#f6f9ff; }

/* 클릭 가능 KPI 호버 단서 (docs/68) */
.card[onclick]:hover { border-color: var(--brand); box-shadow: 0 3px 14px rgba(36,86,230,.14); }

/* 렌더 실패 토스트 (docs/69 §1) */
.svc-errtoast { background:#b3261e; display:none; z-index:1400; }

/* ── 모바일 경리 (docs/69 §3) — 하단 빠른실행 바·터치 크기·표 카드화 ── */
.svc-tabbar { display:none; }
@media (max-width:720px) {
  .svc-tabbar { display:flex; position:fixed; bottom:0; left:0; right:0; background:#101c36; z-index:1100;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px; }
  .svc-tabbar a { flex:1; text-align:center; color:#c3cde2; text-decoration:none; font-size:10.5px; font-weight:600; padding:6px 2px; border-radius:8px; }
  .svc-tabbar a .ico { display:block; font-size:17px; margin-bottom:2px; }
  .svc-tabbar a.on, .svc-tabbar a:active { color:#fff; background:rgba(77,132,255,.22); }
  body { padding-bottom:64px; }
  /* 카드 안 표가 좁은 화면을 밀지 않게 — 표만 가로 스크롤 (117판: 대시보드 28px 넘침) */
  .card table, .svc-card table { display:block; overflow-x:auto; }
  /* KPI 2열은 큰 금액(₩12,000,000)의 최소폭을 못 담아 카드를 밈 — 모바일은 1열 (117판) */
  .grid.svc-kpi-grid { grid-template-columns:1fr !important; }
  /* 긴 토큰(이벤트 타입+문서명 연결 등)이 카드 최소폭을 밀지 않게 (117판: 잔여 8px) */
  .card, .svc-card { overflow-wrap: anywhere; }
  /* 터치 크기 */
  .svc-table th, .svc-table td { padding:12px 12px; }
  .svc-chip { padding:9px 16px; font-size:14px; }
  button, .svc-btn { min-height:40px; }
  input, select, textarea { font-size:16px !important; } /* iOS 확대 방지 */
}

/* 온보딩 행(대시보드 공용 — docs/69) */
.param-row { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-bottom:1px solid var(--line); gap:12px; }
.param-row:last-child { border-bottom:none; }
.param-row .k { font-size:13.5px; }
.param-row .muted, .muted { color:var(--muted); }
.check-pass { color:var(--ok); font-weight:700; }

/* ── 전체 폴리싱(7판, docs/73) — 순회 실측 기반 통일 ── */
/* 소형 버튼 표준(기존 인라인 패딩 7종 대체) */
.svc-btn-sm { padding:6px 12px !important; font-size:12.5px !important; border-radius:8px !important; }
/* 표 행 호버 */
.svc-table tbody tr:hover td { background:#f8faff; }
/* 포커스 링(접근성) */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible { outline:2px solid #9db8f2; outline-offset:1px; }
/* 섹션 헤더 표준(제목 좌·캡션 우, 줄바꿈 허용) */
.card h2, section h2 { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card h2 .cap, section h2 .cap { margin-left:auto; }
/* 도구 행 줄바꿈(가로 넘침 방지 — /tax 실측) */
.tools { flex-wrap:wrap; }
.tools .note { flex-basis:100%; font-size:12px; color:var(--muted); }
/* 얇은 스크롤바 */
.tbl-wrap::-webkit-scrollbar, .svc-section::-webkit-scrollbar { height:8px; width:8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background:#c9d3e6; border-radius:4px; }
/* 카드 그림자 통일(호버형 제외) */
.svc-card { box-shadow:0 1px 3px rgba(16,28,54,.05); }

/* ── 폴리싱 8판(시각·인터랙션 심화, docs/74) — 재순회 실측 기반 ── */
/* 인터랙션: 버튼 반응(호버 그림자·누름) */
.svc-btn, .svc-chip, .svc-gnb nav a, .svc-tabbar a { transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, color .15s ease; }
.svc-btn:not(:disabled):hover { box-shadow:0 2px 10px rgba(36,86,230,.28); }
.svc-btn:not(:disabled):active { transform:translateY(1px); }
.svc-btn-ghost:not(:disabled):hover { background:#f3f7ff; }
/* GNB 활성 인디케이터 — 밑줄 */
.svc-gnb nav a { position:relative; }
.svc-gnb nav a.on::after { content:''; position:absolute; left:12px; right:12px; bottom:1px; height:2px; background:#4d84ff; border-radius:2px; }
/* 표 헤더 위계 */
.svc-table thead th { background:#f7f9fd; }
.svc-table thead th:first-child { border-radius:8px 0 0 8px; }
.svc-table thead th:last-child { border-radius:0 8px 8px 0; }
/* 빈 상태 아이콘 — 원형 배지 */
.svc-empty .ico { background:#eef3fb; border-radius:50%; width:52px; height:52px; line-height:52px; margin:0 auto 10px; font-size:23px; }
/* 부드러운 스크롤 */
html { scroll-behavior:smooth; }
/* GNB 중간 폭 대응 */
@media (max-width:1080px) { .svc-gnb .env { display:none; } }
@media (max-width:920px) { .svc-gnb .logo { font-size:13.5px; } .svc-gnb nav a { padding:6px 9px; font-size:12.5px; } }

/* GNB 그룹 구분점 (docs/78 §2) */
.svc-gnb-sep { width:1px; height:18px; background:rgba(255,255,255,.22); flex:none; margin:0 2px; }

/* 가이드 모드 하이라이트 (docs/82 §1) */
.svc-guide-pulse { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(36,86,230,.30), 0 0 26px rgba(36,86,230,.22) !important; }
@keyframes svc-guide-fade { from { opacity: 1; } to { opacity: 0; } }
.svc-guide-chip { position: fixed; z-index: 1250; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(16,28,54,.3); animation: svc-guide-fade 4s ease forwards; pointer-events: none; }

/* 접근성 — 움직임 최소화 선호 대응 (docs/83 §1) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .svc-guide-chip { animation: none !important; }
}

/* 사용법 둘러보기 (docs/88 §1) — 대상 하이라이트·안내 카드·재생 버튼 */
.svc-tour-hl { position: relative; z-index: 1260; outline: 3px solid var(--brand); outline-offset: 2px;
  border-radius: 10px; box-shadow: 0 0 0 6px rgba(36,86,230,.14) !important; }
.svc-tour-card { position: fixed; z-index: 1270; bottom: 76px; left: 50%; transform: translateX(-50%);
  width: min(92vw, 380px); background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 10px 34px rgba(16,28,54,.18); }
.svc-tour-card .svc-tour-step { font-size: 11.5px; font-weight: 700; color: var(--brand); letter-spacing: .04em; }
.svc-tour-card h3 { font-size: 16px; margin: 4px 0 6px; }
.svc-tour-card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }
.svc-tour-btns { display: flex; gap: 8px; align-items: center; }
.svc-tour-btns button { border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.svc-tour-btns .svc-tour-next { background: var(--brand); border-color: var(--brand); color: #fff; }
.svc-tour-fab { position: fixed; z-index: 1240; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 17px; cursor: pointer; box-shadow: 0 4px 14px rgba(16,28,54,.14); }
.svc-tour-fab.svc-tour-done { opacity: .55; }
@media (max-width:720px) { .svc-tour-card { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .svc-tour-fab { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }