/* Sool - Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');

:root {
  --charcoal-900: #2D2926;
  --charcoal-700: #4A4543;
  --charcoal-500: #6B6562;
  --cream-50: #FEFCF9;
  --cream-100: #F7F3EE;
  --cream-200: #EDE5DA;
  --dancheong: #C4463A;
  --dancheong-dark: #A63830;
  --celadon: #7BA68C;
  --onggi: #A67C52;
  --buncheong: #9B9590;
  --sweet: #E8A87C;
  --dry: #D4C5A9;
  --fruity: #C97B84;
  --earthy: #8B7355;
  --acidic: #6B8CAE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--cream-100);
  color: var(--charcoal-900);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  padding-bottom: 80px;
  background: var(--cream-100);
}

.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-korean { font-family: 'Noto Sans KR', sans-serif; }

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

/* Tab bar */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--cream-50);
  border-top: 1px solid var(--cream-200);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 64px;
  padding: 8px 24px 12px;
  z-index: 50;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--buncheong);
  transition: color 0.15s;
}

.tab-item.active { color: var(--dancheong); }

.tab-item svg { width: 24px; height: 24px; }

/* Top nav */
.top-nav {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(247, 243, 238, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  z-index: 40;
}

.top-nav .back-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--charcoal-900);
}

.top-nav .nav-title {
  font-size: 17px; font-weight: 600; text-align: center;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.top-nav .nav-action {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}

/* Page transition */
.page-content {
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Chip */
.chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--cream-200);
  background: var(--cream-50);
  color: var(--charcoal-500);
  white-space: nowrap;
}

.chip.active {
  background: var(--charcoal-900);
  color: var(--cream-50);
  border-color: var(--charcoal-900);
}

/* Primary button */
.btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--dancheong);
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 3px rgba(45,41,38,0.06);
  text-decoration: none;
  display: block;
}

.btn-primary:active { background: var(--dancheong-dark); }

.btn-secondary {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--cream-100);
  color: var(--charcoal-900);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--cream-200);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: block;
}

.btn-secondary:active { background: var(--cream-200); }

/* Card base */
.card {
  background: var(--cream-50);
  border-radius: 16px;
  border: 1px solid var(--cream-200);
  box-shadow: 0 1px 3px rgba(45,41,38,0.06);
  transition: box-shadow 0.15s;
}

.card:active { box-shadow: 0 4px 12px rgba(45,41,38,0.08); }

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
}

.section-header a {
  font-size: 13px;
  font-weight: 500;
  color: var(--dancheong);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Placeholder images */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: rgba(45,41,38,0.3);
}

/* Taste tag */
.taste-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* ABV badge colors */
.abv-light { background: rgba(34,197,94,0.1); color: #16a34a; }
.abv-medium { background: rgba(245,158,11,0.1); color: #d97706; }
.abv-strong { background: rgba(249,115,22,0.1); color: #ea580c; }
.abv-very-strong { background: rgba(239,68,68,0.1); color: #dc2626; }

/* English badge */
.english-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(123,166,140,0.1);
  color: #7BA68C;
}

/* Responsive */
@media (min-width: 640px) {
  .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (min-width: 768px) {
  body { max-width: 768px; margin: 0 auto; }
}

/* Full screen overlay */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream-50);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.fullscreen-overlay .close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--charcoal-500);
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--cream-200);
  border-top-color: var(--dancheong);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Finder progress dots */
.progress-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.progress-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cream-200);
  transition: all 0.25s;
}

.progress-dot.active {
  background: var(--dancheong);
  transform: scale(1.2);
}

.progress-dot.done {
  background: var(--celadon);
}