/* ==========================================================
   FlowPulse — 시장 시그널 대시보드 테마 (결론 중심 UI)
   ========================================================== */

@import url('fp-exit-modal.css');

:root {
  --bg:        #0d1117;
  --header:    #050814;
  --surface:   #161b22;
  --surface2:  #1c2230;
  --border:    #30363d;
  --text:      #e6edf3;
  --muted:     #8b949e;
  --green:     #39d353;
  --accent:    #1f6feb;
  --danger:    #f85149;
  --warn:      #e3b341;
  --radius:    8px;
  --orange:    #ff8c00;

  --risk-high:        var(--danger);
  --risk-mid:         var(--warn);
  --risk-low:         var(--green);
  --bull:             var(--green);
  --bear:             var(--danger);
  --neutral:          #8b949e;
  --gauge-track:      #1e2535;
  --disclaimer-color: #2e3642;
  --hover-overlay:    rgba(255,255,255,0.03);
  --fp-safe-top-dyn: 0px;
  --fp-safe-right-dyn: 0px;
  --fp-safe-bottom-dyn: 0px;
  --fp-safe-left-dyn: 0px;
  --fp-safe-top: max(env(safe-area-inset-top, 0px), var(--fp-safe-top-dyn));
  --fp-safe-right: max(env(safe-area-inset-right, 0px), var(--fp-safe-right-dyn));
  --fp-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--fp-safe-bottom-dyn));
  --fp-safe-left: max(env(safe-area-inset-left, 0px), var(--fp-safe-left-dyn));
  --fp-header-h: calc(52px + var(--fp-safe-top));
  --fp-authority-h: 26px;
  --fp-section-nav-h: 36px;
  --fp-topbar-top: calc(var(--fp-header-h) + var(--fp-authority-h));
  --fp-topbar-top-with-urgency: calc(var(--fp-topbar-top) + 40px);
}

/* 라이트 테마 제거 — 다크 모드만 사용 */

* { margin: 0; padding: 0; box-sizing: border-box; overflow-wrap: break-word; word-break: keep-all; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea { user-select: text; -webkit-user-select: text; }

html {
  height: 100%;
  /* html은 세로 스크롤 차단 → body가 스크롤 컨테이너가 되어 Android WebView CSS 스크롤바 적용 가능 */
  overflow: hidden;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
}

body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  /* body가 스크롤 컨테이너 — Android WebView에서 ::-webkit-scrollbar 적용됨 */
  overflow-y: scroll;
  overscroll-behavior-y: none;
}

/* 메인 대시보드(/index)만 브라우저·WebView 기본 당김 새로고침 허용 */
html.fp-pull-refresh body {
  overscroll-behavior-y: auto;
}

/* body 스크롤바 스타일 (Android WebView 포함) */
body::-webkit-scrollbar               { width: 4px; }
body::-webkit-scrollbar-track         { background: transparent; margin-top: var(--fp-header-h, 52px); }
body::-webkit-scrollbar-thumb         { background: rgba(99,110,130,.5); border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover   { background: rgba(99,110,130,.75); }

/* ── 포커스 아웃라인 제거 (마우스/터치/앱 클릭 시 청록 네모 제거) ───────── */
*:focus          { outline: none; }
*:focus-visible  { outline: none; }

/* ── 전역 스크롤바 ───────────────────────────────────────────────────────── */
::-webkit-scrollbar               { width: 4px; height: 4px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(99,110,130,.45); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(99,110,130,.7); }
::-webkit-scrollbar-corner        { background: transparent; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(99,110,130,.45) transparent; }

/* 숨김 처리된 기존 요소는 유지 */
.header-right              { scrollbar-width: none; }
.header-right::-webkit-scrollbar { display: none; }
.tab-nav                   { scrollbar-width: none; }
.tab-nav::-webkit-scrollbar      { display: none; }
.section-nav               { scrollbar-width: none; }
.section-nav::-webkit-scrollbar  { display: none; }
.sub-tab-nav               { scrollbar-width: none; }
.sub-tab-nav::-webkit-scrollbar  { display: none; }
.authority-bar             { scrollbar-width: none; }
.authority-bar::-webkit-scrollbar{ display: none; }

/* ── 가로 스크롤 유발 요소 방어 ─────────────────────────────────────────── */
/* 가로 스크롤 유발 요소 방어 */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* ==========================================================
   헤더
   ========================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--fp-safe-top) calc(20px + var(--fp-safe-right)) 0 calc(20px + var(--fp-safe-left));
  height: var(--fp-header-h);
  background: linear-gradient(90deg, #060e1e 0%, #050814 50%, #060c1a 100%);
  border-bottom: 1px solid rgba(0,180,255,0.18);
  box-shadow: 0 1px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(0,180,255,0.08) inset;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* 헤더 로고 (Flow_Pulse_logo 스타일) — 폰트 로드 전에도 첫 화면에서 보이도록 fallback 강화 */
.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  visibility: visible;
  opacity: 1;
}
.header-logo:hover { opacity: 0.9; }
.header-logo-emblem {
  display: flex;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(0,180,255,0.4));
  visibility: visible;
}
.header-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  visibility: visible;
}
/* 폰트 미로드 시에도 시스템 폰트로 바로 표시되도록 fallback 우선 */
.header-logo-flow {
  font-family: 'Rajdhani', 'JetBrains Mono', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #00C8FF;
  text-shadow: 0 0 8px rgba(0,200,255,0.5);
}
.header-logo-pulse {
  font-family: 'Exo 2', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #d8eef8;
  margin-top: 0;
}

.header-sub { font-size: 10px; color: rgba(0,200,255,0.38); line-height: 1; margin-left: 2px; letter-spacing: 0.04em; }

/* 중앙: 업데이트 시간 */
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.header-update {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.header-conn { font-size: 11px; font-weight: 600; white-space: nowrap; }
.conn-ok  { color: var(--green); }
.conn-err { color: var(--danger); }

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.header-right > * { flex-shrink: 0; white-space: nowrap; }
.header-right::-webkit-scrollbar { display: none; }
/* 헤더 스크롤 시 글자 잘림/줄바꿈 없이 화살표로 넘기기 */
.header-right .user-badge { max-width: none; overflow: visible; text-overflow: clip; }
/* 헤더 오른쪽 잘림 시 "탭 더 있음" 힌트 (JS가 .has-overflow-right 붙임) */
.header::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(to right, transparent 0%, #060e1e 60%);
  pointer-events: none;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0,180,255,0.9);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}
.header.has-overflow-right::after { opacity: 1; }

/* 티어 배지 */
.tier-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  border: 1px solid;
}
.tier-free    { color: var(--muted);  border-color: var(--border); background: transparent; }
.tier-basic   { color: var(--accent); border-color: rgba(31,111,235,0.4); background: rgba(31,111,235,0.08); }
.tier-premium { color: var(--warn);   border-color: rgba(227,179,65,0.4); background: rgba(227,179,65,0.08); }
.tier-guest   { color: var(--muted);  border-color: var(--border); background: rgba(139,148,158,0.08); }

.user-badge {
  font-size: 11px;
  color: #4de870;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(57,211,83,0.35);
}
.user-badge.guest { color: var(--muted); }
a.user-badge-link {
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  transition: background 0.15s, color 0.15s;
}
a.user-badge-link:hover {
  background: rgba(57,211,83,0.12);
  color: #5de87b;
}

.social-login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: visible;
  box-sizing: border-box;
}
.social-login-mark svg {
  display: block;
  flex-shrink: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.social-login-mark.social-google { background: #fff; }
.social-login-mark.social-naver { background: #03C75A; }
.social-login-mark.social-naver svg { width: 12px; height: 12px; }
.social-login-mark.social-kakao { color: #3c1e1e; background: #FEE500; }

.header-plan-link {
  font-size: 12px;
  color: rgba(230, 237, 243, 0.55);
  background: none;
  border: 1px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  padding: 3px 11px;
  text-decoration: none;
  font-family: inherit;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  white-space: nowrap;
}
.header-plan-link:hover {
  color: var(--text);
  border-color: rgba(0, 180, 255, 0.3);
  background: rgba(0, 180, 255, 0.06);
}

.btn-refresh {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s, filter 0.2s;
  white-space: nowrap;
  box-shadow: none;
}
.btn-refresh:hover {
  opacity: 1;
  filter: brightness(1.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-refresh:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* 수동 갱신 PREMIUM 전용 — BASIC/FREE 잠금 버튼 */
.btn-refresh--locked {
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: pointer;
  filter: none;
}
.btn-refresh--locked:hover {
  opacity: 1;
  border-color: rgba(248, 81, 73, 0.35);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.15);
  filter: none;
}
.btn-refresh--locked .refresh-lock-icon {
  font-size: 14px;
  line-height: 1;
  filter: grayscale(0.2);
}

#refreshIcon.spinning {
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-logout {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;          /* 모바일에서 눌리거나 숨겨지지 않도록 */
  min-width: max-content;  /* 터치 영역 확보 */
  touch-action: manipulation; /* 300ms 탭 딜레이 제거 */
}
.btn-logout:hover { color: var(--text); background: var(--surface); }

/* ==========================================================
   시장 차트 모달
   ========================================================== */

/* 타일 클릭 커서 + 호버 강조 */
.market-tile { cursor: pointer; }
.market-tile:hover {
  border-color: rgba(0,180,255,0.35);
  box-shadow: 0 0 0 1px rgba(0,180,255,0.1), 0 4px 16px rgba(0,0,0,0.3);
}

/* 모달 오버레이 */
.chart-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 모달 패널 */
.chart-modal-inner {
  position: relative;
  background: #0d1117;
  border: 1px solid rgba(0,180,255,0.2);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  padding: 24px 24px 20px;
  box-shadow: 0 0 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,180,255,0.06) inset;
}

/* 닫기 버튼 */
.chart-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.chart-modal-close:hover { color: var(--text); border-color: var(--accent); }

/* 헤더 */
.chart-modal-header  { margin-bottom: 16px; }
.chart-modal-title   { font-size: 16px; font-weight: 700; color: var(--muted); margin-bottom: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
.chart-modal-price-row { display: flex; align-items: baseline; gap: 10px; }
.chart-modal-price   { font-size: 28px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); letter-spacing: -0.02em; }
.chart-modal-change  { font-size: 14px; font-weight: 600; }

/* 기간 선택 바 */
.chart-period-bar {
  display: flex; align-items: center; gap: 4px; margin-bottom: 14px;
}
.chart-period-btn {
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  background: none; border: 1px solid var(--border);
  color: var(--muted); border-radius: 4px; cursor: pointer;
  letter-spacing: 0.06em; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chart-period-btn:hover  { color: var(--text); border-color: rgba(0,180,255,0.4); }
.chart-period-btn.active { color: #00c8ff; border-color: rgba(0,180,255,0.5); background: rgba(0,180,255,0.08); }
.chart-data-source { margin-left: auto; font-size: 10px; color: var(--muted); opacity: 0.55; }

/* 캔버스 영역 */
.chart-canvas-wrap {
  position: relative; height: 280px; margin-bottom: 16px;
  background: rgba(22,27,34,0.6);
  border-radius: 8px; border: 1px solid var(--border); overflow: hidden;
  overscroll-behavior: none;
}
#chartCanvas { width: 100% !important; height: 100% !important; touch-action: none; overscroll-behavior: none; }
.chart-loading {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
}
.chart-gesture-hint {
  display: none;
  margin: 8px 0 0; padding: 0;
  font-size: 11px; color: var(--muted);
  opacity: 0.8; text-align: center;
}

/* 기간 통계 */
.chart-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.chart-stat-item {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.chart-stat-lbl { font-size: 10px; color: var(--muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.chart-stat-val { font-size: 13px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; }

/* ==========================================================
   진행 바
   ========================================================== */

.progress-wrap {
  position: sticky;
  top: var(--fp-header-h);
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 7px 20px;
}
.progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
  margin-bottom: 5px;
}
.progress-msg { font-size: 11px; color: var(--muted); }

/* ==========================================================
   대시보드 섹션
   ========================================================== */

.dashboard {
  background: var(--header);
  border-bottom: 2px solid var(--border);
  padding: 14px 32px 10px;
}

/* 대시보드 툴바 (편집 버튼) */
.dashboard-toolbar {
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-end;
}
.btn-customize {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
}
.btn-customize:hover { color: var(--accent); border-color: var(--accent); }
.dashboard.edit-mode .btn-customize { color: var(--accent); border-color: var(--accent); background: rgba(0,180,255,0.08); }

/* 접기 블록 (상세 내역 접기) */
.collapse-block {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.collapse-block.hidden-by-user { display: none !important; }
.dashboard.edit-mode .collapse-block.hidden-by-user { display: block !important; opacity: 0.55; }
.collapse-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  user-select: none;
  transition: background 0.2s;
}
.collapse-block-head:hover { background: rgba(48,54,61,0.6); }
.collapse-block-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}
.collapse-block-chevron {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.25s ease;
}
.collapse-block.collapsed .collapse-block-chevron { transform: rotate(-90deg); }
.collapse-block-body {
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 10px 32px 12px;
}
.collapse-block.collapsed .collapse-block-body {
  max-height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none;
}
.collapse-block-body > .signal-section,
.collapse-block-body > .signal-action-row,
.collapse-block-body > .strategy-cta-block,
.collapse-block-body > .why-section,
.collapse-block-body > .whatif-section,
.collapse-block-body > .market-grid {
  margin-bottom: 0;
}
.collapse-order-btns {
  display: none;
  align-items: center;
  gap: 2px;
}
.dashboard.edit-mode .collapse-order-btns { display: flex; }
.order-btn {
  width: 24px;
  height: 22px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-btn:hover { color: var(--accent); border-color: var(--accent); }

.collapse-edit-label {
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 6px;
}
.dashboard.edit-mode .collapse-edit-label { display: flex; }
.collapse-edit-check { cursor: pointer; }

/* ── 1행: 3개 카드 ──────────────────────────────────────── */

.signal-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  gap: 10px;
  margin-bottom: 10px;
}

.signal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  transition: border-color 0.4s, box-shadow 0.4s;
}

/* GLOBAL RISK 카드 — risk 레벨별 상단 테두리 */
#card-risk.zone-high-card { border-top: 2px solid rgba(248,81,73,0.7); box-shadow: 0 -2px 12px rgba(248,81,73,0.12); }
#card-risk.zone-mid-card  { border-top: 2px solid rgba(227,179,65,0.6); box-shadow: 0 -2px 10px rgba(227,179,65,0.1); }
#card-risk.zone-low-card  { border-top: 2px solid rgba(57,211,83,0.6);  box-shadow: 0 -2px 10px rgba(57,211,83,0.1); }

/* GLOBAL RISK 카드 (게이지 포함 → 높이 고정) */
.signal-card-risk {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 8px;
}

.signal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
}
.signal-card-risk .signal-card-head { align-self: stretch; }

/* TODAY ACTION이 시그널 요약 내 3번째 카드로 들어갈 때 */
.signal-card-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
}
.signal-card-action .signal-action-row {
  margin-bottom: 0;
}

.signal-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.signal-card .signal-label { margin-bottom: 0; }

/* 도움말 버튼 (패널 우측 상단) */
.help-btn {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.help-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 180, 255, 0.08);
}
.help-btn-inline {
  margin-left: 6px;
  width: 16px;
  height: 16px;
  font-size: 10px;
  vertical-align: middle;
}

/* 도움말 팝오버 */
.help-popover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.help-popover-inner {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.help-popover-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.help-popover-close:hover { color: var(--text); background: var(--surface2); }
.help-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 12px 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}
.help-popover-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* 밸류에이션 정보 팝업 버튼 */
.info-icon-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: all 0.2s ease;
}
.info-icon-btn:hover {
    color: var(--text);
    border-color: var(--muted);
    background: var(--surface2);
}

/* 밸류에이션 도움말 모달 레이아웃 */
#valuationHelpModal.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
#valuationHelpModal .modal-content {
  background: var(--surface);
  border-radius: 10px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
}
#valuationHelpModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#valuationHelpModal .modal-title {
  margin: 0;
  font-size: 15px;
  color: var(--text);
}
#valuationHelpModal .modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
#valuationHelpModal .modal-close:hover {
  color: var(--text);
}

/* 매매일지 모달 */
#journalModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
}
#journalModal .modal-content {
  background: var(--surface);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border);
}
#journalModal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
#journalModal .modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
#journalModal .modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}
#journalModal .modal-close:hover { color: var(--text); }
#journalModal .modal-body { padding: 18px 20px 20px; }

/* 메모장 입력/확인 모달 — 사이트 다크 테마 */
.memo-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10001;
}
.memo-modal-content {
  background: #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
.memo-modal-header {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.memo-modal-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 20px;
  font-family: inherit;
}
.memo-modal-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
}
.memo-modal-input::placeholder { color: var(--muted); }
.memo-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.memo-modal-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s;
}
.memo-modal-btn-confirm {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 140, 0, 0.25);
}
.memo-modal-btn-confirm:hover {
  background: #ff9f33;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
}
.memo-modal-btn-cancel {
  background: #4a4a4a;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.memo-modal-btn-cancel:hover {
  background: #5a5a5a;
}
.memo-modal-btn-danger {
  background: var(--danger);
  color: #fff;
}
.memo-modal-btn-danger:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(248, 81, 73, 0.3);
}
.memo-modal-confirm .memo-modal-header { margin-bottom: 20px; }

/* 삭제 확인 모달: 메모 보기 팝업 위에 표시 */
#memoConfirmModal.memo-modal-overlay { z-index: 10003; }

/* 새 메모 작성 팝업 (제목 + 내용) */
.memo-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.memo-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.memo-modal-inner {
  background: #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 400px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  transform: scale(0.95);
  transition: transform 0.25s ease;
}
.memo-modal.show .memo-modal-inner {
  transform: scale(1);
}
.memo-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.memo-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.memo-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memo-form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.memo-form-input,
.memo-form-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.memo-form-input:focus,
.memo-form-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
}
.memo-form-input::placeholder,
.memo-form-textarea::placeholder { color: var(--muted); }
.memo-form-textarea {
  resize: vertical;
  min-height: 120px;
}
.memo-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.memo-modal-btn-save {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 140, 0, 0.25);
}
.memo-modal-btn-save:hover {
  background: #ff9f33;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
}

/* 메모 보기 팝업 */
.memo-view-modal-inner {
  min-width: 320px;
  max-width: 46vw;
  width: 45%;
  padding: 28px 32px;
  max-height: 88vh;
}
.memo-view-modal-inner .memo-modal-title {
  font-size: 20px;
  margin-bottom: 20px;
}
.memo-view-modal-inner #memoViewContent {
  min-height: 360px;
  font-size: 15px;
  line-height: 1.7;
  padding: 18px 20px;
}
.memo-view-modal-inner .memo-view-actions .notes-btn {
  padding: 12px 22px;
  font-size: 14px;
}
.memo-view-footer { display: flex; justify-content: flex-end; gap: 10px; }
.memo-view-actions { display: flex; gap: 10px; }

@media (max-width: 720px) {
  .memo-view-modal-inner {
    min-width: 0;
    max-width: 95%;
    width: 95%;
    padding: 20px;
  }
  .memo-view-modal-inner #memoViewContent { min-height: 260px; }
}

/* 메모장 인라인 새 메모 작성 */
.memo-editor-new .memo-form-group { margin-bottom: 0; }
.memo-actions-inline { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }

/* 플랜 구성 모달 (메인 요금제 보기) */
.plan-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.plan-compare-inner {
  position: relative;
  max-width: 560px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.plan-compare-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}
.plan-compare-close:hover { color: var(--text); background: var(--surface2); }
.plan-compare-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
}
.plan-compare-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 20px 0;
}
.plan-compare-desc .tier-badge { margin-left: 4px; }
.plan-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.plan-compare-card {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.plan-compare-card:hover {
  border-color: var(--accent);
}
.plan-compare-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31,111,235,0.25);
}
.plan-compare-card-basic {
  border-color: rgba(31,111,235,0.22);
  background: rgba(31,111,235,0.04);
}
.plan-compare-card-basic:hover {
  border-color: rgba(31,111,235,0.45);
}
.plan-compare-card-basic.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(31,111,235,0.22);
}
.plan-compare-card-premium {
  border: 2px solid rgba(201, 162, 39, 0.75);
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.1) 0%, var(--surface2) 42%);
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.12) inset,
    0 8px 28px rgba(201, 162, 39, 0.12);
}
.plan-compare-card-premium:hover {
  border-color: #d4af37;
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.18) inset,
    0 10px 32px rgba(201, 162, 39, 0.18);
}
.plan-compare-card-premium.selected {
  border-color: #e8c547;
  box-shadow:
    0 0 0 2px rgba(201, 162, 39, 0.45),
    0 0 24px rgba(201, 162, 39, 0.2);
}
.plan-compare-premium-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  color: #1a1408;
  background: linear-gradient(135deg, #b8860b 0%, #e8c547 45%, #f5e6a8 100%);
  border: 1px solid rgba(255, 248, 220, 0.5);
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.35);
}
.plan-compare-name {
  margin-bottom: 4px;
}
.plan-compare-name .tier-badge {
  font-size: 11px;
}
.plan-compare-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.plan-compare-card-premium .plan-compare-price {
  color: #e8c547;
  text-shadow: 0 0 20px rgba(232, 197, 71, 0.25);
}
.plan-compare-features {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--text);
}
.plan-compare-features li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  line-height: 1.4;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
}
.plan-compare-features li::before {
  content: "✓";
  color: var(--green);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.plan-compare-features li.locked {
  color: var(--muted);
}
.plan-compare-features li.locked::before {
  content: "✕";
  color: var(--danger);
  opacity: 0.55;
}

/* 기능 잠금 배지 (플랜 요구사항 표시) */
.feat-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.6;
}
.feat-badge-basic {
  background: rgba(31,111,235,0.15);
  color: var(--accent);
  border: 1px solid rgba(31,111,235,0.3);
}
.feat-badge-premium {
  background: rgba(227,179,65,0.12);
  color: var(--warn);
  border: 1px solid rgba(227,179,65,0.3);
}
.plan-compare-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 14px;
}
.plan-compare-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 플랜 구성 모달 - 모바일: 1열 + 잘림 방지(전체 화면에 들어오게) */
@media (max-width: 700px) {
  .plan-compare-modal {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .plan-compare-inner {
    max-width: 100%;
    width: 100%;
    padding: 16px 14px 20px;
    overflow-x: hidden;
    flex-shrink: 0;
  }
  .plan-compare-title {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .plan-compare-desc {
    font-size: 11px;
    margin-bottom: 12px;
  }
  .plan-compare-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .plan-compare-card-premium {
    padding-top: 18px;
  }
  .plan-compare-card {
    padding: 12px 14px;
    min-width: 0;
  }
  .plan-compare-name {
    font-size: 12px;
    margin-bottom: 3px;
  }
  .plan-compare-price {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .plan-compare-features {
    font-size: 12px;
  }
  .plan-compare-features li {
    padding: 2px 0;
  }
  .plan-compare-cta {
    gap: 8px;
  }
  .btn-plan-detail,
  .btn-plan-upgrade,
  .btn-plan-close {
    padding: 8px 14px;
    font-size: 12px;
  }
}
.btn-plan-detail,
.btn-plan-upgrade {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}
.btn-plan-detail {
  background: var(--accent);
  color: #fff;
}
.btn-plan-detail:hover:not(:disabled) { opacity: 0.9; color: #fff; }
.btn-plan-detail:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-plan-upgrade {
  background: var(--green);
  color: #fff;
}
.btn-plan-upgrade:hover:not(:disabled) { opacity: 0.9; color: #fff; }
.btn-plan-upgrade:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-plan-close {
  padding: 8px 16px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
}
.btn-plan-close:hover { color: var(--text); border-color: var(--text); }

/* 게이지 SVG 컨테이너 */
.gauge-container {
  width: 100%;
  max-width: 180px;
  margin: 4px auto 6px;
}
.gauge-container svg.gauge-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.4));
}
.gauge-placeholder {
  font-size: 28px;
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
}

.risk-zone-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 14px;
  border-radius: 20px;
  border: 1px solid;
  margin-top: 4px;
}
.zone-high {
  color: var(--risk-high);
  border-color: rgba(248,81,73,0.55);
  background: rgba(248,81,73,0.12);
  box-shadow: 0 0 12px rgba(248,81,73,0.2), inset 0 0 8px rgba(248,81,73,0.08);
  animation: zone-high-pulse 2s ease-in-out infinite;
}
.zone-mid  {
  color: var(--risk-mid);
  border-color: rgba(227,179,65,0.5);
  background: rgba(227,179,65,0.1);
  box-shadow: 0 0 10px rgba(227,179,65,0.15);
}
.zone-low  {
  color: var(--risk-low);
  border-color: rgba(57,211,83,0.5);
  background: rgba(57,211,83,0.1);
  box-shadow: 0 0 10px rgba(57,211,83,0.15);
}

@keyframes zone-high-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(248,81,73,0.2), inset 0 0 8px rgba(248,81,73,0.08); }
  50%       { box-shadow: 0 0 22px rgba(248,81,73,0.4), inset 0 0 14px rgba(248,81,73,0.15); }
}

