/* 진솔 보고 포털 — 공통 커스텀 스타일.
   Tailwind 만으로 표현하기 어려운 부분만 여기에 둔다. */

.font-pretendard {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* 사이드바 모바일 슬라이드 토글 */
.sidebar {
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}
.sidebar.open {
  transform: translateX(0);
}
@media (min-width: 768px) {
  .sidebar {
    transform: none !important;
  }
}

/* 사이드바 배경 오버레이 (모바일에서 펼쳐졌을 때) */
.sidebar-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .sidebar-backdrop {
    display: none;
  }
}

/* 활성 메뉴 강조 — 다크 네이비 사이드바 위 오렌지 틴트 + 좌측 인디케이터 바 */
.menu-item.active {
  background-color: rgba(99, 102, 241, 0.14);   /* indigo-500/14% */
  color: #a5b4fc;                                /* indigo-300 */
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 #6366f1;           /* indigo-500 좌측 바 */
}

/* 데스크톱 사이드바 접기 — 콘텐츠가 전체 폭으로 넓어짐 */
#sidebar-expand { display: none; }   /* 기본 숨김 (펼침 상태 + 모바일) */
@media (min-width: 768px) {
  .sidebar-collapsed #sidebar {
    display: none;
  }
  .sidebar-collapsed #sidebar-expand {
    display: inline-flex;            /* 접힘 상태에서만 → 버튼 노출 */
  }
}

/* ── 손익보고서: 엑셀풍 시트 서브탭 ─────────────────────────────
   워크북 폴더탭 은유. 활성 탭은 흰 배경 + 상단 오렌지 액센트로
   구분선(바의 border-b) 위에 '떠 있는' 형태. 토글은 .tab-active 하나로. */
.report-sheet-tab {
  position: relative;
  margin-bottom: -1px;              /* 바의 하단 구분선을 덮어 폴더탭처럼 연결 */
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #64748b;                   /* slate-500 */
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.report-sheet-tab:hover {
  color: #334155;                   /* slate-700 */
  background: #f8fafc;              /* slate-50 */
}
.report-sheet-tab.tab-active {
  background: #fff;
  border-color: #e2e8f0;            /* slate-200 */
  color: #4338ca;                   /* indigo-700 */
  font-weight: 600;
}
.report-sheet-tab.tab-active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  border-radius: 8px 8px 0 0;
  background: #818cf8;              /* indigo-400 — 앱 액센트 */
}

/* 보고서 표 숫자는 항상 고정폭 숫자로 열 정렬 */
.report-page table {
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   벤토 공용 컴포넌트 — 페이지에서 재사용
   애플 키노트식 벤토 대시보드 룩(라이트 전용). 다음 단계 페이지 작업은
   아래 클래스명으로 타일을 그린다. Tailwind 유틸과 자유롭게 조합 가능.
   - .bento-grid            : 반응형 벤토 그리드 컨테이너 (모바일 2열 → md 4열)
   - .bento-span-2/3/4      : 타일 가로 스팬 (모바일 2열에선 풀폭으로 클램프)
   - .bento-row-2           : 타일 세로 2행 스팬
   - .bento-tile            : 흰 타일 기본 (rounded-2xl + 은은한 보더/그림자)
   - .bento-tile--hover     : 클릭 가능한 타일에만 — hover 리프트
   - .bento-tile--mint      : 틴트 변형 (emerald-50)
   - .bento-tile--sky       : 틴트 변형 (sky-50)
   - .bento-tile--amber     : 틴트 변형 (amber-50)
   - .bento-tile--navy      : 히어로용 다크 타일 (slate-900 + 흰 글자)
   - .bento-kpi             : KPI 타일 내부 구조 (label/value/sub 세로 스택)
   - .bento-kpi-label/-value/-sub : KPI 자식 요소
   - .bento-section-title   : 섹션 제목 (오렌지 세로 바 인디케이터 + 볼드)
   - .bento-section-sub     : 섹션 제목 옆 보조 텍스트
   ※ .bento-hero(상담카드 히어로)는 report_render.js 가 Tailwind 로 직접
     그리므로 여기서 재정의하지 않음 — @media print 의 인쇄 규칙만 유지. */

/* 반응형 벤토 그리드 컨테이너 */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 스팬 유틸 — 모바일(2열)에서 3·4스팬은 풀폭으로 클램프해 오버플로 방지 */
.bento-span-2 { grid-column: span 2 / span 2; }
.bento-span-3 { grid-column: 1 / -1; }
.bento-span-4 { grid-column: 1 / -1; }
.bento-row-2  { grid-row: span 2 / span 2; }
@media (min-width: 768px) {
  .bento-span-3 { grid-column: span 3 / span 3; }
  .bento-span-4 { grid-column: span 4 / span 4; }
}

/* 타일 기본 — 흰 배경 + 은은한 보더/그림자 (rounded-2xl) */
.bento-tile {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.7);   /* slate-200/70 */
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 1.25rem;
  min-width: 0;                                  /* 그리드 내 텍스트 오버플로 방지 */
}

