/* 내 관심 브리핑 — 홈 카루셀 + 종목 AI요약 모달. Toss 구조 + Karrot 오렌지, 등락 빨강/파랑. */

/* ── 홈 카루셀 ── */
.wb-box { padding: 2px 0 2px; }
.wb-track {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wb-track::-webkit-scrollbar { display: none; }
.wb-chip {
  flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wb-chip:active { opacity: .7; }
.wb-ring {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  padding: 3px; box-sizing: border-box;
  background: linear-gradient(150deg, #7ed957 0%, #4a9ff0 100%);
  display: flex; align-items: center; justify-content: center;
}
.wb-logo {
  width: 100%; height: 100%; border-radius: 50%; object-fit: contain;
  background: #fff; display: block;
}
.wb-logo-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--sub, #868b94);
}
.wb-nbadge {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px;
  border-radius: 50%; background: #22c55e; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  border: 2px solid var(--bg, #fff); box-sizing: content-box;
}
.wb-nm {
  font-size: 13px; font-weight: 700; color: var(--text, #212124);
  max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.wb-chg { font-size: 13px; font-weight: 800; }

/* ── 모달 ── */
.wb-modal {
  position: fixed; inset: 0; z-index: 1300; display: none;
  background: rgba(10, 12, 16, .78); align-items: center; justify-content: center; padding: 12px;
}
.wb-modal.on { display: flex; }
.wb-m-sheet {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh;
  display: flex; flex-direction: column;
}
.wb-m-x {
  position: absolute; top: -2px; right: 0; z-index: 2;
  background: none; border: 0; color: #fff; font-size: 20px; cursor: pointer; padding: 4px 8px;
}
/* 상단 스트립(어두운 배경 위 칩) */
.wb-m-strip {
  display: flex; gap: 16px; overflow-x: auto; padding: 34px 6px 16px;
  scrollbar-width: none;
}
.wb-m-strip::-webkit-scrollbar { display: none; }
.wb-m-strip .wb-chip { opacity: .45; }
.wb-m-strip .wb-chip.sel { opacity: 1; }
.wb-m-strip .wb-nm { color: #f4f5f7; }
.wb-m-strip .wb-nbadge { border-color: #14161c; }
/* 선택 칩 링 강조 */
.wb-m-strip .wb-chip.sel .wb-ring { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }

/* 흰 카드 */
.wb-m-card {
  background: #fff; border-radius: 20px; padding: 22px 20px 18px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.wb-m-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wb-m-nm { font-size: 24px; font-weight: 800; color: #191f28; letter-spacing: -.02em; }
.wb-m-detail { background: none; border: 0; color: #868b94; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wb-m-px { display: flex; align-items: baseline; gap: 9px; margin: 8px 0 4px; }
.wb-m-px > span:first-child { font-size: 20px; font-weight: 800; color: #191f28; }
.wb-m-px > span:last-child { font-size: 15px; font-weight: 800; }
.wb-m-tabs { display: flex; gap: 20px; border-bottom: 1px solid #eef0f3; margin: 14px 0 0; }
.wb-m-tab {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-size: 16px; font-weight: 800; color: #b0b4bb; position: relative;
}
.wb-m-tab.on { color: #191f28; }
.wb-m-tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #191f28; border-radius: 2px;
}
.wb-m-body { padding: 16px 0 4px; min-height: 90px; }
.wb-m-eb { font-size: 14px; font-weight: 800; color: #8a93a0; margin-bottom: 12px; }
.wb-m-h3 { font-size: 18px; font-weight: 800; color: #191f28; margin: 0 0 12px; line-height: 1.4; letter-spacing: -.01em; }
.wb-m-p { font-size: 15.5px; line-height: 1.72; color: #333d4b; margin: 0; white-space: pre-wrap; }
.wb-m-soon { padding: 26px 0; text-align: center; color: #8a93a0; font-size: 14px; font-weight: 600; }
.wb-m-disc { margin-top: 14px; font-size: 11px; color: #b0b4bb; line-height: 1.5; }
.wb-m-card .wb-load { height: 80px; }

/* 유니버스 밖 종목 — AI요약 대신 관련 뉴스 리스트 */
.wb-m-news { display:block; padding:11px 0; border-bottom:1px solid #f1f3f5; text-decoration:none; }
.wb-m-news:active { opacity:.6; }
.wb-m-news-t { font-size:14.5px; font-weight:700; color:#333d4b; line-height:1.5; }
.wb-m-news-s { font-size:12px; color:#8a93a0; margin-top:3px; }

/* 카루셀 로딩 스켈레톤 — 칩 모양(원형+이름줄+등락줄) 펄스 */
.wb-skel .wb-chip { pointer-events: none; }

.wb-ring.wb-sk { border-radius: 50%; background: var(--card, #eef0f3); }

/* AI요약 로딩 스피너 (가운데) */
.wb-m-spin { display: flex; align-items: center; justify-content: center; padding: 34px 0; }
.wb-m-spin .hp-spin { width: 26px; height: 26px; border-width: 3px; }

/* 관심/핫이슈 브리핑 로딩 스피너(가운데) */
.wb-loadspin { display:flex; align-items:center; justify-content:center; min-height:88px; }
.wb-loadspin .hp-spin { width:24px; height:24px; border-width:3px; }