/* MARKET BIAS 카드 */
.signal-value {
  font-size: 26px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.signal-xl { font-size: 24px; }

.signal-tag {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.signal-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.signal-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.signal-bar-blue { background: var(--accent); }

/* 신뢰도 해석 서브텍스트 */
.conf-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* 색상 상태 + 글로우 */
.bias-bullish .signal-value {
  color: var(--bull);
  text-shadow: 0 0 16px rgba(57,211,83,0.45);
}
.bias-bearish .signal-value {
  color: var(--bear);
  text-shadow: 0 0 16px rgba(248,81,73,0.45);
}
.bias-neutral .signal-value { color: var(--neutral); }

/* BIAS 카드 top-border 액센트 */
#card-bias.bias-bullish { border-top: 2px solid rgba(57,211,83,0.6); }
#card-bias.bias-bearish { border-top: 2px solid rgba(248,81,73,0.6); }
#card-bias.bias-neutral { border-top: 2px solid rgba(139,148,158,0.4); }

/* ── TODAY ACTION (전체 폭) ────────────────────────── */

@keyframes action-pulse-green {
  0%, 100% { box-shadow: 0 0 24px rgba(57,211,83,0.12) inset, 0 0 0 1px rgba(57,211,83,0.3); }
  50%       { box-shadow: 0 0 44px rgba(57,211,83,0.22) inset, 0 0 0 1px rgba(57,211,83,0.55); }
}
@keyframes action-pulse-amber {
  0%, 100% { box-shadow: 0 0 24px rgba(227,179,65,0.1) inset, 0 0 0 1px rgba(227,179,65,0.28); }
  50%       { box-shadow: 0 0 44px rgba(227,179,65,0.2) inset, 0 0 0 1px rgba(227,179,65,0.5); }
}
@keyframes action-pulse-red {
  0%, 100% { box-shadow: 0 0 24px rgba(248,81,73,0.12) inset, 0 0 0 1px rgba(248,81,73,0.3); }
  50%       { box-shadow: 0 0 44px rgba(248,81,73,0.22) inset, 0 0 0 1px rgba(248,81,73,0.55); }
}
@keyframes icon-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

.signal-action-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
  flex-wrap: wrap;
  min-width: 0;
}

/* ACTION 상태별 강조 */
.action-risk_on {
  border-color: rgba(57,211,83,0.55);
  background: linear-gradient(135deg, rgba(57,211,83,0.06) 0%, rgba(57,211,83,0.02) 100%);
  animation: action-pulse-green 3s ease-in-out infinite;
}
.action-wait {
  border-color: rgba(227,179,65,0.5);
  background: linear-gradient(135deg, rgba(227,179,65,0.06) 0%, rgba(227,179,65,0.02) 100%);
  animation: action-pulse-amber 3s ease-in-out infinite;
}
.action-risk_off {
  border-color: rgba(248,81,73,0.55);
  background: linear-gradient(135deg, rgba(248,81,73,0.06) 0%, rgba(248,81,73,0.02) 100%);
  animation: action-pulse-red 3s ease-in-out infinite;
}

.action-icon {
  font-size: 48px;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 0 10px currentColor);
  animation: icon-float 3s ease-in-out infinite;
}

.action-content { flex: 1; min-width: 0; overflow-wrap: break-word; }

.action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.action-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}

.action-main {
  font-size: 38px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.05;
  letter-spacing: 0.04em;
}
.action-risk_on  .action-main {
  color: var(--green);
  text-shadow: 0 0 20px rgba(57,211,83,0.5);
}
.action-wait     .action-main {
  color: var(--warn);
  text-shadow: 0 0 20px rgba(227,179,65,0.5);
}
.action-risk_off .action-main {
  color: var(--danger);
  text-shadow: 0 0 20px rgba(248,81,73,0.5);
}

.action-sub {
  font-size: 12px;
  color: rgba(139,148,158,0.85);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ── 전략 바 ──────────────────────────────────────────────── */

.strategy-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(31,111,235,0.07);
  border: 1px solid rgba(31,111,235,0.18);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 10px;
  min-height: 34px;
}
.strategy-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  padding-top: 2px;
}
.strategy-text { font-size: 12px; color: var(--text); line-height: 1.5; }

/* ── 시장 타일 ──────────────────────────────────────────────── */

.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* 그룹 구분선 (국내 증시 / 미국 증시 / 변동성 / 환율 / 원자재 / 암호화폐) */
.market-group-label {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 2px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.market-group-label:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.currency-toggle {
  margin-left: 8px;
  display: inline-flex;
  gap: 4px;
  font-size: 10px;
}
.currency-btn {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.currency-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.market-tile {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s;
  min-width: 0;
  overflow: hidden;
}
.market-tile:hover { border-color: var(--accent); }

/* 시장 지표 타일 개별 숨김 (편집 모드에서만 체크박스 표시) */
.market-tile-edit-label {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 10px;
  color: var(--muted);
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.market-tile-edit-label input { cursor: pointer; }
.dashboard.edit-mode .market-tile {
  position: relative;
}
.dashboard.edit-mode .market-tile-edit-label {
  display: inline-flex;
}

.market-tile.hidden-by-user {
  display: none !important;
}
.dashboard.edit-mode .market-tile.hidden-by-user {
  display: block !important;
  opacity: 0.5;
}

.market-crypto-notice {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
  margin: 4px 0 0;
  padding: 0;
}

/* VIX 강조 카드 */
.market-tile-vix {
  border-color: rgba(248,81,73,0.2);
  background: rgba(248,81,73,0.03);
}
.market-tile-vix:hover { border-color: var(--danger); }
.market-tile-vix .market-name { color: var(--danger); }

/* VIX 레벨별 동적 강조 (JS가 클래스 추가) */
.vix-extreme { border-color: rgba(248,81,73,0.7) !important; box-shadow: 0 0 12px rgba(248,81,73,0.15); }
.vix-high    { border-color: rgba(248,81,73,0.45) !important; }
.vix-mid     { border-color: rgba(227,179,65,0.4) !important; }
.vix-low     { border-color: rgba(57,211,83,0.35) !important; }

/* ── Binance LIVE 배지 / 코인 Flash 효과 비활성화 ── */
.live-badge { display: none; }
.tile-flash-up,
.tile-flash-down { animation: none; }

/* .stale-badge 제거됨 */

/* ── 시장 데이터 자동 갱신 카운트다운 ── */
.market-refresh-meta {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
}
.market-countdown-label {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  opacity: 0.7;
}
.market-countdown-label #marketCountdown {
  color: rgba(0,200,255,0.6);
  font-weight: 600;
}

.vix-label-tag {
  font-size: 8px;
  color: var(--danger);
  opacity: 0.6;
  font-weight: 400;
  margin-left: 4px;
}

/* 금/은 시세 타일 (살때/팔때) */
.market-tile-gold,
.market-tile-silver {
  border-color: rgba(227,179,65,0.25);
  background: rgba(227,179,65,0.04);
}
.market-tile-gold:hover,
.market-tile-silver:hover { border-color: rgba(227,179,65,0.5); }
.market-tile-gold .market-name,
.market-tile-silver .market-name { color: var(--warn); }
.gold-unit-tag,
.silver-unit-tag {
  font-size: 8px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.gold-prices,
.silver-prices {
  margin: 8px 0 6px;
}
.gold-price-row,
.silver-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.gold-price-row:last-child,
.silver-price-row:last-child { border-bottom: none; }
.gold-price-label,
.silver-price-label {
  font-size: 11px;
  color: var(--muted);
}
.gold-price-value,
.silver-price-value {
  font-size: 14px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.market-tile-gold .gold-change,
.market-tile-silver .silver-change {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-top: 4px;
}

.market-tile.skeleton {
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.market-name {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.market-price {
  font-size: 16px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.market-change {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  margin-bottom: 6px;
}
.change-up   { color: var(--danger); }   /* 한국식: 상승=빨강 */
.change-down { color: var(--accent); }   /* 한국식: 하락=파랑 */
.change-flat { color: var(--muted); }

.market-trends { display: flex; gap: 4px; flex-wrap: wrap; }

.trend-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
}
.trend-up   { color: var(--green);  border-color: rgba(57,211,83,0.3);  background: rgba(57,211,83,0.07); }   /* 50D/200D 상승=녹색 */
.trend-down { color: var(--accent); border-color: rgba(31,111,235,0.3); background: rgba(31,111,235,0.07); } /* 50D/200D 하락=파랑(녹색 대비, 빨강 미사용) */
.trend-flat { color: var(--muted);  border-color: var(--border); }

/* ==========================================================
   퍼-카드 프리미엄 잠금 (FREE 티어 — 70% 공개 / 30% 잠금)
   ========================================================== */

.signal-section { position: relative; }

/* 잠긴 카드: 컨텐츠 블러 */
.signal-card.locked-premium,
.strategy-bar.locked-premium {
  position: relative;
  overflow: hidden;
}
.signal-card.locked-premium > *:not(.plock-overlay),
.strategy-bar.locked-premium > *:not(.plock-overlay) {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

/* 잠금 오버레이 (숨겨진 상태 → .locked-premium 추가 시 표시) */
.plock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: rgba(13,17,23,0.55);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.plock-overlay:hover { background: rgba(13,17,23,0.72); }
.locked-premium .plock-overlay { display: flex; }

.plock-icon  { font-size: 16px; opacity: 0.85; }
.plock-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--warn);
  font-family: 'JetBrains Mono', monospace;
}

/* 전략 바용 오버레이 (가로 배치) */
.plock-overlay-bar { flex-direction: row; gap: 6px; }
.plock-overlay-bar .plock-label {
  font-size: 10px;
  letter-spacing: 0.05em;
  font-family: inherit;
  font-weight: 600;
  color: var(--muted);
}

/* 데이터 권위 배지 */
.data-authority {
  font-size: 9px;
  color: var(--muted);
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ==========================================================
   업그레이드 모달
   ========================================================== */

.upgrade-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 전체 페이지 이동 직전 — 다음 로딩 동안 현재 화면 위에서 대기 (대시보드 플래시 완화) */
#fp-nav-hold-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(8, 12, 20, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.fp-nav-hold-inner {
  text-align: center;
  max-width: 300px;
}
.fp-nav-hold-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border: 3px solid rgba(88, 166, 255, 0.22);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: fp-nav-hold-spin 0.72s linear infinite;
}
.fp-nav-hold-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(200, 212, 232, 0.96);
  line-height: 1.5;
}
@keyframes fp-nav-hold-spin {
  to { transform: rotate(360deg); }
}

/* 잠금 업데이트 버튼 — 짧은 안내 (토스트 느낌) 후 플랜 모달로 연결 */
.refresh-locked-modal {
  z-index: 550;
}
.refresh-locked-modal-inner {
  max-width: 380px;
  padding: 24px 20px 20px;
  text-align: center;
  border: 1px solid rgba(88, 166, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.refresh-locked-modal-text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(120, 180, 255, 0.95);
  margin: 10px 6px 18px;
  padding: 0 4px;
  white-space: normal;
}
.refresh-locked-premium-label {
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #79c0ff;
}
.refresh-locked-cta-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}
.refresh-locked-cta-row .upgrade-cta-primary,
.refresh-locked-cta-row .upgrade-cta-secondary {
  flex: 1;
  margin: 0;
  padding: 11px 12px;
  font-size: 13px;
  border-radius: 8px;
}
@media (max-width: 360px) {
  .refresh-locked-cta-row {
    flex-direction: column;
  }
}

.upgrade-modal-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  padding: 26px 26px 20px;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.upgrade-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}
.upgrade-modal-close:hover { color: var(--text); background: var(--surface2); }

.upgrade-modal-header { text-align: center; margin-bottom: 16px; }
.upgrade-modal-icon   { font-size: 30px; margin-bottom: 8px; }
.upgrade-modal-title  { font-size: 17px; font-weight: 700; margin-bottom: 6px; line-height: 1.35; }
.upgrade-modal-sub    { font-size: 12px; color: var(--muted); line-height: 1.65; }

.upgrade-modal-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 12px 16px;
  background: rgba(31,111,235,0.06);
  border: 1px solid rgba(31,111,235,0.18);
  border-radius: 8px;
}
.upgrade-stat     { text-align: center; }
.upgrade-stat-num {
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
}
.upgrade-stat-lbl { font-size: 9px; color: var(--muted); margin-top: 2px; letter-spacing: 0.03em; }
.stat-live-badge { font-size: 8px; color: var(--accent); opacity: 0.95; font-weight: 600; margin-left: 4px; }
.upgrade-stat-updated { font-size: 10px; color: var(--muted); margin-top: 8px; text-align: center; }

.upgrade-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.upgrade-plan-col {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 10px 12px;
  position: relative;
}
/* PREMIUM 열: 금색 뱃지·테두리 (BASIC은 기본 카드 스타일) */
.upgrade-plan-premium-gold.upgrade-plan-highlight {
  border: 2px solid rgba(201, 162, 39, 0.85);
  background: linear-gradient(165deg, rgba(201, 162, 39, 0.09) 0%, var(--surface2) 45%);
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.1) inset,
    0 8px 28px rgba(201, 162, 39, 0.14);
}
.upgrade-plan-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.upgrade-plan-badge-gold {
  background: linear-gradient(135deg, #b8860b 0%, #e8c547 50%, #f5e6a8 100%);
  color: #1a1408;
  border: 1px solid rgba(255, 248, 220, 0.45);
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.3);
  font-weight: 800;
}
.upgrade-plan-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  margin-top: 4px;
}
.upgrade-plan-free    .upgrade-plan-name { color: var(--muted); }
.upgrade-plan-basic   .upgrade-plan-name { color: var(--accent); }
.upgrade-plan-premium .upgrade-plan-name { color: var(--warn); }

.upgrade-plan-col ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.upgrade-plan-col li {
  font-size: 10px;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}
.upgrade-plan-col li::before { position: absolute; left: 0; font-size: 10px; }
.upgrade-plan-col li.has         { color: var(--text); }
.upgrade-plan-col li.has::before { content: "✓"; color: var(--green); }
.upgrade-plan-col li.no::before  { content: "✕"; color: var(--danger); opacity: 0.5; }
.upgrade-plan-col li.no          { opacity: 0.4; }

.upgrade-cta-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
}
.upgrade-cta-primary {
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.upgrade-cta-primary:hover { opacity: 0.88; }
.upgrade-cta-secondary {
  padding: 9px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.upgrade-cta-secondary:hover { color: var(--text); border-color: var(--muted); }
.upgrade-legal {
  font-size: 9px;
  color: var(--muted);
  opacity: 0.4;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .upgrade-plan-grid { grid-template-columns: 1fr; }
  .upgrade-modal-stats { gap: 16px; }
}

/* 손실 회피 모달 (lossModal) 내부 — 더 좁은 너비 */
.loss-modal-inner {
  max-width: 420px;
}

/* 모달 빌링 토글 (월간/연간) */
.modal-billing-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.billing-tab {
  flex: 1;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.billing-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.tab-save {
  font-size: 9px;
  color: var(--green);
  font-weight: 700;
  margin-left: 4px;
}

/* 가격 표시 행 */
.modal-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(31,111,235,0.05);
  border: 1px solid rgba(31,111,235,0.15);
  border-radius: 8px;
}
.modal-price-num {
  font-size: 32px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  flex-shrink: 0;
}
.modal-price-detail { display: flex; flex-direction: column; gap: 1px; }
.modal-price-period {
  font-size: 12px;
  color: var(--muted);
}
.modal-price-equiv {
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
  min-height: 16px;
}
.modal-price-anchor {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.55;
}

/* 결제 수단 버튼 */
.payment-methods {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}
.pay-method {
  flex: 1;
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.pay-method:active { transform: scale(0.97); }
.pay-method-primary {
  background: var(--accent);
  color: #fff;
  border: none;
}
.pay-method-primary:hover { opacity: 0.88; }
.pay-method-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.pay-method-secondary:hover { border-color: var(--accent); }

@media (max-width: 480px) {
  .payment-methods { flex-direction: column; }
  .modal-price-num { font-size: 26px; }
}

/* ==========================================================
   탭 네비게이션
   ========================================================== */

.tab-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  gap: 2px;
  position: sticky;
  top: var(--fp-header-h);
  z-index: 80;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  margin-bottom: -1px;
}
.tab-btn:hover     { color: var(--text); }
.tab-btn.active    { color: var(--green); border-bottom-color: var(--green); }
.tab-mypage.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ==========================================================
   메인 콘텐츠
   ========================================================== */

.main {
  flex: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tab-panel {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tab-panel.active { display: flex; }

.panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.panel-cat-label { font-size: 12px; color: var(--muted); }
.panel-actions   { display: flex; gap: 6px; }

.action-btn {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.action-btn:hover   { color: var(--text); border-color: var(--accent); }
.disabled-btn       { opacity: 0.45; cursor: not-allowed; }
.disabled-btn:hover { color: var(--muted); border-color: var(--border); }

/* 뉴스 콘텐츠 영역 */
.news-content {
  padding: 24px 32px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* flex column 자식이므로 align-self: stretch로 전체 폭 확보 */
  align-self: stretch;
}
.news-content::-webkit-scrollbar       { width: 5px; }
.news-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.placeholder {
  color: var(--muted);
  font-size: 13px;
  padding: 40px 0;
  text-align: center;
}

/* ── 날짜 구분선 ── */
.date-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
  user-select: none;
  pointer-events: none;
  width: 100%;
}
.date-divider::before,
.date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}
.date-divider > span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0.75;
}

.date-divider .daily-count {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
}

/* ── 뉴스 카드 피드 (1열 세로 배치) ── */
.news-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0;          /* 좌측 정렬 */
  box-sizing: border-box;
}

.news-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  user-select: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* 원문 링크 탭 시 카드 전체가 눌린 것처럼 보이지 않도록 */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.news-card:hover {
  border-left-color: rgba(0,200,255,0.8);
  background: rgba(0,200,255,0.03);
  box-shadow: 0 2px 12px rgba(0,200,255,0.07);
}
/* 읽은 기사: 읽었음을 인지할 수 있되 가독성은 유지 */
.news-card.fp-read {
  opacity: 0.78;
  border-left-color: var(--border);
}
.news-card.fp-read .news-card-title {
  color: #a3b3c4;
}
.news-card.fp-read .news-card-preview-text {
  color: #7a8fa3;
}
.news-card.fp-read:hover {
  opacity: 1;
  border-left-color: rgba(0,200,255,0.4);
}

/* 원문 링크 아이콘 (↗) */
.nc-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-size: 12px;
  font-weight: 700;
  color: #9fc8ff;
  opacity: 0.95;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(88, 166, 255, 0.4);
  background: rgba(56, 139, 253, 0.12);
  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s, transform 0.1s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(56, 139, 253, 0.35);
  tap-highlight-color: rgba(56, 139, 253, 0.35);
}
.nc-ext-link:hover {
  opacity: 1;
  color: #d5e9ff;
  border-color: var(--accent);
  background: rgba(56, 139, 253, 0.2);
}
.nc-ext-link:active {
  transform: scale(0.96);
  background: rgba(56, 139, 253, 0.32);
  border-color: rgba(88, 166, 255, 0.75);
}

/* › 화살표 아이콘 */
.news-card-arrow {
  font-size: 16px;
  color: var(--muted);
  opacity: 0.45;
  margin-left: 4px;
  transition: opacity 0.15s, color 0.15s;
  line-height: 1;
}
.news-card:hover .news-card-arrow {
  opacity: 1;
  color: var(--accent);
}

/* 카드 프리뷰 텍스트 (훅 1줄) */
.news-card-preview-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  padding-left: 2px;
}
.news-card-preview-text::before {
  content: '→ ';
  color: var(--accent);
  opacity: 0.6;
}

/* 뉴스 상세 모달 추가 스타일 */
.ndm-inner {
  max-width: 580px;
}
.ndm-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ndm-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 과거 연관뉴스 버튼 */
.ndm-past-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(88,166,255,0.35);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.ndm-past-btn:hover:not(:disabled) {
  background: rgba(88,166,255,0.1);
  border-color: var(--accent);
}
.ndm-past-btn:disabled { opacity: 0.6; cursor: default; }

/* 스크랩 버튼 */
.ndm-scrap-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ndm-scrap-btn:hover:not(:disabled) {
  background: rgba(227,179,65,0.12);
  border-color: #e3b341;
  color: #e3b341;
}
.ndm-scrap-btn.saved {
  background: rgba(227,179,65,0.15);
  border-color: #e3b341;
  color: #e3b341;
}
.ndm-scrap-btn:disabled { opacity: 0.6; cursor: default; }

