body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #f5f5f5; /* 배경색 조정 */
    padding: 5px;
    max-width: 600px; /* 화면의 최대 너비를 설정하여 입력 칸을 좁게 만듭니다 */
    margin-left: auto; /* 화면 중앙 정렬 */
    margin-right: auto;
}

.app-container {
    max-width: 800px;
    margin: 5px auto;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
    border: 1px solid #ddd; /* 경계선 추가 */
    text-align: center

}

h1 {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
.input-group, .snacks-header, .snack-input {
    margin-bottom: 5px; /* 입력 칸 간의 간격을 줄입니다 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.input-group label {
  flex: 1; /* 라벨에 가중치를 줍니다. */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 점 표시 (...) */
    margin-bottom: 5px;
    margin-right: 10px;
}

.snacks-header span, .snack-input > div {
    flex: 1;
    margin-right: 3px; /* 입력 칸 사이의 간격을 줄입니다 */
}

.snack-input {
    display: flex;
    flex-direction: column; /* 요소들을 세로로 정렬합니다. */
    align-items: flex-start; /* 시작 지점에서 아이템 정렬 */
    margin-bottom: 10px; /* 각 간식 입력 블록 사이의 간격 */
}

.snack-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 아이템을 센터로 정렬 */
    width: 100%; /* 부모 컨테이너의 전체 너비를 차지하도록 설정 */
    margin-bottom: 5px; /* 행 사이의 간격 */
}

input[type="number"], input[type="text"], button {
    padding: 8px;
    margin-right: 5px; /* 오른쪽 마진 추가 */
    border-radius: 4px;
    border: 1px solid #ccc;
    width: calc(100% / 3 - 10px); /* 3개의 입력 필드가 같은 줄에 있을 경우를 위해 너비 조정 */
}
input:disabled {
    background-color: #e9ecef; /* 비활성화된 입력 필드의 배경색 */
}
button {
    width: auto; /* 버튼의 너비를 자동으로 조정 */
    padding: 8px 10px; /* 버튼의 패딩 조정 */

}

/* 버튼이 단독으로 있는 행의 스타일 조정 */
.span {
    display: flex;
    justify-content: flex-end; /* 버튼을 오른쪽 끝으로 정렬 */
    width: 100%;
    margin-top: -5px; /* 버튼 위치 조정 */

}


#add-snack {
    margin: 5px;

    width:100%; /* 추가 버튼의 너비를 자동으로 조정합니다 */
}

#results {
    margin-top: 5px;
    padding: 10px;
    background-color: #f2f2f2; /* 결과 출력 부분의 배경색 */
    border-radius: 5px; /* 결과 출력 부분의 모서리를 둥글게 합니다 */
    text-align: center; /* 결과 값을 중앙에 정렬합니다 */
}


#snacks-table th, #snacks-table td {
    border: 1px solid #ddd; /* 셀 테두리 스타일 설정 */
    padding: 8px;
    text-align: left;
}

#snacks-table th {
    background-color: #f2f2f2; /* 헤더 배경색 설정 */
}
/* 각 입력 칸과 버튼의 스타일을 더 세련되게 만듭니다 */
input, button {
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    cursor: pointer; /* 버튼 위에 마우스를 올렸을 때 커서를 포인터로 변경합니다 */
    background-color: #4CAF50; /* 버튼의 배경색 */
    color: white; /* 버튼의 텍스트 색상 */
    margin-left: 1px; /* 버튼 사이의 간격을 조정합니다 */

}

button:hover {
    background-color: #45a049; /* 버튼을 호버했을 때의 배경색 */
}
.input-group button {
    padding: 8px 10px; /* 버튼의 패딩 조정 */
    background-color: #4CAF50; /* 버튼의 배경색 */
    color: white; /* 버튼의 텍스트 색상 */
    border: none;
    cursor: pointer;
}

.input-group button:hover {
    background-color: #45a049; /* 버튼 호버 시 배경색 변경 */
}

/* 빨간색 placeholder */
.standard-weight::placeholder {
    color: red;
    opacity: 1; /* Firefox를 위해 */
}

/* 초록색 placeholder */
.calories-per-standard-weight::placeholder {
    color: forestgreen;
    opacity: 1; /* Firefox를 위해 */
}

#der{
  width: 65%;
}