:root {
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F3F1EC;
  --surface-3: #E8E5DD;
  --ink: #1A1A17;
  --ink-2: #44443F;
  --ink-3: #75736B;
  --ink-4: #A8A59B;
  --border: rgba(26, 26, 23, 0.08);
  --border-strong: rgba(26, 26, 23, 0.16);
  --accent: #2D4A2B;
  --accent-ink: #1F3320;
  --accent-bg: #E8EDDF;
  --amber: #B5651D;
  --amber-bg: #F5E9D4;
  --amber-ink: #6B3D11;
  --green-bg: #E3ECC8;
  --green-ink: #2F4519;
  --ai-purple: #3D2D6B;
  --ai-purple-bg: #EAE4F5;
  --ai-purple-ink: #2A1F4A;
  --ai-bg: #F4F0FE;
  --ai-border: #E0D6F5;
  --salomon-red: #E2334C;
  --dark-ink: #F5F3EC;
}

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

html, body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.mono { font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--border);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand i { font-size: 22px; color: var(--accent); }
.brand em { font-style: italic; color: var(--accent); }
.nav-tabs { display: flex; gap: 4px; font-size: 13px; }
.nav-tab {
  padding: 6px 14px;
  border-radius: 100px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s;
}
.nav-tab.active { background: var(--ink); color: var(--bg); font-weight: 500; }
.nav-tab:not(.active):hover { background: var(--surface-2); }

.nav-right { display: flex; align-items: center; gap: 16px; color: var(--ink-2); }
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  color: var(--ink-3);
  min-width: 240px;
}
.search-bar i { font-size: 15px; }
.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 12px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

.container { max-width: 1100px; margin: 0 auto; padding: 28px 24px 80px; }

