/**
 * Nordinary 문의 폼 스타일 — hct.co.kr 레퍼런스
 */

/* 메시지 박스 */
.nordinary-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.nordinary-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
.nordinary-error { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
.nordinary-message svg { flex-shrink: 0; }

/* 필드 에러 */
.field-error { display: block; color: #dc3545; font-size: 12px; margin-top: 4px; }
input.error, textarea.error, select.error { border-color: #dc3545 !important; }

/* 로딩 스피너 */
.nordinary-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;
    border-top-color: white; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
button:disabled { opacity: 0.7; cursor: not-allowed; }

/* 문자 수 카운터 */
.char-counter { font-size: 12px; color: #666; text-align: right; }
.char-counter.text-red-500 { color: #dc3545; }

/* ===== 섹션 타이틀 ===== */
.inquiry-section-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.02em;
    padding-bottom: 16px;
    border-bottom: 2px solid #222;
    margin-bottom: 0;
}

/* ===== 가로형 필드 레이아웃 ===== */
.inquiry-field {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
}
.inquiry-field .field-label {
    width: 150px;
    flex-shrink: 0;
    padding-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    letter-spacing: -0.02em;
}
.inquiry-field .field-label .req {
    color: #EFBE00;
    font-size: 8px;
    vertical-align: middle;
    margin-left: 2px;
}
.inquiry-field .field-input {
    flex: 1;
    min-width: 0;
}

/* ===== 회색 배경 박스형 인풋 ===== */
.inquiry-field input[type="text"],
.inquiry-field input[type="email"],
.inquiry-field input[type="tel"],
.inquiry-field input[type="url"],
.inquiry-field select {
    border: none;
    border-radius: 6px;
    background: #f5f5f5;
    height: 48px;
    padding: 0 16px;
    font-size: 15px;
    color: #333;
    width: 100%;
    outline: none;
    transition: background 0.3s, box-shadow 0.3s;
    -webkit-appearance: none;
    appearance: none;
}
.inquiry-field input::placeholder,
.inquiry-field textarea::placeholder {
    color: #aaa;
    font-weight: 400;
}
.inquiry-field input:focus,
.inquiry-field select:focus {
    background: #f0f0f0;
    box-shadow: inset 0 0 0 1px #ccc;
}

/* select 화살표 */
.inquiry-field select {
    background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    padding-right: 40px;
}
.inquiry-field select:focus {
    background-color: #f0f0f0;
}

/* 연락처 분할 입력 */
.phone-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.phone-group input {
    flex: 1;
}
.phone-dash {
    color: #999;
    font-size: 15px;
    flex-shrink: 0;
}

/* 이메일 분할 입력 */
.email-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.email-group input { flex: 1; }
.email-at {
    color: #666;
    font-size: 15px;
    font-weight: 500;
    flex-shrink: 0;
}
.email-group select {
    width: 160px;
    flex-shrink: 0;
}

/* textarea */
.inquiry-field textarea {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 16px;
    font-size: 15px;
    color: #333;
    width: 100%;
    resize: none;
    outline: none;
    background: #f5f5f5;
    transition: background 0.3s, box-shadow 0.3s;
    line-height: 1.6;
}
.inquiry-field textarea:focus {
    background: #f0f0f0;
    box-shadow: inset 0 0 0 1px #ccc;
    border-color: #ccc;
}

/* 체크박스 커스텀 */
.inquiry-field input[type="checkbox"],
.privacy-agree input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}
.inquiry-field input[type="checkbox"]:checked,
.privacy-agree input[type="checkbox"]:checked {
    background: #333;
    border-color: #333;
}
.inquiry-field input[type="checkbox"]:checked::after,
.privacy-agree input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 라디오 커스텀 */
.inquiry-field input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s;
}
.inquiry-field input[type="radio"]:checked {
    border-color: #333;
}
.inquiry-field input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* 라디오/체크박스 필드: 세로 중앙정렬 */
.inquiry-field:has(.radio-group),
.inquiry-field:has(.category-group) {
    align-items: center;
}
.inquiry-field:has(.radio-group) .field-label,
.inquiry-field:has(.category-group) .field-label {
    padding-top: 0;
}

/* 카테고리 체크박스 그룹 */
.category-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
}
.category-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    padding: 4px 0;
    margin: 0;
}

/* 라디오 그룹 */
.radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 48px;
}
.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    margin: 0;
}

/* 파일 업로드 드롭존 */
.inquiry-field #dropZone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    border: 1px dashed #ccc;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 24px;
}
.inquiry-field #dropZone:hover {
    border-color: #999;
    background: #f5f5f5;
}
.inquiry-field #dropZone p {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}
.inquiry-field #dropZone p strong {
    color: #1a6cd1;
    text-decoration: underline;
}
.inquiry-field #dropZone p span {
    font-size: 12px;
    color: #aaa;
}

/* 개인정보 동의 */
.privacy-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
}
.privacy-agree label {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin: 0;
    cursor: pointer;
}
.privacy-agree a {
    color: #333 !important;
    text-decoration: underline !important;
}

/* 제출 버튼 */
#nordinary-inquiry-form button[type="submit"] {
    width: 100%;
    height: 56px;
    background: #222;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s;
    letter-spacing: -0.02em;
}
#nordinary-inquiry-form button[type="submit"]:hover:not(:disabled) {
    background: #000;
}

/* 폼 전체 */
#nordinary-inquiry-form { transition: opacity 0.3s ease; }
#nordinary-inquiry-form.submitting { opacity: 0.6; pointer-events: none; }
#nordinary-inquiry-form label { margin-bottom: 0; }

/* ===== 반응형: 모바일 세로 배치 ===== */
@media (max-width: 1023px) {
    .inquiry-section-title {
        font-size: 20px;
        padding-bottom: 12px;
    }
    .inquiry-field {
        flex-direction: column;
        gap: 10px;
        padding: 16px 0;
    }
    .inquiry-field .field-label {
        width: 100%;
        padding-top: 0;
        font-size: 14px;
    }
    .phone-group,
    .email-group {
        flex-wrap: wrap;
    }
    .email-group select {
        width: 100%;
    }
}

/* 성공 애니메이션 */
@keyframes checkmark {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}
.success-checkmark {
    stroke-dasharray: 100;
    animation: checkmark 0.5s ease-in-out;
}