/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../packages/ui/src/tokens/css-variables.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* JavisPlatform 디자인 토큰 (Claude Design 핸드오프 확정본).
   @javis/ui/tokens/css 로 import — apps/web · apps/admin 의 globals.css 가 맨 앞에서 로드. */

:root {
  /* Surfaces */
  --bg-app: #0b0e14;
  --bg-pane-a: #0f131b;
  --bg-pane-b: #131823;
  --bg-panel: #1f2937;
  --bg-panel-hi: #273244;
  --bg-inset: #0a0d12;
  --bg-overlay: rgba(11, 14, 20, 0.72);

  /* Borders */
  --border: #374151;
  --border-soft: #293241;
  --border-strong: #4b5563;
  --focus-ring: #60a5fa;

  /* Text */
  --fg: #e5e7eb;
  --fg-strong: #f5f5f5;
  --fg-muted: #9ca3af;
  --fg-dim: #64748b;
  --fg-invert: #0b0e14;

  /* Semantic */
  --buy: #22c55e;
  --buy-soft: rgba(34, 197, 94, 0.14);
  --buy-border: rgba(34, 197, 94, 0.4);
  --sell: #ef4444;
  --sell-soft: rgba(239, 68, 68, 0.14);
  --sell-border: rgba(239, 68, 68, 0.4);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --info: #3b82f6;
  --info-hi: #60a5fa;
  --info-soft: rgba(59, 130, 246, 0.14);

  /* Roles */
  --role-member: #60a5fa;
  --role-expert: #a78bfa;
  --role-admin: #f59e0b;

  /* Drawing provenance (오르바 차트용, Phase 3B) */
  --ink-mine: #e5e7eb;
  --ink-draft: #9ca3af;
  --ink-sub: #60a5fa;
  --ink-repost: #f59e0b;
  --ink-repost-glow: 0 0 0 1px rgba(245, 158, 11, 0.45), 0 0 14px rgba(245, 158, 11, 0.28);

  /* Subscription status */
  --status-active: var(--buy);
  --status-pending: var(--warn);
  --status-expired: var(--fg-dim);

  /* Javis primary (Phase 1 브리프 계승) */
  --primary: #1f5eff;
  --primary-hi: #3b74ff;
  --primary-soft: rgba(31, 94, 255, 0.14);
  --primary-border: rgba(31, 94, 255, 0.4);
  --accent: #a78bfa;

  /* Chart canvas */
  --chart-line: #f5f5f5;
  --chart-grid: #1a2130;

  /* Typography */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --leading-tight: 1.25;
  --leading-snug: 1.35;
  --leading-base: 1.55;
  --leading-loose: 1.65;

  --tracking-tight: -0.01em;
  --tracking-base: 0;
  --tracking-wide: 0.02em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing — 4px 그리드 + 자주 쓰는 0.5x 보정값 (Tailwind 패턴).
     CSS variable 이름에 점은 못 쓰므로 `1-5` 가 1.5x = 6px 를 의미. */
  --space-0: 0;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-5-5: 22px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Touch targets */
  --hit-min: 44px;
  --hit-pref: 48px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-focus: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--focus-ring);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Breakpoint (Tailwind preset 과 동기) — JS 측 useMediaQuery 등에서 참조 가능.
     CSS @media 안에서 var() 는 못 쓰지만 layout primitives 의 height 분기 등에 활용. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Shell layout heights (lg 미만에서 모바일 분기) */
  --shell-topbar-h: 64px;
  --shell-content-pad-y: 24px;
}

@media (max-width: 1023px) {
  :root {
    --shell-topbar-h: 56px;
    --shell-content-pad-y: 16px;
  }
}

[data-theme='light'] {
  --bg-app: #f7f8fa;
  --bg-pane-a: #ffffff;
  --bg-pane-b: #f1f3f7;
  --bg-panel: #ffffff;
  --bg-panel-hi: #eef1f6;
  --bg-inset: #f7f8fa;
  --bg-overlay: rgba(15, 19, 27, 0.4);

  --border: #d7dbe3;
  --border-soft: #e5e8ee;
  --border-strong: #b8bfcc;
  --focus-ring: #2563eb;

  --fg: #1a1f29;
  --fg-strong: #0b0e14;
  --fg-muted: #4b5563;
  --fg-dim: #6b7280;
  --fg-invert: #ffffff;

  --buy: #15803d;
  --sell: #b91c1c;
  --warn: #b45309;
  --info: #1d4ed8;
  --info-hi: #2563eb;

  --chart-line: #1a1f29;
  --chart-grid: #e5e8ee;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!../../packages/ui/src/styles/globals.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* JavisPlatform 공용 프리미티브 — Claude Design 핸드오프 기준.
   tokens 는 @javis/ui/tokens/css 에서 이미 정의됨. 이 파일은 컴포넌트·레이아웃 규칙만. */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}
