/* === CROQUIS AI — Full MVP Styles === */
:root {
  --primary: #1a1a2e;
  --primary-light: #16213e;
  --accent: #e94560;
  --accent-hover: #c73650;
  --bg: #f5f6fa;
  --bg-card: #ffffff;
  --text: #1a1a2e;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --border-focus: #e94560;
  --success: #10b981;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
  --transition: 0.2s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }

/* Header */
.header { background:var(--primary); color:white; padding:0 24px; height:56px; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.header-inner { max-width:960px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo { display:flex; align-items:center; gap:8px; }
.logo-icon { font-size:20px; }
.logo-text { font-size:16px; font-weight:700; letter-spacing:2px; }

/* Main */
.main { max-width:960px; margin:0 auto; padding:24px 16px 80px; }

/* Step Indicator */
.step-indicator { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:28px; padding:0 8px; overflow-x:auto; }
.step-dot { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; flex-shrink:0; }
.step-dot span { width:30px; height:30px; border-radius:50%; background:var(--border); color:var(--text-secondary); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; transition:all var(--transition); }
.step-dot label { font-size:10px; color:var(--text-secondary); white-space:nowrap; cursor:pointer; }
.step-dot.active span { background:var(--accent); color:white; }
.step-dot.active label { color:var(--accent); font-weight:600; }
.step-dot.done span { background:var(--success); color:white; }
.step-line { flex:1; height:2px; background:var(--border); margin:0 4px; margin-bottom:18px; min-width:12px; }

/* Cards */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }

/* Step Titles */
.step-title { font-size:20px; font-weight:800; margin-bottom:16px; color:var(--primary); }
.zh-label { font-size:14px; font-weight:500; color:var(--blue); margin-left:6px; }
.zh-sub { font-weight:400; color:var(--blue); font-size:12px; margin-left:4px; }
.zh-text { color:var(--blue); font-size:13px; }
.optional-tag { font-size:12px; font-weight:500; color:var(--text-secondary); background:#f0f0f0; padding:2px 8px; border-radius:4px; margin-left:8px; }

/* Form Elements */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.req { color:var(--accent); }
.hint-text { color:var(--text-secondary); font-size:13px; margin-bottom:8px; }

input[type="text"],input[type="date"],input[type="number"],select,textarea {
  width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; font-family:inherit; transition:border-color var(--transition); background:white;
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--border-focus); }
input::placeholder,textarea::placeholder { color:#b0b8c4; font-weight:400; }
textarea { resize:vertical; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* Language Selector */
.lang-selector { display:flex; gap:6px; flex-wrap:wrap; }
.lang-btn { padding:7px 12px; border:1.5px solid var(--border); border-radius:6px; background:white; cursor:pointer; font-size:13px; font-family:inherit; transition:all var(--transition); }
.lang-btn:hover { border-color:var(--accent); }
.lang-btn.active { border-color:var(--accent); background:rgba(233,69,96,0.05); color:var(--accent); font-weight:600; }

/* Stage Selection */
.stage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px; }
.stage-card { padding:20px 16px; border:2px solid var(--border); border-radius:var(--radius); background:white; cursor:pointer; text-align:center; transition:all var(--transition); font-family:inherit; }
.stage-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(233,69,96,0.1); }
.stage-card.active { border-color:var(--accent); background:rgba(233,69,96,0.04); box-shadow:0 2px 12px rgba(233,69,96,0.15); }
.stage-num { font-size:22px; font-weight:900; color:var(--primary); margin-bottom:4px; }
.stage-card.active .stage-num { color:var(--accent); }
.stage-label { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.stage-desc { font-size:12px; color:var(--text-secondary); }

/* Sample Num */
.sample-num-selector { display:flex; gap:8px; }
.sn-btn { padding:8px 18px; border:1.5px solid var(--border); border-radius:6px; background:white; cursor:pointer; font-size:14px; font-weight:600; font-family:inherit; transition:all var(--transition); }
.sn-btn:hover { border-color:var(--accent); }
.sn-btn.active { border-color:var(--accent); background:var(--accent); color:white; }

/* ===== Image Upload ===== */
.upload-area,
.sketch-upload-area {
  border:2px dashed var(--border); border-radius:var(--radius); padding:32px; text-align:center;
  cursor:pointer; transition:all var(--transition); min-height:180px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; background:#fafbfc;
}
.upload-area:hover,.upload-area.drag-over,
.sketch-upload-area:hover,.sketch-upload-area.drag-over { border-color:var(--accent); background:rgba(233,69,96,0.03); }
.upload-placeholder,.sketch-upload-placeholder { color:var(--text-secondary); }
.upload-icon { font-size:48px; display:block; margin-bottom:12px; }
.sketch-upload-icon { font-size:40px; display:block; margin-bottom:8px; opacity:0.7; }
.sketch-upload-text { font-size:14px; font-weight:500; color:var(--text-secondary); }
.sketch-upload-hint { font-size:12px; color:#9ca3af; margin-top:4px; }
.upload-hint { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.uploaded-preview,.sketch-uploaded-preview { max-width:100%; max-height:280px; object-fit:contain; border-radius:var(--radius-sm); }
.sketch-actions { display:flex; gap:8px; }
.btn-sketch-action { min-width:120px; }

/* Sketch result */
.sketch-result-area { position:relative; min-height:100px; }
.sketch-preview { max-width:100%; max-height:400px; object-fit:contain; border-radius:var(--radius-sm); border:1px solid var(--border); }
.sketch-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,0.9); border-radius:var(--radius-sm); }
.spinner { width:40px; height:40px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform:rotate(360deg); } }

.color-picker-row { display:flex; align-items:center; gap:12px; }
.color-picker-row input[type="color"] { width:44px; height:36px; border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:2px; }
.btn-small { padding:6px 16px; border:1.5px solid var(--accent); border-radius:6px; background:white; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-small:hover { background:var(--accent); color:white; }
.btn-outline { background:transparent !important; border:1.5px solid #999 !important; color:#666 !important; }
.btn-outline:hover { background:#f3f4f6 !important; color:#333 !important; }
.size-tag { display:inline-flex; align-items:center; gap:2px; padding:3px 10px; background:var(--blue); color:white; border-radius:12px; font-size:12px; font-weight:600; }
.size-tag button { font-size:14px; line-height:1; }
.btn-generate-sketch { width:100%; margin-top:16px; padding:12px; border:none; border-radius:var(--radius-sm); background:var(--blue); color:white; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all var(--transition); }
.btn-generate-sketch:hover:not(:disabled) { background:#1d4ed8; }
.btn-generate-sketch:disabled { background:var(--border); color:var(--text-secondary); cursor:not-allowed; }

/* ===== Label Selection ===== */
.label-group { margin-bottom:20px; }
.label-options { display:flex; flex-wrap:wrap; gap:8px; }
.label-options .check-label {
  padding:8px 14px; border:1.5px solid var(--border); border-radius:6px; background:white;
  font-size:13px; cursor:pointer; transition:all var(--transition);
}
.label-options .check-label:has(input:checked) { border-color:var(--accent); background:rgba(233,69,96,0.05); color:var(--accent); }
.label-options .check-label input { display:none; }

/* Notice Box */
.notice-box { margin-top:16px; padding:12px 16px; background:var(--blue-light); border:1px solid #bfdbfe; border-radius:var(--radius-sm); font-size:13px; line-height:1.7; }

/* Size Config */
.size-config { display:flex; gap:12px; flex-wrap:wrap; }
.check-label { display:flex; align-items:center; gap:4px; font-size:14px; font-weight:500; cursor:pointer; }
.check-label input[type="checkbox"] { width:16px; height:16px; accent-color:var(--accent); }

/* Measurement Table */
.meas-table { width:100%; border-collapse:collapse; margin:12px 0; }
.meas-table th { background:var(--primary); color:white; padding:8px 10px; font-size:12px; font-weight:600; text-align:center; white-space:nowrap; }
.meas-table td { padding:4px 6px; border:1px solid var(--border); text-align:center; font-size:13px; }
.meas-table td:first-child { text-align:left; font-weight:600; }
.meas-table td.local-cell,.meas-table td:nth-child(2) { color:var(--blue); font-size:12px; text-align:left; }
.meas-table input { width:60px; padding:4px; text-align:center; border:1px solid var(--border); border-radius:4px; font-size:13px; }
.meas-table input.meas-part { width:100%; min-width:80px; text-align:left; font-weight:500; }
.meas-table input:focus { border-color:var(--accent); outline:none; }
.meas-table .tolerance-input { width:50px; }

/* Row types */
.note-row,.order-row,.color-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.note-bullet { font-size:16px; color:var(--text-secondary); flex-shrink:0; }
.note-input { flex:1; }
.color-swatch,.order-swatch { flex:1.2; }
.color-name { flex:1.5; }
.color-size,.order-size { flex:0.8; }
.order-color { flex:1.5; }
.order-qty { flex:0.8; width:80px; }
.order-unit { font-size:13px; color:var(--text-secondary); flex-shrink:0; }

.btn-icon-small { width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:white; cursor:pointer; font-size:14px; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.btn-icon-small:hover { border-color:var(--accent); color:var(--accent); }
.btn-text { background:none; border:none; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; padding:4px 0; font-family:inherit; }
.btn-text:hover { text-decoration:underline; }
.sub-title { font-size:15px; font-weight:700; margin:20px 0 12px; color:var(--primary); }

/* Summary (before generate) */
.summary-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.summary-item { display:flex; justify-content:space-between; padding:8px 12px; background:#f9fafb; border-radius:6px; font-size:14px; }
.summary-label { font-weight:600; color:var(--text-secondary); }

/* Step Navigation */
.step-nav { display:flex; justify-content:space-between; margin-top:16px; }
.btn-prev,.btn-next { padding:10px 24px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all var(--transition); }
.btn-prev { background:white; border:1.5px solid var(--border); color:var(--text-secondary); }
.btn-prev:hover { border-color:var(--text); color:var(--text); }
.btn-next { background:var(--accent); border:none; color:white; }
.btn-next:hover { background:var(--accent-hover); }
.form-step { display:none; }
.form-step.active { display:block; }

/* Generate Button */
.final-actions { margin-top:16px; }
.btn-generate { width:100%; padding:16px; background:var(--accent); color:white; border:none; border-radius:var(--radius-sm); font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; transition:all var(--transition); }
.btn-generate:hover { background:var(--accent-hover); box-shadow:0 4px 12px rgba(233,69,96,0.3); }

/* Result View */
.result-actions-bar { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.action-btn { padding:8px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; background:white; transition:all var(--transition); }
.action-btn:hover { border-color:var(--accent); color:var(--accent); }
.action-btn.primary { background:var(--primary); color:white; border-color:var(--primary); }
.action-btn.primary:hover { background:var(--primary-light); }

/* ===== Tech Pack Preview (BLUENEST) ===== */
.techpack-preview { background:white; border:2px solid #333; border-radius:2px; overflow:hidden; }
.tp-header { display:grid; grid-template-columns:1fr 1fr; border-bottom:2px solid #333; }
.tp-header-left { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.tp-brand-name { font-size:28px; font-weight:900; letter-spacing:2px; }
.tp-stage { font-size:15px; font-weight:500; color:#555; margin-top:4px; }
.tp-header-right { border-left:1px solid #333; }
.tp-info-row { display:grid; grid-template-columns:120px 1fr; border-bottom:1px solid #ccc; }
.tp-info-row:last-child { border-bottom:none; }
.tp-info-label { padding:8px 12px; font-size:12px; font-weight:700; background:#f5f5f5; border-right:1px solid #ccc; display:flex; align-items:center; }
.tp-info-value { padding:8px 12px; font-size:13px; }
.tp-info-row.split .tp-info-value { display:grid; grid-template-columns:1fr auto 80px; gap:0; }

.tp-body { display:grid; grid-template-columns:1fr 1fr; }
.tp-section { padding:16px; border-bottom:1px solid #ccc; }
.tp-section.full { grid-column:1/-1; }
.tp-section.left { border-right:1px solid #ccc; }
.tp-section-title { font-size:13px; font-weight:700; margin-bottom:10px; }
.tp-section-title .zh { color:var(--blue); font-weight:500; margin-left:6px; }

/* Simple Sketch Layout (clean, no annotations) */
.tp-sketch-simple { text-align:center; padding:20px 0; }
.tp-sketch-simple .tp-sketch-main-img { max-width:100%; max-height:400px; object-fit:contain; }
.tp-sketch-simple .tp-sketch-placeholder { padding:60px; color:var(--text-secondary); }
.tp-sketch-simple .tp-sketch-stage-label { margin-top:8px; font-weight:600; font-size:14px; }

/* Sketch Loading Overlay */
.sketch-loading-overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  margin-top: 16px;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff0f3 100%);
  border-radius: var(--radius);
  border: 2px dashed var(--accent);
  animation: sketchPulse 2s ease-in-out infinite;
}
.sketch-loading-overlay.hidden { display: none; }
@keyframes sketchPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.sketch-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  animation: sketchSpin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes sketchSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.sketch-loading-text {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: center;
}

/* Annotated Sketch Layout */
.tp-sketch-annotated {
  display: grid;
  grid-template-columns: minmax(100px,1fr) auto minmax(100px,1fr);
  gap: 0;
  min-height: 200px;
  align-items: stretch;
  margin-bottom: 8px;
}
.tp-annot-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}
.tp-annot-col.left { align-items: flex-end; }
.tp-annot-col.right { align-items: flex-start; }

.tp-annot {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-annot.left { flex-direction: row; }
.tp-annot.right { flex-direction: row; }
.tp-annot.bottom { flex-direction: column; align-items: center; }

.tp-annot-text {
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.tp-annot.left .tp-annot-text { text-align: right; }
.tp-annot.right .tp-annot-text { text-align: left; }
.tp-annot.bottom .tp-annot-text { text-align: center; }

.tp-annot-ko { display: block; font-weight: 600; color: #1a1a2e; }
.tp-annot-local { display: block; color: var(--blue); font-weight: 500; font-size: 10px; }

.tp-annot-line {
  width: 28px;
  height: 0;
  border-top: 1px solid #333;
  flex-shrink: 0;
}

.tp-sketch-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  min-width: 180px;
}
.tp-sketch-main-img {
  max-width: 220px;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
.tp-sketch-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 13px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  width: 180px;
}
.tp-annot-bottom {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tp-sketch-stage-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-top: 6px;
  text-align: center;
}

.tp-sketch-img { max-width:100%; max-height:250px; object-fit:contain; display:block; margin:0 auto 12px; }
.tp-fabric-info { font-size:12px; color:#555; padding:8px; background:#f9fafb; border-radius:4px; margin-top:8px; }
.tp-fabric-info div { margin-bottom:2px; }

.tp-meas-table { width:100%; border-collapse:collapse; font-size:13px; }
.tp-meas-table th { padding:6px 8px; border:1px solid #999; background:#f5f5f5; font-weight:600; font-size:12px; text-align:center; }
.tp-meas-table td { padding:5px 8px; border:1px solid #ccc; text-align:center; }
.tp-meas-table .part-cell { text-align:center; font-weight:500; line-height:1.4; }
.tp-meas-table .part-zh { display:block; color:var(--blue); font-size:12px; font-weight:400; }

.tp-mod-item { margin-bottom:10px; }
.tp-mod-label { font-size:13px; font-weight:600; margin-bottom:2px; }
.tp-mod-label .zh { color:var(--blue); font-weight:400; }
.tp-mod-text { font-size:13px; color:#444; white-space:pre-wrap; min-height:24px; }
.tp-notice-box { margin-top:12px; padding:8px 12px; background:#fffbe6; border:1px solid #ffe58f; border-radius:4px; font-size:12px; line-height:1.6; }
.tp-note-list { list-style:none; padding:0; }
.tp-note-list li { font-size:13px; padding:3px 0 3px 16px; position:relative; }
.tp-note-list li::before { content:"–"; position:absolute; left:0; }

.tp-bottom { display:grid; grid-template-columns:1fr 1fr; border-top:2px solid #333; }
.tp-bottom-section { padding:16px; }
.tp-bottom-section:first-child { border-right:1px solid #ccc; }
.tp-bottom-title { font-size:14px; font-weight:700; margin-bottom:8px; }
.tp-bottom-title .zh { color:var(--blue); font-weight:500; font-style:italic; }
.tp-bottom-text { font-size:13px; color:#444; white-space:pre-wrap; margin-bottom:4px; }

.tp-color-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.tp-color-table th { padding:5px 8px; border:1px solid #ccc; background:#f5f5f5; font-weight:600; font-size:12px; text-align:center; }
.tp-color-table td { padding:4px 8px; border:1px solid #ccc; text-align:center; font-size:13px; }
.tp-footer-note { padding:8px 16px; border-top:1px solid #ccc; font-size:11px; color:#999; text-align:right; }

/* Price conversion */
.price-conversion { margin-top:4px; font-size:13px; color:var(--blue); font-weight:600; min-height:20px; }

/* Utility */
.hidden { display:none !important; }

/* Toast */
.toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:var(--radius-sm); color:white; font-size:14px; z-index:999; animation:slideUp 0.3s ease; box-shadow:var(--shadow-lg); }
.toast.error { background:var(--accent); }
.toast.success { background:var(--success); }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ===== LANDING VIEW (AI-FIRST) ===== */
.landing-hero { text-align:center; padding:48px 0 24px; }
.landing-title { font-size:32px; font-weight:900; color:var(--primary); margin-bottom:8px; }
.landing-sub { font-size:15px; color:var(--text-secondary); }

.ai-input-card { background:white; border:2px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-lg); max-width:720px; margin:0 auto; }
.ai-input-card textarea { font-size:15px; line-height:1.8; border:none; resize:vertical; padding:16px; background:#f9fafb; border-radius:var(--radius-sm); }
.ai-input-card textarea:focus { outline:none; box-shadow:0 0 0 2px var(--accent); background:white; }

.ai-input-actions { display:flex; gap:12px; margin-top:16px; align-items:center; }
.btn-ai-parse {
  padding:14px 32px; background:var(--accent); color:white; border:none; border-radius:var(--radius-sm);
  font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:8px;
  transition:all var(--transition); box-shadow:0 2px 8px rgba(233,69,96,0.3);
}
.btn-ai-parse:hover { background:var(--accent-hover); box-shadow:0 4px 16px rgba(233,69,96,0.4); }
.btn-ai-parse:disabled { background:var(--border); color:var(--text-secondary); cursor:not-allowed; box-shadow:none; }
.btn-icon { font-size:18px; }
.btn-manual { background:none; border:none; color:var(--text-secondary); font-size:14px; cursor:pointer; font-family:inherit; text-decoration:underline; }
.btn-manual:hover { color:var(--accent); }

.ai-loading { display:flex; align-items:center; gap:12px; padding:16px 0; color:var(--text-secondary); }

/* ===== REVIEW VIEW ===== */
.review-top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.btn-back { background:none; border:1.5px solid var(--border); padding:8px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--text-secondary); }
.btn-back:hover { border-color:var(--text); color:var(--text); }
.review-actions { display:flex; gap:8px; }
.btn-export { padding:8px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; background:white; transition:all var(--transition); }
.btn-export:hover { border-color:var(--accent); color:var(--accent); }

/* Review Cards */
.review-card { background:white; border:1.5px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; transition:all var(--transition); }
.review-card:hover { border-color:#d1d5db; }

.rc-title {
  display:flex; align-items:center; gap:8px; padding:14px 20px; font-size:15px; font-weight:700;
  cursor:pointer; user-select:none; background:#fafbfc;
}
.rc-title:hover { background:#f0f1f3; }
.rc-icon { font-size:18px; }
.rc-toggle { margin-left:auto; font-size:14px; color:var(--text-secondary); transition:transform 0.2s; }
.review-card.collapsed .rc-toggle { transform:rotate(-90deg); }
.review-card.collapsed .rc-body { display:none; }

.rc-body { padding:16px 20px; border-top:1px solid var(--border); }

/* Section-level guide text */
.rc-guide { font-size:13px; color:#888; margin:0 0 14px 0; line-height:1.5; }

/* Field-level help text */
.field-guide { display:block; font-size:11px; color:#aaa; margin-top:3px; line-height:1.4; font-weight:400; letter-spacing:0; text-transform:none; }

.rc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rc-field { margin-bottom:12px; }
.rc-field label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.rc-field input,.rc-field textarea { width:100%; }

/* Status badges */
.rc-status { font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; }
.rc-status.done { background:#d1fae5; color:#065f46; }
.rc-status.partial { background:#fef3c7; color:#92400e; }
.rc-status.empty { background:#fee2e2; color:#991b1b; }

/* ===== HINT CHIPS (clickable suggestions) ===== */
.hint-chips { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.hint-chip {
  padding:5px 12px; border:1.5px solid var(--border); border-radius:16px; background:white;
  font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; color:var(--text);
  transition:all var(--transition); white-space:nowrap;
}
.hint-chip:hover { border-color:var(--accent); color:var(--accent); background:rgba(233,69,96,0.03); }
.hint-chip.active { border-color:var(--accent); background:rgba(233,69,96,0.08); color:var(--accent); font-weight:600; }

/* Size chips slightly bigger */
.sz-chip { padding:6px 14px; font-size:13px; font-weight:600; }

/* Review bottom bar */
.review-bottom-bar { position:sticky; bottom:0; background:white; padding:16px 0; border-top:1px solid var(--border); margin:0 -16px; padding:16px; z-index:50; }
.review-bottom-bar .btn-generate { max-width:400px; margin:0 auto; display:block; }

/* ===== Language Switcher ===== */
.lang-switcher { display:flex; gap:4px; }
.lang-sw-btn {
  padding:4px 10px; border:1px solid rgba(255,255,255,0.25); border-radius:4px;
  background:transparent; color:rgba(255,255,255,0.6); font-size:12px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all var(--transition);
}
.lang-sw-btn:hover { color:white; border-color:rgba(255,255,255,0.5); }
.lang-sw-btn.active { color:white; border-color:white; background:rgba(255,255,255,0.12); font-weight:700; }

/* ===== Landing Image Attach ===== */
.ai-image-attach { display:flex; align-items:center; gap:10px; margin:10px 0 4px; }
.btn-attach-img {
  padding:6px 14px; border:1.5px dashed var(--border); border-radius:8px;
  background:white; cursor:pointer; font-size:13px; font-family:inherit;
  color:var(--text-secondary); transition:all var(--transition); white-space:nowrap;
}
.btn-attach-img:hover { border-color:var(--accent); color:var(--accent); }
.ai-img-hint { font-size:12px; color:#aaa; }
.landing-img-preview {
  position:relative; display:inline-block; margin:8px 0;
  border:1.5px solid var(--border); border-radius:8px; overflow:hidden;
}
.landing-img-preview img { max-height:120px; max-width:200px; display:block; object-fit:cover; }
.btn-remove-img {
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.6); color:white; border:none; font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ===== Unit Toggle ===== */
.unit-toggle-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.unit-toggle-row > label { font-size:12px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.unit-toggle { display:flex; border:1.5px solid var(--border); border-radius:6px; overflow:hidden; }
.unit-btn {
  padding:5px 14px; border:none; background:white; font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit; color:var(--text-secondary); transition:all var(--transition);
}
.unit-btn + .unit-btn { border-left:1.5px solid var(--border); }
.unit-btn.active { background:var(--accent); color:white; }
.unit-toggle-row .field-guide { flex-basis:100%; }

/* Filled field highlight */
.rc-field input.filled,.rc-field textarea.filled { border-color:var(--success); background:#f0fdf4; }
.rc-field.field-error { animation: fieldShake 0.4s ease-in-out; }
.rc-field.field-error input,.rc-field.field-error textarea { border-color: var(--accent) !important; background: #fff0f3 !important; box-shadow: 0 0 0 3px rgba(233,69,96,0.15); }
@keyframes fieldShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* ===== Header Right Section ===== */
.header-right { display:flex; align-items:center; gap:12px; }
.header-login-btn {
  padding:5px 14px; border:1px solid rgba(255,255,255,0.4); border-radius:6px;
  background:transparent; color:white; font-size:13px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all var(--transition);
}
.header-login-btn:hover { background:rgba(255,255,255,0.12); }
.header-user-menu { display:flex; align-items:center; gap:8px; }
.header-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.header-name { color:white; font-size:13px; font-weight:500; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-logout-btn {
  padding:3px 10px; border:1px solid rgba(255,255,255,0.3); border-radius:4px;
  background:transparent; color:rgba(255,255,255,0.7); font-size:11px;
  cursor:pointer; font-family:inherit;
}
.header-logout-btn:hover { color:white; border-color:rgba(255,255,255,0.6); }

/* ===== Auth Modal ===== */
.auth-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.auth-modal.hidden { display:none; }
.auth-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.auth-modal-content {
  position:relative; width:380px; max-width:90vw; background:white; border-radius:16px;
  padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,0.3); z-index:1;
}
.auth-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:18px; cursor:pointer; color:#999; }
.auth-title { text-align:center; font-size:20px; font-weight:800; color:var(--primary); margin-bottom:20px; letter-spacing:1px; }
.auth-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:16px; }
.auth-tab {
  flex:1; padding:10px 0; text-align:center; font-size:14px; font-weight:600;
  cursor:pointer; border:none; background:none; color:var(--text-secondary);
  border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit;
}
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-error { color:#dc2626; font-size:13px; text-align:center; margin-bottom:12px; min-height:18px; }
.google-signin-wrap { display:flex; justify-content:center; margin-bottom:12px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:12px 0; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.auth-divider span { font-size:12px; color:#999; }
.auth-field { margin-bottom:12px; }
.auth-field input {
  width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px;
  font-size:14px; font-family:inherit;
}
.auth-field input:focus { outline:none; border-color:var(--accent); }
.auth-submit-btn {
  width:100%; padding:11px 0; border:none; border-radius:8px; background:var(--accent);
  color:white; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background var(--transition);
}
.auth-submit-btn:hover { background:var(--accent-hover); }

/* ===== History Sidebar ===== */
.sidebar-open-btn {
  position:fixed; top:64px; left:8px; z-index:90; width:36px; height:36px;
  border:1px solid var(--border); border-radius:8px; background:white;
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); color:var(--text-secondary);
}
.sidebar-open-btn:hover { background:var(--bg); }

.history-sidebar {
  position:fixed; top:56px; left:0; bottom:0; width:260px; background:white;
  border-right:1px solid var(--border); z-index:80; transform:translateX(-260px);
  transition:transform 0.25s ease; box-shadow:2px 0 12px rgba(0,0,0,0.05);
  display:flex; flex-direction:column;
}
.history-sidebar.hidden { display:none; }
.history-sidebar.open { transform:translateX(0); }
.sidebar-header {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.sidebar-toggle { background:none; border:none; font-size:18px; cursor:pointer; color:var(--text-secondary); }
.sidebar-title { font-size:14px; font-weight:700; color:var(--primary); }
.history-list { flex:1; overflow-y:auto; padding:8px 0; }
.history-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background var(--transition);
}
.history-item:hover { background:var(--bg); }
.history-icon { font-size:20px; flex-shrink:0; }
.history-info { flex:1; min-width:0; }
.history-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-date { font-size:11px; color:var(--text-secondary); }
.history-delete {
  width:22px; height:22px; border:none; background:none; color:#ccc; font-size:12px;
  cursor:pointer; border-radius:4px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--transition);
}
.history-item:hover .history-delete { opacity:1; }
.history-delete:hover { background:#fee2e2; color:#dc2626; }
.history-empty { padding:24px 16px; text-align:center; color:var(--text-secondary); font-size:13px; }

.main.sidebar-open { margin-left:260px; transition:margin-left 0.25s ease; }

/* Review bottom bar inner (with save button) */
.review-bottom-inner { max-width:400px; margin:0 auto; display:flex; gap:8px; align-items:center; }
.review-bottom-inner .btn-generate { flex:1; }
.btn-save {
  width:42px; height:42px; border:1.5px solid var(--border); border-radius:8px;
  background:white; font-size:18px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; transition:all var(--transition); flex-shrink:0;
}
.btn-save:hover { border-color:var(--accent); background:rgba(233,69,96,0.04); }

/* ===== Pricing Button (Header) ===== */
.header-pricing-btn {
  background:transparent; border:1px solid rgba(255,255,255,0.3); color:white;
  padding:6px 14px; border-radius:6px; font-size:13px; cursor:pointer;
  transition:all var(--transition);
}
.header-pricing-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5); }

/* ===== Factory Recommendation ===== */
.factory-recommend-section {
  margin-top:40px; padding:32px 0;
  border-top:2px solid var(--border);
}
.factory-recommend-header { text-align:center; margin-bottom:24px; }
.factory-recommend-title { font-size:22px; font-weight:700; color:var(--primary); }
.factory-recommend-sub { color:var(--text-secondary); font-size:14px; margin-top:4px; }
.factory-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.factory-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); transition:all var(--transition);
}
.factory-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.factory-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.factory-badge {
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase;
}
.factory-badge-best { background:#dcfce7; color:#166534; }
.factory-badge-fast { background:#fef3c7; color:#92400e; }
.factory-badge-premium { background:#ede9fe; color:#5b21b6; }
.factory-rating { font-size:13px; color:var(--text-secondary); }
.factory-name { font-size:16px; font-weight:700; margin-bottom:6px; }
.factory-desc { font-size:13px; color:var(--text-secondary); margin-bottom:12px; line-height:1.5; }
.factory-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:16px; }
.factory-meta-item { font-size:12px; color:var(--text); }
.factory-meta-label { font-weight:600; color:var(--text-secondary); margin-right:4px; }
.factory-contact-btn {
  width:100%; padding:10px; background:var(--primary); color:white; border:none;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer;
  transition:all var(--transition);
}
.factory-contact-btn:hover { background:var(--accent); }
.factory-disclaimer {
  text-align:center; color:var(--text-secondary); font-size:12px; margin-top:16px;
  font-style:italic;
}

/* ===== Pricing Modal ===== */
.pricing-modal { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.pricing-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.pricing-modal-content {
  position:relative; background:white; border-radius:16px; padding:40px 32px;
  max-width:960px; width:95vw; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.pricing-close {
  position:absolute; top:16px; right:16px; background:none; border:none;
  font-size:20px; cursor:pointer; color:var(--text-secondary); transition:color var(--transition);
}
.pricing-close:hover { color:var(--text); }
.pricing-header { text-align:center; margin-bottom:24px; }
.pricing-main-title { font-size:28px; font-weight:800; color:var(--primary); }
.free-usage-badge {
  display:inline-block; margin-top:8px; padding:4px 16px; background:var(--blue-light);
  color:var(--blue); border-radius:20px; font-size:13px; font-weight:600;
}
.paywall-msg {
  text-align:center; padding:20px 24px; margin-bottom:24px;
  background:#fef2f2; border:1px solid #fecaca; border-radius:var(--radius);
}
.paywall-msg h3 { font-size:18px; color:#dc2626; margin-bottom:4px; }
.paywall-msg p { font-size:14px; color:#7f1d1d; }

.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pricing-card {
  background:var(--bg-card); border:2px solid var(--border); border-radius:var(--radius);
  padding:24px 20px; text-align:center; position:relative; transition:all var(--transition);
}
.pricing-card:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); }
.pricing-card.popular { border-color:var(--accent); box-shadow:0 4px 20px rgba(233,69,96,0.15); }
.pricing-card.enterprise { border-style:dashed; }
.pricing-popular-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:white; font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:20px; white-space:nowrap;
}
.pricing-card-name { font-size:14px; font-weight:800; letter-spacing:2px; color:var(--text-secondary); margin-bottom:12px; }
.pricing-card-price { font-size:28px; font-weight:800; color:var(--primary); margin-bottom:16px; }
.pricing-period { font-size:14px; font-weight:400; color:var(--text-secondary); }
.pricing-features {
  list-style:none; text-align:left; padding:0; margin-bottom:20px;
}
.pricing-features li {
  font-size:13px; color:var(--text); padding:6px 0; border-bottom:1px solid #f3f4f6;
}
.pricing-features li:last-child { border-bottom:none; }
.pricing-features .pricing-target { font-weight:600; color:var(--text-secondary); font-style:italic; border-bottom:none; }
.pricing-select-btn {
  width:100%; padding:10px; background:var(--primary); color:white; border:none;
  border-radius:var(--radius-sm); font-size:13px; font-weight:600; cursor:pointer;
  transition:all var(--transition);
}
.pricing-select-btn:hover { background:var(--primary-light); }
.pricing-select-btn.popular-btn { background:var(--accent); }
.pricing-select-btn.popular-btn:hover { background:var(--accent-hover); }
.pricing-select-btn.enterprise-btn { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.pricing-select-btn.enterprise-btn:hover { background:var(--primary); color:white; }

/* ===== Responsive — Tablet (768px) ===== */
@media (max-width:768px) {
  .form-grid-2,.form-grid-3,.rc-grid { grid-template-columns:1fr; }
  .stage-grid { grid-template-columns:1fr; }
  .tp-header,.tp-body,.tp-bottom { grid-template-columns:1fr; }
  .tp-section.left { border-right:none; }
  .step-indicator { justify-content:flex-start; }
  .sample-num-selector,.label-options { flex-wrap:wrap; }
  .landing-title { font-size:24px; }
  .ai-input-actions { flex-direction:column; }
  .btn-ai-parse { width:100%; justify-content:center; }
  .factory-cards { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr 1fr; }
  .main { padding:16px 12px 80px; }
}

/* ===== Responsive — Mobile (480px) ===== */
@media (max-width:480px) {
  /* 헤더 모바일 */
  .header { padding:0 10px; height:48px; }
  .header-inner { gap:6px; }
  .logo-text { font-size:13px; letter-spacing:1px; }
  .logo-icon { font-size:16px; }
  .header-right { gap:6px; }
  .lang-switcher { gap:2px; }
  .lang-sw-btn { font-size:10px; padding:4px 6px; }
  .header-pricing-btn { font-size:11px; padding:4px 8px; }
  .header-login-btn { font-size:11px; padding:4px 10px; }

  /* 메인 컨텐츠 */
  .main { padding:12px 8px 72px; }
  .card { padding:16px 12px; }

  /* 랜딩 */
  .landing-hero { padding:16px 0; }
  .landing-title { font-size:20px; line-height:1.3; }
  .landing-subtitle { font-size:13px; }
  .ai-input-card { padding:16px; }
  .ai-input-card textarea { font-size:14px; min-height:80px; }
  .landing-img-preview { max-height:200px; }

  /* 스텝 인디케이터 */
  .step-indicator { gap:0; margin-bottom:16px; }
  .step-dot span { width:24px; height:24px; font-size:10px; }
  .step-dot label { font-size:8px; }
  .step-line { min-width:8px; }

  /* 리뷰 카드 */
  .review-card { margin-bottom:12px; }
  .rc-title { padding:12px; font-size:14px; }
  .rc-body { padding:12px; }
  .rc-field label { font-size:12px; }
  input[type="text"],input[type="date"],input[type="number"],select,textarea {
    font-size:16px; /* iOS 확대 방지 */
    padding:10px;
  }

  /* 스테이지 카드 */
  .stage-card { padding:14px 10px; }
  .stage-num { font-size:18px; }
  .stage-label { font-size:12px; }
  .stage-desc { font-size:11px; }

  /* 버튼 */
  .btn-small { padding:8px 14px; font-size:12px; }
  .btn-generate-sketch { padding:14px; font-size:14px; }
  .sketch-actions { flex-direction:column; }
  .btn-sketch-action { width:100%; min-width:auto; }

  /* 이미지 업로드 */
  .upload-area,.sketch-upload-area { padding:20px; min-height:140px; }
  .upload-icon { font-size:36px; }
  .uploaded-preview,.sketch-uploaded-preview { max-height:200px; }

  /* 사이즈 테이블 모바일 */
  .meas-table { font-size:12px; }
  .meas-table input { font-size:13px; padding:6px; }
  .meas-table th { font-size:11px; padding:4px; }

  /* 컬러/오더 행 */
  .sample-color-row,.order-row { flex-direction:column; gap:8px; }
  .sample-color-row input,.order-row input { min-width:auto; }

  /* 하단 바 */
  .review-bottom-bar { padding:12px; gap:8px; flex-direction:column; }
  .review-bottom-bar .btn-generate { width:100%; }

  /* 결과 뷰 */
  .result-top-bar { flex-wrap:wrap; gap:8px; }

  /* 가격표 */
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-modal-content { padding:24px 12px; max-height:90vh; }
  .pricing-card { padding:16px 12px; }

  /* 인증 모달 */
  .auth-modal-content { padding:20px 16px; margin:10px; max-height:90vh; overflow-y:auto; }

  /* 공장 카드 */
  .factory-card { padding:12px; }
  .factory-card h4 { font-size:14px; }

  /* 사이드바 */
  .history-sidebar { width:85vw; max-width:300px; }

  /* 토스트 */
  .toast { font-size:13px; padding:10px 16px; max-width:90vw; }
}

/* ===== Responsive — 아주 작은 화면 (360px) ===== */
@media (max-width:360px) {
  .header-pricing-btn { display:none; }
  .logo-text { font-size:12px; }
  .lang-sw-btn { font-size:9px; padding:3px 5px; }
  .landing-title { font-size:18px; }
  .step-dot label { display:none; }
}

/* ===== 터치 디바이스 최적화 ===== */
@media (hover:none) and (pointer:coarse) {
  /* 터치 타겟 최소 44px */
  .btn-small,.lang-sw-btn,.sn-btn,.stage-card,
  .header-login-btn,.header-pricing-btn,.header-logout-btn {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* 호버 효과 제거 (터치에서 깜빡임 방지) */
  .stage-card:hover { border-color:var(--border); box-shadow:none; }
  .stage-card.active:hover { border-color:var(--accent); }
  .btn-small:hover { background:white; color:var(--accent); }
  /* 스크롤 부드럽게 */
  .main,.history-sidebar,.pricing-modal-content {
    -webkit-overflow-scrolling:touch;
  }
}

/* ===== Safe Area (노치/홈바 대응) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .review-bottom-bar {
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .main {
    padding-bottom:calc(80px + env(safe-area-inset-bottom));
  }
}