:root {
  /* 컬러 시스템 — 배경별 대비 규칙 */
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-gray: #f3f4f6;
  --bg-gray-mid: #e5e7eb;
  --bg-blue-tint: #eff6ff;
  --bg-blue-tint2: #dbeafe;
  --bg-green-tint: #f0fdf4;
  --bg-green-tint2: #dcfce7;
  --bg-amber-tint: #fffbeb;
  --bg-amber-tint2: #fef9c3;
  --bg-red-tint: #fff5f5;
  --bg-red-tint2: #fee2e2;
  /* 2026-04-18 대표 Day 6: --navy 를 /app 기준 #1b2b6b 로 통일 (이전 #1b2b6b Indigo-900은 --accent 와 불일치했음).
     코드 전역의 var(--navy), #1b2b6b 하드코딩이 하나의 Navy 로 수렴. */
  --navy: #1b2b6b;
  --navy-hover: #152357;
  --text-on-light: #1a1a1a;
  --text-on-blue-tint: #1b2b6b;
  --text-on-navy: #ffffff;
  --text-on-green-tint: #15803d;
  --text-on-amber-tint: #92400e;
  --text-on-red-tint: #dc2626;
  --text-on-gray-bg: #374151;
  --text-kakao: #3c1e1e;
  --text-wechat-on: #ffffff;
  --placeholder: #9ca3af;
  --caption: #6b7280;
  --muted: #6b7280;
  --text: #1a1a1a;
  /* 2026-04-18 designer-yerin: /app 기준 네이비 #1b2b6b로 accent 통일. 전 페이지 버튼·링크 primary 컬러 일관성 확보. */
  --accent: #1b2b6b;
  --accent-hover: #152357;
  /* 2026-04-18 대표 Day 6: --border 를 /app .dash-recent-card border 색(#e2e8f0)으로 통일 */
  --border: #e2e8f0;
  --radius: 12px;
  --max: 390px;
  --tap-min: 48px;
  --cta-height: 56px;
  --home-bar-pad: 28px;
  --input-ios: 16px;

  /* 타이포그래피 (모바일 기준) */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --leading-tight: 1.4;
  --leading-normal: 1.6;
  --leading-loose: 1.8;
  --tracking-korean: -0.02em;
  --tracking-label: 0em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --text-aux: #888888;

  /* ==========================================================================
     [Phase 1 · 2026-04-23] 디자인 일관화 토큰
     DRI: designer-yerin (스펙) + fe-taehyun (impl)
     정본: guidelines/05_page_layout_standard.md + guidelines/04_typography_spacing.md
     기준: Image #18 홈 · navy #1b2b6b (기존 --accent 와 동일값으로 수렴)
     원칙: 기존 --navy/--accent/--border 토큰은 그대로 살려둠 (사용처 100회+).
            신규 토큰은 '확장'이지 '교체'가 아님. 마이그레이션은 Phase 2~5에서 점진적으로.
     ========================================================================== */

  /* 1. Navy 계열 — Primary */
  --navy-900: #1b2b6b;   /* Primary — 로고·주요 버튼 */
  --navy-800: #162356;   /* Primary hover */
  --navy-100: #eef2ff;   /* Primary light — 선택 배경 */
  --navy-50:  #f8fafc;   /* Surface — 페이지 배경·secondary 버튼 */

  /* 2. Text 계열 — slate 기반 위계형 */
  --text-1: #0f172a;     /* H1·H2 — 제목 */
  --text-2: #1e293b;     /* Body strong — 강조 본문 */
  --text-3: #475569;     /* Body — 기본 본문 */
  --text-4: #64748b;     /* Caption — 서브·H1 아래 설명 */
  --text-5: #94a3b8;     /* Placeholder — 비활성·힌트 */

  /* 3. Border 계열 */
  --border-1: #eef2f7;   /* 카드 테두리 — 가장 옅음 */
  --border-2: #e2e8f0;   /* 인풋·폼 테두리 (기존 --border 와 동일) */

  /* 4. Tab 4색 — 수정사항 분류 */
  --tab-fit:        #3b82f6;   /* 핏·사이즈 — 파랑 */
  --tab-fit-bg:     #eff6ff;
  --tab-fabric:     #f59e0b;   /* 원단 — 주황 */
  --tab-fabric-bg:  #fffbeb;
  --tab-detail:     #a855f7;   /* 디테일 — 보라 */
  --tab-detail-bg:  #faf5ff;
  --tab-sewing:     #10b981;   /* 봉제·마감 — 초록 */
  --tab-sewing-bg:  #ecfdf5;

  /* 5. Role Pill — 권한 위계 (owner > editor > viewer) */
  --role-owner-bg:  #ede9fe;   /* grape-100 */
  --role-owner-fg:  #6d28d9;   /* grape-700 */
  --role-editor-bg: #e0f2fe;   /* sky-100 */
  --role-editor-fg: #0369a1;   /* sky-700 */
  --role-viewer-bg: #f1f5f9;   /* slate-100 */
  --role-viewer-fg: #475569;   /* slate-600 */

  /* 6. Tracking — 역할별 letter-spacing (한글 기준) */
  --tracking-display: -0.035em;  /* H1·대제목 28px+ */
  --tracking-h1:      -0.035em;  /* H1 명시적 alias */
  --tracking-h2:      -0.030em;  /* H2·섹션 제목 20-22px */
  --tracking-body:    -0.015em;  /* 본문·서브·플레이스홀더 13-15px */
  --tracking-button:  -0.020em;  /* 모든 CTA */
  --tracking-badge:   -0.005em;  /* 뱃지·칩·라벨 (양수 금지) */
  --tracking-numeric: 0em;       /* 숫자·퍼센트 */
}

* { box-sizing: border-box; }
html {
  overflow-x: hidden;
}
.hidden { display: none !important; }

.factory-sub {
  font-size: 0.78em;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: baseline;
}
.factory-sub-zh { color: #2563eb; opacity: 0.92; }
.factory-sub-vi { color: #0f766e; opacity: 0.95; }

.mvp-result-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mvp-save-status {
  font-size: 0.8rem;
  color: #16a34a;
  margin-right: auto;
}
.mvp-save-status.is-pending { color: #64748b; }
.mvp-save-status.hidden { display: none !important; }

.mvp-header-save {
  margin: 0;
  padding: 6px 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border-bottom: 1px solid #bbf7d0;
  text-align: center;
}
.mvp-header-save.hidden { display: none !important; }

.mvp-stage-guide {
  font-size: 0.9rem;
  line-height: 1.55;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 96%;
  align-self: flex-start;
}

.mvp-hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #eff6ff, #fef3c7);
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
body.mvp {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  background: var(--bg-subtle);
  color: var(--text-on-light);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
  min-height: 100dvh;
  min-height: 100svh;
  font-size: var(--text-base);
  overflow-x: hidden;
}

/* 본문·버튼 (터치 영역은 min-height로 확보) */
.mvp {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-korean);
}
.mvp .mvp-btn {
  font-size: max(var(--text-base), 1rem);
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
}
/* iOS Safari: 입력칸 16px 미만이면 포커스 시 자동 줌 */
.mvp input,
.mvp textarea,
.mvp select {
  font-size: max(16px, var(--input-ios)) !important;
}

.mvp a:not(.mvp-btn-primary):not(.mvp-logo-link) {
  color: var(--accent);
  text-decoration: none;
}
.mvp a:not(.mvp-btn-primary):hover {
  text-decoration: underline;
}

.mvp-app-frame {
  /* 2026-04-18 대표 피드백: 홈 → 작지 만들기 전환 시 "끊긴 느낌" 없애려면 폭/배경/shadow 통일.
     홈(`.main-home-body`)은 body bg `#f1f5f9` 위 흰 카드 대시보드. /app도 같은 느낌으로. */
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent; /* body bg #f1f5f9 그대로 투과 — 홈과 같은 연회색 베이스 */
  box-shadow: none; /* 테두리 shadow 제거 → 페이지 위에 "떠있는 카드" 느낌 제거 */
}

.mvp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-bottom: 12px;
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.mvp-logo { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.mvp-nav { display: flex; gap: 16px; align-items: center; font-size: 0.9rem; }
.mvp-nav a { color: var(--text); }
.mvp-nav a:hover { color: var(--accent); }

.mvp-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 20px calc(48px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px));
}

.mvp-hero {
  text-align: center;
  padding: 32px 0 24px;
}
.mvp-hero h1 {
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  line-height: 1.25;
}
.mvp-hero p {
  color: var(--muted);
  margin: 0 auto 20px;
  max-width: 34em;
  font-size: 1rem;
}

.mvp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 12px 22px;
  border-radius: var(--radius);
  border: none;
  font-size: max(16px, 1rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.1s;
}
.mvp-btn:active {
  transform: scale(0.98);
  opacity: 0.92;
}
.mvp-btn.mvp-btn-primary:active:not(:disabled) {
  transform: scale(0.97);
  opacity: 0.85;
}
.mvp-btn-primary {
  background: var(--accent);
  color: #fff;
}
.mvp-btn-primary:hover { background: var(--accent-hover); }
/* .mvp a 가 (요소 포함) 더 높은 특이도로 파란 글씨를 덮어써서, 링크형 primary 버튼은 명시 */
.mvp a.mvp-btn-primary {
  color: #fff;
  text-decoration: none;
}
.mvp a.mvp-btn-primary:hover {
  color: #fff;
  text-decoration: none;
}
.mvp a.mvp-btn-primary:active {
  transform: scale(0.97);
  opacity: 0.85;
}
.mvp-btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.mvp-btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.mvp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.mvp-section { margin-top: 40px; }
.mvp-section h2 {
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.mvp-section > p.sub { color: var(--muted); margin: 0 0 20px; font-size: 0.95rem; }

.mvp-steps {
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .mvp-steps { grid-template-columns: repeat(3, 1fr); }
}
.mvp-step {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  background: #fafafa;
}
.mvp-step strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.mvp-step span { font-size: 0.88rem; color: var(--muted); }

.mvp-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.mvp-card label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.mvp-card input[type="file"],
.mvp-card textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}
.mvp-card textarea { min-height: 100px; resize: vertical; }

/* 2026-04-18 대표 Day 5: 토스트 /app 톤 — Neutral-900 bg, 토큰 기반 error color, radius 12 */
.mvp-toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.mvp-toast.err { background: #D73838; }

.tech-summary {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

/* 작업지시서 미리보기 (웹) */
.mvp-send-preview-subhead {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 0.06em;
}

.mvp-send-dl-footnote {
  margin: 12px 0 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  text-align: center;
}

.mvp-export-kakao-hint {
  margin: 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.mvp-send-persona-root {
  margin: 0 0 16px;
  padding: 0 4px;
}

.mvp-send-persona-hero {
  text-align: center;
  padding: 16px 12px 12px;
  background: linear-gradient(180deg, #f0f4ff 0%, #fff 100%);
  border-radius: 14px;
  border: 1px solid #e0e7ff;
  margin-bottom: 16px;
}

.mvp-send-persona-hero-title {
  font-size: 17px;
  font-weight: 800;
  color: #1b2b6b;
  margin-bottom: 6px;
}

.mvp-send-persona-hero-sub {
  margin: 0;
  font-size: 14px;
  color: #475569;
}

.mvp-send-persona-q {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
}

.mvp-send-persona-choice-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.mvp-send-persona-choice-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}

.mvp-send-persona-flow {
  text-align: left !important;
  padding: 14px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  border: 2px solid #e2e8f0 !important;
  background: #fff !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
}

.mvp-send-persona-flow.is-selected {
  border-color: #1b2b6b !important;
  background: #eef2ff !important;
  color: #1b2b6b !important;
}

.mvp-send-persona-flow-title {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

.mvp-send-persona-flow-sub {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.mvp-send-file-panel {
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  margin-bottom: 14px;
}

.mvp-send-file-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-send-persona-choice {
  text-align: left !important;
  padding: 16px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 2px solid #e2e8f0 !important;
  background: #fff !important;
  color: #1e293b !important;
  line-height: 1.4 !important;
}

.mvp-send-persona-choice.is-selected {
  border-color: #1b2b6b !important;
  background: #eef2ff !important;
  color: #1b2b6b !important;
}

.mvp-send-persona-subhead {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  text-align: center;
}

.mvp-send-persona-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.mvp-send-persona-channel {
  padding: 12px 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #fafafa !important;
}

.mvp-send-persona-channel.is-selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1e40af !important;
}

.mvp-send-persona-channel-panel {
  padding: 14px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  margin-bottom: 14px;
}

.mvp-send-persona-inp-lab {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
  line-height: 1.4;
}

.mvp-send-persona-inp {
  width: 100% !important;
  box-sizing: border-box;
  margin-bottom: 12px !important;
}

.mvp-send-persona-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-send-persona-tip {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.mvp-send-persona-nofac {
  padding: 14px;
  background: #fff;
  border: 1px solid #e8eaff;
  border-radius: 14px;
  margin-bottom: 14px;
}

.mvp-send-persona-nofac-lead {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1b2b6b;
  line-height: 1.45;
}

.mvp-send-persona-nofac-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: #64748b;
}

.mvp-send-persona-guide-block {
  margin-bottom: 14px;
}

.mvp-send-persona-guide-h {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.mvp-send-persona-guide-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #475569;
}

.mvp-send-persona-bye {
  margin: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1b2b6b;
  text-align: center;
}

.mvp-send-persona-now-h {
  margin: 16px 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 0.04em;
}

.wo-ref-photos-strip {
  padding: 12px 16px 16px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
}

.wo-ref-photos-strip-title {
  font-size: 12px;
  font-weight: 700;
  color: #1b2b6b;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.wo-ref-photos-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wo-ref-photo-thumb-btn {
  padding: 0;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.wo-ref-photo-thumb-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.wo-ref-photo-thumb-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mvp-workorder-preview-host {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 120px;
}

/* WorkOrderPreview (wo-*) — 보내기 탭 인라인 카드 */
.wo-preview-card.preview-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.wo-preview-card.preview-card.inline .wo-preview-scroll {
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wo-preview-card--fs {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.wo-preview-card--fs .wo-preview-scroll {
  max-height: none !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

body.wo-preview-fs-open {
  overflow: hidden !important;
}

.wo-doc-header {
  color: #fff;
  padding: 14px 16px;
}

.wo-doc-header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.wo-doc-header-left {
  flex: 1;
  min-width: 0;
}

.wo-doc-brand-line {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.wo-doc-item-title {
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.45;
  word-break: keep-all;
}

.preview-header-sub,
.wo-doc-header-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
  line-height: 1.4;
  word-break: keep-all;
}

.wo-doc-style-no {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
}

.wo-doc-header-right {
  font-size: 11px;
  text-align: right;
  color: rgba(255, 255, 255, 0.85);
  min-width: 120px;
}

.wo-doc-meta-line {
  margin-top: 4px;
}

.wo-sec-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.wo-sec-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wo-sec-edit {
  font-size: 12px;
  color: #1b2b6b;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.wo-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}

@media (max-width: 480px) {
  .wo-info-grid {
    grid-template-columns: 1fr;
  }
}

.wo-info-cell {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.wo-info-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.wo-info-value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  word-break: keep-all;
}

.wo-val-missing {
  font-size: 13px;
  font-weight: 600;
  color: #ea580c;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}

.wo-val-missing--required {
  color: #e86c00;
  background: #fff3e0;
  border-color: #ffcc80;
}

.wo-val-empty {
  font-size: 14px;
  font-weight: 500;
  color: #bbb;
  background: transparent;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  font-family: inherit;
  min-height: auto;
}

.wo-val-empty:hover,
.wo-val-empty:focus-visible {
  color: #64748b;
  outline: none;
}

.wo-sketch-section {
  padding: 12px 16px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.wo-sketch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wo-sketch-row--single {
  grid-template-columns: 1fr;
}

.sketch-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wo-sketch-single {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wo-sketch-col--full {
  width: 100%;
}

.sketch-col-label {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-bottom: 4px;
}

.sketch-front-full .wo-sketch-slot {
  min-height: 200px;
}

.sketch-front-full .wo-sketch-slot .wo-sketch-svg {
  max-height: 280px;
  width: 100%;
}

.front-sketch-container {
  width: 100%;
  max-width: 100%;
}

.front-sketch-container.full .wo-sketch-slot {
  min-height: 280px;
}

.front-sketch-container.full .wo-sketch-slot .wo-sketch-svg {
  max-height: 380px;
}

.front-sketch-container.half .wo-sketch-slot {
  min-height: 220px;
}

.front-sketch-container.half .wo-sketch-slot .wo-sketch-svg {
  max-height: 300px;
}

.wo-sketch-back-photo-thumb {
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background: #fafafa;
}

.wo-sketch-back-photo-thumb img {
  display: block;
  width: 100%;
  max-height: 100px;
  object-fit: cover;
}

.back-same-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #f5f7ff;
  border: 1.5px solid #e0e4ff;
  border-radius: 12px;
  margin-top: 4px;
}

.back-same-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.back-same-text {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.back-same-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
}

.back-same-line2 {
  display: block;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

.wo-sketch-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}

.wo-sketch-slot {
  min-height: 140px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wo-sketch-slot .wo-sketch-svg {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
}

.wo-sketch-placeholder {
  font-size: 12px;
  color: #94a3b8;
  padding: 12px;
  text-align: center;
}

/* 작업지시서 인라인 프리뷰 — 섹션 카드 (Sprint 24) */
.preview-section-card {
  border: 1px solid #e8eaff;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 16px 12px;
  background: #fff;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
}

.preview-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: #f5f7ff;
  border-bottom: 1px solid #e8eaff;
}

.preview-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1b2b6b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.preview-edit-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #1b2b6b;
  background: #fff;
  border: 1px solid #c5ceff;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.preview-edit-btn:active {
  opacity: 0.85;
}

.wo-preview-section-card-body {
  padding-bottom: 4px;
}

.wo-preview-empty-pad {
  padding: 14px 16px 16px;
}

.fabric-card {
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: #fafbff;
  border: 1px solid #e8eaff;
  border-radius: 8px;
}

.fabric-card--ai {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.fabric-name {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
  line-height: 1.45;
  word-break: keep-all;
}

.fabric-vendor {
  font-size: 13px;
  color: #888;
}

.subsection-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  padding: 8px 16px 4px;
  letter-spacing: 0.03em;
}

.wo-preview-section-card-body > .subsection-label:first-child {
  padding-top: 12px;
}

.accessory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.accessory-table th {
  background: #f5f7ff;
  color: #888;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid #e8eaff;
}

.accessory-table td {
  padding: 10px 16px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  word-break: keep-all;
}

.accessory-table tr:last-child td {
  border-bottom: none;
}

.accessory-table tr.wo-accessory-row--ai td {
  background: #eff6ff;
}

.sewing-preview-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  line-height: 1.55;
  color: #222;
  word-break: keep-all;
}

.sewing-preview-item:last-child {
  border-bottom: none;
}

.sewing-preview-text {
  flex: 1;
  min-width: 0;
}

.sewing-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #1b2b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.sewing-check-icon {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.size-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.size-spec-table th {
  background: #f5f7ff;
  color: #888;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 16px;
  text-align: center;
  border-bottom: 1px solid #e8eaff;
}

.size-spec-table th:first-child {
  text-align: left;
}

.size-spec-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #1b2b6b;
  word-break: keep-all;
}

.size-spec-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: #444;
}

.size-spec-table tr:last-child td {
  border-bottom: none;
}

.wo-mat-box {
  padding: 12px 16px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.wo-mat-block {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin-bottom: 10px;
}

.wo-mat-block--ai {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.wo-mat-line {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
}

.wo-mat-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
}

.wo-subhead-mini {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.wo-muted {
  color: #94a3b8;
  font-size: 13px;
}

.wo-trim-line {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  word-break: keep-all;
}

.wo-trim-line--ai {
  background: #eff6ff;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 8px;
  border-bottom: none;
}

.wo-sew-list {
  margin: 0;
  padding: 12px 16px 16px 28px;
  list-style: none;
  border-bottom: 1px solid #f0f0f0;
}

.wo-sew-list li.preview-sewing-item,
.wo-preview-sewing-item {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  padding: 3px 0;
  word-break: keep-all;
  position: relative;
  padding-left: 14px;
}

.wo-sew-list li.preview-sewing-item::before,
.wo-preview-sewing-item::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #1b2b6b;
  font-weight: 700;
}

.wo-size-wrap {
  padding: 12px 16px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.wo-size-table,
.preview-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.wo-size-table th,
.preview-size-table th {
  background: #f5f7ff;
  color: #555;
  padding: 6px 8px;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid #e8e8f0;
}

.wo-size-table td,
.preview-size-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  color: #1b2b6b;
  font-weight: 600;
}

.wo-rev-list {
  margin: 0;
  padding: 12px 16px 16px 20px;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
  border-bottom: 1px solid #f0f0f0;
}

.wo-preview-fs-row.preview-fullscreen-btn {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px 12px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.wo-preview-fs-btn {
  font-size: 13px;
  color: #1b2b6b;
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.wo-preview-loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
}

.wo-preview-error.preview-error {
  padding: 20px 16px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
  text-align: center;
}

.wo-preview-error-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #b91c1c;
}

.wo-preview-error-hint {
  margin: 0;
  font-size: 13px;
  color: #7f1d1d;
  line-height: 1.5;
}

/* 2026-04-18 대표 Day 3: tech-sheet = /app dash-recent-card 톤 (white bg + Neutral border)
   Day 4 리파인: 패딩·타이포 홈(/app) 토큰과 완전 일치 (weight 800 · 18/20 padding) */
.tech-sheet {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  font-size: 13px;
}

.tech-sheet-section {
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
  background: #fff;
}
.tech-sheet-section:last-child {
  border-bottom: none;
}

/* 섹션 헤더 — /app dash-greeting h1 톤 (weight 800, Neutral-900) */
.tech-sheet-h {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #0f172a;
  margin: 0 0 12px;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tech-sheet-h span.zh {
  font-weight: 500;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.tech-figure {
  margin: 0;
  text-align: center;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 12px;
}
.tech-figure img {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.tech-figure figcaption {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}

.tech-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.tech-kv th,
.tech-kv td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.tech-kv th {
  width: 32%;
  max-width: 120px;
  background: #f8fafc;
  font-weight: 600;
  color: var(--text);
}
.tech-kv td {
  color: var(--text);
}

.tech-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
}
.tech-data-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.tech-data-table th,
.tech-data-table td {
  border: 1px solid var(--border);
  padding: 8px 6px;
  text-align: center;
}
.tech-data-table th {
  background: #eff6ff;
  color: var(--text);
  font-weight: 600;
}
.tech-data-table td:first-child,
.tech-data-table th:first-child {
  text-align: left;
  padding-left: 10px;
}
.tech-data-table .part-zh {
  display: block;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
  margin-top: 2px;
}

.tech-bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.tech-bi-table th,
.tech-bi-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
}
.tech-bi-table th {
  width: 28%;
  background: #f8fafc;
  font-weight: 600;
}
.tech-bi-table .ko {
  display: block;
  margin-bottom: 4px;
}
.tech-bi-table .zh {
  font-size: 0.76rem;
  color: var(--accent);
}

.tech-notes {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.5;
}
.tech-notes li {
  margin-bottom: 6px;
}
.tech-notes .zh {
  display: block;
  font-size: 0.76rem;
  color: var(--accent);
  margin-top: 2px;
}

.mvp-pricing-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .mvp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
.mvp-price-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.mvp-price-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.mvp-price-card .price { font-size: 1.4rem; font-weight: 700; color: var(--accent); margin: 8px 0; }
.mvp-price-card ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 0.9rem; }

.mvp-form { display: flex; flex-direction: column; gap: 14px; }
.mvp-form input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.mvp-usage {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 12px;
}

/* ─── 채팅 플로우 (/app) 모바일 우선 ─── */
.mvp-user-label {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mvp-btn-sm {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 8px 12px;
  font-size: max(14px, 0.875rem) !important;
}
.mvp-nav a,
.mvp-nav button {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

.mvp-chat-body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-height: 100svh;
  overflow-x: hidden;
}

.mvp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mvp-progress-wrap {
  padding: 0 16px 8px;
  flex-shrink: 0;
}
.mvp-progress-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}
.mvp-progress-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.25s ease;
}
.mvp-progress-text {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}
.mvp-usage-chat {
  margin: 0 16px 8px;
  text-align: center;
}

.mvp-chat-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
}

.mvp-chat-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
  min-height: 120px;
}

.mvp-chat-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mvp-msg {
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.mvp-msg-user {
  align-self: flex-end;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  margin-left: auto;
}
.mvp-msg-bot {
  align-self: flex-start;
  background: #f8fafc;
  border: 1px solid var(--border);
  white-space: pre-wrap;
}
.mvp-msg-typing {
  color: var(--muted);
  font-size: 0.88rem;
  padding: 10px 14px;
}

/* 2026-04-17 대표 피드백: 홈(16px/24px) 기준으로 좌우 여백 통일
   2026-04-18 대표 지시: nav 아래 상단 padding 추가 (/app .dash padding: 20px 16px · PC 32px 24px 와 일치) */
.mvp-upload-panel {
  flex-shrink: 0;
  padding: 20px 16px 12px;
}
@media(min-width:769px) {
  .mvp-upload-panel { padding: 32px 24px 12px; }
}

/* flowHead 에도 동일 상단 여백 (GARMENT TYPE / CONFIRM / WISH 진입 시 /app 톤) */
.mvp-flow-head.cq-proto-flow-head {
  padding-top: 20px;
}
@media(min-width:769px) {
  .mvp-flow-head.cq-proto-flow-head { padding-top: 32px; }
}
.mvp-upload-panel.hidden {
  display: none;
}
.mvp-upload-title {
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
  text-align: center;
}
.mvp-upload-sub {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* 2026-04-18 designer-yerin: /app 홈 dash-onboard 파스텔 그라데이션 감성으로 이식.
   디자이너가 /app에서 /create 진입 시 "같은 서비스" 느낌 유지. radius 20 → 14 (/app 기준 통일). */
.mvp-upload-zone,
.mvp-upload-drop {
  position: relative;
  border: 1.5px dashed #c7d2fe;
  border-radius: 14px;
  min-height: 240px;
  padding: 36px 20px;
  text-align: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mvp-upload-zone:hover,
.mvp-upload-zone:focus,
.mvp-upload-drop:hover,
.mvp-upload-drop:focus {
  border-color: var(--accent);
  background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
  outline: none;
}
.mvp-upload-zone.mvp-dragover,
.mvp-upload-drop.mvp-dragover {
  border-color: var(--accent);
  border-style: solid;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
}
.mvp-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.mvp-upload-icon {
  font-size: 36px;
  line-height: 1;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.mvp-upload-hint {
  font-size: 0.88rem;
  color: var(--muted);
}

.mvp-thumb-row {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.mvp-thumb-row li {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.mvp-thumb-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mvp-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mvp-composer {
  flex-shrink: 0;
  border-top: 0.5px solid #e5e7eb;
  padding: 12px 16px calc(var(--home-bar-pad) + env(safe-area-inset-bottom, 0px));
  background: #fff;
  backdrop-filter: blur(8px);
}

.mvp-hint-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.mvp-hint-chips.hidden {
  display: none;
}
.mvp-hint-chip {
  flex: 0 0 auto;
  font-size: 13px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
}
.mvp-hint-chip:active {
  background: #f1f5f9;
  opacity: 0.9;
}

.mvp-quick-replies {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.mvp-quick-replies.hidden {
  display: none;
}
.mvp-chip-btn {
  width: 100%;
  min-height: 64px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, opacity 0.1s;
}
.mvp-chip-btn:active {
  background: #eff6ff;
  border-color: var(--accent);
  opacity: 0.95;
}

.mvp-fabric-fields {
  margin-bottom: 10px;
}
.mvp-fabric-fields .mvp-btn-primary {
  min-height: var(--cta-height) !important;
  font-size: 16px !important;
}
.mvp-fab-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.mvp-input {
  width: 100%;
  margin-top: 4px;
  min-height: var(--tap-min);
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
}
.mvp-btn-block {
  width: 100%;
  margin-top: 10px;
}

.mvp-composer-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.mvp-composer-row.hidden {
  display: none;
}
.mvp-chat-input {
  flex: 1;
  min-height: 120px;
  max-height: 200px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: var(--text-base);
  resize: none;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
}
.mvp-send-btn {
  flex-shrink: 0;
  padding: 12px 18px;
  min-height: var(--cta-height);
  align-self: stretch;
}
.mvp-wish-cta,
.mvp-btn-next {
  min-height: var(--cta-height) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* —— 2단계(WISH) 수정 요청 — 토스·당근 밀도 리디자인 —— */
.mvp-chat-layout--wish-active {
  flex: 1 1 auto;
  min-height: 0;
}

.mvp-app-frame.mvp-wizard-flow .mvp-chat-layout--wish-active {
  flex: 1 1 auto;
}

.mvp-composer.mvp-composer--wish-step {
  /* 2026-04-18 대표 요청: 홈(/app) 바디와 동일하게 — 외곽 박스/배경 제거, 페이지 bg(#f1f5f9)에 직접 배치 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-top: none;
  background: transparent;
  box-shadow: none;
}

.step2-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* 2026-04-18 대표 요청: /app 홈 대시보드(.dash-*)와 동일한 토큰으로 통일
   — bg #f8fafc, border 1px #e2e8f0, radius 12, padding 14px 16px, muted #64748b */
.step2-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  /* 🅓 2026-04-19 대표 피드백: 섹션 간격 타이트하게 (guidelines/04). 20 → 12 */
  gap: 12px;
}
/* 뱃지와 제목 블록은 flex gap 대신 컴포넌트 margin으로 위계 분리 */
.step2-content .step2-badge-row { margin-bottom: -4px; }
@media (min-width: 769px) {
  .step2-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 24px 20px;
    gap: 14px;
  }
}

.step2-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.step2-badge {
  font-size: 11px;
  font-weight: 700;
  color: #1b2b6b;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: -0.005em;
}

.step2-help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e0e4ff;
  background: #fff;
  color: #1b2b6b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.step2-help-btn:active {
  background: #f8f9ff;
}

.step2-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.035em;
  line-height: 1.3;
  margin: 0 0 4px;
  word-spacing: -0.05em;
}

.step2-subtitle {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin: -4px 0 0;
  letter-spacing: -0.015em;
}

.step2-photo-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 6px 12px;
  border-radius: 9999px;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  letter-spacing: -0.01em;
}

.step2-photo-status.hidden {
  display: none !important;
}

.step2-textarea-host {
  width: 100%;
  box-sizing: border-box;
}

.step2-textarea-host .mvp-chat-input,
textarea#textInput.step2-textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
  letter-spacing: -0.01em;
  background: #f8f9ff;
  border: 1.5px solid #e0e4ff;
  border-radius: 12px;
  resize: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
  max-height: none;
}

.step2-textarea-host .mvp-chat-input:focus,
textarea#textInput.step2-textarea:focus {
  outline: none;
  border-color: #1b2b6b;
  background: #fff;
}

/* ── 수정사항 항목별 입력 ── */
.wish-mod-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}
.wish-mod-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wish-mod-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1b2b6b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wish-mod-input {
  flex: 1;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: #0f172a;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  outline: none;
}
.wish-mod-input:hover {
  border-color: #cbd5e1;
}
.wish-mod-input:focus {
  border-color: #1b2b6b;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,43,107,0.08);
}
.wish-mod-input::placeholder {
  color: #a0aec0;
}
.wish-mod-del {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #cbd5e1;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.wish-mod-del:hover {
  color: #ef4444;
  background: #fef2f2;
}
.wish-mod-fields .wish-mod-row:only-child .wish-mod-del {
  visibility: hidden;
}
.wish-mod-add-btn {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.wish-mod-add-btn:hover {
  border-color: #1b2b6b;
  color: #1b2b6b;
  background: #eef2ff;
}

/* ── 한번에 붙여넣기 ── */
.wish-bulk-paste {
  margin-bottom: 4px;
}
.wish-bulk-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 8px;
}
.wish-bulk-textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.wish-bulk-textarea:hover {
  border-color: #cbd5e1;
}
.wish-bulk-textarea:focus {
  border-color: #1b2b6b;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,43,107,0.08);
}
.wish-bulk-textarea::placeholder {
  color: #a0aec0;
  font-size: 13px;
}
.wish-bulk-split-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: #1b2b6b;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.wish-bulk-split-btn:hover {
  background: #2d3a8c;
}
.wish-bulk-split-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

/* 🅒 2026-04-19 대표 결정: 참고사진 업로드 드롭존(.mvp-upload-zone) 톤 이식.
   파스텔 그라데이션 + dashed + 중앙정렬 플레이스홀더 느낌. */
.wish-bulk-paste--dropzone {
  margin: 8px 0 4px;
}
.wish-bulk-textarea--dropzone {
  min-height: 180px;
  padding: 20px 22px;
  border: 1.5px dashed #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  font-size: 14.5px;
  line-height: 1.7;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.wish-bulk-textarea--dropzone:hover {
  border-color: var(--accent, #1b2b6b);
  background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
}
.wish-bulk-textarea--dropzone:focus {
  border-color: var(--accent, #1b2b6b);
  border-style: solid;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,43,107,0.10);
}
.wish-bulk-textarea--dropzone::placeholder {
  color: #8b94c8;
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: -0.015em;
}

/* 🅓 2026-04-19 Image #28 대표 피드백: 흰 bg 카드가 페이지 위에 떠서 어색 → 텍스트 링크 형태로 tone down.
   힌트는 힌트다워야. 접힌 상태에선 그냥 인라인 링크. 펼쳤을 때만 내부 박스 내용 노출. */
.wish-guide-toggle--card {
  display: block;
  margin: 0 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.wish-guide-summary--card {
  list-style: none;
  cursor: pointer;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  letter-spacing: -0.015em;
  transition: color 150ms;
}
.wish-guide-summary--card:hover {
  color: #1b2b6b;
}
.wish-guide-summary--card::-webkit-details-marker { display: none; }
.wish-guide-summary--card::before { content: none; }
.wish-guide-summary--card::after {
  content: "▸";
  transition: transform 150ms;
  color: #94a3b8;
  font-size: 11px;
  margin-left: 2px;
}
.wish-guide-toggle--card[open] .wish-guide-summary--card {
  color: #1b2b6b;
  margin-bottom: 8px;
}
.wish-guide-toggle--card[open] .wish-guide-summary--card::after {
  transform: rotate(90deg);
}
.wish-guide-toggle--card .wish-guide {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
}
@media (max-width: 480px) {
  .wish-guide-toggle--card .wish-guide { flex-direction: column; }
}
.wish-guide-toggle--card .wish-guide-good,
.wish-guide-toggle--card .wish-guide-bad {
  flex: 1;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  background: #fff;
  border-radius: 10px;
}

/* 🅓 2026-04-19 Image #12 대표 피드백: [항목별로 나누기] 맥락 안내줄. placeholder 위에 별도 배치. */
.wish-bulk-howto {
  margin: 4px 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  letter-spacing: -0.015em;
}
.wish-bulk-howto strong {
  color: #1b2b6b;
  font-weight: 700;
}
/* 🅑 2026-04-20 Image #14 대표 피드백: 줄바꿈 안내를 h2 바로 밑(subtitle 자리)로 이동.
   step2-subtitle과 같은 영역감이지만 keyword(줄바꿈/항목별로 나누기) 강조를 위해 약간 다른 톤. */
.wish-bulk-howto--top {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  letter-spacing: -0.015em;
}
.wish-or-divider {
  display: flex;
  align-items: center;
  margin: 16px 0 12px;
  gap: 12px;
}
.wish-or-divider::before,
.wish-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.wish-or-divider span {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  white-space: nowrap;
}

.step2-hints-label {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  margin: 0 0 0;
}

.step2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step2-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

.step2-chip:active {
  transform: scale(0.96);
  background: #f0f2ff;
  border-color: #1b2b6b;
  color: #1b2b6b;
}

.step2-chip.selected {
  background: #eef1ff;
  border-color: #1b2b6b;
  color: #1b2b6b;
  font-weight: 600;
}

.step2-footer {
  /* 2026-04-18 대표 요청: 흰 박스 제거 → 페이지 bg 그대로 투과, 상단 보더도 제거 */
  flex-shrink: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: none;
}

.step2-cta {
  width: 100%;
  height: 52px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s ease;
  font-family: inherit;
}

.step2-cta:disabled {
  opacity: 0.4;
  cursor: default;
}

.step2-cta:active:not(:disabled) {
  opacity: 0.85;
  transform: scale(0.99);
}

.mvp-bottom-next-wrap {
  margin-top: 10px;
}
.mvp-bottom-next-wrap .mvp-btn {
  width: 100%;
}

/* 결과 오버레이 */
.mvp-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.mvp-result-overlay.hidden {
  display: none;
}
.mvp-result-close-x {
  font-size: 1.5rem !important;
  line-height: 1;
  min-width: 40px;
  padding: 4px 10px !important;
}
/* Bottom sheet: 용어집 · 나가기 확인 */
.mvp-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.mvp-sheet:not(.hidden) {
  pointer-events: auto;
}
.mvp-sheet.hidden {
  display: none !important;
}
.mvp-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.mvp-sheet-panel {
  position: relative;
  width: 100%;
  max-width: var(--max, 560px);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 0 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.15);
}
.mvp-sheet-handle {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: #e2e8f0;
  margin: 10px auto 12px;
}
.mvp-sheet-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.mvp-sheet-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* 도움말 바텀시트 (토스/당근 톤) */
.mvp-sheet-panel.help-sheet {
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  padding: 12px 20px calc(32px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh;
  overflow: hidden;
  box-sizing: border-box;
}

.help-handle {
  width: 36px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 2px;
  margin: 0 auto 20px;
  flex-shrink: 0;
}

.help-headline {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  text-align: left;
}

.help-subline {
  font-size: 14px;
  color: #888;
  margin: 0 0 24px;
  line-height: 1.5;
  text-align: left;
}

.help-subline.hidden {
  display: none !important;
}

.help-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.help-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #888;
  letter-spacing: 0.04em;
  text-transform: none;
  margin: 0 0 12px;
}

.help-empathy {
  font-size: 13px;
  color: #666;
  line-height: 1.55;
  margin: 0 0 16px;
  word-break: keep-all;
}

.timeline-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #f8f9ff;
  border-radius: 12px;
  margin-bottom: 4px;
  box-sizing: border-box;
}

.timeline-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.timeline-card-text {
  min-width: 0;
}

.timeline-content-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.timeline-content-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  word-break: keep-all;
}

.timeline-connector {
  width: 2px;
  height: 12px;
  background: #e0e4ff;
  margin: 0 auto 4px 30px;
}

.term-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.term-card {
  padding: 14px;
  background: #f8f9ff;
  border-radius: 12px;
  box-sizing: border-box;
}

.term-card.full {
  grid-column: 1 / -1;
}

.term-icon {
  font-size: 20px;
  margin-bottom: 6px;
}

.term-title {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

.term-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  word-break: keep-all;
}

.help-close-btn {
  width: 100%;
  height: 52px;
  margin-top: 24px;
  flex-shrink: 0;
  background: #f0f2ff;
  color: #1b2b6b;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.help-close-btn:active {
  opacity: 0.92;
}

.help-divider-section {
  margin-top: 28px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.mvp-exit-confirm-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.mvp-exit-confirm-danger {
  color: #ff4444 !important;
  font-weight: 600;
}

/* 5단계 생성 — 풀스크린 오버레이 */
#flowLoadingOverlay.mvp-flow-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#flowLoadingOverlay.mvp-flow-loading.hidden {
  display: none !important;
}
#flowLoadingOverlay.mvp-flow-loading .mvp-flow-loading-card,
#flowLoadingOverlay.mvp-flow-loading .mvp-gen-loading-card {
  width: 100%;
  max-width: 400px;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
}
#flowBarFill,
.mvp-gen-progress-fill {
  transition: width 800ms ease-out;
}
@keyframes mvp-pencil-wiggle {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
#flowLoadingOverlay.mvp-flow-loading .mvp-gen-pencil {
  /* 2026-04-18 designer-yerin: 이모지 → 인라인 SVG, 크기 48px, wiggle 유지 */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  animation: mvp-pencil-wiggle 0.85s ease-in-out infinite;
}
#flowLoadingOverlay.mvp-flow-loading .mvp-gen-pencil svg {
  width: 40px;
  height: 40px;
}
#flowLoadingOverlay.mvp-flow-loading .mvp-gen-main-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
#flowLoadingOverlay.mvp-flow-loading .mvp-gen-narrative {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.5;
  min-height: 3em;
  margin: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}

/* 4단계 차수·생산국 — #flowHead 스크롤 + 하단 CTA 여백 */
.mvp-app-frame.mvp-wizard-flow.mvp-wizard--flow-scroll {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}
.mvp-app-frame.mvp-wizard-flow.mvp-wizard--flow-scroll #flowHead.cq-proto-flow-head {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 24px;
}
.mvp-app-frame.mvp-wizard-flow.mvp-wizard--flow-scroll.mvp-wizard--flow-scroll-cta #flowHead.cq-proto-flow-head {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.mvp-app-frame.mvp-wizard-flow.mvp-wizard--flow-scroll .mvp-chat-layout {
  flex: 0 0 auto;
  min-height: 0;
}
.mvp-app-frame.mvp-wizard-flow.mvp-wizard--flow-scroll.mvp-wizard--flow-scroll-cta .bottom-cta-wrap {
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .mvp-wizard-flow .mvp-sc-panel {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .mvp-wizard-flow .mvp-sc-panel .mvp-sc-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }
  .mvp-wizard-flow .mvp-sc-panel .mvp-sc-card {
    width: 100%;
    min-width: 0 !important;
    padding: 16px 20px !important;
  }
}
@media (max-width: 767px) {
  .mvp-wizard-flow .mvp-sc-panel .mvp-sc-card {
    width: 100%;
    flex: 1 1 auto !important;
    padding: 14px 16px !important;
  }
  .mvp-wizard-flow .mvp-sc-panel .mvp-sc-row {
    gap: 8px;
  }
}

