/* Remember You — Custom CSS */
/* Tailwind로 표현 어려운 미세 디테일 */

/* ---- Range Slider Custom Track ---- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #E7E2D6;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9999px;
  background: #E7E2D6;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1E293B;
  cursor: pointer;
  margin-top: -7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  border: 2px solid #2C4A3E;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.32);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: #E7E2D6;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1E293B;
  cursor: pointer;
  border: 2px solid #2C4A3E;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Olive fill overlay for slider */
.slider-wrapper {
  position: relative;
}

/* ---- Glass Card ---- */
.glass-card {
  background: rgba(253, 251, 247, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid #E7E2D6;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

/* ---- Ink Divider ---- */
.ink-divider {
  border: none;
  border-top: 1px solid #E7E2D6;
  margin: 0;
}

/* ---- Ink Shadow ---- */
.ink-shadow {
  box-shadow: 0 4px 20px -2px rgba(30, 41, 59, 0.05);
}

.ink-shadow-hover {
  transition: all 0.3s ease;
}

.ink-shadow-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(30, 41, 59, 0.08);
}

/* ---- Accuracy Gauge Bar ---- */
.gauge-bar {
  width: 100%;
  height: 6px;
  background-color: #E7E2D6;
  border-radius: 9999px;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Fade Up Animation ---- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 0.6s ease-out both;
}

.fade-up-delay-1 { animation-delay: 0.1s; }
.fade-up-delay-2 { animation-delay: 0.2s; }
.fade-up-delay-3 { animation-delay: 0.3s; }
.fade-up-delay-4 { animation-delay: 0.4s; }

/* Initially hidden for IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sequential reveal */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ---- Step Progress Dot ---- */
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.step-dot.active {
  background: #6B7A4F;
  color: #FDFBF7;
  border: 2px solid #6B7A4F;
}

.step-dot.completed {
  background: #1E293B;
  color: #FDFBF7;
  border: 2px solid #1E293B;
}

.step-dot.pending {
  background: transparent;
  color: #64748B;
  border: 2px solid #E7E2D6;
}

/* ---- Chat Bubble ---- */
.bubble-other {
  background: #F6F1E6;
  border: 1.5px solid #E7E2D6;
  border-radius: 0 16px 16px 16px;
}

.bubble-self {
  background: #1E293B;
  color: #FDFBF7;
  border-radius: 16px 0 16px 16px;
}

/* ---- Toggle Switch ---- */
.toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 9999px;
  background: #9AA0A6;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle-track.active {
  background: #6B7A4F;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FDFBF7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: left 0.2s ease;
}

.toggle-track.active .toggle-thumb {
  left: 21px;
}

/* ---- Hashtag Chip ---- */
.hashtag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background-color: #E7E2D6;
  color: #0F172A;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  font-family: 'Noto Sans KR', sans-serif;
  border: none;
}

.hashtag-chip:hover,
.hashtag-chip.selected {
  background-color: #d4cebc;
  color: #6B7A4F;
}

/* ---- Accuracy Dot ---- */
.acc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ---- Dashed Arrow Connector ---- */
.step-arrow {
  flex: 1;
  height: 2px;
  border-top: 2px dashed #E7E2D6;
  margin-top: 14px;
  position: relative;
}

.step-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -6px;
  border-left: 7px solid #E7E2D6;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ---- Mobile Menu Slide ---- */
#mobile-menu {
  transition: transform 0.3s ease;
}

/* ---- Scrollbar subtle ---- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F6F1E6;
}
::-webkit-scrollbar-thumb {
  background: #E7E2D6;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9AA0A6;
}

/* ---- Sticky filter panel ---- */
.filter-sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* ---- Chat scroll area ---- */
.chat-scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* ---- Button hover ---- */
.btn-midnight {
  background-color: #1E293B;
  color: #FDFBF7;
  transition: all 0.2s ease-in-out;
}

.btn-midnight:hover {
  background-color: #0F172A;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
}

.btn-outline-midnight {
  border: 1px solid #1E293B;
  color: #1E293B;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-outline-midnight:hover {
  background-color: #F6F1E6;
  transform: translateY(-1px);
}

/* ---- Confirmation modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================
   SEARCH PAGE — PREMIUM DEEP TONE (light-pastel scope)
   ====================================================== */

/* ---- Page base ---- */
.light-pastel {
  background: #FAF9F6;
  color: #0F172A;
}

/* ---- Range slider — scoped overrides ---- */
.light-pastel input[type="range"] {
  background: #E2E8EC;
}
.light-pastel input[type="range"]::-webkit-slider-runnable-track {
  background: #E2E8EC;
}
.light-pastel input[type="range"]::-moz-range-track {
  background: #E2E8EC;
}
.light-pastel input[type="range"]::-webkit-slider-thumb {
  background: #FFFFFF;
  border: 2px solid #2C4A3E;
  box-shadow: 0 2px 8px rgba(44, 74, 62, 0.20);
}
.light-pastel input[type="range"]::-moz-range-thumb {
  background: #FFFFFF;
  border: 2px solid #2C4A3E;
}

