/**
 * @file common.css
 * @description 전역 스타일, 공통 UI 컴포넌트 및 메인 레이아웃 정의
 */

/* --- 전역 설정 --- */
* { box-sizing: border-box; }

body { 
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px; 
    background-color: #fcfcfc; 
    scroll-behavior: smooth; 
}

/* --- 상단 브랜딩/로고 영역 --- */
.main-title {
    font-size: 38px;
    font-weight: 900;
    text-align: center;
    margin: 30px 0 40px 0;
    background: linear-gradient(135deg, #78e08f 0%, #2f3542 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brand-sub { font-size: 13px; color: #8fa0b3; letter-spacing: 3px; -webkit-text-fill-color: #8fa0b3; }
.brand-sub .highlight { font-size: 1.2em; font-weight: 800; color: #57606f; }

.main-title::after { 
    content: ""; display: block; width: 50px; height: 6px; 
    background: linear-gradient(90deg, #78e08f, #60a3bc); 
    margin-top: 15px; border-radius: 20px; 
}

/* --- 메인 컨테이너 구조 --- */
.main-wrapper { display: flex; gap: 25px; align-items: flex-start; }
.left-report { flex: 6; min-width: 0; }
.right-alarm { 
    flex: 4; min-width: 0; background: #ffffff; 
    border: 2px solid #57606f; border-radius: 15px; 
    padding: 20px; position: sticky; top: 20px; 
}

/* --- 공통 입력 폼 요소 --- */
.box { background: #ffffff; border: 1px solid #ececec; padding: 20px; margin-bottom: 20px; border-radius: 12px; }
.box-title { font-size: 16px; margin: 0 0 15px 0; border-bottom: 2px solid #f1f2f6; padding-bottom: 8px; }
.input-row { display: flex; gap: 15px; margin-bottom: 15px; width: 100%; }
.flex-item { flex: 1; min-width: 0; }
label { display: block; font-size: 12px; font-weight: bold; color: #a4b0be; margin-bottom: 8px; }

/* 일반 input은 100%를 가지되, 단위와 함께 쓰는 그룹은 예외 처리 */
input, select { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #dfe4ea; 
    border-radius: 8px; 
    background-color: #f1f2f6; 
    font-size: 13px; 
    outline: none;
}

/* [추가] 단위(만, 개)가 옆에 붙는 입력창 레이아웃 복구 */
.input-group-unit { 
    display: flex; 
    align-items: center; 
    gap: 5px; 
    width: 100%;
}

.input-group-unit input { 
    flex: 1; /* 입력창이 남은 공간을 다 채우도록 설정 */
    min-width: 0; 
}

.unit-text { 
    font-weight: bold; 
    color: #2f3542; 
    font-size: 14px; 
    white-space: nowrap; /* 글자가 다음 줄로 넘어가지 않게 고정 */
}

/* --- 공통 버튼 액션 (Micro-interaction) --- */
button {
    cursor: pointer; border: none; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
}

button:hover {
    transform: translateY(-1px) scale(1.01) !important;
    filter: brightness(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

button:active { transform: translateY(1px) scale(0.99) !important; }

/* --- 유틸리티 클래스 --- */
.hidden { display: none !important; }
.text-success { color: #2ecc71 !important; }
.text-danger { color: #e74c3c !important; }
.text-bold { font-weight: bold; }
.clickable-logo { cursor: pointer; user-select: none; }