wing-ops/frontend/src/common/styles/wing.css

/* ═══ WING Design System ═══ */
/* 프로젝트 전체에서 공유하는 공통 컴포넌트 클래스 */

@layer components {
  /* ── Layout ── */
  .wing-panel {
    @apply flex flex-col h-full overflow-hidden;
  }

  .wing-panel-scroll {
    @apply flex-1 overflow-y-auto;
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-light) transparent;
  }

  .wing-header-bar {
    @apply flex items-center justify-between shrink-0 px-5 border-b border-stroke;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .wing-sidebar {
    @apply flex flex-col border-r border-stroke;
    background: var(--bg-surface);
  }

  /* ── Card / Section ── */
  .wing-card {
    @apply rounded-md p-4 border border-stroke;
    background: var(--bg-card);
  }

  .wing-card-sm {
    @apply rounded-sm p-3 border border-stroke;
    background: var(--bg-card);
  }

  .wing-section {
    @apply rounded-md p-4 mb-3 border border-stroke;
    background: var(--bg-card);
  }

  .wing-section-header {
    @apply text-title-4 font-bold font-korean mb-2;
  }

  .wing-section-desc {
    @apply text-caption font-korean leading-relaxed;
    color: var(--fg-disabled);
  }

  /* ── Typography ── */
  .wing-title {
    @apply text-subtitle font-bold font-korean;
  }

  .wing-subtitle {
    @apply text-caption font-korean mt-0.5;
    color: var(--fg-disabled);
  }

  .wing-label {
    @apply text-label-2 font-semibold font-korean;
  }

  .wing-value {
    @apply text-label-2 font-mono font-semibold;
  }

  .wing-meta {
    @apply text-caption font-korean;
    color: var(--fg-disabled);
  }

  /* ── Icon Badge ── */
  .wing-icon-badge {
    @apply w-10 h-10 rounded-md flex items-center justify-center text-lg;
  }

  .wing-icon-badge-sm {
    @apply w-[38px] h-[38px] rounded-[9px] flex items-center justify-center;
  }

  /* ── Badge ── */
  .wing-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-caption font-bold font-korean;
  }

  /* ── Button ── */
  .wing-btn {
    @apply px-3 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer font-korean border-none;
    transition: all 0.15s;
  }

  .wing-btn-primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-info));
    color: #fff;
  }

  .wing-btn-primary:hover {
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.3);
  }

  .wing-btn-secondary {
    @apply border border-stroke;
    background: var(--bg-card);
    color: var(--fg-sub);
  }

  .wing-btn-secondary:hover {
    background: var(--bg-surface-hover);
  }

  .wing-btn-outline {
    @apply bg-transparent border border-stroke;
    color: var(--fg-sub);
  }

  .wing-btn-outline:hover {
    background: var(--bg-surface-hover);
  }

  .wing-btn-pdf {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    color: var(--color-info);
  }

  .wing-btn-danger {
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
  }

  /* ── Input ── */
  .wing-input {
    @apply w-full rounded-sm text-label-2 font-korean outline-none;
    padding: 6px 10px;
    background: var(--bg-base);
    border: 1px solid var(--stroke-default);
    color: var(--fg-default);
  }

  .wing-input:focus {
    border-color: var(--color-accent);
  }

  .wing-input::placeholder {
    color: var(--fg-disabled);
  }

  /* ── Table ── */
  .wing-table {
    @apply w-full text-caption font-korean;
    border-collapse: collapse;
  }

  .wing-th {
    @apply text-left font-semibold;
    padding: 8px 10px;
    color: var(--fg-disabled);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--stroke-default);
  }

  .wing-td {
    padding: 8px 10px;
    color: var(--fg-sub);
    border-bottom: 1px solid var(--stroke-default);
  }

  .wing-tr-hover:hover {
    background: var(--bg-surface-hover);
    cursor: pointer;
  }

  /* ── Tab Bar ── */
  .wing-tab-bar {
    @apply flex gap-0.5 rounded-lg p-1 border border-stroke;
    background: var(--bg-card);
  }

  .wing-tab {
    @apply flex-1 py-2 px-1 text-xs font-semibold rounded-md text-center cursor-pointer font-korean;
    transition: all 0.15s;
    color: var(--fg-disabled);
    background: transparent;
    border: 1px solid transparent;
  }

  .wing-tab:hover {
    color: var(--fg-sub);
  }

  .wing-tab.active {
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.08);
    color: var(--color-accent);
  }

  /* ── Modal ── */
  .wing-overlay {
    @apply fixed inset-0 flex items-center justify-center;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }

  .wing-modal {
    @apply rounded-xl overflow-hidden;
    background: var(--bg-surface);
    border: 1px solid var(--stroke-default);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  .wing-modal-header {
    @apply flex items-center justify-between px-5 border-b border-stroke;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  /* ── Utility ── */
  .wing-divider {
    @apply w-full;
    height: 1px;
    background: var(--stroke-default);
  }

  .wing-kv-row {
    @apply flex items-center justify-between;
    padding: 6px 0;
  }

  .wing-kv-label {
    @apply text-caption font-korean;
    color: var(--fg-disabled);
  }

  .wing-kv-value {
    @apply text-label-2 font-semibold font-mono;
  }
}