/* [2026-08-24] S-Class/실시간피드 탭 + AI매매일지 섹션 — sorce/리뉴얼/webstocks_download
   최종 시안을 이식. 원본은 --blue(#1768e5)를 주 액센트로 썼으나, 오늘 사이트 전역에
   확정한 --brand-accent(노랑) 체계에 맞춰 리매핑(사람 지시: "토큰화는 됐으니까 메인만
   맞추면 됨"). 클래스는 전부 jm- 접두사로 격리(기존 .card/.tabs/.state 등과 충돌 방지). */
/* [2026-08-24] 최상단 SENTINEL 바 — 공유 헤더(.layout-header, position:fixed)가 top:0을
   차지하므로, 이 바를 헤더보다 위(z-index 더 높음)에 고정하고 헤더 자체를 바 높이만큼
   내림(!important로 v12_layout.css보다 확실히 우선). 이 셸(app.html)에서만 로드되는
   파일이라 다른 25개 페이지에는 영향 없음. */
.jm-sentinel { position: fixed; top: 0; left: 0; width: 100%; height: 32px; z-index: 10000; background: #071c37; color: #c8d7ea; font-size: 10px; letter-spacing: .14em; display: flex; align-items: center; justify-content: center; gap: 9px; }
.jm-sentinel i { width: 7px; height: 7px; border-radius: 50%; background: #35dfa8; box-shadow: 0 0 0 4px rgba(53,223,168,.13); }
.jm-sentinel span { position: absolute; right: 20px; color: #7288a4; }
body .layout-header { top: 32px !important; }
.premium-hero { padding-top: 132px !important; }
@media (max-width: 640px) {
    .jm-sentinel span { display: none; }
    .premium-hero { padding-top: 102px !important; }
}

/* 히어로 CTA(#monitor,#journal)가 고정 SENTINEL바+헤더(112px) 밑으로 스크롤 정렬되도록 */
.jm-monitor, .jm-journal { scroll-margin-top: 112px; }
@media (max-width: 640px) {
    .jm-monitor, .jm-journal { scroll-margin-top: 92px; }
}

.jm-monitor, .jm-journal { padding: 56px 0 64px; }
.jm-monitor { background: #f3f7fb; border-top: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; }
.jm-shell { width: min(1180px, calc(100% - 40px)); margin: auto; }

.jm-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.jm-section-head .jm-kicker { color: var(--brand-accent-deep, #b45309); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.jm-section-head h2 { font-size: 28px; letter-spacing: -1px; margin: 10px 0 6px; color: #15203a; }
.jm-section-head p { margin: 0; color: #6f7f94; font-size: 13px; line-height: 1.6; }
.jm-updated { text-align: right; color: #8190a3; font-size: 10px; }
.jm-updated b { display: block; color: #334862; margin: 4px 0; }
.jm-updated span { display: inline-block; background: #e7f8f2; color: #07815c; padding: 4px 8px; border-radius: 6px; font-weight: 700; }

.jm-workspace { background: #fff; border: 1px solid #dfe7f0; border-radius: 20px; box-shadow: 0 16px 40px rgba(25,40,70,.06); overflow: hidden; }
.jm-tabs { display: grid; grid-template-columns: 1fr 1fr; background: #f8fafc; padding: 8px 8px 0; border-bottom: 1px solid #e8edf3; }
.jm-tabs button { height: 72px; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 0 18px; color: #6f7f94; text-align: left; position: relative; cursor: pointer; font: inherit; }
.jm-tabs button.active { background: #fff; color: #15203a; }
.jm-tabs button.active:after { content: ""; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px; background: var(--brand-accent, #facc15); border-radius: 3px 3px 0 0; }
.jm-tabs button > b { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-accent, #facc15); color: #374151; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.jm-tabs button span { display: flex; flex-direction: column; gap: 3px; }
.jm-tabs button span small { font-size: 10px; color: #8a98aa; font-weight: 500; }
.jm-tabs button > i { margin-left: auto; font-style: normal; background: #fef3c7; color: #92400e; padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; }

.jm-labels, .jm-feed-row { display: grid; grid-template-columns: 110px 1fr 84px 96px; gap: 14px; align-items: center; }
.jm-labels { height: 36px; padding: 0 20px; color: #95a1af; font-size: 9px; letter-spacing: .08em; border-bottom: 1px solid #edf1f5; }
/* [2026-08-24] jm-feed-row가 <div>에서 <a>로 바뀌면서(클릭 연동, 전달.md) 생기는
   기본 <a> 스타일(파란 밑줄) 리셋 — display:grid는 위 규칙이 태그 무관하게 이미 적용함. */
.jm-feed-row { min-height: 84px; padding: 14px 20px; border-bottom: 1px solid #edf1f5; color: inherit; text-decoration: none; }
.jm-feed-row:last-child { border-bottom: 0; }
.jm-feed-ticker { font-size: 16px; font-weight: 900; color: #15203a; }
.jm-feed-copy small { display: block; font-size: 9px; color: #98a4b2; margin-bottom: 3px; }
.jm-feed-copy h3 { margin: 0; font-size: 14px; font-weight: 700; color: #34475f; line-height: 1.4; }
.jm-feed-metric { text-align: right; }
.jm-feed-metric label { display: block; color: #9ea9b6; font-size: 8.5px; font-weight: 900; letter-spacing: .06em; }
.jm-feed-metric b { display: block; margin-top: 3px; font-size: 14px; color: var(--brand-accent-deep, #b45309); }
.jm-feed-metric.jm-market b { color: #12a977; }
.jm-feed-state { padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; margin-right: 8px; }
.jm-feed-state.sclass { color: var(--brand-accent-deep, #b45309); background: #fef3c7; }
.jm-feed-state.watching { color: #07815c; background: #e7f8f2; }
.jm-feed-state.analyzing { color: #9b7000; background: #fff4d5; }
/* [2026-08-25] S-Class란?/Live Feed란? 배지 이전 수용 — 좌측 안내문/우측 배지 그룹 flex */
.jm-feed-foot { padding: 18px 20px; color: #718097; font-size: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.jm-feed-foot-links { display: inline-flex; align-items: center; gap: 4px; }
.jm-feed-empty { padding: 32px 20px; text-align: center; color: #9aa5b2; font-size: 12px; }

.jm-journal-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.jm-journal-head a { font-size: 11px; font-weight: 700; color: #50647d; border-bottom: 1px solid #9da8b6; padding-bottom: 5px; }
.jm-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* [2026-08-24] 카드 전체를 <a>로 감싸 클릭 연동(전달.md, 기존엔 하단 "복기 상세 보기"
   텍스트에만 링크가 있어 카드 본문을 눌러도 안 넘어갔음) — <article> 기본 block이 <a>
   기본 inline으로 바뀌는 것 보정 + 밑줄/링크색 리셋. */
.jm-journal-card { display: block; border: 1px solid #e8edf3; border-radius: 18px; padding: 20px; box-shadow: 0 8px 22px rgba(25,40,70,.04); border-top: 3px solid #8b5cf6; background: #fff; color: inherit; text-decoration: none; }
.jm-journal-card.green { border-top-color: #10b981; }
.jm-journal-card.red { border-top-color: #ef5b64; }
.jm-jc-header { display: flex; align-items: center; justify-content: space-between; }
.jm-jc-header b { font-size: 9px; background: #f1ebff; color: #7442d2; padding: 4px 7px; border-radius: 5px; font-weight: 800; }
.jm-journal-card.green .jm-jc-header b { background: #e7f8f2; color: #07815c; }
.jm-journal-card.red .jm-jc-header b { background: #fff0f1; color: #c43c46; }
.jm-jc-header time { font-size: 9px; color: #9aa5b2; }
.jm-jc-stock { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.jm-jc-stock i { width: 38px; height: 38px; border-radius: 10px; background: #071c37; color: var(--brand-accent, #facc15); display: grid; place-items: center; font-style: normal; font-weight: 800; }
.jm-jc-stock span { display: flex; flex-direction: column; }
.jm-jc-stock strong { font-size: 14px; }
.jm-jc-stock small { font-size: 9px; color: #91a0b1; }
.jm-jc-stock em { margin-left: auto; font-style: normal; font-weight: 800; color: #8b5cf6; }
.jm-journal-card.green .jm-jc-stock em { color: #10a775; }
.jm-journal-card.red .jm-jc-stock em { color: #e14b55; }
.jm-journal-card h3 { font-size: 14px; line-height: 1.4; margin: 16px 0 8px; color: #15203a; }
.jm-journal-card > p { font-size: 14px; line-height: 1.65; color: #748398; min-height: 58px; margin: 0; }
.jm-jc-price { margin-top: 12px; background: #f7f9fc; border-radius: 10px; padding: 10px 12px; color: #8491a2; font-size: 14px; display: flex; justify-content: space-between; }
.jm-jc-price b { color: #354960; font-size: 14px; display: block; }
.jm-notice { margin-top: 18px; padding: 13px 16px; border: 1px solid #e8edf3; background: #fafbfd; border-radius: 12px; color: #7a8797; font-size: 9px; }
.jm-notice b { color: #4c5e75; margin-right: 14px; }

@media (max-width: 900px) {
    .jm-journal-grid { grid-template-columns: 1fr; }
    .jm-journal-card > p { min-height: auto; }
}
@media (max-width: 640px) {
    .jm-labels { display: none; }
    .jm-feed-row { grid-template-columns: 60px 1fr 66px; padding: 13px 14px; }
    .jm-feed-metric.jm-score { display: none; }
    .jm-tabs button span small { display: none; }
    .jm-section-head { display: block; }
    .jm-updated { display: none; margin-top: 8px; }
}