/* Global Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0 20px; /* Add left and right padding */
    background-color: #f5f5f5;
    overflow: hidden; /* Prevent scrolling */
}

/* Header Styles */
header {
    background-color: #4285f4;
    color: white;
    padding: 5px; /* Reduce padding */
    text-align: left;
}

header h1 {
    margin: 0;
    font-size: 1.1em;
}

header p {
    margin: 5px 0 0;
    font-size: 0.7em; /* Adjusted font size */
}

#header-text {
    display: flex;
    justify-content: space-between; /* Space between text and icons */
    align-items: center; /* Vertically align items */
    text-align: left;
}

#header-icons {
    position: relative;
    display: flex;
    align-items: center;
}

#menu-button {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    margin-left: 10px;
}

#menu-button:hover {
    color: #ddd;
}

#dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    width: 150px;
}

#dropdown-menu li {
    padding: 10px;
    text-align: left;
    font-size: 0.8em; /* Make the text smaller */
    text-decoration: none;
    color: #333;
}

#dropdown-menu li a{    
    display: block;
    cursor: pointer; /* Ensure the link looks clickable */
}

#dropdown-menu li:hover {
    background-color: #f0f0f0;
}

/* Main Section Styles */
main {
    padding: 5px; /* Reduce padding */
    height: calc(100vh - 80px); /* Adjust height to fit within the screen */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-left: 10px; /* Add left margin */
    margin-right: 10px; /* Add right margin */
}

/* Input Section */
#input-section {
    display: flex;
    flex-direction: column; /* 컴포넌트를 세로로 배치 */
    gap: 1px; /* 각 영역 간 간격 */
    margin-bottom: 7px; /* 아래쪽 여백 */
    font-size: 0.8rem; /* 모든 텍스트의 기본 폰트 크기 설정 */
}

#input-section input,
#input-section button,
#input-section label,
#input-section span {
    font-size: inherit; /* 부모의 font-size를 상속 */
}

/* Word Area */
#word-area {
    display: flex; /* Flexbox로 한 줄에 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 5px; /* 컴포넌트 간 간격 */
    margin-bottom: 5px; /* 아래쪽 여백 */
}

#refresh-button {
    font-size: 0; /* 텍스트 숨김 */
    padding: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;   
}

#refresh-button:hover {
    transform: scale(1.1); /* 호버 시 크기 증가 */
    color: #4285f4; /* 호버 시 색상 변경 */
}

#search-input {
    flex-grow: 1; /* 입력 필드가 남은 공간을 채우도록 설정 */
    padding: 10px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */
    margin-right: 5px; /* 버튼과의 간격을 위해 오른쪽 여백 추가 */
}

#search-button {
    padding: 10px 20px;
    font-size: 0.8em;
    color: white;
    background-color: #4285f4;
    border: none;
    border-radius: 4px;
    cursor: pointer;    
}

#search-button:hover {
    background-color: #357ae8;
}

/* Condition Area */
#condition-area {
    display: flex; /* Flexbox로 내부 요소를 한 줄에 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 8px; /* 컴포넌트 간 간격 */
}

#condition-area label {
    display: flex;
    align-items: center; /* 텍스트와 체크박스를 세로 중앙 정렬 */
    gap: 1px; /* 체크박스와 텍스트 간 간격 */
}

#start-date,
#end-date {
    width: 60px; /* 기존보다 더 작게 설정 */
}

#smoothing {
    width: 80px; /* Adjust slider width */
}

#day-checkbox {
    margin-left: 5px; /* 체크박스와 텍스트 간 간격 */
}


/* Chart Section */
#chart-section {
    flex-grow: 1; /* Allow the chart section to grow and fill available space */
    text-align: center;
    height: calc(100vh - 250px); /* Adjust height dynamically based on the window size */
    display: flex;
    justify-content: center;
    align-items: center;
}

#chart-container {
    width: 100%;
    height: 100%; /* Ensure the chart container fills the chart section */
    max-height: 100%; /* Prevent overflow */
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 5px; /* Reduce padding */
    position: static; /* Remove fixed positioning */
    width: 100%;
    bottom: 0;
    border-top: 1px solid #ccc;
    margin-left: 1px; /* Add left margin */
    margin-right: 10px; /* Add right margin */
}

footer p {
    margin: 0;
    font-size: 0.7em;
    color: #666;
}