/* /var/www/html/assets/css/contact.css : 문의하기 페이지 전용 스타일 */

.ct-tool {
  margin-top: 8px;
}

.ct-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-field label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.ct-field select,
.ct-field textarea {
  appearance: none;
  width: 100%;
  padding: 11px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 다크 UI에서 native 드롭다운/옵션이 밝게 보이도록 */
  color-scheme: dark;
}

/* 드롭다운 화살표 표시 (appearance:none 이라 직접 그림) */
.ct-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* 드롭다운 목록 항목 가독성 (흰 배경+밝은 글자로 안 보이는 문제 방지) */
.ct-field option {
  background: var(--bg-soft);
  color: var(--text);
}

/* 선택 전 안내(placeholder) 옵션은 흐리게 */
.ct-field option[disabled] {
  color: var(--muted);
}

.ct-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.ct-field select:focus,
.ct-field textarea:focus {
  outline: none;
  border-color: var(--text);
}

.ct-count {
  align-self: flex-end;
  font-size: 0.8rem;
  color: var(--muted);
}

.ct-guide {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}

/* 버튼 (도구 공통) */
.btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 18px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--text);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--text);
  color: #111;
  border-color: var(--text);
}

.btn-primary:hover:not(:disabled) {
  background: #ffffff;
}

.ct-actions {
  display: flex;
}

.ct-note {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ct-note[data-type="success"] { color: #4bbf73; }
.ct-note[data-type="error"] { color: #e06666; }
.ct-note[data-type="info"] { color: var(--muted); }