/* TTS 읽기 버튼 */
.ndm-tts-btn {
  position: absolute;
  top: 10px;
  right: 46px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.ndm-tts-btn:hover {
  opacity: 1;
  color: var(--accent);
  border-color: rgba(88,166,255,0.3);
  background: rgba(88,166,255,0.06);
}
.ndm-tts-btn.playing {
  color: var(--accent);
  border-color: rgba(88,166,255,0.45);
  background: rgba(88,166,255,0.1);
  opacity: 1;
  animation: tts-ring-pulse 1.8s ease-in-out infinite;
}
.ndm-tts-btn svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
  display: block;
}
@keyframes tts-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0.45); }
  50%       { box-shadow: 0 0 0 5px rgba(88,166,255,0); }
}

/* ══════════════════════════════════════════════
   기사 + AI 통합 분할 패널
══════════════════════════════════════════════ */
.ac-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ac-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  width: 100%;
  max-width: 1080px;
  height: min(88vh, 720px);
  background: var(--bg-secondary, #161b22);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  border: 1px solid var(--border, #30363d);
}

/* 공통 닫기 버튼 */
.ac-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  background: none;
  border: none;
  color: var(--text-muted, #8b949e);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.ac-close-btn:hover { color: var(--text, #e6edf3); background: rgba(255,255,255,0.07); }

/* ── 왼쪽 기사 컬럼 ── */
.ac-article-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ac-article-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #30363d) transparent;
}
.ac-article-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #e6edf3);
  line-height: 1.5;
  margin: 0 0 14px;
}
.ac-article-body p {
  font-size: 14px;
  color: var(--text-secondary, #c9d1d9);
  line-height: 1.75;
  margin: 0 0 10px;
}

/* ── 구분선 ── */
.ac-divider {
  width: 2px;
  background: var(--border, #30363d);
  flex-shrink: 0;
}

/* ── 오른쪽 AI 채팅 컬럼 ── */
.ac-chat-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary, #0d1117);
}
.ac-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border, #30363d);
  flex-shrink: 0;
}
.ac-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #e6edf3);
}
.ac-linked-badge {
  font-size: 10px;
  font-weight: 600;
  color: #c4b5fd;
  background: rgba(124,58,237,0.2);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 10px;
  padding: 2px 8px;
}

/* 빠른 질문 칩 */
.ac-quick-chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #30363d);
}
.ac-chip {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(124,58,237,0.12);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 14px;
  padding: 4px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.ac-chip:hover { background: rgba(124,58,237,0.25); border-color: rgba(124,58,237,0.6); }

/* 메시지 영역 */
.ac-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #30363d) transparent;
}

/* 입력 행 */
.ac-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border, #30363d);
  flex-shrink: 0;
  background: var(--bg-primary, #0d1117);
}
.ac-input {
  flex: 1;
  background: var(--bg-secondary, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  color: var(--text, #e6edf3);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.ac-input:focus { border-color: #7c3aed; }
.ac-send-btn {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
  white-space: nowrap;
}
.ac-send-btn:hover { filter: brightness(1.15); }
.ac-send-btn:disabled { opacity: 0.5; cursor: default; }

/* 모바일: 세로 스택 */
@media (max-width: 700px) {
  .ac-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2px 1fr;
    height: 92vh;
    border-radius: 10px;
  }
  .ac-divider {
    width: auto;
    height: 2px;
  }
  .ac-article-scroll { padding: 16px; }
  .ac-article-title { font-size: 15px; }
}

/* ── AI에게 물어보기 버튼 ── */
.ndm-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(124,58,237,0.4);
}
.ndm-ai-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.ndm-ai-btn:active { transform: scale(0.97); }

/* ── AI 채팅 기사 연동 컨텍스트 바 ── */
.ai-chat-context-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(124,58,237,0.18) 0%, rgba(79,70,229,0.12) 100%);
  border-bottom: 1px solid rgba(124,58,237,0.4);
  font-size: 11px;
  color: #c4b5fd;
  min-height: 30px;
  flex-shrink: 0;
}
.ai-context-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.ai-context-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  color: #e0d7ff;
}
.ai-context-clear {
  background: none;
  border: none;
  color: #a78bfa;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ai-context-clear:hover { color: #f87171; }

/* 과거 연관뉴스 섹션 */
.ndm-past-section {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px;
}
.ndm-past-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ndm-past-fold-btn {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.ndm-past-fold-btn:hover {
  color: var(--text);
  border-color: var(--text);
}
.ndm-past-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.03em;
}
.ndm-past-count {
  font-size: 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
}
.ndm-past-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ndm-past-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(56, 139, 253, 0.22);
  tap-highlight-color: rgba(56, 139, 253, 0.22);
}
.ndm-past-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.ndm-past-date {
  font-size: 10px;
  color: var(--muted);
}
.ndm-past-cat {
  font-size: 10px;
  color: var(--accent);
  opacity: 0.8;
}
.ndm-past-summary-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 3px;
}
.ndm-past-preview {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ndm-past-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.95;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  background: rgba(56, 139, 253, 0.1);
  transition: opacity 0.12s, border-color 0.12s, background 0.12s, transform 0.1s ease;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(56, 139, 253, 0.35);
  tap-highlight-color: rgba(56, 139, 253, 0.35);
}
.ndm-past-link:hover {
  opacity: 1;
  text-decoration: none;
  border-color: var(--accent);
  background: rgba(56, 139, 253, 0.18);
}
.ndm-past-link:active {
  transform: scale(0.96);
  background: rgba(56, 139, 253, 0.3);
  border-color: rgba(88, 166, 255, 0.7);
}

/* ── 과거 기사 아카이브 ──────────────────────────────────────── */
/* 제목·카테고리 칩은 일반 흐름(스크롤 시 함께 위로 사라짐). sticky 미사용. */
#archivePanel .panel-toolbar {
  position: relative;
  z-index: auto;
}

.archive-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  position: relative;
  z-index: auto;
  background: var(--surface);
}
.archive-filter-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.archive-filter-btn:hover { color: var(--text); border-color: var(--accent); }
.archive-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* ── 아카이브 검색 바 ──────────────────────────────────────── */
.archive-search-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
/* 1행: 날짜 + 카테고리 드롭다운 */
.asb-row-top {
  display: flex;
  gap: 8px;
}
/* 2행: 검색어 입력 + 검색 버튼 */
.asb-row-bottom {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  height: 42px;
}
.asb-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.asb-icon { font-size: 13px; flex-shrink: 0; opacity: 0.55; }
.asb-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
  height: 100%;
}
.asb-input::placeholder { color: var(--muted); }
.asb-sel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.asb-sel option { background: var(--surface); color: var(--text); }
.archive-sort-sel { min-width: 5.5em; }
.fp-picker {
  position: relative;
  flex: 1;
  min-width: 0;
}
.fp-picker-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(88, 166, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 30, 46, 0.98) 0%, rgba(14, 24, 38, 0.98) 100%);
  color: #d8e8ff;
  font-size: 13px;
  font-weight: 650;
  padding: 0 30px 0 10px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.fp-picker-btn::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #8bb1e0;
}
.fp-picker.open .fp-picker-btn::after { content: '▴'; }
.fp-picker-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 190px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 12030;
  border-radius: 12px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  background: rgba(11, 19, 33, 0.98);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
.fp-picker.open .fp-picker-menu { display: block; }
.fp-picker-option {
  width: 100%;
  border: none;
  background: transparent;
  color: #d4e7ff;
  font-size: 14px;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}
.fp-picker-option + .fp-picker-option { border-top: 1px solid rgba(148, 163, 184, 0.14); }
.fp-picker-option:hover,
.fp-picker-option.active {
  background: rgba(56, 139, 253, 0.2);
  color: #fff;
}
.fp-picker-sm { flex: 0 0 112px; }
.fp-picker-sm .fp-picker-menu { min-width: 112px; }
.asb-divider { display: none; } /* 2행 레이아웃에서는 불필요 */
/* 날짜 직접 선택 행 */
.asb-row-dates {
  display: none;
  align-items: center;
  gap: 8px;
}
.asb-row-dates.visible { display: flex; }
.asb-date-sep {
  font-size: 13px;
  color: var(--muted);
  flex-shrink: 0;
}
.asb-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 140px;
}
.asb-date-wrap .asb-date-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  color-scheme: dark;
}

/* 과거 기사 달력: 오늘 날짜 시각적 강조 제거 (선택한 날짜만 강조)
   - 네이티브 input[type=date] 팝업은 브라우저 제어로 스타일 불가
   - Flatpickr/커스텀 달력 사용 시 .today 강조 제거 */
.asb-row-dates .flatpickr-day.today,
.asb-row-dates .flatpickr-day.today:hover,
.asb-row-dates .day.today,
.asb-row-dates [data-date].today {
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
}
.asb-row-dates .flatpickr-day.selected,
.asb-row-dates .flatpickr-day.selected:hover,
.asb-row-dates .day.selected,
.asb-row-dates [data-date].selected {
  border-color: var(--accent) !important;
  background: rgba(31, 111, 235, 0.15) !important;
  color: var(--accent) !important;
}
.asb-date-display {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
  color: var(--muted);
}
.asb-date-display.has-value {
  color: var(--text);
}
.asb-date-range-label {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
  flex-shrink: 0;
}
.asb-date-range-label.visible {
  color: var(--accent);
}
.asb-btn {
  padding: 0 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.asb-btn:hover { opacity: 0.85; }

.archive-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.archive-list-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.archive-sort-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}
.archive-sort-inline .asb-icon {
  font-size: 11px;
  color: var(--muted);
}
.archive-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.archive-date-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 20px 10px 8px;
  margin: 8px -4px 0;
  background: linear-gradient(90deg, rgba(0,180,255,0.06) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  border-radius: 0 4px 0 0;
}
.archive-date-sep .article-count {
  font-size: 0.85em;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}
.archive-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.archive-item {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
  cursor: pointer;
  position: relative;
}
.archive-item:hover { background: rgba(255,255,255,0.04); }
.archive-item-arrow {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--muted);
  opacity: 0.5;
}
.archive-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.archive-cat-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(88,166,255,0.1);
  border: 1px solid rgba(88,166,255,0.25);
  border-radius: 4px;
  padding: 1px 6px;
}
.archive-impact {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.archive-item-date {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted, #7a8fa3);
  white-space: nowrap;
  flex-shrink: 0;
}
.archive-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 3px;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.archive-item-preview {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.archive-item-link {
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.8;
}
.archive-item-link:hover { opacity: 1; text-decoration: underline; }
.archive-loading,
.archive-empty {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 32px 0;
  line-height: 1.7;
}
.archive-more-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
}
.archive-more-btn {
  padding: 8px 28px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.archive-more-btn:hover { border-color: var(--accent); background: rgba(88,166,255,0.06); }

/* 상세 섹션 (초보자 해석 / 전망) */
.news-detail-section {
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
}
.news-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  font-family: 'JetBrains Mono', monospace;
}
.news-detail-section p {
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
}

/* 초보자 해석 — 노란 계열 */
.news-detail-beginner {
  background: rgba(227,179,65,0.07);
  border: 1px solid rgba(227,179,65,0.22);
}
.news-detail-beginner .news-detail-label {
  color: var(--warn);
}
.news-detail-beginner p { color: rgba(230,237,243,0.85); }

/* 앞으로의 전망 — 파란 계열 */
.news-detail-outlook {
  background: rgba(31,111,235,0.07);
  border: 1px solid rgba(31,111,235,0.2);
}
.news-detail-outlook .news-detail-label {
  color: var(--accent);
}
.news-detail-outlook p { color: rgba(230,237,243,0.85); }

/* 카드 하단 (원문 링크 + 접기 버튼) */
.news-detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.news-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.95;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(88, 166, 255, 0.4);
  background: rgba(56, 139, 253, 0.12);
  transition: opacity 0.12s, border-color 0.12s, background 0.12s, transform 0.1s ease;
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(56, 139, 253, 0.35);
  tap-highlight-color: rgba(56, 139, 253, 0.35);
}
.news-detail-link:hover {
  opacity: 1;
  text-decoration: none;
  border-color: var(--accent);
  background: rgba(56, 139, 253, 0.22);
}
.news-detail-link:active {
  transform: scale(0.96);
  background: rgba(56, 139, 253, 0.34);
  border-color: rgba(88, 166, 255, 0.75);
}
.ndm-view-en-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  margin-right: 12px;
}
.news-collapse-btn {
  font-size: 10px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  opacity: 0.6;
  transition: opacity 0.15s;
  font-family: inherit;
}
.news-collapse-btn:hover { opacity: 1; }

/* 뉴스 카드 푸터 링크 행 */
.news-footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 언어 배지 (EN) */
.lang-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(139, 148, 158, 0.12);
  color: var(--muted);
  border: 1px solid var(--border);
  line-height: 1.6;
  vertical-align: middle;
}

/* 번역본 보기 버튼 */
.news-transl-btn {
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.news-transl-btn:hover {
  opacity: 1;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(230, 237, 243, 0.2);
}

/* ─── 과거 기사 스택 모달 ───────────────────────────────────── */
#newsDetailModal2 { z-index: 1201; }
.ndm2-overlay { background: rgba(0, 0, 0, 0.45) !important; }
.ndm2-inner {
  margin-top: 24px;
  border-top: 3px solid var(--accent);
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(88, 166, 255, 0.18);
}

/* ─── 번역 모달 ─────────────────────────────────────────────── */
.transl-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.transl-modal-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 22px;
  max-width: 540px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 180, 255, 0.08);
}
.transl-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  padding: 4px 6px;
  line-height: 1;
}
.transl-modal-close:hover { opacity: 1; }

.transl-modal-header { margin-bottom: 16px; }
.transl-modal-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 180, 255, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 180, 255, 0.25);
  margin-bottom: 10px;
}
.transl-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.5;
  margin: 0;
}

/* 번역 본문 */
.transl-modal-body {
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.8;
  margin-bottom: 14px;
}
.transl-modal-body p {
  margin: 0 0 10px;
}
.transl-modal-body p:last-child { margin-bottom: 0; }

/* 초보자 팁 */
.transl-modal-tip {
  background: rgba(227, 179, 65, 0.06);
  border: 1px solid rgba(227, 179, 65, 0.2);
  border-radius: 7px;
  padding: 10px 13px;
  font-size: 12.5px;
  color: var(--warn);
  line-height: 1.6;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.transl-tip-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 전망 */
.transl-modal-outlook {
  background: rgba(0, 180, 255, 0.04);
  border: 1px solid rgba(0, 180, 255, 0.15);
  border-radius: 7px;
  padding: 10px 13px;
  margin-bottom: 14px;
}
.transl-outlook-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 6px;
}
.transl-modal-outlook p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-sub);
  line-height: 1.65;
}

/* 법적 고지 */
.transl-modal-legal {
  margin: 0;
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  opacity: 0.7;
}

/* 카테고리 지갑 임팩트 배너 */
.category-wallet-impact {
  font-size: 11.5px;
  color: var(--warn);
  background: rgba(227,179,65,0.06);
  border: 1px solid rgba(227,179,65,0.18);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  line-height: 1.55;
}

.news-card-image {
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg-sub);
}
.news-card-image img {
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
  display: block;
}

.news-card-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.news-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  min-width: 0;
  width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;  /* 한글 단어 단위 자연스러운 줄바꿈 */
  white-space: normal;
}
.news-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* 배지 개수 많아도 다음 줄로 넘김 */
  gap: 4px 6px;
  flex-shrink: 0;
  max-width: 100%;
  width: 100%;
}

/* 배지 설명 ? 버튼 */
.badge-help-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.55);
  background: rgba(15, 23, 42, 0.92);
  color: #d6e6ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.08s;
}
.badge-help-btn:hover {
  border-color: var(--accent);
  color: #8fc7ff;
  background: rgba(24, 36, 56, 0.95);
}
.badge-help-btn:active {
  transform: scale(0.96);
}

/* 배지 설명 팝업 */
.badge-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.badge-popup-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 22px;
  width: 100%;
  max-width: 360px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.badge-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s;
}
.badge-popup-close:hover { color: var(--text); }
.badge-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.badge-popup-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.badge-popup-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.badge-popup-label { display: flex; align-items: center; }
.badge-popup-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
}
.badge-popup-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.badge-popup-ok {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.badge-popup-ok:hover { opacity: 0.85; }

.impact-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.impact-5 { background: rgba(248,81,73,0.15);  color: var(--risk-high); border: 1px solid rgba(248,81,73,0.3); }
.impact-4 { background: rgba(227,179,65,0.15); color: var(--warn);      border: 1px solid rgba(227,179,65,0.3); }
.impact-3 { background: rgba(31,111,235,0.12); color: var(--accent);    border: 1px solid rgba(31,111,235,0.25); }
.impact-2 { background: rgba(139,148,158,0.1); color: var(--muted);     border: 1px solid var(--border); }
.impact-1 { background: rgba(139,148,158,0.08);color: var(--muted);     border: 1px solid var(--border); }

.direction-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 600;
}
.dir-positive { color: var(--green);  background: rgba(57,211,83,0.1);   border: 1px solid rgba(57,211,83,0.25); }
.dir-negative { color: var(--danger); background: rgba(248,81,73,0.1);   border: 1px solid rgba(248,81,73,0.25); }
.dir-neutral  { color: var(--muted);  background: rgba(139,148,158,0.1); border: 1px solid var(--border); }

/* ── NEW 뱃지 & 신규 기사 하이라이트 ─────────────────────────────────────── */
.badge-new {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 99px;
  background: rgba(57, 211, 83, 0.18);
  color: #39d353;
  border: 1px solid rgba(57, 211, 83, 0.45);
  vertical-align: middle;
  flex-shrink: 0;
}
[data-theme="light"] .badge-new {
  background: rgba(26, 127, 55, 0.12);
  color: #1a7f37;
  border-color: rgba(26, 127, 55, 0.35);
}
@keyframes highlight-pulse {
  0%,  100% { background-color: rgba(57, 211, 83, 0.10); border-left-color: rgba(57, 211, 83, 0.8); }
  50%        { background-color: rgba(57, 211, 83, 0.20); border-left-color: #39d353; }
}
.highlight-new {
  background-color: rgba(57, 211, 83, 0.10);
  border-left-color: rgba(57, 211, 83, 0.8) !important;
  animation: highlight-pulse 2.4s ease-in-out infinite;
}
[data-theme="light"] .highlight-new {
  background-color: rgba(26, 127, 55, 0.08);
  border-left-color: rgba(26, 127, 55, 0.7) !important;
  animation: highlight-pulse-light 2.4s ease-in-out infinite;
}
@keyframes highlight-pulse-light {
  0%,  100% { background-color: rgba(26, 127, 55, 0.08); border-left-color: rgba(26, 127, 55, 0.7); }
  50%        { background-color: rgba(26, 127, 55, 0.16); border-left-color: #1a7f37; }
}

.news-card-summary {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.news-card-summary li {
  font-size: 12px;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}
.news-card-summary li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 11px;
}

/* 카테고리 다이제스트 */
.category-digest {
  font-size: 12px;
  color: var(--text);
  background: rgba(31,111,235,0.06);
  border: 1px solid rgba(31,111,235,0.15);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.6;
}

/* ── 투자요약 탭: 핵심 3줄 강조 ── */
.news-rendered { }

.news-rendered h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(57,211,83,0.2);
}
.news-rendered h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin: 14px 0 6px;
}
/* 일반 bullet */
.news-rendered .bullet {
  display: flex;
  gap: 8px;
  margin-bottom: 7px;
  padding: 8px 12px;
  background: var(--surface);
  border-left: 3px solid var(--border);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
/* 핵심 3줄 bullet 강조 */
.news-rendered .bullet.key-signal {
  border-left-color: var(--green);
  background: rgba(57,211,83,0.05);
  color: var(--text);
  font-size: 13px;
}
.news-rendered .bullet .dot { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.news-rendered .bullet.key-signal .dot { color: var(--green); }

.news-rendered .list-row {
  padding: 3px 0 3px 12px;
  font-size: 12px;
  border-left: 2px solid var(--border);
  margin-bottom: 5px;
}
.news-rendered .plain       { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.news-rendered .section-gap { height: 14px; }

/* ==========================================================
   마이페이지 — 구독 패널
   ========================================================== */

.subscription-panel {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
}
.sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sub-title { font-size: 13px; font-weight: 600; }

.sub-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sub-plan {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  opacity: 0.55;
}
.sub-plan.active {
  opacity: 1;
  border-color: var(--accent);
  background: rgba(31,111,235,0.07);
}
.sub-plan-name {
  margin-bottom: 8px;
}
.sub-plan-name .tier-badge {
  font-size: 10px;
}
.sub-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-plan-features li {
  font-size: 11px;
  color: var(--muted);
  padding-left: 14px;
  position: relative;
}
.sub-plan-features li::before        { content: "✓"; position: absolute; left: 0; color: var(--green); }
.sub-plan-features li.locked         { opacity: 0.4; }
.sub-plan-features li.locked::before { content: "✕"; color: var(--danger); }

/* ==========================================================
   마이페이지 — 스크랩
   ========================================================== */

.mypage-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  gap: 10px;
  text-align: center;
}
.lock-icon       { font-size: 40px; opacity: 0.3; margin-bottom: 8px; }
.mypage-locked h2 { font-size: 16px; font-weight: 600; }
.mypage-locked p  { font-size: 13px; color: var(--muted); }
.btn-login-cta {
  margin-top: 12px;
  padding: 9px 22px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.btn-login-cta:hover { opacity: 0.85; }

/* ==========================================================
   마이페이지 — 리뉴얼 레이아웃
   ========================================================== */

/* 전체 2-컬럼 레이아웃 — 좌: 프로필·플랜(상) + 계정·로그아웃(하), 우: 메모/일지/스크랩(전체 높이) */
.mp-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: 20px;
  align-items: start;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.mp-sidebar-top {
  grid-column: 1;
  grid-row: 1;
}
.mp-sidebar-bottom {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}
.mp-layout > .mp-main {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}
@media (max-width: 768px) {
  .mp-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: 12px 14px;
  }
  .mp-sidebar-top,
  .mp-sidebar-bottom,
  .mp-layout > .mp-main {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 사이드바 */
.mp-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mp-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
}
.mp-tabs-card { flex: 1; }

/* 카드 공통 */
.mp-card {
  background: var(--surface2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.mp-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 14px;
}

/* 프로필 카드 */
.mp-profile-card {
  background: linear-gradient(135deg, rgba(31,111,235,0.12) 0%, var(--surface2) 60%);
  border-color: rgba(31,111,235,0.2);
}
.mp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(31,111,235,0.35);
}
.mp-profile-info { display: flex; flex-direction: column; gap: 10px; }
.mp-info-row { display: flex; flex-direction: column; gap: 3px; }
.mp-label {
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mp-value {
  font-size: 14px;
  font-weight: 600;
  color: #f3f4f6;
  word-break: break-all;
}
.mp-value-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mp-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}
.mp-social-icon.mp-social-google { background: #fff; }
.mp-social-icon.mp-social-naver { background: #03C75A; }
.mp-social-icon.mp-social-naver svg { width: 14px; height: 14px; }
.mp-social-icon.mp-social-kakao { color: #3c1e1e; background: #FEE500; }
.mp-tier-inline {
  display: inline-flex;
  margin-top: 2px;
}
.mp-email-with-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mp-verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: #39d353;
  background: rgba(57,211,83,0.15);
  border: 1px solid rgba(57,211,83,0.4);
  border-radius: 6px;
  letter-spacing: 0.03em;
}

/* 계정 관리 행 */
.mp-acct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mp-acct-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--accent);
}
.mp-chevron { font-size: 16px; color: var(--muted); }

/* 패널 제목 */
.mp-panel-title {
  font-size: 15px;
  font-weight: 700;
  color: #f3f4f6;
}

/* 주요 액션 버튼 (파란색) */
.mp-btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
  box-shadow: 0 3px 10px rgba(31,111,235,0.3);
}
.mp-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* 위험 아웃라인 버튼 (삭제 등) */
.mp-btn-ghost-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(248,81,73,0.35);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mp-btn-ghost-danger:hover {
  background: rgba(248,81,73,0.1);
  border-color: var(--danger);
}

/* 로그아웃 버튼 */
.mp-btn-logout {
  display: block;
  text-align: center;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(248,81,73,0.3);
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
  background: rgba(248,81,73,0.05);
}
.mp-btn-logout:hover {
  background: rgba(248,81,73,0.12);
  border-color: var(--danger);
  color: #fca5a5;
}

/* 플랜 카드: .sub-plans 기본 3열 + 모바일(768px)에서 1열. !important 금지 — 모바일 미디어쿼리가 적용되도록 */
.mp-sub-plans {
  gap: 8px;
}

.mypage-wrap { display: flex; flex-direction: column; }
.mypage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.mypage-title { font-size: 13px; font-weight: 600; }

.scrap-list {
  height: 180px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.scrap-list::-webkit-scrollbar       { width: 5px; }
.scrap-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.scrap-empty { padding: 20px; color: var(--muted); font-size: 13px; text-align: center; }

.scrap-item {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(48,54,61,0.5);
  cursor: pointer;
  transition: background 0.15s;
  gap: 10px;
}
.scrap-item:hover    { background: var(--hover-overlay); }
.scrap-item.selected { background: rgba(31,111,235,0.1); border-left: 3px solid var(--accent); }
.scrap-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(31,111,235,0.12);
  color: var(--accent);
  border-radius: 4px;
  flex-shrink: 0;
}
.scrap-item-time { font-size: 11px; color: var(--muted); margin-left: auto; flex-shrink: 0; }

.scrap-detail {
  padding: 14px 18px;
  overflow-y: auto;
  font-size: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  min-height: 120px;
}
.scrap-detail::-webkit-scrollbar       { width: 5px; }
.scrap-detail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.scrap-detail-placeholder { color: var(--muted); }

/* 스크랩 상세: 기사 카드(이미지 포함) */
.scrap-article-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.scrap-article-image {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  background: var(--bg-sub);
}
.scrap-article-image img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
}
.scrap-article-body { padding: 12px 14px; }
.scrap-article-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.scrap-article-title a { color: var(--accent); text-decoration: none; }
.scrap-article-title a:hover { text-decoration: underline; }
.scrap-article-summary {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.scrap-article-summary li { padding: 2px 0; }

.scrap-detail-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: center;
}
.scrap-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
  border: 1px solid rgba(88,166,255,0.25);
  background: rgba(88,166,255,0.08);
  color: #8bb1e0;
  letter-spacing: 0.02em;
}
.scrap-toolbar-btn:hover {
  background: rgba(88,166,255,0.18);
  border-color: rgba(88,166,255,0.55);
  color: #d8e8ff;
  transform: translateY(-1px);
}
.scrap-toolbar-btn:active {
  transform: translateY(0);
}
.scrap-toolbar-btn.scrap-btn-danger {
  border-color: rgba(248,81,73,0.25);
  background: rgba(248,81,73,0.07);
  color: #f47e7a;
}
.scrap-toolbar-btn.scrap-btn-danger:hover {
  background: rgba(248,81,73,0.18);
  border-color: rgba(248,81,73,0.6);
  color: #ff9f9b;
  transform: translateY(-1px);
}

