/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background: #000;
  color: #fff;
  /* W2 D1 #2 (S0 잔여): next/font/local 변수 우선 — layout.tsx pretendard.variable. */
  font-family: var(--font-pretendard), -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    system-ui, sans-serif;
  /* W2 D22 (2026-05-13) — overflow:hidden 제거. 사용자 보고: /ipo /flow
     /hot-news /disclosures sub-pages에서 콘텐츠가 viewport 초과 시 아래
     내용 노출 불가 (body 스크롤 차단). 메인 페이지 BubbleCanvas는 자체
     .market-layout(height:calc(100dvh - 36px) + overflow:hidden)로 격리되어
     회귀 없음. SubNav sticky(top:0, z-280)가 모든 페이지에서 viewport top
     고정 유지. height:100% → min-height:100%로 변경해 콘텐츠 길이에 따른
     자연 확장 허용. */
}

/* W3 (2026-05-09): 좌측 overlay panel 너비 SSOT.
   ChartPanel + UserRankingPanel 둘 다 같은 너비 — 사용자 일관성 보고 회수.
   변경 시 한 곳만 수정.
   W2 D18 (2026-05-12) Responsive Fluid: 440px 고정 → clamp(320, 28vw, 440).
   좁은 화면(1024 등)에서 center pane 압박 완화. */
:root {
  --overlay-left-w: clamp(320px, 28vw, 440px);

  /* W2 D18 (2026-05-12) Responsive Fluid 원칙 토큰.
     영구 룰 feedback_responsive_fluid_layout.md 참조.
     viewport 비례 fluid — 모바일~4K range 자연 대응. */
  --fluid-text-xs:   clamp(0.688rem, 0.6rem + 0.2vw, 0.75rem);   /* 11 → 12px */
  --fluid-text-sm:   clamp(0.75rem,  0.65rem + 0.25vw, 0.875rem); /* 12 → 14px */
  --fluid-text-base: clamp(0.8125rem, 0.7rem + 0.3vw, 1rem);     /* 13 → 16px */
  --fluid-gap-sm:    clamp(6px, 0.4vw + 4px, 10px);
  --fluid-gap-md:    clamp(10px, 0.6vw + 6px, 16px);
  --fluid-gap-lg:    clamp(16px, 1vw + 8px, 24px);

  /* W2 D22 (2026-05-13) — IPO urgency tier 토큰 (5인 회의 만장 APPROVE).
     자본시장법 §9 정합: 빨강(#ef4444 매매 시그널) 회피 + 시간 사실만 표현.
     critical/urgent = 주황 계열 (마감 임박, 매매 권유 X)
     upcoming = 노랑 (기존 dDay 색 승계)
     fresh = 초록 (IpoStatusBadge listed와 동일 — 사실 매칭) */
  --color-urgency-critical: #f97316;  /* D-DAY / D-1 */
  --color-urgency-urgent:   #fb923c;  /* D-2 ~ D-3 */
  --color-urgency-upcoming: #eab308;  /* D-4 ~ D-7 (현행 유지) */
  --color-urgency-fresh:    #34d399;  /* listed D+0 ~ D+3 */
}

/* W2 D22 — critical tier border pulse (UI/UX Pro Max 권고).
   1.6s ease-in-out infinite. prefers-reduced-motion 정합 (정적). */