/* 마법사 상단 요약 (flowHead 안) */
.mvp-wizard-summary:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
}

.mvp-wizard-summary-chip {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}

/* 분석 확인(3단계) 두 줄 메타 */
.mvp-wizard-summary.mvp-wizard-summary--step3:not(.hidden) {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.step3-meta {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.45;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.step3-meta .dot {
  color: #94a3b8;
  font-weight: 600;
  user-select: none;
}

.step3-item-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 3단계 분석 확인 — 특징 카드(수정만, 삭제 없음) */
.cq-ai-nl-feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.cq-ai-nl-row.feature-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid #e8eaff;
  background: #fff;
  transition: border-color 0.15s;
}
.cq-ai-nl-row--edited {
  background: #fffbeb;
  border-color: #fde68a;
}
.cq-ai-nl-row.feature-card.editing {
  border-color: #1b2b6b;
  background: #f8f9ff;
}
.cq-ai-nl-row__text {
  flex: 1;
  min-width: 0;
}
.cq-ai-nl-para.feature-text,
.feature-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #222;
  white-space: pre-wrap;
  word-break: keep-all;
  letter-spacing: -0.01em;
}
.cq-ai-edited-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.feature-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.feature-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #1b2b6b;
  background: #eef1ff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.12s;
  font-family: inherit;
}
.feature-edit-btn:active {
  opacity: 0.7;
}
.feature-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  letter-spacing: -0.01em;
  background: #fff;
  border: 1.5px solid #c5ceff;
  border-radius: 8px;
  resize: none;
  box-sizing: border-box;
  font-family: inherit;
}
.feature-textarea:focus {
  outline: none;
  border-color: #1b2b6b;
}
.feature-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  flex-wrap: wrap;
}
.feature-cancel-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.feature-save-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1b2b6b;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.feature-save-btn:active {
  opacity: 0.85;
}
.cq-ai-nl-add-feature {
  margin-top: 10px;
  align-self: flex-start;
  padding: 8px 4px;
  border: none;
  background: none;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.mvp-export-home-btn {
  margin-top: 6px;
}

.mvp-result-inner {
  background: var(--bg);
  min-height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 16px calc(32px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px));
}
.mvp-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mvp-result-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
}
.mvp-summary-line {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.5;
}
.mvp-result-footnote {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 16px 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.mvp-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.mvp-result-actions .mvp-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 120px;
}
.mvp-share-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-summary-line--compact {
  font-size: 0.82rem;
  color: var(--muted);
  max-height: 2.8em;
  overflow: hidden;
  margin-bottom: 10px;
}

.mvp-result-sheet-root {
  margin-bottom: 8px;
}

.mvp-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mvp-tab-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #e2e8f0;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.mvp-tab-dot.is-done {
  background: #22c55e;
  border-color: #22c55e;
}
.mvp-tab-dot.is-active {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
  background: #fff;
}

.mvp-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* 2026-04-18 대표 Day 3: 핏·사이즈/원단/디테일/봉제·마감 탭 — /app dash-action-secondary 톤.
   inactive: #f8fafc bg + #e2e8f0 border, active: Primary-100 highlight (dash-stat.s2 와 일치). */
.mvp-tab-btn {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  min-height: var(--tap-min);
  font-size: 13px !important;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  line-height: 1.25;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mvp-tab-btn.is-active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1b2b6b;
}
.mvp-tab-btn .mvp-tab-ic {
  margin-left: 4px;
  font-size: 0.85em;
}

.mvp-tab-panels {
  position: relative;
}
.mvp-tab-panel {
  display: none;
  padding-bottom: 8px;
}
.mvp-tab-panel.is-active {
  display: block;
}

/* Sprint #40 — 탭 하단 이전/건너뛰기/다음: 2줄 구조 (모바일 겹침 방지) */
.mvp-tab-nav-footer.step-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 24px;
  margin-top: 20px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
  z-index: 2;
}
.step-nav .btn-skip {
  width: 100%;
  height: 44px;
  background: none;
  border: none;
  font-size: 14px;
  color: #aaa;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.step-nav .btn-skip:active {
  opacity: 0.75;
}
.step-nav-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.step-nav .btn-prev {
  flex: 1;
  min-height: 52px;
  height: 52px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.step-nav .btn-prev.hidden {
  display: none !important;
}
.step-nav-row:has(.btn-prev.hidden) .btn-next {
  flex: 1;
}
.step-nav .btn-next {
  flex: 2;
  min-height: 52px;
  height: 52px;
  background: #1b2b6b;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.step-nav .btn-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.step-nav .btn-next:active:not(:disabled) {
  opacity: 0.92;
}

.mvp-readonly-field {
  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.mvp-readonly-field .mvp-readonly-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

textarea.tech-inline-input.mvp-textarea-summary {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

.mvp-export-preview {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  white-space: pre-wrap;
}

.mvp-result-actions--footer {
  margin-top: 8px;
}
.mvp-result-actions--footer .mvp-btn {
  flex: 1 1 100%;
}

/* 편집 가능 필드 / TBD */
.tech-sheet-editable .tech-cell-editable {
  position: relative;
}
/* 2026-04-18 대표 Day 5: 필드 레이블 /app 톤 — normal case, 13px/600 Neutral-500 */
.tech-field-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #64748b;
  margin-bottom: 6px;
}
/* 2026-04-18 대표 Day 5: 토큰 기반 시맨틱 색상 (Info / Warning) */
.tech-field-ai {
  border-left: 3px solid #2B7FD4;
  padding-left: 8px;
  margin: 4px 0;
}
.tech-field-tbd {
  border-left: 3px solid #E8840C;
  padding-left: 8px;
  margin: 4px 0;
}
/* 2026-04-18 대표 Day 5: /app 폼 인풋 톤 통일 — dashed → solid 1px, Warning-light bg 유지 (미입력 신호) */
.tech-inline-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: inherit;
  font-family: inherit;
  background: #FDF1E3;
  color: #1f2937;
}
.tech-inline-input::placeholder {
  color: #B45309;
  opacity: 0.7;
}
.tech-inline-input:focus {
  outline: none;
  border-color: #1b2b6b;
  background: #fff;
}

/* 결과 시트 — 단위 토글 / 발주·부자재 상세 / 원가 */
.mvp-meas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.mvp-meas-unit-label {
  font-weight: 600;
  color: var(--muted);
}
.mvp-meas-note {
  color: var(--muted);
  font-size: 0.78rem;
  flex: 1 1 100%;
}
.mvp-unit-toggle.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: #eff6ff;
}
.mvp-unit-toggle {
  min-height: 36px;
  min-width: 44px;
}
.tech-sub-table th,
.tech-sub-table td {
  font-size: 0.82rem;
  vertical-align: middle;
}
.tech-sub-table .tech-inline-input {
  padding: 6px 8px;
  font-size: 0.82rem;
}
.mvp-table-hint {
  font-size: var(--text-sm);
  color: var(--text-aux);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-korean);
  word-break: keep-all;
}
.mvp-sum-cell {
  font-weight: 600;
  text-align: center;
  color: var(--text);
}
.mvp-cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .mvp-cost-grid {
    grid-template-columns: 1fr;
  }
}
.mvp-cost-field label {
  display: block;
}
.mvp-cost-total {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.mvp-cost-total-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}
.mvp-acc-intro {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 6px;
}
.mvp-row-del {
  min-width: 36px;
  padding: 4px 8px;
}
.mvp-factory-share-section {
  margin-top: 20px;
}
.mvp-factory-share-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-2, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mvp-factory-share-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.45;
}
.mvp-factory-share-opt input {
  margin-top: 4px;
  flex-shrink: 0;
}
.mvp-factory-share-opt-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}
.mvp-factory-share-tip {
  margin-top: 10px !important;
}

/* Sprint #39 — 수량·원가 탭 원가 계산 (임가공 설명·입력) */
.cost-explain-card {
  background: #f5f7ff;
  border: 1px solid #e0e4ff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  word-break: keep-all;
}

/* Sprint #51 — 원가 페르소나 설명 카드 */
.cost-explain {
  background: #f5f7ff;
  border: 1px solid #e0e4ff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #444;
  line-height: 1.65;
  word-break: keep-all;
}
.cost-explain p {
  margin: 0 0 8px;
}
.cost-explain p:last-child {
  margin-bottom: 0;
}
.cost-explain-title {
  font-size: 13px;
  font-weight: 700;
  color: #1b2b6b;
  margin-bottom: 6px;
}
.cost-range {
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  color: #555;
  border: 1px solid #e8eaff;
}
.cost-range-title {
  font-size: 11px;
  font-weight: 600;
  color: #aaa;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cost-range-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
}
.cost-radio-group--persona {
  margin-top: 12px;
  margin-bottom: 0;
}
.cost-input-inline {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  box-sizing: border-box;
}
.cost-input-inline:focus {
  border-color: #1b2b6b;
  outline: none;
}
.cost-radio-item--amount {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.cost-radio-amount-label {
  flex-shrink: 0;
}
.mvp-cost-inline-inp-wrap {
  display: inline-flex;
  align-items: center;
  flex: 1 1 160px;
  min-width: 120px;
  gap: 6px;
  margin-left: 8px;
}
.mvp-cost-inline-won {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  flex-shrink: 0;
}
.mvp-cost-inline-piece-suffix {
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
}
.mvp-cost-persona-field {
  margin-bottom: 20px;
}
.margin-calculator {
  background: #f0f9f0;
  border: 1.5px solid #b8e0b8;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.margin-calculator-hint {
  margin: 0 0 10px;
  font-size: 14px;
  color: #3d5c3d;
  line-height: 1.5;
}
.margin-sell-row {
  margin-bottom: 8px;
}
.margin-sell-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
}
.margin-sell-inp {
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 100%;
}
.margin-sell-opt {
  font-size: 13px;
  font-weight: 500;
  color: #888;
}
.margin-result {
  font-size: 18px;
  font-weight: 700;
  color: #1b6b1b;
  margin-top: 8px;
  line-height: 1.35;
}

.cost-radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.cost-radio-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #222;
  cursor: pointer;
}
.cost-radio-item input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #1b2b6b;
}
.cost-input-row {
  margin-bottom: 16px;
}
.cost-input-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.cost-inline-tip {
  font-weight: 400;
}
.cost-input-hint {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}
.cost-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  box-sizing: border-box;
}
.cost-input:focus {
  outline: none;
  border-color: #1b2b6b;
}
.cost-total {
  background: #f5f7ff;
  border: 1.5px solid #c5ceff;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.cost-total-label {
  font-size: 14px;
  font-weight: 600;
  color: #1b2b6b;
}
.cost-total-value {
  font-size: 18px;
  font-weight: 700;
  color: #1b2b6b;
}
.cost-labor-per-piece {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.cost-currency-prefix {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.cost-piece-suffix {
  font-size: 14px;
  color: #555;
  white-space: nowrap;
}
.cost-labor-per-piece .cost-input {
  flex: 1 1 120px;
  min-width: 0;
}
.mvp-qty-color-empty-hint {
  margin-bottom: 12px;
}
.mvp-go-size-colors-btn {
  margin: 8px 0;
}

/* --- Landing (mvp_landing.html) --- */
.mvp-main--landing {
  max-width: 1040px;
}
.mvp-header-cta {
  padding: 8px 16px;
  font-size: 0.88rem;
  text-decoration: none;
}
.mvp-hero--landing {
  text-align: center;
  padding: 28px 0 8px;
}
.mvp-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.mvp-hero-copy h1 {
  font-size: clamp(1.55rem, 4.5vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  line-height: 1.25;
}
.mvp-hero-lead {
  color: var(--muted);
  margin: 0 0 20px;
  font-size: 1.02rem;
  line-height: 1.6;
}
.mvp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.mvp-hero-cta-note {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.mvp-hero-visual {
  width: 100%;
  max-width: 480px;
}
.mvp-land-svg-hero {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 880px) {
  .mvp-hero--landing {
    text-align: left;
    padding: 40px 0 16px;
  }
  .mvp-hero-grid {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .mvp-hero-copy {
    flex: 1;
    min-width: 0;
    max-width: 32rem;
  }
  .mvp-hero-actions {
    justify-content: flex-start;
  }
  .mvp-hero-visual {
    flex: 1;
    max-width: min(480px, 46%);
  }
}
.mvp-land-section h2 {
  font-size: clamp(1.12rem, 2.5vw, 1.35rem);
  margin-bottom: 18px;
}
.mvp-land-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .mvp-land-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .mvp-land-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mvp-land-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  background: #fafafa;
}
.mvp-land-card--problem {
  background: #fffbfb;
  border-color: #fecaca;
}
.mvp-land-card--solution {
  background: #f8fafc;
  border-color: #bfdbfe;
}
.mvp-land-card-icon {
  margin-bottom: 12px;
}
.mvp-land-card-icon svg {
  width: 64px;
  height: 64px;
  display: block;
}
.mvp-land-card-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}
.mvp-compare-row {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mvp-compare-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.mvp-compare-visual svg {
  width: 100%;
  height: auto;
  max-width: 360px;
  display: block;
  margin: 0 auto 12px;
}
.mvp-compare-title {
  font-size: 1rem;
  margin: 0 0 10px;
  text-align: center;
}
@media (min-width: 720px) {
  .mvp-compare-title {
    text-align: left;
  }
  .mvp-compare-visual svg {
    margin-left: 0;
    margin-right: 0;
  }
}
.mvp-compare-list {
  margin: 0;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.mvp-land-steps {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .mvp-land-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.mvp-land-step {
  text-align: center;
}
.mvp-land-step-visual svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}
.mvp-land-step-title {
  font-size: 1rem;
  margin: 0 0 8px;
}
.mvp-land-step-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}
.mvp-pricing-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .mvp-pricing-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .mvp-pricing-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.mvp-price-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  background: #fafafa;
  text-align: center;
}
.mvp-price-card--featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, #eff6ff 0%, #fafafa 48%);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
}
.mvp-price-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
}
.mvp-price-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.mvp-price-amount {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.mvp-price-detail {
  font-size: 0.88rem;
  color: var(--muted);
}
.mvp-pricing-footnote {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.mvp-land-cta {
  text-align: center;
  padding: 36px 20px;
  margin-top: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
  border: 1px solid var(--border);
}
.mvp-land-cta h2 {
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  margin: 0 0 12px;
}
.mvp-land-cta-lead {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.6;
}
.mvp-land-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* 히스토리 v2 */
.mvp-hist2-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .mvp-hist2-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mvp-hist2-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #fafafa;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mvp-hist2-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}
.mvp-hist2-card-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 6px;
}
.mvp-hist2-card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.mvp-hist2-status {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
}
.mvp-hist2-modal-backdrop {
  position: fixed;
  inset: 0;
  /* 2026-04-23 Image #34: 사이드바(z-index 950)보다 위로 올려 완전 차단 + 중앙 정렬 기본.
     기존 모바일 bottom-sheet 스타일(flex-end)은 sample 모달에만 유지 */
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* 🅑 2026-04-19 fe-taehyun: "첫 클릭 실패" 루트 원인.
   hidden 상태에서도 backdrop이 pointer-events를 먹던 현상 해결.
   `.hidden { display:none !important; }`가 먼저 선언돼 있어 display:none이 맞지만,
   일부 브라우저의 transition 중간 상태에서 pointer-events가 샌다. 이중 방어. */
.mvp-hist2-modal-backdrop.hidden {
  pointer-events: none !important;
}
/* 2026-04-23 Image #34: 기본 center 정렬로 바뀌면서 이 media query 는 불필요하지만
   샘플 모달 등 bottom-sheet 스타일이 필요한 곳에서 override 할 수 있게 남김 */
.mvp-hist2-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.mvp-hist2-modal h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.mvp-hist2-modal-dl {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--muted);
}
.mvp-hist2-modal-dl dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 10px;
}
.mvp-hist2-modal-dl dd {
  margin: 4px 0 0;
}
.mvp-hist2-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
@media (min-width: 420px) {
  .mvp-hist2-modal-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* 차수별 결과 시트 — 2~3차 수정 비교 · QC 판정 */
.mvp-mod-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .mvp-mod-compare {
    grid-template-columns: 1fr;
  }
}
.mvp-mod-col {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fafafa;
}
.mvp-mod-col-cur {
  background: #fff;
}
.mvp-mod-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.mvp-qc-status-cell {
  white-space: normal;
  vertical-align: middle;
}
.mvp-qc-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}
.mvp-qc-radio input {
  margin: 0;
}
.mvp-export-revision-diff {
  margin-top: 16px;
}
.mvp-revision-diff-body {
  margin: 8px 0 0;
  padding-left: 1.1em;
  font-size: 0.9rem;
  color: var(--text);
}
.mvp-revision-diff-line {
  margin: 4px 0;
  line-height: 1.45;
}


