/* ==========================================================================
   채팅형 견적문의 (/quote/) — 숨고 요청서 화면(soomgo.com/request-form)의 CSS 수치를 그대로 옮겼다.
   숨고 클래스 → 여기: header-container → .nq-head, title-wrapper → .nq-title-wrap,
   progress-wrapper → .nq-progress-wrap, form-wrapper → .nq-form, messages → .nq-messages,
   message-wrapper → .nq-mw, message → .nq-msg, answer-sheet → .nq-sheet, answers/answer → .nq-answers/.nq-answer.
   숨고 보라색 #693BF2(눌렀을 때 #5400d7) 자리에만 사이트 빨강을 쓴다.
   ========================================================================== */

.nq-page {
  --nq-primary: var(--red);
  --nq-primary-press: #c80014;
  --nq-ink: #293341;
  --nq-title: #1c242f;
  --nq-sub: #6a7685;
  --nq-gray: #eff1f5;
  --nq-line: #e0e5eb;
  --nq-muted: #aab4bf;
  --nq-header: 80px;
  font-family: Pretendard, "Pretendard Variable", "Malgun Gothic", -apple-system, sans-serif;
  color: var(--nq-ink);
  font-size: 16px;
  line-height: 24px;
}
.nq-page *, .nq-page *::before, .nq-page *::after { box-sizing: border-box; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 숨고처럼 화면에 꽉 차고(푸터 없음), 대화 영역만 따로 스크롤 */
.nq-app {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nq-header));
  height: calc(100dvh - var(--nq-header));
  margin-top: var(--nq-header);
}