@keyframes ipoCriticalPulse {
  0%, 100% { border-color: var(--color-urgency-critical); }
  50%      { border-color: rgba(249, 115, 22, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .ipo-card-critical {
    animation: none !important;
  }
}

/* W2 D23 (2026-05-13) — 5인 회의 만장 합의: IpoCard inline IpoNotifyButton.
   Pattern C (Piccalilli faux-nested interactive): card wrapper position:relative
   + Link ::before { inset:0 } 로 카드 전체 hit area 확장 + sibling button을
   z-index 상위로 띄움. <a href> 100% 보존 (SEO internal link graph + middle-click
   새 탭 + right-click 컨텍스트 + Next prefetch 무회귀).
   W2 D23 (2026-05-13 23:50) — Codex 듀얼 리뷰 P2 회수:
   ① container > * → container > div 로 좁힘. Link는 position:static 유지하여
      Link::before의 absolute anchor가 container(relative)가 되어 inset:0이
      카드 전체(Link + sibling notify row 영역 포함)를 cover. 이전: Link도
      positioned가 되어 ::before가 Link 영역만 cover → notify row 빈 공간
      클릭 시 detail navigation 안 됨 (P2 회귀).
   ② ipo-card-critical 클래스 + animation을 동일 element(outer container)에
      적용해 @media reduced-motion 정합. 이전: animation은 container, 클래스
      는 Link → selector 매칭 안 됨 → reduced-motion 사용자 pulse 보임 (a11y). */
.ipo-card-container {
  position: relative;
}
.ipo-card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.ipo-card-container > div {
  position: relative;
  z-index: 1;
}

body { margin: 0; }

/* Z-INDEX POLICY: Canvas 0 / Overlay 200 / SubNav 280 / TopNav 300 / PinToast 400 / Modals 500+ */

/* W2 D22 (2026-05-13) — keyboard focus visibility (a11y, UI/UX 회의 권고).
   inline style로 :focus-visible 표현 불가하므로 클래스 셀렉터로 처리.
   nav-link / list-link 양쪽에 focus-visible 시 노란 outline 2px. */
.mb-focus-link:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
  border-radius: 4px;
}

.market-layout {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-rows: 48px 1fr;
  /* W2 D22 (2026-05-13) — SubNav 36px sticky 추가로 viewport 가용 height
     차감 필요. 100dvh → calc(100dvh - 36px). body overflow:hidden 제거
     동반 fix — 메인에서 SubNav + market-layout이 정확히 100dvh 차지하여
     body 스크롤 0 유지 (BubbleCanvas viewport 회귀 차단). */
  height: calc(100dvh - 36px);
  position: relative;
  overflow: hidden;
  contain: layout style;
}

.market-layout > header {
  grid-column: 1 / -1;
  position: relative;
  z-index: 300;
}

.market-layout > .pane {
  overflow: hidden;
}

/* ==========================================================================
   Overlay wrappers: rail (always visible 48px) + panel (slides in/out)
   - Wrapper width is DYNAMIC: 48px when closed, 48+panel when open
     → keeps the hover zone exactly on the rail when closed, so BubbleCanvas
       bubbles on the right edge remain fully hoverable/clickable
   - Panel is absolute-positioned against the wrapper so it can slide past
     the wrapper's clipping edge via transform, without messing up flex layout
   - overflow: hidden on wrapper clips the off-screen panel
   ========================================================================== */

.overlay {
  position: absolute;
  top: 48px;
  bottom: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
  contain: layout style;
  transition: width 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.overlay > .rail,
.overlay > .overlay__panel {
  pointer-events: auto;
}

.overlay--left { left: 0; width: 48px; }
.overlay--right { right: 0; width: 48px; }

.market-layout[data-chart='peek'] .overlay--left,
.market-layout[data-chart='pinned'] .overlay--left {
  width: calc(48px + var(--overlay-left-w));
}

.market-layout[data-right='peek'] .overlay--right,
.market-layout[data-right='pinned'] .overlay--right {
  width: calc(48px + var(--right-panel-width, 360px));
}

.overlay .rail {
  position: absolute;
  top: 0;
  bottom: 0;
  /* W2 D18 저녁 (2026-05-12) — 사용자 보고 "좌측 panel이 brower edge에 안 붙어
     보임". fix: panel을 viewport edge부터 시작 + rail은 panel 위에 absolute
     (z-index 2). rail이 panel 안쪽 영역 일부를 시각적으로 가림 — panel content는
     padding-left 48로 회수. */
  z-index: 2;
}

.overlay--left .rail { left: 0; }
.overlay--right .rail { right: 0; }

.overlay__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Semi-opaque + backdrop-blur so bubbles briefly moving across the panel
     edge during settle are visible as soft shadows rather than disappearing.
     Primary keep-out is handled by panelRepel force in BubbleCanvas; this
     is visual polish for transition frames. */
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  visibility: hidden;
  z-index: 1;
  /* W2 D18 저녁 — rail (z-index 2)이 panel 위에 그려지므로 panel content는
     안쪽 padding으로 회피. box-sizing border-box로 width 정합. */
  box-sizing: border-box;
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0ms linear 220ms;
}

.overlay--left .overlay__panel {
  /* W2 D18 저녁 (2026-05-12) 사용자 보고: panel이 brower edge에 안 붙음.
     이전: left:48 (rail 옆부터) → 변경: left:0 (viewport edge부터). rail이
     panel 위로 absolute(z-index 2)로 그려져 시각적 위치 보존. content는
     padding-left 48로 rail 영역 회피. */
  left: 0;
  width: var(--overlay-left-w);
  padding-left: 48px;
  border-right: 1px solid #1a1a1a;
  transform: translateX(-100%);
}

.overlay--right .overlay__panel {
  right: 0;
  width: var(--right-panel-width, 360px);
  padding-right: 48px;
  border-left: 1px solid #1a1a1a;
  transform: translateX(100%);
}

.market-layout[data-chart='peek'] .overlay--left .overlay__panel,
.market-layout[data-chart='pinned'] .overlay--left .overlay__panel,
.market-layout[data-right='peek'] .overlay--right .overlay__panel,
.market-layout[data-right='pinned'] .overlay--right .overlay__panel {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 0ms linear 0ms;
}

/* ==========================================================================
   Heatmap pane — panel-aware dynamic padding (W2 D15)
   사용자 피드백: Heatmap 셀이 좌우 panel(chart/right) 열림 시 가려짐.
   panel 상태(closed/peek/pinned)에 따라 padding 동적 — closed=rail 48만,
   peek/pinned=rail + panel width. transition은 panel slide(220ms)와 일치.
   모바일(< 768px)에서는 panel 미사용이라 padding 0.
   ========================================================================== */
/* W2 D15 5인 회의 합의 (Frontend Design + SEO + Growth + Codex + design.md):
   Heatmap UI 토큰 — 점진 도입(툴팁부터). design.md elevated card 패턴 + Toss/카카오
   surface 언어. 한국 적청 색관습은 별도 데이터 토큰(아래 --kr-up / --kr-down). */
:root {
  --hm-surface-elevated: #1a1d24;       /* slate-800 lift, OLED halation 회피 */
  --hm-surface-stroke: #2a2f3a;          /* card border */
  --hm-text-primary: #f1f5f9;            /* slate-100 */
  --hm-text-secondary: #94a3b8;          /* slate-400 muted */
  --hm-text-tertiary: #64748b;           /* slate-500 label */
  /* 한국 retail 색관습 (Toss/네이버/KB/키움 표준): 적=상승, 청=하락 */
  --kr-up-strong: #dc2626;               /* 적 — 매우 강한 상승 */
  --kr-up-mid: #ef4444;
  --kr-up-soft: #b91c1c;
  --kr-down-strong: #2563eb;             /* 청 — 매우 강한 하락 */
  --kr-down-mid: #3b82f6;
  --kr-down-soft: #1d4ed8;
}

/* ==========================================================================
   Table pane — 기본 중앙 정렬 (W2 D15 사용자 피드백)
   StockTable이 좌측 쏠림 → flex justifyContent: center로 중앙 정렬.
   panel-aware padding은 적용 X — 사용자 명시: panel 열림 시 방해 받지 않음.
   화면보다 table이 넓으면 overflowX scroll (StockTable 자체 처리).
   ========================================================================== */
.table-pane {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.table-pane > * {
  height: 100%;
  flex-shrink: 0;
}

.heatmap-pane {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* W2 D15 사용자 피드백: 하단 광고 배너 자리 reserve. 데스크톱 90px(leaderboard
     728x90 호환), 모바일 60px(320x50 + 여백). 향후 실제 배너 추가 시 .heatmap-ad-slot
     div로 교체. */
  padding-bottom: 60px;
  transition: padding 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.heatmap-pane > * {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .heatmap-pane {
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 90px;
  }
  .market-layout[data-chart='peek'] .heatmap-pane,
  .market-layout[data-chart='pinned'] .heatmap-pane {
    padding-left: calc(48px + var(--overlay-left-w));
  }
  .market-layout[data-right='peek'] .heatmap-pane,
  .market-layout[data-right='pinned'] .heatmap-pane {
    padding-right: calc(48px + var(--right-panel-width, 360px));
  }
}

/* ==========================================================================
   Rail (48px)
   ========================================================================== */

.rail {
  width: 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  background: #080808;
  border-right: 1px solid #141414;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rail--right {
  border-right: none;
  border-left: 1px solid #141414;
}

.rail__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #8a8a8a;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  position: relative;
}

.rail__btn:hover:not([disabled]) {
  background: #161616;
  color: #e6e6e6;
}

.rail__btn:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
  color: #e6e6e6;
}

.rail__btn[data-state='peek'] {
  background: #1a1a1a;
  color: #e6e6e6;
  border-color: #2f2f2f;
}

.rail__btn[data-state='pinned'] {
  background: #2a2416;
  color: #eab308;
  border-color: #eab308;
}

.rail__btn[data-state='pinned']::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eab308;
  box-shadow: 0 0 0 2px #080808;
}