button {
  font-family: inherit;
  cursor: pointer;
}
input,
textarea,
select {
  font-family: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Nowrap 규칙 — 다국어(CJK) 안전 단어 줄바꿈 */
.btn,
.chipbtn,
.tab-btn,
.pill-btn,
.tier-pill,
.chip,
.sort-select,
.view-toggle button,
.seg button,
.nav-item,
.hero-stat .l,
.ecard-stat .l,
.tag-chip {
  white-space: nowrap;
}
h1,
h2,
h3,
h4 {
  white-space: nowrap;
}

/* Member-scoped: 본문 +1 step, 터치 48px */
.surface-member {
  font-size: var(--text-md);
}
.surface-member button,
.surface-member [role='button'],
.surface-member a.btn {
  min-height: var(--hit-pref);
}

h1,
.h1 {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
h2,
.h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
h3,
.h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}
h4,
.h4 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}
p {
  margin: 0 0 var(--space-3);
}
small,
.caption {
  font-size: var(--text-xs);
  color: var(--fg-dim);
}
.num,
.price,
code,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.price {
  font-size: var(--text-lg);
  color: var(--fg-strong);
}
.price.up {
  color: var(--buy);
}
.price.down {
  color: var(--sell);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* =============================== Shell (Sidebar + Topbar) */
.app-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
}
.app-shell.expert,
.app-shell.admin {
  grid-template-columns: 220px 1fr;
}

.sidebar {
  background: var(--bg-pane-a);
  border-right: 1px solid var(--border-soft);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 18px;
}
.sidebar .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  position: relative;
  flex-shrink: 0;
}
.sidebar .brand-mark::before,
.sidebar .brand-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  width: 3px;
  border-radius: 1px;
  background: #fff;
}
.sidebar .brand-mark::before {
  bottom: 5px;
  height: 8px;
}
.sidebar .brand-mark::after {
  bottom: 5px;
  left: 11px;
  height: 14px;
}
.brand-mark .tall {
  position: absolute;
  bottom: 5px;
  left: 17px;
  width: 3px;
  height: 11px;
  background: #fff;
  border-radius: 1px;
}
.brand-mark .short {
  position: absolute;
  bottom: 5px;
  left: 23px;
  width: 3px;
  height: 6px;
  background: #fff;
  border-radius: 1px;
  opacity: 0.7;
}
.brand-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.brand-name em {
  color: var(--primary);
  font-style: normal;
}

.sidebar .section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  padding: 16px 14px 6px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--fg-muted);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-item:hover {
  background: var(--bg-pane-b);
  color: var(--fg);
}
.nav-item.active {
  background: var(--bg-panel-hi);
  color: var(--fg-strong);
  font-weight: 600;
  border-color: var(--border-soft);
}
.nav-item .icon {
  width: 20px;
  display: inline-flex;
  justify-content: center;
}

.user-chip {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

.topbar {
  height: 64px;
  min-height: 64px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--bg-pane-a);
  white-space: nowrap;
  overflow-x: auto;
}
.topbar .pill-btn,
.topbar button {
  flex-shrink: 0;
}
.topbar .spacer {
  flex: 1;
}
.topbar .pill-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.content {
  padding: 24px 28px;
  min-width: 0;
}

/* =============================== Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  transition: background var(--motion-fast) var(--motion-ease);
}
.btn.lg {
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
}
.btn.sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
}
.btn.primary {
  background: var(--primary);
  color: #fff;
}
.btn.primary:hover {
  background: var(--primary-hi);
}
.btn.secondary {
  background: var(--bg-panel);
  color: var(--fg);
  border-color: var(--border);
}
.btn.secondary:hover {
  background: var(--bg-panel-hi);
}
.btn.ghost {
  background: transparent;
  color: var(--fg-muted);
}
.btn.ghost:hover {
  background: var(--bg-pane-b);
  color: var(--fg);
}
.btn.danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--sell);
  border-color: rgba(239, 68, 68, 0.4);
}
.btn.follow {
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--border);
}
.btn.follow:hover {
  background: var(--bg-panel-hi);
  border-color: var(--border-strong);
}
.btn.following {
  background: var(--primary-soft);
  color: #bcd1ff;
  border: 1px solid var(--primary-border);
}
.btn.following:hover {
  background: rgba(239, 68, 68, 0.14);
  color: var(--sell);
  border-color: var(--sell-border);
}
.btn.following:hover .label-following {
  display: none;
}
.btn.following .label-unfollow {
  display: none;
}
.btn.following:hover .label-unfollow {
  display: inline;
}

/* =============================== Cards / chips */
.card-surf {
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--fg);
}
.chip.info {
  color: var(--info-hi);
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.35);
}
.chip.buy {
  color: var(--buy);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
}
.chip.warn {
  color: var(--warn);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
}
.chip.sell {
  color: var(--sell);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}
