/* ── Layout ──────────────────────────────────────── */
.mml-stock-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 22px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Search ──────────────────────────────────────── */
.mml-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mml-search-wrap { position: relative; flex: 1 1 auto; max-width: 680px; }
#mml-search-input {
  width: 100%; height: 48px; box-sizing: border-box; padding: 0 16px;
  border: 1px solid #e5e7eb; border-radius: 15px; background: #fff;
  color: #111827; font-size: 15px; outline: none;
}
#mml-search-input:focus { border-color: #cbd5e1; }
.mml-search-results {
  position: absolute; top: 52px; left: 0; right: 0; display: none;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 15px;
  overflow: hidden; z-index: 50; box-shadow: 0 12px 30px rgba(0,0,0,.08);
  max-height: 360px; overflow-y: auto;
}
.mml-result-item {
  width: 100%; border: 0; background: #fff; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  text-align: left; cursor: pointer; font-size: 14px;
}
.mml-result-item:hover { background: #f8fafc; }
.mml-result-name { font-weight: 600; color: #111827; }
.mml-result-meta { color: #6b7280; font-size: 13px; }
.mml-result-meta .mml-result-market {
  margin-left: 6px; font-size: 11px; padding: 1px 5px; border-radius: 4px; background: #f1f5f9;
}

/* ── Quote ───────────────────────────────────────── */
.mml-quote { margin-bottom: 14px; }
.mml-quote h2 { margin: 0; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; color: #111827; }
.mml-symbol-line { margin-top: 4px; color: #6b7280; font-size: 16px; }
.mml-price-line { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.mml-price { font-size: 46px; font-weight: 700; line-height: 1; color: #111827; letter-spacing: -.02em; }
.mml-currency { font-size: 18px; color: #6b7280; line-height: 1.2; margin-bottom: 5px; }
.mml-change { margin-top: 6px; font-size: 20px; font-weight: 700; }
.mml-change.up { color: #ef4444; }
.mml-change.down { color: #3b82f6; }

/* ── Toolbar ─────────────────────────────────────── */
.mml-toolbar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.mml-period-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mml-period-sep { color: #d1d5db; font-size: 18px; user-select: none; }
.mml-toolbar-right { display: flex; gap: 8px; align-items: center; }
.mml-period-btn,
.mml-indicator-chip,
.mml-indicator-btn {
  height: 36px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 999px;
  background: #fff; color: #111827; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.mml-period-btn:hover, .mml-indicator-chip:hover, .mml-indicator-btn:hover { background: #f8fafc; }
.mml-period-btn.is-active, .mml-indicator-chip.is-active { background: #111827; color: #fff; border-color: #111827; }
.mml-gear-btn {
  width: 36px; height: 36px; border: 1px solid #e5e7eb; border-radius: 50%;
  background: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .15s;
}
.mml-gear-btn:hover { background: #f8fafc; }

/* ── Interval group (5분봉 dropdown) ────────────── */
.mml-interval-group {
  position: relative;
  display: inline-flex;
}
.mml-sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.mml-sub-menu.is-open { display: flex; }
.mml-sub-menu .mml-period-btn {
  border-radius: 8px;
  width: 100%;
  text-align: center;
  font-size: 13px;
  height: 32px;
}

/* ── Indicator panel ─────────────────────────────── */
.mml-indicator-panel { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mml-indicator-panel.is-open { display: flex; }

/* ── Charts ──────────────────────────────────────── */
.mml-charts-wrap {
  position: relative; border: 1px solid #e5e7eb; border-radius: 16px;
  overflow: hidden; background: #fff;
}
.mml-chart-main { width: 100%; height: 420px; position: relative; }
.mml-chart-divider { height: 1px; background: rgba(229,231,235,.6); }
.mml-chart-volume { width: 100%; height: 110px; position: relative; }
.mml-chart-sub { width: 100%; height: 130px; position: relative; border-top: 1px solid rgba(229,231,235,.5); }

/* ── Chart legends (OHLC + MA overlay) ───────────── */
.mml-chart-legend {
  position: absolute; top: 6px; left: 10px; z-index: 3;
  pointer-events: none; font-size: 12px; line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.mml-ohlc-legend { color: #374151; font-weight: 500; }
.mml-ohlc-legend .ohlc-val { margin-right: 8px; }
.mml-ohlc-legend .ohlc-up { color: #ef4444; }
.mml-ohlc-legend .ohlc-dn { color: #3b82f6; }
.mml-ma-legend { top: 26px; }
.mml-ma-legend span { margin-right: 10px; font-weight: 600; }
.mml-vol-legend { color: #6b7280; font-weight: 600; }
.mml-sub-label {
  position: absolute; top: 6px; left: 10px; font-size: 11px;
  font-weight: 600; color: #9ca3af; z-index: 2; pointer-events: none;
}
.mml-sub-legend {
  top: 6px; font-size: 11px; font-weight: 600; color: #6b7280;
}
.mml-date-tip {
  position: absolute; display: none; z-index: 5; pointer-events: none;
  background: rgba(17,24,39,.82); color: #fff;
  padding: 3px 8px; border-radius: 5px; font-size: 11px;
  white-space: nowrap; letter-spacing: .02em;
}

/* ── Loading overlay ─────────────────────────────── */
.mml-loading {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: rgba(255,255,255,.7);
  z-index: 10; font-size: 14px; color: #6b7280;
}

/* ── Settings modal ──────────────────────────────── */
.mml-settings-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.35); align-items: center; justify-content: center;
}
.mml-settings-overlay.is-open { display: flex; }
.mml-settings-modal {
  background: #fff; border-radius: 18px; width: 420px;
  max-width: 92vw; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.mml-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid #f1f5f9;
  font-size: 17px; font-weight: 700;
}
.mml-settings-head button { background: none; border: none; font-size: 22px; cursor: pointer; color: #6b7280; line-height: 1; }
.mml-settings-body { padding: 14px 22px 22px; }
.mml-stg-group { margin-bottom: 18px; }
.mml-stg-title { font-size: 14px; font-weight: 700; color: #374151; margin-bottom: 10px; }
.mml-stg-info { font-size: 12px; color: #9ca3af; margin-bottom: 10px; padding: 6px 10px; background: #f9fafb; border-radius: 8px; }
.mml-stg-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.mml-stg-row:last-child { border-bottom: none; }
.mml-stg-label { width: 52px; font-size: 13px; font-weight: 600; color: #374151; flex-shrink: 0; }
.mml-stg-color { width: 32px; height: 32px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 2px; cursor: pointer; background: #fff; }
.mml-stg-width { height: 32px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; background: #f9fafb; flex: 1; }

/* ── Toggle switch ───────────────────────────────── */
.mml-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.mml-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.mml-toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: #d1d5db;
  border-radius: 24px; transition: .2s;
}
.mml-toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.mml-toggle input:checked + .mml-toggle-slider { background: #3b82f6; }
.mml-toggle input:checked + .mml-toggle-slider::before { transform: translateX(18px); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .mml-stock-wrap { padding: 14px 16px 22px; }
  .mml-quote h2 { font-size: 34px; }
  .mml-price { font-size: 38px; }
  .mml-chart-main { height: 340px; }
  .mml-chart-volume { height: 90px; }
  .mml-chart-sub { height: 110px; }
}
@media (max-width: 600px) {
  .mml-period-btn, .mml-indicator-chip, .mml-indicator-btn {
    height: 32px; padding: 0 10px; font-size: 12px;
  }
  .mml-gear-btn { width: 32px; height: 32px; font-size: 15px; }
  .mml-settings-modal { width: 100%; border-radius: 16px 16px 0 0; }
}