/* ── 마이페이지 비밀번호 게이트 ─────────────────────────── */
.mypage-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}
.mypage-gate-inner {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px 28px;
  text-align: center;
}
.mypage-gate-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.mypage-gate-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.mypage-gate-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* ── 마이페이지 공통 폼 요소 ────────────────────────────── */
.mypage-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.mypage-input:focus { border-color: var(--accent); }
.mypage-form-msg {
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 5px;
  margin-bottom: 8px;
  text-align: left;
}
.mypage-msg-ok    { background: rgba(57,211,83,0.1);  color: #39d353; border: 1px solid rgba(57,211,83,0.25); }
.mypage-msg-error { background: rgba(248,81,73,0.1);  color: var(--danger); border: 1px solid rgba(248,81,73,0.25); }
.mypage-form-btn {
  width: 100%;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 7px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.mypage-form-btn:hover:not(:disabled) { opacity: 0.85; }
.mypage-form-btn:disabled { opacity: 0.5; cursor: default; }
.mypage-form-btn-danger { background: var(--danger); }

/* ── 마이페이지 계정 관리 ──────────────────────────────── */
.mypage-account-section {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.mypage-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 0 calc(16px + var(--fp-safe-right)) max(2px, var(--fp-safe-bottom)) calc(16px + var(--fp-safe-left));
}
.mypage-account-card {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: -1px;
}
.mypage-account-card-danger .mypage-account-card-header { color: var(--danger); }
.mypage-account-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.mypage-account-card-header:hover { background: rgba(255,255,255,0.03); }
.mypage-card-chevron { font-size: 11px; color: var(--muted); }
.mypage-account-card-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.mypage-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.mypage-form-group label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.mypage-account-card-body .mypage-form-btn {
  width: auto;
  display: inline-block;
}
.mypage-danger-notice {
  font-size: 11px;
  color: var(--danger);
  margin-bottom: 10px;
  line-height: 1.55;
}

/* ==========================================================
   공통 버튼
   ========================================================== */

.btn-accent {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-accent:hover { opacity: 0.85; }

.btn-danger-sm {
  padding: 5px 10px;
  background: transparent;
  color: var(--danger);
  border: 1px solid rgba(248,81,73,0.35);
  border-radius: 5px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-danger-sm:hover { background: rgba(248,81,73,0.08); }

/* ==========================================================
   하단 상태바 + 법적 고지
   ========================================================== */

.status-bar {
  position: sticky;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 calc(16px + var(--fp-safe-right)) calc(2px + var(--fp-safe-bottom)) calc(16px + var(--fp-safe-left));
  min-height: 28px;
  height: auto;
  background: var(--header);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  gap: 16px;
  flex-shrink: 0;
  /* overflow:hidden 이면 좁은 PC·태블릿(701px~)에서 배지가 길 때 맨 끝 「앱 설치」가 잘림 */
  overflow: visible;
  flex-wrap: wrap;
}
/* 하단 배지 래퍼 — 내부 .status-updates-pwa-row 한 줄(최근·다음·앱 설치) */
.status-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
/* 두 배지 공통 스타일 — 쌍둥이 뱃지 */
.status-badge-item {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* 최근·다음 업데이트 + 앱 설치 — 한 줄(줄바꿈 없음), 좁으면 배지 말줄임·버튼 축소 */
/* PC: 행·다음업데이트에 flex-grow 없음 → 앱 설치가 문구 바로 옆에 붙음 (끝으로 밀리지 않음) */
/* 푸터에서 #pwaInstallWrap 은 JS로 display:contents → 버튼이 행의 직접 플렉스 자식(모바일 래퍼 줄바꿈 방지) */
.status-updates-pwa-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: auto;
  justify-content: flex-start;
}
.status-updates-pwa-row .status-badge-item {
  flex: 0 1 auto;
  min-width: 0;
}
.status-updates-pwa-row #lastUpdatedBadge {
  flex-shrink: 0;
}
.status-updates-pwa-row .status-next-refresh {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-updates-pwa-row .pwa-install-wrap {
  flex: 0 1 auto;
  flex-shrink: 1;
  min-width: 0;
}
.status-updates-pwa-row #pwaInstallBtn {
  flex: 0 1 auto;
  flex-shrink: 1;
  min-width: 0;
}

@media (max-width: 380px) {
  .status-updates-pwa-row {
    gap: 4px 6px;
  }
  .status-updates-pwa-row .pwa-install-btn {
    max-width: min(88px, 25vw);
    padding: 0 4px;
    min-height: 19px;
    gap: 2px;
  }
  .status-updates-pwa-row .pwa-install-btn-text {
    font-size: clamp(7px, 2.35vw, 9px);
  }
  .status-updates-pwa-row .pwa-install-btn-icon {
    width: 11px;
    font-size: 8px;
  }
}

.disclaimer {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 520px;
  margin-left: auto;
  text-align: right;
}

/* 자사 WebView·서버 fp_cv: JS가 인라인 display:contents 를 줘도 설치 CTA 비노출 */
html.fp-native-app #pwaInstallWrap,
html.fp-native-app #pwaInstallBtn,
html.fp-native-app .pwa-install-wrap {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.fp-native-app #pwaInstallPopover,
html.fp-native-app #pwaInstallQrModal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pwa-install-wrap {
  position: relative;
  /* 노출 시 display: 푸터는 JS가 contents(한 줄), 로그인 독 등은 inline-flex */
  min-width: 0;
}
.pwa-install-btn {
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  max-width: 100%;
  min-height: 24px;
  white-space: nowrap;
  min-width: 0;
  overflow: visible; /* 폰트 자동 축소/조절 시 텍스트 잘림 방지 */
}
.pwa-install-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(230, 237, 243, 0.22);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: none;
}
.pwa-install-btn-icon {
  font-size: 10px;
  line-height: 1;
  opacity: 0.9;
  width: 14px;           /* 아이콘 공간 고정 → 텍스트 가운데감 유지 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pwa-install-btn-text {
  letter-spacing: -0.01em;
  font-size: clamp(9px, 2.6vw, 10px);
  min-width: 0;
  overflow: visible;
  line-height: 1;
  display: inline-block;
  flex: 0 0 auto;        /* 버튼 내에서 화살표+문자 비율 고정 */
  text-align: center;
}
.pwa-install-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
  padding: 1px 4px;
  border-radius: 999px;
  border: 1px solid rgba(57, 211, 83, 0.45);
  background: rgba(57, 211, 83, 0.16);
  color: #39d353;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  box-shadow: 0 0 8px rgba(57, 211, 83, 0.2);
}
.pwa-install-wrap.pulse .pwa-install-btn {
  animation: pwa-install-pulse 2.2s ease-in-out infinite;
}
.pwa-install-wrap.first-highlight .pwa-install-btn {
  animation: pwa-install-pulse 1.4s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 0 0 rgba(255, 255, 255, 0.06);
}
@keyframes pwa-install-pulse {
  0%   { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 0 0 rgba(255, 255, 255, 0.06); }
  60%  { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 0 0 rgba(255, 255, 255, 0.06); }
}
.pwa-install-popover {
  position: fixed;
  /* body 직계로 두어 상단 sticky(88)·배지 팝업(10100)·수수료 모달(10500) 위에 표시.
     토스트(11150)보다 위에 두어 하단 녹색 안내와 겹쳐도 설치 단계 상자가 가려지지 않게 함 */
  z-index: 11200;
  background: var(--surface);
  /* 배경과 겹칠 때 경계가 덜 보이는 문제 방지 */
  border: 1px solid var(--border);
  border-radius: 16px;
  /* 상단: ×(top 8 + 높이 32) 아래로 본문 시작. 우측은 아래 .pwa-install-popover-text padding-right 와 함께 리드 박스가 ×와 겹치지 않게 */
  padding: 44px 16px 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.58);
  width: min(380px, calc(100vw - 24px));
  max-width: none;
  text-align: center;
}
.pwa-install-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.pwa-install-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.12);
}
.pwa-install-popover-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  word-break: keep-all;
  margin-bottom: 6px;
  padding-right: 36px;
  box-sizing: border-box;
}

/* 비크롬 Android: 「이 브라우저에서 설치」 클릭 시에만 붙는 Chrome 권장 문단 */
.pwa-install-chrome-reco {
  margin: 0 0 12px 0;
  padding: 0 2px;
  font-size: clamp(12px, 3.1vw, 13px);
  line-height: 1.55;
  color: rgba(230, 237, 243, 0.88);
  text-align: left;
  word-break: keep-all;
}

.pwa-install-android-choice-intro {
  margin: 0;
  text-align: left;
  font-size: clamp(12px, 3.1vw, 14px);
  line-height: 1.65;
  letter-spacing: -0.015em;
  color: rgba(230, 237, 243, 0.9);
}

/* Android TWA / APK 안내 — 리드·수동 안내는 청록·골드 시안(테마 토큰만 쓰면 회색으로 퉁침) */
.pwa-install-twa-copy {
  display: block;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}