.chip.expert {
  color: var(--role-expert);
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
}
.chip.admin {
  color: var(--role-admin);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* =============================== Hero (shared) */
.hero {
  position: relative;
  padding: 28px 28px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(1200px 260px at 0% 0%, rgba(31, 94, 255, 0.18), transparent 55%),
    radial-gradient(900px 280px at 100% 10%, rgba(167, 139, 250, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-pane-b) 0%, var(--bg-pane-a) 100%);
  overflow: hidden;
  margin-bottom: 20px;
}
.hero h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.hero p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 15px;
  max-width: 560px;
}
.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 18px;
}
.hero-stat .k {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-strong);
}
.hero-stat .l {
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.hero-search {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  max-width: 560px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  align-items: center;
}
.hero-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--fg);
  font-size: 15px;
  min-height: 40px;
}
.hero-glyph {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 260px;
  height: 260px;
  opacity: 0.35;
  pointer-events: none;
}

/* =============================== Filters bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.chipbtn {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-pane-b);
  color: var(--fg-muted);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-ease);
}
.chipbtn:hover {
  color: var(--fg);
  background: var(--bg-panel);
}
.chipbtn.active {
  background: var(--primary-soft);
  color: #bcd1ff;
  border-color: var(--primary-border);
}
.sort-select {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--bg-pane-b);
  color: var(--fg);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  font-weight: 600;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.view-toggle button {
  min-height: 38px;
  padding: 0 12px;
  background: var(--bg-pane-b);
  color: var(--fg-muted);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.view-toggle button.active {
  background: var(--bg-panel-hi);
  color: var(--fg-strong);
}

/* =============================== Expert cards */
.expert-grid {
  display: grid;
  gap: 14px;
}
.expert-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.expert-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.expert-list {
  grid-template-columns: 1fr;
}

.ecard {
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
  cursor: pointer;
  position: relative;
}
.ecard:hover {
  border-color: var(--border);
  background: var(--bg-panel);
}
.ecard .verified {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--info-hi);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ecard-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.ecard-head > div:nth-child(2) {
  min-width: 0;
}
.ecard .name {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ecard .focus {
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tag-chip {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.profile-meta span {
  white-space: nowrap;
}
.ecard .rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
}

.ecard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 14px;
}
.ecard-stat .k {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.ecard-stat .l {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.ecard-stat .up {
  color: var(--buy);
}
.ecard-stat .dn {
  color: var(--sell);
}

.ecard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ecard-price {
  font-family: var(--font-mono);
}
.ecard-price .v {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg-strong);
}
.ecard-price .u {
  font-size: 12px;
  color: var(--fg-dim);
}

.ecard.subscribed {
  border-color: var(--primary-border);
  background: linear-gradient(180deg, rgba(31, 94, 255, 0.06), var(--bg-pane-b));
}
.ecard.subscribed::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(31, 94, 255, 0.25);
  pointer-events: none;
}

.tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}
.tier-pill.gold {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.4);
}
.tier-pill.silver {
  color: #d1d5db;
  background: rgba(209, 213, 219, 0.08);
  border-color: rgba(209, 213, 219, 0.25);
}
.tier-pill.new {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.35);
}

.ecard.variant-spark .spark-wrap {
  margin: -6px -10px 12px;
  padding: 6px 0;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, rgba(31, 94, 255, 0.05) 100%);
  border-radius: 8px;
}

.erow {
  display: grid;
  grid-template-columns: 48px 1.4fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--motion-fast) var(--motion-ease);
}
.erow:hover {
  border-color: var(--border);
  background: var(--bg-panel);
}
.erow .cell-label {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.erow .cell-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-strong);
}

/* =============================== Profile */
.profile-head {
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(
      600px 200px at 0% 0%,
      var(--_tint, rgba(31, 94, 255, 0.18)),
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg-pane-b) 0%, var(--bg-pane-a) 100%);
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: flex-start;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 36px;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.profile-body h1 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-body .desc {
  font-size: 15px;
  color: var(--fg);
  line-height: 1.65;
  margin: 10px 0 0;
  max-width: 620px;
}
.profile-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.profile-meta .dot {
  color: var(--fg-dim);
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tab-btn {
  min-height: 42px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-btn:hover {
  color: var(--fg);
}
.tab-btn.active {
  color: var(--fg-strong);
  border-bottom-color: var(--primary);
}
.tab-btn .count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--fg-muted);
}