/* 기본정보 탭 — 네이비 요약 / AI 카드 / 브랜드·관리번호 */
.mvp-basic-tab-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

.mvp-basic-hero {
  background: #1b2b6b;
  color: #fff;
  border-radius: 12px;
  padding: 16px 14px;
}

.mvp-basic-hero-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
}

.mvp-basic-hero-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.mvp-basic-visual {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.mvp-basic-visual-fig {
  margin: 0;
  flex-shrink: 0;
}

.mvp-basic-visual-fig img {
  display: block;
  height: 120px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #f1f5f9;
}

.mvp-basic-visual-summary {
  flex: 1;
  min-width: 0;
}

.mvp-basic-visual-summary--solo {
  width: 100%;
}

.mvp-basic-ai-desc {
  font-size: 12px;
  color: #3b82f6;
  margin-bottom: 6px;
  line-height: 1.45;
}

.mvp-basic-cat-line-ko {
  font-size: 14px;
  font-weight: 500;
  color: #1e40af;
  margin-bottom: 8px;
  line-height: 1.45;
}

.mvp-basic-summary-ta {
  width: 100%;
  min-height: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #1e293b;
  background: #fff;
  resize: vertical;
  font-family: inherit;
}

.mvp-basic-summary-ta::placeholder {
  color: var(--placeholder);
}

.mvp-basic-summary-ta:focus {
  outline: none;
  border-color: var(--navy);
}

.mvp-basic-field-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 6px;
}

.mvp-basic-field-label--muted {
  color: #64748b;
}

.mvp-basic-meta-text {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
  line-height: 1.45;
}

.mvp-basic-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #1e293b;
  background: #fff;
  font-family: inherit;
}

.mvp-basic-input::placeholder {
  color: var(--placeholder);
}

.mvp-basic-input:placeholder-shown:not(:focus) {
  border-style: dashed;
  border-color: #cbd5e1;
}

.mvp-basic-input:focus {
  outline: none;
  border-color: var(--navy);
  border-style: solid;
}

.mvp-basic-brand-block,
.mvp-basic-style-block,
.mvp-basic-date-block {
  display: flex;
  flex-direction: column;
}

.mvp-basic-ai-card {
  background: #eff6ff;
  color: #1e40af;
  border-radius: 12px;
  padding: 14px;
}

.mvp-basic-ai-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e40af;
  margin-bottom: 12px;
}

.mvp-basic-ai-input,
.mvp-basic-ai-select {
  width: 100%;
  border: 1px solid rgba(30, 64, 175, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #1e293b;
  background: #fff;
  margin-bottom: 12px;
  font-family: inherit;
}

.mvp-basic-ai-select {
  cursor: pointer;
}

.mvp-basic-ai-input::placeholder,
.mvp-basic-ai-select option {
  color: var(--placeholder);
}

.mvp-basic-ai-input:focus,
.mvp-basic-ai-select:focus {
  outline: none;
  border-color: #1e40af;
}

.mvp-df-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.mvp-df-li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 14px;
}

.mvp-df-li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #1e40af;
  font-weight: 700;
  line-height: 1.5;
}

.mvp-df-item-input {
  width: 100%;
  border: 1px solid rgba(30, 64, 175, 0.25);
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
  word-break: keep-all;
  color: #1e293b;
  background: #fff;
  font-family: inherit;
}

.mvp-df-item-input:placeholder-shown:not(:focus) {
  border-style: dashed;
  border-color: #cbd5e1;
}

.mvp-df-item-input:focus {
  outline: none;
  border-color: #1e40af;
  border-style: solid;
}

.mvp-basic-ai-card .mvp-df-add {
  margin-top: 0;
}

.mvp-basic-sew-hint {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.45;
}

.mvp-basic-sew-cb-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.mvp-sewing-row--basic .mvp-basic-ai-input {
  margin-bottom: 4px;
}

.mvp-basic-tab-root .tech-sheet-section {
  background: transparent;
  border-bottom: none;
  padding-left: 0;
  padding-right: 0;
}

/* 2026-04-18 대표 Day 3~4: /app dash-greeting h1 토큰과 동일 (weight 800, Neutral-900) */
.mvp-basic-tab-root .tech-sheet-h {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 12px;
  border-bottom: none;
  padding-bottom: 0;
}

/* ========== 작업지시서 3탭 리디자인 (spec) ========== */
/* 2026-04-20 designer-yerin: sticky 헤더 패딩 10→12px 유지, 탭 세그먼트를 담기 위한 하단 여백 추가 */
.mvp-result-head--sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.mvp-summary-line--twoline {
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.9em;
  margin-bottom: 8px;
}

/* ── tabProgressDots 컨테이너 (2026-04-20 designer-yerin)
   현재 tabCount:1 이므로 "작업지시서" 단일 pill만 표시 — 실질적으로 불필요.
   pill이 1개일 때는 컨테이너 자체를 숨김 처리. 실제 4탭은 mvp-wiz-tab-bar가 담당. */
.mvp-tab-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
}
/* 트랙 안에 pill이 1개만 있으면 숨김 */
.mvp-tab-progress-track:has(.mvp-tab-progress-pill:only-child) {
  display: none;
}
/* 2개 이상이면 표시 */
.mvp-tab-progress-track {
  display: flex;
  gap: 0;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  flex: 1;
}
.mvp-tab-progress-pill {
  flex: 1 0 auto;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.025em;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  line-height: 1.3;
  text-align: center;
  min-width: 0;
}
.mvp-tab-progress-pill.is-active {
  background: #fff;
  color: #1b2b6b;
  box-shadow: 0 1px 3px rgba(27,43,107,0.13), 0 0 0 1px rgba(27,43,107,0.06);
  font-weight: 700;
}
.mvp-tab-progress-pill.is-done {
  color: #16A06C;
}
.mvp-tab-progress-pill.is-done.is-active {
  background: #fff;
  color: #16A06C;
  box-shadow: 0 1px 3px rgba(22,160,108,0.12), 0 0 0 1px rgba(22,160,108,0.06);
}
.mvp-tab-progress-pill.is-pending:not(.is-active) {
  color: #94a3b8;
}

.mvp-spec-top2 {
  display: flex;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 24px;
}

.mvp-spec-top2-fig {
  flex: 0 0 40%;
  max-width: 40%;
  margin: 0;
}

.mvp-spec-top2-fig img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  display: block;
}

.mvp-spec-top2-ref {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 0;
}

.mvp-ref-images-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  background: #f8fafc;
}

.mvp-ref-images-empty-msg {
  margin: 0 0 10px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.mvp-ref-images-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-ref-img-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  touch-action: manipulation;
}

.mvp-ref-img-card--dragging {
  opacity: 0.65;
}

.mvp-ref-img-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
  vertical-align: top;
}

.mvp-ref-img-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.mvp-ref-img-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border: none;
  padding: 10px 8px 8px;
  background: linear-gradient(transparent, rgba(15, 23, 42, 0.72));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

.mvp-ref-img-add {
  margin-top: 4px;
}

.mvp-ref-sheet-link-block {
  margin: 8px 0;
}

.mvp-ref-sheet-link-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.mvp-sheet-tab-body textarea.mvp-sewing-ko-ta,
.mvp-sheet-tab-body .mvp-sewing-row textarea.mvp-sewing-ko-ta {
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 44px;
  height: auto;
  line-height: var(--leading-normal);
}

@supports (field-sizing: content) {
  .mvp-sheet-tab-body textarea.mvp-sewing-ko-ta {
    field-sizing: content;
    resize: none;
  }
}

@supports not (field-sizing: content) {
  .mvp-sheet-tab-body textarea.mvp-sewing-ko-ta {
    resize: vertical;
  }
}

/* 봉제 주의사항 — 모바일 카드 행 (체크 + 본문 + 하단 삭제) */
.mvp-sewing-list {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
  margin-bottom: var(--space-2);
}

.tech-sheet-section .mvp-sewing-list {
  border-color: #e8e8e8;
}

.mvp-sewing-item.mvp-sewing-row {
  display: block;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.mvp-sewing-item.mvp-sewing-row:last-child {
  border-bottom: none;
}

.mvp-sewing-item__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
}

.mvp-sewing-item__cb.mvp-sew-cb-only {
  align-items: flex-start;
  align-self: flex-start;
  padding: 2px 8px 4px 0;
}

.mvp-sewing-item .mvp-sew-cb-only input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.mvp-sewing-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mvp-sewing-item-text,
.mvp-sewing-item__body textarea.mvp-sewing-ko-ta {
  width: 100%;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
  word-break: keep-all;
  white-space: normal;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  box-sizing: border-box;
}

.mvp-sewing-item__body .mvp-ai-filled-input:not(textarea),
.mvp-sewing-item__body input.tech-inline-input {
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
}

.mvp-sewing-item__actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.mvp-sewing-item-delete.mvp-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  padding: 0 var(--space-3) !important;
  border-radius: 6px !important;
  background: #f5f5f5 !important;
  color: #999 !important;
  border: 1px solid transparent !important;
  font-size: var(--text-sm) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mvp-sewing-item-delete-x {
  font-size: 16px;
  line-height: 1;
}

/* 봉제 참고 — 헤더(타이틀 + AI 배지 1행, 부제 1행) */
.mvp-sew-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 6px;
}

.mvp-sew-header-title {
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  flex: 1;
  min-width: 0;
}

.mvp-sew-header-sub {
  margin: 0 0 12px !important;
  font-size: 14px;
  color: #888;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.mvp-sew-header-badge {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.mvp-spec-sew-block .mvp-sew-header-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #1e293b;
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
}

/* 봉제 행 — 보기 / 인라인 편집 */
.mvp-sewing-item.mvp-sewing-row.sewing-item .mvp-sewing-item__inner {
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item.editing {
  border-bottom-color: #c5ceff;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item.editing .mvp-sewing-item__inner {
  background: #f8f9ff;
}

.sewing-view-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* 봉제 참고 — 티어 그룹 헤더 · 점수 뱃지 · 사유 */
.sewing-tier-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.mvp-sewing-item-headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.mvp-sewing-item-headrow .sewing-item-text {
  flex: 1;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item .mvp-sewing-item__inner {
  border-left: 3px solid transparent;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item.critical .mvp-sewing-item__inner {
  border-left-color: #ff4444;
  background: #fffafa;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item.important .mvp-sewing-item__inner {
  border-left-color: #ffa500;
  background: #fffdf5;
}

.mvp-sewing-item.mvp-sewing-row.sewing-item.normal .mvp-sewing-item__inner,
.mvp-sewing-item.mvp-sewing-row.sewing-item.reference .mvp-sewing-item__inner {
  border-left-color: #ccc;
  background: #fff;
}

.score-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
  line-height: 1.3;
}

.score-badge.critical {
  color: #c00;
  background: #ffe8e8;
}

.score-badge.important {
  color: #b85c00;
  background: #fff0d6;
}

.score-badge.normal,
.score-badge.reference {
  color: #777;
  background: #f0f0f0;
}

.sewing-reason {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  margin: 3px 0 0;
  display: none;
}

.mvp-sewing-row.critical .sewing-reason,
.mvp-sewing-row.is-reason-expanded .sewing-reason {
  display: block;
}

.sewing-reason-toggle {
  align-self: flex-start;
  margin-top: 2px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.mvp-sewing-row.critical .sewing-reason-toggle {
  display: none;
}

.mvp-sewing-item-editrow {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 2px;
}

.sewing-item-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #222;
  word-break: keep-all;
  letter-spacing: -0.01em;
}

.sewing-edit-btn {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #1b2b6b;
  background: #eef1ff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.sewing-edit-btn:active {
  opacity: 0.7;
}

.sewing-inline-edit-host {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.sewing-textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  letter-spacing: -0.01em;
  background: #fff;
  border: 1.5px solid #c5ceff;
  border-radius: 8px;
  resize: none;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.sewing-textarea:focus {
  outline: none;
  border-color: #1b2b6b;
}

.sewing-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.sewing-cancel-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.sewing-save-btn {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1b2b6b;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.tech-sheet-section:not(.cq-ai-sew-proto) .mvp-sewing-item .mvp-sewing-cb {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.tech-sheet-section:not(.cq-ai-sew-proto) .mvp-sewing-item .mvp-sewing-cb:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.tech-sheet-section:not(.cq-ai-sew-proto) .mvp-sewing-item .mvp-sewing-cb:checked::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.mvp-spec-top2-main {
  flex: 1;
  min-width: 0;
}

.mvp-ai-badge-10 {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 6px;
}

.mvp-spec-top-item {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 4px;
}

.mvp-spec-top-cat-select {
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  font-weight: 500;
  color: #3b82f6;
  border: none;
  background: transparent;
  padding: 2px 0;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 18px;
}

.mvp-spec-top-df {
  margin: 0;
  padding-left: 1.1em;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.mvp-spec-top-df li.mvp-spec-muted {
  color: #94a3b8;
}

.mvp-spec-info-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
  margin-bottom: 24px;
}

.mvp-spec-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.mvp-spec-info-row:last-child {
  border-bottom: none;
}

.mvp-spec-info-label {
  flex: 0 0 auto;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.mvp-spec-info-value {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.mvp-spec-info-value input,
.mvp-spec-info-value select {
  width: 100%;
  max-width: 220px;
  text-align: right;
  font-size: 14px;
}

.mvp-basic-info-ro-tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mvp-basic-info-ro-tap:active {
  background: #f8fafc;
}
.mvp-basic-info-ro-arrow {
  flex-shrink: 0;
  font-size: 16px;
  color: #1b2b6b;
  font-weight: 600;
  padding-left: 4px;
}

.mvp-user-input-dashed {
  border: 1.5px dashed #e5e7eb !important;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff !important;
  color: #1e293b;
}

.mvp-user-input-dashed::placeholder {
  color: #9ca3af;
}

.mvp-ai-filled-input,
.mvp-ai-filled-select {
  border: 1.5px solid transparent !important;
  border-left: 3px solid #3b82f6 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 8px 12px;
  background: #eff6ff !important;
  color: #1e40af !important;
}

.mvp-user-input-solid {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  color: #1e293b;
}

.mvp-badge-stage {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #1b2b6b;
  color: #fff;
}

.mvp-badge-origin {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
}

.mvp-spec-style-foot {
  margin-bottom: 24px;
}

.mvp-spec-style-foot-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

.mvp-spec-style-foot-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0 8px;
}

.mvp-spec-style-foot-inp {
  width: 100%;
  max-width: 100%;
}

.mvp-spec-ai-block {
  border-radius: 0 16px 16px 0;
  border: none;
  border-left: 3px solid #3b82f6;
  background: #eff6ff;
  padding: 16px;
  margin-bottom: 24px;
}

.mvp-spec-ai-block-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: #1e293b;
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
}

.mvp-spec-ai-block-sub {
  font-size: var(--text-sm);
  color: var(--text-aux);
  margin: 4px 0 var(--space-3);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-korean);
}

/* 작업지시서 탭 내 섹션 제목 (부자재 · 봉제 참고 · 사이즈 등) */
.mvp-sheet-tab-body .tech-sheet-h {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  text-transform: none;
  color: #1e293b;
  border-bottom: 2px solid var(--accent);
  gap: var(--space-2);
}

.mvp-spec-sew-block .mvp-spec-sew-h {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-2);
  border: none;
  padding: 0;
  color: #1e293b;
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
}

.mvp-spec-sew-sub {
  margin-bottom: 12px !important;
}

.mvp-spec-preset-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.mvp-spec-preset-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.mvp-spec-preset-chip.is-active {
  border-color: #3b82f6;
  background: #dbeafe;
  color: #1e40af;
}

.mvp-spec-hint-yellow {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* AI 추천: 원단 카드 · 컬러 칩 · 봉제(프로토 탭) */
.tech-sheet-section.mvp-ai-rec-block {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 14px;
}

.mvp-ai-rec-block {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 10px;
  padding: 12px 14px 14px;
  margin-bottom: 14px;
}

.mvp-ai-rec-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: #1d4ed8;
  background: #dbeafe;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: var(--space-2);
  line-height: var(--leading-tight);
}

.mvp-ai-fabric-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.mvp-ai-fabric-card {
  flex: 1 1 150px;
  text-align: left;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mvp-ai-fabric-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 1px 6px rgba(59, 130, 246, 0.2);
}

.mvp-ai-fabric-card-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
  word-break: keep-all;
  color: #0f172a;
  margin-bottom: 4px;
}

.mvp-ai-fabric-card-comp {
  display: block;
  font-size: 12px;
  color: #334155;
  margin-bottom: 6px;
}

.mvp-ai-fabric-card-trait {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

.mvp-ai-color-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  align-items: center;
}

.mvp-ai-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  transition: border-color 0.15s ease;
}

.mvp-ai-color-chip:hover {
  border-color: #3b82f6;
}

.mvp-ai-color-chip-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

/* 부자재 — 모바일 카드 / 데스크톱 30·25·15·15·15 그리드 */
.mvp-sheet-tab-body .mvp-accessory-wrap.accessory-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}

.mvp-acc-desk-head {
  display: none;
}

/* —— 부자재 테이블 (Sprint #43 토스/당근 스타일) —— */
.mvp-acc-table-scope .mvp-acc-reason-chip-block {
  margin-top: 4px;
}

.mvp-acc-table-scope .ai-reason-chips-title {
  font-size: 13px;
  font-weight: 700;
  color: #1b2b6b;
  margin-bottom: 8px;
}

.mvp-acc-table-scope .ai-reason-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 12px;
}

.mvp-acc-table-scope .ai-reason-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #fff9e6;
  border: 1px solid #ffd700;
  border-radius: 20px;
  font-size: 12px;
  color: #b8860b;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.35;
  text-align: left;
  max-width: 100%;
}

.mvp-acc-table-scope .mvp-acc-vendor-hint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 10px;
}

.mvp-acc-table-scope .accessory-table-wrap {
  width: 100%;
  border: 1.5px solid #e8eaff;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 4px;
  box-sizing: border-box;
}

.mvp-acc-table-scope .accessory-table-header {
  display: grid;
  grid-template-columns: 1fr 72px 72px 36px;
  gap: 0 8px;
  padding: 10px 12px;
  background: #f5f7ff;
  border-bottom: 1px solid #e8eaff;
  align-items: center;
}

.mvp-acc-table-scope .accessory-table-header span {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.02em;
}

.mvp-acc-table-scope .accessory-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px 36px;
  gap: 0 8px;
  align-items: center;
  padding: 12px 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.1s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.mvp-acc-table-scope .accessory-row:last-of-type {
  border-bottom: none;
}

.mvp-acc-table-scope .accessory-row.ai-recommended {
  background: #fffde7;
}

.mvp-acc-table-scope .accessory-row.ai-recommended:active {
  background: #fff9c4;
}

.mvp-acc-table-scope .accessory-row--highlight {
  box-shadow: inset 0 0 0 2px #f59e0b;
  border-radius: 4px;
}

.mvp-acc-table-scope .accessory-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mvp-acc-table-scope .accessory-ai-badge {
  font-size: 10px;
  color: #b8860b;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mvp-acc-table-scope .accessory-name-inp {
  width: 100%;
  padding: 6px 8px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.01em;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}

.mvp-acc-table-scope .accessory-name-inp:focus {
  outline: none;
  border-color: #1b2b6b;
}

.mvp-acc-table-scope .accessory-input {
  width: 100%;
  padding: 6px 6px;
  font-size: 13px;
  color: #111;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
}

.mvp-acc-table-scope .accessory-input:focus {
  outline: none;
  border-color: #1b2b6b;
}

.mvp-acc-table-scope .accessory-input::placeholder {
  color: #ccc;
  font-size: 11px;
}

.mvp-acc-table-scope .accessory-delete-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
  border-radius: 8px;
  color: #999;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  font-family: inherit;
  justify-self: end;
}

.mvp-acc-table-scope .accessory-delete-btn:active {
  background: #ffe8e8;
  color: #ff4444;
}

.mvp-acc-table-scope .accessory-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  cursor: pointer;
  color: #1b2b6b;
  font-size: 14px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  background: #fafbff;
  border: none;
  border-top: 1px solid #f0f0f0;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
}

.mvp-acc-table-scope .accessory-add-row:active {
  background: #f0f3ff;
}

.mvp-acc-table-scope .accessory-add-plus {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.mvp-toast.mvp-toast--with-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  max-width: min(92vw, 360px);
  padding: 14px 16px;
}

.mvp-toast--with-action .mvp-toast-msg {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}

