/* stocks.html 의 첫 인라인 <style> 블록을 그대로 옮긴 것.
   왜: 이 문서는 배포 즉시 반영을 위해 no-store 라 매 방문마다 원본에서 통째로 받는다.
       반면 /static/* 은 CDN 엣지 HIT + 브라우저 4시간 캐시가 걸린다.
       가장 큰 CSS 덩어리를 이쪽으로 옮겨 매번 받는 문서 크기를 줄인다.
   순서: 원래 있던 자리에 <link> 를 넣어 캐스케이드 순서를 그대로 보존한다.
        (뒤따르는 home.css 등 link 들보다 앞이어야 한다) */
    /* ── 설정 패널 (iOS 그룹형 리스트) ───────────────────────── */
    .settings-title {
      font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
      color: var(--text); margin: 8px 0 4px;
    }
    .settings-subtitle {
      font-size: 13px; color: var(--sub); margin: 0 0 24px;
    }
    .settings-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--sub); padding: 0 4px; margin: 22px 0 8px;
    }
    .settings-group {
      background: var(--card, rgba(255,255,255,0.05));
      border: 1px solid var(--sep, rgba(255,255,255,0.06));
      border-radius: 14px; overflow: hidden;
    }
    .settings-row {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px; width: 100%; box-sizing: border-box;
      background: transparent; border: 0; cursor: pointer; font-family: inherit;
      color: var(--text); font-size: 14px; font-weight: 600;
      text-align: left;
    }
    .settings-row + .settings-row {
      border-top: 1px solid var(--sep, rgba(255,255,255,0.06));
    }
    .settings-row .row-icon {
      width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      color: #FF8C00; flex-shrink: 0;
    }
    .settings-row .row-label { flex: 1; }
    .settings-row .row-arrow { color: var(--sub); font-size: 20px; font-weight: 400; }
    .auth-slot { display: flex; align-items: center; gap: 10px; width: 100%; }
    .auth-btn { flex: none; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line, #d7dbe0); background: var(--card, #fff); color: var(--text, #16181c); font-size: 13px; font-weight: 600; cursor: pointer; }
    .auth-btn:hover { background: var(--hover, #f4f5f7); }
    /* min-width:0 + nowrap — 이메일은 공백이 없어 안 쪼개진다. 이게 없으면 말줄임이 안 걸려
       긴 주소가 옆의 '로그아웃' 버튼을 화면 밖으로 민다. */
    .auth-email { flex: 1; min-width: 0; white-space: nowrap; font-size: 13px; color: var(--sub, #6b7280); overflow: hidden; text-overflow: ellipsis; }

    .row-segmented button.active {
      background: #FF8C00; color: #fff;
    }

    /* ── PWA 설치 — 상단 버튼 (서브틀 라운드 필) ─────────────────── */

    .pwa-install-label { line-height: 1; white-space: nowrap; }
    /* 첫 노출 페이드 — 펄스 제거, 0.4s opacity 만 */
    .pwa-install-btn.reveal { animation: pwaReveal 0.4s ease-out both; }
    @keyframes pwaReveal {
      from { opacity: 0; transform: translateY(-2px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── PWA 설치 — 하단 시트 ───────────────────────────────────── */
    .pwa-bottom-sheet[hidden] { display: none; }
    .pwa-bottom-sheet {
      position: fixed; left: 0; right: 0; top: 0; z-index: 9990;
      transform: translateY(-110%);
      transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .pwa-bottom-sheet.open { transform: translateY(0); }
    .pwa-sheet-card {
      max-width: 480px; margin: 0 auto;
      background: var(--card, #131316); color: var(--text, #fff);
      border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
      padding: calc(16px + env(safe-area-inset-top)) 18px 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.32);
      display: flex; align-items: center; gap: 12px;
    }
    .pwa-sheet-icon {
      flex: 0 0 44px; width: 44px; height: 44px;
      border-radius: 12px; background: rgba(255,140,0,0.12);
      display: flex; align-items: center; justify-content: center;
      color: #FF8C00;
    }
    .pwa-sheet-text { flex: 1; min-width: 0; }
    .pwa-sheet-title { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; }
    .pwa-sheet-sub   { font-size: 11.5px; color: var(--sub, #94a3b8); margin: 0; }
    /* Konsta iOS 필드 버튼 감성 — pill·medium(600)·넉넉한 패딩·눌림 opacity. 색은 기존 오렌지 유지. */
    .pwa-sheet-cta {
      flex-shrink: 0; padding: 11px 20px; border: 0; border-radius: 999px;
      background: #FF8C00; color: #fff; font: 600 14px/1 inherit; letter-spacing: -0.2px;
      cursor: pointer; font-family: inherit; transition: opacity .15s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .pwa-sheet-cta:active { opacity: 0.7; }
    .pwa-sheet-close {
      flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent;
      color: var(--sub, #94a3b8); font-size: 18px; cursor: pointer;
      border-radius: 8px; font-family: inherit;
    }

    /* ── PWA 설치 — ✕ 후 설정 위치 안내 팝업 ──────────────────── */
    @keyframes pwaHintIn {
      0%   { opacity: 0; transform: translateY(8px) scale(0.94); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .pwa-hint-card {
      position: relative; text-align: center;
      padding: 48px 22px 18px;
      background:
        radial-gradient(120% 90% at 50% -10%, rgba(255,140,0,0.16), transparent 60%),
        var(--bg, #0b0b0e);
      border: 1px solid rgba(255,140,0,0.22);
      box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
      animation: pwaHintIn 0.34s cubic-bezier(0.22,1,0.36,1) both;
    }
    .pwa-hint-snooze {
      position: absolute; top: 10px; left: 14px;
      border: 0; background: transparent; color: var(--sub, #94a3b8);
      font: 600 11px inherit; cursor: pointer; padding: 4px 2px;
      opacity: 0.72; transition: opacity 0.15s ease;
      text-underline-offset: 3px; text-decoration: underline dotted;
      font-family: inherit;
    }
    .pwa-hint-snooze:hover  { opacity: 1; }
    .pwa-hint-snooze:active { transform: scale(0.96); }
    .pwa-hint-badge {
      position: relative; width: 60px; height: 60px; margin: 12px auto 16px;
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(255,140,0,0.22), rgba(255,140,0,0.08));
      border: 1px solid rgba(255,140,0,0.32);
      display: flex; align-items: center; justify-content: center;
      color: #FF8C00; box-shadow: 0 8px 24px rgba(255,140,0,0.18);
    }
    .pwa-hint-badge svg { width: 30px; height: 30px; display: block; }
    .pwa-hint-badge .pwa-hint-arw {
      position: absolute; top: -7px; right: -7px;
      width: 24px; height: 24px; border-radius: 50%;
      background: #FF8C00; color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 900; line-height: 1;
      box-shadow: 0 4px 12px rgba(255,140,0,0.45);
      border: 2px solid var(--bg, #0b0b0e);
    }
    .pwa-hint-title { font-size: 16.5px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.2px; color: var(--text, #f1f5f9); }
    .pwa-hint-body  { font-size: 13px; line-height: 1.62; color: var(--sub, #94a3b8); margin: 0 0 18px; }
    .pwa-hint-body strong { color: var(--text, #f1f5f9); font-weight: 700; }
    .pwa-hint-ok {
      width: 100%; padding: 12px 16px; border: 0; border-radius: 13px;
      background: linear-gradient(135deg, #FF9D2E, #FF7A00);
      color: #fff; font: 800 14px inherit; cursor: pointer; font-family: inherit;
      box-shadow: 0 8px 20px rgba(255,140,0,0.32);
      transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    .pwa-hint-ok:hover  { box-shadow: 0 10px 26px rgba(255,140,0,0.42); }
    .pwa-hint-ok:active { transform: scale(0.97); }

    /* ── PWA 설치 — 안내 모달 (분기 2/3/4/6) ───────────────────── */
    .pwa-install-modal[hidden] { display: none; }
    .pwa-install-modal {
      position: fixed; inset: 0; z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
    }
    .pwa-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    }
    .pwa-modal-card {
      position: relative; max-width: 380px; width: 100%;
      max-height: 85vh; overflow-y: auto;
      background: var(--bg, #0b0b0e); color: var(--text, #fff);
      border-radius: 18px; padding: 24px 20px 16px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.4);
      font-family: inherit;
    }
    .pwa-modal-close {
      position: absolute; top: 8px; right: 10px;
      width: 32px; height: 32px; border: 0; background: transparent;
      color: var(--sub, #94a3b8); font-size: 22px; cursor: pointer;
      border-radius: 8px; font-family: inherit;
    }
    .pwa-modal-title {
      font-size: 17px; font-weight: 800; margin: 0 0 14px;
      letter-spacing: -0.02em; text-align: center;
    }
    .pwa-modal-line { font-size: 13.5px; color: var(--sub, #94a3b8); line-height: 1.6; margin: 0 0 10px; }
    .pwa-modal-line strong { color: var(--text, #fff); font-weight: 700; }
    .pwa-modal-line.pwa-modal-warn {
      padding: 10px 12px; border-radius: 10px;
      background: rgba(255,140,0,0.08); border-left: 3px solid #FF8C00;
      color: var(--text, #fff);
    }
    .pwa-modal-sub { font-size: 11.5px; opacity: 0.7; }
    .pwa-modal-action {
      display: block; width: 100%; margin-top: 8px; padding: 11px 0;
      border: 0; border-radius: 12px;
      background: rgba(255,140,0,0.16); color: #FF8C00;
      font: 700 13px inherit; cursor: pointer; font-family: inherit;
    }
    .pwa-modal-ok {
      width: 100%; padding: 12px 0; margin-top: 12px;
      border: 0; border-radius: 12px;
      background: #FF8C00; color: #fff; font-size: 14px; font-weight: 700;
      cursor: pointer; font-family: inherit;
    }
    .pwa-modal-ok:active { transform: scale(0.985); }

    /* 관심종목 한도 안내 — 버튼 두 개를 나란히.
       주 액션(프리미엄 보기)만 오렌지를 쓰고 '닫기'는 중립으로 물러난다
       (오렌지는 한 화면에 하나). .pwa-modal-ok 가 width:100% 라 여기선 flex 로 나눈다. */
    .wl-limit-actions { display: flex; gap: 8px; margin-top: 14px; }
    .wl-limit-actions .pwa-modal-ok { margin-top: 0; flex: 1.4; }
    .wl-limit-cancel {
      flex: 1; padding: 12px 0; border: 0; border-radius: 12px;
      background: var(--sep, #E5E0D6); color: var(--sub, #87847B);
      font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
    }
    .wl-limit-cancel:active { transform: scale(0.985); }

    /* 분기 6 스크린샷 갤러리 */
    .pwa-shots {
      display: flex; flex-direction: column; gap: 14px;
      margin: 14px 0 4px;
    }
    .pwa-shots figure {
      margin: 0; padding: 10px; border-radius: 12px;
      background: rgba(255,255,255,0.03);
    }
    .pwa-shots img {
      display: block; width: 100%; height: auto;
      border-radius: 8px; max-height: 360px; object-fit: contain;
      background: #000;
    }
    .pwa-shots figcaption {
      margin-top: 8px; font-size: 12.5px; color: var(--sub, #94a3b8);
      text-align: center; line-height: 1.5;
    }
    .pwa-shots figcaption strong { color: var(--text, #fff); font-weight: 700; }
    /* 분기 6 모달 — 두 방법 사이 "또는" 구분선 */
    .pwa-shots-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 18px 0 12px;
      color: var(--sub, #94a3b8); font-size: 12px; font-weight: 700;
      letter-spacing: 0.08em;
    }
    .pwa-shots-divider::before,
    .pwa-shots-divider::after {
      content: ''; flex: 1; height: 1px;
      background: rgba(255,255,255,0.10);
    }
    .pwa-shots-divider span {
      padding: 4px 12px; border-radius: 999px;
      background: rgba(255,140,0,0.10);
      color: #FF8C00;
    }

    /* ── Intro 오버레이 (첫 진입 시 splash 다음에 노출) ─────────── */
    .intro-overlay {
      position: fixed; inset: 0; z-index: 9998;
      background: var(--bg);
      display: flex; flex-direction: column;
      /* 노치·홈인디케이터 safe-area 반영 (viewport-fit=cover 와 연동) — 상하/좌우 잘림 방지 */
      padding: calc(48px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
               calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
      opacity: 0; transition: opacity 280ms ease;
    }
    html:not([data-theme="dark"]) .intro-overlay { background: #FFF4E8; }
    .intro-overlay.visible { opacity: 1; }
    .intro-overlay.fade-out { opacity: 0; }
    .intro-skip {
      position: absolute; top: calc(12px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right));
      z-index: 1;
      background: transparent; border: 0; cursor: pointer;
      color: var(--sub); font-size: 14px; font-weight: 600;
      padding: 8px 12px; border-radius: 8px; font-family: inherit;
    }
    .intro-skip:hover { background: rgba(255,255,255,0.06); }
    .intro-stage {
      flex: 1; position: relative;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .intro-slide {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center;
      /* safe center: 내용이 작으면 중앙, 화면보다 길면 위 정렬로 폴백 → 세로 스크롤 가능(하단 잘림 방지) */
      justify-content: safe center;
      text-align: center; padding: 8px 8px;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      opacity: 0; transform: translateX(40px);
      transition: opacity 320ms ease, transform 360ms cubic-bezier(.2,.7,.2,1);
      pointer-events: none;
    }
    .intro-slide.active {
      opacity: 1; transform: translateX(0); pointer-events: auto;
    }
    .intro-slide.prev {
      transform: translateX(-40px);
    }
    .intro-logo {
      width: 88px; height: 72px; color: #FF8C00; margin-bottom: 22px;
      overflow: visible; filter: drop-shadow(0 12px 22px rgba(234,88,12,0.20));
    }
    .intro-logo .intro-logo-wing { transform-box: fill-box; transform-origin: center; }
    .intro-logo .intro-logo-left,
    .intro-logo .intro-logo-right { opacity: 0; }
    .intro-logo .intro-logo-flare { opacity: 0; transform-origin: 288px 273px; }
    .intro-slide-welcome.active .intro-logo { animation: introLogoSettle 1s cubic-bezier(.2,.8,.2,1) both, introLogoFloat 2.1s ease-in-out 1s infinite; }
    .intro-slide-welcome.active .intro-logo-left { animation: introLogoLeft 1.05s cubic-bezier(.17,.9,.18,1) both .05s, introLogoWingLeft 1.7s ease-in-out 1.08s infinite; }
    .intro-slide-welcome.active .intro-logo-right { animation: introLogoRight 1.05s cubic-bezier(.17,.9,.18,1) both .05s, introLogoWingRight 1.7s ease-in-out 1.08s infinite; }
    .intro-slide-welcome.active .intro-logo-flare { animation: introLogoFlare 1.45s ease-in-out .42s infinite; }
    @keyframes introLogoLeft {
      0% { opacity: 0; transform: translate(-150px, 66px) rotate(-28deg) skewX(-10deg) scale(.62); }
      44% { opacity: 1; transform: translate(22px, -13px) rotate(9deg) skewX(4deg) scale(1.12); }
      70% { opacity: 1; transform: translate(-8px, 5px) rotate(-4deg) skewX(-2deg) scale(.98); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes introLogoRight {
      0% { opacity: 0; transform: translate(150px, -66px) rotate(28deg) skewX(10deg) scale(.62); }
      44% { opacity: 1; transform: translate(-22px, 13px) rotate(-9deg) skewX(-4deg) scale(1.12); }
      70% { opacity: 1; transform: translate(8px, -5px) rotate(4deg) skewX(2deg) scale(.98); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes introLogoFlare {
      0%, 100% { opacity: 0; transform: scale(.55) rotate(-16deg); }
      24% { opacity: .55; transform: scale(1.12) rotate(8deg); }
      52% { opacity: .10; transform: scale(1.38) rotate(18deg); }
    }
    @keyframes introLogoSettle {
      0% { transform: scale(.96); }
      62% { transform: scale(1.035); }
      100% { transform: scale(1); }
    }
    @keyframes introLogoFloat {
      0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 12px 22px rgba(234,88,12,0.20)); }
      50% { transform: translateY(-8px) scale(1.028); filter: drop-shadow(0 22px 34px rgba(234,88,12,0.34)); }
    }
    @keyframes introLogoWingLeft {
      0%, 100% { transform: translate(-2px, 0) rotate(0deg) skewX(0deg); }
      38% { transform: translate(-14px, -8px) rotate(-5deg) skewX(-4deg); }
      70% { transform: translate(4px, 5px) rotate(2deg) skewX(2deg); }
    }
    @keyframes introLogoWingRight {
      0%, 100% { transform: translate(2px, 0) rotate(0deg) skewX(0deg); }
      38% { transform: translate(14px, 8px) rotate(5deg) skewX(4deg); }
      70% { transform: translate(-4px, -5px) rotate(-2deg) skewX(-2deg); }
    }

    .intro-h1 {
      font-size: clamp(20px, 6.4vw, 26px); font-weight: 800; letter-spacing: -0.035em;
      color: var(--text); margin: 0 0 12px;
      word-break: keep-all; max-width: 100%;
    }
    .intro-h2 {
      font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
      color: var(--text); margin: 24px 0 12px;
    }
    .intro-sub {
      font-size: 15px; color: var(--sub); margin: 0;
      line-height: 1.55; max-width: 320px;
    }
    .intro-recommend {
      font-size: 12.5px; color: #FF8C00; margin: 18px 0 0;
      padding: 6px 14px; border-radius: 999px;
      background: rgba(255,140,0,0.10); border: 1px solid rgba(255,140,0,0.30);
      display: inline-block; font-weight: 600;
    }
    .intro-recommend strong { font-weight: 800; }
    .intro-desc {
      font-size: 14.5px; color: var(--sub); margin: 0;
      line-height: 1.7; max-width: 360px;
    }
    .intro-desc strong { color: var(--text); font-weight: 700; }
    .intro-footer {
      display: flex; flex-direction: column; align-items: center; gap: 18px;
      padding-top: 16px;
    }
    .intro-dots { display: flex; gap: 8px; }
    .intro-dots .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(128,128,128,0.3);
      transition: background 200ms, width 200ms;
    }
    .intro-dots .dot.active {
      background: #FF8C00; width: 22px; border-radius: 4px;
    }
    .intro-next {
      background: #FF8C00; color: #fff;
      border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
      font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
      padding: 14px 0; width: 100%; max-width: 360px;
      transition: transform 120ms, opacity 200ms;
    }
    .intro-next:hover { opacity: 0.92; }
    .intro-next:active { transform: scale(0.985); }
    .intro-hint {
      font-size: 12.5px; color: #FF8C00; margin: 14px 0 0; font-weight: 700;
      letter-spacing: -0.005em;
    }
    .intro-mock {
      width: 100%; max-width: 360px; margin: 0 auto 32px;
      background: rgba(128,128,128,0.06);
      border: 1px solid rgba(128,128,128,0.15);
      border-radius: 16px; padding: 14px; box-sizing: border-box;
    }

    /* Slide 2 — AI차트 list mock */

    .im-d.up { background: rgba(239,68,68,0.16); color: #EF4444; }
    .im-d.down { background: rgba(59,130,246,0.18); color: #3B82F6; }

    /* Slide 3 — 이탈도 chart mock */

    /* Slide 4 — bars */

    .im-bar-fill.up { background: linear-gradient(90deg, #EF4444 0%, #F06A6A 100%); }
    .im-bar-fill.down { background: linear-gradient(90deg, #3B82F6 0%, #6BA3F8 100%); }

    /* Slide 4 — 시황·거시·섹터 composite */

    .im-mms-sub.up { color: #EF4444; } .im-mms-sub.down { color: #3B82F6; }

    /* Slide 5 — 펀더멘털 Noise vs Signal */

    /* Slide 6 — signal hero */

    .im-hero-tag.up { background: rgba(239,68,68,0.16); color: #EF4444; }

    .im-pair-val.up { color: #EF4444; }
    .im-pair-val.down { color: #3B82F6; }

    /* ── 슬라이드 active 시 애니메이션 발동 ─────────────────────── */
    @keyframes im-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes im-line-draw { to { stroke-dashoffset: 0; } }
    @keyframes im-bar-grow { from { width: 0; } to { width: var(--w, 50%); } }
    @keyframes im-tap-pulse {
      0% { opacity: 0; transform: translateY(-50%) scale(0.5); }
      30% { opacity: 1; transform: translateY(-50%) scale(1.1); }
      60% { opacity: 1; transform: translateY(-50%) scale(0.9); }
      100% { opacity: 0; transform: translateY(-50%) scale(1.2); }
    }
    @keyframes im-pulse-dot {
      0% { opacity: 0; transform: scale(0.4); }
      40% { opacity: 1; transform: scale(1.4); }
      80% { opacity: 0.6; transform: scale(1); }
      100% { opacity: 1; transform: scale(1); }
    }
    @keyframes im-hero-pop {
      from { opacity: 0; transform: scale(0.6); }
      60% { opacity: 1; transform: scale(1.08); }
      to { opacity: 1; transform: scale(1); }
    }

    .intro-slide.active .intro-mock { animation: im-fade-up .5s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-row { animation: im-fade-up .45s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-row:nth-child(1) { animation-delay: .15s; }
    .intro-slide.active .im-row:nth-child(2) { animation-delay: .25s; }
    .intro-slide.active .im-row:nth-child(3) { animation-delay: .35s; }
    .intro-slide.active .im-sp-line { animation: im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .5s; }
    .intro-slide.active .im-row-hl .im-tap { animation: im-tap-pulse 1.8s ease-in-out infinite 1.4s; }

    .intro-slide.active .im-line { animation: im-line-draw 1.6s cubic-bezier(.2,.7,.2,1) forwards .35s; }
    .intro-slide.active .im-pulse { animation: im-pulse-dot 2s ease-in-out infinite 1.8s; }

    .intro-slide.active .im-bar-fill { animation: im-bar-grow .9s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-bar-row:nth-child(1) .im-bar-fill { animation-delay: .25s; }
    .intro-slide.active .im-bar-row:nth-child(2) .im-bar-fill { animation-delay: .35s; }
    .intro-slide.active .im-bar-row:nth-child(3) .im-bar-fill { animation-delay: .45s; }
    .intro-slide.active .im-bar-row:nth-child(4) .im-bar-fill { animation-delay: .55s; }

    .intro-slide.active .im-mms-card { animation: im-fade-up .5s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-mms-card:nth-child(1) { animation-delay: .15s; }
    .intro-slide.active .im-mms-card:nth-child(2) { animation-delay: .30s; }
    .intro-slide.active .im-mms-card:nth-child(3) { animation-delay: .45s; }
    .intro-slide.active .im-mms-line { animation: im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .55s; }
    .intro-slide.active .im-heat-cell { animation: im-scale-pop .5s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-heat-cell:nth-child(1) { animation-delay: .70s; }
    .intro-slide.active .im-heat-cell:nth-child(2) { animation-delay: .76s; }
    .intro-slide.active .im-heat-cell:nth-child(3) { animation-delay: .82s; }
    .intro-slide.active .im-heat-cell:nth-child(4) { animation-delay: .88s; }

    /* 슬라이드 3+ 강화 — 실제 분석 페이지 미러 애니메이션 */

    .intro-slide.active .im-tab-chip{animation:im-fade-up .4s cubic-bezier(.2,.7,.2,1) both}

    /* 실 분석 페이지 미러 — 헤드라인 박스 / 카드 chrome */

    .intro-slide.active .im-headline-box{animation:im-fade-up .45s cubic-bezier(.2,.7,.2,1) both .1s}

    .im-card .im-card-head .im-card-badge.ai{background:rgba(139,92,246,0.18);color:#8B5CF6}

    .intro-slide.active .im-card{animation:im-fade-up .45s cubic-bezier(.2,.7,.2,1) both}

    /* 시장 페이지 미러 */

    .im-stat-strip .im-stat-sub.up{color:#EF4444}.im-stat-strip .im-stat-sub.down{color:#3B82F6}

    .im-hold-row .im-hold-ico.green{background:#76B900}.im-hold-row .im-hold-ico.red{background:#E0394A}

    .im-hold-row .im-hold-ret.up{color:#EF4444}
    .intro-slide.active .im-hold-row{animation:im-fade-up .4s cubic-bezier(.2,.7,.2,1) both}
    .intro-slide.active .im-hold-row:nth-child(1){animation-delay:.55s}
    .intro-slide.active .im-hold-row:nth-child(2){animation-delay:.65s}
    .intro-slide.active .im-hold-row:nth-child(3){animation-delay:.75s}

    /* 펀더 페이지 미러 */

    /* 펀더멘털 반영도 — 실제 화면 미러 */

    .intro-slide.active .im-fc-num-row{animation:im-fade-up .5s cubic-bezier(.2,.7,.2,1) both .35s}
    .intro-slide.active .im-fc-desc{animation:im-fade-up .4s cubic-bezier(.2,.7,.2,1) both .5s}
    .intro-slide.active .im-fc-track-wrap{animation:im-fade-up .45s cubic-bezier(.2,.7,.2,1) both .65s}
    .intro-slide.active .im-fc-foot{animation:im-fade-up .45s cubic-bezier(.2,.7,.2,1) both .85s}

    /* 강조 펄스 링 — 큰 숫자 옆 */
    @keyframes imRing{0%{box-shadow:0 0 0 0 rgba(255,140,0,0.55)}70%{box-shadow:0 0 0 14px rgba(255,140,0,0)}100%{box-shadow:0 0 0 0 rgba(255,140,0,0)}}
    .intro-slide.active .im-hero-num{position:relative;border-radius:8px;animation:imRing 1.8s ease-out infinite 1.2s}
    .intro-slide.active .im-ns-fill{animation:im-bar-grow 1s cubic-bezier(.2,.7,.2,1) both .35s, imRingSoft 2s ease-in-out 1.2s infinite}
    @keyframes imRingSoft{0%,100%{box-shadow:0 0 0 0 rgba(255,140,0,0)}50%{box-shadow:0 0 14px 2px rgba(255,140,0,0.35)}}

    /* 손가락 탭 위치 — 페이지마다 */

    /* 카드 컨테이너 — 페이지 보이는 듯 */

    .intro-slide.active .im-page-head{animation:im-fade-up .4s cubic-bezier(.2,.7,.2,1) both}

    /* 시그널 페이지 ㅡ 강조 효과 */
    .intro-slide.active .im-hero-tag{animation:im-fade-up .5s cubic-bezier(.2,.7,.2,1) both .35s}
    .intro-slide.active .im-pair-cell{animation:im-fade-up .45s cubic-bezier(.2,.7,.2,1) both}
    .intro-slide.active .im-pair-cell:nth-child(1){animation-delay:.55s}
    .intro-slide.active .im-pair-cell:nth-child(2){animation-delay:.65s}
    .intro-slide.active .im-pair-cell:nth-child(3){animation-delay:.75s}
    .intro-slide.active .im-mini-price{stroke-dasharray:600;stroke-dashoffset:600;animation:im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .8s}
    .intro-slide.active .im-mini-signal{stroke-dasharray:600;stroke-dashoffset:600;animation:im-line-draw 1.4s cubic-bezier(.2,.7,.2,1) forwards 1.1s}
    .intro-slide.active .im-fund-signal{stroke-dasharray:600;stroke-dashoffset:600;animation:im-line-draw 1.4s cubic-bezier(.2,.7,.2,1) forwards .8s}
    .intro-slide.active .im-fund-price{stroke-dasharray:600;stroke-dashoffset:600;animation:im-line-draw 1.8s cubic-bezier(.2,.7,.2,1) forwards 1.1s}
    .intro-slide.active .im-legend{animation:im-fade-up .4s cubic-bezier(.2,.7,.2,1) both .8s}

    /* 페이지 mock 외곽 — 미니 phone frame */
    .intro-mock{position:relative}
    .intro-mock::before{
      content:'';position:absolute;inset:-6px -10px;border-radius:18px;
      border:1px solid rgba(255,255,255,0.06);
      background:rgba(255,255,255,0.02);
      pointer-events:none;z-index:-1;
    }
    [data-theme="light"] .intro-mock::before{border-color:rgba(0,0,0,0.06);background:rgba(0,0,0,0.02)}
    .intro-slide.active .intro-mock::before{animation:im-frame-in .5s cubic-bezier(.2,.7,.2,1) both}
    @keyframes im-frame-in{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:scale(1)}}
    .intro-slide.active .im-heat-cell:nth-child(5) { animation-delay: .94s; }
    .intro-slide.active .im-heat-cell:nth-child(6) { animation-delay: 1.00s; }
    .intro-slide.active .im-heat-cell:nth-child(7) { animation-delay: 1.06s; }
    .intro-slide.active .im-heat-cell:nth-child(8) { animation-delay: 1.12s; }
    @keyframes im-scale-pop {
      from { opacity: 0; transform: scale(0.6); }
      to   { opacity: 1; transform: scale(1); }
    }

    .intro-slide.active .im-ns-fill { animation: im-bar-grow .9s cubic-bezier(.2,.7,.2,1) both .35s; }
    .intro-slide.active .im-fund-signal { animation: im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .7s; }
    .intro-slide.active .im-fund-price  { animation: im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .9s; }

    .intro-slide.active .im-hero-num { animation: im-hero-pop .8s cubic-bezier(.2,.7,.2,1) both .25s; }
    .intro-slide.active .im-hero-tag { animation: im-fade-up .5s cubic-bezier(.2,.7,.2,1) both .55s; }
    .intro-slide.active .im-pair-cell { animation: im-fade-up .5s cubic-bezier(.2,.7,.2,1) both; }
    .intro-slide.active .im-pair-cell:nth-child(1) { animation-delay: .65s; }
    .intro-slide.active .im-pair-cell:nth-child(2) { animation-delay: .75s; }
    .intro-slide.active .im-pair-cell:nth-child(3) { animation-delay: .85s; }
    .intro-slide.active .im-mini-price { animation: im-line-draw 1.2s cubic-bezier(.2,.7,.2,1) forwards .8s; }
    .intro-slide.active .im-mini-signal { animation: im-line-draw 1.4s cubic-bezier(.2,.7,.2,1) forwards 1s; }

    @media (prefers-reduced-motion: reduce) {
      .intro-overlay, .intro-slide { transition: none !important; }
      .intro-slide.active * { animation: none !important; }
      .intro-slide.active .im-sp-line,
      .intro-slide.active .im-line,
      .intro-slide.active .im-mms-line,
      .intro-slide.active .im-fund-signal,
      .intro-slide.active .im-fund-price,
      .intro-slide.active .im-mini-price,
      .intro-slide.active .im-mini-signal { stroke-dashoffset: 0 !important; }
      .intro-slide.active .im-heat-cell { opacity: 1 !important; transform: scale(1) !important; }
      .intro-slide.active .im-bar-fill { width: var(--w, 50%) !important; }
    }

    /* AI차트 — Coinbase Prices style 목록 (다크 모드 친화) */
    .ai-chart-list-view { padding: 12px 8px 16px; }
    /* AI차트 목록 로딩 스켈레톤 — 전부 채워질 때까지 표시(순차 '—' 채움 대체) */
    .cb-tk-sk { display: flex; align-items: center; gap: 12px; padding: 12px 10px; }
    .cb-tk-sk .cb-nm { display: flex; flex-direction: column; gap: 6px; flex: 1; }
    .cb-sk { display: block; background: var(--sep, #e9ecef); border-radius: 6px;
             animation: cbSkPulse 1.1s ease-in-out infinite; }
    .cb-sk-c { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
    .cb-sk-l1 { width: 88px; height: 13px; }
    .cb-sk-l2 { width: 52px; height: 11px; }
    .cb-sk-sp { width: 80px; height: 20px; }
    .cb-sk-p  { width: 62px; height: 14px; margin-left: auto; }
    @keyframes cbSkPulse { 0%,100%{opacity:.4} 50%{opacity:.75} }
    .ai-chart-list-view .cb-top {
      display: grid; grid-template-columns: 1fr;
      align-items: center; gap: 10px;
      padding: 6px 10px 14px;
    }
    .ai-chart-list-view .cb-top button {
      background: none; border: 0; cursor: pointer; color: var(--text);
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      font-family: inherit; padding: 0;
      border-radius: 10px;
    }
    .ai-chart-list-view .cb-top button:hover { background: var(--sep); }
    .ai-chart-list-view .cb-top button svg { width: 22px; height: 22px; }
    .ai-chart-list-view .cb-grid-ico {
      display: grid; grid-template-columns: repeat(3, 4px); gap: 3px;
    }
    .ai-chart-list-view .cb-grid-ico i {
      width: 4px; height: 4px; background: currentColor; border-radius: 1px; display: block;
    }
    .ai-chart-list-view .cb-search {
      background: var(--card); border: 1px solid var(--sep);
      border-radius: 999px; padding: 8px 16px;
      display: flex; align-items: center; gap: 8px;
      color: var(--sub); font-size: 14px; font-weight: 500;
      flex: 1; min-width: 0;
    }
    .ai-chart-list-view .cb-search svg { width: 14px; height: 14px; flex-shrink: 0; }
    .ai-chart-list-view .cb-search input {
      background: transparent; border: 0; outline: none;
      color: var(--text); font: inherit; flex: 1; min-width: 0;
      padding: 2px 0;
    }
    .ai-chart-list-view .cb-search input::placeholder { color: var(--sub); }
    .ai-chart-list-view .cb-tk.aichart-filtered { display: none; }
    .ai-chart-list-view .cb-no-result {
      padding: 20px 16px; text-align: center; color: var(--sub); font-size: 13px;
    }
    .ai-chart-list-view .cb-prices-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px 12px;
    }
    .ai-chart-list-view .cb-prices-head h2 {
      font-size: 26px; font-weight: 800; letter-spacing: -0.03em;
      color: var(--text);
    }
    .ai-chart-list-view .cb-filter-pill {
      background: var(--card); border: 1px solid var(--sep); cursor: pointer;
      font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text);
      padding: 8px 14px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ai-chart-list-view .cb-filter-pill::after { content: '▾'; font-size: 10px; color: var(--sub); margin-left: 4px; }
    .ai-chart-list-view .cb-sort-wrap { position: relative; }
    .ai-chart-list-view .cb-sort-menu {
      position: absolute; top: calc(100% + 6px); right: 0;
      background: var(--bg); border: 1px solid var(--sep); border-radius: 12px;
      list-style: none; padding: 4px; margin: 0;
      min-width: 140px; z-index: 30;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    .ai-chart-list-view .cb-sort-menu[hidden] { display: none; }
    .ai-chart-list-view .cb-sort-menu li {
      padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
      color: var(--text); cursor: pointer; user-select: none;
    }
    .ai-chart-list-view .cb-sort-menu li:hover { background: var(--card); }
    .ai-chart-list-view .cb-sort-menu li.on {
      background: var(--accent, #FF8C00); color: #fff;
    }

    .ai-chart-list-view .cb-ticker-list { padding: 2px 0 10px; }
    .ai-chart-list-view .cb-tk {
      display: grid; grid-template-columns: auto 1fr auto auto;
      align-items: center; gap: 12px;
      padding: 12px 14px; cursor: pointer;
      border-radius: 10px;
      transition: background 0.15s;
    }
    .ai-chart-list-view .cb-tk:hover { background: var(--card); }
    .ai-chart-list-view .cb-ico {
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-weight: 800; font-size: 13px;
      letter-spacing: -0.02em;
    }
    .ai-chart-list-view .cb-nm { display: flex; flex-direction: column; line-height: 1.2; }
    .ai-chart-list-view .cb-nm .cb-t {
      font-size: 15.5px; font-weight: 800; color: var(--text); letter-spacing: -0.01em;
    }
    .ai-chart-list-view .cb-nm .cb-s { font-size: 12.5px; font-weight: 500; color: var(--sub); margin-top: 2px; }
    .ai-chart-list-view .cb-spark { width: 80px; height: 34px; }
    .ai-chart-list-view .cb-price {
      display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    }
    .ai-chart-list-view .cb-price .cb-p {
      font-size: 14.5px; font-weight: 700; color: var(--text); font-feature-settings: 'tnum';
    }
    .ai-chart-list-view .cb-price .cb-d {
      font-size: 12px; font-weight: 700;
      padding: 3px 8px; border-radius: 6px;
      display: inline-flex; align-items: center; gap: 2px;
    }
    .ai-chart-list-view .cb-price .cb-d.up { color: #EF4444; background: rgba(239,68,68,0.16); }
    .ai-chart-list-view .cb-price .cb-d.down { color: #3B82F6; background: rgba(59,130,246,0.18); }

    .ai-chart-list-view .cb-see-all {
      padding: 14px 14px 4px; display: flex; justify-content: center;
    }
    .ai-chart-list-view .cb-see-all button {
      background: var(--card); border: 1px solid var(--sep); cursor: pointer;
      font-family: inherit; font-size: 14px; font-weight: 700; color: var(--text);
      padding: 14px 0; width: 100%; border-radius: 999px;
    }
    .ai-chart-list-view .cb-see-all button:hover { background: var(--sep); }

    .ai-chart-back {
      background: none; border: 0; cursor: pointer; color: var(--text);
      font-family: inherit; font-size: 14px; font-weight: 700;
      padding: 10px 12px; margin: 4px 0 8px;
      border-radius: 10px;
    }
    .ai-chart-back:hover { background: var(--card); }

    .ai-chart-list-view .cb-tk.aichart-hidden { display: none; }

    /* ── list ↔ detail 전환 애니메이션 ─────────────────────────────── */
    @keyframes aiSlideInRight {
      from { opacity: 0; transform: translateX(28px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes aiSlideOutLeft {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(-28px); }
    }
    @keyframes aiSlideInLeft {
      from { opacity: 0; transform: translateX(-28px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes aiSlideOutRight {
      from { opacity: 1; transform: translateX(0); }
      to   { opacity: 0; transform: translateX(28px); }
    }
    .ai-anim-in-right  { animation: aiSlideInRight 240ms cubic-bezier(.2,.7,.2,1) both; }
    .ai-anim-in-left   { animation: aiSlideInLeft  240ms cubic-bezier(.2,.7,.2,1) both; }
    .ai-anim-out-left  { animation: aiSlideOutLeft 180ms cubic-bezier(.4,0,1,1) both; }
    .ai-anim-out-right { animation: aiSlideOutRight 180ms cubic-bezier(.4,0,1,1) both; }

    /* ── 디자인 사양 키프레임 (home-a.html) ─────────────────────── */
    @keyframes ai-fade-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @keyframes ai-scale-in  { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
    @keyframes ai-line-draw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
    @keyframes ai-pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } }

    /* ── List view: row stagger + sparkline line-draw ───────────── */
    @keyframes ai-spark-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
    .ai-chart-list-view .cb-tk {
      animation: ai-fade-up .45s cubic-bezier(.2,.7,.2,1) both;
    }
    .ai-chart-list-view .cb-tk .cb-spark polyline {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: ai-spark-draw 2.2s cubic-bezier(.4,.0,.2,1) forwards;
    }

    /* ── Detail view: 디자인 캐스케이드 (replay 클래스로 재트리거) ─ */
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip {
      animation: ai-fade-up .4s cubic-bezier(.2,.7,.2,1) both;
    }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(1)  { animation-delay: .04s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(2)  { animation-delay: .08s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(3)  { animation-delay: .12s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(4)  { animation-delay: .16s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(5)  { animation-delay: .20s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(6)  { animation-delay: .24s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(7)  { animation-delay: .28s; }
    .ai-chart-detail-view.aiv-replay .chart-ticker-chips .chart-tk-chip:nth-child(8)  { animation-delay: .32s; }
    .ai-chart-detail-view.aiv-replay .chart-price-header {
      animation: ai-fade-up .5s cubic-bezier(.2,.7,.2,1) both;
    }
    .ai-chart-detail-view.aiv-replay .chart-top-stats .stat-cell {
      animation: ai-fade-up .45s cubic-bezier(.2,.7,.2,1) both;
    }
    .ai-chart-detail-view.aiv-replay .chart-top-stats .stat-cell:nth-child(1) { animation-delay: .16s; }
    .ai-chart-detail-view.aiv-replay .chart-top-stats .stat-cell:nth-child(2) { animation-delay: .22s; }
    .ai-chart-detail-view.aiv-replay .chart-top-stats .stat-cell:nth-child(3) { animation-delay: .28s; }
    .ai-chart-detail-view.aiv-replay .chart-interval-bar {
      animation: ai-fade-up .45s cubic-bezier(.2,.7,.2,1) both .12s;
    }
    .ai-chart-detail-view.aiv-replay .chart-similar-controls {
      animation: ai-fade-up .5s cubic-bezier(.2,.7,.2,1) both .30s;
    }
    .ai-chart-detail-view.aiv-replay .card.chart-combined {
      animation: ai-fade-up .55s cubic-bezier(.2,.7,.2,1) both .15s;
    }
    /* 동적 SVG: chart.js 가 #candle-chart 안에 rect/polyline 생성 시점에서 애니메이션이 자연 발동 */
    .ai-chart-detail-view.aiv-replay #candle-chart rect {
      animation: ai-scale-in .4s cubic-bezier(.2,.7,.2,1) both;
      transform-origin: center bottom;
    }
    .ai-chart-detail-view.aiv-replay #candle-chart rect:nth-child(3n)   { animation-delay: .05s; }
    .ai-chart-detail-view.aiv-replay #candle-chart rect:nth-child(3n+1) { animation-delay: .12s; }
    .ai-chart-detail-view.aiv-replay #candle-chart rect:nth-child(3n+2) { animation-delay: .20s; }
    .ai-chart-detail-view.aiv-replay #candle-chart polyline,
    .ai-chart-detail-view.aiv-replay #candle-chart path.ma-line {
      stroke-dasharray: 800;
      stroke-dashoffset: 800;
      animation: ai-line-draw 1.3s cubic-bezier(.2,.7,.2,1) forwards .4s;
    }
    .ai-chart-detail-view.aiv-replay #volume-chart rect {
      animation: ai-scale-in .35s cubic-bezier(.2,.7,.2,1) both;
      transform-origin: center bottom;
    }
    .ai-chart-detail-view.aiv-replay #volume-chart rect:nth-child(odd)  { animation-delay: .10s; }
    .ai-chart-detail-view.aiv-replay #volume-chart rect:nth-child(even) { animation-delay: .18s; }
    .ai-chart-detail-view.aiv-replay .chart-range-section {
      animation: ai-fade-up .5s cubic-bezier(.2,.7,.2,1) both .3s;
    }
    .ai-chart-detail-view .chart-range-section .range-marker,
    .ai-chart-detail-view .chart-range-section .range-track-marker,
    .ai-chart-detail-view .chart-range-section .range-current-marker {
      animation: ai-pulse-dot 2s ease-in-out infinite;
      transform-origin: center;
    }
    .ai-chart-detail-view.aiv-replay .disclaimer {
      animation: ai-fade-up .5s cubic-bezier(.2,.7,.2,1) both .7s;
    }

    /* ── 유사 패턴 카드 열기 애니메이션 ─────────────────────────── */
    /* host innerHTML 매 토글마다 wipe/rewrite → 자연 재트리거 */
    #similar-cards-host > div {
      animation: ai-fade-up .45s cubic-bezier(.2,.7,.2,1) both;
    }
    #similar-cards-host > div:nth-child(1) { animation-delay: .00s; }
    #similar-cards-host > div:nth-child(2) { animation-delay: .10s; }
    #similar-cards-host > div:nth-child(3) { animation-delay: .20s; }
    #similar-cards-host > div:nth-child(4) { animation-delay: .30s; }
    #similar-cards-host > div:nth-child(5) { animation-delay: .40s; }
    #similar-cards-host > div:nth-child(6) { animation-delay: .50s; }
    #similar-cards-host > div:nth-child(7) { animation-delay: .60s; }
    /* 미니 SVG path: 매칭 실선만 좌→우 line-draw (후속 점선은 inline dasharray 보존 위해 제외) */
    #similar-cards-host > div svg path:not([stroke-dasharray]) {
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      animation: ai-line-draw 1.1s cubic-bezier(.2,.7,.2,1) forwards;
    }
    #similar-cards-host > div:nth-child(1) svg path:not([stroke-dasharray]) { animation-delay: .25s; }
    #similar-cards-host > div:nth-child(2) svg path:not([stroke-dasharray]) { animation-delay: .35s; }
    #similar-cards-host > div:nth-child(3) svg path:not([stroke-dasharray]) { animation-delay: .45s; }
    #similar-cards-host > div:nth-child(4) svg path:not([stroke-dasharray]) { animation-delay: .55s; }
    #similar-cards-host > div:nth-child(5) svg path:not([stroke-dasharray]) { animation-delay: .65s; }
    #similar-cards-host > div:nth-child(6) svg path:not([stroke-dasharray]) { animation-delay: .75s; }
    #similar-cards-host > div:nth-child(7) svg path:not([stroke-dasharray]) { animation-delay: .85s; }
    /* 후속(점선) path 는 부모 fade-up 으로 자연 등장 + inline dasharray="3,3" 점선 유지 */

    /* 요약 박스 (summary) 숫자 카운트업 느낌 — fade-up 으로 대체 */

    @media (prefers-reduced-motion: reduce) {
      #similar-cards-host > div { animation: none !important; }
      #similar-cards-host > div svg path:not([stroke-dasharray]) {
        animation: none !important;
        stroke-dasharray: 0 !important;
        stroke-dashoffset: 0 !important;
      }
    }

    /* ── card press feedback ──────────────────────────────────── */
    .ai-chart-list-view .cb-tk {
      transition: transform 120ms ease, background 160ms ease;
    }
    .ai-chart-list-view .cb-tk:active {
      transform: scale(0.985);
      background: var(--sep);
    }

    /* ── back button hover/press ──────────────────────────────── */
    .ai-chart-back { transition: background 140ms ease, transform 120ms ease; }
    .ai-chart-back:active { transform: translateX(-2px); }

    /* ── reduced motion: 모션 사용자 설정 존중 ─────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .ai-chart-list-view *, .ai-chart-detail-view * {
        animation: none !important;
        transition: none !important;
      }
      .ai-chart-list-view .cb-tk .cb-spark polyline { stroke-dashoffset: 0 !important; }
      .ai-chart-detail-view #candle-chart polyline,
      .ai-chart-detail-view #candle-chart path.ma-line { stroke-dashoffset: 0 !important; }
    }
    /* 분석 상세 진입 애니메이션 — 컨테이너 페이드+라이즈 + 직계 자식 스태거(transform만, 콘텐츠 숨김 없음) */
    main.content.vw-anim{animation:vwIn .42s cubic-bezier(.2,.7,.3,1) both}
    @keyframes vwIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    main.content.vw-anim > *{animation:vwChild .5s cubic-bezier(.2,.7,.3,1) both}
    main.content.vw-anim > *:nth-child(1){animation-delay:.03s}
    main.content.vw-anim > *:nth-child(2){animation-delay:.08s}
    main.content.vw-anim > *:nth-child(3){animation-delay:.13s}
    main.content.vw-anim > *:nth-child(4){animation-delay:.18s}
    main.content.vw-anim > *:nth-child(n+5){animation-delay:.22s}
    @keyframes vwChild{from{transform:translateY(8px)}to{transform:none}}
    @media (prefers-reduced-motion: reduce){main.content.vw-anim,main.content.vw-anim > *{animation:none}}