/* ============================================================================
 * KRX AI — Legacy tokens.css (Phase 7 정리됨)
 * ----------------------------------------------------------------------------
 * 이 파일은 다음 두 가지 목적만 남았다:
 *  1. 폰트 import (SUIT, Outfit) — _krx_overrides.css가 var() 참조
 *  2. prose-msg 마크다운 렌더링 스타일 — markdown_controller.js에서 사용
 *  3. body.chat-page overflow 차단 — content_for body_class
 *  4. (호환층) market/* 디렉토리 잔존 페이지를 위한 .glass-regular alias
 *
 * iOS 26 토큰은 zz_ios26/01_ios26_tokens.css 사용.
 * KRX 브랜드 오버라이드는 zz_ios26/02_krx_overrides.css 사용.
 * iOS 26 컴포넌트 스타일은 zz_ios26/04_components.css 사용.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@font-face {
  font-family: 'SUIT Variable';
  font-weight: 100 900;
  font-style: normal;
  /* SUIT 가 배포하는 CSS 에는 font-display 가 없어 기본값 auto 로 동작한다.
     auto 는 폰트를 받을 때까지 텍스트를 최대 3초 숨겨 LCP 를 그만큼 늦춘다. */
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations');
}


/* ============================================================================
 * 채팅 페이지 body 스크롤 차단
 * ============================================================================ */
body.chat-page {
  overflow: hidden;
  height: 100dvh;
}


/* ============================================================================
 * AI 응답 마크다운 렌더링 (.prose-msg)
 * markdown_controller.js가 marked.parse() 결과를 inject
 * ============================================================================ */
.prose-msg { color: inherit; }
.prose-msg p { margin: 0 0 0.6em; }
.prose-msg p:last-child { margin-bottom: 0; }
.prose-msg strong { font-weight: 600; }
.prose-msg em { font-style: italic; }
.prose-msg h1, .prose-msg h2, .prose-msg h3, .prose-msg h4 {
  font-weight: 700; margin: 0.8em 0 0.3em; line-height: 1.3;
}
.prose-msg h1 { font-size: 1.05em; }
.prose-msg h2 { font-size: 1em; }
.prose-msg h3 { font-size: 0.95em; }
.prose-msg h4 { font-size: 0.9em; }
.prose-msg ul, .prose-msg ol { padding-left: 1.2em; margin: 0.4em 0; }
.prose-msg li { margin: 0.15em 0; }
.prose-msg ul li { list-style-type: disc; }
.prose-msg ol li { list-style-type: decimal; }
.prose-msg hr { border: none; border-top: 1px solid rgba(0,0,0,0.12); margin: 0.8em 0; }
.prose-msg code {
  background: rgba(0,0,0,0.07); padding: 0.1em 0.35em;
  border-radius: 4px; font-size: 0.88em; font-family: 'Menlo', 'Monaco', monospace;
}
.prose-msg pre {
  background: rgba(0,0,0,0.06); padding: 0.7em 0.9em;
  border-radius: 8px; overflow-x: auto; margin: 0.5em 0;
}
.prose-msg pre code { background: none; padding: 0; font-size: 0.85em; }
.prose-msg blockquote {
  border-left: 3px solid rgba(0,0,0,0.2); margin: 0.5em 0;
  padding: 0.2em 0 0.2em 0.8em; opacity: 0.8;
}
.prose-msg a { text-decoration: underline; opacity: 0.85; }
.prose-msg table { border-collapse: collapse; width: 100%; font-size: 0.88em; margin: 0.5em 0; }
.prose-msg th, .prose-msg td { border: 1px solid rgba(0,0,0,0.15); padding: 0.3em 0.6em; }
.prose-msg th { font-weight: 600; background: rgba(0,0,0,0.04); }

/* AI(assistant) 메시지 — 마크다운 컨테이너 스타일 (07_chat.css의 .ios-msg와 호환) */
.ios-msg--assistant .prose-msg { color: var(--ios-label-primary, #000); }
.ios-msg--user .prose-msg,
.ios-msg--user .prose-msg * {
  color: #fff !important;
}


/* ============================================================================
 * 호환층: market/* 디렉토리 잔존 페이지용 (Q8에서 마이그레이션 제외)
 * market 라우트가 제거되면 이 섹션도 함께 제거
 * ============================================================================ */
.glass-regular {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
  transition: box-shadow 200ms ease, transform 200ms ease, background 200ms ease;
}
.glass-regular:hover {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.95) inset;
}
a.glass-regular:hover, div.glass-regular:hover {
  transform: translateY(-1px);
}