:root {
            --main-color: #A82B4B;
        }
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .form-section {
            flex-basis: 30%;
            background: #fff;
            border-right: 1px solid #eee;
            padding: 2rem;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .result-section {
            flex-basis: 70%;
            padding: 2rem;
            box-sizing: border-box;
            overflow-y: auto;
        }
        h1 {
            text-align: center;
            color: var(--main-color);
            font-weight: 700;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        .form-row {
            display: flex;
            align-items: center;
            margin-top: 1.2rem;
        }
        .form-row label {
            width: 100px;
            font-weight: 500;
            font-size: 0.8rem;
        }
        .form-row input, .form-row select {
            flex: 1;
            padding: 0.4rem;
            font-size: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .tooltip {
            display: inline-block;
            position: relative;
            cursor: pointer;
            margin-left: 0.5rem;
            color: #A82B4B;
            font-weight: bold;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 9999;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.75rem;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        button {
            margin-top: 1rem;
            background-color: #A82B4B;
            color: white;
            text-align: center;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            display: inline-block;
        }
        button:hover {
            background-color: #8e2340;
        }
        #result-area {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            padding: 2rem;
            min-height: 80%;
        }
        /* 숨김 처리용 클래스 */
        .hidden {
            display: none !important;
        }

        /* ----- 새로 추가된 스타일 ----- */
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4개 카드 한 줄로 */
            gap: 1.5rem; /* 카드 사이 여백 */
            margin-bottom: 2rem;
        }

        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            padding: 2.2rem 1.5rem 1.6rem 1.5rem;
            text-align: center;
            transition: box-shadow 0.2s;
            font-size: 1.1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .card-inner {
            margin: auto; /* 위아래 완벽하게 가운데! */
            width: 100%;
        }

        .card:hover {
            box-shadow: 0 4px 16px rgba(168, 43, 75, 0.10);
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            font-size: 1.08rem;
            margin-top: 1rem; /* 추가된 테이블의 위쪽 여백 */
        }

        /* 모든 th와 td의 기본 정렬을 가운데로 설정하고 테두리 색을 짙은 회색으로 변경 */
        .custom-table th, .custom-table td {
            border: 1px solid #666; /* 테두리 색상 짙은 회색으로 변경 */
            padding: 10px 10px;
            vertical-align: middle; /* 이미지와 동일하게 수직 중앙 정렬 */
            text-align: center; /* 기본 정렬을 가운데로 변경 */
        }

        .custom-table thead th {
            background: #f6ebed;
            color: var(--main-color);
            font-weight: 700;
        }

        /* '한국전력 전기 구매비용'과 'PPA 구매비용' 셀 스타일 */
        .custom-table .sub-title {
            font-weight: bold;
            background: #faf9f9;
            text-align: center; /* 가운데 정렬 유지 */
        }

        .custom-table .bold {
            font-weight: bold;
        }

        .custom-table .note {
            color: var(--main-color);
            font-size: 0.97em;
        }
        /* 숫자 데이터는 오른쪽 정렬을 기본으로 하되, 별도로 지정된 곳은 제외 */
        .custom-table .text-right {
            text-align: right;
        }
        /* '구분' 열의 그룹 라벨 */
        .custom-table .group-label {
            text-align: center;
            font-weight: bold;
            background-color: #f2f2f2;
        }

        .custom-table .text-right {
            text-align: right !important;
        }

        .shaded-cell {
            background-color: #e0e0e0 !important;
            font-weight: bold;
        }
        /* '세부구분' 열의 항목들은 왼쪽 정렬 유지 (아래 예외 제외) */
        .custom-table tbody tr:nth-child(2) td:nth-child(2), /* PPA 구매량 */
        .custom-table tbody tr:nth-child(5) td:nth-child(2), /* 기본요금 */
        .custom-table tbody tr:nth-child(6) td:nth-child(2), /* 전력량요금 */
        .custom-table tbody tr:nth-child(7) td:nth-child(2), /* 기반기금 */
        .custom-table tbody tr:nth-child(10) td:nth-child(2), /* PPA 거래금액 */
        .custom-table tbody tr:nth-child(11) td:nth-child(2), /* 부가정산금 */
        .custom-table tbody tr:nth-child(12) td:nth-child(2), /* 송배전망요금 */
        .custom-table tbody tr:nth-child(13) td:nth-child(2), /* 거래수수료 */
        .custom-table tbody tr:nth-child(14) td:nth-child(2) /* 초과발전 REC 구매비 */
        {
            text-align: left;
        }

        /* '한국전력 구매량' 셀만 가운데 정렬 */
        .custom-table tbody tr:nth-child(1) td:nth-child(2) {
            text-align: center;
        }

        /* '전기구매량' 섹션의 '합계' 셀 텍스트는 가운데 정렬 유지 */
        .custom-table tbody tr:nth-child(3) td:nth-child(2) {
            text-align: center;
        }
        /* '전기구매량' 섹션의 '합계' 옆 값들은 오른쪽 정렬 */
        .custom-table tbody tr:nth-child(3) td:nth-child(3){
            /* text-align: right !important; */
        },
        
        .custom-table tbody tr:nth-child(3) td:nth-child(4) {
            text-align: right !important; /* 강제 적용 */
        }

        /* '한국전력 전기 구매비용' 섹션의 '소계' 셀 텍스트는 가운데 정렬 유지 */
        .custom-table tbody tr:nth-child(8) td:nth-child(2) {
            text-align: center;
        }
        /* '한국전력 전기 구매비용' 섹션의 '소계' 옆 값들은 오른쪽 정렬 */
        .custom-table tbody tr:nth-child(8) td:nth-child(3),
        .custom-table tbody tr:nth-child(8) td:nth-child(4) {
            text-align: right !important; /* 강제 적용 */
        }

        /* 'PPA 구매비용' 섹션의 '소계' 셀 텍스트는 가운데 정렬 유지 */
        .custom-table tbody tr:nth-child(15) td:nth-child(2) {
            text-align: center;
        }
        /* 'PPA 구매비용' 섹션의 '소계' 옆 값들은 오른쪽쪽 정렬 */
        .custom-table tbody tr:nth-child(15) td:nth-child(3),
        .custom-table tbody tr:nth-child(15) td:nth-child(4) {
            text-align: right !important; /* 강제 적용 */
        }


        /* 맨 마지막 합계 행 강조 */
        .custom-table .total-footer-row {
            background-color: #e0e0e0; /* 연한 회색 음영 */
            font-weight: bold;
        }
        .custom-table .total-footer-row td {
            font-weight: bold; /* 합계 행의 모든 텍스트 굵게 */
        }
        /* 맨 마지막 '합계' 셀 텍스트는 가운데 정렬 유지 */
        .custom-table .total-footer-row td:first-child {
            text-align: center;
        }
        /* 맨 마지막 '합계' 옆 값들은 왼쪽 정렬 */
        .custom-table .total-footer-row td:nth-child(3),
        .custom-table .total-footer-row td:nth-child(4) {
            text-align: right !important; /* 강제 적용 */
        }

        /* 차트 컨테이너 스타일 */
        .chart-container {
            width: 100%;
            margin: 2rem 0; /* 위아래 여백 추가 */
            display: flex;
            justify-content: center; /* 가운데 정렬 */
            background-color: #fff; /* 차트 배경 흰색 */
            padding: 1rem; /* 차트와 테두리 사이 여백 */
            border-radius: 10px; /* 둥근 모서리 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 */
        }
        .chart-container canvas {
            max-width: 100% !important; /* 차트 크기 조정 */
            height: auto !important; 
            display: block;
        }

        .upload-button {
            margin-top: 1rem;
            background-color: #A82B4B;
            color: white;
            text-align: center;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            display: inline-block;
        }

        .upload-button:hover {
        background-color: #8c223f;
        }

        #inflation-row {
        display: none;
        }