/* ========================================================================== CSS Variables - Design System ========================================================================== */ :root { /* Layout Variables */ --layout-navbar-height: 64px; /* 네비게이션 바 높이 (일반 레이아웃용) */ --coach-navbar-height: 50px; /* 네비게이션 바 높이 (Coach 페이지용) */ /* --layout-sidebar-width: 16rem; --layout-content-padding: 1rem; */ /* ========================================================================== Coach Layout - 패널 좌우 비례 ========================================================================== */ --coach-panel-left-width: 60%; --coach-panel-right-width: 40%; /* Coach container max width */ --coach-container-max-width: 1536px; /* ========================================================================== Coach Layout - 패딩 (명확한 의미) ========================================================================== */ /* 공통: 왼쪽 패널 (교안) 좌우 패딩 */ --coach-panel-left-padding-horizontal: 20px; /* 데스크톱: 왼쪽 패널 (교안) 좌우 패딩 */ --coach-panel-left-padding-horizontal-desktop: 20px; /* 모바일: 왼쪽 패널 (교안) 좌우 패딩 */ --coach-panel-left-padding-horizontal-mobile: 20px; /* 공통: 왼쪽 패널 (교안) 상하 패딩 */ --coach-panel-left-padding-vertical: 30px; /* 데스크톱: 왼쪽 패널 (교안) 상하 패딩, 스크롤을 완전히 내렸을 때 입력창과 교안 사이 여백 */ --coach-panel-left-padding-vertical-desktop: 30px; /* 모바일: 왼쪽 패널 (교안) 상하 패딩, 스크롤을 완전히 내렸을 때 입력창과 교안 사이 여백 */ --coach-panel-left-padding-vertical-mobile: 30px; /* 공통: 오른쪽 패널 (코치) 좌우 패딩 */ --coach-panel-right-padding-horizontal: 20px; /* 데스크톱: 오른쪽 패널 (코치) 좌우 패딩 */ --coach-panel-right-padding-horizontal-desktop: 20px; /* 모바일: 오른쪽 패널 (코치) 좌우 패딩 */ --coach-panel-right-padding-horizontal-mobile: 20px; /* 공통: 오른쪽 패널 (코치) 상하 패딩 */ --coach-panel-right-padding-vertical: 30px; /* 데스크톱: 오른쪽 패널 (코치) 상하 패딩 */ --coach-panel-right-padding-vertical-desktop: 30px; /* 모바일: 오른쪽 패널 (코치) 상하 패딩 */ --coach-panel-right-padding-vertical-mobile: 10px; /* PDF 뷰어 우측 스크롤 여백 */ --coach-pdf-scroll-gap: 0px; --coach-pdf-padding-horizontal-desktop: 10px; --coach-pdf-padding-horizontal-mobile: 10px; /* ========================================================================== Coach Input - 위치 및 여백 (상세 정의) 변수값만 변경하여 입력창 위치와 여백을 조정할 수 있음 ========================================================================== */ /* 입력창 높이, 입력창 자체의 높이가 아니라 상단 콘텐츠가 인식하는 높이 (여기까지만 스크롤되도록 설정) */ --coach-input-height: 63px; /* 입력창 하단 위치 (bottom 값) - 화면 하단에서의 거리 */ --coach-input-bottom-offset: 0px; /* 공통: 기본 하단 위치 */ --coach-input-bottom-offset-desktop: 0px; /* 데스크톱: 하단 여백 */ --coach-input-bottom-offset-mobile: 0px; /* 모바일: 하단 여백 */ /* 입력창 상단 공백 (콘텐츠와 입력창 사이 간격) */ --coach-input-top-gap: 5px; /* 공통: 상단 콘텐츠와의 간격 */ --coach-input-top-gap-desktop: 5px; /* 데스크톱: 상단 간격 */ --coach-input-top-gap-mobile: 5px; /* 모바일: 상단 간격 */ /* 입력창 하단 패딩 (내부 여백) - iOS safe-area 고려 */ --coach-input-bottom-padding: 0px; /* 공통: 하단 패딩 */ --coach-input-bottom-padding-desktop: 0px; /* 데스크톱: 하단 패딩 */ --coach-input-bottom-padding-mobile: 0px; /* 모바일: 하단 패딩 (iOS safe-area 고려) */ /* 입력창 좌우 패딩 */ --coach-input-padding-horizontal: 20px; /* 공통: 좌우 패딩 */ --coach-input-padding-horizontal-desktop: 0px; /* 데스크톱: 좌우 패딩, 0으로 해야 입력창이 세로로 늘어났을 때 컨텐츠와 겹치는 부분이 어색하지 않음 */ --coach-input-padding-horizontal-mobile: 20px; /* 모바일: 좌우 패딩, 모바일은 입력창이 가로 전체를 다 쓰므로 0으로 하면 어색해짐 */ /* 입력창 크기 및 스타일 */ --coach-input-max-width: 660px; /* 데스크톱 입력창 최대 너비 */ --coach-input-viewport-gap: 40px; /* 입력창과 뷰포트 사이 간격 */ --coach-input-padding-internal: 0px 0px 0px 8px; /* 입력창 내부 패딩 */ --coach-input-border-radius: 16px; --coach-input-field-min-height: 25px; --coach-input-field-max-height: 120px; --coach-input-field-line-height: 25px; --coach-input-send-button-right: 16px; --coach-input-clear-button-right: 42px; /* ========================================================================== Coach Layout - 간격 ========================================================================== */ --coach-input-content-gap: 5px; /* 입력창과 콘텐츠 사이 간격 */ --coach-resizer-width: 1px; /* 리사이저 너비 */ --coach-resizer-hit-area-left: 3px; /* 리사이저 클릭 영역 좌측 */ --coach-resizer-hit-area-right: 5px; /* 리사이저 클릭 영역 우측 */ /* ========================================================================== Coach Mobile - 탭바 ========================================================================== */ --coach-tabbar-height: 48px; /* ========================================================================== Coach Layout - 메시지 간격 ========================================================================== */ --coach-message-gap: 20px; /* 메시지 사이 간격 */ /* ========================================================================== Coach Layout - 스크롤바 ========================================================================== */ --coach-scrollbar-width: 6px; --coach-scrollbar-thumb-radius: 2px; /* ========================================================================== Coach Layout - 미디어 요소 ========================================================================== */ --coach-media-figure-padding: 10px 5px 0 5px; --coach-media-section-margin-top: 20px; --coach-media-section-padding: 20px; /* ========================================================================== Coach Components ========================================================================== */ --coach-toggle-btn-padding: 5px 10px; --coach-toggle-btn-font-size: 12px; /* ========================================================================== Spacing Scale ========================================================================== */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; /* ========================================================================== Border Radius ========================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* ========================================================================== Chat Components ========================================================================== */ --chat-bubble-padding-x: 16px; --chat-bubble-padding-y: 12px; --chat-bubble-radius: 18px; /* ========================================================================== Z-Index Scale ========================================================================== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; }