/* ═══════════════════════════════════════════════════════════
   Startup Search — Design System
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ═══ v1.2 Pathfinder Tokens (Figma PFDR_v2.0_260315) ═══ */
  /* 기본 = 라이트 테마. 다크는 아래 :root[data-theme="dark"] 블록이 오버라이드.
     NOTE: 일부 토큰명이 다크 시절 명명이라 의미와 어긋남:
       --text-on-dark = 페이지 본문 텍스트(라이트=거의 검정, 다크=흰색)
       --surface-bg   = 페이지 배경
     호환을 위해 이름은 유지한다. */

  /* Surface */
  --surface-bg: #f4f5f7; /* page background */
  --surface-panel: #ffffff; /* section panels */
  --surface-card: #fff; /* 흰 표면(드롭다운/입력/칩 등) — 양 테마 흰색 유지 */
  --surface-card-hover: #f4f4f8;
  --surface-input: #fff;
  --surface-overlay: rgba(0, 0, 0, 0.45); /* modal backdrop */
  --surface-dropdown: #fff;
  --surface-result-card: #fff; /* 결과 카드 배경 (라이트 흰 / 다크 #444) */
  --surface-card-elevated: #ffffff; /* 스냅샷/PIN 모달 흰 표면(헤더·카드) */
  --surface-elevated-subtle: #f6f6f8; /* 모달 베이스·옅은 중첩 표면 */

  /* Text on page background */
  --text-on-dark: #1f1f24;
  --text-on-dark-secondary: #52535e;
  --text-on-dark-muted: #7c7d88;

  /* Card / elevated-surface foreground (테마 전환) */
  --card-fg: #1f1f24;
  --card-fg-secondary: #52535e;
  --card-border: rgba(0, 0, 0, 0.12);
  --card-divider: rgba(0, 0, 0, 0.08);

  /* Pill button on card surface (View More 등) — 양 테마에서 가독 보장 */
  --pill-bg: #eceef2;
  --pill-bg-hover: #dfe2e8;
  --pill-fg: #42434d;

  /* GNB-specific */
  --gnb-bg: #ffffff;
  --gnb-tab-text: #8a8b95; /* inactive tab label */
  --gnb-tab-text-active: #1f1f24;
  --gnb-tab-text-hover: #42434d;
  --gnb-tab-text-disabled: #c2c3cb;
  --gnb-tab-active-border: #9045f8; /* 3px bottom border */
  --gnb-util-bg: #eceef2; /* utility pill bg */
  --gnb-util-bg-hover: #dfe2e8;
  --gnb-util-text: #42434d;
  --gnb-util-radius: 12px; /* pill radius */
  --gnb-icon: #5b5c66;
  --gnb-border: #d5d5d8; /* 흰 GNB 하단 구분선 (라이트) */
  --gnb-logo: #1f1f24; /* 라이트: 다크 그레이 워드마크 (흰 GNB 위 가독) */

  /* Text (on white card surfaces — 양 테마 동일) */
  --text-primary: #1f1f24;
  --text-secondary: #444;
  --text-muted: #666;
  --text-disabled: #aaa;

  /* Brand (v1.2) — 테마 무관 */
  --brand-industry: #9045f8;
  --brand-tech: #00acc8;
  --brand-ai-glow: #00d9a6;
  --accent: var(--brand-industry);
  --accent-glow: rgba(144, 69, 248, 0.28);
  --accent-soft: rgba(144, 69, 248, 0.14);

  /* Semantic tags (Figma: industry blue / tech green) — 테마 무관 */
  --tag-industry-bg: rgba(60, 128, 247, 0.14);
  --tag-industry-fg: #1e5dc7;
  --tag-tech-bg: rgba(0, 199, 92, 0.14);
  --tag-tech-fg: #008a3f;

  /* Legacy semantic (kept for compat with existing rules) — 테마 무관 */
  --green: #00c75c;
  --amber: #f59e0b;
  --rose: #e11d48;
  --cyan: var(--brand-tech);

  /* Border */
  --border-subtle: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);
  --divider: rgba(0, 0, 0, 0.12);

  /* Theme-aware hover/border/scrollbar on page bg + focus ring */
  --hover-on-page: rgba(0, 0, 0, 0.06);
  --border-on-page: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb: rgba(0, 0, 0, 0.18);
  --focus-ring: #9045f8;
  --page-active-bg: #9045f8; /* 활성 페이지 버튼 (라이트=솔리드, 흰 글자 대비) */
  --search-border: rgba(0, 0, 0, 0.14); /* 히어로 검색박스 테두리 */
  --search-focus: rgba(144, 69, 248, 0.2); /* 검색박스 포커스 글로우 */
  --segment-track: #eceef2; /* 세그먼트 컨트롤(데이터셋/모드) 트랙 */
  --segment-active: #ffffff; /* 세그먼트 활성 pill */

  /* Hero title gradient */
  --title-gradient: linear-gradient(135deg, #1f1f24, #4a4d63);

  /* Radius — 테마 무관 */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.1);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.14);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* Typography — 테마 무관 */
  --font-sans:
    "Pretendard Variable", "Pretendard", "Inter", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-serif: "Charis SIL", "Inter", serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ═══ Legacy aliases (preserved so existing rules keep working) ═══ */
  --bg-primary: var(--surface-bg);
  --bg-secondary: var(--surface-panel);
  --bg-card: var(--surface-card);
  --bg-card-hover: var(--surface-card-hover);
  --bg-input: var(--surface-input);
  --border: var(--border-subtle);
  --border-hover: var(--border-strong);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --font: var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════
   Dark theme overrides — 기존 v1.2 다크 값 보존
   (값이 라이트와 다른 토큰만 재정의; 브랜드·라디우스·폰트·태그는 공유)
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* Surface */
  --surface-bg: #333333;
  --surface-panel: #2a2a2a;
  --surface-overlay: rgba(0, 0, 0, 0.65);
  --surface-result-card: #444; /* 결과 카드 (현행 다크 유지) */
  --surface-card-elevated: #2a2b30; /* 모달 흰 표면 → 다크 (살짝 밝게 pop) */
  --surface-elevated-subtle: #202126; /* 모달 베이스 → 더 어둡게 */

  /* Text on dark page background */
  --text-on-dark: #ffffff;
  --text-on-dark-secondary: #d7d7d7;
  --text-on-dark-muted: #9a9a9a;

  /* Card / elevated-surface foreground */
  --card-fg: #ffffff;
  --card-fg-secondary: #bcbcbc;
  --card-border: #666;
  --card-divider: #666;

  /* Pill button on card surface (View More 등) — 다크: 흰 pill */
  --pill-bg: #fff;
  --pill-bg-hover: #f4f4f8;
  --pill-fg: #444;

  /* GNB-specific (Figma node 255:80842 — solid #444 bar) */
  --gnb-bg: #444;
  --gnb-tab-text: #888;
  --gnb-tab-text-active: #fff;
  --gnb-tab-text-hover: #c0c0c0;
  --gnb-tab-text-disabled: #6b6b6b;
  --gnb-tab-active-border: #f4f4f8;
  --gnb-util-bg: #666;
  --gnb-util-bg-hover: #757575;
  --gnb-util-text: #d7d7d7;
  --gnb-icon: #d7d7d7;
  --gnb-border: transparent; /* 다크는 현행대로 보더 없음 */
  --gnb-logo: #ffffff; /* 다크: 흰 워드마크 (어두운 GNB 위 가독) */

  /* Border */
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --divider: rgba(0, 0, 0, 0.1);

  /* Theme-aware hover/border/scrollbar on page bg + focus ring */
  --hover-on-page: rgba(255, 255, 255, 0.1);
  --border-on-page: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb: rgba(255, 255, 255, 0.18);
  --focus-ring: #fff;
  --page-active-bg: rgba(144, 69, 248, 0.32); /* 현행 다크 반투명 유지 */
  --search-border: #fff; /* 현행 다크 흰 링 유지 */
  --search-focus: rgba(255, 255, 255, 0.12);
  --segment-track: #444; /* 현행 다크 트랙 */
  --segment-active: #666; /* 현행 다크 활성 pill */

  /* Hero title gradient */
  --title-gradient: linear-gradient(135deg, #ffffff, #c4cadf);

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 30px var(--accent-glow);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-width: 1200px;
  overflow-x: auto;
}

