.request-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 120px 20px;
    background: #fff;
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
}

/* 모든 요소에 box-sizing 적용하여 크기 뒤틀림 방지 */
.request-container * {
    box-sizing: border-box;
}

.request-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 12px;
}

.request-header p {
    color: #718096;
    font-size: 15px;
    margin-bottom: 35px;
    word-wrap: keep-all;
}

.request-table {
    width: 100%;
    border-top: 2px solid #1a202c;
    border-collapse: collapse;
}

.request-table th {
    background-color: #f8fafc;
    padding: 16px 24px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    vertical-align: middle;
}
.request-table th.required:after { content: "*"; position:relative; top:-2px; color: red; margin-left:3px; }

.request-table td {
    padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}

    /* 입력창 스타일 통일 */
input[type="text"].in-input,
input[type="number"].in-input,
input[type="password"].in-input,
input[type="email"].in-input,
.in-input {
    width: 100%;
    height: 42px; /* 높이 고정으로 균형 유지 */
    padding: 0 15px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    color: #2d3748;
    transition: all 0.2s;
}

.in-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 14px;
    color: #2d3748;
    resize: none;
    line-height: 1.6;
    transition: all 0.2s;
}

.in-input:focus, .in-textarea:focus {
    box-shadow: 0 0 0 1px #3182ce;
    outline: none;
}

/* 체크박스 영역 정렬 */
.request-table td.type-checks { padding:16px 20px; }
.type-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px; /* 행간 격차 조정 */
}

.type-checks label {
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
    gap:0 8px;
    font-weight:500;
}
/* 체크박스 기본 숨김 */
.type-checks input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid #cbd5e1; border-radius: 2px; background: #fff; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; transition: all 0.2s ease; }
.type-checks input[type="checkbox"]:hover { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12); }
.type-checks input[type="checkbox"]:checked { background: #3b82f6; border-color: #3b82f6; }
.type-checks input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 2px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.type-checks input[type="checkbox"]:disabled { background: #f1f5f9; border-color: #e2e8f0; cursor: not-allowed; opacity: 0.7; }
.type-checks th:has(input[type="checkbox"]),
.type-checks td:has(input[type="checkbox"]) { text-align: center; vertical-align: middle; }

/* 금액 영역 */
.budget-wrap {
    display: flex;
    align-items: center;
    gap:0 8px;
}

.budget-wrap span {
    font-weight: 700;
    font-size: 16px;
    color: #2d3748;
}
.budget-wrap input[name='budget'] { max-width:300px; }
.request-table td .budget-ex { font-size:12px; color:#84868B; }


    /* 파일 업로드 스타일업 */
.file-box {
    position:relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.file-label {
    display: inline-block;
    padding: 8px 18px;
    background: #4a5568;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.file-label:hover {
    background: #2d3748;
}

.file-name {
    font-size: 13px;
    color: #718096;
}
.file-box .hidden-file { position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; }

/* 버튼 영역 */
.btn-area {
    text-align: center;
    margin-top: 50px;
}

.submit-button {
    background: #3480fe;
    color: #fff;
    padding: 18px 80px;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgb(71 90 230 / 20%);
    transition: transform 0.1s, background 0.4s;
}

.submit-button:hover {
    background: #0A62F2;
    transform: translateY(-1px);
}

.submit-button:active {
    transform: translateY(0);
}

/* --- 반응형 대응 시작 --- */

/* 태블릿 및 작은 모니터 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .request-container {
        padding: 70px 20px;
    }

    .request-table colgroup col:first-child {
        width: 160px !important; /* 제목 영역 너비 축소 */
    }
    .file-name { word-break: break-all; }
}

/* 모바일 (768px 이하) */
@media screen and (max-width: 768px) {
    .request-header h2 {
        font-size: 24px;
    }

    .request-table,
    .request-table tbody,
    .request-table tr,
    .request-table th,
    .request-table td {
        display: block; /* 테이블 구조를 블록으로 해제 */
        width: 100%;
    }

    .request-table {
        border-top: 1px solid #1a202c;
    }

    .request-table tr {
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 0;
    }

    .request-table th {
        background-color: transparent; /* 모바일에서는 배경색 제거 */
        border-bottom: none;
        padding: 0 0 8px 0;
        font-size: 15px;
    }

    .request-table td {
        border-bottom: none;
        padding: 0;
    }

    /* 입력창 및 체크박스 간격 조정 */
    .in-input, .in-textarea {
        font-size: 16px; /* 모바일 input 포커스 시 브라우저 줌 방지 */
    }

    .request-table td.type-checks {
        gap: 12px 15px;
        padding:16px 0;
    }

    .request-table td.type-checks label {
        width: calc(50% - 15px); /* 모바일에서 2열로 배치 */
    }
    .request-table td.type-checks label + label { margin:10px 0 0; }

    .budget-wrap {
        flex-wrap: wrap;
    }

    .budget-wrap input[name='budget'] {
        max-width: 100%; /* 모바일에서 금액창 풀사이즈 */
        flex: 1;
    }

    .file-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .file-label {
        width: 100%;
        text-align: center;
    }

    .submit-button {
        width: 100%; /* 버튼 풀사이즈 */
        padding: 15px 0;
    }
}

/* 초소형 기기 (480px 이하) */
@media screen and (max-width: 480px) {
    .type-checks label {
        width: 100%; /* 아주 작은 화면에선 체크박스 1열 */
    }
}