.rail--right .rail__btn[data-state='pinned']::after {
  right: auto;
  left: -3px;
}

/* Amber unread dot — new disclosure for watched ticker. ::before so it doesn't
   conflict with ::after (pin badge). Slightly smaller than pin badge to read
   as 'notification' rather than 'state'. */
.rail__btn[data-unread='true']::before {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5a524;
  box-shadow: 0 0 0 2px #080808;
  pointer-events: none;
}

.rail--right .rail__btn[data-unread='true']::before {
  right: auto;
  left: -3px;
}

.rail__btn[disabled] {
  cursor: not-allowed;
  color: #3a3a3a;
  position: relative;
}

.rail__btn[disabled]::before {
  content: attr(data-badge);
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 3px;
  background: #1a1a1a;
  color: #777;
  border-radius: 3px;
  line-height: 1;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.rail--right .rail__btn[disabled]::before {
  right: auto;
  left: -2px;
}

.rail__divider { width: 20px; height: 1px; background: #222; margin: 4px 0; }
.rail__spacer { flex: 1 1; }

/* ==========================================================================
   Chart-panel empty-state
   ========================================================================== */

.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 24px;
  gap: 12px;
  color: #555;
  text-align: center;
}

.chart-empty svg { opacity: 0.35; }
.chart-empty__title { font-size: 13px; color: #888; }
.chart-empty__hint { font-size: 11px; color: #4a4a4a; line-height: 1.6; max-width: 260px; }

/* ==========================================================================
   Right-panel placeholder
   ========================================================================== */

.right-panel-placeholder {
  padding: 16px;
  color: #888;
  font-size: 12px;
  line-height: 1.6;
}

.right-panel-placeholder h3 {
  color: #bdbdbd;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.right-panel-placeholder .roadmap-item {
  padding: 8px 10px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.right-panel-placeholder .roadmap-item .tag {
  display: inline-block;
  padding: 2px 6px;
  background: #1f1f1f;
  border-radius: 3px;
  color: #eab308;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.right-panel-placeholder .selection-box {
  margin-top: 20px;
  padding: 12px;
  background: #0a0a0a;
  border: 1px dashed #222;
  border-radius: 4px;
}

.right-panel-placeholder .selection-box .label {
  color: #555;
  font-size: 10px;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

/* EXIT 버블 — Wave 3 후속, 필터/섹터/테마 활성 시 reset CTA.
 * Z-INDEX: Canvas 0 / Overlay 200 / TopNav 300 / PinToast 400 / EXIT 220 (canvas 위, TopNav 아래)
 */
.exit-bubble {
  position: fixed;
  top: 64px;
  right: 64px;
  min-width: 80px;
  min-height: 44px;
  padding: 10px 16px;
  background: #1f2937;
  color: #ffffff;
  border: 1px solid #374151;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  /* Round 7 (R6 P1-1): next/font/local hashed family와 정합. body와 동일 var. */
  font-family: var(--font-pretendard), system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  z-index: 220;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: background-color 120ms, transform 120ms, border-color 120ms;
  animation: exit-bubble-in 180ms ease-out;
}
.exit-bubble:hover {
  background: #374151;
  border-color: #6b7280;
}
.exit-bubble:active {
  transform: scale(0.96);
}
.exit-bubble:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
}
@keyframes exit-bubble-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .exit-bubble {
    top: auto;
    right: 16px;
    bottom: 88px;
    min-width: 64px;
    min-height: 64px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  }
}

/* 파란 EXIT 버블 — 사용자 명시 색. 검정 "← 전체" 우측에 16px 간격으로 별도 배치. */
.exit-bubble--blue {
  top: 64px;
  right: 160px;
  background: #2563eb;
  border-color: #1d4ed8;
  letter-spacing: 0.08em;
}
.exit-bubble--blue:hover {
  background: #3b82f6;
  border-color: #60a5fa;
}

@media (max-width: 768px) {
  .exit-bubble--blue {
    top: auto;
    right: 16px;
    bottom: 168px;
  }
}


/* W3 S8 Phase 1H — short-viewport rail compact (8 buttons + spacer can overflow at < 720px height).
   Codex review #4 — fixes mobile landscape / Chrome devtools panel scenarios. */
@media (max-height: 720px) {
  .rail__btn {
    width: 32px;
    height: 32px;
  }
  .rail {
    gap: 2px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* W2 D16 (2026-05-11) — TopNav Mobile Phase 1-A.
   4인 회의(architect+explorer+SEO+Growth) 만장일치: 옵션 C (Priority hide + overflow menu).
   Phase 1-A는 CSS-only — < 768px에서 BubbleSize 7버튼 / Timeframe / Lang / Color 그룹 hide.
   SSR-safe(hydration mismatch 0), link graph 보존(display:none, DOM 유지).
   Phase 1-B에서 overflow ⋯ 메뉴로 숨긴 컨트롤들의 현재값 표시 + Bell/Clock/Live 강등 통합. */
.topnav__group--bubble-size { display: block; }
.topnav__group--timeframe { display: flex; align-items: center; gap: 6px; }
.topnav__group--lang,
.topnav__group--color,
.topnav__group--clock,
.topnav__group--bell { display: inline-flex; }

/* W2 D16 Phase 1-B-2 — overflow ⋯ 버튼. 모바일 only. */
.topnav__overflow-btn { display: none; }

/* W2 D16 시세 chip — 2단계.
   < 768px 모바일: TopNav 좌측에 KOSPI + USD/KRW 가로 chip (KOSDAQ hide).
   >= 768px 데스크탑: TopNav 시세 chip 3종 모두 hide → VerticalIndexTicker가 메인 우상단 세로 표시. */
@media (max-width: 767px) {
  .topnav__index--kospi { display: inline-flex; }
  .topnav__index--kosdaq { display: none; }
  .topnav__index--usdkrw { display: inline-flex; }
}
@media (min-width: 768px) {
  .topnav__index--kospi,
  .topnav__index--kosdaq,
  .topnav__index--usdkrw { display: none; }
}

/* W2 D16 — 메인 우하단 세로 시세 ticker.
   사용자 보고 2026-05-11 (재배치 2회차): ChartPanel/RightPanel 열림 시 자동 hide,
   닫히면 다시 표시. 좌하단(이전) → 우하단(우측 Rail 좌측). RightPanel이 우측에 열리면
   ticker가 가려질 위치이지만, opacity transition으로 자연 hide. */
.vertical-index-ticker {
  /* 사용자 디버깅 2026-05-11: absolute + .market-layout grid 결합으로 viewport 밖 위치
     발생 (특히 height < 900px). position: fixed로 변경 → viewport 기준 anchor.
     attribute selector는 .market-layout descendant이므로 fixed에서도 작동. */
  position: fixed;
  bottom: 24px; /* viewport 하단 24px margin */
  right: 64px; /* 우측 Rail 48 + margin 16 */
  display: none; /* 모바일 default hide */
  flex-direction: column;
  gap: 8px;
  z-index: 30; /* TopNav header(48) + safe-area 위 */
  pointer-events: auto;
  opacity: 1;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 768px) {
  .vertical-index-ticker { display: flex; }
}
/* 화면 해상도 자동 적응 — 사용자 요청 2026-05-11.
   짧은 height(< 720px, 노트북/모바일 가로 모드 등)에서 세로 stack 시 BubbleCanvas
   가림 우려 → row mode fallback. 3 chip 가로 배치, ticker height ~40px로 축소. */
@media (min-width: 768px) and (max-height: 720px) {
  .vertical-index-ticker {
    flex-direction: row;
    gap: 4px;
    bottom: 12px;
    right: 56px;
  }
}
/* 매우 짧은 height(< 480px)에서는 hide — Heatmap/표 가독성 우선 */
@media (max-height: 480px) {
  .vertical-index-ticker { display: none !important; }
}
/* ChartPanel 또는 RightPanel 열림(peek/pinned) 시 hide.
   pointer-events:none — 클릭 누수 방지 (BubbleCanvas/Heatmap 영역 보존).
   P1 회수 (silent-failure 8/10): :not([data-chart="closed"]) 패턴으로 강화 — peek/pinned뿐
   아니라 향후 추가 상태(opening, transitioning 등) 또는 SSR/zustand persist hydrate 시점
   data-chart=""(빈 값) 케이스도 cover. closed가 명시될 때만 visible로 fail-safe. */
.market-layout:not([data-chart="closed"]) .vertical-index-ticker,
.market-layout:not([data-right="closed"]) .vertical-index-ticker {
  opacity: 0;
  pointer-events: none;
}

/* W2 D16 polish — KSTClock viewport별 압축.
   기본: short(시간만) 표시. >= 1600px에서만 full(날짜+시간) 표시.
   시세 chip 3개 추가로 발생한 1440px overflow 해결. */
.kst-clock__full { display: none; }
.kst-clock__short { display: inline; }
@media (min-width: 1600px) {
  .kst-clock__full { display: inline; }
  .kst-clock__short { display: none; }
}

/* W2 D16 Phase 1-B-1 추가: KSTClock + Bell도 < 768px에서 hide.
   KSTClock 190px(단일 최대) — Growth 권고 강등 1순위. Bell은 UserMenu 안 nested 후보. */
@media (max-width: 767px) {
  .topnav__group--bubble-size,
  .topnav__group--timeframe,
  .topnav__group--lang,
  .topnav__group--color,
  .topnav__group--clock,
  .topnav__group--bell {
    display: none;
  }
  /* W2 D18 심야 #3 (2026-05-12 23:11) — 사용자 명시 요청 "패널 chip 모바일에서도 보이게".
     PanelDropdown은 자동열림 옵션이 power user에게 자주 사용되어 mobile에서도
     접근 보장. TopNav 414px overflow ~430px 잔존(project_topnav_mobile_phase_1b)에
     약 50-60px 추가 — Phase 1-B overflow ⋯ menu 작업 시 우선순위 재조정 필요. */
  .topnav__group--panel { display: inline-flex; }
  /* Phase 1-B-2: ⋯ 버튼은 모바일에서만 show. 데스크톱에선 redundant. */
  .topnav__overflow-btn {
    display: inline-flex;
  }
}

/* W3 (2026-05-09) — TopBubbleActionBar Apple Liquid Glass.
   prefers-reduced-transparency 사용자(저시력/A11y) 시 background 0.95로 fallback,
   blur 비활성. 인라인 style보다 우선 적용 위해 !important. */
@media (prefers-reduced-transparency: reduce) {
  [data-glass="liquid"] {
    background: rgba(15, 15, 15, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   W2 D19 (2026-05-13) — Feedback FAB + Modal
   Spec: docs/superpowers/specs/2026-05-13-feedback-fab-design.md
   Z-index 480: PinToast 400 / StickyToast 410 위, CenterModal 1000 아래.
   ========================================================================== */

.feedback-fab {
  position: fixed;
  right: clamp(16px, 2vw, 24px);
  bottom: calc(clamp(16px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 20px rgba(124, 58, 237, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 480;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.feedback-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(124, 58, 237, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
.feedback-fab:active {
  transform: translateY(0);
}
.feedback-fab:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .feedback-fab {
    width: 52px;
    height: 52px;
  }
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.feedback-form__subtitle {
  margin: 0;
  font-size: var(--fluid-text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}
.feedback-form__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.feedback-form__legend {
  font-size: var(--fluid-text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  padding: 0;
}
.feedback-form__type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
}
@media (max-width: 480px) {
  .feedback-form__type-grid {
    grid-template-columns: 1fr;
  }
}
.feedback-form__type-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.feedback-form__type-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}
.feedback-form__type-card.is-selected {
  background: rgba(124, 58, 237, 0.18);
  border-color: #7c3aed;
}
.feedback-form__type-card:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
.feedback-form__type-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.feedback-form__type-label {
  font-size: var(--fluid-text-base);
  font-weight: 600;
}
.feedback-form__type-desc {
  font-size: var(--fluid-text-xs);
  color: rgba(255, 255, 255, 0.55);
}
.feedback-form__input,
.feedback-form__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: var(--fluid-text-base);
  font-family: inherit;
}
.feedback-form__input:focus,
.feedback-form__textarea:focus {
  outline: none;
  border-color: #a78bfa;
}
.feedback-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
.feedback-form__counter {
  align-self: flex-end;
  font-size: var(--fluid-text-xs);
  color: rgba(255, 255, 255, 0.45);
}
.feedback-form__error {
  margin: 0;
  font-size: var(--fluid-text-xs);
  color: #f87171;
}
.feedback-form__attach-stub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--fluid-text-sm);
}
.feedback-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.feedback-form__btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: var(--fluid-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.feedback-form__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.feedback-form__btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
}
.feedback-form__btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}
.feedback-form__btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: #fff;
}
.feedback-form__btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[3].use[1]!../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[3].use[2]!../../node_modules/.pnpm/next@14.2.35_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/font/local/target.css?{"path":"app/layout.tsx","import":"","arguments":[{"src":[{"path":"../public/fonts/Pretendard-Regular.woff2","weight":"400","style":"normal"},{"path":"../public/fonts/Pretendard-Bold.woff2","weight":"700","style":"normal"}],"variable":"--font-pretendard","display":"swap","preload":true,"fallback":["-apple-system","BlinkMacSystemFont","Apple SD Gothic Neo","system-ui","sans-serif"]}],"variableName":"pretendard"} ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
font-family: '__pretendard_a7a14f';
src: url(/_next/static/media/119cf01b445a4dc3-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: '__pretendard_a7a14f';
src: url(/_next/static/media/e00e15f44d7b58c0-s.p.woff2) format('woff2');
font-display: swap;
font-weight: 700;
font-style: normal;
}@font-face {font-family: '__pretendard_Fallback_a7a14f';src: local("Arial");ascent-override: 93.76%;descent-override: 23.75%;line-gap-override: 0.00%;size-adjust: 101.55%
}.__className_a7a14f {font-family: '__pretendard_a7a14f', '__pretendard_Fallback_a7a14f', -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, system-ui, sans-serif
}.__variable_a7a14f {--font-pretendard: '__pretendard_a7a14f', '__pretendard_Fallback_a7a14f', -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, system-ui, sans-serif
}