.pwa-install-twa-lead {
  margin: 0 0 12px 0;
  padding: 12px 14px;
  font-size: clamp(13px, 3.35vw, 15px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.55;
  color: #eaf6ff;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(0, 200, 255, 0.16) 0%, rgba(31, 111, 235, 0.1) 100%);
  border: 1px solid rgba(0, 200, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(0, 120, 255, 0.08) inset,
    0 8px 24px rgba(0, 0, 0, 0.22);
}
.pwa-install-twa-kw {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #8aefff;
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.35);
}
.pwa-install-twa-body {
  margin: 0;
  padding: 0 2px;
  font-size: clamp(12px, 3.1vw, 14px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.015em;
  color: rgba(230, 237, 243, 0.9);
}
.pwa-install-twa-body em {
  font-style: normal;
  font-weight: 700;
  color: #b8e8ff;
  border-bottom: 1px solid rgba(0, 200, 255, 0.35);
  padding-bottom: 1px;
}

/* 「홈 화면에 추가」 수동 안내 (Chrome / 삼성 인터넷 등) */
.pwa-install-manual-callout {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
  border: 1px solid rgba(255, 200, 100, 0.35);
  background: linear-gradient(165deg, rgba(255, 180, 72, 0.12), rgba(0, 200, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 200, 100, 0.08) inset;
}
.pwa-install-manual-title {
  margin: 0 0 8px 0;
  font-size: clamp(12px, 3.2vw, 13px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffe8b8;
}
.pwa-install-manual-body {
  margin: 0;
  font-size: clamp(11px, 3vw, 12.5px);
  line-height: 1.65;
  color: rgba(240, 245, 250, 0.92);
  word-break: keep-all;
}
.pwa-install-manual-steps {
  margin: 0;
  padding-left: 1.15em;
  font-size: clamp(11px, 3vw, 12.5px);
  line-height: 1.65;
  color: rgba(240, 245, 250, 0.9);
  word-break: keep-all;
}
.pwa-install-manual-steps li {
  margin-bottom: 6px;
}
.pwa-install-manual-steps li:last-child {
  margin-bottom: 0;
}
.pwa-install-manual-steps strong {
  color: #bfefff;
  font-weight: 700;
}

/* iPhone·iPad: Safari → 홈 화면에 추가 안내 */
.pwa-install-ios-guide {
  text-align: left;
}
.pwa-install-ios-guide .pwa-install-manual-title {
  margin-top: 0;
}
.pwa-install-ios-footnote {
  margin: 12px 0 0;
  font-size: clamp(10px, 2.8vw, 11.5px);
  line-height: 1.55;
  color: rgba(230, 237, 243, 0.72);
  word-break: keep-all;
}
.pwa-ios-share-glyph {
  font-weight: 800;
  letter-spacing: -0.05em;
}

.pwa-install-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-right: 36px;
  box-sizing: border-box;
}

.pwa-install-action-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  width: 100%;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.25;
  text-align: center;
}

.pwa-install-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(230, 237, 243, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.pwa-install-action-btn-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.pwa-install-action-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .pwa-install-popover {
    max-height: calc(100vh - 32px);
    max-height: min(85dvh, calc(100dvh - var(--fp-safe-top) - var(--fp-safe-bottom) - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
}

/* ==========================================================
   토스트
   ========================================================== */

.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  /* 팝오버(11200) 아래 — 설치 단계 상자가 토스트에 가리지 않도록 팝오버 z-index를 더 높게 둠 */
  z-index: 11150;
  white-space: normal;
  pointer-events: none;
  max-width: calc(100vw - 32px);
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  cursor: pointer;
}
.toast.success { border-color: rgba(57,211,83,0.4);  color: var(--green); }
.toast.error   { border-color: rgba(248,81,73,0.4);  color: var(--danger); }
.toast.info    { border-color: var(--border); color: var(--text); }

/* ==========================================================
   반응형 (Responsive Design)
   ========================================================== */

/* ── 1024px: 와이드 태블릿 ─────────────────────────────────── */
@media (max-width: 1024px) {
  .signal-row  { grid-template-columns: 1.8fr 1fr 1fr; }
  .market-grid { grid-template-columns: repeat(4, 1fr); }
  /* .news-cards는 1열 피드 고정 — media query override 불필요 */
}

/* ── 900px: 중간 화면 ────────────────────────────────────── */
@media (max-width: 900px) {
  .market-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 768px: 태블릿 메인 브레이크포인트 ────────────────────── */
@media (max-width: 768px) {
  /* 네비게이션 패딩 축소 (내부 컨테이너에 적용) */
  .section-nav-wrap .section-nav,
  .top-bar-container .sub-tab-nav,
  .top-bar-container .news-sort-bar { padding: 0 12px; }

  /* 대시보드 — PC와 동일 3열 시그널·좁은 간격 (모바일도 한눈에) */
  .dashboard    { padding: 8px 10px 6px; }
  .signal-row   {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }
  .signal-card  { padding: 8px 8px; }
  /* 시장 타일: 3열은 폭 부족으로 금·은·코인 가격 잘림 → 2열 */
  .market-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .market-tile  { padding: 8px 9px; }
  .market-price {
    font-size: clamp(12px, 3.6vw, 15px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .market-change { font-size: 11px; }
  .gold-prices,
  .silver-prices { margin: 6px 0 4px; }
  .gold-price-row,
  .silver-price-row {
    gap: 4px;
    align-items: baseline;
  }
  .gold-price-label,
  .silver-price-label { font-size: 9px; flex-shrink: 0; max-width: 46%; }
  .gold-price-value,
  .silver-price-value {
    font-size: clamp(11px, 3.5vw, 13px);
    min-width: 0;
    flex: 1;
    text-align: right;
    line-height: 1.15;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  /* 뉴스 */
  .news-content { padding: 12px 14px; }
  /* 768px에서 auto-fill이 자동으로 1-2열 처리 — 강제 1열 제거 */
  .news-card    { padding: 10px 14px; }

  /* 모바일 카드 타이틀 3줄 말줄임 (접힌 상태) */
  .news-card:not(.expanded) .news-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ACTION 섹션 폰트 축소 */
  .signal-action-row { padding: 14px 16px; gap: 14px; min-height: 80px; }
  .action-main       { font-size: 30px !important; }
  .action-icon       { font-size: 38px !important; }
  .action-sub        { font-size: 11px; }

  /* Why? 지표 행 */
  .why-row  { grid-template-columns: 76px 1fr 30px 52px; gap: 6px; }
  .why-name { font-size: 10px; }

  /* 차트 통계 2열 */
  .chart-stats-row { grid-template-columns: repeat(2, 1fr); }

  /* 구독 */
  .sub-plans { grid-template-columns: 1fr; }
}

/* ── 700px: 헤더 2행 전환 ──────────────────────────────────── */
@media (max-width: 700px) {
  :root {
    --fp-header-h: calc(88px + var(--fp-safe-top));
    --fp-topbar-top: calc(var(--fp-header-h) + var(--fp-authority-h));
    --fp-topbar-top-with-urgency: calc(var(--fp-topbar-top) + 40px);
  }
  /* 헤더 2행 레이아웃 */
  .header {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    overflow: visible;
    padding: calc(8px + var(--fp-safe-top)) calc(14px + var(--fp-safe-right)) 0 calc(14px + var(--fp-safe-left));
    gap: 4px;
  }
  .header-left   { grid-column: 1; grid-row: 1; }
  .header-center { display: none; }
  .header-right  {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
    padding-bottom: 2px;
    overflow-x: visible;
  }

  /* authority bar sticky 오프셋 수정 (헤더 88px 기준) */
  .authority-bar    { top: var(--fp-header-h); padding: 0 12px; gap: 10px; }

  /* urgency-banner 모바일 sticky (헤더 88px + authority 26px) */
  .urgency-banner  { top: var(--fp-topbar-top); }
  .urgency-banner.visible ~ .section-nav-wrap { top: var(--fp-topbar-top-with-urgency); margin-top: -1px; }
  .urgency-banner.visible ~ .top-bar-container { top: calc(var(--fp-topbar-top-with-urgency) + var(--fp-section-nav-h)); margin-top: -1px; }

  /* section-nav + top-bar-container sticky 오프셋 (헤더 88px + authority 26px) */
  .section-nav-wrap  { top: var(--fp-topbar-top); }
  .top-bar-container { top: calc(var(--fp-topbar-top) + var(--fp-section-nav-h)); }

  /* 업데이트 배지 모바일 축소 */
  .auth-update-time { padding: 2px 8px; font-size: 0.75rem; }
  .aut-label        { display: none; } /* 라벨 숨김 → 시간만 표시 */
  .auth-streak      { margin-left: 0; }

  /* 버튼 축소 */
  .btn-refresh { padding: 5px 10px; font-size: 12px; gap: 4px; }

  /* 대시보드/뉴스 패딩 (768px와 동일 밀도 유지) */
  .dashboard    { padding: 8px 10px 6px; }
  .news-content { padding: 10px 12px; }

  .market-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .market-tile  { padding: 7px 8px; }

  /* 700px에서 뉴스 카드: auto-fill이 자동으로 1열로 줄어듦 (320*2=640 > 700-28=672 → 2열 가능) */
  /* 확실한 1열 강제는 480px에서만 적용 */

  /* 하단 상태바 모바일: 위아래 배치 + 면책 문구 줄바꿈 */
  .status-bar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    height: auto;
    padding: 8px calc(12px + var(--fp-safe-right)) calc(10px + var(--fp-safe-bottom)) calc(12px + var(--fp-safe-left));
    gap: 8px;
    overflow: visible;
  }
  .status-badges {
    flex-shrink: 0;
    width: 100%;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
  }
  .status-updates-pwa-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px 8px;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
  /* 좁은 화면: 최근 업데이트도 축소·말줄임 허용 → 한 줄 유지 */
  .status-updates-pwa-row #lastUpdatedBadge {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .status-updates-pwa-row .status-badge-item {
    font-size: clamp(9px, 2.65vw, 11px);
  }
  .pwa-install-btn {
    padding: 1px 6px;
    gap: 4px;
    max-width: min(130px, 34vw);
  }
  .status-updates-pwa-row .pwa-install-btn {
    max-width: min(118px, 30vw);
  }
  .pwa-install-btn-icon { font-size: 9px; }
  .pwa-install-new-badge {
    padding: 1px 3px;
    font-size: 7px;
  }
  .disclaimer {
    display: block;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
    flex: none;
    max-width: 100%;
    line-height: 1.4;
  }

  /* 플랜 비교 모달 1열 */
  .plan-compare-modal { align-items: flex-start; padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .plan-compare-inner { max-width: 100%; width: 100%; padding: 16px 14px 20px; overflow-x: hidden; }
  .plan-compare-title { font-size: 16px; margin-bottom: 4px; }
  .plan-compare-desc  { font-size: 11px; margin-bottom: 12px; }
  .plan-compare-grid  { grid-template-columns: 1fr; gap: 10px; }
  .plan-compare-card-premium { padding-top: 18px; }
  .plan-compare-card  { padding: 12px 14px; min-width: 0; }
  .plan-compare-cta   { gap: 8px; }
  .btn-plan-detail, .btn-plan-upgrade, .btn-plan-close { padding: 8px 14px; font-size: 12px; }

  /* 헤더 overflow 힌트 화살표 위치 보정 */
  .header::after { display: none; }
}

/* ── 480px: 소형 모바일 ─────────────────────────────────────── */
@media (max-width: 480px) {
  /* 시그널·마켓: PC와 동일 다열 (폰트·패딩만 더 축소) */
  .signal-row  {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
  }
  .signal-card { padding: 6px 6px; }

  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .market-tile { padding: 6px 7px; }
  .market-price { font-size: clamp(11px, 3.8vw, 14px); }
  .gold-price-value,
  .silver-price-value { font-size: clamp(10px, 3.6vw, 12px); }

  /* ACTION 더 작게 */
  .action-main       { font-size: 24px !important; }
  .action-icon       { font-size: 32px !important; }
  .signal-action-row { padding: 12px 14px; gap: 10px; min-height: 70px; }
  .action-sub        { font-size: 10px; }

  /* What If? 1열 */
  .whatif-grid { grid-template-columns: 1fr; gap: 6px; }

  /* 대시보드/뉴스 패딩 최소화 */
  .dashboard    { padding: 8px 10px 6px; }
  .news-content { padding: 8px 10px; }
  .news-card    { padding: 10px 12px; }

  /* .news-cards는 이미 1열 피드 — max-width만 좁힘 */
  .news-cards { max-width: 100%; gap: 10px; }

  /* 뉴스 카드 제목 2줄 클램프 */
  .news-card:not(.expanded) .news-card-title {
    -webkit-line-clamp: 2;
  }

  /* 업그레이드 모달 */
  .upgrade-plan-grid   { grid-template-columns: 1fr; }
  .upgrade-modal-stats { gap: 12px; }
  .payment-methods     { flex-direction: column; }
  .modal-price-num     { font-size: 26px; }

  /* CS 알림 폼 세로 배치 */
  .cs-notify-form { flex-direction: column; max-width: 100%; }
  .cs-notify-btn  { text-align: center; }

  /* 아카이브 검색 세로 배치 */
  .asb-row-top { flex-direction: column; }
  .asb-field   { min-width: 0; }

  /* Why? 행 더 좁게 */
  .why-row  { grid-template-columns: 60px 1fr 28px 44px; gap: 4px; }
  .why-name { font-size: 9.5px; }

  /* 차트 모달 */
  .chart-modal-inner { padding: 16px 14px 14px; }
  .chart-canvas-wrap { height: 200px; }
  .chart-stats-row   { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .chart-stat-item   { padding: 8px 10px; }
  .chart-modal-price { font-size: 22px; }

  /* 마이페이지 */
  .mypage-locked { padding: 40px 20px; }

  /* 헤더 로고 텍스트 축소 */
  .header-logo-flow  { font-size: 13px; }
  .header-logo-pulse { font-size: 9px; }
  .header-sub        { display: none; }
}

/* 초소형 폭: 금/은 카드 살때·가격 가로 한 줄이 부족할 때 세로로 */
@media (max-width: 360px) {
  .gold-price-row,
  .silver-price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .gold-price-label,
  .silver-price-label {
    max-width: none;
  }
  .gold-price-value,
  .silver-price-value {
    text-align: left;
    white-space: normal;
    word-break: break-all;
  }
}

/* ==========================================================
   Authority Bar (모델 권위 표시줄)
   ========================================================== */

.authority-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  height: 26px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  position: sticky;
  top: var(--fp-header-h);
  z-index: 89;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.authority-bar::-webkit-scrollbar { display: none; }
.authority-bar strong { color: var(--text); }
.auth-live-dot {
  color: var(--green);
  font-size: 10px;
  animation: live-blink 2s ease-in-out infinite;
}
.auth-update-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.01em;
  padding: 3px 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.25s, border-color 0.25s;
}
.auth-update-time svg  { flex-shrink: 0; color: var(--accent); opacity: 0.9; }
.auth-update-time:hover {
  background: rgba(31, 111, 235, 0.12);
  border-color: rgba(31, 111, 235, 0.3);
}
.aut-label { font-weight: 400; color: rgba(201, 209, 217, 0.65); }
.aut-time  { font-weight: 700; color: #e6edf3; letter-spacing: 0.03em; }
@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.auth-streak {
  margin-left: auto;
  color: var(--warn);
  font-size: 11px;
}

/* ==========================================================
   Urgency Banner (변동성 경고)
   ========================================================== */

.urgency-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  margin: 0;
  background: #150d0d;
  border-bottom: 1px solid rgba(248, 81, 73, 0.25);
  font-size: 12px;
  color: var(--danger);
  font-weight: 600;
  position: sticky;
  top: var(--fp-topbar-top);
  z-index: 87;
  line-height: 1.4;
}
.urgency-banner.visible { display: flex; margin-top: -1px; }
/* urgency 표시 시 section-nav + top-bar가 그 아래에 고정되도록, 틈 제거 */
.urgency-banner.visible ~ .section-nav-wrap { top: var(--fp-topbar-top-with-urgency); margin-top: -1px; }
.urgency-banner.visible ~ .top-bar-container { top: calc(var(--fp-topbar-top-with-urgency) + var(--fp-section-nav-h)); margin-top: -1px; }
.urgency-cta {
  padding: 3px 12px;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}
.urgency-cta:hover { opacity: 0.85; }
.urgency-close {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  margin-left: 4px;
  opacity: 0.7;
}
.urgency-close:hover { opacity: 1; }

/* ==========================================================
   TODAY ACTION — Dominant (강조 스타일)
   ========================================================== */

.signal-action-row {
  min-height: 100px;
}
.action-icon {
  font-size: 52px !important;
}
.action-main {
  font-size: 42px !important;
}
@keyframes action-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(0,0,0,0) inset; }
  50%       { box-shadow: 0 0 40px rgba(255,255,255,0.04) inset; }
}
.action-risk_on  { animation: action-pulse-green 3s ease-in-out infinite; }
.action-wait     { animation: action-pulse-warn  3s ease-in-out infinite; }
.action-risk_off { animation: action-pulse-red   3s ease-in-out infinite; }

@keyframes action-pulse-green {
  0%, 100% { box-shadow: 0 0 24px rgba(57,211,83,0.07) inset; }
  50%       { box-shadow: 0 0 40px rgba(57,211,83,0.15) inset; }
}
@keyframes action-pulse-warn {
  0%, 100% { box-shadow: 0 0 24px rgba(227,179,65,0.06) inset; }
  50%       { box-shadow: 0 0 40px rgba(227,179,65,0.14) inset; }
}
@keyframes action-pulse-red {
  0%, 100% { box-shadow: 0 0 24px rgba(248,81,73,0.07) inset; }
  50%       { box-shadow: 0 0 40px rgba(248,81,73,0.15) inset; }
}

/* ==========================================================
   Strategy + CTA Block
   ========================================================== */

.strategy-cta-block {
  background: rgba(31,111,235,0.06);
  border: 1px solid rgba(31,111,235,0.18);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.strategy-cta-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.strategy-cta-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.strategy-cta-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  padding-top: 2px;
}
.strategy-cta-text { font-size: 12px; color: var(--text); line-height: 1.5; flex: 1; min-width: 0; overflow-wrap: break-word; }
.strategy-cta-divider {
  height: 1px;
  background: rgba(31,111,235,0.15);
  margin-bottom: 8px;
}
.strategy-cta-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.strategy-cta-hint {
  font-size: 11px;
  color: var(--muted);
  flex: 1;
}
.strategy-cta-hint strong { color: var(--accent); }
.strategy-cta-btn {
  padding: 5px 14px;
  background: rgba(31,111,235,0.15);
  border: 1px solid rgba(31,111,235,0.3);
  color: var(--accent);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.strategy-cta-btn:hover { background: rgba(31,111,235,0.25); }

/* ==========================================================
   Why? Section (시그널 근거)
   ========================================================== */

.why-section {
  margin-bottom: 10px;
}
.why-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.why-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.why-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.why-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px 60px;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(48,54,61,0.5);
}
.why-row:last-child { border-bottom: none; }
.why-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.why-bar-track {
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.why-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--warn) 50%, var(--danger) 100%);
  background-size: 200% 100%;
  transition: width 0.6s ease;
}
.why-score {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  text-align: right;
}
.why-label {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.why-label.high   { color: var(--danger); }
.why-label.warn   { color: var(--warn); }
.why-label.ok     { color: var(--green); }

/* Premium lock glow */
/* ── 티어 전용 존 컨테이너 ── */
.tier-zone {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.tab-panel > .tier-zone {
  padding: 14px 16px;
  border-radius: 0;
}

.locked-premium {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(227,179,65,0.25),
              0 0 20px rgba(227,179,65,0.05);
}
.locked-premium > *:not(.plock-overlay) {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.plock-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  background: rgba(13,17,23,0.55);
  backdrop-filter: blur(1px);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s;
}
.locked-premium .plock-overlay { display: flex; }
.plock-overlay:hover { background: rgba(13,17,23,0.65); }
.plock-icon { font-size: 18px; }
.plock-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--warn);
  letter-spacing: 0.08em;
}
.plock-sub {
  font-size: 9px;
  color: var(--muted);
}

/* ==========================================================
   What If? Section (시나리오)
   ========================================================== */

.whatif-section {
  margin-bottom: 10px;
}
.whatif-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.whatif-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.whatif-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.whatif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.whatif-card.scenario-bull {
  border-color: rgba(57,211,83,0.25);
  background: rgba(57,211,83,0.03);
}
.whatif-card.scenario-bear {
  border-color: rgba(248,81,73,0.25);
  background: rgba(248,81,73,0.03);
}
.whatif-emoji { font-size: 16px; margin-bottom: 4px; }
.whatif-prob {
  font-size: 18px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}
.scenario-bull .whatif-prob { color: var(--green); }
.scenario-bear .whatif-prob { color: var(--danger); }
.whatif-cond {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.whatif-outcome {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

/* ==========================================================
   Yesterday vs Today 비교 배지
   ========================================================== */

.yday-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}
.yday-badge .yday-arrow-up   { color: var(--green); }
.yday-badge .yday-arrow-down { color: var(--danger); }
.yday-badge .yday-arrow-same { color: var(--muted); }

/* ==========================================================
   2-Level Navigation (Section Nav + Sub Tab Nav + Sort Bar)
   부모 .top-bar-container 로 Flexbox 밀착
   ========================================================== */

.top-bar-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(var(--fp-topbar-top) + var(--fp-section-nav-h));
  z-index: 88;
  background: var(--header);
}

.section-nav-wrap {
  background: var(--header);
  border-top: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: var(--fp-topbar-top);
  z-index: 89;
}
.section-nav-wrap::before {
  content: '‹';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  background: linear-gradient(to left, transparent 0%, var(--header) 55%);
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.section-nav-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  background: linear-gradient(to right, transparent 0%, var(--header) 55%);
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.section-nav-wrap.has-overflow-left::before { opacity: 1; }
.section-nav-wrap.has-overflow-right::after { opacity: 1; }
.section-nav {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 36px;
  padding: 0 32px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-tab {
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
}
.section-tab:hover { color: var(--text); }
.section-tab.active {
  color: var(--text);
  border-bottom-color: #58a6ff;
  border-bottom-width: 3px;
}
.section-tab-basic  { color: var(--muted); }
.section-tab-basic:hover  { color: var(--text); }
.section-tab-basic.active  { color: var(--text); border-bottom-color: #58a6ff; border-bottom-width: 3px; }
.section-tab-premium  { color: var(--warn); }
.section-tab-premium:hover  { color: #f0c060; }
.section-tab-premium.active  { color: #f0c060; border-bottom-color: var(--warn); }

.sub-tab-nav-wrap {
  background: var(--header);
  border-top: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.sub-tab-nav-wrap::before {
  content: '‹';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
  background: linear-gradient(to left, transparent 0%, var(--header) 55%);
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.sub-tab-nav-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  background: linear-gradient(to right, transparent 0%, var(--header) 55%);
  pointer-events: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}
.sub-tab-nav-wrap.has-overflow-left::before { opacity: 1; }
.sub-tab-nav-wrap.has-overflow-right::after { opacity: 1; }
.sub-tab-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 32px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tab-nav::-webkit-scrollbar { display: none; }

/* ── 뉴스 정렬 바 ──────────────────────────────────────────────────────────── */
.news-sort-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 32px;
  margin: 0;
  background: var(--header);
  border-top: none;
  border-bottom: none;
}
.sort-bar-label {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}
.sort-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sort-btn {
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.sort-btn:hover {
  color: var(--text);
  border-color: rgba(230, 237, 243, 0.22);
}
.sort-btn.active {
  font-weight: 600;
}
/* 비활성: 공통 .sort-btn(회색). 선택(active)일 때만 모드별 색 */
.sort-btn-latest.active {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.65);
  background: rgba(31, 111, 235, 0.1);
}
.sort-btn-impact.active {
  color: #ff7b72;
  border-color: rgba(248, 81, 73, 0.8);
  background: rgba(248, 81, 73, 0.14);
  box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.18) inset;
}
.sort-btn-unread.active {
  color: #7ee787;
  border-color: rgba(57, 211, 83, 0.78);
  background: rgba(57, 211, 83, 0.12);
  box-shadow: 0 0 0 1px rgba(57, 211, 83, 0.2) inset;
}
/* 활성 탭에 마우스 올려도 색 유지 */
.sort-btn-latest.active:hover {
  color: #58a6ff;
  border-color: rgba(88, 166, 255, 0.75);
  background: rgba(31, 111, 235, 0.14);
}
.sort-btn-impact.active:hover {
  color: #ff7b72;
  border-color: rgba(248, 81, 73, 0.85);
  background: rgba(248, 81, 73, 0.18);
}
.sort-btn-unread.active:hover {
  color: #7ee787;
  border-color: rgba(57, 211, 83, 0.85);
  background: rgba(57, 211, 83, 0.16);
}

/* ── 뉴스 검색 토글 버튼 ─────────────────────────────────────────────────────── */
.sort-btn-search-toggle {
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.sort-btn-search-toggle:hover,
.sort-btn-search-toggle.active {
  color: #58a6ff;
  border-color: rgba(88,166,255,0.6);
  background: rgba(31,111,235,0.1);
}

/* ── 뉴스 검색 패널 ──────────────────────────────────────────────────────────── */
.news-search-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--header);
  border-bottom: 1px solid transparent;
  transition: max-height 0.22s ease, border-color 0.22s ease;
}
.news-search-panel.open {
  max-height: 120px;
  border-bottom-color: var(--border);
}
.nsp-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
}
.nsp-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.nsp-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.nsp-input:focus {
  border-color: rgba(88,166,255,0.6);
  background: rgba(31,111,235,0.06);
}
.nsp-input::placeholder { color: var(--muted); }
.nsp-clear {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
}
.nsp-clear.visible {
  opacity: 1;
  pointer-events: auto;
}
.nsp-clear:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.nsp-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 8px;
}
.nsp-scope-label {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.nsp-scope-group {
  display: flex;
  gap: 4px;
}
.nsp-scope {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nsp-scope.active {
  color: #58a6ff;
  border-color: rgba(88,166,255,0.6);
  background: rgba(31,111,235,0.12);
}
.nsp-scope:hover { color: var(--text); border-color: rgba(230,237,243,0.22); }
.nsp-result-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* 라이트 테마 */
[data-theme="light"] .nsp-input {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .nsp-input:focus {
  background: rgba(31,111,235,0.04);
}
.nsp-no-result {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.sub-tab {
  padding: 2px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid transparent;
  white-space: nowrap;
  background: none;
  font-family: inherit;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.sub-tab:hover { color: var(--text); background: var(--surface2); }
.sub-tab.active {
  color: #58a6ff;
  background: rgba(31, 111, 235, 0.12);
  border-color: rgba(88, 166, 255, 0.55);
}
.sub-tab-cs::after {
  content: ' ·CS';
  font-size: 8px;
  opacity: 0.8;
  margin-left: 2px;
}

/* ==========================================================
   Coming Soon Panel
   ========================================================== */

.cs-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  padding: 40px 20px;
}
.cs-panel.visible { display: flex; }
.cs-icon { font-size: 36px; margin-bottom: 12px; }
.cs-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cs-desc {
  font-size: 13px;
  color: var(--muted);
  max-width: 300px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.cs-panel-content {
  width: 100%;
  max-width: 560px;
  text-align: left;
  margin-top: 12px;
}

/* 종목 심층 분석 패널 */
.company-analysis-wrap {
  padding: 16px 14px;
  max-width: 720px;
  margin: 0 auto;
}
.company-analysis-search {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 16px auto;
}
.company-analysis-input-wrap {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.company-category-picker {
  position: relative;
  min-width: 90px;
  flex: 0 0 auto;
}
.company-category-btn {
  height: 40px;
  min-width: 90px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(88, 166, 255, 0.4);
  background: linear-gradient(180deg, rgba(19, 30, 47, 0.96) 0%, rgba(13, 24, 38, 0.96) 100%);
  color: #cfe5ff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.company-category-btn::after {
  content: '▾';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #7eaee6;
  font-size: 11px;
}
.company-category-picker.open .company-category-btn::after {
  content: '▴';
}
.company-category-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: rgba(12, 19, 31, 0.98);
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 12020;
}
.company-category-picker.open .company-category-menu {
  display: block;
}
.company-category-option {
  width: 100%;
  border: none;
  background: transparent;
  color: #d4e5fa;
  text-align: left;
  font-size: 13px;
  padding: 10px 12px;
  cursor: pointer;
}
.company-category-option + .company-category-option {
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}
.company-category-option:hover,
.company-category-option.active {
  background: rgba(56, 139, 253, 0.2);
  color: #fff;
}
.company-analysis-category-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.company-analysis-input-wrap .company-analysis-input {
  flex: 1;
  min-width: 0;
}
.company-analysis-input {
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.company-analysis-input::placeholder {
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 480px) {
  .company-analysis-input::placeholder {
    font-size: 11px;
  }
}
.company-analysis-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.15);
}
.company-analysis-btn {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.company-analysis-result {
  min-height: 120px;
}
.company-analysis-placeholder {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 24px 16px;
  margin: 0;
}
.company-analysis-cards {
  display: grid;
  gap: 16px;
}
.company-analysis-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.company-valuation-line {
  margin: 0 0 10px 0;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(0, 200, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.company-analysis-card-title {
  margin: 0;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--border);
}
.company-analysis-card-body {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}
.company-analysis-card-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.company-analysis-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  padding: 20px;
}
.company-analysis-loading-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 36px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.company-analysis-loading-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: company-analysis-spin 0.8s linear infinite;
}
@keyframes company-analysis-spin {
  to { transform: rotate(360deg); }
}
.company-analysis-loading-text {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}

/* ── 기업분석 전용 AI 로딩 UI ────────────────────────────────────────────── */
/* 뷰포트 중앙 고정 오버레이 (document.body 에 append 되어 tab-panel transform 영향 없음) */
.ca-inline-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: status-popup-fade 0.2s ease-out;
}
.ca-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 0 8px;
}
.ca-loading-orb {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  filter: drop-shadow(0 0 14px rgba(0, 180, 255, 0.35));
}
.ca-loading-icon {
  display: block;
  animation: ca-icon-pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(99, 179, 237, 0.5));
}
@keyframes ca-icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.55; transform: scale(0.9); }
}
.ca-loading-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent, #00b4ff);
  letter-spacing: 0.02em;
}
.ca-loading-sub {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text, #e6edf3);
  opacity: 0.85;
}
.ca-loading-eta {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted, #8b949e);
}
.ca-loading-dots {
  display: flex;
  gap: 6px;
}
.ca-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #00b4ff);
  opacity: 0.3;
  animation: ca-dot-blink 1.2s ease-in-out infinite;
}
.ca-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.ca-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ca-dot-blink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
  40%            { opacity: 1;   transform: scale(1.15); }
}

