/* ── 차트 구성 안내 박스 ──────────────────────────────────────────────────── */
.chart-info-box {
  margin: 0 20px 4px;
  background: #f8faff;
  border: 1px solid var(--violet-100);
  border-radius: 12px;
  padding: 12px 14px;
}
.chart-info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--violet-700);
  margin-bottom: 10px;
}
.chart-info-header svg { color: var(--violet-500); flex-shrink: 0; }
.chart-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 480px) {
  .chart-info-grid { grid-template-columns: 1fr; }
}
.chart-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chart-info-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-400);
}
.chart-info-val {
  font-size: .7rem;
  color: var(--slate-700);
  font-weight: 500;
}
.chart-info-warn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  border-radius: 7px;
  padding: 5px 9px;
}
.chart-info-warn svg { flex-shrink: 0; color: var(--amber-600); }

/* ── 투자 면책 고지 ──────────────────────────────────────────────────────── */
.symbol-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 20px 12px;
}
.symbol-input-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--slate-600, #475569);
  align-self: flex-start;
  margin-left: calc(50% - 140px);
}
.symbol-input-required {
  color: #ef4444;
  margin-left: 2px;
}
.symbol-input {
  width: 100%;
  max-width: 280px;
  padding: 8px 12px;
  border: 1.5px solid var(--slate-300, #cbd5e1);
  border-radius: 8px;
  font-size: .85rem;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-700, #334155);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.symbol-input:focus {
  border-color: var(--blue-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.symbol-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
.symbol-input::placeholder {
  text-transform: none;
  color: var(--slate-400, #94a3b8);
  font-family: inherit;
  letter-spacing: 0;
  font-size: .78rem;
}
.symbol-input-hint {
  font-size: .6rem;
  color: var(--slate-400, #94a3b8);
  text-align: center;
  word-break: keep-all;
}

.chart-disclaimer {
  font-size: .6rem;
  color: var(--slate-400);
  text-align: center;
  line-height: 1.6;
  padding: 4px 20px 12px;
  word-break: keep-all;
}

/* ── Upload card ──────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-header-title { font-size: .875rem; font-weight: 600; color: var(--slate-800); }
.card-header-sub   { font-size: .7rem;   color: var(--slate-400); margin-top: 2px; }
.btn-reset {
  font-size: .7rem;
  color: var(--slate-400);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: inherit;
  display: none; /* shown via JS */
  transition: background .15s, color .15s;
}
.btn-reset:hover { background: var(--slate-100); color: var(--slate-600); }

/* Drop zone */
.dropzone-wrap { padding: 20px 20px 16px; }
.dropzone {
  position: relative;
  border-radius: 14px;
  border: 2px dashed var(--slate-200);
  background: var(--slate-100);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 3:4 aspect ratio — taller than wide */
  aspect-ratio: 3 / 4;
  transition: border-color .2s, background .2s, transform .2s;
}
.dropzone:hover {
  border-color: var(--violet-400);
  background: #3b82f620;
}
.dropzone.drag-over {
  border-color: var(--violet-500);
  background: var(--violet-50);
  transform: scale(1.01);
}
.dropzone.has-image {
  border-color: var(--slate-200);
  background: var(--white);
}
.dropzone-chart-bg {
  position: absolute;
  inset: 0;
  opacity: .55;
  pointer-events: none;
}
.dropzone-chart-bg svg { width: 100%; height: 100%; }
.dropzone-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0 24px;
}
.dropzone-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.dropzone.drag-over .dropzone-icon {
  background: var(--violet-100);
  transform: scale(1.1);
}
.dropzone-icon svg { width: 24px; height: 24px; color: var(--slate-400); transition: color .2s; }
.dropzone.drag-over .dropzone-icon svg { color: var(--violet-500); }
.dropzone-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--slate-700);
}
.dropzone-sub {
  font-size: .7rem;
  color: var(--slate-400);
  margin-top: 2px;
}
.dropzone-exts {
  display: flex;
  gap: 6px;
}
.dropzone-ext {
  font-size: .6rem;
  font-family: monospace;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  color: var(--slate-400);
  box-shadow: var(--shadow-sm);
}
.dropzone-preview {
  width: 100%; height: 100%;
  object-fit: contain;
  display: none;
}

/* ── Plan selection ───────────────────────────────────────────────────────── */
.plans-wrap { padding: 0 20px 16px; }
.plans-label {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate-400);
  margin-bottom: 8px;
  display: block;
}
.plan-list { display: flex; flex-direction: column; gap: 8px; }
.plan-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--slate-200);
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.plan-btn:hover  { transform: scale(1.004); }
.plan-btn:active { transform: scale(0.998); }