body {
  font-family: var(--font);
  background: var(--surface-bg);
  color: var(--text-on-dark);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════
   v1.2 GNB (Global Nav Bar)
   Figma: PFDR_v2.0_260315 node 255:80842 (Container 1920×58)
     - Solid bg #444, no border, no blur
     - Inner: justify-between with px-360 py-10 on 1920px → max-content 1200px
     - Tabs: Charis SIL 18px, inactive #888, active #fff with #f4f4f8 3px bottom border
     - Utility pills: bg #666, text #d7d7d7 14px Pretendard, rounded 12px, h-24
   ═══════════════════════════════════════════════════════ */

.gnb {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gnb-bg);
  border-bottom: 1px solid var(--gnb-border);
}

.gnb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  /* Figma uses px-[360px] on 1920w canvas → inner content is 1200px wide.
       We approximate with max-width 1200px + auto margin for narrower viewports. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Left: logo ── */

.gnb-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  height: 23px;
}

.gnb-logo-mark {
  height: 23px;
  width: 144px;
  display: block;
  /* SVG를 mask로 사용해 테마 토큰(--gnb-logo)이 색을 결정.
     외부 <img src="...svg">의 fill=currentColor는 브라우저가 무시하므로
     mask-image + background-color 패턴이 필요하다 (CLAUDE.md SVG 렌더 규약). */
  background-color: var(--gnb-logo);
  -webkit-mask: url(/static/pathfinder-logo-gnb.svg) center / contain no-repeat;
          mask: url(/static/pathfinder-logo-gnb.svg) center / contain no-repeat;
}

/* legacy gnb-logo-text rule preserved as no-op (no element uses it now) */
.gnb-logo-text {
  display: none;
}

/* ── Right group (tabs + utils) ── */

.gnb-right {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Tabs (Landscape / Ask / Track) — 3 × 150px wide ── */

.gnb-tabs {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.gnb-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 58px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  box-sizing: border-box;
}

.gnb-tab-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gnb-tab-icon {
  width: 16px;
  height: 16px;
  color: var(--gnb-tab-text);
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.gnb-tab-label {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;
  color: var(--gnb-tab-text);
  transition: color 0.15s ease;
  white-space: nowrap;
}

.gnb-tab:hover:not(.disabled):not(.active) .gnb-tab-icon,
.gnb-tab:hover:not(.disabled):not(.active) .gnb-tab-label {
  color: var(--gnb-tab-text-hover);
}

.gnb-tab.active {
  border-bottom-color: var(--gnb-tab-active-border);
}

.gnb-tab.active .gnb-tab-icon,
.gnb-tab.active .gnb-tab-label {
  color: var(--gnb-tab-text-active);
}

.gnb-tab.disabled {
  cursor: default;
}

.gnb-tab.disabled .gnb-tab-icon,
.gnb-tab.disabled .gnb-tab-label {
  color: var(--gnb-tab-text-disabled);
}

/* ── Utilities (Guide pill / Globe pill / User icon) ── */

.gnb-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Pill (Guide / Globe) — bg #666, h-24, rounded-12, gap-2, pl-2.
   Wrapper is a <div role="button">. Inner trigger holds icon+label+chev so the dropdown
   can sit as a sibling without HTML nesting violations. */
.gnb-util {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  background: var(--gnb-util-bg);
  border: none;
  border-radius: var(--gnb-util-radius);
  color: var(--gnb-util-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.gnb-util:hover {
  background: var(--gnb-util-bg-hover);
}
.gnb-util:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gnb-util-trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 0 6px 0 4px;
}

.gnb-util-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gnb-icon);
}

.gnb-util-label {
  padding: 0 2px;
  color: var(--gnb-util-text);
  font-weight: 400;
}

.gnb-util-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gnb-icon);
}

/* Dropdown menu (revealed on hover, sits on white surface for legibility) */
.gnb-util-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  background: var(--surface-dropdown);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  z-index: 110;
}

.gnb-util:hover .gnb-util-menu,
.gnb-util.open .gnb-util-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gnb-util-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  color: var(--card-fg);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.1s ease,
    color 0.1s ease;
  white-space: nowrap;
}

.gnb-util-item:hover {
  background: var(--surface-card-hover);
  color: var(--card-fg);
}
.gnb-util-item.active {
  color: var(--brand-industry);
  font-weight: 600;
}

/* User icon — 24×24, no pill background */
.gnb-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  color: var(--gnb-icon);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.gnb-user:hover {
  color: var(--gnb-tab-text-active);
}

.gnb-user svg {
  width: 24px;
  height: 24px;
}

/* ── Theme toggle (sun/moon) — icon swap driven by data-theme ── */
.gnb-theme-toggle {
  color: var(--gnb-icon);
}
.gnb-theme-toggle:hover {
  color: var(--gnb-tab-text-active);
}
.gnb-theme-toggle svg {
  width: 20px;
  height: 20px;
}
/* Light (default): show moon (→ click to go dark); hide sun */
.theme-icon-sun {
  display: none;
}
.theme-icon-moon {
  display: inline-block;
}
/* Dark: show sun (→ click to go light); hide moon */
:root[data-theme="dark"] .theme-icon-sun {
  display: inline-block;
}
:root[data-theme="dark"] .theme-icon-moon {
  display: none;
}

/* Header stats (legacy hookup, hidden in v1.2) */
.gnb-stats {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   Legacy header classes (preserved to avoid breaking any
   other pages like /login that still reference them)
   ═══════════════════════════════════════════════════════ */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-overlay);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-img {
  height: 28px;
  width: auto;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.logo-text {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lang-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface-input);
  border-radius: var(--r-sm);
  padding: 2px;
  border: 1px solid var(--border-subtle);
}
.lang-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
  font-family: var(--font-sans);
}
.lang-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}
.lang-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 8px rgba(144, 69, 248, 0.15);
}
.header-stats {
  font-size: 13px;
  color: var(--text-muted);
}

/* Japanese font fallback */
html[lang="ja"] {
  --font-sans: "Noto Sans JP", "Pretendard", "Inter", -apple-system, sans-serif;
  --font: var(--font-sans);
}

/* ── Main ──────────────────────────────────────────────── */

.main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0px 20px 80px;
}

/* ═══════════════════════════════════════════════════════
   v1.2 Ask — Hero + Dataset + Search + Controls
   Figma: PFDR_v2.0_260315 nodes 249:59727 → 249:59783
   ═══════════════════════════════════════════════════════ */

.ask-section {
  display: block;
}

/* ── Hero (Figma 257:84020 + 257:83994)
     Break out of .main's max-width to render the screenshot bg full-width.
     Background image (hero-bg.png) sits behind text with mix-blend-screen
     to brighten the #333 page bg subtly — matches Pathfinder signals page. */

.ask-section .ask-hero {
  position: relative;
  overflow: hidden;
  /* Full-width breakout that never shrinks below 1200px (matches body min-width) */
  width: max(100vw, 1200px);
  margin-left: calc(50% - max(50vw, 600px));
  margin-right: calc(50% - max(50vw, 600px));
  /* Hero stage — Figma mask 1920×462 (257:84020); content container (257:83994) sits at y=58, height 300 */
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* Hero background image — sibling of text inside .ask-hero, matches
   fdi-native-mark-v2/src/components/v1.2/HeroSection.tsx (pathfinder) which uses
   <Image fill className="object-cover object-center" /> directly inside the hero
   container. Image fills .ask-hero via absolute inset:0 and stays
   proportionally centered regardless of viewport width.
   SVG alpha mask (α=0.3 → 0 top-to-bottom) + mix-blend-mode: screen reproduce
   the Figma 257:84020/325:19783 fade so the hero image blends naturally into
   the #333 page background at the bottom edge. */
.ask-section .ask-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* 에셋은 '검은 배경 + 흰 선' 구조(다크 전용).
     Light: invert(흰 선→검은 선, 검은 배경→흰 배경) 후 multiply로 흰 배경을 날리고
            검은 선만 라이트 페이지에 얹는다. Dark: screen으로 검은 배경을 날리고 흰 선을 띄운다. */
  mix-blend-mode: multiply;
  filter: invert(1);
  -webkit-mask-image: url("/static/hero-bg.svg");
  mask-image: url("/static/hero-bg.svg");
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root[data-theme="dark"] .ask-section .ask-hero-bg {
  mix-blend-mode: screen;
  filter: none;
}

.ask-section .ask-hero > :not(.ask-hero-bg) {
  position: relative;
  z-index: 1;
}

.ask-section .ask-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.02;
  font-weight: 700;
  color: var(--text-on-dark);
  margin: 0;
}

.ask-section .ask-heading-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  /* mask + currentColor so the sparkle follows the heading text color per theme */
  background-color: currentColor;
  -webkit-mask: url("/static/ask-sparkle.svg") no-repeat center / contain;
  mask: url("/static/ask-sparkle.svg") no-repeat center / contain;
}

.ask-section .ask-heading-text {
  letter-spacing: -0.5px;
}

.ask-section .ask-prompt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-on-dark);
  margin: 4px 0 0;
}

