/**
 * croquis-ai-master-spec.md — 숨고 스타일 모바일 UI
 * mvp.css 위에 로드하여 토큰·390px 셸·컴포넌트 오버라이드
 */

:root {
  --cm-navy: #1b2b6b;
  --cm-ai-bg: #eff6ff;
  --cm-ai-text: #1e40af;
  --cm-input-border: #e5e7eb;
  --cm-empty-border: #d1d5db;
  --cm-warning-bg: #fff7ed;
  --cm-warning-text: #c2410c;
  --cm-kakao: #fae100;
  --cm-kakao-text: #3c1e1e;
  --cm-wechat: #07c160;
  --cm-gray-label: #64748b;
  --cm-body-text: #1e293b;
  --cm-shell: 390px; /* 모바일 기본 — 태블릿/PC는 미디어쿼리에서 오버라이드 */
  --cm-tap: 48px;
  --cm-cta: 56px;
  --cm-home-bar: 28px;
  --cm-input-fs: 16px;
}

/* ── 390px 셸 (모든 mvp 페이지) ───────────────────────── */
body.mvp {
  background: #f1f5f9;
  color: var(--cm-body-text);
}

.mvp-app-frame,
.mvp-main,
.mvp-history-main,
.mvp-landing-inner {
  max-width: var(--cm-shell);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.mvp-usage-chat {
  max-width: var(--cm-shell);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;
  padding-right: 16px;
}

.mvp-header {
  max-width: var(--cm-shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* 진행바 — 스펙 4px */
.mvp-progress-wrap {
  max-width: var(--cm-shell);
  margin: 0 auto;
  padding: 0 16px;
}
.mvp-progress-bar {
  height: 4px !important;
  border-radius: 4px;
  background: #e2e8f0 !important;
  overflow: hidden;
}
.mvp-progress-bar::after {
  background: var(--cm-navy) !important;
}
.mvp-progress-text {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-top: 6px;
}

/* Step 1 업로드 히어로 */
.cm-upload-hero-inner.mvp-dragover {
  border-color: var(--cm-navy);
  background: var(--cm-ai-bg);
}
.cm-upload-hero-inner {
  border: 2px dashed var(--cm-empty-border);
  border-radius: 20px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  background: #fff;
  margin-bottom: 12px;
}
.cm-upload-hero-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}
.cm-upload-hero-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cm-body-text);
  margin: 0 0 4px;
}
.cm-upload-hero-sub {
  font-size: 13px;
  color: var(--cm-gray-label);
  margin: 0;
}
.cm-upload-tip {
  font-size: 13px;
  color: var(--cm-gray-label);
  margin: 12px 0 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
}
.cm-upload-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.cm-upload-actions-row .mvp-btn {
  min-height: var(--cm-tap);
  font-size: 14px;
  border-radius: 12px;
}

.mvp-link-row {
  margin-top: 10px;
}
.mvp-link-row .mvp-input {
  font-size: var(--cm-input-fs) !important;
  min-height: var(--cm-tap);
}

/* composer / CTA */
.mvp-composer {
  padding-bottom: calc(var(--cm-home-bar) + env(safe-area-inset-bottom, 0px)) !important;
}
.mvp-btn-next,
.mvp-wish-cta,
.mvp-send-btn {
  min-height: var(--cm-cta) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.mvp-chat-input,
.mvp-input,
textarea.mvp-input {
  font-size: var(--cm-input-fs) !important;
  border-radius: 14px !important;
}
.mvp-chat-input {
  min-height: 120px;
}

/* 요청사항 힌트 칩 — 가로 스크롤 */
.mvp-hint-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mvp-hint-chips::-webkit-scrollbar {
  display: none;
}
.mvp-hint-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-input-border);
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
}

/* AI 말풍선 스타일 (플로우 상단 extra + 봇 메시지 보조) */
.mvp-flow-extra {
  background: var(--cm-ai-bg) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 16px !important;
  border: 1px solid #bfdbfe !important;
  color: var(--cm-body-text) !important;
  font-size: 15px;
  line-height: 1.55;
}