/* ── header-container ── */
.nq-head { flex-shrink: 0; background: #fff; padding-top: 1.5rem; }
.nq-title-wrap { position: relative; display: flex; flex-direction: row; width: 37.5rem; margin: 0 auto 0.75rem; padding: 0; }
.nq-title-wrap .nq-back { display: none; }
.nq-title-wrap button { display: flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.nq-form-title { margin: 0; }
.nq-form-title h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; color: var(--nq-title); }
.nq-info { margin-left: 0.5rem; color: var(--nq-muted); }
.nq-info:hover { color: var(--nq-sub); }
.nq-info-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(22.5rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--nq-ink);
  font-size: 14px;
  line-height: 21px;
  color: #fff;
  word-break: keep-all;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ── progress-wrapper ── */
.nq-progress-wrap { display: flex; align-items: center; width: 37.5rem; margin: 0 auto; padding: 0 0 1rem; }
.nq-progress {
  flex: 1;
  height: 0.25rem;
  border: 0;
  border-radius: 3px;
  background-color: var(--nq-gray);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.nq-progress::-webkit-progress-bar { background-color: var(--nq-gray); border-radius: 3px; }
.nq-progress::-webkit-progress-value { background-color: var(--nq-primary); border-radius: 3px; transition: width 0.6s; }
.nq-progress::-moz-progress-bar { background-color: var(--nq-primary); border-radius: 3px; }
.nq-percent { width: 3.4375rem; margin: 0; font-size: 14px; font-weight: 700; line-height: 21px; color: var(--nq-primary); text-align: right; font-variant-numeric: tabular-nums; }

/* ── form-wrapper: 회색, 이 영역만 스크롤(스크롤바는 숨김) ── */
.nq-form {
  flex: 1;
  min-height: 0; /* flex 안에서 내용이 길어져도 이 영역이 스크롤되도록 */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--nq-gray);
  scrollbar-width: none;
}
.nq-form::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ── messages: 600px 줄. 아래 여백은 JS가 '마지막 질문이 위로 올라올 만큼' 채운다 ── */
.nq-messages {
  width: 37.5rem;
  margin: 0 auto;
  padding: 2rem 0 var(--nq-tail, 1.5rem);
  list-style: none;
}
.nq-mw { margin-bottom: 1rem; }
.nq-mw:last-of-type { margin-bottom: 0; }
.nq-mw.is-answer { padding-top: 0.5rem; margin-bottom: 1.5rem; text-align: right; }
.nq-mw.is-answer + .is-answer { padding-top: 0; }

/* 말풍선 */
.nq-msg {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 1.75rem;
  width: auto;
  max-width: 25rem;
  padding: 1.25rem;
  border-radius: 4px 16px 16px 16px;
  background-color: #fff;
  text-align: left;
}
.nq-msg.is-info { max-width: 20rem; }
.nq-content { margin: 0; overflow: hidden; white-space: pre-wrap; word-break: keep-all; animation: nq-fade 0.2s ease-in both; }
.nq-title { font-weight: 500; }
.nq-sub { display: block; margin-top: 0.25rem; font-size: 14px; line-height: 21px; color: var(--nq-sub); }
@keyframes nq-fade { from { opacity: 0; } to { opacity: 1; } }

/* 내 답(오른쪽) */
.is-answer .nq-msg {
  max-width: 22.5rem;
  padding: 1rem 1.25rem;
  border-radius: 16px 4px 16px 16px;
  background-color: #465162;
  color: #fff;
}
.is-answer .nq-title { font-weight: 400; }
.nq-edit-wrap { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.nq-edit { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 400; color: var(--nq-sub); text-decoration: underline; cursor: pointer; }

/* 입력 중(점 세 개) — 숨고 lottie 말풍선과 같은 크기 */
.nq-msg.is-loading { flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: 7rem; height: 3rem; padding: 0; }
.nq-msg.is-loading i { width: 8px; height: 8px; border-radius: 50%; background: #c5cdd6; animation: nq-dot 1.2s infinite ease-in-out; }
.nq-msg.is-loading i:nth-child(2) { animation-delay: 0.15s; }
.nq-msg.is-loading i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nq-dot { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* ── answer-sheet: 질문 말풍선 안의 선택지·입력칸 + 다음 ── */
.nq-sheet {
  display: flex;
  flex-direction: column;
  width: 22.5rem;
  height: max-content;
  max-height: 24.125rem;
  margin-bottom: 0.25rem;
  background-color: #fff;
}
.nq-sheet-body { flex: 1; min-height: 0; width: 100%; padding-bottom: 0.75rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nq-sheet-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.nq-answers { margin: 0; padding: 0; list-style: none; border: 0; min-width: 0; }
.nq-answer {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border: 1px solid var(--nq-gray);
  border-radius: 8px;
  background-color: #fff;
}
.nq-answer:last-child { margin-bottom: 0; }
.nq-answer input { position: absolute; opacity: 0; pointer-events: none; }
.nq-answer label { display: flex; flex-direction: row; flex-grow: 1; margin: 0; cursor: pointer; }
.nq-icon { display: flex; flex-shrink: 0; align-self: center; width: 1.5rem; height: 1.5rem; margin: auto 0.5rem auto 0; color: var(--nq-line); }
.nq-icon svg { width: 100%; height: 100%; }
.nq-icon .on { display: none; }
.nq-answer input:checked + label .nq-icon,
.nq-agree input:checked + label .nq-icon { color: var(--nq-primary); }
.nq-answer input:checked + label .nq-icon .off,
.nq-agree input:checked + label .nq-icon .off { display: none; }
.nq-answer input:checked + label .nq-icon .on,
.nq-agree input:checked + label .nq-icon .on { display: block; }
.nq-answer input:focus-visible + label .nq-icon,
.nq-agree input:focus-visible + label .nq-icon { outline: 2px solid var(--nq-primary); outline-offset: 2px; border-radius: 50%; }
.nq-text-area { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.nq-text { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--nq-ink); }
.nq-text-desc { margin-top: 0.125rem; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--nq-sub); }

/* 글 입력칸 (숨고 text-field) */
.nq-sheet.is-text .nq-sheet-body { padding-bottom: 0; }
.nq-field { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.nq-field + .nq-field { margin-top: 0.5rem; }
.nq-field-label { display: block; margin-bottom: 0.25rem; font-size: 12px; line-height: 18px; color: var(--nq-sub); }
.nq-textarea,
.nq-input {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--nq-line);
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--nq-ink);
  outline: none;
  resize: none;
}
.nq-textarea { height: 96px; }
.nq-textarea::placeholder,
.nq-input::placeholder { color: var(--nq-muted); }
.nq-textarea:focus,
.nq-input:focus { border-color: var(--nq-primary); }
.nq-validation { margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--nq-muted); text-align: right; }
.nq-validation span { color: var(--nq-primary); }

/* 개인정보 동의 (체크박스 아이콘 재사용) */
.nq-agree { position: relative; margin-top: 0.75rem; }
.nq-agree input { position: absolute; opacity: 0; pointer-events: none; }
.nq-agree label { display: flex; align-items: center; font-size: 14px; line-height: 21px; cursor: pointer; }
.nq-agree .nq-icon { margin: 0 0.5rem 0 0; }
.nq-agree-detail { margin: 0.25rem 0 0 2rem; font-size: 12px; line-height: 18px; color: var(--nq-sub); word-break: keep-all; }
.nq-agree-detail a { color: var(--nq-sub); text-decoration: underline; }
.nq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nq-error { margin: 0.5rem 0 0; font-size: 13px; line-height: 19px; color: var(--nq-primary); }

/* button-wrapper: 다음(+ 건너뛰기) */
.nq-buttons { position: relative; display: flex; flex-direction: row; gap: 0.75rem; width: 100%; height: 4rem; padding-top: 1rem; flex-shrink: 0; }
.nq-btn {
  flex: 1;
  height: 3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}
.nq-btn.is-submit { background-color: var(--nq-primary); color: #fff; }
.nq-btn.is-submit:not(:disabled):active { background-color: var(--nq-primary-press); }
.nq-btn.is-submit:disabled { background-color: var(--nq-line); color: var(--nq-muted); cursor: unset; }
.nq-btn.is-skip { border: 1px solid var(--nq-line); background: #fff; color: var(--nq-ink); }

/* 접수 완료 */
.nq-done-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.nq-done-actions a { display: flex; align-items: center; justify-content: center; height: 3rem; border-radius: 6px; font-size: 16px; font-weight: 500; text-decoration: none; }
.nq-done-actions .is-home { background: var(--nq-primary); color: #fff; }
.nq-done-actions .is-call { border: 1px solid var(--nq-line); color: var(--nq-ink); }

.nq-noscript { width: 37.5rem; max-width: calc(100% - 2rem); margin: 2rem auto; padding: 1.25rem; border-radius: 16px; background: #fff; }

/* ── 모바일 (숨고 767.98px 이하 값) ── */
@media (max-width: 900px) { .nq-page { --nq-header: 61px; } }
@media (max-width: 767.98px) {
  .nq-head { padding-top: 0; }
  .nq-title-wrap { width: auto; height: 3.625rem; margin: 0; padding: 0.9375rem 0.75rem; }
  .nq-title-wrap .nq-back { display: flex; }
  .nq-form-title { margin: 0 auto; }
  .nq-form-title h1 { font-size: 18px; line-height: 28px; }
  .nq-info-pop { left: auto; right: 0.75rem; }
  .nq-progress-wrap { width: auto; padding: 0.5rem 1rem; }
  .nq-percent { width: 2.9375rem; }
  .nq-messages { width: auto; padding: 1rem 1rem var(--nq-tail, 1.5rem); }
  .nq-msg { gap: 1.5rem; max-width: 18.5rem; padding: 1rem 1.25rem; }
  .is-answer .nq-msg { max-width: 15rem; padding: 0.75rem 1rem; }
  .nq-sheet { width: 16rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nq-content { animation: none; }
  .nq-progress::-webkit-progress-value { transition: none; }
}