@charset "UTF-8";
/**
 * Market AI Design System v1.0
 * Reusable tokens and components. Rules are intentionally scoped to .mai-*.
 */
:root {
  --mai-bg: #050505;
  --mai-surface: #101417;
  --mai-border: #1d232a;
  --mai-primary: #7cff3a;
  --mai-secondary: #53d769;
  --mai-text: #f4f6f8;
  --mai-muted: #9ca7b5;
  --mai-up: #00ff66;
  --mai-down: #ff5c5c;
  --mai-warning: #ffc857;
  --mai-radius-card: 18px;
  --mai-radius-control: 10px;
  --mai-space-card: 24px;
  --mai-section-space: 100px;
  --mai-container: 1400px;
  --mai-shadow-card: 0 12px 34px rgba(0, 0, 0, .24);
  --mai-glow-soft: 0 0 18px rgba(124, 255, 58, .055);
  --mai-glow-primary: 0 0 22px rgba(124, 255, 58, .10);
  --mai-shadow-glow: var(--mai-glow-primary);
  --mai-border-active: rgba(124, 255, 58, .42);
  --mai-hud-line: rgba(124, 255, 58, .62);
  --mai-transition-fast: 160ms ease;
  --mai-transition-base: 200ms ease;
  --mai-transition: var(--mai-transition-base);
  --mai-confidence-value: 0%;
}

.mai-app {
  background: var(--mai-bg);
  color: var(--mai-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

.market-ai-v2-page, .market-ai-v2-page #container,
.market-ai-article-page, .market-ai-article-page #container { background: var(--mai-bg); color: var(--mai-text); }
.market-ai-v2-page #header-container, .market-ai-v2-page #header, .market-ai-v2-page #navi,
.market-ai-article-page #header-container, .market-ai-article-page #header, .market-ai-article-page #navi { background: var(--mai-bg); color: var(--mai-text); }
.market-ai-v2-page #header-container a,
.market-ai-article-page #header-container a { color: var(--mai-text); }

/* Market AI header navigation: keep Cocoon's structure and focus-visible behavior. */
.market-ai-v2-page #navi .navi-in > ul > li > a,
.market-ai-article-page #navi .navi-in > ul > li > a {
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: var(--mai-radius-control);
  color: #fff !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.market-ai-v2-page #navi .navi-in > ul > li > a:hover,
.market-ai-article-page #navi .navi-in > ul > li > a:hover {
  background: rgba(52, 255, 120, .1) !important;
  border-color: rgba(108, 255, 59, .72);
  color: #6cff3b !important;
}

.mai-app *, .mai-app *::before, .mai-app *::after { box-sizing: border-box; }
.mai-app a { color: inherit; }
.mai-app p { color: var(--mai-muted); }
.mai-app strong { color: var(--mai-text); }
.mai-app h1, .mai-app h2, .mai-app h3 { color: var(--mai-text); }
.mai-app time, .mai-app small { color: var(--mai-muted); }

.mai-section { padding-block: var(--mai-section-space); }
.mai-app .mai-v2-section { border-top: 1px solid rgba(124, 255, 58, .08); }
.mai-container { width: 100%; max-width: var(--mai-container); margin-inline: auto; }
.mai-grid { display: grid; }

.mai-title { color: var(--mai-text); font-weight: 750; letter-spacing: -.035em; }
h1.mai-title { font-size: clamp(42px, 5vw, 72px); line-height: 1.08; }
h2.mai-title { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; }
h3.mai-title { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.mai-description { color: var(--mai-muted); font-size: clamp(15px, 1.2vw, 18px); }
.mai-eyebrow { color: var(--mai-primary); font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }

.mai-card {
  position: relative;
  min-width: 0;
  padding: var(--mai-space-card);
  background: var(--mai-surface);
  border: 1px solid var(--mai-border);
  border-radius: var(--mai-radius-card);
  box-shadow: var(--mai-shadow-card);
}

.mai-card--interactive {
  transition: transform var(--mai-transition-base), border-color var(--mai-transition-base), box-shadow var(--mai-transition-base);
}

.mai-glow { border-color: rgba(124, 255, 58, .25); box-shadow: var(--mai-shadow-card), var(--mai-shadow-glow); }

.mai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid var(--mai-primary);
  border-radius: var(--mai-radius-control);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--mai-transition), box-shadow var(--mai-transition), background-color var(--mai-transition);
}