/* 클릭 가능한 타일에만 — hover 리프트 */
.bento-tile--hover {
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.bento-tile--hover:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 24px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

/* 틴트 변형 — 색 절제: 민트/블루/앰버 3색만 */
.bento-tile--mint  { background: #ecfdf5; border-color: rgba(167, 243, 208, 0.55); } /* emerald-50 */
.bento-tile--sky   { background: #f0f9ff; border-color: rgba(186, 230, 253, 0.6);  } /* sky-50 */
.bento-tile--amber { background: #fffbeb; border-color: rgba(253, 230, 138, 0.5);  } /* amber-50 */

/* 히어로용 다크 타일 — slate-900 + 흰 글자 (인쇄 시 print 블록에서 밝게 반전) */
.bento-tile--navy {
  background: #0f172a;                           /* slate-900 */
  border-color: rgba(15, 23, 42, 0.9);
  color: #ffffff;
}

/* KPI 타일 내부 구조 — 라벨 / 큰 숫자 / 서브 텍스트 */
.bento-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bento-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #64748b;                                /* slate-500 */
}
.bento-kpi-value {
  font-size: 1.625rem;                           /* text-2xl~3xl 사이 */
  line-height: 1.15;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;                                /* slate-900 */
  word-break: keep-all;
}
.bento-kpi-sub {
  font-size: 11px;
  color: #94a3b8;                                /* slate-400 */
}
/* 다크(네이비) 타일 위에서는 KPI 색 반전 */
.bento-tile--navy .bento-kpi-label { color: #94a3b8; }
.bento-tile--navy .bento-kpi-value { color: #ffffff; }
.bento-tile--navy .bento-kpi-sub   { color: #64748b; }

/* 섹션 제목 — report_render.js sectionTitle 룩(오렌지 세로 바)과 일관 */
.bento-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;                          /* 15px */
  font-weight: 700;
  color: #0f172a;                                /* slate-900 */
  margin: 0 0 0.75rem;
}
.bento-section-title::before {
  content: "";
  width: 0.25rem;                                /* w-1 */
  height: 0.875rem;                              /* h-3.5 */
  border-radius: 9999px;
  background: #818cf8;                           /* indigo-400 — 앱 액센트 */
  flex: none;
}
.bento-section-sub {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;                                /* slate-400 */
  margin-left: 0.25rem;
}

/* ── 데이터 표(목록형) — 편안한 가독성 ──────────────────────────
   shadcn/ui · Linear 톤: 본문 ≈14px, 넉넉한 행 높이, 은은한 헤더 + 행 hover.
   목록 표(<table class="data-table">)에만 적용. 밀집 재무표(경비보고서)는 제외.
   패딩/폰트만 규정 — 정렬(text-center/right)·색 유틸리티는 그대로 살아남게 함. */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  font-size: 0.75rem;                             /* 12px */
  font-weight: 600;
  color: #64748b;                                 /* slate-500 */
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.75rem 0.875rem;
  background: #f8fafc;                            /* slate-50 */
  border-bottom: 1px solid #e2e8f0;               /* slate-200 */
  white-space: nowrap;
}
.data-table tbody td {
  padding: 0.875rem 0.875rem;                     /* py-3.5 px-3.5 → 여유 */
  font-size: 0.875rem;                            /* 14px — 작은 셀도 통일 */
  vertical-align: middle;
  line-height: 1.4;
}
.data-table tbody tr:hover {
  background: #eef2ff;                            /* indigo-50 */
}
/* 숫자/날짜 열 — 고정폭 숫자 정렬용 (원하는 td에 class="num") */
.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media print {
  .data-table tbody tr:hover { background: transparent; }
}

/* ── 보고서 시트 탭 + 필기 툴바 상단 고정(틀고정) ──────────────
   스크롤해도 앱 헤더 바로 아래에 붙어 있음. top 은 JS가 헤더 높이로 설정. */
.report-sticky-head {
  position: sticky;
  top: 0;
  z-index: 35;                       /* 필기 canvas(z-30) 위 */
  background: #f8fafc;               /* slate-50 = 콘텐츠 배경(밑 내용 비침 방지) */
  padding: 0.5rem 0 0.4rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 8px 8px -8px rgba(15, 23, 42, 0.12);
}

/* ── 필기(아이패드 주석) 레이어 ────────────────────────────────
   각 시트 위 투명 canvas + 툴바. 캔버스는 pointer-events:none 라
   손가락/마우스 입력은 아래 보고서로 통과(스크롤·버튼·셀편집 유지). */
.report-annot-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;           /* 펜 입력은 container 델리게이트가 처리 */
  touch-action: none;
}
.report-annot-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: -0.25rem 0 0.75rem;
  padding: 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 12px;
}
.report-annot-toolbar .ra-lbl {
  font-weight: 700;
  color: #4f46e5;                 /* indigo-600 */
  letter-spacing: 0.02em;
  padding-right: 0.15rem;
}
/* iOS Safari: 버튼 기본 네이티브 스타일 제거(배경·크기 무시 방지) */
.report-annot-toolbar button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
}
.report-annot-toolbar .ra-colors,
.report-annot-toolbar .ra-widths { display: inline-flex; gap: 0.3rem; align-items: center; }
.report-annot-toolbar .ra-color {
  flex: none; padding: 0;
  width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer;
}
.report-annot-toolbar .ra-color.on { box-shadow: 0 0 0 2px #4f46e5; }
.report-annot-toolbar .ra-width {
  flex: none;
  width: 26px; height: 22px; border-radius: 0.4rem; border: 1px solid #e2e8f0;
  background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.report-annot-toolbar .ra-width.on { border-color: #4f46e5; background: #eef2ff; }
.report-annot-toolbar .ra-width span { display: block; width: 14px; background: #334155; border-radius: 999px; }
.report-annot-toolbar .ra-btn {
  padding: 0.25rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  background: #fff; color: #475569; cursor: pointer; font-size: 12px; white-space: nowrap;
}
.report-annot-toolbar .ra-btn:hover { background: #f8fafc; }
.report-annot-toolbar .ra-btn.on { background: #eef2ff; border-color: #4f46e5; color: #4338ca; font-weight: 600; }
.report-annot-toolbar .ra-status { font-size: 11px; color: #94a3b8; margin-left: auto; min-width: 3.5em; text-align: right; }
.report-annot-toolbar .ra-status.saving { color: #d97706; }
.report-annot-toolbar .ra-status.saved { color: #059669; }
.report-annot-toolbar .ra-status.error { color: #dc2626; }

/* ── 인쇄(PDF 내보내기) ─────────────────────────────────────────
   경비보고서 상세 → 브라우저 인쇄 → 'PDF로 저장'. 사이드바/헤더/버튼 숨기고
   섹션(.report-page)마다 페이지 나눔. */
@media print {
  /* 페이지 크기·여백·축소는 서버(page.pdf)에서 통째로 처리(화면폭 그대로 → 통째 축소).
     여기선 @page 는 최소만. */
  @page { margin: 0; }
  #sidebar, #sidebar-expand, header, .no-print { display: none !important; }
  #content { padding: 0 !important; max-width: none !important; }
  body { background: #fff !important; }
  #layout { display: block !important; }
  .print-flat { box-shadow: none !important; }

  /* 색·배경(차트/게이지/음영) 강제 인쇄 */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  canvas { max-width: 100% !important; height: auto !important; }

  /* 표 가로 스크롤 제거 */
  .overflow-x-auto, .overflow-x-scroll, .overflow-auto { overflow: visible !important; }

  /* 시트 서브탭 숨김, 숨겨진 시트도 펼침 */
  .report-sheet-tabs { display: none !important; }
  .report-sheet.hidden { display: block !important; }

  /* PDF미리보기·상담카드·기간별 시트는 인쇄 제외 */
  .report-sheet[data-sheet-panel="pdfpreview"],
  .report-sheet[data-sheet-panel="cover"],
  .report-sheet[data-sheet-panel="periodic"] { display: none !important; }

  /* 2패스 렌더: 매출만(가로) / 나머지만(세로) 각각 출력 후 병합 */
  body.print-sales-only .report-sheet:not([data-sheet-panel="sales"]) { display: none !important; }
  body.print-rest-only .report-sheet[data-sheet-panel="sales"] { display: none !important; }

  /* 시트마다 새 페이지에서 시작. 시트 내부는 화면 그대로 자연 흐름(필요하면 다음 장으로) */
  .report-sheet { break-inside: auto; }
  .report-sheet + .report-sheet { break-before: page; }

  /* 종소세 인라인 편집칸(노란 배경·점선)은 인쇄에선 일반 셀처럼 */
  [data-tax-edit] { background: transparent !important; outline: none !important; }

  /* 매출표(진료비/수납)만 통째로 유지. 긴 표(비용분석·감가상각)는 제목과 함께 자연 분할 */
  .avoid-break,
  .sales-tables-print > div,
  .sales-tables-print table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 화면 폭 그대로 배치 → reflow(열 재계산/줄바꿈) 방지. 축소는 page.pdf scale 이 담당 */
  #report-doc, #doc { width: 100% !important; max-width: none !important; }
  /* 매출표는 새 페이지에서 시작(그래프 페이지와 분리) */
  .sales-tables-print { break-before: page; }

  /* 필기 레이어: 기본은 인쇄에 포함. 'annot-print-off' 이면 필기 제외(깔끔 출력) */
  .report-annot-toolbar { display: none !important; }
  .annot-print-off .report-annot-canvas { display: none !important; }

  /* 상담카드 벤토 히어로(짙은 네이비 타일) — 인쇄 시 잉크 절약 위해 밝은 카드로 전환 */
  .bento-hero {
    background: #f8fafc !important;          /* slate-50 */
    border: 1px solid #e2e8f0 !important;    /* slate-200 */
  }
  .bento-hero, .bento-hero * { color: #0f172a !important; }        /* slate-900 */
  .bento-hero .bento-hero-accent { color: #4338ca !important; }    /* indigo-700 */
  .bento-hero .bento-hero-muted { color: #64748b !important; }     /* slate-500 */
  .bento-hero .border-white\/10 { border-color: #e2e8f0 !important; }

  /* 거래처 상세의 경비보고서 탭에서 인쇄 시: 보고서 영역(#report-doc)만 출력.
     visibility 로 나머지를 숨기고 문서를 좌상단으로 끌어올림. */
  body.printing-report #layout { visibility: hidden; }
  body.printing-report #report-doc,
  body.printing-report #report-doc * { visibility: visible; }
  body.printing-report #report-doc {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0;
  }

  /* 벤토 공용 컴포넌트 인쇄 안전 — 배경/그림자 제거, 다크 타일은 밝게 반전(잉크 절약) */
  #layout { background: #fff !important; }
  .bento-tile { box-shadow: none !important; break-inside: avoid; }
  .bento-tile--navy {
    background: #f8fafc !important;              /* slate-50 */
    border-color: #e2e8f0 !important;            /* slate-200 */
    color: #0f172a !important;                   /* slate-900 */
  }
  .bento-tile--navy .bento-kpi-label { color: #64748b !important; }
  .bento-tile--navy .bento-kpi-value { color: #0f172a !important; }
  .bento-tile--navy .bento-kpi-sub   { color: #64748b !important; }
}