/* =============================== Plans */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.plan {
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan.highlight {
  border-color: var(--primary-border);
  background: linear-gradient(180deg, rgba(31, 94, 255, 0.08), var(--bg-panel));
  box-shadow: 0 20px 40px -20px rgba(31, 94, 255, 0.35);
}
.plan .rec-tag {
  position: absolute;
  top: -10px;
  left: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.plan .tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.plan.highlight .tier {
  color: #94b8ff;
}
.plan .price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.plan .price {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}
.plan .per {
  font-size: 13px;
  color: var(--fg-dim);
}
.plan .billed {
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 18px;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.5;
}
.plan li .ic {
  color: var(--buy);
  flex-shrink: 0;
  margin-top: 1px;
}
.plan li.muted {
  color: var(--fg-dim);
}
.plan li.muted .ic {
  color: var(--fg-dim);
}
.plan-cta {
  margin-top: auto;
}

.follow-dock {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  min-width: 300px;
}
.follow-dock .btn {
  white-space: nowrap;
}
.follow-dock .row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-muted);
}
.follow-dock .row span {
  white-space: nowrap;
}
.follow-dock .sub-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.follow-dock .from {
  font-size: 12px;
  color: var(--fg-dim);
}
.follow-dock .divider {
  height: 1px;
  background: var(--border-soft);
  margin: 4px 0;
}

/* =============================== Toast */
.toast-dock {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  min-width: 280px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-lg);
  animation: slideIn 200ms var(--motion-ease-out);
}
.toast .ic {
  color: var(--buy);
  flex-shrink: 0;
  margin-top: 2px;
}
.toast.info .ic {
  color: var(--info-hi);
}
.toast .t {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-strong);
  margin-bottom: 2px;
}
.toast .d {
  font-size: 12px;
  color: var(--fg-muted);
}
@keyframes slideIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =============================== Section title */
.sect-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg-strong);
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sect-title .n {
  font-family: var(--font-mono);
  color: var(--fg-dim);
  font-weight: 600;
  font-size: 13px;
}

/* =============================== Signal preview */
.sigcard {
  padding: 14px;
  border-radius: 10px;
  background: var(--bg-pane-b);
  border: 1px solid var(--border-soft);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sigcard .sym {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--fg-strong);
  font-size: 14px;
}
.sigcard .dir {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sigcard .dir.long {
  background: var(--buy-soft);
  color: var(--buy);
  border: 1px solid var(--buy-border);
}
.sigcard .dir.short {
  background: var(--sell-soft);
  color: var(--sell);
  border: 1px solid var(--sell-border);
}
.sigcard .meta {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.sigcard .time {
  font-size: 11px;
  color: var(--fg-dim);
  margin-left: auto;
  font-family: var(--font-mono);
}

/* =============================== Table */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  text-align: left;
  padding: 10px 12px;
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-pane-a);
}
td {
  padding: 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}
tr:hover td {
  background: var(--bg-pane-b);
}

/* =============================== Modal scrim */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 20, 0.72);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrim .modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

/* =============================== Chart 페이지 (모바일 dock) */
/* touch-action: none 은 일부 환경에서 widget 내부 이벤트 처리에 영향을 주어
   onChartReady 미발화 회귀 가능성이 있어 제거. pinch zoom 충돌은 별도 검토. */

/* min-width 360 강제는 widget 의 narrow viewport init 회귀 회피용이었으나
   iframe_loading_compatibility_mode 적용으로 본 회귀가 해결되어 더 이상 불필요.
   가로 스크롤 회귀 회피를 위해 제거. */
.chart-bottom-dock {
  display: flex;
  height: 48px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-pane-a);
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  /* 모바일에서는 dock 을 viewport 하단 fixed → chart 영역이 dock 자리까지 차지.
     chart-page 의 height 계산도 dock 만큼 빼지 않아도 되어 차트가 더 길게 표시. */
  .chart-bottom-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
}
.chart-bottom-dock button {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  min-height: 48px;
  cursor: pointer;
  padding: 0;
}
.chart-bottom-dock button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chart-bottom-dock button:not(:disabled):hover,
.chart-bottom-dock button:not(:disabled):active {
  color: var(--fg-strong);
  background: var(--bg-panel);
}
.chart-bottom-dock button + button {
  border-left: 1px solid var(--border-soft);
}