/* 진행/오류 통합 팝업 — 배경 어둡게, 정중앙 팝업 + 확인 버튼 */
.status-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
  animation: status-popup-fade 0.2s ease-out;
}
@keyframes status-popup-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.status-popup-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.status-popup-msg {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.status-popup-actions {
  margin-top: 8px;
}
.status-popup-btn {
  min-width: 100px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent, #0d6efd);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.status-popup-btn:hover {
  opacity: 0.9;
}

.feature-panel { padding: 0 4px; }
.feature-block {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.feature-block:last-child { border-bottom: none; margin-bottom: 0; }
.feature-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.feature-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.feature-value.risk-high { color: var(--danger); }
.feature-value.risk-mid  { color: var(--warn); }
.feature-value.risk-low  { color: var(--green); }
.feature-value.direction-up   { color: var(--green); }
.feature-value.direction-down { color: var(--danger); }
.feature-value.direction-flat { color: var(--muted); }
.feature-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.feature-muted { font-size: 12px; color: var(--muted); margin-top: 4px; }
.feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.feature-table th,
.feature-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.feature-table th { color: var(--muted); font-weight: 600; }
.watchlist-form,
.portfolio-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.watchlist-input {
  padding: 6px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  min-width: 80px;
}
.watchlist-btn {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.watchlist-btn:hover { opacity: 0.9; }
.watchlist-list { list-style: none; padding: 0; margin: 0; }
.watchlist-item,
.watchlist-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.watchlist-symbol { font-weight: 700; min-width: 64px; }
.watchlist-name { color: var(--muted); flex: 1; }
.watchlist-remove {
  font-size: 11px;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.watchlist-remove:hover { text-decoration: underline; }
.portfolio-form .watchlist-input { flex: 0 0 auto; }
.portfolio-table td .watchlist-remove { margin-left: auto; }

.cs-notify-form {
  display: flex;
  gap: 6px;
  max-width: 300px;
  width: 100%;
}
.cs-notify-input {
  flex: 1;
  padding: 7px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.cs-notify-input:focus { outline: none; border-color: var(--accent); }
.cs-notify-btn {
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.cs-notify-btn:hover { opacity: 0.85; }

/* ==========================================================
   Behavioral Popup
   ========================================================== */

.behavioral-popup {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 280px;
  background: var(--surface);
  border: 1px solid rgba(227,179,65,0.3);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: popup-slide-in 0.3s ease;
}
.behavioral-popup.visible { display: block; }
@keyframes popup-slide-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.popup-close:hover { color: var(--text); }
.popup-emoji { font-size: 24px; margin-bottom: 8px; }
.popup-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.popup-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.popup-cta {
  display: block;
  width: 100%;
  padding: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.popup-cta:hover { opacity: 0.85; }

/* ==========================================================
   구형 사용자 비밀번호 변경 필수 모달
   ========================================================== */

.legacy-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.legacy-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

.legacy-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: center;
}

.legacy-modal-desc {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}

/* ==========================================================
   게스트 전용 마이페이지 기능 소개 팝업
   ========================================================== */

.guest-intro-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99998;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: guestIntroFadeIn 0.3s ease;
}
@keyframes guestIntroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.guest-intro-modal {
  position: relative;
  background: linear-gradient(160deg, #0d1520 0%, #0a0f18 100%);
  border: 1px solid rgba(0,180,255,0.25);
  border-radius: 16px;
  padding: 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 16px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,180,255,0.08);
  animation: guestIntroSlideUp 0.35s ease;
}
@keyframes guestIntroSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.guest-intro-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #8b949e;
  font-size: 22px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.guest-intro-close:hover {
  background: rgba(255,255,255,0.12);
  color: #c9d1d9;
}

.guest-intro-header {
  text-align: center;
  margin-bottom: 20px;
}
.guest-intro-icon {
  display: inline-block;
  font-size: 36px;
  margin-bottom: 8px;
}
.guest-intro-title {
  font-size: 20px;
  font-weight: 700;
  color: #f0f6fc;
  margin: 0 0 6px 0;
}
.guest-intro-sub {
  font-size: 13px;
  color: #8b949e;
  margin: 0;
}

.guest-intro-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.guest-intro-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(0,180,255,0.06);
  border: 1px solid rgba(0,180,255,0.12);
  border-radius: 10px;
}
.guest-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.guest-intro-feature strong {
  display: block;
  font-size: 14px;
  color: #00B4FF;
  margin-bottom: 4px;
}
.guest-intro-feature p {
  font-size: 12px;
  color: #8b949e;
  line-height: 1.5;
  margin: 0;
}

.guest-intro-cta-text {
  font-size: 13px;
  color: #c9d1d9;
  text-align: center;
  margin: 0 0 14px 0;
}
.guest-intro-cta-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #00B4FF 0%, #0088cc 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 16px rgba(0,180,255,0.35);
}
.guest-intro-cta-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}
.guest-intro-skip {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  background: none;
  color: #8b949e;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s;
}
.guest-intro-skip:hover {
  color: #c9d1d9;
}

.legacy-modal-form .mypage-form-group {
  margin-bottom: 14px;
}

.legacy-modal-form .mypage-form-btn {
  width: 100%;
  margin-top: 8px;
}

/* ==========================================================
   계정 관리 모달 (비밀번호 확인 + 관리 화면)
   ========================================================== */

.acct-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.acct-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.acct-modal-box-wide {
  max-width: 480px;
  align-items: stretch;
}

.acct-modal-icon {
  font-size: 36px;
  margin-bottom: 4px;
}

.acct-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  text-align: center;
}

.acct-modal-desc {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 6px;
}

.acct-modal-box input[type="password"],
.acct-modal-box input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.acct-modal-box input[type="password"]:focus,
.acct-modal-box input[type="text"]:focus {
  border-color: var(--accent);
}

.acct-modal-box .mypage-form-btn {
  width: 100%;
  margin-top: 4px;
}

/* 마이페이지 계정관리 열기 버튼 */
.mypage-acct-open-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.mypage-acct-open-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}
.mypage-acct-open-btn .mypage-card-chevron {
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================
   Mobile adjustments for new sections
   ========================================================== */

@media (max-width: 700px) {
  .authority-bar { gap: 10px; font-size: 10px; }
  .auth-streak   { display: none; }
  .whatif-grid   { grid-template-columns: 1fr; }
  .why-row       { grid-template-columns: 80px 1fr 30px 52px; }
  .section-tab   { padding: 8px 12px; font-size: 11px; }
  .behavioral-popup { bottom: 12px; right: 12px; width: 260px; }
}

@media (max-width: 480px) {
  :root {
    /* authority-bar 숨김 → sticky 오프셋에서도 26px 제거하여 헤더-탭 사이 공백 제거 */
    --fp-authority-h: 0px;
  }
  .action-main  { font-size: 30px !important; }
  .action-icon  { font-size: 38px !important; }
  .section-nav-wrap  { top: var(--fp-topbar-top); } /* JS가 --fp-topbar-top 동적 계산 */
  .top-bar-container { top: calc(var(--fp-topbar-top) + var(--fp-section-nav-h)); }
  .authority-bar { display: none; }
}

/* ── 종목 자동완성 드롭다운 (카테고리 연동) ───────────────────────────────── */
#autocomplete-results,
.autocomplete-results-dropdown,
.ticker-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    scroll-behavior: smooth;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 8px;
    z-index: 99999 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}
#autocomplete-results li,
.autocomplete-results-dropdown li,
.ticker-suggestions-dropdown li {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
    transition: background 0.2s;
}
#autocomplete-results li:last-child,
.autocomplete-results-dropdown li:last-child,
.ticker-suggestions-dropdown li:last-child {
    border-bottom: none;
}
#autocomplete-results li:hover,
.autocomplete-results-dropdown li:hover,
.ticker-suggestions-dropdown li:hover {
    background: var(--accent);
    color: #fff;
}

/* 자동완성 항목 내 입력어 하이라이트 — 글자 색만 (배경 없음) */
#autocomplete-results .autocomplete-highlight,
.autocomplete-results-dropdown .autocomplete-highlight,
.ticker-suggestions-dropdown .autocomplete-highlight {
    color: #00d4ff;
    font-weight: 600;
}
#autocomplete-results li:hover .autocomplete-highlight,
.autocomplete-results-dropdown li:hover .autocomplete-highlight,
.ticker-suggestions-dropdown li:hover .autocomplete-highlight {
    color: #fff;
}

/* ── 종목 심층 분석 검색창 확장 스타일 ─────────────────────────────────────── */
#companySearchQuery {
    width: 100%;
    max-width: 600px; /* 검색창 넓이 대폭 확장 */
    height: 52px; /* 터치하기 좋게 높이 확장 */
    padding: 0 20px;
    font-size: 16px; /* 글자 크기 키움 */
    border: 2px solid var(--border);
    border-radius: 26px; /* 둥근 알약 형태 */
    background-color: var(--surface2);
    color: var(--text-primary);
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto; /* 가운데 정렬 */
}

#companySearchQuery:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.15);
    outline: none;
    background-color: var(--surface);
}

/* 검색창을 감싸는 부모 컨테이너가 있다면 중앙 정렬 보조 */
.search-box, .deep-search-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
}

/* ── 종목 심층 분석: 카테고리 탭 (최상단 승격) ─────────────────────────── */
.company-search-category-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 14px auto;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.company-search-category-tabs .quick-cat-btn {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.01em;
}
.company-search-category-tabs .quick-cat-btn.active {
    background: linear-gradient(180deg, rgba(56,139,253,0.28) 0%, rgba(13,110,253,0.18) 100%);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(88,166,255,0.45) inset;
}
.company-search-category-tabs .quick-cat-btn:not(.active):hover {
    background: rgba(148,163,184,0.1);
}
@media (max-width: 480px) {
    .company-search-category-tabs .quick-cat-btn {
        font-size: 13px;
        padding: 6px 8px;
    }
}

/* ── 종목 심층 분석: 인기 종목 원클릭 분석 ─────────────────────────── */
.quick-select-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 24px auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}
.quick-select-label {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.01em;
}
.quick-category-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.quick-cat-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}
.quick-cat-btn.active,
.quick-cat-btn:hover {
    color: var(--text);
    background: var(--surface2);
}
.quick-ticker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.quick-ticker-tag {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.quick-ticker-tag:hover {
    border-color: var(--accent);
    background: rgba(31, 111, 235, 0.1);
    transform: translateY(-2px);
}

/* ── 우측 하단 고정형 AI 채팅창 (접힌 상태 시작, 드래그, 숨기기 영역) ─────────── */
.ai-chat-wrap {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9999;
  font-size: 14px;
  width: fit-content;
  min-width: 0;
  transition: box-shadow 0.2s;
  overflow: visible; /* 하단 glow·그림자가 잘리지 않도록 */
}
@media (max-width: 768px) {
  /* 모바일: 홈 인디케이터·브라우저 툴바·pill 그림자 여유 — 인라인 bottom 미설정 시 */
  .ai-chat-wrap {
    right: max(12px, var(--fp-safe-right));
    bottom: calc(20px + var(--fp-safe-bottom));
  }
}
.ai-chat-wrap.ai-chat-dragging {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 하단 숨기기 영역 — 알라딘 램프 (이미지 + 입자 + 연기) */
.ai-chat-hide-zone {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 200px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 8px;
  background: transparent;
  border: none;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.3s;
}
.ai-chat-hide-zone.visible {
  opacity: 1;
}
.ai-chat-lamp-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 100% at 50% 100%, #1a0b2e 0%, #0d0520 40%, #050510 100%);
  border-radius: 24px 24px 0 0;
  z-index: 0;
}
.ai-lamp-canvas {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 200px;
  height: 180px;
  z-index: 3;
  pointer-events: none;
}
.ai-chat-lamp-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
}
.ai-chat-lamp-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 120px;
  height: 100px;
  background: radial-gradient(ellipse 80% 70% at 50% 85%, rgba(120, 80, 180, 0.5) 0%, rgba(80, 50, 140, 0.25) 40%, transparent 70%);
  filter: blur(12px);
  pointer-events: none;
  z-index: -1;
}
.ai-chat-hide-zone.active .ai-chat-lamp-wrap::before {
  background: radial-gradient(ellipse 80% 70% at 50% 85%, rgba(140, 100, 220, 0.55) 0%, rgba(100, 60, 180, 0.3) 40%, transparent 70%);
}
.ai-chat-hide-zone.sealing .ai-chat-lamp-wrap::before {
  background: radial-gradient(ellipse 90% 80% at 50% 85%, rgba(0, 180, 255, 0.4) 0%, rgba(100, 80, 200, 0.35) 35%, transparent 70%);
}
.ai-chat-lamp-img {
  max-width: 90px;
  max-height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(120, 80, 180, 0.4));
  transition: filter 0.2s, transform 0.2s;
}
.ai-chat-hide-zone.active .ai-chat-lamp-img {
  filter: drop-shadow(0 0 10px rgba(140, 100, 220, 0.5));
  animation: lamp-pulse 0.6s ease-in-out infinite;
}
.ai-chat-hide-zone.sealing .ai-chat-lamp-img {
  filter: drop-shadow(0 0 14px rgba(0, 200, 255, 0.6));
  animation: lamp-glow 0.4s ease-out infinite;
}
@keyframes lamp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes lamp-glow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(0, 200, 255, 0.6)); }
  50% { filter: drop-shadow(0 0 20px rgba(0, 200, 255, 0.8)); }
}
.ai-chat-hide-label {
  position: relative;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: rgba(180, 200, 255, 0.95);
  text-shadow: 0 0 10px rgba(0, 100, 200, 0.5);
}

/* 램프 들어가는 연기 효과 — 크게 강화 */
/* 지니 복귀 연기 — 램프와 동일 Canvas 2D (lamp-effects.js) */
.genie-poof-particles-host {
  position: fixed;
  width: 320px;
  height: 320px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 100050;
  display: none;
  overflow: visible;
  /* 캔버스 사각 테두리가 보이지 않도록 가장자리만 페더 */
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 28%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 28%, transparent 78%);
}
.genie-poof-canvas {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

.ai-chat-seal-smoke {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 280px;
  height: 200px;
  pointer-events: none;
  z-index: 9997;
  opacity: 0;
}
.ai-chat-seal-smoke.playing {
  animation: ai-smoke-rise 1.2s ease-out forwards;
}
.ai-chat-seal-smoke::before,
.ai-chat-seal-smoke::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(160, 170, 180, 0.7) 0%, rgba(120, 130, 140, 0.4) 30%, transparent 65%);
  filter: blur(16px);
  opacity: 0;
}
.ai-chat-seal-smoke.playing::before {
  animation: ai-smoke-puff 1s ease-out 0.05s forwards;
}
.ai-chat-seal-smoke.playing::after {
  animation: ai-smoke-puff 1.1s ease-out 0s forwards;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  background: radial-gradient(ellipse at center, rgba(0, 200, 255, 0.25) 0%, rgba(100, 140, 160, 0.5) 25%, transparent 60%);
  filter: blur(20px);
}
@keyframes ai-smoke-rise {
  0% { opacity: 0; }
  10% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ai-smoke-puff {
  0% { transform: scale(0.15); opacity: 0; }
  15% { opacity: 0.9; }
  40% { opacity: 0.85; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* 추가 연기 덩어리들 */
.ai-smoke-puff {
  position: absolute;
  left: 50%;
  bottom: 30px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.ai-chat-seal-smoke.playing .ai-smoke-puff-1 {
  animation: ai-smoke-puff 1s ease-out 0.1s forwards;
  width: 90px;
  height: 90px;
  margin-left: -45px;
  background: radial-gradient(ellipse at center, rgba(140, 150, 160, 0.6) 0%, transparent 70%);
  filter: blur(18px);
}
.ai-chat-seal-smoke.playing .ai-smoke-puff-2 {
  animation: ai-smoke-puff 1.05s ease-out 0.1s forwards;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  bottom: 25px;
  background: radial-gradient(ellipse at center, rgba(0, 200, 255, 0.2) 0%, rgba(100, 140, 160, 0.4) 40%, transparent 70%);
  filter: blur(14px);
}
.ai-chat-seal-smoke.playing .ai-smoke-puff-3 {
  animation: ai-smoke-puff 0.95s ease-out 0.15s forwards;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  bottom: 35px;
  background: radial-gradient(ellipse at center, rgba(180, 190, 200, 0.5) 0%, transparent 65%);
  filter: blur(12px);
}
.ai-chat-seal-smoke.playing .ai-smoke-puff-4 {
  animation: ai-smoke-puff 1.1s ease-out 0.05s forwards;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  bottom: 15px;
  background: radial-gradient(ellipse at center, rgba(120, 130, 140, 0.5) 0%, transparent 65%);
  filter: blur(22px);
}

/* 램프 들어가는 로봇 모션 — 빨려 들어가는 느낌 */
.ai-chat-wrap.ai-chat-sealing {
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.55s ease-in;
}
.ai-chat-wrap.ai-chat-sealing .ai-chat-mini-toggle {
  transition: none;
}

/* 숨김 시 로그아웃 옆 봉인 아이콘 */
.ai-chat-sealed {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ai-chat-sealed:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: scale(1.05);
}

/* AI 비서 아바타 (static/genie.png — 지니) */
.ai-genie-avatar {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
}
.ai-chat-mini-toggle .ai-genie-avatar--mini {
  width: 30px;
  height: 30px;
}
.ai-chat-sealed .ai-genie-avatar--sealed {
  width: 22px;
  height: 22px;
}
.ai-chat-toggle-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: min-content;
}
/* 전역 word-break: keep-all 때문에 공백에서만 줄바꿈 → 한 줄 강제 */
.ai-chat-toggle-label {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.2;
}
.ai-chat-toggle-text .ai-genie-avatar--pill {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}
.ai-chat-title .ai-genie-avatar--header {
  width: 22px;
  height: 22px;
}
.ac-chat-title .ai-genie-avatar--header {
  width: 22px;
  height: 22px;
}
.ndm-ai-btn .ai-genie-avatar--chip {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
}

/* 접힌 상태: 미니 아바타 | 펼친 상태: 파란 pill 바 (AI 투자 비서) */
.ai-chat-wrap:not(.ai-chat-open) .ai-chat-toggle-wrapper { display: none; }
.ai-chat-wrap.ai-chat-open .ai-chat-mini-toggle { display: none; }
.ai-chat-wrap.ai-chat-open .ai-chat-toggle-wrapper { display: flex; }

/* 펼침: 패널(위)과 pill(아래)를 세로로 붙여 겹침 방지 — absolute bottom 제거 */
.ai-chat-wrap.ai-chat-open {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

/* 통짜 pill 바 (펼쳤을 때) */
.ai-chat-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #00C8FF 100%);
  border-radius: 30px;
  box-shadow: 0 4px 15px rgba(0, 200, 255, 0.4);
  padding: 10px 16px 10px 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: white;
  font-size: 15px;
  font-weight: 700;
  user-select: none;
  width: max-content;
  max-width: 100%;
}
.ai-chat-toggle-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 200, 255, 0.6);
}
.ai-chat-toggle-arrow {
  font-size: 20px;
  margin-left: 10px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  line-height: 1;
}
@media (max-width: 400px) {
  .ai-chat-toggle-wrapper {
    font-size: 13px;
    padding: 9px 12px 9px 14px;
  }
  .ai-chat-toggle-arrow {
    font-size: 17px;
    margin-left: 8px;
  }
}

/* 미니 버튼 (접혔을 때만) */
.ai-chat-mini-toggle {
  display: flex;
  background: var(--surface2);
  color: white;
  border: 1px solid var(--border);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  cursor: grab;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.ai-chat-mini-toggle:active {
  cursor: grabbing;
}
.ai-chat-mini-toggle:hover {
  transform: translateY(-2px);
  background: var(--surface);
  border-color: var(--accent);
}

/* 숨김 상태 (드래그로 하단 영역에 놓았을 때) */
.ai-chat-wrap.ai-chat-hidden {
  display: none !important;
}

/* 패널 — 버튼/바 바로 위에 팝업처럼 중앙 정렬 */
.ai-chat-panel {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: 420px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  flex-direction: column;
  overflow: hidden;
}
.ai-chat-wrap.ai-chat-open .ai-chat-panel {
  display: flex;
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: min(380px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  flex-shrink: 0;
}
.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.ai-chat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--green);
}
.ai-chat-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}
.ai-chat-close:hover { color: var(--text); background: var(--hover-overlay); }
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 180px;
  max-height: 280px;
}
.ai-chat-msg { margin-bottom: 12px; }
.ai-chat-msg-content {
  display: inline-block;
  max-width: 90%;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.ai-chat-msg--user { display: flex; justify-content: flex-end; }
.ai-chat-msg--user .ai-chat-msg-content { background: var(--accent); color: #fff; }
.ai-chat-msg--assistant .ai-chat-msg-content {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-chat-msg--loading .ai-chat-msg-content { color: var(--muted); }

/* ── AI 타이핑 인디케이터 (점 3개 통통 튀기) ─────────────────────────────── */
.ai-typing-indicator {
  margin-bottom: 12px;
}
.ai-typing-indicator .ai-chat-msg-content {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 56px;
}
.ai-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #00c8ff);
  display: inline-block;
  animation: ai-typing-bounce 1.2s infinite ease-in-out;
}
.ai-typing-dot:nth-child(1) { animation-delay: 0s;    }
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s;  }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s;  }
@keyframes ai-typing-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%           { transform: translateY(-7px); opacity: 1;    }
}
.ai-chat-form-wrap {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ai-chat-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.ai-chat-input:focus { border-color: var(--accent); }
.ai-chat-input::placeholder { color: var(--muted); }
.ai-chat-send {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.ai-chat-send:hover { filter: brightness(1.1); }

/* ==========================================================
   투자 인사이트 (Wall Street Principles) - 프리미엄 디자인
   ========================================================== */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.insight-card {
  position: relative;
  background: linear-gradient(145deg, var(--surface2) 0%, rgba(22, 27, 34, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 24px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, box-shadow 0.3s;
  z-index: 1;
}

/* 장식용 따옴표 워터마크 */
.insight-card::before {
  content: '“';
  position: absolute;
  top: -15px;
  right: 15px;
  font-size: 140px;
  font-family: Georgia, serif;
  color: var(--accent);
  opacity: 0.04;
  z-index: -1;
  line-height: 1;
  transition: opacity 0.3s, transform 0.3s;
}

.insight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 180, 255, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 180, 255, 0.1) inset;
}

.insight-card:hover::before {
  opacity: 0.1;
  transform: scale(1.05) rotate(5deg);
}

.insight-author {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 영문 이름 배지 스타일 */
.insight-author span {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  background: rgba(0, 180, 255, 0.1);
  border: 1px solid rgba(0, 180, 255, 0.2);
  border-radius: 20px;
}

.insight-rule {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: #e6edf3;
  background: linear-gradient(90deg, rgba(31, 111, 235, 0.15) 0%, rgba(31, 111, 235, 0.02) 100%);
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 16px;
  word-break: keep-all;
  letter-spacing: 0.02em;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.03);
}

.insight-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

/* ==========================================================
   마이페이지 내부 탭 (스크랩 / 매매일지)
   ========================================================== */
.mypage-inner-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.mypage-tabs-left {
  display: flex;
  gap: 16px;
}
.memo-actions.memo-actions-tabbar {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}
.mypage-inner-tab {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.mypage-inner-tab:hover { color: var(--text); }
.mypage-inner-tab.active { color: var(--text); }
.mypage-inner-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--text); border-radius: 2px 2px 0 0;
}
.mypage-inner-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 매매일지 모던 테마 디자인 */
.journal-header-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding: 15px; background: var(--surface); border-radius: 12px; border: 1px solid var(--border);
}
.journal-stats { display: flex; gap: 20px; }
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-item .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-item .val { font-size: 18px; font-weight: 700; color: var(--accent); font-family: 'JetBrains Mono', monospace; }

.journal-add-btn-premium {
  background: var(--accent); color: #fff; border: none; padding: 10px 18px; border-radius: 8px;
  font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(31,111,235,0.3);
}
.journal-add-btn-premium:hover { transform: translateY(-2px); filter: brightness(1.1); }

