src/style.css

/* 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;
    }
}