/* components.css */
/* tokens.css를 먼저 import 한다는 전제 */

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  /* 상단 헤더 (지자체 서비스 느낌) */
  .app-header {
    background: linear-gradient(
      135deg,
      var(--color-primary-deep),
      var(--color-primary-mid)
    );
    color: #fff;
    padding: var(--space-12) var(--space-24);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-soft);
  }
  
  .app-header__title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    font-weight: 600;
  }
  
  .app-header__subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin-top: var(--space-4);
  }
  
  .app-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }
  
  /* 전체 레이아웃 (컨텐츠 영역) */
  .app-main {
    flex: 1;
    display: flex;
    gap: var(--space-24);
    padding: var(--space-24);
  }
  
  /* 좌측 필터/메뉴 패널 */
  .panel {
    width: 280px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    border: 1px solid var(--color-border-subtle);
  }
  
  /* 우측 컨텐츠 영역 */
  .content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }
  
  /* 카드 */
  .card {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-20);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--color-border-subtle);
  }
  
  .card--flat {
    box-shadow: none;
  }
  
  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-12);
  }
  
  .card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-strong);
  }
  
  .card__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }
  
  /* 버튼 */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-16);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
      box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    white-space: nowrap;
  }
  
  .btn:active {
    transform: translateY(1px);
  }
  
  .btn--primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
  }
  
  .btn--primary:hover {
    background-color: #37976f;
  }
  
  .btn--ghost {
    background-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.7);
  }
  
  .btn--ghost:hover {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  .btn--outline {
    background-color: transparent;
    color: var(--color-primary-mid);
    border-color: var(--color-primary-mid);
  }
  
  .btn--outline:hover {
    background-color: rgba(16, 85, 201, 0.04);
  }
  
  .btn--sm {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-size-xs);
  }
  
  .btn--lg {
    padding: var(--space-12) var(--space-24);
    font-size: var(--font-size-md);
  }
  
  /* 뱃지 / 라벨 */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background-color: rgba(16, 85, 201, 0.08);
    color: var(--color-primary-mid);
  }
  
  .badge--accent {
    background-color: rgba(229, 201, 95, 0.15);
    color: #8a6a1d;
  }
  
  .badge--soft {
    background-color: var(--color-bg-soft);
    color: var(--color-text-muted);
  }
  
  /* 탭 (상단 카테고리용) */
  .tabs {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-soft);
    border: 1px solid var(--color-border-subtle);
  }
  
  .tabs__item {
    padding: 6px 16px;
    font-size: var(--font-size-sm);
    border-radius: var(--radius-full);
    cursor: pointer;
    color: var(--color-text-muted);
  }
  
  .tabs__item--active {
    background-color: #ffffff;
    color: var(--color-primary-mid);
    box-shadow: var(--shadow-soft);
  }
  
  /* 폼 요소 */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .field__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 600;
  }
  
  .input,
  .select {
    width: 100%;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background-color: #ffffff;
    font-size: var(--font-size-sm);
    color: var(--color-text-body);
    outline: none;
  }
  
  .input:focus,
  .select:focus {
    border-color: var(--color-primary-mid);
    box-shadow: 0 0 0 1px rgba(16, 85, 201, 0.1);
  }
  
  /* 테이블 (게시판/목록) */
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    background-color: #ffffff;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
  }
  
  .table thead {
    background-color: var(--color-bg-soft);
  }
  
  .table th,
  .table td {
    padding: var(--space-8) var(--space-12);
    text-align: left;
    border-bottom: 1px solid var(--color-border-subtle);
    white-space: nowrap;
  }
  
  .table th {
    font-weight: 600;
    color: var(--color-text-muted);
  }
  
  .table tbody tr:hover {
    background-color: rgba(16, 85, 201, 0.02);
  }
  
  /* 작은 통계 박스 */
  .kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
  }
  
  .kpi {
    flex: 1;
    min-width: 180px;
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border-subtle);
  }
  
  .kpi__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
  }
  
  .kpi__value {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-strong);
  }
  
  /* 반응형 */
  @media (max-width: 900px) {
    .app-main {
      flex-direction: column;
    }
  
    .panel {
      width: 100%;
      order: 2;
    }
  
    .content {
      order: 1;
    }
  }