.journal-list-container {
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.journal-list-container::-webkit-scrollbar { width: 6px; }
.journal-list-container::-webkit-scrollbar-track { background: transparent; }
.journal-list-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.journal-modern-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.journal-card {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; cursor: pointer; transition: all 0.2s; position: relative; overflow: hidden;
}
.journal-card:hover {
  border-color: var(--accent);
  background: var(--hover-overlay);
  box-shadow: 0 4px 16px rgba(31, 111, 235, 0.15);
}
.journal-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.journal-card.type-BUY::before { background: var(--danger); }
.journal-card.type-SELL::before { background: var(--accent); }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.card-symbol { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card-date { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.card-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.card-target-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.info-box { background: rgba(0,0,0,0.2); padding: 8px; border-radius: 6px; text-align: center; }
.info-box .lab { font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.info-box .num { font-size: 13px; font-weight: 600; color: var(--text); }
.info-box-tp .num { color: #3fb950; }
.info-box-sl .num { color: var(--danger); }

.card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; }
.card-emotion { font-size: 12px; color: var(--text); background: var(--bg); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); }
.card-reason { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

.journal-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-icon { font-size: 40px; margin-bottom: 15px; opacity: 0.5; }

/* 메모장 패널 — 현대적 2분할 레이아웃 */
.notepad-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.notepad-list-panel {
  width: 30%;
  min-width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.notepad-list-panel .form-control {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.notepad-list-panel .form-control::placeholder { color: var(--muted); }
.notepad-list-panel .form-control:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
}
.notepad-list-panel .mb-2 { margin-bottom: 0; }
.memo-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.memo-list::-webkit-scrollbar { width: 6px; }
.memo-list::-webkit-scrollbar-track { background: transparent; }
.memo-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.memo-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.memo-item {
  padding: 14px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
  list-style: none;
}
.memo-item:hover {
  background: rgba(255, 140, 0, 0.08);
  border-color: rgba(255, 140, 0, 0.35);
}
.memo-item.selected {
  background: rgba(255, 140, 0, 0.12);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.2);
}
.memo-item .memo-symbol { font-weight: 700; color: var(--text); font-size: 14px; }
.memo-item .memo-date { font-size: 11px; color: var(--muted); margin-top: 6px; }
.memo-item .memo-summary { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 마이페이지 로딩 스켈레톤 */
.mypage-skeleton { animation: mypage-skeleton-pulse 1.2s ease-in-out infinite; }
.mypage-skeleton-line { height: 12px; background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.06) 50%, var(--border) 75%); background-size: 200% 100%; border-radius: 6px; }
.mypage-skeleton-memo { padding: 14px 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.mypage-skeleton-memo .mypage-skeleton-line:first-child { width: 60%; }
.mypage-skeleton-memo .mypage-skeleton-line:nth-child(2) { width: 40%; }
.mypage-skeleton-memo .mypage-skeleton-line:nth-child(3) { width: 90%; }
.mypage-skeleton-journal { padding: 18px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 10px; }
.mypage-skeleton-journal .mypage-skeleton-line:first-child { width: 50%; }
.mypage-skeleton-journal .mypage-skeleton-line { width: 100%; }
.mypage-skeleton-scrap { padding: 10px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.mypage-skeleton-scrap .mypage-skeleton-line { width: 60px; height: 18px; border-radius: 4px; }
.mypage-skeleton-scrap .mypage-skeleton-line:last-child { flex: 1; }
@keyframes mypage-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.notepad-editor-panel {
  width: 70%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.memo-editor-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  color: var(--muted);
}
.memo-empty-icon { font-size: 48px; opacity: 0.5; }
.memo-empty-text {
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}
.notes-btn-empty-cta {
  margin-top: 8px;
  padding: 12px 24px;
  font-size: 14px;
}
.memo-editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.memo-editor-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.memo-editor-header {
  font-size: 17px;
  font-weight: 700;
  color: var(--orange);
  padding: 4px 0;
  flex-shrink: 0;
}
.memo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  justify-content: flex-start;
}
.notes-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  font-family: inherit;
}
.notes-btn-save {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 2px 6px rgba(255, 140, 0, 0.25);
}
.notes-btn-save:hover {
  background: #ff9f33;
  border-color: #ff9f33;
  box-shadow: 0 4px 12px rgba(255, 140, 0, 0.35);
}
.notes-btn-delete {
  background: transparent;
  color: var(--danger);
  border-color: rgba(248, 81, 73, 0.4);
}
.notes-btn-delete:hover {
  background: rgba(248, 81, 73, 0.1);
  border-color: var(--danger);
}
.notes-btn-edit {
  background: #4a4a4a;
  color: #fff;
  border-color: #4a4a4a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.notes-btn-edit:hover {
  background: #5a5a5a;
  border-color: #5a5a5a;
}
.notes-btn-new {
  font-size: 13px;
  padding: 10px 14px;
  background: #333333;
  color: #fff;
  border-color: #333333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.notes-btn-new:hover {
  background: #404040;
  border-color: #404040;
}
.notes-textarea {
  flex: 1;
  width: 100%;
  min-height: 240px;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
  resize: none;
  font-family: inherit;
}
.notes-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15);
}
.notes-textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* 메모장 모바일 반응형 */
@media (max-width: 768px) {
  .notepad-container {
    flex-direction: column;
    gap: 16px;
  }
  .notepad-list-panel {
    width: 100%;
    min-width: 0;
    max-height: 280px;
  }
  .notepad-editor-panel {
    width: 100%;
    flex: 1;
    min-height: 300px;
    padding: 16px;
  }
  .notes-textarea {
    min-height: 200px;
  }
  .memo-editor-content {
    flex-direction: column;
  }
  .memo-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .notes-btn { padding: 9px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
  .notepad-list-panel,
  .notepad-editor-panel {
    padding: 12px;
  }
  .memo-item { padding: 12px; }
}

/* 매매일지 폼 모달 */
.journal-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.journal-form-group { display: flex; flex-direction: column; gap: 6px; }
.journal-form-group label { font-size: 12px; font-weight: 600; color: var(--muted); }
.journal-form-group select {
  appearance: none;
  background: var(--bg) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%238b949e%22%20d%3D%22M3.5%204.5l2.5%203%202.5-3z%22%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;
  padding-right: 30px;
}

/* 매매일지 날짜 달력 아이콘 밝게 */
#journalDate::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(2);
  cursor: pointer;
  opacity: 0.8;
}
#journalDate::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 숫자 입력창 스피너(화살표) 숨기기 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* 폼 입력창 고급화 */
.mypage-input {
  background-color: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.mypage-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2);
}
textarea.mypage-input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

/* % 접미사 입력 래퍼 */
.input-suffix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-suffix-wrap .mypage-input {
  padding-right: 32px;
}
.input-suffix {
  position: absolute;
  right: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}

/* 비밀번호 필드 — 눈 아이콘으로 표시/숨김 */
.fp-pw-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.fp-pw-wrap > .mypage-input,
.fp-pw-wrap > input[type="password"],
.fp-pw-wrap > input[type="text"] {
  padding-right: 44px;
  box-sizing: border-box;
}
.fp-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.fp-pw-toggle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.fp-pw-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fp-pw-toggle .fp-pw-svg-hide {
  display: none;
}
.fp-pw-toggle.fp-pw-toggle--visible .fp-pw-svg-show {
  display: none;
}
.fp-pw-toggle.fp-pw-toggle--visible .fp-pw-svg-hide {
  display: block;
}

/* 자동 계산 결과 블록 */
.journal-calc-block {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.journal-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.journal-calc-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.journal-calc-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.journal-calc-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.journal-tp-label { color: #3fb950; }
.journal-tp-value { color: #3fb950; }
.journal-sl-label { color: var(--danger); }
.journal-sl-value { color: var(--danger); }

/* ==========================================================
   flatpickr 달력 — 프리미엄 다크 테마
   ========================================================== */

/* ── 전체 캘린더 컨테이너 ── */
.flatpickr-calendar {
  background: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(31,111,235,0.12),
    0 16px 40px rgba(0,0,0,0.7) !important;
  font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
  padding: 6px 8px 10px !important;
  overflow: hidden;
}

/* ── 상단 헤더(월/년 + 화살표) ── */
.flatpickr-months {
  padding: 6px 0 4px !important;
  background: transparent !important;
}
.flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: #e5e7eb !important;
  fill: #e5e7eb !important;
  height: 38px !important;
}
.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  font-size: 15px !important;
}
.flatpickr-current-month .cur-month {
  color: #e5e7eb !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', sans-serif !important;
}
.flatpickr-current-month input.cur-year {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.03em !important;
}

/* ── 이전/다음 월 화살표 ── */
.flatpickr-prev-month,
.flatpickr-next-month {
  padding: 6px 10px !important;
  transition: opacity 0.15s !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: rgba(255,255,255,0.35) !important;
  transition: fill 0.15s !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
  fill: #e5e7eb !important;
}

/* ── 요일 헤더 (7열: 일~토) ── */
.flatpickr-weekdays {
  background: transparent !important;
  margin-bottom: 2px !important;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
}
span.flatpickr-weekday {
  background: transparent !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── 날짜 그리드 (7열 고정: 일~토) ── */
.flatpickr-days { padding: 0 2px !important; }
.dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 2px !important;
  padding: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ── 날짜 셀 공통 ── */
.flatpickr-day {
  color: #e5e7eb !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 34px !important;
  line-height: 34px !important;
  width: 100% !important;
  max-width: none !important;
  flex-basis: auto !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

/* ── hover ── */
.flatpickr-day:hover:not(.selected):not(.today):not(.disabled) {
  background: rgba(31,111,235,0.18) !important;
  border-color: rgba(31,111,235,0.35) !important;
  color: #e5e7eb !important;
}

/* ── 선택된 날짜 ── */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(31,111,235,0.45) !important;
}

/* ── 오늘 날짜 ── */
.flatpickr-day.today:not(.selected) {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  background: rgba(31,111,235,0.08) !important;
}
.flatpickr-day.today.selected { color: #fff !important; }

/* ── 이전/다음 달 날짜 (비활성) ── */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(255,255,255,0.18) !important;
  font-weight: 400 !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: transparent !important;
}

/* ── 비활성(미래 날짜) ── */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: rgba(255,255,255,0.18) !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  text-decoration: line-through !important;
  opacity: 0.5 !important;
}

/* ── 수수료 계산기 모달 ── */
.fee-calc-modal {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; backdrop-filter: blur(3px);
}
.fee-calc-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%; max-width: 400px;
  padding: 24px; position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.fee-calc-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; color: var(--muted);
  font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px;
  transition: color 0.15s;
}
.fee-calc-close:hover { color: var(--text); }
.fee-calc-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 16px;
}
.fee-calc-preset {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.preset-btn {
  flex: 1; padding: 8px 0; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.preset-btn:hover { border-color: var(--accent); color: var(--text); }
.preset-btn.active {
  background: rgba(31,111,235,0.1); border-color: var(--accent); color: var(--accent);
}
.fee-calc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 11px; color: var(--muted); font-weight: 600; }
.input-group input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: 6px; font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box;
}
.input-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,111,235,0.15); }
.fee-calc-result {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.result-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text);
}
.result-divider { height: 1px; background: var(--border); margin: 2px 0; }
.sub-pct { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; margin-left: 4px; }
.val-fee { color: var(--danger); font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.final-row { font-size: 15px; font-weight: 700; margin-top: 4px; }
.final-row #resNetProfit { font-family: 'JetBrains Mono', monospace; font-size: 18px; }
.profit-up { color: var(--green) !important; }
.profit-down { color: var(--danger) !important; }
.calc-btn { letter-spacing: 0; }

/* ── PC 「앱 설치」 QR 모달 (딥링크 fp_pwa_install=1) ──
   오버레이는 main.js에서 body 직계 + position:fixed !important 로 고정(조상 transform 대비).
   닫힌 동안 img 등이 비치지 않도록 hidden·봉인 스타일 보강 (src 없는 img X 아이콘 방지). */
.pwa-install-qr-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.pwa-install-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 11150;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pwa-install-qr-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 360px;
  padding: 22px 20px 20px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}
.pwa-install-qr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 0 6px;
  transition: color 0.15s;
}
.pwa-install-qr-close:hover {
  color: var(--text);
}
.pwa-install-qr-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 28px 10px 0;
}
.pwa-install-qr-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 16px;
}
.pwa-install-qr-img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.pwa-install-qr-img {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 8px;
  background: #fff;
}
.pwa-install-qr-url {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  margin: 0;
  line-height: 1.35;
  max-height: 4.2em;
  overflow: auto;
  cursor: help;
}

/* ==========================================================
   🔥 주도주 테마 대시보드 전용 스타일
   ========================================================== */
.leading-theme-box {
  background: var(--surface2);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 15px rgba(31, 111, 235, 0.2);
  overflow: visible;
}
.theme-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 15px;
}
.theme-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}
/* 대장주/주도주 판별 기준 툴팁 */
.theme-info-icon {
  position: relative;
  cursor: pointer;
  font-size: 0.9em;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
}
.theme-criteria-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(57, 211, 83, 0.5);
  background: rgba(57, 211, 83, 0.1);
  color: var(--green);
  letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.theme-criteria-badge:hover {
  background: rgba(57, 211, 83, 0.18);
  border-color: var(--green);
}
.theme-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: -10px;
  width: 320px;
  background: #2C3E50;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.85em;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  font-weight: normal;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
}
.theme-tooltip strong { color: #fff; }
.theme-tooltip b { font-weight: 600; }
.theme-tooltip em { font-style: italic; color: #b8d4e8; font-size: 0.95em; }
.theme-info-icon:hover .theme-tooltip {
  display: block;
}
.theme-info-icon.open .theme-tooltip {
  display: block;
}
.theme-criteria-modal {
  position: fixed;
  inset: 0;
  z-index: 12060;
  display: none;
}
.theme-criteria-modal.open {
  display: block;
}
.theme-criteria-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.56);
}
.theme-criteria-modal-inner {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 104px;
  background: #2C3E50;
  color: #fff;
  border: 1px solid rgba(151, 201, 235, 0.35);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
  padding: 14px 14px 12px;
  max-height: min(72vh, 520px);
  overflow-y: auto;
}
.theme-criteria-modal-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: transparent;
  color: #c9d1d9;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.theme-criteria-modal-body {
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  padding-right: 16px;
}
.theme-criteria-modal-body strong { color: #fff; }
.theme-criteria-modal-body b { font-weight: 600; }
.theme-badge {
  background: rgba(248, 81, 73, 0.15);
  color: var(--risk-high);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
/* 헤더 우측 「수치 기반 객관적 평가」는 안내 배지로만 사용 (클릭 비활성) */
.theme-header > .theme-badge {
  pointer-events: none;
  user-select: none;
  cursor: default;
}
@media (max-width: 700px) {
  .theme-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .theme-header h3 {
    font-size: 15px;
    line-height: 1.4;
  }
  .theme-criteria-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
  .theme-info-icon:hover .theme-tooltip {
    display: none;
  }
  .theme-info-icon.open .theme-tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 120px;
    width: auto;
    max-width: none;
    margin-left: 0;
    border-radius: 10px;
    z-index: 12050;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    line-height: 1.45;
  }
  .theme-criteria-modal-inner {
    top: 96px;
  }
}
@media (hover: none), (pointer: coarse) {
  .theme-info-icon:hover .theme-tooltip,
  .theme-info-icon.open .theme-tooltip {
    display: none !important;
  }
}
.theme-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}
.theme-content strong {
  color: var(--warn);
}

