/* ============================================================ Pandora Intelligence — Design System Foundation docs/design_system.md 표준의 구현: 공유 토큰(타이포/radius) + 재사용 컴포넌트 클래스. 가산적(additive): 기존 마크업에 영향 없음. 마이그레이션 시 이 클래스로 교체한다. 색 토큰은 아래에 정의(공유 소스 역할). app.css :root 와 동일 값 — 추후 tokens.css 로 단일화 예정(현재 app.css/share 페이지 호환 위해 중복 허용). ============================================================ */ /* ── 컬러 토큰 (app·admin·공유 공통; admin 은 사용) ── */ :root { --bg-base:#030712; --bg-surf:#111827; --bg-elev:#1f2937; --bd:#1f2937; --bd-sub:#374151; --t1:#f3f4f6; --t2:#d1d5db; --t3:#9ca3af; --t4:#6b7280; --c-accent:#818cf8; --c-busy:#f87171; --c-done:#34d399; } html[data-theme="light"] { --bg-base:#f8fafc; --bg-surf:#ffffff; --bg-elev:#f1f5f9; --bd:#e2e8f0; --bd-sub:#cbd5e1; --t1:#0f172a; --t2:#334155; --t3:#64748b; --t4:#94a3b8; --c-accent:#6366f1; --c-busy:#dc2626; --c-done:#16a34a; } /* ── 타이포 스케일 (rem → 사용자 글자확대의 토대, §2.2) ── */ :root { --text-xs: 0.75rem; /* 12px — 마이크로 UI·뱃지·캡션 */ --text-sm: 0.8125rem; /* 13px — 보조 텍스트·테이블·칩 */ --text-base:0.875rem; /* 14px — 기본 본문·폼·버튼 */ --text-md: 1rem; /* 16px — prose 본문·h3 */ --text-lg: 1.125rem; /* 18px — h2·모달 제목 */ --text-xl: 1.25rem; /* 20px — h1 */ --text-2xl: 1.5rem; /* 24px — 페이지 타이틀 */ --lh-tight: 1.3; --lh-normal: 1.5; --lh-loose: 1.7; /* ── Radius (§2.3) ── */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; } /* ── 글자 크기 스케일 (저시력 접근성, §2.9·A4) — 루트 폰트크기로 rem 전체 확대 ── */ /* 기본(md)=100%(16px). rem 기반(Tailwind text-*·--text-*)이 함께 커진다. */ html[data-fontscale="lg"] { font-size: 112.5%; } /* 18px */ html[data-fontscale="xl"] { font-size: 125%; } /* 20px */ /* ── 버튼: .btn + 변형 4 × 사이즈 3 (§2.4) ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid transparent; border-radius: var(--r-md); transition: background .15s, border-color .15s, color .15s, filter .15s; } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn-sm { height: 32px; padding: 0 12px; font-size: var(--text-sm); border-radius: var(--r-sm); } .btn-md { height: 40px; padding: 0 16px; font-size: var(--text-base); } .btn-lg { height: 48px; padding: 0 20px; font-size: var(--text-md); } .btn-primary { background: var(--c-accent); color: #fff; } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-secondary { background: transparent; border-color: var(--bd-sub); color: var(--t2); } .btn-secondary:hover:not(:disabled) { border-color: var(--t4); color: var(--t1); } .btn-ghost { background: transparent; color: var(--t3); } .btn-ghost:hover:not(:disabled) { color: var(--t1); background: var(--bg-elev); } .btn-danger { background: #dc2626; color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); } /* ── 폼 컨트롤: input · select · textarea (§2.5) ── */ .form-input, .form-select, .form-textarea { width: 100%; min-height: 40px; background: var(--bg-elev); border: 1px solid var(--bd-sub); border-radius: var(--r-sm); padding: 0 12px; color: var(--t1); font-family: inherit; font-size: var(--text-base); outline: none; transition: border-color .15s, box-shadow .15s; } .form-textarea { min-height: auto; padding: 9px 12px; resize: vertical; line-height: var(--lh-normal); } .form-input::placeholder, .form-textarea::placeholder { color: var(--t4); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); } .form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: .6; cursor: not-allowed; } .form-select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* ── 목록: 활성 행 · hover (§2.7) ── */ .row-active { background: rgba(129,140,248,0.18); color: #c7d2fe; font-weight: 600; box-shadow: inset 3px 0 0 var(--c-accent); border-radius: var(--r-sm); } html[data-theme="light"] .row-active { background: #e0e7ff; color: #3730a3; box-shadow: inset 3px 0 0 #4338ca; } .row-hover:hover:not(.row-active) { background: var(--bg-elev); transition: background .12s; } /* ── 아이콘 액션 버튼 (§2.8) ── */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--t4); border-radius: var(--r-sm); cursor: pointer; transition: color .15s, background .15s; } .icon-btn:hover { color: var(--t1); background: var(--bg-elev); } .icon-btn-danger:hover { color: var(--c-busy); } /* ── 토글 스위치 — (§2.8) ── */ .toggle-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill); background: var(--bd-sub); cursor: pointer; transition: background .15s; } .toggle-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; } .toggle-switch:checked { background: var(--c-accent); } .toggle-switch:checked::after { left: 18px; } .toggle-switch:disabled { opacity: .5; cursor: not-allowed; } /* ── 넓은 목록/테이블 가로 스크롤 래퍼 (§2.7) ── */ .table-scroll-wrapper { overflow-x: auto; border: 1px solid var(--bd); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; } /* ── 모달 헬퍼 — 캐노니컬 스펙 (§2.6) ── */ .modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.6); } .modal-panel { display: flex; flex-direction: column; width: 100%; max-height: 92vh; overflow: hidden; background: var(--bg-surf); border: 1px solid var(--bd); border-radius: var(--r-lg); box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--bd); flex: none; } .modal-head .modal-title, .modal-head h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--t1); } .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 24px; } .modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--bd); flex: none; }