/* ── Card ── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  opacity: 0;
  transition: opacity var(--transition);
}
.card-link:hover { transform: translateY(-3px); border-color: #3a3d5e; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.card-link:hover::before { opacity: 1; }
.card-link.blue::before  { background: radial-gradient(circle at top left, rgba(var(--accent-rgb),.07), transparent 60%); }
.card-link.green::before { background: radial-gradient(circle at top left, rgba(76,175,80,.07), transparent 60%); }
.card-link.purple::before{ background: radial-gradient(circle at top left, rgba(124,77,255,.07), transparent 60%); }
.card-link.orange::before{ background: radial-gradient(circle at top left, rgba(255,152,0,.07), transparent 60%); }
.card-link.disabled { opacity: .5; pointer-events: none; }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.badge-live    { background: rgba(76,175,80,.2);   color: var(--signal-up); }
.badge-new     { background: rgba(var(--accent-rgb),.2); color: #7eaaff; }
.badge-dev     { background: rgba(255,152,0,.2);   color: #ffb74d; }
.badge-soon    { background: rgba(100,100,100,.2); color: var(--text-muted); }
.badge-breakout  { background: var(--signal-up-bg);      color: var(--signal-up); }
.badge-breakdown { background: var(--signal-dn-bg);      color: var(--signal-dn); }
.badge-above     { background: var(--signal-up-bg-soft); color: var(--signal-up-soft); }
.badge-below     { background: var(--signal-dn-bg-soft); color: var(--signal-dn-soft); }

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: none;
  font-size: .85rem;
  font-weight: 600;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #6b93ff; }
.btn-primary:disabled { background: var(--text-dim); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text-secondary); border-color: var(--text-dim); }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--bg-hover);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: .8rem;
  cursor: pointer;
}
.modal-close:hover { color: var(--text-primary); }

/* ── Spinner ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Signal sections (screener) ── */
.signal-section { margin-bottom: var(--space-md); }
.signal-section h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.signal-section.breakout  h3 { background: var(--signal-up-bg);      color: var(--signal-up); }
.signal-section.breakdown h3 { background: var(--signal-dn-bg);      color: var(--signal-dn); }
.signal-section.above     h3 { background: var(--signal-up-bg-soft); color: var(--signal-up-soft); }
.signal-section.below     h3 { background: var(--signal-dn-bg-soft); color: var(--signal-dn-soft); }

/* ── Stock item (screener list) ── */
.stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 3px;
  transition: background var(--transition);
}
.stock-item:hover { background: var(--bg-hover); }
.stock-item.selected { background: var(--bg-hover); outline: 1px solid var(--accent); }
.stock-symbol { font-weight: 700; font-size: .9rem; }
.stock-name   { font-size: .72rem; color: var(--text-muted); }
.stock-price  { text-align: right; font-size: .85rem; }
.stock-dist   { font-size: .72rem; }

/* ── Breadcrumb (drill-down 상세 페이지 공용) ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: .78rem;
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}
.breadcrumb-item {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb-item:hover { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text-secondary); font-weight: 600; }
.breadcrumb-sep { color: var(--text-dim); user-select: none; }

/* ── 52주 게이지 ── */
.gauge-track {
  position: relative;
  height: 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  margin: var(--space-sm) 0;
}
.gauge-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 3px;
  transition: width .4s ease;
}
.gauge-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  background: var(--text-white);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

/* ── Utility ── */
.pos { color: var(--signal-up); }
.neg { color: var(--signal-dn); }
.text-muted  { color: var(--text-muted); }
.text-dim    { color: var(--text-dim); }
.loading { text-align: center; color: var(--text-muted); padding: var(--space-xl); font-size: .9rem; }
.empty   { color: var(--text-dim); font-size: .8rem; padding: 4px 8px; }

/* ── Lang switch pill ── */
.lang-switch { display: flex; background: var(--bg-hover); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.lang-btn { padding: 4px 12px; border-radius: 5px; border: none; background: transparent; color: var(--text-dim); font-size: .78rem; font-weight: 700; cursor: pointer; transition: all var(--transition); }
.lang-btn.active { background: var(--accent); color: #fff; }