8c29225043
- Added new route for receiving management, allowing users to manage incoming goods effectively. - Updated global CSS to unify font sizes across the application, ensuring a consistent user experience. - Modified customer and sales order fetching logic to improve data retrieval and handling, including enhanced error logging for better debugging. These changes aim to streamline the receiving process and improve overall UI consistency within the application.
776 lines
26 KiB
CSS
776 lines
26 KiB
CSS
/* ===== 서명용 손글씨 폰트 (완전한 한글 지원 폰트) ===== */
|
|
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@700&family=Great+Vibes&family=Pacifico&family=Satisfy&family=Caveat:wght@700&family=Permanent+Marker&family=Shadows+Into+Light&family=Kalam:wght@700&family=Patrick+Hand&family=Indie+Flower&family=Amatic+SC:wght@700&family=Covered+By+Your+Grace&family=Nanum+Brush+Script&family=Nanum+Pen+Script&family=Gaegu:wght@700&family=Hi+Melody&family=Gamja+Flower&family=Poor+Story&family=Do+Hyeon&family=Jua&display=swap");
|
|
|
|
/* ===== Tailwind CSS & Animations ===== */
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
/* ===== Dark Mode Variant ===== */
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/* ===== Tailwind Theme Extensions ===== */
|
|
@theme {
|
|
/* Color System - HSL Format (shadcn/ui Standard) */
|
|
--color-background: hsl(var(--background));
|
|
--color-foreground: hsl(var(--foreground));
|
|
--color-card: hsl(var(--card));
|
|
--color-card-foreground: hsl(var(--card-foreground));
|
|
--color-popover: hsl(var(--popover));
|
|
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
--color-primary: hsl(var(--primary));
|
|
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
--color-secondary: hsl(var(--secondary));
|
|
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
--color-muted: hsl(var(--muted));
|
|
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
--color-accent: hsl(var(--accent));
|
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
--color-destructive: hsl(var(--destructive));
|
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
--color-border: hsl(var(--border));
|
|
--color-input: hsl(var(--input));
|
|
--color-ring: hsl(var(--ring));
|
|
|
|
/* Success, Warning, Info Colors */
|
|
--color-success: hsl(var(--success));
|
|
--color-success-foreground: hsl(var(--success-foreground));
|
|
--color-warning: hsl(var(--warning));
|
|
--color-warning-foreground: hsl(var(--warning-foreground));
|
|
--color-info: hsl(var(--info));
|
|
--color-info-foreground: hsl(var(--info-foreground));
|
|
|
|
/* Chart Colors */
|
|
--color-chart-1: hsl(var(--chart-1));
|
|
--color-chart-2: hsl(var(--chart-2));
|
|
--color-chart-3: hsl(var(--chart-3));
|
|
--color-chart-4: hsl(var(--chart-4));
|
|
--color-chart-5: hsl(var(--chart-5));
|
|
|
|
/* Sidebar Colors */
|
|
--color-sidebar: hsl(var(--sidebar-background));
|
|
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
|
|
--color-sidebar-primary: hsl(var(--sidebar-primary));
|
|
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
|
|
--color-sidebar-accent: hsl(var(--sidebar-accent));
|
|
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
|
|
--color-sidebar-border: hsl(var(--sidebar-border));
|
|
--color-sidebar-ring: hsl(var(--sidebar-ring));
|
|
|
|
/* Font Families */
|
|
--font-sans: var(--font-inter);
|
|
--font-mono: var(--font-jetbrains-mono);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
}
|
|
|
|
/* ===== CSS Variables (Vivid Blue Theme) ===== */
|
|
:root {
|
|
/* Light Theme Colors - HSL Format */
|
|
--background: 0 0% 100%;
|
|
--foreground: 224 71% 4%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 224 71% 4%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 224 71% 4%;
|
|
--primary: 217.2 91.2% 59.8%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 220 14.3% 95.9%;
|
|
--secondary-foreground: 220.9 39.3% 11%;
|
|
--muted: 220 14.3% 95.9%;
|
|
--muted-foreground: 220 8.9% 46.1%;
|
|
--accent: 220 14.3% 95.9%;
|
|
--accent-foreground: 220.9 39.3% 11%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
--border: 220 13% 88%;
|
|
--input: 220 13% 88%;
|
|
--ring: 217.2 91.2% 59.8%;
|
|
|
|
/* Success Colors (Emerald) */
|
|
--success: 142 76% 36%;
|
|
--success-foreground: 0 0% 100%;
|
|
|
|
/* Warning Colors (Amber) */
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 0 0% 100%;
|
|
|
|
/* Info Colors (Cyan) */
|
|
--info: 188 94% 43%;
|
|
--info-foreground: 0 0% 100%;
|
|
|
|
/* Chart Colors */
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
|
|
/* Border Radius */
|
|
--radius: 0.5rem;
|
|
|
|
/* Sidebar Colors */
|
|
--sidebar-background: 220 20% 97%;
|
|
--sidebar-foreground: 224 71% 4%;
|
|
--sidebar-primary: 217.2 91.2% 59.8%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 14.3% 95.9%;
|
|
--sidebar-accent-foreground: 220.9 39.3% 11%;
|
|
--sidebar-border: 220 13% 91%;
|
|
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
}
|
|
|
|
/* ===== Dark Theme (Palantir-Inspired) ===== */
|
|
.dark {
|
|
/* 배경: 팔란티어 스타일 깊은 네이비 */
|
|
--background: 222 47% 6%;
|
|
--foreground: 210 20% 95%;
|
|
|
|
/* 카드: 배경보다 약간 밝게 (레이어 구분) */
|
|
--card: 220 40% 9%;
|
|
--card-foreground: 210 20% 95%;
|
|
|
|
/* 팝오버: 카드와 동일 */
|
|
--popover: 220 40% 9%;
|
|
--popover-foreground: 210 20% 95%;
|
|
|
|
/* Primary: 다크 배경에서 약간 더 밝은 블루 */
|
|
--primary: 217 91% 65%;
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
/* Secondary: 어두운 슬레이트 */
|
|
--secondary: 220 25% 14%;
|
|
--secondary-foreground: 210 20% 90%;
|
|
|
|
/* Muted: 차분한 회색-네이비 */
|
|
--muted: 220 20% 13%;
|
|
--muted-foreground: 215 15% 58%;
|
|
|
|
/* Accent: secondary와 유사 */
|
|
--accent: 220 25% 16%;
|
|
--accent-foreground: 210 20% 90%;
|
|
|
|
/* Destructive: 다크에서 더 밝은 레드 */
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
/* Border: 팔란티어 스타일 - 보더가 더 잘 보임 */
|
|
--border: 220 20% 18%;
|
|
--input: 220 20% 18%;
|
|
--ring: 217 91% 65%;
|
|
|
|
/* Success (Emerald) - 다크 배경용 밝기 조정 */
|
|
--success: 142 70% 42%;
|
|
--success-foreground: 0 0% 100%;
|
|
|
|
/* Warning (Amber) - 다크 배경용 밝기 조정 */
|
|
--warning: 38 92% 55%;
|
|
--warning-foreground: 0 0% 10%;
|
|
|
|
/* Info (Cyan) - 다크 배경용 밝기 조정 */
|
|
--info: 188 90% 48%;
|
|
--info-foreground: 0 0% 100%;
|
|
|
|
/* Chart Colors - 다크 배경에서 선명한 컬러 */
|
|
--chart-1: 220 70% 55%;
|
|
--chart-2: 160 60% 48%;
|
|
--chart-3: 30 80% 58%;
|
|
--chart-4: 280 65% 63%;
|
|
--chart-5: 340 75% 58%;
|
|
|
|
/* Sidebar - 메인 배경보다 약간 어둡게 */
|
|
--sidebar-background: 222 47% 5%;
|
|
--sidebar-foreground: 210 20% 90%;
|
|
--sidebar-primary: 217 91% 65%;
|
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
--sidebar-accent: 220 25% 14%;
|
|
--sidebar-accent-foreground: 210 20% 90%;
|
|
--sidebar-border: 220 20% 16%;
|
|
--sidebar-ring: 217 91% 65%;
|
|
}
|
|
|
|
/* ===== Base Styles ===== */
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
body {
|
|
color: hsl(var(--foreground));
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* Button 기본 커서 스타일 */
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ===== Dialog/Modal Overlay ===== */
|
|
/* Radix UI Dialog Overlay - 60% 불투명도 배경 */
|
|
[data-radix-dialog-overlay],
|
|
.fixed.inset-0.z-50.bg-black {
|
|
background-color: rgba(0, 0, 0, 0.6) !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
|
|
/* DialogPrimitive.Overlay 클래스 오버라이드 */
|
|
.fixed.inset-0.z-50 {
|
|
background-color: rgba(0, 0, 0, 0.6) !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
|
|
/* ===== Accessibility - Focus Styles ===== */
|
|
/* 모든 인터랙티브 요소에 대한 포커스 스타일 */
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* TableSearchWidget의 SelectTrigger 포커스 스타일 제거 */
|
|
[role="combobox"]:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
button[role="combobox"]:focus-visible {
|
|
outline: none !important;
|
|
box-shadow: none !important;
|
|
border-color: hsl(var(--input)) !important;
|
|
}
|
|
|
|
/* ===== Scrollbar Styles (Optional) ===== */
|
|
/* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--muted-foreground) / 0.3);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground) / 0.5);
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--muted));
|
|
}
|
|
|
|
/* ===== Animation Utilities ===== */
|
|
/* Smooth transitions for interactive elements */
|
|
button,
|
|
a,
|
|
input,
|
|
textarea,
|
|
select {
|
|
transition-property:
|
|
color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, filter,
|
|
backdrop-filter;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
/* 런타임 화면에서 컴포넌트 위치 변경 시 모든 애니메이션/트랜지션 완전 제거 */
|
|
[data-screen-runtime] [id^="component-"] {
|
|
transition: none !important;
|
|
}
|
|
[data-screen-runtime] [data-conditional-layer] {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* Disable animations for users who prefer reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* ===== Sonner Toast - B안 (하단 중앙 스낵바) ===== */
|
|
|
|
/* 기본 토스트: 다크 배경 스낵바 */
|
|
[data-sonner-toaster] [data-sonner-toast].sonner-toast-snackbar {
|
|
--normal-bg: hsl(222 30% 16%);
|
|
--normal-text: hsl(210 20% 92%);
|
|
--normal-border: hsl(222 20% 24%);
|
|
|
|
background: var(--normal-bg);
|
|
color: var(--normal-text);
|
|
border: 1px solid var(--normal-border);
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
|
padding: 10px 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 다크모드 토스트 */
|
|
.dark [data-sonner-toaster] [data-sonner-toast].sonner-toast-snackbar {
|
|
--normal-bg: hsl(220 25% 14%);
|
|
--normal-border: hsl(220 20% 22%);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 성공 토스트 - 좌측 초록 바 */
|
|
[data-sonner-toaster] [data-sonner-toast].sonner-toast-success {
|
|
--success-bg: hsl(222 30% 16%);
|
|
--success-text: hsl(210 20% 92%);
|
|
--success-border: hsl(222 20% 24%);
|
|
|
|
background: var(--success-bg) !important;
|
|
color: var(--success-text) !important;
|
|
border: 1px solid var(--success-border) !important;
|
|
border-left: 3px solid hsl(142 76% 42%) !important;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.dark [data-sonner-toaster] [data-sonner-toast].sonner-toast-success {
|
|
--success-bg: hsl(220 25% 14%) !important;
|
|
--success-border: hsl(220 20% 22%) !important;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 에러 토스트 - 좌측 빨간 바 + 약간 붉은 배경 */
|
|
[data-sonner-toaster] [data-sonner-toast].sonner-toast-error {
|
|
--error-bg: hsl(0 30% 14%);
|
|
--error-text: hsl(0 20% 92%);
|
|
--error-border: hsl(0 20% 22%);
|
|
|
|
background: var(--error-bg) !important;
|
|
color: var(--error-text) !important;
|
|
border: 1px solid var(--error-border) !important;
|
|
border-left: 3px solid hsl(0 72% 55%) !important;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.dark [data-sonner-toaster] [data-sonner-toast].sonner-toast-error {
|
|
--error-bg: hsl(0 25% 10%) !important;
|
|
--error-border: hsl(0 20% 18%) !important;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 경고 토스트 - 좌측 노란 바 */
|
|
[data-sonner-toaster] [data-sonner-toast].sonner-toast-warning {
|
|
background: hsl(222 30% 16%) !important;
|
|
color: hsl(210 20% 92%) !important;
|
|
border: 1px solid hsl(222 20% 24%) !important;
|
|
border-left: 3px solid hsl(38 92% 50%) !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* info 토스트 - 좌측 파란 바 */
|
|
[data-sonner-toaster] [data-sonner-toast].sonner-toast-info {
|
|
background: hsl(222 30% 16%) !important;
|
|
color: hsl(210 20% 92%) !important;
|
|
border: 1px solid hsl(222 20% 24%) !important;
|
|
border-left: 3px solid hsl(217 91% 60%) !important;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* 토스트 내부 설명 텍스트 */
|
|
[data-sonner-toaster] [data-sonner-toast] [data-description] {
|
|
color: hsl(210 15% 70%) !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
/* 토스트 닫기 버튼: 토스트 안쪽 우측 상단 배치 */
|
|
[data-sonner-toaster] [data-sonner-toast] [data-close-button] {
|
|
position: absolute !important;
|
|
top: 50% !important;
|
|
right: 8px !important;
|
|
left: auto !important;
|
|
transform: translateY(-50%) !important;
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
border-radius: 4px !important;
|
|
color: hsl(210 15% 55%) !important;
|
|
opacity: 0.6;
|
|
transition: opacity 0.15s, background 0.15s;
|
|
}
|
|
[data-sonner-toaster] [data-sonner-toast] [data-close-button]:hover {
|
|
background: hsl(220 20% 24%) !important;
|
|
color: hsl(210 20% 85%) !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 토스트 액션 버튼 */
|
|
[data-sonner-toaster] [data-sonner-toast] [data-button] {
|
|
color: hsl(217 91% 68%) !important;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 애니메이션 제어: 부드러운 슬라이드 업만 허용, 나머지 제거 */
|
|
[data-sonner-toaster] [data-sonner-toast][data-removed="true"] {
|
|
animation: none !important;
|
|
}
|
|
|
|
/* ===== Print Styles ===== */
|
|
@media print {
|
|
* {
|
|
background: transparent !important;
|
|
color: black !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: " (" attr(href) ")";
|
|
}
|
|
|
|
img {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
@page {
|
|
margin: 2cm;
|
|
}
|
|
|
|
p,
|
|
h2,
|
|
h3 {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|
|
|
|
/* ===== Custom Utilities (Project-Specific) ===== */
|
|
/* 손글씨 폰트 클래스 */
|
|
.font-handwriting {
|
|
font-family: "Allura", cursive;
|
|
}
|
|
|
|
.font-dancing-script {
|
|
font-family: "Dancing Script", cursive;
|
|
}
|
|
|
|
.font-great-vibes {
|
|
font-family: "Great Vibes", cursive;
|
|
}
|
|
|
|
.font-pacifico {
|
|
font-family: "Pacifico", cursive;
|
|
}
|
|
|
|
.font-satisfy {
|
|
font-family: "Satisfy", cursive;
|
|
}
|
|
|
|
.font-caveat {
|
|
font-family: "Caveat", cursive;
|
|
}
|
|
|
|
/* 한글 손글씨 폰트 */
|
|
.font-nanum-brush {
|
|
font-family: "Nanum Brush Script", cursive;
|
|
}
|
|
|
|
.font-nanum-pen {
|
|
font-family: "Nanum Pen Script", cursive;
|
|
}
|
|
|
|
.font-gaegu {
|
|
font-family: "Gaegu", cursive;
|
|
}
|
|
|
|
/* ===== 전체 폰트 사이즈 16px 통일 (버튼 제외) ===== */
|
|
body *:not(button, [role="button"]) {
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
body button *,
|
|
body [role="button"] * {
|
|
font-size: inherit !important;
|
|
}
|
|
|
|
/* ===== Component-Specific Overrides ===== */
|
|
/* 필요시 특정 컴포넌트에 대한 스타일 오버라이드를 여기에 추가 */
|
|
/* 예: Calendar, Table 등의 미세 조정 */
|
|
|
|
/* 테이블 레이아웃 고정 (셀 내용이 영역을 벗어나지 않도록) */
|
|
.table-mobile-fixed {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
/* 그리드선 숨기기 */
|
|
.hide-grid td,
|
|
.hide-grid th {
|
|
border: none !important;
|
|
}
|
|
|
|
.hide-grid {
|
|
border-collapse: separate !important;
|
|
border-spacing: 0 !important;
|
|
}
|
|
|
|
/* ===== 카드 펄스 도트 애니메이션 ===== */
|
|
@keyframes screen-card-pulse {
|
|
0%, 100% { opacity: 0; transform: scale(1); }
|
|
50% { opacity: 0.35; transform: scale(2); }
|
|
}
|
|
.screen-card-pulse-dot::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -3px;
|
|
border-radius: 50%;
|
|
background: hsl(var(--success));
|
|
opacity: 0;
|
|
animation: screen-card-pulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* ===== 저장 테이블 막대기 애니메이션 ===== */
|
|
@keyframes saveBarDrop {
|
|
0% {
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ===== 모달 필수 입력 검증 ===== */
|
|
@keyframes validationShake {
|
|
0%, 100% { transform: translateX(0); }
|
|
20%, 60% { transform: translateX(-4px); }
|
|
40%, 80% { transform: translateX(4px); }
|
|
}
|
|
|
|
/* 흔들림 애니메이션 (일회성) */
|
|
[data-validation-highlight] {
|
|
animation: validationShake 400ms ease-in-out;
|
|
}
|
|
|
|
/* 빨간 테두리 (값 입력 전까지 유지) */
|
|
[data-validation-error] {
|
|
border-color: hsl(var(--destructive)) !important;
|
|
}
|
|
|
|
|
|
/* 채번 세그먼트 포커스 스타일 (shadcn Input과 동일한 3단 구조) */
|
|
.numbering-segment:focus-within {
|
|
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* 필수 입력 경고 문구 (입력 필드 아래, 레이아웃 영향 없음) */
|
|
.validation-error-msg-wrapper {
|
|
height: 0;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.validation-error-msg-wrapper > p {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 0;
|
|
font-size: 11px;
|
|
color: hsl(var(--destructive));
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== End of Global Styles ===== */
|
|
|
|
/* ===== Dark Mode Compatibility Layer ===== */
|
|
/* 하드코딩된 Tailwind 색상 → 다크 모드 자동 변환 */
|
|
/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
|
|
|
|
/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
|
|
.dark .bg-white { background-color: hsl(var(--card)) !important; }
|
|
.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
|
|
.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
|
|
.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
|
|
|
|
/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
|
|
.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
|
|
.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
|
|
.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
|
.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
|
.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
|
|
.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
|
|
|
|
/* --- 3. 보더: gray → 시맨틱 토큰 --- */
|
|
.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
|
|
.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
|
|
.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
|
|
.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
|
|
|
|
/* --- 4. 호버: gray → 시맨틱 토큰 --- */
|
|
.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
|
|
.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
|
|
.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
|
|
|
|
/* --- 5. Emerald (성공/완료 상태) --- */
|
|
.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
|
|
.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
|
|
.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
|
|
.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
|
|
.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
|
|
.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
|
|
.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
|
|
.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
|
|
.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
|
|
|
|
/* --- 6. Amber/Yellow (경고/주의 상태) --- */
|
|
.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
|
|
.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
|
|
.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
|
|
.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
|
|
.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
|
|
.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
|
|
.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
|
|
.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
|
|
.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
|
|
.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
|
|
.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
|
|
.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
|
|
.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
|
|
.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
|
|
.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
|
|
|
|
/* --- 7. Blue (정보/프라이머리 상태) --- */
|
|
.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
|
|
.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
|
|
.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
|
|
.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
|
|
.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
|
|
.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
|
|
.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
|
|
|
|
/* --- 8. Red (에러/삭제 상태) --- */
|
|
.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
|
|
.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
|
|
.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
|
|
.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
|
|
.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
|
|
.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
|
|
.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
|
|
|
|
/* --- 9. Green (성공 - emerald 변형) --- */
|
|
.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
|
|
.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
|
|
.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
|
|
.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
|
|
.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
|
|
|
|
/* --- 10. Slate (gray 변형) --- */
|
|
.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
|
|
.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
|
|
.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
|
|
.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
|
.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
|
.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
|
|
|
|
/* --- 11. bg-white opacity 변형 --- */
|
|
.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
|
|
.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
|
|
.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
|
|
.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
|
|
.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
|
|
|
|
/* --- 12. text-black → foreground --- */
|
|
.dark .text-black { color: hsl(var(--foreground)) !important; }
|
|
|
|
/* --- 13. bg/text/border - purple (관리 UI) --- */
|
|
.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
|
|
.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
|
|
.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
|
|
.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
|
|
.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
|
|
.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
|
|
.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
|
|
.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
|
|
|
|
/* --- 14. bg/text/border - indigo --- */
|
|
.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
|
|
.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
|
|
.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
|
|
.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
|
|
.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
|
|
|
|
/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
|
|
.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
|
|
.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
|
|
.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
|
|
.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
|
|
.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
|
|
.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
|
|
.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
|
|
.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
|
|
|
|
/* --- 16. bg/text - cyan/teal (정보/상태) --- */
|
|
.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
|
|
.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
|
|
.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
|
|
.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
|
|
.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
|
|
.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
|
|
.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
|
|
.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
|
|
|
|
/* --- 17. bg/text - orange (경고 변형) --- */
|
|
.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
|
|
.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
|
|
.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
|
|
.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
|
|
.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
|
|
.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
|
|
.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
|
|
|
|
/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
|
|
.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
|
|
.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
|
|
.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
|
|
.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
|
|
.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
|
|
.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
|
|
.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
|
|
.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
|
|
|
|
/* --- 19. bg/text/border - amber (조인/경고) --- */
|
|
.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
|
|
.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
|
|
.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
|
|
|
|
/* ===== End Dark Mode Compatibility Layer ===== */
|