/* 카드 리스트와 콤보 리스트의 기본 스타일 */
div#card_list, div#combo_list {
    padding: 10px; /* 내부 여백 */
    width: 400px;  /* 고정 너비 */
}

/* 개별 카드 스타일 */
div.card {
    display: flex;         /* 플렉스박스 레이아웃 사용 */
    margin-bottom: 5px;    /* 카드 사이의 하단 여백 */
}

/* 카드 이름 영역 스타일 */
.card_name {
    flex-grow: 1;       /* 가능한 많은 공간을 차지하도록 설정 */
    margin-right: 5px;  /* 오른쪽 여백 */
}

/* 콤보 한 줄의 스타일 */
.combo {
    display: flex;              /* 플렉스박스 레이아웃 */
    flex-wrap: nowrap;          /* 줄 바꿈 없음 */
    align-items: baseline;      /* 텍스트 기준선에 맞춰 정렬 */
    margin-bottom: 5px;         /* 콤보 사이의 하단 여백 */
}

/* 콤보 내부의 카드가 남은 공간을 모두 차지하도록 설정 */
.combo > .card {
    flex-grow: 1;
}

/* 카드 리스트와 콤보 내부 요소들의 높이를 통일하여 정렬 */
#card_list input,
.combo .card select,
.combo .card input,
.combo > button {
    height: 30px;           /* 높이 고정 */
    box-sizing: border-box; /* 테두리를 포함하여 크기 계산 */
}

/* 인접한 버튼 사이에 왼쪽 여백 추가 */
button + button {
    margin-left: 5px;
}

/* 콤보 내부의 각 요소들 사이에 왼쪽 여백 추가 */
.combo > * + * {
    margin-left: 5px;
}

/* 카드 및 콤보 리스트의 추가/삭제(+/-) 버튼 크기 고정 */
div#card_list button,
div#combo_list button {
    padding: 0px 10px; /* 좌우 여백 */
}

/* 리스트 전체를 추가/삭제하는 버튼 그룹 */
.button_group {
    display: flex;      /* 플렉스박스 레이아웃 */
    width: 100%;        /* 너비 100% */
    margin-top: 5px;    /* 위쪽 여백 */
}

/* 버튼 그룹 내의 버튼들이 공간을 균등하게 차지하도록 설정 */
.button_group button {
    flex-grow: 1; /* 가능한 많은 공간 차지 */
    width: 50%;   /* 너비 50% */
}

/* 결과 테이블 스타일 */
table#result {
    width: 400px;               /* 고정 너비 */
    margin-top: 10px;           /* 위쪽 여백 */
    margin-bottom: 10px;        /* 아래쪽 여백 */
    border-collapse: collapse;  /* 테두리 겹침 처리 */
    box-sizing: border-box;     /* 테두리를 포함하여 크기 계산 */
}

/* 결과 테이블의 셀(td) 스타일 */
table#result td {
    border: 1px solid #ccc; /* 1px 회색 실선 테두리 */
    padding: 8px;           /* 내부 여백 */
}

/* 제목 입력 셀의 내부 여백 제거 */
table#result td.title-input {
    padding: 0;
}

/* 제목 입력 필드 스타일 */
table#result input.title {
    width: 100%;        /* 너비 100% */
    height: 100%;       /* 높이 100% */
    border: none;       /* 테두리 없음 */
    padding: 8px;       /* 내부 여백 */
    box-sizing: border-box; /* 테두리를 포함하여 크기 계산 */
}

/* 마지막 행 (전체 확률) 텍스트를 굵게 표시 */
table#result tr:last-child td {
    font-weight: bold;
}

.result_controls {
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.digit_controls {
    display: flex;
}

#digits {
    width: 40px;
    text-align: center;
}