/* Free */
.plan-btn[data-plan="free"].active  { border-color: var(--slate-400); background: var(--slate-100); box-shadow: var(--shadow-md); }
/* Paid */
.plan-btn[data-plan="paid"]         { border-color: var(--violet-100); }
.plan-btn[data-plan="paid"].active  { border-color: var(--violet-400); background: var(--violet-50); box-shadow: 0 4px 12px rgba(139,92,246,.12); }
/* Premium */
.plan-btn[data-plan="premium"]      { border-color: var(--amber-100); }
.plan-btn[data-plan="premium"].active { border-color: var(--amber-400); background: var(--amber-50); box-shadow: 0 4px 12px rgba(245,158,11,.12); }

.plan-info { display: flex; flex-direction: column; gap: 3px; }
.plan-name-wrap { display: flex; align-items: center; gap: 7px; }
.plan-name { font-size: .875rem; font-weight: 600; color: var(--slate-700); }
.plan-btn[data-plan="paid"]    .plan-name,
.plan-btn[data-plan="premium"] .plan-name { color: var(--slate-800); }
.plan-premium-tag {
  font-size: .58rem;
  font-weight: 800;
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .04em;
}
.plan-desc { font-size: .7rem; color: var(--slate-400); }

.plan-right { display: flex; align-items: center; gap: 10px; }
.plan-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.plan-btn[data-plan="free"]    .plan-badge { background: var(--slate-100); color: var(--slate-600);    border-color: var(--slate-200); }
.plan-btn[data-plan="paid"]    .plan-badge { background: var(--violet-100); color: var(--violet-700); border-color: var(--violet-200); }
.plan-btn[data-plan="premium"] .plan-badge { background: var(--amber-100);  color: var(--amber-700);  border-color: var(--amber-200); }

.plan-radio {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--slate-300);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.plan-radio-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white);
  display: none;
}
.plan-btn[data-plan="free"].active    .plan-radio { border-color: var(--slate-500); background: var(--slate-500); }
.plan-btn[data-plan="paid"].active    .plan-radio { border-color: var(--violet-500); background: var(--violet-500); }
.plan-btn[data-plan="premium"].active .plan-radio { border-color: var(--amber-500); background: var(--amber-500); }
.plan-btn.active .plan-radio-dot { display: block; }

/* ── Summary box ──────────────────────────────────────────────────────────── */
.summary-wrap { padding: 0 20px 16px; }
.summary-box {
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--slate-100);
  overflow: hidden;
}
.summary-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--border-light);
}
.summary-title.free    { color: var(--slate-500); }
.summary-title.paid    { color: var(--violet-600); background: var(--violet-50); }
.summary-title.premium { color: var(--amber-600);  background: var(--amber-50); }

/* 플랜 설명 문단 */
.summary-desc { padding: 10px 16px 0; }
.summary-description {
  font-size: .72rem;
  color: var(--slate-600);
  line-height: 1.65;
  word-break: keep-all;
}

.summary-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 14px;
}
.summary-row  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.summary-key  { display: flex; align-items: center; gap: 6px; }
.summary-dot  {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
}
.summary-dot.free    { background: var(--slate-400); }
.summary-dot.paid    { background: var(--violet-500); }
.summary-dot.premium { background: var(--amber-500); }
.summary-key span  { font-size: .7rem; color: var(--slate-400); }
.summary-val       { font-size: .7rem; color: var(--slate-600); text-align: right; font-weight: 500; }

