/* ─────────────────────────────────────────────────────────────────────────
 * 1:1 문의 — prototype-v2 SoT: user-portal/inquiry/index.html inline <style>
 * ──────────────────────────────────────────────────────────────────────── */

.inquiry-container {
  max-width: 800px;
  /* UI-22 — 상단 여백은 portal-main 만 */
  margin: 0 auto 32px;
  padding: 0 var(--container-padding);
}
@media (min-width: 768px) {
  .inquiry-container { margin: 0 auto 60px; }
}

.inquiry-header {
  margin-bottom: 24px;
  text-align: center;
}
@media (min-width: 768px) {
  .inquiry-header { margin-bottom: 40px; }
}

.inquiry-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .inquiry-header h1 { font-size: 32px; }
}

.inquiry-header p {
  color: var(--text-secondary);
  font-size: 14px;
}
@media (min-width: 768px) {
  .inquiry-header p { font-size: 16px; }
}

.inquiry-card {
  background: var(--bg-surface);
  padding: 24px;
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-border);
}
@media (min-width: 768px) {
  .inquiry-card { padding: 40px; }
}

.inquiry-form-group {
  margin-bottom: 20px;
}

.inquiry-form-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.inquiry-form-control {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  /* background 축약형 금지 — 전역 select 꺾쇠(components.css)의 image/repeat/position을 리셋해
     다크 테마에서 꺾쇠가 타일링된다. 색만 지정. */
  background-color: var(--bg-darker);
  font-size: 15px;
  transition: all 0.2s;
  color: var(--text-main);
  font-family: inherit;
  box-sizing: border-box;
}
.inquiry-form-control:focus {
  outline: none;
  border-color: var(--primary);
  background-color: var(--bg-surface);
  box-shadow: 0 0 0 4px rgba(0, 75, 158, 0.1);
}
textarea.inquiry-form-control {
  min-height: 160px;
  resize: vertical;
}
@media (min-width: 768px) {
  textarea.inquiry-form-control { min-height: 200px; }
}

select.inquiry-form-control {
  appearance: none;
  padding-right: 40px;
}

.inquiry-file-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.inquiry-submit {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.inquiry-submit:hover:not(:disabled) {
  background: var(--primary-variant);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 75, 158, 0.2);
}
.inquiry-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.inquiry-notice {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-darker);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.inquiry-notice ul {
  padding-left: 18px;
  margin-top: 8px;
}
.inquiry-notice li {
  margin-bottom: 4px;
}

/* 첨부 파일 안내 힌트 */
.inquiry-file-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 이용 안내 박스 (프로토타입 정합) */
.inquiry-guide {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--bg-darker);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md, 10px);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.inquiry-guide strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
  font-size: 13px;
  margin-bottom: 10px;
}
.inquiry-guide ul {
  margin: 0;
  padding-left: 18px;
}
.inquiry-guide li { margin-bottom: 4px; }
.inquiry-guide li:last-child { margin-bottom: 0; }
.inquiry-guide a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.inquiry-guide a:hover { text-decoration: underline; }

/* ── 폼 헤더의 '내 문의 내역' 진입 링크 ───────────────────── */
.inquiry-history-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.inquiry-history-link:hover { text-decoration: underline; }

/* ── 목록/상세 공통 헤더 (제목 + 우측 액션) ──────────────── */
.inquiry-header--list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.inquiry-header--list h1 { margin-bottom: 6px; }
.inquiry-header--list p { margin: 0; }

.inquiry-new-btn,
.inquiry-back-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.inquiry-new-btn {
  background: var(--primary);
  color: #fff;
  border: none;
}
.inquiry-new-btn:hover { background: var(--primary-variant); }
.inquiry-back-link {
  background: var(--bg-darker);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}
.inquiry-back-link:hover { color: var(--text-main); }

/* ── 알림 배너 ───────────────────────────────────────────── */
.inquiry-banner {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inquiry-banner--error { background: var(--bg-accent-red); color: var(--danger); }
.inquiry-banner--success { background: #dcfce7; color: #166534; }
.inquiry-back-inline {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* ── 빈 상태 ─────────────────────────────────────────────── */
.inquiry-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.inquiry-empty i { font-size: 36px; opacity: 0.5; }
.inquiry-empty p { margin: 0; font-size: 14px; }

/* ── 문의 목록 ───────────────────────────────────────────── */
.inquiry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inquiry-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.inquiry-list-item:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--glass-shadow);
}
.inquiry-list-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inquiry-list-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inquiry-list-sub { font-size: 12px; color: var(--text-muted); }
.inquiry-list-chevron { color: var(--text-muted); font-size: 12px; }

/* ── 상태 배지 ───────────────────────────────────────────── */
.inquiry-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.inquiry-status--wait     { background: #fef3c7; color: #92400e; }
.inquiry-status--progress { background: #dbeafe; color: #1e40af; }
.inquiry-status--done     { background: #dcfce7; color: #166534; }
.inquiry-status--closed   { background: #e2e8f0; color: #475569; }

/* ── 페이지네이션 ────────────────────────────────────────── */
.inquiry-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-secondary);
}
.inquiry-pager button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
}
.inquiry-pager button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.inquiry-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 문의 상세 ───────────────────────────────────────────── */
.inquiry-detail {
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--glass-shadow);
}
@media (min-width: 768px) {
  .inquiry-detail { padding: 32px; }
}
.inquiry-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.inquiry-detail-cat { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.inquiry-detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.4;
}
.inquiry-detail-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 20px; }

.inquiry-detail-section {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--glass-border);
}
.inquiry-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
}
.inquiry-detail-body {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 첨부 목록 */
.inquiry-attach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inquiry-attach-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-darker);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}
.inquiry-attach-item:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.inquiry-attach-item:disabled { opacity: 0.6; cursor: progress; }
.inquiry-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-attach-size { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.inquiry-attach-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  color: #b91c1c;
}

/* 답변 */
.inquiry-answer-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.inquiry-answer-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--bg-darker);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-muted);
}