:root { --primary: #005b9f; --secondary: #64748b; --accent: #00a8e8; --success: #10b981; --danger: #ef4444; --light: #f0f4f8; --border: #e2e8f0; --surface: #ffffff; --super: #8b5cf6; --warning: #f59e0b; --skyblue: #87CEEB; }
body { font-family: 'Pretendard', sans-serif; margin: 0; background-color: var(--light); color: #334155; }
.app-container { max-width: 1200px; margin: 40px auto; background: var(--surface); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid var(--border); min-height: 750px; }
.header { background: var(--primary); color: white; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.view { display: none; padding: 32px; } .view.active { display: block; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; color: white; font-weight: 600; margin-left: 5px; font-size: 14px; transition: 0.2s; display: inline-block; text-decoration: none; }
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-save { background: var(--accent); } .btn-super { background: var(--super); } .btn-danger { background: var(--danger); } .btn-neutral { background: var(--secondary); }

.tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip .tooltiptext { visibility: hidden; width: 140px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -70px; opacity: 0; transition: opacity 0.3s; font-size: 12px; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.admin-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 15px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
      .admin-table th, .admin-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: center; }
      .admin-table th { background: #f8fafc; color: var(--secondary); font-weight: 600; font-size: 12px; }
      .admin-table td { font-size: 12px; }
      .admin-table input { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; width: 100%; box-sizing: border-box; outline: none; }

      .dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }

      /* 모바일 최적화 */
      @media (max-width: 768px) {
          .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
          .stats-grid { grid-template-columns: 1fr !important; gap: 15px; }
          .admin-table { display: block !important; overflow-x: auto !important; width: 100% !important; }
          .admin-table thead, .admin-table tbody, .admin-table tr { display: table !important; width: 100% !important; table-layout: fixed !important; }
          .admin-table th, .admin-table td { padding: 8px 4px !important; font-size: 11px !important; word-break: break-all !important; }
          .btn { padding: 6px 8px !important; font-size: 10px !important; }
      }
.super-card { background: white; padding: 24px; border-radius: 12px; border: 1px solid var(--border); border-left: 8px solid var(--primary); box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.super-card-title { font-size: 13px; font-weight: 700; color: var(--secondary); margin-bottom: 8px; }
.super-card-value { font-size: 24px; font-weight: 900; color: var(--primary); }

.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab-item { padding: 12px 24px; cursor: pointer; font-weight: 600; color: var(--secondary); border-bottom: 3px solid transparent; }
.tab-item.active { color: var(--primary); border-bottom: 3px solid var(--primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.login-box { max-width: 380px; margin: 80px auto; padding: 40px; border: 1px solid var(--border); border-radius: 16px; text-align: center; background: white; box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
.login-box h3 { margin: 0; margin-bottom: 25px; font-size: 24px; color: var(--skyblue); font-weight: 800; }
.login-box input, .login-box select { width: 100%; padding: 14px; margin: 10px 0; border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; font-size: 15px; }

.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding:20px; }
.modal-content { background: white; padding: 32px; border-radius: 12px; width: 750px; max-height: 90vh; overflow-y: auto; position: relative; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { font-weight: 600; font-size: 14px; margin-bottom: 5px; display: block; }
.modal-content input, .modal-content textarea, .modal-content select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }

.invoice-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; }
.chart-container { background: white; padding: 24px; border-radius: 12px; border: 1px solid var(--border); }

.invoice-preview { background: white; padding: 40px; border: 1px solid #eee; font-family: 'Pretendard', sans-serif; }
.preview-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.preview-table th, .preview-table td { border: 1px solid #333; padding: 10px; text-align: center; font-size: 14px; }
/* Badge Styles */
.badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: white; display: inline-block; }
.badge-unit { background: #38bdf8; } /* 단가제 */
.badge-fixed { background: #8b5cf6; } /* 정액제 */

/* Management Button Styles */
.btn-mng { padding: 4px 8px; font-size: 11px; border-radius: 4px; border: none; cursor: pointer; color: white; margin: 2px; }
.btn-info { background: #64748b; } /* 정보수정 */
.btn-price { background: #0ea5e9; } /* 단가수정 */
.btn-del { background: #ef4444; } /* 삭제 */

.rank-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rank-num { width: 30px; font-weight: 900; color: var(--primary); font-size: 18px; }
.rank-name { flex: 1; font-weight: 600; }
.rank-value { font-weight: 700; color: var(--success); }
.growth-up { color: var(--danger); font-weight: 800; font-size: 12px; }
.growth-down { color: var(--primary); font-weight: 800; font-size: 12px; }
/* 모바일 최적화 */
@media (max-width: 768px) {
  .app-container { width: 95% !important; margin: 10px auto !important; min-height: auto !important; }
  .header { padding: 12px 16px !important; }
  .dashboard-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .super-card { padding: 15px !important; }
  .super-card-value { font-size: 18px !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .modal-content { width: 95% !important; padding: 15px !important; }

  .tabs { flex-wrap: wrap !important; gap: 5px !important; }
  .tab-item { padding: 8px 12px !important; font-size: 12px !important; }

  /* 관리 테이블 버튼 최적화 */
  .admin-table .btn { padding: 3px 6px !important; font-size: 10px !important; }
  /* 거래처 설정 탭 내 상단 버튼 최적화 */
  #tab_adminHotel .btn { padding: 6px 10px !important; font-size: 12px !important; }
  .invoice-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 10px !important; }
  #staffHotelSelect, #invoiceDate { width: 100% !important; box-sizing: border-box !important; font-size: 14px !important; }
}
@media (max-width: 480px) {
  /* 모바일 최적화 추가 */
  @media (max-width: 768px) {
      .dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
      .stats-grid { grid-template-columns: 1fr !important; gap: 15px; }
      .chart-container { padding: 15px !important; }
      .admin-table th, .admin-table td { padding: 8px 4px !important; font-size: 11px !important; }
      .btn { padding: 6px 10px !important; font-size: 11px !important; }
      /* 모바일 조회 영역 세로 정렬 */
      .stats-header, .stats-header > div { flex-direction: column !important; align-items: flex-start !important; }
      input[type="month"] { width: 100% !important; }
  }
}
.error-msg { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.modal-content input.error { border-color: var(--danger); background-color: #fff5f5; }