/* ── CTA button ───────────────────────────────────────────────────────────── */
.cta-wrap { padding: 0 20px 24px; }
.btn-cta {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, filter .15s;
}
.btn-cta:hover  { filter: brightness(1.06); transform: scale(1.005); }
.btn-cta:active { transform: scale(0.998); }
.btn-cta.cta-free       { background: var(--slate-200); color: var(--slate-600); border: 1px solid var(--slate-300); }
.btn-cta.cta-paid       { background: var(--violet-600); color: #ffffff;    box-shadow: var(--shadow-violet); }
.btn-cta.cta-premium    { background: linear-gradient(135deg, #f0c040, #f59e0b); color: #0e0d12; box-shadow: var(--shadow-amber); }
/* 비로그인 + 유료 플랜 선택 시 */
.btn-cta.cta-login-gate {
  background: transparent;
  color: var(--violet-600);
  border: 2px dashed var(--violet-400);
  letter-spacing: .01em;
}

.cta-note {
  text-align: center;
  font-size: .6rem;
  color: var(--slate-400);
  margin-top: 8px;
  display: none;
}

/* ── Sample results section ───────────────────────────────────────────────── */
.results-section { margin-top: 24px; }
.section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.section-divider-line { flex: 1; height: 1px; background: var(--border-light); }
.section-divider-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--slate-400);
  padding: 0 8px;
  white-space: nowrap;
}
.section-sub {
  font-size: .7rem;
  color: var(--slate-400);
  text-align: center;
  margin-bottom: 14px;
}

.pattern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pattern-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.pattern-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pattern-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 4px;
}
.pattern-name { font-size: .7rem; font-weight: 700; }
.pattern-name.bullish { color: var(--emerald-600); }
.pattern-name.bearish { color: var(--red-500); }
.pattern-pct {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
}
.pattern-pct.bullish { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.pattern-pct.bearish { background: var(--red-50);       color: var(--red-500);     border-color: var(--red-100); }
.pattern-chart { padding: 4px 8px; height: 90px; }
.pattern-chart svg { width: 100%; height: 100%; }
.pattern-legend {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 2px 8px 10px;
}
.pattern-legend span { font-size: .55rem; font-family: monospace; }
.leg-sl    { color: var(--red-400); }
.leg-entry { color: var(--amber-500); }
.leg-tp    { color: var(--emerald-600); }

/* Locked teaser row */
.teaser-card {
  border-radius: 14px;
  border: 1px solid var(--violet-200);
  background: var(--violet-50);
  overflow: hidden;
  position: relative;
}
.teaser-inner {
  padding: 12px 16px;
  display: flex;
  gap: 12px;
}
.teaser-col { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.teaser-bar {
  height: 10px;
  border-radius: 6px;
  background: var(--slate-200);
  animation: pulse 1.6s ease-in-out infinite;
}
.teaser-bar.w-3-4 { width: 75%; }
.teaser-bar.w-1-2 { width: 50%; height: 8px; background: var(--slate-100); }
.teaser-bar.w-2-3 { width: 66%; }
.teaser-bar.w-1-3 { width: 33%; height: 8px; background: var(--slate-100); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
.teaser-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.teaser-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--violet-200);
  box-shadow: var(--shadow-md);
  border-radius: 999px;
  padding: 6px 14px;
}
.teaser-badge svg { width: 14px; height: 14px; color: var(--violet-500); flex-shrink: 0; }
.teaser-badge span { font-size: .7rem; font-weight: 600; color: var(--violet-600); }

/* ── Responsive (home) ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pattern-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { border-radius: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DYNAMIC RESULTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Loading ──────────────────────────────────────────────────────────────── */
.results-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
}
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--slate-200);
  border-top-color: var(--violet-500);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-size: .9rem;
  font-weight: 600;
  color: var(--slate-700);
  min-height: 1.5em;
  transition: opacity .3s ease;
  text-align: center;
  padding: 0 12px;
}
.loading-text.fade-out { opacity: 0; }
.loading-sub  { font-size: .7rem; color: var(--slate-400); }

/* ── 분석 로딩 오버레이 ────────────────────────────────────────────────────── */
.analysis-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 30, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 8000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.analysis-overlay.active {
  display: flex;
}
.analysis-modal {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 420px;
  padding: 44px 36px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 0 28px 64px rgba(0,0,0,0.38);
  text-align: center;
}
.analysis-spinner-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.analysis-spinner {
  width: 36px;
  height: 36px;
  border: 3.5px solid #c4b5fd;
  border-top-color: var(--violet-500);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.analysis-msg {
  font-size: 1rem;
  font-weight: 700;
  color: var(--slate-800);
  line-height: 1.5;
  min-height: 3em;
  transition: opacity .3s ease;
  padding: 0 4px;
}
.analysis-msg.fade-out { opacity: 0; }
.analysis-sub {
  font-size: .72rem;
  color: var(--slate-400);
  margin-top: -8px;
}

/* ── Error box ────────────────────────────────────────────────────────────── */
.result-error-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--red-100);
  background: var(--red-50);
}
.result-error-box span { font-size: 1rem; color: var(--red-500); flex-shrink: 0; margin-top: 1px; }
.result-error-box p    { font-size: .8rem; color: var(--red-500); line-height: 1.5; }