.mvp-toast-action-btn {
  align-self: flex-end;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: #1b2b6b;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.mvp-acc-cards {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .mvp-acc-desk-head {
    display: grid;
    grid-template-columns: 30% 25% 15% 15% minmax(72px, 15%);
    gap: 8px 10px;
    align-items: end;
    padding: 0 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }

  .mvp-acc-card {
    display: grid;
    grid-template-columns: 30% 25% 15% 15% minmax(72px, 15%);
    gap: 8px 10px;
    align-items: start;
    padding: 10px 4px 12px;
    border-bottom: 1px solid var(--border);
  }

  .mvp-acc-card--ai {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 8px;
    margin-bottom: 6px;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
  }

  .mvp-acc-card--empty {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
  }

  .mvp-acc-card:last-child {
    border-bottom: none;
  }

  .mvp-acc-ai-head {
    grid-column: 1 / -1;
    margin-bottom: -2px;
  }

  .mvp-acc-ai-line {
    font-size: 12px;
    color: #64748b;
    line-height: 1.35;
  }

  .mvp-acc-ai-reason {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
  }

  .mvp-acc-split {
    display: contents;
  }

  .mvp-acc-fld {
    position: relative;
    min-width: 0;
  }

  .mvp-acc-fld--item {
    grid-column: 1;
  }
  .mvp-acc-fld--supplier {
    grid-column: 2;
  }
  .mvp-acc-fld--qty {
    grid-column: 3;
  }
  .mvp-acc-fld--price {
    grid-column: 4;
  }
  .mvp-acc-del-wrap {
    grid-column: 5;
    justify-self: end;
    align-self: center;
  }

  .mvp-acc-lbl {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mvp-sheet-tab-body .mvp-accessory-wrap .mvp-acc-fld .tech-inline-input,
  .mvp-sheet-tab-body .mvp-accessory-wrap .mvp-acc-fld .mvp-tech-inp {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    text-overflow: clip;
  }

  .mvp-acc-del-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff4444 !important;
    font-size: 14px;
    font-weight: 600;
    background: transparent !important;
    border: none !important;
    padding: 6px 4px;
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .mvp-acc-cards {
    gap: 8px;
  }

  .mvp-acc-card.accessory-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .mvp-acc-card--empty {
    background: #fafafa;
    border-color: #e8e8e8;
    box-shadow: none;
  }

  .mvp-acc-card--ai {
    background: #eff6ff;
    border-color: #bfdbfe;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.12);
  }

  .mvp-acc-ai-head {
    order: 0;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .mvp-acc-fld--item {
    order: 1;
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
  }

  .mvp-acc-split.input-row {
    order: 2;
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
  }

  .mvp-acc-fld--supplier {
    order: 3;
    width: 100%;
    min-width: 0;
    margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .mvp-acc-fld--supplier .mvp-acc-lbl {
    display: block;
    margin-bottom: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .mvp-acc-fld--supplier .tech-inline-input,
  .mvp-acc-fld--supplier .mvp-tech-inp {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: none;
  }

  .mvp-acc-del-wrap.delete-btn {
    order: 4;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .mvp-acc-ai-line.ai-badge {
    font-size: 12px;
    color: #888;
    line-height: 1.35;
    margin-bottom: 4px;
  }

  .mvp-acc-ai-reason.ai-reason {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    word-break: keep-all;
  }

  .mvp-acc-fld:not(.mvp-acc-fld--supplier) .mvp-acc-lbl {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .mvp-acc-fld .tech-inline-input.mvp-acc-input,
  .mvp-acc-fld .mvp-tech-inp.mvp-acc-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mvp-acc-fld--supplier .mvp-tech-inp.mvp-acc-input {
    width: auto;
  }

  .mvp-acc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mvp-acc-del-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .mvp-acc-del-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff4444 !important;
    font-size: 13px;
    font-weight: 500;
    background: transparent !important;
    border: none !important;
    padding: 4px 0;
    min-height: auto;
  }

  .mvp-add-accessory-row.add-accessory-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1.5px dashed #ccc !important;
    border-radius: 12px;
    background: #fff !important;
    font-size: 15px;
    color: #555 !important;
    text-align: center;
    margin-top: 4px;
    font-weight: 500;
  }
}

.mvp-size-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mvp-btn-size-later {
  order: -1;
}

/* 사이즈 행렬만 첫 열(부위) 고정 — 부자재·발주 등 다른 tech-data-table에 적용되면 품목명 열이 잘림 */
.mvp-sheet-tab-body .tech-data-table.mvp-meas-matrix-table .mvp-meas-part-col,
.mvp-sheet-tab-body .tech-data-table.mvp-meas-matrix-table th:first-child,
.mvp-sheet-tab-body .tech-data-table.mvp-meas-matrix-table td:first-child {
  width: 70px;
  min-width: 70px;
  max-width: 96px;
  white-space: normal;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

/* 사이즈 부위명 인라인 편집 (Sprint 22) */
.mvp-sheet-tab-body .tech-data-table.mvp-meas-matrix-table td.size-label-cell {
  min-width: 80px;
  max-width: 132px;
}

.size-label-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  vertical-align: top;
  padding: 0 8px;
  cursor: text;
}

.size-label-cell-main {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.size-label-text {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  letter-spacing: -0.01em;
  border-bottom: 1.5px dashed #c5ceff;
  padding-bottom: 1px;
  cursor: text;
  max-width: 100%;
  word-break: keep-all;
}

.size-label-cell:hover .size-label-text,
.size-label-cell:focus-within .size-label-text {
  border-bottom-color: #aabcff;
}

.size-label-input {
  width: 80px;
  min-width: 72px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 15px;
  font-weight: 500;
  color: #1b2b6b;
  background: #f0f3ff;
  border: 1.5px solid #1b2b6b;
  border-radius: 6px;
  padding: 4px 8px;
  letter-spacing: -0.01em;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.size-label-input:focus {
  outline: none;
}

.mvp-size-label-hint-once {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #888;
  letter-spacing: -0.01em;
}

.size-hint {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin-top: 8px;
  padding: 8px;
}

.add-row-btn {
  width: 100%;
  padding: 14px;
  border: 1.5px dashed #c5ceff;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #1b2b6b;
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
  font-family: inherit;
  box-sizing: border-box;
}

.add-row-btn:active {
  background: #f0f3ff;
}

.mvp-sheet-tab-body .tech-data-table th {
  font-size: 12px;
  font-weight: 600;
}

.mvp-meas-ai-foot {
  font-size: 12px;
  color: #3b82f6;
  margin: 8px 0 0;
}

.mvp-meas-inp--empty {
  border: 1px dashed #d1d5db !important;
  background: #fff !important;
  color: #9ca3af !important;
  text-align: center;
}

.mvp-meas-inp--empty::placeholder {
  color: #9ca3af;
}

.mvp-meas-inp--filled {
  border: 1px solid #93c5fd !important;
  background: #fff !important;
}

.mvp-meas-inp--ai-val {
  color: #1e40af !important;
}

.mvp-sheet-tab-body .tech-inline-input.mvp-tech-inp {
  background: #fff !important;
  border: 1px solid #e5e7eb;
  color: #1e293b;
}

.mvp-sheet-tab-body .tech-inline-input.mvp-tech-inp::placeholder {
  color: #9ca3af;
}

.mvp-sheet-tab-body .tech-inline-input.mvp-tech-inp--dashed {
  border-style: dashed;
  border-color: #d1d5db;
}

.mvp-inline-field-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
}

.mvp-trim-na-prominent label {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.mvp-export-preview-scroll {
  margin-bottom: 16px;
}

.mvp-export-summary-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
}

.mvp-export-summary-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.mvp-export-summary-meta {
  font-size: 13px;
  color: #64748b;
  margin-top: 6px;
}

.mvp-export-summary-sep {
  height: 1px;
  background: #e5e7eb;
  margin: 14px 0;
}

.mvp-export-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 13px;
}

.mvp-export-summary-pill.is-ok::before {
  content: "✓ ";
  font-weight: 700;
}
.mvp-export-summary-pill.is-ok {
  color: #15803d;
}

.mvp-export-summary-pill.is-warn::before {
  content: "! ";
  font-weight: 700;
}
.mvp-export-summary-pill.is-warn {
  color: #c2410c;
}

.mvp-export-summary-pill.is-muted::before {
  content: "· ";
}
.mvp-export-summary-pill.is-muted {
  color: #94a3b8;
}

.mvp-export-size-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  line-height: 1.5;
}

.mvp-export-goto-size {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: #ea580c;
  font-weight: 700;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.mvp-export-stack .mvp-export-subhead {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin: 8px 0;
}

.mvp-btn-share-kakao {
  background: #fae100 !important;
  color: #3c1e1e !important;
  padding: 18px 16px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
}

.mvp-btn-share-kakao:hover {
  filter: brightness(0.97);
}

.mvp-btn-share-wechat {
  background: #07c160 !important;
  color: #fff !important;
  padding: 14px 16px !important;
  font-weight: 700 !important;
  border: none !important;
}

.mvp-export-dl-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  flex-wrap: unset !important;
}

.mvp-export-dl-btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 14px 14px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "title go"
    "desc go"
    "use go" !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  align-items: center !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s !important;
}

.mvp-export-dl-card-title {
  grid-area: title;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}

.mvp-export-dl-card-desc {
  grid-area: desc;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  line-height: 1.35;
}

.mvp-export-dl-card-use {
  grid-area: use;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
  white-space: pre-line;
}

.mvp-export-dl-card-go {
  grid-area: go;
  font-size: 13px;
  font-weight: 800;
  color: #1b2b6b;
  justify-self: end;
  align-self: center;
}

.mvp-export-dl-btn--primary {
  border-color: #1b2b6b !important;
  background: #f8faff !important;
}

.mvp-export-dl-hint {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

.mvp-export-dl-btn:active:not(:disabled) {
  background: #f0f3ff !important;
  border-color: #1b2b6b !important;
  color: #1b2b6b !important;
}

.mvp-export-dl-btn:disabled {
  opacity: 0.5 !important;
  cursor: default !important;
}

.mvp-export-dl-btn--loading {
  opacity: 0.55 !important;
}

.mvp-export-dl-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e0e0e0;
  border-top-color: #1b2b6b;
  border-radius: 50%;
  animation: mvp-export-spin 0.6s linear infinite;
  flex-shrink: 0;
}

.mvp-export-dl-busy-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@keyframes mvp-export-spin {
  to {
    transform: rotate(360deg);
  }
}

.mvp-download-row-compact {
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.mvp-export-dl-grid.mvp-download-row-compact {
  flex-wrap: unset !important;
  gap: 8px !important;
}

.mvp-export-warn {
  font-size: 13px;
  color: #c2410c;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  margin-bottom: 12px;
}

.mvp-history-continue-link {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  margin: 8px 0 4px;
}

/* ─── 모바일 최종: 플로우 헤더 · 업로드 · 인증 · 히스토리 · 터치 보조 ─── */
.mvp-flow-head {
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.mvp-flow-head-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mvp-flow-question {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: #111827;
}
.mvp-flow-extra {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 8px;
}
.mvp-glossary-btn {
  flex-shrink: 0;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.mvp-glossary-btn:active {
  opacity: 0.88;
}

.mvp-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.mvp-upload-actions .mvp-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  min-height: var(--tap-min);
  border-radius: 12px;
}

.mvp-link-block {
  margin-bottom: 12px;
}
.mvp-link-block .mvp-link-row {
  margin-bottom: 8px;
}
.mvp-link-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #64748b;
}
.mvp-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.mvp-link-row .mvp-link-input {
  flex: 1 1 120px;
  min-height: var(--tap-min);
  margin-top: 0;
}
.mvp-link-row .mvp-btn {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  margin-top: 0;
}

.mvp-upload-drop-hint {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  max-width: 280px;
}

.mvp-upload-err {
  font-size: 14px;
  color: #b91c1c;
  margin-top: 12px;
  line-height: 1.45;
}
.mvp-upload-err.mvp-upload-err--loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 12px;
}
.mvp-upload-err.mvp-upload-err--loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #bfdbfe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: mvp-link-fetch-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes mvp-link-fetch-spin {
  to {
    transform: rotate(360deg);
  }
}

.mvp-size-panel {
  flex-shrink: 0;
  padding: 0 12px 12px;
  overflow-y: auto;
}
.mvp-size-panel .mvp-btn {
  min-height: var(--tap-min);
}
.mvp-size-panel .mvp-btn-primary.mvp-btn-block {
  min-height: var(--cta-height);
  font-size: 16px;
}
.mvp-size-hint {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 12px;
}

.mvp-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.mvp-card-narrow {
  max-width: 100%;
}
.mvp-btn-kakao-main {
  background: #fae100 !important;
  color: #3c1e1e !important;
  border: none !important;
  min-height: var(--cta-height) !important;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.mvp-btn-google,
.mvp-btn-secondary-oauth {
  min-height: 52px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.mvp-g-icon {
  font-weight: 700;
  margin-right: 6px;
}
.mvp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}
.mvp-divider::before,
.mvp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.mvp-email-reveal {
  min-height: var(--tap-min) !important;
  font-size: 16px !important;
}
.mvp-auth-footnote {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin: 20px 0 0;
  line-height: 1.5;
}
.mvp-muted-center {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 12px;
  line-height: 1.5;
}
.mvp-btn-cta-secondary {
  min-height: var(--cta-height) !important;
  font-size: 16px !important;
}

.mvp-history-main {
  max-width: var(--max) !important;
  margin: 0 auto;
  padding: 20px 16px calc(32px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px)) !important;
}
.mvp-hist-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  align-items: stretch;
}
.mvp-hist-search-input {
  flex: 1;
  min-height: 44px;
  border-radius: 22px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.mvp-hist-search-row .mvp-btn {
  min-height: 44px;
  flex-shrink: 0;
}
.mvp-hist2-modal {
  padding-bottom: calc(20px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px)) !important;
}
.mvp-hist2-modal-actions .mvp-btn {
  min-height: var(--tap-min);
}

.mvp-feature-discovery-sheet .mvp-feature-discovery-panel {
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mvp-feature-discovery-sheet.mvp-feature-discovery-sheet--open .mvp-feature-discovery-panel {
  transform: translateY(0);
}
.mvp-feature-discovery-headline {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.mvp-feature-discovery-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}
.mvp-feature-discovery-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.mvp-feature-discovery-item-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.mvp-feature-discovery-item-desc {
  margin: 0;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}
.mvp-feature-discovery-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.mvp-feature-discovery-actions .mvp-btn {
  min-height: var(--tap-min);
  flex: 1;
  min-width: 120px;
}

/* 로그인 게이트 바텀시트 (홈 CTA · /create 업로드) */
.mvp-login-gate-sheet .mvp-sheet-panel.login-sheet {
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px 48px;
  text-align: center;
  box-sizing: border-box;
}
.mvp-login-gate-sheet.mvp-login-gate-sheet--open .mvp-sheet-panel.login-sheet {
  transform: translateY(0);
}
.login-sheet-icon {
  /* 2026-04-18 대표 요청: /app .app-logo 스타일로 통일 */
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1b2b6b;
  margin: 8px 0 20px;
  line-height: 1;
  text-align: center;
}
.login-sheet-title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0 0 6px;
}
.login-sheet-sub {
  font-size: 14px;
  color: #888;
  margin: 0 0 28px;
  line-height: 1.5;
}
.kakao-btn {
  width: 100%;
  height: 52px;
  background: #fee500;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #191600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.kakao-btn:active {
  opacity: 0.92;
}
.email-btn {
  width: 100%;
  height: 52px;
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  cursor: pointer;
  box-sizing: border-box;
}
.email-btn:active {
  opacity: 0.9;
}
.login-link {
  font-size: 13px;
  color: #aaa;
  margin: 0;
}
.login-link span {
  color: #1b2b6b;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* 체크박스 터치 영역 44×44 (시각적 박스는 작아도 됨) */
.mvp-sew-cb-only,
.mvp-trim-na-row label {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  padding: 4px 8px 4px 0;
  cursor: pointer;
}
.mvp-sew-cb-only input[type="checkbox"],
.mvp-trim-na-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
}

.mvp-spec-preset-chip {
  min-height: 44px;
  padding: 10px 16px;
}

.mvp-btn-share-kakao {
  min-height: var(--cta-height) !important;
  font-size: 16px !important;
}
.mvp-btn-share-wechat {
  min-height: 52px !important;
  font-size: 16px !important;
}
.mvp-export-dl-btn {
  min-height: 44px !important;
}

.mvp-sheet-tab-body .mvp-spec-info-value input,
.mvp-sheet-tab-body .mvp-spec-info-value select,
.mvp-sheet-tab-body .mvp-user-input-dashed,
.mvp-sheet-tab-body .mvp-user-input-solid,
.mvp-sheet-tab-body .mvp-ai-filled-input,
.mvp-sheet-tab-body .mvp-ai-filled-select {
  min-height: var(--tap-min);
}
.mvp-sheet-tab-body .tech-inline-input {
  min-height: 44px;
  box-sizing: border-box;
}
.mvp-df-item-input {
  min-height: var(--tap-min);
}

.mvp-logo-link {
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
}

/* 테이블·보조 입력: iOS 줌 방지(서브 테이블 규칙이 덮어쓰지 않도록) */
.mvp .tech-inline-input,
.mvp .tech-sub-table .tech-inline-input,
.mvp .tech-sub-table input {
  font-size: max(16px, 1rem) !important;
}

.mvp-sheet-tab-body .mvp-row-del,
.mvp-sheet-tab-body .mvp-del-simple-meas {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
}

/* —— 프로필 페이지 —— */
.mvp-profile-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}
.mvp-profile-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.mvp-profile-card:hover {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  border-color: #cbd5e1;
}
@media (max-width: 640px) {
  .mvp-profile-card { padding: 18px 16px; border-radius: 12px; }
}
.mvp-profile-h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}
.mvp-profile-msg {
  margin-top: 8px;
  font-size: 0.88rem;
}
.mvp-factory-editor-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mvp-factory-editor-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.mvp-factory-editor-card .mvp-fe-memo {
  grid-column: 1 / -1;
}
.mvp-factory-editor-card .mvp-fe-del {
  grid-column: 1 / -1;
  justify-self: start;
}

/* —— 4단계: 차수 + 생산국 —— */
.mvp-sc-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mvp-sc-section-title {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
}
.mvp-sc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mvp-sc-card {
  flex: 1 1 calc(50% - 8px);
  min-width: 140px;
  min-height: 56px;
  text-align: left;
  padding: var(--space-4);
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.mvp-sc-card.is-selected {
  border-color: #0f172a;
  background: #f1f5f9;
}
.mvp-sc-card-emoji {
  font-size: 1.25rem;
  display: block;
  margin-bottom: 4px;
}
.mvp-sc-card-t {
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
  color: #0f172a;
  word-break: keep-all;
}
.mvp-sc-card-d {
  font-size: var(--text-sm);
  color: var(--text-aux);
  margin-top: 2px;
  line-height: var(--leading-tight);
  word-break: keep-all;
}
.mvp-sc-tip {
  padding: 10px 12px;
  border-radius: 8px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 0.86rem;
  line-height: 1.45;
}
.mvp-sc-cn-note {
  padding: 10px 12px;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.84rem;
  line-height: 1.45;
}
.mvp-sc-cn-note.hidden,
.mvp-sc-tip.hidden {
  display: none !important;
}

/* 작업지시서 만들기 CTA (5단계 플로우) */
.mvp-btn-wo-gen {
  min-height: 56px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
}
.mvp-btn-wo-gen.mvp-btn--disabled,
.mvp-btn-wo-gen:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 브랜드 첫 설정 모달 */
.mvp-brand-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.mvp-brand-modal-backdrop.hidden {
  display: none !important;
}
.mvp-brand-modal {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.mvp-brand-modal h3 {
  margin: 0 0 8px;
}
.mvp-brand-modal .sub {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 0.9rem;
}

/* 히스토리 그룹 */
.mvp-hist-group {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fff;
  text-align: left;
}
.mvp-hist-group-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: #0f172a;
  margin-bottom: 8px;
}
.mvp-hist-group-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mvp-hist-group-row {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font: inherit;
  cursor: pointer;
  font-size: 0.88rem;
  color: #334155;
}
.mvp-hist-group-row:hover {
  border-color: #94a3b8;
}

.mvp-hist-item-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.mvp-hist-item-row .mvp-hist-group-row {
  flex: 1 1 200px;
  min-width: 0;
}
.mvp-hist-sample-received-btn {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  font-size: 0.82rem;
  font-weight: 600;
  color: #92400e;
  cursor: pointer;
}
.mvp-hist-sample-received-btn:hover {
  border-color: #f59e0b;
  background: #fef3c7;
}
.mvp-hist-sample-modal .mvp-hist-sample-lead {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0 0 12px;
}
.mvp-hist-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.mvp-hist-sample-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}
.mvp-hist-sample-chip.is-selected {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1d4ed8;
}
.mvp-hist-sample-preview {
  font-size: 0.85rem;
  color: #334155;
  white-space: pre-wrap;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin: 10px 0 0;
}

.mvp-hist-sample-criteria {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}
.mvp-hist-sample-crit {
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fafafa;
  color: #334155;
}
.mvp-hist-sample-crit--bad {
  background: #fef2f2;
  border-color: #fecaca;
}
.mvp-hist-sample-crit--mid {
  background: #fffbeb;
  border-color: #fde68a;
}
.mvp-hist-sample-crit--ok {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.mvp-hist-sample-pass-block {
  margin-bottom: 14px;
}
.mvp-hist-sample-pass-h {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 8px;
}
.mvp-hist-sample-hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 14px 0;
}
.mvp-hist-sample-fail-h {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 8px;
}

/* ─── 공장 첫 연락 슬라이드업 ─── */
.mvp-first-contact-sheet {
  position: fixed;
  inset: 0;
  z-index: 12050;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.mvp-first-contact-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mvp-first-contact-sheet__panel {
  width: 100%;
  max-width: 440px;
  max-height: 72vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
  padding: 14px 16px 16px;
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mvp-first-contact-sheet.is-open .mvp-first-contact-sheet__panel {
  transform: translateY(0);
}
.mvp-first-contact-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.mvp-first-contact-sheet__title {
  font-weight: 800;
  font-size: 1rem;
  color: #0f172a;
}
.mvp-first-contact-sheet__x {
  border: none;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.mvp-first-contact-sheet__hint {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.4;
}
.mvp-first-contact-sheet__pre {
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  max-height: 38vh;
  overflow: auto;
}
.mvp-first-contact-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─── PDF 이중언어 옵션 ─── */
.mvp-pdf-bilingual-box {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  margin-bottom: 10px;
}
.mvp-pdf-bilingual-head {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
}
.mvp-pdf-bilingual-sub {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}
.mvp-pdf-bilingual-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mvp-pdf-bilingual-opt {
  flex: 1 1 140px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 2px solid #e2e8f0 !important;
  background: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}
.mvp-pdf-bilingual-opt.is-selected {
  border-color: #1b2b6b !important;
  background: #eef2ff !important;
  color: #1b2b6b !important;
}

/* ─── 공장 소통 문구 모음 ─── */
.mvp-factory-phrasebook {
  margin: 14px 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #fff;
}
.mvp-factory-phrasebook-title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 0.92rem;
  color: #0f172a;
}
.mvp-factory-phrasebook-cat {
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
  margin: 12px 0 6px;
  text-transform: none;
}
.mvp-factory-phrasebook-cat:first-of-type {
  margin-top: 0;
}
.mvp-factory-phrasebook-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.mvp-factory-phrasebook-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mvp-factory-phrasebook-ko {
  margin: 0 0 4px;
  font-size: 0.84rem;
  color: #0f172a;
  line-height: 1.4;
}
.mvp-factory-phrasebook-zh {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #2563eb;
  line-height: 1.4;
}
.mvp-factory-phrasebook-copy {
  font-size: 0.8rem !important;
  padding: 8px 12px !important;
}

.mvp-send-smart-check-host {
  margin-bottom: 16px;
}
.mvp-send-smart-sec {
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.mvp-send-smart--block {
  background: #fef2f2;
  border: 1px solid #fecaca;
}
.mvp-send-smart--soft {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mvp-send-smart--ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.mvp-send-smart-sec-title {
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}
.mvp-send-smart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  margin-top: 6px;
}
.mvp-send-smart-row-txt {
  flex: 1 1 160px;
  color: #334155;
}
.mvp-send-smart-soft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mvp-send-smart-ok-txt {
  margin: 0;
  color: #166534;
}

/* 기본정보 카드 — 섹션 구분선, 아이템명 입력, 문서번호, 내부용 접기 */
.mvp-spec-info-section-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--caption);
  padding: 14px 16px 8px;
  margin: 0;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(to bottom, #fafbfc, #fff);
}

.mvp-spec-top-item-inp {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  margin-bottom: 4px;
  padding: 6px 0;
  border: none;
  border-bottom: 1px dashed #e2e8f0;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
}

.mvp-spec-top-item-inp:focus {
  outline: none;
  border-bottom-color: #3b82f6;
}

.mvp-readonly-inline.mvp-doc-no-display {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-align: left;
  padding: 8px 0;
}

.mvp-basic-accordion {
  margin: 0 0 20px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  overflow: hidden;
}

.mvp-basic-accordion-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mvp-basic-accordion-summary::-webkit-details-marker {
  display: none;
}

.mvp-basic-accordion-summary::after {
  content: "▾";
  font-size: 12px;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.mvp-basic-accordion[open] .mvp-basic-accordion-summary::after {
  transform: rotate(-180deg);
}

.mvp-basic-accordion-body {
  padding: 0 16px 16px;
  border-top: 1px solid #f1f5f9;
}

/* Sprint #34 — 사이즈 위저드 · 원단/부자재 톤 */
.mvp-s34-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 6px;
  letter-spacing: var(--tracking-korean, -0.02em);
}

.mvp-s34-hero--compact .mvp-s34-hero-title {
  font-size: 18px;
}

.mvp-s34-hero-sub {
  font-size: 14px;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 12px;
}

.mvp-s34-hero-sub--tint {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
}

.mvp-s34-ai-hint {
  font-size: 13px;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.mvp-s34-size-card-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Sprint #48 — 사이즈 옵션 2열 행 + 토스형 마법사 헤더/푸터 */
.mvp-s34-opt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mvp-size-opt-span-full {
  width: 100%;
}
.mvp-size-opt-span-full > .mvp-s34-size-card {
  width: 100%;
}
.mvp-size-opt-custom-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mvp-size-opt-custom-block.is-active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}
.mvp-size-opt-custom-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mvp-size-opt-custom-block .mvp-size-custom-inp {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 15px;
}
.mvp-custom-size-hint.input-hint {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.mvp-fs-step-header.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 0 12px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
}
.mvp-fs-step-header .step-back-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mvp-fs-step-header .step-indicator {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  letter-spacing: -0.02em;
}
.mvp-step-header-right {
  flex: 0 0 auto;
  min-width: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mvp-fs-step-header .step-skip-btn {
  font-size: 14px;
  font-weight: 500;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mvp-step-header-spacer {
  width: 60px;
  height: 1px;
}

.step-nav.step-nav--wizard-only-next {
  gap: 0;
  padding: 12px 20px 28px;
}
.mvp-fs-step-footer-wrap .mvp-step-footer {
  width: 100%;
}
.mvp-fs-step-footer-wrap .step-next-btn {
  width: 100%;
  height: 54px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mvp-fs-step-footer-wrap .step-next-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mvp-fs-step-footer-wrap .step-next-btn:active:not(:disabled) {
  opacity: 0.85;
  transform: scale(0.99);
}

/* Sprint #49 — 사이즈 탭 단일 스크롤 + 아코디언 */
.mvp-fs-size-tab-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.mvp-fs-accordion-sec {
  margin-bottom: 4px;
}
.mvp-fs-accordion-sec.section-done {
  background: #fafbff;
  border-radius: 12px;
  padding: 0 12px;
  border: 1px solid transparent;
}
.mvp-fs-accordion-sec.section-active {
  background: #fff;
  border: 1.5px solid #e0e4ff;
  border-radius: 12px;
  padding: 0 14px 12px;
}
.mvp-fs-sec-head.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  gap: 10px;
}
.mvp-fs-accordion-sec.section-active .mvp-fs-sec-head.section-header {
  border-bottom-color: #eef0ff;
}
.mvp-fs-sec-head-left {
  flex: 1;
  min-width: 0;
}
.mvp-fs-sec-head .section-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.mvp-fs-sec-head .section-summary {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  line-height: 1.35;
}
.mvp-fs-sec-head-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mvp-fs-sec-done-ico {
  font-size: 14px;
}
.mvp-fs-sec-head .section-edit-btn {
  font-size: 13px;
  color: #1b2b6b;
  font-weight: 500;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mvp-fs-sec-body {
  padding-bottom: 4px;
}
.mvp-fs-sec-body[hidden] {
  display: none !important;
}
.section-complete-btn.mvp-fs-sec-complete {
  width: 100%;
  height: 48px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 16px;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.section-complete-btn.mvp-fs-sec-complete:active {
  opacity: 0.9;
}
.mvp-fs-color-add-row.color-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}
.mvp-fs-color-add-row .mvp-fs-color-custom-inp {
  flex: 1;
  min-width: 0;
}
.mvp-fs-color-add-btn.color-add-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  background: #1b2b6b;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.mvp-fs-color-add-btn.color-add-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mvp-fs-color-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mvp-fs-color-sel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
}
.mvp-fs-color-sel-chip-x {
  border: none;
  background: none;
  padding: 0 0 0 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: #64748b;
}
.mvp-ai-color-chip.is-selected {
  box-shadow: 0 0 0 2px #1b2b6b;
}

/* Sprint #50 — 1차 샘플 원단 느낌 선택 + 부자재 페르소나 */
.mvp-fabric-feel-intro {
  margin-bottom: 4px;
}
.mvp-fabric-feel-title {
  font-size: 18px;
  margin-bottom: 4px;
}
.mvp-fabric-feel-sub {
  font-size: 14px;
  color: #64748b;
  line-height: 1.45;
}
.mvp-fabric-feel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.mvp-fabric-feel-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 2px solid #e8e8ef;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 88px;
}
.mvp-fabric-feel-card.is-selected {
  border-color: #1b2b6b;
  box-shadow: 0 0 0 1px rgba(27, 43, 107, 0.2);
  background: #fafbff;
}
.mvp-fabric-feel-emoji {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.mvp-fabric-feel-t1 {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.02em;
}
.mvp-fabric-feel-t2 {
  font-size: 13px;
  color: #64748b;
  margin-top: 2px;
}
.mvp-fabric-feel-recs {
  border: 1px solid #e8e8ef;
  border-radius: 14px;
  padding: 14px 12px 10px;
  background: #fafbff;
  margin-bottom: 12px;
}
.mvp-fabric-feel-recs-title {
  font-size: 15px;
  font-weight: 700;
  color: #1b2b6b;
  margin-bottom: 10px;
}
.mvp-fabric-feel-rec-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1.5px solid #e0e4ff;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mvp-fabric-feel-rec-card:last-of-type {
  margin-bottom: 4px;
}
.mvp-fabric-feel-rec-card:active {
  opacity: 0.92;
}
.mvp-ffr-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.mvp-ffr-blurb {
  display: block;
  font-size: 13px;
  color: #64748b;
  line-height: 1.45;
}
.mvp-fabric-feel-to-custom {
  margin-top: 6px !important;
}
.mvp-fabric-custom-block {
  margin-bottom: 12px;
}
.mvp-fabric-linked-color {
  font-size: 14px;
  color: #475569;
  margin: 0 0 4px;
  line-height: 1.45;
}
.mvp-acc-persona-mode .mvp-acc-persona-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.mvp-acc-persona-row {
  border: 1px solid #e8e8ef;
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: #fff;
}
.mvp-acc-persona-row.is-ai {
  background: #fafbff;
  border-color: #e0e4ff;
}
.mvp-acc-persona-head {
  margin-bottom: 8px;
}
.mvp-acc-persona-check-lab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  font-weight: 600;
  color: #111;
}
.mvp-acc-persona-check-lab input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.mvp-acc-persona-name-inp {
  flex: 1;
  min-width: 0;
  font-size: 15px !important;
  font-weight: 600;
}
.mvp-acc-persona-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 10px 28px;
}
.mvp-acc-persona-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 28px;
  flex-wrap: wrap;
}
.mvp-acc-persona-qty-lab {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  flex-shrink: 0;
}
.mvp-acc-persona-qty-inp {
  flex: 1;
  min-width: 120px;
  max-width: 100%;
  font-size: 15px !important;
}
.mvp-acc-persona-del {
  margin: 10px 0 0 28px;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.mvp-acc-persona-add {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 15px;
  font-weight: 600;
  color: #1b2b6b;
  cursor: pointer;
  font-family: inherit;
}

.mvp-s34-size-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: #fff;
  gap: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mvp-s34-size-card.is-active {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.mvp-s34-size-card-emoji {
  font-size: 22px;
  line-height: 1;
}

.mvp-s34-size-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}

.mvp-s34-size-card-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

.mvp-s34-size-card-pct {
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
}

.mvp-s34-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.mvp-s34-wizard-actions .mvp-btn-primary {
  flex: 1;
  min-width: 120px;
}

.mvp-s34-progress-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
}

.mvp-s34-progress-line {
  color: #64748b;
}

.mvp-s34-progress-line.is-ok {
  color: #15803d;
}

.mvp-s34-progress-line.is-later {
  color: #b45309;
}

.mvp-s34-fab-hold {
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #fafafa;
  margin-bottom: 8px;
}

.mvp-export-fabric-banner {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 13px;
  color: #92400e;
}

.mvp-s34-trim-sub {
  font-size: 14px;
  color: #64748b;
  margin: -4px 0 12px;
  line-height: 1.45;
}

.mvp-s34-acc-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.mvp-acc-inc {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  flex-shrink: 0;
}

.mvp-s34-acc-body {
  flex: 1;
  min-width: 0;
}

.mvp-s34-acc-name {
  width: 100%;
  font-weight: 600;
  margin-bottom: 6px;
}

.mvp-s34-acc-qty .mvp-acc-fld--mini {
  margin-bottom: 0;
}

