sam-sales/corp/css_style.md

CSS 및 디자인 가이드라인 (Tone and Manner)

이 문서는 kodata.php 파일에 적용된 디자인 철학과 스타일 표준을 정의합니다. 향후 프로젝트의 일관성을 유지하기 위한 지침으로 활용합니다.

1. 디자인 철학 (Core Philosophy)

• 주제: Professional Trust (신뢰 기반의 전문성)
• 분위기: 깔끔함, 신뢰감, 데이터 중심적인 명확성
• 핵심 키워드: Teal, Navy, White, Light Gray, Modern Typography

2. 색상 사양 (Color Palette)

기본 색상 (Brand Colors)

• Primary (Teal): #0d9488 (Tailwind: teal-600) - 핵심 강조 색상, 활성화 상태.
• Secondary (Navy/Slate): #1e293b (Tailwind: slate-800) - 제목, 텍스트, 신뢰감을 주는 배경.
• Accent (Amber): #f59e0b (Tailwind: amber-500) - 차트의 추세선 등 보조 강조.

배경 및 테두리 (Backgrounds & Borders)

• Body Background: #f3f4f6 (Tailwind: gray-100) - 부드러운 중립 톤의 연회색.
• Container Background: #ffffff (White) - 기본 카드 및 섹션 배경.
• Border: #e2e8f0 (Tailwind: slate-200) - 최소한의 구분선.

3. 타이포그래피 (Typography)

• Font Family: 'Noto Sans KR', sans-serif (Google Fonts)
• Heading Styles:
  • Main Title: text-2xl font-bold text-slate-800
  • Sub Title: text-lg font-bold text-slate-700
• Body Text: text-slate-600 leading-relaxed

4. UI 컴포넌트 표준 (UI Components)

상단 네비게이션 (Sticky Header)

• 하얀색 배경(bg-white)에 그림자(shadow-sm)를 적용하고 상단 고정(sticky top-0).
• 활성화된 탭(nav-active): 하단에 3px 두께의 Teal 테두리 적용.

정보 카드 (Information Cards)

• 사각 모서리 둥글게(rounded-xl), 가벼운 그림자(shadow-sm).
• 호버 시 효과: hover:shadow-md transition-shadow.
• 왼쪽 테두리 강조: 특정 카드는 border-l-4 border-teal-600으로 시각적 계층 부여.

차트 (Charts)

• 라이브러리: Chart.js 사용.
• 스타일: max-height: 400px로 제한하여 화면의 정체성을 유지.
• 색상: Teal(rgba(13, 148, 136, 0.2)) 또는 Blue(rgba(59, 130, 246, 0.2)) 투명도 적용.

타임라인 (Timeline)

• 세로선: border-l-2 border-slate-200.
• 포인트: bg-teal-600 원형 포인트.

5. 코딩 규칙 (Coding Rules)

• CSS Framework: Tailwind CSS (CDN 방식 사용).
• SVG 지양: 최대한 유니코드 이모지(🏢, 📈, 💰)를 사용하여 가볍고 직관적인 UI 구성.
• 애니메이션: fade-in 유틸리티를 통한 부드러운 섹션 전환 (opacity & translateY).
• 반응형: 모바일 우선(Mobile-first) 접근 후 md: 접두사를 활용한 데스크탑 레이아웃 최적화.

6. 특이사항

• 스크롤바 커스텀: .custom-scroll 클래스를 통해 슬림하고 둥근 형태의 스크롤바 디자인 적용.
• 인터랙션: 데이터가 많은 경우 hidden 클래스와 JavaScript switchTab 함수를 사용하여 SPA(Single Page Application) 느낌의 탭 변환 구현.