/* ── Free limit message ───────────────────────────────────────────────────── */
.free-limit-box {
  text-align: center;
  padding: 36px 24px;
  border-radius: 16px;
  border: 1.5px dashed var(--violet-200);
  background: var(--violet-50);
}
.free-limit-icon { font-size: 2.4rem; margin-bottom: 14px; }
.free-limit-title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--slate-800);
  margin-bottom: 8px;
}
.free-limit-body {
  font-size: .82rem;
  color: var(--slate-500);
  margin-bottom: 22px;
  line-height: 1.6;
}
.free-limit-cta {
  display: inline-block;
  background: var(--violet-600);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s, transform .1s;
}
.free-limit-cta:hover { filter: brightness(1.1); transform: scale(1.02); }

/* ── Result card ──────────────────────────────────────────────────────────── */
.result-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.result-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.trend-badge {
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid;
}
.trend-badge.trend-bullish { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.trend-badge.trend-bearish { background: var(--red-50);       color: var(--red-500);     border-color: var(--red-100); }
.trend-badge.trend-neutral { background: var(--slate-100);    color: var(--slate-600);   border-color: var(--slate-200); }

.result-meta-chip {
  font-size: .7rem;
  font-family: monospace;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--slate-100);
  color: var(--slate-500);
  border: 1px solid var(--slate-200);
}

.readability-score {
  font-size: .8rem;
  font-weight: 700;
  color: var(--slate-700);
  white-space: nowrap;
}
.readability-score span { font-size: .65rem; color: var(--slate-400); font-weight: 400; }

/* Trend reason */
.trend-reason {
  font-size: .78rem;
  color: var(--slate-600);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--slate-100);
  border-radius: 10px;
  border-left: 3px solid var(--slate-300);
}

.conf-chip {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.conf-chip.conf-high   { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.conf-chip.conf-medium { background: var(--amber-50);    color: var(--amber-700);   border-color: var(--amber-200); }
.conf-chip.conf-low    { background: var(--slate-100);   color: var(--slate-500);   border-color: var(--slate-200); }

/* Indicator chips */
.indicator-row { display: flex; flex-wrap: wrap; gap: 8px; }
.indicator-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.chip-label { font-size: .65rem; font-weight: 700; color: var(--slate-500); font-family: monospace; }
.chip-value { font-size: .7rem;  font-weight: 600; color: var(--slate-700); }
.chip-signal {
  font-size: .65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
}
.chip-bullish    { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.chip-bearish    { background: var(--red-50);       color: var(--red-500);     border-color: var(--red-100); }
.chip-neutral    { background: var(--slate-100);    color: var(--slate-500);   border-color: var(--slate-200); }
/* 감지 안됨 상태 */
.chip-undetected { background: transparent; color: var(--slate-300); border-color: var(--slate-200); font-style: italic; letter-spacing: .01em; }
.chip-undetected-wrap { opacity: .7; }

/* Levels */
.levels-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.levels-col { display: flex; flex-direction: column; gap: 6px; }
.levels-title {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 4px;
  border-bottom: 2px solid;
}
.levels-support    { color: var(--emerald-600); border-color: var(--emerald-100); }
.levels-resistance { color: var(--red-500);     border-color: var(--red-100); }
.level-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--slate-600);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
}
.level-strength {
  font-size: .6rem;
  font-family: monospace;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-400);
}
.strength-major { background: var(--violet-100); color: var(--violet-700); }
.strength-medium { background: var(--amber-50); color: var(--amber-700); }