/* =============================== Drawer (packages/ui Drawer 컴포넌트 동반 스타일) */
.drawer-root {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none; /* 자식이 활성 영역 결정 */
}
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 14, 20, 0.6);
  opacity: 0;
  transition: opacity var(--motion-base) var(--motion-ease);
  pointer-events: auto;
}
.drawer-root.drawer-open .drawer-scrim {
  opacity: 1;
}
.drawer-panel {
  position: absolute;
  background: var(--bg-pane-a);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  outline: none;
  transition: transform var(--motion-base) var(--motion-ease-out);
}
.drawer-panel--left {
  top: 0;
  left: 0;
  height: 100dvh;
  border-right: 1px solid var(--border-soft);
  transform: translateX(-100%);
}
.drawer-panel--right {
  top: 0;
  right: 0;
  height: 100dvh;
  border-left: 1px solid var(--border-soft);
  transform: translateX(100%);
}
.drawer-panel--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--border-soft);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
}
.drawer-root.drawer-open .drawer-panel--left,
.drawer-root.drawer-open .drawer-panel--right {
  transform: translateX(0);
}
.drawer-root.drawer-open .drawer-panel--bottom {
  transform: translateY(0);
}
.drawer-handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--border-strong);
}
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.drawer-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-strong);
  margin: 0;
  white-space: normal;
}
.drawer-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: 22px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.drawer-close:hover {
  background: var(--bg-panel);
  color: var(--fg);
}
.drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px;
}
.drawer-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border-soft);
}

/* =============================== FAB */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 10px 30px rgba(59, 130, 246, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.4);
  border: none;
  z-index: 50;
}