.mai-button--primary { background: var(--mai-primary); color: #071005 !important; }
.mai-button--secondary { background: var(--mai-bg); color: var(--mai-primary) !important; }

.mai-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  width: fit-content;
  padding: 3px 10px;
  background: rgba(124, 255, 58, .07);
  border: 1px solid rgba(124, 255, 58, .25);
  border-radius: 999px;
  color: var(--mai-primary) !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mai-media-frame {
  overflow: hidden;
  background: var(--mai-surface);
  border: 1px solid var(--mai-border);
  border-radius: var(--mai-radius-card);
}

.mai-media-frame > span { color: var(--mai-muted); font-size: 11px; letter-spacing: .14em; }
.mai-dashboard-card { min-height: 176px; border-color: rgba(124, 255, 58, .19); }
.mai-dashboard-card > strong { font-size: clamp(27px, 2.4vw, 38px); line-height: 1; font-variant-numeric: tabular-nums; }
.mai-dashboard-card[data-priority="primary"] { border-color: rgba(124, 255, 58, .34); box-shadow: var(--mai-shadow-card), 0 0 20px rgba(124, 255, 58, .07); }
.mai-dashboard-card[data-dashboard-key="updated-at"] > strong { font-size: clamp(17px, 1.45vw, 22px); line-height: 1.35; }
.mai-ranking-card, .mai-partner-card { height: 100%; }
.mai-article-card { height: 100%; overflow: hidden; padding: 0; }
.mai-up { color: var(--mai-up) !important; }
.mai-down { color: var(--mai-down) !important; }
.mai-warning { color: var(--mai-warning) !important; }
.mai-muted { color: var(--mai-muted) !important; }

.mai-hud-card {
  position: relative;
  box-shadow: var(--mai-shadow-card), inset 0 0 0 1px rgba(255, 255, 255, .012);
}

.mai-hud-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 24px;
  width: 42px;
  height: 1px;
  background: var(--mai-hud-line);
  pointer-events: none;
}

.mai-hud-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 12px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(124, 255, 58, .24);
  border-bottom: 1px solid rgba(124, 255, 58, .24);
  pointer-events: none;
}

.mai-hud-card--primary {
  border-color: rgba(124, 255, 58, .34);
  box-shadow: var(--mai-shadow-card), var(--mai-glow-soft), inset 0 0 28px rgba(124, 255, 58, .025);
}

