/* ========================================
    그누보드5 차량 문의 게시판 스킨 스타일
    - 5-Column Drill-down UI
    ======================================== */

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

.required {
    color: #ff4757;
    font-weight: 700;
}

/* ========================================
    문의 게시판 컨테이너
    ======================================== */
.inquiry-board-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 12px;
}

/* ========================================
    Step Indicator (단계 표시)
    ======================================== */
.inquiry-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}
/* [수정] 2단계에 맞게 라인 길이 조절 */
.inquiry-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 25%;
    right: 25%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}
.step-item {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}
.step-number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #333;
    font-weight: bold;
    font-size: 18px;
    margin: 0 auto 10px;
    transition: all 0.3s;
}
.step-item.active .step-number {
    background-color: #4169e1;
    transform: scale(1.1);
}
.step-label {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}
.step-item.active .step-label {
    color: #4169e1;
    font-weight: 700;
}

/* ========================================
    Step Content (단계별 콘텐츠)
    ======================================== */
.inquiry-step-content {
    display: none;
    padding: 30px;
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: 8px;
    margin-bottom: 30px;
}
.inquiry-step-content.active {
    display: block;
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.step-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #fff;
}

/* ========================================
    [1단계] 계단식 컬럼 UI
    ======================================== */
.car-selector-container {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 400px; /* 고정 높이 */
    background: #fff;
    overflow: hidden;
}

.selector-column {
    flex: 1;
    min-width: 180px; /* 컬럼 최소 너비 */
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}
.selector-column:last-child {
    border-right: none;
}

.selector-header {
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #4169e1; /* 파란색 헤더 */
    border-bottom: 1px solid #ddd;
    text-align: center;
    flex-shrink: 0;
}

.selector-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto; /* 내용 많으면 스크롤 */
    flex-grow: 1;
}

.selector-list li {
    padding: 12px 15px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap; /* 줄바꿈 방지 */
}
.selector-list li:last-child {
    border-bottom: none;
}
.selector-list li:hover {
    background: #f5f5f5;
}
.selector-list li.selected {
    background: #e6f0ff;
    color: #4169e1;
    font-weight: 600;
}

/* 비활성화된 컬럼 (선택 대기) */
.selector-column.disabled .selector-list {
    background: #f9f9f9;
}
.selector-column.disabled .selector-list li {
    display: none; /* 상위 선택 전까지 숨김 */
}


/* ========================================
    [2단계] 이미지/옵션 분할 레이아웃
    ======================================== */
.step2-layout-container {
    display: flex;
    gap: 30px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
}
.step2-left-panel {
    flex: 1;
    min-width: 0;
}
.step2-right-panel {
    flex: 1;
    min-width: 0;
}

/* [노이미지 수정 3] CSS 수정 */
.step2-car-image-box {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    /* [추가] No-Image 상태를 위한 스타일 */
    aspect-ratio: 16 / 10; /* 이미지 비율 유지 */
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* [추가] No-Image 상태일 때 텍스트 */
.step2-car-image-box.no-image::before {
    content: "차량 이미지가 없습니다.";
    font-size: 14px;
    color: #999;
    font-weight: 500;
}
.step2-car-image-box img {
    width: 100%;
    height: 100%; /* [수정] height: auto -> 100% */
    object-fit: cover; /* [추가] 비율 맞춰서 채우기 */
    display: block;
}

.step2-car-info {
    margin-top: 20px;
    text-align: left;
}
.step2-car-info h4 {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}
.step2-car-info p {
    font-size: 15px;
    color: #666;
}

/* 2단계 오른쪽 패널 라벨/그룹 스타일 */
.step2-right-panel .form-group {
    margin-bottom: 25px;
}
.step2-right-panel .form-group:last-child {
    margin-bottom: 0;
}

.step2-right-panel .form-label {
    color: #333; /* 흰색 배경이므로 글자색 변경 */
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
}
/* [추가] 2단계 폼 컨트롤 스타일 */
.step2-right-panel .form-control {
    background: #fdfdfd;
}
.step2-right-panel .form-control:focus {
    background: #fff;
}


/* ========================================
    Form Elements (폼 요소)
    ======================================== */
.form-section {
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 25px;
}
.form-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}
.form-control {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: border 0.3s;
}
.form-control:focus {
    outline: none;
    border-color: #4169e1;
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* ========================================
    Radio Group (라디오 그룹)
    ======================================== */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.radio-group input[type="radio"] {
    display: none;
}
.radio-label {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    flex: 1;
    text-align: center;
}
.radio-label:hover {
    background: #eee;
    border-color: #ccc;
}
.radio-group input[type="radio"]:checked + .radio-label {
    color: #fff;
    background: #4169e1;
    border-color: #4169e1;
    font-weight: 600;
}

/* ========================================
    Summary Box (요약 박스)
    ======================================== */
.summary-box {
    padding: 20px;
    background: #fff;
    border: 2px solid #4169e1;
    border-radius: 8px;
    margin-bottom: 30px;
}
.summary-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.summary-item:last-child {
    border-bottom: none;
}
.summary-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}
.summary-value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

/* ========================================
    Button Group (버튼 그룹)
    ======================================== */