/* =============================== Home feed grid (모바일 1열) */
.home-feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1023px) {
  .home-feed-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* =============================== Mobile grid overrides — lg(1024) 미만에서
   인라인 gridTemplateColumns 를 강제 분기. 페이지/컴포넌트 쪽 인라인 style 은
   유지하고, className 기반의 !important 오버라이드로 모바일 가로 깨짐을 흡수. */
@media (max-width: 1023px) {
  /* 대시보드 메트릭 8장 — 데스크톱 4열 → 모바일 2열 */
  .market-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* MetricCard 자체의 padding/font 도 좁은 폭에서 축소 — 값/델타 잘림 방지. */
  .market-metrics-grid .card-surf {
    padding: 12px 14px !important;
  }
  /* 오늘의 브리핑 가로 스트립 — 모바일 1열 */
  .briefings-grid {
    grid-template-columns: 1fr !important;
  }
  /* 상단 LIVE 티커 — 모바일에서 가로 스크롤 허용 */
  .ticker-strip-row {
    overflow-x: auto !important;
  }
  /* /community — 220px 사이드바 + 본문 → 1열 */
  .community-shell {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* /insights — 주요 브리핑 2열 → 1열 */
  .insights-featured-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* /insights — 최신 브리핑 row '1fr auto' → '1fr' (시간 배지가 본문 아래로) */
  .insights-list-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* /experts/[id] 통계 4열 → 2열 */
  .expert-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* /experts/[id] 탭 컨텐츠 3열 → 1열 */
  .experts-tabs-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* /expert/dashboard 4 stats → 2열 */
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* /my overview '1.4fr 1fr' → 1열 */
  .my-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* /my 팔로우 2열 → 1열 */
  .my-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* =============================== Mobile shell — lg(1024) 미만 */
/* 햄버거 토글 — lg 이상에서는 hidden, lg 미만에서는 인라인 flex 노출. */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-shell > .sidebar {
    /* 모바일에서는 사이드바 grid item 자체를 숨기고 Drawer 로 대체. */
    display: none;
  }
  .topbar {
    height: 56px;
    min-height: 56px;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar .nav-toggle {
    display: inline-flex;
  }
  .topbar .topbar-description {
    display: none;
  }
  /* topbar 검색 pill — 모바일에서는 라벨/kbd 숨기고 아이콘만 */
  .topbar .topbar-search {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .topbar .topbar-search > span,
  .topbar .topbar-search > kbd {
    display: none;
  }
  .content {
    padding: 16px 12px;
  }
  .toast-dock {
    right: 12px;
    bottom: 80px;
    left: 12px;
  }
  .toast {
    min-width: 0;
    width: 100%;
  }
  .fab {
    right: 16px;
    bottom: 16px;
  }
}

/* =============================== Responsive */
@media (max-width: 1200px) {
  .expert-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .plans-grid {
    grid-template-columns: 1fr;
  }
  .profile-head {
    grid-template-columns: 80px 1fr;
  }
  .profile-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  /* 4칸 stats grid (전문가 상세·대시보드) → 모바일에서 2x2 로 접기. */
  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 전문가 카드 grid 도 1열로. */
  .expert-grid.grid-3,
  .expert-grid.grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.15_@babel+core@7.29.0_@playwright+test@1.59.1_react-dom@19.2.5_react@19.2.5__react@19.2.5/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Next.js app level only — @javis/ui 의 globals.css 뒤에 추가 오버라이드가 필요하면 여기 작성. */

/* ─────────────────────────────────────────────────────────────────────────
 * PR-12: 차트 우측 사이드 패널
 *  - 데스크톱: 320px aside (시그널/뉴스/리포트 3 섹션 stacked)
 *  - 데스크톱 collapsed: 32px thin toggle bar
 *  - 모바일: fixed slide-in + backdrop
 * ──────────────────────────────────────────────────────────────────────── */

.chart-sidepanel {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.chart-sidepanel-collapse-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-app);
  color: var(--fg-muted);
  cursor: pointer;
  z-index: 2;
}
.chart-sidepanel-collapse-btn:hover {
  color: var(--fg-strong);
}

.chart-sidepanel-collapsed-bar {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
}
.chart-sidepanel-collapsed-bar:hover {
  color: var(--fg-strong);
  background: var(--bg-soft);
}

.chart-sidepanel-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 40px 12px 16px; /* top 40px = collapse btn (22+6=28) + 12px 여유 */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chart-sidepanel-section {
  display: flex;
  flex-direction: column;
}

.chart-sidepanel-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left-width: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--fg-strong);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align: left;
  transition: filter 120ms ease, background 120ms ease;
}
.chart-sidepanel-section-header:hover {
  filter: brightness(1.15);
}

/* 섹션별 accent — 좌측 border + 아이콘 + 제목 색상으로 강조. */
.chart-sidepanel-section-header[data-section='signals'] {
  border-left-color: #fbbf24; /* amber — 시그널 */
  color: #fbbf24;
}
.chart-sidepanel-section-header[data-section='news'] {
  border-left-color: #38bdf8; /* sky — 뉴스 */
  color: #38bdf8;
}
.chart-sidepanel-section-header[data-section='reports'] {
  border-left-color: #c084fc; /* violet — 리포트 */
  color: #c084fc;
}

.chart-sidepanel-section-title {
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.chart-sidepanel-section-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg-strong);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.chart-sidepanel-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  /* 섹션 자체 스크롤 제거 — outer .chart-sidepanel-content 한 곳에서만 스크롤.
     중첩 스크롤이 사용자에게 "위가 잘려 보이는" 회귀의 원인이었음. */
}

/* 카드 공통 */
.chart-sidepanel-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.chart-sidepanel-card:hover {
  border-color: var(--fg-muted);
  background: var(--bg-soft);
}
.chart-sidepanel-card.active {
  border-color: var(--primary, var(--fg-strong));
  background: var(--bg-soft);
}
/* PR-17.13: 종료 카드의 active 강조 — closed.profit/loss 의 border-color 가 active
   보다 specific 해서 가려지는 회귀 차단. selector 다중 매치 + box-shadow 로 분리 강조. */
.chart-sidepanel-card.closed.active,
.chart-sidepanel-card.closed.profit.active,
.chart-sidepanel-card.closed.loss.active {
  border-color: var(--primary, var(--fg-strong));
  box-shadow: 0 0 0 1px var(--primary, #1f5eff);
  opacity: 1;
}

.chart-sidepanel-card-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.chart-sidepanel-card-symbol {
  color: var(--fg-strong);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-sidepanel-card-time {
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}
.chart-sidepanel-card-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-muted);
}
.chart-sidepanel-card-note {
  font-size: 11px;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.chart-sidepanel-card-status {
  font-size: 10px;
  color: var(--fg-dim);
  font-weight: 600;
}

/* 종료된 시그널 카드 — 살짝 dim + pnlKind 별 옅은 tint 배경. 세로 높이 동일. */
.chart-sidepanel-card.closed {
  opacity: 0.9;
}
.chart-sidepanel-card.closed.profit {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.25);
}
.chart-sidepanel-card.closed.loss {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.25);
}
/* row1 시간 옆 inline 수익률 — closed 시그널 표시. 별도 row 추가 없이 시각적 알림. */
.chart-sidepanel-card-pnl-inline {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
/* 수익은 손실보다 한 단계 크게 — 시각 임팩트 강조. */
.chart-sidepanel-card-pnl-inline.profit {
  color: #22c55e;
  font-size: 17px;
  font-weight: 800;
}
.chart-sidepanel-card-pnl-inline.loss {
  color: #ef4444;
}
/* PR-18.8: manual close — TP/SL 미도달 강제 종료. 회색 톤 + 작은 폰트로 손익% 와 시각 구분. */
.chart-sidepanel-card-pnl-inline.manual {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans, inherit);
  padding: 2px 6px;
  background: rgba(148, 163, 184, 0.12);
  border-radius: 4px;
}

.chart-sidepanel-card-news {
  /* 뉴스 카드 — 제목 + 호스트 */
}
.chart-sidepanel-card-report {
  /* 리포트 카드 — 제목 + 요약 + 태그 */
}
.chart-sidepanel-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-strong);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chart-sidepanel-card-summary {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chart-sidepanel-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--fg-dim);
}
.chart-sidepanel-card-host {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chart-sidepanel-card-tags {
  color: var(--fg-muted);
}

.chart-sidepanel-more {
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.chart-sidepanel-more:hover {
  color: var(--fg-strong);
  background: var(--bg-soft);
}

/* 모바일 전용 — fixed slide-in */
.chart-sidepanel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  animation: chart-sidepanel-fade-in 150ms ease;
}

.chart-sidepanel-mobile {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 92vw;
  background: var(--bg-app);
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
  animation: chart-sidepanel-slide-in 200ms ease;
}

.chart-sidepanel-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chart-sidepanel-mobile-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-strong);
}
.chart-sidepanel-mobile-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: 6px;
}
.chart-sidepanel-mobile-close:hover {
  color: var(--fg-strong);
  background: var(--bg-soft);
}