/* 주도주 테마 마크다운 내부 렌더링 스타일 (가독성 및 표 UI 업그레이드) */
.theme-content h3 {
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding-bottom: 8px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
}
.theme-content h4 {
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 15px;
  background: linear-gradient(90deg, var(--surface2) 0%, transparent 100%);
  border-left: 4px solid var(--warn);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 15px;
}
.theme-content ul {
  margin-top: 10px;
  margin-bottom: 25px;
  padding-left: 0;
  list-style: none;
}
.theme-content li {
  margin-bottom: 8px;
  line-height: 1.6;
  background: var(--surface2);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid var(--muted);
  font-size: 14px;
}
.theme-content li strong {
  color: #ffffff;
  margin-right: 6px;
}
.theme-content li:has(strong:contains('🟢')) {
  border-left-color: var(--green);
}
.theme-content li:has(strong:contains('🔴')) {
  border-left-color: var(--danger);
}
/* 대장주 핵심 재무 지표 테이블 디자인 */
.theme-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0 20px 0;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.theme-content th {
  background: var(--header);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.theme-content td {
  padding: 10px 12px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.theme-content tr:last-child td {
  border-bottom: none;
}
/* 테마 간 구분선 */
.theme-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 25px 0;
}
/* 상단 투자 방향성 강조 박스 스타일 */
.theme-content blockquote {
  background: rgba(31, 111, 235, 0.1);
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  margin: 10px 0 35px 0;
  border-radius: 0 8px 8px 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
.theme-content blockquote p {
  margin: 0;
}

/* ── 주도주 테마 — 탭 + 고정섹터 + 핫테마 레이아웃 ──────────────────────── */

/* 시장 국면 박스 */
.lt-market-phase {
  background: rgba(31, 111, 235, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.lt-phase-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.lt-phase-body p {
  margin: 4px 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.65;
}

/* 국가/자산 탭 */
.lt-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.lt-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lt-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lt-tab[data-country="crypto"].active {
  background: #f7931a;
  border-color: #f7931a;
}
.lt-tab:hover:not(.active) {
  border-color: var(--accent);
  color: var(--text);
}
.lt-tab[data-country="crypto"]:hover:not(.active) {
  border-color: #f7931a;
}

/* 섹션 라벨 */
.lt-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lt-section-label.hot { margin-top: 36px; }
.lt-active-badge {
  background: rgba(0, 200, 100, 0.15);
  color: var(--green);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.lt-filter-active-btn {
  background: rgba(0, 200, 100, 0.12);
  border: 1px solid rgba(0, 200, 100, 0.4);
  color: var(--green);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
}
.lt-filter-active-btn:hover {
  background: rgba(0, 200, 100, 0.2);
  border-color: var(--green);
}
.lt-sort-active-first-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  margin-left: 8px;
}
.lt-sort-active-first-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.lt-sort-active-first-btn.active {
  background: rgba(0, 180, 255, 0.12);
  border-color: rgba(0, 180, 255, 0.4);
  color: #00C8FF;
}
.lt-fixed-grid.lt-show-active-only .lt-sector-card.inactive {
  display: none;
}
.lt-hot-badge {
  background: rgba(255, 160, 0, 0.15);
  color: var(--warn);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* 드래그 힌트 텍스트 */
.lt-drag-hint {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-left: auto;
  opacity: 0.6;
}

/* 순서 초기화 버튼 */
.lt-reset-order-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  transition: border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.lt-reset-order-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 드래그 핸들 */
.lt-drag-handle {
  font-size: 13px;
  color: var(--muted);
  cursor: grab;
  padding: 0 4px 0 0;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s;
  user-select: none;
}
.lt-sector-card:hover .lt-drag-handle { opacity: 1; }
.lt-sector-card[draggable="true"] { cursor: default; }

/* 드래깅 중인 카드 */
.lt-sector-card.lt-dragging {
  opacity: 0.35;
  transform: scale(0.97);
  border-style: dashed;
}

/* 드롭 대상 하이라이트 */
.lt-sector-card.lt-drag-over {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.4), 0 4px 18px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

/* 고정 섹터 그리드 — 4열 */
.lt-fixed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
/* PC(로컬)와 동일: 1100px 이하에서만 2열, 그 외 기본 4열·타이포·패딩은 모바일 별도 축소 없음 */
@media (max-width: 1100px) { .lt-fixed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 모바일·좁은 화면: 섹터 카드 밀도 조정 (핵심 요약은 잘리지 않게 전체 표시) */
@media (max-width: 768px) {
  .lt-fixed-grid,
  .lt-hot-grid { gap: 5px; }

  .lt-card-header { padding: 3px 6px; }
  .lt-card-name { font-size: 11px; }
  .lt-badge { width: 18px; height: 18px; font-size: 9px; }
  .lt-drag-handle { font-size: 11px; padding: 0 2px 0 0; }

  .lt-card-body { padding: 5px 6px; gap: 2px; }
  .lt-card-body .stock-tab-content { gap: 2px; }

  /* 핵심 요약: 3줄 라인 클램프 (스캔 가능하도록, full text는 title 속성 tooltip) */
  .theme-summary-box {
    font-size: 10px;
    line-height: 1.45;
    padding: 5px 6px;
    margin-bottom: 4px;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lt-card-body > .theme-summary-box {
    margin-bottom: 0;
  }

  /* 대장주: 인라인 유지 + 시각적 강조 (한눈에 스캔 가능) */
  .lt-leader {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 6px;
    font-size: 10px;
    line-height: 1.3;
    margin: 0 0 4px 0;
  }
  .lt-leader-title .lt-lbl-text { font-size: 9px; }
  .lt-leader-name {
    font-size: 13px;
    font-weight: 800;
    color: #ffd666;
    letter-spacing: 0.01em;
    word-break: keep-all;
  }

  /* 주도주: 가로 칩 (flex-wrap) — 공간 모자라면 자연 줄바꿈, 세로 강제 금지 */
  .theme-badges {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 3px;
    padding-bottom: 3px;
    gap: 3px 4px;
  }
  .theme-badges-title {
    flex-shrink: 0;
  }
  .theme-badges-title .lt-lbl-text { font-size: 9px; }
  .theme-badges-chips {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 100%;
    min-width: 0;
    gap: 3px;
    align-items: center;
  }
  .theme-badges-chips .theme-badge {
    flex: 0 1 auto;
    box-sizing: border-box;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 10px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .lt-compare-factor {
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 7px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(18, 28, 43, 0.75) 0%, rgba(12, 20, 32, 0.8) 100%);
    border-color: rgba(88, 166, 255, 0.22);
    max-width: 100%;
    min-width: 0;
  }
  .lt-compare-factor-panel {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .lt-compare-factor .lt-lbl-text { font-size: 10px; margin-bottom: 3px; }
  .lt-compare-toggle-meta { font-size: 9px; }
  .lt-compare-table {
    font-size: 10px;
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    min-width: 250px;
  }
  .lt-compare-table th,
  .lt-compare-table td {
    padding: 4px 5px;
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .lt-compare-table th:first-child,
  .lt-compare-table td:first-child { width: 40%; }
  .lt-compare-table th:nth-child(2),
  .lt-compare-table td:nth-child(2),
  .lt-compare-table th:nth-child(3),
  .lt-compare-table td:nth-child(3) { width: 30%; }
  .lt-compare-table th:nth-child(2),
  .lt-compare-table td:nth-child(2),
  .lt-compare-table th:nth-child(3),
  .lt-compare-table td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .lt-compare-table .lt-compare-head-rank {
    font-size: 9px;
  }
  .lt-compare-table .lt-compare-head-name {
    max-width: 88px;
    font-size: 10px;
  }
  .lt-compare-table .lt-compare-label {
    font-size: 10px;
    font-weight: 600;
    color: #9fb2c6;
    line-height: 1.32;
  }
  .lt-compare-table .lt-compare-v1,
  .lt-compare-table .lt-compare-v2 {
    font-size: 11px;
    letter-spacing: 0.1px;
  }
  .lt-compare-factor.expanded .lt-compare-factor-toggle {
    margin-bottom: 2px;
  }
  .lt-compare-toggle-meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.28;
  }

  .lt-card-body .analysis-item {
    padding: 3px 6px;
  }
  .lt-card-body .stock-tab-content {
    gap: 2px;
  }
  .lt-card-body .analysis-item .item-label {
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
    max-width: 55%;
    line-height: 1.2;
  }
  .lt-card-body .analysis-item .item-desc {
    font-size: 10px;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
  }
  .lt-card-body .analysis-item.is-collapsible {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .lt-card-body .analysis-item.is-collapsible .analysis-item-toggle {
    cursor: pointer;
  }
  .lt-card-body .analysis-item.is-collapsible .item-toggle-caret {
    display: inline-block;
    transition: transform 0.2s ease;
  }
  .lt-card-body .analysis-item.is-collapsible .item-label {
    max-width: none;
  }
  .lt-card-body .analysis-item.is-collapsible .item-desc {
    display: none;
    margin-top: 4px;
  }
  .lt-card-body .analysis-item.is-collapsible.expanded .item-desc {
    display: block;
  }
  .lt-card-body .analysis-item.is-collapsible.expanded .item-toggle-caret {
    transform: rotate(180deg);
  }

}

@media (max-width: 480px) {
  .signal-card .gauge-svg { transform: scale(0.92); transform-origin: center top; }
  .lt-card-body .analysis-item .item-desc { font-size: 9px; line-height: 1.3; }
}

/* 핫테마 그리드 — 최대 3열 */
.lt-hot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

/* 섹터 카드 공통 — 그리드 행에서 높이 맞춤 + 본문 flex로 핵심 요약 길이와 무관하게 하단 블록 시작선 정렬 */
.lt-sector-card {
  border-radius: 6px;
  border: 2px solid #5a5a5a;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  background: var(--surface2);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
/* 활성 카드: 은은한 빛남 (부드러운 글로우 애니메이션) */
@keyframes lt-glow-active {
  0%, 100% { box-shadow: 0 2px 12px rgba(0, 200, 100, 0.15), 0 0 16px rgba(0, 200, 100, 0.12), 0 0 24px rgba(0, 200, 100, 0.06); }
  50%      { box-shadow: 0 2px 16px rgba(0, 200, 100, 0.22), 0 0 22px rgba(0, 200, 100, 0.18), 0 0 32px rgba(0, 200, 100, 0.1); }
}
@keyframes lt-glow-hot {
  0%, 100% { box-shadow: 0 2px 12px rgba(255, 160, 0, 0.12), 0 0 20px rgba(255, 160, 0, 0.06); }
  50%      { box-shadow: 0 2px 16px rgba(255, 160, 0, 0.18), 0 0 28px rgba(255, 160, 0, 0.1); }
}
.lt-sector-card.active {
  border: 2px solid rgba(0, 200, 100, 0.5);
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, rgba(0, 200, 100, 0.06) 0%, var(--surface2) 100%);
  box-shadow: 0 2px 12px rgba(0, 200, 100, 0.15), 0 0 16px rgba(0, 200, 100, 0.12), 0 0 24px rgba(0, 200, 100, 0.06);
  animation: lt-glow-active 4s ease-in-out infinite;
}
.lt-sector-card.active .lt-card-header {
  background: rgba(0, 200, 100, 0.04);
}
.lt-sector-card.hot {
  border: 2px solid rgba(255, 160, 0, 0.35);
  border-left: 4px solid var(--warn);
  background: linear-gradient(135deg, rgba(255, 160, 0, 0.05) 0%, var(--surface2) 100%);
  box-shadow: 0 2px 12px rgba(255, 160, 0, 0.12), 0 0 20px rgba(255, 160, 0, 0.06);
  animation: lt-glow-hot 3s ease-in-out infinite;
}
/* 비활성 카드 */
.lt-sector-card.inactive {
  border: 2px solid #5a5a5a;
  background: var(--surface2);
}
.lt-sector-card.active:hover, .lt-sector-card.hot:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), 0 2px 12px rgba(0, 200, 100, 0.15);
}

/* 카드 헤더 */
.lt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid #5a5a5a;
}
.lt-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Rajdhani', 'Noto Sans KR', sans-serif;
  letter-spacing: 0.2px;
}

/* 뱃지 — 작은 아이콘 형태 */
.lt-badge {
  font-size: 11px;
  font-weight: 700;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lt-badge.active   { background: rgba(0,200,100,0.18); color: var(--green); }
.lt-badge.inactive { background: rgba(255,255,255,0.07); color: var(--muted); }
.lt-badge.hot      { background: rgba(255,160,0,0.18); color: var(--warn); }

/* 카드 본문 */
.lt-card-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* 핵심 요약과 대장주·주도주 사이: 남는 높이를 먹여 같은 행 카드끼리 하단 블록 시작 위치 맞춤 */
.lt-card-body-spacer {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

.lt-card-main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.lt-card-body > .theme-summary-box {
  margin-bottom: 0;
  flex-shrink: 0;
}
.lt-reason { font-size: 11px; color: var(--muted); margin: 0 0 2px 0; font-style: italic; line-height: 1.4; }
/* 대장주: 데스크톱은 한 줄, 모바일은 제목 행 + 종목명 행 */
.lt-leader {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 12px;
  color: var(--text);
}
.lt-leader-title {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.lt-leader-name {
  color: #ffd666;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.lt-stocks { font-size: 12px; color: var(--text); line-height: 1.5; }
.lt-stocks .lt-stocks-names { color: #58a6ff; font-weight: 600; }
.lt-stock-item {
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.lt-stock-item:hover { color: #79c0ff; opacity: 1; }
.lt-stock-item:focus { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.lt-row {
  font-size: 11px;
  color: var(--text);
  display: flex;
  gap: 5px;
  align-items: flex-start;
  line-height: 1.5;
  padding: 4px 7px;
  background: var(--surface);
  border: 1px solid #5a5a5a;
  border-left: 3px solid var(--muted);
  border-radius: 4px;
}
.lt-row span:last-child { color: #e6edf3; }
.lt-lbl { flex-shrink: 0; white-space: nowrap; }
.lt-lbl-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
  margin-left: 2px;
  vertical-align: middle;
}
.lt-leader-title .lt-lbl-text,
.lt-stocks .lt-lbl-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
}
.lt-buy  { border-left: 3px solid var(--green); }
.lt-risk { border-left: 3px solid var(--danger); }

/* 테마 요약 박스 */
.theme-summary-box {
  background: rgba(255, 255, 255, 0.03);
  padding: 5px 6px;
  border-radius: 5px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #d1d5db;
  line-height: 1.5;
}
.theme-summary-box strong { color: #fff; margin-right: 4px; }

/* 뱃지 영역 구분선 — 제목 + 칩 묶음(모바일에서 세로 한 줄씩) */
.theme-badges {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}
.theme-badges-title {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.theme-badges-title .lt-lbl-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  margin-left: 2px;
}
.theme-badges-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 100px;
}
.theme-badge {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #58a6ff;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.theme-badge:hover { color: #79c0ff; }
.theme-badge.active-tab {
  background: transparent;
  color: #58a6ff;
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* 주도주 1·2위 비교팩터 (기본 접힘 — 헤더만 표시) */
.lt-compare-factor {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px 12px 10px;
  background: rgba(22, 27, 34, 0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.lt-compare-factor-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
}
.lt-compare-factor-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}
.lt-compare-factor-toggle .lt-lbl-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.lt-compare-toggle-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.lt-compare-toggle-meta {
  font-size: 10px;
  color: #9fb2c6;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lt-compare-caret {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.lt-compare-factor.expanded .lt-compare-caret {
  transform: rotate(180deg);
}
.lt-compare-factor-panel {
  margin-top: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.lt-compare-factor:not(.expanded) .lt-compare-factor-panel {
  display: none;
}
/* .theme-card-body table 공통 규칙이 비교표에 덮이지 않도록 리셋 */
.lt-card-body .lt-compare-factor .lt-compare-table {
  margin: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
.lt-card-body .lt-compare-factor .lt-compare-table th,
.lt-card-body .lt-compare-factor .lt-compare-table td {
  font-family: inherit;
}
.lt-compare-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 260px;
}
.lt-compare-table th,
.lt-compare-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(48, 54, 61, 0.6);
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: top;
}
.lt-compare-table th {
  font-weight: 600;
  color: var(--muted);
}
.lt-compare-table th:first-child,
.lt-compare-table td:first-child {
  width: 30%;
}
.lt-compare-table th:nth-child(2),
.lt-compare-table td:nth-child(2),
.lt-compare-table th:nth-child(3),
.lt-compare-table td:nth-child(3) {
  width: 35%;
}
.lt-compare-table .lt-compare-label {
  color: var(--muted);
  font-weight: 500;
  white-space: normal;
  line-height: 1.35;
}
.lt-compare-table .lt-compare-v1 {
  color: #58a6ff;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lt-compare-table .lt-compare-v2 {
  color: #79c0ff;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lt-compare-head-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
  min-width: 0;
  gap: 1px;
}
.lt-compare-head-rank {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.lt-compare-head-name {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9d1d9;
}
.lt-compare-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}
.lt-compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* 종목별 탭 컨텐츠 */
.lt-card-body .stock-tab-content {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lt-card-body .analysis-item {
  background: var(--surface2);
  padding: 5px 6px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0;
  border-left: none;
}
.lt-card-body .analysis-item .analysis-item-toggle {
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.lt-card-body .analysis-item .item-toggle-caret {
  display: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.lt-card-body .analysis-item .item-label { font-size: 11px; font-weight: 700; }
.lt-card-body .analysis-item .item-desc { font-size: 12px; color: var(--text); line-height: 1.5; }
.lt-card-body .item-mom .item-label { color: #00C8FF; }
.lt-card-body .item-buy .item-label { color: #39d353; }
.lt-card-body .item-risk .item-label { color: #ff8c00; }


/* 주도주 클릭 팝업 모달 */
.lt-stock-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lt-stock-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.lt-stock-modal-inner {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 420px;
  width: 100%;
  padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.lt-stock-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.lt-stock-modal-close:hover { color: var(--text); background: var(--surface2); }
.lt-stock-modal-header {
  margin-bottom: 16px;
  padding-right: 32px;
}
.lt-stock-modal-title { font-size: 18px; font-weight: 700; color: #58a6ff; }
.lt-stock-modal-sector { font-size: 13px; color: #8b949e; }
.lt-stock-modal-body { display: flex; flex-direction: column; gap: 10px; }
.lt-stock-modal-row {
  font-size: 13px;
  color: #e6edf3;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
  padding: 12px 14px;
  background: rgba(22, 27, 34, 0.6);
  border: 1px solid #484f58;
  border-radius: 8px;
}
.lt-stock-modal-row .lt-lbl { flex-shrink: 0; font-weight: 600; color: #b0b8c4; font-size: 13px; }
.lt-stock-modal-row .lt-val { flex: 1; color: #e6edf3; font-weight: 500; }
.lt-stock-modal-row.lt-buy { border-left: 3px solid var(--green); }
.lt-stock-modal-row.lt-risk { border-left: 3px solid var(--danger); }

/* ── 주도주 테마 카드 레이아웃 ──────────────────────────────────────────────── */

/* 시장 방향성 섹션 래퍼 */
.theme-direction-wrap {
  margin-bottom: 20px;
}

/* 테마 카드 그리드 */
.theme-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 20px;
  margin: 16px 0 36px 0;
}

/* 개별 테마 카드 */
.theme-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* 테마 카드 헤더 (테마명 + 이유) */
.theme-card-header {
  background: linear-gradient(90deg, rgba(31, 111, 235, 0.15) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Rajdhani', 'Noto Sans KR', sans-serif;
  letter-spacing: 0.3px;
}
.theme-card-reason {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* 테마 카드 본문 */
.theme-card-body {
  padding: 16px;
}

/* 카드 본문 내부 마크다운 요소 재정의 (카드 내에서 컴팩트하게) */
.theme-card-body h4 {
  display: none; /* 카드 헤더에 이미 표시되므로 숨김 */
}
.theme-card-body p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 10px 0;
}
.theme-card-body strong {
  color: #ffffff;
}
.theme-card-body ul {
  margin: 8px 0 16px 0;
  padding-left: 0;
  list-style: none;
}
.theme-card-body li {
  margin-bottom: 6px;
  padding: 9px 12px;
  background: var(--surface);
  border-radius: 6px;
  border-left: 3px solid var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.theme-card-body li strong {
  color: #ffffff;
  margin-right: 4px;
}
.theme-card-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px 0;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.theme-card-body th {
  background: var(--header);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.theme-card-body td {
  padding: 8px 10px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.theme-card-body tr:last-child td {
  border-bottom: none;
}
/* 매수 타이밍(🟢) → 초록 테두리, 매도/리스크(🔴) → 빨간 테두리 */
.theme-card-body li:has(> strong:first-child) {
  border-left-color: var(--muted);
}
/* hr 구분선 숨김 (카드 안에서는 불필요) */
.theme-card-body hr {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   기업분석 탭 — 신규 UI 컴포넌트 (상용화 패치)
   ═══════════════════════════════════════════════════════════════ */

/* 뉴스 반영 배너 */
.ca-news-banner {
  background: rgba(39, 174, 96, 0.1);
  border-left: 3px solid #27ae60;
  color: #6fcf97;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* 수치 지표 한 줄 칩 */
.ca-metrics-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 4px 0 2px;
}
@media (max-width: 560px) {
  .ca-metrics-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ca-metric {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: var(--surface, #131929);
  border: 1px solid var(--border, #2d3748);
  border-radius: 20px;
  padding: 5px 12px;
  white-space: nowrap;
}
.ca-metric-label {
  font-size: 0.72rem;
  color: var(--muted, #a0aec0);
  white-space: nowrap;
}
.ca-metric-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #63b3ed;
}
.ca-metric-na { opacity: 0.4; }
.ca-metric-na .ca-metric-value {
  font-weight: 400;
  color: var(--muted, #a0aec0);
}

/* 면책 고지 */
.ca-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255, 193, 7, 0.07);
  border: 1px solid rgba(255, 193, 7, 0.22);
  border-radius: 6px;
  padding: 10px 13px;
}
.ca-disclaimer-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }
.ca-disclaimer-text {
  font-size: 0.75rem;
  color: var(--muted, #888);
  line-height: 1.55;
}

/* 사용 횟수 배지 */
.ca-usage-badge {
  display: inline-block;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.73rem;
  font-weight: 600;
}
.ca-usage-ok       { background: #1a3a1a; color: #6fcf97; }
.ca-usage-low      { background: #3a2a0a; color: #f6ad55; }
.ca-usage-exhausted{ background: #3a1a1a; color: #fc8181; }
.ca-usage-unlimited{ background: #1a2a3a; color: #63b3ed; }

/* 업그레이드 유도 박스 */
.ca-upgrade-box {
  background: rgba(229, 62, 62, 0.08);
  border: 1px solid rgba(229, 62, 62, 0.28);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-top: 12px;
}
.ca-upgrade-msg {
  color: #fc8181;
  font-size: 0.88rem;
  margin-bottom: 14px;
  line-height: 1.6;
}
.ca-upgrade-btn {
  display: inline-block;
  background: #63b3ed;
  color: #000;
  padding: 9px 22px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}
.ca-upgrade-btn:hover { opacity: 0.82; }

/* ══ 네이티브 앱 UX 개선 ═══════════════════════════════════════════════════ */

/* 1. 전역 탭 하이라이트 & 300ms 딜레이 제거 */
* { -webkit-tap-highlight-color: transparent; }
button, a, label, summary,
[role="button"], [tabindex="0"],
.news-card, .sub-tab, .section-tab, .sort-btn,
.ndm-past-item, .archive-item, .ltsc-card, .lt-stock-card {
  touch-action: manipulation;
}

/* 2. 탭 패널 페이드인 — display:none→flex 전환 시 자동 발동 */
.tab-panel.active {
  display: flex;
  animation: fpPanelIn .22s cubic-bezier(.4,0,.2,1) both;
}
@keyframes fpPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3. 서브탭 항목 페이드인 — innerHTML 재빌드마다 자동 발동 */
.sub-tab { animation: fpFadeSlideIn .18s ease both; }
@keyframes fpFadeSlideIn {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 4. 뉴스 카드 터치 피드백 */
.news-card {
  transition: transform .1s ease, box-shadow .1s ease,
              background .12s ease, border-left-color .15s ease;
}
.news-card:active {
  transform: scale(.983);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* 5. 섹션 탭 터치 피드백 */
.section-tab { transition: color .15s, background .15s, border-bottom-color .15s, opacity .08s; }
.section-tab:active { opacity: .6; }

/* 6. 서브탭 터치 피드백 */
.sub-tab:active { opacity: .6; transform: scale(.95) !important; }

/* 7. 정렬·액션 버튼 터치 피드백 */
.sort-btn         { transition: color .15s, background .15s, transform .08s, opacity .08s; }
.sort-btn:active  { transform: scale(.91); opacity: .7; }
.action-btn       { transition: color .15s, background .15s, transform .08s; }
.action-btn:active { transform: scale(.93); }
.ndm-past-btn:active { transform: scale(.94); opacity: .7; }

/* 8. 범용 버튼 터치 피드백 */
.btn-logout:active,
.fp-ob-next:active,
.fp-ob-skip:active,
.status-popup-btn:active { transform: scale(.95); opacity: .85; }

/* 9. 스크롤 관성 (iOS/Android 모멘텀 스크롤) */
.news-content,
.ndm-inner,
.ndm-past-list,
.theme-content,
.archive-content,
.mypage-content {
  -webkit-overflow-scrolling: touch;
}

/* 10. 뉴스 상세 모달 슬라이드인 */
.ndm-inner.fp-ndm-anim {
  animation: fpModalSlideUp .26s cubic-bezier(.4,0,.2,1) both;
}
@keyframes fpModalSlideUp {
  from { opacity: .2; transform: translateY(20px) scale(.985); }
  to   { opacity: 1;  transform: translateY(0) scale(1); }
}

/* 11. 과거연관뉴스 항목 터치 피드백 */
.ndm-past-item { transition: background .1s ease, transform .1s ease; }
.ndm-past-item:active { background: rgba(88,166,255,.08); transform: scale(.99); }

/* 12. 주도주·섹터 카드 터치 피드백 */
.ltsc-card    { transition: transform .1s ease, box-shadow .1s ease; }
.ltsc-card:active { transform: scale(.975); box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.lt-stock-card { transition: transform .1s ease; }
.lt-stock-card:active { transform: scale(.975); }

/* 13. archive 항목 터치 피드백 */
.archive-item { transition: background .1s ease, transform .08s ease; }
.archive-item:active { background: rgba(88,166,255,.05); transform: scale(.995); }

/* ══ 최초 설치 온보딩 오버레이 ══════════════════════════════════════════════ */
.fp-ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10,14,20,0.98);
  display: none;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
  opacity: 0;
  transition: opacity .35s ease;
}
.fp-ob-overlay.fp-ob-visible { opacity: 1; }
.fp-ob-overlay.fp-ob-hiding  { opacity: 0; pointer-events: none; }

.fp-ob-inner {
  width: 100%;
  max-width: 400px;
  height: 100%;
  max-height: 740px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.fp-ob-slides-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.fp-ob-slides {
  display: flex;
  height: 100%;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.fp-ob-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px 20px;
  text-align: center;
  gap: 14px;
  box-sizing: border-box;
}

.fp-ob-icon-wrap {
  width: 90px;
  height: 90px;
  border-radius: 26px;
  background: linear-gradient(145deg, #0d1117 0%, #161b22 60%, #1a2130 100%);
  border: 1.5px solid rgba(88,166,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 0 0 8px rgba(88,166,255,.04), 0 8px 32px rgba(0,0,0,.5);
}
.fp-ob-icon-wrap svg  { width: 48px; height: 48px; }
.fp-ob-icon-wrap img  { width: 54px; height: 54px; object-fit: contain; }

.fp-ob-slide-1 .fp-ob-icon-wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-color: rgba(0,180,255,.3);
  box-shadow: 0 0 0 10px rgba(0,180,255,.05), 0 0 40px rgba(0,180,255,.12), 0 8px 32px rgba(0,0,0,.5);
}
.fp-ob-slide-1 .fp-ob-icon-wrap svg { width: 68px; height: 68px; }

.fp-ob-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #58a6ff;
  background: rgba(88,166,255,.1);
  border: 1px solid rgba(88,166,255,.2);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 2px;
}

.fp-ob-title {
  font-family: 'Rajdhani', 'Exo 2', 'Noto Sans KR', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #e6edf3;
  line-height: 1.25;
  letter-spacing: -.4px;
}
.fp-ob-slide-1 .fp-ob-title {
  font-size: 26px;
  background: linear-gradient(90deg, #58a6ff, #a5d6ff, #58a6ff);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fpObGrad 4s linear infinite;
}
@keyframes fpObGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.fp-ob-desc {
  font-size: 14px;
  color: #8b949e;
  line-height: 1.75;
  max-width: 300px;
}

.fp-ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 4px;
}
.fp-ob-chip {
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  background: rgba(88,166,255,.08);
  border: 1px solid rgba(88,166,255,.18);
  border-radius: 20px;
  padding: 5px 13px;
  letter-spacing: .2px;
}

.fp-ob-hint {
  font-size: 12.5px;
  color: #7ee8a2;
  background: rgba(126,232,162,.07);
  border: 1px solid rgba(126,232,162,.15);
  border-radius: 10px;
  padding: 10px 16px;
  line-height: 1.55;
  max-width: 290px;
}

/* dot indicators */
.fp-ob-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 14px 0 10px;
}
.fp-ob-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #21262d;
  border: 1.5px solid #30363d;
  transition: background .25s, width .25s, border-color .25s;
  flex-shrink: 0;
}
.fp-ob-dot.fp-ob-dot-active {
  background: #58a6ff;
  border-color: #58a6ff;
  width: 22px;
  border-radius: 4px;
}

/* footer */
.fp-ob-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 24px;
}
.fp-ob-skip {
  font-size: 13px;
  color: #6e7681;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 6px;
  flex-shrink: 0;
  transition: color .15s;
  min-width: 56px;
}
.fp-ob-skip:active { color: #8b949e; }
.fp-ob-next {
  flex: 1;
  background: #1f6feb;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -.2px;
  transition: background .18s, transform .1s, box-shadow .18s;
  box-shadow: 0 4px 16px rgba(31,111,235,.3);
}
.fp-ob-next:active { transform: scale(.97); }
.fp-ob-next.fp-ob-last {
  background: linear-gradient(90deg, #1f6feb 0%, #7c3aed 100%);
  box-shadow: 0 4px 20px rgba(124,58,237,.3);
}

@media (max-height: 620px) {
  .fp-ob-slide { padding: 20px 24px 12px; gap: 10px; }
  .fp-ob-icon-wrap { width: 70px; height: 70px; border-radius: 20px; }
  .fp-ob-icon-wrap svg { width: 38px; height: 38px; }
  .fp-ob-slide-1 .fp-ob-icon-wrap { width: 78px; height: 78px; }
  .fp-ob-slide-1 .fp-ob-icon-wrap svg { width: 52px; height: 52px; }
  .fp-ob-title { font-size: 20px; }
  .fp-ob-desc { font-size: 13px; }
}