/* style.css */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Range Slider (base) */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #3b82f6;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 2px;
}

/* Range Slider (color variations like v1.6.7) */
.slider-red::-webkit-slider-thumb { background: #ef4444; }
.slider-purple::-webkit-slider-thumb { background: #a855f7; }
.slider-emerald::-webkit-slider-thumb { background: #10b981; }
.slider-indigo::-webkit-slider-thumb { background: #6366f1; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Animation */
@keyframes highlightFade {
  0% { background-color: #fef08a; transform: scale(1.01); }
  100% { background-color: transparent; transform: scale(1); }
}
.animate-highlight { animation: highlightFade 1.5s ease-out forwards; }

/* Toast Animation */
.toast { animation: slideIn 0.3s ease-out forwards; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Print Mode Styling (PDF Correction) --- */
body.print-mode {
  background-color: white !important;
  height: auto !important;
  overflow: visible !important;
}

/* NOTE:
   v1.6.7では #main-container を前提にしていたので、
   SaaS版でIDが違う場合はここを合わせてください。
*/
body.print-mode #main-container {
  overflow: visible !important;
  height: auto !important;
}

/* Hide unnecessary elements during PDF generation */
body.print-mode header,
body.print-mode #toast-container,
body.print-mode .no-print,
body.print-mode input[type="range"],
body.print-mode ::-webkit-scrollbar {
  display: none !important;
}

/* Style for the text that replaces inputs during print */
.print-replacement-span {
  display: inline-block;
  font-weight: 500;
  color: #1e293b;
  padding: 2px 4px;
  border-bottom: 1px dashed #cbd5e1;
  white-space: nowrap;
}

/* Mobile: prevent auto-zoom on input focus (16px rule) */
@media (max-width: 768px) {
  input[type="number"],
  input[type="text"],
  select {
    font-size: 16px !important;
  }
}