.chart-sidepanel-mobile .chart-sidepanel-content {
  padding: 12px;
}

@keyframes chart-sidepanel-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes chart-sidepanel-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Signal Composer (시그널 발행 모달) — 좌우 2-column 디자인
 * ──────────────────────────────────────────────────────────────────────── */

/* .scrim .modal { max-width: 520px } 을 override 하기 위해 specificity 동등 selector 사용. */
.scrim .modal.signal-composer {
  width: min(1000px, 92vw);
  max-width: min(1000px, 92vw);
  max-height: calc(100dvh - 40px);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.composer-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-soft);
  display: grid;
  place-items: center;
  color: var(--primary);
}

.composer-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: stretch;
}

.composer-meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.composer-insight {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.composer-insight-textarea {
  flex: 1;
  min-height: 320px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
}

.composer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.composer-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.composer-dropdown-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--fg-dim);
}

.composer-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  color: var(--fg);
  font-size: 13px;
}
.composer-dropdown-item:hover {
  background: var(--bg-soft);
}

.composer-error {
  font-size: 12px;
  color: var(--sell);
  margin-top: 4px;
}

/* Direction segmented — 큰 buttons (long/short 색상 구분, PR-17.10 neutral 제거) */
.composer-direction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.composer-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-app);
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.composer-dir-btn:hover {
  border-color: var(--fg-muted);
  color: var(--fg-strong);
}
.composer-dir-btn.active.long {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  color: #22c55e;
}
.composer-dir-btn.active.short {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #ef4444;
}
/* SignalComposer — input/textarea 다크 테마 매칭 (.input class 가 unstyled 라 직접) */
.signal-composer input,
.signal-composer textarea {
  background: var(--bg-app);
  color: var(--fg-strong);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.signal-composer input::-moz-placeholder, .signal-composer textarea::-moz-placeholder {
  color: var(--fg-dim);
}
.signal-composer input::placeholder,
.signal-composer textarea::placeholder {
  color: var(--fg-dim);
}
.signal-composer input:focus,
.signal-composer textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 94, 255, 0.15);
}
.signal-composer input:disabled,
.signal-composer textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-soft);
}

/* TP/SL 가격 입력 + 보조 % 입력 row */
.composer-price-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.composer-price-input {
  font-family: var(--font-mono);
  flex: 1;
  min-width: 0;
}
.composer-pct-wrap {
  position: relative;
  width: 96px;
  flex-shrink: 0;
}
.composer-pct-input {
  font-family: var(--font-mono);
  width: 100%;
  padding-right: 24px !important;
}
.composer-pct-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--fg-muted);
  pointer-events: none;
}

