/* ========== DualWrite Pro - Main Styles v2.0 ========== */
/* Reset & Base */
* { font-family: 'Noto Sans KR', 'Inter', system-ui, sans-serif; margin: 0; box-sizing: border-box; }
body { background: linear-gradient(135deg, #0a0f1e 0%, #111827 50%, #0f172a 100%); min-height: 100vh; }

/* Glassmorphism */
.glass { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.06); }
.glass-light { background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
.glass-card { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.4)); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.06); transition: all .3s ease; }
.glass-card:hover { border-color: rgba(249, 115, 22, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

/* Tabs */
.tab-btn { position: relative; padding: 8px 16px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #94a3b8; background: transparent; transition: all .3s ease; cursor: pointer; border: none; white-space: nowrap; }
.tab-btn:hover { color: #e2e8f0; background: rgba(51, 65, 85, 0.4); }
.tab-btn.active { color: #fff; background: linear-gradient(135deg, #F97316, #ea580c); box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4); }

@media (min-width: 640px) {
  .tab-btn { padding: 10px 24px; font-size: 14px; }
}

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #F97316, #ea580c); color: #fff; font-weight: 600; border: none; border-radius: 14px; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden; }
.btn-primary:hover { box-shadow: 0 6px 25px rgba(249, 115, 22, 0.5); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent); opacity: 0; transition: opacity .3s; }
.btn-primary:hover::after { opacity: 1; }

/* Score gauge */
.gauge-ring { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.gauge-glow { filter: drop-shadow(0 0 8px var(--glow-color)); }

/* Inputs */
.input-field { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(100, 116, 139, 0.3); border-radius: 12px; color: #e2e8f0; transition: all .3s ease; }
.input-field:focus { outline: none; border-color: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15); }
.input-field::placeholder { color: #475569; }

/* Animations */
.fade-up { animation: fadeUp .5s ease forwards; opacity: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.slide-in { animation: slideIn .4s ease forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(249, 115, 22, 0.2); } 50% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.4); } }
.shimmer { background: linear-gradient(90deg, rgba(30, 41, 59, 0.4) 25%, rgba(51, 65, 85, 0.4) 50%, rgba(30, 41, 59, 0.4) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Score colors */
.score-excellent { color: #22c55e; }
.score-good { color: #84cc16; }
.score-average { color: #eab308; }
.score-poor { color: #ef4444; }

/* Checklist card */
.check-card { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(100, 116, 139, 0.15); border-radius: 12px; padding: 12px 16px; transition: all .3s ease; }
.check-card.pass { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.05); }
.check-card.fail { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }

/* ★ Checklist improvement example */
.checklist-example {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Hide scrollbar for tabs */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Toast */
.toast { position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 9999; padding: 12px 20px; border-radius: 14px; font-size: 13px; font-weight: 500; transform: translateY(100px); opacity: 0; transition: all .4s ease; backdrop-filter: blur(12px); text-align: center; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; }
.toast.error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
.toast.info { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.3); color: #93c5fd; }

@media (min-width: 640px) {
  .toast { left: auto; right: 24px; bottom: 24px; max-width: 400px; font-size: 14px; text-align: left; }
}

/* Progress bar */
.progress-track { height: 6px; background: rgba(51, 65, 85, 0.5); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; transition: width 1s ease; }

/* Stat card counter */
.stat-num { font-family: 'Inter', 'Noto Sans KR', sans-serif; font-weight: 800; letter-spacing: -0.02em; }

/* ========== REVISED TEXT - ENHANCED READABILITY ========== */
.revised-box {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 30%, #fefce8 100%);
  border: 2px solid #eab308;
  border-radius: 16px;
  padding: 20px 18px;
  color: #1c1917;
  font-size: 15px;
  line-height: 2;
  letter-spacing: -0.01em;
  max-height: 500px;
  overflow-y: auto;
  box-shadow: 0 4px 24px rgba(234, 179, 8, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@media (min-width: 640px) {
  .revised-box { padding: 28px 24px; font-size: 16px; }
}
.revised-box p {
  margin-bottom: 18px;
  text-indent: 0.5em;
}
.revised-box p:last-child { margin-bottom: 0; }
.revised-box .hl-num {
  color: #dc2626;
  font-weight: 700;
  background: rgba(220, 38, 38, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
}
.revised-box .hl-quote {
  color: #7c3aed;
  font-weight: 600;
  background: rgba(124, 58, 237, 0.06);
  padding: 1px 4px;
  border-radius: 4px;
}
.revised-box .hl-keyword {
  color: #0369a1;
  font-weight: 600;
}

/* Before text box */
.before-box {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 16px;
  padding: 18px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.9;
  max-height: 500px;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .before-box { padding: 24px; font-size: 14px; }
}

/* ★ Diff view styles */
.diff-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 16px;
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
  line-height: 2;
  font-size: 14px;
}
.diff-equal {
  color: #e2e8f0;
}
.diff-insert {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
}
.diff-delete {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  padding: 2px 4px;
  border-radius: 4px;
  text-decoration: line-through;
  opacity: 0.7;
}
.diff-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.diff-content {
  word-wrap: break-word;
}

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 16px; }
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal-content { background: linear-gradient(135deg, #0f172a, #1e293b); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; padding: 20px; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-backdrop.active .modal-content { transform: scale(1); }
@media (min-width: 640px) {
  .modal-content { border-radius: 24px; padding: 32px; }
}

/* History item hover */
.history-item { transition: all 0.2s ease; cursor: pointer; }
.history-item:hover { border-color: rgba(249, 115, 22, 0.4) !important; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }

/* line clamp */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ★ Model selector card */
.model-card {
  background: rgba(15, 23, 42, 0.5);
  transition: all 0.3s ease;
}
.model-card:hover {
  background: rgba(30, 41, 59, 0.6);
  transform: translateY(-1px);
}

/* ★ Mobile touch optimization */
@media (max-width: 640px) {
  .tab-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .btn-primary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .history-item { -webkit-tap-highlight-color: transparent; }
  .check-card { padding: 10px 12px; }
  textarea { font-size: 16px !important; /* Prevents iOS zoom on focus */ }
  select { font-size: 16px !important; }
  input { font-size: 16px !important; }
}