/* ---- Circular Accuracy Gauge ---- */
.gauge-circle {
  transform: rotate(-90deg);
  display: block;
}
.gauge-circle .gauge-track {
  fill: none;
  stroke: #E2E8EC;
  stroke-width: 2.8;
}
.gauge-circle .gauge-progress {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              stroke 0.3s ease;
}

/* ---- Result Card ---- */
.card-result {
  background: #FFFFFF;
  border: 1.5px solid #D9A574;
  border-radius: 1rem;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.card-result:hover {
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
  border-color: #B8843D;
}

/* ---- Accuracy Badge ---- */
.badge-accuracy {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.badge-very-high { background: #D7E5DD; color: #1E3A2C; border: none; }
.badge-high      { background: #DCE3EE; color: #1A2B49; border: none; }
.badge-mid       { background: #E8E8DA; color: #5C6F4D; border: none; }
.badge-low       { background: #F1F5F9; color: #475569; border: none; }
.badge-very-low  { background: #FFF1F2; color: #BE123C; border: none; }

/* ---- Map Filter wrapper ---- */
.map-filter {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #D9A574;
  height: 170px;
}
.map-filter iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ---- Keyword Chip (search page) ---- */
.keyword-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #F8FAFC;
  border: 1px solid #4B5563;
  border-radius: 9999px;
  font-size: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #0F172A;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.keyword-chip:hover {
  background: #FAEAD8;
  border-color: #2C4A3E;
  color: #2C4A3E;
}

/* ---- Sidebar Alert Card ---- */
.alert-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px solid #4B5563;
  border-radius: 0.75rem;
}

/* ---- Filter Section Title ---- */
.filter-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #475569;
  font-family: 'Noto Sans KR', sans-serif;
  margin-bottom: 12px;
}

/* ---- Card action buttons ---- */
.card-btn-outline {
  width: 100%;
  font-size: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  padding: 7px 12px;
  border: 1px solid #D9A574;
  border-radius: 8px;
  color: #0F172A;
  background: #FAEAD8;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.card-btn-outline:hover {
  background: #F2D6B5;
  border-color: #B8843D;
}
.card-btn-dark {
  width: 100%;
  font-size: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  padding: 7px 12px;
  border-radius: 8px;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
}
.card-btn-dark:hover {
  background: #1E293B;
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}

/* ---- CTA Dark button ---- */
.btn-olive {
  display: block;
  width: 100%;
  padding: 14px;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  border-radius: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-olive:hover {
  background: #1E293B;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}

/* ---- Legend dot ---- */
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  grid-column: 1 / -1;
}

/* ---- Search input # chip ---- */
.hash-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #FAEAD8;
  border: 1px solid #E8C9A0;
  border-radius: 8px;
  color: #2C4A3E;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.hash-chip-btn:hover { background: #F2D6B5; }

/* ---- Sticky filter sidebar ---- */
.search-filter-sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #D9A574 transparent;
}
.search-filter-sticky::-webkit-scrollbar { width: 4px; }
.search-filter-sticky::-webkit-scrollbar-thumb {
  background: #D9A574;
  border-radius: 4px;
}

/* ---- Right sidebar sticky ---- */
.search-right-sticky {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: none;
}
.search-right-sticky::-webkit-scrollbar { display: none; }

/* ---- Search input wrapper — premium floating card ---- */
.search-input-wrap {
  background: #FFFFFF;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  border: 1.5px solid #D9A574;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-input-wrap:focus-within {
  border: 1.5px solid #2C4A3E;
  box-shadow: 0 0 0 3px rgba(44, 74, 62, 0.12);
}

/* ---- Search button deep pine ---- */
.search-btn-premium {
  background: #2C4A3E;
  color: #FFFFFF;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.search-btn-premium:hover {
  background: #24402F;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(44, 74, 62, 0.30);
}
.search-btn-premium:active { transform: scale(0.97); }

/* ---- Decade checkbox labels ---- */
.decade-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
.decade-label span {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1E293B;
  transition: color 0.15s;
}
.decade-label:hover span { color: #2C4A3E; }

/* ---- Acc slider track fill ---- */
.acc-slider-track {
  position: relative;
  height: 6px;
  border-radius: 9999px;
  background: #E2E8EC;
  margin: 8px 0;
}

/* ---- Modal button base ---- */
.ry-modal-btn {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.ry-modal-btn:hover { opacity: 0.88; transform: scale(1.02); }