.ask-section .ask-description-wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.ask-section .ask-description {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-on-dark-secondary);
  margin: 0;
}

/* 히어로 텍스트 그림자는 이미지가 어두운 다크 모드에서만 (라이트는 밝은 배경이라 어색) */
:root[data-theme="dark"] .ask-section .ask-heading {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .ask-section .ask-prompt {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .ask-section .ask-description {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* ── Row container (centers 800px-wide modules) ── */

.ask-section .ask-row {
  display: flex;
  justify-content: center;
  margin: 25px 0;
}

.ask-row-narrow .detail-filters {
  /* Align under ask-controls-mode column: outer 825px (ask-controls), inner 432px (mode column) */
  width: 825px;
  max-width: 100%;
  padding-right: 393px;
  box-sizing: border-box;
}

/* Figma gap-[12px]: collapse with mode-bar row's 25px bottom margin → 25 - 13 = 12 */
.ask-section .ask-row:has(> .detail-filters) {
  margin-top: -13px;
}

.ask-section .ask-row-narrow .ask-enhancement {
  width: 800px;
  max-width: 100%;
}

/* ── Dataset toggle (Figma 255:80920 — Overlay+OverlayBlur #444, 5 × 165px pills) ── */

.ask-section .ask-dataset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  background: var(--segment-track);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 22px;
  max-width: 100%;
}

.ask-section .ask-pill {
  flex: 0 0 165px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 18px;
  color: var(--text-on-dark-muted);
  font-family: "Pretendard", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 18.85px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.ask-section .ask-pill:hover:not(.active) {
  color: var(--text-on-dark-secondary);
}

.ask-section .ask-pill.active {
  background: var(--segment-active);
  color: var(--text-on-dark);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.ask-section .ask-pill-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ask-section .ask-pill[data-dataset="global"] .ask-pill-icon {
  -webkit-mask-image: url("/static/tab-icons/global-startup.svg");
  mask-image: url("/static/tab-icons/global-startup.svg");
}
.ask-section .ask-pill[data-dataset="kr_startup"] .ask-pill-icon {
  -webkit-mask-image: url("/static/tab-icons/korean-startup.svg");
  mask-image: url("/static/tab-icons/korean-startup.svg");
}
.ask-section .ask-pill[data-dataset="kr_rnd"] .ask-pill-icon {
  -webkit-mask-image: url("/static/tab-icons/korean-rnd.svg");
  mask-image: url("/static/tab-icons/korean-rnd.svg");
}
.ask-section .ask-pill[data-dataset="cross_kr"] .ask-pill-icon,
.ask-section .ask-pill[data-dataset="cross_global"] .ask-pill-icon {
  -webkit-mask-image: url("/static/tab-icons/cross-arrow.svg");
  mask-image: url("/static/tab-icons/cross-arrow.svg");
}

.ask-section .ask-pill-label {
  font-size: 13px;
  line-height: 18.85px;
  text-align: center;
}

/* ── Search row (Figma 255:80948 View Taxonomy + 255:80951 Search bar — 1198px) ── */

.ask-section .ask-search-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 1200px;
  max-width: 100%;
}

/* View Taxonomy pill (Figma 255:80948 — white bg, #444 icon/text, 22px radius) */
.ask-section .view-taxonomy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 159px;
  height: 38px;
  padding: 3px 6px;
  background: #fff;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #444;
  font-family: "Pretendard", var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 18.85px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.ask-section .view-taxonomy:hover {
  background: #f4f4f8;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}

.ask-section .view-taxonomy-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background-color: currentColor;
  -webkit-mask-image: url("/static/tab-icons/view-taxonomy.svg");
  mask-image: url("/static/tab-icons/view-taxonomy.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ask-section .view-taxonomy-label {
  padding: 0 4px;
}

/* Search bar (Figma 255:80951 — #444 bg, white border, sparkle icon, white submit pill) */
.ask-section .ask-search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 38px;
  padding: 4px 7px;
  background: var(--surface-result-card);
  border: 1px solid var(--search-border);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: box-shadow 0.15s ease;
}

.ask-section .ask-search:focus-within {
  box-shadow: 0 0 0 3px var(--search-focus);
}

.ask-section .ask-search-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.ask-section .ask-search-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin: 0;
}

.ask-section .ask-search-sparkle {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--card-fg);
  -webkit-mask-image: url("/static/tab-icons/search-sparkle.svg");
  mask-image: url("/static/tab-icons/search-sparkle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ask-section .ask-search-input {
  flex: 1 1 auto;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--card-fg);
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  padding: 0;
  min-width: 0;
}

.ask-section .ask-search-input::placeholder {
  color: #666;
  font-weight: 400;
}

.ask-section .ask-search-btn {
  flex: 0 0 151px;
  height: 25px;
  padding: 3px 25px 5px;
  background: var(--accent);
  border: none;
  border-radius: 12.5px;
  color: #fff;
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 16.8px;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.ask-section .ask-search-btn:hover {
  background: #7d2ff0;
  color: #fff;
}
.ask-section .ask-search-btn:active {
  transform: scale(0.97);
}

/* 다크: 현행 흰 pill 버튼 유지 */
:root[data-theme="dark"] .ask-section .ask-search-btn {
  background: #fff;
  color: #666;
}
:root[data-theme="dark"] .ask-section .ask-search-btn:hover {
  background: #f4f4f8;
  color: #444;
}

/* ── Mode + Settings + Context AI bar (Figma 255:80965 — 825×55) ── */

.ask-section .ask-controls {
  display: inline-flex;
  align-items: stretch;
  width: 825px;
  max-width: 100%;
  min-height: 55px;
  padding: 0;
  padding-right: 33px; /* Figma 255:81011 trailing margin */
  background: transparent;
  border-radius: 0;
}

.ask-section .ask-controls-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.ask-section .ask-controls-mode {
  flex: 0 0 432px;
  min-width: 0;
}
.ask-section .ask-controls-settings {
  flex: 0 0 218px;
}
.ask-section .ask-controls-ai {
  flex: 0 0 auto;
}

.ask-section .ask-controls-label {
  font-family: "Pretendard", var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* Vertical divider: 1px × 55px, #666, 16px h-margin (Figma 255:80978 / 255:81002) */
.ask-section .ask-controls-divider {
  display: block;
  flex: 0 0 auto;
  width: 1px;
  height: 55px;
  background: var(--card-divider);
  margin: 0 16px;
  align-self: center;
}

/* ── Mode pills (Figma 255:80970-75 — 16px radius, 17px/6px padding) ── */

.ask-section .ask-mode-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.ask-section .ask-mode-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 29px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  color: var(--text-on-dark-muted);
  font-family: "Pretendard", var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 16.8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}

.ask-section .ask-mode-tab:hover:not(.active) {
  color: var(--text-on-dark-secondary);
  border-color: var(--card-fg-secondary);
}

.ask-section .ask-mode-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
}

/* 다크: 현행 #444 채움 + 흰 글자 유지 */
:root[data-theme="dark"] .ask-section .ask-mode-tab.active {
  background: #444;
  border-color: #888;
  color: #fff;
}

/* ── Settings dropdown pills (Figma 255:80985/80993 — 14px radius, 29px tall) ── */

.ask-section .ask-settings-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

.ask-section .ask-controls-settings .ask-select-pill {
  flex: 1 1 0;
  min-width: 0;
}

.ask-section .ask-select-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 29px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  color: var(--text-on-dark);
  font-family: "Pretendard", var(--font-sans);
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.ask-section .ask-select-pill:hover {
  border-color: var(--card-fg-secondary);
}

/* "Score:" / "Result:" prefix — purely decorative overlay so it doesn't block clicks */
.ask-section .ask-select-key {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-on-dark-muted);
  font-weight: 400;
  margin-right: 0;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

/* Native <select> fills the ENTIRE pill so hover area == click area */
.ask-section .ask-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  inset: 0;
  background: transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path d='M1 1 L4 4 L7 1' stroke='%23666' stroke-width='1.2' fill='none'/></svg>")
    no-repeat right 12px center / 8px 5px;
  border: none;
  color: var(--text-on-dark);
  font-family: "Pretendard", var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 16.8px;
  cursor: pointer;
  outline: none;
  width: 100%;
  height: 100%;
  /* left padding reserves room for the absolutely positioned key label ("Score:"/"Result:") */
  padding: 0 26px 0 56px;
  margin: 0;
  min-width: 0;
}

.ask-section .ask-select option {
  background: var(--surface-dropdown);
  color: var(--text-primary);
}

/* ── Context AI toggle (Figma 255:81007-10 — 14px radius pill, masked icon + "AI Off") ── */

