/* Pretendard 폰트 불러오기 */ /* 폰트는 로컬 파일 사용 (병원 내부망에서 CDN 접근 불가할 수 있음) */ @import url('../fonts/pretendard/pretendard.css'); /* 브랜드 색 기본값 (인하대병원). * 실제 값은 app/branding.py 가 로 덮어쓴다. * 여기 값은 템플릿 없이 CSS 만 볼 때의 폴백이다. */ :root { --brand-page-bg: #f5f5f5; --brand-surface: #f8f9fa; --brand-header: linear-gradient(135deg, #0072CE 0%, #004B87 100%); --brand-primary: #0770BB; --brand-primary-dark: #055a9a; --brand-primary-soft: #e8f4fc; --brand-primary-rgb: 7, 112, 187; --brand-accent-end: #055fa0; } /* 기본 설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; background-color: var(--brand-page-bg); color: #333; line-height: 1.6; height: 100vh; overflow: hidden; } .container { width: 100%; /* 전체 너비 사용 */ margin: 0; background-color: white; height: 100vh; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } /* 헤더 */ .header { background: var(--brand-header); color: white; padding: 15px 20px; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header-content { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 15px; /* 좌우 패딩 추가 */ } .logo-section { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; /* 브랜드에 따라 로고가 2개 이상일 수 있다 */ } /* 높이는 브랜드별로 다르므로 템플릿이 인라인으로 지정한다 */ .brand-logo { width: auto; } /* 컬러 로고를 어두운 헤더 위에서 흰색으로 반전 */ .brand-logo--invert { filter: brightness(0) invert(1); } .title-section { flex: 1; text-align: center; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; } .title-section h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 0 0; letter-spacing: 0.5px; } .subtitle-en { font-size: 1.4rem; color: rgba(255, 255, 255, 0.85); margin: -7px 0 0 0; font-weight: 300; /* font-style: italic; */ } .powered-by { font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); margin: 10px 0 0 0; font-style: italic; opacity: 1; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .header-right { flex: 0 0 auto; display: flex; align-items: center; } .hospital-info { display: flex; flex-direction: column; align-items: flex-end; gap: 0; justify-content: center; margin-top: 10px; } .system-version { font-size: 0.9rem; opacity: 0.8; background: rgba(255, 255, 255, 0.2); padding: 2px 8px; border-radius: 10px; margin-bottom: -5px; } /* 메인 컨텐츠 */ .main-content { display: grid; grid-template-columns: minmax(280px, 300px) 1fr minmax(600px, 40%); /* 유연한 레이아웃 */ gap: 15px; padding: 15px; flex: 1; min-height: 0; overflow: visible; width: 100%; /* 전체 너비 사용 */ } /* 좌측 패널 */ .left-panel { background-color: var(--brand-surface); border-radius: 8px; padding: 20px; border: 1px solid #e9ecef; height: 100%; max-height: calc(100vh - 160px); /* 헤더와 footer 높이 고려 */ display: flex; flex-direction: column; overflow: hidden; } /* 업로드 섹션 */ .upload-section { display: block; flex-shrink: 0; margin-bottom: 20px; } .upload-section h2 { font-size: 1.3rem; margin-bottom: 10px; color: #495057; border-bottom: 2px solid var(--brand-primary); padding-bottom: 5px; } .upload-btn { width: 100%; padding: 12px; background-color: var(--brand-primary); color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; margin-bottom: 10px; font-weight: 500; box-shadow: 0 2px 4px rgba(var(--brand-primary-rgb), 0.2); display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .btn-icon svg { width: 18px; height: 18px; display: block; } .upload-btn:hover { background-color: var(--brand-primary-dark); box-shadow: 0 4px 8px rgba(var(--brand-primary-rgb), 0.3); transform: translateY(-1px); } /* 파일 리스트 섹션 */ .file-list-section { margin-top: 10px; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .file-list-section h3 { font-size: 1.1rem; color: #495057; margin-bottom: 10px; border-bottom: 1px solid #dee2e6; padding-bottom: 5px; flex-shrink: 0; } .file-list { list-style: none; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; margin: 0; } /* 파일 아이템 기본 스타일 */ .file-item { background-color: white; border: 1px solid #dee2e6; border-radius: 6px; padding: 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; /* 진행 막대가 아래 줄로 떨어지도록 (flex-basis: 100%) */ flex-wrap: wrap; } /* 환자 수 배지 (섹션 제목 옆) */ .list-count { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 100px; background-color: var(--brand-primary-soft); color: var(--brand-primary); font-size: 0.75rem; font-weight: 600; text-align: center; vertical-align: 2px; } .list-count:empty { display: none; } /* 상태·삭제를 오른쪽 끝에 모아 한 줄의 균형을 잡는다 */ .file-trailing { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* 처리 중일 때만 나오는 진행 막대 */ .file-progress { flex: 0 0 100%; height: 3px; margin-top: 8px; border-radius: 2px; background-color: rgba(0, 0, 0, 0.08); overflow: hidden; } .file-progress span { display: block; height: 100%; border-radius: 2px; background-color: var(--brand-primary); transition: width 0.4s ease; } .file-item:hover { background-color: var(--brand-primary-soft); border-color: var(--brand-primary); box-shadow: 0 1px 3px rgba(var(--brand-primary-rgb), 0.1); } /* 파일 아이템 내부 구조. * 아이콘은 맨 아이콘이 아니라 색 타일에 올린다 (Upstage 의 featured icon 방식). * 목록이 글자만 있을 때의 허전함을 없애고, 선택 상태의 기준점이 된다. */ .file-item .file-icon { width: 34px; height: 34px; border-radius: 8px; background-color: var(--brand-primary-soft); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* 선 아이콘 (js/icons.js · 템플릿의 인라인 SVG). * 이모지와 달리 currentColor 를 따르므로 브랜드 색·선택 상태에 맞춰진다. */ .file-item .file-icon svg { width: 18px; height: 18px; display: block; } .search-icon svg { width: 16px; height: 16px; display: block; } /* 상태 점 — 배지의 글자색을 그대로 따라간다 */ .status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; display: inline-block; margin-right: 5px; vertical-align: 1px; flex-shrink: 0; } .file-item .file-info { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .file-item .file-name { font-weight: 500; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .file-item .file-details { font-size: 0.75rem; color: #868e96; opacity: 0.8; } .file-item .ocr-status { font-size: 0.7rem; padding: 2px 6px; border-radius: 3px; display: inline-flex; align-items: center; white-space: nowrap; } /* 상태 아이콘 — 색은 상태 글자색(currentColor)을 따른다 */ .ocr-status svg { width: 14px; height: 14px; margin-right: 4px; display: block; flex-shrink: 0; } /* OCR 상태별 색상 */ .ocr-status.pending { background-color: #fff3cd; color: #856404; } .ocr-status.processing { background-color: #d1ecf1; color: #0c5460; animation: pulse 1.5s infinite; } .ocr-status.completed { background-color: #d4edda; color: #155724; } .ocr-status.error { background-color: #f8d7da; color: #721c24; } /* 선택된 파일 아이템 스타일 - 가장 중요! */ .file-item.selected { background-color: var(--brand-primary) !important; color: white !important; border-color: var(--brand-primary-dark) !important; box-shadow: 0 2px 8px rgba(var(--brand-primary-rgb), 0.3); } .file-item.selected .file-icon { background-color: rgba(255, 255, 255, 0.22); color: white !important; } .file-item.selected .file-progress { background-color: rgba(255, 255, 255, 0.3); } .file-item.selected .file-progress span { background-color: white; } .file-item.selected .file-name { color: white !important; font-weight: 600; } .file-item.selected .file-details { color: rgba(255, 255, 255, 0.9) !important; font-weight: 500; opacity: 1 !important; } .file-item.selected .ocr-status { background-color: rgba(255, 255, 255, 0.2) !important; color: white !important; font-weight: 500; } /* 파일 삭제 버튼 */ .delete-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 4px; font-size: 16px; /* 휴대폰에서도 눌러야 하므로 hover 로 숨기지 않고 흐리게만 둔다 */ opacity: 0.35; transition: all 0.2s ease; margin-left: auto; display: flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; margin-left: 0; /* .file-trailing 이 오른쪽 정렬을 맡는다 */ } .delete-btn:hover { opacity: 1; background-color: #ff4757; transform: scale(1.1); } .delete-btn:hover span { filter: brightness(0) invert(1); } .delete-btn:active { transform: scale(0.95); } .file-item.selected .delete-btn { opacity: 0.8; color: white; } .file-item.selected .delete-btn:hover { opacity: 1; background-color: #ff3742; } /* 업로드 상태 스타일 */ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /* 중앙 패널 */ .center-panel { background-color: white; border-radius: 8px; padding: 20px; border: 1px solid #e9ecef; height: 100%; max-height: calc(100vh - 160px); /* 헤더와 footer 높이 고려 */ overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* 요약 컨테이너 */ .summary-container { flex: 1; overflow-y: auto; padding: 20px; background-color: #ffffff; border-radius: 8px; min-height: 0; } .summary-container .placeholder-message { text-align: center; color: #6c757d; padding: 40px; font-size: 1.1rem; } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-primary); } .panel-header h2 { font-size: 1.2rem; color: #495057; margin: 0; } .view-controls { display: flex; gap: 8px; } .image-container { border: 1px solid #dee2e6; border-radius: 8px; flex: 1; min-height: 0; overflow: auto; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; /* 드래그 시 텍스트 선택 방지 */ } .placeholder-message { text-align: center; color: #6c757d; } .control-btn { padding: 8px 16px; background-color: var(--brand-primary); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .control-btn .btn-icon svg { width: 16px; height: 16px; } .control-btn:hover { background-color: var(--brand-primary-dark); } .control-btn:disabled { background-color: #adb5bd; cursor: not-allowed; } /* 우측 패널 */ .right-panel { background-color: var(--brand-surface); border-radius: 8px; padding: 20px; border: 1px solid #e9ecef; height: 100%; max-height: calc(100vh - 160px); /* 헤더와 footer 높이 고려 */ overflow: hidden; display: flex; flex-direction: column; } /* 문서 뷰어 섹션 */ .document-viewer-section { display: flex; flex-direction: column; height: 100%; } .document-viewer-section .panel-header { flex-shrink: 0; } .document-viewer-section .image-container { flex: 1; overflow: auto; min-height: 0; } /* 빨간색 하이라이트 박스 */ @keyframes highlight-pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } /* 푸터 */ .footer { background-color: var(--brand-surface); color: #6c757d; text-align: center; padding: 8px 15px; font-size: 0.85rem; flex-shrink: 0; border-top: 1px solid #dee2e6; } .footer p { margin: 0; } /* 이미지 스타일 */ .displayed-image { max-width: 100%; cursor: grab; } .displayed-image:active { cursor: grabbing; } /* Panel header 스타일 개선 */ .panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .panel-header h2 { margin: 0; flex-shrink: 0; } /* 요약 보고서 검색 컨트롤 */ .summary-search-controls { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 400px; margin-left: auto; } .summary-search-input { flex: 1; padding: 6px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; transition: border-color 0.2s; } .summary-search-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), 0.1); } .summary-search-btn, .summary-clear-btn { padding: 6px 10px; background: var(--brand-primary); color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; } .summary-search-btn:hover, .summary-clear-btn:hover { background: var(--brand-primary-dark); } .summary-clear-btn { background: #dc3545; } .summary-clear-btn:hover { background: #c82333; } .search-result-info { font-size: 14px; color: #6c757d; white-space: nowrap; } /* 검색 하이라이트 스타일 */ .search-highlight { background-color: #ffeb3b; color: #000; padding: 1px 2px; border-radius: 2px; } .search-highlight.current { background-color: #ff9800; color: white; } /* PDF 네비게이션이 panel-header 내부에 있을 때 */ .panel-header .pdf-navigation { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; } .panel-header .pdf-nav-btn { padding: 6px 12px; font-size: 13px; } .panel-header .pdf-page-info { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #495057; font-weight: 500; } .panel-header .view-controls { display: flex; gap: 10px; flex-shrink: 0; } /* 에러 메시지용 스타일 - 이미지 위에 오버레이 */ .spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid var(--brand-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 검색 결과 하이라이트 박스 */ .highlight-box { position: absolute; border: 3px solid #ff4444; background-color: transparent; pointer-events: none; z-index: 20; box-sizing: border-box; } /* 스크롤바 공통 스타일 */ .file-list::-webkit-scrollbar, .image-container::-webkit-scrollbar { width: 8px; } .file-list::-webkit-scrollbar-track, .image-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .file-list::-webkit-scrollbar-thumb, .image-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .file-list::-webkit-scrollbar-thumb:hover, .image-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 큰 화면 (1920px 이상) */ @media (min-width: 1920px) { .main-content { grid-template-columns: 320px 1fr minmax(800px, 45%); /* 큰 화면에서 더 넓게 */ gap: 20px; } } @media (max-width: 1600px) { .main-content { grid-template-columns: minmax(250px, 280px) 1fr minmax(500px, 35%); } } @media (max-width: 1200px) { .main-content { grid-template-columns: 200px 1fr minmax(350px, 30%); } } /* ========================================================================= * 모바일 (≤768px) * * 폰에서는 요약과 원본을 나란히 놓을 수 없다. 요약을 본 화면으로 두고, * 좌/우 패널을 아래에서 올라오는 바텀시트로 바꾼다. DOM 은 그대로다. * · 상단 바의 환자 이름을 누르면 → 환자 목록 시트 * · 요약의 출처 항목을 누르면 → 문서 뷰어 시트 (해당 페이지 + 빨간 박스) * · 손잡이를 끌어내리거나 배경을 누르면 닫힘 * * 시트는 display 가 아니라 transform 으로 숨긴다. 닫혀 있어도 크기를 잴 수 있어 * 문서 뷰어의 '전체 페이지에 맞추기' 계산이 처음부터 맞는다. * ====================================================================== */ /* 데스크톱에서는 모바일 전용 요소를 감춘다 */ .mobile-bar, .sheet-handle, .sheet-backdrop { display: none; } @media (max-width: 768px) { /* 모바일 브라우저의 100vh 는 주소창을 포함해 아래가 잘린다 */ body, .container { height: 100dvh; } /* 헤더: 로고와 제목만 남긴다 */ .header { padding: 10px 14px; } .header-content { padding: 0; gap: 12px; } .brand-logo { height: 26px !important; /* 높이는 템플릿이 인라인으로 준다 */ } .title-section { padding: 0; text-align: right; } .title-section h1 { font-size: 0.9rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subtitle-en, .header-right { display: none; } /* 현재 환자 바 */ .mobile-bar { display: block; flex-shrink: 0; padding: 10px 14px 0; } .mobile-patient-btn { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background-color: #fff; border: 1px solid var(--brand-primary-soft); border-radius: 10px; color: var(--brand-primary); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; } .mobile-patient-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-patient-btn .btn-icon svg { width: 18px; height: 18px; display: block; } .mobile-bar-chevron { opacity: 0.6; } /* 본문: 요약만 남기고 전체 폭을 쓴다 */ .main-content { display: block; padding: 12px 14px 14px; } .center-panel { max-height: none; height: 100%; padding: 14px; } .center-panel .panel-header h2 { font-size: 1.05rem; } .summary-container { padding: 4px 0 0; } /* 폰에서는 조회 전용 — 업로드는 데스크톱에서 한다 */ .upload-section { display: none; } /* --------------------------------------------------- 바텀시트 */ .left-panel, .right-panel { position: fixed; left: 0; right: 0; bottom: 0; height: 88dvh; max-height: none; margin: 0; padding: 0 14px 14px; border: none; border-radius: 18px 18px 0 0; background-color: #fff; box-shadow: 0 -6px 32px rgba(10, 13, 20, 0.22); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); z-index: 60; will-change: transform; } .left-panel.sheet-open, .right-panel.sheet-open { transform: translateY(0); } /* 끌어내려 닫는 손잡이 — 터치 영역을 넉넉히 둔다 */ .sheet-handle { display: block; flex-shrink: 0; height: 26px; margin: 0 -14px; position: relative; touch-action: none; cursor: grab; } .sheet-handle::after { content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 2px; background-color: #d3d6dd; } .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background-color: rgba(10, 13, 20, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .sheet-backdrop.visible { opacity: 1; pointer-events: auto; } body.sheet-open { overflow: hidden; } /* 시트 안에서는 문서가 남은 높이를 꽉 쓰게 (손잡이 높이만큼 뺀다) */ .right-panel .document-viewer-section { flex: 1; min-height: 0; height: auto; } .image-container { min-height: 260px; } /* 확대 후 손가락으로 밀어 보기 (드래그는 마우스 전용이라 기본 스크롤에 맡긴다) */ .image-container.has-document { touch-action: pan-x pan-y pinch-zoom; } /* 뷰어 조작 버튼이 두 줄로 접혀도 눌리는 크기를 유지 */ .document-viewer-section .panel-header { gap: 8px; } .panel-header .view-controls { flex: 1; justify-content: flex-end; } .control-btn { min-height: 38px; } .footer { padding: 6px 12px; font-size: 0.75rem; } } /* 아주 좁은 화면 — 제목을 버리고 로고만 */ @media (max-width: 420px) { .title-section { display: none; } .control-btn { padding: 0.5rem 0.75rem; } } /* 강조된 하이라이트 박스 (클릭 시) */ .highlight-box.emphasized { border-width: 4px; border-color: #ff0000; background-color: rgba(255, 0, 0, 0.06); animation: highlight-pulse 1.5s ease-in-out 3; } /* OCR 에러 알림 스타일 */ .ocr-error-notification { position: relative; margin: 10px; padding: 12px 40px 12px 15px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; display: flex; align-items: center; gap: 10px; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .error-icon { font-size: 1.5rem; flex-shrink: 0; } .error-content { flex: 1; } .error-title { font-weight: 600; color: #856404; margin-bottom: 4px; } .error-message { font-size: 0.9rem; color: #856404; line-height: 1.4; } .error-close { position: absolute; top: 8px; right: 8px; background: transparent; border: none; font-size: 1.2rem; color: #856404; cursor: pointer; padding: 4px 8px; opacity: 0.7; transition: opacity 0.2s; } .error-close:hover { opacity: 1; } /* ========================================================================= * 환자 목록 / 요약 상태 / 문서 뷰어 (개편분) * ====================================================================== */ .file-item.empty { justify-content: center; color: #6c757d; font-size: 0.9rem; cursor: default; } .file-item.empty:hover { background-color: transparent; transform: none; } /* 요약 패널 상태 화면 (분석 중 / 실패) */ .summary-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; text-align: center; color: #495057; } .summary-state .state-icon { font-size: 2.5rem; margin-bottom: 16px; } .summary-state h3 { color: #dc3545; margin-bottom: 12px; } .summary-state .state-message { max-width: 420px; color: #6c757d; } .summary-state .state-progress { margin-top: 8px; font-size: 0.9rem; color: #6c757d; } /* 문서 뷰어 스테이지 — 페이지 이미지와 하이라이트의 좌표 기준 */ .page-stage { position: relative; width: 100%; flex-shrink: 0; line-height: 0; } .page-stage .displayed-image { width: 100%; height: auto; display: block; } /* 문서가 표시되면 flex 중앙정렬을 끈다. * (중앙정렬 상태에서 페이지가 컨테이너보다 크면 위쪽이 잘리고 스크롤도 막힌다) */ .image-container.has-document { display: block; } .image-container.has-document .page-stage { margin: 0 auto; } .image-container.dragging { cursor: grabbing; } .page-input { width: 52px; text-align: center; padding: 4px; border: 1px solid #ced4da; border-radius: 4px; } /* ========================================================================= * Upstage 톤 — studio.upstage.ai 참고 * * 레이아웃(3분할)과 출처 클릭 동작은 그대로 두고, 표면·모서리·목록 상태 * 표현만 Studio 감각에 맞춘다. Studio 는 그림자 없이 테두리로 면을 나누고, * 사이드바 항목은 채우기 없이 hover 는 옅은 회색, 선택은 옅은 인디고 배경 + * 인디고 글씨로 표시한다. * * 값은 Studio 디자인 토큰에서 옮겼다 (중립색 slate, 포인트색 brand indigo). * ====================================================================== */ [data-brand="upstage"] { --studio-hover: #f3f4f6; /* muted--default — 목록 hover */ --studio-border: #e2e8f0; /* 면 구분선 (Studio border) */ --studio-border-strong: #cdd0d5; /* line-gray — 버튼·입력 테두리 */ --studio-text: #0a0d14; /* black */ --studio-text-muted: #525866; /* grey-dark */ --studio-radius: 12px; /* 패널 */ --studio-radius-item: 8px; /* 버튼·입력 — 메인사이트 기본 반경 */ } /* 면: 그림자 없이 테두리로만 나눈다 */ [data-brand="upstage"] .left-panel, [data-brand="upstage"] .center-panel, [data-brand="upstage"] .right-panel { border-radius: var(--studio-radius); border-color: var(--studio-border); } [data-brand="upstage"] .image-container { border-radius: var(--studio-radius); border-color: var(--studio-border); background-color: var(--studio-hover); } /* 패널 제목: 굵은 포인트색 밑줄 대신 옅은 구분선 */ [data-brand="upstage"] .panel-header, [data-brand="upstage"] .upload-section h2 { border-bottom: 1px solid var(--studio-border); } [data-brand="upstage"] .file-list-section h3 { border-bottom-color: var(--studio-border); } /* 환자 목록 = Studio 사이드바 네비게이션 스타일 */ [data-brand="upstage"] .file-item { background-color: transparent; border: none; border-radius: var(--studio-radius-item); padding: 10px 10px; margin-bottom: 4px; font-size: 0.875rem; color: var(--studio-text); transition: background-color 0.15s ease, color 0.15s ease; } [data-brand="upstage"] .file-item:hover { background-color: var(--studio-hover); box-shadow: none; } /* 선택: 꽉 찬 색이 아니라 옅은 인디고 배경 + 인디고 글씨 */ [data-brand="upstage"] .file-item.selected { background-color: var(--brand-primary-soft) !important; color: var(--brand-primary) !important; border-color: transparent !important; box-shadow: none; } [data-brand="upstage"] .file-item.selected .file-icon, [data-brand="upstage"] .file-item.selected .file-name { color: var(--brand-primary) !important; font-weight: 500; } [data-brand="upstage"] .file-item.selected .file-details { color: var(--studio-text-muted) !important; } [data-brand="upstage"] .file-item.selected .ocr-status { background-color: rgba(var(--brand-primary-rgb), 0.12) !important; color: var(--brand-primary) !important; } /* 상태 표시: 파스텔 알약 대신 점 + 글자만. 목록 아이콘과 같은 무게로 맞춘다 */ [data-brand="upstage"] .ocr-status { background-color: transparent !important; padding: 0; margin-top: 3px; font-size: 0.6875rem; font-weight: 500; display: inline-flex; align-items: center; animation: none; } [data-brand="upstage"] .ocr-status.completed, [data-brand="upstage"] .ocr-status.pending { color: var(--studio-text-muted); } /* 완료 체크만 브랜드 색으로. 글자까지 보라로 하면 완료된 환자가 쌓일수록 * 목록 전체가 보라로 물들어 강조가 사라진다. */ [data-brand="upstage"] .ocr-status.completed svg { color: var(--brand-primary); } [data-brand="upstage"] .ocr-status.processing { color: var(--brand-primary); } [data-brand="upstage"] .ocr-status.error { color: #dc2626; } /* 진행 중일 때는 배지 전체가 아니라 점만 깜빡인다 */ [data-brand="upstage"] .ocr-status.processing .status-dot { animation: pulse 1.5s infinite; } /* 아이콘 타일 — Upstage 의 featured icon (purple-50 바탕 + purple-500 아이콘). * 선택되면 한 단계 진한 purple-100 으로 올린다. */ [data-brand="upstage"] .file-item.selected .file-icon { background-color: #dde3ff; /* purple-100 */ color: var(--brand-primary) !important; } [data-brand="upstage"] .file-item.selected .ocr-status { background-color: transparent !important; color: var(--studio-text-muted) !important; } [data-brand="upstage"] .file-item.selected .file-progress { background-color: rgba(var(--brand-primary-rgb), 0.18); } [data-brand="upstage"] .file-item.selected .file-progress span { background-color: var(--brand-primary); } /* 이름은 한 단계 크게, 부가정보는 작게 — 한 줄 안에서 위계를 만든다 */ [data-brand="upstage"] .file-item .file-name { font-size: 0.9rem; font-weight: 600; } [data-brand="upstage"] .file-item .file-details { font-size: 0.75rem; color: var(--studio-text-muted); opacity: 1; } /* ----------------------------------------------------------------------- * 버튼 — upstage.ai 메인사이트의 .button 규격 * 기본 : 보라 채움 + 같은 색 테두리, 반경 8px, 굵기 500 * 보조 : 흰 바탕 + 테두리 + 글자색 (is-secondary) * 화면 안에서 진짜 행동은 '파일 선택' 하나뿐이라, 나머지는 보조로 낮춘다. * -------------------------------------------------------------------- */ /* 넓은 면을 진한 단색으로 채우면 값싸 보인다. Upstage 는 이럴 때 채도를 낮춘 * 보라 계열을 층으로 쌓는다 (.notice-pill 은 purple-50 바탕에 검은 글씨, * .uui-icon-featured 는 purple-50 테 + purple-100 바탕 + purple-500 아이콘). * 같은 방식으로 연한 바탕 + 한 단계 진한 테두리 + 진한 글씨로 층을 만든다. */ [data-brand="upstage"] .upload-btn { background-color: var(--brand-primary-soft); /* purple-50 */ border: 1px solid #c2cbff; /* purple-200 */ color: var(--brand-primary-dark); /* purple-700 */ border-radius: var(--studio-radius-item); padding: 0.75rem 1.125rem; font-size: 1rem; font-weight: 500; line-height: 1.5; box-shadow: none; } [data-brand="upstage"] .upload-btn:hover { background-color: #dde3ff; /* purple-100 */ border-color: var(--brand-primary); color: var(--brand-primary-dark); box-shadow: none; transform: none; } [data-brand="upstage"] .upload-btn .btn-icon { color: var(--brand-primary); } [data-brand="upstage"] .control-btn, [data-brand="upstage"] .summary-search-btn, [data-brand="upstage"] .summary-clear-btn { background-color: #fff; border: 1px solid var(--studio-border-strong); color: var(--studio-text); border-radius: var(--studio-radius-item); padding: 0.5rem 1rem; font-weight: 500; box-shadow: none; } /* 문서 뷰어 조작 버튼 — 검색 버튼과 같은 규격(.button.is-secondary): * 흰 바탕 + 보라 테두리 + 보라 글씨. 회색 테두리만 있을 때보다 조작 버튼이라는 * 것이 분명해지고, 검색 버튼과 한 벌로 읽힌다. */ [data-brand="upstage"] .control-btn { border-color: var(--brand-primary); color: var(--brand-primary); } [data-brand="upstage"] .control-btn:hover { background-color: var(--brand-primary-soft); color: var(--brand-primary); } /* 페이지 이동은 아이콘만이라 정사각형으로 */ [data-brand="upstage"] .panel-header .pdf-nav-btn { padding: 0.5rem; width: 34px; } [data-brand="upstage"] .summary-clear-btn:hover { background-color: var(--studio-hover); color: var(--studio-text); } /* 첫 페이지·마지막 페이지에서는 보라를 빼 눌러도 소용없음을 알린다 */ [data-brand="upstage"] .control-btn:disabled { background-color: #fff; color: #a8adb7; border-color: var(--studio-border); } /* 검색은 이 패널의 주 동작이라 보라 테두리로 한 단계 올린다 */ [data-brand="upstage"] .summary-search-btn { border-color: var(--brand-primary); color: var(--brand-primary); padding: 0.5rem 0.75rem; } [data-brand="upstage"] .summary-search-btn:hover { background-color: var(--brand-primary-soft); } /* 검색 초기화는 파괴적 동작이 아니다 — 빨간 버튼을 회색 보조 버튼으로 */ [data-brand="upstage"] .summary-clear-btn { background-color: #fff; color: var(--studio-text-muted); padding: 0.5rem 0.75rem; } [data-brand="upstage"] .summary-search-input, [data-brand="upstage"] .page-input { border-radius: var(--studio-radius-item); border-color: var(--studio-border-strong); } [data-brand="upstage"] .summary-search-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12); } /* 삭제: 강한 빨강 대신 옅은 톤 */ [data-brand="upstage"] .delete-btn:hover { background-color: #fee2e2; color: #dc2626; transform: none; } [data-brand="upstage"] .delete-btn:hover span { filter: none; }