.mai-hud-card--primary::before { width: 68px; background: var(--mai-primary); }
.mai-hud-label { color: var(--mai-muted) !important; font-size: 11px; font-weight: 750; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.mai-hud-card--primary > .mai-hud-label { color: var(--mai-primary) !important; }
.mai-hud-index { color: var(--mai-primary); font-variant-numeric: tabular-nums; }
.mai-hud-line { display: block; width: 40px; height: 1px; background: var(--mai-hud-line); }

.mai-data-label { color: var(--mai-muted) !important; font-size: 13px; font-weight: 650; line-height: 1.4; }
.mai-data-value { display: block; max-width: 100%; color: var(--mai-text); font-size: clamp(25px, 2.25vw, 38px); font-variant-numeric: tabular-nums; line-height: 1.08; overflow-wrap: anywhere; }
.mai-data-unit { margin-left: .12em; color: var(--mai-muted); font-size: .52em; font-weight: 650; }
.mai-data-meta { color: var(--mai-muted) !important; font-size: 12px; line-height: 1.55; }
.mai-data-status::after { margin-left: .5em; font-size: 10px; font-weight: 750; letter-spacing: .06em; vertical-align: middle; }
.mai-status--bullish { color: var(--mai-up) !important; }.mai-status--bullish::after { content: "BULLISH"; }
.mai-status--neutral { color: var(--mai-text) !important; }.mai-status--neutral::after { content: "NEUTRAL"; color: var(--mai-muted); }
.mai-status--bearish { color: var(--mai-down) !important; }.mai-status--bearish::after { content: "BEARISH"; }
.mai-status--low { color: var(--mai-up) !important; }.mai-status--low::after { content: "LOW"; }
.mai-status--medium { color: var(--mai-warning) !important; }.mai-status--medium::after { content: "MEDIUM"; }
.mai-status--high { color: var(--mai-down) !important; }.mai-status--high::after { content: "HIGH"; }
.mai-status--current { color: var(--mai-text) !important; }.mai-status--current::after { content: "CURRENT"; color: var(--mai-up); }
.mai-status--waiting { color: var(--mai-warning) !important; }.mai-status--waiting::after { content: "WAITING"; }

.mai-confidence-bar { width: 100%; height: 6px; overflow: hidden; background: var(--mai-border); border-radius: 999px; }
.mai-confidence-bar__fill { display: block; width: var(--mai-confidence-value, 0%); max-width: 100%; height: 100%; background: var(--mai-primary); border-radius: inherit; }
.mai-analysis-focus { padding-left: 18px; border-left: 2px solid var(--mai-hud-line); }

.mai-section-heading { position: relative; }
.mai-section-heading::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 36px; height: 2px; background: var(--mai-primary); }
.mai-analysis-rating { color: var(--mai-primary); font-size: 18px; letter-spacing: .14em; }
.mai-confidence { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mai-app .mai-v2-analysis-stat { background: var(--mai-surface); border: 1px solid rgba(124, 255, 58, .17); border-radius: var(--mai-radius-control); }
.mai-app .mai-v2-analysis-stat > span { color: var(--mai-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mai-app .mai-v2-analysis-stat > strong { font-size: clamp(22px, 2vw, 32px); font-variant-numeric: tabular-nums; }
.mai-app .mai-v2-analysis-block { border-top: 1px solid var(--mai-border); }
.mai-app .mai-v2-article-media { border-bottom: 1px solid var(--mai-border); }
.mai-app .mai-v2-ranking-panel li { border-top: 1px solid var(--mai-border); }
.mai-app .mai-v2-ranking-panel li:first-child { border-top: 0; }
.mai-app .mai-v2-ranking-tabs button { background: var(--mai-surface); border: 1px solid var(--mai-border); border-radius: var(--mai-radius-control); color: var(--mai-muted); font: inherit; }
.mai-app .mai-v2-ranking-tabs button[aria-selected="true"] { border-color: var(--mai-primary); color: var(--mai-primary); }
.mai-app .mai-v2-ranking-tabs button:disabled { cursor: default; opacity: .58; }
.mai-ranking-tab { transition: border-color var(--mai-transition-fast), color var(--mai-transition-fast); }
.mai-ranking-position { color: var(--mai-muted); font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.mai-app .mai-v2-ranking-panel li:first-child .mai-ranking-position { color: var(--mai-primary); font-size: 30px; }
.mai-app .mai-v2-ranking-panel li small { display: block; margin-top: 3px; }
.mai-app .mai-v2-partner-action { color: var(--mai-primary); font-size: 12px; font-weight: 700; }

.mai-article-card::before { left: 18px; width: 54px; }
.mai-badge[data-badge-type="morning"], .mai-badge[data-badge-type="evening"], .mai-badge[data-badge-type="etf"], .mai-badge[data-badge-type="nisa"], .mai-badge[data-badge-type="ai"], .mai-badge[data-badge-type="feature"] { border-color: rgba(124, 255, 58, .25); color: var(--mai-primary) !important; }

.mai-footer { background: #070909; color: var(--mai-text); border-top: 1px solid rgba(124, 255, 58, .16); }
.mai-footer h2, .mai-footer strong { color: var(--mai-text); }
.mai-footer a, .mai-footer p { color: var(--mai-muted); }
.mai-footer a { transition: color var(--mai-transition); }
.mai-footer #footer-in { border-top: 1px solid var(--mai-border); }

.market-ai-v2-page :where(a, button):focus-visible,
.market-ai-article-page :where(a, button):focus-visible {
  outline: 2px solid var(--mai-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(124, 255, 58, .12);
}

@media (hover: hover) and (pointer: fine) {
  .mai-card--interactive:hover { transform: translateY(-2px); border-color: var(--mai-border-active); box-shadow: var(--mai-shadow-card), var(--mai-glow-primary); }
  .mai-button:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(124, 255, 58, .18); }
  .mai-footer a:hover { color: var(--mai-primary); }
}

@media (max-width: 820px) {
  :root { --mai-section-space: 72px; --mai-space-card: 22px; }
  .mai-app { font-size: 17px; }
  h1.mai-title { font-size: clamp(40px, 10vw, 58px); }
  h2.mai-title { font-size: clamp(30px, 7vw, 40px); }
  .mai-button { min-height: 54px; font-size: 16px; }
  .mai-dashboard-card > strong { font-size: clamp(30px, 8vw, 42px); }
  .mai-data-value { font-size: clamp(27px, 6vw, 38px); }
}

@media (max-width: 560px) {
  :root { --mai-section-space: 60px; --mai-space-card: 20px; }
  .mai-app { font-size: 16px; }
  .mai-card { border-radius: 16px; }
  .mai-button { width: 100%; }
  .mai-confidence { align-items: flex-start; flex-direction: column; }
  .mai-data-label { font-size: 12px; }
  .mai-data-meta { font-size: 12px; }
  .mai-hud-card::before { left: 20px; }
}

@media (max-width: 360px) {
  :root { --mai-space-card: 16px; }
  .mai-data-value { font-size: clamp(23px, 7vw, 28px); }
  .mai-hud-label { font-size: 10px; letter-spacing: .1em; }
  .mai-hud-card::before { left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mai-card--interactive, .mai-button, .mai-ranking-tab, .mai-footer a { transition: none; }
  .mai-card--interactive:hover, .mai-button:hover { transform: none; }
  .market-ai-v2-page #navi .navi-in > ul > li > a,
  .market-ai-article-page #navi .navi-in > ul > li > a { transition: none; }
}