.ask-section .ask-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 6px 12px 6px 13px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  color: var(--text-on-dark-muted);
  font-family: "Pretendard", var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 16.8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}

.ask-section .ask-ai-toggle:hover:not(.active):not(.ai-on) {
  color: var(--text-on-dark-secondary);
  border-color: var(--card-fg-secondary);
}

.ask-section .ask-ai-toggle.active,
.ask-section .ask-ai-toggle.ai-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* 다크: 현행 #444 채움 + 흰 글자 유지 */
:root[data-theme="dark"] .ask-section .ask-ai-toggle.active,
:root[data-theme="dark"] .ask-section .ask-ai-toggle.ai-on {
  background: #444;
  border-color: #888;
  color: #fff;
}

.ask-section .ask-ai-toggle .ask-ai-icon {
  width: 15px;
  height: 13px;
  flex: 0 0 15px;
  background-color: currentColor;
  -webkit-mask-image: url("/static/tab-icons/context-ai.svg");
  mask-image: url("/static/tab-icons/context-ai.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ask-section .ask-ai-toggle .ask-ai-prefix,
.ask-section .ask-ai-toggle .ask-ai-state {
  display: inline;
}

/* ── Detail Search Filters (Figma 249:63675) ── */

.ask-section .detail-filters {
  display: none;
  gap: 7px;
  align-items: flex-start;
}

.ask-section .detail-filters.show {
  display: flex;
  animation: askFilterSlide 0.18s ease;
}

@keyframes askFilterSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ask-section .detail-filter-select {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: 29px;
  padding: 6px 24px 6px 10px;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 10 10'><path d='M1 3.5 L5 7 L9 3.5' stroke='%23888888' stroke-width='1.4' fill='none'/></svg>")
    no-repeat right 10px center / 8px 8px;
  border: 1px solid #d5d5d8;
  border-radius: 14px;
  color: #888;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16.8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ask-section .detail-filter-select:hover {
  border-color: var(--accent);
}
.ask-section .detail-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ask-section .detail-filter-select option {
  background: #fff;
  color: #222;
}

/* ── AI enhancement info panel (when toggle ON, populated by app.js) ──
   Figma 249:62330 기반 — 흰 배경 + #d5d5d8 hairline + radius 14 구조를
   다크 팔레트로 치환(raise overlay + rgba hairline). 색/그라데이션 장식 제거. */

.ask-section .ask-enhancement {
  background: var(--hover-on-page);
  border: 1px solid var(--border-on-page);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--text-on-dark-secondary);
  font-size: 13px;
  margin-top: 6px;
}

/* ── Search Section ────────────────────────────────────── */

.search-section {
  padding: 48px 0 32px;
  text-align: center;
}

.search-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.hero-logo {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.3));
}

.search-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
  background: var(--title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0;
}

.search-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.search-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 4px 6px 4px 16px;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.search-input-wrap:focus-within {
  border-color: rgba(108, 99, 255, 0.4);
}

.search-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text-primary);
  padding: 12px 0;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-btn {
  padding: 10px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.search-btn:hover {
  background: #7b73ff;
  box-shadow: 0 0 20px var(--accent-glow);
}

.search-btn:active {
  transform: scale(0.97);
}

/* ── Mode Tabs ─────────────────────────────────────────── */

.mode-tabs {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.mode-tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-tab:hover {
  background: var(--bg-card);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.mode-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.mode-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.mode-bar .mode-tabs {
  flex: 1;
  margin-top: 0;
}

.topk-select {
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  min-width: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235a5f72' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

.topk-select:focus {
  border-color: var(--accent);
}

/* ── Filters ───────────────────────────────────────────── */

.filters-panel {
  display: none;
  margin-top: 14px;
  animation: slideDown 0.2s ease;
}

.filters-panel.show {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-row {
  display: flex;
  gap: 8px;
}

.filter-select {
  flex: 1;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235a5f72' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-select:focus {
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   v1.2 Results — Tabs + Meta + Card + Pagination
   Figma: PFDR_v2.0_260315 nodes 249:59831 → 249:60091
   ═══════════════════════════════════════════════════════ */

.ask-results {
  width: 1200px;
  max-width: 100%;
  margin: 24px auto 0;
}

/* ── Result Tabs (Figma 255:81013 — 4 × 300px, per-tab bottom border) ── */

.ask-results .ask-result-tabs {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  border-bottom: none;
  background: transparent;
  padding: 0;
  gap: 0;
}

/* Figma 249:61659 — inactive 탭 #cdcdd0 톤, active 탭 #fff */
.ask-results .ask-result-tab {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-on-page);
  color: var(--text-on-dark-muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
  text-align: center;
  user-select: none;
}

.ask-results .ask-result-tab:hover:not(.active) {
  color: var(--text-on-dark-secondary);
}

.ask-results .ask-result-tab.active {
  color: var(--text-on-dark);
  border-bottom: 1.5px solid var(--gnb-tab-active-border);
}

.ask-results .ask-result-tab-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ask-results .ask-result-tab-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ask-results .ask-result-tab-icon[data-icon="results"] {
  -webkit-mask-image: url("/static/tab-icons/tab-results.svg");
  mask-image: url("/static/tab-icons/tab-results.svg");
}
.ask-results .ask-result-tab-icon[data-icon="insight"] {
  -webkit-mask-image: url("/static/icons/ai-sparkle.svg");
  mask-image: url("/static/icons/ai-sparkle.svg");
}
.ask-results .ask-result-tab-icon[data-icon="investor"] {
  -webkit-mask-image: url("/static/tab-icons/tab-investors.svg");
  mask-image: url("/static/tab-icons/tab-investors.svg");
}
.ask-results .ask-result-tab-icon[data-icon="startup"] {
  -webkit-mask-image: url("/static/tab-icons/tab-startups.svg");
  mask-image: url("/static/tab-icons/tab-startups.svg");
}

.ask-results .ask-result-tab-title {
  font-family: "Charis SIL", var(--font-serif), serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: inherit;
  white-space: nowrap;
}

.ask-results .ask-result-tab-sub {
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 14.5px;
  color: inherit;
  text-align: center;
  white-space: nowrap;
}

/* ── Meta row (Search RESULT count / DOWNLOAD CSV) ── */

.ask-results .ask-results-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 12px;
}

/* Figma 249:61694 / 249:61691 / 249:61697 — uppercase meta label (#888 톤, 10px, tracking 2px) */
.ask-results .ask-meta-key {
  font-family: "Pretendard", var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 14px;
  margin-right: 8px;
}

/* Figma 249:61695 — count value (Pretendard Medium 16px) */
.ask-results .ask-meta-value {
  font-family: "Pretendard", var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-on-dark);
}

.ask-results .ask-meta-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-on-dark-muted);
  margin-left: 12px;
}

/* Figma 249:61699 — CSV Down 버튼 (흰색 pill 110×auto, radius 14px, border #d5d5d8) */
.ask-results .ask-csv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 110px;
  padding: 6px 12px 6px 13px;
  background: #fff;
  border: 1px solid #d5d5d8;
  border-radius: 14px;
  color: #444;
  font-family: "Pretendard", var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 16.8px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.ask-results .ask-csv-btn:hover {
  background: #f4f4f8;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
}

.ask-results .ask-csv-btn svg {
  width: 12px;
  height: 12px;
  stroke: #444;
}

/* ── Results list area ── */

.ask-results .ask-results-list {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma 249:61705 — 카드 사이 20px */
}

/* Figma 249:61705 — Related K-Startups 추천 카드 리스트 (카드 사이 20px) */
#recommendSnapshots {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}

/* ── Result card (Figma 255:81061 — dark #444 on #666, 1200×auto, 2-col 425/712) ── */

.ask-results .result-card.ask-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--surface-result-card);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  padding: 24px;
  margin: 0;
  cursor: default;
  /* Neutralize base .result-card's `transition: all 0.2s` */
  transition: none;
}

/* Hide base .result-card's left accent bar */
.ask-results .result-card.ask-card::before {
  display: none;
}

/* Neutralize base .result-card:hover (bg / border / transform / shadow) */
.ask-results .result-card.ask-card:hover {
  background: var(--surface-result-card);
  border-color: var(--card-border);
  transform: none;
  box-shadow: none;
}

.ask-card-left {
  flex: 0 0 425px;
  padding: 0;
  border-right: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ask-card-id {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ask-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6c7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard", var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
  flex-shrink: 0;
  user-select: none;
}

.ask-card-id-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ask-card-name {
  font-family: "Pretendard", var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--card-fg);
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ask-card-country {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--card-fg);
  letter-spacing: -0.28px;
  line-height: normal;
}