/* 퀵 답변: 차수 카드 */
.mvp-quick-replies.cm-quick-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cm-stage-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  text-align: left;
  border: 1.5px solid var(--cm-input-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.cm-stage-card:hover,
.cm-stage-card:focus-visible {
  border-color: var(--cm-navy);
  background: var(--cm-ai-bg);
}
.cm-stage-emoji {
  font-size: 22px;
  line-height: 1.2;
}
.cm-stage-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cm-stage-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cm-body-text);
}
.cm-stage-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.35;
}

/* 생산국 2열 그리드 */
.mvp-quick-replies.cm-quick-country {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cm-country-cell {
  min-height: 80px;
  padding: 12px 10px;
  border: 1.5px solid var(--cm-input-border);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
}
.cm-country-cell:hover,
.cm-country-cell:focus-visible {
  border-color: var(--cm-navy);
  background: var(--cm-ai-bg);
}
.cm-country-flag {
  font-size: 24px;
  line-height: 1;
}
.cm-country-title {
  font-size: 15px;
  font-weight: 700;
}
.cm-country-desc {
  font-size: 11px;
  color: #6b7280;
}

/* 분석 확인 세로 버튼 */
.mvp-quick-replies.cm-quick-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cm-confirm-yes.mvp-chip-btn-primary {
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  background: var(--cm-navy) !important;
  border: none !important;
  color: #fff !important;
}
.cm-confirm-no {
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--cm-input-border) !important;
  background: #fff !important;
  color: #374151 !important;
  font-weight: 500 !important;
}

/* 칩 기본 */
.mvp-chip-btn {
  min-height: var(--cm-tap);
  border-radius: 12px;
}

/* 결과 헤더 탭 */
.mvp-tab-btn {
  min-height: 44px;
  font-weight: 500;
}
.mvp-tab-btn.is-active {
  color: var(--cm-navy) !important;
  border-bottom: 2px solid var(--cm-navy) !important;
}

/* 카카오 / 위챗 공유 */
.mvp-btn-kakao-share {
  min-height: var(--cm-cta) !important;
  background: var(--cm-kakao) !important;
  color: var(--cm-kakao-text) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 14px !important;
  border: none !important;
}
.mvp-btn-wechat-share {
  min-height: 52px !important;
  background: var(--cm-wechat) !important;
  color: #fff !important;
  border-radius: 14px !important;
  border: none !important;
}

/* 로딩 오버레이 바 */
.mvp-flow-track {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.mvp-flow-fill {
  transition: width 0.35s ease;
}

/* 로그인 — 스펙 버튼 */
.mvp-btn-kakao-main {
  min-height: var(--cm-cta) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.mvp-btn-secondary-oauth {
  min-height: 52px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e5e7eb !important;
}
.mvp-auth-footnote {
  font-size: 13px !important;
  color: #6b7280 !important;
  text-align: center;
}

/* 히스토리 검색 */
.mvp-hist-search-input {
  min-height: 44px !important;
  font-size: var(--cm-input-fs) !important;
}

/* 경고 배너 (사이즈 미입력) */
.mvp-preset-ai-pick {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1e40af;
  vertical-align: middle;
}
.mvp-size-rec-preset small {
  display: block;
  margin-top: 4px;
}

.mvp-sizes-warn,
.mvp-export-warn {
  background: var(--cm-warning-bg) !important;
  color: var(--cm-warning-text) !important;
  border: 1px solid #fed7aa !important;
  border-radius: 12px !important;
}

/* ── 반응형: 태블릿 ── */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --cm-shell: 680px; }
  .mvp-app-frame,
  .mvp-main,
  .mvp-landing-inner { max-width: 680px; }
  .mvp-header { max-width: 680px; }
  .mvp-progress-wrap { max-width: 680px; }
  .mvp-usage-chat { max-width: 680px; }
}

/* ── 반응형: PC ── */
@media (min-width: 1025px) {
  :root { --cm-shell: 800px; }
  .mvp-app-frame,
  .mvp-main,
  .mvp-landing-inner { max-width: 800px; }
  .mvp-header { max-width: 800px; }
  .mvp-progress-wrap { max-width: 800px; }
  .mvp-usage-chat { max-width: 800px; }
}