.composer-banner {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.composer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 모바일 — 1-column 으로 폴백 */
@media (max-width: 767px) {
  .signal-composer {
    width: 100%;
    padding: 16px;
  }
  .composer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .composer-insight-textarea {
    min-height: 200px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 모바일 전역 보강 (≤ 767px)
 *  - word-break: keep-all → 한글이 음절(글자) 단위로 부서지지 않고 어절(공백)
 *    단위로 wrap. 모바일 narrow viewport 의 1글자/줄 회귀 차단.
 *  - white-space: normal override → @javis/ui globals.css 의 전역 `h1..h4
 *    { white-space: nowrap }` 가 모바일 hero h1 ("안녕하세요, admin님 👋")
 *    을 viewport 밖으로 밀어내고 그 영향으로 sibling 버튼 row 도 잘림.
 *    모바일에선 wrap 허용이 필수.
 *  - .hero h1 specificity override — `.hero h1` 이 글로벌 `h1` 보다 specific
 *    해서 글로벌 폰트 축소가 안 먹힘. 별도 selector + !important 로 강제.
 *  - 제목/본문 폰트 축소, card padding 축소, btn padding 축소.
 *  - .market-metrics-grid 4-col → 2-col override (inline style 의 4-col 을
 *    !important 로 override — specificity 동등 회피).
 *  - .metric-value (MarketMetrics 카드 내 큰 숫자) — 카드 폭 좁아 SVG 옆
 *    영역이 18px 남았다가 자릿수마다 wrap 되던 회귀 fix. nowrap + 폰트 축소.
 *  - .market-metrics-grid svg 모바일 시 84→56px 로 축소해 숫자 영역 폭 확보.
 *  - .topbar-description 모바일 숨김 (긴 한글 부제가 한 줄 안 들어와 영영
 *    잘려서 UX 가치 없음).
 * ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  h1, h2, h3, h4 { white-space: normal !important; }
  h1 { font-size: 22px; line-height: 1.3; word-break: keep-all; }
  h2 { font-size: 18px; word-break: keep-all; }
  p, li { word-break: keep-all; line-height: 1.55; }
  .hero h1 {
    font-size: 20px !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
  .hero p { font-size: 13px; max-width: none; }
  .hero { padding: 16px 16px 14px; }
  .card-surf { padding: 14px 16px; }
  .btn { padding: 8px 12px; font-size: 13px; }

  /* 2026-05-15: PR #93 의 '모바일 4-col' 정책 변경 — 카드 폭이 너무 좁아 값이
   * ellipsis 로 잘려 ("5..", "+2..") 정보 가치 없음. 2-col 로 폭 2배 확보 →
   * 게이지+값 / 큰 숫자+델타 모두 자연스럽게 한 줄. packages/ui globals.css
   * 의 2-col 기본값과 일치. */
  .market-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .market-metrics-grid > * { min-width: 0; }
  /* 카드 padding/SVG 사이즈/폰트는 데스크톱 기본값 사용 — 2-col 폭에서 충분. */

  /* 2026-05-16 (PR #98 follow-up): 모바일 시장 현황 fine-tune.
   *  - 게이지 카드 (BTC/ETH 도미넌스): 게이지 SVG | 값 가로 → SVG 위 / 값 아래
   *    1줄 column 레이아웃. 모바일 2-col 카드 폭이 좁아 게이지 옆 값 영역이
   *    18~20px 만 남아 큰 숫자가 자릿수마다 wrap 되던 회귀 차단.
   *  - 시가총액 delta(+x.x% / 24h) 숨김: 같은 그리드의 24H 거래량 / 활성 코인 수
   *    / USD-KRW 와 동일하게 '라벨 + 큰 값' 2줄 카드로 통일. */
  .market-metrics-grid .gauge-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .market-metrics-grid .number-metric-delta {
    display: none !important;
  }

  /* v4 — AI 시그널 통계 카드 4종 (승률/진행 중/TP hit/SL hit) 모바일 4-col.
     데스크톱 inline minmax(140px,1fr) 은 모바일 viewport 에선 1 card per row
     → 우측 빈 공간. repeat(4,1fr) 강제 + 폰트 축소로 한 줄 4 카드. */
  .signal-stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .signal-stats-grid > * {
    min-width: 0 !important;
    overflow: hidden;
  }
  .signal-stats-grid .card-surf { padding: 8px 6px !important; }
  /* StatCard 의 큰 숫자 div (label-value-sub 중 2번째 자식). */
  .signal-stats-grid .card-surf > div:nth-child(2) {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .signal-stats-grid .card-surf > div:first-child,
  .signal-stats-grid .card-surf > div:last-child {
    font-size: 9px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* v3 — AI 시그널 카드 Entry/TP/SL 한 줄 (이전: SL 별도 줄로 wrap).
     flex-wrap nowrap + 가로 스크롤 fallback + 폰트 축소. */
  .signal-card-prices {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    font-size: 11px !important;
    overflow-x: auto;
    white-space: nowrap;
    /* 모바일 스크롤바 숨김 — 시각 정리. iOS Safari 는 자동 숨김. */
    scrollbar-width: none;
  }
  .signal-card-prices::-webkit-scrollbar { display: none; }
  .signal-card-prices > * { flex-shrink: 0; }

  /* v3 — "📷 1 📝 인사이트 · 클릭해서 자세히 보기" footer 한 줄. */
  .signal-card-footer {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px !important;
    gap: 6px !important;
  }
  .signal-card-footer > * { flex-shrink: 0; }

  .topbar-description { display: none; }

  /* v3 — TickerStrip 모바일 marquee. COINS 배열 2번 복제 → translateX -50%
     로 half-cycle 완료 시 시작점과 동일 → seamless loop. */
  .ticker-strip-marquee {
    display: flex !important;
    width: -moz-max-content;
    width: max-content; /* 자식 크기 합산만큼만 — translate 계산 일관 */
    animation: tickerStripMarquee 30s linear infinite;
    will-change: transform;
  }
  @keyframes tickerStripMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* 더 작은 폰 (≤ 374px, iPhone SE 1세대 등) — 폰트/btn 추가 축소.
 * 2026-05-15: 시장 현황은 2-col 로 카드 폭 충분 → SVG/폰트/padding override 제거. */
@media (max-width: 374px) {
  .hero h1 { font-size: 18px !important; }
  h1 { font-size: 19px; }
  .btn { padding: 7px 10px; font-size: 12px; }
}