.button-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 30px;
}
.btn-prev,
.btn-next,
.btn-submit {
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s;
}
.btn-prev {
    color: #666;
    background: #fff;
    border: 2px solid #ddd;
}
.btn-prev:hover {
    background: #f0f0f0;
}
.btn-next,
.btn-submit {
    color: #fff;
    background: #4169e1;
    border: 2px solid #4169e1;
}
.btn-next:hover,
.btn-submit:hover {
    background: #3558c9;
    border-color: #3558c9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}
.btn-next:disabled,
.btn-submit:disabled {
    background: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* ========================================
    [추가] list.skin.php (목록) 스타일
    ======================================== */

.inquiry-list-section {
    margin-top: 20px;
    border-top: none;
    padding-top: 0;
}

.inquiry-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.inquiry-table thead {
    background: #4169e1;
    color: #fff;
}

.inquiry-table th,
.inquiry-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.inquiry-table th {
    font-weight: 600;
    font-size: 14px;
}

.inquiry-table td {
    font-size: 13px;
    color: #555;
}

.inquiry-table tbody tr:hover {
    background: #f9f9f9;
}

.inquiry-table .no-data {
    text-align: center;
    padding: 40px 15px;
    color: #999;
}

.inquiry-table a {
    color: #4169e1;
    text-decoration: none;
    font-weight: 600;
}
.inquiry-table a:hover {
    text-decoration: underline;
}

/* ========================================
    [추가] Pagination (페이징)
    ======================================== */

.pagination {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}
.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 3px;
    font-size: 14px;
    color: #777;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
}
.pagination a:hover {
    background: #f0f0f0;
}
.pagination a.on {
    font-weight: bold;
    color: #fff;
    background: #4169e1;
    border-color: #4169e1;
}

/* ========================================
    [추가] No Data (데이터 없음)
    ======================================== */

.no-data {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 16px;
}

/* ========================================
    Responsive Design (반응형)
    ======================================== */
@media (max-width: 768px) {
    .inquiry-board-container {
        margin: 20px 10px;
        padding: 15px;
    }

    /* ========================================
        [!!!][수정] 1단계 컬럼 UI (좌우 스크롤 제거)
        ======================================== */
    .car-selector-container {
        flex-direction: column; /* 세로 방향으로 변경 */
        overflow-x: hidden;  /* 가로 스크롤 제거 */
        height: auto; /* 고정 높이 제거 */
        border: 1px solid #ddd;
    }
    .selector-column {
        min-width: 100%; /* 너비 100% */
        width: 100%;
        border-right: none; /* 오른쪽 테두리 제거 */
        border-bottom: 1px solid #ddd; /* 하단 테두리로 변경 */
    }
    .selector-column:last-child {
        border-bottom: none; /* 마지막 컬럼 하단 테두리 제거 */
    }
    /* 각 목록이 너무 길어지는 것을 방지하기 위해 최대 높이 설정 */
    .selector-column .selector-list {
        max-height: 250px; 
    }
    .selector-column.disabled {
         display: none;
    }

    /* [2단계] 2단계 레이아웃 모바일 */
    .step2-layout-container {
        flex-direction: column;
        padding: 20px;
        gap: 25px;
    }
    .step2-car-info h4 { font-size: 20px; }
    .step2-car-info p { font-size: 14px; }
    
    .radio-group {
        flex-direction: row; /* 모바일에서는 2개씩 보이도록 */
    }

    .button-group {
        flex-direction: column;
    }
    .btn-prev, .btn-next, .btn-submit {
        width: 100%;
    }

    /* ========================================
        [!!!][수정] 768px 이하 모바일 목록 테이블 (list.skin.php)
        ======================================== */
    .inquiry-table {
        border: none; /* 테이블 전체 테두리 제거 */
    }

    .inquiry-table thead {
        display: none; /* 데스크탑용 헤더 숨김 */
    }

    .inquiry-table tr {
        display: block; /* 행(row)을 블록(카드) 형태로 변경 */
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #fff;
        overflow: hidden; /* border-radius 적용 */
    }
    
    .inquiry-table td {
        display: block; /* 셀(data)을 블록으로 변경 */
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        text-align: right; /* 내용을 오른쪽으로 정렬 */
        font-size: 14px;
    }
    .inquiry-table td:last-child {
        border-bottom: none;
    }

    /* ::before 가상 요소를 사용해 data-label 값을 라벨로 표시 */
    .inquiry-table td::before {
        content: attr(data-label); /* data-label 속성값 가져오기 */
        float: left; /* 라벨은 왼쪽으로 정렬 */
        font-weight: 600;
        color: #333;
    }
    
    /* '문의 정보' 셀 (제목)은 특별 처리 */
    .inquiry-table td[data-label="문의 정보"] {
        text-align: left; /* 제목은 왼쪽 정렬 */
        padding-top: 15px;
        padding-bottom: 15px;
        background: #f9f9f9; /* 헤더처럼 배경색 살짝 추가 */
    }
    .inquiry-table td[data-label="문의 정보"]::before {
        display: none; /* '문의 정보:' 라는 라벨은 숨김 */
    }
    .inquiry-table td[data-label="문의 정보"] a {
        font-size: 16px; /* 제목 폰트 키움 */
    }

    /* '상태' 셀 강조 */
    .inquiry-table td[data-label="상태"] {
        font-weight: 700;
    }
    
    .inquiry-table .no-data {
        text-align: center;
        padding: 40px 15px;
    }
}