/* Horizontal hairline between identity and taxonomy (Figma 255:81070) */
.ask-card-tax-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.ask-card-tax-block::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--card-divider);
  margin-bottom: 4px;
}
.ask-card-tax-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

/* Industry / Tech pills — solid color, 47×17 fixed, capitalize, Pretendard SemiBold 8/12, white */
.ask-card-tax-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 17px;
  padding: 0;
  border-radius: 4px;
  font-family: "Pretendard", var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  line-height: 12px;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #fff;
  margin-top: 1px;
}

.ask-card-tax-badge.industry {
  background: #9045f8;
  color: #fff;
}
.ask-card-tax-badge.tech {
  background: #00acc8;
  color: #fff;
}

.ask-card-tax-path {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: var(--card-fg-secondary);
  word-break: keep-all;
  flex: 1 1 auto;
  min-width: 0;
}

.ask-card-tax-arrow {
  color: var(--card-fg-secondary);
  margin: 0 4px;
  font-weight: 400;
}

.ask-card-right {
  flex: 1 1 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Metrics row — Match Score + Recent Investment + View More (right-aligned) */
.ask-card-metrics {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 44px;
}

.ask-card-metric {
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: flex-end;
  min-width: 0;
}

.ask-card-metric-label {
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--card-fg);
  text-transform: none;
  letter-spacing: -0.24px;
  line-height: normal;
  white-space: nowrap;
}

.ask-card-metric-value {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--card-fg);
  letter-spacing: -0.28px;
  line-height: normal;
}

.ask-card-invest {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}

.ask-card-invest-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--card-fg);
  letter-spacing: -0.28px;
  line-height: normal;
  flex-wrap: wrap;
}

.ask-card-invest-sep {
  width: 1px;
  height: 17px;
  background: var(--card-divider);
  flex-shrink: 0;
}
.ask-card-invest .ask-card-invest-investors {
  color: var(--card-fg);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ask-card-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* View More (Figma 255:81096 — white pill 110×auto, 6/15 padding, 16px radius, #444 text) */
.ask-card-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  padding: 6px 15px;
  background: var(--pill-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  color: var(--pill-fg);
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.ask-card-view-more:hover {
  background: var(--pill-bg-hover);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
}

.ask-card-divider {
  height: 1px;
  background: var(--card-divider);
  margin: 0;
  width: 100%;
}

.ask-card-summary {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--card-fg);
  margin: 0;
}

/* ── Pagination (Figma 249:60072 — numeric pager) ── */

.ask-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 24px 0 8px;
}

.ask-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  color: var(--text-on-dark-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.ask-page-btn:hover:not(:disabled):not(.active) {
  background: var(--hover-on-page);
  color: var(--text-on-dark);
}
.ask-page-btn.active {
  background: var(--page-active-bg);
  color: #fff;
  font-weight: 700;
}
.ask-page-btn:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.ask-page-arrow svg {
  width: 12px;
  height: 12px;
}

.ask-page-ellipsis {
  color: var(--text-on-dark-muted);
  padding: 0 4px;
  font-size: 13px;
}

/* ── Source banner & similar section (re-skin to match v1.2 dark) ── */

.ask-results .source-banner {
  background: linear-gradient(
    135deg,
    rgba(144, 69, 248, 0.1),
    rgba(0, 172, 200, 0.06)
  );
  border: 1px solid rgba(144, 69, 248, 0.2);
  color: var(--text-primary);
}

.ask-results .similar-section {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 0;
  margin-top: 16px;
}

.ask-results .similar-section-header {
  background: rgba(144, 69, 248, 0.08);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--r-md) var(--r-md) 0 0;
  padding: 14px 18px;
  color: var(--text-primary);
}

.ask-results .similar-section-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}
.ask-results .similar-section-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 10px;
}
.ask-results .similar-section-count {
  color: var(--brand-ai-glow);
  font-weight: 600;
  margin-left: auto;
}

.ask-results .similar-section .ask-card {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--divider);
}
.ask-results .similar-section .ask-card:first-of-type {
  border-top: none;
}

/* ── Legacy Result Tabs (preserved) ─────────────────────── */

.result-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.result-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  user-select: none;
  -webkit-user-select: none;
}

.result-tab:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.result-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Recommend Panel ──────────────────────────────────── */

.recommend-panel {
  padding: 0;
}

.recommend-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.recommend-section-title:first-child {
  margin-top: 0;
}

/* Snapshot cards grid */
.recommend-snap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.recommend-snap-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: border-color 0.2s;
}

.recommend-snap-card:hover {
  border-color: var(--border-hover);
}

.recommend-snap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.recommend-snap-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.recommend-snap-score {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}

.recommend-snap-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.recommend-snap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Snapshot modal button */
.snap-modal-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  outline: none;
  line-height: 1;
  margin-left: 4px;
}

.snap-modal-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Snapshot modal overlay */
.snap-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}

.snap-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  width: 90%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.snap-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.snap-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.snap-modal-score {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 12px;
}

.snap-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
}

.snap-modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.snap-meta-block {
  margin-bottom: 14px;
}

.snap-meta-row {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.snap-meta-label {
  font-size: 12px;
  color: var(--text-muted);
  width: 80px;
  flex-shrink: 0;
}

.snap-meta-value {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.snap-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 10px 16px 4px;
}

.snap-modal-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-line;
}

/* Recommendation reason inside card */
.recommend-reason {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.recommend-reason::before {
    display: none;
}

/* Recommend reason loading */
.recommend-reason-text {
  margin-top: 4px;
}

.recommend-reason-loading {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

.recommend-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.recommend-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.recommend-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.recommend-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.recommend-score {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 12px;
}

.recommend-reason {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.recommend-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.recommend-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Results ───────────────────────────────────────────── */

.results-section {
  margin-top: 8px;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  margin-bottom: 4px;
}

.results-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.results-time {
  font-size: 12px;
  color: var(--text-muted);
}

.results-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.3);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.csv-btn:hover {
  background: rgba(108, 99, 255, 0.2);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.csv-btn:active {
  transform: translateY(0);
}

.csv-btn svg {
  flex-shrink: 0;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Source Banner (Similar Mode) ─────────────────────── */

.source-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(
    135deg,
    rgba(108, 99, 255, 0.12),
    rgba(34, 211, 238, 0.08)
  );
  border: 1px solid rgba(108, 99, 255, 0.25);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  animation: slideDown 0.3s ease;
}

.source-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.source-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.source-match-type {
  font-size: 11px;
  font-weight: 500;
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Result Card ───────────────────────────────────────── */

.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}

.result-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.result-card:hover::before {
  opacity: 1;
}

.result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.result-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.result-similarity {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 20px;
}

.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.tag.stage {
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.08);
}
.tag.ai {
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.08);
}
.tag.country {
  color: var(--amber);
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.08);
}

/* Korean R&D tags */
.tag.program {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.1);
}
.tag.ministry {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.3);
  background: rgba(192, 132, 252, 0.1);
}
.tag.year {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.08);
}

/* Project name line (Korean R&D) */
.result-project {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Cross-search banner variant */
.source-banner.cross {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.12),
    rgba(59, 130, 246, 0.08)
  );
  border-color: rgba(168, 85, 247, 0.25);
}

.source-direction {
  font-size: 12px;
  font-weight: 600;
  color: #c084fc;
  margin-left: 8px;
}

/* Industry taxonomy — red tones (depth 1 bold → 3 subtle) */
.tag.ind1 {
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.12);
  font-weight: 600;
}
.tag.ind2 {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.25);
  background: rgba(248, 113, 113, 0.08);
}
.tag.ind3 {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.2);
  background: rgba(252, 165, 165, 0.06);
}

/* Technology taxonomy — green tones (depth 1 bold → 3 subtle) */
.tag.tech1 {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.12);
  font-weight: 600;
}
.tag.tech2 {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.25);
  background: rgba(52, 211, 153, 0.08);
}
.tag.tech3 {
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.2);
  background: rgba(134, 239, 172, 0.06);
}

/* Taxonomy rows */
.taxonomy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.taxonomy-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}

.taxonomy-label.ind-label {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.1);
  border: 1px solid rgba(251, 113, 133, 0.2);
}

.taxonomy-label.tech-label {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.taxonomy-arrow {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
}

.result-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  display: none;
}

.result-card.expanded .result-summary {
  display: block;
}

/* ── Loading ───────────────────────────────────────────── */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px;
  color: var(--text-muted);
  font-size: 14px;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── AI Toggle Button ──────────────────────────────────── */

