body { font-family: 'Inter', 'Noto Sans KR', system-ui, sans-serif; }
.card { background: rgba(15, 23, 42, .85); border: 1px solid rgb(30 41 59); border-radius: 14px; padding: 14px; }
.card-title { font-size: 13px; font-weight: 700; letter-spacing: .01em; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #e2e8f0; }
.sub-title { font-size: 12px; font-weight: 700; color: #cbd5e1; margin-bottom: 6px; }
/* 아코디언 (사이드바) */
details.acc { padding: 0; }
details.acc > summary { list-style: none; cursor: pointer; padding: 11px 14px; margin: 0; user-select: none; border-radius: 14px; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary:hover { background: rgba(30, 41, 59, .6); }
details.acc[open] > summary { border-bottom: 1px solid #1e293b; border-radius: 14px 14px 0 0; }
details.acc > summary .chev { font-size: 10px; color: #64748b; transition: transform .2s; }
details.acc[open] > summary .chev { transform: rotate(180deg); }
details.acc > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.acc > :not(summary):last-child { margin-bottom: 14px; }
details.acc > :not(summary):nth-child(2) { margin-top: 12px; }
.sidebar-scroll { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
/* 탭 */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #1e293b; padding: 6px 8px 0; background: rgba(2, 6, 23, .4); overflow-x: auto; }
.tab { font-size: 12px; font-weight: 600; color: #94a3b8; padding: 8px 14px; border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: none; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tab:hover { color: #e2e8f0; background: rgba(30, 41, 59, .5); }
.tab.active { color: #fbbf24; background: rgba(15, 23, 42, .85); border-color: #1e293b; margin-bottom: -1px; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #94a3b8; }
.field input, .field select { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 6px 8px; color: #f1f5f9; font-size: 13px; outline: none; }
.field input:focus, .field select:focus { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .25); }
.chk { display: flex; align-items: center; gap: 6px; color: #cbd5e1; cursor: pointer; }
.chk input { accent-color: #f59e0b; }
.btn-sm { flex: 1; font-size: 11px; padding: 6px 4px; border-radius: 8px; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
.btn-sm:hover { background: #334155; }
.chip { font-size: 11px; background: rgba(15, 23, 42, .85); border: 1px solid #334155; padding: 3px 9px; border-radius: 999px; color: #e2e8f0; display: inline-flex; gap: 6px; align-items: center; }
.kpi { background: linear-gradient(160deg, #1e293b, #0f172a); border: 1px solid #334155; border-radius: 12px; padding: 10px 12px; }
.kpi .k { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.kpi .v { font-size: 20px; font-weight: 800; margin-top: 2px; line-height: 1.1; }
.kpi .s { font-size: 10px; color: #64748b; margin-top: 2px; }
.kpi.pass { border-color: rgba(34, 197, 94, .6); }
.kpi.fail { border-color: rgba(239, 68, 68, .7); }
input[type=range] { accent-color: #f59e0b; }
table.tbl { width: 100%; font-size: 12px; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 6px 8px; border-bottom: 1px solid #1e293b; text-align: left; }
table.tbl th { color: #94a3b8; font-weight: 600; font-size: 11px; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge.ok { background: rgba(34, 197, 94, .15); color: #4ade80; }
.badge.ng { background: rgba(239, 68, 68, .15); color: #f87171; }
#report-body h3 { font-weight: 700; margin: 14px 0 6px; color: #fbbf24; font-size: 13px; }
#report-body .grid-r { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; font-size: 12px; }
#report-body .grid-r div span:first-child { color: #94a3b8; }
#report-body .grid-r div span:last-child { float: right; font-weight: 600; }

/* =====================================================================
   반응형 (모바일 · 태블릿 · PC) + 모바일 드로어 + 간단/전문 모드
   ===================================================================== */
:root { --hdr: 52px; }
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
#app-header { padding-top: env(safe-area-inset-top); }

/* --- 모드 토글 --- */
#mode-simple, #mode-pro { color: #94a3b8; }
#mode-simple.on, #mode-pro.on { background: #f59e0b; color: #0f172a; }
/* 간단 모드: 전문용 요소 숨김 */
body.simple [data-pro] { display: none !important; }
body.simple .tab[data-pro] { display: none !important; }

/* --- 1279px 이하: 입력 패널을 좌측 드로어로 --- */
@media (max-width: 1279px) {
  #input-panel {
    position: fixed; inset-block: 0; left: 0; z-index: 50;
    width: min(360px, 88vw);
    background: #020617; padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.6);
    transform: translateX(-100%); transition: transform .24s ease;
  }
  body.panel-open #input-panel { transform: translateX(0); }
  body.panel-open { overflow: hidden; }
  /* 드로어 안에서는 카드 여백을 줄임 */
  #input-panel .card { border-radius: 12px; }
}
@media (min-width: 1280px) { #panel-backdrop { display: none !important; } }

/* --- 모바일: 3D/2D 높이와 글자 크기 조정 --- */
@media (max-width: 767px) {
  #three-container { height: 46vh !important; min-height: 260px; }
  .card { padding: 10px; border-radius: 12px; }
  .card-title { font-size: 12px; }
  .kpi { padding: 8px 10px; }
  .kpi .v { font-size: 17px; }
  .kpi .k { font-size: 9px; }
  table.tbl { font-size: 11px; }
  table.tbl th, table.tbl td { padding: 5px 6px; }
  .tab { padding: 7px 10px; font-size: 11px; }
  .field input, .field select { font-size: 16px; }  /* iOS 자동 확대 방지 */
  #legend-3d, #chip-3d-info { display: none; }
  /* 터치 대상 최소 크기 */
  .btn-sm { min-height: 34px; }
  /* 가로 스크롤 표는 스냅 */
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  #three-container { height: 52vh !important; min-height: 360px; }
}
/* 큰 화면에서는 3D를 더 크게 */
@media (min-width: 1536px) {
  #three-container { height: 680px !important; }
}
/* 가로 모드 모바일: 3D 우선 */
@media (max-width: 900px) and (orientation: landscape) {
  #three-container { height: 76vh !important; }
}

/* --- 표가 좁은 화면에서 잘리지 않도록 --- */
.tbl-wrap { overflow-x: auto; }
.tbl-wrap table { min-width: 560px; }

/* --- 설치 안내 배너 --- */
#pwa-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45; }

/* --- 오프라인 표시 --- */
#offline-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 46; }

@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  #input-panel, header nav, footer, #three-card, .tabs, #btn-report-2, #btn-dxf-plan,
  #pj-recalc, #pj-csv-2, #pj-print, #pj-title { display: none !important; }
  /* 계산서 인쇄: 계산서 탭만 (프로젝트 집계 제외) */
  .tab-pane { display: none !important; }
  #tab-report { display: block !important; }
  /* 프로젝트 집계 인쇄: 집계 탭만 */
  body.print-project #tab-report { display: none !important; }
  body.print-project #tab-project { display: block !important; }
  body.print-project #kpi-row, body.print-project #type-compare-card,
  body.print-project #plan-canvas, body.print-project #chart-phase { display: none !important; }
  .card { background: #fff; border-color: #ccc; break-inside: avoid; }
  .card-title, #report-body h3, .sub-title { color: #000 !important; }
  #report-body .grid-r div span, #project-body, #project-body * { color: #000 !important; }
  table.tbl th, table.tbl td { border-bottom: 1px solid #999 !important; }
  table.tbl th { color: #000 !important; background: #eee !important; }
  table.tbl { break-inside: auto; }
  table.tbl tr { break-inside: avoid; }
  .badge.ok { background: #e6f7ec !important; color: #067647 !important; border: 1px solid #067647; }
  .badge.ng { background: #fdecec !important; color: #b42318 !important; border: 1px solid #b42318; }
  #project-body .rounded-lg { background: #f5f5f5 !important; border: 1px solid #ccc; }
  main { display: block; }
}