/* Probability */
.prob-section { display: flex; flex-direction: column; gap: 8px; }
.prob-header { display: flex; align-items: center; justify-content: space-between; }
.prob-title      { font-size: .7rem; font-weight: 700; color: var(--slate-700); }
.prob-confidence { font-size: .65rem; color: var(--slate-400); }
.prob-bar-wrap {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  font-size: .65rem;
  font-weight: 600;
  height: 28px;
}
.prob-bar-up {
  display: flex; align-items: center; justify-content: center;
  background: var(--emerald-600); color: var(--white);
  min-width: 40px;
  transition: width .4s ease;
  white-space: nowrap;
  padding: 0 6px;
  font-size: .6rem;
}
.prob-bar-down {
  display: flex; align-items: center; justify-content: center;
  background: var(--slate-400); color: var(--white);
  min-width: 40px;
  transition: width .4s ease;
  white-space: nowrap;
  padding: 0 6px;
  font-size: .6rem;
}
.prob-trigger { font-size: .7rem; color: var(--slate-500); font-style: italic; }

/* Trade plan (premium) */
.trade-plan-section { display: flex; flex-direction: column; gap: 10px; }
.mini-title {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-500);
  margin-bottom: 4px;
}
.warn-text { color: var(--red-500) !important; }
.bull-text { color: var(--emerald-600); }
.bear-text { color: var(--red-500); }

.trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trade-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--slate-100);
}
.trade-label { font-size: .6rem; color: var(--slate-400); font-weight: 600; text-transform: uppercase; }
.trade-val   { font-size: .75rem; color: var(--slate-700); font-weight: 600; }

.rr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--violet-50);
  border: 1px solid var(--violet-200);
}
.rr-item    { font-size: .7rem; color: var(--slate-600); }
.rr-item strong { color: var(--violet-700); }
.rr-divider { color: var(--slate-300); font-size: .7rem; }

.attract-chip {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.attract-chip.attract-high   { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.attract-chip.attract-medium { background: var(--amber-50);    color: var(--amber-700);   border-color: var(--amber-200); }
.attract-chip.attract-low    { background: var(--red-50);       color: var(--red-500);     border-color: var(--red-100); }

/* Ichimoku (premium) */
.ichimoku-section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ichi-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Invalidations (premium) */
.invalidation-section { display: flex; flex-direction: column; gap: 8px; }
.inv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inv-list li {
  font-size: .75rem;
  color: var(--slate-600);
  padding: 4px 8px 4px 12px;
  border-left: 2px solid var(--slate-300);
  line-height: 1.5;
}

/* Verdict */
.verdict-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--slate-100);
}
.verdict-bias {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  align-self: flex-start;
}
.verdict-bias.verdict-bullish { background: var(--emerald-50);  color: var(--emerald-600); border-color: var(--emerald-100); }
.verdict-bias.verdict-bearish { background: var(--red-50);       color: var(--red-500);     border-color: var(--red-100); }
.verdict-bias.verdict-neutral { background: var(--slate-100);    color: var(--slate-600);   border-color: var(--slate-200); }
.verdict-summary { font-size: .8rem; color: var(--slate-700); line-height: 1.6; font-weight: 600; }
.verdict-final   { font-size: .75rem; color: var(--slate-600); line-height: 1.6; }

/* ── 종합 분석 요약 (확률·트레이드플랜 사이) ─────────────────────────────── */
.analysis-summary {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--violet-50) 0%, #dbeafe 100%);
  border: 1px solid var(--violet-100);
  border-radius: 12px;
}
.analysis-summary-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--violet-600);
  margin-bottom: 6px;
}
.analysis-summary-text {
  font-size: .78rem;
  color: var(--slate-700);
  line-height: 1.7;
  word-break: keep-all;
}

/* 프리미엄 mini 태그 (트레이드 플랜·일목 제목 옆) */
.premium-tag-mini {
  font-size: .58rem;
  font-weight: 700;
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: .04em;
  margin-left: 6px;
}

/* Re-analyze button */
.btn-reanalyze {
  margin-top: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--slate-200);
  background: var(--white);
  color: var(--slate-600);
  font-size: .8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-reanalyze:hover { background: var(--slate-100); border-color: var(--slate-300); }

/* ── 의사결정 지원 섹션 ──────────────────────────────────────────────────── */
.decision-support-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f8faff 60%, #eff6ff 100%);
  border: 1px solid var(--emerald-100);
  border-radius: 14px;
}
.ds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-title {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--emerald-600);
}

/* 액션 시그널 */
.ds-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .85rem;
  align-self: flex-start;
}
.ds-action-icon { font-size: 1rem; }
.ds-action.action-bullish { background: var(--emerald-50); color: var(--emerald-600); border: 1px solid var(--emerald-100); }
.ds-action.action-hold    { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ds-action.action-wait    { background: var(--violet-50); color: var(--violet-700); border: 1px solid var(--violet-100); }
.ds-action.action-profit  { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-200); }
.ds-action.action-stop    { background: var(--red-50); color: var(--red-500); border: 1px solid var(--red-100); }
.ds-action.action-neutral { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200); }

