/* ============================================================
   support.css - 고객 지원 페이지 전용 스타일

   설명: 문의 폼, FAQ(자주 묻는 질문), 연락처 정보 등
         고객 지원 페이지에서 사용하는 스타일입니다.
   ============================================================ */

/* ──── 문의 폼 + 연락처 레이아웃 ──── */
.support-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;  /* 폼 넓게, 연락처 좁게 */
    gap: var(--space-xl);
    align-items: start;
}

/* ──── 문의 폼 스타일 ──── */
.contact-form {
    background-color: var(--color-card-bg);
    padding: var(--space-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.contact-form__title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-lg);
}

/* 폼 입력 그룹 */
.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

/* 필수 항목 표시 (*) */
.form-group label .required {
    color: var(--color-error);
    margin-left: 2px;
}

/* 입력 필드 공통 스타일 */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-body);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast);
    background-color: var(--color-input-bg);
}

/* 입력 필드 포커스 (클릭 시) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;               /* 기본 포커스 테두리 제거 */
    border-color: var(--color-ice-blue);
    box-shadow: 0 0 0 3px rgba(0,120,212,0.1);
}

/* 텍스트 영역 (문의 내용) */
.form-group textarea {
    min-height: 150px;
    resize: vertical;            /* 세로로만 크기 조절 가능 */
}

/* 2컬럼 입력 필드 (이름, 전화번호 나란히) */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

/* 폼 제출 버튼 */
.contact-form .btn {
    width: 100%;
    margin-top: var(--space-md);
    padding: 14px;
}

/* 폼 제출 성공 메시지 */
.form-success {
    display: none;
    text-align: center;
    padding: var(--space-xl);
}

.form-success.show {
    display: block;
}

.form-success__icon {
    font-size: 48px;
    margin-bottom: var(--space-md);
}

.form-success__message {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-sm);
}

.form-success__sub {
    font-size: var(--font-size-caption);
    color: var(--color-cool-gray);
}

/* ──── 연락처 카드 ──── */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-card {
    background-color: var(--color-card-bg);
    padding: var(--space-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.contact-card__title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
    margin-bottom: var(--space-md);
}

.contact-card__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.contact-card__icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(0,120,212,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card__label {
    font-size: var(--font-size-small);
    color: var(--color-cool-gray);
    margin-bottom: 2px;
}

.contact-card__value {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-heading);
}

/* ──── FAQ 아코디언 ──── */
.faq-section {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

/* FAQ 질문 (클릭 가능한 헤더) */
.faq-item__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) 0;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--color-heading);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.faq-item__question:hover {
    color: var(--color-ice-blue);
}

/* FAQ 화살표 아이콘 */
.faq-item__icon {
    font-size: 20px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

/* FAQ가 열렸을 때 화살표 회전 */
.faq-item.active .faq-item__icon {
    transform: rotate(180deg);
}

/* FAQ 답변 (숨겨진 상태) */
.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

/* FAQ가 열렸을 때 답변 표시 */
.faq-item.active .faq-item__answer {
    max-height: 300px;
}

.faq-item__answer-text {
    padding-bottom: var(--space-lg);
    font-size: var(--font-size-caption);
    color: var(--color-cool-gray);
    line-height: 1.7;
}

/* 다크모드에서 폼/카드에 테두리 추가 */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .contact-card {
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    border-color: var(--color-input-border);
    background-color: var(--color-input-bg);
    color: var(--color-text-dark);
}