.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 20px;
}
.crumb i { font-size: 14px; }
.crumb span:last-child { color: var(--ink); }
.crumb .sep { color: var(--ink-4); }

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .main-grid { grid-template-columns: 1fr; gap: 24px; }
  .nav-tabs { display: none; }
  .search-bar { min-width: 100px; max-width: 160px; }
}

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery-main {
  aspect-ratio: 1;
  background: radial-gradient(circle at 30% 20%, #4A4843 0%, #1A1A17 70%);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-main svg { width: 92%; height: auto; }
.gallery-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; padding: 5px 10px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  color: white;
  border-radius: 100px;
  font-weight: 500;
}
.gallery-color {
  position: absolute; bottom: 14px; right: 14px;
  font-size: 11px; padding: 5px 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-radius: 100px;
  font-weight: 500;
}
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb:hover { transform: translateY(-1px); }
.thumb.active { box-shadow: 0 0 0 2px var(--accent); }
.thumb svg { width: 80%; height: auto; }
.thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-4);
}
.thumb.dark { background: radial-gradient(circle at 30% 20%, #4A4843 0%, #1A1A17 70%); }

/* Info panel */
.info { padding-top: 4px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.tag-brand { background: var(--ink); color: var(--bg); }
.tag-condition { background: var(--green-bg); color: var(--green-ink); }
.tag-verified { background: var(--surface-2); color: var(--ink-2); }
.tag-verified i { font-size: 11px; vertical-align: -1px; margin-right: 2px; }

h1.product-title {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 25px;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  font-weight: 800;
}
h1 em { font-style: italic; }
.product-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 4px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  letter-spacing: 0.02em;
}
.product-spec { font-size: 14px; color: var(--ink-2); margin-bottom: 24px; }
.price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.price {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.price-diff {
  font-size: 13px;
  color: var(--green-ink);
  font-weight: 500;
  background: var(--green-bg);
  padding: 3px 10px;
  border-radius: 100px;
}
.price-ref {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 20px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
/* Right column - sticky trade panel */
.info {
  position: sticky;
  top: 24px;
  align-self: start;
}
@media (max-width: 860px) {
  .info { position: static; }
}

/* Community section (under gallery) */
.community-section {
  margin-top: 24px;
}
.community-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}
.community-label {
  font-size: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 2px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.community-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.community-more {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.community-more:hover { color: var(--accent); }
.community-more i { font-size: 14px; }

.community-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.12s;
}
.community-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 8px;
}
.card-tag i { font-size: 11px; }
.tag-guide {
  background: var(--accent-bg);
  color: var(--accent-ink);
}
.tag-review {
  background: var(--green-bg);
  color: var(--green-ink);
  padding: 1px 7px;
  margin-left: 4px;
  margin-bottom: 0;
  font-size: 9px;
}
.tag-qa {
  background: #F4ECDB;
  color: #6B4513;
  padding: 1px 7px;
  margin-left: 4px;
  margin-bottom: 0;
  font-size: 9px;
}
.tag-deal {
  background: #EAE5DC;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.author-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-q { background: #6B4513; }
.author-info { flex: 1; min-width: 0; }
.author-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.author-meta {
  font-size: 10px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  margin-top: 1px;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.4;
}
.card-title.small { font-size: 13px; margin-bottom: 2px; }

.card-excerpt {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-excerpt.small {
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  -webkit-line-clamp: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.card-footer i { font-size: 12px; margin-right: 3px; vertical-align: -1px; }
.card-date { margin-left: auto; }

.card-deal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deal-info { flex: 1; min-width: 0; }
.deal-price { text-align: right; flex-shrink: 0; }
.price-main {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  color: var(--ink);
}
.price-meta {
  font-size: 10px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  margin-top: 2px;
}

/* Action button stack */
.action-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.btn-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: -0.01em;
}
.btn-buy:hover { background: var(--accent-ink); }
.btn-buy-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-buy-main i { font-size: 18px; }
.btn-buy-price {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
}
.btn-offer, .btn-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--surface);
  color: var(--ink);
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.btn-offer i, .btn-chat i { font-size: 15px; }
.btn-offer:hover, .btn-chat:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-fav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  transition: all 0.12s;
}
.btn-fav i {
  font-size: 16px;
  color: var(--ink-3);
}
.btn-fav:hover {
  border-color: #D14545;
}
.btn-fav:hover i {
  color: #D14545;
}
.fav-count { color: var(--ink-3); }

/* Safety protection panel */
.safety-panel {
  background: linear-gradient(135deg, #F0F4EA 0%, #E8EDDF 100%);
  border: 0.5px solid rgba(45, 74, 43, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.safety-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.safety-header i { font-size: 15px; }
.safety-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.safety-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.safety-list li i {
  font-size: 13px;
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}
.safety-list strong { color: var(--ink); font-weight: 500; }

/* Location / meetup map card */
.location-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.location-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.location-title-wrap i {
  font-size: 15px;
  color: var(--accent);
}
.location-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.location-distance {
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.map-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.map-svg {
  width: 100%;
  height: 200px;
  display: block;
}
.map-legend {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-size: 10px;
  color: var(--ink-2);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.legend-dot + .legend-dot { margin-left: 6px; }
.legend-seller { background: var(--accent); }
.legend-buyer { background: var(--ai-purple); }
.legend-mid { background: var(--amber); }
.map-legend span:not(.legend-dot) { margin-right: 4px; }

.meetup-suggest {
  border-top: 0.5px solid var(--border);
  padding-top: 12px;
}
.meetup-suggest-label {
  font-size: 12px;
  color: var(--ai-purple, #3D2D6B);
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.meetup-suggest-label i { font-size: 14px; }
.meetup-suggest-label em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.meetup-suggest-label .meetup-sub {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  width: 100%;
}
.meetup-spots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spot {
  padding: 11px 13px;
  background: var(--surface-2);
  border: 0.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.spot:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.spot.active {
  background: var(--ai-bg, #F4F0FE);
  border-color: var(--ai-purple, #3D2D6B);
}
.spot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.spot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.spot.active .spot-name {
  color: var(--ai-purple, #3D2D6B);
}
.spot-badge {
  font-size: 9.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-3);
  color: var(--ink-2);
}
.spot-badge i { font-size: 10px; }
.spot-badge.best { background: var(--ai-purple, #3D2D6B); color: white; }
.spot-badge.balance { background: var(--accent); color: white; }
.spot-meta {
  font-size: 10px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  margin-bottom: 7px;
}
.spot.active .spot-meta { color: var(--ink-2); }
.spot-why {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}
.spot-why i {
  font-size: 12px;
  color: var(--ai-purple, #3D2D6B);
  flex-shrink: 0;
  margin-top: 1px;
}
.spot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.spot-tag {
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--surface);
  border: 0.5px solid var(--border);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.spot-tag i { font-size: 10px; }
.spot-tag.safe { background: var(--green-bg, #E3ECC8); color: var(--green-ink, #2F4519); border-color: transparent; }
.meetup-disclaimer {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 10px;
  line-height: 1.5;
}
.seller-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.seller-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--border);
}
.seller-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seller-info { flex: 1; min-width: 0; }
.seller-name {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.seller-verified { color: var(--accent); font-size: 14px; }
.seller-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.btn-follow {
  background: var(--surface-2);
  border: 0.5px solid var(--border);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}
.btn-follow:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.seller-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding-top: 12px;
}
.seller-stat {
  text-align: center;
}
.stat-value {
  font-family: 'Instrument Serif', serif;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.stat-unit {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 1px;
}
.stat-label {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.btn-primary {
  display: none;
}
.btn-icon {
  display: none;
}
.seller-badge {
  display: none;
}

.divider { display: flex; align-items: center; gap: 14px; margin: 36px 0 18px; }
.divider-line { flex: 1; height: 0.5px; background: var(--border-strong); }
.divider-label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* AI Card */
.ai-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.ai-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--ai-purple) 0%, #5C4598 50%, var(--accent) 100%);
}
.ai-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ai-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ai-purple);
  color: var(--ai-purple-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ai-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.ai-title em { font-style: italic; color: var(--ai-purple); }
.ai-subtitle { font-size: 12px; color: var(--ink-3); }
.ai-badge {
  margin-left: auto;
  font-size: 10px; padding: 4px 10px;
  background: var(--ai-purple-bg);
  color: var(--ai-purple-ink);
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.ai-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 520px) { .ai-row { grid-template-columns: 1fr; } }

.metric-card {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 16px;
}
.metric-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex; justify-content: space-between;
}
.metric-label .info-hint {
  text-transform: none; letter-spacing: 0;
  font-size: 10px; color: var(--ink-3);
  font-weight: 400;
}
.metric-label .info-hint i { font-size: 11px; vertical-align: -1px; }

.level-bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: 100px;
  position: relative;
  margin-bottom: 12px;
}
.level-bar-fill {
  position: absolute; left: 0; top: 0;
  height: 8px; width: 50%;
  background: var(--amber);
  border-radius: 100px;
}
.level-bar-dot {
  position: absolute;
  left: calc(50% - 8px); top: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--amber);
}
.level-value {
  font-size: 17px; font-weight: 500;
  color: var(--amber-ink);
  margin-bottom: 6px;
}
.level-desc { font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.level-pills { display: flex; gap: 4px; margin-top: 10px; }
.level-pill {
  font-size: 10px; padding: 3px 8px;
  border-radius: 100px;
  color: var(--ink-4);
  background: var(--surface-3);
}
.level-pill.on { background: var(--amber-bg); color: var(--amber-ink); font-weight: 500; }

.price-display {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  margin-bottom: 2px;
}
.price-source {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.price-bar-wrap {
  height: 6px;
  background: var(--surface-3);
  border-radius: 100px;
  position: relative;
  margin-bottom: 6px;
}
.price-bar-fill {
  position: absolute; left: 0;
  height: 6px; width: 28%;
  background: var(--accent);
  border-radius: 100px;
}
.price-bar-marker {
  position: absolute;
  left: 28%; top: -3px;
  width: 2px; height: 12px;
  background: var(--green-ink);
}
.price-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

.section-label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
@media (max-width: 520px) { .specs-grid { grid-template-columns: repeat(2, 1fr); } }
.spec { padding: 14px; background: var(--surface-2); border-radius: 12px; }
.spec-label {
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.spec-label i { font-size: 13px; }
.spec-value { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }

.activities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.activity {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--green-bg);
  color: var(--green-ink);
  font-weight: 500;
}
.activity.no {
  background: var(--surface-2);
  color: var(--ink-4);
  text-decoration: line-through;
  font-weight: 400;
}

.ai-quote {
  background: var(--ai-purple-bg);
  border-radius: 14px;
  padding: 16px;
}
.ai-quote-label {
  font-size: 11px;
  color: var(--ai-purple);
  font-weight: 500;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.ai-quote-label i { font-size: 14px; }
.ai-quote-text {
  font-size: 13px;
  color: var(--ai-purple-ink);
  line-height: 1.7;
}
.ai-quote-text strong { font-weight: 500; }

.ai-disclaimer {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 14px;
  text-align: center;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

/* AI comparison recommendations */
.ai-reco {
  background: var(--ai-bg, #F4F0FE);
  border: 0.5px solid var(--ai-border, #E0D6F5);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
.ai-reco-head { margin-bottom: 16px; }
.ai-reco-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ai-purple, #3D2D6B);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ai-reco-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.ai-reco-title i { font-size: 17px; }
.ai-reco-sub { font-size: 12px; color: var(--ink-3); }

.reco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) { .reco-grid { grid-template-columns: 1fr; } }

.reco-card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.reco-card:hover { transform: translateY(-2px); border-color: var(--ai-purple, #3D2D6B); }

.reco-thumb {
  aspect-ratio: 16/10;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.reco-thumb svg { width: 80%; }
.thumb-dark { background: radial-gradient(circle at 30% 20%, #4A4843 0%, #1A1A17 70%); }
.thumb-green { background: linear-gradient(135deg, #EAF3DE 0%, #C0DD97 100%); }
.thumb-tan { background: linear-gradient(135deg, #F5EBD9 0%, #D9B891 100%); }
.reco-price-tag {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: 'Instrument Serif', serif;
  font-size: 15px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  padding: 2px 9px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.reco-body { padding: 12px 13px 13px; }
.reco-brand {
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-bottom: 3px;
}
.reco-name {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 9px;
  line-height: 1.35;
}
.reco-compare {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}
.cmp-chip {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cmp-chip i { font-size: 11px; }
.cmp-chip.down { background: var(--green-bg, #E3ECC8); color: var(--green-ink, #2F4519); }
.cmp-chip.up { background: var(--amber-bg, #F5E9D4); color: var(--amber-ink, #6B3D11); }
.cmp-chip.same { background: var(--accent-bg, #E8EDDF); color: var(--accent-ink, #1F3320); }
.cmp-chip.diff { background: #ECE7F6; color: var(--ai-purple, #3D2D6B); }
.reco-why {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex;
  gap: 5px;
  padding-top: 9px;
  border-top: 0.5px solid var(--border);
}
.reco-why i {
  font-size: 13px;
  color: var(--ai-purple, #3D2D6B);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Seller note */
.seller-note {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 12px;
}
.note-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.note-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500;
}
.note-info { flex: 1; }
.note-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.note-by { font-size: 11px; color: var(--ink-3); }
.note-optional {
  font-size: 10px; padding: 3px 9px;
  background: var(--surface-2);
  color: var(--ink-3);
  border-radius: 100px;
  letter-spacing: 0.02em;
}
.note-body { font-size: 14px; line-height: 1.75; color: var(--ink); }
.note-body strong { font-weight: 500; }
.note-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--border);
  font-size: 11px;
  color: var(--ink-3);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.note-meta i { font-size: 13px; vertical-align: -2px; margin-right: 4px; }

/* Chart card */
.chart-card {
  background: linear-gradient(135deg, #1A1A17 0%, #2C2C2A 100%);
  color: var(--dark-ink);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.chart-card::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(45, 74, 43, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.chart-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px; position: relative;
}
.chart-label {
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.chart-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.chart-title em { font-style: italic; }
.chart-badge {
  font-size: 11px; padding: 5px 12px;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: var(--dark-ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
/* Chart plot with axes */
.chart-plot {
  display: flex;
  gap: 10px;
  position: relative;
}
.y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  padding: 2px 0 14px;
  flex-shrink: 0;
  width: 30px;
  text-align: right;
}
.chart-svg { flex: 1; width: 100%; height: 200px; }
.chart-svg .this-label { fill: #5DCAA5; font-size: 12px; font-family: 'Instrument Serif', serif; font-style: italic; }
.chart-svg .this-stem { stroke: rgba(93,202,165,0.4); stroke-width: 1; stroke-dasharray: 2,3; }
.chart-markers {
  position: absolute;
  left: 40px;   /* y-axis(30) + gap(10) */
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.chart-markers .mk {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #1A1A17;
  border: 2px solid #5DCAA5;
  transform: translate(-50%, -50%);
}
.chart-markers .mk.this {
  width: 14px; height: 14px;
  background: #5DCAA5;
  border: none;
  box-shadow: 0 0 0 5px rgba(93,202,165,0.25);
}
.chart-markers .mk.high {
  width: 12px; height: 12px;
  background: #E8B04B;
  border-color: #E8B04B;
  box-shadow: 0 0 0 4px rgba(232,176,75,0.22);
}
.chart-markers .mk.low {
  width: 12px; height: 12px;
  background: #6FB3E0;
  border-color: #6FB3E0;
  box-shadow: 0 0 0 4px rgba(111,179,224,0.22);
}
.chart-markers .mk-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 10.5px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 500;
}
.chart-markers .high-tag { background: rgba(232,176,75,0.18); color: #E8B04B; }
.chart-markers .low-tag { background: rgba(111,179,224,0.18); color: #6FB3E0; }
.chart-disclaimer {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  color: var(--ink-4);
  line-height: 1.5;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
.chart-disclaimer i { font-size: 14px; flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,0.4); }
.chart-disclaimer strong { color: rgba(255,255,255,0.7); font-weight: 600; }
.chart-markers .mk-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.chart-markers .this-label-html {
  color: #5DCAA5;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 13px;
}
.chart-markers .avg-label-html {
  transform: translate(0, -50%);
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  background: rgba(26,26,23,0.7);
  padding: 1px 5px;
  border-radius: 4px;
}
.chart-svg .grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.chart-svg .avg-line { stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-dasharray: 4,4; }
.chart-svg .avg-tag { fill: rgba(255,255,255,0.55); font-size: 11px; font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif; }
.chart-svg .area { fill: url(#chartGrad); stroke: none; }
.chart-svg .trend { fill: none; stroke: #5DCAA5; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .pts circle { fill: #1A1A17; stroke: #5DCAA5; stroke-width: 2; }
.chart-svg .this-dot { fill: #5DCAA5; }
.chart-svg .this-ring { fill: none; stroke: #5DCAA5; stroke-width: 1.5; opacity: 0.5; }

.x-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  padding-left: 40px;
  margin-top: 6px;
  margin-bottom: 16px;
}
.chart-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(93, 202, 165, 0.12);
  border: 0.5px solid rgba(93, 202, 165, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--dark-ink);
  margin: 14px 0 4px;
}
.chart-callout strong { font-family: 'Instrument Serif', serif; font-size: 15px; font-weight: 400; }
.callout-dot { width: 9px; height: 9px; border-radius: 50%; background: #5DCAA5; flex-shrink: 0; }
.callout-up { color: #5DCAA5; font-weight: 500; }
.chart-svg-OLD { width: 100%; height: 80px; margin-bottom: 18px; }
.chart-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative;
}
@media (max-width: 520px) { .chart-stats { grid-template-columns: repeat(2, 1fr); } }
.chart-stat-label {
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.chart-stat-value {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.footer {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 0.5px solid var(--border);
  text-align: center;
  font-size: 12px;
  color: var(--ink-4);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.footer em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.main-grid, .ai-card, .seller-note, .chart-card {
  animation: fadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ai-card { animation-delay: 0.05s; }
.seller-note { animation-delay: 0.1s; }
.chart-card { animation-delay: 0.15s; }