.mvp-acc-more {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

.mvp-acc-more summary {
  cursor: pointer;
  font-weight: 500;
}

.mvp-acc-more-in {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.mvp-acc-card--off {
  opacity: 0.55;
}

.mvp-s34-acc-card .mvp-acc-del-wrap {
  align-self: flex-start;
}

/* 보내기 탭 — 공장 행 편집 + 카카오 CTA 스택 */
.mvp-export-factory-editor {
  margin-bottom: 16px;
}

.mvp-export-factory-head {
  margin-bottom: 10px;
}

.mvp-export-factory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.mvp-export-factory-card {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 12px 14px;
}

.mvp-export-factory-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
}

.mvp-export-factory-lab {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 4px;
}

.mvp-export-factory-inp {
  width: 100%;
  margin-bottom: 10px;
}

.mvp-export-factory-inp:last-of-type {
  margin-bottom: 0;
}

.mvp-export-factory-tip {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
}

#mvpExportKakaoHost {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

#mvpExportKakaoHost .mvp-btn-share-kakao {
  margin: 0;
}

/* 보내기 탭 — 공장 칩 */
.mvp-export-factories {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #cbd5e1;
}
.mvp-export-factories-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  margin: 0 0 8px;
}
.mvp-export-factory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mvp-export-factory-chip {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  font: inherit;
  color: #334155;
}
.mvp-export-factory-chip:active {
  background: #f1f5f9;
}

/* ═══ 상용 셸: 파일 입력 숨김 · 네비 · 업로드 · 타이포 · 하단 CTA ═══ */

body.mvp input[type="file"] {
  display: none !important;
}

body.mvp,
body.mvp.mvp-chat-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
  color: #111827;
  -webkit-font-smoothing: antialiased;
}

.page-title,
.mvp-page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
  color: #111827;
  margin: 0;
  word-break: keep-all;
}

.cq-flow-title.page-title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-korean);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.page-sub {
  font-size: var(--text-sm);
  color: var(--text-aux);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-korean);
  margin-top: var(--space-2);
  margin-bottom: 0;
  word-break: keep-all;
}

.sec-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-aux);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

.page-body {
  padding: 24px 20px 120px;
}

.mvp-upload-panel.page-body {
  padding-top: 12px;
  padding-bottom: 24px;
}

.mvp-composer .page-body {
  padding: 12px 20px 0;
}

/* —— 상단 네비 —— */
.app-top-nav {
  position: relative;
  height: 52px;
  min-height: 52px;
  padding: 0 20px;
  padding-top: max(0px, env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  border-bottom: 1px solid #f3f4f6;
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.app-top-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  width: 100%;
  max-width: 100%;
  /* 2026-04-20 대표 피드백 (Image #8 세션-2): 워크스페이스 스위처 드롭다운이 이 overflow:hidden에 잘려 안 보임.
     visible로 전환. 내부 넘침은 각 자식의 max-width + ellipsis로 이미 관리됨 (#appWsName 등). */
  overflow: visible;
  box-sizing: border-box;
}

/* 2026-04-17 로고 재디자인 — 재봉선 패스 SVG + Navy 통일 */
.app-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #1b2b6b;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-logo-mark {
  color: #1b2b6b;
  flex-shrink: 0;
}
.app-logo:hover,
.app-logo:hover .app-logo-mark {
  color: #162356;
}

.app-top-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
  justify-content: flex-end;
}

.app-usage-mini {
  font-size: 13px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-nav-desktop {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

.app-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
}

.app-nav-link:hover {
  color: #1b2b6b;
}

.app-nav-sep {
  color: #e5e7eb;
  font-size: 12px;
  user-select: none;
}

.app-nav-text-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}

.app-nav-text-btn:hover {
  color: #1b2b6b;
}

.app-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.app-burger-line {
  display: block;
  height: 2px;
  width: 100%;
  background: #374151;
  border-radius: 1px;
}

.app-nav-drawer {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid #f3f4f6;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 40;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.app-nav-drawer.hidden {
  display: none !important;
}

.app-drawer-link {
  display: block;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
}

.app-drawer-link:hover {
  background: #f9fafb;
}

.app-drawer-link-btn {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 768px) {
  .app-nav-desktop {
    display: none;
  }
  .app-nav-burger {
    display: inline-flex;
  }
  #headerUsageRemain,
  .app-top-nav-right .app-usage-mini {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .app-nav-drawer {
    display: none !important;
  }
  .app-nav-burger {
    display: none !important;
  }
}

.app-top-nav--app {
  position: relative;
}

.app-top-nav-cluster {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.app-flow-close {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  color: #374151;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app-flow-close:active {
  opacity: 0.65;
}

/* 2026-04-18: nav가 mvp-app-frame 밖으로 이동해서 셀렉터를 body 기준으로 변경. */
body.app-header--minimal-flow .app-top-nav,
body.app-header--minimal-flow .app-top-nav-inner {
  min-height: 48px;
  height: 48px;
}

body.app-header--minimal-flow .app-top-nav {
  height: 48px;
  min-height: 48px;
  padding-left: 16px;
  padding-right: 12px;
}

/* 🚨 2026-04-19 대표 피드백: minimal-flow에서도 햄버거·메뉴 유지 필요 (Image #22/#24).
   이전엔 WISH/CONFIRM 진입 시 display:none으로 전체 숨김 → 사용자가 내 프로젝트·요금제 등 접근 불가.
   복원: cluster 그대로 노출. X 버튼은 유지. */
body.app-header--minimal-flow .app-top-nav-cluster {
  display: flex !important;
}

body.app-header--minimal-flow .app-flow-close {
  display: inline-flex;
}

/* 🅓 2026-04-19 대표 피드백(Image #7): minimal-flow에서 햄버거 클릭해도 드로어 안 열림.
   이전엔 drawer 자체를 display:none으로 강제 숨김 → 햄버거 무력화.
   햄버거로 열었을 때(.hidden 제거 상태)는 정상 노출되도록 규칙 제거. */

.app-header-save {
  margin: 0 !important;
  padding: 4px 20px 6px !important;
  border-bottom: none !important;
  font-size: 12px !important;
}

/* —— 진행 단계 —— */
.app-step-sticky {
  flex-shrink: 0;
  background: #fff;
}

.app-step-sticky .step-bar {
  height: 3px;
  background: #f3f4f6;
  margin-bottom: 4px;
}

.app-step-sticky .step-bar-fill {
  height: 100%;
  background: #1b2b6b;
  border-radius: 0 2px 2px 0;
  transition: width 0.35s ease-out;
  width: 0%;
}

.step-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  margin-bottom: 12px;
}

.step-label {
  font-size: 12px;
  color: #9ca3af;
  flex: 1;
}

.wizard-back-mini {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  color: #1b2b6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wizard-back-mini:hover {
  background: #f9fafb;
}

.wizard-back-mini.hidden {
  display: none !important;
}

/* —— 업로드 1단계: 앞·뒷면 슬롯 ——
   2026-04-18 대표 지시: /app 톤앤매너 통일 — 좌측 정렬 H1 + Neutral-500 서브 (dash-greeting 스타일) */
/* 2026-04-20 대표 지시: 홈 greeting과 자간·색·행간 완전 일치.
   모바일 22/13, PC 26/15 (아래 media에서) — 홈 greeting 토큰과 동일. */
.upload-intro-main {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  text-align: left;
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  word-spacing: -0.05em;
}
.upload-intro-sub {
  font-size: 13px;
  color: #6b7280;
  text-align: left;
  margin: 0 0 20px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}
.photo-slots-host {
  outline: none;
  border-radius: 14px;
  margin-bottom: 4px;
}
.photo-slots-host:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c7d2fe;
}
.upload-panel--drag .photo-slots-host,
.photo-slots-host.photo-slots-host--drag {
  background: #f5f8ff;
  border-radius: 14px;
}
.photo-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.photo-slots--extra {
  grid-template-columns: 1fr;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.photo-slot {
  /* 2026-04-18: 홈 카드 톤 통일 — dashed → solid, 배경 흰색 */
  aspect-ratio: 3/4;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  padding: 10px 8px;
  font-family: inherit;
}
.photo-slot:hover {
  border-color: #1b2b6b;
  background: #f0f4ff;
}
.photo-slot.filled {
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: default;
  /* 2026-04-19 모바일 레이아웃 수정: aspect-ratio 통일 — 빈 슬롯과 동일하게 3/4 유지.
     이전 aspect-ratio:auto 방식은 세로 사진 업로드 시 슬롯이 1:3~1:4로 늘어나는 버그 발생.
     두 슬롯 높이가 동일해야 grid가 안정적으로 1fr 1fr 유지됨. */
  aspect-ratio: 3/4;
  background: #f8fafc;
}
.photo-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-slot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.85;
}
.photo-slot-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.photo-slot-required {
  font-size: 11px;
  color: #1b2b6b;
}
.photo-slot-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.52);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.photo-slots-tip {
  font-size: 12px;
  color: #64748b;
  text-align: left;
  margin: 0 0 12px;
  line-height: 1.45;
}
.upload-extra-photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1.5px dashed #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  font-family: inherit;
}
.upload-extra-photo-btn:hover {
  border-color: #c7d2fe;
  background: #f5f8ff;
  color: #1b2b6b;
}
.upload-extra-cap {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}
.upload-extra-photo-btn.hidden {
  display: none !important;
}

