/* ======================================== 교촌 F&B 점주 포탈 - Design Tokens ======================================== */ :root { /* ======================================== COLORS - Brand ======================================== */ --kc-color-primary: #F9BA15; /* 교촌 노랑 */ --kc-color-primary-hover: #E5A918; /* 버튼 호버 */ --kc-color-primary-light: #FFD54F; /* 밝은 노랑 */ --kc-color-secondary: #1A1A1A; /* 다크 그레이 (검색/작성 버튼) */ --kc-color-secondary-hover: #333333; /* 블랙 호버 */ --kc-color-white: #FFFFFF; /* ======================================== COLORS - Background ======================================== */ --kc-color-bg-page: #FAFAFA; /* 페이지 배경 */ --kc-color-bg-card: #FFFFFF; /* 카드 배경 */ --kc-color-bg-light: #FAFAFA; /* 밝은 배경 */ --kc-color-bg-muted: #F9FAFB; /* 뮤트 배경 (입력필드 등) */ --kc-color-bg-disabled: #F5F5F5; /* 비활성 배경 */ /* ======================================== COLORS - State ======================================== */ --kc-color-success: #3CBB6B; /* 완료/성공 */ --kc-color-error: #EF4444; /* 에러/실패 */ --kc-color-error-dark: #E53935; /* 진한 에러 */ --kc-color-warning: #FF9800; /* 경고 */ --kc-color-info: #4A90D9; /* 정보/진행중 */ --kc-color-pending: #9CA3AF; /* 대기중 */ /* ======================================== COLORS - Text ======================================== */ --kc-color-text-primary: #000000; /* 주요 텍스트 */ --kc-color-text-secondary: #333333; /* 보조 텍스트 */ --kc-color-text-tertiary: #666666; /* 3차 텍스트 */ --kc-color-text-muted: #999999; /* 뮤트 텍스트 */ --kc-color-text-disabled: #C9C9C9; /* 비활성 텍스트 */ --kc-color-text-inverse: #FFFFFF; /* 반전 텍스트 (어두운 배경용) */ /* ======================================== COLORS - Border ======================================== */ --kc-color-border: #C9C9C9; /* 기본 테두리 */ --kc-color-border-light: #E0E0E0; /* 밝은 테두리 */ --kc-color-border-dark: #000000; /* 어두운 테두리 */ /* ======================================== COLORS - Header/Footer ======================================== */ --kc-color-header-bg: #FBFAF8; /* 헤더 배경 (밝은 크림) */ --kc-color-header-bg-hover: #F5F4F2; /* 헤더 호버 배경 */ --kc-color-footer-bg: #2D2D2D; /* 푸터 배경 */ --kc-color-footer-text: #AAAAAA; /* 푸터 텍스트 */ --kc-color-footer-divider: #444444; /* 푸터 구분선 */ /* ======================================== TYPOGRAPHY - Font Family ======================================== */ --kc-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; /* ======================================== TYPOGRAPHY - Font Size 일반 페이지용 (List, Detail, Write) ======================================== */ --kc-font-size-page-title: 20px; /* 페이지 타이틀 - 모든 페이지 통일 */ --kc-font-size-h1: 20px; /* 페이지 타이틀 (List/Detail/Write 통일) */ --kc-font-size-h2: 16px; /* 섹션 타이틀 */ --kc-font-size-h3: 15px; /* 서브 타이틀 */ --kc-font-size-h4: 14px; /* 작은 제목 */ --kc-font-size-body-lg: 15px; /* 큰 본문 */ --kc-font-size-body: 14px; /* 일반 본문 */ --kc-font-size-body-sm: 13px; /* 작은 본문/메타 정보 */ --kc-font-size-caption: 12px; /* 캡션 */ --kc-font-size-label: 14px; /* 폼 라벨 */ /* ======================================== TYPOGRAPHY - Education/Dashboard 전용 교육홈, 대시보드, 캘린더 페이지용 (최대 20px) ======================================== */ --kc-edu-font-size-h1: 20px; /* 교육 메인 타이틀 (최대) */ --kc-edu-font-size-h2: 18px; /* 교육 섹션 타이틀 */ --kc-edu-font-size-h3: 16px; /* 교육 서브 타이틀 */ --kc-edu-font-size-body: 15px; /* 교육 본문 */ --kc-edu-font-size-meta: 13px; /* 교육 메타 정보 */ /* ======================================== TYPOGRAPHY - Font Weight ======================================== */ --kc-font-weight-regular: 400; --kc-font-weight-medium: 500; --kc-font-weight-semibold: 600; --kc-font-weight-bold: 700; /* ======================================== TYPOGRAPHY - Line Height ======================================== */ --kc-line-height-tight: 1.3; --kc-line-height-normal: 1.5; --kc-line-height-relaxed: 1.7; /* ======================================== TYPOGRAPHY - Responsive Font Size 브레이크포인트별 폰트 크기 토큰 ======================================== */ /* ----- Page Title (기본 20px) ----- */ --kc-font-size-page-title-desktop: 20px; --kc-font-size-page-title-laptop: 19px; /* ≤1024px */ --kc-font-size-page-title-tablet: 18px; /* ≤768px */ --kc-font-size-page-title-mobile: 17px; /* ≤480px */ /* ----- Section Title (기본 16px) ----- */ --kc-font-size-section-title-desktop: 16px; --kc-font-size-section-title-laptop: 15px; /* ≤1024px */ --kc-font-size-section-title-tablet: 14px; /* ≤768px */ /* ----- Content Body (기본 16px) ----- */ --kc-font-size-content-desktop: 16px; --kc-font-size-content-laptop: 15px; /* ≤1024px */ --kc-font-size-content-tablet: 14px; /* ≤768px */ --kc-font-size-content-mobile: 13px; /* ≤480px */ /* ----- Table Header (기본 14px) ----- */ --kc-font-size-table-header-desktop: 14px; --kc-font-size-table-header-tablet: 13px; /* ≤768px */ --kc-font-size-table-header-mobile: 12px; /* ≤480px */ /* ----- Table Body (기본 14px) ----- */ --kc-font-size-table-body-desktop: 14px; --kc-font-size-table-body-tablet: 13px; /* ≤768px */ --kc-font-size-table-body-mobile: 12px; /* ≤480px */ /* ----- TOC / Meta (기본 14px) ----- */ --kc-font-size-toc-desktop: 14px; --kc-font-size-toc-tablet: 13px; /* ≤768px */ --kc-font-size-toc-mobile: 13px; /* ≤480px */ /* ----- Version Label (기본 14px) ----- */ --kc-font-size-version-desktop: 14px; --kc-font-size-version-tablet: 13px; /* ≤768px */ --kc-font-size-version-mobile: 12px; /* ≤480px */ /* ----- Line Height 반응형 ----- */ --kc-line-height-content-desktop: 1.8; --kc-line-height-content-tablet: 1.7; --kc-line-height-content-mobile: 1.6; /* ======================================== SPACING - 기본 ======================================== */ --kc-spacing-xs: 4px; --kc-spacing-sm: 8px; --kc-spacing-md: 12px; --kc-spacing-lg: 16px; --kc-spacing-xl: 20px; --kc-spacing-2xl: 24px; --kc-spacing-3xl: 32px; --kc-spacing-4xl: 40px; /* ======================================== SPACING - Responsive (브레이크포인트별) ======================================== */ /* ----- Container Padding (Wrapper) ----- */ --kc-spacing-container-desktop: 40px 36px 60px; /* 기본 */ --kc-spacing-container-laptop: 32px 28px 50px; /* ≤1200px */ --kc-spacing-container-tablet: 24px 20px 40px; /* ≤768px */ --kc-spacing-container-mobile: 16px 12px 32px; /* ≤480px */ /* ----- Card Inner Padding ----- */ --kc-spacing-card-desktop: 15px 64px 30px; /* 기본 */ --kc-spacing-card-laptop: 15px 40px 28px; /* ≤1200px */ --kc-spacing-card-tablet: 15px 24px 24px; /* ≤768px */ --kc-spacing-card-mobile: 12px 16px 20px; /* ≤480px */ /* ----- Section Gap ----- */ --kc-spacing-section-gap-desktop: 28px; --kc-spacing-section-gap-laptop: 24px; /* ≤1200px */ --kc-spacing-section-gap-tablet: 20px; /* ≤768px */ --kc-spacing-section-gap-mobile: 16px; /* ≤480px */ /* ----- Card Gap ----- */ --kc-spacing-card-gap-desktop: 20px; --kc-spacing-card-gap-laptop: 16px; /* ≤1200px */ --kc-spacing-card-gap-tablet: 12px; /* ≤768px */ --kc-spacing-card-gap-mobile: 10px; /* ≤480px */ /* ----- Footer Spacing ----- */ --kc-spacing-footer-desktop: 60px; --kc-spacing-footer-laptop: 50px; /* ≤1200px */ --kc-spacing-footer-tablet: 40px; /* ≤768px */ --kc-spacing-footer-mobile: 32px; /* ≤480px */ /* ======================================== BORDER RADIUS ======================================== */ --kc-radius-sm: 4px; --kc-radius-md: 8px; --kc-radius-lg: 10px; --kc-radius-xl: 12px; --kc-radius-full: 50px; /* ======================================== SHADOWS ======================================== */ --kc-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08); --kc-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08); --kc-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --kc-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2); /* ======================================== ICONS 아이콘 크기 및 스트로크 ======================================== */ --kc-icon-size-lg: 24px; /* Large 아이콘 */ --kc-icon-size-md: 20px; /* Medium 아이콘 */ --kc-icon-size-sm: 16px; /* Small 아이콘 */ --kc-icon-size-xs: 12px; /* XSmall 아이콘 */ --kc-icon-stroke-width: 2px; /* 기본 스트로크 두께 */ --kc-icon-stroke-width-thin: 1.5px; /* 얇은 스트로크 */ /* 아이콘 컬러 (stroke/fill 용) */ --kc-icon-color-default: #333333; /* 기본 아이콘 */ --kc-icon-color-secondary: #666666; /* 보조 아이콘 */ --kc-icon-color-disabled: #C9C9C9; /* 비활성 아이콘 */ --kc-icon-color-primary: #F9BA15; /* 브랜드 아이콘 */ --kc-icon-color-danger: #EF4444; /* 위험/삭제 아이콘 */ --kc-icon-color-white: #FFFFFF; /* 어두운 배경용 */ /* ======================================== SEARCH BOX 검색창 스타일 ======================================== */ --kc-search-height: 40px; /* 검색창 높이 */ --kc-search-border-radius: 8px; /* 검색창 모서리 */ --kc-search-padding: 10px 16px; /* 검색창 패딩 */ --kc-search-focus-border-width: 2px; /* 포커스 테두리 두께 */ /* ======================================== DROPDOWN 드롭다운 메뉴 스타일 ======================================== */ --kc-dropdown-min-width: 180px; /* 최소 너비 */ --kc-dropdown-item-padding: 12px 20px; /* 메뉴 아이템 패딩 */ --kc-dropdown-item-hover-bg: #F9FAFB; /* 호버 배경 */ --kc-dropdown-active-bg: #FFFBEB; /* 선택된 아이템 배경 */ /* ======================================== MOBILE MENU 모바일 메뉴 스타일 ======================================== */ --kc-mobile-menu-width: 280px; /* 메뉴 패널 너비 */ --kc-mobile-menu-item-height: 48px; /* 메뉴 아이템 높이 */ --kc-mobile-menu-overlay: rgba(0, 0, 0, 0.5); /* 오버레이 색상 */ /* ======================================== PAGINATION (리스트 페이지네이션) A/S 리스트, CommonList2 등에서 사용 ======================================== */ /* ----- 컨테이너 ----- */ --kc-pagination-padding: 24px 0 10px; /* 상하 패딩 */ --kc-pagination-gap: 2px; /* 버튼 간격 */ /* ----- 화살표 버튼 (처음/이전/다음/마지막) ----- */ --kc-page-btn-size: 36px; /* 버튼 크기 */ --kc-page-btn-icon-size: 16px; /* 아이콘 크기 */ --kc-page-btn-color: #666666; /* 기본 색상 */ --kc-page-btn-hover-bg: #F9FAFB; /* 호버 배경 */ --kc-page-btn-disabled-color: #CCCCCC; /* 비활성 색상 */ /* ----- 페이지 번호 ----- */ --kc-page-number-width: 48px; /* 너비 */ --kc-page-number-height: 54px; /* 높이 */ --kc-page-number-font-size: 16px; /* 폰트 크기 */ --kc-page-number-font-weight: 700; /* 폰트 굵기 */ --kc-page-number-color: #666666; /* 기본 색상 */ --kc-page-number-active-color: #1A1A1A; /* 활성/호버 색상 */ /* ======================================== NAVIGATION ITEM (이전글/다음글) ======================================== */ --kc-nav-item-padding: 16px 20px; /* 패딩 */ --kc-nav-item-bg: #F9FAFB; /* 배경색 */ --kc-nav-item-hover-bg: #FFFBEB; /* 호버 배경 */ --kc-nav-item-hover-border: #F9BA15; /* 호버 테두리 */ /* ======================================== ATTACHMENT CHIPS 첨부파일 칩 스타일 ======================================== */ --kc-chip-padding: 6px 12px; /* 칩 패딩 */ --kc-chip-gap: 6px; /* 아이콘-텍스트 간격 */ --kc-chip-bg: #F5F5F5; /* 칩 배경 */ --kc-chip-hover-bg: #EEEEEE; /* 호버 배경 */ --kc-chip-border: #E0E0E0; /* 칩 테두리 */ --kc-chip-icon-size: 16px; /* 파일 아이콘 크기 */ /* 파일 유형별 아이콘 색상 */ --kc-chip-icon-document: #666666; /* 문서 (.pdf, .doc) */ --kc-chip-icon-image: #4A90D9; /* 이미지 (.png, .jpg) */ --kc-chip-icon-spreadsheet: #3CBB6B; /* 스프레드시트 (.xlsx) */ --kc-chip-icon-archive: #FF9800; /* 압축파일 (.zip) */ /* ======================================== BREAKPOINTS (참고용 주석) 실제 미디어쿼리에서 사용 ======================================== */ /* --kc-breakpoint-xl: 1200px; Desktop Large --kc-breakpoint-lg: 1024px; Desktop / Tablet Landscape --kc-breakpoint-md: 768px; Tablet Portrait --kc-breakpoint-sm: 600px; Mobile Large --kc-breakpoint-xs: 480px; Mobile Small */ /* ======================================== ★★★ 전역 페이지 레이아웃 규격 ★★★ ┌──────────────────────────────────────────────────────────┐ │ ① page-background (100vw, #FAFAFA) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ ② wrapper (max-width: 1408px, margin: 0 auto) │ │ │ │ padding: 40px 36px 60px │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ ③ content-card (#FFFFFF) │ │ │ │ │ │ padding: 15px 64px 30px │ │ │ │ │ │ min-height: 850px │ │ │ │ │ │ border-radius: 12px │ │ │ │ │ │ box-shadow: subtle │ │ │ │ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ ④ header-section │ │ │ │ │ │ │ │ height: 50px, 타이틀 + 액션버튼 │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ ⑤ search-section │ │ │ │ │ │ │ │ 검색바 + 드롭다운 + 버튼 │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ ⑥ content-area (flex: 1) │ │ │ │ │ │ │ │ 테이블/카드그리드/상세내용 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ │ │ │ ⑦ pagination (margin-top: auto) │ │ │ │ │ │ │ │ padding: 24px 0 10px, 중앙정렬 │ │ │ │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ ↕ 60px (wrapper padding-bottom에 포함) │ │ │ │ ┌────────────────────────────────────────────────────┐ │ │ │ Footer │ │ │ └────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────┘ ======================================== */ /* ----- 컨테이너 기본 ----- */ --kc-container-max-width: 1408px; --kc-header-height: 70px; /* ----- wrapper 패딩 (페이지 컨테이너) ----- 적용: .wrapper, .page-container, .list-container 등 */ --kc-container-padding: 40px 36px 60px; /* Desktop: 상40 좌우36 하60 */ --kc-container-padding-tablet: 30px 24px 50px; /* ≤1024px */ --kc-container-padding-mobile: 20px 16px 40px; /* ≤768px */ --kc-container-padding-xs: 15px 12px 30px; /* ≤600px */ /* ----- content-card 패딩 (흰색 메인 카드) ----- 적용: .list-card, .detail-card, .write-card, .content-card 등 */ --kc-card-padding: 15px 64px 30px; /* Desktop: 상15 좌우64 하30 */ --kc-card-padding-tablet: 15px 30px 30px; /* ≤1024px */ --kc-card-padding-mobile: 15px 15px 20px; /* ≤768px */ --kc-card-padding-xs: 10px 12px 15px; /* ≤600px */ /* ----- 카드 최소 높이 ----- */ --kc-card-min-height: 850px; /* 기본 */ --kc-card-min-height-lg: 1150px; /* 카드 그리드용 (5x3) */ /* ----- 푸터/섹션 간격 ----- */ --kc-footer-spacing: 60px; /* 푸터 상단 간격 */ --kc-section-gap: 28px; /* 섹션 간 간격 */ --kc-card-gap: 20px; /* 카드 사이 간격 */ /* ----- ④ 헤더 섹션 ----- */ --kc-header-section-height: 50px; --kc-header-section-margin-bottom: 10px; /* ----- ⑤ 검색 섹션 ----- */ --kc-search-section-margin-bottom: 20px; --kc-search-section-gap: 12px; /* ----- ⑦ 페이지네이션 ----- */ /* 상단 PAGINATION 섹션 참조 */ /* ======================================== TRANSITIONS ======================================== */ --kc-transition-fast: 0.15s ease; --kc-transition-normal: 0.2s ease; --kc-transition-slow: 0.3s ease; /* ======================================== Z-INDEX ======================================== */ --kc-z-dropdown: 100; --kc-z-sticky: 500; --kc-z-header: 1000; --kc-z-floating-overlay: 9000; --kc-z-floating-panel: 9001; --kc-z-floating-button: 9002; --kc-z-modal-backdrop: 9000; --kc-z-modal: 9999; /* ======================================== FLOATING BUTTONS (FAB) 페이지업 버튼, 퀵메뉴 등 플로팅 버튼 ======================================== */ /* ----- 사이즈 ----- */ --kc-fab-size: 50px; /* Desktop */ --kc-fab-size-tablet: 46px; /* ≤768px */ --kc-fab-size-mobile: 44px; /* ≤480px */ --kc-fab-icon-size: 24px; --kc-fab-icon-size-mobile: 20px; /* ----- 위치 ----- */ --kc-fab-position-bottom: 40px; --kc-fab-position-right: 40px; --kc-fab-gap: 12px; /* 버튼 사이 간격 */ /* ----- 스타일 ----- */ --kc-fab-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); --kc-fab-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.2); --kc-fab-border-radius: 50%; /* ----- 퀵메뉴 패널 ----- */ --kc-fab-panel-width: 200px; --kc-fab-panel-width-tablet: 180px; --kc-fab-panel-width-mobile: 160px; --kc-fab-panel-offset: 70px; /* 버튼 위 패널 위치 */ /* ======================================== BUTTON SYSTEM 버튼 사이즈 및 스타일 정의 ======================================== */ /* ----- Button Sizes ----- */ /* Large: 리스트 상단 액션 버튼 (내보내기, 등록) */ --kc-btn-lg-width: 130px; --kc-btn-lg-height: 49px; --kc-btn-lg-font-size: 17px; /* Medium (Default): 상세/작성 페이지 하단 버튼 */ --kc-btn-md-width: 119px; --kc-btn-md-height: 42px; --kc-btn-md-font-size: 16px; --kc-btn-width: 119px; /* 기본값 = Medium */ --kc-btn-height: 42px; --kc-btn-font-size: 16px; /* Small: 검색 버튼, 모달 내 버튼 */ --kc-btn-sm-width: 80px; --kc-btn-sm-height: 36px; --kc-btn-sm-font-size: 14px; /* XSmall: 테이블 내 액션 버튼 */ --kc-btn-xs-width: 60px; --kc-btn-xs-height: 32px; --kc-btn-xs-font-size: 13px; /* ----- Button Common ----- */ --kc-btn-border-radius: 8px; --kc-btn-font-weight: 700; --kc-btn-transition: all 0.2s ease; /* ----- Button Variants ----- */ /* Primary (Yellow): 등록, 저장, 확인, 접수(이관), 저장(완료) */ --kc-btn-primary-bg: #F9BA15; --kc-btn-primary-bg-hover: #E5A800; --kc-btn-primary-color: #FFFFFF; --kc-btn-primary-border: none; /* Secondary (Dark Gray): 목록, 취소, 검색 */ --kc-btn-secondary-bg: #1A1A1A; --kc-btn-secondary-bg-hover: #333333; --kc-btn-secondary-color: #FFFFFF; --kc-btn-secondary-border: none; /* Outline (White with Border): 수정, 삭제 */ --kc-btn-outline-bg: #FFFFFF; --kc-btn-outline-bg-hover: #F9FAFB; --kc-btn-outline-color: #000000; --kc-btn-outline-border: 2px solid #C9C9C9; --kc-btn-outline-border-hover: 2px solid #000000; /* Ghost (Transparent): 텍스트 링크형 버튼 */ --kc-btn-ghost-bg: transparent; --kc-btn-ghost-bg-hover: rgba(0, 0, 0, 0.05); --kc-btn-ghost-color: #666666; --kc-btn-ghost-color-hover: #000000; /* Danger (Red): 삭제 확인 모달 */ --kc-btn-danger-bg: #EF4444; --kc-btn-danger-bg-hover: #DC2626; --kc-btn-danger-color: #FFFFFF; /* ----- Button Hover/Active State ----- */ --kc-btn-hover-opacity: 0.85; --kc-btn-active-opacity: 0.7; /* ======================================== EDUCATION STATUS COLORS (최종 확정안) ======================================== */ --kc-status-apply: #F9BA15; /* 수강신청 */ --kc-status-in-progress: #4A90D9; /* 수강중 */ --kc-status-pending: #9CA3AF; /* 대기중 */ --kc-status-completed: #3CBB6B; /* 완료 */ /* ======================================== LIST PAGE - Search Section ======================================== */ --kc-search-height: 44px; --kc-search-height-mobile: 38px; --kc-search-bg: #FAFAFA; --kc-search-bg-focus: #FFFFFF; --kc-search-btn-width: 100px; --kc-search-btn-width-mobile: 70px; /* ======================================== LIST PAGE - Table ======================================== */ --kc-table-header-height: 44px; --kc-table-header-bg: #F8F8F8; --kc-table-row-height: 52px; --kc-table-row-hover-bg: #F9F9F9; --kc-table-border-top: 2px solid #1A1A1A; --kc-table-min-height: 564px; /* 헤더 44px + 행 52px * 10 */ /* Pagination 토큰은 상단 PAGINATION 섹션 참조 */ /* ======================================== LIST PAGE - Status Badge Colors ======================================== */ --kc-badge-progress-bg: #FFF8E6; --kc-badge-progress-color: #F5A623; --kc-badge-received-bg: #FFEBEB; --kc-badge-received-color: #E53935; --kc-badge-complete-bg: #E8F5E9; --kc-badge-complete-color: #43A047; --kc-badge-default-bg: #F9FAFB; --kc-badge-default-color: #757575; /* ======================================== LIST PAGE - Dropdown ======================================== */ --kc-dropdown-min-width: 100px; --kc-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* ======================================== LIST PAGE 전용 (하위 호환성 - 전역 토큰 사용 권장) ※ 신규 개발 시 --kc-container-*, --kc-card-* 사용할 것 ======================================== */ --kc-list-container-padding: var(--kc-container-padding); --kc-list-container-padding-tablet: var(--kc-container-padding-tablet); --kc-list-container-padding-mobile: var(--kc-container-padding-mobile); --kc-list-container-padding-xs: var(--kc-container-padding-xs); --kc-list-footer-spacing: var(--kc-footer-spacing); --kc-list-card-padding: var(--kc-card-padding); --kc-list-card-padding-tablet: var(--kc-card-padding-tablet); --kc-list-card-padding-mobile: var(--kc-card-padding-mobile); --kc-list-card-padding-xs: var(--kc-card-padding-xs); --kc-list-card-min-height: var(--kc-card-min-height); --kc-list-card-min-height-course: var(--kc-card-min-height-lg); /* ======================================== DETAIL/FORM PAGE - Header ======================================== */ --kc-card-header-padding: 10px 0 20px; --kc-card-header-border: 1px solid #D9D9D9; --kc-card-header-margin-bottom: 30px; /* ======================================== DETAIL/FORM PAGE - Title ======================================== */ --kc-page-title-font-size: 20px; --kc-page-title-font-weight: 500; --kc-page-title-line-height: 1.4; --kc-page-title-letter-spacing: 0.36px; /* Detail Page - Post Title (게시글 제목) */ --kc-detail-title-font-size: 20px; --kc-detail-title-font-weight: 600; --kc-detail-title-line-height: 1.3; --kc-detail-title-letter-spacing: -0.02em; /* ======================================== FORM PAGE - Field Label ======================================== */ --kc-field-label-font-size: 16px; --kc-field-label-font-weight: 600; --kc-field-label-width: 100px; /* 고정 너비 - 입력 필드 정렬용 */ --kc-field-label-min-width: 100px; --kc-field-label-color: #000000; /* ======================================== FORM PAGE - Input Fields (SLDS Style) ======================================== */ --kc-input-height: 32px; --kc-input-padding: 0 12px; --kc-input-border: 1px solid #C9C9C9; --kc-input-border-radius: 4px; --kc-input-font-size: 14px; --kc-input-bg: #FFFFFF; --kc-input-color: #333333; --kc-input-placeholder-color: #999999; --kc-input-focus-border: #9CA3AF; --kc-input-focus-shadow: 0 0 0 2px rgba(156, 163, 175, 0.15); /* ======================================== FORM PAGE - Textarea ======================================== */ --kc-textarea-padding: 8px 12px; --kc-textarea-min-height: 150px; --kc-textarea-border: 1px solid #C9C9C9; --kc-textarea-border-radius: 4px; --kc-textarea-font-size: 14px; /* ======================================== FORM PAGE - Dropdown (SLDS Style) ======================================== */ --kc-form-dropdown-height: 32px; --kc-form-dropdown-padding: 0 12px; --kc-form-dropdown-border: 1px solid #C9C9C9; --kc-form-dropdown-border-radius: 4px; --kc-form-dropdown-font-size: 14px; --kc-form-dropdown-item-padding: 8px 12px; /* ======================================== FORM PAGE - Radio Group ======================================== */ --kc-radio-group-height: 32px; --kc-radio-group-gap: 24px; --kc-radio-size: 16px; --kc-radio-inner-size: 6px; /* ======================================== FORM PAGE - Form Row ======================================== */ --kc-form-row-gap: 48px; /* 행 간격 */ --kc-form-row-double-gap: 80px; /* 2열 레이아웃 간격 */ /* ======================================== FORM PAGE - File Input ======================================== */ --kc-file-input-padding: 12px 14px; --kc-file-input-border: 1px dashed #C9C9C9; --kc-file-input-border-radius: 8px; --kc-file-input-font-size: 14px; --kc-file-input-color: #666666; /* ======================================== FORM PAGE - File Upload Button ======================================== */ --kc-file-btn-padding: 6px 14px; --kc-file-btn-bg: #FFFFFF; --kc-file-btn-color: #333333; --kc-file-btn-border: 1px solid #C9C9C9; --kc-file-btn-border-radius: 4px; --kc-file-btn-font-size: 13px; --kc-file-btn-hover-bg: #F5F5F5; --kc-file-btn-hover-border: #999999; /* ======================================== FORM PAGE - Uploaded Files Grid ======================================== */ --kc-files-grid-gap: 16px; --kc-files-grid-padding: 20px; --kc-files-grid-bg: #F9FAFB; --kc-files-grid-border-radius: 10px; /* ======================================== FORM PAGE - File Card ======================================== */ --kc-file-card-width: 180px; --kc-file-card-border: 1px solid #D9D9D9; --kc-file-card-border-radius: 10px; --kc-file-card-hover-shadow: 1px 1px 16.8px 4px rgba(92, 92, 92, 0.12); --kc-file-thumbnail-height: 100px; /* ======================================== DETAIL PAGE - Info Section ======================================== */ --kc-info-section-padding: 20px 0; --kc-info-section-gap: 20px; --kc-info-label-font-size: 13px; --kc-info-label-color: #666666; --kc-info-value-font-size: 15px; --kc-info-value-color: #333333; /* ======================================== DETAIL PAGE - Content Section ======================================== */ --kc-content-box-bg: #FAFAFA; --kc-content-box-padding: 20px; --kc-content-box-border-radius: 8px; --kc-content-box-min-height: 120px; --kc-content-font-size: 16px; --kc-content-line-height: 1.8; --kc-content-color: #444444; /* ======================================== DETAIL PAGE - Navigation ======================================== */ --kc-nav-item-padding: 13px 0; --kc-nav-label-width: 60px; --kc-nav-label-color: #666666; --kc-nav-title-color: #333333; /* ======================================== BREADCRUMB NAVIGATION 페이지 위치 안내 브레드크럼 ======================================== */ /* ----- 컨테이너 ----- */ --kc-breadcrumb-margin-bottom: 8px; /* 브레드크럼 하단 간격 */ /* ----- 텍스트 ----- */ --kc-breadcrumb-font-size: 13px; --kc-breadcrumb-font-weight: 400; --kc-breadcrumb-line-height: 1.4; /* ----- 색상 ----- */ --kc-breadcrumb-color: #999999; /* 기본 텍스트 (링크, 중간 경로) */ --kc-breadcrumb-color-hover: #333333; /* 링크 호버 */ --kc-breadcrumb-color-current: #000000; /* 현재 페이지 (마지막 항목) */ --kc-breadcrumb-color-separator: #C9C9C9; /* 구분자 (>) */ --kc-breadcrumb-current-font-weight: 500; /* 현재 페이지 굵기 */ /* ----- 구분자 ----- */ --kc-breadcrumb-separator-font-size: 11px; /* ----- 말줄임 ----- */ --kc-breadcrumb-truncate-max-width: 200px; /* 긴 제목 말줄임 */ /* ======================================== COMMON - Divider ======================================== */ --kc-divider-color: #D9D9D9; /* ======================================== MODAL / POPUP 모달 및 팝업 컴포넌트 스타일 ======================================== */ /* Backdrop (배경 오버레이) */ --kc-modal-backdrop-bg: rgba(92, 92, 92, 0.7); --kc-modal-backdrop-blur: 4px; /* Modal Container */ --kc-modal-border-radius: 12px; --kc-modal-shadow: 1px 1px 35.2px rgba(0, 0, 0, 0.25); --kc-modal-padding: 40px 32px 32px; --kc-modal-padding-mobile: 32px 24px 24px; --kc-modal-min-width: 280px; --kc-modal-max-width: 326px; --kc-modal-gap: 16px; /* Large Modal (Popup Notice 등) */ --kc-modal-lg-width: 750px; --kc-modal-lg-height: 600px; --kc-modal-lg-padding: 40px; --kc-modal-lg-padding-tablet: 32px; --kc-modal-lg-padding-mobile: 24px 20px 20px; --kc-modal-lg-gap: 28px; --kc-modal-lg-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Modal Title */ --kc-modal-title-font-size: 20px; --kc-modal-title-font-size-mobile: 18px; --kc-modal-title-font-weight: 800; --kc-modal-title-color: #000000; /* Large Modal Title */ --kc-modal-lg-title-font-size: 24px; --kc-modal-lg-title-font-size-tablet: 20px; --kc-modal-lg-title-font-size-mobile: 18px; --kc-modal-lg-title-font-weight: 600; --kc-modal-lg-title-color: #111827; /* Modal Body */ --kc-modal-body-font-size: 16px; --kc-modal-body-font-size-mobile: 14px; --kc-modal-body-font-weight: 500; --kc-modal-body-color: #5c5c5c; --kc-modal-body-line-height: 1.6; /* Large Modal Body */ --kc-modal-lg-body-font-size: 18px; --kc-modal-lg-body-font-size-tablet: 16px; --kc-modal-lg-body-font-size-mobile: 15px; --kc-modal-lg-body-color: #4B5563; --kc-modal-lg-body-line-height: 28px; /* Modal Buttons */ --kc-modal-btn-padding: 10px 20px; --kc-modal-btn-padding-mobile: 8px 16px; --kc-modal-btn-border-radius: 6px; --kc-modal-btn-font-size: 14px; --kc-modal-btn-font-size-mobile: 13px; --kc-modal-btn-font-weight: 600; --kc-modal-btn-gap: 10px; /* Cancel Button */ --kc-modal-btn-cancel-bg: #e5e5e5; --kc-modal-btn-cancel-bg-hover: #d4d4d4; --kc-modal-btn-cancel-color: #5c5c5c; /* Confirm Button */ --kc-modal-btn-confirm-bg: #f9ba1c; --kc-modal-btn-confirm-bg-hover: #e5a800; --kc-modal-btn-confirm-color: #000000; --kc-modal-btn-confirm-shadow-hover: 0 4px 12px rgba(249, 186, 28, 0.3); /* Close Button */ --kc-modal-close-size: 22px; --kc-modal-close-color: #6B7280; --kc-modal-close-color-hover: #111827; /* ======================================== TAB NAVIGATION 탭 네비게이션 컴포넌트 ======================================== */ /* Tab Container */ --kc-tab-container-gap: 0; --kc-tab-container-border-bottom: 2px solid #E5E5E5; /* Tab Item - Default */ --kc-tab-padding: 14px 24px; --kc-tab-padding-mobile: 12px 16px; --kc-tab-font-size: 15px; --kc-tab-font-size-mobile: 14px; --kc-tab-font-weight: 500; --kc-tab-color: #666666; --kc-tab-bg: transparent; --kc-tab-border-radius: 0; /* Tab Item - Hover */ --kc-tab-color-hover: #333333; --kc-tab-bg-hover: #F9FAFB; /* Tab Item - Active */ --kc-tab-color-active: #1A1A1A; --kc-tab-font-weight-active: 700; --kc-tab-border-bottom-active: 3px solid #1A1A1A; /* Tab - Primary Style (노랑 강조) */ --kc-tab-color-active-primary: #F9BA15; --kc-tab-border-bottom-active-primary: 3px solid #F9BA15; /* Tab - Pill Style (둥근 탭) */ --kc-tab-pill-padding: 10px 20px; --kc-tab-pill-border-radius: 25px; --kc-tab-pill-bg-active: #1A1A1A; --kc-tab-pill-color-active: #FFFFFF; --kc-tab-pill-bg-active-primary: #F9BA15; --kc-tab-pill-color-active-primary: #000000; /* Tab - Chip/Filter Style (필터 칩) */ --kc-tab-chip-height: 36px; --kc-tab-chip-padding: 0 16px; --kc-tab-chip-border-radius: 18px; --kc-tab-chip-font-size: 14px; --kc-tab-chip-font-weight: 500; --kc-tab-chip-bg: #FFFFFF; --kc-tab-chip-border: 1px solid #E0E0E0; --kc-tab-chip-color: #666666; --kc-tab-chip-bg-active: #1A1A1A; --kc-tab-chip-border-active: 1px solid #1A1A1A; --kc-tab-chip-color-active: #FFFFFF; --kc-tab-chip-gap: 8px; /* ======================================== ICON SIZES 아이콘 크기 규격 ======================================== */ --kc-icon-xs: 12px; /* 최소 아이콘 (메타 정보) */ --kc-icon-sm: 16px; /* 작은 아이콘 */ --kc-icon-md: 20px; /* 기본 아이콘 */ --kc-icon-lg: 24px; /* 큰 아이콘 */ --kc-icon-xl: 32px; /* 헤더/네비 아이콘 */ /* ======================================== CARD GRID 카드 그리드 레이아웃 (강좌 목록 등) ======================================== */ /* Grid Layout */ --kc-card-grid-columns: 5; /* Desktop: 5열 */ --kc-card-grid-columns-lg: 4; /* Large Tablet: 4열 */ --kc-card-grid-columns-md: 3; /* Tablet: 3열 */ --kc-card-grid-columns-sm: 2; /* Mobile: 2열 */ --kc-card-grid-columns-xs: 1; /* Small Mobile: 1열 */ --kc-card-grid-gap: 20px; --kc-card-grid-gap-mobile: 16px; --kc-card-grid-gap-xs: 12px; /* Course Card */ --kc-course-card-border-radius: 12px; --kc-course-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --kc-course-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12); --kc-course-card-transform-hover: translateY(-4px); /* Card Thumbnail */ --kc-card-thumb-aspect-ratio: 16 / 10; --kc-card-thumb-overlay-bg: rgba(0, 0, 0, 0.3); /* Card Badge (우측 상단) */ --kc-card-badge-padding: 4px 8px; --kc-card-badge-border-radius: 8px; --kc-card-badge-font-size: 11px; --kc-card-badge-font-weight: 700; --kc-card-badge-bg: #F9BA1C; --kc-card-badge-color: #FFFFFF; --kc-card-badge-top: 10px; --kc-card-badge-right: 10px; /* Card Level Badge (좌측 상단) */ --kc-card-level-bg: rgba(0, 0, 0, 0.6); --kc-card-level-color: #FFFFFF; --kc-card-level-padding: 4px 8px; --kc-card-level-border-radius: 8px; --kc-card-level-font-size: 11px; --kc-card-level-font-weight: 500; /* Card Body */ --kc-card-body-padding: 14px; --kc-card-body-padding-mobile: 12px; /* Card Category */ --kc-card-category-font-size: 11px; --kc-card-category-font-weight: 600; --kc-card-category-color: #F9BA1C; --kc-card-category-margin-bottom: 6px; /* Card Title */ --kc-card-title-font-size: 14px; --kc-card-title-font-weight: 600; --kc-card-title-color: #000000; --kc-card-title-color-hover: #F9BA1C; --kc-card-title-line-height: 1.4; --kc-card-title-margin-bottom: 4px; /* Card Description */ --kc-card-desc-font-size: 12px; --kc-card-desc-color: #666666; --kc-card-desc-line-height: 1.4; --kc-card-desc-margin-bottom: 10px; /* Card Meta (별점, 수강생, 시간 등) */ --kc-card-meta-font-size: 11px; --kc-card-meta-color: #999999; --kc-card-meta-gap: 8px; /* Play Button (썸네일 오버레이) */ --kc-card-play-btn-size: 48px; --kc-card-play-btn-bg: rgba(249, 186, 28, 0.95); --kc-card-play-btn-border-radius: 50%; /* ======================================== ★★★ EDUCATION / DASHBOARD 레이아웃 ★★★ 교육홈, 대시보드, 캘린더 페이지 전용 [페이지 구조] - content-card 없이 직접 컴포넌트 배치 ┌─────────────────────────────────────────┐ │ .page-background (#FAFAFA) │ │ ┌───────────────────────────────────┐ │ │ │ .wrapper │ │ │ │ max-width: 1408px │ │ │ │ padding: 0 0 60px 0 │ │ │ │ │ │ │ │ ┌─────────┐ ┌─────────┐ │ │ │ │ │Section 1│ │Section 2│ │ │ │ │ │ (Card) │ │ (Card) │ │ │ │ │ └─────────┘ └─────────┘ │ │ │ │ │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ Section 3 (Full Width) │ │ │ │ │ └─────────────────────────┘ │ │ │ │ │ │ │ └───────────────────────────────────┘ │ └─────────────────────────────────────────┘ ======================================== */ /* ----- 대시보드 Wrapper ----- 상단 패딩 없음, 하단만 60px */ --kc-edu-wrapper-padding: 0 0 60px 0; --kc-edu-wrapper-padding-lg: 0 32px 40px; /* ≤1200px */ --kc-edu-wrapper-padding-md: 0 24px 32px; /* ≤900px */ --kc-edu-wrapper-padding-sm: 0 16px 24px; /* ≤600px */ /* ----- 대시보드 섹션 간격 ----- */ --kc-edu-section-gap: 28px; /* 섹션 사이 간격 */ --kc-edu-section-gap-mobile: 20px; /* 모바일 섹션 간격 */ /* ----- 대시보드 섹션 카드 ----- 개별 섹션 카드 스타일 (InfoCard, Calendar 등) */ --kc-edu-card-padding: 24px; --kc-edu-card-padding-mobile: 16px; --kc-edu-card-border-radius: 16px; --kc-edu-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* ----- 대시보드 그리드 레이아웃 ----- */ --kc-edu-grid-gap: 24px; --kc-edu-grid-gap-mobile: 16px; /* ======================================== EDUCATION HOME PAGE - 교육 홈 화면 전용 토큰 ======================================== */ /* ----- 교육 홈 컨테이너 ----- */ --kc-edu-home-padding: 24px; --kc-edu-home-padding-tablet: 20px; --kc-edu-home-padding-mobile: 16px; --kc-edu-home-max-width: 1400px; --kc-edu-home-bg: #FAFBF8; /* ----- 교육 홈 카드 ----- */ --kc-edu-home-card-bg: #FFFFFF; --kc-edu-home-card-radius: 12px; --kc-edu-home-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --kc-edu-home-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12); --kc-edu-home-card-padding: 20px; /* ----- 교육 홈 카드 헤더 ----- */ --kc-edu-home-card-header-padding: 20px; --kc-edu-home-card-header-border: 1px solid #E8E8E8; --kc-edu-home-card-title-font-size: 16px; --kc-edu-home-card-title-font-weight: 700; /* ----- 교육 홈 배지 ----- */ --kc-edu-home-badge-bg: #F9BA15; --kc-edu-home-badge-color: #1A1A1A; --kc-edu-home-badge-padding: 4px 12px; --kc-edu-home-badge-radius: 12px; --kc-edu-home-badge-font-size: 12px; /* ----- 교육 홈 상태 카운트 ----- */ --kc-edu-home-count-font-size: 32px; --kc-edu-home-count-font-weight: 700; --kc-edu-home-count-color: #F9BA15; /* ----- 교육 홈 포인트 표시 ----- */ --kc-edu-home-points-font-size: 48px; --kc-edu-home-points-font-size-mobile: 36px; --kc-edu-home-points-font-weight: 700; --kc-edu-home-points-color: #F9BA15; /* ----- 교육 홈 진행률 바 ----- */ --kc-edu-home-progress-height: 12px; --kc-edu-home-progress-bg: #F0F0F0; --kc-edu-home-progress-radius: 6px; --kc-edu-home-progress-fill-online: linear-gradient(90deg, #4CAF50 0%, #81C784 100%); --kc-edu-home-progress-fill-offline: linear-gradient(90deg, #F9BA15 0%, #FFD54F 100%); /* ----- 교육 홈 섹션 간격 ----- */ --kc-edu-home-section-gap: 24px; --kc-edu-home-section-gap-mobile: 16px; /* ======================================== SLDS Override - Force Pretendard Font Salesforce Lightning 컴포넌트의 기본 폰트를 Pretendard로 강제 적용 ======================================== */ --lwc-fontFamily: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --lwc-fontFamilyHeader: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --lwc-fontFamilyText: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; --slds-g-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; } /* ======================================== GLOBAL SLDS Font Override 모든 Salesforce Lightning 컴포넌트에 Pretendard 폰트 강제 적용 ======================================== */ /* Lightning Input, Combobox, Select 등 */ lightning-input, lightning-input-field, lightning-combobox, lightning-select, lightning-textarea, lightning-input-rich-text, lightning-radio-group, lightning-checkbox-group, lightning-datepicker, lightning-formatted-text, lightning-formatted-rich-text, lightning-formatted-number, lightning-formatted-date-time, lightning-record-edit-form, lightning-record-view-form { --lwc-fontFamily: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important; --lwc-fontFamilyHeader: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important; font-family: var(--kc-font-family, 'Pretendard', sans-serif) !important; } /* SLDS 기본 입력 필드 스타일 오버라이드 */ .slds-input, .slds-textarea, .slds-select, .slds-combobox__input, .slds-form-element__label, .slds-form-element__control, .slds-rich-text-editor__textarea { font-family: var(--kc-font-family, 'Pretendard', sans-serif) !important; } /* Lightning Button */ lightning-button, lightning-button-icon { --lwc-fontFamily: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif !important; font-family: var(--kc-font-family, 'Pretendard', sans-serif) !important; } /* 모든 하위 요소에 적용 */ lightning-input *, lightning-input-field *, lightning-combobox *, lightning-select *, lightning-textarea *, lightning-record-edit-form * { font-family: var(--kc-font-family, 'Pretendard', sans-serif) !important; } /* ======================================== SLDS Focus 색상 오버라이드 - 파란색 → 회색 ======================================== */ /* SLDS Input/Textarea Focus 색상 */ lightning-input, lightning-input-field, lightning-combobox, lightning-select, lightning-textarea, lightning-input-rich-text { --slds-c-input-color-border-focus: #9CA3AF !important; --slds-c-input-shadow-focus: 0 0 0 2px rgba(156, 163, 175, 0.15) !important; --slds-c-textarea-color-border-focus: #9CA3AF !important; --slds-c-textarea-shadow-focus: 0 0 0 2px rgba(156, 163, 175, 0.15) !important; } /* SLDS 기본 클래스 Focus 스타일 강제 오버라이드 */ .slds-input:focus, .slds-textarea:focus, .slds-select:focus, .slds-combobox__input:focus { border-color: #9CA3AF !important; box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.15) !important; outline: none !important; } /* Rich Text Editor Focus */ .slds-rich-text-editor:focus-within { border-color: #9CA3AF !important; box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.15) !important; } /* Rich Text Editor 테두리 연하게 */ .slds-rich-text-editor { border-color: #E5E7EB !important; } .slds-rich-text-editor__toolbar { border-bottom-color: #E5E7EB !important; } /* ======================================== 가로 스크롤 방지 - 전역 ======================================== */ body { overflow-x: hidden !important; } /* ======================================== Experience Cloud SLDS 여백 제거 ======================================== */ /* 컬럼 기본 패딩 제거 - 모든 방향 */ .slds-col--padded, .slds-col_padded, .slds-col--padded.contentRegion, .slds-col_padded.contentRegion { padding: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Experience Cloud 레이아웃 여백 제거 */ .comm-layout-column, .cCenterPanel, .comm-content-body, .forceCommunityThemeLayoutTmpl_body { padding: 0 !important; margin: 0 !important; } /* 내부 uiRegion 여백 제거 */ .cCenterPanel .uiRegion, .comm-content-body .uiRegion { padding: 0 !important; margin: 0 !important; } /* SLDS Grid wrapper 여백 제거 */ .slds-grid.comm-wrapper { padding: 0 !important; margin: 0 !important; } /* contentRegion 패딩 제거 */ .contentRegion { padding: 0 !important; padding-top: 0 !important; } /* 헤더 상단 여백 제거 - Experience Cloud */ .forceCommunityThemeLayoutTmpl, .forceCommunityThemeLayoutTmpl .cCenterPanel, .forceCommunityThemeLayoutTmpl .comm-content-body, .comm-page-body, .siteforceContentArea { padding-top: 0 !important; margin-top: 0 !important; padding: 0 !important; } /* 전체 레이아웃 상단 여백 제거 */ .slds-template__container, .slds-template_default, .comm-body-scroller { padding-top: 0 !important; margin-top: 0 !important; } /* siteforceSldsOneColLayout 여백 제거 */ .siteforceSldsOneColLayout, .siteforceSldsOneColLayout .siteforceContentArea, .siteforceSldsOneColLayout .contentRegion { padding: 0 !important; margin: 0 !important; }