.ai-toggle {
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ai-toggle:hover {
  border-color: rgba(168, 85, 247, 0.4);
  color: #a855f7;
  background: rgba(168, 85, 247, 0.08);
}

.ai-toggle.active {
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.2),
    rgba(236, 72, 153, 0.15)
  );
  border-color: rgba(168, 85, 247, 0.5);
  color: #c084fc;
  box-shadow:
    0 0 12px rgba(168, 85, 247, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: aiGlow 2s ease-in-out infinite alternate;
}

@keyframes aiGlow {
  0% {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
  }
  100% {
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
  }
}

/* ── Enhancement Info Panel ──────────────────────────────
   Figma 249:62330(컨테이너) + 249:62325(✨ On pill) 다크 테마 반영.
   내부 값(intent / keywords / expansion)은 현재 버전 유지. */

.enhancement-info {
  margin-top: 8px;
  padding: 14px 18px;
  background: var(--hover-on-page);
  border: 1px solid var(--border-on-page);
  border-radius: 14px;
  font-size: 13px;
  color: var(--text-on-dark-secondary);
  line-height: 1.6;
}

.enh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Figma 249:62325 — sparkle + "On" pill */
.enh-sparkle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 13px;
  background: var(--hover-on-page);
  border: 1px solid var(--border-on-page);
  border-radius: 14px;
  font-size: 11px;
  line-height: 16.8px;
  color: var(--text-on-dark-secondary);
}

.enh-sparkle-icon {
  width: 15px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}

.enh-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(0, 217, 166, 0.12);
  color: var(--brand-ai-glow);
  font-size: 12px;
  font-weight: 600;
}

.enh-label {
  font-size: 11px;
  color: var(--text-on-dark-muted);
}

.enh-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.enh-kw {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--hover-on-page);
  border: 1px solid var(--border-on-page);
  font-size: 11px;
  color: var(--text-on-dark-muted);
}

.enh-expanded {
  font-size: 12px;
  color: var(--text-on-dark-secondary);
  opacity: 0.85;
  margin-top: 4px;
  line-height: 1.5;
}

.enh-expand-label {
  display: inline-block;
  width: 22px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--hover-on-page);
  color: var(--text-on-dark-secondary);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  margin-right: 6px;
}

/* ── Responsive ────────────────────────────────────────── */

/* ── Result Name Group ─────────────────────────────────── */

.result-name-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.snapshot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.snapshot-btn:hover {
  background: rgba(108, 99, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.1);
}

/* ── Investment Row ────────────────────────────────────── */

.invest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 0;
}

.invest-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}

.invest-round-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  font-size: 11px;
  font-weight: 600;
}

.invest-date {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.6;
}

.invest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.inv-chip {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════
   v1.2 Company Snapshot Modal
   Figma: PFDR_v2.0_260315 node 249:60566 (기업개요 모달)
   Reference: fdi-native-mark-v2/src/components/CompanySnapshotModal/
   ═══════════════════════════════════════════════════════ */

/* ── Snapshot Modal — Figma 249:60986 (light theme, max-width 1024px) ── */

.ask-snap-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 60px 20px;
}

.ask-snap-overlay[hidden] {
  display: none;
}

.ask-snap-modal {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  max-width: 1000px;
  flex-shrink: 0;
  background: var(--surface-elevated-subtle);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header bar (Figma 249:60990 — 74px, white, var(--card-border) border-bottom) */
.ask-snap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 74px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-card-elevated);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ask-snap-head-left {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ask-snap-head-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--card-fg);
  -webkit-mask: url("/static/snap-icons/snap-header.svg") no-repeat center /
    contain;
  mask: url("/static/snap-icons/snap-header.svg") no-repeat center / contain;
}

.ask-snap-head-title {
  flex: 0 0 auto;
  font-family: "Pretendard", var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.4px;
  color: var(--card-fg);
  margin: 0;
  white-space: nowrap;
}

.ask-snap-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px;
  transition: background 0.15s ease;
}

.ask-snap-close:hover {
  background: var(--surface-card-hover);
}

.ask-snap-close::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--card-fg);
  -webkit-mask: url("/static/snap-icons/snap-close.svg") no-repeat center /
    contain;
  mask: url("/static/snap-icons/snap-close.svg") no-repeat center / contain;
}

/* Body container */
.ask-snap-body {
  padding: 40px 50px 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow-y: auto;
}

/* Section block */
.ask-snap-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Section heading: [AI icon] [AI] [title] — ExtraBold 22/normal */
.ask-snap-section-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ask-snap-ai-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ask-snap-ai-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
  background-color: #02d1b4;
  -webkit-mask: url("/static/snap-icons/snap-ai.svg") no-repeat center / contain;
  mask: url("/static/snap-icons/snap-ai.svg") no-repeat center / contain;
}

.ask-snap-ai-badge {
  font-family: "Pretendard", var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.44px;
  color: #02d1b4;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.ask-snap-section-title {
  font-family: "Pretendard", var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.44px;
  color: var(--card-fg);
  margin: 0;
}

/* Profile card (Figma 249:61017 — 5-row structure: identity / content / taxonomy / divider / info strip) */
.ask-snap-profile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 25px;
  background: var(--surface-card-elevated);
  border: 1px solid var(--card-border);
  border-radius: 5px;
}

/* (1) Identity: logo 36×36 + name Bold 20 */
.ask-snap-profile-identity {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ask-snap-profile-avatar,
img.ask-snap-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 35px;
  border: 1px solid var(--card-border);
  background: var(--surface-card-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Pretendard", var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
  color: #6c7280;
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}

.ask-snap-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ask-snap-profile-name {
  font-family: "Pretendard", var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.4px;
  color: var(--card-fg);
  margin: 0;
}

/* (2) Content: 2-col — left (기업소개 + 키워드) / right (270×152 placeholder) */
.ask-snap-profile-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.ask-snap-profile-content-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
}

.ask-snap-profile-content-right {
  width: 270px;
  height: 152px;
  background: var(--surface-elevated-subtle);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  flex-shrink: 0;
}

.ask-snap-profile-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ask-snap-profile-label {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
  color: var(--card-fg-secondary);
}

.ask-snap-profile-summary,
.ask-snap-profile-keywords {
  font-family: "Pretendard", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;
  color: var(--card-fg);
  margin: 0;
  word-break: keep-all;
}

/* (3) Pathfinder Dual Taxonomy */
.ask-snap-profile-tax {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* (4) Horizontal hairline divider */
.ask-snap-profile-divider {
  height: 1px;
  width: 100%;
  background: var(--card-border);
}

.ask-snap-tax-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Override .ask-card-tax-row & .ask-card-tax-badge inside snapshot (Figma 249:61048) */
.ask-snap-modal .ask-card-tax-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 26px;
}

.ask-snap-modal .ask-card-tax-badge {
  width: 47px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  font-family: "Pretendard", var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  line-height: 12px;
  text-transform: capitalize;
  letter-spacing: 0;
  color: #fff;
  margin-top: 0;
  flex-shrink: 0;
}

.ask-snap-modal .ask-card-tax-badge.industry {
  background: #3c80f7;
}

.ask-snap-modal .ask-card-tax-badge.tech {
  background: #00c75c;
}

.ask-snap-modal .ask-card-tax-path {
  font-family: "Pretendard", var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
  color: var(--card-fg-secondary);
  word-break: keep-all;
}

.ask-snap-modal .ask-card-tax-arrow {
  display: inline-block;
  width: 7px;
  height: 12px;
  margin: 0 4px;
  background-color: var(--card-fg-secondary);
  -webkit-mask: url("/static/snap-icons/snap-chevron.svg") no-repeat center /
    contain;
  mask: url("/static/snap-icons/snap-chevron.svg") no-repeat center / contain;
  vertical-align: middle;
  color: transparent;
  font-size: 0;
}

/* (5) Info strip — horizontal 5-col (대표 → 설립일자 → 기업 이메일 → 홈페이지 → 지역) */
.ask-snap-info-grid {
  display: flex;
  gap: 40px;
  padding: 0;
  border-top: none;
  flex-wrap: wrap;
}

.ask-snap-info-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ask-snap-info-label {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
  text-transform: none;
  color: var(--card-fg-secondary);
}

.ask-snap-info-value {
  font-family: "Pretendard", var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.3px;
  color: var(--card-fg);
  word-break: break-word;
}

.ask-snap-info-value a {
  color: var(--card-fg);
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ask-snap-info-value a:hover {
  color: var(--card-fg);
}

/* Figma 249:61070 — outlink icon fixed at #33CDA1 (independent of link text color) */
.ask-snap-info-value a::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #33cda1;
  -webkit-mask: url("/static/snap-icons/snap-outlink.svg") no-repeat center /
    contain;
  mask: url("/static/snap-icons/snap-outlink.svg") no-repeat center / contain;
  flex-shrink: 0;
}

/* Card grid */
.ask-snap-grid {
  display: grid;
  gap: 14px;
}

.ask-snap-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.ask-snap-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.ask-snap-grid.cols-1 {
  grid-template-columns: 1fr;
}

.ask-snap-card {
  background: var(--surface-card-elevated);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
}

.ask-snap-card-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ask-snap-card-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--card-fg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  font-size: 0;
  color: transparent;
}

.ask-snap-card-icon[data-icon="target"] {
  -webkit-mask-image: url("/static/snap-icons/snap-target.svg");
  mask-image: url("/static/snap-icons/snap-target.svg");
}
.ask-snap-card-icon[data-icon="warning"] {
  -webkit-mask-image: url("/static/snap-icons/snap-warning.svg");
  mask-image: url("/static/snap-icons/snap-warning.svg");
}
.ask-snap-card-icon[data-icon="bulb"] {
  -webkit-mask-image: url("/static/snap-icons/snap-bulb.svg");
  mask-image: url("/static/snap-icons/snap-bulb.svg");
}
.ask-snap-card-icon[data-icon="category"] {
  -webkit-mask-image: url("/static/snap-icons/snap-category.svg");
  mask-image: url("/static/snap-icons/snap-category.svg");
}
.ask-snap-card-icon[data-icon="trending"] {
  -webkit-mask-image: url("/static/snap-icons/snap-trending.svg");
  mask-image: url("/static/snap-icons/snap-trending.svg");
}
.ask-snap-card-icon[data-icon="memory"] {
  -webkit-mask-image: url("/static/snap-icons/snap-memory.svg");
  mask-image: url("/static/snap-icons/snap-memory.svg");
  background-color: #00d9a6;
}
.ask-snap-card-icon[data-icon="ai"] {
  -webkit-mask-image: url("/static/snap-icons/snap-ai.svg");
  mask-image: url("/static/snap-icons/snap-ai.svg");
  background-color: #02d1b4;
}

.ask-snap-card-title {
  font-family: "Pretendard", var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--card-fg);
  letter-spacing: -0.3px;
}

.ask-snap-card-subtitle {
  font-family: "Pretendard", var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--card-fg-secondary);
  margin: 0 0 4px;
}

.ask-snap-card-text {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--card-fg-secondary);
  margin: 0;
  white-space: pre-wrap;
}

.ask-snap-card.span-2 {
  grid-column: span 2;
}

.ask-snap-card-disclaimer {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-elevated-subtle);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-family: "Pretendard", var(--font-sans);
  color: var(--card-fg-secondary);
  font-size: 12px;
  line-height: 1.5;
}

/* Investment table */
.ask-snap-inv-table {
  background: var(--surface-card-elevated);
  border: 1px solid var(--card-border);
  border-radius: 5px;
  overflow: hidden;
}

.ask-snap-inv-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--card-border);
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  color: var(--card-fg-secondary);
}

.ask-snap-inv-row.head {
  background: var(--surface-elevated-subtle);
  color: var(--card-fg-secondary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  border-top: none;
}

.ask-snap-inv-row .investor {
  color: var(--card-fg);
  font-weight: 500;
}

/* Footer */
.ask-snap-foot {
  padding: 18px 28px;
  border-top: 1px solid var(--card-border);
  color: var(--card-fg-secondary);
  font-family: "Pretendard", var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-card-elevated);
}

.ask-snap-foot svg {
  color: var(--card-fg-secondary);
  flex-shrink: 0;
}

/* ── AI Insight Button & Panel ─────────────────────────── */

.insight-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15),
    rgba(59, 130, 246, 0.15)
  );
  color: #c4b5fd;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.insight-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.3),
    rgba(59, 130, 246, 0.3)
  );
  border-color: rgba(139, 92, 246, 0.6);
  color: #ddd6fe;
  transform: translateY(-1px);
}

.insight-btn.active {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.4),
    rgba(59, 130, 246, 0.4)
  );
  border-color: rgba(139, 92, 246, 0.7);
  color: #ede9fe;
}

.spinner-sm {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #c4b5fd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Insight Panel */

.insight-panel {
  background: linear-gradient(
    135deg,
    rgba(30, 25, 50, 0.95),
    rgba(20, 18, 40, 0.95)
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.06);
}

.insight-title {
  font-size: 14px;
  font-weight: 700;
  color: #c4b5fd;
}

.insight-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.insight-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.insight-body {
  padding: 20px 24px;
  max-height: 600px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
}

.insight-body::-webkit-scrollbar {
  width: 6px;
}

.insight-body::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}

.insight-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-dim);
}

.insight-error {
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
}

/* Insight Markdown Styles */

.insight-h2 {
  font-size: 18px;
  font-weight: 800;
  color: #c4b5fd;
  margin: 28px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.insight-h2:first-child {
  margin-top: 0;
}

.insight-h3 {
  font-size: 15px;
  font-weight: 700;
  color: #a5b4fc;
  margin: 20px 0 8px 0;
}

.insight-h4 {
  font-size: 14px;
  font-weight: 600;
  color: #93c5fd;
  margin: 14px 0 6px 0;
}

.insight-body p {
  margin: 8px 0;
  opacity: 0.92;
}

.insight-body strong {
  color: #ddd6fe;
  font-weight: 700;
}

.insight-body em {
  color: #a5b4fc;
  font-style: italic;
}

.insight-list {
  margin: 8px 0;
  padding-left: 20px;
  list-style: none;
}

.insight-list li {
  position: relative;
  padding: 4px 0;
  opacity: 0.92;
}

.insight-list li::before {
  content: "▸";
  position: absolute;
  left: -16px;
  color: #8b5cf6;
}

/* ── Global VC Full-width Mode ─────────────────────────── */

.main.fullwidth {
  max-width: 100%;
  padding: 0 32px 32px;
}

.global-vc-section {
  width: 100%;
}

/* ── Treemap ──────────────────────────────────────────── */

.treemap-container {
  width: 100%;
}

.treemap-category {
  margin-bottom: 24px;
}

.treemap-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 0;
}

.treemap-category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.treemap-category-count {
  font-size: 13px;
  color: var(--text-muted);
}

.treemap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.treemap-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

.treemap-box:hover {
  filter: brightness(1.2);
  z-index: 2;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

.treemap-box.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  filter: brightness(1.3);
  z-index: 3;
}

.treemap-box-name {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.treemap-box-count {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.treemap-box.size-lg .treemap-box-name {
  font-size: 14px;
}
.treemap-box.size-lg .treemap-box-count {
  font-size: 12px;
}
.treemap-box.size-md .treemap-box-name {
  font-size: 12px;
}
.treemap-box.size-sm .treemap-box-name {
  font-size: 10px;
}
.treemap-box.size-xs .treemap-box-name {
  font-size: 9px;
}
.treemap-box.size-xs .treemap-box-count {
  display: none;
}

/* ── Treemap Toggle Button (in search results) ─────── */

.treemap-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.treemap-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.treemap-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.search-treemap-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

/* ── Investor Portfolio Panel ─────────────────────────── */

.investor-portfolio-panel {
  margin-top: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.portfolio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.portfolio-title {
  font-size: 16px;
  font-weight: 600;
}

.portfolio-actions {
  display: flex;
  gap: 8px;
}

.portfolio-insight-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.portfolio-insight-btn:hover {
  filter: brightness(1.15);
}

.portfolio-table {
  width: 100%;
}

.portfolio-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 0.8fr;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.portfolio-row:hover {
  background: var(--bg-card-hover);
}

.portfolio-row.header {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-secondary);
}

.portfolio-row .company-name {
  font-weight: 500;
  color: var(--text-primary);
}
.portfolio-row .round-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Investor Insight Panel ───────────────────────────── */

.investor-insight-panel {
  margin-top: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.investor-insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.investor-insight-title {
  font-size: 14px;
  font-weight: 600;
}

.investor-insight-actions {
  display: flex;
  gap: 8px;
}

.md-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.md-download-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.investor-insight-body {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   v1.2 Insight / Treemap / Recommend panels
   Figma: PFDR_v2.0_260315 nodes 249:62329 (inline insight),
                                249:61458 (full insight),
                                249:61685 (Related K-Startups)
   ═══════════════════════════════════════════════════════ */

/* ── AI Insights tab full-width card ── */
.ask-tab-pane #insightPanel.insight-panel {
  background: var(--surface-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  margin-top: 16px;
  color: var(--text-on-dark);
}

.ask-tab-pane #insightPanel.insight-panel .insight-header {
  background: transparent;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ask-tab-pane #insightPanel.insight-panel .insight-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.insight-title-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("/static/icons/ai-sparkle.svg");
          mask-image: url("/static/icons/ai-sparkle.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body {
  background: transparent;
  color: var(--text-on-dark-secondary);
  padding: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body::-webkit-scrollbar {
  width: 8px;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body::-webkit-scrollbar-track {
  background: transparent;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

.ask-tab-pane #insightPanel.insight-panel .insight-body h2,
.ask-tab-pane #insightPanel.insight-panel .insight-body h3 {
  font-family: var(--font-serif);
  color: var(--text-on-dark);
  margin: 18px 0 10px;
}

.ask-tab-pane #insightPanel.insight-panel .insight-body strong {
  color: var(--brand-ai-glow);
}

.ask-tab-pane #insightPanel.insight-panel .md-download-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-on-dark-secondary);
  border-radius: var(--r-xs);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ask-tab-pane #insightPanel.insight-panel .md-download-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Investor Treemap (Key Investors tab) ── */
.ask-tab-pane #searchTreemapSection.search-treemap-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 16px 0 0 0;
}

.ask-tab-pane .treemap-container {
  background: var(--surface-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 18px;
  color: var(--text-on-dark);
}

.ask-tab-pane .treemap-container .treemap-category-title {
  color: var(--text-on-dark);
}

.ask-tab-pane .treemap-container .treemap-category-count {
  color: var(--text-on-dark-muted);
}

.ask-tab-pane .treemap-box {
  background: linear-gradient(
    135deg,
    rgba(144, 69, 248, 0.18),
    rgba(0, 172, 200, 0.12)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
  border-radius: var(--r-xs);
  transition: all 0.15s ease;
}

.ask-tab-pane .treemap-box:hover {
  border-color: var(--brand-industry);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.ask-tab-pane .treemap-box.selected {
  border-color: var(--brand-industry);
  background: linear-gradient(
    135deg,
    rgba(144, 69, 248, 0.32),
    rgba(0, 172, 200, 0.22)
  );
  box-shadow: 0 0 12px var(--accent-glow);
}

.ask-tab-pane .investor-portfolio-panel,
.ask-tab-pane .investor-insight-panel {
  border-radius: var(--r-md);
  margin-top: 16px;
}

/* Portfolio Panel — Key Investors tab (dark) */
.ask-tab-pane .investor-portfolio-panel {
  background: var(--surface-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-title {
  color: var(--text-on-dark);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark-secondary);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-row.header {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-on-dark-muted);
}
.ask-tab-pane .investor-portfolio-panel .portfolio-row .company-name {
  color: var(--text-on-dark);
}
.ask-tab-pane .investor-portfolio-panel .round-badge {
  background: rgba(144, 69, 248, 0.18);
  color: #d5c0ff;
  border: 1px solid rgba(144, 69, 248, 0.35);
}

/* Insight Panel — Key Investors tab (dark) */
.ask-tab-pane .investor-insight-panel {
  background: var(--surface-panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
}
.ask-tab-pane .investor-insight-panel .investor-insight-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ask-tab-pane .investor-insight-panel .investor-insight-title {
  color: var(--text-on-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ask-tab-pane .investor-insight-panel .investor-insight-body {
  color: var(--text-on-dark-secondary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.ask-tab-pane .investor-insight-panel .investor-insight-body::-webkit-scrollbar {
  width: 8px;
}
.ask-tab-pane .investor-insight-panel .investor-insight-body::-webkit-scrollbar-track {
  background: transparent;
}
.ask-tab-pane .investor-insight-panel .investor-insight-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.ask-tab-pane .investor-insight-panel .investor-insight-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}
.ask-tab-pane .investor-insight-panel .investor-insight-body h2,
.ask-tab-pane .investor-insight-panel .investor-insight-body h3 {
  color: var(--text-on-dark);
}
.ask-tab-pane .investor-insight-panel .investor-insight-body strong {
  color: var(--brand-ai-glow);
}

/* Buttons — Key Investors tab (dark) */
.ask-tab-pane .portfolio-insight-btn {
  background: rgba(0, 217, 166, 0.08);
  border: 1px solid rgba(0, 217, 166, 0.35);
  color: var(--brand-ai-glow);
  border-radius: var(--r-xs);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
}
.ask-tab-pane .portfolio-insight-btn:hover {
  background: rgba(0, 217, 166, 0.16);
  border-color: var(--brand-ai-glow);
  box-shadow: 0 0 0 2px rgba(0, 217, 166, 0.15);
  filter: none;
}

.ask-tab-pane .investor-insight-panel .md-download-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--text-on-dark-secondary);
  border-radius: var(--r-xs);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
}
.ask-tab-pane .investor-insight-panel .md-download-btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}

.ask-tab-pane .investor-insight-panel .insight-close {
  color: var(--text-on-dark-muted);
}
.ask-tab-pane .investor-insight-panel .insight-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark);
}

/* ── Related K-Startups tab ── */
.ask-tab-pane #recommendPanel.recommend-panel {
  margin-top: 16px;
}

.ask-recommend-logic-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 8px;
}

/* Figma 249:61691 — SEARCH LOGIC 레이블 (10px, tracking 2px, #888 톤) */
.ask-recommend-logic-key {
  font-family: "Pretendard", var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 14px;
}

/* Figma 249:61692 — 추천 타이틀 "글로벌 인사이트 기반 한국 스타트업 추천" (16px Medium) */
.ask-recommend-logic-value {
  font-family: "Pretendard", var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--text-on-dark);
}

.ask-tab-pane .recommend-section-title {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 18px;
}

.ask-tab-pane .recommend-snap-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ask-tab-pane .recommend-snap-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.ask-tab-pane .recommend-snap-name {
  color: var(--text-primary);
  font-weight: 700;
}
.ask-tab-pane .recommend-snap-score {
  color: var(--brand-ai-glow);
  font-family: var(--font-mono);
}
.ask-tab-pane .recommend-snap-summary {
  color: var(--text-secondary);
}

/* ── Loading spinner (v1.2 dark) ── */
.ask-tab-pane .insight-loading,
.ask-tab-pane .treemap-loading {
  color: var(--text-secondary);
}

/* ── Treemap Loading (legacy) ─────────────────────────── */

.treemap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   Similar Companies – Dual Section Layout
   ═══════════════════════════════════════════════════════════ */

.similar-section {
  margin-top: 16px;
  border: 1px solid rgba(108, 99, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(18, 19, 26, 0.5);
}

.similar-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(
    135deg,
    rgba(108, 99, 255, 0.08),
    rgba(52, 211, 153, 0.05)
  );
  border-bottom: 1px solid rgba(108, 99, 255, 0.1);
}

.similar-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.similar-section-label {
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.similar-section-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.similar-section .result-card {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.similar-section .result-card:last-child {
  border-bottom: none;
}

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

/* ═══════════════════════════════════════════════════════════
   PIN Gate Modal — Figma-aligned minimal auth prompt
   TEMP: Pathfinder 연동 전까지 간이 게이트. 인증번호는 클라이언트에
   하드코딩되어 있으므로 보안 수단이 아닌 단순 접근 지연용이다.
   ═══════════════════════════════════════════════════════════ */

.pin-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}

.pin-overlay[hidden] {
  display: none;
}

.pin-modal {
  width: 100%;
  max-width: 380px;
  background: var(--surface-card-elevated);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--card-border);
  background: var(--surface-card-elevated);
}

.pin-title {
  font-family: "Pretendard", var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--card-fg);
  margin: 0;
}

.pin-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.pin-close:hover {
  background: var(--surface-card-hover);
}

.pin-close::before,
.pin-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--card-fg);
}

.pin-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pin-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pin-body {
  padding: 28px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.pin-sub {
  font-family: "Pretendard", var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--card-fg-secondary);
  margin: 0;
  text-align: center;
}

.pin-form {
  display: contents;
}

.pin-inputs {
  display: flex;
  gap: 10px;
}

.pin-digit {
  width: 54px;
  height: 62px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  background: var(--surface-elevated-subtle);
  text-align: center;
  font-family: "Pretendard", var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--card-fg);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
  -moz-appearance: textfield;
}

.pin-digit::-webkit-outer-spin-button,
.pin-digit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pin-digit:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pin-digit.pin-digit--error {
  border-color: var(--rose);
  color: var(--rose);
}

.pin-error {
  font-family: "Pretendard", var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--rose);
  margin: 0;
  text-align: center;
  min-height: 18px;
}

.pin-error[hidden] {
  display: none;
}

.pin-modal.pin-modal--shake {
  animation: pin-shake 0.38s ease;
}

@keyframes pin-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(4px);
  }
}

@media (max-width: 480px) {
  .pin-digit {
    width: 48px;
    height: 56px;
    font-size: 22px;
  }
  .pin-inputs {
    gap: 8px;
  }
}