.upload-hero-zone {
  width: 100%;
  border: 2px dashed #e5e7eb;
  border-radius: 20px;
  padding: 32px 16px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 12px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.upload-hero-zone:hover {
  border-color: #c7d2fe;
  background: #f5f8ff;
}

.upload-hero-zone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.upload-hero-zone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.upload-hero-zone__main {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
}

.upload-hero-zone__sub {
  font-size: 13px;
  color: #9ca3af;
}

.upload-back-nudge-card {
  background: #f8f9ff;
  border: 1px solid #e0e4ff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.upload-back-nudge-card__lead {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px;
  line-height: 1.45;
}

.upload-back-nudge-card__detail {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

.mvp-back-facing-block {
  margin-bottom: 4px;
}

.mvp-back-facing-thumb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mvp-back-facing-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
}

.mvp-back-facing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mvp-back-facing-added {
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
}

.mvp-back-facing-rule {
  height: 1px;
  background: #e5e7eb;
  margin: 0 0 14px;
}

.mvp-back-facing-question {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 12px;
}

.mvp-back-facing-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mvp-back-facing-opt {
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
}

.mvp-back-facing-opt:hover {
  border-color: #c7d2fe;
  background: #fafbff;
}

.mvp-back-photo-suggest {
  background: linear-gradient(145deg, #f5f7ff 0%, #ffffff 55%);
  border: 1.5px solid #c7d2fe;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.mvp-back-photo-suggest__title {
  font-size: 14px;
  font-weight: 700;
  color: #1b2b6b;
  margin-bottom: 8px;
}

.mvp-back-photo-suggest__body {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.55;
  margin: 0 0 12px;
}

.mvp-back-photo-suggest__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mvp-back-photo-suggest__btn {
  flex: 1;
  min-width: 120px;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

.cq-confirm-wrap--flow .mvp-back-photo-suggest {
  max-width: 100%;
}

/* —— 업로드 존 (레거시 단일 존 — 타 페이지 호환) —— */
.upload-zone {
  display: block;
  border: 2px dashed #e5e7eb;
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
  transition: border-color 0.22s ease, background 0.22s ease;
  margin-bottom: 12px;
}

.upload-zone:hover {
  border-color: #c7d2fe;
  background: #f5f8ff;
}

.upload-zone:active,
.upload-zone.drag-over,
.upload-panel--drag .upload-zone {
  border-color: #1b2b6b;
  background: #eff6ff;
}

.upload-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon-wrap {
  width: 56px;
  height: 56px;
  background: #f3f4f6;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.upload-main-text {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.upload-sub-text {
  display: block;
  font-size: 13px;
  color: #9ca3af;
}

.upload-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

/* 2026-04-21 대표 지시: sticky 하단 "다음" → 카메라/갤러리 밑 인라인 버튼 (UPLOAD 단계 한정) */
.upload-next-inline {
  display: block;
  width: 100%;
  margin-top: 12px;
  height: 52px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.upload-next-inline:hover { background: #152158; }
.upload-next-inline:active { background: #101a46; }
.upload-next-inline.hidden { display: none; }

/* 2026-04-18: /app Secondary 버튼(.dash-action-secondary)과 스펙 일치
   bg #f8fafc · border 1px #e2e8f0 · color #475569 · weight 600 · radius 14 */
.upload-btn {
  flex: 1;
  height: 50px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.upload-btn:active {
  background: #f1f5f9;
  transform: scale(0.97);
}

/* 🅑 2026-04-20 대표 피드백: "다음" 버튼 — 카메라/갤러리 바로 아래 정적 배치.
   fixed 따라붙기 제거, 업로드 영역 흐름 안에 자연스럽게 연결. */
.photo-next-static {
  margin-top: 12px;
}

/* 🅑 2026-04-20 대표 피드백 (Image #7): 남은 횟수 inline 배너 — 헤더에서 이 위치로 이동.
   사용 시점 맥락으로 노출 (Figma/Notion/Linear 관행). */
.upload-usage-inline {
  display: block;
  margin: 10px 0 14px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12.5px;
  color: #475569;
  letter-spacing: -0.015em;
  line-height: 1.55;
}
.upload-usage-inline b { color: #1e293b; font-weight: 700; }
.upload-usage-inline__sep { color: #cbd5e1; margin: 0 4px; }
.upload-usage-inline__link { color: #1b2b6b; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.upload-usage-inline--soft {
  background: #fffbeb;
  border-color: #fde68a;
  color: #78350f;
}
.upload-usage-inline--soft b { color: #92400e; }
.upload-usage-inline--warn {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.upload-usage-inline--warn b { color: #7f1d1d; }
.upload-usage-inline--warn .upload-usage-inline__link { color: #991b1b; }

/* 업로드 직후 "분석 중" 배너 스피너 애니메이션 */
@keyframes cq-photo-analyze-spin {
  to { transform: rotate(360deg); }
}

.upload-link-tertiary {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: 13px;
  color: #6b7280;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.preview-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.preview-item {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.preview-add {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  border: 2px dashed #e5e7eb;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: #d1d5db;
}

.preview-add svg {
  flex-shrink: 0;
}

/* —— 요청 힌트 칩 (textarea 아래) —— */
.wish-hint-chips {
  margin-top: 10px;
  margin-bottom: 0;
}

.mvp-hint-chip.is-selected {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* —— 하단 고정 다음 —— */
.bottom-cta-wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fff !important;
  border-top: 1px solid #f3f4f6 !important;
  box-sizing: border-box !important;
}

.bottom-cta-wrap.hidden {
  display: none !important;
}

/* 2026-04-18 대표 지시: "다음" 버튼 hidden이면 wrap 무조건 숨김.
   (이전 :not(.hidden) gate 제거 — 일부 JS 경로에서 .hidden 이 벗겨진 wrap 이 빈 박스로 남는 문제 해결) */
.bottom-cta-wrap:not(:has(.btn-next:not(.hidden))) {
  display: none !important;
}

/* 2026-04-18 대표 지시: composer 내부 주요 요소(wishStepRoot, composerRow)가 모두 hidden이면
   composer 자체도 숨김 (빈 흰 박스 방지). UPLOAD · GARMENT_TYPE · CONFIRM 등 모든 비-WISH phase 에서 유효. */
.mvp-composer:has(#wishStepRoot.hidden):has(#composerRow.hidden) {
  display: none !important;
}

/* 2026-04-18 대표 지시: flowHead 자체에 배경 없게 (/app 톤 — body bg 위 콘텐츠만). */
#flowHead,
#flowHead.mvp-flow-head.cq-proto-flow-head,
#flowExtra,
#flowExtra > div,
.mvp-flow-head.cq-proto-flow-head,
.mvp-flow-head-row,
.mvp-flow-head-copy {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2026-04-18 대표 Day 5: "다음" CTA 버튼 /app dash-action-primary 톤 일치
   bg #1b2b6b (Navy) · radius 14 · weight 700. 기존 #1b2b6b 는 /app 과 미세 다른 Navy (인디고 톤) 였음. */
.bottom-cta-wrap .btn-next,
.bottom-cta-wrap .cq-proto-next {
  display: block !important;
  width: calc(100% - 40px) !important;
  max-width: 390px !important;
  height: 56px !important;
  margin: 0 auto !important;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
  line-height: 56px;
  padding: 0 16px;
}
.bottom-cta-wrap .btn-next:active,
.bottom-cta-wrap .cq-proto-next:active {
  transform: scale(0.97);
}

.btn-next:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}

.mvp-layout--bottom-cta .mvp-chat-scroll {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}

/* 홈 등 서브 페이지 본문 */
.mvp-main.page-body,
.mvp-history-main.page-body,
.mvp-profile-main.page-body {
  padding: 24px 20px calc(48px + env(safe-area-inset-bottom, 0px));
  max-width: var(--max);
  margin: 0 auto;
}

.main-home-body .greeting-text.page-title {
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}
.main-home-body .greeting-sub.page-sub {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.55;
}

/* —— Sprint #36 인앱 피드백 —— */
.mvp-fb-aiwrong {
  margin-top: 14px;
  padding: 14px 12px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mvp-fb-aiwrong-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}
.mvp-fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.mvp-fb-chips--wrap {
  margin-top: 8px;
}
.mvp-fb-chip.mvp-fb-chip--on {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.mvp-fb-skip-aiwrong {
  margin-top: 4px;
  font-size: 14px !important;
}

.mvp-fb-postdl {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 10060;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(15, 23, 42, 0.08);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.mvp-fb-postdl-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #111827;
}
.mvp-fb-emoji-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.mvp-fb-emoji {
  font-size: 28px;
  line-height: 1;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
}
.mvp-fb-emoji:active {
  transform: scale(0.94);
}
.mvp-fb-postdl-skip {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
}

.mvp-fb-tab-foot {
  margin-top: 28px;
  padding-top: 16px;
  text-align: center;
}
.mvp-fb-tab-foot-rule {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin-bottom: 12px;
}
.mvp-fb-tab-foot-q {
  margin: 0 0 6px;
  font-size: 12px;
  color: #9ca3af;
}
.mvp-fb-tab-link {
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 14px;
  color: #9ca3af;
  text-decoration: underline;
  cursor: pointer;
}

.mvp-fb-sheet {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mvp-fb-sheet.hidden {
  display: none !important;
}
.mvp-fb-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.mvp-fb-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 8px 16px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}
.mvp-fb-sheet-title {
  margin: 8px 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.mvp-fb-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.mvp-fb-radio-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: #374151;
  cursor: pointer;
}
.mvp-fb-opt-label {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}
.mvp-fb-opt-optional {
  font-weight: 400;
  color: #9ca3af;
}
.mvp-fb-tab-ta,
.mvp-fb-stuck-ta,
.mvp-fb-home-ta {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
}
.mvp-fb-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.mvp-fb-home-lead {
  font-size: 14px;
  color: #4b5563;
  margin: 0 0 10px;
  line-height: 1.5;
}
.mvp-fb-home-sub {
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 8px;
  color: #374151;
}

.mvp-fb-stuck-toast {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10065;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.mvp-fb-stuck-msg {
  flex: 1;
  min-width: 140px;
}
.mvp-fb-stuck-yes,
.mvp-fb-stuck-no {
  flex-shrink: 0;
}

.mvp-fb-home-foot {
  margin-top: 40px;
  padding-bottom: 24px;
  text-align: center;
}
.mvp-fb-home-foot-rule {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin-bottom: 12px;
}
.mvp-fb-home-link {
  border: none;
  background: none;
  font-size: 13px;
  color: #9ca3af;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 8px;
}

/* Sprint #37 — 1차 샘플 COLOR별 발주 (수량·목적 태그) */
.mvp-fs-color-order-root {
  margin-top: 4px;
}
.order-color-section {
  padding: 12px 0 14px;
  border-bottom: 1px solid #f0f0f0;
}
.order-color-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.order-color-name-inp {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}
.order-purpose-box {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.order-purpose-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}
.order-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.order-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #eef1ff;
  border: 1px solid #c5ceff;
  border-radius: 20px;
  font-size: 13px;
  color: #1b2b6b;
  font-weight: 500;
}
.order-tag-remove {
  border: none;
  background: none;
  padding: 0 0 0 2px;
  font-size: 14px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}
.order-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  margin-top: 2px;
  background: #fff;
  border: 1.5px dashed #c5ceff;
  border-radius: 20px;
  font-size: 13px;
  color: #888;
  cursor: pointer;
}
.mvp-fs-order-add-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.mvp-fs-order-add-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 8px;
}
.mvp-fs-order-add-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}
.mvp-fs-order-add-lab {
  font-size: 12px;
  color: #6b7280;
}
.mvp-fs-purpose-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mvp-fs-purpose-chip {
  font-size: 12px !important;
  padding: 5px 10px !important;
}
.mvp-fs-order-line-submit {
  margin-top: 4px;
}
.wo-color-grand-row td {
  font-weight: 600;
  border-top: 1px solid #e5e7eb;
}

/* QC · 본생산 단계 안내 */
.mvp-sc-tip.mvp-sc-tip--html {
  text-align: left;
  line-height: 1.45;
  font-size: 13px;
  color: #334155;
  max-width: 100%;
}
.mvp-sc-main-guide-ul {
  margin: 8px 0 0;
  padding-left: 1.15rem;
}
.mvp-sc-main-guide-ul li {
  margin-bottom: 6px;
}

.mvp-qc-meas-table .mvp-qc-order-cell {
  color: #475569;
  font-size: 13px;
}
.mvp-qc-meas-diff {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.mvp-qc-meas-diff.mvp-qc-meas-warn {
  color: #dc2626;
  background: rgba(254, 226, 226, 0.65);
}
.mvp-qc-checklist-table .mvp-qc-status-th,
.mvp-qc-checklist-table .mvp-qc-status-cell {
  text-align: center;
  width: 2.5rem;
  vertical-align: middle;
}
.mvp-qc-checklist-table .mvp-qc-status-cell input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.mvp-qc-verdict-block {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mvp-qc-verdict-title {
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
  color: #0f172a;
}
.mvp-qc-verdict-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.mvp-qc-verdict-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.mvp-qc-verdict-label input[type="radio"] {
  width: 18px;
  height: 18px;
}
.mvp-qc-fail-next-btn {
  margin-top: 10px;
  width: 100%;
}
.mvp-qc-verdict-hint {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
.mvp-qc-sew-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 16px 10px 44px;
  font-size: 13px;
  color: #475569;
  border-top: 1px dashed #e2e8f0;
  background: rgba(248, 250, 252, 0.9);
}
.mvp-qc-sew-legend {
  font-weight: 600;
  color: #334155;
}
.mvp-qc-sew-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.mvp-qc-sew-radio input[type="radio"] {
  width: 16px;
  height: 16px;
}

/* P3 — 공장 비교·마진·브랜드·인스타 참고 */
.mvp-export-factory-subhead {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin: 12px 0 6px;
}
.mvp-factory-compare-memo {
  width: 100%;
  margin-bottom: 8px;
  font-size: 14px;
}
.mvp-factory-directory-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.mvp-factory-directory-row .mvp-factory-directory-select {
  flex: 1;
  min-width: 160px;
}
.mvp-seller-margin-block {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.mvp-seller-margin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (max-width: 520px) {
  .mvp-seller-margin-grid {
    grid-template-columns: 1fr;
  }
}
.mvp-seller-metrics-pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #1e293b;
}
.mvp-fabric-ig-row {
  margin-top: 10px;
}
.mvp-fabric-ig-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.mvp-fabric-ig-input-row .mvp-fabric-ig-url {
  flex: 1;
  min-width: 0;
}
.mvp-brand-prefs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}
.mvp-fb-home-muted {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0 0;
}
.margin-fixed-row {
  margin-top: 10px;
}

/* ── Confirm 3-section layout ── */
.cq-confirm-3sec {
  padding: 20px 18px;
  max-height: 70vh;
  overflow-y: auto;
}
.cq-confirm-sec {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.cq-confirm-sec:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.cq-confirm-sec-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.cq-confirm-sec-item {
  font-size: 15px;
  color: #334155;
  margin: 0 0 10px;
  line-height: 1.5;
}
.cq-confirm-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cq-confirm-fchip {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  font-size: 12px;
  color: #475569;
}
.cq-confirm-sec-wish {
  font-size: 15px;
  color: #334155;
  margin: 0;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #1b2b6b;
  line-height: 1.5;
}
.cq-confirm-sec--action {
  text-align: center;
}
.cq-confirm-sec-action-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

/* ── Feature description list ──
   🅑 2026-04-19 예린 권고: features 무위계 나열 문제 해결.
   연회색 배경 카드로 묶어 시각적 덩어리 만들고, 각 행 앞에 ✓ 아이콘으로 "AI가 확인한 항목"임을 암시.
*/
.cq-confirm-feat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.cq-confirm-feat-list.hidden {
  display: none;
}
.cq-confirm-feat-row {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.5;
  padding: 0;
  position: relative;
  padding-left: 20px;
}
.cq-confirm-feat-row::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1A2744;
  font-weight: 700;
  font-size: 13px;
}
.cq-confirm-more-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
.cq-confirm-more-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}

/* ── AI recommended changes ── */
.cq-confirm-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ──────────────────────────────────────────────────────────
   🅑 2026-04-19 UI Refresh — 화면 3 (항목별 나누기)
   예린 님 권고: 탭 배지 색상 구분 / 카드 elevation 통일 / 건너뛰기 ghost
   변경사항 카드는 기본 흰 배경 + 1px border (shadow X),
   탭별로 border-left 3px 띠 색상 + 배지 bg 색상 구분
   border ⊕ shadow 동시 사용 금지 규칙 준수
   ────────────────────────────────────────────────────────── */
.cq-confirm-change-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left-width: 3px;
  border-left-color: #cbd5e1; /* 기본(분류 안 됨) 회색 */
  border-radius: 8px;
  transition: border-left-color 150ms, background 150ms;
}
.cq-confirm-change-row:hover .cq-confirm-change-skip {
  opacity: 1;
}
/* 탭별 색상 구분 — JS에서 data-tab 속성으로 분기 */
.cq-confirm-change-row[data-tab="fit"] {
  border-left-color: #1A2744;
}
.cq-confirm-change-row[data-tab="fit"] .cq-confirm-change-area {
  background: #DDE3F0;
  color: #1A2744;
}
.cq-confirm-change-row[data-tab="fabric"] {
  border-left-color: #2F5F3A;
}
.cq-confirm-change-row[data-tab="fabric"] .cq-confirm-change-area {
  background: #E8F0E9;
  color: #2F5F3A;
}
.cq-confirm-change-row[data-tab="detail"] {
  border-left-color: #4338CA;
}
.cq-confirm-change-row[data-tab="detail"] .cq-confirm-change-area {
  background: #EEF2FF;
  color: #4338CA;
}
/* 봉제·마감은 디테일 Indigo 재사용 (4색 과도함 방지) */
.cq-confirm-change-row[data-tab="sewing"] {
  border-left-color: #4338CA;
}
.cq-confirm-change-row[data-tab="sewing"] .cq-confirm-change-area {
  background: #EEF2FF;
  color: #4338CA;
}

.cq-confirm-change-area {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  background: #f1f5f9; /* 기본(분류 안됨): 회색 */
  color: #475569;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.cq-confirm-change-text {
  font-size: 14px;
  color: #1e293b;
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
/* 건너뛰기(빼기) — ghost화. 기본 희미, hover/row hover 시 선명 */
.cq-confirm-change-skip {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 150ms, background 150ms, color 150ms;
}
.cq-confirm-change-skip:hover {
  background: #f1f5f9;
  color: #475569;
  opacity: 1;
}
.cq-confirm-change-row.is-skipped {
  opacity: 0.5;
  background: #f8fafc;
  border-left-color: #cbd5e1 !important;
}
.cq-confirm-change-row.is-skipped .cq-confirm-change-text {
  text-decoration: line-through;
  color: #94a3b8;
}
.cq-confirm-change-row.is-skipped .cq-confirm-change-area {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
}

/* ── WISH 페이지 내 되질문 ── */
.cq-wish-followup-area {
  margin-top: 8px;
}
.cq-wish-followup-divider {
  border: none;
  border-top: 1.5px solid #e2e8f0;
  margin: 16px 0;
}

/* ── 수정사항 확인 레이아웃 (Clarification) ── */

/* 전체 수정사항 리스트 카드 */
.cq-clf-list-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.cq-clf-list-title {
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 12px;
  line-height: 1.4;
}
.cq-clf-list-title strong { font-size: 16px; }
.cq-clf-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.cq-clf-list-row.is-understood { background: #f0fdf4; }
.cq-clf-list-row.is-unclear { background: #fff7ed; }
.cq-clf-list-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cq-clf-list-icon { flex-shrink: 0; font-size: 14px; }
.cq-clf-list-text {
  flex: 1;
  color: #334155;
  line-height: 1.4;
}
.cq-clf-list-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.cq-clf-list-status.is-ok { background: #dcfce7; color: #15803d; }
.cq-clf-list-status.is-q { background: #ffedd5; color: #c2410c; }

/* 원문 라인 */
.cq-clf-orig-line {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}
/* 해석 */
.cq-clf-interp-wrap {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.cq-clf-interp-arrow {
  color: #94a3b8;
  flex-shrink: 0;
  font-size: 13px;
}
.cq-clf-interp-text {
  color: #3b82f6;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
/* 반영 위치 태그 */
.cq-clf-tab-tag {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}
.cq-clf-tab-tag strong { color: #334155; }

.cq-clf-header {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: center;
}
.cq-clf-header strong { color: #1e293b; }

.cq-clf-section {
  margin-bottom: 16px;
}
.cq-clf-section-title {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.cq-clf-section-title.is-green {
  background: #f0fdf4;
  color: #15803d;
}
.cq-clf-section-title.is-orange {
  background: #fff7ed;
  color: #c2410c;
}

.cq-clf-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.cq-clf-card.is-confirmed {
  border-color: #86efac;
  background: #f0fdf4;
}
.cq-clf-card.is-corrected {
  border-color: #93c5fd;
  background: #eff6ff;
}

.cq-clf-meaning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cq-clf-orig {
  color: #64748b;
  word-break: break-all;
}
.cq-clf-arrow {
  color: #94a3b8;
  flex-shrink: 0;
}
.cq-clf-parsed {
  color: #1e293b;
  font-weight: 600;
}

.cq-clf-ox-row {
  display: flex;
  gap: 8px;
}
.cq-clf-ox-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 0.15s;
}
.cq-clf-ox-btn.is-o {
  background: #f0fdf4;
  border-color: #22c55e;
  color: #15803d;
}
.cq-clf-ox-btn.is-o:hover {
  background: #dcfce7;
}
.cq-clf-ox-btn.is-x {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}
.cq-clf-ox-btn.is-x:hover {
  background: #fee2e2;
}

.cq-clf-confirmed-badge {
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.cq-clf-corrected-badge {
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.cq-clf-re-edit {
  font-size: 11px;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 8px;
  text-decoration: underline;
}

.cq-clf-fix-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.cq-clf-fix-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.cq-clf-fix-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.cq-clf-fix-input:focus {
  border-color: #3b82f6;
}
.cq-clf-fix-submit {
  margin-top: 6px;
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cq-clf-linked-tag {
  font-size: 11px;
  color: #c2410c;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 3px 8px;
  background: #fff7ed;
  border-radius: 6px;
  display: inline-block;
}
.cq-clf-question {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px;
  line-height: 1.5;
}
.cq-clf-custom-wrap {
  margin-top: 8px;
}

/* 모호 답변 실시간 후속 질문 */
.cq-clf-vague-followup {
  margin-top: 10px;
  padding: 12px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
}
.cq-clf-vague-icon {
  font-size: 16px;
  margin-bottom: 4px;
}
.cq-clf-vague-msg {
  font-size: 12px;
  color: #991b1b;
  line-height: 1.6;
  margin-bottom: 8px;
}
.cq-clf-vague-msg strong {
  color: #dc2626;
}

/* 진행 바 */
.cq-clf-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.cq-clf-progress-bar {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.cq-clf-progress-fill {
  height: 100%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 힌트 옵션 버튼 */
.cq-clf-hint-opt {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 6px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.cq-clf-hint-opt:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e40af;
}

/* 사진 첨부 버튼 */
.cq-clf-photo-wrap {
  margin-top: 4px;
}
.cq-clf-photo-btn-sm {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1.5px dashed #93c5fd;
  border-radius: 8px;
  background: #f8faff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.cq-clf-photo-btn-sm:hover { background: #eff6ff; }
.cq-clf-photo-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed #93c5fd;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s;
}
.cq-clf-photo-btn:hover {
  background: #dbeafe;
}
.cq-clf-photo-preview {
  text-align: center;
}

.cq-wish-followup-hint {
  background: #f0f9ff;
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e40af;
  margin-bottom: 14px;
}
.cq-wish-fq-block {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.cq-wish-fq-block.is-answered {
  border-color: #c7d2fe;
  background: #f0f4ff;
}
.cq-wish-fq-question {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
  line-height: 1.5;
}
.cq-wish-fq-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cq-wish-fq-opt {
  padding: 7px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}
.cq-wish-fq-opt:hover { border-color: #1b2b6b; background: #eef2ff; }
.cq-wish-fq-opt.is-selected { background: #1b2b6b; color: #fff; border-color: #1b2b6b; }
.cq-wish-fq-opt.is-dim { opacity: 0.4; }
.cq-wish-fq-custom {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.cq-wish-fq-custom:focus { border-color: #1b2b6b; }
.cq-wish-fq-custom::placeholder { color: #94a3b8; }
.cq-wish-fq-progress {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin: 8px 0 12px;
}
.cq-wish-fq-make-btn {
  width: 100%;
  padding: 16px 0;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #1b2b6b 0%, #1b2b6b 50%, #3b4fa8 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  box-shadow: 0 4px 14px rgba(27, 43, 107, 0.35);
}
.cq-wish-fq-make-btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.cq-wish-fq-make-btn:active:not(:disabled) {
  transform: translateY(0);
}
.cq-wish-fq-make-btn.is-locked,
.cq-wish-fq-make-btn:disabled {
  background: #cbd5e1;
  color: #94a3b8;
  cursor: not-allowed;
  font-size: 13px;
  box-shadow: none;
}
.cq-wish-fq-lock-notice {
  font-size: 11px;
  color: #e65100;
  text-align: center;
  margin: 6px 0 12px;
  line-height: 1.5;
}

/* ── 도식화 리뷰 페이지 ── */
.cq-sketch-review-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.cq-sketch-review-img-box {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cq-sketch-review-img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
}
.cq-sketch-review-hint {
  background: #f0f9ff;
  border-left: 3px solid #3b82f6;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #1e40af;
  margin-bottom: 14px;
}
.cq-sketch-review-feat-list {
  margin-bottom: 16px;
}
.cq-sketch-review-feat-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 8px;
  transition: opacity 0.2s, transform 0.2s;
}
.cq-sketch-review-feat-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cq-sketch-review-part-tag {
  display: inline-block;
  background: #1b2b6b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}
.cq-sketch-review-conf-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #1b2b6b;
  background: #eef2ff;
  padding: 2px 8px;
  border-radius: 10px;
}
.cq-sketch-review-feat-text {
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}
.cq-sketch-review-feat-text.hidden { display: none; }
.cq-sketch-review-act-row {
  display: flex;
  gap: 8px;
}
.cq-sketch-review-act-row.hidden { display: none; }
.cq-sketch-review-act-btn {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.12s;
}
.cq-sketch-review-act-edit { color: #1b2b6b; border-color: #c7d2fe; }
.cq-sketch-review-act-edit:hover { background: #eef2ff; }
.cq-sketch-review-act-del { color: #ef4444; border-color: #fecaca; }
.cq-sketch-review-act-del:hover { background: #fef2f2; }
.cq-sketch-review-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cq-sketch-review-edit-wrap > :last-child:is(.cq-sketch-review-edit-save) {
  align-self: flex-end;
}
/* 텍스트 입력 + 버튼 한 줄 */
.cq-sketch-review-edit-row {
  display: flex;
  gap: 6px;
}
.cq-sketch-review-edit-wrap.hidden { display: none; }
.cq-sketch-review-edit-input {
  flex: 1;
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid #1b2b6b;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
}
.cq-sketch-review-edit-input:focus { box-shadow: 0 0 0 2px rgba(27,43,107,.15); }
.cq-sketch-review-edit-save {
  flex-shrink: 0;
  background: #1b2b6b;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.cq-sketch-review-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cq-sketch-review-confirm-btn {
  width: 100%;
  padding: 15px 0;
  border: none;
  border-radius: 12px;
  background: #1b2b6b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cq-sketch-review-confirm-btn:hover { background: #334155; }
.cq-sketch-review-regen-btn {
  width: 100%;
  padding: 11px 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cq-sketch-review-regen-btn:hover { background: #f8fafc; }

/* ── Followup page (되질문 전용) ── */
.cq-followup-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cq-followup-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.cq-followup-wish-summary {
  background: #f1f5f9;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 12px;
  line-height: 1.5;
}
.cq-followup-hero {
  background: linear-gradient(135deg, #eff6ff, #f0fdf4);
  border: 1.5px solid #93c5fd;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1e40af;
  margin-bottom: 16px;
}
.cq-followup-hero strong {
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}
.cq-followup-q-block {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.cq-followup-q-block.is-answered {
  border-color: #c7d2fe;
  background: #f0f4ff;
}
.cq-followup-q-num {
  display: inline-block;
  background: #1b2b6b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.cq-followup-q-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 10px;
  line-height: 1.5;
}
.cq-followup-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cq-followup-opt {
  padding: 8px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}
.cq-followup-opt:hover {
  border-color: #1b2b6b;
  background: #eef2ff;
}
.cq-followup-opt.is-selected {
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
.cq-followup-opt.is-dim {
  opacity: 0.4;
}
.cq-followup-custom-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #f8fafc;
  outline: none;
  box-sizing: border-box;
}
.cq-followup-custom-input:focus {
  border-color: #1b2b6b;
  background: #fff;
}
.cq-followup-custom-input::placeholder {
  color: #94a3b8;
}
.cq-followup-progress {
  text-align: center;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  margin: 8px 0;
}
/* CTA 버튼 */
.cq-followup-cta-area {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 20px;
}
.cq-followup-cta-make {
  width: 100%;
  padding: 15px 0;
  border: none;
  border-radius: 12px;
  background: #1b2b6b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.cq-followup-cta-make:hover:not(:disabled) {
  background: #334155;
}
.cq-followup-cta-make:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cq-followup-cta-skip {
  width: 100%;
  padding: 11px 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cq-followup-cta-skip:hover {
  background: #f8fafc;
}
.cq-followup-cta-back {
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.cq-followup-cta-back:hover {
  color: #64748b;
}

/* ── Followup questions (legacy) ── */
.cq-confirm-followup-hint {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 8px 12px;
  background: #f0f9ff;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
}
.cq-confirm-followup {
  margin-bottom: 12px;
}
.cq-confirm-followup-q {
  font-size: 14px;
  color: #334155;
  margin: 0 0 8px;
  font-weight: 500;
}
.cq-confirm-followup-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cq-confirm-followup-opt {
  padding: 7px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all .15s;
}
.cq-confirm-followup-opt:hover {
  border-color: #1b2b6b;
  background: #eef2ff;
}
.cq-confirm-followup-opt.is-selected {
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
.cq-confirm-followup-opt.is-dim {
  opacity: .4;
  pointer-events: none;
}

/* ── Skip button ── */
.cq-confirm-skip-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
}

/* ── Confirm item display ── */
.cq-confirm-item-display {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin: 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cq-confirm-item-input {
  font-size: 17px;
  font-weight: 700;
  width: 100%;
}

/* ── Consistent UI hierarchy ── */
.cq-confirm-small-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 6px;
  display: block;
}
.cq-confirm-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.cq-confirm-cat-chip {
  padding: 6px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all .15s;
}
.cq-confirm-cat-chip.is-selected {
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
.cq-confirm-cat-chip:hover:not(.is-selected) {
  border-color: #1b2b6b;
  background: #eef2ff;
}
.cq-confirm-more-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: #1b2b6b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  text-align: center;
}
.cq-confirm-more-wrap {
  transition: all .2s;
}

/* ── Compact AI confirm chips ── */
.cq-ai-bubble--compact {
  padding: 16px 18px;
}
.cq-confirm-item-line {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 8px 0 12px;
  line-height: 1.4;
}
.cq-confirm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.cq-confirm-chip {
  display: inline-block;
  padding: 6px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #f8fafc;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all .15s;
}
.cq-confirm-chip:hover,
.cq-confirm-chip:focus {
  border-color: #1b2b6b;
  background: #eef2ff;
}
.cq-confirm-chip--edited {
  border-color: #1b2b6b;
  background: #eef2ff;
  color: #1b2b6b;
}
.cq-confirm-chip-input {
  padding: 6px 12px;
  border: 1.5px solid #1b2b6b;
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  width: 160px;
  max-width: 100%;
  font-family: inherit;
}
.cq-confirm-edit-row {
  display: flex;
  justify-content: flex-end;
}
.cq-confirm-edit-all {
  background: none;
  border: none;
  color: #1b2b6b;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Photo fact-check (photoCheckMode) ── */
.cq-photocheck-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cq-photocheck-img-box {
  flex-shrink: 0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 2;
}
.cq-photocheck-img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  object-position: center;
  background: #f1f5f9;
}
/* 이미지 슬라이더 */
.cq-photo-slider {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.cq-photo-slider-track {
  display: flex;
  transition: transform 0.3s ease;
}
.cq-photo-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.cq-photo-slider-indicator {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(27,43,107,0.95);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}

/* 스크롤 가능 분석 영역 */
.cq-photocheck-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}
.cq-photocheck-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cq-photocheck-header {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #1e293b;
}
.cq-photocheck-conf {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.cq-photocheck-conf--high {
  background: #dcfce7;
  color: #15803d;
}
.cq-photocheck-conf--mid {
  background: #fef9c3;
  color: #92400e;
}
.cq-photocheck-conf--low {
  background: #fee2e2;
  color: #dc2626;
}
.cq-photocheck-sub {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 14px;
}
.cq-photocheck-hint {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 14px;
  line-height: 1.5;
}
.cq-photocheck-feat-list {
  margin: 0;
}
.cq-photocheck-low-toggle {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin: 4px 0 6px;
  background: none;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.cq-photocheck-low-toggle:hover {
  background: #f8fafc;
}
.cq-photocheck-low-list {
  opacity: 0.85;
}
.cq-photocheck-feat-row {
  /* 기본 스타일은 JS inline으로 제어 */
}
.cq-photocheck-feat-row--edited {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}
.cq-photocheck-feat-row--deleted {
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
}
/* 문장 상단 행 (부위 태그 + 정확도 뱃지) */
.cq-photocheck-feat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cq-photocheck-part-tag {
  display: inline-block;
  background: #1b2b6b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
}
.cq-photocheck-line-conf {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.cq-photocheck-line-conf--high {
  background: #dcfce7;
  color: #15803d;
}
.cq-photocheck-line-conf--mid {
  background: #fef9c3;
  color: #92400e;
}
.cq-photocheck-line-conf--low {
  background: #fee2e2;
  color: #dc2626;
}

.cq-photocheck-feat-text {
  font-size: 14px;
  line-height: 1.55;
  color: #334155;
}
.cq-photocheck-feat-text.hidden { display: none; }

/* 수정/삭제 버튼 행 */
.cq-photocheck-act-row {
  display: flex;
  gap: 8px;
}
.cq-photocheck-act-row.hidden { display: none; }
.cq-photocheck-act-btn {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all 0.12s;
}
.cq-photocheck-act-edit {
  color: #1b2b6b;
  border-color: #c7d2fe;
}
.cq-photocheck-act-edit:hover {
  background: #eef2ff;
}
.cq-photocheck-act-del {
  color: #ef4444;
  border-color: #fecaca;
}
.cq-photocheck-act-del:hover {
  background: #fef2f2;
}

/* 인라인 편집 */
.cq-photocheck-feat-edit-wrap {
  display: flex;
  gap: 6px;
}
.cq-photocheck-feat-edit-wrap.hidden {
  display: none;
}
.cq-photocheck-feat-input {
  flex: 1;
  font-size: 14px;
  padding: 8px 10px;
  border: 1.5px solid #1b2b6b;
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  background: #fff;
}
.cq-photocheck-feat-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(27,43,107,.15);
}
.cq-photocheck-feat-save-btn {
  flex-shrink: 0;
  background: #1b2b6b;
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.cq-photocheck-feat-save-btn:hover {
  background: #4f46e5;
}

/* 하단 CTA */
.cq-photocheck-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 20px;
}
.cq-photocheck-cta-ok {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 12px;
  background: #1b2b6b;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.cq-photocheck-cta-ok:hover {
  background: #334155;
}
.cq-photocheck-cta-back {
  width: 100%;
  padding: 12px 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.cq-photocheck-cta-back:hover {
  background: #f8fafc;
}

/* WISH 단계: 이미지 고정 + 콘텐츠 스크롤 */
.step2-page--has-photo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.step2-page--has-photo .step2-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.step2-page--has-photo .step2-footer {
  flex-shrink: 0;
}
.cq-wish-photo-sticky {
  flex-shrink: 0;
  border-radius: 0;
  overflow: visible;
  margin: 0 16px 10px;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* 🅓 2026-04-19 Image #30 대표 피드백: PC에서 참고원본/고스트컷이 페이지 전폭으로 펴져서 아래 WISH 섹션과 어긋남.
   step2-content max-width(640)와 동일 중앙 정렬. */
@media (min-width: 769px) {
  .cq-wish-photo-sticky {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
  }
  /* 각 이미지도 PC에서 max-height 제한 — 세로 길이 폭주 방지 */
  .cq-wish-photo-sticky img {
    max-height: 320px;
  }
}
.cq-wish-photo-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  background: #f1f5f9;
}

/* 다음 버튼 → 분석중 상태 */
.cq-btn-analyzing,
.cq-btn-analyzing:disabled,
.step-nav .cq-btn-analyzing:disabled,
.btn-next.cq-btn-analyzing:disabled {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, #4f46e5, #1b2b6b) !important;
  color: #fff !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 20px rgba(27,43,107,.35) !important;
  transition: none !important;
}
.cq-btn-analyzing::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin-left: 10px;
  vertical-align: middle;
  animation: cq-spin 0.7s linear infinite;
}
@keyframes cq-spin {
  to { transform: rotate(360deg); }
}

/* ── Sketch + modifications section ── */
.mvp-sketch-section {
  margin-bottom: 16px;
}
.mvp-sketch-host {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mvp-sketch-host svg,
.mvp-sketch-svg-obj {
  max-width: 100%;
  width: 100%;
  max-height: 280px;
  height: 280px;
  display: block;
  object-fit: contain;
  object-position: center top;
  background: #fff;
}
.mvp-sketch-host {
  min-height: 0;
  max-height: 280px;
  padding: 0;
  background: #f8fafc;
  border-radius: 12px;
  margin: 0 0 12px;
  overflow: hidden;
}
.mvp-sketch-placeholder {
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}
.mvp-sketch-mods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.mvp-sketch-mod-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 12px;
  background: #fffbeb;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
}
.mvp-sketch-mod-label {
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  white-space: nowrap;
  min-width: 44px;
}
.mvp-sketch-mod-text {
  font-size: 14px;
  color: #78350f;
  line-height: 1.4;
}
.mvp-sketch-no-mod {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 8px;
}

/* ── Summary chips + section titles ── */
.mvp-summary-chips-block {
  margin: 14px 0 8px;
}
/* 2026-04-18 대표 Day 3: /app dash-section-header h2 (15px/700 Neutral-900) 톤으로 통일 */
.mvp-summary-chips-title,
.mvp-section-title,
.mvp-section-title-lg {
  /* 2026-04-18 홈 .dash-greeting h1 토큰과 일치 — weight 800 + color #0f172a */
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.mvp-result-inner .tech-sheet-h {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.mvp-summary-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mvp-summary-text {
  font-size: 14px;
  color: #475569;
  margin: 0 0 10px;
  line-height: 1.5;
}
.mvp-summary-chip-wrap {
  display: inline;
}
.mvp-summary-chip-full {
  font-size: 13px;
  color: #475569;
  margin: 4px 0 8px 4px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  line-height: 1.5;
}
.mvp-summary-chip {
  cursor: pointer;
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  font-size: 12px;
  color: #475569;
}

/* ── Single-page result sections ── */
.mvp-result-inner .tech-sheet-section {
  border-top: 2px solid #e2e8f0;
  padding-top: 20px;
  margin-top: 24px;
}
.mvp-result-inner .tech-sheet-section:first-child {
  border-top: none;
  margin-top: 0;
}
.mvp-summary-chips-block {
  border-top: 2px solid #e2e8f0;
  padding-top: 20px;
  margin-top: 24px;
}

/* ── Modification fields ── */
.mvp-mod-section {
  border-top: 2px solid #e2e8f0;
  padding-top: 20px;
  margin-top: 24px;
}
.mvp-mod-field-row {
  margin-bottom: 12px;
}
.mvp-mod-field-label {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}
.mvp-mod-field-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1e293b;
  resize: none;
  line-height: 1.5;
  transition: border-color .15s;
}
.mvp-mod-field-input:focus {
  outline: none;
  border-color: #1b2b6b;
}
.mvp-mod-field-hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 0;
}

/* ── Tab wizard ── */
/* 2026-04-20 designer-yerin: 4탭 pill → segmented control 재설계
   기존 border 스타일 pill 제거. #f1f5f9 트랙 + 흰 활성 칩. 도식화 내부 탭 토글과 어법 통일. */
.mvp-wiz-tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
}
.mvp-wiz-tab-bar::-webkit-scrollbar {
  display: none;
}
.mvp-wiz-tab-btn {
  flex: 1 0 auto;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  text-align: center;
  min-width: 0;
  line-height: 1.3;
}
.mvp-wiz-tab-btn.is-active {
  background: #fff;
  color: #1b2b6b;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(27,43,107,0.13), 0 0 0 1px rgba(27,43,107,0.06);
}
.mvp-wiz-tab-btn.is-done {
  color: #16A06C;
}
.mvp-wiz-tab-btn.is-done.is-active {
  background: #fff;
  color: #16A06C;
  box-shadow: 0 1px 3px rgba(22,160,108,0.12), 0 0 0 1px rgba(22,160,108,0.06);
}
.mvp-wiz-tab-body {
  min-height: 200px;
}
.mvp-wiz-mod {
  margin: 16px 0;
}
/* 2026-04-20 designer-yerin: 도식화·원본 카드 시각 개선
   인라인 스타일과 병행. 카드 클래스를 추가 정의해 세련도 업그레이드. */
.mvp-wiz-section {
  margin-top: 16px;
}
/* 도식화 카드 — 탭 내부 토글 탭바 스타일도 동일 어법 적용 */
.mvp-sketch-card {
  margin-top: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid #e8edf4;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(27,43,107,0.04);
}
.mvp-sketch-card-head {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
/* 원본 작지 카드 */
.mvp-orig-card {
  margin-top: 10px;
  border: 1.5px solid #e8edf4;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(27,43,107,0.04);
}
.mvp-orig-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  letter-spacing: -0.025em;
  cursor: pointer;
  background: #f8fafc;
  border: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.mvp-orig-card-toggle:hover {
  background: #f0f4ff;
}
/* 검수 편집 버튼 — 오렌지 outline 개선 */
.mvp-review-edit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.025em;
  border: 1.5px solid #E8840C;
  border-radius: 10px;
  background: #fff;
  color: #92400e;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.mvp-review-edit-btn:hover {
  background: #fff8f0;
  border-color: #d97706;
}
.mvp-wiz-nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 20px;
}
.mvp-wiz-nav-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .15s;
}
.mvp-wiz-nav-prev {
  background: #f1f5f9;
  color: #475569;
}
.mvp-wiz-nav-next {
  /* 2026-04-18 designer-yerin QW-1: /app Primary Navy로 통일 */
  background: #1b2b6b;
  color: #fff;
}
.mvp-wiz-nav-finish {
  background: #1b2b6b;
  color: #fff;
}

/* ── Chapter navigation ── */
.mvp-chapter-next {
  text-align: center;
  padding: 24px 0;
}
.mvp-chapter-next-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.mvp-chapter-next-btn:hover { background: #334155; }

/* ── Sewing & trim items ── */
.mvp-sew-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.mvp-sew-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 8px;
}
.mvp-sew-check {
  width: 18px;
  height: 18px;
  accent-color: #1b2b6b;
  flex-shrink: 0;
}
.mvp-sew-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.4;
  /* 2026-04-20 대표 피드백 (Image #19): 모바일에서 부자재 설명(괄호 문구)이 우측으로 잘림.
     flex:1 + min-width:0 으로 공간 확보 + 긴 줄 자동 줄바꿈. */
  flex: 1;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.mvp-sew-text span {
  /* 괄호 설명도 줄바꿈 허용 */
  display: inline;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Fabric recommendation cards ── */
.mvp-fabric-recs {
  margin-bottom: 16px;
}
.mvp-fabric-rec-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
}
.mvp-fabric-rec-card:hover { border-color: #1b2b6b; background: #fafafe; }
.mvp-fabric-rec-card.is-selected {
  border-color: #1b2b6b;
  background: #eef2ff;
}
.mvp-fabric-rec-feel {
  font-size: 12px;
  font-weight: 700;
  color: #1b2b6b;
  margin-bottom: 2px;
}
.mvp-fabric-rec-list {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}
.mvp-fabric-rec-desc {
  font-size: 12px;
  color: #94a3b8;
}

/* ── Size table editable parts ── */
.mvp-size-cfg-part-inp {
  text-align: left;
  font-weight: 600;
  color: #334155;
}
.mvp-size-cfg-del {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
.mvp-size-cfg-del:hover { color: #ef4444; }

/* ── Sewing editable ── */
.mvp-sew-edit {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #334155;
  font-family: inherit;
  padding: 4px 0;
}
.mvp-sew-edit:focus {
  outline: none;
  background: #eef2ff;
  border-radius: 4px;
  padding: 4px 6px;
}
.mvp-sew-badge {
  font-size: 11px;
  color: #ef4444;
  white-space: nowrap;
}
.mvp-sew-item.is-unchecked {
  /* 2026-04-20 대표 피드백 (Image #21): opacity 0.38 → 0.7. 너무 흐려서 읽기 힘들다는 피드백.
     여전히 "미선택" 시각 위계는 유지하되 텍스트는 또렷하게. */
  opacity: 0.7;
  background: #f8fafc;
}
.mvp-sew-item.is-unchecked .mvp-sew-edit {
  /* 체크 해제 상태에서도 본문 텍스트 색 충분히 진하게 */
  color: #334155;
}
.mvp-sew-item .mvp-sew-edit {
  color: #1e293b;
}

/* ── Summary page ── */
/* 2026-04-18 대표 Day 2: 완성 화면 /app 톤 통일.
   /app dash-recent-card 스타일(bg white · border 1px #e2e8f0 · radius 12) 적용.
   section-header 톤과 일치시키기 위해 카드 타이틀 15px 로 상향. */
.mvp-summary-page {
  padding-bottom: 20px;
}
.mvp-summary-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mvp-summary-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.mvp-summary-card-row {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  padding: 1px 0;
}
.mvp-summary-card-row strong {
  color: #64748b;
  font-weight: 500;
}
.mvp-summary-edit-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #1b2b6b;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
}
.mvp-summary-edit-btn:hover {
  background: #eef2ff;
}
.mvp-summary-preview-link {
  display: block;
  width: 100%;
  padding: 12px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1b2b6b;
  text-align: center;
  cursor: pointer;
  margin: 16px 0;
  transition: all .15s;
}
.mvp-summary-preview-link:hover {
  background: #eef2ff;
  border-color: #1b2b6b;
}
/* ── Inline work order HTML preview ── */
.mvp-wo-html-preview {
  margin: 16px 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-size: 12px;
  color: #1e293b;
}
.wo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e293b;
  color: #fff;
  padding: 10px 14px;
}
.wo-brand { font-size: 14px; font-weight: 700; }
.wo-title { font-size: 16px; font-weight: 700; }
.wo-meta { font-size: 11px; color: rgba(255,255,255,.8); text-align: right; }
.wo-info-row {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}
.wo-info-cell {
  flex: 1;
  padding: 8px 12px;
  border-right: 1px solid #e2e8f0;
  font-size: 12px;
}
.wo-info-cell:last-child { border-right: none; }
.wo-info-label { font-size: 10px; color: #94a3b8; }
.wo-body {
  display: flex;
  min-height: 200px;
  max-height: 500px;
  overflow: hidden;
  align-items: stretch;
}
.wo-col {
  padding: 10px;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  max-height: 500px;
}
.wo-col::-webkit-scrollbar { width: 4px; }
.wo-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.wo-col:last-child { border-right: none; }
.wo-col-sketch { flex: 1.4; min-width: 0; }
.wo-col-spec { flex: 1.2; min-width: 0; }
.wo-col-size { flex: 1; min-width: 0; }
.wo-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  background: #f1f5f9;
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.wo-spec-block {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.wo-spec-h {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 3px 6px;
  margin-bottom: 4px;
  border-radius: 3px;
}
.wo-size-note {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 8px;
}
.mvp-summary-dl {
  /* 2026-04-18 대표 요청: 홈(/app) .dash-recent-card 톤으로 통일 — 흰 카드 + 1px 보더 + 12 radius */
  margin-top: 20px;
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.mvp-summary-dl + .mvp-wiz-section {
  /* 공장에 공유하기 섹션 — 같은 카드 토큰 */
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px 20px;
}

/* ── Summary progress bar ── */
/* 2026-04-20 designer-yerin: 스테퍼 패딩 14→10px 타이트하게, 모바일 세로 공간 절약 */
.mvp-summary-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
  padding: 10px 0 8px;
}
.mvp-summary-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.45;
  transition: opacity .2s;
}
.mvp-summary-progress-step.is-active {
  opacity: 1;
}
.mvp-summary-progress-step.is-done {
  opacity: 0.7;
}
.mvp-summary-progress-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
  flex-shrink: 0;
}
.mvp-summary-progress-step.is-active .mvp-summary-progress-num {
  background: #1b2b6b;
  color: #fff;
}
.mvp-summary-progress-step.is-done .mvp-summary-progress-num {
  background: #16A06C;
  color: #fff;
}
.mvp-summary-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.mvp-summary-progress-step.is-active .mvp-summary-progress-label {
  color: #1e293b;
}
.mvp-summary-progress-line {
  width: 32px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px;
  flex-shrink: 0;
}
.mvp-summary-progress-line.is-done {
  background: #16A06C;
}

/* ── Summary card status border ──
   2026-04-18 Day 2: border-left accent 톤 유지 (시맨틱 표시), 우측은 /app 일반 카드와 동일 */
.mvp-summary-card--ok {
  border-left: 3px solid #16A06C;
}
.mvp-summary-card--warn {
  border-left: 3px solid #E8840C;
}
.mvp-summary-card {
  margin-bottom: 16px;
}

/* ── Trim explanation ── */
.mvp-trim-desc {
  width: 100%;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
  padding-left: 28px;
}

/* ── Size configuration flow ── */
/* 2026-04-18 대표 Day 5: 제작정보·사이즈 설정 섹션을 홈 .dash-recent-card 톤으로 완전 일치
   (흰 bg + 1px #e2e8f0 + 12 radius + 18/20 padding + title weight 800 Neutral-900) */
.mvp-size-cfg-step {
  margin-bottom: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.mvp-size-cfg-step-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.mvp-size-cfg-rec {
  font-size: 13px;
  color: #1b2b6b;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #eef2ff;
  border-radius: 8px;
  line-height: 1.4;
}
.mvp-size-cfg-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* /app dash-action-secondary 톤: bg #f8fafc · border 1px #e2e8f0 · 13px/600. active 는 Navy 솔리드 */
.mvp-size-cfg-opt {
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.mvp-size-cfg-opt:hover {
  border-color: #1b2b6b;
  background: #fff;
}
.mvp-size-cfg-opt.is-selected {
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
.mvp-size-cfg-custom-input {
  padding: 8px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  width: 120px;
  font-family: inherit;
}
.mvp-size-cfg-custom-input:focus { outline: none; border-color: #1b2b6b; }
.mvp-size-cfg-table-host { overflow-x: auto; }
.mvp-size-cfg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mvp-size-cfg-table th {
  background: #f8fafc;
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  color: #475569;
  border-bottom: 2px solid #e2e8f0;
}
.mvp-size-cfg-table td {
  padding: 4px 2px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
}
.mvp-size-cfg-part {
  text-align: left !important;
  font-weight: 500;
  color: #334155;
  padding-left: 8px !important;
  white-space: nowrap;
}
.mvp-size-cfg-cell {
  width: 100%;
  border: none;
  text-align: center;
  font-size: 13px;
  padding: 6px 4px;
  background: transparent;
  font-family: inherit;
  color: #1e293b;
}
.mvp-size-cfg-cell:focus {
  outline: none;
  background: #eef2ff;
  border-radius: 4px;
}

/* ── Wish guide toggle (접이식) ── */
.wish-guide-toggle {
  margin: 8px 0 12px;
}
.wish-guide-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1b2b6b;
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.wish-guide-summary::-webkit-details-marker { display: none; }
.wish-guide-summary::before {
  content: "▸ ";
}
.wish-guide-toggle[open] .wish-guide-summary::before {
  content: "▾ ";
}

/* ── Wish step guide ──
   🅑 2026-04-19 대표 결정: 팁 접기 제거하고 예시 2박스(good/bad)만 항상 노출.
*/
.wish-guide {
  display: flex;
  gap: 10px;
  margin: 4px 0 8px;
}
@media (max-width: 480px) {
  .wish-guide { flex-direction: column; }
}
/* 2026-04-18 대표 요청: /app 홈 .dash-recent-card 톤(#fff + #e2e8f0 1px + 12 radius + 14/16 padding) 일치 */
.wish-guide-good, .wish-guide-bad {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.wish-guide-title {
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 12px;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* 🅑 2026-04-20 dead CSS 제거 — Image #13 초록/빨간 dot 2개 렌더 버그.
   .wish-guide-* 클래스는 2026-04-20 edit으로 .upload-guide-*로 전환되어 더 이상 사용 안 됨.
   이 ::before 규칙이 잔존 매치(일부 캐시된 마크업)에서 dot 중복 유발 가능. 안전하게 제거.
   대체: HTML의 <span class="guide-dot guide-dot--ok/bad"> 1개로만 렌더. */
.wish-guide-list {
  margin: 0;
  padding: 0 0 0 14px;
  line-height: 1.6;
  color: #475569;
}

/* ── Photo upload guide ── 2026-04-18: 홈 카드 톤 통일 (흰 bg + #e2e8f0 1px border + 12px radius — /app .dash-recent-card와 일치) */
.upload-photo-guide {
  display: flex;
  gap: 10px;
  margin: 16px 0 16px;
}
/* 🅐 2026-04-19: details 접기 변형 — 첫 화면 정보 과다 해결 */
.upload-photo-guide--details {
  display: block;
  margin: 12px 0 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.upload-photo-guide__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.upload-photo-guide__summary::-webkit-details-marker { display: none; }
.upload-photo-guide__summary::after {
  content: "▸";
  margin-left: auto;
  transition: transform 150ms;
  color: #94a3b8;
  font-size: 12px;
}
.upload-photo-guide--details[open] .upload-photo-guide__summary {
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}
.upload-photo-guide--details[open] .upload-photo-guide__summary::after {
  transform: rotate(90deg);
}
.upload-photo-guide__body {
  display: flex;
  gap: 10px;
  padding: 12px;
}
@media (max-width: 480px) {
  .upload-photo-guide__body { flex-direction: column; }
}
.upload-photo-guide--details .upload-guide-good,
.upload-photo-guide--details .upload-guide-bad {
  border: none;
  padding: 10px 12px;
  background: #f8fafc;
}
.upload-guide-good, .upload-guide-bad {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 12.5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
@media (max-width: 479px) {
  .upload-photo-guide {
    flex-direction: column;
    gap: 8px;
  }
}
.upload-guide-title {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 13px;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.guide-dot--ok { background: #22c55e; }
.guide-dot--bad { background: #ef4444; }
.upload-guide-list {
  margin: 0;
  padding: 0 0 0 14px;
  line-height: 1.7;
  color: #475569;
  /* 2026-04-18 대표 지시: 한국어 단어 중간에서 줄바꿈 방지 — "가장 정확"이 "가장 정" / "확해요"로 쪼개지는 문제 해결. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.upload-guide-list li {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.upload-guide-list strong {
  color: #1e293b;
  font-weight: 700;
  /* strong 안 2단어("가장 정확") 전체가 한 단위로 유지되게 — 공백 앞에서만 break 허용 */
  white-space: normal;
  word-break: keep-all;
}

/* ── Upload panel bottom spacing ──
   2026-04-18 대표 지시: 하단 과대 여백(80px) 제거 — /app처럼 자연스럽게 끝나도록.
   "다음" 버튼 노출 시엔 body:has() 로 추가 여백 확보. */
.mvp-upload-panel { padding-bottom: 32px; }
body:has(.bottom-cta-wrap:not(.hidden) .btn-next:not(.hidden)) .mvp-upload-panel {
  padding-bottom: 96px;
}
.upload-btns { margin-bottom: 0; }

/* ── Inline download section ── */
.mvp-dl-inline-section {
  text-align: center;
  padding: 24px 0 32px;
}
.mvp-dl-inline-hint {
  font-size: 13px;
  color: #94a3b8;
  margin: 4px 0 14px;
}
.mvp-dl-inline-row {
  display: flex;
  gap: 8px;
}
.mvp-dl-inline-btn {
  flex: 1;
  padding: 14px 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 44px; /* 2026-04-19 designer-yerin: iOS 터치 타겟 44px 준수 */
}
/* 🅑 2026-04-19 모바일 폰트·패딩 미세 조정 */
@media (max-width: 480px) {
  .mvp-dl-inline-btn {
    padding: 15px 0;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}
.mvp-dl-inline-btn:hover {
  border-color: #cbd5e1;
  background: #fff;
}
.mvp-dl-inline-btn:active { transform: scale(.97); }
.mvp-dl-inline-btn--primary {
  /* 2026-04-18 designer-yerin QW-3: /app Primary Navy로 통일 */
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
/* 🐛 2026-04-19 버그 수정: 상위 :hover 규칙이 bg:#fff를 주면 색+bg 모두 흰색이 돼서 글자 안 보임.
   Primary variant는 hover 시에도 Navy 유지하고 살짝만 밝게. */
.mvp-dl-inline-btn--primary:hover {
  background: #2a3d8a;
  color: #fff;
  border-color: #2a3d8a;
}

/* ── Result header simplified ── */
.mvp-result-head--minimal {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
/* 2026-04-18 qa-hayoon 버그#113: 모바일에서 title(absolute) + subtitle(static)이 겹침.
   title-wrap을 absolute로 올리고 양쪽 버튼 공간 강제 확보. */
.mvp-result-head--minimal .mvp-result-title-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 96px);
  width: max-content;
  text-align: center;
  pointer-events: none;
}
/* 2026-04-20 designer-yerin: 헤더 타이틀 자간 guidelines/04 준수 (-0.035em) */
.mvp-result-head--minimal .mvp-result-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.mvp-result-head--minimal .mvp-result-title-wrap > p {
  pointer-events: auto;
}
.mvp-result-back {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* ── Basic info essentials ── */
.mvp-basic-photo-sec {
  margin-bottom: 20px;
}
.mvp-basic-essentials {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.mvp-basic-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mvp-basic-field-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .3px;
}
/* 2026-04-18 대표 Day 4: /app 폼 인풋 톤 통일 — border 1px · radius 10 · Neutral-900 text */
.mvp-basic-field-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  background: #fff;
  transition: border-color .15s;
}
.mvp-basic-field-input:focus {
  outline: none;
  border-color: #1b2b6b;
}
select.mvp-basic-field-input {
  appearance: auto;
}
.mvp-spec-info-card.mvp-basic-essentials {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

/* ── Unified create screen ── */
.unified-wish-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}
.unified-wish-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.unified-wish-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  font-family: inherit;
  transition: border-color .15s;
}
.unified-wish-textarea:focus {
  outline: none;
  border-color: #1b2b6b;
}
.unified-wish-hint {
  font-size: 12px;
  color: #94a3b8;
  margin: 6px 0 0;
}
.unified-stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
}
.unified-stage-label {
  font-size: 13px;
  color: #475569;
  flex: 1;
}
.unified-stage-edit {
  background: none;
  border: none;
  color: #1b2b6b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}
.unified-stage-editor {
  margin-top: 10px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
}
.unified-stage-editor-group { margin-bottom: 10px; }
.unified-stage-editor-group:last-child { margin-bottom: 0; }
.unified-stage-editor-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 6px;
}
.unified-stage-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.unified-opt {
  padding: 6px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  transition: all .15s;
}
.unified-opt.is-selected {
  background: #1b2b6b;
  color: #fff;
  border-color: #1b2b6b;
}
.unified-cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  background: #1b2b6b;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.unified-cta:hover { background: #243f9e; }
.unified-cta:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* ── 반응형: 대시보드 + 히스토리 + 프로필 ── */
@media (max-width: 480px) {
  .cq-dash-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .mvp-hist-search-row { flex-direction: column; }
  .mvp-hist-search-row .mvp-input { min-width: 0 !important; }
  .mvp-profile-card { padding: 16px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cq-dash-cards { grid-template-columns: repeat(4, 1fr) !important; }
  /* 🅓 2026-04-19 Image #26 대표 피드백: 내 프로젝트는 정보 밀도가 높아 좌우 여백 충분히 활용. guidelines/04 리스트 max-width 정책. */
  .mvp-history-main { max-width: 960px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .mvp-profile-main { max-width: 768px; margin: 0 auto; }
}
@media (min-width: 1025px) {
  .cq-dash-cards { grid-template-columns: repeat(4, 1fr) !important; }
  .mvp-history-main { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
  .mvp-profile-main { max-width: 900px; margin: 0 auto; }
}

/* 홈 페이지 반응형 */
@media (min-width: 769px) {
  .main-home { max-width: 640px; margin: 0 auto; }
}

/* ══════════════════════════════════════════════════════════
   반응형: 태블릿 (481px – 1024px)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --max: 680px; }

  /* 셸 확장 — 2026-04-18: /app과 동일하게 박스 그림자 제거 (떠있는 카드 효과 제거, 평면으로 흐름) */
  .mvp-app-frame {
    max-width: 680px;
    box-shadow: none;
    border-radius: 0;
  }
  .mvp-chat-layout,
  .mvp-header,
  .mvp-progress-wrap,
  .mvp-usage-chat { max-width: 680px; }
  /* 🅓 2026-04-19 Image #31 대표 피드백: 제품 정보/제작 정보 시트는 폭 넓게 (정보 밀도 확보). */
  .mvp-result-inner { max-width: 880px; }

  /* 업로드 페이지 여유 패딩 */
  .mvp-upload-panel.page-body { padding: 20px 28px 32px; }

  /* 사진 슬롯 크게 */
  .photo-slots { gap: 14px; }
  .photo-slot { min-height: 240px; border-radius: 14px; }
  .photo-slot.filled { min-height: unset; border-radius: 14px; } /* aspect-ratio 우선 — min-height 충돌 방지 */
  .photo-slot img { border-radius: 14px; }

  /* 업로드 가이드 가로 배치 */
  .upload-photo-guide { gap: 14px; margin: 20px 0 16px; }
  .upload-guide-good, .upload-guide-bad { padding: 16px; }

  /* 히어로 드롭존 */
  .upload-hero-zone { min-height: 220px; border-radius: 20px; }

  /* 태블릿 타이포그래피 스케일 — /app dash-greeting 톤 유지 (좌측 정렬 + 큰 H1) */
  .upload-intro-main { font-size: 26px !important; }
  .upload-intro-sub { font-size: 15px !important; }
  .upload-guide-title { font-size: 14px !important; }
  .upload-guide-list { font-size: 13px !important; }
  .upload-hero-zone__main { font-size: 16px !important; }
  .upload-hero-zone__sub { font-size: 14px !important; }
  .photo-slots-tip { font-size: 14px !important; }
  .upload-back-nudge-card__lead { font-size: 14px !important; }
  .upload-back-nudge-card__detail { font-size: 13px !important; }

  /* 위저드 플로우 */
  .mvp-flow-extra { font-size: 15px !important; }
  .cq-confirm-title { font-size: 20px !important; }

  /* 채팅 메시지 */
  .mvp-msg { max-width: 85%; padding: 14px 18px; font-size: 15px; }

  /* 결과 오버레이 */
  .mvp-result-overlay { padding: 24px; }
  .mvp-result-inner {
    border-radius: 20px;
    margin: 0 auto;
    min-height: auto;
    max-height: none;
    padding: 24px 24px calc(40px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px));
  }

  /* 탭 버튼 (기존) */
  .mvp-tab-btn { font-size: 14px; min-height: 48px; }
  /* 2026-04-20 designer-yerin: 태블릿에서 4탭 segmented 폰트 업스케일 */
  .mvp-wiz-tab-btn { font-size: 13px; padding: 8px 12px; }
  .mvp-tab-progress-pill { font-size: 13px; padding: 8px 12px; }

  /* 카메라/카메라롤 버튼 */
  .upload-btns { gap: 12px; max-width: 400px; margin: 0 auto; }

  /* CTA 버튼 — 이미 var(--max)로 제어됨 */

  /* 컴포저 영역 */
  .mvp-composer { max-width: 680px; margin-left: auto; margin-right: auto; }
  .mvp-composer-stack.page-body { padding: 16px 28px 0; }

  /* 플로우 헤드 (AI 질문) */
  .mvp-flow-head { max-width: 680px; margin-left: auto; margin-right: auto; }
  .mvp-flow-extra { padding: 20px !important; font-size: 15px; }

  /* 퀵 답변 그리드 */
  .mvp-quick-replies.cm-quick-country { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* 사이즈 패널 */
  .mvp-size-panel { padding: 20px 28px; }

  /* 결과 내 테이블 */
  .mvp-field-row { padding: 10px 0; }
}

/* ══════════════════════════════════════════════════════════
   반응형: PC (1025px 이상)
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  :root { --max: 800px; }

  /* 셸 확장 — 2026-04-18: /app과 동일하게 박스 그림자 제거 (대시보드처럼 body bg 위에 평면) */
  .mvp-app-frame {
    max-width: 800px;
    box-shadow: none;
    margin-top: 0;
    border-radius: 0;
  }
  .mvp-chat-layout,
  .mvp-header,
  .mvp-progress-wrap,
  .mvp-usage-chat { max-width: 800px; }
  /* 🅓 2026-04-19 Image #31: PC 시트 폭 확대 (800 → 1040, 테이블 셀 헐렁 방지 & 랩톱 13" 여유 보장). */
  .mvp-result-inner { max-width: 1040px; }

  /* 업로드 페이지 */
  .mvp-upload-panel.page-body { padding: 28px 40px 40px; }

  /* 사진 슬롯 더 크게 */
  .photo-slots { gap: 16px; }
  .photo-slot { min-height: 300px; border-radius: 16px; }
  .photo-slot.filled { min-height: unset; border-radius: 16px; } /* aspect-ratio 우선 */
  .photo-slot img { border-radius: 16px; }

  /* 업로드 가이드 */
  .upload-photo-guide { gap: 16px; margin: 24px 0 20px; }
  .upload-guide-good, .upload-guide-bad { padding: 18px 20px; font-size: 13px; }
  .upload-guide-title { font-size: 14px; }
  .upload-guide-list { line-height: 1.8; }

  /* 히어로 드롭존 */
  .upload-hero-zone { min-height: 260px; border-radius: 24px; }
  .upload-hero-zone__main { font-size: 17px !important; }
  .upload-hero-zone__sub { font-size: 14px !important; }

  /* PC 타이포그래피 스케일 */
  .upload-intro-main { font-size: 22px !important; }
  .upload-intro-sub { font-size: 15px !important; }
  .upload-guide-title { font-size: 15px !important; }
  .upload-guide-list { font-size: 14px !important; line-height: 1.8 !important; }
  .upload-hero-zone__main { font-size: 18px !important; }
  .upload-hero-zone__sub { font-size: 15px !important; }
  .photo-slots-tip { font-size: 15px !important; }
  .upload-back-nudge-card__lead { font-size: 15px !important; }
  .upload-back-nudge-card__detail { font-size: 14px !important; }

  /* 위저드 플로우 제목/본문 */
  .mvp-flow-extra { font-size: 16px !important; line-height: 1.65 !important; }
  .cq-confirm-title { font-size: 22px !important; }
  .cq-ai-bubble { font-size: 15px !important; }

  /* 피처 카드 (AI 분석) */
  .cq-feature-sentence { font-size: 15px !important; }
  .cq-feature-badge { font-size: 13px !important; }
  .cq-feature-conf { font-size: 13px !important; }

  /* 수정사항 */
  .cq-sum-item { font-size: 15px !important; }

  /* 채팅 메시지 */
  .mvp-msg { max-width: 75%; padding: 16px 20px; font-size: 16px; }

  /* 결과 오버레이 — 카드 형태 */
  .mvp-result-overlay { padding: 32px; }
  .mvp-result-inner {
    border-radius: 24px;
    margin: 0 auto;
    min-height: auto;
    padding: 28px 32px calc(48px + var(--home-bar-pad) + env(safe-area-inset-bottom, 0px));
  }

  /* 결과 시트 내부 — 2026-04-18 Day 3: PC에서도 /app 섹션 제목 톤 유지 */
  .mvp-result-title { font-size: 1.4rem !important; }
  .mvp-tab-btn { font-size: 14px !important; }
  .tech-field-label { font-size: 14px !important; }
  .mvp-field-row { font-size: 15px !important; }
  .mvp-section-title-lg { font-size: 16px !important; }

  /* 제작정보 / 요약 */
  .mvp-wiz-section h3 { font-size: 16px !important; }
  .mvp-wiz-section p, .mvp-wiz-section label { font-size: 14px !important; }
  .mvp-wiz-chip { font-size: 14px !important; }

  /* 제목 */
  .mvp-result-title { font-size: 1.3rem; }

  /* 탭 */
  .mvp-tab-btn { font-size: 14px; min-height: 52px; padding: 0 20px; }

  /* 카메라/카메라롤 버튼 */
  .upload-btns { gap: 14px; max-width: 440px; margin: 0 auto; }
  .upload-btn { padding: 14px 24px; font-size: 15px; }

  /* CTA 버튼 — 이미 var(--max)로 제어됨 */

  /* 컴포저 */
  .mvp-composer { max-width: 800px; margin-left: auto; margin-right: auto; }
  .mvp-composer-stack.page-body { padding: 20px 40px 0; }

  /* 플로우 헤드 */
  .mvp-flow-head { max-width: 800px; margin-left: auto; margin-right: auto; }
  .mvp-flow-extra { padding: 24px !important; font-size: 15px; line-height: 1.6; }

  /* 퀵 답변 */
  .mvp-quick-replies.cm-quick-country { gap: 14px; }
  .cm-stage-card { padding: 16px 18px; }

  /* 사이즈 패널 */
  .mvp-size-panel { padding: 24px 40px; }

  /* 뒷면 넛지 카드 */
  .upload-back-nudge-card { max-width: 600px; margin-left: auto; margin-right: auto; }

  /* 팁 텍스트 */
  .photo-slots-tip { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   프로젝트 카드 + 파이프라인
   ══════════════════════════════════════════════════════════ */
#histProjectTabs::-webkit-scrollbar { display: none; }
.cq-project-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.cq-project-card:hover { border-color: #c7d2fe; }

.cq-project-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.cq-project-title {
  font-size: 15px; font-weight: 700; color: #0f172a;
}
.cq-project-date {
  font-size: 12px; color: #94a3b8;
}

/* 파이프라인 */
.cq-pipeline {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
}
.cq-pipeline-arrow {
  font-size: 12px; color: #cbd5e1; margin: 0 2px;
}
.cq-pipeline-stage {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1.5px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
  cursor: default; transition: all 0.15s;
}
.cq-pipeline-stage.is-done {
  background: #f0fdf4; border-color: #86efac; color: #16a34a; cursor: pointer;
}
.cq-pipeline-stage.is-done:hover { background: #dcfce7; }
.cq-pipeline-check { font-weight: 800; }
.cq-pipeline-stage.is-current {
  background: #1b2b6b; border-color: #1b2b6b; color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(27,43,107,0.2);
}
.cq-pipeline-stage.is-current:hover { background: #2d3a8c; }
.cq-pipeline-stage.is-future {
  background: #f8fafc; border-color: #e2e8f0; color: #cbd5e1;
}

/* 프로젝트 액션 */
.cq-project-actions {
  display: flex; gap: 8px;
}
.cq-project-action-btn {
  flex: 1; padding: 10px 12px; text-align: center; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer; border: none;
  text-decoration: none; display: block;
}
.cq-project-action-primary {
  background: #1b2b6b; color: #fff !important;
}
.cq-project-action-primary:hover { background: #2d3a8c; color: #fff !important; }
.cq-project-action-secondary {
  background: #f8fafc; color: #475569; border: 1px solid #e2e8f0;
}
.cq-project-action-secondary:hover { background: #f1f5f9; }

/* 샘플 플로우 스텝 인디케이터 */
.cq-sample-steps {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 20px;
}
.cq-sample-step-dot {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; border: 2px solid #e2e8f0; background: #fff; color: #94a3b8;
}
.cq-sample-step-dot.is-active {
  background: #1b2b6b; border-color: #1b2b6b; color: #fff;
}
.cq-sample-step-dot.is-done {
  background: #16a34a; border-color: #16a34a; color: #fff;
}
.cq-sample-step-line {
  width: 32px; height: 2px; background: #e2e8f0;
}
.cq-sample-step-line.is-done {
  background: #16a34a;
}

/* 반응형: 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
  .cq-project-card { padding: 22px; }
  .cq-pipeline-stage { padding: 8px 18px; font-size: 13px; }
  .cq-project-actions { max-width: 480px; }
}

/* 반응형: PC */
@media (min-width: 1025px) {
  .cq-project-card { padding: 24px; }
  .cq-pipeline { gap: 6px; }
  .cq-pipeline-stage { padding: 8px 20px; font-size: 13px; }
  .cq-pipeline-arrow { font-size: 14px; }
  .cq-project-actions { max-width: 520px; }
}

/* ── 2026-04-18 대표 피드백: 글씨 가시성 보강 (placeholder 흐림 해결) ── */
/* 모든 input·textarea·select placeholder 대비 강화 — 기존 #cbd5e1(너무 흐림) → #64748b 중간 회색 */
input::placeholder,
textarea::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}
/* 비활성·미입력 셀(mvp-tech-inp--dashed) 텍스트 가독성 강화 */
.mvp-tech-inp--dashed,
.mvp-user-input-dashed {
  color: #64748b !important;
}
/* select disabled 옵션·dropdown placeholder */
select:required:invalid {
  color: #94a3b8;
}
option[value=""][disabled] {
  color: #94a3b8;
}
/* 테이블 빈 셀 대비 */
.mvp-basic-field-input::placeholder {
  color: #94a3b8 !important;
}

/* ══════════════════════════════════════════════════════════
   🅓 2026-04-19 전역 타이포 · 간격 최적화 레이어
   guidelines/04_typography_spacing.md 기준 — 전 페이지 일괄 적용
   (템플릿 변경 기능 제외)
   ══════════════════════════════════════════════════════════ */

/* ── Display / H1 ── */
body.mvp h1,
body.mvp .page-title,
body.mvp .mvp-result-title,
body.mvp .dash-greeting-title,
body.mvp .upload-intro-main,
body.mvp .hist-main-title,
body.mvp .profile-main-title,
body.mvp .cq-flow-title,
body.mvp .mvp-gen-main-title,
body.mvp .cq-confirm-title {
  letter-spacing: -0.035em;
  word-spacing: -0.05em;
}

/* ── H2 / Section Title ── */
body.mvp h2,
body.mvp .step2-title,
body.mvp .cq-sketch-review-title,
body.mvp .mvp-size-cfg-step-title,
body.mvp .cq-confirm-subtitle,
body.mvp .mvp-wiz-section-label,
body.mvp .mvp-sheet-tab-body h3,
body.mvp .dash-section-title {
  letter-spacing: -0.03em;
  word-spacing: -0.04em;
}

/* ── H3 / Card Title ── */
body.mvp h3,
body.mvp h4,
body.mvp .mvp-field-label,
body.mvp .tech-sheet-h,
body.mvp .step3-item-name,
body.mvp .mvp-chip-label,
body.mvp .dash-stat-title,
body.mvp .mvp-tab-btn,
body.mvp .cq-q-tag,
body.mvp .mvp-sheet-tab-body h4,
body.mvp .mvp-wiz-row-label,
body.mvp .mvp-chapter-next-btn {
  letter-spacing: -0.025em;
}

/* ── Body / Paragraph ── */
body.mvp p,
body.mvp .page-sub,
body.mvp .step2-subtitle,
body.mvp .mvp-result-subtitle,
body.mvp .dash-greeting-sub,
body.mvp .upload-intro-sub,
body.mvp .cq-flow-sub,
body.mvp .mvp-size-cfg-rec,
body.mvp .mvp-msg-text,
body.mvp .step3-meta,
body.mvp .mvp-sheet-tab-body p,
body.mvp li,
body.mvp td,
body.mvp th,
body.mvp dl,
body.mvp dt,
body.mvp dd {
  letter-spacing: -0.015em;
}

/* ── 제품정보 헤더 subtitle 가시성 (2026-04-20 designer-yerin)
   HTML 인라인 color:rgba(255,255,255,0.7) → 흰 배경에선 안 보임. CSS로 override. */
#resultPageSubtitle {
  color: rgba(255, 255, 255, 0.75) !important;
}
/* sticky 헤더가 scroll 중 흰 배경이 됐을 때 subtitle 색 전환 */
.mvp-result-head--sticky #resultPageSubtitle {
  color: #64748b !important;
  font-size: 11px !important;
  letter-spacing: -0.025em;
}

/* ── Button — 토스 톤 -0.02em ── */
body.mvp button,
body.mvp .mvp-btn,
body.mvp .cq-sketch-review-confirm-btn,
body.mvp .btn-next,
body.mvp .app-nav-link,
body.mvp .app-drawer-link,
body.mvp .step2-cta,
body.mvp .mvp-size-cfg-opt,
body.mvp .mvp-chapter-next-btn,
body.mvp .wish-bulk-split-btn,
body.mvp input[type="submit"],
body.mvp input[type="button"] {
  letter-spacing: -0.02em;
}

/* ── Input / Textarea / Select ── */
body.mvp input[type="text"],
body.mvp input[type="email"],
body.mvp input[type="password"],
body.mvp input[type="number"],
body.mvp input[type="tel"],
body.mvp input[type="search"],
body.mvp input[type="date"],
body.mvp input[type="url"],
body.mvp textarea,
body.mvp select,
body.mvp .mvp-input,
body.mvp .mvp-chat-input {
  letter-spacing: -0.015em;
}
body.mvp input::placeholder,
body.mvp textarea::placeholder {
  letter-spacing: -0.015em;
}

/* ── Label / Chip / Badge / Small ── */
body.mvp label,
body.mvp .mvp-sec-label,
body.mvp .sec-label,
body.mvp .mvp-wizard-summary-chip,
body.mvp .step2-badge,
body.mvp .step2-photo-status,
body.mvp .app-usage-mini,
body.mvp .mvp-hint-chips,
body.mvp .mvp-quick-btn,
body.mvp .mvp-tag-btn,
body.mvp .mvp-confirm-chip,
body.mvp .mvp-pill,
body.mvp .mvp-small,
body.mvp .cq-chip,
body.mvp small,
body.mvp figcaption {
  letter-spacing: -0.015em;
}

/* ── 배지 / pill은 양수 트래킹 금지 (guidelines/04 안티패턴 #2) ── */
body.mvp .cq-q-tag,
body.mvp .mvp-result-page-tag,
body.mvp .mvp-confirm-pill {
  letter-spacing: -0.005em !important;
}

/* ── 숫자 전용 셀 (트래킹 0) ── */
body.mvp .mvp-size-cfg-cell,
body.mvp .num,
body.mvp .numeric,
body.mvp .mvp-currency {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   📐 간격(Spacing) 최적화 — 모바일 기본
   ══════════════════════════════════════════════════════════ */

/* 페이지 좌우 padding 표준 (모바일 기본) */
body.mvp .mvp-upload-panel.page-body,
body.mvp .mvp-history-main,
body.mvp .mvp-profile-main,
body.mvp .main-home,
body.mvp .mvp-pricing-main,
body.mvp .mvp-guide-main {
  /* 모바일 16–20px padding. 이미 개별 규칙 있으면 덮지 않음 */
}

/* 섹션 ↔ 섹션 위계 (카드 사이) */
body.mvp .dash-recent-card + .dash-recent-card,
body.mvp .mvp-wo-html-preview > div + div {
  /* 기본 margin 그대로 두되 gap 생기는 경우 대비 */
}

/* ══════════════════════════════════════════════════════════
   💻 PC (1025+) 전역 — 컨테이너 max-width 정책
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* 단일 플로우 페이지 (520–640) — 업로드·작지 플로우 등 */
  body.mvp .mvp-upload-panel.page-body,
  body.mvp .main-home {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 리스트·대시보드 (1100+) — 내 프로젝트, 프로필 등. 이미 개별 max-width 있으면 덮이지 않음 */
  body.mvp .mvp-pricing-main,
  body.mvp .mvp-guide-main {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }

  /* PC에서 제목 글자 살짝 키움 — 가독성 */
  body.mvp .page-title,
  body.mvp .step2-title,
  body.mvp .cq-flow-title,
  body.mvp .dash-greeting-title {
    font-size: 24px;
  }

  /* PC에서 body 살짝 키움 */
  body.mvp .page-sub,
  body.mvp .step2-subtitle,
  body.mvp .cq-flow-sub {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════
   📱 태블릿 (769–1024) 전역
   ══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 단일 플로우: 580px 정도로 적당히 */
  body.mvp .mvp-upload-panel.page-body,
  body.mvp .main-home {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
  body.mvp .mvp-pricing-main,
  body.mvp .mvp-guide-main {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════
   📱 모바일 (≤768) — 좌우 padding 안정화
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 큰 제목은 살짝 작게 (모바일에서 22px 유지 기본 OK) */
  body.mvp .page-title,
  body.mvp .step2-title {
    font-size: 22px;
  }
  /* 본문 가독성 — 13.5px 정도 */
  body.mvp .page-sub,
  body.mvp .step2-subtitle,
  body.mvp .cq-flow-sub {
    font-size: 13px;
  }
}

/* ══════════════════════════════════════════════════════════
   🎯 스크린샷 기반 — 특정 페이지 spot fixes
   ══════════════════════════════════════════════════════════ */

/* 제품 정보 / 제작 정보 시트 — 탭 버튼 kerning + 내용 간격 */
body.mvp .mvp-sheet-tab-btn,
body.mvp .mvp-tab-btn {
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* 사이즈 구성 / 치수 테이블 헤더 */
body.mvp .mvp-size-cfg-step-title,
body.mvp .mvp-wiz-row-label {
  letter-spacing: -0.025em;
}

/* 내 프로젝트 카드 — 제품명, 브랜드, 상태 */
body.mvp .hist-card-title,
body.mvp .hist-card-brand,
body.mvp .hist-card-status {
  letter-spacing: -0.02em;
}

/* /app 홈 dashboard — stat cards + recent cards */
body.mvp .dash-stat-value,
body.mvp .dash-stat-label,
body.mvp .dash-recent-card-title {
  letter-spacing: -0.02em;
}

/* 가격표 */
body.mvp .mvp-pricing-plan-title,
body.mvp .mvp-pricing-plan-desc,
body.mvp .mvp-pricing-feature {
  letter-spacing: -0.015em;
}

/* 완성 페이지 섹션 제목 */
body.mvp .mvp-wo-html-preview > div > div:first-child {
  letter-spacing: -0.025em;
}

/* /login · /signup · /landing 공통 */
body.mvp .mvp-login-title,
body.mvp .mvp-signup-title,
body.mvp .mvp-landing-title {
  letter-spacing: -0.035em;
  word-spacing: -0.05em;
}

/* ══════════════════════════════════════════════════════════
   📐 Line-height 최적화 (한글 본문 가독성)
   ══════════════════════════════════════════════════════════ */
body.mvp p,
body.mvp li,
body.mvp .step2-subtitle,
body.mvp .cq-flow-sub,
body.mvp .mvp-size-cfg-rec {
  line-height: 1.6;
}
body.mvp h1,
body.mvp h2,
body.mvp .page-title,
body.mvp .step2-title {
  line-height: 1.3;
}
body.mvp h3,
body.mvp h4 {
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   History 밀도 재설계 (2026-04-19 sprint-39)
   카드 높이 88-96px, 썸네일, dot 배지, hover-only 메뉴, 세그먼트 탭
   ══════════════════════════════════════════════════════════ */

/* 카드 행 — 최소 높이만 지정, 내용에 따라 자연 확장 */
.cq-hist-row {
  min-height: 88px;
}

/* 커스텀 양식 뱃지 — 기본 양식은 노출 안 함, 커스텀일 때만 */
.cq-badge-custom {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  background: #F0F2F5;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0em;
  display: inline-flex;
  align-items: center;
}

/* ··· 버튼 hover-only (데스크탑) */
@media (hover: hover) {
  .cq-hist-row .cq-more-btn {
    opacity: 0;
  }
  .cq-hist-row:hover .cq-more-btn {
    opacity: 1;
  }
}
/* 모바일(터치) — 항상 표시 */
@media (hover: none) {
  .cq-hist-row .cq-more-btn {
    opacity: 1;
  }
}

/* 보기 모드 세그먼트 — 가로 스크롤 가능하되 스크롤바 숨김 */
#histViewModes {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
}
#histViewModes::-webkit-scrollbar { display: none; }

/* 모바일에서 hist-title-truncate 2줄 클램프 유지 */
@media (max-width: 720px) {
  .cq-hist-row {
    min-height: 80px;
  }
}

/* ── 모바일 history 레이아웃 픽스 (767px 이하) ──
   썸네일 없는 카드가 대부분 → 최소 높이 줄여 카드 밀도 확보
   메타 2줄 허용으로 브랜드/프로젝트 잘림 해소 */
@media (max-width: 767px) {
  /* 카드 행 패딩 축소 — 2줄 메타 높이 수용 */
  .cq-hist-row {
    min-height: 72px;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  /* 헤더 버튼 — 화면 40% 이하로 */
  .hist-header-btn-select {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .hist-header-btn-new {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* 🅑 2026-04-23 대표 Image #2·#3: 검색 토글 제거, 상시 인풋으로 전환.
     모바일에서는 인풋이 가로 풀폭으로 깔끔하게 깔리도록 spacing 압축. */
  #histSearchInline {
    padding: 6px 0 2px !important;
  }
  #histSearch {
    font-size: 14px !important;
    padding-right: 64px !important;
  }
  .hist-search-affordance {
    right: 12px !important;
    font-size: 11.5px !important;
  }
}

/* 로딩 스피너 공통 keyframe (clarify 분석 중 등) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── FC-1 역할 Pill 뱃지 3종 (2026-04-20 designer-yerin 스펙) ── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.role-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Owner — 네이비 계열 (badge-fit 토큰 재활용) */
.role-badge--owner {
  background: var(--badge-fit-bg, #DDE3F0);
  color: var(--badge-fit-fg, #1A2744);
}
/* Editor — 그린 계열 (badge-fabric 토큰 재활용). 앰버 금지 */
.role-badge--editor {
  background: var(--badge-fabric-bg, #E8F0E9);
  color: var(--badge-fabric-fg, #2F5F3A);
}
/* Viewer — 중립 회색 */
.role-badge--viewer {
  background: var(--color-neutral-100, #F2F3F5);
  color: var(--color-neutral-700, #4A4F57);
}

/* ── FC-1 Solo 모드 안내 카드 ── */
.team-solo-card {
  padding: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  letter-spacing: -0.015em;
}
.team-solo-card strong {
  color: #334155;
}

/* ── FC-1 본인 행 하이라이트 ── */
.team-member-row--me {
  background: var(--color-primary-50, #EEF2FF) !important;
  border-left: 3px solid var(--color-primary-500, #6366F1) !important;
  padding-left: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   🅑 2026-04-22 /history Drive 스타일 사이드바 (옵션 C Phase 1)
   docs/decisions/2026-04-22-my-workspace-drive-style.md §4-C §5-1
   사이드바 = 내 작업실 / 공유 문서함 / 최근 / 보관함 (4개)
   ══════════════════════════════════════════════════════════ */
.hist-layout {
  display: block; /* 모바일 기본: 사이드바 drawer. 데스크톱에서 flex로 확장. */
  position: relative;
}

/* 사이드바 — 모바일 기본 상태 (숨김 drawer)
   🅑 2026-04-23 Image #43: push-content 에서 full-viewport takeover 로 변경.
   모바일 좁은 화면(≤768px)에서 push 하면 사이드바+메인 반반 노출되어 어색.
   → 사이드바 width:100vw 로 화면 전체 덮음. 닫아야 메인 복귀. */
.hist-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  background: #fff;
  border-right: none;
  padding: 20px 18px 24px;
  box-sizing: border-box;
  z-index: 950;
  transform: translateX(-100%);
  transition: transform 0.22s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}
.hist-sidebar.is-open {
  transform: translateX(0);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
}

/* 모바일 drawer click-catcher
   2026-04-23 Image #36~#38: 대표 "좌우 접혔다 펴졌다 이상" + "이동되게 하는게 낫다" 피드백.
   기존 dim backdrop 패턴 → push-content 패턴으로 전환.
   → 오버레이는 투명 click-catcher 로만 작동 (dim·blur 제거).
   → 메인 콘텐츠가 사이드바 폭만큼 우측으로 translate (아래 .hist-layout.is-drawer-open 룰). */
.hist-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 949;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.hist-sidebar-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* 사이드바 열렸을 때 body 스크롤 차단 (모바일만) */
body.hist-sidebar-open {
  overflow: hidden;
}

/* 🅑 2026-04-23 Image #43: push-content → full-viewport takeover 전환.
   사이드바 100vw로 바뀌어 메인을 완전히 덮으므로 transform shift 불필요. 오히려 덮임+이동 이중 애니 금지. */

/* 모바일 전용 닫기 버튼 (사이드바 내부 상단 우측) */
.hist-sidebar-close {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.hist-sidebar-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 햄버거 버튼 (main 헤더) */
.hist-sidebar-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 0;
}
.hist-sidebar-toggle:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* 사이드바 네비 항목들 */
.hist-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.hist-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.015em;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  width: 100%;
  min-height: 40px;
  transition: background 0.12s, color 0.12s;
}
.hist-sidebar-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.hist-sidebar-item.is-active {
  background: #eef2ff;
  color: #1b2b6b;
  font-weight: 700;
}
.hist-sidebar-item.is-active .hist-sidebar-icon {
  color: #1b2b6b;
}
.hist-sidebar-icon {
  color: #64748b;
  flex-shrink: 0;
}
.hist-sidebar-item:hover .hist-sidebar-icon {
  color: #0f172a;
}
.hist-sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: #c7d2fe;
  color: #1b2b6b;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}
.hist-sidebar-item.is-active .hist-sidebar-badge {
  background: #1b2b6b;
  color: #fff;
}

/* 🅑 2026-04-22 Drive 채용: 사이드바 하단 저장용량 바. */
.hist-sidebar-usage {
  margin-top: auto;
  padding: 14px 12px 8px;
  border-top: 1px solid #f1f5f9;
  font-family: inherit;
  letter-spacing: -0.015em;
}
.hist-su-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hist-su-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}
.hist-su-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.hist-su-bar {
  height: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.hist-su-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #1b2b6b, #3b4fa8);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
  width: 0%;
}
.hist-su-bar-fill.is-warning {
  background: linear-gradient(90deg, #d97706, #b45309);
}
.hist-su-bar-fill.is-exhausted {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
.hist-su-link {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #1b2b6b;
  text-decoration: none;
  letter-spacing: -0.015em;
}
.hist-su-link:hover {
  text-decoration: underline;
}

/* 사이드바 높이 flex 배치 — usage 하단 고정 */
.hist-sidebar {
  display: flex;
  flex-direction: column;
}
.hist-sidebar-nav {
  flex: 0 0 auto;
}

/* 브레드크럼 (Step 4 JS가 채움) */
.hist-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
}
.hist-breadcrumb .hist-breadcrumb-crumb {
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: -0.015em;
}
.hist-breadcrumb .hist-breadcrumb-crumb:hover {
  color: #1b2b6b;
  text-decoration: underline;
}
.hist-breadcrumb .hist-breadcrumb-sep {
  color: #cbd5e1;
  flex-shrink: 0;
}
.hist-breadcrumb .hist-breadcrumb-current {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 태블릿 이상 (≥769px): 사이드바 고정 */
@media (min-width: 769px) {
  .hist-sidebar-overlay {
    display: none !important;
  }
  .hist-sidebar-close {
    display: none !important;
  }
  .hist-sidebar-toggle {
    display: none !important;
  }
  .hist-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1420px;
    margin: 0 auto;
  }
  .hist-sidebar {
    position: sticky;
    top: 56px; /* 상단 nav 높이(52px) + 약간 여유 */
    left: auto;
    bottom: auto;
    width: 220px;
    max-width: none;
    flex-shrink: 0;
    transform: none;
    transition: none;
    background: transparent;
    border-right: 1px solid #e2e8f0;
    box-shadow: none !important;
    padding: 20px 14px 24px 16px;
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
  }
  body.mvp .hist-layout .mvp-history-main {
    flex: 1;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 28px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1025px) {
  .hist-sidebar {
    width: 240px;
    padding: 24px 16px 32px 20px;
  }
  body.mvp .hist-layout .mvp-history-main {
    padding-left: 36px !important;
    padding-right: 36px !important;
    max-width: 1160px !important;
  }
}

/* ── 모바일 (≤768px): 사이드바 완전 숨김 + 인라인 탭 row 대체
   🅑 2026-04-23 대표 피드백 Image #17~#19: drawer/fullscreen takeover 모두 이상.
   결론 — 모바일엔 사이드바 UI 자체를 쓰지 않고 페이지 상단 인라인 세그먼트 탭으로 전환.
   햄버거·드로어·브레드크럼 ▾ 모두 제거. 상단 app-nav 햄버거만 남겨 이중 구조 해소. */
@media (max-width: 768px) {
  .hist-sidebar,
  .hist-sidebar-overlay,
  .hist-sidebar-close,
  .hist-sidebar-toggle {
    display: none !important;
  }
  .hist-breadcrumb {
    cursor: default;
  }
  .hist-breadcrumb .page-title::after {
    content: "" !important;
  }
  body.mvp .hist-layout .mvp-history-main {
    max-width: 100% !important;
  }
  /* 모바일 전용 인라인 세그먼트 탭 (내 작업실 / 공유 작업실) */
  .hist-mobile-nav {
    display: flex;
    gap: 6px;
    margin: 0 0 14px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
  }
  .hist-mobile-nav-btn {
    flex: 1;
    min-height: 36px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.015em;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.12s, color 0.12s;
  }
  .hist-mobile-nav-btn.is-active {
    background: #fff;
    color: #1b2b6b;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }
}
/* 데스크톱에서는 인라인 탭 숨김 — 사이드바가 대체 */
@media (min-width: 769px) {
  .hist-mobile-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   🅑 2026-04-22 옵션 C Phase 2.2: 리스트 밀도 토글 (컴팩트 모드)
   많은 작지를 한 화면에서 훑어볼 때 유용. 썸네일 축소 · 행 높이 감소.
   ══════════════════════════════════════════════════════════ */
.hist-list--compact .cq-hist-row {
  min-height: 52px !important;
  padding: 6px 12px !important;
  gap: 10px !important;
}
.hist-list--compact .cq-hist-row .cq-hist-thumb,
.hist-list--compact .cq-hist-row [data-hist-thumb],
.hist-list--compact .cq-hist-row > img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 5px !important;
  flex-shrink: 0;
}
.hist-list--compact .cq-card-wrap {
  margin-bottom: 0 !important;
}
/* 폴더 카드도 축소 */
.hist-list--compact .cq-folder-card {
  padding: 8px 12px !important;
  gap: 10px !important;
}
.hist-list--compact .cq-folder-card > div:first-child {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
}
.hist-list--compact .cq-folder-card > div:first-child svg {
  width: 14px !important;
  height: 14px !important;
}
/* 컴팩트 모드 — ⋯ 버튼 작게 */
.hist-list--compact .cq-more-btn {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}

/* 호버 효과 */
.hist-view-btn:hover {
  background: rgba(255, 255, 255, 0.6) !important;
  color: #0f172a !important;
}
.hist-view-btn[aria-pressed="true"]:hover {
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════
   🅑 2026-04-22 옵션 C Phase 2.3: 그리드 뷰 — 썸네일 상단 카드 레이아웃.
   Figma Files 스타일. 패션 도메인 "옷이 보이는" 감도 유지.
   ══════════════════════════════════════════════════════════ */
.hist-list--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.hist-list--grid .cq-card-wrap {
  margin-bottom: 0 !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.hist-list--grid .cq-card-wrap:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(27, 43, 107, 0.08);
  transform: translateY(-1px);
}
.hist-list--grid .cq-hist-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  gap: 0 !important;
  border-bottom: none !important;
  min-height: auto !important;
}
.hist-list--grid .cq-hist-row:hover {
  background: transparent !important;
}
.hist-list--grid .cq-hist-thumb {
  width: 100% !important;
  height: 160px !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: #f1f5f9 !important;
}
/* 썸네일 없는 카드 플레이스홀더 — 2026-04-23 Image #23: JS 에서 cq-hist-thumb--empty 박스 렌더.
   이전 ::before 가짜 박스는 불필요 → JS 렌더 요소에 의존. 그리드 뷰에서 아이콘 더 크게. */
.hist-list--grid .cq-hist-thumb--empty svg { width: 44px !important; height: 44px !important; }
.hist-list--grid .cq-hist-thumb--empty { min-height: 160px; }
/* 썸네일 뒤 정보 영역 — flex 1로 높이 통일 */
.hist-list--grid .cq-hist-row > div:not(.cq-hist-thumb):not([data-check]) {
  padding: 12px 14px !important;
}
/* 멤버 아바타 스택 — 그리드에서는 정보 영역 안쪽으로 밀어넣어 보이게 */
.hist-list--grid .cq-member-stack,
.hist-list--grid [data-member-stack] {
  margin: 0 14px 10px !important;
}
/* ⋯ 메뉴 — 그리드에서는 우측 상단 absolute */
.hist-list--grid .cq-card-wrap {
  position: relative;
}
.hist-list--grid .cq-more-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* 🅑 2026-04-23 AM-#22/#23 (대표 지시 — 구글 드라이브 그리드 뷰 동등 재현):
   그리드 뷰에서 폴더도 **타일**로 배치. 이전 와이드 pill(grid-column: 1/-1) 폐기.
   Image #23 레퍼런스 — 폴더 아이콘 + 이름 + 메타 한 줄, 옅은 회색 배경 타일. */
.hist-list--grid .cq-folder-card {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 14px 16px !important;
  min-height: 60px !important;
  gap: 12px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #f8fafc !important; /* Image #23 옅은 회색 타일 톤 */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hist-list--grid .cq-folder-card:hover {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  transform: translateY(-1px);
}
.hist-list--grid .cq-folder-card > div:first-child {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: transparent !important;
}
.hist-list--grid .cq-folder-card > div:first-child svg {
  width: 20px !important;
  height: 20px !important;
}
.hist-list--grid .cq-folder-card > span:last-child {
  display: flex !important; /* chevron 복원 */
}
/* 그리드 내 폴더 이름은 1줄 말줄임 유지 */
.hist-list--grid .cq-folder-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.hist-list--grid .cq-folder-meta {
  font-size: 11.5px !important;
}
/* 검수 checkbox — 그리드에서 좌측 상단 */
.hist-list--grid [data-check] {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 4px;
}


/* 🅑 2026-04-22 Phase B.1 (공유 Editor P0 · be-junho + designer-yerin):
   /create에서 공유받은 작지 열었을 때 상단 배너 + viewer readonly 모드. */
.cq-share-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.cq-share-banner--editor {
  background: #eef4ff;
  border: 1px solid #bfd3ff;
  color: #1b3a7a;
}
.cq-share-banner--viewer {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}
.cq-share-banner__icon {
  font-size: 16px;
  line-height: 1;
}
.cq-share-banner__title { font-weight: 700; }
.cq-share-banner__sub { color: inherit; opacity: 0.78; font-weight: 500; }

/* Viewer: 주요 편집 UI 비활성 (서버 가드도 있지만 UX 혼선 방지) */
/* 🅑 2026-04-23 대표 Image #18 (공유 정책 v1.3): 탭 패널 외부에도 편집 요소가 많아 범위를 .mvp-result-inner 전체로 확장.
   편집 버튼까지 차단. 단 data-viewer-ok 속성 붙은 버튼(뒤로가기·닫기 등) 은 허용. */
.cq-share-viewer-readonly .mvp-result-inner input:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner textarea:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner select:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner [contenteditable]:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner button:not([data-viewer-ok]):not(.mvp-result-back):not(.mvp-result-close-x):not(.mvp-wiz-nav-btn):not(.mvp-tab-btn):not([data-tab]):not([role="tab"]) {
  pointer-events: none !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}
/* 🅑 2026-04-23 대표 Image #50: Viewer 도 탭 이동(다음 →)은 허용. 편집이 아닌 네비게이션. */
.cq-share-viewer-readonly .mvp-result-inner .mvp-wiz-nav-btn,
.cq-share-viewer-readonly .mvp-result-inner .mvp-tab-btn,
.cq-share-viewer-readonly .mvp-result-inner [data-tab],
.cq-share-viewer-readonly .mvp-result-inner [role="tab"] {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}
.cq-share-viewer-readonly .mvp-result-inner input:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner textarea:not([data-viewer-ok]),
.cq-share-viewer-readonly .mvp-result-inner select:not([data-viewer-ok]) {
  background: #f8fafc !important;
}
.cq-share-viewer-readonly #saveStatus { display: none !important; }

/* ────────────────────────────────────────────────────────────────
   2026-04-23 Image #8 v2 · 모바일 폴더 카드 레이아웃 정리
   이전 B안(3-row 세로 계층)은 아바타 셀렉터 미스로 깨짐 → 롤백 후 재시도.
   방향: 단일 행 유지, 정보 중복 제거 (잠금 배지 + 👥 아이콘 숨김, 아바타만).
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cq-folder-card {
    padding: 12px 14px;
    gap: 10px;
  }
  /* 중복 정보 숨김: 잠금+N명 배지는 아바타 스택이 이미 시각 표현 */
  .cq-folder-card .cq-folder-lock-badge { display: none !important; }
  /* 🅑 2026-04-23 Image #9 롤백: 폴더 공유 버튼(👥)은 모바일에서도 필수 진입점 → 숨김 제거.
     대표 지시 "폴더 공유하기가 사라졌음" */
  /* 폴더 아이콘 축소 */
  .cq-folder-card .cq-folder-icon { width: 36px !important; height: 36px !important; }
  .cq-folder-card .cq-folder-icon svg { width: 18px; height: 18px; }
  /* 이름 텍스트 — 길면 말줄임 */
  .cq-folder-card .cq-folder-name { font-size: 14px; letter-spacing: -0.02em; max-width: 100%; }
  .cq-folder-card .cq-folder-meta { font-size: 12px; letter-spacing: -0.015em; margin-top: 2px; }
  /* 아바타 스택 오른쪽 정렬 유지 */
  .cq-folder-card .cq-folder-member-stack { margin-left: auto; }
}

/* ─── 생산 일정 탭 ─── */
.mvp-sched-tab-intro { padding: 0 0 8px; }
.mvp-sched-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}
.mvp-sched-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mvp-sched-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: -0.01em;
}
.mvp-sched-input {
  width: 100%;
  box-sizing: border-box;
}
.mvp-sched-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 68px;
}
.mvp-sched-godrop-wrap {
  margin-bottom: 16px;
}
.mvp-sched-godrop-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mvp-sched-godrop-btn {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  color: #475569;
}
.mvp-sched-godrop-btn.is-selected {
  border-color: #1b2b6b;
  background: #1b2b6b;
  color: #fff;
}
.mvp-sched-godrop-btn.is-go.is-selected {
  border-color: #059669;
  background: #059669;
}
.mvp-sched-godrop-btn.is-drop.is-selected {
  border-color: #dc2626;
  background: #dc2626;
}
@media (max-width: 640px) {
  .mvp-sched-row {
    grid-template-columns: 1fr 1fr;
  }
}