/* ============================================================ EVA Design System — Toss 기반 테마 레이어 - argon-dashboard-tailwind.css / index.css 이후에 로드되어 우선한다. - 다크모드: Argon 과 동일하게 .dark 클래스 전략. - 토큰(:root / .dark) → 컴포넌트 → 기존 Argon 유틸 조합 오버라이드 순. ============================================================ */ :root { --eva-bg: #eef1f5; --eva-surface: #ffffff; --eva-surface-2: #f7f9fb; --eva-sidebar: #ffffff; --eva-border: #e6e9ed; --eva-border-strong: #d4d9df; --eva-divider: #eef1f4; --eva-text: #191f28; --eva-text-2: #454f5d; --eva-text-3: #6b7684; --eva-text-4: #8b95a1; --eva-placeholder: #b0b8c1; --eva-accent: #3182f6; --eva-accent-hover: #2272eb; --eva-accent-press: #1b64da; --eva-accent-weak: #e8f3ff; --eva-accent-weak-2: #d6e9ff; --eva-accent-text: #1b64da; --eva-ok: #03b26c; --eva-ok-bg: #e6f7ef; --eva-ok-text: #067a4c; --eva-warn: #fe9800; --eva-warn-bg: #fff2e0; --eva-warn-text: #b96b00; --eva-danger: #f04452; --eva-danger-bg: #fdeaec; --eva-danger-text: #cf2e3c; --eva-info: #18a5a5; --eva-info-bg: #e2f4f4; --eva-info-text: #0d7676; --eva-purple: #a234c7; --eva-purple-bg: #f6e7fb; --eva-purple-text: #85269f; --eva-shadow-1: 0 1px 2px rgba(23,31,40,.06), 0 1px 3px rgba(23,31,40,.04); --eva-shadow-2: 0 2px 8px rgba(23,31,40,.07), 0 1px 2px rgba(23,31,40,.04); --eva-shadow-3: 0 12px 32px rgba(23,31,40,.14), 0 4px 8px rgba(23,31,40,.06); --eva-r-xs: 6px; --eva-r-sm: 8px; --eva-r-md: 12px; --eva-r-lg: 16px; --eva-r-pill: 999px; --eva-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif; } html.dark { --eva-bg: #141619; --eva-surface: #1d2027; --eva-surface-2: #23272f; --eva-sidebar: #191c22; --eva-border: rgba(255,255,255,.09); --eva-border-strong: rgba(255,255,255,.16); --eva-divider: rgba(255,255,255,.06); --eva-text: #eef1f5; --eva-text-2: #c4cbd4; --eva-text-3: #99a1ac; --eva-text-4: #7a828d; --eva-placeholder: #6a717b; --eva-accent: #4a91f7; --eva-accent-hover: #6aa5f9; --eva-accent-press: #3182f6; --eva-accent-weak: rgba(74,145,247,.16); --eva-accent-weak-2: rgba(74,145,247,.26); --eva-accent-text: #8fbcfb; --eva-ok: #2ecb8b; --eva-ok-bg: rgba(3,178,108,.15); --eva-ok-text: #4fd6a0; --eva-warn: #ffab33; --eva-warn-bg: rgba(254,152,0,.15); --eva-warn-text: #ffb857; --eva-danger: #ff5b67; --eva-danger-bg: rgba(240,68,82,.16); --eva-danger-text: #ff8892; --eva-info: #35c2c2; --eva-info-bg: rgba(24,165,165,.16); --eva-info-text: #5bd4d4; --eva-purple: #c064e0; --eva-purple-bg: rgba(162,52,199,.18); --eva-purple-text: #d18ee8; --eva-shadow-1: 0 1px 2px rgba(0,0,0,.4); --eva-shadow-2: 0 2px 10px rgba(0,0,0,.45); --eva-shadow-3: 0 16px 40px rgba(0,0,0,.6); } /* ---------- base ---------- */ html { font-family: var(--eva-font); } /* Argon 의 .font-sans(Open Sans) 가 Pretendard 를 덮어쓰지 못하도록 강제한다. (body 에 font-sans 클래스가 붙어 있어 한글이 못난 폴백 폰트로 렌더되던 문제) */ body, .font-sans, body.font-sans { font-family: var(--eva-font) !important; color: var(--eva-text-2); font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased; } body.bg-gray-50 { background-color: var(--eva-bg); } html.dark .dark\:bg-slate-900 { background-color: var(--eva-bg); } h1, h2, h3, h4, h5, h6 { color: var(--eva-text); } .tnum, .eva-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* 키보드 포커스 가시성 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--eva-accent); outline-offset: 2px; border-radius: var(--eva-r-xs); } /* Argon 상단 파란 배너 제거 — 차분한 배경으로 대체 */ .min-h-75.bg-blue-500 { display: none !important; } /* ============================================================ 레이아웃 셸 ============================================================ */ /* 사이드바 (aside) — 흰 패널, 정돈된 네비 */ aside { background-color: var(--eva-sidebar) !important; border: 1px solid var(--eva-border); box-shadow: var(--eva-shadow-2) !important; border-radius: var(--eva-r-lg) !important; } html.dark aside { box-shadow: none !important; } aside hr { display: none; } .eva-brand { display: flex; align-items: center; gap: 10px; } .eva-brand-logo { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--eva-accent), #6aa5f9); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 2px 6px rgba(49,130,246,.35); } .eva-brand-name { font-weight: 700; color: var(--eva-text); font-size: 16px; letter-spacing: -.2px; line-height: 1.15; } .eva-brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--eva-text-3); letter-spacing: .2px; } .eva-sidenav-close { position: absolute; top: 10px; right: 10px; padding: 7px; color: var(--eva-text-4); background: transparent; border: 0; cursor: pointer; border-radius: 8px; line-height: 0; } .eva-sidenav-close:hover { background: var(--eva-surface-2); color: var(--eva-text); } /* 네비 항목 — 마크업의 .nav-item 을 재정의 */ aside .nav-item { display: flex; align-items: center; gap: 10px; margin: 1px 8px; padding: 9px 12px; border-radius: var(--eva-r-md); color: var(--eva-text-2) !important; opacity: 1 !important; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .13s, color .13s; position: relative; } aside .nav-item > div:first-child { /* 아이콘 칩 */ width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--eva-surface-2) !important; display: grid; place-items: center; margin: 0 !important; } aside .nav-item > div:first-child i { color: var(--eva-text-3) !important; font-size: 13px !important; top: 0 !important; } aside .nav-item:hover { background: var(--eva-surface-2); color: var(--eva-text) !important; } aside .nav-item.is-active { background: var(--eva-accent-weak); color: var(--eva-accent-text) !important; font-weight: 700; } aside .nav-item.is-active > div:first-child { background: var(--eva-accent) !important; } aside .nav-item.is-active > div:first-child i { color: #fff !important; } aside .nav-item.is-active::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: var(--eva-accent); border-radius: 0 3px 3px 0; } /* 로톡 서브메뉴 */ #lawTalkSubmenu { margin: 2px 8px 2px 26px; padding-left: 12px; border-left: 1px solid var(--eva-border) !important; gap: 1px; } #lawTalkSubmenu .nav-item { margin: 0; padding: 7px 10px; font-size: 13px; font-weight: 500; } #lawTalkSubmenu .nav-item > span:first-child { display: none; } /* 기존 "-" 마커 제거 */ #lawTalkSubmenu .nav-item > div { width: 22px !important; height: 22px !important; border-radius: 7px; } #lawTalkSubmenu .nav-item > div i { font-size: 11px !important; } #lawTalkSubmenu .nav-item.is-active { background: var(--eva-accent-weak); } aside .nav-item[data-path="/law-talk"] { cursor: default; } aside .nav-item[data-path="/law-talk"]:hover { background: transparent; } /* 섹션 라벨 */ aside h6 { color: var(--eva-text-3) !important; opacity: 1 !important; font-size: 11px; font-weight: 700; letter-spacing: .5px; } /* 사이드바 하단 도움말 카드 */ aside .rounded-2xl img { display: none; } aside a[target="_blank"] { background: var(--eva-surface-2) !important; color: var(--eva-text-2) !important; border: 1px solid var(--eva-border); box-shadow: none !important; border-radius: var(--eva-r-md) !important; font-weight: 600 !important; } aside a[target="_blank"]:hover { background: var(--eva-bg) !important; } /* 헤더 바 */ /* 헤더 바 — 콘텐츠(px-6)와 좌우 정렬하여 사이드바를 침범하지 않도록 패딩 부여 */ nav[navbar-main] { margin: 0 !important; padding: 14px 24px 4px !important; } .eva-topbar { display: flex; align-items: center; gap: 12px; width: 100%; } .eva-crumb { font-size: 12px; color: var(--eva-text-3); font-weight: 600; } #page-title { color: var(--eva-text) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.3px; } /* 헤더 아이콘 버튼(테마 토글) */ .eva-icon-btn { width: 38px; height: 38px; border-radius: var(--eva-r-md); border: 1px solid var(--eva-border); background: var(--eva-surface); color: var(--eva-text-2); display: inline-grid; place-items: center; font-size: 15px; transition: .14s; cursor: pointer; } .eva-icon-btn:hover { border-color: var(--eva-border-strong); color: var(--eva-text); } .theme-ic-dark { display: none; } html.dark .theme-ic-light { display: none; } html.dark .theme-ic-dark { display: inline; } /* 로그아웃 버튼 — 요란한 빨강 대신 차분한 보조 버튼 */ #logoutButton, .eva-logout { display: inline-flex !important; align-items: center; gap: 6px; background: var(--eva-surface) !important; color: var(--eva-text-2) !important; border: 1px solid var(--eva-border-strong) !important; box-shadow: none !important; font-weight: 600 !important; font-size: 14px; border-radius: var(--eva-r-md) !important; padding: 8px 14px !important; cursor: pointer; } #logoutButton:hover { background: var(--eva-surface-2) !important; color: var(--eva-danger-text) !important; border-color: var(--eva-danger) !important; } /* 모바일 햄버거 — xl 미만에서만 표시 */ .eva-hamburger { display: none; width: 38px; height: 38px; border-radius: var(--eva-r-md); border: 1px solid var(--eva-border); background: var(--eva-surface); place-items: center; flex: none; } @media (max-width: 1279.98px) { .eva-hamburger { display: grid; } } .eva-hamburger .w-4\.5 { width: 18px; } nav[navbar-main] [sidenav-trigger] i { background-color: var(--eva-text-2) !important; } /* ============================================================ 카드 — 범용 조합 (bg-white ... shadow-xl ... rounded-2xl) 재정의 ============================================================ */ .bg-white.rounded-2xl, .bg-white.rounded-xl { background-color: var(--eva-surface); border: 1px solid var(--eva-border); } .shadow-xl { box-shadow: var(--eva-shadow-2) !important; } html.dark .dark\:shadow-dark-xl { box-shadow: none !important; } html.dark .dark\:bg-slate-850 { background-color: var(--eva-surface) !important; border-color: var(--eva-border); } html.dark .dark\:bg-gray-950 { background-color: var(--eva-surface) !important; } .rounded-2xl { border-radius: var(--eva-r-lg) !important; } /* KPI 숫자 강조 (h5 in KPI cards) */ .flex-auto h5.font-bold { font-size: 28px; letter-spacing: -.8px; color: var(--eva-text); font-variant-numeric: tabular-nums; } /* KPI 아이콘 원 → 톤다운 tinted 사각 */ .rounded-circle.bg-gradient-to-tl { border-radius: var(--eva-r-md) !important; background: var(--eva-accent-weak) !important; } .rounded-circle.bg-gradient-to-tl i { color: var(--eva-accent) !important; } /* ============================================================ 버튼 — Argon bg-blue-500 조합 재매핑 + 시맨틱 버튼 색 통일 ============================================================ */ .bg-blue-500 { background-color: var(--eva-accent) !important; } .hover\:bg-blue-600:hover, .bg-blue-600 { background-color: var(--eva-accent-hover) !important; } .border-blue-500 { border-color: var(--eva-accent) !important; } .hover\:border-blue-600:hover { border-color: var(--eva-accent-hover) !important; } .text-blue-500, .text-blue-600, .text-blue-700 { color: var(--eva-accent-text) !important; } .rounded-lg { border-radius: var(--eva-r-md) !important; } /* 시맨틱 tinted 버튼(라이트/다크 공통) — 변호사검토/AI검토 일괄 액션 */ .bg-green-100 { background-color: var(--eva-ok-bg) !important; } .text-green-700 { color: var(--eva-ok-text) !important; } .border-green-300 { border-color: transparent !important; } .hover\:bg-green-200:hover { background-color: var(--eva-ok-bg) !important; filter: brightness(.96); } .bg-red-100 { background-color: var(--eva-danger-bg) !important; } .text-red-700 { color: var(--eva-danger-text) !important; } .border-red-300 { border-color: transparent !important; } .hover\:bg-red-200:hover { background-color: var(--eva-danger-bg) !important; filter: brightness(.96); } .bg-orange-100 { background-color: var(--eva-warn-bg) !important; } .text-orange-700 { color: var(--eva-warn-text) !important; } .border-orange-300 { border-color: transparent !important; } .hover\:bg-orange-200:hover { background-color: var(--eva-warn-bg) !important; filter: brightness(.96); } /* ============================================================ 입력 / 포커스 ============================================================ */ input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], textarea, select { border-radius: var(--eva-r-md); } input:focus, textarea:focus, select:focus { border-color: var(--eva-accent) !important; box-shadow: 0 0 0 3px var(--eva-accent-weak) !important; outline: none; } input::placeholder, textarea::placeholder { color: var(--eva-placeholder); opacity: 1; } .focus\:ring-blue-500:focus { --tw-ring-color: var(--eva-accent) !important; } html.dark .dark\:bg-slate-700 { background-color: var(--eva-surface-2) !important; } html.dark .dark\:border-slate-600 { border-color: var(--eva-border-strong) !important; } /* ============================================================ 상태 필터 칩 (bg-{c}-50 text-{c}-700 border-{c}-200 패턴) ============================================================ */ [data-status-filter], [data-approval-status-filter], [data-moderation-status-filter] { border-radius: var(--eva-r-pill) !important; background: var(--eva-surface) !important; border: 1px solid var(--eva-border-strong) !important; color: var(--eva-text-3) !important; box-shadow: none !important; transition: .13s; } [data-status-filter]:hover, [data-approval-status-filter]:hover, [data-moderation-status-filter]:hover { border-color: var(--eva-accent) !important; color: var(--eva-accent-text) !important; background: var(--eva-surface) !important; } [data-status-filter].eva-chip-on, [data-approval-status-filter].eva-chip-on, [data-moderation-status-filter].eva-chip-on { background: var(--eva-accent) !important; border-color: var(--eva-accent) !important; color: #fff !important; } /* 정렬 버튼(오래된순/최신순) */ [data-sort-direction] { border-radius: var(--eva-r-md) !important; } /* ============================================================ 테이블 — JS 가 채우는 tbody 포함 ============================================================ */ #generateTaskTableBody tr, #approvalTaskTableBody tr, #recent-tasks-table tbody tr { transition: background .12s; } #generateTaskTableBody tr:hover, #approvalTaskTableBody tr:hover, #recent-tasks-table tbody tr:hover { background: var(--eva-surface-2); transform: none; } #generateTaskTableBody td, #approvalTaskTableBody td { border-bottom: 1px solid var(--eva-divider) !important; color: var(--eva-text-2); } table thead th { color: var(--eva-text-4) !important; } table thead th { border-color: var(--eva-border) !important; } /* 페이지네이션 */ #generatePageNumbers a, #approvalPageNumbers a, [id$="PageNumbers"] a, [id$="PageNumbers"] button { min-width: 34px; height: 34px; border-radius: var(--eva-r-sm); display: inline-grid; place-items: center; font-weight: 600; color: var(--eva-text-3); border: 1px solid transparent; transition: .12s; } [id$="PageNumbers"] a:hover, [id$="PageNumbers"] button:hover { background: var(--eva-surface-2); } [id$="PageNumbers"] .active, [id$="PageNumbers"] a.active, [id$="PageNumbers"] .eva-page-on { background: var(--eva-accent) !important; color: #fff !important; } /* ============================================================ 탭 (ai-instruction 의 .context-tab 세그먼트) ============================================================ */ .context-tab { border-radius: var(--eva-r-sm) !important; color: var(--eva-text-3) !important; box-shadow: none !important; transform: none !important; } .context-tab.active-answer, .context-tab.active-moderation { background: var(--eva-surface) !important; color: var(--eva-accent-text) !important; box-shadow: var(--eva-shadow-1) !important; } /* ============================================================ 공용 컴포넌트 클래스 (JS 생성 마크업에서 재사용 — 그라데이션/인라인 hex 대체) ============================================================ */ /* 아이콘 tint 칩 (bg-gradient-to-br Argon 잔재 대체, 다크 자동) */ .eva-tint-ok { background: var(--eva-ok-bg); color: var(--eva-ok-text); } .eva-tint-danger { background: var(--eva-danger-bg); color: var(--eva-danger-text); } .eva-tint-warn { background: var(--eva-warn-bg); color: var(--eva-warn-text); } .eva-tint-accent { background: var(--eva-accent-weak); color: var(--eva-accent-text); } .eva-tint-purple { background: var(--eva-purple-bg); color: var(--eva-purple-text); } .eva-tint-info { background: var(--eva-info-bg); color: var(--eva-info-text); } /* 공용 버튼 3종 + 시맨틱 */ .eva-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--eva-r-md); border: 1px solid transparent; cursor: pointer; transition: .14s; white-space: nowrap; line-height: 1.2; } .eva-btn:active { transform: scale(.97); } .eva-btn-primary { background: var(--eva-accent); color: #fff; } .eva-btn-primary:hover { background: var(--eva-accent-hover); } .eva-btn-secondary { background: var(--eva-surface); color: var(--eva-text-2); border-color: var(--eva-border-strong); } .eva-btn-secondary:hover { background: var(--eva-surface-2); border-color: var(--eva-text-4); } .eva-btn-danger { background: var(--eva-danger); color: #fff; } .eva-btn-danger:hover { filter: brightness(.94); } .eva-btn-ok { background: var(--eva-ok-bg); color: var(--eva-ok-text); } .eva-btn-ok:hover { filter: brightness(.97); } .eva-btn-warn { background: var(--eva-warn-bg); color: var(--eva-warn-text); } .eva-btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--eva-r-sm); } /* 인라인 상태 토스트/메시지 (하드코딩 hex 대체, 다크 자동) */ .eva-toast { border-radius: var(--eva-r-md); padding: 10px 14px; font-size: 14px; font-weight: 600; border: 1px solid transparent; } .eva-toast-success { background: var(--eva-ok-bg); color: var(--eva-ok-text); } .eva-toast-error { background: var(--eva-danger-bg); color: var(--eva-danger-text); } .eva-toast-warn { background: var(--eva-warn-bg); color: var(--eva-warn-text); } /* ============================================================ 커스텀 스크롤바 ============================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--eva-border-strong) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--eva-border-strong); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ AUTO PILOT 동작 시간대 — 24시간 클릭 타임라인 ============================================================ */ .eva-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .eva-tl-quick { display: flex; gap: 6px; flex-wrap: wrap; } .eva-tl-qbtn { font-size: 12px; font-weight: 600; color: var(--eva-text-3); background: var(--eva-surface); border: 1px solid var(--eva-border-strong); border-radius: var(--eva-r-pill); padding: 5px 12px; cursor: pointer; transition: .13s; } .eva-tl-qbtn:hover { border-color: var(--eva-accent); color: var(--eva-accent-text); } .eva-timeline { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; max-width: 100%; } .eva-hour { height: 40px; border: 0; border-radius: 7px; padding: 0; min-width: 0; background: var(--eva-surface-2); color: var(--eva-text-4); font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .08s; font-variant-numeric: tabular-nums; } .eva-hour:hover { box-shadow: inset 0 0 0 2px var(--eva-accent); } .eva-hour:active { transform: scale(.9); } .eva-hour.is-on { background: var(--eva-ok); color: #fff; } .eva-tl-ruler { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 2px; font-size: 11px; color: var(--eva-text-4); font-variant-numeric: tabular-nums; } .eva-tl-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .eva-sum { font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: var(--eva-r-pill); } .eva-sum-on { background: var(--eva-ok-bg); color: var(--eva-ok-text); } .eva-sum-off { background: var(--eva-surface-2); color: var(--eva-text-3); } @media (max-width: 640px) { .eva-offcard { padding: 16px !important; } /* 헤더: 제목/일괄버튼을 세로로 쌓아 좁게 줄바꿈되지 않게 */ .eva-tl-head { flex-direction: column; align-items: stretch; gap: 8px; } .eva-tl-quick { flex-wrap: wrap; } /* 24칸 → 12칸 2행. 셀을 낮고 정사각형에 가깝게 + 숫자 축소로 답답함 제거 */ .eva-timeline { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; row-gap: 4px; } .eva-hour { height: 30px; font-size: 10px; border-radius: 6px; } .eva-tl-ruler { display: none; } .eva-tl-summary { gap: 6px; } .eva-sum { font-size: 12px; padding: 4px 9px; } } /* 아주 좁은 화면(≤380px): 숫자 대신 색블록만으로도 읽히도록 더 축소 */ @media (max-width: 380px) { .eva-hour { height: 26px; font-size: 9px; } } /* 푸터 */ footer .text-slate-500, footer .text-slate-400 { color: var(--eva-text-4) !important; } /* ============================================================ Purge 로 빠진 Tailwind 유틸리티 보충 (프론트 빌드 단계가 없어 컴파일되지 않은 클래스를 직접 정의한다. 이것이 없으면 테이블 최소폭·그리드·gap·space 가 먹지 않아 레이아웃이 깨진다.) ============================================================ */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-2 { column-gap: .5rem; } .gap-y-1 { row-gap: .25rem; } .space-y-1 > * + * { margin-top: .25rem; } .space-y-2 > * + * { margin-top: .5rem; } .space-y-3 > * + * { margin-top: .75rem; } .space-y-4 > * + * { margin-top: 1rem; } .space-y-6 > * + * { margin-top: 1.5rem; } .space-x-1 > * + * { margin-left: .25rem; } .space-x-2 > * + * { margin-left: .5rem; } .space-x-4 > * + * { margin-left: 1rem; } .min-w-\[110px\] { min-width: 110px; } .min-w-\[1000px\] { min-width: 1000px; } .min-w-\[1150px\] { min-width: 1150px; } /* 검토 테이블 기본 글씨 — 10px 원안은 한글에 너무 작아 읽기 좋은 크기로 상향 */ .text-\[10px\] { font-size: 13px; } /* --- 추가 레이아웃/사이즈 유틸 (감사에서 미정의로 확인된 것) --- */ .top-1 { top: .25rem; } .bottom-1 { bottom: .25rem; } .w-20 { width: 5rem; } .h-20 { height: 5rem; } .min-w-20 { min-width: 5rem; } .max-w-4xl { max-width: 56rem; } .mb-3 { margin-bottom: .75rem; } .pb-3 { padding-bottom: .75rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .mr-1\.5 { margin-right: .375rem; } .font-medium { font-weight: 500; } .table-auto { table-layout: auto; } .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.06); } .text-2xs { font-size: .625rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } /* --- 시맨틱 색 유틸: 토큰 매핑으로 다크모드 자동 대응 (필터 칩 색은 제외) --- */ .text-emerald-600 { color: var(--eva-ok-text); } .text-purple-500 { color: var(--eva-purple-text); } .bg-purple-100 { background-color: var(--eva-purple-bg); } .text-gray-500 { color: var(--eva-text-3); } .text-gray-600 { color: var(--eva-text-3); } .text-slate-600 { color: var(--eva-text-2); } .bg-gray-100 { background-color: var(--eva-surface-2); } .bg-slate-100 { background-color: var(--eva-surface-2); } .border-slate-300 { border-color: var(--eva-border-strong); } /* ============================================================ 다크모드 보정: JS/템플릿이 dark: 변형 없이 쓰는 하드코딩 라이트 유틸을 다크 토큰으로 매핑한다. (bg-white/text-gray-900/border-gray-200 등이 다크에서 흰 배경·검은 글씨로 남던 문제를 한 곳에서 일괄 해결) ============================================================ */ html.dark .bg-white { background-color: var(--eva-surface) !important; } html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color: var(--eva-surface-2) !important; } html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color: var(--eva-surface-2) !important; } html.dark .bg-gray-200 { background-color: var(--eva-border-strong) !important; } html.dark .text-gray-900, html.dark .text-slate-900, html.dark .text-gray-800, html.dark .text-slate-800 { color: var(--eva-text) !important; } html.dark .text-gray-700, html.dark .text-slate-700 { color: var(--eva-text-2) !important; } html.dark .text-gray-600, html.dark .text-slate-600 { color: var(--eva-text-2) !important; } html.dark .text-gray-500 { color: var(--eva-text-3) !important; } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-slate-200 { border-color: var(--eva-border) !important; } html.dark .border-gray-300, html.dark .border-slate-300 { border-color: var(--eva-border-strong) !important; } /* 인라인 style="background:#fff/white" 로 박힌 것도 다크에서 보정 (execution-policy 등) */ html.dark [style*="background:#fff"], html.dark [style*="background: #fff"], html.dark [style*="background:white"], html.dark [style*="background: white"] { background: var(--eva-surface) !important; } @media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } .sm\:w-full { width: 100%; } } @media (min-width: 768px) { .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; } .md\:text-xs { font-size: 14px; } .md\:text-base { font-size: 1rem; } .md\:min-w-0 { min-width: 0; } .md\:overflow-visible { overflow: visible; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:gap-6 { gap: 1.5rem; } } @media (min-width: 1024px) { .lg\:gap-8 { gap: 2rem; } } @media (min-width: 1280px) { .xl\:w-1\/2 { width: 50%; } .xl\:w-full { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }