/* 1. 웹페이지 전체 반응형 최적화 */ [data-testid="stAppViewBlockContainer"] { max-width: 95% !important; /* 좌우 여백을 넓혀 여백 재계산으로 인한 떨림 방지 */ padding-top: 2rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } /* 2. 상단 헤더 영역 고정 (스크롤 시에도 안정감 유지) */ header[data-testid="stHeader"] { background-color: rgba(255, 255, 255, 0.95) !important; } /* 3. 오른쪽 컬럼(col2) 내부 요소 고정 및 흔들림 방지 */ /* 하단 탭 내용이 길어져도 상단 subheader가 들썩이지 않도록 공간 예약 */ [data-testid="column"]:nth-child(2) { display: flex; flex-direction: column; min-height: 100vh !important; } /* [핵심] 상단 제목 고정: 스크롤을 내려도 제목은 위치를 지킵니다 */ [data-testid="stSubheader"] { min-height: 50px !important; margin-bottom: 10px !important; } /* 4. 입력창 카드 디자인 및 반응형 설정 */ [data-testid="stVerticalBlockBorderWrapper"] { background: #F8F9FA !important; border: 1px solid #E0E0E0 !important; border-radius: 12px !important; padding: 24px !important; margin-bottom: 20px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; transition: none !important; /* 애니메이션으로 인한 떨림 방지 */ } /* 5. 버튼 디자인 (배경: 흰색 / 글자: 검정 / 테두리: KT 레드) */ div.stButton { text-align: center !important; } [data-testid="stButton"] > button { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #E3000B !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 1.1rem !important; padding: 10px 40px !important; width: auto !important; min-width: 200px; } [data-testid="stButton"] > button:hover { background: #E3000B !important; color: #FFFFFF !important; } /* 6. 탭(Tabs) 및 결과창 안정화 */ [data-testid="stTabs"] { background-color: transparent !important; } [data-testid="stTabs"] [data-baseweb="tab-list"] { gap: 10px !important; background-color: #FFFFFF !important; } /* 탭 패널의 최소 높이를 확보하여 탭 전환 시 화면 꿀렁임 방지 */ [data-testid="stTabPanel"] { min-height: 600px !important; background-color: #FFFFFF !important; padding: 20px 0 !important; } /* 7. 모바일/작은 화면 대응 (반응형) */ @media (max-width: 1200px) { [data-testid="stAppViewBlockContainer"] { padding-left: 1rem !important; padding-right: 1rem !important; } }