/* ==========================================================================
   1. 기본 래퍼 및 폼 카드 디자인
   ========================================================================== */
.tax-wrapper {
    max-width: 800px;
    margin: 0 auto 40px;
    font-family: 'Noto Sans KR', sans-serif;
}

.tax-form-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #e1e8ed;
}

.tax-form-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

/* ==========================================================================
   2. 폼 입력 영역 디자인
   ========================================================================== */
.tax-form-group {
    margin-bottom: 15px;
}

.tax-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555;
}

.tax-form-group input {
    width: 100%;
    max-width: 100%; /* 추가: 우측으로 삐져나가는 현상 방지 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #ffffff; /* 추가: 아이폰 기본 회색 배경을 흰색으로 덮어씀 */
    -webkit-appearance: none; /* 추가: iOS Safari 기본 디자인 강제 초기화 */
    appearance: none; /* 추가: 브라우저 기본 디자인 강제 초기화 */
}

/* 세액(자동 계산) 칸은 읽기 전용이므로 시각적으로 구분되게 회색 유지 */
.tax-form-group input[readonly] {
    background-color: #f5f5f5;
}
/* ==========================================================================
   3. 버튼 디자인 (저장, 엑셀, 삭제)
   ========================================================================== */
.tax-btn {
    width: 100%;
    background: #0073aa; /* 워드프레스 기본 블루 컬러 */
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

.tax-btn:hover {
    background: #005177;
}

.btn-excel {
    background: #27ae60; /* 엑셀 느낌의 그린 컬러 */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    float: right;
    margin-bottom: 10px;
    font-weight: bold;
}

.btn-excel:hover {
    background: #219653;
}

.btn-del {
    background: #e74c3c; /* 삭제 경고용 레드 컬러 */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-del:hover {
    background: #c0392b;
}

/* ==========================================================================
   4. 저장 내역 테이블(표) 디자인
   ========================================================================== */
.tax-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: #fff;
}

.tax-table th, .tax-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.tax-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
}

/* 수정 버튼 디자인 */
.btn-edit {
    background: #f39c12; /* 오렌지색 계열 */
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-right: 4px;
}
.btn-edit:hover {
    background: #e67e22;
}

/* 표 영역 스크롤 및 헤더 고정 설정 */
.table-responsive {
    width: 100%;
    max-height: 400px; /* 여기서 표의 최대 높이를 지정 (원하는 대로 수정 가능) */
    overflow-y: auto;  /* 세로 스크롤 활성화 */
    overflow-x: auto;  /* 가로 스크롤 활성화 (모바일용) */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #ddd; /* 스크롤 박스 테두리 */
}

/* 스크롤 시에도 최상단 제목 열 고정 */
.tax-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
    position: sticky; /* 상단 고정 매직! */
    top: 0;
    z-index: 10; /* 글자 겹침 방지 */
    box-shadow: 0 2px 2px -1px rgba(0,0,0,0.1); /* 스크롤될 때 그림자로 구분감 부여 */
}

.tax-table {
    margin-top: 0; /* 스크롤 박스에 딱 붙도록 마진 제거 */
}

/* ==========================================================================
   5. 모바일 반응형 및 테이블 가로 스크롤 설정 (가장 중요!)
   ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 지원 */
}

/* 화면 너비가 600px 이하(스마트폰)일 때 적용되는 규칙 */
@media (max-width: 600px) {
    .tax-form-card { 
        padding: 20px 15px; 
    }
    .tax-wrapper { 
        padding: 0 10px; 
    }
    .tax-table th, .tax-table td { 
        padding: 8px; 
        font-size: 13px; 
        white-space: nowrap; /* 글자가 줄바꿈되지 않고 가로로 길게 유지되도록 함 */
    }
    .btn-excel { 
        width: 100%; 
        margin-bottom: 15px; 
        float: none; 
        text-align: center; 
    }
}