/* ===========================
   components.css
   (Card / Form / Table / Button)
=========================== */

/* ========= Card ========= */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.card-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/* ========= Form ========= */
.form-section {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.form-group {
  margin-bottom: 16px;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  font-size: 14px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ========= Button ========= */
.save-btn,
.excel-btn,
.bu-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn:hover,
.bu-btn:hover {
  background: var(--color-primary-dark);
}

.small {
  padding: 6px 12px;
  font-size: 13px;
}

.excel-btn {
  background: #475569;
}

/* ========= Table ========= */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 10px;
  border: 1px solid var(--color-border);
  text-align: left;
}

th {
  background: #e2e8f0;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f8fafc;
}

/* ========= Row Header ========= */
.row-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* ========= Utility ========= */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.page-layout {display:flex;gap:24px;}
.left-form {flex:0 0 40%;}
.right-cards.two-cols {flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.menu-item.active {
  background:#2563eb;
  color:#fff;
  font-weight:600;
  border-radius:8px;
}
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.btn-group button{
  margin-left:6px;
}
.selected-row{
  background:#e2e8f0;
}

.page-layout{
  display:flex;
  gap:32px;
}

.card{
  width:48%;
}
.dataTable{
  display:block;
  max-height:400px;
  overflow-y:auto;
}
/* =========== 카드 2단 레이아웃 =========== */
.page-layout {
  display: flex;
  gap: 32px;
}
.page-layout .card {
  flex: 2;
}


/* =========== 카드 공통 =========== */
.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========== 버튼 그룹 =========== */
.btn-group button {
  margin-left: 6px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.btn-group button:hover {
  background: #1e40af;
}

/* =========== 테이블 =========== */
.dataTable {
  width: 100%;
  border-collapse: collapse;
  display: block;
  max-height: 400px;
  overflow-y: auto;
}

.dataTable thead th {
  background: #f1f5f9;
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  position: sticky;
  top: 0;
}

.dataTable tbody td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}

/* 선택된 행 */
.selected-row {
  background: #e2e8f0;
}