/* 시나리오 */
.ds-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) {
  .ds-scenarios { grid-template-columns: 1fr; }
}
.ds-scenario {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--border-light);
}
.ds-scenario-tag {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
}
.bull-tag { background: var(--emerald-50); color: var(--emerald-600); }
.bear-tag { background: var(--red-50); color: var(--red-500); }
.ds-scenario-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: .72rem;
  line-height: 1.5;
}
.ds-row-label {
  font-weight: 700;
  color: var(--slate-400);
  flex-shrink: 0;
  min-width: 40px;
}
.ds-row-val {
  color: var(--slate-700);
  word-break: keep-all;
}

/* 핵심 관찰 포인트 */
.ds-keywatch {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--white);
  border: 1px dashed var(--violet-200);
  border-radius: 10px;
}
.ds-keywatch-icon {
  color: var(--violet-500);
  font-size: .9rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-keywatch-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-keywatch-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--violet-600);
}
.ds-keywatch-text {
  font-size: .75rem;
  color: var(--slate-700);
  line-height: 1.6;
  font-weight: 500;
}


/* ── 데스크톱: 드롭존 고정 높이 (aspect-ratio 해제) ─────────────────────────
   center-col이 광고 사이 공간을 채우도록 max-width 제거 시
   aspect-ratio:3/4 그대로 두면 660px 폭 → 880px 높이 발생.
   900px 이상에서는 고정 높이를 사용해 차트 업로드 박스가 합리적인 크기 유지. */
@media (min-width: 900px) {
  .dropzone {
    aspect-ratio: unset;
    height: 360px;
  }
}

@media (max-width: 640px) {
  .chart-info-box {
    margin: 0 16px 4px;
    padding: 12px;
  }

  .dropzone-wrap,
  .plans-wrap,
  .summary-wrap,
  .cta-wrap,
  .symbol-input-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .dropzone {
    aspect-ratio: 4 / 5;
  }
  .dropzone-content {
    gap: 10px;
    padding: 0 18px;
  }
  .dropzone-label { font-size: .82rem; }
  .dropzone-sub { font-size: .68rem; }
  .dropzone-exts { flex-wrap: wrap; justify-content: center; }

  .symbol-input-label {
    width: 100%;
    max-width: 280px;
    margin-left: 0;
  }
  .symbol-input-hint,
  .chart-disclaimer {
    font-size: .62rem;
  }

  .plan-btn {
    padding: 12px 14px;
    align-items: flex-start;
    gap: 10px;
  }
  .plan-right {
    width: 100%;
    justify-content: space-between;
  }
  .plan-name,
  .btn-cta {
    font-size: .82rem;
  }

  .summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .summary-val { text-align: left; }

  .pattern-grid { gap: 10px; }

  .result-card {
    padding: 16px;
    border-radius: 16px;
  }
  .result-header,
  .prob-header,
  .ds-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .levels-wrap,
  .trade-grid,
  .ds-scenarios {
    grid-template-columns: 1fr;
  }
  .rr-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .rr-divider { display: none; }
  .analysis-summary,
  .decision-support-section,
  .free-limit-box {
    padding: 14px;
  }
  .analysis-modal {
    padding: 32px 24px 24px;
    border-radius: 18px;
  }
  .analysis-msg {
    font-size: .95rem;
  }
}

@media (max-width: 420px) {
  .chart-info-box,
  .dropzone-wrap,
  .plans-wrap,
  .summary-wrap,
  .cta-wrap,
  .symbol-input-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dropzone {
    aspect-ratio: 1 / 1;
    min-height: 280px;
  }
  .dropzone-icon {
    width: 42px;
    height: 42px;
  }
  .dropzone-icon svg {
    width: 22px;
    height: 22px;
  }

  .pattern-grid { grid-template-columns: 1fr; }
  .teaser-inner { flex-direction: column; }

  .indicator-chip,
  .teaser-badge {
    width: 100%;
    justify-content: center;
  }

  .loading-text,
  .free-limit-title,
  .verdict-summary,
  .analysis-summary-text,
  .ds-action {
    font-size: .78rem;
  }
}